catherd-cli 0.1.0 → 0.2.0

package/src/tui/ui.tsx

@@ -1,11 +1,171 @@
+import type { BorderCharacters } from "@opentui/core";
 import { TextAttributes } from "@opentui/core";
 import { useKeyboard, useTerminalDimensions } from "@opentui/react";
 import { type ReactNode, useEffect, useState } from "react";
-import { GRADIENT, glyph, herdLine, INTRO, type Mood, mascot, SPINNER, tint, type Ui } from "./theme.ts";
+import { VERSION } from "../version.ts";
+import {
+  ACCENT,
+  GRADIENT,
+  glyph,
+  herdLine,
+  INTRO,
+  type Mood,
+  mascot,
+  SPINNER,
+  tint,
+  type Ui,
+} from "./theme.ts";
 
-export function Screen({ children }: { children: ReactNode }) {
+/** --plain's border: no box-drawing characters, just `+ - |` (spec: "ASCII borders"). */
+const ASCII_BORDER: BorderCharacters = {
+  topLeft: "+",
+  topRight: "+",
+  bottomLeft: "+",
+  bottomRight: "+",
+  horizontal: "-",
+  vertical: "|",
+  topT: "+",
+  bottomT: "+",
+  leftT: "+",
+  rightT: "+",
+  cross: "+",
+};
+
+/** Every screen's chrome: a bordered panel with its title set into the top border, and a short
+ * key-hint line outside and below it (so the hint never competes with the border for space). */
+/** The widest the layout grows; wider terminals centre it with margins on both sides. */
+const MAX_WIDTH = 110;
+
+export function Frame({
+  ui,
+  title,
+  hint,
+  mood = "good",
+  above,
+  children,
+}: {
+  ui: Ui;
+  title: string;
+  hint: string;
+  mood?: Mood;
+  above?: ReactNode;
+  children: ReactNode;
+}) {
   const { width } = useTerminalDimensions();
-  return <box style={{ flexDirection: "column", width: Math.min(width || 80, 80) }}>{children}</box>;
+  const term = Math.max(width || 80, 80);
+  const w = Math.min(term - 4, MAX_WIDTH);
+  const accent = tint(ACCENT, ui.depth);
+  return (
+    <box style={{ flexDirection: "column", width: term, alignItems: "center", paddingTop: 1 }}>
+      <box style={{ flexDirection: "column", width: w }}>
+        {above ?? <Wordmark ui={ui} mood={mood} suffix={VERSION} />}
+        <text> </text>
+        <box
+          style={{
+            flexDirection: "column",
+            width: w,
+            paddingLeft: 2,
+            paddingRight: 2,
+            paddingTop: 1,
+            paddingBottom: 1,
+          }}
+          border
+          borderStyle={ui.plain ? "single" : "rounded"}
+          customBorderChars={ui.plain ? ASCII_BORDER : undefined}
+          borderColor={accent}
+          title={` ${title} `}
+          titleColor={accent}
+          titleAlignment="left"
+        >
+          {children}
+        </box>
+        <box style={{ paddingLeft: 2, paddingTop: 1 }}>
+          <text attributes={TextAttributes.DIM} wrapMode="none" truncate>
+            {hint}
+          </text>
+        </box>
+      </box>
+    </box>
+  );
+}
+
+/** The right pane: a slightly lighter surface than the panel, with an uppercase accent title,
+ * a dim one-line subtitle, and whatever detail rows the caller has for the selected item. */
+export function DetailPane({
+  ui,
+  heading,
+  title,
+  subtitle,
+  children,
+}: {
+  ui: Ui;
+  heading?: string;
+  title: string;
+  subtitle: string;
+  children: ReactNode;
+}) {
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        flexGrow: 1,
+        marginLeft: 2,
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingTop: 1,
+        paddingBottom: 1,
+      }}
+      backgroundColor={ui.plain ? undefined : tint("surface", ui.depth)}
+    >
+      {heading && (
+        <text attributes={TextAttributes.DIM} wrapMode="none" truncate>
+          {heading}
+        </text>
+      )}
+      <text fg={tint(ACCENT, ui.depth)} attributes={TextAttributes.BOLD} wrapMode="none" truncate>
+        {title}
+      </text>
+      <text attributes={TextAttributes.DIM} wrapMode="none" truncate>
+        {subtitle}
+      </text>
+      <text> </text>
+      {children}
+    </box>
+  );
+}
+
+/** One row of a left-pane list: a filled accent bar with a ▶ marker when selected, plain
+ * otherwise; `tag` is a dim trailing value (e.g. a role's "off", a rung's rung id). */
+export function ListLine({
+  ui,
+  selected,
+  dim,
+  text,
+  tag,
+}: {
+  ui: Ui;
+  selected: boolean;
+  dim?: boolean;
+  text: string;
+  tag?: string | null;
+}) {
+  const accent = tint(ACCENT, ui.depth);
+  const filled = selected && !ui.plain;
+  return (
+    <box style={{ flexDirection: "row", width: "100%" }} backgroundColor={filled ? accent : undefined}>
+      <text
+        wrapMode="none"
+        truncate
+        fg={filled ? tint("ink", ui.depth) : undefined}
+        attributes={(selected ? TextAttributes.BOLD : 0) | (dim && !selected ? TextAttributes.DIM : 0)}
+      >
+        {selected ? glyph("cursor", ui.plain) : " "} {text}
+        {tag ? (
+          <span attributes={filled ? TextAttributes.BOLD : TextAttributes.DIM}>{`  ${tag}`}</span>
+        ) : null}
+      </text>
+    </box>
+  );
 }
 
 const hex = (h: string): [number, number, number] => [
@@ -24,16 +184,21 @@ export function gradientLetters(word: string): { ch: string; fg: string }[] {
   });
 }
 
-export function Header({
+/** The cat, and the wordmark it carries: `word` gradient-lettered where colour is available,
+ * an optional `suffix` on the same line (the dashboard's version number), and an optional
+ * second `subtitle` line (the intro's herding copy). Only place the 🐾 glyph still appears. */
+export function Wordmark({
   ui,
   mood,
-  title,
   word = "catherd",
+  suffix,
+  subtitle,
 }: {
   ui: Ui;
   mood: Mood;
-  title: string;
   word?: string;
+  suffix?: string;
+  subtitle?: string;
 }) {
   const [ears, head, paws] = mascot(mood, ui.plain);
   const ginger = tint("ginger", ui.depth);
@@ -45,24 +210,22 @@ export function Header({
         <text fg={ginger}>{paws}</text>
       </box>
       <box style={{ flexDirection: "column", flexGrow: 1, overflow: "hidden" }}>
-        {ui.depth >= 8 && word ? (
-          <text attributes={TextAttributes.BOLD}>
-            {gradientLetters(word).map((s, i) => (
-              // biome-ignore lint: index key is stable, the wordmark never reorders
-              <span key={i} fg={s.fg}>
-                {s.ch}
-              </span>
-            ))}
-          </text>
-        ) : (
-          <text fg={ginger} attributes={TextAttributes.BOLD}>
-            {word || " "}
-          </text>
-        )}
-        <text fg={tint("cream", ui.depth)}>herds coding agents</text>
-        <text fg={tint("pink", ui.depth)} attributes={TextAttributes.BOLD} wrapMode="none" truncate>
-          {title}
+        <text wrapMode="none" truncate attributes={TextAttributes.BOLD}>
+          {ui.depth >= 8 && word
+            ? gradientLetters(word).map((s, i) => (
+                // biome-ignore lint: index key is stable, the wordmark never reorders
+                <span key={i} fg={s.fg}>
+                  {s.ch}
+                </span>
+              ))
+            : (word ?? " ")}
+          {suffix ? <span attributes={TextAttributes.DIM}>{`  ${suffix}`}</span> : null}
         </text>
+        {subtitle ? (
+          <text fg={tint("pink", ui.depth)} attributes={TextAttributes.BOLD} wrapMode="none" truncate>
+            {subtitle}
+          </text>
+        ) : null}
       </box>
     </box>
   );
@@ -100,5 +263,5 @@ export function Intro({ ui, onDone }: { ui: Ui; onDone: () => void }) {
   }, [step]);
   const mood: Mood = step < 2 ? "waiting" : step < INTRO.steps ? "working" : "good";
   const word = "catherd".slice(0, Math.round((7 * step) / INTRO.steps));
-  return <Header ui={ui} mood={mood} title={herdLine(step, ui.plain)} word={word} />;
+  return <Wordmark ui={ui} mood={mood} word={word} subtitle={herdLine(step, ui.plain)} />;
 }

package/src/tui/watch.tsx

@@ -5,19 +5,16 @@ import { useEffect, useRef, useState } from "react";
 import { type BudgetStatus, formatBudget, type RunSummary, summarizeRun } from "../core/status.ts";
 import { listRuns, readJsonl, readRunRecords, type Run } from "../core/runstore.ts";
 import type { RunRecord, RungId } from "../types.ts";
-import { face, glyph, type Mood, tint, type Ui } from "./theme.ts";
-import { CatSpinner, Header, Screen, gradientLetters } from "./ui.tsx";
+import { face, glyph, tint, type Ui } from "./theme.ts";
+import { CatSpinner, DetailPane, Frame, gradientLetters, ListLine } from "./ui.tsx";
 import {
   budgetTone,
   climbs,
   jevLine,
   type JevLine,
   liveLine,
-  milestoneLine,
   plainBudgetBar,
-  recordLine,
   runLine,
-  runMood,
 } from "./watch-model.ts";
 
 export interface WatchDeps {
@@ -36,7 +33,7 @@ const watchDeps: WatchDeps = {
 
 // ponytail: only the 20 newest runs are summarized each poll; add paging when someone keeps more than that live
 const MAX_RUNS = 20;
-const SHOWN = 6;
+const LEFT_HEIGHT = 12;
 
 interface Item {
   run: Run;
@@ -71,7 +68,7 @@ function BudgetBar({ ui, budget }: { ui: Ui; budget: BudgetStatus }) {
       <text
         wrapMode="none"
         truncate
-      >{`    ${plainBudgetBar(budget.fraction, width)} ${formatBudget(budget)}`}</text>
+      >{`${plainBudgetBar(budget.fraction, width)} ${formatBudget(budget)}`}</text>
     );
   }
   const filled = Math.round(Math.max(0, Math.min(1, budget.fraction)) * width);
@@ -83,7 +80,6 @@ function BudgetBar({ ui, budget }: { ui: Ui; budget: BudgetStatus }) {
     : gradientLetters("█".repeat(filled));
   return (
     <text wrapMode="none" truncate>
-      {"    "}
       {cells.map((cell, i) => (
         // biome-ignore lint: index key is stable, the bar never reorders
         <span key={i} fg={cell.fg}>
@@ -96,66 +92,58 @@ function BudgetBar({ ui, budget }: { ui: Ui; budget: BudgetStatus }) {
   );
 }
 
-function RunBlock({ ui, it, here }: { ui: Ui; it: Item; here: boolean }) {
-  const cur = here ? glyph("cursor", ui.plain) : " ";
+/** The right pane for the highlighted run: its live lanes, recent climbs, Jev decisions and the
+ * budget bar — the run's records and raw state text stay out (they were noise, spec §item 4). */
+function RunDetail({ ui, it, climbed, deps }: { ui: Ui; it: Item; climbed: string[]; deps: WatchDeps }) {
+  const pink = tint("pink", ui.depth);
   if (!it.summary) {
     return (
-      <text wrapMode="none" truncate attributes={TextAttributes.DIM}>
-        {`${cur} ${face("failed", ui.plain)} ${it.run.id} ${glyph("dot", ui.plain)} unreadable: ${it.error}`}
-      </text>
+      <DetailPane ui={ui} title={it.run.id} subtitle="unreadable">
+        <text fg={pink} wrapMode="none" truncate>
+          {`${face("failed", ui.plain)} ${it.error}`}
+        </text>
+      </DetailPane>
     );
   }
   const s = it.summary;
-  const ginger = tint("ginger", ui.depth);
-  const pink = tint("pink", ui.depth);
+  const jev = deps.readJev(it.run.dir);
   return (
-    <box style={{ flexDirection: "column" }}>
-      <text
-        wrapMode="none"
-        truncate
-        attributes={here ? TextAttributes.BOLD : TextAttributes.NONE}
-      >{`${cur} ${runLine(s, ui.plain)}`}</text>
-      {s.live.map((l) => (
-        <text key={l.name} wrapMode="none" truncate fg={ginger}>{`    ${liveLine(l, ui.plain)}`}</text>
-      ))}
-      {s.milestones.map((m) => (
-        <text key={m} wrapMode="none" truncate fg={pink}>{`    ${milestoneLine(m, ui.plain)}`}</text>
-      ))}
-      {s.budget ? <BudgetBar ui={ui} budget={s.budget} /> : null}
-    </box>
-  );
-}
-
-function Detail({ ui, run, summary, deps }: { ui: Ui; run: Run; summary: RunSummary; deps: WatchDeps }) {
-  const records = deps.readRunRecords(run.dir);
-  const jev = deps.readJev(run.dir);
-  const dot = ` ${glyph("dot", ui.plain)} `;
-  const ginger = tint("ginger", ui.depth);
-  return (
-    <box style={{ flexDirection: "column" }}>
-      <text
-        wrapMode="none"
-        truncate
-        attributes={TextAttributes.DIM}
-      >{`${run.meta.repo}${dot}${run.id}`}</text>
-      <text fg={ginger} attributes={TextAttributes.BOLD}>
-        state
-      </text>
-      {summary.stateTail.map((l, i) => (
-        <text key={`s${i}`} wrapMode="none" truncate>{`  ${l}`}</text>
-      ))}
-      <text fg={ginger} attributes={TextAttributes.BOLD}>{`records${dot}${records.length}`}</text>
-      {records.slice(-8).map((r, i) => (
-        <text key={`r${i}`} wrapMode="none" truncate>{`  ${recordLine(r, ui.plain)}`}</text>
-      ))}
-      <text fg={ginger} attributes={TextAttributes.BOLD}>
-        {`jev${dot}${summary.jev.decisions} decisions${dot}${summary.jev.fallbacks} fell back`}
+    <DetailPane ui={ui} title={s.title} subtitle={it.run.meta.repo}>
+      {s.live.length > 0 ? (
+        s.live.map((l) => (
+          <text key={l.name} wrapMode="none" truncate>
+            {liveLine(l, ui.plain)}
+          </text>
+        ))
+      ) : (
+        <text attributes={TextAttributes.DIM}>no lane is running right now</text>
+      )}
+      {climbed.length > 0 ? (
+        <>
+          <text> </text>
+          {climbed.map((c, i) => (
+            <text key={`c${i}`} fg={pink} wrapMode="none" truncate>
+              {c}
+            </text>
+          ))}
+        </>
+      ) : null}
+      <text> </text>
+      <text attributes={TextAttributes.DIM}>
+        {`jev ${glyph("dot", ui.plain)} ${s.jev.decisions} decisions ${glyph("dot", ui.plain)} ${s.jev.fallbacks} fell back`}
       </text>
-      {jev.slice(-6).map((e, i) => (
-        <text key={`j${i}`} wrapMode="none" truncate>{`  ${jevLine(e, ui.plain)}`}</text>
+      {jev.slice(-4).map((e, i) => (
+        <text key={`j${i}`} wrapMode="none" truncate>
+          {jevLine(e, ui.plain)}
+        </text>
       ))}
-      <text attributes={TextAttributes.DIM}>{`esc back${dot}q quit`}</text>
-    </box>
+      {s.budget ? (
+        <>
+          <text> </text>
+          <BudgetBar ui={ui} budget={s.budget} />
+        </>
+      ) : null}
+    </DetailPane>
   );
 }
 
@@ -174,7 +162,6 @@ export function Watch({
   const [state, setState] = useState<{ items: Item[]; problem: string | null } | null>(null);
   const [climbed, setClimbed] = useState<string[]>([]);
   const [cursor, setCursor] = useState(0);
-  const [open, setOpen] = useState<string | null>(null);
 
   useEffect(() => {
     const refresh = () => {
@@ -192,67 +179,58 @@ export function Watch({
 
   const items = state?.items ?? [];
   const at = Math.min(cursor, Math.max(0, items.length - 1));
-  const detail = items.find((it) => it.run.dir === open);
+  const leftStart = Math.max(0, Math.min(at - Math.floor(LEFT_HEIGHT / 2), items.length - LEFT_HEIGHT));
 
   useKeyboard((key) => {
     if (key.sequence === "q") {
       renderer.destroy();
       return;
     }
-    if (detail) {
-      if (key.name === "escape" || key.name === "left" || key.name === "return") setOpen(null);
-      return;
-    }
-    const it = items[at];
     if (key.name === "up") setCursor(Math.max(0, at - 1));
     else if (key.name === "down") setCursor(Math.min(items.length - 1, at + 1));
-    else if (key.name === "return" && it?.summary) setOpen(it.run.dir);
   });
 
-  const summaries = items.flatMap((it) => (it.summary ? [it.summary] : []));
-  const mood: Mood =
-    state === null || summaries.some((s) => s.live.length > 0)
-      ? "working"
-      : state.problem || items.some((it) => it.error) || summaries.some((s) => runMood(s) === "failed")
-        ? "failed"
-        : items.length > 0
-          ? "good"
-          : "waiting";
-  const dot = ` ${glyph("dot", ui.plain)} `;
   const pink = tint("pink", ui.depth);
-  const start = Math.max(0, Math.min(at - Math.floor(SHOWN / 2), items.length - SHOWN));
+  const title = `Watch ${glyph("dot", ui.plain)} ${items.length} runs`;
+  const hint = `${glyph("keys", ui.plain)} navigate   q quit   refreshes every ${intervalMs / 1000} s`;
+
+  if (state?.problem) {
+    return (
+      <Frame ui={ui} title={title} hint="q quit">
+        <text fg={pink} wrapMode="none" truncate>{`${face("failed", ui.plain)} ${state.problem}`}</text>
+      </Frame>
+    );
+  }
 
   return (
-    <Screen>
-      <Header
-        ui={ui}
-        mood={mood}
-        title={detail ? `watch${dot}${detail.run.meta.title}` : `watch${dot}${items.length} runs`}
-      />
-      {detail?.summary ? (
-        <Detail ui={ui} run={detail.run} summary={detail.summary} deps={d} />
+    <Frame ui={ui} title={title} hint={hint}>
+      {state === null ? (
+        <CatSpinner ui={ui} label="reading the runs" />
+      ) : items.length === 0 ? (
+        <text>No runs yet. Start one with /catherd in Claude Code.</text>
       ) : (
-        <box style={{ flexDirection: "column" }}>
-          {state === null ? <CatSpinner ui={ui} label="reading the runs" /> : null}
-          {state?.problem ? (
-            <text fg={pink} wrapMode="none" truncate>{`${face("failed", ui.plain)} ${state.problem}`}</text>
-          ) : null}
-          {state !== null && !state.problem && items.length === 0 ? (
-            <text>No runs yet. Start one with /catherd in Claude Code.</text>
-          ) : null}
-          {items.slice(start, start + SHOWN).map((it, i) => (
-            <RunBlock key={it.run.dir} ui={ui} it={it} here={start + i === at} />
-          ))}
-          {climbed.map((c, i) => (
-            <text key={`c${i}`} fg={pink} wrapMode="none" truncate>
-              {c}
+        <box style={{ flexDirection: "row" }}>
+          <box style={{ flexDirection: "column", width: 24 }}>
+            <text fg={pink} attributes={TextAttributes.BOLD}>
+              RUNS
             </text>
-          ))}
-          <text attributes={TextAttributes.DIM} wrapMode="none" truncate>
-            {`${glyph("keys", ui.plain)} move${dot}enter details${dot}q quit${dot}refreshes every ${intervalMs / 1000} s`}
-          </text>
+            {items.slice(leftStart, leftStart + LEFT_HEIGHT).map((it, i) => (
+              <ListLine
+                key={it.run.dir}
+                ui={ui}
+                selected={leftStart + i === at}
+                dim={!it.summary}
+                text={
+                  it.summary
+                    ? runLine(it.summary, ui.plain)
+                    : `${face("failed", ui.plain)} ${it.run.id} ${glyph("dot", ui.plain)} unreadable: ${it.error}`
+                }
+              />
+            ))}
+          </box>
+          {items[at] ? <RunDetail ui={ui} it={items[at]} climbed={climbed} deps={d} /> : null}
         </box>
       )}
-    </Screen>
+    </Frame>
   );
 }