catherd-cli 0.2.1 → 1.1.0

package/src/tui/theme.ts

@@ -1,177 +0,0 @@
-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" | "green" | "amber" | "red" | "surface" | "ink";
-/** Node's getColorDepth: 1 none, 4 sixteen, 8 256, 24 true colour. */
-export type Depth = 1 | 4 | 8 | 24;
-
-export interface Ui {
-  plain: boolean;
-  reducedMotion: boolean;
-  depth: Depth;
-}
-
-// OpenTUI renders true-colour RGB only and downsamples itself for the terminal it finds, so
-// every depth above 1 gets the same hex; depth 1 (NO_COLOR) gets no colour at all.
-const TONES: Record<Tone, string> = {
-  ginger: "#E8833A",
-  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 {
-  return depth === 1 ? undefined : TONES[tone];
-}
-
-export function detectUi(rawArgs: string[], env: NodeJS.ProcessEnv = process.env): Ui {
-  return {
-    // is-unicode-supported answers exactly this on macOS and Linux.
-    plain: rawArgs.includes("--plain") || env.TERM === "linux",
-    reducedMotion: rawArgs.includes("--reduced-motion"),
-    depth: WriteStream.prototype.getColorDepth.call(process.stdout as WriteStream, env) as Depth,
-  };
-}
-
-export const FACES: Record<Mood, string> = {
-  good: "=^.^=",
-  working: "=o.o=",
-  waiting: "=-.-=",
-  failed: "=x.x=",
-  landed: "=^ω^=",
-};
-
-export function face(mood: Mood, plain: boolean): string {
-  return plain ? FACES[mood].replace("ω", "w") : FACES[mood];
-}
-
-const GLYPHS = {
-  on: ["●", "*"],
-  off: ["○", "o"],
-  cat: ["🐈", "*"],
-  paw: ["🐾", ""],
-  dot: ["·", "-"],
-  more: ["…", "..."],
-  open: ["▾", "v"],
-  shut: ["▸", ">"],
-  cursor: ["▶", ">"],
-  arrow: ["→", "->"],
-  keys: ["↑↓", "up/down"],
-  swap: ["⇄", "<->"],
-} as const;
-
-export type Glyph = keyof typeof GLYPHS;
-export const GLYPH_NAMES = Object.keys(GLYPHS) as Glyph[];
-
-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 [
-    string,
-    string,
-    string,
-  ];
-}
-
-export const HERDING = [
-  "herding",
-  "counting whiskers",
-  "negotiating with Luna",
-  "coaxing Sol off the keyboard",
-  "lining up the kittens",
-  "untangling the yarn",
-] as const;
-
-export function herdLine(i: number, plain: boolean): string {
-  return `${HERDING[i % HERDING.length]}${glyph("more", plain)}`;
-}
-
-/** Kneading paws (m/n) and a flicking tail. ASCII already, so --plain needs no second set. */
-export const SPINNER = {
-  frames: ["m=o.o=~", "n=o.o=-", "m=o.o=_", "n=o.o=-"],
-  ms: 160,
-  copyMs: 2400,
-} as const;
-
-/** The init intro: 6 frames of 200 ms, 1.2 s in all, inside the spec's 1.5 s. */
-export const INTRO = { steps: 6, ms: 200 } as const;
-
-export const HARNESS_HINT: Record<"codex" | "opencode", string> = {
-  codex: "native keeps your Codex config, hooks, skills, AGENTS.md; isolated saves tokens",
-  opencode: "native keeps your opencode config, agents and plugins; isolated saves tokens",
-};
-
-const kTokens = (n: number) => `~${Math.round(n / 1000)}k`;
-
-export function costNote(h: HarnessCost): string {
-  if (h.extraPerRun !== null) return `customizations ${kTokens(h.extraPerRun)} tokens/run`;
-  if (h.nativeMedian !== null) return `native ${kTokens(h.nativeMedian)} tokens/run`;
-  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);
-  const mm = String(Math.floor(s / 60) % 60).padStart(2, "0");
-  const ss = String(s % 60).padStart(2, "0");
-  return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
-}
-
-/** "gpt-6-sol#medium" -> "sol#medium"; provider paths drop to the last segment. */
-export function shortRung(rung: string): string {
-  return rung.replace(/^.*\//, "").replace(/^gpt-\d+-/, "");
-}
-
-export function nick(rung: string): string {
-  const model = shortRung(rung).split("#")[0] ?? "";
-  return model.charAt(0).toUpperCase() + model.slice(1);
-}
-
-export function climbLine(name: string, from: string, to: string, plain: boolean): string {
-  const a = nick(from);
-  const b = nick(to);
-  const story = a === b ? `${a} digs deeper` : `${a} gave up, ${b} takes over`;
-  return `${story} ${glyph("dot", plain)} ${name} ${shortRung(from)} ${glyph("arrow", plain)} ${shortRung(to)}`;
-}

package/src/tui/ui.tsx

@@ -1,267 +0,0 @@
-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 { VERSION } from "../version.ts";
-import {
-  ACCENT,
-  GRADIENT,
-  glyph,
-  herdLine,
-  INTRO,
-  type Mood,
-  mascot,
-  SPINNER,
-  tint,
-  type Ui,
-} from "./theme.ts";
-
-/** --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();
-  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] => [
-  Number.parseInt(h.slice(1, 3), 16),
-  Number.parseInt(h.slice(3, 5), 16),
-  Number.parseInt(h.slice(5, 7), 16),
-];
-
-/** One colour per letter, interpolated between GRADIENT's two hex stops. */
-export function gradientLetters(word: string): { ch: string; fg: string }[] {
-  const [a, b] = [hex(GRADIENT[0] as string), hex(GRADIENT[1] as string)];
-  return [...word].map((ch, i) => {
-    const t = word.length > 1 ? i / (word.length - 1) : 0;
-    const rgb = a.map((c, k) => Math.round(c + ((b[k] as number) - c) * t));
-    return { ch, fg: `#${rgb.map((c) => c.toString(16).padStart(2, "0")).join("")}` };
-  });
-}
-
-/** 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,
-  word = "catherd",
-  suffix,
-  subtitle,
-}: {
-  ui: Ui;
-  mood: Mood;
-  word?: string;
-  suffix?: string;
-  subtitle?: string;
-}) {
-  const [ears, head, paws] = mascot(mood, ui.plain);
-  const ginger = tint("ginger", ui.depth);
-  return (
-    <box style={{ flexDirection: "row", marginBottom: 1 }}>
-      <box style={{ flexDirection: "column", marginRight: 2 }}>
-        <text fg={ginger}>{ears}</text>
-        <text fg={ginger}>{head}</text>
-        <text fg={ginger}>{paws}</text>
-      </box>
-      <box style={{ flexDirection: "column", flexGrow: 1, overflow: "hidden" }}>
-        <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>
-  );
-}
-
-export function CatSpinner({ ui, label }: { ui: Ui; label: string }) {
-  const [n, setN] = useState(0);
-  useEffect(() => {
-    if (ui.reducedMotion) return;
-    const t = setInterval(() => setN((x) => x + 1), SPINNER.ms);
-    return () => clearInterval(t);
-  }, [ui.reducedMotion]);
-  const frame = SPINNER.frames[n % SPINNER.frames.length];
-  const copy = herdLine(Math.floor((n * SPINNER.ms) / SPINNER.copyMs), ui.plain);
-  return (
-    <text wrapMode="none" truncate>
-      <span fg={tint("ginger", ui.depth)}>{frame}</span> {label}{" "}
-      <span attributes={TextAttributes.DIM}>
-        {glyph("dot", ui.plain)} {copy}
-      </span>
-    </text>
-  );
-}
-
-export function Intro({ ui, onDone }: { ui: Ui; onDone: () => void }) {
-  const [step, setStep] = useState(ui.reducedMotion ? INTRO.steps : 0);
-  useKeyboard(() => onDone());
-  useEffect(() => {
-    if (step >= INTRO.steps) {
-      onDone();
-      return;
-    }
-    const t = setTimeout(() => setStep(step + 1), INTRO.ms);
-    return () => clearTimeout(t);
-  }, [step]);
-  const mood: Mood = step < 2 ? "waiting" : step < INTRO.steps ? "working" : "good";
-  const word = "catherd".slice(0, Math.round((7 * step) / INTRO.steps));
-  return <Wordmark ui={ui} mood={mood} word={word} subtitle={herdLine(step, ui.plain)} />;
-}

package/src/tui/watch-model.ts

@@ -1,83 +0,0 @@
-import type { RunSummary } from "../core/status.ts";
-import type { RunRecord, RungId } from "../types.ts";
-import { climbLine, clock, face, glyph, type Mood, shortRung } from "./theme.ts";
-
-/**
- * The fields `watch` shows from one `jev.jsonl` row (`JevLogRow` in `src/routing/jev.ts`):
- * which questions were asked, the answer actually used, and whether Jev answered or the
- * profile default did. `ts`, `answers` and `why` are in the file but not shown here.
- */
-export interface JevLine {
-  questions: string[];
-  used: string;
-  source: "jev" | "default";
-}
-
-export function runMood(s: RunSummary): Mood {
-  if (s.live.length > 0) return "working";
-  if (s.totals.notOk.length > 0) return "failed";
-  return s.totals.runs > 0 ? "good" : "waiting";
-}
-
-export function runLine(s: RunSummary, plain: boolean): string {
-  return [
-    `${face(runMood(s), plain)} ${s.title}`,
-    `${s.live.length} live`,
-    `${s.totals.runs} runs`,
-    `${s.milestones.length} landed`,
-  ].join(` ${glyph("dot", plain)} `);
-}
-
-export function liveLine(l: RunSummary["live"][number], plain: boolean): string {
-  return `${glyph("cat", plain)} ${l.name}  ${shortRung(l.rung)}  ${clock(l.secs)}  ${face("working", plain)}`;
-}
-
-export function milestoneLine(m: string, plain: boolean): string {
-  const id = /\bM\d+\b/.exec(m)?.[0];
-  if (!id) return `${face("landed", plain)} ${m}`;
-  const mins = /\b(\d+)m\b/.exec(m)?.[1];
-  const sha = /\b[0-9a-f]{7,40}\b/.exec(m)?.[0]?.slice(0, 7);
-  return [`${face("landed", plain)} ${id} landed`, mins ? `${mins}m` : null, sha ?? null]
-    .filter((x): x is string => x !== null)
-    .join(` ${glyph("dot", plain)} `);
-}
-
-/** Remembers each role's last rung across polls; a role that comes back on another rung has climbed. */
-export function climbs(seen: Map<string, RungId>, s: RunSummary, plain: boolean): string[] {
-  const out: string[] = [];
-  for (const l of s.live) {
-    const key = `${s.id}/${l.name}`;
-    const from = seen.get(key);
-    if (from !== undefined && from !== l.rung) out.push(climbLine(l.name, from, l.rung, plain));
-    seen.set(key, l.rung);
-  }
-  return out;
-}
-
-export function recordLine(r: RunRecord, plain: boolean): string {
-  const tail = r.replyStatus ? ` ${glyph("dot", plain)} ${r.replyStatus}` : "";
-  return `${r.name}  ${shortRung(r.rung)}  ${r.status}  ${clock(r.secs)}${tail}`;
-}
-
-export function jevLine(e: JevLine, plain: boolean): string {
-  const tail = e.source === "default" ? ` ${glyph("dot", plain)} fell back to the profile default` : "";
-  return `${e.questions.join(", ")} ${glyph("arrow", plain)} ${e.used}${tail}`;
-}
-
-/** spec §11b: --plain's stand-in for the coloured budget bar, e.g. "[#####-----] 52%". */
-export function plainBudgetBar(fraction: number, width = 10): string {
-  const f = Math.max(0, Math.min(1, fraction));
-  const filled = Math.round(f * width);
-  return `[${"#".repeat(filled)}${"-".repeat(width - filled)}] ${Math.round(f * 100)}%`;
-}
-
-/** spec §11b: the bar is the ginger-to-pink gradient below 80%, a solid warning tint from 80%,
- * and a solid error tint once the budget is spent. Only ginger/pink exist in the warm palette
- * (theme.ts), so "warning" and "error" reuse them rather than adding new tones. */
-export type BudgetTone = "gradient" | "warning" | "error";
-
-export function budgetTone(fraction: number): BudgetTone {
-  if (fraction >= 1) return "error";
-  if (fraction >= 0.8) return "warning";
-  return "gradient";
-}