Users, file manager, image generation, budgets and agent workflow

- User management: local accounts (Argon2) and OpenID Connect, admin/user
  roles, per-user folders plus admin-shared folders, read-only session
  sharing, event filtering per user
- File manager with CodeMirror editor and git client (status, diff,
  stage, commit, branches, fetch/pull/push, log, clone/init)
- Image generation via fal.ai: generate_image tool and image page
- Budgets: monthly limits per provider, provider balances/costs
  (OpenRouter, Anthropic admin cost report, fal.ai), price discovery
- Subagents on other models, background tasks, concurrency limits per
  host/model/subagent
- MCP tools loaded on demand (mcp_search/mcp_call), read-only hints
- Permission mode "auto", safe read-only commands always allowed
- Persistent message queue with attachments, deletable
- Live reasoning incl. <think> tags, activity animations, CSS themes,
  mobile layout, statistics per user, upload size handling
- Docker: named volume for state, localhost-bound port

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/theme.ts

@@ -1,15 +1,38 @@
+import "./themes";
+
 const KEY = "codecraft.theme";
 
-export type Theme = "system" | "dark" | "light";
+/** Available themes; "system" follows the OS light/dark preference. */
+export const THEMES = [
+  { id: "system", name: "System", dark: true },
+  { id: "gruvbox-dark", name: "Gruvbox Dark", dark: true },
+  { id: "gruvbox-light", name: "Gruvbox Light", dark: false },
+] as const;
+
+export type Theme = (typeof THEMES)[number]["id"];
+
+/** Themes used for "system" in dark and light OS mode. */
+const SYSTEM_DARK = "gruvbox-dark";
+const SYSTEM_LIGHT = "gruvbox-light";
 
 export function getTheme(): Theme {
-  return (localStorage.getItem(KEY) as Theme) ?? "system";
+  const saved = localStorage.getItem(KEY);
+  // Migrate the old values "dark"/"light".
+  if (saved === "dark") return "gruvbox-dark";
+  if (saved === "light") return "gruvbox-light";
+  return THEMES.some((t) => t.id === saved) ? (saved as Theme) : "system";
 }
 
+const media = matchMedia("(prefers-color-scheme: dark)");
+
 export function applyTheme(theme: Theme = getTheme()) {
   localStorage.setItem(KEY, theme);
-  if (theme === "system") delete document.documentElement.dataset.theme;
-  else document.documentElement.dataset.theme = theme;
-  const dark = theme === "dark" || (theme === "system" && matchMedia("(prefers-color-scheme: dark)").matches);
-  document.querySelector('meta[name="theme-color"]')?.setAttribute("content", dark ? "#282828" : "#fbf1c7");
+  const resolved = theme === "system" ? (media.matches ? SYSTEM_DARK : SYSTEM_LIGHT) : theme;
+  document.documentElement.dataset.theme = resolved;
+  const color = getComputedStyle(document.documentElement).getPropertyValue("--theme-color").trim();
+  document.querySelector('meta[name="theme-color"]')?.setAttribute("content", color || "#282828");
 }
+
+media.addEventListener("change", () => {
+  if (getTheme() === "system") applyTheme("system");
+});