spiracha 2.1.0 → 2.2.0

package/apps/ui/src/routes/opencode.$workspaceKey.tsx

@@ -1,5 +1,5 @@
 import type { OpenCodeSessionSummary, OpenCodeWorkspaceGroup } from '@spiracha/lib/opencode-exporter-types';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Trash2 } from 'lucide-react';
 import { useDeferredValue, useMemo, useState } from 'react';
@@ -9,9 +9,10 @@ import { ListSearchInput } from '#/components/list-search-input';
 import { LoadingPanel } from '#/components/loading-panel';
 import { OpenCodeSessionsTable } from '#/components/opencode-sessions-table';
 import { PageHeader } from '#/components/page-header';
-import { ReloadErrorPanel } from '#/components/reload-error-panel';
+import { RouteErrorPanel } from '#/components/route-error-panel';
 import { Button } from '#/components/ui/button';
 import { downloadTextFile, downloadUrlFile } from '#/lib/download';
+import { createExportSelectionMutationInput, type ExportSelectionMutationInput } from '#/lib/export-mutation';
 import { openCodeSessionsQueryOptions, openCodeWorkspacesQueryOptions } from '#/lib/opencode-queries';
 import {
     deleteOpenCodeSessionFn,
@@ -22,14 +23,6 @@ import {
 import { matchesTextQuery } from '#/lib/text-filter';
 import { isWorkspaceEmptiedByDelete } from '#/lib/workspace-delete-navigation';
 
-type ExportDialogOptions = {
-    includeCommentary: boolean;
-    includeMetadata: boolean;
-    includeTools: boolean;
-    outputFormat: 'md' | 'txt';
-    zipArchive: boolean;
-};
-
 type PendingSessionDelete = {
     scope: 'all' | 'selected';
     sessions: OpenCodeSessionSummary[];
@@ -86,47 +79,36 @@ const getDeleteTitle = (pendingDelete: PendingSessionDelete | null) => {
 export const Route = createFileRoute('/opencode/$workspaceKey')({
     component: OpenCodeWorkspacePage,
     errorComponent: OpenCodeWorkspaceErrorComponent,
+    loader: async ({ context, params }) => {
+        const workspaces = await context.queryClient.ensureQueryData(openCodeWorkspacesQueryOptions());
+        findWorkspaceOrThrow(workspaces, params.workspaceKey);
+        await context.queryClient.ensureQueryData(openCodeSessionsQueryOptions(params.workspaceKey));
+    },
     pendingComponent: () => (
         <LoadingPanel description="Loading OpenCode sessions and transcript metadata." title="Loading workspace" />
     ),
 });
 
 function OpenCodeWorkspaceErrorComponent({ error }: { error: Error }) {
-    return <ReloadErrorPanel description={error.message} title="Failed to load OpenCode workspace" />;
+    return <RouteErrorPanel error={error} title="Failed to load OpenCode workspace" />;
 }
 
-const toError = (error: unknown) => (error instanceof Error ? error : new Error(String(error)));
-
-function OpenCodeWorkspacePage() {
-    const params = Route.useParams();
-    const workspacesQuery = useQuery(openCodeWorkspacesQueryOptions());
-    const workspaces = workspacesQuery.data ?? [];
-    const workspace = workspaces.find((candidate) => candidate.key === params.workspaceKey) ?? null;
-    const sessionsQuery = useQuery(openCodeSessionsQueryOptions(workspace?.key ?? null));
-
-    if (workspacesQuery.isLoading || (workspace && sessionsQuery.isLoading)) {
-        return (
-            <LoadingPanel description="Loading OpenCode sessions and transcript metadata." title="Loading workspace" />
-        );
-    }
-
-    if (workspacesQuery.isError) {
-        return <OpenCodeWorkspaceErrorComponent error={toError(workspacesQuery.error)} />;
-    }
-
+const findWorkspaceOrThrow = (workspaces: OpenCodeWorkspaceGroup[], workspaceKey: string) => {
+    const workspace = workspaces.find((candidate) => candidate.key === workspaceKey);
     if (!workspace) {
-        return (
-            <OpenCodeWorkspaceErrorComponent
-                error={new Error(`OpenCode workspace not found: ${params.workspaceKey}`)}
-            />
-        );
+        throw new Error(`OpenCode workspace not found: ${workspaceKey}`);
     }
 
-    if (sessionsQuery.isError) {
-        return <OpenCodeWorkspaceErrorComponent error={toError(sessionsQuery.error)} />;
-    }
+    return workspace;
+};
 
-    return <OpenCodeWorkspaceContent sessions={sessionsQuery.data ?? []} workspace={workspace} />;
+function OpenCodeWorkspacePage() {
+    const params = Route.useParams();
+    const workspaces = useSuspenseQuery(openCodeWorkspacesQueryOptions()).data;
+    const workspace = findWorkspaceOrThrow(workspaces, params.workspaceKey);
+    const sessions = useSuspenseQuery(openCodeSessionsQueryOptions(workspace.key)).data;
+
+    return <OpenCodeWorkspaceContent sessions={sessions} workspace={workspace} />;
 }
 
 function OpenCodeWorkspaceContent({
@@ -144,20 +126,16 @@ function OpenCodeWorkspaceContent({
     const deferredSearch = useDeferredValue(searchInput);
 
     const exportMutation = useMutation({
-        mutationFn: async (options: ExportDialogOptions) => {
-            if (!pendingExport) {
-                throw new Error('No OpenCode session selected for export');
-            }
-
+        mutationFn: async ({ ids, options }: ExportSelectionMutationInput) => {
             const download =
-                pendingExport.sessionIds.length === 1
+                ids.length === 1
                     ? await exportOpenCodeSessionFn({
                           data: {
                               includeCommentary: options.includeCommentary,
                               includeMetadata: options.includeMetadata,
                               includeTools: options.includeTools,
                               outputFormat: options.outputFormat,
-                              sessionId: pendingExport.sessionIds[0]!,
+                              sessionId: ids[0]!,
                               zipArchive: options.zipArchive,
                           },
                       })
@@ -167,7 +145,7 @@ function OpenCodeWorkspaceContent({
                               includeMetadata: options.includeMetadata,
                               includeTools: options.includeTools,
                               outputFormat: options.outputFormat,
-                              sessionIds: pendingExport.sessionIds,
+                              sessionIds: [...ids],
                               zipArchive: options.zipArchive,
                           },
                       });
@@ -188,13 +166,7 @@ function OpenCodeWorkspaceContent({
             sessionIds.length === 1
                 ? deleteOpenCodeSessionFn({ data: { sessionId: sessionIds[0]! } })
                 : deleteOpenCodeSessionsFn({ data: { sessionIds } }),
-        onSuccess: async (_result, sessionIds) => {
-            const workspaceEmptied = isWorkspaceEmptiedByDelete(sessions, sessionIds, (session) => session.sessionId);
-            setPendingDelete(null);
-            if (workspaceEmptied) {
-                await navigate({ to: '/opencode' });
-            }
-
+        onSettled: async (_result, _error, sessionIds) => {
             await Promise.all([
                 queryClient.invalidateQueries({ queryKey: ['opencode-workspaces'] }),
                 queryClient.invalidateQueries({ queryKey: ['opencode-sessions', workspace.key] }),
@@ -203,6 +175,13 @@ function OpenCodeWorkspaceContent({
                 ),
             ]);
         },
+        onSuccess: async (_result, sessionIds) => {
+            const workspaceEmptied = isWorkspaceEmptiedByDelete(sessions, sessionIds, (session) => session.sessionId);
+            setPendingDelete(null);
+            if (workspaceEmptied) {
+                await navigate({ to: '/opencode' });
+            }
+        },
     });
 
     const visibleSessions = useMemo(
@@ -279,11 +258,22 @@ function OpenCodeWorkspaceContent({
             />
 
             <ExportDialog
+                errorMessage={
+                    exportMutation.isError
+                        ? exportMutation.error instanceof Error
+                            ? exportMutation.error.message
+                            : 'Session export failed'
+                        : null
+                }
                 forceZipArchive={pendingExport ? pendingExport.sessionIds.length > 1 : false}
                 open={pendingExport !== null}
                 pending={exportMutation.isPending}
                 title={pendingExport ? `Export ${pendingExport.label}` : 'Export session'}
-                onExport={(options) => exportMutation.mutate(options)}
+                onExport={(options) => {
+                    if (pendingExport) {
+                        exportMutation.mutate(createExportSelectionMutationInput(pendingExport.sessionIds, options));
+                    }
+                }}
                 onOpenChange={(open) => {
                     if (!open) {
                         setPendingExport(null);
@@ -292,12 +282,6 @@ function OpenCodeWorkspaceContent({
                 }}
             />
 
-            {exportMutation.isError ? (
-                <p className="text-[var(--destructive)] text-sm">
-                    {exportMutation.error instanceof Error ? exportMutation.error.message : 'Session export failed'}
-                </p>
-            ) : null}
-
             <DeleteConfirmDialog
                 confirmLabel={getDeleteConfirmLabel(pendingDelete, deleteMutation.isPending)}
                 description={getDeleteDescription(pendingDelete)}

package/apps/ui/src/routes/opencode.index.tsx

@@ -1,40 +1,27 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { useDeferredValue, useState } from 'react';
 import { ListSearchInput } from '#/components/list-search-input';
 import { LoadingPanel } from '#/components/loading-panel';
 import { OpenCodeWorkspacesTable } from '#/components/opencode-workspaces-table';
 import { PageHeader } from '#/components/page-header';
-import { ReloadErrorPanel } from '#/components/reload-error-panel';
+import { RouteErrorPanel } from '#/components/route-error-panel';
 import { openCodeWorkspacesQueryOptions } from '#/lib/opencode-queries';
 import { matchesTextQuery } from '#/lib/text-filter';
 
 const OpenCodeErrorComponent = ({ error }: { error: Error }) => {
-    return <ReloadErrorPanel description={error.message} title="Failed to load OpenCode workspaces" />;
+    return <RouteErrorPanel error={error} title="Failed to load OpenCode workspaces" />;
 };
 
-const toError = (error: unknown) => (error instanceof Error ? error : new Error(String(error)));
-
 const OpenCodePage = () => {
-    const workspacesQuery = useQuery(openCodeWorkspacesQueryOptions());
+    const workspaces = useSuspenseQuery(openCodeWorkspacesQueryOptions()).data;
     const [searchInput, setSearchInput] = useState('');
     const deferredSearch = useDeferredValue(searchInput);
-    const workspaces = workspacesQuery.data ?? [];
 
     const visibleWorkspaces = workspaces.filter((workspace) =>
         matchesTextQuery(deferredSearch, [workspace.label, workspace.worktree, workspace.key, workspace.projectId]),
     );
 
-    if (workspacesQuery.isLoading) {
-        return (
-            <LoadingPanel description="Loading OpenCode workspaces and database metadata." title="Loading OpenCode" />
-        );
-    }
-
-    if (workspacesQuery.isError) {
-        return <OpenCodeErrorComponent error={toError(workspacesQuery.error)} />;
-    }
-
     return (
         <div className="space-y-6">
             <PageHeader
@@ -58,4 +45,8 @@ const OpenCodePage = () => {
 export const Route = createFileRoute('/opencode/')({
     component: OpenCodePage,
     errorComponent: OpenCodeErrorComponent,
+    loader: ({ context }) => context.queryClient.ensureQueryData(openCodeWorkspacesQueryOptions()),
+    pendingComponent: () => (
+        <LoadingPanel description="Loading OpenCode workspaces and database metadata." title="Loading OpenCode" />
+    ),
 });

package/apps/ui/src/routes/qoder-sessions.$sessionId.tsx

@@ -11,24 +11,18 @@ import { LoadingPanel } from '#/components/loading-panel';
 import { MetadataSection } from '#/components/metadata-section';
 import { MetricCard } from '#/components/metric-card';
 import { PageHeader } from '#/components/page-header';
-import { ReloadErrorPanel } from '#/components/reload-error-panel';
+import { RouteErrorPanel } from '#/components/route-error-panel';
 import { DEFAULT_SHOW_USER_MESSAGES, TranscriptView } from '#/components/transcript-view';
 import { Button } from '#/components/ui/button';
 import { Checkbox } from '#/components/ui/checkbox';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '#/components/ui/tabs';
 import { downloadTextFile, downloadUrlFile } from '#/lib/download';
+import type { ExportDialogOptions } from '#/lib/export-options';
 import { formatDateTime, formatList, formatNumber } from '#/lib/formatters';
 import { qoderSessionDetailQueryOptions } from '#/lib/qoder-queries';
 import { exportQoderSessionFn } from '#/lib/qoder-server';
 import { getQoderThreadTranscriptStats, qoderTranscriptToThreadEvents } from '#/lib/qoder-transcript-events';
-
-type ExportDialogOptions = {
-    includeCommentary: boolean;
-    includeMetadata: boolean;
-    includeTools: boolean;
-    outputFormat: 'md' | 'txt';
-    zipArchive: boolean;
-};
+import { RouteStateResetBoundary } from '#/lib/route-state-reset';
 
 type TranscriptControlsProps = {
     rawJsonDisabled?: boolean;
@@ -45,7 +39,7 @@ type TranscriptControlsProps = {
 };
 
 const QoderSessionDetailErrorComponent = ({ error }: { error: Error }) => {
-    return <ReloadErrorPanel description={error.message} title="Failed to load Qoder session" />;
+    return <RouteErrorPanel error={error} title="Failed to load Qoder session" />;
 };
 
 const buildSessionMetadata = (detail: QoderSessionTranscript) => [
@@ -331,7 +325,14 @@ const QoderSessionDetailPage = () => {
 };
 
 export const Route = createFileRoute('/qoder-sessions/$sessionId')({
-    component: QoderSessionDetailPage,
+    component: () => {
+        const { sessionId } = Route.useParams();
+        return (
+            <RouteStateResetBoundary routeKey={sessionId}>
+                <QoderSessionDetailPage />
+            </RouteStateResetBoundary>
+        );
+    },
     errorComponent: QoderSessionDetailErrorComponent,
     loader: ({ context, params }) =>
         context.queryClient.ensureQueryData(qoderSessionDetailQueryOptions(params.sessionId)),

package/apps/ui/src/routes/qoder.$workspaceKey.tsx

@@ -7,20 +7,13 @@ import { ListSearchInput } from '#/components/list-search-input';
 import { LoadingPanel } from '#/components/loading-panel';
 import { PageHeader } from '#/components/page-header';
 import { QoderSessionsTable } from '#/components/qoder-sessions-table';
-import { ReloadErrorPanel } from '#/components/reload-error-panel';
+import { RouteErrorPanel } from '#/components/route-error-panel';
 import { downloadTextFile, downloadUrlFile } from '#/lib/download';
+import { createExportSelectionMutationInput, type ExportSelectionMutationInput } from '#/lib/export-mutation';
 import { qoderSessionsQueryOptions, qoderWorkspacesQueryOptions } from '#/lib/qoder-queries';
 import { exportQoderSessionFn, exportQoderSessionsFn } from '#/lib/qoder-server';
 import { matchesTextQuery } from '#/lib/text-filter';
 
-type ExportDialogOptions = {
-    includeCommentary: boolean;
-    includeMetadata: boolean;
-    includeTools: boolean;
-    outputFormat: 'md' | 'txt';
-    zipArchive: boolean;
-};
-
 type PendingSessionExport = {
     label: string;
     sessionIds: string[];
@@ -36,7 +29,7 @@ const findWorkspaceOrThrow = (workspaces: QoderWorkspaceGroup[], workspaceKey: s
 };
 
 const QoderWorkspaceErrorComponent = ({ error }: { error: Error }) => {
-    return <ReloadErrorPanel description={error.message} title="Failed to load Qoder workspace" />;
+    return <RouteErrorPanel error={error} title="Failed to load Qoder workspace" />;
 };
 
 const QoderWorkspacePage = () => {
@@ -49,20 +42,16 @@ const QoderWorkspacePage = () => {
     const deferredSearch = useDeferredValue(searchInput);
 
     const exportMutation = useMutation({
-        mutationFn: async (options: ExportDialogOptions) => {
-            if (!pendingExport) {
-                throw new Error('No Qoder session selected for export');
-            }
-
+        mutationFn: async ({ ids, options }: ExportSelectionMutationInput) => {
             const download =
-                pendingExport.sessionIds.length === 1
+                ids.length === 1
                     ? await exportQoderSessionFn({
                           data: {
                               includeCommentary: options.includeCommentary,
                               includeMetadata: options.includeMetadata,
                               includeTools: options.includeTools,
                               outputFormat: options.outputFormat,
-                              sessionId: pendingExport.sessionIds[0]!,
+                              sessionId: ids[0]!,
                               zipArchive: options.zipArchive,
                           },
                       })
@@ -72,7 +61,7 @@ const QoderWorkspacePage = () => {
                               includeMetadata: options.includeMetadata,
                               includeTools: options.includeTools,
                               outputFormat: options.outputFormat,
-                              sessionIds: pendingExport.sessionIds,
+                              sessionIds: [...ids],
                               zipArchive: options.zipArchive,
                           },
                       });
@@ -150,11 +139,22 @@ const QoderWorkspacePage = () => {
             />
 
             <ExportDialog
+                errorMessage={
+                    exportMutation.isError
+                        ? exportMutation.error instanceof Error
+                            ? exportMutation.error.message
+                            : 'Session export failed'
+                        : null
+                }
                 forceZipArchive={pendingExport ? pendingExport.sessionIds.length > 1 : false}
                 open={pendingExport !== null}
                 pending={exportMutation.isPending}
                 title={pendingExport ? `Export ${pendingExport.label}` : 'Export session'}
-                onExport={(options) => exportMutation.mutate(options)}
+                onExport={(options) => {
+                    if (pendingExport) {
+                        exportMutation.mutate(createExportSelectionMutationInput(pendingExport.sessionIds, options));
+                    }
+                }}
                 onOpenChange={(open) => {
                     if (!open) {
                         setPendingExport(null);
@@ -162,12 +162,6 @@ const QoderWorkspacePage = () => {
                     }
                 }}
             />
-
-            {exportMutation.isError ? (
-                <p className="text-[var(--destructive)] text-sm">
-                    {exportMutation.error instanceof Error ? exportMutation.error.message : 'Session export failed'}
-                </p>
-            ) : null}
         </div>
     );
 };

package/apps/ui/src/routes/qoder.index.tsx

@@ -4,12 +4,12 @@ import { useDeferredValue, useState } from 'react';
 import { ListSearchInput } from '#/components/list-search-input';
 import { PageHeader } from '#/components/page-header';
 import { QoderWorkspacesTable } from '#/components/qoder-workspaces-table';
-import { ReloadErrorPanel } from '#/components/reload-error-panel';
+import { RouteErrorPanel } from '#/components/route-error-panel';
 import { qoderWorkspacesQueryOptions } from '#/lib/qoder-queries';
 import { matchesTextQuery } from '#/lib/text-filter';
 
 const QoderErrorComponent = ({ error }: { error: Error }) => {
-    return <ReloadErrorPanel description={error.message} title="Failed to load Qoder workspaces" />;
+    return <RouteErrorPanel error={error} title="Failed to load Qoder workspaces" />;
 };
 
 const QoderPage = () => {

package/apps/ui/src/routes/threads.$threadId.tsx

@@ -17,6 +17,9 @@ import { LoadingPanel } from '#/components/loading-panel';
 import { MetadataSection } from '#/components/metadata-section';
 import { MetricCard } from '#/components/metric-card';
 import { PageHeader } from '#/components/page-header';
+import { RouteErrorPanel } from '#/components/route-error-panel';
+import { ThreadGoalsPanel } from '#/components/thread-goals-panel';
+import { ThreadToolsPanel } from '#/components/thread-tools-panel';
 import {
     getTranscriptEventKey,
     shouldShowEvent,
@@ -43,13 +46,16 @@ import {
     formatModelLabel,
     formatTokens,
 } from '#/lib/formatters';
+import { getMutationErrorMessage } from '#/lib/mutation-error';
 import { applyPathTransforms } from '#/lib/path-utils';
 import {
     parseThreadTranscriptSearch,
     type ThreadTranscriptSearch,
     withThreadTranscriptSearch,
 } from '#/lib/route-search';
+import { RouteStateResetBoundary } from '#/lib/route-state-reset';
 import { useSettings } from '#/lib/settings-store';
+import { formatSandboxPolicy } from '#/lib/thread-metadata';
 import { shouldLoadFullThreadTranscript } from '#/lib/thread-transcript-load';
 
 type ThreadSnapshotResponse = Awaited<ReturnType<typeof getThreadSnapshotFn>>;
@@ -242,6 +248,7 @@ const buildRuntimeItems = (snapshot: ThreadSnapshot) => {
         { label: 'Reasoning effort', value: snapshot.thread.reasoning_effort ?? 'n/a' },
         { label: 'CLI version', value: snapshot.thread.cli_version },
         { label: 'Approval mode', value: snapshot.thread.approval_mode },
+        { label: 'Sandbox policy', value: formatSandboxPolicy(snapshot.thread.sandbox_policy) },
         { label: 'Memory mode', value: snapshot.thread.memory_mode },
         { label: 'Has user event', value: formatBooleanLabel(Boolean(snapshot.thread.has_user_event)) },
     ];
@@ -494,29 +501,7 @@ function ThreadMetadataPanels({ snapshot }: ThreadMetadataProps) {
 
             <div className="space-y-4">
                 <MetadataSection items={buildRelationItems(snapshot)} title="Relations and summary" />
-
-                <section className="rounded-[1.6rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]">
-                    <h3 className="font-semibold text-[var(--muted-foreground)] text-sm uppercase tracking-[0.18em]">
-                        Available tools
-                    </h3>
-                    <div className="mt-4 space-y-3">
-                        {snapshot.availableTools.map((tool) => (
-                            <div
-                                key={`${tool.name}-${tool.namespace ?? 'global'}`}
-                                className="rounded-xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3.5"
-                            >
-                                <div className="flex flex-wrap items-center gap-2">
-                                    <p className="font-medium font-mono text-sm">{tool.name}</p>
-                                    {tool.namespace ? <Badge variant="outline">{tool.namespace}</Badge> : null}
-                                </div>
-                                <p className="mt-1.5 text-[var(--muted-foreground)] text-sm">
-                                    {tool.description || 'No description.'}
-                                </p>
-                            </div>
-                        ))}
-                    </div>
-                </section>
-
+                <ThreadGoalsPanel goals={snapshot.goals} />
                 <MetadataSection items={buildTranscriptStatsItems(snapshot)} title="Transcript stats" />
             </div>
         </div>
@@ -609,24 +594,7 @@ function LargeThreadPreviewNotice({
 }
 
 function ThreadErrorComponent({ error }: { error: Error }) {
-    const isSqlite = error.message.includes('unable to open database') || error.message.includes('database is locked');
-    return (
-        <div className="rounded-xl border border-[var(--border)] bg-[var(--panel)] px-6 py-10 text-center">
-            <p className="font-medium text-[var(--destructive)] text-sm">
-                {isSqlite ? 'Database unavailable' : 'Failed to load thread'}
-            </p>
-            <p className="mt-2 text-[var(--muted-foreground)] text-sm">
-                {isSqlite ? 'Codex may have an exclusive lock on the database. Reload to retry.' : error.message}
-            </p>
-            <button
-                className="mt-4 text-[var(--accent)] text-sm underline-offset-2 hover:underline"
-                type="button"
-                onClick={() => window.location.reload()}
-            >
-                Reload
-            </button>
-        </div>
-    );
+    return <RouteErrorPanel error={error} title="Failed to load thread" />;
 }
 
 const getThreadExportErrorMessage = (transcriptMissing: boolean, error: unknown): string | null => {
@@ -640,16 +608,7 @@ const getThreadExportErrorMessage = (transcriptMissing: boolean, error: unknown)
 export const Route = createFileRoute('/threads/$threadId')({
     component: ThreadDetailPage,
     errorComponent: ThreadErrorComponent,
-    loader: ({ context, deps, params }) =>
-        context.queryClient.ensureQueryData(
-            threadSnapshotQueryOptions(
-                params.threadId,
-                (deps as { transcriptFilters: ThreadTranscriptFilters }).transcriptFilters,
-            ),
-        ),
-    loaderDeps: ({ search }) => ({
-        transcriptFilters: getTranscriptFiltersFromSearch(parseThreadTranscriptSearch(search)),
-    }),
+    loader: ({ context, params }) => context.queryClient.ensureQueryData(threadSnapshotQueryOptions(params.threadId)),
     pendingComponent: () => (
         <LoadingPanel
             description="Loading the transcript, metadata, and parsed event stream for this thread."
@@ -811,11 +770,47 @@ function ThreadTranscriptTab({
     );
 }
 
-function ThreadDetailPage() {
+function ThreadToolsTab({
+    loadingTranscript,
+    showRawJson,
+    snapshot,
+    sortOrder,
+    transcript,
+    onLoadTranscript,
+    onSortOrderChange,
+}: {
+    loadingTranscript: boolean;
+    showRawJson: boolean;
+    snapshot: ThreadSnapshot;
+    sortOrder: TranscriptSortOrder;
+    transcript: ThreadTranscript | null;
+    onLoadTranscript: () => void;
+    onSortOrderChange: (value: TranscriptSortOrder) => void;
+}) {
+    return (
+        <TabsContent value="tools">
+            <ThreadToolsPanel
+                assistantModel={snapshot.thread.model}
+                availableTools={snapshot.availableTools}
+                events={transcript?.events ?? null}
+                loadingTranscript={loadingTranscript}
+                projectPath={snapshot.thread.cwd}
+                showRawJson={showRawJson && Boolean(transcript?.rawIncluded)}
+                sortOrder={sortOrder}
+                transcriptIsPartial={transcript?.isPartial}
+                transcriptState={transcript ? 'available' : snapshot.transcriptState}
+                onLoadTranscript={onLoadTranscript}
+                onSortOrderChange={onSortOrderChange}
+            />
+        </TabsContent>
+    );
+}
+
+function ThreadDetailPageContent() {
     const { navigate, search, transcriptFilters, updateTranscriptSearch } = useThreadTranscriptRouteSearch();
     const queryClient = useQueryClient();
     const params = Route.useParams();
-    const snapshot = useSuspenseQuery(threadSnapshotQueryOptions(params.threadId, transcriptFilters)).data;
+    const snapshot = useSuspenseQuery(threadSnapshotQueryOptions(params.threadId)).data;
     const { settings } = useSettings();
     const transcriptMissing = snapshot.transcriptState === 'missing';
     const [shouldLoadTranscript, setShouldLoadTranscript] = useState(
@@ -959,6 +954,9 @@ function ThreadDetailPage() {
                 },
             }),
         onSuccess: async () => {
+            queryClient.removeQueries({ queryKey: ['thread', snapshot.thread.id] });
+            queryClient.removeQueries({ queryKey: ['thread-transcript-preview', snapshot.thread.id] });
+            queryClient.removeQueries({ queryKey: ['thread-transcript', snapshot.thread.id] });
             await Promise.all([
                 queryClient.invalidateQueries({ queryKey: ['analytics'] }),
                 queryClient.invalidateQueries({ queryKey: ['dashboard'] }),
@@ -1027,10 +1025,13 @@ function ThreadDetailPage() {
             </div>
 
             <Tabs className="space-y-4" defaultValue="transcript">
-                <TabsList className="grid w-fit min-w-[24rem] grid-cols-3 rounded-full border border-[var(--border)] bg-[var(--panel)] p-1">
+                <TabsList className="grid w-full grid-cols-4 rounded-full border border-[var(--border)] bg-[var(--panel)] p-1 sm:w-fit sm:min-w-[30rem]">
                     <TabsTrigger className="rounded-full px-5 text-sm" value="transcript">
                         Transcript
                     </TabsTrigger>
+                    <TabsTrigger className="rounded-full px-5 text-sm" value="tools">
+                        Tools
+                    </TabsTrigger>
                     <TabsTrigger className="rounded-full px-5 text-sm" value="metadata">
                         Metadata
                     </TabsTrigger>
@@ -1066,6 +1067,16 @@ function ThreadDetailPage() {
                     onTranscriptFilterChange={updateTranscriptFilter}
                 />
 
+                <ThreadToolsTab
+                    loadingTranscript={transcriptQuery.isFetching}
+                    showRawJson={showRawJson}
+                    snapshot={viewSnapshot}
+                    sortOrder={sortOrder}
+                    transcript={transcript}
+                    onLoadTranscript={() => setShouldLoadTranscript(true)}
+                    onSortOrderChange={updateSortOrder}
+                />
+
                 <TabsContent value="metadata">
                     <ThreadMetadataPanels snapshot={viewSnapshot} />
                 </TabsContent>
@@ -1079,11 +1090,17 @@ function ThreadDetailPage() {
                 confirmLabel={deleteThreadMutation.isPending ? 'Deleting...' : 'Delete thread'}
                 defaultDeleteSessionFiles
                 description="Delete this thread from the Codex database. Enable Delete Session files if you also want to remove the rollout JSONL from disk."
+                errorMessage={getMutationErrorMessage(deleteThreadMutation.error, 'Thread delete failed')}
                 open={deleteOpen}
                 showDeleteSessionFilesOption
                 title="Delete this thread from Codex DB?"
                 onConfirm={({ deleteSessionFiles }) => deleteThreadMutation.mutate({ deleteSessionFiles })}
-                onOpenChange={setDeleteOpen}
+                onOpenChange={(open) => {
+                    setDeleteOpen(open);
+                    if (!open) {
+                        deleteThreadMutation.reset();
+                    }
+                }}
             />
 
             <ExportDialog
@@ -1096,8 +1113,22 @@ function ThreadDetailPage() {
                         exportThreadMutation.mutate(options);
                     }
                 }}
-                onOpenChange={setExportOpen}
+                onOpenChange={(open) => {
+                    setExportOpen(open);
+                    if (!open) {
+                        exportThreadMutation.reset();
+                    }
+                }}
             />
         </div>
     );
 }
+
+function ThreadDetailPage() {
+    const { threadId } = Route.useParams();
+    return (
+        <RouteStateResetBoundary routeKey={threadId}>
+            <ThreadDetailPageContent />
+        </RouteStateResetBoundary>
+    );
+}