@quickchatai/quickreview 0.0.0-stage → 1.1.0

package/src/tui/design.ts

@@ -0,0 +1,125 @@
+// Design tokens: "muted + one accent".
+// The only module where visual decisions live: every renderer styles chrome
+// through these semantic tokens and helpers — never raw SGR.bold/dim/inverse
+// at call sites. Composes over paint.ts's SGR; layout stays ANSI-transparent
+// (helpers add zero cells beyond their visible glyphs).
+//
+// Language, picked once:
+//   * accent      — 256-color cyan-teal 73: selection, focus, active tab,
+//                   links, key glyphs. The one non-semantic color.
+//   * muted       — grey 246 for secondary text (instead of decorative dim).
+//   * red/green   — truth only (LIVE badge, CI red, REQUEST_CHANGES/blocked;
+//                   green for APPROVE/healthy). Yellow = warnings.
+//   * sections    — `▍TITLE` in accent+bold, muted subtitle beside it.
+//   * selection   — a selected row (selected()) is accent background, dark ink
+//                   (inner SGR stripped so the bar reads as one piece;
+//                   OSC-8 links survive); mouse text selection (SELECTION)
+//                   is inverse video.
+import { ESC, SGR, stripAnsi } from "./paint.js";
+
+const fg256 = (n: number): string => `${ESC}38;5;${n}m`;
+const bg256 = (n: number): string => `${ESC}48;5;${n}m`;
+
+/** Dark ink used on top of every solid chip/selection background. */
+const INK_ON_FILL = fg256(235);
+
+// ---- tokens ----------------------------------------------------------------
+
+/** The one accent — cyan-teal (reads on dark terminals without glare). */
+export const ACCENT = fg256(73);
+/** Inverse-selection variant: accent background + dark ink. */
+export const ACCENT_BG = `${bg256(73)}${INK_ON_FILL}`;
+/** Secondary text — used instead of decorative `dim`. */
+export const MUTED = fg256(246);
+/** Section titles: accent + bold. */
+export const HEADING = `${ACCENT}${SGR.bold}`;
+/** Emphasis without color — the sanctioned bold (never raw SGR.bold). */
+export const STRONG = SGR.bold;
+/** Semantic green — APPROVE / healthy / succeeded. Nothing else. */
+export const OK = fg256(71);
+/** Semantic red — LIVE, CI red, REQUEST_CHANGES / blocked / failed. */
+export const BAD = fg256(167);
+/** Semantic yellow — stale data, arming, budget overruns. */
+export const WARN = fg256(179);
+/** Chip backgrounds — badge()'s fills, also the deploy tab's armed buttons. */
+export const OK_BG = `${bg256(71)}${INK_ON_FILL}`;
+export const BAD_BG = `${bg256(124)}${fg256(231)}`;
+export const WARN_BG = `${bg256(179)}${INK_ON_FILL}`;
+export const RESET = SGR.reset;
+
+/** Mouse-selection highlight. Inverse rather than a palette fill:
+ * the selected span may be ANY content — a board row, a diff line, pi's own
+ * coloured output — and inverse is the one treatment that stays legible over
+ * all of it, which is also why terminals use it for their own selection. */
+export const SELECTION = SGR.inverse;
+
+/** The uniform " · " separator for status lines (muted, ink restored). */
+export const SEP = `${MUTED} · ${RESET}`;
+
+// ---- helpers ---------------------------------------------------------------
+
+/** The one section-header language: `▍TITLE` accent+bold, muted subtitle. */
+export function sectionTitle(title: string, subtitle = ""): string {
+  const head = `${HEADING}▍${title}${RESET}`;
+  return subtitle.length > 0 ? `${head} ${MUTED}${subtitle}${RESET}` : head;
+}
+
+// CSI SGR sequences only — OSC-8 hyperlinks must survive a selection wrap.
+const SGR_RE = /\x1b\[[0-9;]*m/g;
+
+/**
+ * The selection style: accent background over the whole line. Inner SGR
+ * styling is stripped (a selection bar reads as one piece; per-token colors
+ * return when the row is deselected); OSC-8 links are kept clickable.
+ * Cell math is untouched: displayWidth(selected(l)) === displayWidth(l).
+ */
+export function selected(line: string): string {
+  return `${ACCENT_BG}${line.replace(SGR_RE, "")}${RESET}`;
+}
+
+/** Focus tick for pane headers/prompts: accent `▌` focused, blank otherwise. */
+export function focusMark(focused: boolean): string {
+  return focused ? `${ACCENT}▌${RESET}` : " ";
+}
+
+export type BadgeKind = "live" | "ok" | "bad" | "warn" | "accent";
+
+const BADGE_BG: Record<BadgeKind, string> = {
+  live: BAD_BG,
+  ok: OK_BG,
+  bad: BAD_BG,
+  warn: WARN_BG,
+  accent: ACCENT_BG,
+};
+
+/** Status chip (LIVE, DRY-RUN, verdicts, CI states): ` TEXT ` on a solid
+ * semantic background. Red/green chips carry truth only. */
+export function badge(kind: BadgeKind, text: string): string {
+  return `${BADGE_BG[kind]}${SGR.bold} ${stripAnsi(text)} ${RESET}`;
+}
+
+/**
+ * The one top-bar mode chip: LIVE is red truth, DRY-RUN rides the accent.
+ *
+ * `undefined` means not yet known and must never render as either: a live
+ * install painted `DRY-RUN` from a default reads as "someone flipped the flag
+ * on my live reviewer". The badge is only ever asserted from a heartbeat.
+ */
+export function modeBadge(dryRun: boolean | undefined): string {
+  if (dryRun === undefined) return badge("warn", "MODE UNKNOWN");
+  return dryRun ? badge("accent", "DRY-RUN") : badge("live", "LIVE");
+}
+
+/**
+ * `[k label]` button: muted brackets, accent-bold key glyph when the label
+ * leads with a `<key> <word>` pair, plain ink otherwise. Same visible text as
+ * the plain `[label]` — geometry (hit zones, slot widths) is untouched.
+ */
+export function button(label: string, active = false): string {
+  if (active) return `${ACCENT_BG}${SGR.bold}[${stripAnsi(label)}]${RESET}`;
+  const chars = [...label];
+  const keyed = chars.length > 1 && chars[1] === " ";
+  const head = keyed ? `${ACCENT}${SGR.bold}${chars[0]}${RESET}` : "";
+  const rest = keyed ? chars.slice(1).join("") : label;
+  return `${MUTED}[${RESET}${head}${rest}${MUTED}]${RESET}`;
+}

package/src/tui/digesttab.ts

@@ -0,0 +1,214 @@
+// `[3] digest` — the document the EOD sweep writes, `digest/<date>.md`,
+// rendered full width and read top to bottom. Its own tab because
+// the operator reads it as a document rather than looking things up in it; `[`
+// and `]` page to older / newer days, j/k scroll. Before the day's sweep the
+// newest digest is yesterday's — it renders with a "(yesterday)" tag rather
+// than pretending. "Yesterday" is a day in the `[eod]` timezone, the zone the
+// sweep names its file in.
+//
+// The digest is a file on the VM, so "there is none" and "I could not look"
+// are different facts: the fetcher's `list` is undefined when the
+// listing itself failed, and the tab says so instead of showing an empty day.
+import type { TuiConfig } from "../config.js";
+import { DIGEST_DIR_NAME, digestFiles, zoneDateString } from "../eod.js";
+import type { App } from "./app.js";
+import { barHeight, paintCmdBar, type LiveKeys } from "./cmdbar.js";
+import { HEADING, MUTED, RESET, modeBadge } from "./design.js";
+import { emptyLine } from "./emptystate.js";
+import type { BoardKey } from "./keys.js";
+import type { LearningStore } from "./learning.js";
+import { Frame, rule, sanitizeText } from "./paint.js";
+import { dockerShArgv, type SshRunner } from "./remote.js";
+import { remoteSandboxRoot, resolveLayout } from "./layout.js";
+
+export function digestListArgv(cfg: TuiConfig): string[] {
+  // A directory that does not exist yet is an EMPTY digest, not a failed
+  // read — the sweep creates it with the first file. One that exists but
+  // cannot be listed fails the exec, like a failed ssh, and the fetcher
+  // reports both as undefined.
+  const dir = `${remoteSandboxRoot(cfg)}/${DIGEST_DIR_NAME}`;
+  return dockerShArgv(cfg, `if [ -e '${dir}' ]; then ls '${dir}'; fi`);
+}
+
+export function digestCatArgv(cfg: TuiConfig, file: string): string[] {
+  return dockerShArgv(cfg, `cat '${remoteSandboxRoot(cfg)}/${DIGEST_DIR_NAME}/${file}'`);
+}
+
+/** Digest file names are `<YYYY-MM-DD>.md`; anything else is ignored. */
+export function parseDigestList(stdout: string): string[] {
+  return digestFiles(stdout.split("\n").map((l) => l.trim()));
+}
+
+/** Light markdown styling: headings accent, bullets kept, everything else raw. */
+export function styleDigestLine(line: string): string {
+  const heading = /^#{1,3} (.*)$/.exec(line);
+  return heading ? `${HEADING}${heading[1]}${RESET}` : line;
+}
+
+/** When the EOD sweep runs (`[eod] time` / `timezone`) — the zone its digest
+ * files are named in. */
+export interface EodSchedule {
+  time: string;
+  timezone: string;
+}
+
+/** Today's digest date: the calendar day in the sweep's zone, or the UTC day
+ * when the schedule was not handed in. */
+export function digestToday(now: Date, eod?: EodSchedule): string {
+  return eod ? zoneDateString(now, eod.timezone) : now.toISOString().slice(0, 10);
+}
+
+export interface DigestFetcher {
+  /** The digest files, oldest first — or undefined when the listing FAILED
+   * (an empty array is a real answer: nothing written yet). */
+  list(): Promise<string[] | undefined>;
+  read(file: string): Promise<string | undefined>;
+}
+
+export class SshDigestFetcher implements DigestFetcher {
+  constructor(
+    private readonly cfg: TuiConfig,
+    private readonly ssh: SshRunner,
+  ) {}
+
+  async list(): Promise<string[] | undefined> {
+    await resolveLayout(this.cfg, this.ssh);
+    const res = await this.ssh(this.cfg.ssh_host, digestListArgv(this.cfg));
+    return res.ok ? parseDigestList(res.stdout) : undefined;
+  }
+
+  async read(file: string): Promise<string | undefined> {
+    const res = await this.ssh(this.cfg.ssh_host, digestCatArgv(this.cfg, file));
+    return res.ok ? res.stdout : undefined;
+  }
+}
+
+export interface DigestState {
+  /** Undefined until listed; stays undefined when the listing failed. */
+  files?: string[];
+  /** Why `files` is undefined after a load — the read failed, not "none". */
+  listError?: string;
+  /** Offset back from the newest file: 0 = latest, 1 = one older, … */
+  back: number;
+  content?: string;
+  /** Why `content` is undefined after a read of the current file — the cat
+   * failed, which is not "still loading". */
+  contentError?: string;
+  scroll: number;
+}
+
+export function currentDigestFile(st: DigestState): string | undefined {
+  const files = st.files ?? [];
+  return files[files.length - 1 - st.back];
+}
+
+/** What the digest answers to: a page key only when there is a page that way. */
+export function digestKeys(st: DigestState): LiveKeys {
+  const files = st.files ?? [];
+  const bar = [];
+  if (st.back < files.length - 1) bar.push({ key: "[", label: "[ older" });
+  if (st.back > 0) bar.push({ key: "]", label: "] newer" });
+  return { bar, inline: [] };
+}
+
+/** The calendar day before a `YYYY-MM-DD` date, or undefined when it is not one. */
+function previousDay(day: string): string | undefined {
+  const t = Date.parse(`${day}T00:00:00Z`);
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(day) || Number.isNaN(t)) return undefined;
+  return new Date(t - 86_400_000).toISOString().slice(0, 10);
+}
+
+export function renderDigestTab(
+  st: DigestState,
+  dryRun: boolean | undefined,
+  today: string,
+  cols: number,
+  rows: number,
+  eod?: EodSchedule,
+): Frame {
+  const frame = new Frame(cols, rows);
+  const file = currentDigestFile(st);
+  const date = file?.slice(0, 10);
+  const tag = date && date === previousDay(today) ? " (yesterday)" : "";
+  const files = st.files;
+  const count = files === undefined ? "—" : String(files.length);
+  frame.set(
+    0,
+    rule(cols, "┌", "┐", [
+      `${HEADING}quickreview${RESET}`,
+      modeBadge(dryRun),
+      `digest ${date ?? "—"}${tag}`,
+      `${MUTED}${count} days${RESET}`,
+    ]),
+  );
+
+  const live = digestKeys(st);
+  const bodyRows = rows - 2 - barHeight("digest", cols, live.bar); // top bar + command bar + bottom border
+
+  const body: string[] = [];
+  if (st.listError !== undefined)
+    body.push(emptyLine({ kind: "unreadable", why: `${st.listError} · r retries` }));
+  else if (files === undefined)
+    body.push(emptyLine({ kind: "unread", how: "listing digest/ on the VM" }));
+  else if (!file)
+    body.push(
+      emptyLine({
+        kind: "none",
+        what: eod
+          ? `the EOD sweep writes digest/<date>.md at ${eod.time} ${eod.timezone}`
+          : "the EOD sweep writes digest/<date>.md once a day, at [eod] time",
+      }),
+    );
+  else if (st.contentError !== undefined)
+    body.push(emptyLine({ kind: "unreadable", why: `${st.contentError} · r retries` }));
+  else if (st.content === undefined) body.push(`${MUTED}loading ${file}…${RESET}`);
+  else for (const line of sanitizeText(st.content).split("\n")) body.push(styleDigestLine(line));
+
+  const from = Math.max(0, Math.min(st.scroll, body.length - bodyRows));
+  for (let r = 0; r < bodyRows; r++) {
+    frame.boxRow(1 + r, [{ text: ` ${body[from + r] ?? ""}`, width: cols - 2 }]);
+  }
+  paintCmdBar(frame, "digest", cols, rows, live.bar);
+  frame.set(rows - 1, rule(cols, "└", "┘", []));
+  return frame;
+}
+
+/** Install the digest surface over the shared learning store. */
+export function installDigestTab(app: App, store: LearningStore, eod?: EodSchedule): void {
+  app.hooks.tabs.digest = {
+    keys: () => digestKeys(store.digest),
+    screen: (theApp, cols, rows) => {
+      store.ensureDigest();
+      return renderDigestTab(
+        store.digest,
+        theApp.view.dryRun,
+        digestToday(store.now(), eod),
+        cols,
+        rows,
+        eod,
+      );
+    },
+    key: (theApp, key: BoardKey): boolean => {
+      switch (key.kind) {
+        // j/k AND the arrows scroll the document — there is nothing on this
+        // surface to select.
+        case "down":
+        case "up":
+          if (key.kind === "down") store.digest.scroll += 1;
+          else store.digest.scroll = Math.max(0, store.digest.scroll - 1);
+          theApp.repaint();
+          return true;
+        case "older":
+        case "newer":
+          if (!store.pageDigest(key.kind === "older" ? 1 : -1)) return false;
+          theApp.repaint();
+          return true;
+        case "refresh":
+          store.reloadDigest();
+          return true;
+        default:
+          return false;
+      }
+    },
+  };
+}

package/src/tui/emptystate.ts

@@ -0,0 +1,39 @@
+// The three-way empty grammar: a list with nothing in it is one of three
+// different facts, and a count is a
+// claim. Every list on every surface renders one of these — never a bare
+// "none", and never `(0)` for something nobody has read.
+//
+//   ▍SECTION (0)     none yet — <what would fill it>            empty
+//   ▍SECTION (0)     none matching — <what clearing shows>      filtered-empty
+//   ▍SECTION (—)     not read yet — <what would read it>        unknown, pending
+//   ▍SECTION (—)     could not read — <why>                     unknown, failed
+//
+// `(—)` is the unknown count. This is the shared spelling, so the surfaces
+// cannot each invent their own.
+import { MUTED, RESET, WARN } from "./design.js";
+
+export type Emptiness =
+  | { kind: "none"; what: string }
+  | { kind: "filtered"; what: string }
+  | { kind: "unread"; how: string }
+  | { kind: "unreadable"; why: string };
+
+/** `(12)` for a count that was read; `(—)` for one that was not. */
+export function countLabel(n: number | undefined): string {
+  return n === undefined ? "(—)" : `(${n})`;
+}
+
+/** The one line an empty list shows, styled: muted for a real emptiness,
+ * warning-coloured for a read that failed. */
+export function emptyLine(e: Emptiness): string {
+  switch (e.kind) {
+    case "none":
+      return `${MUTED}none yet — ${e.what}${RESET}`;
+    case "filtered":
+      return `${MUTED}none matching — ${e.what}${RESET}`;
+    case "unread":
+      return `${MUTED}not read yet — ${e.how}${RESET}`;
+    case "unreadable":
+      return `${WARN}could not read — ${e.why}${RESET}`;
+  }
+}