spiracha 1.5.0 → 2.0.0

package/apps/ui/src/routes/cursor.$workspaceKey.tsx

@@ -0,0 +1,416 @@
+import type { CursorThreadSummary, CursorWorkspaceGroup } from '@spiracha/lib/cursor-exporter-types';
+import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { RefreshCcw, Trash2 } from 'lucide-react';
+import { useDeferredValue, useState } from 'react';
+import { CursorThreadsTable } from '#/components/cursor-threads-table';
+import { DeleteConfirmDialog } from '#/components/delete-confirm-dialog';
+import { ExportDialog } from '#/components/export-dialog';
+import { ListSearchInput } from '#/components/list-search-input';
+import { LoadingPanel } from '#/components/loading-panel';
+import { PageHeader } from '#/components/page-header';
+import { ReloadErrorPanel } from '#/components/reload-error-panel';
+import { Button } from '#/components/ui/button';
+import { cursorThreadsQueryOptions, cursorWorkspacesQueryOptions } from '#/lib/cursor-queries';
+import {
+    deleteCursorThreadsFn,
+    deleteCursorWorkspaceFn,
+    exportCursorThreadFn,
+    exportCursorThreadsFn,
+    recoverCursorWorkspaceFn,
+} from '#/lib/cursor-server';
+import { downloadTextFile, downloadUrlFile } from '#/lib/download';
+import { matchesTextQuery } from '#/lib/text-filter';
+
+type PendingCursorDelete =
+    | { kind: 'threads'; threads: CursorThreadSummary[] }
+    | { kind: 'workspace'; workspace: CursorWorkspaceGroup };
+
+type PendingCursorExport = {
+    composerIds: string[];
+    label: string;
+};
+
+type ExportDialogOptions = {
+    includeCommentary: boolean;
+    includeMetadata: boolean;
+    includeTools: boolean;
+    outputFormat: 'md' | 'txt';
+    zipArchive: boolean;
+};
+
+const findWorkspaceOrThrow = (workspaces: CursorWorkspaceGroup[], workspaceKey: string) => {
+    const workspace = workspaces.find((candidate) => candidate.key === workspaceKey);
+    if (!workspace) {
+        throw new Error(`Cursor workspace not found: ${workspaceKey}`);
+    }
+
+    return workspace;
+};
+
+const getSelectedThreads = (threads: CursorThreadSummary[], composerIds: string[]) => {
+    const composerIdSet = new Set(composerIds);
+    return threads.filter((thread) => composerIdSet.has(thread.composerId));
+};
+
+const buildPendingCursorDelete = (threads: CursorThreadSummary[]): PendingCursorDelete | null => {
+    if (threads.length === 0) {
+        return null;
+    }
+
+    return { kind: 'threads', threads };
+};
+
+const buildPendingCursorExport = (threads: CursorThreadSummary[]): PendingCursorExport | null => {
+    if (threads.length === 0) {
+        return null;
+    }
+
+    return {
+        composerIds: threads.map((thread) => thread.composerId),
+        label: threads.length === 1 ? threads[0]!.name : `${threads.length} selected threads`,
+    };
+};
+
+const getCursorDeleteConfirmLabel = (pendingDelete: PendingCursorDelete | null, pending: boolean) => {
+    if (pending) {
+        return 'Deleting...';
+    }
+
+    if (pendingDelete?.kind === 'workspace') {
+        return 'Delete workspace';
+    }
+
+    return pendingDelete && pendingDelete.threads.length > 1 ? 'Delete threads' : 'Delete thread';
+};
+
+const getCursorDeleteDescription = (pendingDelete: PendingCursorDelete | null) => {
+    if (!pendingDelete) {
+        return '';
+    }
+
+    if (pendingDelete.kind === 'workspace') {
+        return `Permanently delete every thread for "${pendingDelete.workspace.label}" from Cursor's database and remove any on-disk transcript directories. Quit Cursor first. This cannot be undone.`;
+    }
+
+    if (pendingDelete.threads.length === 1) {
+        return `Permanently delete "${pendingDelete.threads[0]!.name}" from Cursor's database and remove any on-disk transcript directories. Quit Cursor first. This cannot be undone.`;
+    }
+
+    return `Permanently delete ${pendingDelete.threads.length} selected Cursor threads and remove any on-disk transcript directories. Quit Cursor first. This cannot be undone.`;
+};
+
+const getCursorDeleteTitle = (pendingDelete: PendingCursorDelete | null) => {
+    if (pendingDelete?.kind === 'workspace') {
+        return 'Delete Cursor workspace?';
+    }
+
+    if (pendingDelete && pendingDelete.threads.length > 1) {
+        return `Delete ${pendingDelete.threads.length} Cursor threads?`;
+    }
+
+    return 'Delete Cursor thread?';
+};
+
+const CursorWorkspaceErrorComponent = ({ error }: { error: Error }) => {
+    return <ReloadErrorPanel description={error.message} title="Failed to load Cursor workspace" />;
+};
+
+const CursorWorkspacePage = () => {
+    const navigate = useNavigate();
+    const params = Route.useParams();
+    const queryClient = useQueryClient();
+    const workspaces = useSuspenseQuery(cursorWorkspacesQueryOptions()).data;
+    const workspace = findWorkspaceOrThrow(workspaces, params.workspaceKey);
+    const threads = useSuspenseQuery(cursorThreadsQueryOptions(workspace.key)).data;
+    const [searchInput, setSearchInput] = useState('');
+    const [pendingDelete, setPendingDelete] = useState<PendingCursorDelete | null>(null);
+    const [pendingExport, setPendingExport] = useState<PendingCursorExport | null>(null);
+    const deferredSearch = useDeferredValue(searchInput);
+
+    const invalidateWorkspaceQueries = async () => {
+        await Promise.all([
+            queryClient.invalidateQueries({ queryKey: ['cursor-workspaces'] }),
+            queryClient.invalidateQueries({ queryKey: ['cursor-threads', workspace.key] }),
+        ]);
+    };
+
+    const recoverWorkspaceMutation = useMutation({
+        mutationFn: () => recoverCursorWorkspaceFn({ data: { apply: true, workspaceKey: workspace.key } }),
+        onSuccess: invalidateWorkspaceQueries,
+    });
+
+    const deleteMutation = useMutation({
+        mutationFn: (target: PendingCursorDelete) =>
+            target.kind === 'workspace'
+                ? deleteCursorWorkspaceFn({ data: { workspaceKey: target.workspace.key } })
+                : deleteCursorThreadsFn({ data: { composerIds: target.threads.map((thread) => thread.composerId) } }),
+        onSuccess: async (_result, target) => {
+            if (target.kind === 'workspace') {
+                await navigate({ to: '/cursor' });
+                await queryClient.invalidateQueries({ queryKey: ['cursor-workspaces'] });
+                setPendingDelete(null);
+                return;
+            }
+
+            await invalidateWorkspaceQueries();
+            setPendingDelete(null);
+        },
+    });
+
+    const exportMutation = useMutation({
+        mutationFn: async (options: ExportDialogOptions) => {
+            if (!pendingExport) {
+                throw new Error('No thread selected for export');
+            }
+
+            const download =
+                pendingExport.composerIds.length === 1
+                    ? await exportCursorThreadFn({
+                          data: {
+                              ...options,
+                              composerId: pendingExport.composerIds[0]!,
+                          },
+                      })
+                    : await exportCursorThreadsFn({
+                          data: {
+                              ...options,
+                              composerIds: pendingExport.composerIds,
+                          },
+                      });
+
+            if (download.mode === 'download') {
+                downloadTextFile(download.fileName, download.content, download.mimeType);
+                return;
+            }
+
+            await downloadUrlFile(download.fileName, download.downloadUrl);
+        },
+        onSuccess: () => {
+            setPendingExport(null);
+        },
+    });
+
+    const visibleThreads = threads.filter((thread) =>
+        matchesTextQuery(deferredSearch, [thread.name, thread.composerId, thread.mode, thread.workspaceLabel]),
+    );
+    const openDeleteForSelectedThreads = (composerIds: string[]) => {
+        const nextPendingDelete = buildPendingCursorDelete(getSelectedThreads(visibleThreads, composerIds));
+        if (nextPendingDelete) {
+            setPendingDelete(nextPendingDelete);
+        }
+    };
+    const openExportForSelectedThreads = (composerIds: string[]) => {
+        const nextPendingExport = buildPendingCursorExport(getSelectedThreads(visibleThreads, composerIds));
+        if (nextPendingExport) {
+            setPendingExport(nextPendingExport);
+        }
+    };
+
+    return (
+        <div className="space-y-6">
+            <PageHeader
+                actions={
+                    <CursorWorkspaceHeaderActions
+                        deletePending={deleteMutation.isPending}
+                        recoverPending={recoverWorkspaceMutation.isPending}
+                        searchInput={searchInput}
+                        workspace={workspace}
+                        onDeleteWorkspace={() => setPendingDelete({ kind: 'workspace', workspace })}
+                        onRecoverWorkspace={() => recoverWorkspaceMutation.mutate()}
+                        onSearchInputChange={setSearchInput}
+                    />
+                }
+                eyebrow="Cursor workspace"
+                subtitle="Sort by any column, export thread transcripts, delete stale records, or repair split storage buckets for this workspace."
+                title={workspace.label}
+            />
+
+            <CursorWorkspaceRecoveryNotice workspace={workspace} />
+
+            <CursorThreadsTable
+                onDeleteThread={(thread) => setPendingDelete({ kind: 'threads', threads: [thread] })}
+                onDeleteThreads={openDeleteForSelectedThreads}
+                onExportThread={(thread) =>
+                    setPendingExport({
+                        composerIds: [thread.composerId],
+                        label: thread.name,
+                    })
+                }
+                onExportThreads={openExportForSelectedThreads}
+                threads={visibleThreads}
+            />
+
+            <CursorWorkspaceErrors
+                deleteError={deleteMutation.isError ? deleteMutation.error : null}
+                exportError={exportMutation.isError ? exportMutation.error : null}
+                recoverError={recoverWorkspaceMutation.isError ? recoverWorkspaceMutation.error : null}
+            />
+
+            <CursorWorkspaceDeleteDialog
+                pending={deleteMutation.isPending}
+                pendingDelete={pendingDelete}
+                onConfirm={() => {
+                    if (!pendingDelete) {
+                        return;
+                    }
+
+                    deleteMutation.mutate(pendingDelete);
+                }}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        setPendingDelete(null);
+                    }
+                }}
+            />
+
+            <ExportDialog
+                forceZipArchive={pendingExport ? pendingExport.composerIds.length > 1 : false}
+                open={pendingExport !== null}
+                pending={exportMutation.isPending}
+                title={pendingExport ? `Export ${pendingExport.label}` : 'Export thread'}
+                onExport={(options) => exportMutation.mutate(options)}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        setPendingExport(null);
+                    }
+                }}
+            />
+        </div>
+    );
+};
+
+const CursorWorkspaceHeaderActions = ({
+    deletePending,
+    recoverPending,
+    searchInput,
+    workspace,
+    onDeleteWorkspace,
+    onRecoverWorkspace,
+    onSearchInputChange,
+}: {
+    deletePending: boolean;
+    recoverPending: boolean;
+    searchInput: string;
+    workspace: CursorWorkspaceGroup;
+    onDeleteWorkspace: () => void;
+    onRecoverWorkspace: () => void;
+    onSearchInputChange: (value: string) => void;
+}) => {
+    return (
+        <div className="flex flex-col gap-2 sm:flex-row">
+            {workspace.needsRecovery ? (
+                <Button
+                    className="rounded-full"
+                    disabled={recoverPending}
+                    type="button"
+                    variant="outline"
+                    onClick={onRecoverWorkspace}
+                >
+                    <RefreshCcw className="mr-2 size-4" />
+                    {recoverPending ? 'Recovering...' : 'Recover'}
+                </Button>
+            ) : null}
+            <Button
+                className="rounded-full"
+                disabled={deletePending}
+                type="button"
+                variant="outline"
+                onClick={onDeleteWorkspace}
+            >
+                <Trash2 className="mr-2 size-4" />
+                Delete workspace
+            </Button>
+            <ListSearchInput
+                placeholder="Search thread name, id, or mode"
+                value={searchInput}
+                onValueChange={onSearchInputChange}
+            />
+        </div>
+    );
+};
+
+const CursorWorkspaceRecoveryNotice = ({ workspace }: { workspace: CursorWorkspaceGroup }) => {
+    if (!workspace.needsRecovery) {
+        return null;
+    }
+
+    return (
+        <div className="rounded-xl border border-[var(--border)] bg-[var(--panel)] px-4 py-4">
+            <p className="font-medium text-sm">This workspace has threads in an older storage bucket.</p>
+            <p className="mt-1 text-[var(--muted-foreground)] text-xs">
+                Recover merges those threads into the active bucket Cursor reads now so they reappear in Chat History.
+                Quit Cursor before running it.
+            </p>
+        </div>
+    );
+};
+
+const CursorWorkspaceErrors = ({
+    deleteError,
+    exportError,
+    recoverError,
+}: {
+    deleteError: Error | null;
+    exportError: Error | null;
+    recoverError: Error | null;
+}) => {
+    const entries = [
+        recoverError ? recoverError.message : null,
+        deleteError ? deleteError.message : null,
+        exportError ? exportError.message : null,
+    ].filter(Boolean);
+
+    if (entries.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="space-y-1">
+            {entries.map((message) => (
+                <p className="text-[var(--destructive)] text-sm" key={message}>
+                    {message}
+                </p>
+            ))}
+        </div>
+    );
+};
+
+const CursorWorkspaceDeleteDialog = ({
+    pending,
+    pendingDelete,
+    onConfirm,
+    onOpenChange,
+}: {
+    pending: boolean;
+    pendingDelete: PendingCursorDelete | null;
+    onConfirm: () => void;
+    onOpenChange: (open: boolean) => void;
+}) => {
+    return (
+        <DeleteConfirmDialog
+            confirmLabel={getCursorDeleteConfirmLabel(pendingDelete, pending)}
+            description={getCursorDeleteDescription(pendingDelete)}
+            open={pendingDelete !== null}
+            title={getCursorDeleteTitle(pendingDelete)}
+            onConfirm={onConfirm}
+            onOpenChange={onOpenChange}
+        />
+    );
+};
+
+export const Route = createFileRoute('/cursor/$workspaceKey')({
+    component: CursorWorkspacePage,
+    errorComponent: CursorWorkspaceErrorComponent,
+    loader: async ({ context, params }) => {
+        const workspaces = await context.queryClient.ensureQueryData(cursorWorkspacesQueryOptions());
+        findWorkspaceOrThrow(workspaces, params.workspaceKey);
+        await context.queryClient.ensureQueryData(cursorThreadsQueryOptions(params.workspaceKey));
+    },
+    pendingComponent: () => (
+        <LoadingPanel
+            description="Loading Cursor threads and workspace metadata. Larger workspaces can take a moment."
+            title="Loading workspace"
+        />
+    ),
+});

package/apps/ui/src/routes/cursor.index.tsx

@@ -0,0 +1,120 @@
+import type { CursorWorkspaceGroup } from '@spiracha/lib/cursor-exporter-types';
+import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { useDeferredValue, useState } from 'react';
+import { CursorWorkspacesTable } from '#/components/cursor-workspaces-table';
+import { DeleteConfirmDialog } from '#/components/delete-confirm-dialog';
+import { ListSearchInput } from '#/components/list-search-input';
+import { PageHeader } from '#/components/page-header';
+import { ReloadErrorPanel } from '#/components/reload-error-panel';
+import { cursorWorkspacesQueryOptions } from '#/lib/cursor-queries';
+import { deleteCursorWorkspaceFn, recoverCursorWorkspaceFn } from '#/lib/cursor-server';
+import { matchesTextQuery } from '#/lib/text-filter';
+
+const CursorErrorComponent = ({ error }: { error: Error }) => {
+    return <ReloadErrorPanel description={error.message} title="Failed to load Cursor workspaces" />;
+};
+
+const CursorPage = () => {
+    const queryClient = useQueryClient();
+    const workspaces = useSuspenseQuery(cursorWorkspacesQueryOptions()).data;
+    const [searchInput, setSearchInput] = useState('');
+    const [pendingDelete, setPendingDelete] = useState<CursorWorkspaceGroup | null>(null);
+    const deferredSearch = useDeferredValue(searchInput);
+
+    const invalidateCursorQueries = async () => {
+        await queryClient.invalidateQueries({ queryKey: ['cursor-workspaces'] });
+    };
+
+    const recoverWorkspaceMutation = useMutation({
+        mutationFn: (workspace: CursorWorkspaceGroup) =>
+            recoverCursorWorkspaceFn({ data: { apply: true, workspaceKey: workspace.key } }),
+        onSuccess: invalidateCursorQueries,
+    });
+
+    const deleteWorkspaceMutation = useMutation({
+        mutationFn: (workspace: CursorWorkspaceGroup) =>
+            deleteCursorWorkspaceFn({ data: { workspaceKey: workspace.key } }),
+        onSuccess: async () => {
+            await invalidateCursorQueries();
+            setPendingDelete(null);
+        },
+    });
+
+    const visibleWorkspaces = workspaces.filter((workspace) =>
+        matchesTextQuery(deferredSearch, [
+            workspace.label,
+            workspace.uri,
+            workspace.folders.join('\n'),
+            workspace.kind,
+        ]),
+    );
+
+    return (
+        <div className="space-y-6">
+            <PageHeader
+                actions={
+                    <ListSearchInput
+                        placeholder="Search workspace name or path"
+                        value={searchInput}
+                        onValueChange={setSearchInput}
+                    />
+                }
+                eyebrow="Inventory"
+                subtitle="Workspace groups are derived from Cursor storage buckets and activity metadata. Open a workspace to inspect, export, recover, or delete its threads."
+                title="Cursor"
+            />
+
+            <CursorWorkspacesTable
+                onDeleteWorkspace={setPendingDelete}
+                onRecoverWorkspace={(workspace) => recoverWorkspaceMutation.mutate(workspace)}
+                workspaces={visibleWorkspaces}
+            />
+
+            {recoverWorkspaceMutation.isError ? (
+                <p className="text-[var(--destructive)] text-sm">
+                    {recoverWorkspaceMutation.error instanceof Error
+                        ? recoverWorkspaceMutation.error.message
+                        : 'Workspace recovery failed'}
+                </p>
+            ) : null}
+
+            {deleteWorkspaceMutation.isError ? (
+                <p className="text-[var(--destructive)] text-sm">
+                    {deleteWorkspaceMutation.error instanceof Error
+                        ? deleteWorkspaceMutation.error.message
+                        : 'Workspace deletion failed'}
+                </p>
+            ) : null}
+
+            <DeleteConfirmDialog
+                confirmLabel={deleteWorkspaceMutation.isPending ? 'Deleting...' : 'Delete workspace'}
+                description={
+                    pendingDelete
+                        ? `Permanently delete every thread for "${pendingDelete.label}" from Cursor's database and remove any on-disk transcript directories. Quit Cursor first. This cannot be undone.`
+                        : ''
+                }
+                open={pendingDelete !== null}
+                title="Delete Cursor workspace?"
+                onConfirm={() => {
+                    if (!pendingDelete) {
+                        return;
+                    }
+
+                    deleteWorkspaceMutation.mutate(pendingDelete);
+                }}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        setPendingDelete(null);
+                    }
+                }}
+            />
+        </div>
+    );
+};
+
+export const Route = createFileRoute('/cursor/')({
+    component: CursorPage,
+    errorComponent: CursorErrorComponent,
+    loader: ({ context }) => context.queryClient.ensureQueryData(cursorWorkspacesQueryOptions()),
+});

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

@@ -0,0 +1,124 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { MetricCard } from '#/components/metric-card';
+import { PageHeader } from '#/components/page-header';
+import { RecentThreadsList } from '#/components/recent-threads-list';
+import { dashboardQueryOptions } from '#/lib/codex-queries';
+import { formatNumber, formatTokens } from '#/lib/formatters';
+
+export const Route = createFileRoute('/')({
+    component: DashboardPage,
+    loader: ({ context }) => context.queryClient.ensureQueryData(dashboardQueryOptions()),
+});
+
+function DashboardErrorComponent({ error }: { error: Error }) {
+    const isSqlite = error.message.includes('unable to open database') || error.message.includes('database is locked');
+    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">
+                {isSqlite ? 'Database unavailable' : 'Failed to load dashboard'}
+            </p>
+            <p className="mt-2 text-[var(--muted-foreground)] text-sm">
+                {isSqlite ? 'Codex may have an exclusive lock on the database. Reload to retry.' : error.message}
+            </p>
+            <button
+                className="mt-4 text-[var(--accent)] text-sm underline-offset-2 hover:underline"
+                type="button"
+                onClick={() => window.location.reload()}
+            >
+                Reload
+            </button>
+        </div>
+    );
+}
+
+Route.update({ errorComponent: DashboardErrorComponent });
+
+function DashboardPage() {
+    const dashboard = useSuspenseQuery(dashboardQueryOptions()).data;
+
+    return (
+        <div className="space-y-6">
+            <PageHeader
+                actions={
+                    <img
+                        alt="Spiracha icon"
+                        className="size-16 shrink-0 rounded-2xl border border-[var(--border)] bg-white/95 p-2 shadow-[var(--panel-shadow)]"
+                        src="/icon.svg"
+                    />
+                }
+                eyebrow="Overview"
+                subtitle="A compact readout of local Codex activity, project distribution, and recent thread movement."
+                title="Dashboard"
+            />
+
+            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+                <MetricCard label="Threads" value={formatNumber(dashboard.totalThreads)} />
+                <MetricCard label="Projects" value={formatNumber(dashboard.totalProjects)} />
+                <MetricCard label="Tokens" value={formatTokens(dashboard.totalTokens)} />
+                <MetricCard
+                    helper={`${formatNumber(dashboard.archivedThreads)} archived`}
+                    label="Active"
+                    value={formatNumber(dashboard.activeThreads)}
+                />
+            </div>
+
+            <div className="grid min-w-0 gap-4 xl:grid-cols-[1.4fr_1fr]">
+                <section className="min-w-0 overflow-hidden rounded-[1.8rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]">
+                    <div className="flex items-center justify-between gap-3">
+                        <div className="min-w-0">
+                            <p className="font-semibold text-sm">Recent threads</p>
+                            <p className="mt-0.5 text-[var(--muted-foreground)] text-xs">
+                                Most recently updated threads across the local Codex database.
+                            </p>
+                        </div>
+                        <Link className="shrink-0 font-medium text-[var(--accent)] text-sm" to="/codex">
+                            View Codex
+                        </Link>
+                    </div>
+                    <RecentThreadsList threads={dashboard.recentThreads} />
+                </section>
+
+                <div className="grid min-w-0 gap-4">
+                    <section className="min-w-0 overflow-hidden rounded-[1.8rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]">
+                        <p className="font-semibold text-sm">Top projects by thread count</p>
+                        <div className="mt-3 space-y-2">
+                            {dashboard.topProjectsByThreadCount.map((project) => (
+                                <Link
+                                    key={project.name}
+                                    className="flex items-center justify-between gap-3 rounded-lg border border-[var(--border)] bg-[var(--panel-secondary)] px-3.5 py-2.5 text-sm"
+                                    params={{ project: project.name }}
+                                    to="/codex/$project"
+                                >
+                                    <span className="truncate">{project.name}</span>
+                                    <span className="shrink-0 font-mono text-[var(--muted-foreground)]">
+                                        {formatNumber(project.threadCount)}
+                                    </span>
+                                </Link>
+                            ))}
+                        </div>
+                    </section>
+
+                    <section className="min-w-0 overflow-hidden rounded-[1.8rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]">
+                        <p className="font-semibold text-sm">Top projects by tokens</p>
+                        <div className="mt-3 space-y-2">
+                            {dashboard.topProjectsByTokens.map((project) => (
+                                <Link
+                                    key={project.name}
+                                    className="flex items-center justify-between gap-3 rounded-lg border border-[var(--border)] bg-[var(--panel-secondary)] px-3.5 py-2.5 text-sm"
+                                    params={{ project: project.name }}
+                                    to="/codex/$project"
+                                >
+                                    <span className="truncate">{project.name}</span>
+                                    <span className="shrink-0 font-mono text-[var(--muted-foreground)]">
+                                        {formatTokens(project.totalTokens)}
+                                    </span>
+                                </Link>
+                            ))}
+                        </div>
+                    </section>
+                </div>
+            </div>
+        </div>
+    );
+}