spiracha 2.0.0 → 2.2.0

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

@@ -1,37 +1,37 @@
 import type { ClaudeCodeSessionTranscript } from '@spiracha/lib/claude-code-exporter-types';
 import type { ThreadEvent, ThreadTranscriptStats } from '@spiracha/lib/codex-browser-types';
-import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
-import { createFileRoute, Link } from '@tanstack/react-router';
-import { Download } from 'lucide-react';
+import { useMutation, useQuery, 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';
 import { Breadcrumbs } from '#/components/breadcrumbs';
+import { DeleteConfirmDialog } from '#/components/delete-confirm-dialog';
 import { ExportDialog } from '#/components/export-dialog';
 import { JsonPanel } from '#/components/json-panel';
 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 { TranscriptView } from '#/components/transcript-view';
+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 { claudeCodeSessionDetailQueryOptions } from '#/lib/claude-code-queries';
-import { exportClaudeCodeSessionFn } from '#/lib/claude-code-server';
+import {
+    claudeCodeSessionDetailQueryOptions,
+    claudeCodeSessionTranscriptQueryOptions,
+    claudeCodeWorkspacesQueryOptions,
+} from '#/lib/claude-code-queries';
+import { deleteClaudeCodeSessionFn, exportClaudeCodeSessionFn } from '#/lib/claude-code-server';
 import {
     claudeCodeTranscriptToThreadEvents,
     getClaudeCodeThreadTranscriptStats,
 } from '#/lib/claude-code-transcript-events';
 import { downloadTextFile, downloadUrlFile } from '#/lib/download';
+import type { ExportDialogOptions } from '#/lib/export-options';
 import { formatDateTime, formatList, formatNumber, formatTokens } from '#/lib/formatters';
-
-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;
@@ -48,7 +48,14 @@ type TranscriptControlsProps = {
 };
 
 export const Route = createFileRoute('/claude-code-sessions/$sessionId')({
-    component: ClaudeCodeSessionDetailPage,
+    component: () => {
+        const { sessionId } = Route.useParams();
+        return (
+            <RouteStateResetBoundary routeKey={sessionId}>
+                <ClaudeCodeSessionDetailPage />
+            </RouteStateResetBoundary>
+        );
+    },
     errorComponent: ClaudeCodeSessionDetailErrorComponent,
     loader: ({ context, params }) =>
         context.queryClient.ensureQueryData(claudeCodeSessionDetailQueryOptions(params.sessionId)),
@@ -61,7 +68,7 @@ export const Route = createFileRoute('/claude-code-sessions/$sessionId')({
 });
 
 function ClaudeCodeSessionDetailErrorComponent({ error }: { error: Error }) {
-    return <ReloadErrorPanel description={error.message} title="Failed to load Claude Code session" />;
+    return <RouteErrorPanel error={error} title="Failed to load Claude Code session" />;
 }
 
 const buildSessionMetadata = (detail: ClaudeCodeSessionTranscript) => [
@@ -169,6 +176,20 @@ const ClaudeCodeTranscriptControls = ({
 };
 
 function ClaudeCodeRawPanels({ detail, events }: { detail: ClaudeCodeSessionTranscript; events: ThreadEvent[] }) {
+    if (detail.rawPayloadsOmitted) {
+        return (
+            <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]">
+                    Raw payloads omitted
+                </h3>
+                <p className="mt-4 text-[var(--muted-foreground)] text-sm">
+                    This Claude Code session is large, so raw JSON payload copies were omitted from the browser detail
+                    response. Export still reads the full source session from disk.
+                </p>
+            </section>
+        );
+    }
+
     return (
         <div className="space-y-4">
             <JsonPanel title="Session summary" value={detail.session} />
@@ -179,14 +200,57 @@ function ClaudeCodeRawPanels({ detail, events }: { detail: ClaudeCodeSessionTran
     );
 }
 
+const ClaudeCodeTranscriptPreviewNotice = ({
+    fullTranscriptLoaded,
+    omittedEntryCount,
+    pending,
+    onLoad,
+}: {
+    fullTranscriptLoaded: boolean;
+    omittedEntryCount: number;
+    pending: boolean;
+    onLoad: () => void;
+}) => {
+    const buttonLabel = fullTranscriptLoaded
+        ? 'Full transcript loaded'
+        : pending
+          ? 'Loading full transcript...'
+          : 'Load Full Transcript';
+
+    return (
+        <section className="rounded-[1.6rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]">
+            <h3 className="font-semibold text-base">Showing a compact transcript preview</h3>
+            <p className="mt-2 text-[var(--muted-foreground)] text-sm leading-6">
+                Spiracha omitted {formatNumber(omittedEntryCount)} internal transcript entries from the initial page
+                load. The preview keeps the beginning and latest activity.
+            </p>
+            <div className="mt-4">
+                <Button disabled={pending || fullTranscriptLoaded} variant="outline" onClick={onLoad}>
+                    {buttonLabel}
+                </Button>
+            </div>
+        </section>
+    );
+};
+
 function ClaudeCodeSessionDetailPage() {
-    const detail = useSuspenseQuery(claudeCodeSessionDetailQueryOptions(Route.useParams().sessionId)).data;
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const params = Route.useParams();
+    const initialDetail = useSuspenseQuery(claudeCodeSessionDetailQueryOptions(params.sessionId)).data;
+    const [shouldLoadFullTranscript, setShouldLoadFullTranscript] = useState(false);
+    const fullTranscriptQuery = useQuery({
+        ...claudeCodeSessionTranscriptQueryOptions(params.sessionId),
+        enabled: shouldLoadFullTranscript,
+    });
+    const detail = fullTranscriptQuery.data ?? initialDetail;
+    const [deleteOpen, setDeleteOpen] = useState(false);
     const [pendingExport, setPendingExport] = useState(false);
     const [showToolCalls, setShowToolCalls] = useState(false);
     const [showCommentary, setShowCommentary] = useState(false);
     const [showExtraEvents, setShowExtraEvents] = useState(false);
     const [showRawJson, setShowRawJson] = useState(false);
-    const [showUserMessages, setShowUserMessages] = useState(true);
+    const [showUserMessages, setShowUserMessages] = useState(DEFAULT_SHOW_USER_MESSAGES);
     const transcriptEvents = useMemo(() => claudeCodeTranscriptToThreadEvents(detail), [detail]);
     const transcriptStats = useMemo(() => getClaudeCodeThreadTranscriptStats(transcriptEvents), [transcriptEvents]);
 
@@ -214,19 +278,58 @@ function ClaudeCodeSessionDetailPage() {
         },
     });
 
+    const deleteSessionMutation = useMutation({
+        mutationFn: () => deleteClaudeCodeSessionFn({ data: { sessionId: detail.session.sessionId } }),
+        onSuccess: async () => {
+            await Promise.all([
+                queryClient.invalidateQueries({ queryKey: ['claude-code-workspaces'] }),
+                queryClient.invalidateQueries({ queryKey: ['claude-code-sessions', detail.session.workspaceKey] }),
+                queryClient.invalidateQueries({ queryKey: ['claude-code-session', detail.session.sessionId] }),
+                queryClient.invalidateQueries({ queryKey: ['claude-code-session', params.sessionId] }),
+                queryClient.invalidateQueries({ queryKey: ['claude-code-session-transcript', params.sessionId] }),
+            ]);
+            const workspaces = await queryClient.fetchQuery(claudeCodeWorkspacesQueryOptions());
+            if (
+                shouldNavigateToSourceIndexAfterDelete(
+                    workspaces,
+                    detail.session.workspaceKey,
+                    (workspace) => workspace.key,
+                )
+            ) {
+                navigate({ to: '/claude-code' });
+                return;
+            }
+            navigate({
+                params: { workspaceKey: detail.session.workspaceKey },
+                to: '/claude-code/$workspaceKey',
+            });
+        },
+    });
+
     return (
         <div className="space-y-6">
             <PageHeader
                 actions={
-                    <Button
-                        className="rounded-full"
-                        type="button"
-                        variant="outline"
-                        onClick={() => setPendingExport(true)}
-                    >
-                        <Download className="mr-2 size-4" />
-                        Export
-                    </Button>
+                    <>
+                        <Button
+                            className="rounded-full"
+                            type="button"
+                            variant="outline"
+                            onClick={() => setPendingExport(true)}
+                        >
+                            <Download className="mr-2 size-4" />
+                            Export
+                        </Button>
+                        <Button
+                            className="rounded-full border-[var(--destructive)]/20 text-[var(--destructive)]"
+                            type="button"
+                            variant="outline"
+                            onClick={() => setDeleteOpen(true)}
+                        >
+                            <Trash2 className="mr-2 size-4" />
+                            Delete
+                        </Button>
+                    </>
                 }
                 breadcrumb={
                     <Breadcrumbs
@@ -280,6 +383,22 @@ function ClaudeCodeSessionDetailPage() {
                         onShowToolCallsChange={setShowToolCalls}
                         onShowUserMessagesChange={setShowUserMessages}
                     />
+                    {initialDetail.isPartial ? (
+                        <ClaudeCodeTranscriptPreviewNotice
+                            fullTranscriptLoaded={Boolean(fullTranscriptQuery.data)}
+                            omittedEntryCount={initialDetail.omittedEntryCount ?? 0}
+                            pending={fullTranscriptQuery.isFetching}
+                            onLoad={() => setShouldLoadFullTranscript(true)}
+                        />
+                    ) : null}
+                    {fullTranscriptQuery.isError ? (
+                        <p className="text-[var(--destructive)] text-sm">
+                            Failed to load the full transcript:{' '}
+                            {fullTranscriptQuery.error instanceof Error
+                                ? fullTranscriptQuery.error.message
+                                : 'Unknown error'}
+                        </p>
+                    ) : null}
                     {transcriptEvents.length > 0 ? (
                         <TranscriptView
                             assistantModel={detail.session.model}
@@ -337,6 +456,27 @@ function ClaudeCodeSessionDetailPage() {
                     }
                 }}
             />
+
+            <DeleteConfirmDialog
+                confirmLabel={deleteSessionMutation.isPending ? 'Deleting...' : 'Delete session'}
+                description="Permanently delete this Claude Code session from disk. This removes the session JSONL file."
+                errorMessage={
+                    deleteSessionMutation.isError
+                        ? deleteSessionMutation.error instanceof Error
+                            ? deleteSessionMutation.error.message
+                            : 'Session delete failed'
+                        : null
+                }
+                open={deleteOpen}
+                title="Delete this Claude Code session?"
+                onConfirm={() => deleteSessionMutation.mutate()}
+                onOpenChange={(open) => {
+                    setDeleteOpen(open);
+                    if (!open) {
+                        deleteSessionMutation.reset();
+                    }
+                }}
+            />
         </div>
     );
 }

package/apps/ui/src/routes/claude-code.$workspaceKey.tsx

@@ -1,24 +1,33 @@
 import type { ClaudeCodeSessionSummary, ClaudeCodeWorkspaceGroup } from '@spiracha/lib/claude-code-exporter-types';
-import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
-import { createFileRoute } from '@tanstack/react-router';
-import { useDeferredValue, useState } from 'react';
+import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useDeferredValue, useMemo, useState } from 'react';
 import { ClaudeCodeSessionsTable } from '#/components/claude-code-sessions-table';
+import { DeleteConfirmDialog } from '#/components/delete-confirm-dialog';
 import { ExportDialog } from '#/components/export-dialog';
 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 { claudeCodeSessionsQueryOptions, claudeCodeWorkspacesQueryOptions } from '#/lib/claude-code-queries';
-import { exportClaudeCodeSessionFn } from '#/lib/claude-code-server';
+import {
+    deleteClaudeCodeSessionFn,
+    deleteClaudeCodeSessionsFn,
+    exportClaudeCodeSessionFn,
+    exportClaudeCodeSessionsFn,
+} from '#/lib/claude-code-server';
 import { downloadTextFile, downloadUrlFile } from '#/lib/download';
+import { createExportSelectionMutationInput, type ExportSelectionMutationInput } from '#/lib/export-mutation';
 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 = {
+    sessions: ClaudeCodeSessionSummary[];
+};
+
+type PendingSessionExport = {
+    label: string;
+    sessionIds: string[];
 };
 
 const findWorkspaceOrThrow = (workspaces: ClaudeCodeWorkspaceGroup[], workspaceKey: string) => {
@@ -30,6 +39,36 @@ const findWorkspaceOrThrow = (workspaces: ClaudeCodeWorkspaceGroup[], workspaceK
     return workspace;
 };
 
+const buildSessionExport = (selectedSessions: ClaudeCodeSessionSummary[]): PendingSessionExport => ({
+    label: selectedSessions.length === 1 ? selectedSessions[0]!.title : `${selectedSessions.length} selected sessions`,
+    sessionIds: selectedSessions.map((session) => session.sessionId),
+});
+
+const getDeleteConfirmLabel = (pendingDelete: PendingSessionDelete | null, isPending: boolean) => {
+    if (isPending) {
+        return 'Deleting...';
+    }
+
+    return pendingDelete && pendingDelete.sessions.length > 1 ? 'Delete sessions' : 'Delete session';
+};
+
+const getDeleteDescription = (pendingDelete: PendingSessionDelete | null) => {
+    if (!pendingDelete) {
+        return 'Permanently delete the selected Claude Code sessions from disk.';
+    }
+
+    if (pendingDelete.sessions.length === 1) {
+        return `Permanently delete "${pendingDelete.sessions[0]!.title}" from Claude Code history. This removes the session JSONL file from disk.`;
+    }
+
+    return `Permanently delete ${pendingDelete.sessions.length} selected Claude Code sessions from disk.`;
+};
+
+const getDeleteTitle = (pendingDelete: PendingSessionDelete | null) =>
+    pendingDelete && pendingDelete.sessions.length > 1
+        ? `Delete ${pendingDelete.sessions.length} Claude Code sessions?`
+        : 'Delete this Claude Code session?';
+
 export const Route = createFileRoute('/claude-code/$workspaceKey')({
     component: ClaudeCodeWorkspacePage,
     errorComponent: ClaudeCodeWorkspaceErrorComponent,
@@ -44,34 +83,45 @@ export const Route = createFileRoute('/claude-code/$workspaceKey')({
 });
 
 function ClaudeCodeWorkspaceErrorComponent({ error }: { error: Error }) {
-    return <ReloadErrorPanel description={error.message} title="Failed to load Claude Code workspace" />;
+    return <RouteErrorPanel error={error} title="Failed to load Claude Code workspace" />;
 }
 
 function ClaudeCodeWorkspacePage() {
+    const navigate = useNavigate({ from: Route.fullPath });
     const params = Route.useParams();
+    const queryClient = useQueryClient();
     const workspaces = useSuspenseQuery(claudeCodeWorkspacesQueryOptions()).data;
     const workspace = findWorkspaceOrThrow(workspaces, params.workspaceKey);
     const sessions = useSuspenseQuery(claudeCodeSessionsQueryOptions(workspace.key)).data;
     const [searchInput, setSearchInput] = useState('');
-    const [pendingExport, setPendingExport] = useState<ClaudeCodeSessionSummary | null>(null);
+    const [pendingDelete, setPendingDelete] = useState<PendingSessionDelete | null>(null);
+    const [pendingExport, setPendingExport] = useState<PendingSessionExport | null>(null);
     const deferredSearch = useDeferredValue(searchInput);
 
     const exportMutation = useMutation({
-        mutationFn: async (options: ExportDialogOptions) => {
-            if (!pendingExport) {
-                throw new Error('No Claude Code session selected for export');
-            }
-
-            const download = await exportClaudeCodeSessionFn({
-                data: {
-                    includeCommentary: options.includeCommentary,
-                    includeMetadata: options.includeMetadata,
-                    includeTools: options.includeTools,
-                    outputFormat: options.outputFormat,
-                    sessionId: pendingExport.sessionId,
-                    zipArchive: options.zipArchive,
-                },
-            });
+        mutationFn: async ({ ids, options }: ExportSelectionMutationInput) => {
+            const download =
+                ids.length === 1
+                    ? await exportClaudeCodeSessionFn({
+                          data: {
+                              includeCommentary: options.includeCommentary,
+                              includeMetadata: options.includeMetadata,
+                              includeTools: options.includeTools,
+                              outputFormat: options.outputFormat,
+                              sessionId: ids[0]!,
+                              zipArchive: options.zipArchive,
+                          },
+                      })
+                    : await exportClaudeCodeSessionsFn({
+                          data: {
+                              includeCommentary: options.includeCommentary,
+                              includeMetadata: options.includeMetadata,
+                              includeTools: options.includeTools,
+                              outputFormat: options.outputFormat,
+                              sessionIds: [...ids],
+                              zipArchive: options.zipArchive,
+                          },
+                      });
             if (download.mode === 'download') {
                 downloadTextFile(download.fileName, download.content, download.mimeType);
                 return;
@@ -84,16 +134,63 @@ function ClaudeCodeWorkspacePage() {
         },
     });
 
-    const visibleSessions = sessions.filter((session) =>
-        matchesTextQuery(deferredSearch, [
-            session.title,
-            session.sessionId,
-            session.model,
-            session.version,
-            session.gitBranch,
-            session.filePath,
-        ]),
+    const deleteMutation = useMutation({
+        mutationFn: async (sessionIds: string[]) =>
+            sessionIds.length === 1
+                ? deleteClaudeCodeSessionFn({ data: { sessionId: sessionIds[0]! } })
+                : deleteClaudeCodeSessionsFn({ data: { sessionIds } }),
+        onSettled: async (_result, _error, sessionIds) => {
+            await Promise.all([
+                queryClient.invalidateQueries({ queryKey: ['claude-code-workspaces'] }),
+                queryClient.invalidateQueries({ queryKey: ['claude-code-sessions', workspace.key] }),
+                ...sessionIds.map((sessionId) =>
+                    queryClient.invalidateQueries({ queryKey: ['claude-code-session', sessionId] }),
+                ),
+            ]);
+        },
+        onSuccess: async (_result, sessionIds) => {
+            const workspaceEmptied = isWorkspaceEmptiedByDelete(sessions, sessionIds, (session) => session.sessionId);
+            setPendingDelete(null);
+            if (workspaceEmptied) {
+                await navigate({ to: '/claude-code' });
+            }
+        },
+    });
+
+    const visibleSessions = useMemo(
+        () =>
+            sessions.filter((session) =>
+                matchesTextQuery(deferredSearch, [
+                    session.title,
+                    session.sessionId,
+                    session.model,
+                    session.version,
+                    session.gitBranch,
+                    session.filePath,
+                ]),
+            ),
+        [deferredSearch, sessions],
+    );
+    const visibleSessionsById = useMemo(
+        () => new Map(visibleSessions.map((session) => [session.sessionId, session])),
+        [visibleSessions],
     );
+    const lookupSelectedSessions = (sessionIds: string[]) =>
+        sessionIds
+            .map((sessionId) => visibleSessionsById.get(sessionId) ?? null)
+            .filter((session): session is ClaudeCodeSessionSummary => session !== null);
+    const openExportForSessions = (selectedSessions: ClaudeCodeSessionSummary[]) => {
+        if (selectedSessions.length === 0) {
+            return;
+        }
+
+        setPendingExport(buildSessionExport(selectedSessions));
+    };
+    const openDeleteForSessions = (selectedSessions: ClaudeCodeSessionSummary[]) => {
+        if (selectedSessions.length > 0) {
+            setPendingDelete({ sessions: selectedSessions });
+        }
+    };
 
     return (
         <div className="space-y-6">
@@ -110,13 +207,31 @@ function ClaudeCodeWorkspacePage() {
                 title={workspace.label}
             />
 
-            <ClaudeCodeSessionsTable sessions={visibleSessions} onExportSession={setPendingExport} />
+            <ClaudeCodeSessionsTable
+                sessions={visibleSessions}
+                onDeleteSession={(session) => openDeleteForSessions([session])}
+                onDeleteSessions={(sessionIds) => openDeleteForSessions(lookupSelectedSessions(sessionIds))}
+                onExportSession={(session) => openExportForSessions([session])}
+                onExportSessions={(sessionIds) => openExportForSessions(lookupSelectedSessions(sessionIds))}
+            />
 
             <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.title}` : 'Export session'}
-                onExport={(options) => exportMutation.mutate(options)}
+                title={pendingExport ? `Export ${pendingExport.label}` : 'Export session'}
+                onExport={(options) => {
+                    if (pendingExport) {
+                        exportMutation.mutate(createExportSelectionMutationInput(pendingExport.sessionIds, options));
+                    }
+                }}
                 onOpenChange={(open) => {
                     if (!open) {
                         setPendingExport(null);
@@ -125,11 +240,30 @@ function ClaudeCodeWorkspacePage() {
                 }}
             />
 
-            {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)}
+                errorMessage={
+                    deleteMutation.isError
+                        ? deleteMutation.error instanceof Error
+                            ? deleteMutation.error.message
+                            : 'Session delete failed'
+                        : null
+                }
+                open={pendingDelete !== null}
+                title={getDeleteTitle(pendingDelete)}
+                onConfirm={() => {
+                    if (pendingDelete) {
+                        deleteMutation.mutate(pendingDelete.sessions.map((session) => session.sessionId));
+                    }
+                }}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        setPendingDelete(null);
+                        deleteMutation.reset();
+                    }
+                }}
+            />
         </div>
     );
 }

package/apps/ui/src/routes/claude-code.index.tsx

@@ -4,7 +4,7 @@ import { useDeferredValue, useState } from 'react';
 import { ClaudeCodeWorkspacesTable } from '#/components/claude-code-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 { claudeCodeWorkspacesQueryOptions } from '#/lib/claude-code-queries';
 import { matchesTextQuery } from '#/lib/text-filter';
 
@@ -15,7 +15,7 @@ export const Route = createFileRoute('/claude-code/')({
 });
 
 function ClaudeCodeErrorComponent({ error }: { error: Error }) {
-    return <ReloadErrorPanel description={error.message} title="Failed to load Claude Code workspaces" />;
+    return <RouteErrorPanel error={error} title="Failed to load Claude Code workspaces" />;
 }
 
 function ClaudeCodePage() {