thursday-agent 0.1.2 → 0.3.0

package/features/workspace/workspace.ts

@@ -2,6 +2,7 @@ import {
   mkdir,
   readdir,
   realpath,
+  rm,
   stat,
   unlink,
   writeFile,
@@ -13,9 +14,10 @@ import {
   DATA_DIR,
   PATHS,
   TOOL_OUTPUT,
+  WORKSPACE_KEEP,
 } from "@/config";
 import { logger } from "@/lib/logger";
-import { createSandBox, type Sandbox } from "@/lib/sandbox";
+import { createSandBox, type Sandbox, walkFiles } from "@/lib/sandbox";
 
 /**
  * Where the sandbox is opened. The app's own skills live outside the
@@ -42,7 +44,12 @@ export const ARTIFACTS = join(WORKSPACE, PATHS.artifacts);
  * Created on open, and the only places inside the workspace `write_file`
  * accepts. `.agents` is the skills CLI's install folder.
  */
-const BOT_FOLDERS = [PATHS.artifacts, PATHS.projects, PATHS.scratch];
+const BOT_FOLDERS = [
+  PATHS.artifacts,
+  PATHS.projects,
+  PATHS.scratch,
+  PATHS.bots,
+];
 const WRITABLE = new Set([...BOT_FOLDERS, ".agents"]);
 
 /** Where playwright-cli drops a snapshot after every command. Its name, not ours. */
@@ -61,7 +68,7 @@ export function writeRefusal(full: string): string | null {
     const rel = relative(WORKSPACE, full);
     const [top] = rel.split(sep);
     if (top && WRITABLE.has(top)) return null;
-    return `Not written: ${rel || "the workspace root"} is outside the workspace's folders. Finished work goes under ${PATHS.artifacts}/, code under ${PATHS.projects}/, everything else under ${PATHS.scratch}/.`;
+    return `Not written: ${rel || "the workspace root"} is outside the workspace's folders. Finished work goes under ${PATHS.artifacts}/, code under ${PATHS.projects}/, your own kit under ${PATHS.bots}/, and this job's working material under ${PATHS.scratch}/.`;
   }
   if (under(APP_ROOT, full)) {
     return `Not written: ${full} is inside the app that is running you, not the user's files. Work in ${WORKSPACE}; outside it, write only where the user pointed you.`;
@@ -89,6 +96,50 @@ export async function insideWorkspace(rel: string): Promise<string | null> {
   return under(root, target) ? target : null;
 }
 
+/**
+ * Where one job keeps what it is still working on. `scratch/` used to be shared
+ * by every job at once, so nobody could tell whose a file was or when it stopped
+ * mattering, and it only grew. A job has a beginning and an end, which is what
+ * makes its working material safe to clear later — and it is the right unit
+ * rather than the bot, because several bots work inside one job (`ask_bot`) and
+ * one bot runs many jobs.
+ *
+ * Named for the label so the folder is readable on the Workspace screen, with
+ * the head of the id after it so two jobs called the same thing stay apart.
+ * Finished work never lands here: that is `artifacts/`, which stays flat and
+ * unattributed, and code is `projects/`, which outlives the job that started it.
+ */
+export function jobScratch(taskId: string, label: string): string {
+  const slug =
+    label
+      .trim()
+      .toLowerCase()
+      .replace(/[^\p{L}\p{N}]+/gu, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 40) || "job";
+  return `${PATHS.scratch}/${slug}-${taskId.slice(0, 6)}`;
+}
+
+/** Where one bot keeps what it wants on its next job (config PATHS.bots). */
+export const botFolder = (bot: string): string =>
+  `${PATHS.bots}/${bot.replace(/[^\p{L}\p{N}_-]+/gu, "-")}`;
+
+export async function openBotFolder(bot: string): Promise<string> {
+  const path = botFolder(bot);
+  await mkdir(join(WORKSPACE, path), { recursive: true });
+  return path;
+}
+
+/** Creates it, so a job never has to and never writes to the shared root by mistake. */
+export async function openJobScratch(
+  taskId: string,
+  label: string,
+): Promise<string> {
+  const path = jobScratch(taskId, label);
+  await mkdir(join(WORKSPACE, path), { recursive: true });
+  return path;
+}
+
 /**
  * A job's own browser session. playwright-cli reads the session name from
  * this variable when `-s=` is not given, so the model never picks one and the
@@ -105,6 +156,52 @@ export const jobShellEnv = (
       }
     : {};
 
+/** Set by `ensureBrowser`, read by `readMachineTools`; null until it has finished. */
+let browserReady: boolean | null = null;
+
+/**
+ * What the shell can actually reach. A bot writes a job around what is here —
+ * node or python3, which package manager — and the platform does not say: two
+ * macs differ. Probed in one `command -v` sweep at the moment it is asked, per
+ * job rather than cached, so a job that installs something is not told
+ * otherwise on its next run.
+ */
+export const PROBED = {
+  runtimes: ["node", "python3", "uv", "bun", "deno"],
+  managers: ["pnpm", "npm", "yarn"],
+} as const;
+
+export type MachineTools = {
+  [K in keyof typeof PROBED]: { found: string[]; missing: string[] };
+} & {
+  /** Null while `ensureBrowser` is still running; it starts at boot and is not awaited. */
+  browser: boolean | null;
+};
+
+export async function readMachineTools(
+  sandbox: Sandbox,
+): Promise<MachineTools> {
+  const names = Object.values(PROBED).flat();
+  const { stdout } = await sandbox.exec(
+    names
+      .map(
+        (name) => `command -v ${name} >/dev/null 2>&1 && printf '%s ' ${name}`,
+      )
+      .join("; "),
+    { timeoutMs: 10_000 },
+  );
+  const found = new Set(stdout.trim().split(/\s+/).filter(Boolean));
+  const split = (list: readonly string[]) => ({
+    found: list.filter((name) => found.has(name)),
+    missing: list.filter((name) => !found.has(name)),
+  });
+  return {
+    runtimes: split(PROBED.runtimes),
+    managers: split(PROBED.managers),
+    browser: browserReady,
+  };
+}
+
 /**
  * The browser bots drive. It is not in the package — ~280 MB, and its build
  * moves with playwright-core — so it is fetched here instead of from an install
@@ -122,12 +219,55 @@ export async function ensureBrowser(): Promise<void> {
     .exec("playwright-cli install-browser chromium")
     .catch((cause: unknown) => ({ exitCode: 1, stderr: String(cause) }));
 
-  if (done.exitCode === 0) return;
+  browserReady = done.exitCode === 0;
+  if (browserReady) return;
   logger.warn(
     `no browser — bots cannot open a page until \`playwright-cli install-browser chromium\` succeeds: ${done.stderr.trim().split("\n").at(-1) ?? ""}`,
   );
 }
 
+/** What a job leaves on disk: stale browser snapshots and spilled tool output. */
+export async function pruneJobFiles(): Promise<void> {
+  await pruneBrowserFiles();
+  await pruneOutputFiles();
+}
+
+type ListedBrowser = { name: string; headed?: boolean; attached?: boolean };
+
+/**
+ * A job that ended closes the browser nobody can see. Headless is the bot's
+ * working copy; `--headed` is the bot putting a window on their screen on
+ * purpose — an order at checkout, a map with a pin, a sign-in — and that one is
+ * theirs to close (`skills/browser`). A session attached to their own Chrome is
+ * never touched. Anything unreadable — no playwright, a failed or folded `list`
+ * — leaves the browser as it is.
+ */
+export async function closeHiddenBrowser(taskId: string): Promise<void> {
+  const sandbox = await openWorkspace();
+  const env = jobShellEnv(taskId);
+  const listed = await sandbox
+    .exec("playwright-cli list --json", { env, timeoutMs: 15_000 })
+    .catch(() => null);
+  let session: ListedBrowser | undefined;
+  try {
+    const { browsers } = JSON.parse(listed?.stdout ?? "") as {
+      browsers?: ListedBrowser[];
+    };
+    session = browsers?.find((b) => b.name === env.PLAYWRIGHT_CLI_SESSION);
+  } catch {}
+  if (session?.headed === false && !session.attached) {
+    await sandbox
+      .exec("playwright-cli close", { env, timeoutMs: 15_000 })
+      .catch(() => {});
+  }
+  await pruneJobFiles();
+}
+
+/**
+ * Closes the job's browser whatever it shows. Only for a job the user cancelled
+ * or deleted: its row is gone, so a window left open would belong to nothing on
+ * the screen.
+ */
 export async function closeJobShell(taskId: string): Promise<void> {
   const sandbox = await openWorkspace();
   await sandbox
@@ -136,19 +276,18 @@ export async function closeJobShell(taskId: string): Promise<void> {
       timeoutMs: 15_000,
     })
     .catch(() => {});
-  await pruneBrowserFiles();
+  await pruneJobFiles();
 }
 
-/**
- * playwright-cli never deletes its snapshot files. Refs go stale on the next
- * click, so anything older than an hour belongs to no running job.
- */
-const BROWSER_FILE_TTL_MS = 60 * 60 * 1000;
+const pruneOutputFiles = () => pruneOldFiles(PATHS.output);
 
-async function pruneBrowserFiles(): Promise<void> {
-  const dir = join(WORKSPACE, BROWSER_DIR);
+const pruneBrowserFiles = () => pruneOldFiles(BROWSER_DIR);
+
+/** Files directly in a workspace folder that have not changed for WORKSPACE_KEEP.forMs. */
+async function pruneOldFiles(folder: string): Promise<void> {
+  const dir = join(WORKSPACE, folder);
   const entries = await readdir(dir, { withFileTypes: true }).catch(() => []);
-  const cutoff = Date.now() - BROWSER_FILE_TTL_MS;
+  const cutoff = Date.now() - WORKSPACE_KEEP.forMs;
   for (const entry of entries) {
     if (!entry.isFile()) continue;
     const file = join(dir, entry.name);
@@ -157,6 +296,37 @@ async function pruneBrowserFiles(): Promise<void> {
   }
 }
 
+/** Every folder under `scratch/`, workspace-relative, as jobScratch names them. */
+export async function listScratchFolders(): Promise<string[]> {
+  const entries = await readdir(join(WORKSPACE, PATHS.scratch), {
+    withFileTypes: true,
+  }).catch(() => []);
+  return entries
+    .filter((entry) => entry.isDirectory())
+    .map((entry) => `${PATHS.scratch}/${entry.name}`);
+}
+
+/**
+ * Removes the workspace folders among `folders` that have not changed for
+ * WORKSPACE_KEEP.forMs, judged by the folder itself. Only for folders no job owns
+ * (bot.runner sweepJobFiles): a job that has just made its folder is never old
+ * enough to be caught. Returns what went.
+ */
+export async function removeUnchangedFolders(
+  folders: string[],
+): Promise<string[]> {
+  const cutoff = Date.now() - WORKSPACE_KEEP.forMs;
+  const removed: string[] = [];
+  for (const folder of folders) {
+    const full = join(WORKSPACE, folder);
+    const info = await stat(full).catch(() => null);
+    if (!info?.isDirectory() || info.mtimeMs >= cutoff) continue;
+    await rm(full, { recursive: true, force: true }).catch(() => {});
+    removed.push(folder);
+  }
+  return removed;
+}
+
 /**
  * pnpm looks upward for the nearest `pnpm-workspace.yaml`; without one here a
  * `pnpm install` inside a bot project would join the app's workspace and
@@ -185,3 +355,50 @@ export async function openWorkspace(): Promise<Sandbox> {
     toolPath: TOOL_PATH,
   });
 }
+
+/** Files read off one job's folder at most; a folder of generated files is not a list anyone reads. */
+const JOB_FOLDER_WALK = 500;
+
+/**
+ * What of a job's files is on disk: the paths it gave `write_file` that still exist,
+ * and every file under its own folder however it got there — a shell command, a
+ * download, a screenshot. Workspace-relative where inside the workspace, each once,
+ * the most recently changed last (bot.run filesUnder).
+ */
+export async function filesOnDisk(
+  written: string[],
+  folder: string | null,
+): Promise<string[]> {
+  const candidates = written.map((path) => resolve(WORKSPACE, path));
+  if (folder) {
+    let walked = 0;
+    for await (const full of walkFiles(join(WORKSPACE, folder))) {
+      candidates.push(full);
+      walked += 1;
+      if (walked >= JOB_FOLDER_WALK) break;
+    }
+  }
+  const found = new Map<string, number>();
+  for (const full of candidates) {
+    const info = await stat(full).catch(() => null);
+    if (!info?.isFile()) continue;
+    const rel = relative(WORKSPACE, full);
+    found.set(rel && !rel.startsWith("..") ? rel : full, info.mtimeMs);
+  }
+  return [...found].sort((a, b) => a[1] - b[1]).map(([path]) => path);
+}
+
+/**
+ * Removes a job's working folder. Its lifetime is the task's: when the row goes,
+ * so does what it was working with (features/bot/bot.runner). Never touches
+ * `artifacts` or `projects` — those are the user's and outlive every job.
+ */
+export async function removeJobScratch(
+  taskId: string,
+  label: string,
+): Promise<void> {
+  await rm(join(WORKSPACE, jobScratch(taskId, label)), {
+    recursive: true,
+    force: true,
+  }).catch(() => {});
+}

package/hooks/use-draft.ts

@@ -0,0 +1,37 @@
+import type { KeyboardEvent } from "react";
+import { useState } from "react";
+
+/**
+ * Draft for a one-line input, committed on blur. Enter blurs (one commit path);
+ * a draft shorter than `min` reverts to `value`; an outside change to `value`
+ * resets the draft.
+ */
+export function useDraft(
+  value: string,
+  onCommit: (next: string) => void | Promise<void>,
+  { min = 1 }: { min?: number } = {},
+) {
+  const [draft, setDraft] = useState(value);
+  // Sync during render; an effect would show the stale draft for a frame.
+  const [seen, setSeen] = useState(value);
+  if (value !== seen) {
+    setSeen(value);
+    setDraft(value);
+  }
+
+  const commit = () => {
+    const next = draft.trim();
+    if (next.length < min) return setDraft(value);
+    setDraft(next);
+    if (next !== value) void onCommit(next);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    // Enter during IME composition confirms the character, not the draft.
+    if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+      event.currentTarget.blur();
+    }
+  };
+
+  return { value: draft, set: setDraft, commit, onKeyDown };
+}

package/hooks/use-hotkey.ts

@@ -0,0 +1,105 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+const HOLD = ["ctrl", "alt", "meta"] as const;
+
+const IS_MODIFIER = /^(Control|Alt|Shift|Meta|OS)/;
+
+const EDITABLE = /^(input|textarea|select)$/i;
+
+export const HOTKEY_CAPTURE = { "data-hotkey-capture": "" } as const;
+
+const busy = (target: EventTarget | null) => {
+  const node = target as HTMLElement | null;
+  if (!node) return false;
+  return Boolean(
+    EDITABLE.test(node.tagName) ||
+      node.isContentEditable ||
+      node.closest?.("[data-hotkey-capture]"),
+  );
+};
+
+export function comboOf(event: {
+  code: string;
+  ctrlKey: boolean;
+  altKey: boolean;
+  shiftKey: boolean;
+  metaKey: boolean;
+}): string | null {
+  const { code, ctrlKey, altKey, shiftKey, metaKey } = event;
+  if (!code || IS_MODIFIER.test(code)) return null;
+  if (!ctrlKey && !altKey && !metaKey) return null;
+
+  const held: string[] = [];
+  if (ctrlKey) held.push("ctrl");
+  if (altKey) held.push("alt");
+  if (shiftKey) held.push("shift");
+  if (metaKey) held.push("meta");
+  return [...held, code].join("+");
+}
+
+export const isCombo = (combo: string) => {
+  const parts = combo.split("+");
+  const code = parts.at(-1);
+  return Boolean(
+    code &&
+      !IS_MODIFIER.test(code) &&
+      parts.slice(0, -1).some((part) => HOLD.includes(part as never)),
+  );
+};
+
+const SIGN: Record<string, [plain: string, mac: string]> = {
+  ctrl: ["Ctrl", "⌃"],
+  alt: ["Alt", "⌥"],
+  shift: ["Shift", "⇧"],
+  meta: ["Meta", "⌘"],
+};
+
+const keyLabel = (code: string) =>
+  code.replace(/^(Key|Digit|Numpad)/, "").replace(/([a-z])([A-Z])/g, "$1 $2") ||
+  code;
+
+export function hotkeyLabel(combo: string, mac = false): string {
+  const parts = combo.split("+");
+  const code = parts.at(-1) ?? "";
+  const held = parts
+    .slice(0, -1)
+    .map((part) => SIGN[part]?.[mac ? 1 : 0] ?? part);
+  const key = keyLabel(code);
+  return mac ? [...held, key].join("") : [...held, key].join(" + ");
+}
+
+export function useHotkeyLabel(combo: string | null): string | null {
+  const [mac, setMac] = useState(false);
+  useEffect(() => setMac(/mac/i.test(navigator.userAgent)), []);
+  return combo ? hotkeyLabel(combo, mac) : null;
+}
+
+export function useHotkey({
+  enabled,
+  combo,
+  onPress,
+}: {
+  enabled: boolean;
+  combo: string | null;
+  onPress: () => void;
+}) {
+  const latest = useRef(onPress);
+  latest.current = onPress;
+
+  useEffect(() => {
+    if (!enabled || !combo) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.repeat || busy(event.target)) return;
+      if (comboOf(event) !== combo) return;
+
+      event.preventDefault();
+      latest.current();
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [enabled, combo]);
+}

package/hooks/use-object-state.ts

@@ -0,0 +1,51 @@
+import { useMemo, useState } from "react";
+import { isFunction } from "../lib/utils";
+
+type SetPartialStateAction<T> = Partial<T> | ((prev: T) => Partial<T>);
+
+type Patch<T> = ((action: SetPartialStateAction<T>) => void) & {
+  [K in keyof T]-?: (value: T[K] | ((prev: T[K]) => T[K])) => void;
+};
+
+const hasChanged = <T extends object>(prev: T, next: Partial<T>) =>
+  (Object.keys(next) as (keyof T)[]).some(
+    (key) => !Object.is(prev[key], next[key]),
+  );
+
+export const useObjectState = <T extends object>(initial: T | (() => T)) => {
+  const [state, setState] = useState<T>(initial);
+
+  const patch = useMemo(() => {
+    const apply = (action: SetPartialStateAction<T>) => {
+      setState((prev) => {
+        const delta = isFunction(action) ? action(prev) : action;
+        return hasChanged(prev, delta) ? { ...prev, ...delta } : prev;
+      });
+    };
+
+    // Cache per-key setters so their identity is stable in deps arrays.
+    const cache = new Map<string, (value: unknown) => void>();
+
+    return new Proxy(apply, {
+      get(target, p, receiver) {
+        if (typeof p === "symbol") return Reflect.get(target, p, receiver);
+
+        let setter = cache.get(p);
+        if (!setter) {
+          setter = (value) => {
+            apply(
+              (prev) =>
+                ({
+                  [p]: isFunction(value) ? value(prev[p as keyof T]) : value,
+                }) as Partial<T>,
+            );
+          };
+          cache.set(p, setter);
+        }
+        return setter;
+      },
+    }) as Patch<T>;
+  }, []);
+
+  return [state, patch] as const;
+};

package/hooks/use-on-visible.ts

@@ -0,0 +1,72 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+
+/**
+ * Calls `onVisible` when the attached element scrolls into view (infinite
+ * lists). The callback lives in a ref: rebuilding the observer on an element
+ * already in view would fire it again.
+ */
+export function useOnVisible(
+  onVisible: () => void,
+  options: {
+    /** False stops observing (nothing left, or a request in flight). */
+    enabled?: boolean;
+    /**
+     * Bump to rebuild the observer, which re-fires if the element is still in
+     * view. Observers report crossings, not states: a list shorter than the
+     * viewport would otherwise stop after one page.
+     */
+    revision?: unknown;
+    /** IntersectionObserver rootMargin; fires before the element appears. */
+    margin?: string;
+  } = {},
+) {
+  const { enabled = true, margin = "600px", revision } = options;
+
+  const callback = useRef(onVisible);
+  callback.current = onVisible;
+
+  const node = useRef<HTMLElement | null>(null);
+  const observer = useRef<IntersectionObserver | null>(null);
+
+  const attach = useCallback((next: HTMLElement | null) => {
+    node.current = next;
+  }, []);
+
+  useEffect(() => {
+    observer.current?.disconnect();
+    const target = node.current;
+    if (!target || !enabled) return;
+
+    observer.current = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) callback.current();
+      },
+      { root: scrollParent(target), rootMargin: margin },
+    );
+    observer.current.observe(target);
+    return () => observer.current?.disconnect();
+  }, [enabled, margin, revision]);
+
+  return attach;
+}
+
+/**
+ * Nearest scrolling ancestor, or null for the window. With the default root an
+ * ancestor's overflow clips the sentinel and it never intersects.
+ */
+function scrollParent(node: HTMLElement): Element | null {
+  let parent = node.parentElement;
+  while (parent) {
+    const { overflowY } = getComputedStyle(parent);
+    if (
+      (overflowY === "auto" || overflowY === "scroll") &&
+      parent.scrollHeight > parent.clientHeight
+    ) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return null;
+}

package/hooks/use-theme.ts

@@ -0,0 +1,106 @@
+"use client";
+
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { THEME_STORAGE_KEY, THEMES, type Theme } from "@/lib/theme";
+
+/**
+ * Theme preference stored in localStorage and applied as the `dark` class on
+ * `<html>`. The boot script in app/layout reads the same key before hydration;
+ * this store only follows changes after that.
+ */
+
+const isTheme = (value: unknown): value is Theme =>
+  (THEMES as readonly unknown[]).includes(value);
+
+function read(): Theme {
+  if (typeof window === "undefined") return "system";
+  try {
+    const raw = window.localStorage.getItem(THEME_STORAGE_KEY);
+    return isTheme(raw) ? raw : "system";
+  } catch {
+    return "system";
+  }
+}
+
+let theme = read();
+const listeners = new Set<() => void>();
+
+function announce() {
+  for (const listener of listeners) listener();
+}
+
+/** Actual brightness the setting resolves to. */
+export function resolveTheme(value: Theme): "light" | "dark" {
+  if (value !== "system") return value;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+/** Applies to `<html>`; touches exactly what the boot script touches. */
+export function applyTheme(value: Theme) {
+  const dark = resolveTheme(value) === "dark";
+  document.documentElement.classList.toggle("dark", dark);
+  document.documentElement.style.colorScheme = dark ? "dark" : "light";
+}
+
+export function setTheme(next: Theme) {
+  theme = next;
+  try {
+    window.localStorage.setItem(THEME_STORAGE_KEY, next);
+  } catch {
+    // Private mode or blocked storage; the in-memory value still changes.
+  }
+  applyTheme(next);
+  announce();
+}
+
+export function useTheme(): Theme {
+  return useSyncExternalStore(
+    (listener) => {
+      listeners.add(listener);
+      // Another tab changed it.
+      const sync = (event: StorageEvent) => {
+        if (event.key !== THEME_STORAGE_KEY) return;
+        theme = read();
+        applyTheme(theme);
+        announce();
+      };
+      window.addEventListener("storage", sync);
+      return () => {
+        listeners.delete(listener);
+        window.removeEventListener("storage", sync);
+      };
+    },
+    () => theme,
+    // Server snapshot; hydration swaps in the stored value.
+    () => "system",
+  );
+}
+
+/** Resolved theme; follows the OS while the setting is "system". */
+export function useResolvedTheme(): "light" | "dark" {
+  const current = useTheme();
+  const [systemDark, setSystemDark] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const follow = () => setSystemDark(media.matches);
+    follow();
+    media.addEventListener("change", follow);
+    return () => media.removeEventListener("change", follow);
+  }, []);
+  if (current !== "system") return current;
+  return systemDark ? "dark" : "light";
+}
+
+/** Re-applies "system" when the OS theme changes. Mount once, in the layout. */
+export function useFollowSystemTheme() {
+  const current = useTheme();
+  useEffect(() => {
+    if (current !== "system") return;
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const follow = () => applyTheme("system");
+    media.addEventListener("change", follow);
+    return () => media.removeEventListener("change", follow);
+  }, [current]);
+}