babavoss 0.12.6 → 0.13.1

package/src/gui/setup.tsx

@@ -0,0 +1,77 @@
+// The setup wizard: what a folder's baba lacks of what voss requires, asked a
+// step at a time in one card of a fixed size, then made so in its last step:
+// its .baba written when there is none, or the values written into the one
+// there. Until it is done the baba does not run, and opening it lands here.
+import { useEffect, useRef, useState } from "react";
+import { Eyes } from "../desktop/view.tsx";
+import { nameFrom, requirementError, requirements, type Requirement, type RequirementValues } from "../baba/requirements.ts";
+import type { PendingEntry } from "../server/messages.ts";
+import { postJson, tilde } from "./wizard.tsx";
+
+export function SetupWizard({ entry, home, taken, onCancel, onDone }: { entry: PendingEntry; home: string; taken: readonly string[]; onCancel(): void; onDone(name: string): void }) {
+  const asks = requirements.filter((r) => entry.missing.includes(r.key));
+  // A step per requirement missing, then the one that makes it so.
+  const steps = [...asks.map((r) => ({ kind: "ask" as const, r })), { kind: "done" as const }];
+  const [at, setAt] = useState(0);
+  const [values, setValues] = useState<RequirementValues>(() => ({ name: nameFrom(entry.dir) }));
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const field = useRef<HTMLInputElement>(null), primary = useRef<HTMLButtonElement>(null);
+  const step = steps[at]!;
+  const why = (k: Requirement) => requirementError(k, values[k] ?? "", taken);
+  const blocked = step.kind === "ask" && why(step.r.key) !== null;
+  // Each step takes the keys: its field, or on the last its button, so Enter goes on.
+  useEffect(() => { if (field.current) { field.current.focus(); field.current.select(); } else primary.current?.focus(); }, [at]);
+
+  const next = async () => {
+    if (busy || blocked) return;
+    if (step.kind === "ask") { setAt(at + 1); return; }
+    setBusy(true); setError(null);
+    try {
+      const j = await postJson<{ name: string | null }>("/api/projects/setup", { dir: entry.dir, values });
+      if (j.name) onDone(j.name); else throw new Error("voss kept it to set up: it still lacks something");
+    } catch (e) { setError(String(e instanceof Error ? e.message : e)); setBusy(false); }
+  };
+  const back = () => { if (busy) return; if (at > 0) setAt(at - 1); else onCancel(); };
+  useEffect(() => {
+    const key = (e: KeyboardEvent) => { if (e.key === "Escape") { e.preventDefault(); back(); } };
+    addEventListener("keydown", key); return () => removeEventListener("keydown", key);
+  });
+
+  const where = tilde(entry.dir, home);
+  return <form className="sw-card" aria-label="Set up a baba" onSubmit={(e) => { e.preventDefault(); void next(); }}>
+    <header className="sw-head">
+      <Eyes size={28} />
+      <div className="sw-head-text"><h1>Set up a baba</h1><p title={entry.dir}>{where}</p></div>
+    </header>
+    <ol className="sw-steps" aria-label="Steps">
+      {steps.map((s, i) => <li key={i} className={i === at ? "is-here" : i < at ? "is-done" : undefined} aria-current={i === at ? "step" : undefined}>
+        <span className="sw-step-dot">{i + 1}</span>{s.kind === "ask" ? s.r.title : entry.baba ? "Save" : "Create"}
+      </li>)}
+    </ol>
+    <div className="sw-body">
+      {step.kind === "ask" ? <>
+        <label className="sw-label" htmlFor="sw-field">{step.r.title}</label>
+        <p className="sw-summary">{step.r.summary}</p>
+        <input id="sw-field" ref={field} className={`sw-input${why(step.r.key) ? " is-wrong" : ""}`} value={values[step.r.key] ?? ""} spellCheck={false} autoComplete="off" disabled={busy}
+          onChange={(e) => setValues({ ...values, [step.r.key]: e.target.value.toLowerCase() })} />
+        <p className={`sw-hint${why(step.r.key) ? " is-wrong" : ""}`}>{why(step.r.key) ?? <>It opens at <code>/{values[step.r.key]}/</code>.</>}</p>
+      </> : <>
+        <p className="sw-summary">{entry.baba
+          ? <>voss writes what it needs into <code>.baba/package.json</code> and leaves the rest of it as it is.</>
+          : <>voss makes a baba here: <code>.baba/</code> beside what the folder holds, with a first system and its spec, then installs its packages. It takes a moment.</>}</p>
+        <dl className="sw-review">
+          {asks.map((r) => <div key={r.key}><dt>{r.title}</dt><dd><code>{values[r.key]}</code></dd></div>)}
+          <div><dt>Folder</dt><dd><code title={entry.dir}>{where}</code></dd></div>
+        </dl>
+      </>}
+      {error && <p className="sw-error" role="alert">{error}</p>}
+    </div>
+    <footer className="sw-foot">
+      <button type="button" className="sw-button is-quiet" disabled={busy} onClick={back}>{at > 0 ? "Back" : "Cancel"}</button>
+      <span className="sw-gap" />
+      {busy && <span className="sw-busy"><span className="pk-spin" aria-hidden="true" />{entry.baba ? "Saving…" : "Installing packages…"}</span>}
+      <button ref={primary} type="submit" className="sw-button is-primary" disabled={busy || blocked}>{step.kind === "ask" ? "Continue" : entry.baba ? "Save and open" : "Create and open"}</button>
+    </footer>
+  </form>;
+}

package/src/gui/theme.css

@@ -6,29 +6,32 @@
 @layer voss {
 
 /* The one theme: voss's pages, the kit (bv-*) and plain elements inside a view.
-   Every neutral carries the same faint warmth; depth is a step of lightness,
+   The colours are Baba Voss's, which are Alan Remarc's (marc/logo/brands.ts, site/brand.html):
+   walnut and linen surfaces, tan and brown ink. The desk is the brand's surface, the primary
+   its ink, the text and muted text its own; the steps between surface and soft are ours.
+   Every neutral carries the same warmth; depth is a step of lightness,
    layers part by a 1px line, never by a shadow. A row is 28px, a control 24,
    the gutter 12, one radius of 4. Two sizes of type: 13/20 and 11/16.
    Light by default; dark from the system unless a choice sets data-theme. */
 
 :root, .desktop {
-  --background: oklch(0.968 0.004 75);
-  --surface: oklch(0.992 0.003 75);
+  --background: #F3EDE4;
+  --surface: #F8F4EE;
   --card: var(--surface);
-  --foreground: oklch(0.29 0.008 70);
-  --popover: oklch(0.995 0.003 75);
-  --muted: oklch(0.945 0.005 75);
-  --muted-foreground: oklch(0.53 0.01 70);
-  --accent: oklch(0.935 0.006 75);
-  --primary: oklch(0.52 0.11 250);
-  --primary-foreground: oklch(0.985 0.004 250);
-  --destructive: oklch(0.56 0.14 28);
-  --warning: oklch(0.68 0.11 75);
-  --success: oklch(0.58 0.1 155);
-  --border: oklch(0.29 0.008 70 / 11%);
-  --input: oklch(0.29 0.008 70 / 16%);
-  --desk: oklch(0.925 0.006 75);
-  --chrome: oklch(0.952 0.005 75);
+  --foreground: #332922;
+  --popover: #FAF7F2;
+  --muted: #E6DDD0;
+  --muted-foreground: #6F6356;
+  --accent: #E0D5C5;
+  --primary: #634A38;
+  --primary-foreground: #ECE4D8;
+  --destructive: #A4472A;
+  --warning: #A4472A;
+  --success: #4F6B34;
+  --border: rgb(51 41 34 / 12%);
+  --input: rgb(51 41 34 / 18%);
+  --desk: #ECE4D8;
+  --chrome: #E6DDD0;
   --radius: 4px;
   --row: 28px;
   --control: 24px;
@@ -40,43 +43,43 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]), .desktop[data-theme="system"] {
-    --background: oklch(0.2 0.005 75);
-    --surface: oklch(0.228 0.006 75);
-    --foreground: oklch(0.87 0.012 80);
-    --popover: oklch(0.25 0.006 75);
-    --muted: oklch(0.245 0.006 75);
-    --muted-foreground: oklch(0.66 0.012 78);
-    --accent: oklch(0.275 0.007 75);
-    --primary: oklch(0.74 0.075 245);
-    --primary-foreground: oklch(0.2 0.01 245);
-    --destructive: oklch(0.71 0.1 30);
-    --warning: oklch(0.79 0.09 80);
-    --success: oklch(0.75 0.085 155);
-    --border: oklch(0.87 0.012 80 / 10%);
-    --input: oklch(0.87 0.012 80 / 15%);
-    --desk: oklch(0.165 0.005 75);
-    --chrome: oklch(0.185 0.005 75);
+    --background: #1B1917;
+    --surface: #1F1C1A;
+    --foreground: #E3DDD6;
+    --popover: #262220;
+    --muted: #23201E;
+    --muted-foreground: #9C948C;
+    --accent: #2C2826;
+    --primary: #AE8D74;
+    --primary-foreground: #151312;
+    --destructive: #D9824A;
+    --warning: #D9824A;
+    --success: #A3B67E;
+    --border: rgb(227 221 214 / 10%);
+    --input: rgb(227 221 214 / 15%);
+    --desk: #151312;
+    --chrome: #181614;
     color-scheme: dark;
   }
 }
 
 :root[data-theme="dark"], .desktop[data-theme="dark"] {
-  --background: oklch(0.2 0.005 75);
-  --surface: oklch(0.228 0.006 75);
-  --foreground: oklch(0.87 0.012 80);
-  --popover: oklch(0.25 0.006 75);
-  --muted: oklch(0.245 0.006 75);
-  --muted-foreground: oklch(0.66 0.012 78);
-  --accent: oklch(0.275 0.007 75);
-  --primary: oklch(0.74 0.075 245);
-  --primary-foreground: oklch(0.2 0.01 245);
-  --destructive: oklch(0.71 0.1 30);
-  --warning: oklch(0.79 0.09 80);
-  --success: oklch(0.75 0.085 155);
-  --border: oklch(0.87 0.012 80 / 10%);
-  --input: oklch(0.87 0.012 80 / 15%);
-  --desk: oklch(0.165 0.005 75);
-  --chrome: oklch(0.185 0.005 75);
+  --background: #1B1917;
+  --surface: #1F1C1A;
+  --foreground: #E3DDD6;
+  --popover: #262220;
+  --muted: #23201E;
+  --muted-foreground: #9C948C;
+  --accent: #2C2826;
+  --primary: #AE8D74;
+  --primary-foreground: #151312;
+  --destructive: #D9824A;
+  --warning: #D9824A;
+  --success: #A3B67E;
+  --border: rgb(227 221 214 / 10%);
+  --input: rgb(227 221 214 / 15%);
+  --desk: #151312;
+  --chrome: #181614;
   color-scheme: dark;
 }
 
@@ -84,6 +87,10 @@
 *, *::before, *::after { box-sizing: border-box; }
 html { font: 13px/20px var(--font-sans); -webkit-font-smoothing: antialiased; height: 100%; }
 body { margin: 0; height: 100%; background: var(--desk); color: var(--foreground); }
+/* Going from one of voss's pages to another, the picker to a baba and back, crossfades rather than cuts, where the browser can. */
+@view-transition { navigation: auto; }
+::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
+@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
 #root { height: 100%; display: flex; overflow: hidden; }
 * { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--foreground) 25%, transparent) transparent; }
 code, kbd, pre, samp { font-family: var(--font-mono); font-size: 12px; line-height: 20px; }
@@ -253,12 +260,6 @@ button.pk-crumb:hover { background: var(--accent); color: var(--foreground); }
 .pk-dock-text { min-width: 0; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pk-here { color: var(--foreground); font-family: var(--font-mono); font-size: 12px; }
 .pk-dock-text code { font-size: 12px; color: var(--foreground); }
-.pk-field { display: flex; align-items: center; height: var(--control); min-width: 0; width: 150px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
-.pk-field.is-wide { width: 190px; }
-.pk-field:focus-within { border-color: color-mix(in oklch, var(--primary) 55%, transparent); }
-.pk-field span { flex: none; align-self: stretch; display: grid; place-items: center; padding: 0 7px; border-right: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground); font-size: 11px; }
-.pk-field input { flex: 1; min-width: 0; height: 100%; padding: 0 7px; border: 0; outline: 0; background: transparent; }
-.pk-busy { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-foreground); }
 
 .pk-primary { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border: 0; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 100ms; }
 .pk-empty .pk-primary { padding-right: 10px; }
@@ -274,7 +275,6 @@ button.pk-crumb:hover { background: var(--accent); color: var(--foreground); }
 
 @media (max-width: 560px) {
   .pk-dock-line:not(.is-say) { flex-wrap: wrap; }
-  .pk-field, .pk-field.is-wide { width: 100%; }
   .pk-filter, .pk-filter:focus-within { width: 120px; }
 }
 @media (prefers-reduced-motion: reduce) { .pk-fade, .pk-ghost-line, .pk-spin { animation: none; } .pk-go, .pk-filter, .pk-folders { transition: none; } }
@@ -295,10 +295,64 @@ button.pk-crumb:hover { background: var(--accent); color: var(--foreground); }
 @keyframes gui-appear { from { opacity: 0 } to { opacity: 1 } }
 @media (prefers-reduced-motion: reduce) { .gui-fade { animation: none; } }
 
-/* ---- voss's apps, in the shell's windows: the state, the contract, the promptware, the settings, with a page's gutters; the Maker edge to edge ---- */
+/* ---- voss's apps, in the shell's windows: the state, the contract, the agentic instructions, the settings, with a page's gutters; the Maker edge to edge ---- */
 .gui-app { max-width: 1100px; padding: 16px 20px 32px; }
 .gui-app > h2 { margin: 16px 0 4px; font-size: 13px; }
-.gui-choices { display: flex; gap: 6px; margin-top: 8px; }
+.gui-choices { display: flex; gap: 6px; }
+/* The settings: a sidebar of pages, the page beside it; a setting is its name and what it does on the left, its control on the right. */
+.gui-settings { display: flex; height: 100%; }
+.gui-settings-nav { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; width: 200px; padding: 16px 8px; border-right: 1px solid var(--border); }
+.gui-settings-link { display: flex; align-items: center; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
+.gui-settings-link:hover { color: var(--foreground); background: color-mix(in oklch, var(--foreground) 6%, transparent); }
+.gui-settings-link.is-active { color: var(--foreground); background: color-mix(in oklch, var(--foreground) 11%, transparent); }
+.gui-settings-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
+.gui-settings-level { margin: 12px 12px 4px; font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
+.gui-settings-level:first-child { margin-top: 0; }
+.gui-name { width: 200px; height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in oklch, var(--foreground) 4%, transparent); color: var(--foreground); font: inherit; font-family: var(--font-mono); outline: none; }
+.gui-name:focus { border-color: var(--primary); }
+.gui-settings-page { flex: 1; min-width: 0; overflow: auto; padding: 24px 32px 48px; }
+.gui-settings-page > * { max-width: 720px; }
+.gui-settings-head h1 { margin: 0 0 16px; font-size: 18px; line-height: 28px; font-weight: 600; }
+.gui-settings-list { display: flex; flex-direction: column; }
+.gui-setting { display: flex; align-items: center; gap: 24px; padding: 14px 0; border-top: 1px solid var(--border); }
+.gui-setting-text { flex: 1; min-width: 0; }
+.gui-setting-title { font-weight: 500; }
+.gui-setting-summary { color: var(--muted-foreground); font-size: 12px; }
+.gui-setting-note { display: block; margin-top: 2px; color: var(--muted-foreground); font-style: italic; }
+.gui-setting-note.is-error { color: var(--destructive); font-style: normal; }
+.gui-setting-control { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+.gui-setting-control .is-hidden { visibility: hidden; }
+.gui-settings-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; }
+/* About: facts in sections, a name and its value, the value's copy at the row's end when pointed at. */
+.gui-facts { margin-bottom: 20px; }
+.gui-facts h2 { margin: 0 0 4px; font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
+.gui-facts dl { margin: 0; border-top: 1px solid var(--border); }
+.gui-fact { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 32px; border-bottom: 1px solid var(--border); }
+.gui-fact dt { color: var(--muted-foreground); }
+.gui-fact dd { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
+.gui-fact dd.is-mono .gui-fact-value { font-family: var(--font-mono); font-size: 12px; white-space: normal; overflow-wrap: anywhere; padding: 6px 0; }
+.gui-fact-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gui-fact-tag { margin-left: 8px; padding: 0 6px; border-radius: 999px; background: color-mix(in oklch, var(--foreground) 6%, transparent); color: var(--muted-foreground); font-size: 11px; }
+.gui-fact-tag.is-warn { color: var(--destructive); }
+.gui-fact-error { color: var(--destructive); white-space: normal; }
+.gui-fact-copy { flex-shrink: 0; height: 22px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); font: inherit; font-size: 11px; cursor: pointer; opacity: 0; }
+.gui-fact:hover .gui-fact-copy, .gui-fact-copy:focus-visible { opacity: 1; }
+.gui-fact-copy:hover { color: var(--foreground); background: color-mix(in oklch, var(--foreground) 6%, transparent); }
+@media (max-width: 640px) { .gui-fact { grid-template-columns: 1fr; gap: 0; padding: 6px 0; } }
+/* A binding as a key: it records the next press when clicked. */
+.gui-key { min-width: 88px; height: 28px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: color-mix(in oklch, var(--foreground) 6%, transparent); color: var(--foreground); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
+.gui-key:hover { background: color-mix(in oklch, var(--foreground) 11%, transparent); }
+.gui-key-none { color: var(--muted-foreground); }
+.gui-key.is-recording { border-color: var(--primary); color: var(--primary); }
+.gui-key:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
+@media (max-width: 640px) {
+  .gui-settings { flex-direction: column; height: auto; }
+  .gui-settings-page { overflow: visible; }
+  .gui-settings-nav { flex-direction: row; width: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
+  .gui-settings-level { display: none; }
+  .gui-settings-page { padding: 16px; }
+  .gui-setting { flex-wrap: wrap; gap: 8px; }
+}
 .gui-stale { position: fixed; left: 10px; bottom: 10px; z-index: 900; display: flex; gap: 12px; align-items: center; max-width: min(640px, calc(100vw - 60px)); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 13px; box-shadow: 0 8px 24px color-mix(in oklch, black 25%, transparent); }
 
 /* The proofs page and a view's own use of the player: voss's classes. */
@@ -496,3 +550,96 @@ button.pk-crumb:hover { background: var(--accent); color: var(--foreground); }
 .bv-lab-tree { list-style: none; margin: 2px 0 0 10px; padding: 0; font-size: 11px; }
 .bv-lab-expect { margin: 4px 0; }
 .bv-lab-model .bv-object-map { margin-bottom: 6px; }
+
+/* The root and its setup wizard sit in the theme's layer, so the kit's classes and the browser's buttons keep their order over them. */
+@layer voss {
+/* ---- voss's root: the mark large in the middle, the babas under it as rows, a folder added by its path ---- */
+.rt { display: flex; justify-content: center; background: var(--desk); color: var(--foreground); font-size: 13px; line-height: 20px;
+  --rt-ink: color-mix(in oklch, var(--foreground) 6%, transparent); --rt-ink-strong: color-mix(in oklch, var(--foreground) 11%, transparent); }
+.rt.rt-center { align-items: center; padding: 16px; }
+:where(.rt) :where(button, input) { font: inherit; color: inherit; }
+.rt-column { display: flex; flex-direction: column; gap: 8px; width: min(560px, 100%); padding: max(32px, 12vh) 16px 48px; }
+.rt-mark { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; padding: 0 5px; color: var(--primary); }
+.rt-mark h1 { margin: 0; line-height: 0; }
+.rt-lockup { display: block; height: 22px; width: auto; }
+.rt-version { display: flex; align-items: center; color: var(--muted-foreground); font: 12px/20px var(--font-mono); font-variant-numeric: tabular-nums; }
+/* The wordmark is centred on its capitals; the version's text is trimmed to its own, so the two share one middle, not the line box's. */
+.rt-version-text { display: block; text-box: trim-both cap alphabetic; }
+.rt-version .rt-tag { display: flex; align-items: center; height: 18px; }
+.rt-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.rt-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.rt-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; padding-left: calc(var(--depth, 0) * 20px); }
+.rt-row-main { display: flex; flex: 1; align-items: center; gap: 3px; min-width: 0; height: 32px; padding: 0 12px 0 5px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); text-align: left; cursor: pointer; }
+.rt-row-main:hover, .rt-row-main:focus-visible { background: var(--rt-ink-strong); color: var(--foreground); outline: none; }
+.rt-row-icon { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; }
+.rt-row-label { flex-shrink: 0; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground); }
+.rt-row-note { flex: 1; min-width: 0; padding-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 11px; color: var(--muted-foreground); }
+.rt-tag { flex-shrink: 0; margin-left: 8px; padding: 0 7px; border-radius: 999px; background: var(--rt-ink-strong); color: var(--muted-foreground); font-size: 11px; line-height: 18px; }
+.rt-tag.is-failed { color: var(--destructive); }
+/* As on the bar's tabs: pointing at a row turns its icon into its ×, in the very same box, with the same small bounce. */
+.rt-row-forget { position: absolute; left: calc(var(--depth, 0) * 20px + 5px); top: 5px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--foreground); cursor: pointer; opacity: 0; transform: scale(.5); pointer-events: none; }
+.rt-row-icon, .rt-row-forget { transition: transform .26s cubic-bezier(.3, 1.6, .4, 1), opacity .08s; }
+.rt-row:hover .rt-row-main .rt-row-icon, .rt-row:has(:focus-visible) .rt-row-main .rt-row-icon { opacity: 0; transform: scale(.5); }
+.rt-row:hover .rt-row-forget, .rt-row:has(:focus-visible) .rt-row-forget { opacity: 1; transform: none; pointer-events: auto; }
+.rt-row-forget:hover { background: var(--rt-ink-strong); }
+@media (prefers-reduced-motion: reduce) { .rt-row-icon, .rt-row-forget { transition: none; } }
+.rt-row-error { flex-basis: 100%; margin: 2px 0 6px 30px; color: var(--destructive); font-size: 12px; white-space: pre-wrap; }
+.rt-empty { padding: 6px 30px; color: var(--muted-foreground); }
+.rt-add { position: relative; margin-top: 12px; }
+.rt-add-field { display: flex; align-items: center; gap: 3px; height: 36px; padding: 0 4px 0 6px; border: 1px solid transparent; border-radius: 999px; background: var(--rt-ink); }
+.rt-add-field:focus-within { border-color: var(--border); }
+.rt-add-field input { flex: 1; min-width: 0; height: 100%; padding: 0 6px 0 0; border: 0; background: transparent; outline: none; }
+.rt-add-field input::placeholder { color: var(--muted-foreground); }
+.rt-add-go, .rt-add-browse { flex-shrink: 0; height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); cursor: pointer; }
+/* Add is always there, a round icon button at the field's end: the ink's when a path is typed, quiet until then. */
+.rt-add-go { display: grid; place-items: center; width: 26px; padding: 0; background: var(--primary); color: var(--primary-foreground); }
+.rt-add-go:disabled { background: var(--rt-ink-strong); color: var(--muted-foreground); cursor: default; }
+.rt-add-browse:hover { background: var(--rt-ink-strong); color: var(--foreground); }
+.rt-suggest { position: absolute; z-index: 2; left: 0; right: 0; top: 40px; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 4px; list-style: none; border-radius: 18px; background: var(--desk); box-shadow: 0 12px 32px -12px color-mix(in oklch, black 45%, transparent); }
+.rt-suggest button { display: flex; align-items: center; gap: 3px; width: 100%; height: 28px; padding: 0 10px 0 3px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); text-align: left; cursor: pointer; }
+.rt-suggest button:hover, .rt-suggest button.is-active { background: var(--rt-ink-strong); color: var(--foreground); }
+.rt-suggest .rt-tag { margin-left: auto; }
+.rt-browse { display: flex; flex-direction: column; height: min(480px, 60vh); overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--background); }
+.rt-error { margin: 8px 0 0; padding: 0 12px; color: var(--destructive); font-size: 12px; }
+.rt-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--foreground); color: var(--background); font-size: 12px; }
+.rt-toast button { height: 24px; padding: 0 12px; border: 0; border-radius: 999px; background: color-mix(in oklch, var(--background) 20%, transparent); color: inherit; font-weight: 500; cursor: pointer; }
+
+/* ---- the setup wizard: one card of a fixed size, a step at a time ---- */
+.sw-card { display: flex; flex-direction: column; width: min(520px, 100%); height: min(440px, calc(100dvh - 32px)); border-radius: 22px; background: var(--background); border: 1px solid var(--border); overflow: hidden; }
+.sw-gone { height: auto; padding: 24px; gap: 16px; align-items: flex-start; }
+.sw-gone p { margin: 0; }
+.sw-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 12px; }
+.sw-head > svg, .rt-mark > svg { flex-shrink: 0; }
+.sw-head-text { min-width: 0; }
+.sw-head h1 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
+.sw-head p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); font-size: 12px; font-family: var(--font-mono); }
+.sw-steps { display: flex; gap: 4px; margin: 0; padding: 0 24px 12px; list-style: none; border-bottom: 1px solid var(--border); }
+.sw-steps li { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 3px; border-radius: 999px; color: var(--muted-foreground); font-size: 12px; }
+.sw-steps li.is-here { background: color-mix(in oklch, var(--foreground) 8%, transparent); color: var(--foreground); }
+.sw-step-dot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: color-mix(in oklch, var(--foreground) 8%, transparent); font-size: 11px; font-variant-numeric: tabular-nums; }
+.sw-steps li.is-here .sw-step-dot { background: var(--primary); color: var(--primary-foreground); }
+.sw-steps li.is-done .sw-step-dot { background: color-mix(in oklch, var(--primary) 25%, transparent); color: var(--foreground); }
+.sw-body { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px; }
+.sw-label { display: block; font-weight: 600; }
+.sw-summary { margin: 2px 0 14px; color: var(--muted-foreground); }
+.sw-input { width: 100%; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in oklch, var(--foreground) 4%, transparent); color: var(--foreground); font: inherit; font-family: var(--font-mono); outline: none; }
+.sw-input:focus { border-color: var(--primary); }
+.sw-input.is-wrong { border-color: var(--destructive); }
+.sw-hint { margin: 6px 14px 0; font-size: 12px; color: var(--muted-foreground); }
+.sw-hint.is-wrong { color: var(--destructive); }
+.sw-review { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
+.sw-review > div { display: contents; }
+.sw-review dt { color: var(--muted-foreground); }
+.sw-review dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.sw-error { margin: 12px 0 0; color: var(--destructive); font-size: 12px; white-space: pre-wrap; }
+.sw-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
+.sw-gap { flex: 1; }
+.sw-busy { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }
+.sw-button { flex-shrink: 0; white-space: nowrap; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: color-mix(in oklch, var(--foreground) 8%, transparent); color: var(--foreground); font: inherit; cursor: pointer; }
+.sw-button.is-quiet { background: transparent; color: var(--muted-foreground); }
+.sw-button.is-quiet:hover { color: var(--foreground); background: color-mix(in oklch, var(--foreground) 6%, transparent); }
+.sw-button.is-primary { background: var(--primary); color: var(--primary-foreground); font-weight: 500; }
+.sw-button:disabled { opacity: .5; cursor: default; }
+@media (max-width: 560px) { .rt-row-note { display: none; } }
+.sw-button:focus-visible, .rt-add-go:focus-visible, .rt-add-browse:focus-visible, .rt-row-forget:focus-visible, .rt-toast button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+}

package/src/gui/theme.ts

@@ -1,12 +1,16 @@
-// Light or dark: the system decides unless a choice is remembered in this
-// browser. The stylesheet follows prefers-color-scheme by itself; a choice
-// is a data-theme attribute on the root element, set before the first paint.
+// Light or dark: the system decides unless voss's settings choose one, which
+// this browser remembers. The stylesheet follows prefers-color-scheme by
+// itself; a choice is a data-theme attribute on the root element, set before
+// the first paint from what was remembered.
 export type Theme = "light" | "dark" | "system";
 export const themeKey = "babavoss.theme";
-
-/** Runs in the head of every page, before anything paints: a remembered choice never flashes the other theme. */
+/** Runs in the head of every page, before anything paints: voss's theme as this browser last saw it, so a page never flashes the other theme. */
 export const early = `try{var t=localStorage.getItem(${JSON.stringify(themeKey)});if(t==="light"||t==="dark")document.documentElement.dataset.theme=t}catch(e){}`;
 
+/** The desk's colour, light and dark, as theme.css has it: inline in every page's head, so the first paint is the desk's colour before the stylesheet arrives, never the browser's white. */
+export const deskColors = { light: "#ECE4D8", dark: "#151312" } as const;
+export const firstPaint = `html{background:${deskColors.light};color-scheme:light dark}@media (prefers-color-scheme:dark){html:not([data-theme="light"]){background:${deskColors.dark}}}html[data-theme="dark"]{background:${deskColors.dark}}`;
+
 export function theme(): Theme {
   try {
     const v = localStorage.getItem(themeKey);

package/src/gui/voss-settings.ts

@@ -0,0 +1,48 @@
+// voss's own settings, the person's, as every page holds them: read from
+// /api/settings when the page opens and again when its window comes back to
+// the front, so a change made in another tab arrives; one copy per page,
+// shared by whatever reads it. The theme is applied to the whole page, and
+// remembered in this browser so the next page paints in it at once.
+import { useEffect, useSyncExternalStore } from "react";
+import { apiHeaders } from "babavoss/web";
+import type { VossSettings } from "../server/messages.ts";
+import type { KeyChanges } from "../desktop/keys.ts";
+import { setTheme } from "./theme.ts";
+
+let current: VossSettings | null = null;
+/** Saves so far: a read begun before the last of them answers with what it was, and is dropped, so a save is never undone by an older read. */
+let saves = 0;
+const listeners = new Set<() => void>();
+const publish = (s: VossSettings) => { current = s; setTheme(s.theme); for (const l of listeners) l(); };
+
+async function fetchSettings(): Promise<void> {
+  const at = saves;
+  try {
+    const r = await fetch("/api/settings", { headers: apiHeaders() });
+    if (r.ok) { const s = await r.json() as VossSettings; if (at === saves) publish(s); }
+  } catch { /* asked again when the window comes back */ }
+}
+
+/** Changes voss's settings; refused with the daemon's reason, a key that is not one or that two commands would share. */
+export async function saveSettings(change: { theme?: VossSettings["theme"]; keys?: KeyChanges }): Promise<VossSettings> {
+  saves++;
+  const r = await fetch("/api/settings", { method: "POST", headers: { "content-type": "application/json", ...apiHeaders() }, body: JSON.stringify(change) });
+  const j = await r.json() as VossSettings & { error?: { message: string } };
+  if (!r.ok || j.error) throw new Error(j.error?.message ?? r.statusText);
+  publish(j);
+  return j;
+}
+
+let watching = 0;
+/** voss's settings, null until they arrive; the page keeps them current while anything reads them. */
+export function useVossSettings(): VossSettings | null {
+  useEffect(() => {
+    if (watching++ === 0) {
+      void fetchSettings();
+      addEventListener("focus", onFront); document.addEventListener("visibilitychange", onFront);
+    }
+    return () => { if (--watching === 0) { removeEventListener("focus", onFront); document.removeEventListener("visibilitychange", onFront); } };
+  }, []);
+  return useSyncExternalStore((l) => { listeners.add(l); return () => listeners.delete(l); }, () => current);
+}
+const onFront = () => { if (document.visibilityState === "visible") void fetchSettings(); };

package/src/gui/wizard.tsx

@@ -1,9 +1,8 @@
-// The New baba app, at voss's root: a folder browser and, in the folder
-// chosen, a baba made, or one already there remembered or opened. A list
-// moved by the keyboard as much as by the pointer: arrows move, Enter goes
-// into a folder, Backspace up, Cmd/Ctrl Enter makes. The daemon answers:
-// /api/dirs for a directory's folders, /api/projects/add to remember a baba
-// or make one.
+// The folder browser of voss's root, behind its Browse: it points at a folder
+// to add, and the picker adds it, a baba there or one to set up. A list moved
+// by the keyboard as much as by the pointer: arrows move, Enter goes into a
+// folder, Backspace up, Cmd/Ctrl Enter picks. The daemon answers /api/dirs
+// with a directory's folders. Also the helpers the root's pages share.
 import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { apiHeaders } from "babavoss/web";
 
@@ -17,7 +16,7 @@ export const getJson = async <T,>(path: string): Promise<T> => {
   if (!r.ok || j.error) throw new Error(j.error?.message ?? r.statusText);
   return j;
 };
-const postJson = async <T,>(path: string, body: unknown): Promise<T> => {
+export const postJson = async <T,>(path: string, body: unknown): Promise<T> => {
   const r = await fetch(path, { method: "POST", headers: { "content-type": "application/json", ...apiHeaders() }, body: JSON.stringify(body) });
   const j = await r.json() as T & { error?: { message: string } };
   if (!r.ok || j.error) throw new Error(j.error?.message ?? r.statusText);
@@ -35,8 +34,6 @@ export const short = (path: string, home: string, max = 52) => {
   for (let keep = 3; keep >= 1; keep--) { const s = `${head}/…/${parts.slice(-keep).join("/")}`; if (s.length <= max || keep === 1) return s; }
   return t;
 };
-/** A directory's name as a baba's name: what `voss init` would choose. */
-const slug = (s: string) => s.toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "");
 const isTyping = (e: KeyboardEvent) => e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement;
 
 // ---- glyphs: drawn here, 16 on a 16 grid, in the current colour ------------
@@ -60,16 +57,13 @@ function useInView(list: React.RefObject<HTMLElement | null>, active: number) {
 
 // ---- the folder picker ---------------------------------------------------
 
-/** The wizard: from `start`, or the daemon's own choice of folder; `onOpened` with the baba's name once it is made, remembered or found; `onBack` on Escape. */
-export function Folders({ home, start, onBack, onOpened, onVerb }: { home: string; start?: string; onBack: () => void; onOpened: (name: string) => void; onVerb?: (verb: string) => void }) {
+/** The browser: from `start`, or the user's home; `pick` with the folder chosen; `onBack` on Escape. */
+export function Folders({ home, start, onBack, pick }: { home: string; start?: string; onBack: () => void; pick: (dir: string) => void }) {
   const [at, setAt] = useState<Browsed | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [busy, setBusy] = useState<string | null>(null);
   const [filter, setFilter] = useState("");
   const [active, setActive] = useState(0);
-  const [name, setName] = useState("");
-  const [title, setTitle] = useState("");
   const list = useRef<HTMLOListElement>(null);
   const filterRef = useRef<HTMLInputElement>(null);
   const homeDir = at?.home || home;
@@ -80,8 +74,7 @@ export function Folders({ home, start, onBack, onOpened, onVerb }: { home: strin
       // Coming up out of a folder, the folder left is the one the keys are on.
       const from = at?.path;
       const back = from ? b.dirs.findIndex((d) => d.path === from) : -1;
-      setAt(b); setError(null); setFilter(""); setName(""); setTitle("");
-      onVerb?.(b.known ? "open" : b.baba ? "remember" : "make");
+      setAt(b); setError(null); setFilter("");
       // The filter keeps the keys: whatever is typed next narrows the folders here.
       if (!(document.activeElement instanceof HTMLInputElement) || document.activeElement === filterRef.current) filterRef.current?.focus();
       setActive(back >= 0 ? back + (b.parent ? 1 : 0) : 0);
@@ -99,25 +92,15 @@ export function Folders({ home, start, onBack, onOpened, onVerb }: { home: strin
   const cur = Math.min(active, Math.max(0, rows.length - 1));
   useInView(list, cur);
 
-  const act = async () => {
-    if (!at || busy) return;
-    if (at.known) { const p = await getJson<{ projects: Project[] }>("/api/projects"); const own = p.projects.find((x) => x.dir === at.path); if (own) onOpened(own.name); return; }
-    const init = !at.baba;
-    setBusy(init ? "Making the baba and installing its packages…" : "Opening the baba…");
-    setError(null);
-    try {
-      const made = await postJson<{ name: string }>("/api/projects/add", { dir: at.path, init, ...(name.trim() ? { name: name.trim() } : {}), ...(title.trim() ? { title: title.trim() } : {}) });
-      onOpened(made.name);
-    } catch (e) { setError(String(e instanceof Error ? e.message : e)); setBusy(null); }
-  };
+  const act = () => { if (at && !at.known) pick(at.path); };
   const enter = (i: number) => { const r = rows[i]; if (r) walk(r.kind === "up" ? r.path : r.d.path); };
 
   useEffect(() => {
     const key = (e: KeyboardEvent) => {
       // The shell's launcher has the keys while it is open over the wizard.
-      if (busy || document.querySelector(".desktop-launcher")) return;
+      if (document.querySelector(".desktop-launcher")) return;
       const inField = isTyping(e) && e.target !== filterRef.current;
-      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); void act(); return; }
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); act(); return; }
       if (e.key === "Escape") { e.preventDefault(); if (inField) (e.target as HTMLElement).blur(); else if (filter) setFilter(""); else onBack(); return; }
       if (inField) return;
       if (e.key === "ArrowDown") { e.preventDefault(); setActive(Math.min(rows.length - 1, cur + 1)); }
@@ -141,12 +124,11 @@ export function Folders({ home, start, onBack, onOpened, onVerb }: { home: strin
   // Deep paths keep their first crumb and the last three; the ones between fold into one that goes to the nearest of them.
   const shown = crumbs.length > 5 ? [crumbs[0]!, { label: "…", path: crumbs[crumbs.length - 4]!.path }, ...crumbs.slice(-3)] : crumbs;
   const here = at ? short(at.path, homeDir, 44) : "";
-  const leaf = at ? at.path.split("/").filter(Boolean).pop() ?? "" : "";
 
   return (
     <div className="pk-pane pk-fade">
       <header className="pk-strip">
-        <span className="pk-strip-title">New baba</span>
+        <span className="pk-strip-title">Choose a folder</span>
         <span className="pk-gap" />
         {loading && <Spinner />}
       </header>
@@ -193,19 +175,14 @@ export function Folders({ home, start, onBack, onOpened, onVerb }: { home: strin
           <span className="pk-dock-icon">{at?.baba ? <BabaGlyph /> : <FolderGlyph />}</span>
           <span className="pk-dock-text">
             {!at ? "…" : at.known ? <>Voss already knows the baba in <span className="pk-here" title={at?.path}>{here}</span>.</>
-              : at.baba ? <>There is a baba in <span className="pk-here" title={at?.path}>{here}</span>. Remember it to open it here.</>
-              : <>A new baba goes in <span className="pk-here" title={at?.path}>{here}</span>, as <code>.baba/</code> beside what is there.</>}
+              : at.baba ? <>There is a baba in <span className="pk-here" title={at?.path}>{here}</span>. Add it to the list.</>
+              : <>There is no baba in <span className="pk-here" title={at?.path}>{here}</span> yet: added, it is set up first.</>}
           </span>
         </div>
         <div className="pk-dock-line">
-          {at && !at.baba && <>
-            <label className="pk-field"><span>Name</span><input value={name} placeholder={slug(leaf) || "baba"} spellCheck={false} disabled={!!busy} onChange={(e) => setName(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); void act(); } }} /></label>
-            <label className="pk-field is-wide"><span>Title</span><input value={title} placeholder={name.trim() || slug(leaf) || "baba"} disabled={!!busy} onChange={(e) => setTitle(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); void act(); } }} /></label>
-          </>}
-          {busy && <span className="pk-busy"><Spinner />{busy}</span>}
           <span className="pk-gap" />
-          <button type="button" className="pk-primary" disabled={!at || !!busy || loading} onClick={() => void act()}>
-            {!at ? "Make a baba here" : at.known ? "Open it" : at.baba ? "Remember this baba" : "Make a baba here"}
+          <button type="button" className="pk-primary" disabled={!at || loading || at.known} onClick={act}>
+            {at?.known ? "Already in the list" : "Add this folder"}
             <kbd className="pk-kbd is-on-primary">⌘↵</kbd>
           </button>
         </div>