spiracha 2.1.0 → 2.2.0

package/apps/ui/src/components/delete-confirm-dialog.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useId, useState } from 'react';
 import {
     AlertDialog,
-    AlertDialogAction,
     AlertDialogCancel,
     AlertDialogContent,
     AlertDialogDescription,
@@ -9,6 +8,7 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from '#/components/ui/alert-dialog';
+import { Button } from '#/components/ui/button';
 import { Checkbox } from '#/components/ui/checkbox';
 
 type DeleteConfirmDialogProps = {
@@ -75,12 +75,13 @@ export function DeleteConfirmDialog({
                 {errorMessage ? <p className="text-[var(--destructive)] text-sm">{errorMessage}</p> : null}
                 <AlertDialogFooter>
                     <AlertDialogCancel className="border-[var(--border)]">Cancel</AlertDialogCancel>
-                    <AlertDialogAction
+                    <Button
                         className="bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:bg-[var(--destructive)]/90"
+                        type="button"
                         onClick={() => onConfirm({ deleteSessionFiles })}
                     >
                         {confirmLabel}
-                    </AlertDialogAction>
+                    </Button>
                 </AlertDialogFooter>
             </AlertDialogContent>
         </AlertDialog>

package/apps/ui/src/components/export-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { Button } from '#/components/ui/button';
 import { Checkbox } from '#/components/ui/checkbox';
 import {
@@ -10,6 +10,8 @@ import {
     DialogTitle,
 } from '#/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '#/components/ui/select';
+import type { ExportDialogOptions } from '#/lib/export-options';
+import { useSettings } from '#/lib/settings-store';
 
 type ExportDialogProps = {
     disabled?: boolean;
@@ -17,14 +19,10 @@ type ExportDialogProps = {
     forceZipArchive?: boolean;
     open: boolean;
     pending?: boolean;
+    showCommentaryOption?: boolean;
+    showToolsOption?: boolean;
     title?: string;
-    onExport: (options: {
-        includeCommentary: boolean;
-        includeMetadata: boolean;
-        includeTools: boolean;
-        outputFormat: 'md' | 'txt';
-        zipArchive: boolean;
-    }) => void;
+    onExport: (options: ExportDialogOptions) => void;
     onOpenChange: (open: boolean) => void;
 };
 
@@ -34,27 +32,49 @@ export function ExportDialog({
     forceZipArchive = false,
     open,
     pending = false,
+    showCommentaryOption = true,
+    showToolsOption = true,
     title = 'Export thread',
     onExport,
     onOpenChange,
 }: ExportDialogProps) {
-    const [outputFormat, setOutputFormat] = useState<'md' | 'txt'>('md');
-    const [includeMetadata, setIncludeMetadata] = useState(true);
-    const [includeCommentary, setIncludeCommentary] = useState(false);
-    const [includeTools, setIncludeTools] = useState(true);
-    const [zipArchive, setZipArchive] = useState(false);
-    const effectiveZipArchive = forceZipArchive || zipArchive;
+    const { settings, updateSetting } = useSettings();
+    const [options, setOptions] = useState<ExportDialogOptions>(settings.exportDefaults);
+    const [submitted, setSubmitted] = useState(false);
+    const submissionInProgress = useRef(false);
+    const previousPending = useRef(pending);
+    const effectiveZipArchive = forceZipArchive || options.zipArchive;
     const zipDescriptionId = useId();
 
     useEffect(() => {
         if (!open) {
-            setOutputFormat('md');
-            setIncludeMetadata(true);
-            setIncludeCommentary(false);
-            setIncludeTools(true);
-            setZipArchive(false);
+            setOptions(settings.exportDefaults);
+            setSubmitted(false);
+            submissionInProgress.current = false;
         }
-    }, [open]);
+    }, [open, settings.exportDefaults]);
+
+    useEffect(() => {
+        if ((previousPending.current && !pending) || errorMessage) {
+            setSubmitted(false);
+            submissionInProgress.current = false;
+        }
+        previousPending.current = pending;
+    }, [errorMessage, pending]);
+
+    const updateOption = <K extends keyof ExportDialogOptions>(key: K, value: ExportDialogOptions[K]) => {
+        setOptions((current) => ({ ...current, [key]: value }));
+    };
+
+    const submitExport = () => {
+        if (submissionInProgress.current) {
+            return;
+        }
+        submissionInProgress.current = true;
+        setSubmitted(true);
+        updateSetting('exportDefaults', options);
+        onExport({ ...options, zipArchive: effectiveZipArchive });
+    };
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
@@ -62,7 +82,7 @@ export function ExportDialog({
                 <DialogHeader>
                     <DialogTitle>{title}</DialogTitle>
                     <DialogDescription className="text-[var(--muted-foreground)]">
-                        Choose the transcript format and whether the export includes tool calls.
+                        Choose the transcript format and export options.
                     </DialogDescription>
                 </DialogHeader>
 
@@ -71,7 +91,10 @@ export function ExportDialog({
                         <label className="font-medium text-sm" htmlFor="output-format">
                             Output format
                         </label>
-                        <Select value={outputFormat} onValueChange={(value) => setOutputFormat(value as 'md' | 'txt')}>
+                        <Select
+                            value={options.outputFormat}
+                            onValueChange={(value) => updateOption('outputFormat', value as 'md' | 'txt')}
+                        >
                             <SelectTrigger
                                 id="output-format"
                                 className="border-[var(--border)] bg-[var(--panel-secondary)] text-[var(--foreground)]"
@@ -88,8 +111,8 @@ export function ExportDialog({
                     <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
                         <Checkbox
                             aria-label="Include metadata"
-                            checked={includeMetadata}
-                            onCheckedChange={(checked) => setIncludeMetadata(checked === true)}
+                            checked={options.includeMetadata}
+                            onCheckedChange={(checked) => updateOption('includeMetadata', checked === true)}
                         />
                         <span className="space-y-1">
                             <span className="block font-medium text-sm">Include metadata</span>
@@ -99,33 +122,37 @@ export function ExportDialog({
                         </span>
                     </div>
 
-                    <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
-                        <Checkbox
-                            aria-label="Include commentary"
-                            checked={includeCommentary}
-                            onCheckedChange={(checked) => setIncludeCommentary(checked === true)}
-                        />
-                        <span className="space-y-1">
-                            <span className="block font-medium text-sm">Include commentary</span>
-                            <span className="block text-[var(--muted-foreground)] text-sm">
-                                Includes assistant commentary-phase updates in the exported transcript.
+                    {showCommentaryOption ? (
+                        <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
+                            <Checkbox
+                                aria-label="Include commentary"
+                                checked={options.includeCommentary}
+                                onCheckedChange={(checked) => updateOption('includeCommentary', checked === true)}
+                            />
+                            <span className="space-y-1">
+                                <span className="block font-medium text-sm">Include commentary</span>
+                                <span className="block text-[var(--muted-foreground)] text-sm">
+                                    Includes assistant commentary-phase updates in the exported transcript.
+                                </span>
                             </span>
-                        </span>
-                    </div>
+                        </div>
+                    ) : null}
 
-                    <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
-                        <Checkbox
-                            aria-label="Include tool calls"
-                            checked={includeTools}
-                            onCheckedChange={(checked) => setIncludeTools(checked === true)}
-                        />
-                        <span className="space-y-1">
-                            <span className="block font-medium text-sm">Include tool calls</span>
-                            <span className="block text-[var(--muted-foreground)] text-sm">
-                                Includes tool-call summaries and tool-output summaries in the export.
+                    {showToolsOption ? (
+                        <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
+                            <Checkbox
+                                aria-label="Include tool calls"
+                                checked={options.includeTools}
+                                onCheckedChange={(checked) => updateOption('includeTools', checked === true)}
+                            />
+                            <span className="space-y-1">
+                                <span className="block font-medium text-sm">Include tool calls</span>
+                                <span className="block text-[var(--muted-foreground)] text-sm">
+                                    Includes tool-call summaries and tool-output summaries in the export.
+                                </span>
                             </span>
-                        </span>
-                    </div>
+                        </div>
+                    ) : null}
 
                     <div className="flex items-center gap-3 rounded-2xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3">
                         <Checkbox
@@ -133,7 +160,7 @@ export function ExportDialog({
                             aria-describedby={zipDescriptionId}
                             checked={effectiveZipArchive}
                             disabled={forceZipArchive}
-                            onCheckedChange={(checked) => setZipArchive(checked === true)}
+                            onCheckedChange={(checked) => updateOption('zipArchive', checked === true)}
                         />
                         <span className="space-y-1">
                             <span className="block font-medium text-sm">Zip archive</span>
@@ -152,19 +179,7 @@ export function ExportDialog({
                     <Button className="rounded-full" variant="outline" onClick={() => onOpenChange(false)}>
                         Cancel
                     </Button>
-                    <Button
-                        className="rounded-full"
-                        disabled={pending || disabled}
-                        onClick={() =>
-                            onExport({
-                                includeCommentary,
-                                includeMetadata,
-                                includeTools,
-                                outputFormat,
-                                zipArchive: effectiveZipArchive,
-                            })
-                        }
-                    >
+                    <Button className="rounded-full" disabled={pending || disabled || submitted} onClick={submitExport}>
                         {pending ? 'Exporting...' : 'Download export'}
                     </Button>
                 </DialogFooter>

package/apps/ui/src/components/projects-table.tsx

@@ -2,6 +2,7 @@ import type { ProjectSummary } from '@spiracha/lib/codex-browser-types';
 import { Link } from '@tanstack/react-router';
 import { createColumnHelper } from '@tanstack/react-table';
 import { MoreHorizontal, Trash2 } from 'lucide-react';
+import { useMemo } from 'react';
 import { DataTable } from '#/components/data-table';
 import { Button } from '#/components/ui/button';
 import {
@@ -71,6 +72,7 @@ const columns = (onDeleteProject: (project: ProjectSummary) => void) =>
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <Button
+                            aria-label={`Actions for ${info.row.original.name}`}
                             className="rounded-full"
                             size="icon"
                             type="button"
@@ -97,9 +99,10 @@ const columns = (onDeleteProject: (project: ProjectSummary) => void) =>
     ] as const;
 
 export function ProjectsTable({ projects, onDeleteProject }: ProjectsTableProps) {
+    const memoizedColumns = useMemo(() => columns(onDeleteProject), [onDeleteProject]);
     return (
         <DataTable
-            columns={columns(onDeleteProject)}
+            columns={memoizedColumns}
             data={projects}
             emptyMessage="No projects match the current search."
             initialSorting={[{ desc: true, id: 'lastUpdatedAtMs' }]}

package/apps/ui/src/components/route-error-panel.tsx

@@ -0,0 +1,13 @@
+import { getErrorPresentation } from '#/lib/error-presentation';
+import { ReloadErrorPanel } from './reload-error-panel';
+
+type RouteErrorPanelProps = {
+    error: Error;
+    title: string;
+};
+
+export const RouteErrorPanel = ({ error, title }: RouteErrorPanelProps) => {
+    const presentation = getErrorPresentation(error, { fallbackTitle: title });
+
+    return <ReloadErrorPanel description={presentation.description} title={presentation.title} />;
+};

package/apps/ui/src/components/thread-goals-panel.tsx

@@ -0,0 +1,50 @@
+import type { ThreadGoal } from '@spiracha/lib/codex-browser-types';
+import { Badge } from '#/components/ui/badge';
+import { formatNumber } from '#/lib/formatters';
+
+const formatGoalStatus = (status: string) => status.replaceAll(/[-_]+/gu, ' ');
+
+const formatElapsedTime = (seconds: number) => {
+    const wholeSeconds = Math.max(0, Math.floor(seconds));
+    const hours = Math.floor(wholeSeconds / 3_600);
+    const minutes = Math.floor((wholeSeconds % 3_600) / 60);
+    const remainingSeconds = wholeSeconds % 60;
+
+    return [hours > 0 ? `${hours}h` : null, minutes > 0 ? `${minutes}m` : null, `${remainingSeconds}s`]
+        .filter(Boolean)
+        .join(' ');
+};
+
+const formatGoalTokens = (goal: ThreadGoal) => {
+    const used = formatNumber(goal.tokensUsed);
+    return goal.tokenBudget === null ? `${used} tokens used` : `${used} / ${formatNumber(goal.tokenBudget)} tokens`;
+};
+
+export function ThreadGoalsPanel({ goals }: { goals: ThreadGoal[] }) {
+    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]">Goals</h3>
+            {goals.length === 0 ? (
+                <p className="mt-4 text-[var(--muted-foreground)] text-sm">No goals were recorded for this thread.</p>
+            ) : (
+                <div className="mt-4 space-y-3">
+                    {goals.map((goal) => (
+                        <article
+                            key={goal.goalId}
+                            className="rounded-xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3.5"
+                        >
+                            <div className="flex flex-wrap items-start justify-between gap-2">
+                                <p className="font-medium text-sm leading-6">{goal.objective}</p>
+                                <Badge variant="outline">{formatGoalStatus(goal.status)}</Badge>
+                            </div>
+                            <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[var(--muted-foreground)] text-xs">
+                                <span>{formatGoalTokens(goal)}</span>
+                                <span>{formatElapsedTime(goal.timeUsedSeconds)}</span>
+                            </div>
+                        </article>
+                    ))}
+                </div>
+            )}
+        </section>
+    );
+}

package/apps/ui/src/components/thread-tools-panel.tsx

@@ -0,0 +1,142 @@
+import type { DynamicToolDefinition, ThreadEvent } from '@spiracha/lib/codex-browser-types';
+import { type TranscriptSortOrder, TranscriptView } from '#/components/transcript-view';
+import { Badge } from '#/components/ui/badge';
+import { Button } from '#/components/ui/button';
+
+type ThreadToolsPanelProps = {
+    assistantModel: string | null;
+    availableTools: DynamicToolDefinition[];
+    events: ThreadEvent[] | null;
+    loadingTranscript?: boolean;
+    projectPath: string | null;
+    showRawJson: boolean;
+    sortOrder: TranscriptSortOrder;
+    transcriptIsPartial?: boolean;
+    transcriptState: 'available' | 'deferred' | 'missing';
+    onLoadTranscript?: () => void;
+    onSortOrderChange?: (value: TranscriptSortOrder) => void;
+};
+
+const getToolActivityEvents = (events: ThreadEvent[]) =>
+    events.filter((event) => event.kind === 'tool_call' || event.kind === 'tool_output' || event.kind === 'web_search');
+
+const sortJsonKeys = (value: unknown): unknown => {
+    if (Array.isArray(value)) {
+        return value.map(sortJsonKeys);
+    }
+    if (value && typeof value === 'object') {
+        return Object.fromEntries(
+            Object.entries(value)
+                .sort(([left], [right]) => left.localeCompare(right))
+                .map(([key, child]) => [key, sortJsonKeys(child)]),
+        );
+    }
+    return value;
+};
+
+const getToolDefinitionKey = (tool: DynamicToolDefinition) =>
+    JSON.stringify([tool.namespace, tool.name, tool.description, tool.deferLoading, sortJsonKeys(tool.inputSchema)]);
+
+const ToolDefinitions = ({ tools }: { tools: DynamicToolDefinition[] }) => {
+    const uniqueTools = [...new Map(tools.map((tool) => [getToolDefinitionKey(tool), tool])).entries()];
+
+    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]">
+                Available tools
+            </h3>
+            {uniqueTools.length === 0 ? (
+                <p className="mt-4 text-[var(--muted-foreground)] text-sm">
+                    No dynamic tool definitions were recorded for this thread.
+                </p>
+            ) : (
+                <div className="mt-4 grid gap-3 xl:grid-cols-2">
+                    {uniqueTools.map(([toolKey, tool]) => (
+                        <article
+                            key={toolKey}
+                            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}
+                                {tool.deferLoading ? <Badge variant="outline">deferred</Badge> : null}
+                            </div>
+                            <p className="mt-1.5 text-[var(--muted-foreground)] text-sm">
+                                {tool.description || 'No description.'}
+                            </p>
+                            {tool.inputSchema ? (
+                                <details className="mt-3 text-xs">
+                                    <summary className="cursor-pointer text-[var(--muted-foreground)]">
+                                        Input schema
+                                    </summary>
+                                    <pre className="mt-2 overflow-x-auto rounded-lg bg-[var(--code-background)] p-3 text-[var(--code-foreground)] leading-5">
+                                        {JSON.stringify(tool.inputSchema, null, 2)}
+                                    </pre>
+                                </details>
+                            ) : null}
+                        </article>
+                    ))}
+                </div>
+            )}
+        </section>
+    );
+};
+
+export function ThreadToolsPanel({
+    assistantModel,
+    availableTools,
+    events,
+    loadingTranscript = false,
+    projectPath,
+    showRawJson,
+    sortOrder,
+    transcriptIsPartial = false,
+    transcriptState,
+    onLoadTranscript,
+    onSortOrderChange,
+}: ThreadToolsPanelProps) {
+    const toolEvents = events ? getToolActivityEvents(events) : [];
+    const canLoadMore = transcriptState === 'deferred' || transcriptIsPartial;
+
+    return (
+        <div className="space-y-4">
+            <ToolDefinitions tools={availableTools} />
+            <section className="space-y-3 rounded-[1.6rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]">
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                    <h3 className="font-semibold text-[var(--muted-foreground)] text-sm uppercase tracking-[0.18em]">
+                        Tool activity
+                    </h3>
+                    {canLoadMore && onLoadTranscript ? (
+                        <Button disabled={loadingTranscript} size="sm" variant="outline" onClick={onLoadTranscript}>
+                            {loadingTranscript ? 'Loading tool activity...' : 'Load tool activity'}
+                        </Button>
+                    ) : null}
+                </div>
+                {transcriptState === 'missing' ? (
+                    <p className="text-[var(--muted-foreground)] text-sm">
+                        The rollout file is missing, so recorded tool activity is unavailable.
+                    </p>
+                ) : toolEvents.length === 0 ? (
+                    <p className="text-[var(--muted-foreground)] text-sm">
+                        {canLoadMore
+                            ? 'The current transcript preview has no tool activity. Load the full thread to inspect every call.'
+                            : 'No tool calls, outputs, or web searches were recorded for this thread.'}
+                    </p>
+                ) : (
+                    <TranscriptView
+                        assistantModel={assistantModel}
+                        events={toolEvents}
+                        projectPath={projectPath}
+                        showCommentary={false}
+                        showExtraEvents
+                        showRawJson={showRawJson}
+                        showToolCalls
+                        showUserMessages={false}
+                        sortOrder={sortOrder}
+                        onSortOrderChange={onSortOrderChange}
+                    />
+                )}
+            </section>
+        </div>
+    );
+}

package/apps/ui/src/components/threads-table.tsx

@@ -3,6 +3,7 @@ import { Link } from '@tanstack/react-router';
 import type { SortingState } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/react-table';
 import { Download, MoreHorizontal, Trash2 } from 'lucide-react';
+import { useMemo } from 'react';
 import { DataTable } from '#/components/data-table';
 import { SelectionActionsToolbar } from '#/components/selection-actions-toolbar';
 import { Button } from '#/components/ui/button';
@@ -103,6 +104,7 @@ const columns = (
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <Button
+                            aria-label={`Actions for ${info.row.original.thread.title}`}
                             className="rounded-full"
                             size="icon"
                             type="button"
@@ -140,9 +142,10 @@ export function ThreadsTable({
     onExportThread,
     onExportThreads,
 }: ThreadsTableProps) {
+    const memoizedColumns = useMemo(() => columns(onDeleteThread, onExportThread), [onDeleteThread, onExportThread]);
     return (
         <DataTable
-            columns={columns(onDeleteThread, onExportThread)}
+            columns={memoizedColumns}
             data={threads}
             emptyMessage="No threads match the current project filter."
             enableRowSelection