spiracha 1.0.0 → 1.1.1

package/apps/ui/dist/server/assets/projects.index-srtogpuF.js

@@ -0,0 +1,172 @@
+import { t as Button } from "./button-CmTDnzOn.js";
+import { i as projectsQueryOptions, s as deleteProjectFn } from "./codex-queries-CAF6HYiG.js";
+import { t as DataTable } from "./data-table-Cdct823O.js";
+import { t as PageHeader } from "./page-header-CxdZM86z.js";
+import { i as formatList, o as formatNumber, r as formatDateTime, s as formatTokens } from "./formatters-FJaGZgJk.js";
+import { t as DeleteConfirmDialog } from "./delete-confirm-dialog-CWqcTXTF.js";
+import { a as DropdownMenuTrigger, i as DropdownMenuItem, n as DropdownMenu, r as DropdownMenuContent, t as Input } from "./input-B4tEzctc.js";
+import { startTransition, useDeferredValue, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { MoreHorizontal, Trash2 } from "lucide-react";
+import { createColumnHelper } from "@tanstack/react-table";
+//#region src/components/projects-table.tsx
+var columnHelper = createColumnHelper();
+var columns = (onDeleteProject) => [
+	columnHelper.accessor("name", {
+		cell: (info) => /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "font-medium",
+				children: info.getValue()
+			}), /* @__PURE__ */ jsxs("p", {
+				className: "text-[var(--muted-foreground)] text-xs",
+				children: [
+					formatNumber(info.row.original.cwdPaths.length),
+					" cwd path",
+					info.row.original.cwdPaths.length === 1 ? "" : "s"
+				]
+			})]
+		}),
+		header: "Project"
+	}),
+	columnHelper.accessor("threadCount", {
+		cell: (info) => /* @__PURE__ */ jsx("span", {
+			className: "font-mono text-sm",
+			children: formatNumber(info.getValue())
+		}),
+		header: "Threads"
+	}),
+	columnHelper.accessor("totalTokens", {
+		cell: (info) => /* @__PURE__ */ jsx("span", {
+			className: "font-mono text-sm",
+			children: formatTokens(info.getValue())
+		}),
+		header: "Tokens"
+	}),
+	columnHelper.accessor("lastUpdatedAtMs", {
+		cell: (info) => /* @__PURE__ */ jsx("span", {
+			className: "text-sm",
+			suppressHydrationWarning: true,
+			children: formatDateTime(info.getValue())
+		}),
+		header: "Last updated"
+	}),
+	columnHelper.display({
+		cell: (info) => /* @__PURE__ */ jsx("span", {
+			className: "text-[var(--muted-foreground)] text-sm",
+			children: formatList(info.row.original.modelNames)
+		}),
+		header: "Models",
+		id: "models"
+	}),
+	columnHelper.accessor("archivedThreadCount", {
+		cell: (info) => /* @__PURE__ */ jsx("span", {
+			className: "text-sm",
+			children: formatNumber(info.getValue())
+		}),
+		header: "Archived"
+	}),
+	columnHelper.display({
+		cell: (info) => /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				className: "rounded-full",
+				size: "icon",
+				type: "button",
+				variant: "ghost",
+				onClick: (event) => event.stopPropagation(),
+				children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "end",
+			children: /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "text-[var(--destructive)]",
+				onClick: () => onDeleteProject(info.row.original),
+				children: [/* @__PURE__ */ jsx(Trash2, { className: "mr-2 size-4" }), "Delete project"]
+			})
+		})] }),
+		header: "",
+		id: "actions"
+	})
+];
+function ProjectsTable({ projects, onDeleteProject }) {
+	const navigate = useNavigate();
+	return /* @__PURE__ */ jsx(DataTable, {
+		columns: columns(onDeleteProject),
+		data: projects,
+		emptyMessage: "No projects match the current search.",
+		onRowClick: (project) => navigate({
+			params: { project: project.name },
+			to: "/projects/$project"
+		})
+	});
+}
+//#endregion
+//#region src/routes/projects.index.tsx?tsr-split=component
+function ProjectsPage() {
+	const queryClient = useQueryClient();
+	const projects = useSuspenseQuery(projectsQueryOptions()).data;
+	const [searchInput, setSearchInput] = useState("");
+	const [pendingDelete, setPendingDelete] = useState(null);
+	const deferredSearch = useDeferredValue(searchInput.trim().toLowerCase());
+	const deleteProjectMutation = useMutation({
+		mutationFn: (input) => deleteProjectFn({ data: input }),
+		onSuccess: async () => {
+			await Promise.all([
+				queryClient.invalidateQueries({ queryKey: ["analytics"] }),
+				queryClient.invalidateQueries({ queryKey: ["dashboard"] }),
+				queryClient.invalidateQueries({ queryKey: ["projects"] })
+			]);
+			setPendingDelete(null);
+		}
+	});
+	const visibleProjects = projects.filter((project) => {
+		if (!deferredSearch) return true;
+		return project.name.toLowerCase().includes(deferredSearch);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsx(PageHeader, {
+				actions: /* @__PURE__ */ jsx(Input, {
+					className: "h-10 w-full rounded-full border-[var(--border)] bg-[var(--panel)] px-4 sm:w-[20rem]",
+					placeholder: "Search projects by name",
+					value: searchInput,
+					onChange: (event) => {
+						startTransition(() => {
+							setSearchInput(event.target.value);
+						});
+					}
+				}),
+				eyebrow: "Inventory",
+				subtitle: "Derived projects are grouped from the final basename of each thread cwd, matching the existing CLI behavior.",
+				title: "Projects"
+			}),
+			/* @__PURE__ */ jsx(ProjectsTable, {
+				projects: visibleProjects,
+				onDeleteProject: setPendingDelete
+			}),
+			/* @__PURE__ */ jsx(DeleteConfirmDialog, {
+				confirmLabel: deleteProjectMutation.isPending ? "Deleting..." : "Delete project",
+				description: pendingDelete ? `Delete ${pendingDelete.threadCount} thread records for the derived project "${pendingDelete.name}" from the Codex database. Enable Delete Session files to remove the rollout JSONL files too.` : "",
+				open: pendingDelete !== null,
+				showDeleteSessionFilesOption: true,
+				title: "Delete project from Codex DB?",
+				onConfirm: ({ deleteSessionFiles }) => {
+					if (!pendingDelete) return;
+					deleteProjectMutation.mutate({
+						deleteSessionFiles,
+						project: pendingDelete.name
+					});
+				},
+				onOpenChange: (open) => {
+					if (!open) setPendingDelete(null);
+				}
+			})
+		]
+	});
+}
+//#endregion
+export { ProjectsPage as component };

package/apps/ui/dist/server/assets/router-C_w-haH6.js

@@ -0,0 +1,307 @@
+import { t as cn } from "./utils-C_uf36nf.js";
+import { t as Button } from "./button-CmTDnzOn.js";
+import { t as SettingsProvider } from "./settings-store-DpEJEQ7M.js";
+import { i as projectsQueryOptions, t as analyticsQueryOptions } from "./codex-queries-CAF6HYiG.js";
+import { t as Route$5 } from "./routes-BhbxvJE7.js";
+import { t as Route$6 } from "./threads._threadId-Ba7vv6-K.js";
+import { t as Route$7 } from "./projects._project-CJ7l0ynC.js";
+import { useEffect, useState } from "react";
+import { HeadContent, Link, Outlet, Scripts, createFileRoute, createRootRouteWithContext, createRouter, lazyRouteComponent, notFound, redirect, useRouterState } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
+import { QueryClient } from "@tanstack/react-query";
+import { BarChart3, FolderOpen, LayoutDashboard, Moon, Settings2, Sun } from "lucide-react";
+import { Tooltip } from "radix-ui";
+//#region src/integrations/tanstack-query/root-provider.tsx
+function getContext() {
+	return { queryClient: new QueryClient() };
+}
+//#endregion
+//#region src/components/theme-toggle.tsx
+var getPreferredTheme = () => {
+	if (typeof window === "undefined") return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+var applyTheme = (mode) => {
+	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);
+};
+function ThemeToggle() {
+	const [theme, setTheme] = useState("light");
+	useEffect(() => {
+		const storedTheme = window.localStorage.getItem("spiracha-theme");
+		const nextTheme = storedTheme === "dark" || storedTheme === "light" ? storedTheme : getPreferredTheme();
+		setTheme(nextTheme);
+		applyTheme(nextTheme);
+	}, []);
+	return /* @__PURE__ */ jsx(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);
+		},
+		children: theme === "light" ? /* @__PURE__ */ jsx(Moon, { className: "size-4" }) : /* @__PURE__ */ jsx(Sun, { className: "size-4" })
+	});
+}
+//#endregion
+//#region src/components/app-shell.tsx
+var navItems = [
+	{
+		icon: LayoutDashboard,
+		label: "Dashboard",
+		to: "/"
+	},
+	{
+		icon: FolderOpen,
+		label: "Projects",
+		to: "/projects"
+	},
+	{
+		icon: BarChart3,
+		label: "Analytics",
+		to: "/analytics"
+	},
+	{
+		icon: Settings2,
+		label: "Settings",
+		to: "/settings"
+	}
+];
+function AppShell({ children }) {
+	const pathname = useRouterState({ select: (state) => state.location.pathname });
+	return /* @__PURE__ */ jsx("div", {
+		className: "min-h-screen bg-[var(--background)] text-[var(--foreground)]",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-screen w-full flex-col lg:flex-row",
+			children: [/* @__PURE__ */ jsxs("aside", {
+				className: "border-[var(--border)] border-b bg-[var(--panel)]/90 px-5 py-5 backdrop-blur lg:sticky lg:top-0 lg:h-screen lg:w-[240px] lg:border-r lg:border-b-0 lg:px-5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start justify-between gap-4 lg:flex-col lg:items-stretch",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1.5",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "font-semibold text-[10px] text-[var(--muted-foreground)] uppercase tracking-[0.18em]",
+							children: "Spiracha"
+						}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h1", {
+							className: "font-['IBM_Plex_Sans'] font-semibold text-lg tracking-[-0.02em]",
+							children: "Codex Console"
+						}) })]
+					}), /* @__PURE__ */ jsx(ThemeToggle, {})]
+				}), /* @__PURE__ */ jsx("nav", {
+					className: "mt-5 grid gap-1",
+					children: navItems.map((item) => {
+						const active = pathname === item.to || pathname.startsWith(`${item.to}/`);
+						const Icon = item.icon;
+						return /* @__PURE__ */ jsxs(Link, {
+							className: cn("flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors", active ? "bg-[var(--accent-muted)] font-medium text-[var(--accent-foreground)]" : "text-[var(--muted-foreground)] hover:bg-[var(--panel-secondary)] hover:text-[var(--foreground)]"),
+							to: item.to,
+							children: [/* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", { children: item.label })]
+						}, item.to);
+					})
+				})]
+			}), /* @__PURE__ */ jsx("main", {
+				className: "min-w-0 flex-1 px-4 py-4 sm:px-5 sm:py-5 lg:px-6",
+				children
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/ui/tooltip.tsx
+function TooltipProvider({ delayDuration = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		delayDuration,
+		...props
+	});
+}
+//#endregion
+//#region src/styles.css?url
+var styles_default = "/assets/styles-CMrP9Jb4.css";
+//#endregion
+//#region src/routes/__root.tsx
+var 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 }) {
+	const isSqliteError = error.message.includes("unable to open database") || error.message.includes("database is locked") || error.message.includes("SQLITE_");
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-screen items-center justify-center bg-[#101418] px-4 text-[#eef3f7]",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-[30rem] text-center",
+			children: [
+				/* @__PURE__ */ jsx("h1", {
+					className: "mb-3 font-semibold text-base",
+					children: isSqliteError ? "Database unavailable" : "Something went wrong"
+				}),
+				isSqliteError ? /* @__PURE__ */ jsx("p", {
+					className: "my-2 text-[#99a3af] text-[0.875rem] leading-6",
+					children: "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."
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "my-2 text-[#99a3af] text-[0.875rem] leading-6",
+					children: /* @__PURE__ */ jsx("code", {
+						className: "rounded border border-white/10 bg-[#12181e] px-1.5 py-1 text-[0.8em]",
+						children: error.message
+					})
+				}),
+				/* @__PURE__ */ jsx("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(),
+					children: "Reload"
+				})
+			]
+		})
+	});
+}
+var Route$4 = createRootRouteWithContext()({
+	component: RootComponent,
+	errorComponent: RootErrorComponent,
+	head: () => ({
+		links: [{
+			href: styles_default,
+			rel: "stylesheet"
+		}],
+		meta: [
+			{ charSet: "utf-8" },
+			{
+				content: "width=device-width, initial-scale=1",
+				name: "viewport"
+			},
+			{
+				content: "Browse local Codex threads, projects, tool calls, and analytics through a compact workspace UI.",
+				name: "description"
+			},
+			{ title: "Spiracha UI" }
+		]
+	})
+});
+function RootComponent() {
+	return /* @__PURE__ */ jsx(RootDocument, { children: /* @__PURE__ */ jsx(SettingsProvider, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(AppShell, { children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
+}
+function RootDocument({ children }) {
+	return /* @__PURE__ */ jsxs("html", {
+		lang: "en",
+		suppressHydrationWarning: true,
+		children: [/* @__PURE__ */ jsxs("head", { children: [/* @__PURE__ */ jsx("script", { children: themeInitScript }), /* @__PURE__ */ jsx(HeadContent, {})] }), /* @__PURE__ */ jsxs("body", { children: [children, /* @__PURE__ */ jsx(Scripts, {})] })]
+	});
+}
+//#endregion
+//#region src/routes/settings.tsx
+var $$splitComponentImporter$3 = () => import("./settings-MvWDgc1u.js");
+var Route$3 = createFileRoute("/settings")({ component: lazyRouteComponent($$splitComponentImporter$3, "component") });
+//#endregion
+//#region src/routes/analytics.tsx
+var $$splitComponentImporter$2 = () => import("./analytics-BMxW_bZL.js");
+var Route$2 = createFileRoute("/analytics")({
+	component: lazyRouteComponent($$splitComponentImporter$2, "component"),
+	loader: ({ context }) => {
+		return Promise.all([context.queryClient.ensureQueryData(projectsQueryOptions()), context.queryClient.ensureQueryData(analyticsQueryOptions(null))]);
+	}
+});
+//#endregion
+//#region src/lib/thread-id.ts
+var THREAD_ID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/iu;
+var isCodexThreadId = (value) => THREAD_ID_PATTERN.test(value);
+//#endregion
+//#region src/routes/$threadId.tsx
+var $$splitComponentImporter$1 = () => import("./_threadId-B6SrBR9E.js");
+var Route$1 = createFileRoute("/$threadId")({
+	beforeLoad: ({ params }) => {
+		if (!isCodexThreadId(params.threadId)) throw notFound();
+		throw redirect({
+			params: { threadId: params.threadId },
+			to: "/threads/$threadId"
+		});
+	},
+	component: lazyRouteComponent($$splitComponentImporter$1, "component")
+});
+//#endregion
+//#region src/routes/projects.index.tsx
+var $$splitErrorComponentImporter = () => import("./projects.index-CaplpeMy.js");
+var $$splitComponentImporter = () => import("./projects.index-srtogpuF.js");
+var Route = createFileRoute("/projects/")({
+	component: lazyRouteComponent($$splitComponentImporter, "component"),
+	errorComponent: lazyRouteComponent($$splitErrorComponentImporter, "errorComponent"),
+	loader: ({ context }) => context.queryClient.ensureQueryData(projectsQueryOptions())
+});
+//#endregion
+//#region src/routeTree.gen.ts
+var SettingsRoute = Route$3.update({
+	id: "/settings",
+	path: "/settings",
+	getParentRoute: () => Route$4
+});
+var AnalyticsRoute = Route$2.update({
+	id: "/analytics",
+	path: "/analytics",
+	getParentRoute: () => Route$4
+});
+var ThreadIdRoute = Route$1.update({
+	id: "/$threadId",
+	path: "/$threadId",
+	getParentRoute: () => Route$4
+});
+var IndexRoute = Route$5.update({
+	id: "/",
+	path: "/",
+	getParentRoute: () => Route$4
+});
+var ProjectsIndexRoute = Route.update({
+	id: "/projects/",
+	path: "/projects/",
+	getParentRoute: () => Route$4
+});
+var ThreadsThreadIdRoute = Route$6.update({
+	id: "/threads/$threadId",
+	path: "/threads/$threadId",
+	getParentRoute: () => Route$4
+});
+var rootRouteChildren = {
+	IndexRoute,
+	ThreadIdRoute,
+	AnalyticsRoute,
+	SettingsRoute,
+	ProjectsProjectRoute: Route$7.update({
+		id: "/projects/$project",
+		path: "/projects/$project",
+		getParentRoute: () => Route$4
+	}),
+	ThreadsThreadIdRoute,
+	ProjectsIndexRoute
+};
+var routeTree = Route$4._addFileChildren(rootRouteChildren)._addFileTypes();
+//#endregion
+//#region src/router.tsx
+function getRouter() {
+	const context = getContext();
+	const router = createRouter({
+		context,
+		defaultPreload: "intent",
+		defaultPreloadStaleTime: 0,
+		routeTree,
+		scrollRestoration: true
+	});
+	setupRouterSsrQueryIntegration({
+		queryClient: context.queryClient,
+		router
+	});
+	return router;
+}
+//#endregion
+export { getRouter };

package/apps/ui/dist/server/assets/routes-BhbxvJE7.js

@@ -0,0 +1,34 @@
+import { n as dashboardQueryOptions } from "./codex-queries-CAF6HYiG.js";
+import { createFileRoute, lazyRouteComponent } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/routes/index.tsx
+var $$splitComponentImporter = () => import("./routes-CPe-ppmC.js");
+var Route = createFileRoute("/")({
+	component: lazyRouteComponent($$splitComponentImporter, "component"),
+	loader: ({ context }) => context.queryClient.ensureQueryData(dashboardQueryOptions())
+});
+function DashboardErrorComponent({ error }) {
+	const isSqlite = error.message.includes("unable to open database") || error.message.includes("database is locked");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-xl border border-[var(--border)] bg-[var(--panel)] px-6 py-10 text-center",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "font-medium text-[var(--destructive)] text-sm",
+				children: isSqlite ? "Database unavailable" : "Failed to load dashboard"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-2 text-[var(--muted-foreground)] text-sm",
+				children: isSqlite ? "Codex may have an exclusive lock on the database. Reload to retry." : error.message
+			}),
+			/* @__PURE__ */ jsx("button", {
+				className: "mt-4 text-[var(--accent)] text-sm underline-offset-2 hover:underline",
+				type: "button",
+				onClick: () => window.location.reload(),
+				children: "Reload"
+			})
+		]
+	});
+}
+Route.update({ errorComponent: DashboardErrorComponent });
+//#endregion
+export { Route as t };

package/apps/ui/dist/server/assets/routes-CPe-ppmC.js

@@ -0,0 +1,169 @@
+import { n as dashboardQueryOptions } from "./codex-queries-CAF6HYiG.js";
+import { t as Route } from "./routes-BhbxvJE7.js";
+import { t as MetricCard } from "./metric-card-ByEeLu0r.js";
+import { t as PageHeader } from "./page-header-CxdZM86z.js";
+import { o as formatNumber, r as formatDateTime, s as formatTokens } from "./formatters-FJaGZgJk.js";
+import { Link } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSuspenseQuery } from "@tanstack/react-query";
+//#region src/routes/index.tsx?tsr-split=component
+function DashboardErrorComponent({ error }) {
+	const isSqlite = error.message.includes("unable to open database") || error.message.includes("database is locked");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-xl border border-[var(--border)] bg-[var(--panel)] px-6 py-10 text-center",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "font-medium text-[var(--destructive)] text-sm",
+				children: isSqlite ? "Database unavailable" : "Failed to load dashboard"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-2 text-[var(--muted-foreground)] text-sm",
+				children: isSqlite ? "Codex may have an exclusive lock on the database. Reload to retry." : error.message
+			}),
+			/* @__PURE__ */ jsx("button", {
+				className: "mt-4 text-[var(--accent)] text-sm underline-offset-2 hover:underline",
+				type: "button",
+				onClick: () => window.location.reload(),
+				children: "Reload"
+			})
+		]
+	});
+}
+Route.update({ errorComponent: DashboardErrorComponent });
+function DashboardPage() {
+	const dashboard = useSuspenseQuery(dashboardQueryOptions()).data;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsx(PageHeader, {
+				eyebrow: "Overview",
+				subtitle: "A compact readout of local Codex activity, project distribution, and recent thread movement.",
+				title: "Dashboard"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-3 md:grid-cols-2 xl:grid-cols-4",
+				children: [
+					/* @__PURE__ */ jsx(MetricCard, {
+						label: "Threads",
+						value: formatNumber(dashboard.totalThreads)
+					}),
+					/* @__PURE__ */ jsx(MetricCard, {
+						label: "Projects",
+						value: formatNumber(dashboard.totalProjects)
+					}),
+					/* @__PURE__ */ jsx(MetricCard, {
+						label: "Tokens",
+						value: formatTokens(dashboard.totalTokens)
+					}),
+					/* @__PURE__ */ jsx(MetricCard, {
+						helper: `${formatNumber(dashboard.archivedThreads)} archived`,
+						label: "Active",
+						value: formatNumber(dashboard.activeThreads)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 gap-4 xl:grid-cols-[1.4fr_1fr]",
+				children: [/* @__PURE__ */ jsxs("section", {
+					className: "min-w-0 overflow-hidden rounded-[1.8rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-semibold text-sm",
+								children: "Recent threads"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "mt-0.5 text-[var(--muted-foreground)] text-xs",
+								children: "Most recently updated threads across the local Codex database."
+							})]
+						}), /* @__PURE__ */ jsx(Link, {
+							className: "shrink-0 font-medium text-[var(--accent)] text-sm",
+							to: "/projects",
+							children: "View projects"
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "mt-4 space-y-2",
+						children: dashboard.recentThreads.map((thread) => /* @__PURE__ */ jsxs(Link, {
+							className: "block overflow-hidden 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)]",
+							params: { threadId: thread.id },
+							to: "/threads/$threadId",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-wrap items-start justify-between gap-2",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "min-w-0 shrink",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "truncate font-medium text-sm",
+										children: thread.title
+									}), /* @__PURE__ */ jsx("p", {
+										className: "mt-0.5 line-clamp-1 text-[var(--muted-foreground)] text-xs",
+										children: thread.preview
+									})]
+								}), /* @__PURE__ */ jsx("p", {
+									className: "shrink-0 whitespace-nowrap font-mono text-[var(--muted-foreground)] text-xs",
+									suppressHydrationWarning: true,
+									children: formatDateTime(thread.updated_at_ms ?? thread.updated_at * 1e3)
+								})]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "mt-2 flex flex-wrap gap-3 text-[var(--muted-foreground)] text-xs",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "font-mono",
+										children: thread.model ?? "unknown model"
+									}),
+									/* @__PURE__ */ jsx("span", { children: formatTokens(thread.tokens_used) }),
+									/* @__PURE__ */ jsx("span", { children: thread.thread_source ?? "n/a" })
+								]
+							})]
+						}, thread.id))
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "grid min-w-0 gap-4",
+					children: [/* @__PURE__ */ jsxs("section", {
+						className: "min-w-0 overflow-hidden rounded-[1.8rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "font-semibold text-sm",
+							children: "Top projects by thread count"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "mt-3 space-y-2",
+							children: dashboard.topProjectsByThreadCount.map((project) => /* @__PURE__ */ jsxs(Link, {
+								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: "/projects/$project",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: project.name
+								}), /* @__PURE__ */ jsx("span", {
+									className: "shrink-0 font-mono text-[var(--muted-foreground)]",
+									children: formatNumber(project.threadCount)
+								})]
+							}, project.name))
+						})]
+					}), /* @__PURE__ */ jsxs("section", {
+						className: "min-w-0 overflow-hidden rounded-[1.8rem] border border-[var(--border)] bg-[var(--panel)] p-5 shadow-[var(--panel-shadow)]",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "font-semibold text-sm",
+							children: "Top projects by tokens"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "mt-3 space-y-2",
+							children: dashboard.topProjectsByTokens.map((project) => /* @__PURE__ */ jsxs(Link, {
+								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: "/projects/$project",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: project.name
+								}), /* @__PURE__ */ jsx("span", {
+									className: "shrink-0 font-mono text-[var(--muted-foreground)]",
+									children: formatTokens(project.totalTokens)
+								})]
+							}, project.name))
+						})]
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { DashboardPage as component };