allow users to delete threads from spoons details page

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

@@ -11,6 +11,7 @@ import { SpoonMetrics } from '@/components/spoons/spoon-metrics';
 import { SpoonPrList } from '@/components/spoons/spoon-pr-list';
 import { SpoonSecretsForm } from '@/components/spoons/spoon-secrets-form';
 import { SpoonSettingsForm } from '@/components/spoons/spoon-settings-form';
+import { DeleteThreadButton } from '@/components/threads/delete-thread-button';
 import { ThreadWorkspaceForm } from '@/components/threads/thread-workspace-form';
 import { useQuery } from 'convex/react';
 
@@ -54,6 +55,17 @@ const SpoonDetailPage = () => {
   });
   const agentJobs =
     useQuery(api.agentJobs.listForSpoon, { spoonId, limit: 25 }) ?? [];
+  const canDeleteThread = (thread: (typeof threads)[number]) => {
+    const latestJobStatus = thread.latestJobStatus;
+    const latestWorkspaceStatus = thread.latestJobWorkspaceStatus;
+    if (!latestJobStatus && !latestWorkspaceStatus) return true;
+    return (
+      ['failed', 'cancelled', 'timed_out', 'draft_pr_opened'].includes(
+        latestJobStatus ?? '',
+      ) ||
+      ['stopped', 'expired', 'failed'].includes(latestWorkspaceStatus ?? '')
+    );
+  };
 
   if (details === undefined) {
     return <main className='text-muted-foreground p-6'>Loading Spoon...</main>;
@@ -253,17 +265,29 @@ const SpoonDetailPage = () => {
             <CardContent className='space-y-3'>
               {threads.length ? (
                 threads.map((thread) => (
-                  <Link
+                  <div
                     key={thread._id}
-                    href={`/threads/${thread._id}`}
-                    className='border-border hover:border-primary/50 block rounded-md border p-3 transition-colors'
+                    className='border-border hover:border-primary/50 grid gap-3 rounded-md border p-3 transition-colors md:grid-cols-[1fr_auto] md:items-center'
                   >
-                    <p className='font-medium'>{thread.title}</p>
-                    <p className='text-muted-foreground mt-1 text-sm'>
-                      {thread.status.replaceAll('_', ' ')} ·{' '}
-                      {thread.source.replaceAll('_', ' ')}
-                    </p>
-                  </Link>
+                    <Link href={`/threads/${thread._id}`} className='min-w-0'>
+                      <p className='truncate font-medium'>{thread.title}</p>
+                      <p className='text-muted-foreground mt-1 text-sm'>
+                        {thread.status.replaceAll('_', ' ')} ·{' '}
+                        {thread.source.replaceAll('_', ' ')}
+                        {thread.latestJobWorkspaceStatus
+                          ? ` · workspace ${thread.latestJobWorkspaceStatus.replaceAll('_', ' ')}`
+                          : ''}
+                      </p>
+                    </Link>
+                    <div className='flex justify-start md:justify-end'>
+                      <DeleteThreadButton
+                        threadId={thread._id}
+                        disabled={!canDeleteThread(thread)}
+                        label='Delete'
+                        variant='outline'
+                      />
+                    </div>
+                  </div>
                 ))
               ) : (
                 <p className='text-muted-foreground text-sm'>