fix(app): add friendly not-found handling

apps/next/src/app/(app)/error.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useEffect } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+import { Button } from '@spoon/ui';
+
+const AppError = ({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) => {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <main className='flex min-h-[50vh] flex-col items-center justify-center gap-4 p-6 text-center'>
+      <h1 className='text-2xl font-semibold'>Something went wrong</h1>
+      <p className='text-muted-foreground max-w-md text-sm'>
+        This page hit an unexpected error. It has been reported.
+      </p>
+      <Button onClick={() => reset()}>Try again</Button>
+    </main>
+  );
+};
+
+export default AppError;

apps/next/src/app/(app)/not-found.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+
+import { Button } from '@spoon/ui';
+
+const NotFound = () => (
+  <main className='flex min-h-[50vh] flex-col items-center justify-center gap-4 p-6 text-center'>
+    <h1 className='text-2xl font-semibold'>Not found</h1>
+    <p className='text-muted-foreground max-w-md text-sm'>
+      This item does not exist, or you do not have access to it.
+    </p>
+    <Button asChild>
+      <Link href='/dashboard'>Back to dashboard</Link>
+    </Button>
+  </main>
+);
+
+export default NotFound;

apps/next/src/app/(app)/spoons/[spoonId]/agent/[jobId]/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { FunctionReturnType } from 'convex/server';
 import { useEffect } from 'react';
 import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
@@ -15,13 +16,33 @@ const AgentWorkspacePage = () => {
   const router = useRouter();
   const params = useParams<{ spoonId: string; jobId: string }>();
   const jobId = params.jobId as Id<'agentJobs'>;
-  const job = useQuery(api.agentJobs.get, { jobId });
+  const job = useQuery(api.agentJobs.get, { jobId }) as
+    | FunctionReturnType<typeof api.agentJobs.get>
+    | null
+    | undefined;
 
   useEffect(() => {
     if (job?.threadId) router.replace(`/threads/${job.threadId}`);
   }, [job?.threadId, router]);
 
-  if (job?.threadId) {
+  if (job === undefined) {
+    return (
+      <main className='text-muted-foreground p-6'>Loading workspace...</main>
+    );
+  }
+
+  if (job === null) {
+    return (
+      <main className='space-y-4 p-6'>
+        <p className='text-muted-foreground'>This workspace was not found.</p>
+        <Button asChild variant='outline' size='sm'>
+          <Link href={`/spoons/${params.spoonId}`}>Back to Spoon</Link>
+        </Button>
+      </main>
+    );
+  }
+
+  if (job.threadId) {
     return (
       <main className='text-muted-foreground p-6'>
         Opening thread workspace...

apps/next/src/app/(app)/threads/[threadId]/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { FunctionReturnType } from 'convex/server';
 import { useState } from 'react';
 import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
@@ -33,7 +34,10 @@ const ThreadDetailPage = () => {
   const router = useRouter();
   const params = useParams<{ threadId: string }>();
   const threadId = params.threadId as Id<'threads'>;
-  const details = useQuery(api.threads.get, { threadId });
+  const details = useQuery(api.threads.get, { threadId }) as
+    | FunctionReturnType<typeof api.threads.get>
+    | null
+    | undefined;
   const createJob = useMutation(api.agentJobs.createForThread);
   const markResolved = useMutation(api.threads.markResolved);
   const cancel = useMutation(api.threads.cancel);
@@ -43,6 +47,14 @@ const ThreadDetailPage = () => {
     return <main className='text-muted-foreground p-6'>Loading thread...</main>;
   }
 
+  if (details === null) {
+    return (
+      <main className='text-muted-foreground p-6'>
+        This thread was not found.
+      </main>
+    );
+  }
+
   const { thread, spoon, latestJob } = details;
   if (latestJob && spoon) {
     return (