@a-t-h-i/bot-lobby 0.4.0 → 0.5.1

package/src/lobby/tabs/home.ts

@@ -0,0 +1,242 @@
+/**
+ * The Lobby tab: the zen scene of this session's task on top, then the
+ * conversation with the oracle (text only, no tool rows, no thinking), the
+ * activity log of plain-words steps from every agent, and the one place where
+ * thoughts show up. Pure: the scene arrives as a callback, the clock as `now`.
+ */
+import type { Task } from "../../schemas/task.ts";
+import type { ActivityEntry, ChatEntry, ThoughtEntry } from "../feed.ts";
+import type { LobbyPanel } from "../../schemas/configuration.ts";
+import { beside, bold, box, clock, fill, italic, markdownHanging, notePane, paint, since, spinner, wrap, wrapHanging, type LobbyColor, type LobbyTheme, type PaneLayout } from "../layout.ts";
+
+/** The Lobby tab's scrollable panes. */
+export const HOME_PANES = ["conversation", "activity", "thinking"] as const;
+export type HomePane = (typeof HOME_PANES)[number];
+
+export interface HomeInput {
+  task?: Task;
+  /** Draws the zen scene into at most `height` lines; absent when no task is active. */
+  scene?: (width: number, height: number) => string[];
+  chat: readonly ChatEntry[];
+  /** The oracle's reply while it streams. */
+  liveReply?: string;
+  activity: readonly ActivityEntry[];
+  thoughts: readonly ThoughtEntry[];
+  /** The Master's turn is running. */
+  busy: boolean;
+  /** Active tasks owned by other sessions, and saved plans waiting to start. */
+  others: number;
+  pending: number;
+  /** How far each pane is scrolled back, in lines from its newest; 0 follows the newest. */
+  offsets?: Partial<Record<HomePane, number>>;
+  /** The pane the arrow keys scroll; its border lights up. */
+  focus?: HomePane;
+  /** Filled with where each pane landed and how much it holds. */
+  panes?: PaneLayout;
+  tick: number;
+  now: number;
+  /** Which panes show. */
+  panels: Record<LobbyPanel, boolean>;
+  /** The search in force: panes show only matching entries. */
+  query?: string;
+  /** Key labels for the pane toggles, shown on the panes. */
+  keys?: Record<LobbyPanel, string>;
+}
+
+/** Wide terminals put the conversation and the activity log side by side. */
+export const HOME_COLUMNS_MIN = 100;
+/** Most lines the scene may take, and its share of the body. */
+const SCENE_SHARE = 0.45;
+const MAX_SCENE = 36;
+
+const SOURCE_COLORS: Record<string, LobbyColor> = {
+  MASTER: "accent",
+  DEV: "success",
+  DESIGN: "mdHeading",
+  QA: "warning",
+  RESEARCH: "toolTitle",
+  "QUICK FIX": "mdCode",
+  ORACLE: "accent",
+  LOBBY: "muted",
+};
+
+export function sourceColor(source: string): LobbyColor {
+  return SOURCE_COLORS[source] ?? "muted";
+}
+
+const SOURCE_WIDTH = 9;
+
+/** One activity line: time, who, what; a running step spins, a finished one is marked. */
+export function activityLine(entry: ActivityEntry, width: number, tick: number, theme?: LobbyTheme): string {
+  const who = paint(theme, sourceColor(entry.source), entry.source.padEnd(SOURCE_WIDTH).slice(0, SOURCE_WIDTH));
+  const mark = entry.pending
+    ? paint(theme, "accent", spinner(tick))
+    : entry.kind === "error"
+      ? paint(theme, "error", "✗")
+      : entry.kind === "warning"
+        ? paint(theme, "warning", "!")
+        : entry.kind === "success"
+          ? paint(theme, "success", "✓")
+          : paint(theme, "dim", "·");
+  const text = entry.pending ? `${entry.text}…` : entry.text;
+  const body = entry.kind === "error" ? paint(theme, "error", text) : entry.pending ? text : paint(theme, "muted", text);
+  return `${paint(theme, "dim", clock(entry.at))} ${who} ${mark} ${body}`;
+}
+
+function chatLead(role: ChatEntry["role"], theme?: LobbyTheme): string {
+  if (role === "you") return `${bold(theme, paint(theme, "accent", "you"))} ${paint(theme, "dim", "▸")} `;
+  if (role === "oracle") return `${bold(theme, paint(theme, "toolTitle", "oracle"))} ${paint(theme, "dim", "▸")} `;
+  return `${paint(theme, "dim", "·")} `;
+}
+
+/** The conversation as wrapped lines, oldest first, a blank line between turns. */
+export function chatLines(chat: readonly ChatEntry[], width: number, theme?: LobbyTheme, live?: string, busy = false, tick = 0): string[] {
+  const lines: string[] = [];
+  const push = (role: ChatEntry["role"], text: string) => {
+    if (lines.length > 0) lines.push("");
+    // The oracle writes Markdown; what you typed and notes are shown as written.
+    if (role === "oracle") lines.push(...markdownHanging(chatLead(role, theme), text, width, theme));
+    else lines.push(...wrapHanging(chatLead(role, theme), role === "note" ? paint(theme, "dim", text) : text, width));
+  };
+  for (const entry of chat) push(entry.role, entry.text);
+  if (live?.trim()) {
+    push("oracle", live.trim());
+    lines[lines.length - 1] = `${lines.at(-1)!.trimEnd()} ${paint(theme, "accent", spinner(tick))}`;
+  } else if (busy) {
+    if (lines.length > 0) lines.push("");
+    lines.push(...wrapHanging(chatLead("oracle", theme), paint(theme, "dim", `${spinner(tick)} working…`), width));
+  }
+  return lines;
+}
+
+function emptyChat(input: HomeInput, width: number, theme?: LobbyTheme): string[] {
+  if (input.query) return wrap(paint(theme, "dim", `Nothing in the conversation matches "${input.query}".`), width);
+  const lines = input.task
+    ? [paint(theme, "dim", "Nothing said yet. Type below to talk to the oracle about this task.")]
+    : [
+        bold(theme, "No task is running in this session."),
+        "",
+        "Type a request below and press enter to start one: the oracle scouts, proposes, plans and delegates.",
+        `Or plan it first with the whole planning panel in ${bold(theme, "3 Plan")}, or make a direct change in ${bold(theme, "4 Quick fix")}.`,
+      ];
+  const extra: string[] = [];
+  if (input.others > 0) extra.push(`${input.others} task${input.others === 1 ? " is" : "s are"} running in other sessions — see ${bold(theme, "2 Tasks")}.`);
+  if (input.pending > 0) extra.push(`${input.pending} planned task${input.pending === 1 ? "" : "s"} waiting to start — see ${bold(theme, "2 Tasks")}.`);
+  return [...lines.flatMap((line) => wrap(line, width)), ...(extra.length > 0 ? ["", ...extra.flatMap((line) => wrap(paint(theme, "muted", line), width))] : [])];
+}
+
+function matches(text: string, query: string | undefined): boolean {
+  return !query || text.toLowerCase().includes(query.toLowerCase());
+}
+
+/** The feed as the search narrows it: only entries whose text (or source) contains the query. */
+export function filterFeed(input: Pick<HomeInput, "chat" | "activity" | "thoughts" | "query">): { chat: ChatEntry[]; activity: ActivityEntry[]; thoughts: ThoughtEntry[] } {
+  const query = input.query?.trim();
+  return {
+    chat: input.chat.filter((entry) => matches(entry.text, query)),
+    activity: input.activity.filter((entry) => matches(`${entry.source} ${entry.text}`, query)),
+    thoughts: input.thoughts.filter((entry) => matches(`${entry.source} ${entry.text}`, query)),
+  };
+}
+
+function conversation(input: HomeInput, chat: readonly ChatEntry[], width: number, theme?: LobbyTheme): string[] {
+  const searching = Boolean(input.query);
+  const live = searching ? undefined : input.liveReply;
+  const busy = !searching && input.busy;
+  return chat.length > 0 || live || busy ? chatLines(chat, width, theme, live, busy, input.tick) : emptyChat(input, width, theme);
+}
+
+function activity(input: HomeInput, entries: readonly ActivityEntry[], width: number, theme?: LobbyTheme): string[] {
+  if (entries.length === 0) return [paint(theme, "dim", input.query ? `No activity matches "${input.query}".` : "No activity yet.")];
+  return entries.map((entry) => activityLine(entry, width, input.tick, theme));
+}
+
+/** The last `rows` lines, `offset` lines back from the newest (clamped), and where they start. */
+export function tailWindow(lines: readonly string[], rows: number, offset = 0): { shown: string[]; start: number; offset: number } {
+  const max = Math.max(0, lines.length - rows);
+  const back = Math.min(Math.max(0, offset), max);
+  const start = max - back;
+  return { shown: lines.slice(start, start + Math.max(0, rows)), start, offset: back };
+}
+
+/** The thought to show: a live one first, otherwise the newest. */
+export function currentThought(thoughts: readonly ThoughtEntry[]): ThoughtEntry | undefined {
+  return [...thoughts].reverse().find((entry) => entry.live) ?? thoughts.at(-1);
+}
+
+/** Every thought, oldest first: who thought it, then the thought, dimmed. */
+export function thoughtLines(thoughts: readonly ThoughtEntry[], width: number, theme?: LobbyTheme): string[] {
+  return thoughts.flatMap((thought) => {
+    const lead = `${paint(theme, sourceColor(thought.source), thought.source.padEnd(SOURCE_WIDTH).slice(0, SOURCE_WIDTH))} `;
+    return wrapHanging(lead, italic(theme, paint(theme, "dim", thought.text.replace(/\s*\n\s*/g, " "))), width);
+  });
+}
+
+function thinkingContent(input: HomeInput, thoughts: readonly ThoughtEntry[], width: number, theme?: LobbyTheme): string[] {
+  if (thoughts.length > 0) return thoughtLines(thoughts, width, theme);
+  return [paint(theme, "dim", input.query ? `No thought matches "${input.query}".` : "Thoughts from the oracle and every agent appear here, and only here.")];
+}
+
+function sceneLines(input: HomeInput, width: number, height: number): string[] {
+  if (!input.task || !input.scene || !input.panels.scene) return [];
+  const budget = Math.min(MAX_SCENE, Math.floor(height * SCENE_SHARE));
+  if (budget < 6) return [];
+  return input.scene(width, budget).slice(0, budget);
+}
+
+function hiddenHint(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  const keys = input.keys;
+  const text = keys
+    ? `Every pane is hidden — ${keys.conversation} conversation · ${keys.activity} activity · ${keys.thinking} thinking${input.task ? ` · ${keys.scene} scene` : ""}`
+    : "Every pane is hidden.";
+  const lines = wrap(paint(theme, "dim", text), width);
+  const top = Math.max(0, Math.floor((height - lines.length) / 2));
+  return fill([...Array.from({ length: top }, () => ""), ...lines], height, width);
+}
+
+/** `↓12` when a pane is scrolled back from its newest line, before the pane's usual note. */
+function rightNote(offset: number, note: string | undefined): string | undefined {
+  const parts = [offset > 0 ? `↓${offset}` : "", note ?? ""].filter(Boolean);
+  return parts.length > 0 ? parts.join(" · ") : undefined;
+}
+
+/** The whole tab, exactly `height` lines of `width` columns; hidden panes give their room to the rest. */
+export function renderHome(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  if (height <= 0) return [];
+  const { panels } = input;
+  const feed = filterFeed(input);
+  const scene = sceneLines(input, width, height);
+  const rest = height - scene.length;
+  const showMain = panels.conversation || panels.activity;
+  const thinkHeight = !panels.thinking ? 0 : !showMain ? rest : rest >= 18 ? Math.max(5, Math.floor(rest * 0.25)) : rest >= 10 ? 4 : 0;
+  const main = rest - thinkHeight;
+  if (!showMain && !panels.thinking) return fill([...scene, ...hiddenHint(input, width, rest, theme)], height, width);
+  const matches = (count: number) => `${count} match${count === 1 ? "" : "es"}`;
+  /** One scrollable pane: its lines, tailed to its rows and scrolled back by its offset, in a box that records where it sits. */
+  const pane = (name: HomePane, title: string, note: string | undefined, lines: (inner: number) => string[]) => (top: number, left: number, w: number, h: number): string[] => {
+    const all = lines(Math.max(1, w - 4));
+    const view = tailWindow(all, h - 2, input.offsets?.[name] ?? 0);
+    notePane(input.panes, name, top, left, w, h, all.length);
+    const right = rightNote(view.offset, note);
+    return box(w, h, view.shown, { title, ...(right ? { right } : {}), focused: input.focus === name, scroll: { total: all.length, start: view.start }, theme });
+  };
+  const chatBox = pane("conversation", input.task ? `Conversation · ${input.task.id}` : "Conversation", input.query ? matches(feed.chat.length) : input.keys?.conversation, (inner) => conversation(input, feed.chat, inner, theme));
+  const activityBox = pane("activity", "Activity", input.query ? matches(feed.activity.length) : input.keys?.activity, (inner) => activity(input, feed.activity, inner, theme));
+  const thought = currentThought(feed.thoughts);
+  const thinkingNote = thought ? `${thought.source} · ${thought.live ? "thinking" : since(input.now - thought.at)}` : input.keys?.thinking;
+  const thinkingBox = pane("thinking", "Thinking", thinkingNote, (inner) => thinkingContent(input, feed.thoughts, inner, theme));
+  const top = scene.length;
+  let body: string[] = [];
+  if (main > 0 && panels.conversation && panels.activity) {
+    if (width >= HOME_COLUMNS_MIN) {
+      const left = Math.round((width - 1) * 0.56);
+      body = beside([chatBox(top, 0, left, main), activityBox(top, left + 1, width - 1 - left, main)]);
+    } else {
+      const chatHeight = Math.max(3, Math.ceil(main * 0.6));
+      body = [...chatBox(top, 0, width, chatHeight), ...(main - chatHeight >= 3 ? activityBox(top + chatHeight, 0, width, main - chatHeight) : [])];
+    }
+  } else if (main > 0 && panels.conversation) body = chatBox(top, 0, width, main);
+  else if (main > 0 && panels.activity) body = activityBox(top, 0, width, main);
+  const think = thinkHeight >= 3 ? thinkingBox(top + main, 0, width, thinkHeight) : [];
+  return fill([...scene, ...fill(body, main), ...think], height, width);
+}

package/src/lobby/tabs/issues.ts

@@ -0,0 +1,72 @@
+/**
+ * The Issues tab: the repository's open GitHub issues through `gh`, the
+ * selected issue with its comments, and the way into planning it (p) before it
+ * becomes a task.
+ */
+import type { IssueDetail, IssueSummary } from "../issues.ts";
+import { bold, since, columns, fill, paint, rule, selectRow, spinner, split, windowStart, wrap, type LobbyTheme } from "../layout.ts";
+
+export interface IssuesTabInput {
+  issues: readonly IssueSummary[];
+  selected: number;
+  detail?: IssueDetail;
+  focus: "list" | "detail";
+  detailOffset: number;
+  loading: boolean;
+  loaded: boolean;
+  error?: string;
+  notice?: string;
+  tick: number;
+  now: number;
+}
+
+export const ISSUES_COLUMNS_MIN = 90;
+
+export function issueDetailLines(issue: IssueDetail, width: number, now: number, theme?: LobbyTheme): string[] {
+  const facts = [
+    issue.state ? paint(theme, issue.state === "OPEN" ? "success" : "dim", issue.state.toLowerCase()) : "",
+    issue.author ? `by ${issue.author}` : "",
+    issue.updatedAt ? `updated ${since(now - Date.parse(issue.updatedAt))}` : "",
+    issue.labels.length > 0 ? paint(theme, "warning", issue.labels.join(", ")) : "",
+  ].filter(Boolean);
+  const lines = [...wrap(bold(theme, `#${issue.number} ${issue.title}`), width), facts.join(paint(theme, "dim", " · "))];
+  if (issue.url) lines.push(paint(theme, "dim", issue.url));
+  lines.push("", paint(theme, "dim", "p plans it with the planning panel, then save it as a task"), "", ...wrap(issue.body.trim() || paint(theme, "dim", "(no description)"), width));
+  for (const comment of issue.comments) {
+    lines.push("", rule(width, comment.author ?? "comment", theme, comment.createdAt ? since(now - Date.parse(comment.createdAt)) : ""), ...wrap(comment.body.trim(), width));
+  }
+  return lines;
+}
+
+function empty(input: IssuesTabInput, width: number, theme?: LobbyTheme): string[] {
+  if (input.loading) return [`${paint(theme, "accent", spinner(input.tick))} loading issues from GitHub…`];
+  if (input.error) return [];
+  if (!input.loaded) return wrap(paint(theme, "dim", "Press r to load open issues with the GitHub CLI (gh)."), width);
+  return wrap(paint(theme, "dim", "No open issues. Press n to file one."), width);
+}
+
+export function renderIssues(input: IssuesTabInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  if (height <= 0) return [];
+  const banner = [
+    ...(input.error ? wrap(paint(theme, "error", `✗ ${input.error}`), width) : []),
+    ...(input.notice ? wrap(paint(theme, "success", input.notice), width) : []),
+  ];
+  const bodyHeight = Math.max(0, height - banner.length);
+  if (input.issues.length === 0) return fill([...banner, rule(width, "Issues", theme), ...empty(input, width, theme)], height, width);
+  const selected = Math.min(Math.max(0, input.selected), input.issues.length - 1);
+  const wide = width >= ISSUES_COLUMNS_MIN;
+  const [listWidth, detailWidth] = wide ? split(width, 0.4, 3, 40) : [width, width];
+  const rows = input.issues.map((issue, index) => {
+    const labels = issue.labels.length > 0 ? ` ${paint(theme, "warning", `[${issue.labels.slice(0, 2).join(", ")}]`)}` : "";
+    const title = index === selected ? bold(theme, issue.title) : issue.title;
+    return selectRow(theme, `${paint(theme, "dim", `#${issue.number}`)} ${title}${labels}`, listWidth, index === selected, input.focus === "list");
+  });
+  const right = input.loading ? `${spinner(input.tick)} refreshing` : `${input.issues.length} open`;
+  const listPane = fill([rule(listWidth, "Issues", theme, right), ...rows.slice(windowStart(selected, rows.length, bodyHeight - 1))], bodyHeight);
+  const detail = input.detail && input.detail.number === input.issues[selected]!.number
+    ? issueDetailLines(input.detail, detailWidth, input.now, theme)
+    : [`${paint(theme, "accent", spinner(input.tick))} loading #${input.issues[selected]!.number}…`];
+  const detailPane = fill([rule(detailWidth, input.focus === "detail" ? "Issue ◂" : "Issue", theme), ...detail.slice(Math.max(0, Math.min(input.detailOffset, detail.length - 1)))], bodyHeight);
+  if (!wide) return fill([...banner, ...(input.focus === "detail" ? detailPane : listPane)], height, width);
+  return fill([...banner, ...columns(listPane, detailPane, listWidth, detailWidth, " │ ", theme)], height, width);
+}

package/src/lobby/tabs/metrics.ts

@@ -0,0 +1,275 @@
+/**
+ * The Metrics tab: how each model performs at each thinking level, as a
+ * dashboard — a row of stat tiles, average run time as bars (one hue),
+ * success rate as meters with a status icon, where the time goes by agent as
+ * a stacked bar with a legend, and the full table underneath (columns drop
+ * from the right as the terminal narrows). It covers the Master, every
+ * subagent role, quick fixes and planning rounds.
+ */
+import { shortDuration } from "../../text.ts";
+import { tokens } from "../../pi/run-summary.ts";
+import type { GroupBy, MetricGroup, MetricRecord, SortKey, TaskStats, TaskTimeGroup } from "../../state/metrics.ts";
+import { bar, beside, bold, box, fill, fit, meter, notePane, paint, selectRow, sparkline, stackedBar, windowStart, wrap, type LobbyTheme, type PaneLayout } from "../layout.ts";
+import { sourceColor } from "./home.ts";
+
+export interface MetricsTabInput {
+  groups: readonly MetricGroup[];
+  /** Completed tasks' request-to-done time by the oracle's model and thinking. */
+  taskTimes?: readonly TaskTimeGroup[];
+  records: readonly MetricRecord[];
+  stats: TaskStats;
+  by: GroupBy;
+  sort: SortKey;
+  selected: number;
+  /** The search in force; records and groups are already narrowed by it. */
+  query?: string;
+  /** Filled with where the table landed, for the wheel. */
+  panes?: PaneLayout;
+}
+
+interface Column {
+  title: string;
+  width: number;
+  align: "left" | "right";
+  cell: (group: MetricGroup) => string;
+}
+
+function percent(part: number, whole: number): string {
+  return whole > 0 ? `${Math.round((part / whole) * 100)}%` : "—";
+}
+
+function duration(ms: number): string {
+  return ms > 0 ? shortDuration(ms) : "—";
+}
+
+function money(value: number): string {
+  if (value <= 0) return "—";
+  return value < 0.01 ? "<$0.01" : `$${value.toFixed(2)}`;
+}
+
+const KIND_LABELS: Record<string, string> = {
+  master: "master",
+  scout: "scout",
+  worker: "worker",
+  reviewer: "QA gate",
+  researcher: "research",
+  quickfix: "quick fix",
+  planner: "oracle (plan)",
+  panel: "panel",
+};
+
+/** Columns in priority order; the table keeps as many as the width allows. */
+const COLUMNS: readonly Column[] = [
+  { title: "Runs", width: 5, align: "right", cell: (g) => String(g.runs) },
+  { title: "OK", width: 5, align: "right", cell: (g) => percent(g.successes, g.runs) },
+  { title: "Avg", width: 8, align: "right", cell: (g) => duration(g.avgMs) },
+  { title: "p50", width: 8, align: "right", cell: (g) => duration(g.p50Ms) },
+  { title: "p90", width: 8, align: "right", cell: (g) => duration(g.p90Ms) },
+  { title: "Turns", width: 6, align: "right", cell: (g) => (g.avgTurns > 0 ? g.avgTurns.toFixed(1) : "—") },
+  { title: "Tools", width: 6, align: "right", cell: (g) => (g.avgTools > 0 ? g.avgTools.toFixed(1) : "—") },
+  { title: "Tokens", width: 7, align: "right", cell: (g) => (g.avgTokens > 0 ? tokens(g.avgTokens) : "—") },
+  { title: "tok/s", width: 6, align: "right", cell: (g) => (g.tokensPerSecond > 0 ? g.tokensPerSecond.toFixed(0) : "—") },
+  { title: "$/run", width: 7, align: "right", cell: (g) => money(g.avgCost) },
+  { title: "$ total", width: 8, align: "right", cell: (g) => money(g.totalCost) },
+  { title: "Stalls", width: 6, align: "right", cell: (g) => (g.timeouts > 0 ? String(g.timeouts) : "—") },
+];
+
+const MODEL_MIN = 30;
+const THINK_WIDTH = 7;
+const AGENTS_WIDTH = 14;
+
+function align(text: string, width: number, side: "left" | "right"): string {
+  const cut = fit(text, width).trimEnd();
+  return side === "right" ? cut.padStart(width) : fit(cut, width);
+}
+
+/** The columns that fit: model, thinking and agents first, then metrics in priority order. */
+export function fittedColumns(width: number): Column[] {
+  let used = MODEL_MIN + 1 + THINK_WIDTH + 1 + AGENTS_WIDTH;
+  const kept: Column[] = [];
+  for (const column of COLUMNS) {
+    if (used + 1 + column.width > width) break;
+    kept.push(column);
+    used += 1 + column.width;
+  }
+  return kept;
+}
+
+function agentsCell(group: MetricGroup, by: GroupBy): string {
+  const kinds = group.kinds.map((kind) => KIND_LABELS[kind] ?? kind);
+  return by === "model-kind" ? kinds[0] ?? "" : kinds.join(", ");
+}
+
+export function tableLines(input: MetricsTabInput, width: number, theme?: LobbyTheme): { header: string; rows: string[] } {
+  const kept = fittedColumns(width);
+  const fixed = kept.reduce((sum, column) => sum + 1 + column.width, 0);
+  const modelWidth = Math.max(MODEL_MIN, width - fixed - 1 - THINK_WIDTH - 1 - AGENTS_WIDTH);
+  const head = [fit("Model", modelWidth), fit("Think", THINK_WIDTH), fit(input.by === "model-kind" ? "Agent" : "Agents", AGENTS_WIDTH), ...kept.map((column) => align(column.title, column.width, column.align))].join(" ");
+  const rows = input.groups.map((group, index) => {
+    const cells = [
+      fit(group.model, modelWidth),
+      fit(group.thinking, THINK_WIDTH),
+      fit(agentsCell(group, input.by), AGENTS_WIDTH),
+      ...kept.map((column) => align(column.cell(group), column.width, column.align)),
+    ].join(" ");
+    return selectRow(theme, index === input.selected ? bold(theme, cells) : cells, width, index === input.selected);
+  });
+  return { header: bold(theme, paint(theme, "muted", fit(head, width))), rows };
+}
+
+/** A stat tile: the label in its border, the value large, one line of context. */
+function tile(width: number, label: string, value: string, sub: string, theme?: LobbyTheme): string[] {
+  return box(width, 4, [bold(theme, paint(theme, "accent", value)), paint(theme, "dim", sub)], { title: label, theme });
+}
+
+function timed(records: readonly MetricRecord[]): MetricRecord[] {
+  return records.filter((record) => record.status !== "cancelled" && record.durationMs > 0);
+}
+
+/** The KPI row: runs (with recent run times), success, average run, cost, tasks. */
+export function tileRow(input: MetricsTabInput, width: number, theme?: LobbyTheme): string[] {
+  const { records, stats } = input;
+  const done = timed(records);
+  const ok = records.filter((record) => record.status === "success").length;
+  const stalls = records.filter((record) => record.stalled || record.status === "timeout").length;
+  const cost = records.reduce((sum, record) => sum + (record.cost ?? 0), 0);
+  const avg = done.length > 0 ? done.reduce((sum, record) => sum + record.durationMs, 0) / done.length : 0;
+  const sorted = done.map((record) => record.durationMs).sort((a, b) => a - b);
+  const p90 = sorted.length > 0 ? sorted[Math.min(sorted.length - 1, Math.ceil(0.9 * sorted.length) - 1)]! : 0;
+  const count = width >= 100 ? 5 : width >= 60 ? 3 : 2;
+  const tileWidth = Math.floor((width - (count - 1)) / count);
+  const rate = records.length > 0 ? ok / records.length : 0;
+  const tiles = [
+    tile(tileWidth, "Runs", String(records.length), sparkline(done.map((record) => record.durationMs), tileWidth - 4) || "no runs yet", theme),
+    tile(tileWidth, "Success", records.length > 0 ? `${status(rate).icon} ${Math.round(rate * 100)}%` : "—", `${records.length - ok} failed${stalls > 0 ? ` · ${stalls} stalled` : ""}`, theme),
+    tile(tileWidth, "Avg run", duration(avg), `p90 ${duration(p90)}`, theme),
+    tile(tileWidth, "Cost", money(cost), records.length > 0 ? `${money(cost / records.length)} per run` : "—", theme),
+    tile(tileWidth, "Tasks", `${stats.completed} done`, stats.avgCompleteMs > 0 ? `avg ${shortDuration(stats.avgCompleteMs)} · ${stats.active} active` : `${stats.active} active`, theme),
+  ].slice(0, count);
+  return beside(tiles);
+}
+
+/** Success thresholds, each with an icon so the state never rests on colour alone. */
+function status(rate: number): { icon: string; color: "success" | "warning" | "error"; word: string } {
+  if (rate >= 0.9) return { icon: "✓", color: "success", word: "healthy" };
+  if (rate >= 0.7) return { icon: "!", color: "warning", word: "shaky" };
+  return { icon: "✗", color: "error", word: "failing" };
+}
+
+/** Room for `model · thinking` beside a chart's marks: about a third of it, 10 to 26 columns. */
+function chartLabelWidth(inner: number): number {
+  return Math.min(26, Math.max(10, Math.floor(inner * 0.34)));
+}
+
+function groupLabel(group: MetricGroup, by: GroupBy): string {
+  const agent = by === "model-kind" ? ` · ${agentsCell(group, by)}` : "";
+  return `${group.model} · ${group.thinking}${agent}`;
+}
+
+/** Average run time per model and thinking level: one hue, longest first, value and p90 beside each bar. */
+export function timeBars(groups: readonly MetricGroup[], by: GroupBy, width: number, height: number, theme?: LobbyTheme): string[] {
+  const inner = width - 4;
+  const rows = [...groups].filter((group) => group.avgMs > 0).sort((a, b) => b.avgMs - a.avgMs).slice(0, Math.max(0, height - 2));
+  const labelWidth = chartLabelWidth(inner);
+  // The p90 goes first when room runs out.
+  const withP90 = inner - labelWidth >= 34;
+  const valueWidth = withP90 ? 19 : 7;
+  const barWidth = Math.max(4, inner - labelWidth - valueWidth - 2);
+  const max = Math.max(...rows.map((group) => group.avgMs), 1);
+  const lines = rows.map((group) => {
+    const value = `${duration(group.avgMs).padStart(7)}${withP90 ? ` ${paint(theme, "dim", `p90 ${duration(group.p90Ms)}`)}` : ""}`;
+    return `${paint(theme, "muted", fit(groupLabel(group, by), labelWidth))} ${fit(paint(theme, "accent", bar(group.avgMs, max, barWidth)), barWidth)} ${value}`;
+  });
+  return box(width, height, lines.length > 0 ? lines : [paint(theme, "dim", "No timed runs yet.")], { title: "Average run time", right: "per model · thinking", theme });
+}
+
+/** Success rate per model and thinking level: a meter, an icon and the number. */
+export function successMeters(groups: readonly MetricGroup[], by: GroupBy, width: number, height: number, theme?: LobbyTheme): string[] {
+  const inner = width - 4;
+  const rows = [...groups].sort((a, b) => a.successes / a.runs - b.successes / b.runs).slice(0, Math.max(0, height - 2));
+  const labelWidth = chartLabelWidth(inner);
+  const meterWidth = Math.max(4, inner - labelWidth - 12);
+  const lines = rows.map((group) => {
+    const rate = group.runs > 0 ? group.successes / group.runs : 0;
+    const state = status(rate);
+    const paintFill = (text: string) => paint(theme, state.color, text);
+    const paintTrack = (text: string) => paint(theme, "borderMuted", text);
+    return `${paint(theme, "muted", fit(groupLabel(group, by), labelWidth))} ${meter(rate, meterWidth, paintFill, paintTrack)} ${paint(theme, state.color, state.icon)} ${`${Math.round(rate * 100)}%`.padStart(4)} ${paint(theme, "dim", `${group.runs}`)}`;
+  });
+  return box(width, height, lines.length > 0 ? lines : [paint(theme, "dim", "No runs yet.")], { title: "Success rate", right: "✓ ≥90% · ! ≥70% · ✗ below", theme });
+}
+
+/** Where the time goes: each agent's share of all run time, then how long a task takes per oracle model. */
+export function timeShare(records: readonly MetricRecord[], taskTimes: readonly TaskTimeGroup[] | undefined, width: number, theme?: LobbyTheme): string[] {
+  const inner = width - 4;
+  const byAgent = new Map<string, { n: number; ms: number }>();
+  for (const record of timed(records)) {
+    const entry = byAgent.get(record.agent) ?? { n: 0, ms: 0 };
+    entry.n += 1;
+    entry.ms += record.durationMs;
+    byAgent.set(record.agent, entry);
+  }
+  const agents = [...byAgent.entries()].sort((a, b) => b[1].ms - a[1].ms);
+  const total = agents.reduce((sum, [, entry]) => sum + entry.ms, 0);
+  const lines: string[] = [];
+  if (total > 0) {
+    lines.push(stackedBar(agents.map(([agent, entry]) => ({ value: entry.ms, paint: (text: string) => paint(theme, sourceColor(agent), text) })), inner));
+    const legend = agents.map(([agent, entry]) => `${paint(theme, sourceColor(agent), "■")} ${agent} ${Math.round((entry.ms / total) * 100)}% ${paint(theme, "dim", `avg ${shortDuration(entry.ms / entry.n)} ×${entry.n}`)}`);
+    lines.push(...wrap(legend.join("   "), inner));
+  } else lines.push(paint(theme, "dim", "No timed runs yet."));
+  if (taskTimes && taskTimes.length > 0) {
+    const max = Math.max(...taskTimes.map((group) => group.avgMs), 1);
+    const labelWidth = chartLabelWidth(inner);
+    const barWidth = Math.max(4, inner - labelWidth - 18);
+    lines.push("", bold(theme, "Request to done, by the oracle's model"));
+    for (const group of taskTimes) {
+      lines.push(`${paint(theme, "muted", fit(`${group.model} · ${group.thinking}`, labelWidth))} ${fit(paint(theme, "accent", bar(group.avgMs, max, barWidth)), barWidth)} ${shortDuration(group.avgMs).padStart(7)} ${paint(theme, "dim", `×${group.tasks}`)}`);
+    }
+  }
+  return box(width, lines.length + 2, lines, { title: "Where the time goes", right: "share of run time by agent", theme });
+}
+
+/** The metrics dashboard: KPI tiles, the charts, and the full table filling what is left. */
+export function renderMetrics(input: MetricsTabInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  if (height <= 0) return [];
+  if (input.records.length === 0) {
+    const empty = input.query ? `No run matches "${input.query}".` : "No runs recorded yet. Every Master turn, subagent run, quick fix and planning round lands here with its model, thinking level, time, tokens and cost.";
+    return fill([...(height >= 8 ? tileRow(input, width, theme) : []), ...box(width, Math.max(3, height - (height >= 8 ? 4 : 0)), [paint(theme, "dim", empty)], { title: "Model performance", theme })], height, width);
+  }
+  const sections: string[] = [];
+  let room = height;
+  if (room >= 16) {
+    sections.push(...tileRow(input, width, theme));
+    room -= 4;
+  }
+  const chartHeight = Math.min(input.groups.length + 2, 8);
+  if (room - chartHeight >= 9) {
+    if (width >= 100) {
+      const left = Math.floor((width - 1) / 2);
+      sections.push(...beside([timeBars(input.groups, input.by, left, chartHeight, theme), successMeters(input.groups, input.by, width - 1 - left, chartHeight, theme)]));
+      room -= chartHeight;
+    } else {
+      sections.push(...timeBars(input.groups, input.by, width, chartHeight, theme));
+      room -= chartHeight;
+    }
+  }
+  const share = timeShare(input.records, input.taskTimes, width, theme);
+  if (room - share.length >= 6) {
+    sections.push(...share);
+    room -= share.length;
+  }
+  const table = tableLines(input, width - 4, theme);
+  const tableRows = Math.max(0, room - 3);
+  const start = windowStart(input.selected, table.rows.length, tableRows);
+  const grouping = input.by === "model" ? "by model · thinking" : "by model · thinking · agent";
+  notePane(input.panes, "table", sections.length, 0, width, room, table.rows.length);
+  sections.push(...box(width, room, [table.header, ...table.rows.slice(start, start + tableRows)], { title: "All models", right: `${grouping} · sorted by ${input.sort} · g s`, scroll: { total: table.rows.length + 1, start }, theme }));
+  return fill(sections, height, width);
+}
+
+/** Runs whose agent, model, thinking level, kind, status or task mention `query`. */
+export function filterRecords(records: readonly MetricRecord[], query: string | undefined): MetricRecord[] {
+  const needle = query?.trim().toLowerCase();
+  if (!needle) return [...records];
+  return records.filter((record) => [record.agent, record.model ?? "", record.thinking ?? "", record.kind, record.status, record.taskId ?? ""].join(" ").toLowerCase().includes(needle));
+}