catherd-cli 0.2.1 → 1.1.0

package/src/entry/tui/views/save-dialog.tsx

@@ -0,0 +1,332 @@
+import { useRenderer, useTerminalDimensions } from "@opentui/react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { errorMessage } from "../../../domain/errors.ts";
+import {
+  applyPatch,
+  type Change,
+  diffProfiles,
+  type ProfileDoc,
+  patchBetween,
+  resolveProfile,
+} from "../../../domain/profile.ts";
+import type { Validation } from "../../../domain/profile-rules.ts";
+import type { Effects } from "../effects.ts";
+import { useApp } from "../providers/app.tsx";
+import { useData, useLoad } from "../providers/data.tsx";
+import { useCommandLayer } from "../providers/keymap.tsx";
+import { useUi } from "../providers/theme.tsx";
+import { withStaged } from "../profile-tree.ts";
+import { type Dialog as DialogState, type Draft, isSaving } from "../state.ts";
+import { wrap } from "../text.ts";
+import { glyph } from "../theme.ts";
+import { Buttons } from "../widgets/dialog-confirm.tsx";
+import { Dialog, dialogRows } from "../widgets/dialog.tsx";
+import { Line, type Part } from "../widgets/line.tsx";
+
+type Save = Extract<DialogState, { kind: "save" }>;
+
+/** Said when a Save found the file changed since the dialog showed what saving would do. */
+const CHANGED_ON_DISK = "the profile changed on disk — check the changes and choose again";
+
+const show = (v: unknown): string =>
+  v === null || v === undefined ? "none" : Array.isArray(v) ? v.join(", ") : String(v);
+
+/** What saving a draft would do: the changed fields, staged treat-likes, issues, and agent changes. */
+export interface SavePreview {
+  changes: Change[];
+  treatLikes: [string, string][];
+  validation: Validation;
+  agentsAdded: string[];
+  agentsRemoved: string[];
+}
+
+/**
+ * The save is a patch over the file as it is when it is written (Ruling 7), so the preview applies the
+ * draft's patch to the file as it is now, not to the copy the draft began from.
+ */
+function previewSave(
+  d: Draft,
+  fx: Pick<Effects, "catalog" | "validate" | "agents" | "readProfile">,
+  now: ProfileDoc = fx.readProfile(d.name),
+): SavePreview {
+  const before = resolveProfile(now, d.name);
+  const after = resolveProfile(applyPatch(now, patchBetween(d.base, d.doc)), d.name);
+  const { catalog } = fx.catalog(after.billing);
+  const a = new Set(fx.agents(before));
+  const b = new Set(fx.agents(after));
+  return {
+    changes: diffProfiles(before, after),
+    treatLikes: Object.entries(d.treatLikes),
+    validation: fx.validate(after, withStaged(catalog, d.treatLikes)),
+    agentsAdded: [...b].filter((x) => !a.has(x)),
+    agentsRemoved: [...a].filter((x) => !b.has(x)),
+  };
+}
+
+/** A block of the save dialog: heading lines, then items of one or more lines each. */
+interface Section {
+  head: Part[][];
+  items: Part[][][];
+  /**
+   * How long the section holds on when rows run short (spec §9.2, Ruling 8):
+   * "filler" (changes, warnings, agent files) loses items first, then goes whole;
+   * "note" (what applies when) goes whole, never in part;
+   * "error" (validation errors) loses items only after both, and keeps its first;
+   * "failure" (why the last save failed) is never cut.
+   */
+  hold: "filler" | "note" | "error" | "failure";
+  /** the line that ends a cut section; "… and N more" when unset */
+  more?: (n: number) => string;
+}
+
+const HOLD = { filler: 0, note: 1, error: 2, failure: 3 } as const;
+
+/**
+ * The sections' lines in at most `rows` lines. Empty sections are left out. Over budget, in turn:
+ * the longest filler section loses its last item (a cut section ends with one muted "… and N more"
+ * line); filler and note sections go whole, the least-held first; error sections lose items down
+ * to their first; last, lines come off the end of every section but the failure, then the failure.
+ */
+export function fitSections(sections: Section[], rows: number): Part[][] {
+  const shown = sections.filter((s) => s.items.length > 0);
+  const keep = shown.map((s) => s.items.length);
+  const gone = shown.map(() => false);
+  const size = (i: number) => {
+    if (gone[i]) return 0;
+    const s = shown[i]!;
+    const body = s.items.slice(0, keep[i]).reduce((n, it) => n + it.length, 0);
+    return s.head.length + body + (keep[i]! < s.items.length ? 1 : 0);
+  };
+  const total = () => shown.reduce((n, _, i) => n + size(i), 0);
+  /** the largest live section `ok` accepts, or -1 */
+  const largest = (ok: (s: Section, i: number) => boolean) => {
+    let at = -1;
+    for (const [i, s] of shown.entries()) if (!gone[i] && ok(s, i) && (at < 0 || size(i) > size(at))) at = i;
+    return at;
+  };
+  for (let at; total() > rows && (at = largest((s, i) => s.hold === "filler" && keep[i]! > 0)) >= 0;)
+    keep[at]! -= 1;
+  for (const hold of ["filler", "note"] as const)
+    for (let at; total() > rows && (at = largest((s) => s.hold === hold)) >= 0;) gone[at] = true;
+  for (let at; total() > rows && (at = largest((s, i) => s.hold === "error" && keep[i]! > 1)) >= 0;)
+    keep[at]! -= 1;
+  const lines = shown.map((s, i) => {
+    if (gone[i]) return [];
+    const more = s.items.length - keep[i]!;
+    const tail = s.more?.(more) ?? `… and ${more} more`;
+    return [
+      ...s.head,
+      ...s.items.slice(0, keep[i]).flat(),
+      ...(more > 0 ? [[{ text: tail, tone: "muted" as const }]] : []),
+    ];
+  });
+  // still over: the blank lines between sections go, then lines come off the end of the least-held
+  // sections, the failure last
+  let over = lines.reduce((n, l) => n + l.length, 0) - Math.max(0, rows);
+  const order = shown.map((_, i) => i).sort((x, y) => HOLD[shown[x]!.hold] - HOLD[shown[y]!.hold]);
+  for (const i of order)
+    while (over > 0 && lines[i]![0]?.length === 0 && shown[i]!.head.length > 0 && !gone[i]) {
+      lines[i]!.shift();
+      over -= 1;
+    }
+  for (const i of order) {
+    const off = Math.min(over, lines[i]!.length);
+    lines[i]!.splice(lines[i]!.length - off, off);
+    over -= off;
+  }
+  return lines.flat();
+}
+
+/**
+ * Spec §9.2: ctrl+s opens this, never enter. It shows the diff, the agent-file changes and what applies
+ * when, with Save, Save & make active and Cancel; errors leave only Cancel.
+ */
+export function SaveDialog(props: { dialog: Save }) {
+  const app = useApp();
+  const data = useData();
+  const ui = useUi();
+  const dims = useTerminalDimensions();
+  const renderer = useRenderer();
+  const name = props.dialog.purpose.name;
+  const draft = app.state.drafts[name];
+  // the preview reads the catalog and agent files: off the render path, so a read that throws is shown
+  // here as the reason nothing can be saved, not as a broken screen
+  const key = draft ? JSON.stringify([draft.doc, draft.treatLikes]) : "";
+  const loaded = useLoad(() => (draft ? previewSave(draft, app.effects) : null), key);
+  // a Save re-reads the file: when that changed what saving would do, the dialog shows the new preview
+  // in place of the loaded one and asks again (another process may have written the profile meanwhile)
+  const [fresh, setFresh] = useState<{ key: string; value: SavePreview | null; error: string | null } | null>(
+    null,
+  );
+  const shown = fresh?.key === key ? fresh : loaded;
+  const preview = shown.value;
+  const error = shown.error;
+  // what the dialog shows now, for keys in one burst
+  const shownRef = useRef<SavePreview | null>(preview);
+  shownRef.current = preview;
+  // set when a Save replaces the preview, cleared by the first frame drawn to the terminal after the
+  // commit that holds the new one: a Save between the two (a later key in the same burst) would answer a
+  // preview nobody has seen. React may commit between two keys of one burst, so a commit is not enough.
+  const unseenRef = useRef(false);
+  useEffect(() => {
+    if (!unseenRef.current) return;
+    const seen = () => {
+      unseenRef.current = false;
+    };
+    renderer.once("frame", seen);
+    renderer.requestRender();
+    return () => {
+      renderer.off("frame", seen);
+    };
+  }, [fresh, renderer]);
+  const [changed, setChanged] = useState(false);
+  /** reads the file again; a preview other than the shown one replaces it and asks again (false) */
+  const recheck = (): { same: boolean; now: ProfileDoc | null } => {
+    const d = app.getState().drafts[name];
+    let doc: ProfileDoc | null = null;
+    let now: SavePreview | null = null;
+    let failed: string | null = null;
+    try {
+      doc = d ? app.effects.readProfile(name) : null;
+      now = d && doc ? previewSave(d, app.effects, doc) : null;
+    } catch (e) {
+      failed = errorMessage(e);
+    }
+    if (failed === null && JSON.stringify(now) === JSON.stringify(shownRef.current))
+      return { same: true, now: doc };
+    shownRef.current = now;
+    unseenRef.current = true;
+    setFresh({ key, value: now, error: failed });
+    setChanged(true);
+    return { same: false, now: doc };
+  };
+  const blocked = error !== null || (preview?.validation.errors.length ?? 0) > 0;
+  // spec §9.2's order: Save / Save & make active / Cancel; errors leave only Cancel
+  const labels = blocked ? ["Cancel"] : ["Save", "Save & make active", "Cancel"];
+  const [focused, setFocusedState] = useState(0);
+  // keys in one burst read the focus as it is now, not as it was drawn
+  const focusedRef = useRef(0);
+  const setFocused = (f: number) => {
+    focusedRef.current = f;
+    setFocusedState(f);
+  };
+  useCommandLayer("dialog", {
+    "dialog.left": () => setFocused(Math.max(0, focusedRef.current - 1)),
+    "dialog.right": () => setFocused(Math.min(labels.length - 1, focusedRef.current + 1)),
+    "dialog.submit": () => {
+      // a save that is writing takes no answer
+      if (isSaving(app.getState())) return;
+      const label = labels[Math.min(focusedRef.current, labels.length - 1)];
+      // nothing is saved before its diff has been shown
+      if (label !== "Cancel" && (!shownRef.current || unseenRef.current)) return;
+      if (label === "Cancel") return app.dispatch({ type: "close" });
+      // only the save the dialog shows is made: the file is read again now, and a different preview
+      // replaces the shown one and asks again instead of saving
+      const { same, now } = recheck();
+      if (!same || !now) return;
+      // the save writes only over the file this preview read: one changed while it writes (another
+      // process, while a treat-like waits for the catalog lock) is refused, and the dialog asks again
+      const extra = {
+        shown: now,
+        // the notice shows even when the change is one this preview does not show (another field)
+        changed: () => {
+          if (recheck().same) setChanged(true);
+        },
+      };
+      app.answer(label === "Save" ? "save" : "activate", extra);
+    },
+  });
+  const rows = (inner: number): ReactNode[] => {
+    const out: ReactNode[] = [];
+    const line = (key: string, parts: Part[]) => out.push(<Line key={key} width={inner} parts={parts} />);
+    if (error !== null) {
+      wrap(`Cannot show what saving would do: ${error}`, inner).forEach((t, i) =>
+        line(`fail${i}`, [{ text: t, tone: "error" }]),
+      );
+      line("gap", []);
+      out.push(<Buttons key="buttons" labels={labels} focused={0} width={inner} />);
+      return out;
+    }
+    if (!preview) {
+      line("gone", [{ text: draft ? "reading…" : "Nothing to save.", tone: "muted" }]);
+      return out;
+    }
+    const repo = data.profiles.value?.repo;
+    const text = (t: string, tone: Part["tone"]): Part[][] => wrap(t, inner).map((l) => [{ text: l, tone }]);
+    const sections: Section[] = [
+      {
+        head: [],
+        hold: "filler",
+        items: [
+          ...preview.changes.map((c): Part[][] => [
+            [
+              { text: `${c.path}  ` },
+              { text: show(c.before), tone: "diffDel" },
+              { text: ` ${glyph("arrow", ui.plain)} ` },
+              { text: show(c.after), tone: "diffAdd" },
+            ],
+          ]),
+          ...preview.treatLikes.map(([rung, like]): Part[][] => [
+            [{ text: `treat ${rung} like ` }, { text: like, tone: "diffAdd" }],
+          ]),
+        ],
+      },
+      {
+        head: [[]],
+        hold: "error",
+        more: (n) => `… and ${n} more ${n === 1 ? "error" : "errors"}`,
+        items: preview.validation.errors.map((e) =>
+          text(`${glyph("fail", ui.plain)} ${e.path}: ${e.message}`, "error"),
+        ),
+      },
+      {
+        // warnings follow the errors in one block
+        head: preview.validation.errors.length ? [] : [[]],
+        hold: "filler",
+        more: (n) => `… and ${n} more ${n === 1 ? "warning" : "warnings"}`,
+        items: preview.validation.warnings.map((w) =>
+          text(`${glyph("warn", ui.plain)} ${w.path}: ${w.message}`, "warning"),
+        ),
+      },
+      {
+        head: [[], [{ text: "Agent files", bold: true }]],
+        hold: "filler",
+        items: [
+          ...preview.agentsAdded.map((a): Part[][] => [[{ text: `+ ${a}`, tone: "diffAdd" }]]),
+          ...preview.agentsRemoved.map((a): Part[][] => [[{ text: `- ${a}`, tone: "diffDel" }]]),
+        ],
+      },
+      {
+        head: [[]],
+        hold: "note",
+        items: [
+          text(
+            "Applies to: native Claude agents in new Claude Code sessions; codex, claude-code and opencode from the next dispatch.",
+            "muted",
+          ),
+          // inside a bound repo, making a profile active binds the repo to it (the button keeps §9.2's label)
+          ...(repo ? [text(`Save & make active binds ${repo} to ${name}.`, "muted")] : []),
+        ],
+      },
+      { head: [[]], hold: "failure", items: props.dialog.error ? [text(props.dialog.error, "error")] : [] },
+    ];
+    // the gap and the buttons always fit: every section shares what is left of the panel
+    const notice =
+      changed && !props.dialog.saving ? wrap(`${glyph("warn", ui.plain)} ${CHANGED_ON_DISK}`, inner) : [];
+    fitSections(sections, dialogRows(dims.height) - 2 - notice.length).forEach((p, i) => line(`r${i}`, p));
+    line("gap5", []);
+    notice.forEach((t, i) => line(`changed${i}`, [{ text: t, tone: "warning" }]));
+    if (props.dialog.saving) line("saving", [{ text: "saving…", tone: "muted" }]);
+    else
+      out.push(
+        <Buttons
+          key="buttons"
+          labels={labels}
+          focused={Math.min(focused, labels.length - 1)}
+          width={inner}
+        />,
+      );
+    return out;
+  };
+  return <Dialog title={`Save profile ${name}`} size="large" rows={rows} />;
+}

package/src/entry/tui/views/status.tsx

@@ -0,0 +1,209 @@
+import type { Check } from "../../../services/doctor-checks.ts";
+import { useApp, useNow } from "../providers/app.tsx";
+import { useData } from "../providers/data.tsx";
+import { useCommandLayer } from "../providers/keymap.tsx";
+import { useUi } from "../providers/theme.tsx";
+import { ago, plural, wrap } from "../text.ts";
+import { glyph, STATE_TOKEN } from "../theme.ts";
+import { Line, type Part } from "../widgets/line.tsx";
+import { List, type ListItem, useSelected } from "../widgets/list.tsx";
+import { hereWord, type RunRow } from "../effects.ts";
+import { showProfile } from "./profile-actions.ts";
+import { staleLines } from "./profiles.tsx";
+
+/** `✓ ready` / `! not logged in` / `✗ missing`: state is always glyph and word (spec §9.3). */
+function stateParts(state: Check["state"], word: string, plain: boolean): Part[] {
+  return [{ text: `${glyph(state, plain)} ${word}`.padEnd(16), tone: STATE_TOKEN[state] }];
+}
+
+/** A run in one line: its state word first, then title, repo and progress (research C4). */
+export function runParts(r: RunRow, now: number, plain: boolean): Part[] {
+  const bits = [plural(r.roleRuns, "role run"), `${r.landed} landed`];
+  if (r.budget !== null) bits.push(`${Math.round(r.budget * 100)}% budget`);
+  return [
+    r.live
+      ? { text: `${glyph("live", plain)} live  `, tone: "info" }
+      : { text: `${glyph("dot", plain)} idle  `, tone: "muted" },
+    { text: `${r.title}  `, bold: true },
+    { text: `${r.repo}  `, tone: "muted" },
+    { text: `${r.live ? `${r.live} live · ` : ""}${bits.join(" · ")}  `, tone: "muted" },
+    { text: ago(now - Date.parse(r.createdAt)), tone: "muted" },
+  ];
+}
+
+/**
+ * Spec §9.1 tab 1: each check as `glyph word — detail` with its full fix command (y copies it), the
+ * active profile, and the last five runs. enter opens the profile or a run.
+ */
+export function StatusView(props: { width: number; height: number }) {
+  const app = useApp();
+  const data = useData();
+  const ui = useUi();
+  const now = useNow(1_000);
+  const { selected, select: setSelected, current: selectedNow } = useSelected();
+  const checks = data.report?.checks ?? [];
+  const profiles = data.profiles.value ?? { names: [], active: "…", here: "…", repo: null };
+  const runs = (data.runs.value?.rows ?? []).slice(0, 5);
+  const items: ListItem[] = [];
+  const heading = (key: string, text: string, right = "") =>
+    items.push({
+      key,
+      selectable: false,
+      render: (_s, w) => (
+        <Line
+          width={w}
+          parts={[
+            { text, bold: true },
+            { text: " ".repeat(Math.max(1, w - text.length - right.length - 1)) },
+            { text: right, tone: "muted" },
+          ]}
+        />
+      ),
+    });
+  const checked = data.checking
+    ? "checking…"
+    : data.checkedAt !== null
+      ? `checked ${ago(now - data.checkedAt)}`
+      : "";
+  heading("h:setup", " SETUP", checked);
+  if (data.checkError)
+    items.push({
+      key: "error",
+      selectable: false,
+      render: (_s, w) => (
+        <Line
+          width={w}
+          parts={[{ text: `   ${glyph("fail", ui.plain)} ${data.checkError}`, tone: "error" }]}
+        />
+      ),
+    });
+  for (const c of checks) {
+    // the detail wraps under the label instead of being cut: it is often a path (spec §9.3)
+    const said = wrap(`${c.label}${c.detail ? ` — ${c.detail}` : ""}`, Math.max(20, props.width - 19));
+    const first = said[0] ?? "";
+    const label = first.startsWith(c.label) ? c.label : "";
+    items.push({
+      key: `check:${c.id}`,
+      selectable: true,
+      render: (sel, w) => (
+        <Line
+          width={w}
+          selected={sel}
+          parts={[
+            { text: "   " },
+            ...stateParts(c.state, c.word, ui.plain),
+            { text: label, bold: true },
+            { text: first.slice(label.length), tone: "muted" },
+          ]}
+        />
+      ),
+    });
+    said.slice(1).forEach((line, i) =>
+      items.push({
+        key: `detail:${c.id}:${i}`,
+        selectable: false,
+        render: (_s, w) => <Line width={w} parts={[{ text: `${" ".repeat(19)}${line}`, tone: "muted" }]} />,
+      }),
+    );
+    if (c.fix)
+      wrap(`fix: ${c.fix}`, Math.max(20, props.width - 22)).forEach((line, i) =>
+        items.push({
+          key: `fix:${c.id}:${i}`,
+          selectable: false,
+          render: (_s, w) => <Line width={w} parts={[{ text: `${" ".repeat(20)}${line}`, tone: "muted" }]} />,
+        }),
+      );
+  }
+  heading("h:profile", " PROFILE");
+  // until the first check is in, nothing is selectable, so the cursor starts on the first check
+  const ready = data.report !== null || data.checkError !== null;
+  items.push({
+    key: "profile",
+    selectable: ready,
+    render: (sel, w) => (
+      <Line
+        width={w}
+        selected={sel}
+        parts={[
+          { text: `   ${profiles.here}`, bold: true },
+          {
+            // "…" until the first read: never "0 profiles" on the first frame (spec 1.1 §13)
+            text: `  ${hereWord(profiles)} · ${data.profiles.value ? plural(profiles.names.length, "profile") : "…"}`,
+            tone: "muted",
+          },
+        ]}
+      />
+    ),
+  });
+  // a later read that failed: the row above is the last good read, not the profile now
+  for (const [i, p] of staleLines(data, ui.plain, { fix: false }).entries())
+    items.push({
+      key: `profile:stale:${i}`,
+      selectable: false,
+      render: (_s, w) => <Line width={w} parts={[{ ...p, text: `  ${p.text}` }]} />,
+    });
+  heading("h:runs", " RECENT RUNS");
+  if (runs.length === 0)
+    items.push({
+      key: "runs:none",
+      selectable: false,
+      render: (_s, w) => <Line width={w} parts={[{ text: "   no runs yet", tone: "muted" }]} />,
+    });
+  for (const r of runs)
+    items.push({
+      key: `run:${r.id}`,
+      selectable: ready,
+      render: (sel, w) => (
+        <Line width={w} selected={sel} parts={[{ text: "   " }, ...runParts(r, now, ui.plain)]} />
+      ),
+    });
+
+  const checkAt = (key: string | null) => checks.find((c) => key === `check:${c.id}`);
+  useCommandLayer("tab.status", {
+    "status.recheck": () => data.recheck(),
+    "status.copy": () => {
+      const selectedCheck = checkAt(selectedNow());
+      if (!selectedCheck?.fix) return app.toast({ variant: "info", message: "This row has no fix command" });
+      const ok = app.copy(selectedCheck.fix);
+      app.toast(
+        ok
+          ? { variant: "success", message: "Copied the fix command" }
+          : { variant: "warning", message: "This terminal cannot copy; the command is shown in full" },
+      );
+    },
+  });
+  useCommandLayer("row.status", {
+    "status.open": () => {
+      const selected = selectedNow();
+      const selectedCheck = checkAt(selected);
+      // the PROFILE row is what this directory runs on; doctor's `profile` row is the global active one,
+      // and its `profile:<name>` rows are the repo-bound ones
+      const name =
+        selected === "profile"
+          ? profiles.here
+          : selectedCheck?.id === "profile"
+            ? profiles.active
+            : selectedCheck?.id.startsWith("profile:")
+              ? selectedCheck.id.slice("profile:".length)
+              : null;
+      if (name !== null) {
+        showProfile(app, name);
+      } else if (selected?.startsWith("run:")) {
+        // spec §4: a run opens in its session's screen, which shows it with the session's other runs
+        const row = runs.find((r) => `run:${r.id}` === selected);
+        app.dispatch({ type: "tab", tab: "runs" });
+        if (row) app.dispatch({ type: "session", key: row.session });
+      }
+    },
+  });
+  return (
+    <List
+      items={items}
+      selected={selected}
+      onSelect={setSelected}
+      width={props.width}
+      height={props.height}
+      empty="checking…"
+    />
+  );
+}

package/src/entry/tui/widgets/chrome.tsx

@@ -0,0 +1,114 @@
+import { TextAttributes } from "@opentui/core";
+import { usePendingSequence } from "@opentui/keymap/react";
+import { type CommandId, formatKeys, LEADER } from "../commands.ts";
+import { MODE, reachableCommands, useKeybinds, useKeymap, useKeymapVersion } from "../providers/keymap.tsx";
+import { useTone, useUi } from "../providers/theme.tsx";
+import { FACES, type Mood } from "../theme.ts";
+import { TABS, type Tab } from "../state.ts";
+import { width as widthOf } from "../text.ts";
+import { Line, type Part } from "./line.tsx";
+
+const TAB_TITLE: Record<Tab, string> = { status: "Status", profiles: "Profiles", runs: "Runs" };
+
+/** Spec §9.3 header: one line with the version, the profile, the unsaved count and the mood face. */
+export function Header(props: {
+  version: string;
+  profile: string | null;
+  active: boolean;
+  /** the word after the profile: "active", or "this repo" in a bound repo */
+  label?: string;
+  dirty: number;
+  mood: Mood;
+  width: number;
+}) {
+  const pending = usePendingSequence();
+  const left: Part[] = [{ text: ` catherd ${props.version}`, bold: true }];
+  if (props.profile) {
+    left.push({ text: `  profile ${props.profile}` });
+    if (props.active) left.push({ text: ` (${props.label ?? "active"})`, tone: "muted" });
+  }
+  if (props.dirty > 0) left.push({ text: ` · ${props.dirty} unsaved`, tone: "warning" });
+  const right: Part[] = [];
+  if (pending.length)
+    right.push({
+      text: `${pending.map((p) => (p.tokenName === "leader" ? LEADER : p.display)).join(" ")} …  `,
+      tone: "accent",
+    });
+  right.push({ text: `${FACES[props.mood]} `, tone: props.mood === "failed" ? "error" : "muted" });
+  const used = [...left, ...right].reduce((n, p) => n + widthOf(p.text), 0);
+  const gap = Math.max(1, props.width - used);
+  return <Line width={props.width} parts={[...left, { text: " ".repeat(gap) }, ...right]} />;
+}
+
+/** The tab strip: ` 1 Status   2 Profiles   3 Runs`, the active one bold in the accent. */
+export function Tabs(props: { tab: Tab; width: number }) {
+  const ui = useUi();
+  const tone = useTone();
+  return (
+    <box flexDirection="row" width={props.width} height={1}>
+      {TABS.map((t, i) => {
+        const on = t === props.tab;
+        const text = ` ${i + 1} ${TAB_TITLE[t]} `;
+        return (
+          <text
+            key={t}
+            wrapMode="none"
+            fg={on ? tone(ui.color ? "accent" : "text") : tone("muted")}
+            attributes={on ? TextAttributes.BOLD | (ui.color ? 0 : TextAttributes.INVERSE) : 0}
+          >
+            {i === 0 ? text : ` ${text}`}
+          </text>
+        );
+      })}
+    </box>
+  );
+}
+
+/**
+ * Spec §9.2: footer hints are generated from the commands a key would reach now, in their `hint` order,
+ * as `key label` (the key as the user bound it). Hints drop from the end to fit, but the palette and
+ * help hints stay.
+ */
+export function Footer(props: { width: number }) {
+  useKeymapVersion();
+  const keymap = useKeymap();
+  const keys = useKeybinds();
+  const ui = useUi();
+  const modal = keymap.getData(MODE) === "modal";
+  const hints: { id: string; text: string }[] = [];
+  let last: { order: number; label: string; keys: string[] } | null = null;
+  for (const c of reachableCommands(keymap)
+    .filter((c) => c.hint !== null && keys[c.id].length > 0 && (c.id !== "app.back" || modal))
+    .sort((a, b) => (a.hint as number) - (b.hint as number))) {
+    const key = formatKeys(keys[c.id as CommandId].slice(0, 1), ui.plain);
+    const label = c.short ?? c.title;
+    // commands with the same order and label read as one hint: `↑↓ move`
+    if (last && last.order === c.hint && last.label === label) {
+      last.keys.push(key);
+      const joined = last.keys.join(ui.plain ? "/" : "");
+      (hints.at(-1) as { text: string }).text = `${joined} ${label}`;
+      continue;
+    }
+    last = { order: c.hint as number, label, keys: [key] };
+    hints.push({ id: c.id, text: `${key} ${label}` });
+  }
+  const fixed = hints.filter((h) => h.id === "app.palette" || h.id === "app.help");
+  const rest = hints.filter((h) => !fixed.includes(h));
+  const sep = "  ";
+  const room = props.width - 1 - fixed.reduce((n, h) => n + widthOf(h.text) + sep.length, 0);
+  const kept: string[] = [];
+  let used = 0;
+  for (const h of rest) {
+    if (used + widthOf(h.text) + sep.length > room) break;
+    kept.push(h.text);
+    used += widthOf(h.text) + sep.length;
+  }
+  const all = [...kept, ...fixed.map((h) => h.text)];
+  const parts: Part[] = [{ text: " " }];
+  all.forEach((t, i) => {
+    const at = t.indexOf(" ");
+    parts.push({ text: t.slice(0, at), bold: true }, { text: t.slice(at), tone: "muted" });
+    if (i < all.length - 1) parts.push({ text: sep });
+  });
+  return <Line width={props.width} parts={parts} />;
+}