catherd-cli 0.1.0 → 0.2.0

package/src/tui/matrix.tsx

@@ -1,24 +1,34 @@
 import { TextAttributes } from "@opentui/core";
-import { useKeyboard } from "@opentui/react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import type { ReactNode } from "react";
 import { useState } from "react";
 import type { HarnessCost } from "../core/harness.ts";
 import { entryFor, saveTreatLike } from "../routing/catalog.ts";
-import { type Backend, type Catalog, type Profile, type RungId, rungOf } from "../types.ts";
+import { candidates } from "../routing/select.ts";
+import { type Backend, type Catalog, type Profile, type RungId, rungOf, splitRung } from "../types.ts";
 import type { BackendStatus } from "./backends.ts";
 import {
+  budgetDetailRows,
   type BudgetField,
+  budgetSummary,
+  type DetailRow,
+  failoverDetailRows,
   failoverOptions,
+  failoverSummary,
   isTicked,
   openKey,
   readySet,
   type Row,
   rowId,
-  rows as buildRows,
-  ticked,
+  roleDetailRows,
+  sectionOf,
   toggle,
+  topLevelRows,
+  type TopRow,
   treatLikeOptions,
 } from "./matrix-model.ts";
-import { costNote, glyph, HARNESS_HINT, shortRung, tint, type Ui } from "./theme.ts";
+import { dot, glyph, harnessLine, shortRung, tint, type Ui } from "./theme.ts";
+import { DetailPane, ListLine } from "./ui.tsx";
 
 export interface MatrixProps {
   ui: Ui;
@@ -26,6 +36,7 @@ export interface MatrixProps {
   catalog: Catalog;
   backends: BackendStatus[];
   costs?: HarnessCost[];
+  errors?: string[];
   reloadCatalog: () => Catalog;
   onChange: (p: Profile) => void;
   onCatalog: (c: Catalog) => void;
@@ -33,11 +44,21 @@ export interface MatrixProps {
   onQuit: () => void;
   onKey?: (input: string) => void;
   active?: boolean;
-  height?: number;
-  submitLabel?: string;
+  /** Controlled "?" help toggle, so the caller's `Frame` can render the hint bar it computes
+   * with `matrixHint` outside the panel border instead of Matrix drawing its own. */
+  onToggleHelp?: () => void;
 }
 
-type EffortRow = Extract<Row, { kind: "effort" }>;
+/** The hint bar text for a Matrix at the given help state — exported so the caller's `Frame`
+ * can render it outside the panel border while Matrix owns none of the layout itself. */
+export function matrixHint(ui: Ui, submitLabel: string, showHelp: boolean, extraHint = ""): string {
+  const dotSep = ` ${glyph("dot", ui.plain)} `;
+  return showHelp
+    ? `/ filter${dotSep}${extraHint}`
+    : `${glyph("keys", ui.plain)} navigate${dotSep}${glyph("arrow", ui.plain)} open${dotSep}space ticks${dotSep}enter ${submitLabel}${dotSep}? more${dotSep}q quit`;
+}
+
+type EffortRow = Extract<DetailRow, { kind: "effort" }>;
 type Mode =
   | "nav"
   | "filter"
@@ -45,28 +66,48 @@ type Mode =
   | { failover: RungId }
   | { budgetField: BudgetField; buffer: string };
 
+/** "sol", "luna", "opus 5.5" — the short display name the right pane uses for a model id
+ * (the full id still shows in the effort rows below it). */
+export function shortModelName(id: string): string {
+  const base = id.replace(/^.*\//, "").replace(/^gpt-\d+-/, "");
+  return base.replace(/^claude-([a-z]+)-(\d+)-(\d+)$/, "$1 $2.$3");
+}
+
 export function Matrix(props: MatrixProps) {
-  const {
-    ui,
-    profile,
-    catalog,
-    backends,
-    costs = [],
-    active = true,
-    height = 14,
-    submitLabel = "save",
-  } = props;
-  const [cursor, setCursor] = useState(0);
+  const { ui, profile, catalog, backends, costs = [], errors = [], active = true } = props;
+  const { height: termHeight } = useTerminalDimensions();
+  const [leftCursor, setLeftCursor] = useState(0);
+  const [focus, setFocus] = useState<"left" | "right">("left");
+  const [rightCursor, setRightCursor] = useState(0);
   const [open, setOpen] = useState<ReadonlySet<string>>(new Set());
   const [filter, setFilter] = useState("");
   const [mode, setMode] = useState<Mode>("nav");
   const [note, setNote] = useState("");
+  // "?" only does anything when the caller controls help (renders it outside the panel via
+  // `matrixHint`) — Matrix itself draws no help text, so there is nothing to toggle otherwise.
+  const toggleHelp = () => props.onToggleHelp?.();
   const ready = readySet(backends);
-  const list = buildRows(profile, catalog, open, filter);
-  const at = Math.min(cursor, list.length - 1);
-  const here = list[at];
-  const pink = tint("pink", ui.depth);
-  const dot = ` ${glyph("dot", ui.plain)} `;
+  const dotSep = ` ${glyph("dot", ui.plain)} `;
+
+  const top = topLevelRows();
+  const selTop = top[Math.min(leftCursor, top.length - 1)] as TopRow;
+  const detail: DetailRow[] =
+    selTop.kind === "role"
+      ? roleDetailRows(profile, catalog, selTop.role, open, filter)
+      : selTop.kind === "budget-summary"
+        ? budgetDetailRows()
+        : selTop.kind === "failover-summary"
+          ? failoverDetailRows(profile, catalog)
+          : [];
+  const rightAt = Math.min(rightCursor, Math.max(0, detail.length - 1));
+  const hereRight = detail[rightAt];
+
+  const moveLeft = (idx: number) => {
+    setLeftCursor(Math.max(0, Math.min(top.length - 1, idx)));
+    setFocus("left");
+    setRightCursor(0);
+    setNote("");
+  };
 
   const apply = (row: Row, c: Catalog) => {
     const t = toggle(profile, c, row, ready);
@@ -82,24 +123,29 @@ export function Matrix(props: MatrixProps) {
     }
   };
 
-  const collapse = (row: Row) => {
-    const own = openKey(row);
-    const key =
-      row.kind === "backend" || row.kind === "harness" || (row.kind === "model" && !open.has(own ?? ""))
-        ? `role:${row.role}`
-        : own;
-    if (!key) return;
-    const next = new Set(open);
-    next.delete(key);
-    setOpen(next);
-    const idx = buildRows(profile, catalog, next, filter).findIndex(
-      (r) => (r.kind === "role" || r.kind === "model") && openKey(r) === key,
-    );
-    setCursor(Math.max(0, idx));
+  const collapse = () => {
+    const row = hereRight;
+    const key = row && (row.kind === "model" || row.kind === "effort") ? openKey(row) : null;
+    if (key && row && (row.kind === "effort" || open.has(key))) {
+      const next = new Set(open);
+      next.delete(key);
+      setOpen(next);
+      if (row.kind === "effort" && selTop.kind === "role") {
+        const list = roleDetailRows(profile, catalog, selTop.role, next, filter);
+        setRightCursor(
+          Math.max(
+            0,
+            list.findIndex((r) => r.kind === "model" && openKey(r) === key),
+          ),
+        );
+      }
+      return;
+    }
+    setFocus("left");
   };
 
   useKeyboard((key) => {
-    if (!active || !here) return;
+    if (!active) return;
     if (typeof mode !== "string") {
       if (key.name === "escape") {
         setMode("nav");
@@ -135,28 +181,46 @@ export function Matrix(props: MatrixProps) {
         const ch = key.name === "space" ? " " : key.sequence;
         // Typed text can arrive as several keypress events inside one JS tick, before this
         // component re-renders, so the update must build on the queued value, not the closure's.
-        if (ch && ch.length === 1) {
-          setFilter((f) => f + ch);
-          setCursor(0);
-        }
+        if (ch && ch.length === 1) setFilter((f) => f + ch);
       }
       return;
     }
-    if (key.name === "up") setCursor(Math.max(0, at - 1));
-    else if (key.name === "down") setCursor(Math.min(list.length - 1, at + 1));
-    else if (key.name === "right") {
-      const k = here.kind === "role" || here.kind === "model" ? openKey(here) : null;
-      if (k) setOpen(new Set(open).add(k));
-    } else if (key.name === "left") collapse(here);
-    else if (key.name === "return") props.onSubmit();
+    if (key.name === "up") {
+      if (focus === "left") moveLeft(leftCursor - 1);
+      else setRightCursor(Math.max(0, rightAt - 1));
+    } else if (key.name === "down") {
+      if (focus === "left") moveLeft(leftCursor + 1);
+      else setRightCursor(Math.min(Math.max(0, detail.length - 1), rightAt + 1));
+    } else if (key.name === "right") {
+      if (focus === "left") {
+        if (detail.length > 0) {
+          setFocus("right");
+          setRightCursor(0);
+        }
+      } else if (hereRight?.kind === "model") {
+        const k = openKey(hereRight);
+        if (k) setOpen(new Set(open).add(k));
+      }
+    } else if (key.name === "left") {
+      if (focus === "right") collapse();
+    } else if (key.name === "return") props.onSubmit();
     else if (key.name === "space") {
-      if (here.kind === "model" && !isTicked(profile, here))
-        setOpen(new Set(open).add(`model:${here.role}:${here.model.id}`));
-      else if (here.kind === "budget")
-        setMode({ budgetField: here.field, buffer: String(profile.budget?.[here.field] ?? "") });
-      else if (here.kind === "failover") setMode({ failover: here.rung });
-      else apply(here, catalog);
+      if (focus === "left") {
+        if (selTop.kind === "budget-summary" || selTop.kind === "failover-summary") {
+          setFocus("right");
+          setRightCursor(0);
+        } else apply(selTop, catalog);
+      } else if (hereRight) {
+        if (hereRight.kind === "model" && !isTicked(profile, hereRight)) {
+          const k = openKey(hereRight);
+          if (k) setOpen(new Set(open).add(k));
+        } else if (hereRight.kind === "budget")
+          setMode({ budgetField: hereRight.field, buffer: String(profile.budget?.[hereRight.field] ?? "") });
+        else if (hereRight.kind === "failover") setMode({ failover: hereRight.rung });
+        else apply(hereRight, catalog);
+      }
     } else if (key.sequence === "/") setMode("filter");
+    else if (key.sequence === "?") toggleHelp();
     else if (key.sequence === "q") props.onQuit();
     else if (key.sequence) props.onKey?.(key.sequence);
   });
@@ -166,7 +230,7 @@ export function Matrix(props: MatrixProps) {
       <box style={{ flexDirection: "column" }}>
         <text wrapMode="none" truncate>{`${mode.budgetField}: ${mode.buffer}_`}</text>
         <text attributes={TextAttributes.DIM}>
-          {`digits set the cap${dot}backspace edits${dot}enter saves${dot}esc cancels${dot}empty clears it`}
+          {`digits set the cap${dotSep}backspace edits${dotSep}enter saves${dotSep}esc cancels${dotSep}empty clears it`}
         </text>
       </box>
     );
@@ -197,7 +261,7 @@ export function Matrix(props: MatrixProps) {
             setMode("nav");
           }}
         />
-        <text attributes={TextAttributes.DIM}>{`enter picks${dot}esc cancels`}</text>
+        <text attributes={TextAttributes.DIM}>{`enter picks${dotSep}esc cancels`}</text>
       </box>
     );
   }
@@ -227,7 +291,7 @@ export function Matrix(props: MatrixProps) {
             apply(mode.row, c);
           }}
         />
-        <text attributes={TextAttributes.DIM}>{`enter picks${dot}esc cancels`}</text>
+        <text attributes={TextAttributes.DIM}>{`enter picks${dotSep}esc cancels`}</text>
       </box>
     );
   }
@@ -235,116 +299,214 @@ export function Matrix(props: MatrixProps) {
   const notReady = new Map<Backend, string>(
     backends.filter((b) => !(b.installed && b.loggedIn)).map((b) => [b.backend, b.fix ?? ""]),
   );
-  const box = (on: boolean) => glyph(on ? "on" : "off", ui.plain);
-  const fold = (k: string) =>
-    glyph(open.has(k) || (filter !== "" && k.startsWith("role:")) ? "open" : "shut", ui.plain);
 
-  const describe = (r: Row): { text: string; dim: boolean; tag: string | null } => {
+  // --- left pane -----------------------------------------------------------------------------
+  const leftText = (r: TopRow): { text: string; dim: boolean; tag: string | null } => {
     switch (r.kind) {
       case "role": {
         const on = profile.roles[r.role].enabled;
-        const rungs = ticked(profile, r.role).map(shortRung).join(", ") || "nothing ticked";
         return {
-          text: `${fold(`role:${r.role}`)} ${box(on)} ${r.role.padEnd(12)}${on ? rungs : "off"}`,
+          text: `${dot(on ? "ready" : "missing", ui.plain)} ${r.role}`,
           dim: !on,
-          tag: null,
+          tag: on ? null : "off",
         };
       }
+      case "objective":
+        return { text: "objective", dim: false, tag: profile.objective };
+      case "lock":
+        return { text: "heavy slots", dim: false, tag: String(profile.lock.heavy) };
+      case "harness":
+        return {
+          text: r.backend,
+          dim: notReady.has(r.backend),
+          tag: profile.harness[r.backend].isolated ? "isolated" : "native",
+        };
+      case "budget-summary":
+        return { text: "budget", dim: false, tag: budgetSummary(profile, ` ${glyph("dot", ui.plain)} `) };
+      case "failover-summary":
+        return { text: "failover", dim: false, tag: failoverSummary(profile) };
+      case "notify": {
+        const on = profile.notify.includes(r.moment);
+        return { text: `${dot(on ? "ready" : "missing", ui.plain)} ${r.moment}`, dim: !on, tag: null };
+      }
+    }
+  };
+
+  // Rows left for the panes once the cat, the border, the padding and the hint are drawn.
+  const rows = Math.max(12, termHeight || 24);
+  const LEFT_HEIGHT = Math.max(4, rows - 18);
+  const RIGHT_HEIGHT = Math.max(3, rows - 20);
+  const start = Math.max(0, Math.min(leftCursor - Math.floor(LEFT_HEIGHT / 2), top.length - LEFT_HEIGHT));
+  const leftWindow = top.slice(start, start + LEFT_HEIGHT);
+  let lastSection = "";
+  const leftLines = leftWindow.flatMap((r, i) => {
+    const idx = start + i;
+    const section = sectionOf(r);
+    const heading =
+      section !== lastSection ? (
+        <text key={`h${section}`} fg={tint("pink", ui.depth)} attributes={TextAttributes.BOLD}>
+          {section}
+        </text>
+      ) : null;
+    lastSection = section;
+    const { text, dim, tag } = leftText(r);
+    return [
+      heading,
+      <ListLine
+        key={rowId(r)}
+        ui={ui}
+        selected={idx === leftCursor && focus === "left"}
+        dim={dim}
+        text={text}
+        tag={tag}
+      />,
+    ];
+  });
+
+  // --- right pane ------------------------------------------------------------------------------
+  const dstart = Math.max(
+    0,
+    Math.min(rightAt - Math.floor(RIGHT_HEIGHT / 2), Math.max(0, detail.length - RIGHT_HEIGHT)),
+  );
+  const detailText = (r: DetailRow): { text: string; dim: boolean; tag: string | null } => {
+    switch (r.kind) {
       case "backend": {
-        const fix = notReady.get(r.backend);
+        const fix = notReady.get(r.backend as Backend);
         return {
-          text: `    ${r.backend}`,
+          text: r.backend,
           dim: fix !== undefined,
-          tag: fix === undefined ? null : `not ready${dot}${fix}`,
+          tag: fix === undefined ? null : `not ready${dotSep}${fix}`,
         };
       }
-      case "harness": {
-        const iso = profile.harness[r.backend].isolated;
-        const cost = costs.find((h) => h.backend === r.backend);
-        const sw = `${iso ? "native" : "[native]"} ${glyph("swap", ui.plain)} ${iso ? "[isolated]" : "isolated"}`;
-        return { text: `      ${r.backend}: ${sw}`, dim: false, tag: cost ? costNote(cost) || null : null };
-      }
       case "model": {
         const efforts = profile.roles[r.role].models[r.model.id] ?? [];
+        const on = efforts.length > 0;
         return {
-          text: `      ${fold(`model:${r.role}:${r.model.id}`)} ${box(efforts.length > 0)} ${r.model.id}  ${efforts.join(" ")}`,
+          text: `${glyph(open.has(openKey(r) ?? "") ? "open" : "shut", ui.plain)} ${dot(on ? "ready" : "missing", ui.plain)} ${shortModelName(r.model.id)}  ${efforts.join(" ")}`.trimEnd(),
           dim: !ready.has(r.model.backend),
-          tag: null,
+          tag: r.model.id.includes("/") ? (r.model.id.split("/")[0] ?? r.model.id) : r.model.id,
         };
       }
       case "effort": {
         const rung = rungOf(r.model.id, r.effort);
         const like = catalog.treatLike[rung];
         return {
-          text: `          ${box(isTicked(profile, r))} ${r.effort}`,
+          text: `  ${dot(isTicked(profile, r) ? "ready" : "missing", ui.plain)} ${r.effort}`,
           dim: !ready.has(r.model.backend),
           tag: like ? `like ${shortRung(like)}` : entryFor(catalog, rung) ? null : "unscored",
         };
       }
-      case "objective":
-        return {
-          text: `objective     ${profile.objective}  (${profile.objective === "cost" ? "cheapest rung first" : "fastest rung first"})`,
-          dim: false,
-          tag: null,
-        };
-      case "lock":
-        return { text: `heavy slots   ${profile.lock.heavy}  (for catherd lock)`, dim: false, tag: null };
       case "budget": {
         const v = profile.budget?.[r.field];
-        return {
-          text: `${`budget ${r.field}`.padEnd(16)}${v === undefined ? "no cap" : v}`,
-          dim: false,
-          tag: null,
-        };
+        return { text: r.field, dim: false, tag: v === undefined ? "no cap" : String(v) };
       }
       case "failover": {
         const to = profile.failover?.[r.rung];
         return {
-          text: `${`failover ${shortRung(r.rung)}`.padEnd(28)}${to ? `${glyph("arrow", ui.plain)} ${shortRung(to)}` : "no stand-in"}`,
+          text: shortRung(r.rung),
           dim: false,
-          tag: null,
+          tag: to ? `${glyph("arrow", ui.plain)} ${shortRung(to)}` : "no stand-in",
         };
       }
-      case "notify":
+    }
+  };
+
+  const header = (): { title: string; subtitle: string } => {
+    switch (selTop.kind) {
+      case "role": {
+        const on = profile.roles[selTop.role].enabled;
+        return { title: selTop.role, subtitle: on ? "capable models and efforts" : "off" };
+      }
+      case "objective":
         return {
-          text: `${box(profile.notify.includes(r.moment))} notify on ${r.moment}`,
-          dim: false,
-          tag: null,
+          title: "objective",
+          subtitle: profile.objective === "cost" ? "cheapest rung first" : "fastest rung first",
         };
+      case "lock":
+        return { title: "heavy slots", subtitle: "how many roles catherd's lock treats as heavy" };
+      case "harness":
+        return { title: selTop.backend, subtitle: "vendor harness: native config or an isolated sandbox" };
+      case "budget-summary":
+        return { title: "budget", subtitle: "minutes, tokens and dollars this profile allows a run" };
+      case "failover-summary":
+        return { title: "failover", subtitle: "a stand-in rung for a codex/opencode quota limit" };
+      case "notify":
+        return { title: "notify", subtitle: "when catherd pings you" };
     }
   };
 
-  const start = Math.max(0, Math.min(at - Math.floor(height / 2), list.length - height));
+  const { title, subtitle } = header();
+  const detailBody: ReactNode[] = [];
+  if (selTop.kind === "harness") {
+    const cost = costs.find((h) => h.backend === selTop.backend);
+    detailBody.push(
+      <text key="h" wrapMode="word">
+        {harnessLine(selTop.backend, profile.harness[selTop.backend].isolated, cost, ui.plain)}
+      </text>,
+    );
+  } else if (selTop.kind === "notify") {
+    for (const m of ["milestone", "finish", "blocked"] as const) {
+      const on = profile.notify.includes(m);
+      detailBody.push(
+        <text
+          key={m}
+          wrapMode="none"
+          truncate
+          attributes={m === selTop.moment ? TextAttributes.BOLD : TextAttributes.NONE}
+        >
+          {`${dot(on ? "ready" : "missing", ui.plain)} ${m}`}
+        </text>,
+      );
+    }
+  } else {
+    detail.slice(dstart, dstart + RIGHT_HEIGHT).forEach((r, i) => {
+      const idx = dstart + i;
+      const { text, dim, tag } = detailText(r);
+      detailBody.push(
+        <ListLine
+          key={rowId(r)}
+          ui={ui}
+          selected={focus === "right" && idx === rightAt}
+          dim={dim}
+          text={text}
+          tag={tag}
+        />,
+      );
+    });
+    if (selTop.kind === "role") {
+      const ladder = candidates(profile, catalog, selTop.role).map(
+        (r) => `${shortModelName(splitRung(r).model)} ${splitRung(r).effort}`,
+      );
+      if (ladder.length > 0)
+        detailBody.push(
+          <text key="ladder" attributes={TextAttributes.DIM} wrapMode="word">
+            {`ladder ${dotSep}${ladder.join(` ${glyph("arrow", ui.plain)} `)}`}
+          </text>,
+        );
+    }
+  }
+
   return (
-    <box style={{ flexDirection: "column" }}>
-      {list.slice(start, start + height).map((r, i) => {
-        const cur = start + i === at;
-        const { text, dim, tag } = describe(r);
-        const attrs = (cur ? TextAttributes.BOLD : 0) | (dim && !cur ? TextAttributes.DIM : 0);
-        return (
-          <text key={rowId(r)} wrapMode="none" truncate attributes={attrs}>
-            <span fg={pink}>{cur ? glyph("cursor", ui.plain) : " "}</span>
-            {` ${text}`}
-            {tag ? <span fg={pink}>{` ${tag}`}</span> : null}
+    <box style={{ flexDirection: "row" }}>
+      <box style={{ flexDirection: "column", width: 22 }}>{leftLines}</box>
+      <DetailPane ui={ui} title={title} subtitle={subtitle}>
+        {detailBody}
+        {note ? (
+          <text fg={tint("pink", ui.depth)} wrapMode="none" truncate>
+            {note}
           </text>
-        );
-      })}
-      {here?.kind === "harness" ? (
-        <text attributes={TextAttributes.DIM} wrapMode="none" truncate>
-          {HARNESS_HINT[here.backend]}
-        </text>
-      ) : null}
-      <text attributes={TextAttributes.DIM} wrapMode="none" truncate>
-        {mode === "filter"
-          ? `filter: ${filter}_${dot}enter keeps it${dot}esc clears it`
-          : `${glyph("keys", ui.plain)} move${dot}${glyph("arrow", ui.plain)} open${dot}space ticks${dot}/ filter${dot}enter ${submitLabel}${dot}q quit`}
-      </text>
-      {filter && mode === "nav" ? <text attributes={TextAttributes.DIM}>{`filter: ${filter}`}</text> : null}
-      {note ? (
-        <text fg={pink} wrapMode="none" truncate>
-          {note}
-        </text>
-      ) : null}
+        ) : null}
+        {mode === "filter" ? (
+          <text attributes={TextAttributes.DIM} wrapMode="none" truncate>{`filter: ${filter}_`}</text>
+        ) : filter ? (
+          <text attributes={TextAttributes.DIM} wrapMode="none" truncate>{`filter: ${filter}`}</text>
+        ) : null}
+        {errors.map((e) => (
+          <text key={e} fg={tint("pink", ui.depth)} wrapMode="none" truncate>
+            {e}
+          </text>
+        ))}
+      </DetailPane>
     </box>
   );
 }

package/src/tui/theme.ts

@@ -2,7 +2,7 @@ import { WriteStream } from "node:tty";
 import type { HarnessCost } from "../core/harness.ts";
 
 export type Mood = "good" | "working" | "waiting" | "failed" | "landed";
-export type Tone = "ginger" | "cream" | "charcoal" | "pink";
+export type Tone = "ginger" | "cream" | "charcoal" | "pink" | "green" | "amber" | "red" | "surface" | "ink";
 /** Node's getColorDepth: 1 none, 4 sixteen, 8 256, 24 true colour. */
 export type Depth = 1 | 4 | 8 | 24;
 
@@ -19,8 +19,16 @@ const TONES: Record<Tone, string> = {
   cream: "#F5E6C8",
   charcoal: "#4A4340",
   pink: "#FF6FA5",
+  green: "#8FBF6A",
+  amber: "#E0A63E",
+  red: "#D9636A",
+  surface: "#211C20",
+  ink: "#1A1417",
 };
 
+/** The one accent colour: headings and the selected-row bar. Everything else stays neutral or dim. */
+export const ACCENT: Tone = "pink";
+
 export const GRADIENT: string[] = [TONES.ginger, TONES.pink];
 
 export function tint(tone: Tone, depth: Depth): string | undefined {
@@ -49,14 +57,15 @@ export function face(mood: Mood, plain: boolean): string {
 }
 
 const GLYPHS = {
-  on: ["🐾", "[x]"],
-  off: ["○ ", "[ ]"],
+  on: ["●", "*"],
+  off: ["○", "o"],
   cat: ["🐈", "*"],
+  paw: ["🐾", ""],
   dot: ["·", "-"],
   more: ["…", "..."],
   open: ["▾", "v"],
   shut: ["▸", ">"],
-  cursor: ["❯", ">"],
+  cursor: ["▶", ">"],
   arrow: ["→", "->"],
   keys: ["↑↓", "up/down"],
   swap: ["⇄", "<->"],
@@ -69,6 +78,21 @@ export function glyph(g: Glyph, plain: boolean): string {
   return GLYPHS[g][plain ? 1 : 0];
 }
 
+/** Ready/warn/missing status, painted with the same two shapes `on`/`off` toggles use — a
+ * warning is still a "filled" dot (amber instead of green), missing is the hollow one (red).
+ * ponytail: --plain collapses warn into the ready glyph (a star), the spec's ASCII table only
+ * names two dot characters, star and o; upgrade to a three-way ASCII split if that ever matters. */
+export type DotState = "ready" | "warn" | "missing";
+const DOT_TONE: Record<DotState, Tone> = { ready: "green", warn: "amber", missing: "red" };
+
+export function dot(state: DotState, plain: boolean): string {
+  return glyph(state === "missing" ? "off" : "on", plain);
+}
+
+export function dotTint(state: DotState, depth: Depth): string | undefined {
+  return tint(DOT_TONE[state], depth);
+}
+
 /** The conductor: ears, a face that follows the mood, a raised baton, paws. */
 export function mascot(mood: Mood, plain: boolean): [string, string, string] {
   return [" /\\_/\\  .", `(${face(mood, plain)})/`, ' (")(")'].map((l) => l.padEnd(9)) as [
@@ -114,6 +138,19 @@ export function costNote(h: HarnessCost): string {
   return h.isolatedMedian !== null ? `isolated ${kTokens(h.isolatedMedian)} tokens/run` : "";
 }
 
+/** The profile editor's HARNESS detail: the native/isolated choice plus what it costs, falling
+ * back to the static hint (`HARNESS_HINT`) until a run has recorded a real cost. */
+export function harnessLine(
+  backend: "codex" | "opencode",
+  isolated: boolean,
+  cost: HarnessCost | undefined,
+  plain: boolean,
+): string {
+  const mode = isolated ? "isolated" : "native";
+  const note = (cost && costNote(cost)) || HARNESS_HINT[backend];
+  return `${mode} ${glyph("dot", plain)} ${note}`;
+}
+
 export function clock(secs: number): string {
   const s = Math.max(0, Math.floor(secs));
   const h = Math.floor(s / 3600);