spiracha 2.0.0 → 2.2.0

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/qoder-sessions-table.tsx

@@ -5,6 +5,7 @@ import { createColumnHelper } from '@tanstack/react-table';
 import { Download, MoreHorizontal } 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';
 import {
     DropdownMenu,
@@ -16,6 +17,7 @@ import { formatDateTime, formatNumber } from '#/lib/formatters';
 
 type QoderSessionsTableProps = {
     onExportSession: (session: QoderSessionSummary) => void;
+    onExportSessions: (sessionIds: string[]) => void;
     sessions: QoderSessionSummary[];
 };
 
@@ -38,7 +40,11 @@ const columns = (onExportSession: (session: QoderSessionSummary) => void) =>
             header: 'Session',
         }),
         columnHelper.accessor('lastActiveAtMs', {
-            cell: (info) => <span className="whitespace-nowrap text-sm">{formatDateTime(info.getValue())}</span>,
+            cell: (info) => (
+                <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                    {formatDateTime(info.getValue())}
+                </span>
+            ),
             header: 'Updated',
             id: 'lastActive',
         }),
@@ -98,7 +104,7 @@ const columns = (onExportSession: (session: QoderSessionSummary) => void) =>
         }),
     ] as const;
 
-export const QoderSessionsTable = ({ onExportSession, sessions }: QoderSessionsTableProps) => {
+export const QoderSessionsTable = ({ onExportSession, onExportSessions, sessions }: QoderSessionsTableProps) => {
     const tableColumns = useMemo(() => columns(onExportSession), [onExportSession]);
 
     return (
@@ -106,7 +112,22 @@ export const QoderSessionsTable = ({ onExportSession, sessions }: QoderSessionsT
             columns={tableColumns}
             data={sessions}
             emptyMessage="No Qoder sessions match the current workspace filter."
+            enableRowSelection
+            getRowId={(row) => row.sessionId}
             initialSorting={defaultSorting}
+            renderToolbar={({ clearSelection, selectedRows }) => {
+                const selectedSessionIds = selectedRows.map((row) => row.sessionId);
+                const hasEmptySelection = selectedRows.some((row) => row.renderablePartCount === 0);
+                return (
+                    <SelectionActionsToolbar
+                        clearSelection={clearSelection}
+                        exportDisabled={hasEmptySelection}
+                        itemLabel="session"
+                        selectedCount={selectedRows.length}
+                        onExportSelected={() => onExportSessions(selectedSessionIds)}
+                    />
+                );
+            }}
         />
     );
 };

package/apps/ui/src/components/qoder-workspaces-table.tsx

@@ -41,7 +41,11 @@ const columns = [
         header: 'Snapshots',
     }),
     columnHelper.accessor('lastActiveAtMs', {
-        cell: (info) => <span className="whitespace-nowrap text-sm">{formatDateTime(info.getValue())}</span>,
+        cell: (info) => (
+            <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                {formatDateTime(info.getValue())}
+            </span>
+        ),
         header: 'Last active',
     }),
 ] as const;

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/selection-actions-toolbar.tsx

@@ -0,0 +1,80 @@
+import { Download, Trash2, X } from 'lucide-react';
+import { Button } from '#/components/ui/button';
+
+type SelectionActionsToolbarProps = {
+    clearSelection: () => void;
+    deleteDisabled?: boolean;
+    exportDisabled?: boolean;
+    itemLabel: string;
+    onDeleteSelected?: () => void;
+    onExportSelected?: () => void;
+    selectedCount: number;
+};
+
+const pluralize = (count: number, itemLabel: string) => `${itemLabel}${count === 1 ? '' : 's'}`;
+
+export const SelectionActionsToolbar = ({
+    clearSelection,
+    deleteDisabled = false,
+    exportDisabled = false,
+    itemLabel,
+    onDeleteSelected,
+    onExportSelected,
+    selectedCount,
+}: SelectionActionsToolbarProps) => {
+    if (selectedCount === 0) {
+        const actions = [onExportSelected ? 'export' : null, onDeleteSelected ? 'delete' : null].filter(Boolean);
+        const actionText =
+            actions.length === 2
+                ? `${actions[0]} or ${actions[1]} them in a batch`
+                : actions.length === 1
+                  ? `${actions[0]} them in a batch`
+                  : 'manage them in a batch';
+
+        return (
+            <p className="text-[var(--muted-foreground)] text-sm">
+                Select {pluralize(2, itemLabel)} to {actionText}.
+            </p>
+        );
+    }
+
+    return (
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-sm">
+                {selectedCount} {pluralize(selectedCount, itemLabel)} selected
+            </p>
+            <div className="flex flex-wrap gap-2">
+                {onExportSelected ? (
+                    <Button
+                        className="rounded-full"
+                        disabled={exportDisabled}
+                        size="sm"
+                        type="button"
+                        variant="outline"
+                        onClick={onExportSelected}
+                    >
+                        <Download className="mr-2 size-4" />
+                        Export selected {pluralize(selectedCount, itemLabel)}
+                    </Button>
+                ) : null}
+                {onDeleteSelected ? (
+                    <Button
+                        className="rounded-full border-[var(--destructive)]/20 text-[var(--destructive)]"
+                        disabled={deleteDisabled}
+                        size="sm"
+                        type="button"
+                        variant="outline"
+                        onClick={onDeleteSelected}
+                    >
+                        <Trash2 className="mr-2 size-4" />
+                        Delete selected {pluralize(selectedCount, itemLabel)}
+                    </Button>
+                ) : null}
+                <Button className="rounded-full" size="sm" type="button" variant="ghost" onClick={clearSelection}>
+                    <X className="mr-2 size-4" />
+                    Clear selection
+                </Button>
+            </div>
+        </div>
+    );
+};

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

@@ -2,8 +2,10 @@ import type { ThreadListEntry } from '@spiracha/lib/codex-browser-types';
 import { Link } from '@tanstack/react-router';
 import type { SortingState } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/react-table';
-import { Download, MoreHorizontal, Trash2, X } from 'lucide-react';
+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';
 import {
     DropdownMenu,
@@ -102,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"
@@ -139,62 +142,25 @@ 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
             getRowId={(row) => row.thread.id}
             initialSorting={defaultSorting}
             renderToolbar={({ clearSelection, selectedRows }) => {
-                if (selectedRows.length === 0) {
-                    return (
-                        <p className="text-[var(--muted-foreground)] text-sm">
-                            Select threads to export or delete them in a batch.
-                        </p>
-                    );
-                }
-
                 const selectedThreadIds = selectedRows.map((row) => row.thread.id);
                 return (
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                        <p className="text-sm">
-                            {selectedRows.length} thread{selectedRows.length === 1 ? '' : 's'} selected
-                        </p>
-                        <div className="flex flex-wrap gap-2">
-                            <Button
-                                className="rounded-full"
-                                size="sm"
-                                type="button"
-                                variant="outline"
-                                onClick={() => onExportThreads(selectedThreadIds)}
-                            >
-                                <Download className="mr-2 size-4" />
-                                Export selected threads
-                            </Button>
-                            <Button
-                                className="rounded-full border-[var(--destructive)]/20 text-[var(--destructive)]"
-                                size="sm"
-                                type="button"
-                                variant="outline"
-                                onClick={() => onDeleteThreads(selectedThreadIds)}
-                            >
-                                <Trash2 className="mr-2 size-4" />
-                                Delete selected threads
-                            </Button>
-                            <Button
-                                className="rounded-full"
-                                size="sm"
-                                type="button"
-                                variant="ghost"
-                                onClick={clearSelection}
-                            >
-                                <X className="mr-2 size-4" />
-                                Clear selection
-                            </Button>
-                        </div>
-                    </div>
+                    <SelectionActionsToolbar
+                        clearSelection={clearSelection}
+                        itemLabel="thread"
+                        selectedCount={selectedRows.length}
+                        onDeleteSelected={() => onDeleteThreads(selectedThreadIds)}
+                        onExportSelected={() => onExportThreads(selectedThreadIds)}
+                    />
                 );
             }}
         />