spiracha 2.0.0 → 2.2.0

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

@@ -3,6 +3,8 @@ import { createRootRouteWithContext, HeadContent, Outlet, Scripts } from '@tanst
 import type { ReactNode } from 'react';
 import { AppShell } from '#/components/app-shell';
 import { TooltipProvider } from '#/components/ui/tooltip';
+import { getErrorPresentation } from '#/lib/error-presentation';
+import { getInitialSettingsFn } from '#/lib/settings-server';
 import { SettingsProvider } from '#/lib/settings-store';
 import appCss from '#/styles.css?url';
 
@@ -23,26 +25,18 @@ const themeInitScript = `
 `;
 
 function RootErrorComponent({ error }: { error: Error }) {
-    const isSqliteError =
-        error.message.includes('unable to open database') ||
-        error.message.includes('database is locked') ||
-        error.message.includes('SQLITE_');
+    const presentation = getErrorPresentation(error, { fallbackTitle: 'Something went wrong' });
 
     return (
         <div className="flex min-h-screen items-center justify-center bg-[#101418] px-4 text-[#eef3f7]">
             <div className="max-w-[30rem] text-center">
-                <h1 className="mb-3 font-semibold text-base">
-                    {isSqliteError ? 'Database unavailable' : 'Something went wrong'}
-                </h1>
-                {isSqliteError ? (
-                    <p className="my-2 text-[#99a3af] text-[0.875rem] leading-6">
-                        Spiracha could not open the Codex SQLite database. Codex may have an exclusive lock on the file,
-                        or the database does not exist yet. Close Codex or wait a moment, then reload.
-                    </p>
+                <h1 className="mb-3 font-semibold text-base">{presentation.title}</h1>
+                {presentation.isDatabaseError ? (
+                    <p className="my-2 text-[#99a3af] text-[0.875rem] leading-6">{presentation.description}</p>
                 ) : (
                     <p className="my-2 text-[#99a3af] text-[0.875rem] leading-6">
                         <code className="rounded border border-white/10 bg-[#12181e] px-1.5 py-1 text-[0.8em]">
-                            {error.message}
+                            {presentation.description}
                         </code>
                     </p>
                 )}
@@ -87,7 +81,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
             },
             {
                 content:
-                    'Browse local Codex, Claude Code, Kiro, Qoder, Cursor, Antigravity, and OpenCode history through a compact workspace UI.',
+                    'Browse local Codex, Claude Code, Grok, Kiro, Qoder, Cursor, Antigravity, and OpenCode history through a compact workspace UI.',
                 name: 'description',
             },
             {
@@ -95,12 +89,15 @@ export const Route = createRootRouteWithContext<RouterContext>()({
             },
         ],
     }),
+    loader: () => getInitialSettingsFn(),
 });
 
 function RootComponent() {
+    const initialSettings = Route.useLoaderData();
+
     return (
         <RootDocument>
-            <SettingsProvider>
+            <SettingsProvider initialSettings={initialSettings}>
                 <TooltipProvider>
                     <AppShell>
                         <Outlet />

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

@@ -1,9 +1,7 @@
-import type { ModelTokenSummary, ToolUsageSummary } from '@spiracha/lib/codex-browser-types';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import { createColumnHelper } from '@tanstack/react-table';
 import { startTransition } from 'react';
-import { DataTable } from '#/components/data-table';
+import { AnalyticsBreakdowns } from '#/components/analytics-breakdowns';
 import { MetricCard } from '#/components/metric-card';
 import { PageHeader } from '#/components/page-header';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '#/components/ui/select';
@@ -16,34 +14,6 @@ import {
     withAnalyticsProjectSearch,
 } from '#/lib/route-search';
 
-const toolUsageColumnHelper = createColumnHelper<ToolUsageSummary>();
-const toolUsageColumns = [
-    toolUsageColumnHelper.accessor('name', {
-        cell: (info) => <span className="font-mono text-sm">{info.getValue()}</span>,
-        header: 'Tool',
-    }),
-    toolUsageColumnHelper.accessor('count', {
-        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
-        header: 'Calls',
-    }),
-] as const;
-
-const modelColumnHelper = createColumnHelper<ModelTokenSummary>();
-const modelColumns = [
-    modelColumnHelper.accessor('model', {
-        cell: (info) => <span className="font-mono text-sm">{info.getValue()}</span>,
-        header: 'Model',
-    }),
-    modelColumnHelper.accessor('threadCount', {
-        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
-        header: 'Threads',
-    }),
-    modelColumnHelper.accessor('totalTokens', {
-        cell: (info) => <span className="font-mono text-sm">{formatTokens(info.getValue())}</span>,
-        header: 'Tokens',
-    }),
-] as const;
-
 export const Route = createFileRoute('/analytics')({
     component: AnalyticsPage,
     loader: ({ context, deps }) => {
@@ -98,7 +68,7 @@ function AnalyticsPage() {
                 title="Analytics"
             />
 
-            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
+            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                 <MetricCard label="Threads" value={formatNumber(analytics.summary.totalThreads)} />
                 <MetricCard label="Projects" value={formatNumber(analytics.summary.totalProjects)} />
                 <MetricCard label="Tokens" value={formatTokens(analytics.summary.totalTokens)} />
@@ -106,38 +76,17 @@ function AnalyticsPage() {
                     label="Average per thread"
                     value={formatTokens(Math.round(analytics.summary.averageTokensPerThread))}
                 />
+                <MetricCard label="Median per thread" value={formatTokens(analytics.summary.medianTokensPerThread)} />
                 <MetricCard label="Web search threads" value={formatNumber(analytics.summary.threadsWithWebSearch)} />
+                <MetricCard label="Archived threads" value={formatNumber(analytics.summary.archivedThreads)} />
             </div>
 
-            <div className="grid gap-4 xl:grid-cols-2">
-                <section className="space-y-4">
-                    <div>
-                        <h3 className="font-semibold text-sm">Most frequent tool calls</h3>
-                        <p className="mt-1 text-[var(--muted-foreground)] text-sm">
-                            Useful for future prompt and tool optimization work.
-                        </p>
-                    </div>
-                    <DataTable
-                        columns={toolUsageColumns}
-                        data={analytics.toolUsage}
-                        emptyMessage="No tool calls recorded."
-                    />
-                </section>
-
-                <section className="space-y-4">
-                    <div>
-                        <h3 className="font-semibold text-sm">Model token breakdown</h3>
-                        <p className="mt-1 text-[var(--muted-foreground)] text-sm">
-                            Compare model usage and token concentration within the current project scope.
-                        </p>
-                    </div>
-                    <DataTable
-                        columns={modelColumns}
-                        data={analytics.modelsByTokens}
-                        emptyMessage="No model usage recorded."
-                    />
-                </section>
-            </div>
+            <AnalyticsBreakdowns
+                modelsByTokens={analytics.modelsByTokens}
+                reasoningEfforts={analytics.reasoningEfforts}
+                sources={analytics.sources}
+                toolUsage={analytics.toolUsage}
+            />
         </div>
     );
 }

package/apps/ui/src/routes/antigravity-conversations.$conversationId.tsx

@@ -1,17 +1,19 @@
-import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
-import { createFileRoute, Link } from '@tanstack/react-router';
-import { Download, ScrollText } from 'lucide-react';
+import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
+import { Download, ScrollText, Trash2 } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { AntigravityKeychainPanel } from '#/components/antigravity-keychain-panel';
 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 { RouteErrorPanel } from '#/components/route-error-panel';
 import { TextDocumentPanel } from '#/components/text-document-panel';
-import { TranscriptView } from '#/components/transcript-view';
+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';
@@ -19,8 +21,10 @@ import { canExportAntigravityConversation } from '#/lib/antigravity-conversation
 import {
     antigravityConversationDetailQueryOptions,
     antigravityDecryptionQueryOptions,
+    antigravityWorkspacesQueryOptions,
 } from '#/lib/antigravity-queries';
 import {
+    deleteAntigravityConversationFn,
     exportAntigravityArtifactsFn,
     exportAntigravityConversationFn,
     type getAntigravityConversationDetailFn,
@@ -29,8 +33,11 @@ import {
     antigravityMarkdownToThreadEvents,
     getAntigravityThreadTranscriptStats,
 } from '#/lib/antigravity-transcript-events';
-import { downloadTextFile } from '#/lib/download';
-import { formatBytes, formatDateTime, formatNumber } from '#/lib/formatters';
+import { downloadTextFile, downloadUrlFile } from '#/lib/download';
+import type { ExportDialogOptions } from '#/lib/export-options';
+import { formatBytes, formatDateTime, formatList, formatNumber } from '#/lib/formatters';
+import { RouteStateResetBoundary } from '#/lib/route-state-reset';
+import { shouldNavigateToSourceIndexAfterDelete } from '#/lib/workspace-delete-navigation';
 
 type AntigravityConversationDetail = Awaited<ReturnType<typeof getAntigravityConversationDetailFn>>;
 
@@ -56,10 +63,10 @@ const buildConversationMetadata = (detail: AntigravityConversationDetail) => {
             value: (
                 <Link
                     className="text-[var(--accent)]"
-                    params={{ workspaceKey: detail.conversation.workspaceKey }}
+                    params={{ workspaceKey: detail.conversationGroup.key }}
                     to="/antigravity/$workspaceKey"
                 >
-                    {detail.conversation.workspaceLabel}
+                    {detail.conversationGroup.label}
                 </Link>
             ),
         },
@@ -95,7 +102,7 @@ const buildTranscriptStatsItems = (
 
     const stats = getAntigravityThreadTranscriptStats(events);
     return [
-        { label: 'Event kinds', value: [...new Set(events.map((event) => event.kind))].join(', ') || 'n/a' },
+        { label: 'Event kinds', value: formatList([...new Set(events.map((event) => event.kind))]) },
         { label: 'Messages', value: formatNumber(stats.messageCount) },
         { label: 'User messages', value: formatNumber(stats.userMessageCount) },
         { label: 'Assistant messages', value: formatNumber(stats.assistantMessageCount) },
@@ -106,8 +113,23 @@ const buildTranscriptStatsItems = (
     ];
 };
 
+const getConversationSizeLabel = (detail: AntigravityConversationDetail): string => {
+    if (detail.conversation.totalBytes > 0) {
+        return formatBytes(detail.conversation.totalBytes);
+    }
+
+    return detail.conversation.summaryPath ? 'Summary' : formatBytes(detail.conversation.totalBytes);
+};
+
 export const Route = createFileRoute('/antigravity-conversations/$conversationId')({
-    component: AntigravityConversationDetailPage,
+    component: () => {
+        const { conversationId } = Route.useParams();
+        return (
+            <RouteStateResetBoundary routeKey={conversationId}>
+                <AntigravityConversationDetailPage />
+            </RouteStateResetBoundary>
+        );
+    },
     errorComponent: AntigravityConversationDetailErrorComponent,
     loader: async ({ context, params }) => {
         await Promise.all([
@@ -124,7 +146,7 @@ export const Route = createFileRoute('/antigravity-conversations/$conversationId
 });
 
 function AntigravityConversationDetailErrorComponent({ error }: { error: Error }) {
-    return <ReloadErrorPanel description={error.message} title="Failed to load Antigravity conversation" />;
+    return <RouteErrorPanel error={error} title="Failed to load Antigravity conversation" />;
 }
 
 function AntigravityConversationHeaderActions({
@@ -133,6 +155,7 @@ function AntigravityConversationHeaderActions({
     exportArtifactsPending,
     exportConversationPending,
     showConversationExport,
+    onDeleteConversation,
     onExportArtifacts,
     onExportConversation,
 }: {
@@ -141,6 +164,7 @@ function AntigravityConversationHeaderActions({
     exportArtifactsPending: boolean;
     exportConversationPending: boolean;
     showConversationExport: boolean;
+    onDeleteConversation: () => void;
     onExportArtifacts: () => void;
     onExportConversation: () => void;
 }) {
@@ -170,6 +194,15 @@ function AntigravityConversationHeaderActions({
                     Export artifacts
                 </Button>
             ) : null}
+            <Button
+                className="rounded-full border-[var(--destructive)]/20 text-[var(--destructive)]"
+                type="button"
+                variant="outline"
+                onClick={onDeleteConversation}
+            >
+                <Trash2 className="mr-2 size-4" />
+                Delete
+            </Button>
         </div>
     );
 }
@@ -281,13 +314,17 @@ function AntigravityRawPanels({
 }
 
 function AntigravityConversationDetailPage() {
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
     const decryptionState = useSuspenseQuery(antigravityDecryptionQueryOptions()).data;
     const detail = useSuspenseQuery(antigravityConversationDetailQueryOptions(Route.useParams().conversationId)).data;
+    const [deleteOpen, setDeleteOpen] = useState(false);
+    const [exportOpen, setExportOpen] = 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(
         () => antigravityMarkdownToThreadEvents(detail.conversationMarkdown),
         [detail.conversationMarkdown],
@@ -300,10 +337,26 @@ function AntigravityConversationDetailPage() {
     const showConversationExport = canExportConversation || detail.transcriptLocked;
 
     const exportConversationMutation = useMutation({
-        mutationFn: () =>
-            exportAntigravityConversationFn({ data: { conversationId: detail.conversation.conversationId } }),
-        onSuccess: (result) => {
-            downloadTextFile(result.filename, result.content, 'text/markdown; charset=utf-8');
+        mutationFn: async (options: ExportDialogOptions) => {
+            const download = await exportAntigravityConversationFn({
+                data: {
+                    conversationId: detail.conversation.conversationId,
+                    includeCommentary: options.includeCommentary,
+                    includeMetadata: options.includeMetadata,
+                    includeTools: options.includeTools,
+                    outputFormat: options.outputFormat,
+                    zipArchive: options.zipArchive,
+                },
+            });
+            if (download.mode === 'download') {
+                downloadTextFile(download.fileName, download.content, download.mimeType);
+                return;
+            }
+
+            await downloadUrlFile(download.fileName, download.downloadUrl);
+        },
+        onSuccess: () => {
+            setExportOpen(false);
         },
     });
 
@@ -315,6 +368,37 @@ function AntigravityConversationDetailPage() {
         },
     });
 
+    const deleteConversationMutation = useMutation({
+        mutationFn: () =>
+            deleteAntigravityConversationFn({ data: { conversationId: detail.conversation.conversationId } }),
+        onSuccess: async () => {
+            await Promise.all([
+                queryClient.invalidateQueries({ queryKey: ['antigravity-workspaces'] }),
+                queryClient.invalidateQueries({
+                    queryKey: ['antigravity-conversations', detail.conversationGroup.key],
+                }),
+                queryClient.invalidateQueries({
+                    queryKey: ['antigravity-conversation', detail.conversation.conversationId],
+                }),
+            ]);
+            const workspaces = await queryClient.fetchQuery(antigravityWorkspacesQueryOptions());
+            if (
+                shouldNavigateToSourceIndexAfterDelete(
+                    workspaces,
+                    detail.conversationGroup.key,
+                    (workspace) => workspace.key,
+                )
+            ) {
+                navigate({ to: '/antigravity' });
+                return;
+            }
+            navigate({
+                params: { workspaceKey: detail.conversationGroup.key },
+                to: '/antigravity/$workspaceKey',
+            });
+        },
+    });
+
     return (
         <div className="space-y-6">
             <PageHeader
@@ -325,8 +409,9 @@ function AntigravityConversationDetailPage() {
                         exportArtifactsPending={exportArtifactsMutation.isPending}
                         exportConversationPending={exportConversationMutation.isPending}
                         showConversationExport={showConversationExport}
+                        onDeleteConversation={() => setDeleteOpen(true)}
                         onExportArtifacts={() => exportArtifactsMutation.mutate()}
-                        onExportConversation={() => exportConversationMutation.mutate()}
+                        onExportConversation={() => setExportOpen(true)}
                     />
                 }
                 breadcrumb={
@@ -334,8 +419,8 @@ function AntigravityConversationDetailPage() {
                         items={[
                             { label: 'Antigravity', to: '/antigravity' },
                             {
-                                label: detail.conversation.workspaceLabel,
-                                params: { workspaceKey: detail.conversation.workspaceKey },
+                                label: detail.conversationGroup.label,
+                                params: { workspaceKey: detail.conversationGroup.key },
                                 to: '/antigravity/$workspaceKey',
                             },
                             { label: detail.conversation.title },
@@ -352,7 +437,7 @@ function AntigravityConversationDetailPage() {
             <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                 <MetricCard label="Transcript entries" value={formatNumber(detail.conversation.transcriptEntryCount)} />
                 <MetricCard label="Artifacts" value={formatNumber(detail.conversation.artifactCount)} />
-                <MetricCard label="Size" value={formatBytes(detail.conversation.conversationBytes)} />
+                <MetricCard label="Size" value={getConversationSizeLabel(detail)} />
                 <MetricCard
                     helper={detail.conversation.transcriptSource ?? 'summary'}
                     label="Indexed items"
@@ -418,14 +503,6 @@ function AntigravityConversationDetailPage() {
                 </TabsContent>
             </Tabs>
 
-            {exportConversationMutation.isError ? (
-                <p className="text-[var(--destructive)] text-sm">
-                    {exportConversationMutation.error instanceof Error
-                        ? exportConversationMutation.error.message
-                        : 'Conversation export failed'}
-                </p>
-            ) : null}
-
             {exportArtifactsMutation.isError ? (
                 <p className="text-[var(--destructive)] text-sm">
                     {exportArtifactsMutation.error instanceof Error
@@ -433,6 +510,49 @@ function AntigravityConversationDetailPage() {
                         : 'Artifact export failed'}
                 </p>
             ) : null}
+
+            <ExportDialog
+                errorMessage={
+                    exportConversationMutation.isError
+                        ? exportConversationMutation.error instanceof Error
+                            ? exportConversationMutation.error.message
+                            : 'Conversation export failed'
+                        : null
+                }
+                open={exportOpen}
+                pending={exportConversationMutation.isPending}
+                showCommentaryOption={detail.conversation.transcriptSource !== 'safe-storage'}
+                showToolsOption={detail.conversation.transcriptSource !== 'safe-storage'}
+                title={`Export ${detail.conversation.title}`}
+                onExport={(options) => exportConversationMutation.mutate(options)}
+                onOpenChange={(open) => {
+                    setExportOpen(open);
+                    if (!open) {
+                        exportConversationMutation.reset();
+                    }
+                }}
+            />
+
+            <DeleteConfirmDialog
+                confirmLabel={deleteConversationMutation.isPending ? 'Deleting...' : 'Delete conversation'}
+                description="Permanently delete this Antigravity conversation from disk. This removes its summary entry, conversation file, transcript logs, and generated artifacts."
+                errorMessage={
+                    deleteConversationMutation.isError
+                        ? deleteConversationMutation.error instanceof Error
+                            ? deleteConversationMutation.error.message
+                            : 'Conversation delete failed'
+                        : null
+                }
+                open={deleteOpen}
+                title="Delete this Antigravity conversation?"
+                onConfirm={() => deleteConversationMutation.mutate()}
+                onOpenChange={(open) => {
+                    setDeleteOpen(open);
+                    if (!open) {
+                        deleteConversationMutation.reset();
+                    }
+                }}
+            />
         </div>
     );
 }