codemax-cli 0.0.0-stage → 0.1.3

package/src/chat/logo.ts

@@ -0,0 +1,37 @@
+/**
+ * The codemax wordmark for the terminal: the same halftone grid the website
+ * uses ("codemax" in Inter Tight 800, 13 rows, 0 = empty … 9 = full), drawn
+ * with half blocks so two grid rows fit in one terminal line.
+ */
+const GRID = [
+  "0000000000000000000000000028870000000000000000000000000000000000000000000000",
+  "0000000000000000000000000029970000000000000000000000000000000000000000000000",
+  "0000000000000000000000000029970000000000000000000000000000000000000000000000",
+  "0036876200003687510000477429970004787410057715773027861000267863004773005773",
+  "0699999930069999993006999979970079999981079969999499998104999999501998029970",
+  "3999559980499856998039996599970599635996079996899976999319983399910599369920",
+  "7994006992899300799359960049970899100799079930299800699402210189920189899600",
+  "8992000000999100599569940029971999999999179920199700599401578999920049999100",
+  "8992000000999100599569940029971999777777179920199700599418998689920049999100",
+  "7994006992899300799359960049970999000121079920199700599449950079920199899600",
+  "3998459980599846999139996599970599634998079920199700599459951399920699369930",
+  "0699999930079999993007999979970189999993079920199700599429999989922997029980",
+  "0047886200004788620000577517750015788620057720177500477303787347725772004773",
+] as const;
+
+/** Logo lines for a terminal this wide: the full 76-column logo from 78 columns, none below. */
+export function logoLines(width: number): string[] {
+  // Squeezed to half width the letters run together, so narrow terminals get the text title instead.
+  if (width < 78) return [];
+  const on = (r: number, c: number) => Number(GRID[r]?.[c] ?? "0") >= 4;
+  const lines: string[] = [];
+  for (let r = 0; r < GRID.length; r += 2) {
+    let line = "";
+    for (let c = 0; c < GRID[0]!.length; c++) {
+      const up = on(r, c), down = on(r + 1, c);
+      line += up && down ? "█" : up ? "▀" : down ? "▄" : " ";
+    }
+    lines.push(line.replace(/\s+$/, ""));
+  }
+  return lines;
+}

package/src/chat/markdown.ts

@@ -0,0 +1,77 @@
+import { StyledText, bold, dim, fg, italic, stringToStyledText, type TextChunk } from "@opentui/core";
+import { C } from "./theme.ts";
+
+const plain = (s: string): TextChunk[] => (s ? stringToStyledText(s).chunks : []);
+
+/**
+ * Minimal markdown styling for streamed agent text, done without a parser so it
+ * is cheap to re-run on every append: headings bold, `code` dimmed with an
+ * accent, **bold**, *italic*, bullets normalised, fenced code blocks indented
+ * and dimmed, and unified-diff lines coloured.
+ */
+export function styleMarkdown(text: string): StyledText {
+  const chunks: TextChunk[] = [];
+  const lines = text.split("\n");
+  let inFence = false;
+  lines.forEach((line, i) => {
+    if (/^\s*```/.test(line)) {
+      inFence = !inFence;
+      const lang = line.replace(/^\s*```/, "").trim();
+      chunks.push(dim(lang ? `── ${lang} ──` : "──"));
+    } else if (inFence) {
+      chunks.push(...diffOrCode(line));
+    } else if (/^#{1,6}\s/.test(line)) {
+      chunks.push(bold(line.replace(/^#{1,6}\s+/, "")));
+    } else if (/^\s*[-*•]\s+/.test(line)) {
+      const m = line.match(/^(\s*)[-*•]\s+(.*)$/)!;
+      chunks.push(plain(`${m[1]}• `)[0]!, ...inline(m[2]!));
+    } else if (/^\s*\d+\.\s+/.test(line)) {
+      const m = line.match(/^(\s*\d+\.\s+)(.*)$/)!;
+      chunks.push(dim(m[1]!), ...inline(m[2]!));
+    } else if (/^\s*>\s?/.test(line)) {
+      chunks.push(dim("│ "), ...inline(line.replace(/^\s*>\s?/, "")).map((c) => c));
+    } else {
+      chunks.push(...inline(line));
+    }
+    if (i < lines.length - 1) chunks.push(...plain("\n"));
+  });
+  return new StyledText(chunks.length ? chunks : plain(""));
+}
+
+function diffOrCode(line: string): TextChunk[] {
+  if (/^\+(?!\+\+)/.test(line)) return [fg(C.diffAdd)(`  ${line}`)];
+  if (/^-(?!--)/.test(line)) return [fg(C.diffDel)(`  ${line}`)];
+  if (/^@@/.test(line)) return [fg(C.accent)(`  ${line}`)];
+  return [dim(`  ${line}`)];
+}
+
+/** Inline: `code`, **bold**, *italic*. */
+function inline(s: string): TextChunk[] {
+  const out: TextChunk[] = [];
+  const re = /(`[^`]+`)|(\*\*[^*]+\*\*)|(\*[^*\s][^*]*\*)/g;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(s))) {
+    if (m.index > last) out.push(...plain(s.slice(last, m.index)));
+    if (m[1]) out.push(fg(C.accent)(m[1].slice(1, -1)));
+    else if (m[2]) out.push(bold(m[2].slice(2, -2)));
+    else if (m[3]) out.push(italic(m[3].slice(1, -1)));
+    last = m.index + m[0].length;
+  }
+  if (last < s.length) out.push(...plain(s.slice(last)));
+  return out;
+}
+
+/** Tool output: colour diff lines, dim the rest. */
+export function styleToolOutput(text: string): StyledText {
+  const chunks: TextChunk[] = [];
+  const lines = text.split("\n");
+  lines.forEach((line, i) => {
+    if (/^\+(?!\+\+)/.test(line)) chunks.push(fg(C.diffAdd)(line));
+    else if (/^-(?!--)/.test(line)) chunks.push(fg(C.diffDel)(line));
+    else if (/^@@/.test(line)) chunks.push(fg(C.accent)(line));
+    else chunks.push(dim(line));
+    if (i < lines.length - 1) chunks.push(...plain("\n"));
+  });
+  return new StyledText(chunks.length ? chunks : plain(""));
+}

package/src/chat/palette.ts

@@ -0,0 +1,179 @@
+import { BoxRenderable, TextRenderable, type CliRenderer, type KeyEvent } from "@opentui/core";
+import { C, G } from "./theme.ts";
+
+export interface PaletteItem {
+  /** What is matched against the filter and shown first (e.g. "/switch" or "claude"). */
+  label: string;
+  description?: string;
+  /** Optional right-aligned hint (session age, quota, version). */
+  hint?: string;
+  value: string;
+  disabled?: boolean;
+  /** Tie-breaker among equal matches; higher sorts first (built-ins over agent commands). */
+  weight?: number;
+}
+
+export interface PaletteOptions {
+  items: PaletteItem[];
+  /** Initial filter text (e.g. "sw" when the user already typed "/sw"). */
+  filter?: string;
+  /** Header line shown above the rows (e.g. "Switch agent"). */
+  title?: string;
+  onPick: (item: PaletteItem) => void;
+  onClose: () => void;
+  /** Rows to show at most. */
+  maxRows?: number;
+  /** Tab picks the highlighted item instead of moving down (file completion). */
+  tabAccepts?: boolean;
+}
+
+/**
+ * The one list UI codemax uses everywhere: slash commands, /switch, /mode.
+ * Anchored above the input like Claude Code's command menu: `❯ /name   description`.
+ * Filtering is prefix-or-word based so typos never auto-run anything.
+ */
+export class Palette {
+  readonly box: BoxRenderable;
+  private rows: TextRenderable[] = [];
+  private titleRow: TextRenderable;
+  private cursor = 0;
+  private filter: string;
+  private matches: PaletteItem[] = [];
+  private maxRows: number;
+
+  constructor(
+    private renderer: CliRenderer,
+    private opts: PaletteOptions,
+    private anchor: () => { top: number; width: number },
+  ) {
+    this.filter = opts.filter ?? "";
+    this.maxRows = opts.maxRows ?? 8;
+    this.box = new BoxRenderable(renderer, { id: `palette-${Date.now()}`, position: "absolute", left: 0, top: 0, width: "100%", zIndex: 800, flexDirection: "column", paddingX: 1, backgroundColor: C.panel });
+    this.titleRow = new TextRenderable(renderer, { content: "", fg: C.panelDim, bg: C.panel, wrapMode: "none", truncate: true, width: "100%" });
+    this.box.add(this.titleRow);
+    for (let i = 0; i < this.maxRows; i++) {
+      const t = new TextRenderable(renderer, { content: "", fg: C.panelText, bg: C.panel, wrapMode: "none", truncate: true, width: "100%" });
+      this.rows.push(t);
+      this.box.add(t);
+    }
+    this.setFilter(this.filter);
+  }
+
+  setFilter(text: string) {
+    this.filter = text;
+    const q = text.trim().toLowerCase();
+    const scored = this.opts.items
+      .map((it) => ({ it, s: score(it, q) }))
+      .filter((x) => x.s > 0)
+      .sort((a, b) => b.s - a.s || (b.it.weight ?? 0) - (a.it.weight ?? 0) || a.it.label.localeCompare(b.it.label));
+    this.matches = scored.map((x) => x.it);
+    this.cursor = Math.min(this.cursor, Math.max(0, this.matches.length - 1));
+
+    this.render();
+  }
+
+  /** Replace items without losing the highlighted row (matched by value). */
+  setItems(items: PaletteItem[]) {
+    const keep = this.current?.value;
+    this.opts.items = items;
+    this.setFilter(this.filter);
+    const i = this.matches.findIndex((m) => m.value === keep);
+    if (i >= 0) {
+      this.cursor = i;
+      this.render();
+    }
+  }
+
+  get current(): PaletteItem | undefined {
+    return this.matches[this.cursor];
+  }
+
+  render() {
+    const { top, width } = this.anchor();
+    const visible = this.matches.slice(0, this.maxRows);
+    const shown = visible.length;
+    const titleLines = this.opts.title ? 1 : 0;
+    this.titleRow.visible = !!this.opts.title;
+    this.titleRow.content = this.opts.title ?? "";
+    this.box.height = shown + titleLines + (shown === 0 ? 1 : 0);
+    this.box.top = Math.max(0, top - this.box.height);
+    const labelW = Math.min(Math.max(28, Math.floor(width * 0.35)), Math.max(10, ...visible.map((v) => v.label.length + 2)));
+    this.rows.forEach((row, i) => {
+      const it = visible[i];
+      if (!it) {
+        if (i === 0 && shown === 0) {
+          row.visible = true;
+          row.content = this.filter ? `  no matches for "${this.filter}"` : "  nothing here";
+          row.fg = C.panelDim;
+          row.bg = C.panel;
+          return;
+        }
+        row.visible = false;
+        return;
+      }
+      row.visible = true;
+      const sel = i === this.cursor;
+      const label = pad(it.label, labelW);
+      const desc = it.description ?? "";
+      const hint = it.hint ? `  ${it.hint}` : "";
+      const bodyW = Math.max(10, width - 2 - 2 - labelW - hint.length);
+      row.content = `${sel ? G.prompt : " "} ${label}${desc.slice(0, bodyW).padEnd(bodyW)}${hint}`;
+      row.fg = it.disabled ? C.panelDim : sel ? C.selFg : C.panelText;
+      row.bg = sel ? C.selBg : C.panel;
+    });
+  }
+
+  /** Returns true when the key was consumed. */
+  handleKey(key: KeyEvent): boolean {
+    const n = key.name;
+    if (n === "up" || (n === "p" && key.ctrl)) return this.move(-1);
+    if (n === "down" || (n === "n" && key.ctrl)) return this.move(1);
+    if (n === "tab" && !key.shift) {
+      if (this.opts.tabAccepts) {
+        const cur = this.current;
+        if (cur && !cur.disabled) this.opts.onPick(cur);
+        return true;
+      }
+      return this.move(1);
+    }
+    if (n === "escape") {
+      this.opts.onClose();
+      return true;
+    }
+    if (n === "return") {
+      const cur = this.current;
+      if (cur && !cur.disabled) this.opts.onPick(cur);
+      else if (!cur) this.opts.onClose();
+      return true;
+    }
+    return false;
+  }
+
+  private move(d: number): boolean {
+    const n = Math.min(this.matches.length, this.maxRows);
+    if (!n) return true;
+    this.cursor = (this.cursor + d + n) % n;
+    this.render();
+    return true;
+  }
+
+  destroy() {
+    this.box.destroyRecursively();
+  }
+}
+
+/** 3 = prefix match, 2 = word-start match (after : _ - /), 1 = substring in description; 0 = no match. */
+function score(it: PaletteItem, q: string): number {
+  if (!q) return 1;
+  const label = it.label.toLowerCase().replace(/^\//, "");
+  const needle = q.replace(/^\//, "");
+  if (label.startsWith(needle)) return 3;
+  if (label.split(/[:_\-/. ]/).some((w) => w.startsWith(needle))) return 2;
+  if (label.includes(needle)) return 1.5;
+  if ((it.description ?? "").toLowerCase().includes(needle)) return 1;
+  return 0;
+}
+
+function pad(s: string, n: number): string {
+  return s.length >= n ? s.slice(0, n - 1) + " " : s + " ".repeat(n - s.length);
+}

package/src/chat/permission.ts

@@ -0,0 +1,111 @@
+import { BoxRenderable, TextRenderable, type CliRenderer, type KeyEvent } from "@opentui/core";
+import type { PermissionRequest } from "../engines/types.ts";
+import { C, G } from "./theme.ts";
+
+export type PermissionChoice = { optionId: string | null; tellAgent?: boolean };
+
+/**
+ * Permission dialog in Claude Code's words:
+ *   1. Yes
+ *   2. Yes, and don't ask again for this session   (when offered)
+ *   3. No, and tell <agent> what to do differently
+ * Esc = No. Option 3 denies and hands focus back to the input.
+ */
+export class PermissionDialog {
+  readonly box: BoxRenderable;
+  private cursor = 0;
+  private rows: TextRenderable[] = [];
+  private choices: { label: string; optionId: string | null; tellAgent?: boolean }[];
+
+  constructor(
+    renderer: CliRenderer,
+    readonly request: PermissionRequest,
+    agentName: string,
+    private onChoice: (c: PermissionChoice) => void,
+  ) {
+    const once = request.options.find((o) => o.kind === "allow_once") ?? request.options.find((o) => o.kind.startsWith("allow"));
+    const always = request.options.find((o) => o.kind === "allow_always");
+    const reject = request.options.find((o) => o.kind === "reject_once") ?? request.options.find((o) => o.kind.startsWith("reject"));
+    this.choices = [
+      { label: "Yes", optionId: once?.id ?? request.options[0]!.id },
+      ...(always ? [{ label: "Yes, and don't ask again for this session", optionId: always.id }] : []),
+      { label: `No, and tell ${agentName} what to do differently`, optionId: reject?.id ?? null, tellAgent: true },
+    ];
+    this.box = new BoxRenderable(renderer, {
+      id: `perm-${request.id}`,
+      width: "100%",
+      flexShrink: 0,
+      border: true,
+      borderStyle: "rounded",
+      borderColor: C.accent,
+      paddingX: 1,
+      flexDirection: "column",
+    });
+    const what = request.title.length > 160 ? request.title.slice(0, 157) + "…" : request.title;
+    this.box.add(new TextRenderable(renderer, { content: `${agentName} wants to ${verb(request.kind, what)}`, fg: C.accent }));
+    this.box.add(new TextRenderable(renderer, { content: what, wrapMode: "word", width: "100%" }));
+    const detail = request.detail && !request.title.includes(request.detail.split("\n")[0]!.replace(/^\w+: /, "")) ? request.detail : undefined;
+    if (detail) this.box.add(new TextRenderable(renderer, { content: detail.slice(0, 500), fg: C.dim, wrapMode: "word", width: "100%" }));
+    this.box.add(new TextRenderable(renderer, { content: "" }));
+    this.box.add(new TextRenderable(renderer, { content: "Do you want to proceed?" }));
+    this.rows = this.choices.map(() => {
+      const t = new TextRenderable(renderer, { content: "", wrapMode: "none", truncate: true, width: "100%" });
+      this.box.add(t);
+      return t;
+    });
+    this.box.add(new TextRenderable(renderer, { content: "1-3 or ↑/↓ then Enter · Esc to cancel", fg: C.dim }));
+    this.render();
+  }
+
+  private render() {
+    this.choices.forEach((c, i) => {
+      const sel = i === this.cursor;
+      this.rows[i]!.content = ` ${sel ? G.prompt : " "} ${i + 1}. ${c.label}`;
+      this.rows[i]!.fg = sel ? C.accent : undefined;
+    });
+  }
+
+  handleKey(key: KeyEvent): boolean {
+    const n = key.name;
+    const len = this.choices.length;
+    if (n === "up") this.cursor = (this.cursor - 1 + len) % len;
+    else if (n === "down" || n === "tab") this.cursor = (this.cursor + 1) % len;
+    else if (n === "return") return this.pick(this.cursor);
+    else if (/^[1-9]$/.test(n) && Number(n) <= len) return this.pick(Number(n) - 1);
+    // No letter shortcuts: text typed while the dialog is open must never pick an option.
+    else if (n === "escape") return this.pick(len - 1);
+    this.render();
+    return false;
+  }
+
+  private pick(i: number): boolean {
+    const c = this.choices[i]!;
+    this.onChoice({ optionId: c.optionId, tellAgent: c.tellAgent });
+    return true;
+  }
+
+  destroy() {
+    this.box.destroyRecursively();
+  }
+}
+
+function verb(kind: string | undefined, title: string): string {
+  switch (kind) {
+    case "execute":
+      return "run a command";
+    case "edit":
+    case "delete":
+    case "move":
+      return "edit files";
+    case "fetch":
+      return "access the web";
+    case "read":
+    case "search":
+      return "read files";
+  }
+  const t = title.toLowerCase();
+  if (/^(write|edit|create|update|delete|edit files)/.test(t)) return "edit files";
+  if (/^(`|bash|run|terminal|\$|command|sh\b)/.test(t)) return "run a command";
+  if (/fetch|http|web/.test(t)) return "access the web";
+  return "use a tool";
+}

package/src/chat/theme.ts

@@ -0,0 +1,158 @@
+/**
+ * Glyphs and colours. The codemax brand theme: pink is the accent and nothing
+ * else, plum is the one dark ink, and warnings, errors and success keep their
+ * own hues so they never blur into the brand colour.
+ *
+ * Two palettes, picked at startup from the terminal's background (OSC 11, via
+ * OpenTUI) or the `theme` config: "auto" | "dark" | "light". Every coloured
+ * surface sets its own text colour too, so nothing relies on the terminal's
+ * default foreground against a painted background.
+ */
+export const G = {
+  prompt: "❯",
+  bullet: "⏺",
+  nest: "⎿",
+  spinner: ["✻", "✶", "✳", "✢", "·", "✽"],
+  done: "✻",
+  thought: "∴",
+  todo: "☐",
+  doing: "◼",
+  done_: "☒",
+  modeOn: "⏵⏵",
+  modeAsk: "⏵",
+  modePause: "⏸",
+  rule: "─",
+} as const;
+
+export type ThemeName = "dark" | "light";
+
+export interface Palette {
+  /** Brand pink: prompt glyph, borders, selected rows, links, inline code. */
+  accent: string;
+  /** Assistant `⏺` bullet. */
+  assistant: string;
+  /** Tool-call `⏺` bullet. */
+  tool: string;
+  ok: string;
+  warn: string;
+  error: string;
+  /** Plan mode indicator. */
+  plan: string;
+  dim: string;
+  /** Chrome: `⎿`, rules, disabled rows. */
+  dimmer: string;
+  /** Overlay (palette) background and its text. */
+  panel: string;
+  panelText: string;
+  panelDim: string;
+  /** Selected row inside an overlay. */
+  selBg: string;
+  selFg: string;
+  diffAdd: string;
+  diffDel: string;
+  /** Reasoning text. */
+  thought: string;
+  /** Terminal default foreground. */
+  text: string | undefined;
+}
+
+const DARK: Palette = {
+  accent: "#ff5c8d",
+  assistant: "#ffc3d6",
+  tool: "#ff4f86",
+  ok: "#4ade80",
+  warn: "#fbbf24",
+  error: "#f87171",
+  plan: "#67e8f9",
+  dim: "#9ca3af",
+  dimmer: "#4b5563",
+  panel: "#2a0a1b",
+  panelText: "#ffe4ee",
+  panelDim: "#b88a9f",
+  selBg: "#ff5c8d",
+  selFg: "#3a0d25",
+  diffAdd: "#4ade80",
+  diffDel: "#f87171",
+  thought: "#b88a9f",
+  text: undefined,
+};
+
+const LIGHT: Palette = {
+  accent: "#e23571",
+  assistant: "#3a0d25",
+  tool: "#ec3570",
+  ok: "#15803d",
+  warn: "#b45309",
+  error: "#c81e1e",
+  plan: "#0e7490",
+  dim: "#6b7280",
+  dimmer: "#c9bcc3",
+  panel: "#fff0f5",
+  panelText: "#3a0d25",
+  panelDim: "#8a6a7a",
+  selBg: "#ffc3d6",
+  selFg: "#3a0d25",
+  diffAdd: "#15803d",
+  diffDel: "#c81e1e",
+  thought: "#8a6a7a",
+  text: undefined,
+};
+
+/** The live palette. Read at render time; `applyTheme` swaps it in place. */
+export const C: Palette = { ...DARK };
+export let THEME: ThemeName = "dark";
+
+export function applyTheme(mode: ThemeName) {
+  Object.assign(C, mode === "light" ? LIGHT : DARK);
+  THEME = mode;
+}
+
+export const VERBS = ["Thinking", "Pondering", "Brewing", "Weaving", "Crunching", "Sketching", "Tinkering", "Composing", "Mulling", "Noodling", "Percolating", "Assembling"];
+export const DONE_VERBS = ["Worked", "Cooked", "Crunched", "Pondered", "Tinkered", "Composed"];
+export const TIPS = [
+  "Ctrl+^ switches agent and hands over the conversation",
+  "Ctrl+O expands tool output and thinking",
+  "/ask codex <msg> asks another agent without switching",
+  "/undo reverts the files the last turn changed",
+  "@file attaches a file's contents to your message",
+  "!cmd runs a shell command and attaches its output",
+  "/usage shows what each plan has covered today",
+];
+
+export function pick<T>(arr: readonly T[], seed = Date.now()): T {
+  return arr[seed % arr.length]!;
+}
+
+/** Footer wording per permission mode, matching Claude Code's indicator style. */
+export function modeLabel(agent: string, modeId: string | undefined): { glyph: string; text: string; color: string } {
+  switch (modeId) {
+    case "acceptEdits":
+      return { glyph: G.modeOn, text: "accept edits on", color: C.accent };
+    case "plan":
+      return { glyph: G.modePause, text: "plan mode on", color: C.plan };
+    case "bypassPermissions":
+    case "never":
+      return { glyph: G.modeOn, text: "bypass permissions on", color: C.error };
+    case "dontAsk":
+      return { glyph: G.modeOn, text: "don't ask on", color: C.error };
+    case "auto":
+      return { glyph: G.modeOn, text: "auto mode on", color: C.warn };
+    case "ask":
+      return { glyph: G.modePause, text: "ask mode · no edits", color: C.plan };
+    case "on-request":
+    case "default":
+    default:
+      return { glyph: G.modeAsk, text: "asks before acting", color: C.dim };
+  }
+}
+
+export function fmtDuration(ms: number): string {
+  const s = Math.round(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  return `${m}m ${s - m * 60}s`;
+}
+
+export function fmtTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}