spiracha 2.1.0 → 2.2.0

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

@@ -12,24 +12,19 @@ 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 { grokSessionDetailQueryOptions } from '#/lib/grok-queries';
+import { grokSessionDetailQueryOptions, grokWorkspacesQueryOptions } from '#/lib/grok-queries';
 import { deleteGrokSessionFn, exportGrokSessionFn } from '#/lib/grok-server';
 import { getGrokThreadTranscriptStats, grokTranscriptToThreadEvents } from '#/lib/grok-transcript-events';
-
-type ExportDialogOptions = {
-    includeCommentary: boolean;
-    includeMetadata: boolean;
-    includeTools: boolean;
-    outputFormat: 'md' | 'txt';
-    zipArchive: boolean;
-};
+import { RouteStateResetBoundary } from '#/lib/route-state-reset';
+import { shouldNavigateToSourceIndexAfterDelete } from '#/lib/workspace-delete-navigation';
 
 type TranscriptControlsProps = {
     rawJsonDisabled?: boolean;
@@ -46,7 +41,7 @@ type TranscriptControlsProps = {
 };
 
 const GrokSessionDetailErrorComponent = ({ error }: { error: Error }) => {
-    return <ReloadErrorPanel description={error.message} title="Failed to load Grok session" />;
+    return <RouteErrorPanel error={error} title="Failed to load Grok session" />;
 };
 
 const buildSessionMetadata = (detail: GrokSessionTranscript) => [
@@ -205,6 +200,17 @@ const GrokSessionDetailPage = () => {
                 queryClient.invalidateQueries({ queryKey: ['grok-sessions', detail.session.workspaceKey] }),
                 queryClient.invalidateQueries({ queryKey: ['grok-session', detail.session.sessionId] }),
             ]);
+            const workspaces = await queryClient.fetchQuery(grokWorkspacesQueryOptions());
+            if (
+                shouldNavigateToSourceIndexAfterDelete(
+                    workspaces,
+                    detail.session.workspaceKey,
+                    (workspace) => workspace.key,
+                )
+            ) {
+                navigate({ to: '/grok' });
+                return;
+            }
             navigate({
                 params: { workspaceKey: detail.session.workspaceKey },
                 to: '/grok/$workspaceKey',
@@ -378,7 +384,14 @@ const GrokSessionDetailPage = () => {
 };
 
 export const Route = createFileRoute('/grok-sessions/$sessionId')({
-    component: GrokSessionDetailPage,
+    component: () => {
+        const { sessionId } = Route.useParams();
+        return (
+            <RouteStateResetBoundary routeKey={sessionId}>
+                <GrokSessionDetailPage />
+            </RouteStateResetBoundary>
+        );
+    },
     errorComponent: GrokSessionDetailErrorComponent,
     loader: ({ context, params }) =>
         context.queryClient.ensureQueryData(grokSessionDetailQueryOptions(params.sessionId)),

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

@@ -9,9 +9,10 @@ import { GrokSessionsTable } from '#/components/grok-sessions-table';
 import { ListSearchInput } from '#/components/list-search-input';
 import { LoadingPanel } from '#/components/loading-panel';
 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 { grokSessionsQueryOptions, grokWorkspacesQueryOptions } from '#/lib/grok-queries';
 import {
     deleteGrokSessionFn,
@@ -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: GrokSessionSummary[];
@@ -104,7 +97,7 @@ export const Route = createFileRoute('/grok/$workspaceKey')({
 });
 
 function GrokWorkspaceErrorComponent({ error }: { error: Error }) {
-    return <ReloadErrorPanel description={error.message} title="Failed to load Grok workspace" />;
+    return <RouteErrorPanel error={error} title="Failed to load Grok workspace" />;
 }
 
 function GrokWorkspacePage() {
@@ -120,20 +113,16 @@ function GrokWorkspacePage() {
     const deferredSearch = useDeferredValue(searchInput);
 
     const exportMutation = useMutation({
-        mutationFn: async (options: ExportDialogOptions) => {
-            if (!pendingExport) {
-                throw new Error('No Grok session selected for export');
-            }
-
+        mutationFn: async ({ ids, options }: ExportSelectionMutationInput) => {
             const download =
-                pendingExport.sessionIds.length === 1
+                ids.length === 1
                     ? await exportGrokSessionFn({
                           data: {
                               includeCommentary: options.includeCommentary,
                               includeMetadata: options.includeMetadata,
                               includeTools: options.includeTools,
                               outputFormat: options.outputFormat,
-                              sessionId: pendingExport.sessionIds[0]!,
+                              sessionId: ids[0]!,
                               zipArchive: options.zipArchive,
                           },
                       })
@@ -143,7 +132,7 @@ function GrokWorkspacePage() {
                               includeMetadata: options.includeMetadata,
                               includeTools: options.includeTools,
                               outputFormat: options.outputFormat,
-                              sessionIds: pendingExport.sessionIds,
+                              sessionIds: [...ids],
                               zipArchive: options.zipArchive,
                           },
                       });
@@ -164,13 +153,7 @@ function GrokWorkspacePage() {
             sessionIds.length === 1
                 ? deleteGrokSessionFn({ data: { sessionId: sessionIds[0]! } })
                 : deleteGrokSessionsFn({ data: { sessionIds } }),
-        onSuccess: async (_result, sessionIds) => {
-            const workspaceEmptied = isWorkspaceEmptiedByDelete(sessions, sessionIds, (session) => session.sessionId);
-            setPendingDelete(null);
-            if (workspaceEmptied) {
-                await navigate({ to: '/grok' });
-            }
-
+        onSettled: async (_result, _error, sessionIds) => {
             await Promise.all([
                 queryClient.invalidateQueries({ queryKey: ['grok-workspaces'] }),
                 queryClient.invalidateQueries({ queryKey: ['grok-sessions', workspace.key] }),
@@ -179,6 +162,13 @@ function GrokWorkspacePage() {
                 ),
             ]);
         },
+        onSuccess: async (_result, sessionIds) => {
+            const workspaceEmptied = isWorkspaceEmptiedByDelete(sessions, sessionIds, (session) => session.sessionId);
+            setPendingDelete(null);
+            if (workspaceEmptied) {
+                await navigate({ to: '/grok' });
+            }
+        },
     });
 
     const visibleSessions = useMemo(
@@ -263,7 +253,11 @@ function GrokWorkspacePage() {
                 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);

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

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

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

@@ -3,6 +3,7 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { MetricCard } from '#/components/metric-card';
 import { PageHeader } from '#/components/page-header';
 import { RecentThreadsList } from '#/components/recent-threads-list';
+import { RouteErrorPanel } from '#/components/route-error-panel';
 import { dashboardQueryOptions } from '#/lib/codex-queries';
 import { formatNumber, formatTokens } from '#/lib/formatters';
 
@@ -12,24 +13,7 @@ export const Route = createFileRoute('/')({
 });
 
 function DashboardErrorComponent({ 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 dashboard'}
-            </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 dashboard" />;
 }
 
 Route.update({ errorComponent: DashboardErrorComponent });

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

@@ -12,24 +12,19 @@ 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 { kiroSessionDetailQueryOptions } from '#/lib/kiro-queries';
+import { kiroSessionDetailQueryOptions, kiroWorkspacesQueryOptions } from '#/lib/kiro-queries';
 import { deleteKiroSessionFn, exportKiroSessionFn } from '#/lib/kiro-server';
 import { getKiroThreadTranscriptStats, kiroTranscriptToThreadEvents } from '#/lib/kiro-transcript-events';
-
-type ExportDialogOptions = {
-    includeCommentary: boolean;
-    includeMetadata: boolean;
-    includeTools: boolean;
-    outputFormat: 'md' | 'txt';
-    zipArchive: boolean;
-};
+import { RouteStateResetBoundary } from '#/lib/route-state-reset';
+import { shouldNavigateToSourceIndexAfterDelete } from '#/lib/workspace-delete-navigation';
 
 type TranscriptControlsProps = {
     rawJsonDisabled?: boolean;
@@ -46,7 +41,7 @@ type TranscriptControlsProps = {
 };
 
 const KiroSessionDetailErrorComponent = ({ error }: { error: Error }) => {
-    return <ReloadErrorPanel description={error.message} title="Failed to load Kiro session" />;
+    return <RouteErrorPanel error={error} title="Failed to load Kiro session" />;
 };
 
 const getKiroModelLabel = (detail: KiroSessionTranscript): string => {
@@ -216,6 +211,17 @@ const KiroSessionDetailPage = () => {
                 queryClient.invalidateQueries({ queryKey: ['kiro-sessions', detail.session.workspaceKey] }),
                 queryClient.invalidateQueries({ queryKey: ['kiro-session', detail.session.sessionId] }),
             ]);
+            const workspaces = await queryClient.fetchQuery(kiroWorkspacesQueryOptions());
+            if (
+                shouldNavigateToSourceIndexAfterDelete(
+                    workspaces,
+                    detail.session.workspaceKey,
+                    (workspace) => workspace.key,
+                )
+            ) {
+                navigate({ to: '/kiro' });
+                return;
+            }
             navigate({
                 params: { workspaceKey: detail.session.workspaceKey },
                 to: '/kiro/$workspaceKey',
@@ -383,7 +389,14 @@ const KiroSessionDetailPage = () => {
 };
 
 export const Route = createFileRoute('/kiro-sessions/$sessionId')({
-    component: KiroSessionDetailPage,
+    component: () => {
+        const { sessionId } = Route.useParams();
+        return (
+            <RouteStateResetBoundary routeKey={sessionId}>
+                <KiroSessionDetailPage />
+            </RouteStateResetBoundary>
+        );
+    },
     errorComponent: KiroSessionDetailErrorComponent,
     loader: ({ context, params }) =>
         context.queryClient.ensureQueryData(kiroSessionDetailQueryOptions(params.sessionId)),

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

@@ -9,9 +9,10 @@ import { KiroSessionsTable } from '#/components/kiro-sessions-table';
 import { ListSearchInput } from '#/components/list-search-input';
 import { LoadingPanel } from '#/components/loading-panel';
 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 { kiroSessionsQueryOptions, kiroWorkspacesQueryOptions } from '#/lib/kiro-queries';
 import {
     deleteKiroSessionFn,
@@ -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: KiroSessionSummary[];
@@ -93,7 +86,7 @@ const getDeleteTitle = (pendingDelete: PendingSessionDelete | null) => {
 };
 
 const KiroWorkspaceErrorComponent = ({ error }: { error: Error }) => {
-    return <ReloadErrorPanel description={error.message} title="Failed to load Kiro workspace" />;
+    return <RouteErrorPanel error={error} title="Failed to load Kiro workspace" />;
 };
 
 const KiroWorkspacePage = () => {
@@ -109,20 +102,16 @@ const KiroWorkspacePage = () => {
     const deferredSearch = useDeferredValue(searchInput);
 
     const exportMutation = useMutation({
-        mutationFn: async (options: ExportDialogOptions) => {
-            if (!pendingExport) {
-                throw new Error('No Kiro session selected for export');
-            }
-
+        mutationFn: async ({ ids, options }: ExportSelectionMutationInput) => {
             const download =
-                pendingExport.sessionIds.length === 1
+                ids.length === 1
                     ? await exportKiroSessionFn({
                           data: {
                               includeCommentary: options.includeCommentary,
                               includeMetadata: options.includeMetadata,
                               includeTools: options.includeTools,
                               outputFormat: options.outputFormat,
-                              sessionId: pendingExport.sessionIds[0]!,
+                              sessionId: ids[0]!,
                               zipArchive: options.zipArchive,
                           },
                       })
@@ -132,7 +121,7 @@ const KiroWorkspacePage = () => {
                               includeMetadata: options.includeMetadata,
                               includeTools: options.includeTools,
                               outputFormat: options.outputFormat,
-                              sessionIds: pendingExport.sessionIds,
+                              sessionIds: [...ids],
                               zipArchive: options.zipArchive,
                           },
                       });
@@ -153,13 +142,7 @@ const KiroWorkspacePage = () => {
             sessionIds.length === 1
                 ? deleteKiroSessionFn({ data: { sessionId: sessionIds[0]! } })
                 : deleteKiroSessionsFn({ data: { sessionIds } }),
-        onSuccess: async (_result, sessionIds) => {
-            const workspaceEmptied = isWorkspaceEmptiedByDelete(sessions, sessionIds, (session) => session.sessionId);
-            setPendingDelete(null);
-            if (workspaceEmptied) {
-                await navigate({ to: '/kiro' });
-            }
-
+        onSettled: async (_result, _error, sessionIds) => {
             await Promise.all([
                 queryClient.invalidateQueries({ queryKey: ['kiro-workspaces'] }),
                 queryClient.invalidateQueries({ queryKey: ['kiro-sessions', workspace.key] }),
@@ -168,6 +151,13 @@ const KiroWorkspacePage = () => {
                 ),
             ]);
         },
+        onSuccess: async (_result, sessionIds) => {
+            const workspaceEmptied = isWorkspaceEmptiedByDelete(sessions, sessionIds, (session) => session.sessionId);
+            setPendingDelete(null);
+            if (workspaceEmptied) {
+                await navigate({ to: '/kiro' });
+            }
+        },
     });
 
     const visibleSessions = useMemo(
@@ -242,11 +232,22 @@ const KiroWorkspacePage = () => {
             />
 
             <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);
@@ -255,12 +256,6 @@ const KiroWorkspacePage = () => {
                 }}
             />
 
-            {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/kiro.index.tsx

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

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

@@ -1,6 +1,6 @@
 import type { ThreadEvent, ThreadTranscriptStats } from '@spiracha/lib/codex-browser-types';
 import type { OpenCodeSessionTranscript } from '@spiracha/lib/opencode-exporter-types';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import { Download, Trash2 } from 'lucide-react';
 import { useMemo, useState } from 'react';
@@ -12,24 +12,19 @@ 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, formatTokens } from '#/lib/formatters';
-import { openCodeSessionDetailQueryOptions } from '#/lib/opencode-queries';
+import { openCodeSessionDetailQueryOptions, openCodeWorkspacesQueryOptions } from '#/lib/opencode-queries';
 import { deleteOpenCodeSessionFn, exportOpenCodeSessionFn } from '#/lib/opencode-server';
 import { getOpenCodeThreadTranscriptStats, openCodeTranscriptToThreadEvents } from '#/lib/opencode-transcript-events';
-
-type ExportDialogOptions = {
-    includeCommentary: boolean;
-    includeMetadata: boolean;
-    includeTools: boolean;
-    outputFormat: 'md' | 'txt';
-    zipArchive: boolean;
-};
+import { RouteStateResetBoundary } from '#/lib/route-state-reset';
+import { shouldNavigateToSourceIndexAfterDelete } from '#/lib/workspace-delete-navigation';
 
 type TranscriptControlsProps = {
     rawJsonDisabled?: boolean;
@@ -46,11 +41,9 @@ type TranscriptControlsProps = {
 };
 
 const OpenCodeSessionDetailErrorComponent = ({ error }: { error: Error }) => {
-    return <ReloadErrorPanel description={error.message} title="Failed to load OpenCode session" />;
+    return <RouteErrorPanel error={error} title="Failed to load OpenCode session" />;
 };
 
-const toError = (error: unknown) => (error instanceof Error ? error : new Error(String(error)));
-
 const buildSessionMetadata = (detail: OpenCodeSessionTranscript) => [
     { label: 'Session ID', value: <span data-mono="true">{detail.session.sessionId}</span> },
     {
@@ -165,8 +158,7 @@ const OpenCodeSessionDetailPage = () => {
     const navigate = useNavigate();
     const queryClient = useQueryClient();
     const params = Route.useParams();
-    const detailQuery = useQuery(openCodeSessionDetailQueryOptions(params.sessionId));
-    const detail = detailQuery.data ?? null;
+    const detail = useSuspenseQuery(openCodeSessionDetailQueryOptions(params.sessionId)).data;
     const [deleteOpen, setDeleteOpen] = useState(false);
     const [pendingExport, setPendingExport] = useState(false);
     const [showToolCalls, setShowToolCalls] = useState(false);
@@ -223,6 +215,17 @@ const OpenCodeSessionDetailPage = () => {
                 queryClient.invalidateQueries({ queryKey: ['opencode-sessions', detail.session.workspaceKey] }),
                 queryClient.invalidateQueries({ queryKey: ['opencode-session', detail.session.sessionId] }),
             ]);
+            const workspaces = await queryClient.fetchQuery(openCodeWorkspacesQueryOptions());
+            if (
+                shouldNavigateToSourceIndexAfterDelete(
+                    workspaces,
+                    detail.session.workspaceKey,
+                    (workspace) => workspace.key,
+                )
+            ) {
+                navigate({ to: '/opencode' });
+                return;
+            }
             navigate({
                 params: { workspaceKey: detail.session.workspaceKey },
                 to: '/opencode/$workspaceKey',
@@ -230,25 +233,6 @@ const OpenCodeSessionDetailPage = () => {
         },
     });
 
-    if (detailQuery.isLoading) {
-        return (
-            <LoadingPanel
-                description="Loading the OpenCode transcript, parts, and session metadata."
-                title="Loading session"
-            />
-        );
-    }
-
-    if (detailQuery.isError) {
-        return <OpenCodeSessionDetailErrorComponent error={toError(detailQuery.error)} />;
-    }
-
-    if (!detail) {
-        return (
-            <OpenCodeSessionDetailErrorComponent error={new Error(`OpenCode session not found: ${params.sessionId}`)} />
-        );
-    }
-
     return (
         <div className="space-y-6">
             <PageHeader
@@ -409,8 +393,17 @@ const OpenCodeSessionDetailPage = () => {
 };
 
 export const Route = createFileRoute('/opencode-sessions/$sessionId')({
-    component: OpenCodeSessionDetailPage,
+    component: () => {
+        const { sessionId } = Route.useParams();
+        return (
+            <RouteStateResetBoundary routeKey={sessionId}>
+                <OpenCodeSessionDetailPage />
+            </RouteStateResetBoundary>
+        );
+    },
     errorComponent: OpenCodeSessionDetailErrorComponent,
+    loader: ({ context, params }) =>
+        context.queryClient.ensureQueryData(openCodeSessionDetailQueryOptions(params.sessionId)),
     pendingComponent: () => (
         <LoadingPanel
             description="Loading the OpenCode transcript, parts, and session metadata."