spiracha 2.0.0 → 2.2.0

package/apps/ui/src/components/antigravity-conversations-table.tsx

@@ -1,10 +1,12 @@
 import type { AntigravityConversation } from '@spiracha/lib/antigravity-exporter-types';
 import type { AntigravityDecryptionState } from '@spiracha/lib/antigravity-keychain';
 import { Link } from '@tanstack/react-router';
+import type { SortingState } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/react-table';
-import { Download, LockKeyhole, MoreHorizontal, ScrollText } from 'lucide-react';
+import { Download, LockKeyhole, MoreHorizontal, ScrollText, Trash2 } from 'lucide-react';
 import { useMemo } from 'react';
 import { DataTable } from '#/components/data-table';
+import { SelectionActionsToolbar } from '#/components/selection-actions-toolbar';
 import { Badge } from '#/components/ui/badge';
 import { Button } from '#/components/ui/button';
 import {
@@ -24,8 +26,11 @@ import { formatBytes, formatDateTime, formatNumber } from '#/lib/formatters';
 type AntigravityConversationsTableProps = {
     conversations: AntigravityConversation[];
     decryptionState: AntigravityDecryptionState | null;
+    onDeleteConversation: (conversation: AntigravityConversation) => void;
+    onDeleteConversations: (conversationIds: string[]) => void;
     onExportArtifacts: (conversation: AntigravityConversation) => void;
     onExportConversation: (conversation: AntigravityConversation) => void;
+    onExportConversations: (conversationIds: string[]) => void;
 };
 
 type ConversationExportState = {
@@ -34,10 +39,10 @@ type ConversationExportState = {
     hasTranscript: boolean;
     lockedTranscript: boolean;
     showConversationAction: boolean;
-    showActions: boolean;
 };
 
 const columnHelper = createColumnHelper<AntigravityConversation>();
+const defaultSorting: SortingState = [{ desc: true, id: 'updatedAt' }];
 
 const getConversationExportState = (
     conversation: AntigravityConversation,
@@ -56,7 +61,6 @@ const getConversationExportState = (
         hasArtifacts,
         hasTranscript,
         lockedTranscript,
-        showActions: showConversationAction || hasArtifacts,
         showConversationAction,
     };
 };
@@ -74,8 +78,17 @@ const getTranscriptLabel = (
     return `${source} · ${status}`;
 };
 
+const getConversationSizeLabel = (conversation: AntigravityConversation): string => {
+    if (conversation.totalBytes > 0) {
+        return formatBytes(conversation.totalBytes);
+    }
+
+    return conversation.summaryPath ? 'Summary' : formatBytes(conversation.totalBytes);
+};
+
 const columns = (
     decryptionState: AntigravityDecryptionState | null,
+    onDeleteConversation: (conversation: AntigravityConversation) => void,
     onExportConversation: (conversation: AntigravityConversation) => void,
     onExportArtifacts: (conversation: AntigravityConversation) => void,
 ) =>
@@ -110,6 +123,7 @@ const columns = (
                 </span>
             ),
             header: 'Updated',
+            id: 'updatedAt',
         }),
         columnHelper.display({
             cell: (info) => {
@@ -130,21 +144,18 @@ const columns = (
             cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
             header: 'Artifacts',
         }),
-        columnHelper.accessor('conversationBytes', {
-            cell: (info) => <span className="font-mono text-sm">{formatBytes(info.getValue())}</span>,
+        columnHelper.accessor('totalBytes', {
+            cell: (info) => <span className="font-mono text-sm">{getConversationSizeLabel(info.row.original)}</span>,
             header: 'Size',
         }),
         columnHelper.display({
             cell: (info) => {
                 const exportState = getConversationExportState(info.row.original, decryptionState);
-                if (!exportState.showActions) {
-                    return <span className="text-[var(--muted-foreground)] text-sm">No export</span>;
-                }
-
                 return (
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                             <Button
+                                aria-label={`Actions for ${info.row.original.title}`}
                                 className="rounded-full"
                                 size="icon"
                                 type="button"
@@ -176,6 +187,13 @@ const columns = (
                                     Export artifacts
                                 </DropdownMenuItem>
                             ) : null}
+                            <DropdownMenuItem
+                                className="text-[var(--destructive)]"
+                                onClick={() => onDeleteConversation(info.row.original)}
+                            >
+                                <Trash2 className="mr-2 size-4" />
+                                Delete conversation
+                            </DropdownMenuItem>
                         </DropdownMenuContent>
                     </DropdownMenu>
                 );
@@ -188,12 +206,15 @@ const columns = (
 export function AntigravityConversationsTable({
     conversations,
     decryptionState,
+    onDeleteConversation,
+    onDeleteConversations,
     onExportArtifacts,
     onExportConversation,
+    onExportConversations,
 }: AntigravityConversationsTableProps) {
     const tableColumns = useMemo(
-        () => columns(decryptionState, onExportConversation, onExportArtifacts),
-        [decryptionState, onExportArtifacts, onExportConversation],
+        () => columns(decryptionState, onDeleteConversation, onExportConversation, onExportArtifacts),
+        [decryptionState, onDeleteConversation, onExportArtifacts, onExportConversation],
     );
 
     return (
@@ -201,6 +222,25 @@ export function AntigravityConversationsTable({
             columns={tableColumns}
             data={conversations}
             emptyMessage="No Antigravity conversations match the current workspace filter."
+            enableRowSelection
+            getRowId={(row) => row.conversationId}
+            initialSorting={defaultSorting}
+            renderToolbar={({ clearSelection, selectedRows }) => {
+                const selectedConversationIds = selectedRows.map((row) => row.conversationId);
+                const hasNonExportableSelection = selectedRows.some(
+                    (row) => !getConversationExportState(row, decryptionState).canExportConversation,
+                );
+                return (
+                    <SelectionActionsToolbar
+                        clearSelection={clearSelection}
+                        exportDisabled={hasNonExportableSelection}
+                        itemLabel="conversation"
+                        selectedCount={selectedRows.length}
+                        onDeleteSelected={() => onDeleteConversations(selectedConversationIds)}
+                        onExportSelected={() => onExportConversations(selectedConversationIds)}
+                    />
+                );
+            }}
         />
     );
 }

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

@@ -38,7 +38,7 @@ const columns = [
         cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
         header: 'Artifacts',
     }),
-    columnHelper.accessor('conversationBytes', {
+    columnHelper.accessor('totalBytes', {
         cell: (info) => <span className="font-mono text-sm">{formatBytes(info.getValue())}</span>,
         header: 'Size',
     }),

package/apps/ui/src/components/app-shell.tsx

@@ -1,4 +1,4 @@
-import { Link, useRouterState } from '@tanstack/react-router';
+import { Link, useNavigate, useRouterState } from '@tanstack/react-router';
 import {
     BarChart3,
     Bot,
@@ -6,12 +6,13 @@ import {
     Code2,
     FolderOpen,
     LayoutDashboard,
+    Search,
     Settings2,
     Sparkles,
     SquareTerminal,
     Workflow,
 } from 'lucide-react';
-import type { PropsWithChildren } from 'react';
+import { type FormEvent, type PropsWithChildren, useEffect, useState } from 'react';
 import { packageMetadata } from '#/lib/package-metadata';
 import { cn } from '#/lib/utils';
 import { ThemeToggle } from './theme-toggle';
@@ -32,6 +33,7 @@ const navItems: readonly NavItem[] = [
         label: 'Claude Code',
         to: '/claude-code',
     },
+    { activePrefixes: ['/grok', '/grok-sessions'], icon: Bot, label: 'Grok', to: '/grok' },
     { activePrefixes: ['/kiro', '/kiro-sessions'], icon: BrainCircuit, label: 'Kiro', to: '/kiro' },
     { activePrefixes: ['/qoder', '/qoder-sessions'], icon: Workflow, label: 'Qoder', to: '/qoder' },
     {
@@ -58,9 +60,33 @@ const GitHubIcon = ({ className }: { className?: string }) => (
 );
 
 export function AppShell({ children }: PropsWithChildren) {
+    const navigate = useNavigate();
     const pathname = useRouterState({
         select: (state) => state.location.pathname,
     });
+    const routeProjectQuery = useRouterState({
+        select: (state) => {
+            if (state.location.pathname !== '/codex' && state.location.pathname !== '/codex/') {
+                return '';
+            }
+            const query = (state.location.search as Record<string, unknown>).q;
+            return typeof query === 'string' ? query : '';
+        },
+    });
+    const [projectQuery, setProjectQuery] = useState(routeProjectQuery);
+
+    useEffect(() => {
+        setProjectQuery(routeProjectQuery);
+    }, [routeProjectQuery]);
+
+    const handleProjectSearch = (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        const query = projectQuery.trim();
+        void navigate({
+            search: query ? { q: query } : {},
+            to: '/codex',
+        });
+    };
 
     return (
         <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
@@ -91,7 +117,24 @@ export function AppShell({ children }: PropsWithChildren) {
                         <ThemeToggle />
                     </div>
 
-                    <nav className="mt-5 grid gap-1">
+                    <search aria-label="Global project search" className="mt-5">
+                        <form className="relative" onSubmit={handleProjectSearch}>
+                            <Search
+                                aria-hidden="true"
+                                className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-[var(--muted-foreground)]"
+                            />
+                            <input
+                                aria-label="Search Codex projects"
+                                className="h-9 w-full rounded-lg border border-[var(--border)] bg-[var(--panel-secondary)] pr-3 pl-9 text-sm outline-none transition placeholder:text-[var(--muted-foreground)] focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent)]/20"
+                                placeholder="Search Codex projects"
+                                type="search"
+                                value={projectQuery}
+                                onChange={(event) => setProjectQuery(event.target.value)}
+                            />
+                        </form>
+                    </search>
+
+                    <nav className="mt-3 grid gap-1">
                         {navItems.map((item) => {
                             const active = isNavItemActive(pathname, item);
                             const Icon = item.icon;

package/apps/ui/src/components/breadcrumbs.tsx

@@ -5,11 +5,15 @@ import type { ReactNode } from 'react';
 type BreadcrumbItem =
     | {
           label: string;
+          title?: string;
+          truncate?: boolean;
       }
     | {
           label: string;
           params?: Record<string, string>;
+          title?: string;
           to: string;
+          truncate?: boolean;
       };
 
 type BreadcrumbsProps = {
@@ -20,27 +24,41 @@ const isLinkItem = (item: BreadcrumbItem): item is Extract<BreadcrumbItem, { to:
     return 'to' in item;
 };
 
+const classNames = (...values: string[]) => values.filter(Boolean).join(' ');
+
 export const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
     return (
         <nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1 text-sm">
             {items.map((item, index) => {
+                const title = item.title ?? (item.truncate ? item.label : undefined);
+                const truncateClassName = item.truncate
+                    ? 'inline-block max-w-[min(34rem,62vw)] truncate align-bottom'
+                    : '';
                 const content: ReactNode = isLinkItem(item) ? (
                     <Link
-                        className="text-[var(--muted-foreground)] transition hover:text-[var(--foreground)]"
+                        className={classNames(
+                            truncateClassName,
+                            'text-[var(--muted-foreground)] transition hover:text-[var(--foreground)]',
+                        )}
                         params={item.params}
+                        title={title}
                         to={item.to}
                     >
                         {item.label}
                     </Link>
                 ) : (
-                    <span aria-current="page" className="font-medium text-[var(--foreground)]">
+                    <span
+                        aria-current="page"
+                        className={classNames(truncateClassName, 'font-medium text-[var(--foreground)]')}
+                        title={title}
+                    >
                         {item.label}
                     </span>
                 );
 
                 return (
                     <div
-                        className="flex items-center gap-1"
+                        className="flex min-w-0 items-center gap-1"
                         key={isLinkItem(item) ? `${item.label}-${item.to}-${index}` : `${item.label}-current-${index}`}
                     >
                         {index > 0 ? <ChevronRight className="size-3.5 text-[var(--muted-foreground)]" /> : null}

package/apps/ui/src/components/claude-code-sessions-table.tsx

@@ -2,9 +2,10 @@ import type { ClaudeCodeSessionSummary } from '@spiracha/lib/claude-code-exporte
 import { Link } from '@tanstack/react-router';
 import type { SortingState } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/react-table';
-import { Download, MoreHorizontal } 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,
@@ -15,14 +16,20 @@ import {
 import { formatDateTime, formatNumber, formatTokens } from '#/lib/formatters';
 
 type ClaudeCodeSessionsTableProps = {
+    onDeleteSession: (session: ClaudeCodeSessionSummary) => void;
+    onDeleteSessions: (sessionIds: string[]) => void;
     onExportSession: (session: ClaudeCodeSessionSummary) => void;
+    onExportSessions: (sessionIds: string[]) => void;
     sessions: ClaudeCodeSessionSummary[];
 };
 
 const columnHelper = createColumnHelper<ClaudeCodeSessionSummary>();
 const defaultSorting: SortingState = [{ desc: true, id: 'lastActive' }];
 
-const columns = (onExportSession: (session: ClaudeCodeSessionSummary) => void) =>
+const columns = (
+    onDeleteSession: (session: ClaudeCodeSessionSummary) => void,
+    onExportSession: (session: ClaudeCodeSessionSummary) => void,
+) =>
     [
         columnHelper.accessor('title', {
             cell: (info) => (
@@ -39,8 +46,8 @@ const columns = (onExportSession: (session: ClaudeCodeSessionSummary) => void) =
         }),
         columnHelper.accessor('lastActiveAtMs', {
             cell: (info) => (
-                <span className="whitespace-nowrap text-sm">
-                    {formatDateTime(info.getValue(), { timeZone: 'UTC' })}
+                <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                    {formatDateTime(info.getValue())}
                 </span>
             ),
             header: 'Updated',
@@ -91,6 +98,13 @@ const columns = (onExportSession: (session: ClaudeCodeSessionSummary) => void) =
                             <Download className="mr-2 size-4" />
                             Export session
                         </DropdownMenuItem>
+                        <DropdownMenuItem
+                            className="text-[var(--destructive)]"
+                            onClick={() => onDeleteSession(info.row.original)}
+                        >
+                            <Trash2 className="mr-2 size-4" />
+                            Delete session
+                        </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
             ),
@@ -100,15 +114,37 @@ const columns = (onExportSession: (session: ClaudeCodeSessionSummary) => void) =
         }),
     ] as const;
 
-export function ClaudeCodeSessionsTable({ onExportSession, sessions }: ClaudeCodeSessionsTableProps) {
-    const tableColumns = useMemo(() => columns(onExportSession), [onExportSession]);
+export function ClaudeCodeSessionsTable({
+    onDeleteSession,
+    onDeleteSessions,
+    onExportSession,
+    onExportSessions,
+    sessions,
+}: ClaudeCodeSessionsTableProps) {
+    const tableColumns = useMemo(() => columns(onDeleteSession, onExportSession), [onDeleteSession, onExportSession]);
 
     return (
         <DataTable
             columns={tableColumns}
             data={sessions}
             emptyMessage="No Claude Code 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}
+                        onDeleteSelected={() => onDeleteSessions(selectedSessionIds)}
+                        onExportSelected={() => onExportSessions(selectedSessionIds)}
+                    />
+                );
+            }}
         />
     );
 }

package/apps/ui/src/components/claude-code-workspaces-table.tsx

@@ -38,7 +38,9 @@ const columns = [
     }),
     columnHelper.accessor('lastActiveAtMs', {
         cell: (info) => (
-            <span className="whitespace-nowrap text-sm">{formatDateTime(info.getValue(), { timeZone: 'UTC' })}</span>
+            <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                {formatDateTime(info.getValue())}
+            </span>
         ),
         header: 'Last active',
     }),

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

@@ -2,9 +2,10 @@ import type { CursorThreadSummary } from '@spiracha/lib/cursor-exporter-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,
@@ -133,55 +134,17 @@ export const CursorThreadsTable = ({
             getRowId={(row) => row.composerId}
             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 selectedComposerIds = selectedRows.map((row) => row.composerId);
                 const hasEmptySelection = selectedRows.some((row) => row.bubbleCount === 0);
                 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"
-                                disabled={hasEmptySelection}
-                                size="sm"
-                                type="button"
-                                variant="outline"
-                                onClick={() => onExportThreads(selectedComposerIds)}
-                            >
-                                <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(selectedComposerIds)}
-                            >
-                                <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}
+                        exportDisabled={hasEmptySelection}
+                        itemLabel="thread"
+                        selectedCount={selectedRows.length}
+                        onDeleteSelected={() => onDeleteThreads(selectedComposerIds)}
+                        onExportSelected={() => onExportThreads(selectedComposerIds)}
+                    />
                 );
             }}
         />

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

@@ -9,7 +9,7 @@ import {
     useReactTable,
 } from '@tanstack/react-table';
 import { ArrowDownUp } from 'lucide-react';
-import { type MouseEvent, type ReactNode, useRef, useState } from 'react';
+import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { Checkbox } from '#/components/ui/checkbox';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '#/components/ui/table';
 import { cn } from '#/lib/utils';
@@ -79,6 +79,23 @@ export function DataTable<TData>({
     const [sorting, setSorting] = useState<SortingState>(initialSorting);
     const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
     const lastSelectedRowIdRef = useRef<string | null>(null);
+    const pendingShiftSelectionRowIdRef = useRef<string | null>(null);
+    const currentRowIds = useMemo(
+        () => new Set(data.map((row, index) => (getRowId ? getRowId(row, index) : String(index)))),
+        [data, getRowId],
+    );
+
+    useEffect(() => {
+        setRowSelection((selection) => {
+            const next = Object.fromEntries(
+                Object.entries(selection).filter(([rowId, selected]) => selected && currentRowIds.has(rowId)),
+            );
+            return Object.keys(next).length === Object.keys(selection).length ? selection : next;
+        });
+        if (lastSelectedRowIdRef.current && !currentRowIds.has(lastSelectedRowIdRef.current)) {
+            lastSelectedRowIdRef.current = null;
+        }
+    }, [currentRowIds]);
 
     const updateSelectionForRow = (rowId: string, checked: boolean, shiftKey: boolean) => {
         const visibleRowIds = table.getRowModel().rows.map((row) => row.id);
@@ -101,17 +118,18 @@ export function DataTable<TData>({
             <Checkbox
                 aria-label={`Select row ${row.id}`}
                 checked={row.getIsSelected()}
-                onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                onPointerDown={(event) => {
                     event.stopPropagation();
-                    event.preventDefault();
-                    updateSelectionForRow(row.id, !row.getIsSelected(), event.shiftKey);
+                    pendingShiftSelectionRowIdRef.current = event.shiftKey ? row.id : null;
                 }}
                 onCheckedChange={(checked) => {
                     if (typeof checked !== 'boolean') {
                         return;
                     }
 
-                    updateSelectionForRow(row.id, checked, false);
+                    const shiftKey = pendingShiftSelectionRowIdRef.current === row.id;
+                    pendingShiftSelectionRowIdRef.current = null;
+                    updateSelectionForRow(row.id, checked, shiftKey);
                 }}
             />
         ),

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>