spiracha 1.5.0 → 2.1.0

package/apps/ui/src/router.tsx

@@ -0,0 +1,20 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router';
+import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query';
+import { getContext } from './integrations/tanstack-query/root-provider';
+import { routeTree } from './routeTree.gen';
+
+export function getRouter() {
+    const context = getContext();
+
+    const router = createTanStackRouter({
+        context,
+        defaultPreload: 'intent',
+        defaultPreloadStaleTime: 0,
+        routeTree,
+        scrollRestoration: true,
+    });
+
+    setupRouterSsrQueryIntegration({ queryClient: context.queryClient, router });
+
+    return router;
+}

package/apps/ui/src/routes/$threadId.tsx

@@ -0,0 +1,22 @@
+import { createFileRoute, notFound, redirect } from '@tanstack/react-router';
+import { isCodexThreadId } from '#/lib/thread-id';
+
+export const Route = createFileRoute('/$threadId')({
+    beforeLoad: ({ params }) => {
+        if (!isCodexThreadId(params.threadId)) {
+            throw notFound();
+        }
+
+        throw redirect({
+            params: {
+                threadId: params.threadId,
+            },
+            to: '/threads/$threadId',
+        });
+    },
+    component: ThreadShortcutRedirectPage,
+});
+
+function ThreadShortcutRedirectPage() {
+    return null;
+}

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

@@ -0,0 +1,127 @@
+import type { QueryClient } from '@tanstack/react-query';
+import { createRootRouteWithContext, HeadContent, Outlet, Scripts } from '@tanstack/react-router';
+import type { ReactNode } from 'react';
+import { AppShell } from '#/components/app-shell';
+import { TooltipProvider } from '#/components/ui/tooltip';
+import { SettingsProvider } from '#/lib/settings-store';
+import appCss from '#/styles.css?url';
+
+type RouterContext = {
+    queryClient: QueryClient;
+};
+
+const themeInitScript = `
+  (() => {
+    try {
+      const stored = window.localStorage.getItem('spiracha-theme')
+      const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      const mode = stored === 'dark' || stored === 'light' ? stored : preferred
+      document.documentElement.classList.add(mode)
+      document.documentElement.style.colorScheme = mode
+    } catch {}
+  })()
+`;
+
+function RootErrorComponent({ error }: { error: Error }) {
+    const isSqliteError =
+        error.message.includes('unable to open database') ||
+        error.message.includes('database is locked') ||
+        error.message.includes('SQLITE_');
+
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-[#101418] px-4 text-[#eef3f7]">
+            <div className="max-w-[30rem] text-center">
+                <h1 className="mb-3 font-semibold text-base">
+                    {isSqliteError ? 'Database unavailable' : 'Something went wrong'}
+                </h1>
+                {isSqliteError ? (
+                    <p className="my-2 text-[#99a3af] text-[0.875rem] leading-6">
+                        Spiracha could not open the Codex SQLite database. Codex may have an exclusive lock on the file,
+                        or the database does not exist yet. Close Codex or wait a moment, then reload.
+                    </p>
+                ) : (
+                    <p className="my-2 text-[#99a3af] text-[0.875rem] leading-6">
+                        <code className="rounded border border-white/10 bg-[#12181e] px-1.5 py-1 text-[0.8em]">
+                            {error.message}
+                        </code>
+                    </p>
+                )}
+                <button
+                    className="mt-6 rounded-full border border-white/15 bg-[#1a222b] px-5 py-2 text-sm hover:bg-[#222e3a]"
+                    type="button"
+                    onClick={() => window.location.reload()}
+                >
+                    Reload
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+    component: RootComponent,
+    errorComponent: RootErrorComponent,
+    head: () => ({
+        links: [
+            {
+                href: appCss,
+                rel: 'stylesheet',
+            },
+            {
+                href: '/icon.svg',
+                rel: 'icon',
+                type: 'image/svg+xml',
+            },
+            {
+                href: '/manifest.json',
+                rel: 'manifest',
+            },
+        ],
+        meta: [
+            {
+                charSet: 'utf-8',
+            },
+            {
+                content: 'width=device-width, initial-scale=1',
+                name: 'viewport',
+            },
+            {
+                content:
+                    'Browse local Codex, Claude Code, Kiro, Qoder, Cursor, Antigravity, and OpenCode history through a compact workspace UI.',
+                name: 'description',
+            },
+            {
+                title: 'Spiracha UI',
+            },
+        ],
+    }),
+});
+
+function RootComponent() {
+    return (
+        <RootDocument>
+            <SettingsProvider>
+                <TooltipProvider>
+                    <AppShell>
+                        <Outlet />
+                    </AppShell>
+                </TooltipProvider>
+            </SettingsProvider>
+        </RootDocument>
+    );
+}
+
+function RootDocument({ children }: { children: ReactNode }) {
+    return (
+        <html lang="en" suppressHydrationWarning>
+            <head>
+                <script>{themeInitScript}</script>
+                <HeadContent />
+            </head>
+            <body>
+                {children}
+                <Scripts />
+            </body>
+        </html>
+    );
+}

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

@@ -0,0 +1,143 @@
+import type { ModelTokenSummary, ToolUsageSummary } from '@spiracha/lib/codex-browser-types';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { createColumnHelper } from '@tanstack/react-table';
+import { startTransition } from 'react';
+import { DataTable } from '#/components/data-table';
+import { MetricCard } from '#/components/metric-card';
+import { PageHeader } from '#/components/page-header';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '#/components/ui/select';
+import { analyticsQueryOptions, projectsQueryOptions } from '#/lib/codex-queries';
+import { formatNumber, formatTokens } from '#/lib/formatters';
+import {
+    decodeAnalyticsProjectSelectValue,
+    encodeAnalyticsProjectSelectValue,
+    parseAnalyticsSearch,
+    withAnalyticsProjectSearch,
+} from '#/lib/route-search';
+
+const toolUsageColumnHelper = createColumnHelper<ToolUsageSummary>();
+const toolUsageColumns = [
+    toolUsageColumnHelper.accessor('name', {
+        cell: (info) => <span className="font-mono text-sm">{info.getValue()}</span>,
+        header: 'Tool',
+    }),
+    toolUsageColumnHelper.accessor('count', {
+        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+        header: 'Calls',
+    }),
+] as const;
+
+const modelColumnHelper = createColumnHelper<ModelTokenSummary>();
+const modelColumns = [
+    modelColumnHelper.accessor('model', {
+        cell: (info) => <span className="font-mono text-sm">{info.getValue()}</span>,
+        header: 'Model',
+    }),
+    modelColumnHelper.accessor('threadCount', {
+        cell: (info) => <span className="font-mono text-sm">{formatNumber(info.getValue())}</span>,
+        header: 'Threads',
+    }),
+    modelColumnHelper.accessor('totalTokens', {
+        cell: (info) => <span className="font-mono text-sm">{formatTokens(info.getValue())}</span>,
+        header: 'Tokens',
+    }),
+] as const;
+
+export const Route = createFileRoute('/analytics')({
+    component: AnalyticsPage,
+    loader: ({ context, deps }) => {
+        const { project } = deps as { project: string | null };
+        return Promise.all([
+            context.queryClient.ensureQueryData(projectsQueryOptions()),
+            context.queryClient.ensureQueryData(analyticsQueryOptions(project)),
+        ]);
+    },
+    loaderDeps: ({ search }) => ({ project: parseAnalyticsSearch(search).project ?? null }),
+    validateSearch: parseAnalyticsSearch,
+});
+
+function AnalyticsPage() {
+    const navigate = useNavigate({ from: Route.fullPath });
+    const projects = useSuspenseQuery(projectsQueryOptions()).data;
+    const search = Route.useSearch();
+    const selectedProject = search.project ?? null;
+    const analytics = useSuspenseQuery(analyticsQueryOptions(selectedProject)).data;
+
+    return (
+        <div className="space-y-6">
+            <PageHeader
+                actions={
+                    <Select
+                        value={encodeAnalyticsProjectSelectValue(selectedProject)}
+                        onValueChange={(value) => {
+                            startTransition(() => {
+                                void navigate({
+                                    replace: true,
+                                    search: (previous: Record<string, unknown>) =>
+                                        withAnalyticsProjectSearch(previous, decodeAnalyticsProjectSelectValue(value)),
+                                });
+                            });
+                        }}
+                    >
+                        <SelectTrigger className="h-10 w-full rounded-full border-[var(--border)] bg-[var(--panel)] sm:w-[15rem]">
+                            <SelectValue placeholder="Filter by project" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="__all__">All projects</SelectItem>
+                            {projects.map((project) => (
+                                <SelectItem key={project.name} value={encodeAnalyticsProjectSelectValue(project.name)}>
+                                    {project.name}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                }
+                eyebrow="Analytics"
+                subtitle="Inspect token load, tool-call distribution, and project-scoped usage patterns to understand where Codex is spending effort."
+                title="Analytics"
+            />
+
+            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
+                <MetricCard label="Threads" value={formatNumber(analytics.summary.totalThreads)} />
+                <MetricCard label="Projects" value={formatNumber(analytics.summary.totalProjects)} />
+                <MetricCard label="Tokens" value={formatTokens(analytics.summary.totalTokens)} />
+                <MetricCard
+                    label="Average per thread"
+                    value={formatTokens(Math.round(analytics.summary.averageTokensPerThread))}
+                />
+                <MetricCard label="Web search threads" value={formatNumber(analytics.summary.threadsWithWebSearch)} />
+            </div>
+
+            <div className="grid gap-4 xl:grid-cols-2">
+                <section className="space-y-4">
+                    <div>
+                        <h3 className="font-semibold text-sm">Most frequent tool calls</h3>
+                        <p className="mt-1 text-[var(--muted-foreground)] text-sm">
+                            Useful for future prompt and tool optimization work.
+                        </p>
+                    </div>
+                    <DataTable
+                        columns={toolUsageColumns}
+                        data={analytics.toolUsage}
+                        emptyMessage="No tool calls recorded."
+                    />
+                </section>
+
+                <section className="space-y-4">
+                    <div>
+                        <h3 className="font-semibold text-sm">Model token breakdown</h3>
+                        <p className="mt-1 text-[var(--muted-foreground)] text-sm">
+                            Compare model usage and token concentration within the current project scope.
+                        </p>
+                    </div>
+                    <DataTable
+                        columns={modelColumns}
+                        data={analytics.modelsByTokens}
+                        emptyMessage="No model usage recorded."
+                    />
+                </section>
+            </div>
+        </div>
+    );
+}