catherd-cli 0.1.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catherd-cli",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Herds coding agents: autopilot builds from your own Claude Code session.",
   "license": "MIT",
   "repository": {

package/plugin/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "catherd",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Herds coding agents: Claude plans and verifies, Codex and opencode workers write the code, and Jev picks the model and effort for each piece.",
   "author": {
     "name": "47vigen",

package/plugin/.mcp.json

@@ -2,7 +2,7 @@
   "mcpServers": {
     "catherd": {
       "command": "bunx",
-      "args": ["catherd-cli@0.1.0", "mcp"]
+      "args": ["catherd-cli@0.2.1", "mcp"]
     }
   }
 }

package/plugin/skills/catherd/SKILL.md

@@ -223,7 +223,7 @@ The brief is the `brief` text you pass to `dispatch` (catherd writes it to `R/ro
 4. For a worker:
    - "Read `<R>/lanes/Mx.Ly.md`": decisions, signatures, data shapes;
    - its fast check, to run until it passes;
-   - "Run the full suite only if this brief says so", and "Wrap any full build or full test suite in `npx -y catherd lock -- <command>`": other lanes share the machine.
+   - "Run the full suite only if this brief says so", and "Wrap any full build or full test suite in `bunx catherd-cli@0.2.1 lock -- <command>`": other lanes share the machine.
 5. For a reviewer: the A-lines and the changed files, with new files read in full. It reports every finding as `BLOCKER|BUG|NIT file:line — problem — fix`, covering:
    - unmet A-lines and edge cases;
    - code or abstractions nobody needs;

package/src/mcp/preflight.ts

@@ -2,7 +2,7 @@ import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { join } from "node:path";
 import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { z } from "zod";
-import { fastCheckOf } from "../core/lanes.ts";
+import { fastCheckOf, ownedFilesOf } from "../core/lanes.ts";
 import { acquire, resolveSlots } from "../core/lock.ts";
 import { json } from "./out.ts";
 import { findRun } from "./runs.ts";
@@ -13,6 +13,7 @@ interface PreflightResult {
   lane: string;
   check: string;
   pass: boolean;
+  skipped?: boolean;
   tail: string[];
 }
 
@@ -57,6 +58,20 @@ export function registerPreflight(server: McpServer): void {
             results.push({ lane, check: "", pass: false, tail: [`lanes/${f} has no "Fast check:" line`] });
             continue;
           }
+          // A check on a file the lane itself creates cannot run on the base tree; that is expected.
+          const unborn = ownedFilesOf(text).filter(
+            (p) => check.includes(p) && !existsSync(join(run.meta.repo, p)),
+          );
+          if (unborn.length > 0) {
+            results.push({
+              lane,
+              check,
+              pass: true,
+              skipped: true,
+              tail: [`skipped: ${unborn.join(", ")} does not exist yet; the lane creates it`],
+            });
+            continue;
+          }
           const r = await runCheck(run.meta.repo, check);
           results.push({ lane, check, ...r });
         }

package/src/profile/agents.ts

@@ -116,3 +116,15 @@ export function saveProfileAndAgents(
   saveProfile(p);
   return r;
 }
+
+/** Read-only count of catherd's own symlinks in `claudeAgentsDir()`, for the dashboard's
+ * "Claude agents" status row — unlike `writeClaudeAgents`, this never touches the filesystem. */
+export function countLinkedAgents(): number {
+  const target = claudeAgentsDir();
+  const ours = `${join(configDir(), "agents")}${sep}`;
+  if (!lstatOrNull(target)) return 0;
+  return readdirSync(target).filter((name) => {
+    const st = lstatOrNull(join(target, name));
+    return st?.isSymbolicLink() && readlinkSync(join(target, name)).startsWith(ours);
+  }).length;
+}

package/src/profile/role-prompts.ts

@@ -1,4 +1,5 @@
 import type { Role } from "../types.ts";
+import { VERSION } from "../version.ts";
 
 const READ_ONLY = ["Write", "Edit", "NotebookEdit", "Agent"];
 const WRITES = ["Agent"];
@@ -66,7 +67,7 @@ const worker = [
   "",
   `Read your lane file first. ${RUN_FILES} If the project has a CLAUDE.md or AGENTS.md, follow it.`,
   "",
-  "Change only the files you own. Run your fast check until it passes. Run the full suite only if the brief says so, and wrap any full build or full test suite in: npx -y catherd lock -- <command>. Other lanes share this machine.",
+  `Change only the files you own. Run your fast check until it passes. Run the full suite only if the brief says so, and wrap any full build or full test suite in: bunx catherd-cli@${VERSION} lock -- <command>. Other lanes share this machine.`,
   "",
   REPLY,
 ].join("\n");

package/src/routing/jev.ts

@@ -1,4 +1,5 @@
 import { chmodSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { homedir } from "node:os";
 import { join } from "node:path";
 import { createFetch } from "ofetch";
 import { z } from "zod";
@@ -89,16 +90,19 @@ const Reply = z.object({
 
 const credentialsFile = () => join(configDir(), "credentials.json");
 
+/** The key file TypeSafe's own tools use, so a user who already has one never types it again. */
+export const typesafeKeyFile = (): string =>
+  join(process.env.XDG_CONFIG_HOME || join(homedir(), ".config"), "typesafe", "api_key");
+
 export function jevKey(): string | null {
   const env = process.env.TYPESAFE_API_KEY?.trim();
   if (env) return env;
-  if (!existsSync(credentialsFile())) return null;
   try {
     const k: unknown = JSON.parse(readFileSync(credentialsFile(), "utf8")).typesafeApiKey;
-    return typeof k === "string" && k.trim() ? k.trim() : null;
-  } catch {
-    return null;
-  }
+    if (typeof k === "string" && k.trim()) return k.trim();
+  } catch {}
+  if (!existsSync(typesafeKeyFile())) return null;
+  return readFileSync(typesafeKeyFile(), "utf8").trim() || null;
 }
 
 export function saveJevKey(key: string): void {

package/src/tui/commands.ts

@@ -2,7 +2,7 @@ import { createCliRenderer } from "@opentui/core";
 import { createRoot } from "@opentui/react";
 import { defineCommand } from "citty";
 import { createElement, type ReactNode } from "react";
-import { Editor } from "./editor.tsx";
+import { Dashboard } from "./dashboard.tsx";
 import { Init } from "./init.tsx";
 import { detectUi } from "./theme.ts";
 import { Watch } from "./watch.tsx";
@@ -27,10 +27,12 @@ export async function mount(el: ReactNode, stdin: { isTTY?: boolean } = process.
   return Number(process.exitCode ?? 0);
 }
 
-/** The main command's run. citty runs it after any subcommand too, hence the isBare check. */
+/** The main command's run. citty runs it after any subcommand too, hence the isBare check.
+ * Bare `catherd` opens the dashboard; Profile/Watch/Setup from there render Editor/Watch/Init
+ * inline, in the same mounted tree — see dashboard.tsx. */
 export async function editorRun({ rawArgs }: { rawArgs: string[] }): Promise<void> {
   if (!isBare(rawArgs)) return;
-  process.exitCode = await mount(createElement(Editor, { ui: detectUi(rawArgs) }));
+  process.exitCode = await mount(createElement(Dashboard, { ui: detectUi(rawArgs) }));
 }
 
 export const initCommand = defineCommand({

package/src/tui/dashboard.tsx

@@ -0,0 +1,245 @@
+import { readFileSync } from "node:fs";
+import { TextAttributes } from "@opentui/core";
+import { useKeyboard, useRenderer } from "@opentui/react";
+import { useEffect, useState } from "react";
+import { countLinkedAgents } from "../profile/agents.ts";
+import { activeProfileName } from "../profile/profile.ts";
+import { loadCatalog } from "../routing/catalog.ts";
+import { jevKey } from "../routing/jev.ts";
+import type { Catalog } from "../types.ts";
+import { type BackendStatus, detectBackends } from "./backends.ts";
+import { Editor } from "./editor.tsx";
+import { Init } from "./init.tsx";
+import { dot, type DotState, dotTint, glyph, type Mood, tint, type Ui } from "./theme.ts";
+import { DetailPane, Frame, ListLine, Wordmark } from "./ui.tsx";
+import { Watch } from "./watch.tsx";
+
+export interface DashboardDeps {
+  detectBackends: () => Promise<BackendStatus[]>;
+  jevKey: () => string | null;
+  loadCatalog: () => Catalog;
+  countLinkedAgents: () => number;
+  activeProfileName: () => string;
+  version: string;
+}
+
+function readVersion(): string {
+  try {
+    const pkg = JSON.parse(readFileSync(new URL("../../package.json", import.meta.url), "utf8")) as {
+      version: string;
+    };
+    return pkg.version;
+  } catch {
+    return "0.0.0";
+  }
+}
+
+const dashboardDeps: DashboardDeps = {
+  detectBackends,
+  jevKey,
+  loadCatalog,
+  countLinkedAgents,
+  activeProfileName,
+  version: readVersion(),
+};
+
+type Screen = "dashboard" | "profile" | "watch" | "setup";
+
+interface Action {
+  screen: Screen | "refresh" | "exit";
+  label: string;
+  subtitle: string;
+  description: string;
+}
+
+const ACTIONS: Action[] = [
+  {
+    screen: "profile",
+    label: "Profile",
+    subtitle: "roles, routing, budget",
+    description: "Edit which models fill each role, and how catherd escalates between them.",
+  },
+  {
+    screen: "watch",
+    label: "Watch runs",
+    subtitle: "live and recent runs",
+    description: "See what is running now, and how past runs went.",
+  },
+  {
+    screen: "setup",
+    label: "Setup",
+    subtitle: "Jev key & backends",
+    description: "Re-run first-time setup: the Jev key, Codex/opencode, and a starting profile.",
+  },
+  {
+    screen: "refresh",
+    label: "Refresh catalog",
+    subtitle: "reload models & scores",
+    description: "Re-read the model catalog from disk, in case it changed underneath catherd.",
+  },
+  {
+    screen: "exit",
+    label: "Exit",
+    subtitle: "quit catherd",
+    description: "Leave catherd without changing anything.",
+  },
+];
+
+interface Status {
+  backends: BackendStatus[];
+  jev: boolean;
+  agents: number;
+  active: string;
+}
+
+function backendState(b: BackendStatus | undefined, plain: boolean): { state: DotState; text: string } {
+  if (!b || !b.installed) return { state: "missing", text: "not installed" };
+  if (!b.loggedIn) {
+    return {
+      state: "warn",
+      text: b.version ? `${b.version} ${glyph("dot", plain)} not logged in` : "not logged in",
+    };
+  }
+  return { state: "ready", text: b.version ?? "ready" };
+}
+
+function StatusRow({ ui, state, name, value }: { ui: Ui; state: DotState; name: string; value: string }) {
+  return (
+    <text wrapMode="none" truncate>
+      <span fg={dotTint(state, ui.depth)}>{dot(state, ui.plain)}</span> {name.padEnd(16)}
+      <span attributes={TextAttributes.DIM}>{value}</span>
+    </text>
+  );
+}
+
+function mood(status: Status | null): Mood {
+  if (!status) return "working";
+  const trouble = status.backends.some((b) => !b.installed || !b.loggedIn) || !status.jev;
+  return trouble ? "waiting" : "good";
+}
+
+/** The bare `catherd` screen: an actions menu on the left, and the selected action's detail
+ * plus a live status snapshot on the right. Selecting Profile/Watch/Setup swaps this same
+ * mounted tree for that screen, in place — no new process, no re-mount of the renderer. */
+export function Dashboard({ ui, deps = {} }: { ui: Ui; deps?: Partial<DashboardDeps> }) {
+  const d = { ...dashboardDeps, ...deps };
+  const renderer = useRenderer();
+  const [cursor, setCursor] = useState(0);
+  const [status, setStatus] = useState<Status | null>(null);
+  const [screen, setScreen] = useState<Screen>("dashboard");
+  const [note, setNote] = useState("");
+
+  const refresh = () => {
+    d.detectBackends().then(
+      (backends) =>
+        setStatus({
+          backends,
+          jev: d.jevKey() !== null,
+          agents: d.countLinkedAgents(),
+          active: d.activeProfileName(),
+        }),
+      () => setStatus({ backends: [], jev: false, agents: 0, active: d.activeProfileName() }),
+    );
+  };
+
+  // spec: no new network calls on every keystroke — backends are probed once on mount, and
+  // again only when the user asks for it with `r`.
+  useEffect(refresh, []);
+
+  const activate = () => {
+    const a = ACTIONS[cursor];
+    if (!a) return;
+    if (a.screen === "exit") renderer.destroy();
+    else if (a.screen === "refresh") {
+      d.loadCatalog();
+      setNote("Catalog reloaded.");
+    } else setScreen(a.screen);
+  };
+
+  useKeyboard((key) => {
+    if (screen !== "dashboard") return;
+    if (key.name === "up") setCursor((v) => Math.max(0, v - 1));
+    else if (key.name === "down") setCursor((v) => Math.min(ACTIONS.length - 1, v + 1));
+    else if (key.name === "return") activate();
+    else if (key.sequence === "r") refresh();
+    else if (key.sequence === "q") renderer.destroy();
+  });
+
+  if (screen === "profile") return <Editor ui={ui} />;
+  if (screen === "watch") return <Watch ui={ui} />;
+  if (screen === "setup") return <Init ui={ui} />;
+
+  const a = ACTIONS[cursor] as Action;
+  const codex = status
+    ? backendState(
+        status.backends.find((b) => b.backend === "codex"),
+        ui.plain,
+      )
+    : null;
+  const opencode = status
+    ? backendState(
+        status.backends.find((b) => b.backend === "opencode"),
+        ui.plain,
+      )
+    : null;
+
+  return (
+    <Frame
+      ui={ui}
+      title="catherd"
+      hint={`${glyph("keys", ui.plain)} navigate   Enter open   r refresh   q exit`}
+      above={<Wordmark ui={ui} mood={mood(status)} suffix={d.version} />}
+    >
+      <box style={{ flexDirection: "row" }}>
+        <box style={{ flexDirection: "column", width: 22 }}>
+          <text fg={tint("pink", ui.depth)} attributes={TextAttributes.BOLD}>
+            ACTIONS
+          </text>
+          {ACTIONS.map((act, i) => (
+            <ListLine key={act.label} ui={ui} selected={i === cursor} text={act.label} />
+          ))}
+        </box>
+        <DetailPane ui={ui} heading="SELECTED ACTION" title={a.label} subtitle={a.subtitle}>
+          <text attributes={TextAttributes.DIM} wrapMode="word">
+            {a.description}
+          </text>
+          <text> </text>
+          <text fg={tint("pink", ui.depth)} attributes={TextAttributes.BOLD}>
+            CURRENT SETUP
+          </text>
+          {status ? (
+            <>
+              <StatusRow
+                ui={ui}
+                state={status.jev ? "ready" : "missing"}
+                name="Jev key"
+                value={status.jev ? "set" : "missing"}
+              />
+              <StatusRow ui={ui} state={codex?.state ?? "missing"} name="Codex" value={codex?.text ?? ""} />
+              <StatusRow
+                ui={ui}
+                state={opencode?.state ?? "missing"}
+                name="opencode"
+                value={opencode?.text ?? ""}
+              />
+              <StatusRow
+                ui={ui}
+                state={status.agents > 0 ? "ready" : "warn"}
+                name="Claude agents"
+                value={`${status.agents} linked`}
+              />
+              <StatusRow ui={ui} state="ready" name="Active profile" value={status.active} />
+            </>
+          ) : (
+            <text attributes={TextAttributes.DIM}>checking…</text>
+          )}
+          {note ? (
+            <text fg={tint("pink", ui.depth)} wrapMode="none" truncate>
+              {note}
+            </text>
+          ) : null}
+        </DetailPane>
+      </box>
+    </Frame>
+  );
+}

package/src/tui/editor.tsx

@@ -1,4 +1,3 @@
-import { TextAttributes } from "@opentui/core";
 import { useKeyboard, useRenderer } from "@opentui/react";
 import { useEffect, useState } from "react";
 import { type HarnessCost, harnessCosts } from "../core/harness.ts";
@@ -13,10 +12,10 @@ import {
 import { loadCatalog } from "../routing/catalog.ts";
 import type { Catalog, Profile } from "../types.ts";
 import { type BackendStatus, detectBackends } from "./backends.ts";
-import { Matrix } from "./matrix.tsx";
+import { matrixHint, Matrix } from "./matrix.tsx";
 import { deleteProfile, nameError, saveAndActivate } from "./profiles.ts";
-import { face, glyph, type Mood, tint, type Ui } from "./theme.ts";
-import { CatSpinner, Header, Screen } from "./ui.tsx";
+import { glyph, tint, type Ui } from "./theme.ts";
+import { CatSpinner, Frame } from "./ui.tsx";
 
 export interface EditorDeps {
   loadCatalog: () => Catalog;
@@ -34,6 +33,9 @@ const editorDeps: EditorDeps = {
 
 type Ask = "new" | "copy" | "delete" | "quit" | null;
 
+const extraHint = (plain: boolean) =>
+  `p next profile ${glyph("dot", plain)} n new ${glyph("dot", plain)} c copy ${glyph("dot", plain)} x delete`;
+
 function openBook(): { profiles: Profile[]; idx: number } {
   const names = listProfiles();
   const profiles = names.length > 0 ? names.map((n) => loadProfile(n)) : [defaultProfile()];
@@ -60,9 +62,9 @@ export function Editor({ ui, deps = {} }: { ui: Ui; deps?: Partial<EditorDeps> }
   const [errors, setErrors] = useState<string[]>([]);
   const [note, setNote] = useState("");
   const [ask, setAsk] = useState<Ask>(null);
+  const [showHelp, setShowHelp] = useState(false);
   const profile = book.profiles[book.idx] as Profile;
   const pink = tint("pink", ui.depth);
-  const dot = ` ${glyph("dot", ui.plain)} `;
 
   useEffect(() => {
     d.detectBackends().then(setBackends, () => setBackends([]));
@@ -150,24 +152,18 @@ export function Editor({ ui, deps = {} }: { ui: Ui; deps?: Partial<EditorDeps> }
     }
   });
 
-  const mood: Mood =
-    backends === null
-      ? "working"
-      : errors.length > 0
-        ? "failed"
-        : dirty.has(profile.name)
-          ? "waiting"
-          : "good";
+  const sep = ` ${glyph("dot", ui.plain)} `;
+  const title = [
+    `profile ${profile.name}`,
+    `${book.idx + 1}/${book.profiles.length}`,
+    profile.name === active ? "active" : null,
+    dirty.has(profile.name) ? "unsaved" : null,
+  ]
+    .filter(Boolean)
+    .join(sep);
 
   return (
-    <Screen>
-      <Header ui={ui} mood={mood} title={`profiles${dot}${profile.name}`} />
-      <text wrapMode="none" truncate>
-        {`profile ${profile.name} ${book.idx + 1}/${book.profiles.length}${
-          profile.name === active ? " (active)" : ""
-        }${dirty.has(profile.name) ? " (unsaved)" : ""}`}
-        <span attributes={TextAttributes.DIM}>{`${dot}p next${dot}n new${dot}c copy${dot}x delete`}</span>
-      </text>
+    <Frame ui={ui} title={title} hint={matrixHint(ui, "save", showHelp, extraHint(ui.plain))}>
       {backends === null ? (
         <CatSpinner ui={ui} label="sniffing out codex and opencode" />
       ) : (
@@ -178,6 +174,7 @@ export function Editor({ ui, deps = {} }: { ui: Ui; deps?: Partial<EditorDeps> }
           catalog={catalog}
           backends={backends}
           costs={costs}
+          errors={errors}
           reloadCatalog={d.loadCatalog}
           onChange={put}
           onCatalog={setCatalog}
@@ -185,6 +182,7 @@ export function Editor({ ui, deps = {} }: { ui: Ui; deps?: Partial<EditorDeps> }
           onQuit={() => (dirty.size > 0 ? setAsk("quit") : exit())}
           onKey={onKey}
           active={ask === null}
+          onToggleHelp={() => setShowHelp((v) => !v)}
         />
       )}
       {ask === "new" || ask === "copy" ? (
@@ -206,16 +204,11 @@ export function Editor({ ui, deps = {} }: { ui: Ui; deps?: Partial<EditorDeps> }
           {`Unsaved changes in ${[...dirty].join(", ")}. q quits without saving, any other key stays.`}
         </text>
       ) : null}
-      {errors.map((e) => (
-        <text key={e} fg={pink} wrapMode="none" truncate>
-          {`${face("failed", ui.plain)} ${e}`}
-        </text>
-      ))}
       {note ? (
         <text wrapMode="none" truncate>
           {note}
         </text>
       ) : null}
-    </Screen>
+    </Frame>
   );
 }

package/src/tui/init.tsx

@@ -1,5 +1,5 @@
 import { TextAttributes } from "@opentui/core";
-import { useKeyboard, useRenderer } from "@opentui/react";
+import { useKeyboard, usePaste, useRenderer } from "@opentui/react";
 import { useRef, useState } from "react";
 import { type HarnessCost, harnessCosts } from "../core/harness.ts";
 import { listRuns } from "../core/runstore.ts";
@@ -8,10 +8,10 @@ import { loadCatalog } from "../routing/catalog.ts";
 import { jevKey, saveJevKey, testJevKey } from "../routing/jev.ts";
 import type { Catalog, Profile } from "../types.ts";
 import { type BackendStatus, detectBackends } from "./backends.ts";
-import { Matrix } from "./matrix.tsx";
+import { matrixHint, Matrix } from "./matrix.tsx";
 import { saveAndActivate } from "./profiles.ts";
-import { face, glyph, type Mood, tint, type Ui } from "./theme.ts";
-import { CatSpinner, Header, Intro, Screen } from "./ui.tsx";
+import { dot, glyph, tint, type Ui } from "./theme.ts";
+import { CatSpinner, Frame, Intro } from "./ui.tsx";
 
 export interface InitDeps {
   jevKey: () => string | null;
@@ -37,14 +37,17 @@ export const PLUGIN_STEPS = ["/plugin marketplace add 47vigen/catherd", "/plugin
 
 type Phase = "intro" | "key" | "testing" | "backends" | "matrix" | "done";
 
-const TITLES: Record<Phase, string> = {
-  intro: "",
-  key: "init 1/3: the Jev key",
-  testing: "init 1/3: the Jev key",
-  backends: "init 2/3: your backends",
-  matrix: "init 3/3: your profile",
-  done: "ready",
-};
+function title(phase: Phase, plain: boolean): string {
+  const dotSep = glyph("dot", plain);
+  return {
+    intro: "",
+    key: `Setup 1/3 ${dotSep} Jev key`,
+    testing: `Setup 1/3 ${dotSep} Jev key`,
+    backends: `Setup 2/3 ${dotSep} Backends`,
+    matrix: `Setup 3/3 ${dotSep} Your profile`,
+    done: `Setup ${dotSep} ready`,
+  }[phase];
+}
 
 function BackendLine({ ui, b }: { ui: Ui; b: BackendStatus }) {
   const ok = b.installed && b.loggedIn;
@@ -52,7 +55,7 @@ function BackendLine({ ui, b }: { ui: Ui; b: BackendStatus }) {
   const fix = b.fix ? ` ${glyph("dot", ui.plain)} fix: ${b.fix}` : "";
   return (
     <text wrapMode="none" truncate attributes={ok ? TextAttributes.NONE : TextAttributes.DIM}>
-      {`${glyph(ok ? "on" : "off", ui.plain)} ${b.backend.padEnd(9)}${(b.version ?? "").padEnd(9)}${state}${fix}`}
+      {`${dot(ok ? "ready" : "missing", ui.plain)} ${b.backend.padEnd(9)}${(b.version ?? "").padEnd(9)}${state}${fix}`}
     </text>
   );
 }
@@ -74,6 +77,7 @@ function MaskedKeyInput({ onSubmit }: { onSubmit: (key: string) => void }) {
       if (ch && ch.length === 1) setValue((v) => v + ch);
     }
   });
+  usePaste((e) => setValue((v) => v + new TextDecoder().decode(e.bytes).replace(/\s+/g, "")));
   return <text>{"*".repeat(value.length)}</text>;
 }
 
@@ -88,6 +92,7 @@ export function Init({ ui, deps = {} }: { ui: Ui; deps?: Partial<InitDeps> }) {
   const [profile, setProfile] = useState<Profile>(defaultProfile);
   const [backends, setBackends] = useState<BackendStatus[]>([]);
   const [errors, setErrors] = useState<string[]>([]);
+  const [showHelp, setShowHelp] = useState(false);
   const pink = tint("pink", ui.depth);
 
   // Any key finishes, once the "done" message has actually had a chance to sit on screen:
@@ -133,27 +138,13 @@ export function Init({ ui, deps = {} }: { ui: Ui; deps?: Partial<InitDeps> }) {
   };
 
   if (phase === "intro") {
-    return (
-      <Screen>
-        <Intro ui={ui} onDone={afterIntro} />
-      </Screen>
-    );
+    return <Intro ui={ui} onDone={afterIntro} />;
   }
 
-  const mood: Mood =
-    phase === "done"
-      ? "landed"
-      : errors.length > 0 || note
-        ? "failed"
-        : phase === "key"
-          ? "waiting"
-          : phase === "matrix"
-            ? "good"
-            : "working";
-
+  const hint =
+    phase === "matrix" ? matrixHint(ui, "accept", showHelp) : phase === "done" ? "press any key" : "";
   return (
-    <Screen>
-      <Header ui={ui} mood={mood} title={TITLES[phase]} />
+    <Frame ui={ui} title={title(phase, ui.plain)} hint={hint}>
       {phase === "key" ? (
         <box style={{ flexDirection: "column" }}>
           <text>Paste your TypeSafe API key. Jev uses it to pick each lane's model and effort.</text>
@@ -180,6 +171,7 @@ export function Init({ ui, deps = {} }: { ui: Ui; deps?: Partial<InitDeps> }) {
             catalog={catalog}
             backends={backends}
             costs={costs}
+            errors={errors}
             reloadCatalog={d.loadCatalog}
             onChange={(p) => {
               setProfile(p);
@@ -191,13 +183,8 @@ export function Init({ ui, deps = {} }: { ui: Ui; deps?: Partial<InitDeps> }) {
               process.exitCode = 1;
               renderer.destroy();
             }}
-            submitLabel="accept"
+            onToggleHelp={() => setShowHelp((v) => !v)}
           />
-          {errors.map((e) => (
-            <text key={e} fg={pink} wrapMode="none" truncate>
-              {`${face("failed", ui.plain)} ${e}`}
-            </text>
-          ))}
         </box>
       ) : null}
       {phase === "done" ? (
@@ -216,6 +203,6 @@ export function Init({ ui, deps = {} }: { ui: Ui; deps?: Partial<InitDeps> }) {
           {note}
         </text>
       ) : null}
-    </Screen>
+    </Frame>
   );
 }