spiracha 1.5.0 → 2.1.0

package/apps/ui/src/components/projects-loading-state.tsx

@@ -0,0 +1,74 @@
+import { LoadingPanel } from '#/components/loading-panel';
+import { PageHeader } from '#/components/page-header';
+import { Skeleton } from '#/components/ui/skeleton';
+
+const loadingColumns = ['Project', 'Threads', 'Tokens', 'Last updated', 'Models', 'Archived'] as const;
+const loadingRows = ['project-a', 'project-b', 'project-c', 'project-d', 'project-e'] as const;
+
+export function ProjectsLoadingState() {
+    return (
+        <div aria-busy="true" aria-live="polite" className="space-y-6">
+            <PageHeader
+                actions={<Skeleton className="h-10 w-full min-w-[16rem] max-w-[20rem]" />}
+                eyebrow="Inventory"
+                subtitle="Reading the local Codex database and checking fallback session files."
+                title="Codex"
+            />
+
+            <div role="status">
+                <LoadingPanel
+                    description="Scanning project summaries. Large local histories can take a moment."
+                    title="Loading Codex projects"
+                />
+            </div>
+
+            <div className="w-full overflow-x-auto rounded-[1.5rem] border border-[var(--border)] bg-[var(--panel)]">
+                <table className="w-full min-w-[56rem]">
+                    <thead className="bg-[var(--panel-secondary)]">
+                        <tr className="border-[var(--border)] border-b">
+                            {loadingColumns.map((column) => (
+                                <th
+                                    key={column}
+                                    className="h-10 whitespace-nowrap px-4 text-left font-semibold text-[11px] text-[var(--muted-foreground)] uppercase tracking-[0.18em]"
+                                >
+                                    {column}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {loadingRows.map((rowId, rowIndex) => (
+                            <tr
+                                key={rowId}
+                                aria-label={`Loading project row ${rowIndex + 1}`}
+                                className="border-[var(--border)] border-b last:border-b-0"
+                            >
+                                <td className="px-4 py-3">
+                                    <div className="space-y-2">
+                                        <Skeleton aria-hidden className="h-4 w-44" />
+                                        <Skeleton aria-hidden className="h-3 w-20" />
+                                    </div>
+                                </td>
+                                <td className="px-4 py-3">
+                                    <Skeleton aria-hidden className="h-4 w-12" />
+                                </td>
+                                <td className="px-4 py-3">
+                                    <Skeleton aria-hidden className="h-4 w-16" />
+                                </td>
+                                <td className="px-4 py-3">
+                                    <Skeleton aria-hidden className="h-4 w-28" />
+                                </td>
+                                <td className="px-4 py-3">
+                                    <Skeleton aria-hidden className="h-4 w-32" />
+                                </td>
+                                <td className="px-4 py-3">
+                                    <Skeleton aria-hidden className="h-4 w-10" />
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,108 @@
+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 { DataTable } from '#/components/data-table';
+import { Button } from '#/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '#/components/ui/dropdown-menu';
+import { formatDateTime, formatList, formatNumber, formatTokens } from '#/lib/formatters';
+
+type ProjectsTableProps = {
+    projects: ProjectSummary[];
+    onDeleteProject: (project: ProjectSummary) => void;
+};
+
+const columnHelper = createColumnHelper<ProjectSummary>();
+
+const columns = (onDeleteProject: (project: ProjectSummary) => void) =>
+    [
+        columnHelper.accessor('name', {
+            cell: (info) => (
+                <Link
+                    className="block w-[14rem] max-w-[18rem] space-y-1 rounded-md outline-none transition hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[var(--accent)] lg:w-auto"
+                    params={{ project: info.row.original.name }}
+                    to="/codex/$project"
+                >
+                    <p className="font-medium underline-offset-2 hover:underline">{info.getValue()}</p>
+                    <p className="text-[var(--muted-foreground)] text-xs">
+                        {formatNumber(info.row.original.cwdPaths.length)} cwd path
+                        {info.row.original.cwdPaths.length === 1 ? '' : 's'}
+                    </p>
+                </Link>
+            ),
+            header: 'Project',
+        }),
+        columnHelper.accessor('threadCount', {
+            cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+            header: 'Threads',
+        }),
+        columnHelper.accessor('totalTokens', {
+            cell: (info) => <span className="font-mono text-sm">{formatTokens(info.getValue())}</span>,
+            header: 'Tokens',
+        }),
+        columnHelper.accessor('lastUpdatedAtMs', {
+            cell: (info) => (
+                <span className="text-sm" suppressHydrationWarning>
+                    {formatDateTime(info.getValue())}
+                </span>
+            ),
+            header: 'Last updated',
+        }),
+        columnHelper.display({
+            cell: (info) => (
+                <span className="text-[var(--muted-foreground)] text-sm">
+                    {formatList(info.row.original.modelNames)}
+                </span>
+            ),
+            header: 'Models',
+            id: 'models',
+        }),
+        columnHelper.accessor('archivedThreadCount', {
+            cell: (info) => <span className="text-sm">{formatNumber(info.getValue())}</span>,
+            header: 'Archived',
+        }),
+        columnHelper.display({
+            cell: (info) => (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            className="rounded-full"
+                            size="icon"
+                            type="button"
+                            variant="ghost"
+                            onClick={(event) => event.stopPropagation()}
+                        >
+                            <MoreHorizontal className="size-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                            className="text-[var(--destructive)]"
+                            onClick={() => onDeleteProject(info.row.original)}
+                        >
+                            <Trash2 className="mr-2 size-4" />
+                            Delete project
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            ),
+            header: '',
+            id: 'actions',
+        }),
+    ] as const;
+
+export function ProjectsTable({ projects, onDeleteProject }: ProjectsTableProps) {
+    return (
+        <DataTable
+            columns={columns(onDeleteProject)}
+            data={projects}
+            emptyMessage="No projects match the current search."
+            initialSorting={[{ desc: true, id: 'lastUpdatedAtMs' }]}
+        />
+    );
+}

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

@@ -0,0 +1,133 @@
+import type { QoderSessionSummary } from '@spiracha/lib/qoder-exporter-types';
+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 { useMemo } from 'react';
+import { DataTable } from '#/components/data-table';
+import { SelectionActionsToolbar } from '#/components/selection-actions-toolbar';
+import { Button } from '#/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '#/components/ui/dropdown-menu';
+import { formatDateTime, formatNumber } from '#/lib/formatters';
+
+type QoderSessionsTableProps = {
+    onExportSession: (session: QoderSessionSummary) => void;
+    onExportSessions: (sessionIds: string[]) => void;
+    sessions: QoderSessionSummary[];
+};
+
+const columnHelper = createColumnHelper<QoderSessionSummary>();
+const defaultSorting: SortingState = [{ desc: true, id: 'lastActive' }];
+
+const columns = (onExportSession: (session: QoderSessionSummary) => void) =>
+    [
+        columnHelper.accessor('title', {
+            cell: (info) => (
+                <Link
+                    className="block w-[16rem] max-w-[22rem] space-y-1 rounded-md outline-none transition hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[var(--accent)] lg:w-auto"
+                    params={{ sessionId: info.row.original.sessionId }}
+                    to="/qoder-sessions/$sessionId"
+                >
+                    <p className="truncate font-medium underline-offset-2 hover:underline">{info.getValue()}</p>
+                    <p className="truncate text-[var(--muted-foreground)] text-xs">{info.row.original.sessionId}</p>
+                </Link>
+            ),
+            header: 'Session',
+        }),
+        columnHelper.accessor('lastActiveAtMs', {
+            cell: (info) => (
+                <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                    {formatDateTime(info.getValue())}
+                </span>
+            ),
+            header: 'Updated',
+            id: 'lastActive',
+        }),
+        columnHelper.accessor('status', {
+            cell: (info) => <span className="font-mono text-sm">{info.getValue() ?? 'unknown'}</span>,
+            header: 'Status',
+        }),
+        columnHelper.accessor('model', {
+            cell: (info) => <span className="font-mono text-sm">{info.getValue() ?? 'unknown'}</span>,
+            header: 'Model',
+        }),
+        columnHelper.accessor('messageCount', {
+            cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+            header: 'Prompts',
+        }),
+        columnHelper.accessor('fileOperationCount', {
+            cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+            header: 'File ops',
+        }),
+        columnHelper.accessor('snapshotFileCount', {
+            cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+            header: 'Snapshots',
+        }),
+        columnHelper.accessor('executionMode', {
+            cell: (info) => <span className="font-mono text-sm">{info.getValue() ?? 'unknown'}</span>,
+            header: 'Mode',
+        }),
+        columnHelper.display({
+            cell: (info) => (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            aria-label={`Actions for ${info.row.original.title}`}
+                            className="rounded-full"
+                            size="icon"
+                            type="button"
+                            variant="ghost"
+                            onClick={(event) => event.stopPropagation()}
+                        >
+                            <MoreHorizontal className="size-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                            disabled={info.row.original.renderablePartCount === 0}
+                            onClick={() => onExportSession(info.row.original)}
+                        >
+                            <Download className="mr-2 size-4" />
+                            Export session
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            ),
+            enableSorting: false,
+            header: '',
+            id: 'actions',
+        }),
+    ] as const;
+
+export const QoderSessionsTable = ({ onExportSession, onExportSessions, sessions }: QoderSessionsTableProps) => {
+    const tableColumns = useMemo(() => columns(onExportSession), [onExportSession]);
+
+    return (
+        <DataTable
+            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

@@ -0,0 +1,57 @@
+import type { QoderWorkspaceGroup } from '@spiracha/lib/qoder-exporter-types';
+import { Link } from '@tanstack/react-router';
+import { createColumnHelper } from '@tanstack/react-table';
+import { DataTable } from '#/components/data-table';
+import { formatDateTime, formatNumber } from '#/lib/formatters';
+
+type QoderWorkspacesTableProps = {
+    workspaces: QoderWorkspaceGroup[];
+};
+
+const columnHelper = createColumnHelper<QoderWorkspaceGroup>();
+
+const columns = [
+    columnHelper.accessor('label', {
+        cell: (info) => (
+            <Link
+                className="block w-[16rem] max-w-[22rem] space-y-1 rounded-md outline-none transition hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[var(--accent)] lg:w-auto"
+                params={{ workspaceKey: info.row.original.key }}
+                to="/qoder/$workspaceKey"
+            >
+                <p className="truncate font-medium underline-offset-2 hover:underline">{info.getValue()}</p>
+                <p className="truncate text-[var(--muted-foreground)] text-xs">{info.row.original.worktree}</p>
+            </Link>
+        ),
+        header: 'Workspace',
+    }),
+    columnHelper.accessor('sessionCount', {
+        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+        header: 'Sessions',
+    }),
+    columnHelper.accessor('messageCount', {
+        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+        header: 'Prompts',
+    }),
+    columnHelper.accessor('fileOperationCount', {
+        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+        header: 'File ops',
+    }),
+    columnHelper.accessor('snapshotFileCount', {
+        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+        header: 'Snapshots',
+    }),
+    columnHelper.accessor('lastActiveAtMs', {
+        cell: (info) => (
+            <span className="whitespace-nowrap text-sm" suppressHydrationWarning>
+                {formatDateTime(info.getValue())}
+            </span>
+        ),
+        header: 'Last active',
+    }),
+] as const;
+
+export const QoderWorkspacesTable = ({ workspaces }: QoderWorkspacesTableProps) => {
+    return (
+        <DataTable columns={columns} data={workspaces} emptyMessage="No Qoder workspaces match the current search." />
+    );
+};

package/apps/ui/src/components/recent-threads-list.tsx

@@ -0,0 +1,52 @@
+import type { DashboardRecentThread } from '@spiracha/lib/codex-browser-types';
+import { Link } from '@tanstack/react-router';
+import { formatDateTime, formatTokens } from '#/lib/formatters';
+
+type RecentThreadsListProps = {
+    threads: DashboardRecentThread[];
+};
+
+export function RecentThreadsList({ threads }: RecentThreadsListProps) {
+    return (
+        <div className="mt-4 space-y-2">
+            {threads.map(({ project, thread }) => (
+                <article
+                    key={thread.id}
+                    className="grid min-w-0 grid-cols-[minmax(0,1fr)_7.5rem] gap-3 rounded-xl border border-[var(--border)] bg-[var(--panel-secondary)] p-3.5 transition-colors hover:border-[var(--accent)]/30 hover:bg-[var(--accent-muted)]"
+                >
+                    <div className="min-w-0">
+                        <Link
+                            className="block min-w-0 rounded-md outline-none transition hover:opacity-80 focus-visible:ring-2 focus-visible:ring-[var(--accent)]"
+                            params={{ threadId: thread.id }}
+                            to="/threads/$threadId"
+                        >
+                            <p className="truncate font-medium text-sm underline-offset-2 hover:underline">
+                                {thread.title}
+                            </p>
+                            <p className="mt-0.5 line-clamp-1 text-[var(--muted-foreground)] text-xs">
+                                {thread.preview}
+                            </p>
+                        </Link>
+                        <div className="mt-2 flex min-w-0 flex-wrap gap-3 text-[var(--muted-foreground)] text-xs">
+                            <Link
+                                className="max-w-[14rem] truncate font-medium text-[var(--accent)] underline-offset-2 hover:underline"
+                                params={{ project }}
+                                to="/codex/$project"
+                            >
+                                {project}
+                            </Link>
+                            <span className="font-mono">{thread.model ?? 'unknown model'}</span>
+                            <span>{formatTokens(thread.tokens_used)}</span>
+                        </div>
+                    </div>
+                    <p
+                        className="justify-self-end whitespace-nowrap text-right font-mono text-[var(--muted-foreground)] text-xs"
+                        suppressHydrationWarning
+                    >
+                        {formatDateTime(thread.updated_at_ms ?? thread.updated_at * 1000)}
+                    </p>
+                </article>
+            ))}
+        </div>
+    );
+}

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

@@ -0,0 +1,20 @@
+type ReloadErrorPanelProps = {
+    description: string;
+    title: string;
+};
+
+export function ReloadErrorPanel({ description, title }: ReloadErrorPanelProps) {
+    return (
+        <div className="rounded-xl border border-[var(--border)] bg-[var(--panel)] px-6 py-10 text-center">
+            <p className="font-medium text-[var(--destructive)] text-sm">{title}</p>
+            <p className="mt-2 text-[var(--muted-foreground)] text-sm">{description}</p>
+            <button
+                className="mt-4 text-[var(--accent)] text-sm underline-offset-2 hover:underline"
+                type="button"
+                onClick={() => window.location.reload()}
+            >
+                Reload
+            </button>
+        </div>
+    );
+}

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/text-document-panel.tsx

@@ -0,0 +1,19 @@
+type TextDocumentPanelProps = {
+    content: string;
+    description?: string;
+    title: string;
+};
+
+export const TextDocumentPanel = ({ content, description, title }: TextDocumentPanelProps) => {
+    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]">
+                {title}
+            </h3>
+            {description ? <p className="mt-2 text-[var(--muted-foreground)] text-sm">{description}</p> : null}
+            <pre className="mt-4 overflow-x-auto whitespace-pre-wrap rounded-2xl border border-[var(--border)] bg-[var(--code-background)] p-4 text-sm leading-6 [overflow-wrap:anywhere]">
+                {content}
+            </pre>
+        </section>
+    );
+};

package/apps/ui/src/components/theme-toggle.tsx

@@ -0,0 +1,48 @@
+import { Moon, Sun } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Button } from '#/components/ui/button';
+
+type ThemeMode = 'dark' | 'light';
+
+const getPreferredTheme = (): ThemeMode => {
+    if (typeof window === 'undefined') {
+        return 'light';
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+
+const applyTheme = (mode: ThemeMode) => {
+    document.documentElement.classList.toggle('dark', mode === 'dark');
+    document.documentElement.classList.toggle('light', mode === 'light');
+    document.documentElement.style.colorScheme = mode;
+    window.localStorage.setItem('spiracha-theme', mode);
+};
+
+export function ThemeToggle() {
+    const [theme, setTheme] = useState<ThemeMode>('light');
+
+    useEffect(() => {
+        const storedTheme = window.localStorage.getItem('spiracha-theme');
+        const nextTheme = storedTheme === 'dark' || storedTheme === 'light' ? storedTheme : getPreferredTheme();
+        setTheme(nextTheme);
+        applyTheme(nextTheme);
+    }, []);
+
+    return (
+        <Button
+            aria-label="Toggle color theme"
+            className="h-9 rounded-full border border-[var(--border)] bg-[var(--panel)] px-3 text-[var(--panel-foreground)] shadow-none"
+            size="sm"
+            type="button"
+            variant="ghost"
+            onClick={() => {
+                const nextTheme = theme === 'light' ? 'dark' : 'light';
+                setTheme(nextTheme);
+                applyTheme(nextTheme);
+            }}
+        >
+            {theme === 'light' ? <Moon className="size-4" /> : <Sun className="size-4" />}
+        </Button>
+    );
+}