@a-t-h-i/bot-lobby 0.3.0 → 0.5.0

package/src/lobby/tabs/home.ts

@@ -0,0 +1,164 @@
+/**
+ * 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 { bold, since, clock, columns, fill, italic, paint, rule, spinner, split, tail, wrap, wrapHanging, type LobbyColor, type LobbyTheme } from "../layout.ts";
+
+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;
+  /** Lines of conversation scrollback. */
+  chatOffset: number;
+  tick: number;
+  now: number;
+}
+
+/** 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("");
+    const body = role === "note" ? paint(theme, "dim", text) : text;
+    lines.push(...wrapHanging(chatLead(role, theme), body, width));
+  };
+  for (const entry of chat) push(entry.role, entry.text);
+  if (live?.trim()) push("oracle", `${live.trim()} ${paint(theme, "accent", spinner(tick))}`);
+  else if (busy) push("oracle", paint(theme, "dim", `${spinner(tick)} working…`));
+  return lines;
+}
+
+function emptyChat(input: HomeInput, width: number, theme?: LobbyTheme): string[] {
+  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 conversation(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  const all = input.chat.length > 0 || input.liveReply || input.busy ? chatLines(input.chat, width, theme, input.liveReply, input.busy, input.tick) : emptyChat(input, width, theme);
+  const shown = tail(all, height, input.chatOffset);
+  return fill(shown, height);
+}
+
+function activity(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  if (input.activity.length === 0) return fill([paint(theme, "dim", "No activity yet.")], height);
+  const lines = input.activity.slice(-Math.max(height, 1)).map((entry) => activityLine(entry, width, input.tick, theme));
+  return fill(tail(lines, height), height);
+}
+
+/** 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);
+}
+
+function thinking(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  const thought = currentThought(input.thoughts);
+  const right = thought ? `${thought.source} · ${thought.live ? "thinking" : since(input.now - thought.at)}` : "";
+  const header = rule(width, "Thinking", theme, right);
+  if (height <= 1) return [header].slice(0, height);
+  if (!thought) return fill([header, paint(theme, "dim", "Thoughts from the oracle and every agent appear here, and only here.")], height);
+  const body = wrap(thought.text, width).map((line) => italic(theme, paint(theme, "dim", line)));
+  return fill([header, ...tail(body, height - 1)], height);
+}
+
+function sceneLines(input: HomeInput, width: number, height: number): string[] {
+  if (!input.task || !input.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);
+}
+
+/** The whole tab, exactly `height` lines of `width` columns. */
+export function renderHome(input: HomeInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  if (height <= 0) return [];
+  const scene = sceneLines(input, width, height);
+  const rest = height - scene.length;
+  const thinkHeight = rest >= 16 ? Math.max(4, Math.floor(rest * 0.25)) : rest >= 9 ? 3 : 0;
+  const main = rest - thinkHeight;
+  const chatTitle = input.task ? `Conversation · ${input.task.id}` : "Conversation";
+  let body: string[];
+  if (width >= HOME_COLUMNS_MIN) {
+    const [left, right] = split(width, 0.56);
+    const headers = columns([rule(left, chatTitle, theme)], [rule(right, "Activity", theme)], left, right, " ┬ ", theme);
+    const rows = columns(conversation(input, left, main - 1, theme), activity(input, right, main - 1, theme), left, right, " │ ", theme);
+    body = [...headers, ...rows];
+  } else {
+    const chatHeight = Math.max(1, Math.ceil(main * 0.6));
+    const activityHeight = main - chatHeight;
+    body = [
+      rule(width, chatTitle, theme),
+      ...conversation(input, width, chatHeight - 1, theme),
+      ...(activityHeight > 0 ? [rule(width, "Activity", theme), ...activity(input, width, activityHeight - 1, theme)] : []),
+    ];
+  }
+  return fill([...scene, ...fill(body, main), ...thinking(input, width, thinkHeight, theme)], 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,162 @@
+/**
+ * The Metrics tab: how each model performs at each thinking level — how long
+ * its runs take (mean, median, p90), how often they succeed, how many turns,
+ * tools and tokens they use, their throughput and cost — across the Master,
+ * every subagent role, quick fixes and planner turns. Columns drop from the
+ * right as the terminal narrows.
+ */
+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 { bold, fill, fit, paint, rule, selectRow, windowStart, type LobbyTheme } from "../layout.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;
+}
+
+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 };
+}
+
+function summary(input: MetricsTabInput, theme?: LobbyTheme): string[] {
+  const { stats, records } = input;
+  const cost = records.reduce((sum, record) => sum + (record.cost ?? 0), 0);
+  const tasks = [
+    `${stats.completed} completed${stats.completed > 0 && stats.avgCompleteMs > 0 ? ` (avg ${shortDuration(stats.avgCompleteMs)} from request to done)` : ""}`,
+    `${stats.active} active`,
+    `${stats.abandoned} abandoned`,
+  ].join(" · ");
+  return [
+    `${bold(theme, "Tasks")} ${tasks}`,
+    `${bold(theme, "Runs")} ${records.length} recorded · ${money(cost)} total · grouped by ${input.by === "model" ? "model + thinking" : "model + thinking + agent"} · sorted by ${input.sort}`,
+  ];
+}
+
+/** Per-agent averages across every model, a quick read of where the time goes. */
+function agentLine(records: readonly MetricRecord[], theme?: LobbyTheme): string {
+  const byAgent = new Map<string, { n: number; ms: number }>();
+  for (const record of records) {
+    if (record.status === "cancelled" || record.durationMs <= 0) continue;
+    const entry = byAgent.get(record.agent) ?? { n: 0, ms: 0 };
+    entry.n += 1;
+    entry.ms += record.durationMs;
+    byAgent.set(record.agent, entry);
+  }
+  const parts = [...byAgent.entries()].sort((a, b) => b[1].n - a[1].n).map(([agent, entry]) => `${agent} ${shortDuration(entry.ms / entry.n)} ${paint(theme, "dim", `×${entry.n}`)}`);
+  return parts.length > 0 ? `${bold(theme, "Avg by agent")} ${parts.join(paint(theme, "dim", " · "))}` : "";
+}
+
+/** One line: how long a task takes on each oracle model, request to done. */
+function taskTimeLine(groups: readonly TaskTimeGroup[] | undefined, theme?: LobbyTheme): string {
+  if (!groups || groups.length === 0) return "";
+  const parts = groups.map((group) => `${group.model} ${paint(theme, "dim", group.thinking)} ${shortDuration(group.avgMs)} ${paint(theme, "dim", `×${group.tasks}`)}`);
+  return `${bold(theme, "Task time by oracle")} ${parts.join(paint(theme, "dim", " · "))}`;
+}
+
+export function renderMetrics(input: MetricsTabInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  if (height <= 0) return [];
+  const head = [...summary(input, theme), taskTimeLine(input.taskTimes, theme), agentLine(input.records, theme)].filter(Boolean);
+  if (input.groups.length === 0) {
+    return fill([
+      ...head, "", rule(width, "Model performance", theme),
+      paint(theme, "dim", "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."),
+    ], height, width);
+  }
+  const table = tableLines(input, width, theme);
+  const bodyHeight = Math.max(0, height - head.length - 3);
+  const start = windowStart(input.selected, table.rows.length, bodyHeight);
+  return fill([...head, "", rule(width, "Model performance", theme, "g group · s sort"), table.header, ...table.rows.slice(start, start + bodyHeight)], height, width);
+}

package/src/lobby/tabs/plan.ts

@@ -0,0 +1,160 @@
+/**
+ * The Plan tab: task planning mode with a planning panel. The roster shows
+ * each seat — the oracle chairing, DEV, DESIGN, QA and RESEARCH — and what it
+ * is doing; the conversation shows every seat's questions, attributed, with
+ * your answers; the other pane shows the draft plan converging and what each
+ * seat said the plan must respect.
+ */
+import { ORACLE_LABEL, type PanelNote, type PanelQuestion, type PlannerMessage, type PlannerReply, type PlannerSeed } from "../planner.ts";
+import type { PlannedTask } from "../../state/backlog.ts";
+import { bold, columns, fill, markdownLines, paint, rule, spinner, split, tail, wrap, wrapHanging, type LobbyTheme } from "../layout.ts";
+import { sourceColor } from "./home.ts";
+
+export interface SeatView {
+  label: string;
+  /** Sits on the panel next round. */
+  seated: boolean;
+  status: "idle" | "thinking" | "done" | "failed";
+  step?: string;
+  /** Open questions it asked in the latest round. */
+  questions: number;
+  ready: boolean;
+  /** `provider/model · thinking` the seat runs on. */
+  profile?: string;
+}
+
+export interface PlanView {
+  messages: readonly PlannerMessage[];
+  reply?: PlannerReply;
+  questions: readonly PanelQuestion[];
+  notes: readonly PanelNote[];
+  seats: readonly SeatView[];
+  busy: boolean;
+  step?: string;
+  error?: string;
+  turns: number;
+  seed?: PlannerSeed;
+  saved?: PlannedTask;
+  title?: string;
+}
+
+export interface PlanTabInput {
+  session?: PlanView;
+  /** `provider/model · thinking` the oracle plans on. */
+  profile: string;
+  /** The seats as they would sit before a session exists. */
+  seats: readonly SeatView[];
+  offset: number;
+  focus: "talk" | "draft";
+  draftOffset: number;
+  tick: number;
+  notice?: string;
+}
+
+export const PLAN_COLUMNS_MIN = 100;
+const LABEL_WIDTH = 8;
+
+function intro(input: PlanTabInput, width: number, theme?: LobbyTheme): string[] {
+  // The roster leads with the chair; the intro names it separately.
+  const members = input.seats.filter((seat) => seat.label !== ORACLE_LABEL);
+  const seats = members.filter((seat) => seat.seated).map((seat) => seat.label);
+  const text = [
+    bold(theme, "Plan a task with the whole team before anyone writes code."),
+    "",
+    `Describe what you want below. The planning panel — the oracle chairing${seats.length > 0 ? `, with ${seats.join(", ")}` : ""} — reads the codebase and grills you, each seat from its own domain: contracts and data, flows and states, acceptance criteria and tests, libraries and prior art. You answer everyone in one conversation, and the oracle folds every answer into the draft plan, so all the agents start from the same decisions.`,
+    "",
+    "When the panel agrees the plan is clear, press s to save it to the pending tasks list; start it from the Tasks tab whenever you like. To plan a GitHub issue, pick it in the Issues tab and press p. While browsing (esc), 1-4 seat or unseat DEV, DESIGN, QA and RESEARCH.",
+    "",
+    paint(theme, "dim", `oracle: ${input.profile}`),
+    ...members.map((seat) => paint(theme, "dim", `${seat.label.toLowerCase()}: ${seat.seated ? seat.profile ?? "" : "not seated"}`)),
+  ];
+  return text.flatMap((line) => wrap(line, width));
+}
+
+function statusLine(view: PlanView, input: PlanTabInput, theme?: LobbyTheme): string {
+  const parts: string[] = [];
+  if (view.busy) parts.push(`${paint(theme, "accent", spinner(input.tick))} round ${view.turns}`);
+  else if (view.error) parts.push(paint(theme, "error", `✗ ${view.error.split("\n")[0]} — esc, then r retries`));
+  else if (view.reply?.status === "ready") parts.push(paint(theme, "success", "✓ READY — the panel agrees; s saves it as a pending task"));
+  else if (view.messages.some((message) => message.role === "planner")) parts.push(paint(theme, "warning", `● GRILLING · ${view.questions.length} open question${view.questions.length === 1 ? "" : "s"}`));
+  if (view.saved) parts.push(paint(theme, "success", `saved as ${view.saved.id}`));
+  if (!view.busy && view.turns > 0) parts.push(paint(theme, "dim", `round ${view.turns}`));
+  return parts.join(paint(theme, "dim", " · ")) || paint(theme, "dim", "Answer below; enter sends.");
+}
+
+/** One seat on the roster: a spinner and its step while it works, then ready, its question count or a failure. */
+function seatCell(seat: SeatView, tick: number, theme?: LobbyTheme): string {
+  const name = paint(theme, seat.seated ? sourceColor(seat.label) : "dim", seat.label);
+  if (!seat.seated) return `${name} ${paint(theme, "dim", "off")}`;
+  if (seat.status === "thinking") return `${name} ${paint(theme, "accent", spinner(tick))} ${paint(theme, "muted", seat.step ?? "thinking")}`;
+  if (seat.status === "failed") return `${name} ${paint(theme, "error", "✗ failed — r retries")}`;
+  if (seat.status === "idle") return `${name} ${paint(theme, "dim", "·")}`;
+  if (seat.ready) return `${name} ${paint(theme, "success", "✓ ready")}`;
+  return `${name} ${paint(theme, "warning", `${seat.questions} question${seat.questions === 1 ? "" : "s"}`)}`;
+}
+
+/** The panel roster; while working, each seat's current step, so one busy seat does not look like a hang. */
+export function rosterLines(view: PlanView, width: number, tick: number, theme?: LobbyTheme): string[] {
+  const cells = view.seats.map((seat) => seatCell(seat, tick, theme));
+  return wrap(`${paint(theme, "dim", "panel")}  ${cells.join(paint(theme, "dim", " · "))}`, width);
+}
+
+function questionLines(questions: readonly PanelQuestion[], width: number, theme?: LobbyTheme): string[] {
+  return questions.flatMap((question, index) => {
+    const lead = `${paint(theme, "dim", `${String(index + 1).padStart(2)}.`)} ${bold(theme, paint(theme, sourceColor(question.from), question.from.padEnd(LABEL_WIDTH)))} `;
+    return wrapHanging(lead, question.text, width);
+  });
+}
+
+export function conversationLines(view: PlanView, width: number, theme?: LobbyTheme): string[] {
+  const lines: string[] = [];
+  if (view.seed) {
+    lines.push(...wrap(paint(theme, "dim", `from issue #${view.seed.issue.number} — ${view.seed.issue.title}`), width), "");
+  }
+  for (const message of view.messages) {
+    if (lines.length > 0 && lines.at(-1) !== "") lines.push("");
+    if (message.role === "you") {
+      lines.push(...wrapHanging(`${bold(theme, paint(theme, "accent", "you"))} ${paint(theme, "dim", "▸")} `, message.text, width));
+      continue;
+    }
+    lines.push(`${bold(theme, paint(theme, "toolTitle", "panel"))} ${paint(theme, "dim", "▸")}`);
+    lines.push(...(message.questions && message.questions.length > 0 ? questionLines(message.questions, width, theme) : wrap(message.text, width)));
+  }
+  return lines;
+}
+
+export function draftLines(view: PlanView, width: number, theme?: LobbyTheme): string[] {
+  const plan = view.reply?.plan;
+  const lines = plan ? markdownLines(plan, width, theme) : wrap(paint(theme, "dim", view.busy ? "The draft appears after the panel's first round." : "No draft yet."), width);
+  if (view.notes.length === 0) return lines;
+  lines.push("", rule(width, "What each seat needs", theme));
+  for (const note of view.notes) lines.push(...wrapHanging(`${paint(theme, sourceColor(note.from), note.from.padEnd(LABEL_WIDTH))} `, note.text, width));
+  return lines;
+}
+
+export function renderPlan(input: PlanTabInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  if (height <= 0) return [];
+  const notice = input.notice ? [paint(theme, "accent", input.notice)] : [];
+  const view = input.session;
+  if (!view) return fill([...notice, rule(width, "Plan", theme, input.profile), ...intro(input, width, theme)], height, width);
+  const header = [
+    ...notice,
+    rule(width, view.title ? `Planning · ${view.title}` : "Planning", theme, input.profile),
+    statusLine(view, input, theme),
+    ...rosterLines(view, width, input.tick, theme),
+  ];
+  const bodyHeight = Math.max(0, height - header.length);
+  const draftTitle = `${view.reply?.status === "ready" ? "Plan ✓" : "Draft plan"}${input.focus === "draft" ? " ◂" : ""}`;
+  const talkTitle = `Conversation${input.focus === "talk" ? " ◂" : ""}`;
+  if (width >= PLAN_COLUMNS_MIN) {
+    const [left, right] = split(width, 0.5);
+    const talk = fill([rule(left, talkTitle, theme), ...tail(conversationLines(view, left, theme), bodyHeight - 1, input.offset)], bodyHeight);
+    const draft = draftLines(view, right, theme);
+    const draftPane = fill([rule(right, draftTitle, theme), ...draft.slice(Math.max(0, Math.min(input.draftOffset, draft.length - 1)))], bodyHeight);
+    return fill([...header, ...columns(talk, draftPane, left, right, " │ ", theme)], height, width);
+  }
+  const talkHeight = Math.max(2, Math.ceil(bodyHeight * 0.55));
+  const talk = [rule(width, talkTitle, theme), ...fill(tail(conversationLines(view, width, theme), talkHeight - 1, input.offset), talkHeight - 1)];
+  const draft = draftLines(view, width, theme);
+  return fill([...header, ...talk, rule(width, draftTitle, theme), ...draft.slice(Math.max(0, Math.min(input.draftOffset, draft.length - 1)))], height, width);
+}

package/src/lobby/tabs/quickfix.ts

@@ -0,0 +1,101 @@
+/**
+ * The Quick fix tab: direct prompts that skip the whole workflow. The job list
+ * on one side, the selected job's plain-words steps and final report on the
+ * other.
+ */
+import { shortDuration } from "../../text.ts";
+import { jobTitle, type QuickFixJob } from "../quickfix.ts";
+import { bold, clock, columns, fill, markdownLines, paint, rule, selectRow, spinner, split, windowStart, wrap, wrapHanging, type LobbyTheme } from "../layout.ts";
+
+export interface QuickFixTabInput {
+  jobs: readonly QuickFixJob[];
+  /** Index into `jobs` shown newest first. */
+  selected: number;
+  focus: "list" | "detail";
+  detailOffset: number;
+  profile: string;
+  tick: number;
+  now: number;
+}
+
+export const QUICKFIX_COLUMNS_MIN = 90;
+
+const STATUS_COLORS: Record<QuickFixJob["status"], "accent" | "success" | "error" | "warning" | "dim" | "muted"> = {
+  queued: "muted",
+  running: "accent",
+  success: "success",
+  failed: "error",
+  timeout: "error",
+  cancelled: "warning",
+};
+
+function mark(job: QuickFixJob, tick: number, theme?: LobbyTheme): string {
+  if (job.status === "running") return paint(theme, "accent", spinner(tick));
+  if (job.status === "queued") return paint(theme, "muted", "…");
+  if (job.status === "success") return paint(theme, "success", "✓");
+  if (job.status === "cancelled") return paint(theme, "warning", "·");
+  return paint(theme, "error", "✗");
+}
+
+function elapsed(job: QuickFixJob, now: number): string {
+  if (!job.startedAt) return "";
+  return shortDuration((job.finishedAt ?? now) - job.startedAt);
+}
+
+/** Jobs newest first, the order the list shows. */
+export function newestFirst(jobs: readonly QuickFixJob[]): QuickFixJob[] {
+  return [...jobs].reverse();
+}
+
+export function jobDetailLines(job: QuickFixJob, width: number, tick: number, now: number, theme?: LobbyTheme): string[] {
+  const facts = [
+    paint(theme, STATUS_COLORS[job.status], job.status),
+    elapsed(job, now),
+    job.model ? `${job.model}${job.thinking ? ` · ${job.thinking}` : ""}` : job.thinking ?? "",
+    job.tools ? `${job.tools} tool${job.tools === 1 ? "" : "s"}` : "",
+    job.usage?.cost ? `$${job.usage.cost.toFixed(2)}` : "",
+  ].filter(Boolean);
+  const lines = [paint(theme, "dim", job.id), facts.join(paint(theme, "dim", " · ")), "", ...wrap(bold(theme, job.prompt), width)];
+  lines.push("", rule(width, "Steps", theme));
+  if (job.steps.length === 0) lines.push(paint(theme, "dim", job.status === "queued" ? "Waiting for the quick fix ahead of it." : job.status === "running" ? `${spinner(tick)} starting…` : "No tool calls."));
+  for (const step of job.steps) {
+    const lead = `${paint(theme, "dim", clock(step.at))} ${step.pending && job.status === "running" ? paint(theme, "accent", spinner(tick)) : paint(theme, "dim", "·")} `;
+    lines.push(...wrapHanging(lead, step.pending && job.status === "running" ? `${step.text}…` : paint(theme, "muted", step.text), width));
+  }
+  if (job.error) lines.push("", ...wrap(paint(theme, "error", `✗ ${job.error}`), width));
+  if (job.report) {
+    lines.push("", rule(width, "Report", theme), ...markdownLines(job.report, width, theme));
+  }
+  return lines;
+}
+
+function intro(input: QuickFixTabInput, width: number, theme?: LobbyTheme): string[] {
+  return [
+    bold(theme, "Make a direct change, the way you would ask pi."),
+    "",
+    "Type what you want below and press enter. One coding agent makes the change right away — no scouting, proposal, plan or review — while any bot-lobby task keeps running. Quick fixes run one at a time in the order you send them.",
+    "",
+    "Keep them small: a rename, a typo, a one-function fix. If it turns out bigger, the agent stops and says so, and you can plan it as a task.",
+    "",
+    paint(theme, "dim", `quick fix: ${input.profile}`),
+  ].flatMap((line) => wrap(line, width));
+}
+
+export function renderQuickFix(input: QuickFixTabInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  if (height <= 0) return [];
+  if (input.jobs.length === 0) return fill([rule(width, "Quick fix", theme, input.profile), ...intro(input, width, theme)], height, width);
+  const jobs = newestFirst(input.jobs);
+  const selected = Math.min(Math.max(0, input.selected), jobs.length - 1);
+  const wide = width >= QUICKFIX_COLUMNS_MIN;
+  const [listWidth, detailWidth] = wide ? split(width, 0.38, 3, 40) : [width, width];
+  const rows = jobs.map((job, index) => {
+    const time = elapsed(job, input.now);
+    const text = `${mark(job, input.tick, theme)} ${index === selected ? bold(theme, jobTitle(job)) : jobTitle(job)}${time ? ` ${paint(theme, "dim", time)}` : ""}`;
+    return selectRow(theme, text, listWidth, index === selected, input.focus === "list");
+  });
+  const listPane = fill([rule(listWidth, "Quick fixes", theme, `${jobs.length}`), ...rows.slice(windowStart(selected, rows.length, height - 1))], height);
+  const detail = jobDetailLines(jobs[selected]!, detailWidth, input.tick, input.now, theme);
+  const detailPane = fill([rule(detailWidth, input.focus === "detail" ? "Detail ◂" : "Detail", theme, input.profile), ...detail.slice(Math.max(0, Math.min(input.detailOffset, detail.length - 1)))], height);
+  if (!wide) return fill(input.focus === "detail" ? detailPane : listPane, height, width);
+  return fill(columns(listPane, detailPane, listWidth, detailWidth, " │ ", theme), height, width);
+}