spiracha 1.5.0 → 2.1.0

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

@@ -0,0 +1,301 @@
+import type { GrokSessionSummary, GrokWorkspaceGroup } from '@spiracha/lib/grok-exporter-types';
+import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Trash2 } from 'lucide-react';
+import { useDeferredValue, useMemo, useState } from 'react';
+import { DeleteConfirmDialog } from '#/components/delete-confirm-dialog';
+import { ExportDialog } from '#/components/export-dialog';
+import { GrokSessionsTable } from '#/components/grok-sessions-table';
+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 { downloadTextFile, downloadUrlFile } from '#/lib/download';
+import { grokSessionsQueryOptions, grokWorkspacesQueryOptions } from '#/lib/grok-queries';
+import {
+    deleteGrokSessionFn,
+    deleteGrokSessionsFn,
+    exportGrokSessionFn,
+    exportGrokSessionsFn,
+} from '#/lib/grok-server';
+import { matchesTextQuery } from '#/lib/text-filter';
+import { isWorkspaceEmptiedByDelete } from '#/lib/workspace-delete-navigation';
+
+type ExportDialogOptions = {
+    includeCommentary: boolean;
+    includeMetadata: boolean;
+    includeTools: boolean;
+    outputFormat: 'md' | 'txt';
+    zipArchive: boolean;
+};
+
+type PendingSessionDelete = {
+    scope: 'all' | 'selected';
+    sessions: GrokSessionSummary[];
+};
+
+type PendingSessionExport = {
+    label: string;
+    sessionIds: string[];
+};
+
+const findWorkspaceOrThrow = (workspaces: GrokWorkspaceGroup[], workspaceKey: string) => {
+    const workspace = workspaces.find((candidate) => candidate.key === workspaceKey);
+    if (!workspace) {
+        throw new Error(`Grok workspace not found: ${workspaceKey}`);
+    }
+
+    return workspace;
+};
+
+const buildSessionExport = (selectedSessions: GrokSessionSummary[]): PendingSessionExport => ({
+    label: selectedSessions.length === 1 ? selectedSessions[0]!.title : `${selectedSessions.length} selected sessions`,
+    sessionIds: selectedSessions.map((session) => session.sessionId),
+});
+
+const getDeleteConfirmLabel = (pendingDelete: PendingSessionDelete | null, isPending: boolean) => {
+    if (isPending) {
+        return 'Deleting...';
+    }
+
+    if (pendingDelete?.scope === 'all') {
+        return 'Delete all';
+    }
+
+    return pendingDelete && pendingDelete.sessions.length > 1 ? 'Delete sessions' : 'Delete session';
+};
+
+const getDeleteDescription = (pendingDelete: PendingSessionDelete | null) => {
+    if (!pendingDelete) {
+        return 'Permanently delete the selected Grok sessions from local history.';
+    }
+
+    if (pendingDelete.scope === 'all') {
+        return `Permanently delete all ${pendingDelete.sessions.length} Grok sessions in this workspace from local history. This removes their session directories and transcript files under ~/.grok/sessions.`;
+    }
+
+    if (pendingDelete.sessions.length === 1) {
+        return `Permanently delete "${pendingDelete.sessions[0]!.title}" from Grok history. This removes the session directory and transcript files under ~/.grok/sessions.`;
+    }
+
+    return `Permanently delete ${pendingDelete.sessions.length} selected Grok sessions from local history. This removes their session directories and transcript files under ~/.grok/sessions.`;
+};
+
+const getDeleteTitle = (pendingDelete: PendingSessionDelete | null) => {
+    if (pendingDelete?.scope === 'all') {
+        return `Delete all ${pendingDelete.sessions.length} Grok sessions?`;
+    }
+
+    return pendingDelete && pendingDelete.sessions.length > 1
+        ? `Delete ${pendingDelete.sessions.length} Grok sessions?`
+        : 'Delete this Grok session?';
+};
+
+export const Route = createFileRoute('/grok/$workspaceKey')({
+    component: GrokWorkspacePage,
+    errorComponent: GrokWorkspaceErrorComponent,
+    loader: async ({ context, params }) => {
+        const workspaces = await context.queryClient.ensureQueryData(grokWorkspacesQueryOptions());
+        findWorkspaceOrThrow(workspaces, params.workspaceKey);
+        await context.queryClient.ensureQueryData(grokSessionsQueryOptions(params.workspaceKey));
+    },
+    pendingComponent: () => <LoadingPanel description="Loading Grok sessions." title="Loading workspace" />,
+});
+
+function GrokWorkspaceErrorComponent({ error }: { error: Error }) {
+    return <ReloadErrorPanel description={error.message} title="Failed to load Grok workspace" />;
+}
+
+function GrokWorkspacePage() {
+    const navigate = useNavigate({ from: Route.fullPath });
+    const params = Route.useParams();
+    const queryClient = useQueryClient();
+    const workspaces = useSuspenseQuery(grokWorkspacesQueryOptions()).data;
+    const workspace = findWorkspaceOrThrow(workspaces, params.workspaceKey);
+    const sessions = useSuspenseQuery(grokSessionsQueryOptions(workspace.key)).data;
+    const [searchInput, setSearchInput] = useState('');
+    const [pendingDelete, setPendingDelete] = useState<PendingSessionDelete | null>(null);
+    const [pendingExport, setPendingExport] = useState<PendingSessionExport | null>(null);
+    const deferredSearch = useDeferredValue(searchInput);
+
+    const exportMutation = useMutation({
+        mutationFn: async (options: ExportDialogOptions) => {
+            if (!pendingExport) {
+                throw new Error('No Grok session selected for export');
+            }
+
+            const download =
+                pendingExport.sessionIds.length === 1
+                    ? await exportGrokSessionFn({
+                          data: {
+                              includeCommentary: options.includeCommentary,
+                              includeMetadata: options.includeMetadata,
+                              includeTools: options.includeTools,
+                              outputFormat: options.outputFormat,
+                              sessionId: pendingExport.sessionIds[0]!,
+                              zipArchive: options.zipArchive,
+                          },
+                      })
+                    : await exportGrokSessionsFn({
+                          data: {
+                              includeCommentary: options.includeCommentary,
+                              includeMetadata: options.includeMetadata,
+                              includeTools: options.includeTools,
+                              outputFormat: options.outputFormat,
+                              sessionIds: pendingExport.sessionIds,
+                              zipArchive: options.zipArchive,
+                          },
+                      });
+            if (download.mode === 'download') {
+                downloadTextFile(download.fileName, download.content, download.mimeType);
+                return;
+            }
+
+            await downloadUrlFile(download.fileName, download.downloadUrl);
+        },
+        onSuccess: () => {
+            setPendingExport(null);
+        },
+    });
+
+    const deleteMutation = useMutation({
+        mutationFn: async (sessionIds: string[]) =>
+            sessionIds.length === 1
+                ? deleteGrokSessionFn({ data: { sessionId: sessionIds[0]! } })
+                : deleteGrokSessionsFn({ data: { sessionIds } }),
+        onSuccess: async (_result, sessionIds) => {
+            const workspaceEmptied = isWorkspaceEmptiedByDelete(sessions, sessionIds, (session) => session.sessionId);
+            setPendingDelete(null);
+            if (workspaceEmptied) {
+                await navigate({ to: '/grok' });
+            }
+
+            await Promise.all([
+                queryClient.invalidateQueries({ queryKey: ['grok-workspaces'] }),
+                queryClient.invalidateQueries({ queryKey: ['grok-sessions', workspace.key] }),
+                ...sessionIds.map((sessionId) =>
+                    queryClient.invalidateQueries({ queryKey: ['grok-session', sessionId] }),
+                ),
+            ]);
+        },
+    });
+
+    const visibleSessions = useMemo(
+        () =>
+            sessions.filter((session) =>
+                matchesTextQuery(deferredSearch, [
+                    session.title,
+                    session.sessionId,
+                    session.agentName,
+                    session.currentModelId,
+                    session.modelLabel,
+                    session.gitBranch,
+                ]),
+            ),
+        [deferredSearch, sessions],
+    );
+    const visibleSessionsById = useMemo(
+        () => new Map(visibleSessions.map((session) => [session.sessionId, session])),
+        [visibleSessions],
+    );
+    const lookupSelectedSessions = (sessionIds: string[]) =>
+        sessionIds
+            .map((sessionId) => visibleSessionsById.get(sessionId) ?? null)
+            .filter((session): session is GrokSessionSummary => session !== null);
+    const openExportForSessions = (selectedSessions: GrokSessionSummary[]) => {
+        if (selectedSessions.length === 0) {
+            return;
+        }
+
+        setPendingExport(buildSessionExport(selectedSessions));
+    };
+    const openDeleteForSessions = (selectedSessions: GrokSessionSummary[], scope: PendingSessionDelete['scope']) => {
+        if (selectedSessions.length > 0) {
+            setPendingDelete({ scope, sessions: selectedSessions });
+        }
+    };
+
+    return (
+        <div className="space-y-6">
+            <PageHeader
+                actions={
+                    <div className="flex flex-col gap-2 sm:flex-row">
+                        <Button
+                            className="rounded-full"
+                            disabled={deleteMutation.isPending || sessions.length === 0}
+                            type="button"
+                            variant="destructive"
+                            onClick={() => openDeleteForSessions(sessions, 'all')}
+                        >
+                            <Trash2 className="size-4" />
+                            Delete all
+                        </Button>
+                        <ListSearchInput
+                            placeholder="Search session title, id, model, or branch"
+                            value={searchInput}
+                            onValueChange={setSearchInput}
+                        />
+                    </div>
+                }
+                eyebrow="Grok workspace"
+                subtitle="Inspect local Grok CLI sessions, reasoning summaries, tool calls, and exportable conversation text."
+                title={workspace.label}
+            />
+
+            <GrokSessionsTable
+                sessions={visibleSessions}
+                onDeleteSession={(session) => openDeleteForSessions([session], 'selected')}
+                onDeleteSessions={(sessionIds) => openDeleteForSessions(lookupSelectedSessions(sessionIds), 'selected')}
+                onExportSession={(session) => openExportForSessions([session])}
+                onExportSessions={(sessionIds) => openExportForSessions(lookupSelectedSessions(sessionIds))}
+            />
+
+            <ExportDialog
+                errorMessage={
+                    exportMutation.isError
+                        ? exportMutation.error instanceof Error
+                            ? exportMutation.error.message
+                            : 'Session export failed'
+                        : null
+                }
+                forceZipArchive={pendingExport ? pendingExport.sessionIds.length > 1 : false}
+                open={pendingExport !== null}
+                pending={exportMutation.isPending}
+                title={pendingExport ? `Export ${pendingExport.label}` : 'Export session'}
+                onExport={(options) => exportMutation.mutate(options)}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        setPendingExport(null);
+                        exportMutation.reset();
+                    }
+                }}
+            />
+
+            <DeleteConfirmDialog
+                confirmLabel={getDeleteConfirmLabel(pendingDelete, deleteMutation.isPending)}
+                description={getDeleteDescription(pendingDelete)}
+                errorMessage={
+                    deleteMutation.isError
+                        ? deleteMutation.error instanceof Error
+                            ? deleteMutation.error.message
+                            : 'Session delete failed'
+                        : null
+                }
+                open={pendingDelete !== null}
+                title={getDeleteTitle(pendingDelete)}
+                onConfirm={() => {
+                    if (pendingDelete) {
+                        deleteMutation.mutate(pendingDelete.sessions.map((session) => session.sessionId));
+                    }
+                }}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        setPendingDelete(null);
+                        deleteMutation.reset();
+                    }
+                }}
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1,48 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { useDeferredValue, useState } from 'react';
+import { GrokWorkspacesTable } from '#/components/grok-workspaces-table';
+import { ListSearchInput } from '#/components/list-search-input';
+import { PageHeader } from '#/components/page-header';
+import { ReloadErrorPanel } from '#/components/reload-error-panel';
+import { grokWorkspacesQueryOptions } from '#/lib/grok-queries';
+import { matchesTextQuery } from '#/lib/text-filter';
+
+const GrokErrorComponent = ({ error }: { error: Error }) => {
+    return <ReloadErrorPanel description={error.message} title="Failed to load Grok workspaces" />;
+};
+
+const GrokPage = () => {
+    const workspaces = useSuspenseQuery(grokWorkspacesQueryOptions()).data;
+    const [searchInput, setSearchInput] = useState('');
+    const deferredSearch = useDeferredValue(searchInput);
+
+    const visibleWorkspaces = workspaces.filter((workspace) =>
+        matchesTextQuery(deferredSearch, [workspace.label, workspace.worktree, workspace.key]),
+    );
+
+    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 local Grok CLI session directories under ~/.grok/sessions."
+                title="Grok"
+            />
+
+            <GrokWorkspacesTable workspaces={visibleWorkspaces} />
+        </div>
+    );
+};
+
+export const Route = createFileRoute('/grok/')({
+    component: GrokPage,
+    errorComponent: GrokErrorComponent,
+    loader: ({ context }) => context.queryClient.ensureQueryData(grokWorkspacesQueryOptions()),
+});

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>
+    );
+}