babavoss 0.12.6 → 0.13.1

package/src/gui/levels.tsx

@@ -1,73 +1,255 @@
 // voss's root: the picker. One voss runs on this machine, and its root page
-// lists the babas it knows, to open one, and makes a new one. A page inside
-// a baba is that baba only; Leave brings a tab back here. The root has no
-// state: its shell is the same frame over page state, the babas as its
-// apps, and its one window is the New baba wizard.
-import { useEffect, useMemo, useState } from "react";
-import { DesktopFrame, type Picture, type AppRow } from "../desktop/view.tsx";
-import type { IconShape } from "../desktop/icons.ts";
-import type { Hand } from "../web/app.tsx";
-import { theme } from "./theme.ts";
-import { Folders, getJson, type Project } from "./wizard.tsx";
+// lists the babas it knows under the mark, to open one; a folder is added by
+// pointing at it, and forgotten with its ×, its files kept. A folder whose
+// baba lacks what voss requires, or has no baba yet, is listed to be set up:
+// opening it opens the setup wizard, at /?setup=FOLDER, until it has
+// everything, and then it opens as any other. A page inside a baba is that
+// baba only; Leave brings a tab back here. The root has no state of its own.
+import { useEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode } from "react";
+import { Eyes } from "../desktop/view.tsx";
+import { Folders, getJson, postJson, short, tilde, type Project } from "./wizard.tsx";
+import { SetupWizard } from "./setup.tsx";
+import type { PendingEntry } from "../server/messages.ts";
+import { useVossSettings } from "./voss-settings.ts";
+import { lockup } from "./lockup.ts";
 
-/** The babas this machine knows, and its home, from the daemon; null until they arrive. */
-export function useProjects(): { projects: Project[] | null; home: string } {
-  const [state, setState] = useState<{ projects: Project[] | null; home: string }>({ projects: null, home: "" });
-  useEffect(() => {
-    let live = true;
-    getJson<{ projects: Project[]; home?: string }>("/api/projects").then((j) => { if (live) setState({ projects: j.projects, home: j.home ?? "" }); }, () => { if (live) setState({ projects: [], home: "" }); });
-    return () => { live = false; };
-  }, []);
-  return state;
+/** What the daemon lists: the babas it runs, the folders it keeps to be set up or that failed, and the user's home. */
+export interface Listed { projects: Project[]; pending: PendingEntry[]; home: string }
+
+/** The babas this machine knows, and its home, from the daemon; null until they arrive. `reload` asks again. */
+export function useProjects(): { listed: Listed | null; reload: () => Promise<Listed>; set: (l: Listed) => void } {
+  const [listed, setListed] = useState<Listed | null>(null);
+  const reload = async () => {
+    const j = await getJson<{ projects: Project[]; pending?: PendingEntry[]; home?: string }>("/api/projects");
+    const l = { projects: j.projects, pending: j.pending ?? [], home: j.home ?? "" };
+    setListed(l);
+    return l;
+  };
+  useEffect(() => { reload().catch(() => setListed({ projects: [], pending: [], home: "" })); }, []);
+  return { listed, reload, set: setListed };
 }
 
-const href = (name: string) => `/${encodeURIComponent(name)}/`;
-const plus: readonly IconShape[] = [{ tag: "path", attrs: { d: "M5 12h14" } }, { tag: "path", attrs: { d: "M12 5v14" } }];
-const eyes: readonly IconShape[] = [{ tag: "circle", attrs: { cx: "8.1", cy: "12", r: "4.3" } }, { tag: "circle", attrs: { cx: "17.2", cy: "12", r: "3" } }];
-/** The wizard's app, the picker's one window. */
-export const NEW = "new";
-/** A baba's app key in the picker; a baba may be called `new`, so the key says which it is. */
-export const babaKey = (name: string) => `baba:${name}`;
+/** One row of the picker: a baba voss runs, or a folder it keeps to set up or that failed; `depth` is how deep inside other babas it is. */
+export type PickerRow = ({ kind: "baba"; p: Project } | { kind: "pending"; e: PendingEntry }) & { depth: number; dir: string };
 
 /**
- * The picker's rows as the frame's apps: every baba under Babas, a baba inside another under its parent's
- * title, in the order voss lists them; then New baba under Make. Pure: the same from the same list.
+ * The picker's rows: every baba in the order voss lists them, the folders to set up after, each one inside
+ * another right under its parent, a level deeper. Pure: the same from the same lists.
  */
-export function pickerApps(projects: Project[]): AppRow[] {
-  const byName = new Map(projects.map((p) => [p.name, p]));
-  const rows: AppRow[] = projects.map((p, i) => {
-    const parent = p.parent ? byName.get(p.parent) : undefined;
-    return { entity: 10 + i, key: babaKey(p.name), title: p.title, group: parent ? `In ${parent.title}` : "Babas", icon: "", many: false, order: i, drawing: eyes };
-  });
-  rows.push({ entity: 2, key: NEW, title: "New baba", group: "Make", icon: "plus", many: false, order: projects.length, drawing: plus });
-  return rows;
+export function pickerRows(projects: readonly Project[], pending: readonly PendingEntry[]): PickerRow[] {
+  const all: PickerRow[] = [
+    ...projects.map((p) => ({ kind: "baba" as const, p, dir: p.dir ?? "", depth: 0 })),
+    ...pending.map((e) => ({ kind: "pending" as const, e, dir: e.dir, depth: 0 })),
+  ];
+  const parentOf = (r: PickerRow) => r.kind === "baba" ? r.p.parent : r.e.parent;
+  const names = new Set(projects.map((p) => p.name));
+  const out: PickerRow[] = [];
+  const place = (r: PickerRow, depth: number) => {
+    out.push({ ...r, depth });
+    if (r.kind === "baba") for (const c of all.filter((x) => parentOf(x) === r.p.name)) place(c, depth + 1);
+  };
+  for (const r of all) { const up = parentOf(r); if (!up || !names.has(up)) place(r, 0); }
+  return out;
 }
 
-type Win = Picture["windows"][number];
-const wizard: Win = { entity: 3, session: 1, app: 2, path: "/", title: "", memory: {} };
+const href = (name: string) => `/${encodeURIComponent(name)}/`;
+/** The setup wizard's address for a folder. */
+export const setupHref = (dir: string) => `/?setup=${encodeURIComponent(dir)}`;
+const setupAsked = () => new URLSearchParams(location.search).get("setup");
 
-/** The picker: the frame over page state, the babas as its apps; choosing one goes to its page, New baba opens the wizard in front. */
+/** The root page: the picker, or the setup wizard when the address asks for one. */
 export function Root() {
-  const { projects, home } = useProjects();
-  const [open, setOpen] = useState(false);
-  const apps = useMemo(() => pickerApps(projects ?? []), [projects]);
-  const picture: Picture = {
-    session: { entity: 1, key: "main", selected: open ? wizard.entity : null, theme: "system" }, theme: theme(),
-    apps,
-    windows: open ? [wizard] : [],
+  const { listed, reload, set } = useProjects();
+  // The picker wears voss's theme too.
+  useVossSettings();
+  const [asked, setAsked] = useState(setupAsked);
+  useEffect(() => { const back = () => setAsked(setupAsked()); addEventListener("popstate", back); return () => removeEventListener("popstate", back); }, []);
+  const go = (dir: string | null) => { history.pushState(null, "", dir ? setupHref(dir) : "/"); setAsked(dir); };
+  useEffect(() => { document.title = asked ? "Set up · voss" : "voss"; }, [asked]);
+  const ready = asked ? listed?.projects.find((p) => p.dir === asked) : undefined;
+  // Set up already: it opens as any other baba.
+  useEffect(() => { if (ready) location.replace(href(ready.name)); }, [ready]);
+  if (!listed || ready) return <div className="gui-view rt" />;
+  if (asked) {
+    const entry = listed.pending.find((e) => e.dir === asked);
+    return <div className="gui-view rt rt-center">
+      {entry && !entry.error
+        ? <SetupWizard entry={entry} home={listed.home} taken={listed.projects.map((p) => p.name)} onCancel={() => go(null)} onDone={(name) => location.assign(href(name))} />
+        : <div className="sw-card sw-gone">
+          <p>{entry?.error ? <>The baba in <code>{tilde(asked, listed.home)}</code> did not open: {entry.error}</> : <>voss does not remember <code>{tilde(asked, listed.home)}</code>.</>}</p>
+          <button type="button" className="sw-button" onClick={() => go(null)}>Back to the babas</button>
+        </div>}
+    </div>;
+  }
+  return <Picker listed={listed} reload={reload} set={set} setup={go} />;
+}
+
+/** Which voss this is, at the header's end: its version, and whether it runs from a checkout. */
+function VossVersion() {
+  const [v, setV] = useState<{ version: string; dev: boolean; sha: string } | null>(null);
+  useEffect(() => { getJson<{ version: string; dev: boolean; sha: string }>("/api/voss").then(setV, () => {}); }, []);
+  if (!v) return null;
+  return <span className="rt-version" title={v.sha ? `voss ${v.version}, ${v.sha.slice(0, 12)}` : `voss ${v.version}`}>
+    <span className="rt-version-text">v{v.version}</span>{v.dev && <span className="rt-tag"><span className="rt-version-text">checkout</span></span>}
+  </span>;
+}
+
+/** The brand's lockup, the symbol knocked out of its circle beside the wordmark, in the theme's ink; drawn without its clear space, so it sits flush with the column. */
+function Lockup() {
+  const t = lockup.tile, w = Number(lockup.viewBox.split(" ")[2]);
+  return <svg className="rt-lockup" viewBox={`${t.x} ${t.y} ${w - 2 * t.x} ${t.height}`} role="img" aria-label="Baba Voss">
+    <mask id="rt-lockup-eyes" maskUnits="userSpaceOnUse" x={t.x} y={t.y} width={t.width} height={t.height}><rect x={t.x} y={t.y} width={t.width} height={t.height} fill="#fff" /><g transform={lockup.symbol.transform} fill="#000">{lockup.symbol.eyes.map((e, i) => <circle key={i} {...e} />)}</g></mask>
+    <rect {...t} fill="currentColor" mask="url(#rt-lockup-eyes)" />
+    <path fill="currentColor" transform={lockup.word.transform} d={lockup.word.d} />
+  </svg>;
+}
+
+const Cross = () => <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>;
+const Glyph = ({ children }: { children: ReactNode }) => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{children}</svg>;
+const FolderGlyph = () => <Glyph><path d="M2 4.5c0-.6.4-1 1-1h3l1.5 1.5H13c.6 0 1 .4 1 1V12c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1z" /></Glyph>;
+const Plus = () => <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 3.5v9M3.5 8h9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>;
+const SetupGlyph = () => <Glyph><circle cx="8" cy="8" r="5.5" strokeDasharray="2.2 2" /></Glyph>;
+const WarnGlyph = () => <Glyph><path d="M8 2.5l6 10.5H2z" /><path d="M8 6.5v3M8 11.2v.1" /></Glyph>;
+const message = (e: unknown) => String(e instanceof Error ? e.message : e);
+
+function Picker({ listed, reload, set, setup }: { listed: Listed; reload: () => Promise<Listed>; set: (l: Listed) => void; setup: (dir: string) => void }) {
+  const { home } = listed;
+  const rows = useMemo(() => pickerRows(listed.projects, listed.pending), [listed]);
+  const [browsing, setBrowsing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [opened, setOpened] = useState<string | null>(null);
+  // The last folder forgotten, for a moment, to undo.
+  const [forgot, setForgot] = useState<{ dir: string; label: string } | null>(null);
+  useEffect(() => { if (!forgot) return; const t = setTimeout(() => setForgot(null), 6000); return () => clearTimeout(t); }, [forgot]);
+  const list = useRef<HTMLUListElement>(null);
+  const answer = (j: Listed) => set({ projects: j.projects, pending: j.pending, home });
+
+  /** Adds a folder: a baba there joins the list; a folder that needs setting up opens its wizard. */
+  const add = async (dir: string) => {
+    setError(null);
+    try {
+      const j = await postJson<Listed & { name: string | null; dir: string }>("/api/projects/add", { dir });
+      answer(j);
+      setBrowsing(false);
+      const waiting = j.pending.find((e) => e.dir === j.dir);
+      if (waiting && !waiting.error) setup(j.dir);
+      return true;
+    } catch (e) { setError(message(e)); return false; }
+  };
+  const forget = async (r: PickerRow) => {
+    setError(null);
+    try {
+      answer(await postJson<Listed>("/api/projects/remove", { dir: r.dir }));
+      setForgot({ dir: r.dir, label: r.kind === "baba" ? r.p.title : tilde(r.dir, home) });
+    } catch (e) { setError(message(e)); void reload(); }
+  };
+  const undo = async () => {
+    const f = forgot;
+    setForgot(null);
+    if (f) try { answer(await postJson<Listed>("/api/projects/add", { dir: f.dir })); } catch (e) { setError(message(e)); }
+  };
+  const open = (r: PickerRow) => {
+    if (r.kind === "baba") location.assign(href(r.p.name));
+    else if (!r.e.error) setup(r.dir);
+    else setOpened(opened === r.dir ? null : r.dir);
+  };
+  // Up and down move between the rows and the field, as in the launcher.
+  const move = (e: KeyboardEvent) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    const all = [...(list.current?.querySelectorAll<HTMLElement>("[data-row]") ?? [])];
+    const field = document.querySelector<HTMLInputElement>(".rt-add input");
+    if (field) all.push(field);
+    const i = all.indexOf(document.activeElement as HTMLElement);
+    if (i < 0) return;
+    e.preventDefault();
+    all[(i + (e.key === "ArrowDown" ? 1 : -1) + all.length) % all.length]?.focus();
+  };
+
+  return <div className="gui-view rt" onKeyDown={move}>
+    <div className="rt-column">
+      <header className="rt-mark"><h1><Lockup /><span className="rt-hidden">voss</span></h1><VossVersion /></header>
+      {browsing
+        ? <div className="rt-browse"><Folders home={home} pick={(dir) => void add(dir)} onBack={() => setBrowsing(false)} /></div>
+        : <>
+          <ul ref={list} className="rt-list" aria-label="Babas">
+            {rows.map((r) => {
+              const label = r.kind === "baba" ? r.p.title : r.dir.split("/").filter(Boolean).pop() || r.dir;
+              const failed = r.kind === "pending" && !!r.e.error;
+              return <li key={r.dir} className={`rt-row${failed ? " is-failed" : ""}`} style={{ "--depth": r.depth } as CSSProperties}>
+                <button type="button" data-row className="rt-row-main" title={r.kind === "baba" ? `Open ${r.p.title}` : failed ? "Show why it did not open" : `Set up the baba in ${tilde(r.dir, home)}`} onClick={() => open(r)}>
+                  <span className="rt-row-icon">{r.kind === "baba" ? <Eyes size={16} /> : failed ? <WarnGlyph /> : <SetupGlyph />}</span>
+                  <span className="rt-row-label">{label}</span>
+                  {r.kind === "pending" && <span className={`rt-tag${failed ? " is-failed" : ""}`}>{failed ? "Did not open" : "Set up"}</span>}
+                  <span className="rt-row-note">{short(r.dir, home, 44)}</span>
+                </button>
+                <button type="button" className="rt-row-forget" aria-label={`Forget ${label}`} title={`Forget ${label}: voss stops running it; its files stay`} onClick={() => void forget(r)}><Cross /></button>
+                {failed && opened === r.dir && r.kind === "pending" && <p className="rt-row-error">{r.e.error}</p>}
+              </li>;
+            })}
+            {!rows.length && <li className="rt-empty">No babas yet. Add a folder to start one.</li>}
+          </ul>
+          <AddField home={home} onAdd={add} onBrowse={() => { setError(null); setBrowsing(true); }} />
+        </>}
+      {error && <p className="rt-error" role="alert">{error}</p>}
+    </div>
+    {forgot && <div className="rt-toast" role="status">Forgot {forgot.label}. Its files stay.<button type="button" onClick={() => void undo()}>Undo</button></div>}
+  </div>;
+}
+
+interface Dir { name: string; path: string; baba: boolean; known: boolean }
+
+/** A folder by its path: typed or pasted, completed from the folders there as it is typed; Tab takes the suggestion, Enter adds. */
+function AddField({ home, onAdd, onBrowse }: { home: string; onAdd: (dir: string) => Promise<boolean>; onBrowse: () => void }) {
+  const [text, setText] = useState("");
+  const [dirs, setDirs] = useState<Dir[]>([]);
+  const [at, setAt] = useState(-1);
+  const [busy, setBusy] = useState(false);
+  const expand = (t: string) => t === "~" ? home : t.startsWith("~/") ? home + t.slice(1) : t;
+  const full = expand(text.trim());
+  const cut = full.lastIndexOf("/");
+  const parent = cut < 0 ? "" : full.slice(0, cut) || "/", leaf = cut < 0 ? full : full.slice(cut + 1);
+  useEffect(() => {
+    if (!parent.startsWith("/")) { setDirs([]); return; }
+    let live = true;
+    const t = setTimeout(() => {
+      getJson<{ dirs: Dir[] }>(`/api/dirs?path=${encodeURIComponent(parent)}`).then((b) => { if (live) setDirs(b.dirs); }, () => { if (live) setDirs([]); });
+    }, 100);
+    return () => { live = false; clearTimeout(t); };
+  }, [parent]);
+  const shown = dirs.filter((d) => d.name.toLowerCase().startsWith(leaf.toLowerCase()) && d.path !== full).slice(0, 6);
+  const take = (d: Dir) => { setText(`${tilde(d.path, home)}/`); setAt(-1); };
+  const submit = async () => {
+    const dir = full.replace(/\/+$/, "") || "/";
+    if (!dir.startsWith("/") || busy) return;
+    setBusy(true);
+    if (await onAdd(dir)) setText("");
+    setBusy(false);
   };
-  // The shell's verbs, kept in the page: a baba opens as another page; the wizard is the one window here.
-  const hand: Hand = { fire: (name, args) => {
-    const a = (args ?? {}) as { app?: string; window?: number };
-    if (name === "desktop-open") {
-      if (a.app === NEW) setOpen(true);
-      else if (a.app?.startsWith("baba:")) location.assign(href(a.app.slice(5)));
-    } else if (name === "desktop-select") setOpen(a.window === wizard.entity);
-    else if (name === "desktop-close") setOpen(false);
-  } };
-  return <div className="gui-view">
-    <DesktopFrame picture={picture} title="voss" hand={hand} render={() => (
-      <Folders home={home} onBack={() => setOpen(false)} onOpened={(name) => location.assign(href(name))} />
-    )} />
+  return <div className="rt-add">
+    <label className="rt-add-field">
+      <span className="rt-row-icon"><FolderGlyph /></span>
+      <input value={text} placeholder="Add a folder: type its path, ~/…" spellCheck={false} autoComplete="off" aria-label="Add a folder by its path" disabled={busy}
+        onChange={(e) => { setText(e.target.value); setAt(-1); }}
+        onKeyDown={(e) => {
+          if (e.key === "Tab" && !e.shiftKey && shown.length && text.trim()) { e.preventDefault(); take(shown[Math.max(0, at)]!); }
+          else if ((e.key === "ArrowDown" || e.key === "ArrowUp") && shown.length && text.trim()) {
+            e.preventDefault(); e.stopPropagation();
+            const next = at + (e.key === "ArrowDown" ? 1 : -1);
+            setAt(next < -1 ? shown.length - 1 : next >= shown.length ? -1 : next);
+          }
+          else if (e.key === "Enter") { e.preventDefault(); if (at >= 0 && shown[at]) take(shown[at]!); else void submit(); }
+          else if (e.key === "Escape" && text) { e.preventDefault(); setText(""); }
+        }} />
+      <button type="button" className="rt-add-browse" onClick={onBrowse}>Browse</button>
+      <button type="button" className="rt-add-go" aria-label={busy ? "Adding the folder" : "Add the folder"} title="Add the folder (↵)" disabled={busy || !full.startsWith("/")} onClick={() => void submit()}>{busy ? <span className="pk-spin" aria-hidden="true" /> : <Plus />}</button>
+    </label>
+    {shown.length > 0 && text.trim() && <ul className="rt-suggest" role="listbox" aria-label="Folders">
+      {shown.map((d, i) => <li key={d.path} role="option" aria-selected={i === at}>
+        <button type="button" className={i === at ? "is-active" : undefined} onMouseDown={(e) => e.preventDefault()} onClick={() => take(d)}>
+          <span className="rt-row-icon">{d.baba ? <Eyes size={14} /> : <FolderGlyph />}</span>{d.name}
+          {d.known ? <span className="rt-tag">in the list</span> : d.baba ? <span className="rt-tag">baba</span> : null}
+        </button>
+      </li>)}
+    </ul>}
   </div>;
 }

package/src/gui/lockup.ts

@@ -0,0 +1,11 @@
+// The Baba Voss lockup, the symbol knocked out of an ink circle beside the
+// wordmark, as brand/lockup-*-transparent.svg has it from the brand workshop
+// (marc/logo/lockup.ts): its geometry, drawn in the theme's ink so it is tan on
+// walnut and brown on linen. Inlined, since the package carries no brand
+// files; test/brand.test.ts holds it to brand/.
+export const lockup = {
+  viewBox: "0 0 745 160",
+  tile: { x: 50.00, y: 30.00, width: 100.00, height: 100.00, rx: 50.00 },
+  symbol: { transform: "translate(50.00 30.00) scale(1.0000)", eyes: [{ cx: 39.772, cy: 50, r: 18 }, { cx: 77.500, cy: 50, r: 12.728 }] },
+  word: { transform: "translate(195.00 114.90)", d: "M8 0L8-69.80L32.30-69.80Q42.20-69.80 47.55-64.85Q52.90-59.90 52.90-51.40Q52.90-45.40 49.95-41.80Q47-38.20 41.60-36.60L41.60-36.10Q47.90-34.60 51.55-30.65Q55.20-26.70 55.20-19.50Q55.20-15.10 53.75-11.55Q52.30-8 49.65-5.40Q47-2.80 43.25-1.40Q39.50 0 34.80 0L8 0M20.80-9.50L30.80-9.50Q36.30-9.50 39.05-11.55Q41.80-13.60 41.80-18.60L41.80-21.90Q41.80-26.80 39.05-28.85Q36.30-30.90 30.80-30.90L20.80-30.90L20.80-9.50M20.80-40L29.10-40Q34.40-40 36.95-41.90Q39.50-43.80 39.50-48.50L39.50-51.80Q39.50-56.50 36.95-58.40Q34.40-60.30 29.10-60.30L20.80-60.30 M116.50 0L109 0Q104.30 0 101.75-2.35Q99.20-4.70 98.70-8.90L98.20-8.90Q96.80-4.10 92.70-1.45Q88.60 1.20 82.60 1.20Q74.80 1.20 70.20-2.90Q65.60-7 65.60-14.30Q65.60-29.90 88.50-29.90L97.60-29.90L97.60-33.30Q97.60-38.20 95.20-40.70Q92.80-43.20 87.40-43.20Q82.50-43.20 79.50-41.30Q76.50-39.40 74.40-36.40L67.10-42.60Q69.50-46.90 74.85-49.85Q80.20-52.80 88.70-52.80Q98.90-52.80 104.65-48.05Q110.40-43.30 110.40-33.90L110.40-9.60L116.50-9.60L116.50 0M86.90-7.60Q91.50-7.60 94.55-9.75Q97.60-11.90 97.60-15.60L97.60-22.50L88.80-22.50Q78.30-22.50 78.30-15.90L78.30-13.90Q78.30-10.80 80.60-9.20Q82.90-7.60 86.90-7.60 M126.90 0L126.90-74L139.70-74L139.70-42.50L140.40-42.50Q142.50-47.20 146.15-50Q149.80-52.80 155.80-52.80Q160.20-52.80 163.85-51.15Q167.50-49.50 170.10-46.15Q172.70-42.80 174.10-37.70Q175.50-32.60 175.50-25.80Q175.50-19 174.10-13.90Q172.70-8.80 170.10-5.45Q167.50-2.10 163.85-0.45Q160.20 1.20 155.80 1.20Q149.80 1.20 146.15-1.60Q142.50-4.40 140.40-9.10L139.70-9.10L139.70 0L126.90 0M150.40-9Q156-9 159.05-12.40Q162.10-15.80 162.10-21.70L162.10-29.90Q162.10-35.80 159.05-39.20Q156-42.60 150.40-42.60Q146-42.60 142.85-40.45Q139.70-38.30 139.70-33.90L139.70-17.70Q139.70-13.30 142.85-11.15Q146-9 150.40-9 M236.50 0L229 0Q224.30 0 221.75-2.35Q219.20-4.70 218.70-8.90L218.20-8.90Q216.80-4.10 212.70-1.45Q208.60 1.20 202.60 1.20Q194.80 1.20 190.20-2.90Q185.60-7 185.60-14.30Q185.60-29.90 208.50-29.90L217.60-29.90L217.60-33.30Q217.60-38.20 215.20-40.70Q212.80-43.20 207.40-43.20Q202.50-43.20 199.50-41.30Q196.50-39.40 194.40-36.40L187.10-42.60Q189.50-46.90 194.85-49.85Q200.20-52.80 208.70-52.80Q218.90-52.80 224.65-48.05Q230.40-43.30 230.40-33.90L230.40-9.60L236.50-9.60L236.50 0M206.90-7.60Q211.50-7.60 214.55-9.75Q217.60-11.90 217.60-15.60L217.60-22.50L208.80-22.50Q198.30-22.50 198.30-15.90L198.30-13.90Q198.30-10.80 200.60-9.20Q202.90-7.60 206.90-7.60 M299.20 0L280.80 0L261.70-69.80L276.10-69.80L284.80-34.50L289.90-12.50L290.60-12.50L295.80-34.50L304.60-69.80L318.30-69.80 M350 1.20Q344.10 1.20 339.45-0.70Q334.80-2.60 331.55-6.10Q328.30-9.60 326.55-14.60Q324.80-19.60 324.80-25.80Q324.80-32 326.55-37Q328.30-42 331.55-45.50Q334.80-49 339.45-50.90Q344.10-52.80 350-52.80Q355.80-52.80 360.50-50.90Q365.20-49 368.45-45.50Q371.70-42 373.45-37Q375.20-32 375.20-25.80Q375.20-19.60 373.45-14.60Q371.70-9.60 368.45-6.10Q365.20-2.60 360.50-0.70Q355.80 1.20 350 1.20M350-8.60Q355.50-8.60 358.70-11.95Q361.90-15.30 361.90-21.80L361.90-29.80Q361.90-36.30 358.70-39.65Q355.50-43 350-43Q344.50-43 341.30-39.65Q338.10-36.30 338.10-29.80L338.10-21.80Q338.10-15.30 341.30-11.95Q344.50-8.60 350-8.60 M409.80 1.20Q401.30 1.20 395.10-1.45Q388.90-4.10 385.40-8.60L392.90-15.40Q396.10-11.90 400.25-10Q404.40-8.10 409.90-8.10Q414.70-8.10 417.60-9.70Q420.50-11.30 420.50-14.60Q420.50-17.40 418.55-18.40Q416.60-19.40 413.40-19.90L405.10-21.20Q401.90-21.70 398.85-22.65Q395.80-23.60 393.45-25.30Q391.10-27 389.70-29.65Q388.30-32.30 388.30-36.10Q388.30-44.20 394.35-48.50Q400.40-52.80 411-52.80Q418.50-52.80 423.75-50.70Q429-48.60 432.40-44.80L425.70-37.40Q423.50-39.80 419.85-41.65Q416.20-43.50 410.60-43.50Q400.80-43.50 400.80-37.40Q400.80-34.60 402.80-33.55Q404.80-32.50 408-32L416.20-30.70Q419.50-30.20 422.55-29.25Q425.60-28.30 427.95-26.60Q430.30-24.90 431.70-22.30Q433.10-19.70 433.10-15.90Q433.10-7.90 426.95-3.35Q420.80 1.20 409.80 1.20 M469.80 1.20Q461.30 1.20 455.10-1.45Q448.90-4.10 445.40-8.60L452.90-15.40Q456.10-11.90 460.25-10Q464.40-8.10 469.90-8.10Q474.70-8.10 477.60-9.70Q480.50-11.30 480.50-14.60Q480.50-17.40 478.55-18.40Q476.60-19.40 473.40-19.90L465.10-21.20Q461.90-21.70 458.85-22.65Q455.80-23.60 453.45-25.30Q451.10-27 449.70-29.65Q448.30-32.30 448.30-36.10Q448.30-44.20 454.35-48.50Q460.40-52.80 471-52.80Q478.50-52.80 483.75-50.70Q489-48.60 492.40-44.80L485.70-37.40Q483.50-39.80 479.85-41.65Q476.20-43.50 470.60-43.50Q460.80-43.50 460.80-37.40Q460.80-34.60 462.80-33.55Q464.80-32.50 468-32L476.20-30.70Q479.50-30.20 482.55-29.25Q485.60-28.30 487.95-26.60Q490.30-24.90 491.70-22.30Q493.10-19.70 493.10-15.90Q493.10-7.90 486.95-3.35Q480.80 1.20 469.80 1.20" },
+} as const;

package/src/gui/settings.tsx

@@ -0,0 +1,241 @@
+// The settings, a page per subject under a sidebar of two levels. The baba's
+// first: its Profile, its name for now, written into its package.json. Then
+// voss's own, the person's, the same on every baba: the theme, the keys the
+// desktop runs, and About, which voss this is and where it keeps everything;
+// they are kept in voss's settings.json, through /api/settings.
+import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react";
+import { apiHeaders, type AppProps } from "babavoss/web";
+import type { Described } from "../baba/node.ts";
+import type { ProjectEntry, Voss } from "../server/messages.ts";
+import { requirementError } from "../baba/requirements.ts";
+import { isMac } from "../desktop/keys.ts";
+import { bindingNote, bindingOf, formatBinding, keyCommands, keymapOf, normalBinding, themes, type KeyCommand } from "../desktop/index.ts";
+import { Button } from "../web/ui.tsx";
+import { saveSettings, useVossSettings } from "./voss-settings.ts";
+
+/** The settings' pages, by path, under their level in the sidebar's order. */
+const pages = [
+  { level: "baba", path: "/", title: "Profile" },
+  { level: "voss", path: "/appearance", title: "Appearance" },
+  { level: "voss", path: "/keyboard", title: "Keyboard" },
+  { level: "voss", path: "/about", title: "About" },
+] as const;
+
+/** The baba the settings are open in, as the page describes it: given by context, so the app's component stays the same as it is described again, and a half-typed name or a key being recorded stays. */
+export const SettingsBaba = createContext<Described | undefined>(undefined);
+
+export function Settings({ path, navigate, setTitle }: AppProps) {
+  const baba = useContext(SettingsBaba);
+  const page = pages.find((p) => p.path === path) ?? pages[0];
+  useEffect(() => { setTitle("Settings"); }, []);
+  const link = (p: typeof pages[number]) => <button key={p.path} type="button" className={`gui-settings-link${p === page ? " is-active" : ""}`} aria-current={p === page ? "page" : undefined} onClick={() => navigate(p.path)}>{p.title}</button>;
+  return <div className="gui-settings">
+    <nav className="gui-settings-nav" aria-label="Settings">
+      <h2 className="gui-settings-level">Baba</h2>
+      {pages.filter((p) => p.level === "baba").map(link)}
+      <h2 className="gui-settings-level">voss</h2>
+      {pages.filter((p) => p.level === "voss").map(link)}
+    </nav>
+    <section className="gui-settings-page" aria-labelledby="gui-settings-title">
+      <header className="gui-settings-head">
+        <h1 id="gui-settings-title">{page.title}</h1>
+      </header>
+      {page.path === "/" ? <Profile baba={baba} /> : page.path === "/appearance" ? <Appearance /> : page.path === "/keyboard" ? <Keyboard /> : <About baba={baba} />}
+    </section>
+  </div>;
+}
+
+/** One setting: what it is on the left, its control on the right. */
+function Setting({ title, summary, children }: { title: ReactNode; summary?: ReactNode; children: ReactNode }) {
+  return <div className="gui-setting">
+    <div className="gui-setting-text"><div className="gui-setting-title">{title}</div>{summary && <div className="gui-setting-summary">{summary}</div>}</div>
+    <div className="gui-setting-control">{children}</div>
+  </div>;
+}
+
+const message = (e: unknown) => String(e instanceof Error ? e.message : e).replace(/^Error: /, "");
+
+function Appearance() {
+  const settings = useVossSettings();
+  const current = settings?.theme ?? "system";
+  const [error, setError] = useState<string | null>(null);
+  return <div className="gui-settings-list">
+    <Setting title="Theme" summary={<>System follows this computer's light or dark appearance.{error && <span className="gui-setting-note is-error">{error}</span>}</>}>
+      <div className="gui-choices" role="radiogroup" aria-label="Theme">
+        {themes.map((t) => <Button key={t} variant={t === current ? "default" : "quiet"} role="radio" aria-checked={t === current} disabled={!settings} onClick={() => { setError(null); saveSettings({ theme: t }).catch((e) => setError(message(e))); }}>{t[0]!.toUpperCase() + t.slice(1)}</Button>)}
+      </div>
+    </Setting>
+  </div>;
+}
+
+function Keyboard() {
+  const settings = useVossSettings();
+  const keymap = keymapOf(settings?.keys);
+  const remapped = Object.keys(settings?.keys ?? {}).length > 0;
+  const [error, setError] = useState<{ id: KeyCommand | null; message: string } | null>(null);
+  const change = (keys: Partial<Record<KeyCommand, string | null>>, id: KeyCommand | null) => {
+    setError(null);
+    saveSettings({ keys }).catch((e) => setError({ id, message: message(e) }));
+  };
+  return <div className="gui-settings-list">
+    {keyCommands.map((c) => {
+      const binding = keymap[c.id], own = settings?.keys?.[c.id] !== undefined;
+      const note = error?.id === c.id ? error.message : binding && bindingNote(binding);
+      return <Setting key={c.id} title={c.title} summary={<>{c.summary}{note && <span className={`gui-setting-note${error?.id === c.id ? " is-error" : ""}`}>{note}</span>}</>}>
+        <KeyRecorder label={c.title} binding={binding} onRecord={(b) => {
+          const other = keyCommands.find((o) => o.id !== c.id && keymap[o.id] === b);
+          if (other) setError({ id: c.id, message: `${formatBinding(b)} already runs ${other.title}.` }); else change({ [c.id]: b }, c.id);
+        }} onInvalid={(m) => setError({ id: c.id, message: m })} />
+        <Button variant="quiet" className={own ? "" : "is-hidden"} disabled={!own} title={c.default ? `Back to ${formatBinding(c.default)}` : "Back to no key"} onClick={() => change({ [c.id]: null }, c.id)}>Reset</Button>
+      </Setting>;
+    })}
+    <p className="gui-settings-foot bv-muted">
+      Click a key, then press the new one; Escape cancels. The launcher's arrows, Enter and Escape are fixed.
+      {remapped && <> <Button variant="quiet" onClick={() => change(Object.fromEntries(keyCommands.map((c) => [c.id, null])), null)}>Reset all</Button></>}
+      {error?.id === null && <span className="gui-setting-note is-error">{error.message}</span>}
+    </p>
+  </div>;
+}
+
+/** The baba's profile: its name, which is its address; renamed, voss opens it again under the new one and the page follows. */
+function Profile({ baba }: { baba?: Described }) {
+  const [name, setName] = useState(baba?.name ?? "");
+  const [taken, setTaken] = useState<string[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    fetch("/api/projects", { headers: apiHeaders() }).then((r) => r.json() as Promise<{ projects: ProjectEntry[] }>)
+      .then((j) => setTaken(j.projects.map((p) => p.name).filter((n) => n !== baba?.name)), () => {});
+  }, [baba?.name]);
+  if (!baba) return <p className="bv-muted">…</p>;
+  const why = name === baba.name ? null : requirementError("name", name, taken);
+  const changed = name !== baba.name && !why;
+  const save = async () => {
+    if (!changed || busy) return;
+    setBusy(true); setError(null);
+    try {
+      const r = await fetch("/api/projects/rename", { method: "POST", headers: { "content-type": "application/json", ...apiHeaders() }, body: JSON.stringify({ name: baba.name, to: name }) });
+      const j = await r.json() as { name: string | null; error?: { message: string } };
+      if (!r.ok || j.error || !j.name) throw new Error(j.error?.message ?? "voss did not open it again");
+      location.assign(`/${encodeURIComponent(j.name)}/settings`);
+    } catch (e) { setError(message(e)); setBusy(false); }
+  };
+  return <form className="gui-settings-list" onSubmit={(e) => { e.preventDefault(); void save(); }}>
+    <Setting title="Name" summary={<>What voss calls this baba, at <code>/{baba.name}/</code> and as <code>voss {baba.name}</code> on the CLI; not its folder's name, which stays as it is.
+      {(why || error) ? <span className="gui-setting-note is-error">{why ?? error}</span> : changed && <span className="gui-setting-note">Renamed, it moves to <code>/{name}/</code>; links to <code>/{baba.name}/</code> stop working.</span>}</>}>
+      <input className="gui-name" value={name} spellCheck={false} autoComplete="off" aria-label="Name" disabled={busy} onChange={(e) => setName(e.target.value.toLowerCase())} />
+      <Button variant={changed ? "primary" : "quiet"} type="submit" disabled={!changed || busy}>{busy ? "Renaming…" : "Rename"}</Button>
+    </Setting>
+  </form>;
+}
+
+/** A binding as a key, which records the next press when clicked: a press of a modifier alone waits for the key; Escape and leaving it cancel. */
+function KeyRecorder({ label, binding, onRecord, onInvalid }: { label: string; binding: string | null; onRecord(binding: string): void; onInvalid(message: string): void }) {
+  const [recording, setRecording] = useState(false);
+  const ref = useRef<HTMLButtonElement>(null);
+  return <button ref={ref} type="button" className={`gui-key${recording ? " is-recording" : ""}`} aria-label={recording ? `Press the new key for ${label}` : `${label}: ${binding ? formatBinding(binding) : "no key"}, click to ${binding ? "change" : "set one"}`}
+    onClick={() => setRecording((r) => !r)} onBlur={() => setRecording(false)}
+    onKeyDown={(e) => {
+      if (!recording) return;
+      // While it records, a press is the key, never a command: neither the desktop nor the browser sees it.
+      e.preventDefault(); e.stopPropagation();
+      if (e.key === "Escape" && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) { setRecording(false); return; }
+      const pressed = bindingOf(e.nativeEvent);
+      if (!pressed) return;
+      const b = normalBinding(pressed);
+      setRecording(false);
+      if (!b) onInvalid(`${formatBinding(pressed)} is typing, not a command: hold ${isMac() ? "⌘, ⌥ or ⌃" : "Ctrl or Alt"} with it.`);
+      else if (b !== binding) onRecord(b);
+    }}>{recording ? "Press keys…" : binding ? formatBinding(binding) : <span className="gui-key-none">Not set</span>}</button>;
+}
+
+/** What /api/projects answers: the babas voss knows, which voss runs, the user's home. */
+interface Projects { projects: ProjectEntry[]; voss: Voss; home: string }
+
+/** A path as people read it: under the home directory as ~/… */
+const tilde = (path: string, home: string) => home && (path === home || path.startsWith(`${home}/`)) ? `~${path.slice(home.length)}` : path;
+
+/** One fact: its name, its value, and a copy of the value when it is a path or an id. */
+function Fact({ name, value, copy, mono }: { name: string; value: ReactNode; copy?: string; mono?: boolean }) {
+  const [copied, setCopied] = useState(false);
+  return <div className="gui-fact">
+    <dt>{name}</dt>
+    <dd className={mono ? "is-mono" : undefined}>
+      <span className="gui-fact-value" title={copy}>{value}</span>
+      {copy && <button type="button" className="gui-fact-copy" aria-label={`Copy ${name}`} title={copied ? "Copied" : "Copy"} onClick={() => { void navigator.clipboard?.writeText(copy).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1200); }); }}>{copied ? "Copied" : "Copy"}</button>}
+    </dd>
+  </div>;
+}
+
+function Facts({ title, rows }: { title: string; rows: MaybeRow[] }) {
+  return <section className="gui-facts">
+    <h2>{title}</h2>
+    <dl>{rows.filter((r): r is FactRow => !!r).map((r) => <Fact key={r.name} {...r} />)}</dl>
+  </section>;
+}
+interface FactRow { name: string; value: ReactNode; copy?: string; mono?: boolean }
+/** A row, or what a condition left in its place. */
+type MaybeRow = FactRow | false | null | undefined | "";
+
+function About({ baba }: { baba?: Described }) {
+  const [p, setP] = useState<Projects | null>(null);
+  const [failed, setFailed] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    let live = true;
+    fetch("/api/projects", { headers: apiHeaders() }).then(async (r) => { if (!r.ok) throw new Error(r.statusText); return r.json() as Promise<Projects>; })
+      .then((x) => { if (live) setP(x); }, (e) => { if (live) setFailed(String(e)); });
+    return () => { live = false; };
+  }, []);
+  if (failed) return <p className="bv-error">voss did not answer: {failed}</p>;
+  if (!p) return <p className="bv-muted">…</p>;
+  const { voss, home } = p, a = voss.about;
+  const here = baba && p.projects.find((x) => x.name === baba.name);
+  const path = (name: string, full: string): FactRow => ({ name, value: tilde(full, home), copy: full, mono: true });
+  const m = baba?.manifest;
+  const sections: { title: string; rows: MaybeRow[] }[] = [
+    { title: "voss", rows: [
+      { name: "Version", value: <>{voss.version}{voss.dev && <span className="gui-fact-tag">checkout</span>}{voss.stale && voss.installed && <span className="gui-fact-tag is-warn">{voss.installed.version} installed, restart to update</span>}</>, copy: voss.version },
+      { name: "Commit", value: voss.sha ? voss.sha.slice(0, 12) : voss.dev ? "the working tree" : "not stamped", ...(voss.sha ? { copy: voss.sha, mono: true } : {}) },
+      voss.at && { name: "Packed", value: new Date(voss.at).toLocaleString() },
+      { name: "Address", value: location.origin, copy: location.origin, mono: true },
+      { name: "Process", value: `pid ${voss.pid}${a ? `, since ${new Date(a.started).toLocaleString()}` : ""}` },
+      { name: "Runs as", value: voss.kept ? "the user service" : "a command, until it stops" },
+    ] },
+    ...(a ? [
+      { title: "Runtime", rows: [
+        { name: "Bun", value: a.runtime.bun, copy: a.runtime.bun },
+        { name: "Platform", value: `${a.runtime.platform} ${a.runtime.arch}` },
+        path("Executable", a.runtime.executable),
+      ] },
+      { title: "Installation", rows: [
+        path("Framework", a.framework),
+        a.cli && path("CLI", a.cli),
+        path("State", a.root),
+        path("Registry", a.registry),
+        path("Page token", a.token),
+        a.service && path("User service", a.service.file),
+        a.service && path("Service log", a.service.log),
+      ] },
+    ] : []),
+    ...(baba ? [{ title: "This baba", rows: [
+      { name: "Name", value: baba.name, copy: baba.name, mono: true },
+      { name: "Title", value: baba.title },
+      here && path("Directory", here.dir),
+      here && path("Code", `${here.dir}/.baba`),
+      here?.parent && { name: "Inside", value: here.parent },
+      { name: "Generation", value: String(baba.gen) },
+      m && { name: "Contract", value: `${m.systems.length} systems, ${Object.keys(m.actions).length} actions, ${Object.keys(m.queries).length} queries, ${(m.apps ?? []).length} apps` },
+      baba.error && { name: "Load", value: <span className="gui-fact-error">{baba.error}</span> },
+    ] }] : []),
+  ];
+  // Everything above as plain text, for a bug report or a message.
+  const report = sections.map((s) => [`# ${s.title}`, ...s.rows.filter((r): r is FactRow => !!r).map((r) => `${r.name}: ${r.copy ?? (typeof r.value === "string" ? r.value : "")}`)].join("\n")).join("\n\n");
+  return <div className="gui-about">
+    {sections.map((s) => <Facts key={s.title} {...s} />)}
+    <p className="gui-settings-foot bv-muted">
+      <Button variant="quiet" onClick={() => { void navigator.clipboard?.writeText(report).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1200); }); }}>{copied ? "Copied" : "Copy all"}</Button>
+      As plain text, for a bug report.
+    </p>
+  </div>;
+}