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

package/src/lobby/tabs/plan.ts

@@ -0,0 +1,242 @@
+/**
+ * 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
+ * their options and your answers; the draft pane shows the plan rendered as
+ * Markdown, with a line cursor for commenting on a line, and what each seat
+ * said the plan must respect.
+ */
+import { stripTerminalSequences } from "@earendil-works/pi-tui";
+import { ORACLE_LABEL, type LineComment, type PanelNote, type PanelQuestion, type PlannerMessage, type PlannerReply, type PlannerSeed } from "../planner.ts";
+import type { PlannedTask } from "../../state/backlog.ts";
+import { beside, bold, box, fill, italic, markdownLines, notePane, paint, selectRow, spinner, wrap, wrapHanging, type LobbyTheme, type PaneLayout } from "../layout.ts";
+import { sourceColor, tailWindow } 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;
+  /** The round's questions wait for answers. */
+  awaitingAnswers: boolean;
+  /** Questionnaires already answered for this round. */
+  answeredChunks: number;
+  lineComments: readonly LineComment[];
+}
+
+/** Where the draft pane landed, so the lobby can map a click or the cursor to a line. */
+export interface PlanLayout {
+  /** First row of the draft's text inside the tab body, and its left column. */
+  draftTop: number;
+  draftLeft: number;
+  draftWidth: number;
+  /** Rows of draft text visible at once. */
+  draftRows: number;
+  /** Index of the first draft line shown. */
+  draftStart: number;
+  /** Every draft line, unstyled, in order. */
+  draftText: 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;
+  /** The draft line the cursor is on, while the draft has the focus. */
+  cursor?: number;
+  tick: number;
+  notice?: string;
+  query?: string;
+  /** Filled with the draft pane's geometry during render. */
+  layout?: PlanLayout;
+  /** Filled with where the conversation (`talk`) and the draft landed, for scrolling. */
+  panes?: PaneLayout;
+}
+
+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 questions you, each seat from its own domain: contracts and data, flows and states, acceptance criteria and tests, libraries and prior art.`,
+    "",
+    "After each round the oracle puts the panel's questions to you one at a time, each with options and room for your own answer, and folds every answer into the draft plan, so all the agents start from the same decisions.",
+    "",
+    "Comment on any line of the draft: enter moves to the draft, ↑↓ pick a line (or click it), c comments. When the panel agrees, s saves the plan to the pending tasks list. While browsing (esc), 1-4 seat or unseat DEV, DESIGN, QA and RESEARCH.",
+    "",
+    paint(theme, "dim", `oracle: ${input.profile} (m changes it; each seat uses its domain's settings, alt+s)`),
+    ...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.awaitingAnswers) {
+    const left = view.answeredChunks > 0 ? " (some answered — enter resumes)" : " — enter answers them one at a time";
+    parts.push(paint(theme, "warning", `● ${view.questions.length} question${view.questions.length === 1 ? "" : "s"} for you${left}`));
+  }
+  if (view.lineComments.length > 0) parts.push(paint(theme, "accent", `◆ ${view.lineComments.length} line comment${view.lineComments.length === 1 ? "" : "s"} to send`));
+  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);
+}
+
+/** Each question numbered as the panel asked it (a search may show only some), with its options beneath. */
+function questionLines(questions: ReadonlyArray<{ question: PanelQuestion; number: number }>, width: number, theme?: LobbyTheme): string[] {
+  return questions.flatMap(({ question, number }) => {
+    const lead = `${paint(theme, "dim", `${String(number).padStart(2)}.`)} ${bold(theme, paint(theme, sourceColor(question.from), question.from.padEnd(LABEL_WIDTH)))} `;
+    const indent = " ".repeat(4 + LABEL_WIDTH);
+    const options = question.options.map((option) => wrapHanging(`${indent}${paint(theme, "dim", "○")} `, `${option.label}${option.description ? paint(theme, "dim", ` — ${option.description}`) : ""}`, width)).flat();
+    return [...wrapHanging(lead, question.text, width), ...options];
+  });
+}
+
+function matches(text: string, query: string | undefined): boolean {
+  return !query || text.toLowerCase().includes(query.toLowerCase());
+}
+
+export function conversationLines(view: PlanView, width: number, theme?: LobbyTheme, query?: string): 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) {
+    const questions = (message.questions ?? [])
+      .map((question, index) => ({ question, number: index + 1 }))
+      .filter(({ question }) => matches(`${question.from} ${question.text} ${question.options.map((option) => option.label).join(" ")}`, query));
+    if (message.role === "you" ? !matches(message.text, query) : message.questions?.length ? questions.length === 0 : !matches(message.text, query)) continue;
+    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(...(questions.length > 0 ? questionLines(questions, width, theme) : wrap(message.text, width)));
+  }
+  if (query && lines.length === 0) return wrap(paint(theme, "dim", `Nothing in the conversation matches "${query}".`), width);
+  return lines;
+}
+
+interface DraftLine {
+  text: string;
+  plain: string;
+}
+
+/** The draft as lines: the plan in Markdown, commented lines marked with their comments beneath, then each seat's needs. */
+export function draftLines(view: PlanView, width: number, theme?: LobbyTheme): DraftLine[] {
+  const plan = view.reply?.plan;
+  const line = (text: string): DraftLine => ({ text, plain: stripTerminalSequences(text).trimEnd() });
+  if (!plan) return wrap(paint(theme, "dim", view.busy ? "The draft appears after the panel's first round." : "No draft yet."), width).map(line);
+  const comments = new Map<string, string[]>();
+  for (const comment of view.lineComments) comments.set(comment.line, [...(comments.get(comment.line) ?? []), comment.text]);
+  const lines: DraftLine[] = [];
+  for (const rendered of markdownLines(plan, Math.max(1, width - 2), theme)) {
+    const entry = line(rendered);
+    const notes = comments.get(entry.plain.trim());
+    lines.push({ text: `${notes ? paint(theme, "warning", "◆") : " "} ${rendered}`, plain: entry.plain });
+    for (const note of notes ?? []) {
+      for (const wrapped of wrap(italic(theme, paint(theme, "accent", `↳ ${note}`)), Math.max(1, width - 4))) lines.push({ text: `    ${wrapped}`, plain: entry.plain });
+    }
+  }
+  if (view.notes.length > 0) {
+    lines.push(line(""), line(bold(theme, paint(theme, "mdHeading", "What each seat needs"))));
+    for (const note of view.notes) for (const wrapped of wrapHanging(`${paint(theme, sourceColor(note.from), note.from.padEnd(LABEL_WIDTH))} `, note.text, width)) lines.push(line(wrapped));
+  }
+  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, ...box(width, height - notice.length, intro(input, width - 4, theme), { title: "Plan", right: input.profile, theme })], height, width);
+  const header = [
+    ...notice,
+    ...wrap(`${bold(theme, view.title ? `Planning · ${view.title}` : "Planning")}  ${statusLine(view, input, theme)}`, width),
+    ...rosterLines(view, width, input.tick, theme),
+  ];
+  const bodyHeight = Math.max(0, height - header.length);
+  const wide = width >= PLAN_COLUMNS_MIN;
+  const talkWidth = wide ? Math.round((width - 1) * 0.46) : width;
+  const draftWidth = wide ? width - 1 - talkWidth : width;
+  const talkHeight = wide ? bodyHeight : Math.max(3, Math.ceil(bodyHeight * 0.5));
+  const draftHeight = wide ? bodyHeight : bodyHeight - talkHeight;
+  const talkLines = conversationLines(view, talkWidth - 4, theme, input.query);
+  const talkView = tailWindow(talkLines, talkHeight - 2, input.offset);
+  const talkNote = [talkView.offset > 0 ? `↓${talkView.offset}` : "", input.query ? "filtered" : ""].filter(Boolean).join(" · ");
+  const talk = box(talkWidth, talkHeight, talkView.shown, { title: "Conversation", ...(talkNote ? { right: talkNote } : {}), focused: input.focus === "talk", scroll: { total: talkLines.length, start: talkView.start }, theme });
+  notePane(input.panes, "talk", header.length, 0, talkWidth, talkHeight, talkLines.length);
+  const draft = draftLines(view, draftWidth - 4, theme);
+  const rows = Math.max(0, draftHeight - 2);
+  const start = Math.max(0, Math.min(input.draftOffset, Math.max(0, draft.length - rows)));
+  const cursor = input.focus === "draft" ? input.cursor : undefined;
+  const shown = draft.slice(start, start + rows).map((entry, index) => selectRow(theme, entry.text, draftWidth - 4, start + index === cursor, true));
+  const draftTitle = view.reply?.status === "ready" ? "Plan ✓" : "Draft plan";
+  const position = draft.length > rows ? `${start + 1}-${Math.min(draft.length, start + rows)}/${draft.length}` : "";
+  const draftPane = draftHeight >= 3 ? box(draftWidth, draftHeight, shown, { title: draftTitle, ...(position ? { right: position } : {}), focused: input.focus === "draft", scroll: { total: draft.length, start }, theme }) : [];
+  if (draftHeight >= 3) notePane(input.panes, "draft", header.length + (wide ? 0 : talkHeight), wide ? talkWidth + 1 : 0, draftWidth, draftHeight, draft.length);
+  if (input.layout) {
+    Object.assign(input.layout, {
+      draftTop: header.length + (wide ? 0 : talkHeight) + 1,
+      draftLeft: (wide ? talkWidth + 1 : 0) + 2,
+      draftWidth: draftWidth - 4,
+      draftRows: rows,
+      draftStart: start,
+      draftText: draft.map((entry) => entry.plain),
+    } satisfies PlanLayout);
+  }
+  const body = wide ? beside([talk, draftPane]) : [...talk, ...draftPane];
+  return fill([...header, ...body], height, width);
+}

package/src/lobby/tabs/quickfix.ts

@@ -0,0 +1,129 @@
+/**
+ * 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 { beside, bold, box, clock, detailWindow, fill, markdownLines, notePane, paint, position, rule, selectRow, spinner, windowStart, wrap, wrapHanging, type LobbyTheme, type PaneLayout } 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;
+  /** The search in force: only jobs that mention it are listed. */
+  query?: string;
+  /** Filled with where the list and the detail landed, for scrolling. */
+  panes?: PaneLayout;
+}
+
+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} — esc, then m changes the model, thinking, time limit and instructions (alt+s: all settings)`),
+  ].flatMap((line) => wrap(line, width));
+}
+
+/** Jobs whose prompt, steps or report mention `query`. */
+export function filterJobs(jobs: readonly QuickFixJob[], query: string | undefined): QuickFixJob[] {
+  const needle = query?.trim().toLowerCase();
+  if (!needle) return [...jobs];
+  return jobs.filter((job) => [job.prompt, job.report ?? "", job.error ?? "", ...job.steps.map((step) => step.text)].join("\n").toLowerCase().includes(needle));
+}
+
+/** Outer widths of the list and detail panes. */
+export function quickFixWidths(width: number): { list: number; detail: number; wide: boolean } {
+  if (width < QUICKFIX_COLUMNS_MIN) return { list: width, detail: width, wide: false };
+  const list = Math.max(36, Math.round((width - 1) * 0.36));
+  return { list, detail: width - 1 - list, wide: true };
+}
+
+export function renderQuickFix(input: QuickFixTabInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  if (height <= 0) return [];
+  const jobs = newestFirst(filterJobs(input.jobs, input.query));
+  if (jobs.length === 0) {
+    const content = input.query && input.jobs.length > 0 ? [paint(theme, "dim", `No quick fix mentions "${input.query}".`)] : intro(input, width - 4, theme);
+    return box(width, height, content, { title: "Quick fix", right: input.profile, theme });
+  }
+  const selected = Math.min(Math.max(0, input.selected), jobs.length - 1);
+  const { list: listWidth, detail: detailWidth, wide } = quickFixWidths(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 - 4, index === selected, input.focus === "list");
+  });
+  const count = input.query ? `${jobs.length} match${jobs.length === 1 ? "" : "es"}` : `${jobs.length}`;
+  const listStart = windowStart(selected, rows.length, height - 2);
+  const listPane = box(listWidth, height, rows.slice(listStart), { title: "Quick fixes", right: count, focused: input.focus === "list", scroll: { total: rows.length, start: listStart }, theme });
+  const detail = jobDetailLines(jobs[selected]!, detailWidth - 4, input.tick, input.now, theme);
+  const detailStart = detailWindow(detail.length, height - 2, input.detailOffset);
+  const detailNote = [detail.length > height - 2 ? position(detailStart, height - 2, detail.length) : "", input.profile].filter(Boolean).join(" · ");
+  const detailPane = box(detailWidth, height, detail.slice(detailStart), { title: "Detail", right: detailNote, focused: input.focus === "detail", scroll: { total: detail.length, start: detailStart }, theme });
+  const showList = wide || input.focus !== "detail";
+  const showDetail = wide || input.focus === "detail";
+  if (showList) notePane(input.panes, "list", 0, 0, listWidth, height, rows.length);
+  if (showDetail) notePane(input.panes, "detail", 0, wide ? listWidth + 1 : 0, detailWidth, height, detail.length);
+  if (!wide) return fill(showDetail ? detailPane : listPane, height, width);
+  return fill(beside([listPane, detailPane]), height, width);
+}

package/src/lobby/tabs/tasks.ts

@@ -0,0 +1,243 @@
+/**
+ * The Tasks tab: every task in the project — this session's, those other pi
+ * sessions are driving, plans saved from the planner and recently finished
+ * ones — with a detail pane showing the approved plan and its progress, the
+ * user's comments on it, amendments, what the task waits on and recent runs.
+ */
+import { TERMINAL_STATES, taskRequest, type Task } from "../../schemas/task.ts";
+import type { PlannedTask } from "../../state/backlog.ts";
+import type { PlanComment } from "../../state/comments.ts";
+import { planChecklist } from "../../pi/zen.ts";
+import { persistedRuns } from "../../pi/ui.ts";
+import { describeRun, runFromLog } from "../../pi/run-summary.ts";
+import { pendingApprovals } from "../../workflow/approvals.ts";
+import { ago, beside, bold, box, detailWindow, fill, markdownLines, notePane, paint, position, rule, selectRow, since, windowStart, wrap, wrapHanging, type LobbyTheme, type PaneLayout } from "../layout.ts";
+
+export type TaskSection = "mine" | "others" | "pending" | "recent";
+
+export interface TaskRow {
+  kind: "task" | "plan";
+  id: string;
+  title: string;
+  section: TaskSection;
+  /** Task state, or `pending` for a saved plan. */
+  status: string;
+  /** Right-hand note: progress, owner or issue. */
+  meta: string;
+}
+
+export const SECTION_TITLES: Record<TaskSection, string> = {
+  mine: "THIS SESSION",
+  others: "OTHER SESSIONS",
+  pending: "PENDING (planned)",
+  recent: "RECENT",
+};
+
+/** Finished tasks listed under RECENT. */
+export const RECENT_LIMIT = 8;
+
+/** Checklist progress as `3/7`, or undefined before a plan exists. */
+export function taskProgress(task: Task): { done: number; total: number } | undefined {
+  if (!task.plan) return undefined;
+  const steps = planChecklist(task.plan, persistedRuns(task));
+  if (steps.length === 0) return undefined;
+  return { done: steps.filter((step) => step.status === "done").length, total: steps.length };
+}
+
+function ownerLabel(task: Task, sessionId: string | undefined): string {
+  if (!task.ownerSessionId) return "no owner";
+  if (task.ownerSessionId === sessionId) return "this session";
+  return `session ${task.ownerSessionId.slice(0, 8)}`;
+}
+
+/** Rows in display order: this session's task, other sessions', pending plans, then recent finished tasks. */
+export function taskRows(tasks: readonly Task[], plans: readonly PlannedTask[], sessionId: string | undefined, now: number): TaskRow[] {
+  const active = tasks.filter((task) => !TERMINAL_STATES.includes(task.state));
+  const row = (task: Task, section: TaskSection): TaskRow => {
+    const progress = taskProgress(task);
+    const meta = section === "recent" ? ago(now - Date.parse(task.updatedAt)) : progress ? `${progress.done}/${progress.total}` : section === "others" ? ownerLabel(task, sessionId) : "";
+    return { kind: "task", id: task.id, title: task.title, section, status: task.paused ? `${task.state} (paused)` : task.state, meta };
+  };
+  return [
+    ...active.filter((task) => sessionId && task.ownerSessionId === sessionId).map((task) => row(task, "mine")),
+    ...active.filter((task) => !sessionId || task.ownerSessionId !== sessionId).map((task) => row(task, "others")),
+    ...plans.filter((plan) => plan.status === "pending").map((plan): TaskRow => ({
+      kind: "plan", id: plan.id, title: plan.title, section: "pending", status: "pending", meta: plan.issue ? `#${plan.issue.number}` : "",
+    })),
+    ...tasks.filter((task) => TERMINAL_STATES.includes(task.state)).slice(0, RECENT_LIMIT).map((task) => row(task, "recent")),
+  ];
+}
+
+const STATE_COLORS: Record<string, "success" | "warning" | "error" | "accent" | "muted" | "dim"> = {
+  completed: "success",
+  abandoned: "dim",
+  blocked: "error",
+  awaiting_approval: "warning",
+  implementing: "accent",
+  reviewing: "accent",
+  pending: "muted",
+};
+
+function statusColor(status: string): "success" | "warning" | "error" | "accent" | "muted" | "dim" {
+  return STATE_COLORS[status.replace(/ \(paused\)$/, "")] ?? "muted";
+}
+
+/** List lines with section headers, plus which line holds the selected row. */
+export function listLines(rows: readonly TaskRow[], selected: number, width: number, focused: boolean, theme?: LobbyTheme): { lines: string[]; selectedLine: number } {
+  const lines: string[] = [];
+  let selectedLine = 0;
+  let section: TaskSection | undefined;
+  rows.forEach((row, index) => {
+    if (row.section !== section) {
+      section = row.section;
+      if (lines.length > 0) lines.push("");
+      lines.push(paint(theme, "dim", SECTION_TITLES[section]));
+    }
+    const marker = index === selected ? paint(theme, "accent", "▸ ") : "  ";
+    const status = paint(theme, statusColor(row.status), row.status.replace(/_/g, " "));
+    const meta = row.meta ? ` ${paint(theme, "dim", row.meta)}` : "";
+    const title = index === selected ? bold(theme, row.title) : row.title;
+    if (index === selected) selectedLine = lines.length;
+    lines.push(selectRow(theme, `${marker}${title} ${paint(theme, "dim", "·")} ${status}${meta}`, width, index === selected, focused));
+  });
+  return { lines, selectedLine };
+}
+
+const COMMENT_MARKS: Record<PlanComment["status"], string> = { open: "○", delivered: "◐", addressed: "✓" };
+const COMMENT_WORDS: Record<PlanComment["status"], string> = { open: "waiting for the owning session", delivered: "sent to the oracle", addressed: "plan amended" };
+
+function section(title: string, width: number, theme?: LobbyTheme, right = ""): string[] {
+  return ["", rule(width, title, theme, right)];
+}
+
+/** Detail lines for a task: header, plan with progress, comments, amendments, waits and runs. */
+export function taskDetailLines(task: Task, comments: readonly PlanComment[], sessionId: string | undefined, width: number, now: number, theme?: LobbyTheme): string[] {
+  const lines: string[] = [];
+  lines.push(...wrap(bold(theme, `${task.title}`), width));
+  const facts = [
+    paint(theme, statusColor(task.state), `${task.state.replace(/_/g, " ")}${task.paused ? " (paused)" : ""}`),
+    ownerLabel(task, sessionId),
+    `started ${since(now - Date.parse(task.createdAt))}`,
+    task.domains.length > 0 ? task.domains.join(", ") : "",
+  ].filter(Boolean);
+  lines.push(paint(theme, "dim", task.id), facts.join(paint(theme, "dim", " · ")));
+  const request = taskRequest(task);
+  if (request && request !== task.title) lines.push(...section("Request", width, theme), ...wrap(paint(theme, "muted", request), width));
+  if (task.plan) {
+    const steps = planChecklist(task.plan, persistedRuns(task));
+    const done = steps.filter((step) => step.status === "done").length;
+    lines.push(...section("Approved plan", width, theme, steps.length > 0 ? `${done}/${steps.length} steps` : ""));
+    for (const [index, step] of steps.entries()) {
+      const mark = step.status === "done" ? paint(theme, "success", "✓") : step.status === "current" ? paint(theme, "accent", "▸") : paint(theme, "dim", "○");
+      const text = step.status === "pending" ? paint(theme, "muted", step.text) : step.text;
+      lines.push(...wrapHanging(`${mark} ${index + 1}. `, text, width));
+    }
+    if (steps.length > 0) lines.push("");
+    lines.push(...markdownLines(task.plan, width, theme));
+  } else if (task.proposal) {
+    lines.push(...section("Proposal (no plan yet)", width, theme), ...markdownLines(task.proposal, width, theme));
+  } else {
+    lines.push(...section("Plan", width, theme), paint(theme, "dim", "No proposal or plan yet — the oracle is still clarifying or scouting."));
+  }
+  const open = comments.filter((comment) => comment.status !== "addressed").length;
+  lines.push(...section("Comments", width, theme, open > 0 ? `${open} open` : ""));
+  if (comments.length === 0) lines.push(paint(theme, "dim", TERMINAL_STATES.includes(task.state) ? "No comments." : "No comments yet — press c to comment on the plan; the oracle amends it."));
+  for (const comment of comments) {
+    const color = comment.status === "addressed" ? "success" : comment.status === "delivered" ? "accent" : "warning";
+    lines.push(...wrapHanging(`${paint(theme, color, COMMENT_MARKS[comment.status])} `, `${comment.text} ${paint(theme, "dim", `— ${COMMENT_WORDS[comment.status]}, ${since(now - Date.parse(comment.createdAt))}`)}`, width));
+  }
+  if (task.amendments.length > 0) {
+    lines.push(...section("Amendments", width, theme));
+    for (const amendment of task.amendments) lines.push(...wrapHanging("- ", amendment, width));
+  }
+  const approvals = pendingApprovals(task);
+  if (approvals.length > 0 || task.blockers.length > 0) {
+    lines.push(...section("Waiting on", width, theme));
+    for (const approval of approvals) lines.push(...wrapHanging(`${paint(theme, "warning", "!")} `, `${approval.kind} for ${approval.domain}: ${approval.detail}`, width));
+    for (const blocker of task.blockers) lines.push(...wrapHanging(`${paint(theme, "error", "✗")} `, `${blocker.reason} (needs: ${blocker.need})`, width));
+  }
+  const runs = (task.runLog ?? []).slice(-6);
+  if (runs.length > 0) {
+    lines.push(...section("Recent runs", width, theme));
+    for (const entry of runs) lines.push(...wrap(paint(theme, "muted", describeRun(runFromLog(entry, task.id), now)), width));
+  }
+  return lines;
+}
+
+/** Detail lines for a saved plan waiting to start. */
+export function planDetailLines(plan: PlannedTask, width: number, now: number, theme?: LobbyTheme): string[] {
+  const lines = [
+    ...wrap(bold(theme, plan.title), width),
+    paint(theme, "dim", plan.id),
+    [paint(theme, "muted", "pending"), `saved ${since(now - Date.parse(plan.createdAt))}`].join(paint(theme, "dim", " · ")),
+  ];
+  if (plan.issue) lines.push(...wrap(`from issue #${plan.issue.number} — ${plan.issue.title}${plan.issue.url ? ` ${paint(theme, "dim", plan.issue.url)}` : ""}`, width));
+  lines.push("", paint(theme, "dim", "s starts it as a task in this session · d discards it"));
+  lines.push(...section("Agreed plan", width, theme), ...markdownLines(plan.brief, width, theme));
+  return lines;
+}
+
+export interface TasksInput {
+  rows: readonly TaskRow[];
+  selected: number;
+  /** Detail lines for the selected row, already fitted to the detail pane. */
+  detail: readonly string[];
+  focus: "list" | "detail";
+  detailOffset: number;
+  notice?: string;
+  /** The search in force; the rows are already filtered by it. */
+  query?: string;
+  /** Filled with where the list and the detail landed, for scrolling. */
+  panes?: PaneLayout;
+}
+
+/** Narrow terminals show the list or the detail, not both. */
+export const TASKS_COLUMNS_MIN = 90;
+
+/** Outer widths of the list and detail panes (the detail's text is 4 columns narrower). */
+export function tasksWidths(width: number): { list: number; detail: number; wide: boolean } {
+  if (width < TASKS_COLUMNS_MIN) return { list: width, detail: width, wide: false };
+  const list = Math.max(36, Math.round((width - 1) * 0.36));
+  return { list, detail: width - 1 - list, wide: true };
+}
+
+/** Everything a search looks at for one row: id, title, request, proposal, plan. */
+function rowText(row: TaskRow, tasks: readonly Task[], plans: readonly PlannedTask[]): string {
+  if (row.kind === "plan") {
+    const plan = plans.find((entry) => entry.id === row.id);
+    return [row.id, row.title, plan?.brief ?? "", plan?.issue?.title ?? ""].join("\n");
+  }
+  const task = tasks.find((entry) => entry.id === row.id);
+  return [row.id, row.title, row.status, task ? taskRequest(task) : "", task?.proposal ?? "", task?.plan ?? ""].join("\n");
+}
+
+/** The rows whose task or plan mentions `query` anywhere. */
+export function filterRows(rows: readonly TaskRow[], tasks: readonly Task[], plans: readonly PlannedTask[], query: string | undefined): TaskRow[] {
+  const needle = query?.trim().toLowerCase();
+  if (!needle) return [...rows];
+  return rows.filter((row) => rowText(row, tasks, plans).toLowerCase().includes(needle));
+}
+
+export function renderTasks(input: TasksInput, width: number, height: number, theme?: LobbyTheme): string[] {
+  if (height <= 0) return [];
+  const notice = input.notice ? [paint(theme, "accent", input.notice)] : [];
+  const bodyHeight = height - notice.length;
+  if (input.rows.length === 0) {
+    const empty = input.query ? `No task or plan mentions "${input.query}".` : "No tasks yet. Start one from the Lobby tab, or plan one in the Plan tab.";
+    return fill([...notice, ...box(width, bodyHeight, [paint(theme, "dim", empty)], { title: "Tasks", theme })], height, width);
+  }
+  const { list: listWidth, detail: detailWidth, wide } = tasksWidths(width);
+  const list = listLines(input.rows, input.selected, listWidth - 4, input.focus === "list", theme);
+  const rows = Math.max(0, bodyHeight - 2);
+  const listStart = windowStart(list.selectedLine, list.lines.length, rows);
+  const count = input.query ? `${input.rows.length} match${input.rows.length === 1 ? "" : "es"}` : `${input.rows.length}`;
+  const listPane = box(listWidth, bodyHeight, list.lines.slice(listStart), { title: "Tasks", right: count, focused: input.focus === "list", scroll: { total: list.lines.length, start: listStart }, theme });
+  const detailStart = detailWindow(input.detail.length, rows, input.detailOffset);
+  const detailPane = box(detailWidth, bodyHeight, input.detail.slice(detailStart), { title: "Detail", ...(input.detail.length > rows ? { right: position(detailStart, rows, input.detail.length) } : {}), focused: input.focus === "detail", scroll: { total: input.detail.length, start: detailStart }, theme });
+  const showList = wide || input.focus !== "detail";
+  const showDetail = wide || input.focus === "detail";
+  if (showList) notePane(input.panes, "list", notice.length, 0, listWidth, bodyHeight, list.lines.length);
+  if (showDetail) notePane(input.panes, "detail", notice.length, wide ? listWidth + 1 : 0, detailWidth, bodyHeight, input.detail.length);
+  if (!wide) return fill([...notice, ...(showDetail ? detailPane : listPane)], height, width);
+  return fill([...notice, ...beside([listPane, detailPane])], height, width);
+}