@a-t-h-i/bot-lobby 0.6.2 → 0.6.4

package/src/lobby/tabs/home.ts

@@ -5,11 +5,12 @@
  * 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 { visibleWidth } from "@earendil-works/pi-tui";
+import { textWidth } from "../../width.ts";
 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, fit, italic, markdownLines, notePane, paint, since, spinner, wrap, wrapHanging, type LobbyColor, type LobbyTheme, type PaneLayout } from "../layout.ts";
+import { markdownBlocks } from "../markdown.ts";
+import { beside, bold, box, clock, fill, fit, italic, markdownLines, notePane, paint, since, spinner, wrap, wrapHanging, type LobbyColor, type LobbyTheme, type PaneLayout, type PaneMark } from "../layout.ts";
 
 /** The Lobby tab's scrollable panes. */
 export const HOME_PANES = ["conversation", "activity", "thinking"] as const;
@@ -35,6 +36,8 @@ export interface HomeInput {
   focus?: HomePane;
   /** Filled with where each pane landed and how much it holds. */
   panes?: PaneLayout;
+  /** Each pane's newest entry as the frame before marked it, so the pane can measure what arrived below since. */
+  anchors?: ReadonlyMap<string, PaneMark>;
   tick: number;
   now: number;
   /** Which panes show. */
@@ -51,6 +54,8 @@ export interface HomeInput {
   emptyNote?: string;
   /** What the empty activity log says instead of "No activity yet.". */
   activityNote?: string;
+  /** Tops the conversation when earlier messages are not loaded (scrolling up loads them). */
+  olderNote?: string;
 }
 
 /** Wide terminals put the conversation and the activity log side by side. */
@@ -132,78 +137,199 @@ export function speakerLine(speaker: Speaker, width: number, theme?: LobbyTheme,
   const dimmed = note ? paint(theme, "dim", note) : "";
   if (side === "right") {
     const head = dimmed ? `${dimmed}  ${label} ${who}` : `${label} ${who}`;
-    return `${" ".repeat(Math.max(0, width - visibleWidth(head)))}${head}`;
+    return `${" ".repeat(Math.max(0, width - textWidth(head)))}${head}`;
   }
   const left = `${who} ${label}`;
-  const gap = width - visibleWidth(left) - visibleWidth(dimmed);
+  const gap = width - textWidth(left) - textWidth(dimmed);
   return gap >= 1 && dimmed ? `${left}${" ".repeat(gap)}${dimmed}` : left;
 }
 
 /**
  * What you wrote: a bubble on the right, only as wide as its longest line (up
- * to `YOU_SHARE` of the pane), your words in the accent colour on pi's
- * user-message background — or, where the theme has no background, closed
- * by a bar in that colour.
+ * to `YOU_SHARE` of the pane), your words in Markdown as pi renders them, in
+ * the accent colour on pi's user-message background — or, where the theme
+ * has no background, closed by a bar in that colour.
  */
 export function youLines(text: string, width: number, theme?: LobbyTheme): string[] {
   const most = Math.max(1, messageWidth(width, YOU_SHARE, 4) - 2);
-  const lines = wrap(text, most);
-  const inner = Math.max(1, ...lines.map((line) => visibleWidth(line)));
+  // The renderer colours your words itself; without one (tests) they are wrapped and painted here.
+  const rendered = theme?.markdown ? markdownLines(text, most, theme, true, "you") : wrap(text, most).map((line) => paint(theme, "accent", line));
+  const lines = rendered.length > 0 ? rendered : [""];
+  const inner = Math.max(1, ...lines.map((line) => textWidth(line)));
   const pad = " ".repeat(Math.max(0, width - inner - 2));
   const bubble = theme?.bg
-    ? (line: string) => theme.bg!("userMessageBg", ` ${fit(paint(theme, "accent", line), inner)} `)
-    : (line: string) => `${fit(paint(theme, "accent", line), inner)} ${paint(theme, "accent", "▐")}`;
+    ? (line: string) => theme.bg!("userMessageBg", ` ${fit(line, inner)} `)
+    : (line: string) => `${fit(line, inner)} ${paint(theme, "accent", "▐")}`;
   return lines.map((line) => `${pad}${bubble(line)}`);
 }
 
 /** The oracle's reply as Markdown on the left, under its name. */
-function oracleLines(text: string, width: number, theme?: LobbyTheme): string[] {
+function oracleLines(text: string, width: number, theme?: LobbyTheme, keep = true): string[] {
   const indent = " ".repeat(BODY_INDENT);
-  return markdownLines(text, Math.max(1, messageWidth(width, ORACLE_SHARE, 0) - BODY_INDENT), theme).map((line) => (line ? `${indent}${line}` : ""));
+  return markdownLines(text, Math.max(1, messageWidth(width, ORACLE_SHARE, 0) - BODY_INDENT), theme, keep).map((line) => (line ? `${indent}${line}` : ""));
+}
+
+/** An open block this long is drawn again at most every `BIG_BLOCK_MS` while it grows (a long code block, say). */
+const BIG_BLOCK = 1500;
+const BIG_BLOCK_MS = 100;
+let lastOpen: { text: string; width: number; theme: object; lines: string[]; at: number } | undefined;
+
+/** The block the oracle is writing: drawn afresh (and not cached), except that a big one is redrawn only a few times a second. */
+function openBlockLines(text: string, width: number, theme: LobbyTheme | undefined): string[] {
+  const now = performance.now();
+  const key = theme ?? PLAIN;
+  if (text.length > BIG_BLOCK && lastOpen && lastOpen.width === width && lastOpen.theme === key && now - lastOpen.at < BIG_BLOCK_MS && text.startsWith(lastOpen.text)) return lastOpen.lines;
+  const lines = oracleLines(text, width, theme, false);
+  lastOpen = text.length > BIG_BLOCK ? { text, width, theme: key, lines, at: now } : undefined;
+  return lines;
+}
+
+/**
+ * The reply the oracle is still writing. It is drawn block by block (see
+ * `markdownBlocks`): finished blocks come from the Markdown cache and only the
+ * one being written is rendered on each frame. It is drawn whole (it is
+ * capped at `MAX_REPLY_TEXT`), so the pane knows exactly how far it reaches.
+ */
+function liveLines(text: string, width: number, theme: LobbyTheme | undefined): string[] {
+  const blocks = markdownBlocks(text);
+  const lines: string[] = [];
+  for (let index = 0; index < blocks.length; index += 1) {
+    const block = index === blocks.length - 1 ? openBlockLines(blocks[index]!, width, theme) : oracleLines(blocks[index]!, width, theme);
+    if (block.length === 0) continue;
+    if (lines.length > 0) lines.push("");
+    for (const line of block) lines.push(line);
+  }
+  return lines;
 }
 
 /** An event in the conversation (a task starting, a comment sent) as a centred rule; failures stand out instead. */
 export function eventLines(text: string, at: number, width: number, theme?: LobbyTheme): string[] {
   if (text.startsWith("✗")) return wrap(paint(theme, "error", text), width);
   const label = ` ${text}${at > 0 ? ` · ${clock(at)}` : ""} `;
-  const room = width - visibleWidth(label);
+  const room = width - textWidth(label);
   if (room < 6) return wrap(paint(theme, "dim", text), width);
   const left = Math.floor(room / 2);
   return [paint(theme, "dim", `${"─".repeat(left)}${label}${"─".repeat(room - left)}`)];
 }
 
+/** The newest lines of a pane, and how many it holds in all (estimated when only the newest were drawn). */
+export interface PaneLines {
+  lines: string[];
+  total: number;
+  /** The newest entry and how many lines run from its first line to the end, for the next frame to measure against. */
+  mark?: PaneMark;
+  /** Lines that arrived below the anchor passed in since it was marked; absent when it is no longer there. */
+  grew?: number;
+}
+
 /**
- * The conversation, oldest first, like a chat: your messages as bubbles on
- * the right, the oracle's replies in Markdown on the left, each turn under a
- * line naming its speaker and time, events as centred rules, and while the
- * oracle works its header says so (streaming the reply under it).
+ * Where the anchor (an entry the frame before marked) sits in `entries`, so
+ * drawing goes on at least that far back; `entries.length` when it is gone.
+ * It is nearly always the last entry, so the search from the end is short.
  */
-export function chatLines(chat: readonly ChatEntry[], width: number, theme?: LobbyTheme, live?: string, busy = false, tick = 0): string[] {
-  const lines: string[] = [];
-  const gap = () => {
-    if (lines.length > 0 && lines.at(-1) !== "") lines.push("");
+function reachOf<T extends object>(entries: readonly T[], anchor: PaneMark | undefined): { found: number; reach: number } {
+  const found = anchor ? entries.lastIndexOf(anchor.entry as T) : -1;
+  return { found, reach: found < 0 ? entries.length : found };
+}
+
+/** A message's drawn lines, kept until the pane's width, the theme or its grouping changes. */
+interface Block {
+  width: number;
+  grouped: boolean;
+  lines: string[];
+}
+
+/**
+ * Drawn messages, per theme and per message: a message is drawn once (its
+ * Markdown is the costly part) and reused on every later frame. Messages
+ * that leave the feed are forgotten with it.
+ */
+const blocks = new WeakMap<object, WeakMap<ChatEntry, Block>>();
+const PLAIN = {};
+
+/** Whether `entry` shares the speaker line of the message before it (same speaker, within minutes). */
+function isGrouped(entry: ChatEntry, before: ChatEntry | undefined): boolean {
+  return entry.role !== "note" && before !== undefined && before.role === entry.role && entry.at >= before.at && entry.at - before.at < GROUP_MS;
+}
+
+function entryBlock(entry: ChatEntry, before: ChatEntry | undefined, width: number, theme?: LobbyTheme): string[] {
+  const grouped = isGrouped(entry, before);
+  let cache = blocks.get(theme ?? PLAIN);
+  if (!cache) {
+    cache = new WeakMap();
+    blocks.set(theme ?? PLAIN, cache);
+  }
+  const hit = cache.get(entry);
+  if (hit && hit.width === width && hit.grouped === grouped) return hit.lines;
+  const lines = entry.role === "note"
+    ? eventLines(entry.text, entry.at, width, theme)
+    : [
+        ...(grouped ? [] : [speakerLine(entry.role, width, theme, entry.at > 0 ? clock(entry.at) : "")]),
+        ...(entry.role === "you" ? youLines(entry.text, width, theme) : oracleLines(entry.text, width, theme)),
+      ];
+  cache.set(entry, { width, grouped, lines });
+  return lines;
+}
+
+export interface ChatTailOptions {
+  /** The reply the oracle is still writing. */
+  live?: string;
+  /** The oracle's turn is running. */
+  busy?: boolean;
+  tick?: number;
+  /** Tops a conversation that has earlier messages still to load. */
+  older?: string;
+  /** The newest message as the frame before marked it: drawing reaches at least back to it, to measure what arrived below. */
+  anchor?: PaneMark;
+}
+
+/**
+ * The newest `need` lines of the conversation, like a chat: your messages as
+ * bubbles on the right, the oracle's replies in Markdown on the left, each
+ * turn under a line naming its speaker and time, events as centred rules,
+ * and while the oracle works its header says so (streaming the reply under
+ * it). Only the messages those lines reach are drawn — scrolling back draws
+ * more — and each is drawn once; the total is estimated from them until the
+ * whole conversation has been drawn. `older` tops a conversation that has
+ * earlier messages still to load.
+ */
+export function chatTail(chat: readonly ChatEntry[], width: number, theme: LobbyTheme | undefined, need: number, options: ChatTailOptions = {}): PaneLines {
+  const { live, busy = false, tick = 0, older, anchor } = options;
+  const parts: string[][] = [];
+  let count = 0;
+  const add = (lines: string[]) => {
+    if (lines.length === 0) return;
+    count += lines.length + (parts.length > 0 ? 1 : 0);
+    parts.push(lines);
   };
-  let last: ChatEntry | undefined;
-  for (const entry of chat) {
-    gap();
-    if (entry.role === "note") {
-      lines.push(...eventLines(entry.text, entry.at, width, theme));
-      last = undefined;
-      continue;
-    }
-    const grouped = last?.role === entry.role && entry.at >= last.at && entry.at - last.at < GROUP_MS;
-    if (!grouped) lines.push(speakerLine(entry.role, width, theme, entry.at > 0 ? clock(entry.at) : ""));
-    lines.push(...(entry.role === "you" ? youLines(entry.text, width, theme) : oracleLines(entry.text, width, theme)));
-    last = entry;
+  if (live?.trim()) add([speakerLine("oracle", width, theme, `${spinner(tick)} writing`), ...liveLines(live.trim(), width, theme)]);
+  else if (busy) add([speakerLine("oracle", width, theme, `${spinner(tick)} working…`)]);
+  const { found, reach } = reachOf(chat, anchor);
+  let mark: PaneMark | undefined;
+  let grew: number | undefined;
+  let index = chat.length - 1;
+  for (; index >= 0 && (count < need || index >= reach); index -= 1) {
+    const entry = chat[index]!;
+    add(entryBlock(entry, chat[index - 1], width, theme));
+    if (index === chat.length - 1) mark = { entry, below: count };
+    if (index === found) grew = count - anchor!.below;
   }
-  if (live?.trim()) {
-    gap();
-    lines.push(speakerLine("oracle", width, theme, `${spinner(tick)} writing`), ...oracleLines(live.trim(), width, theme));
-  } else if (busy) {
-    gap();
-    lines.push(speakerLine("oracle", width, theme, `${spinner(tick)} working…`));
+  const drawn = chat.length - 1 - index;
+  if (index < 0 && older) add(wrap(paint(theme, "dim", older), width));
+  const lines: string[] = [];
+  for (let part = parts.length - 1; part >= 0; part -= 1) {
+    if (lines.length > 0) lines.push("");
+    for (const line of parts[part]!) lines.push(line);
   }
-  return lines;
+  // Messages not drawn yet count at the average height of those that were.
+  const rest = index + 1;
+  const total = rest > 0 && drawn > 0 ? lines.length + Math.ceil((rest * lines.length) / drawn) : lines.length;
+  return { lines, total, ...(mark ? { mark } : {}), ...(grew !== undefined ? { grew } : {}) };
+}
+
+/** The whole conversation drawn (the session browser's preview and tests; the Lobby tab draws only what shows). */
+export function chatLines(chat: readonly ChatEntry[], width: number, theme?: LobbyTheme, live?: string, busy = false, tick = 0): string[] {
+  return chatTail(chat, width, theme, Number.POSITIVE_INFINITY, { ...(live ? { live } : {}), busy, tick }).lines;
 }
 
 function emptyChat(input: HomeInput, width: number, theme?: LobbyTheme): string[] {
@@ -237,24 +363,51 @@ export function filterFeed(input: Pick<HomeInput, "chat" | "activity" | "thought
   };
 }
 
-function conversation(input: HomeInput, chat: readonly ChatEntry[], width: number, theme?: LobbyTheme): string[] {
+function whole(lines: string[]): PaneLines {
+  return { lines, total: lines.length };
+}
+
+function conversation(input: HomeInput, chat: readonly ChatEntry[], width: number, need: number, anchor: PaneMark | undefined, theme?: LobbyTheme): PaneLines {
   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);
+  if (chat.length === 0 && !live && !busy) return whole(emptyChat(input, width, theme));
+  const older = searching ? undefined : input.olderNote;
+  return chatTail(chat, width, theme, need, { ...(live ? { live } : {}), busy, tick: input.tick, ...(older ? { older } : {}), ...(anchor ? { anchor } : {}) });
 }
 
-function activity(input: HomeInput, entries: readonly ActivityEntry[], width: number, theme?: LobbyTheme): string[] {
-  if (entries.length === 0) return wrap(paint(theme, "dim", input.query ? `No activity matches "${input.query}".` : input.activityNote ?? "No activity yet."), width);
-  return entries.map((entry) => activityLine(entry, width, input.tick, theme));
+/** The newest `need` activity lines (one per entry), drawn only as far back as the pane shows. */
+function activity(input: HomeInput, entries: readonly ActivityEntry[], width: number, need: number, anchor: PaneMark | undefined, theme?: LobbyTheme): PaneLines {
+  if (entries.length === 0) return whole(wrap(paint(theme, "dim", input.query ? `No activity matches "${input.query}".` : input.activityNote ?? "No activity yet."), width));
+  const shown = Number.isFinite(need) ? entries.slice(-Math.max(0, need)) : entries;
+  // One line per entry: where the anchor sits is a count, nothing needs drawing to find it.
+  const { found } = reachOf(entries, anchor);
+  return {
+    lines: shown.map((entry) => activityLine(entry, width, input.tick, theme)),
+    total: entries.length,
+    mark: { entry: entries.at(-1)!, below: 1 },
+    ...(found >= 0 ? { grew: entries.length - found - anchor!.below } : {}),
+  };
 }
 
 /** 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 };
+  return paneWindow({ lines: [...lines], total: lines.length }, rows, offset);
+}
+
+/**
+ * `rows` lines of a pane `offset` lines back from its newest (clamped), when
+ * only its newest lines were drawn: where they start in the whole pane, for
+ * the scrollbar.
+ */
+export function paneWindow(content: PaneLines, rows: number, offset = 0): { shown: string[]; start: number; offset: number } {
+  const { lines } = content;
+  const total = Math.max(content.total, lines.length);
+  const height = Math.max(0, rows);
+  const back = Math.min(Math.max(0, offset), Math.max(0, total - height));
+  const end = Math.max(0, lines.length - back);
+  const begin = Math.max(0, end - height);
+  return { shown: lines.slice(begin, end), start: Math.max(0, total - back - height), offset: back };
 }
 
 /** The thought to show: a live one first, otherwise the newest. */
@@ -262,17 +415,79 @@ export function currentThought(thoughts: readonly ThoughtEntry[]): ThoughtEntry
   return [...thoughts].reverse().find((entry) => entry.live) ?? thoughts.at(-1);
 }
 
+/**
+ * Drawn thoughts, per theme and per thought, kept while the thought's text
+ * and the width stay the same (a live thought grows, so it is drawn again as
+ * it streams; settled ones are wrapped once).
+ */
+const thoughtBlocks = new WeakMap<object, WeakMap<ThoughtEntry, { width: number; text: string; lines: string[]; at: number }>>();
+
+/** A live thought this long is wrapped again at most every `LONG_THOUGHT_MS` while it streams; rendered as Markdown (costlier), from `LONG_THOUGHT_MARKDOWN`. */
+const LONG_THOUGHT = 1000;
+const LONG_THOUGHT_MARKDOWN = 300;
+const LONG_THOUGHT_MS = 150;
+
+function thoughtBlock(thought: ThoughtEntry, width: number, theme?: LobbyTheme): string[] {
+  let cache = thoughtBlocks.get(theme ?? PLAIN);
+  if (!cache) {
+    cache = new WeakMap();
+    thoughtBlocks.set(theme ?? PLAIN, cache);
+  }
+  const hit = cache.get(thought);
+  const now = performance.now();
+  const long = theme?.markdown ? LONG_THOUGHT_MARKDOWN : LONG_THOUGHT;
+  if (hit && hit.width === width && (hit.text === thought.text || (thought.live && thought.text.length > long && now - hit.at < LONG_THOUGHT_MS))) return hit.lines;
+  const lead = `${paint(theme, sourceColor(thought.source), thought.source.padEnd(SOURCE_WIDTH).slice(0, SOURCE_WIDTH))} `;
+  const lines = theme?.markdown ? thoughtMarkdown(lead, thought, width, theme) : wrapHanging(lead, italic(theme, paint(theme, "dim", thought.text.replace(/\s*\n\s*/g, " "))), width);
+  cache.set(thought, { width, text: thought.text, lines, at: now });
+  return lines;
+}
+
+/**
+ * A thought in Markdown as pi shows thinking (dimmed, in italics), after who
+ * thought it: a model's `**Checking the plan**` reads bold, not starred. The
+ * pane is small, so the blank lines between paragraphs are left out. A live
+ * thought is not kept in the renderer's cache; it changes as it streams.
+ */
+function thoughtMarkdown(lead: string, thought: ThoughtEntry, width: number, theme: LobbyTheme): string[] {
+  const indent = " ".repeat(textWidth(lead));
+  const body = markdownLines(thought.text, Math.max(1, width - textWidth(lead)), theme, !thought.live, "thought").filter((line) => line.trim());
+  if (body.length === 0) return [lead];
+  return body.map((line, index) => `${index === 0 ? lead : indent}${line}`);
+}
+
+/** The newest `need` lines of the thoughts, oldest first: only the thoughts they reach are drawn (and back to `anchor`), and the rest estimated. */
+export function thoughtTail(thoughts: readonly ThoughtEntry[], width: number, theme: LobbyTheme | undefined, need: number, anchor?: PaneMark): PaneLines {
+  const parts: string[][] = [];
+  let count = 0;
+  const { found, reach } = reachOf(thoughts, anchor);
+  let mark: PaneMark | undefined;
+  let grew: number | undefined;
+  let index = thoughts.length - 1;
+  for (; index >= 0 && (count < need || index >= reach); index -= 1) {
+    const thought = thoughts[index]!;
+    const lines = thoughtBlock(thought, width, theme);
+    parts.push(lines);
+    count += lines.length;
+    if (index === thoughts.length - 1) mark = { entry: thought, below: count };
+    if (index === found) grew = count - anchor!.below;
+  }
+  const lines: string[] = [];
+  for (let part = parts.length - 1; part >= 0; part -= 1) for (const line of parts[part]!) lines.push(line);
+  const rest = index + 1;
+  const drawn = parts.length;
+  const total = rest > 0 && drawn > 0 ? lines.length + Math.ceil((rest * lines.length) / drawn) : lines.length;
+  return { lines, total, ...(mark ? { mark } : {}), ...(grew !== undefined ? { grew } : {}) };
+}
+
 /** 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);
-  });
+  return thoughtTail(thoughts, width, theme, Number.POSITIVE_INFINITY).lines;
 }
 
-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 thinkingContent(input: HomeInput, thoughts: readonly ThoughtEntry[], width: number, need: number, anchor: PaneMark | undefined, theme?: LobbyTheme): PaneLines {
+  if (thoughts.length > 0) return thoughtTail(thoughts, width, theme, need, anchor);
+  return whole([paint(theme, "dim", input.query ? `No thought matches "${input.query}".` : "Thoughts from the oracle and every agent appear here, and only here.")]);
 }
 
 /**
@@ -295,7 +510,7 @@ function sceneLines(input: HomeInput, width: number, height: number, theme?: Lob
 function keyNote(lines: readonly string[], width: number, note: string | undefined, theme?: LobbyTheme): string[] {
   const first = lines[0];
   if (!note || first === undefined) return [...lines];
-  const gap = width - visibleWidth(first) - visibleWidth(note) - 1;
+  const gap = width - textWidth(first) - textWidth(note) - 1;
   if (gap < 2) return [...lines];
   return [`${first}${" ".repeat(gap)}${paint(theme, "dim", note)}`, ...lines.slice(1)];
 }
@@ -328,19 +543,26 @@ export function renderHome(input: HomeInput, width: number, height: number, them
   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);
+  /**
+   * One scrollable pane: only the lines it shows are drawn — its newest, or
+   * as far back as it is scrolled — in a box that records where it sits, and
+   * how many lines arrived below since the frame before.
+   */
+  const pane = (name: HomePane, title: string, note: string | undefined, content: (inner: number, need: number, anchor: PaneMark | undefined) => PaneLines) => (top: number, left: number, w: number, h: number): string[] => {
+    const rows = Math.max(0, h - 2);
+    const offset = input.offsets?.[name] ?? 0;
+    const drawn = content(Math.max(1, w - 4), rows + offset, input.anchors?.get(name));
+    const view = paneWindow(drawn, rows, offset);
+    const total = Math.max(drawn.total, drawn.lines.length);
+    notePane(input.panes, name, top, left, w, h, total, { ...(drawn.mark ? { mark: drawn.mark } : {}), grew: drawn.grew ?? 0 });
     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 });
+    return box(w, h, view.shown, { title, ...(right ? { right } : {}), focused: input.focus === name, scroll: { total, start: view.start }, theme });
   };
-  const chatBox = pane("conversation", input.title ? `Conversation · ${input.title}` : "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 chatBox = pane("conversation", input.title ? `Conversation · ${input.title}` : "Conversation", input.query ? matches(feed.chat.length) : input.keys?.conversation, (inner, need, anchor) => conversation(input, feed.chat, inner, need, anchor, theme));
+  const activityBox = pane("activity", "Activity", input.query ? matches(feed.activity.length) : input.keys?.activity, (inner, need, anchor) => activity(input, feed.activity, inner, need, anchor, 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 thinkingBox = pane("thinking", "Thinking", thinkingNote, (inner, need, anchor) => thinkingContent(input, feed.thoughts, inner, need, anchor, theme));
   const top = scene.length;
   let body: string[] = [];
   if (main > 0 && panels.conversation && panels.activity) {

package/src/lobby/tabs/issues.ts

@@ -4,7 +4,7 @@
  * 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";
+import { bold, since, columns, fill, markdownLines, paint, rule, selectRow, spinner, split, windowStart, wrap, type LobbyTheme } from "../layout.ts";
 
 export interface IssuesTabInput {
   issues: readonly IssueSummary[];
@@ -31,9 +31,10 @@ export function issueDetailLines(issue: IssueDetail, width: number, now: number,
   ].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));
+  // Issues and their comments are GitHub Markdown.
+  lines.push("", paint(theme, "dim", "p plans it with the planning panel, then save it as a task"), "", ...(issue.body.trim() ? markdownLines(issue.body.trim(), width, theme) : [paint(theme, "dim", "(no description)")]));
   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));
+    lines.push("", rule(width, comment.author ?? "comment", theme, comment.createdAt ? since(now - Date.parse(comment.createdAt)) : ""), ...markdownLines(comment.body.trim(), width, theme));
   }
   return lines;
 }

package/src/lobby/tabs/plan.ts

@@ -9,7 +9,7 @@
 import { stripTerminalSequences } from "@earendil-works/pi-tui";
 import { ORACLE_LABEL, type LineComment, type PanelNote, type PanelQuestion, type PlannerMessage, type PlannerReply, type PlannerSeed, type RoundMode } from "../planner.ts";
 import type { PlannedTask } from "../../state/backlog.ts";
-import { beside, bold, box, clock, fill, fit, italic, markdownLines, notePane, paint, selectRow, spinner, wrap, wrapHanging, type LobbyTheme, type PaneLayout } from "../layout.ts";
+import { beside, bold, box, clock, fill, fit, italic, markdownHanging, markdownLines, notePane, paint, selectRow, spinner, wrap, wrapHanging, type LobbyTheme, type PaneLayout } from "../layout.ts";
 import { sourceColor, speakerLine, tailWindow, youLines } from "./home.ts";
 
 export interface SeatView {
@@ -152,7 +152,7 @@ function questionLines(questions: ReadonlyArray<{ question: PanelQuestion; numbe
     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];
+    return [...markdownHanging(lead, question.text, width, theme), ...options];
   });
 }
 
@@ -178,7 +178,7 @@ export function conversationLines(view: PlanView, width: number, theme?: LobbyTh
       continue;
     }
     lines.push(speakerLine("panel", width, theme, time));
-    lines.push(...(questions.length > 0 ? questionLines(questions, width, theme) : wrap(message.text, width).map((line) => (line ? `  ${line}` : ""))));
+    lines.push(...(questions.length > 0 ? questionLines(questions, width, theme) : markdownLines(message.text, Math.max(1, width - 2), theme).map((line) => (line ? `  ${line}` : ""))));
     for (const entry of message.decided ?? []) {
       lines.push(...wrapHanging(`  ${paint(theme, "success", "✓")} `, `${paint(theme, sourceColor(entry.from), `[${entry.from}]`)} ${entry.question} → ${bold(theme, entry.answer)} ${paint(theme, "dim", `· decided by the classifier (${entry.probability.toFixed(2)}); comment on the plan to overrule`)}`, width));
     }
@@ -210,7 +210,7 @@ export function draftLines(view: PlanView, width: number, theme?: LobbyTheme): D
   }
   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));
+    for (const note of view.notes) for (const wrapped of markdownHanging(`${paint(theme, sourceColor(note.from), note.from.padEnd(LABEL_WIDTH))} `, note.text, width, theme)) lines.push(line(wrapped));
   }
   return lines;
 }

package/src/lobby/tabs/quickfix.ts

@@ -61,7 +61,9 @@ export function jobDetailLines(job: QuickFixJob, width: number, tick: number, no
     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)];
+  // What you asked, in Markdown as your messages read in the conversation (a pasted snippet, a list of steps).
+  const asked = theme?.markdown ? markdownLines(job.prompt, width, theme, true, "you") : wrap(bold(theme, job.prompt), width);
+  const lines = [paint(theme, "dim", job.id), facts.join(paint(theme, "dim", " · ")), "", ...asked];
   if (job.route) lines.push("", ...wrap(paint(theme, "dim", `↓ routed ${job.route}`), width));
   if (job.note) lines.push("", ...wrap(paint(theme, "warning", job.status === "held" ? `‖ Held: ${job.note}. r runs it anyway · t starts it as a task in a new session.` : job.note), width));
   lines.push("", rule(width, "Steps", theme));
@@ -70,6 +72,10 @@ export function jobDetailLines(job: QuickFixJob, width: number, tick: number, no
     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.files?.length) {
+    lines.push("", rule(width, "Edited", theme));
+    for (const file of job.files) lines.push(...wrapHanging(paint(theme, "dim", "· "), paint(theme, "muted", file), 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));

package/src/lobby/tabs/tasks.ts

@@ -11,7 +11,8 @@ 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, spread, strike, windowStart, wrap, wrapHanging, type LobbyColor, type LobbyTheme, type PaneLayout } from "../layout.ts";
+import { textWidth } from "../../width.ts";
+import { ago, beside, bold, box, detailWindow, fill, markdownHanging, markdownLines, notePane, paint, position, rule, selectRow, since, spread, strike, windowStart, wrap, wrapHanging, type LobbyColor, type LobbyTheme, type PaneLayout } from "../layout.ts";
 
 export type TaskSection = "mine" | "others" | "pending" | "recent" | "archived";
 
@@ -240,6 +241,13 @@ export function listCount(rows: readonly TaskRow[], query?: string): string {
 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" };
 
+/** `note` at the end of the last line when it fits there, else on a line of its own under it. */
+function trailing(lines: string[], note: string, width: number): string[] {
+  const last = lines.at(-1) ?? "";
+  if (textWidth(last) + 1 + textWidth(note) <= width) return [...lines.slice(0, -1), `${last} ${note}`];
+  return [...lines, ...wrapHanging("  ", note, width)];
+}
+
 function section(title: string, width: number, theme?: LobbyTheme, right = ""): string[] {
   return ["", rule(width, title, theme, right)];
 }
@@ -268,7 +276,8 @@ export function taskDetailLines(task: Task, comments: readonly PlanComment[], se
     lines.push("", `  ${pips(done, steps.length, cells, theme)} ${paint(theme, "muted", `${done} of ${steps.length} steps`)}`);
   }
   const request = taskRequest(task);
-  if (request && request !== task.title) lines.push(...section("Request", width, theme), ...wrap(paint(theme, "muted", request), width));
+  // Requests are often Markdown: a plan agreed in the planning panel, an issue, a pasted spec.
+  if (request && request !== task.title) lines.push(...section("Request", width, theme), ...markdownLines(request, width, theme));
   if (task.plan) {
     if (steps.length > 0) {
       lines.push(...section("Progress", width, theme, `${done}/${steps.length} steps`));
@@ -291,11 +300,12 @@ export function taskDetailLines(task: Task, comments: readonly PlanComment[], se
   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));
+    const said = markdownHanging(`${paint(theme, color, COMMENT_MARKS[comment.status])} `, comment.text, width, theme);
+    lines.push(...trailing(said, 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));
+    for (const amendment of task.amendments) lines.push(...markdownHanging("- ", amendment, width, theme));
   }
   const approvals = pendingApprovals(task);
   if (approvals.length > 0 || task.blockers.length > 0) {

package/src/lobby/theme.ts

@@ -0,0 +1,30 @@
+/**
+ * pi's theme as bot-lobby draws with it (the lobby, the questionnaire), plus
+ * Markdown rendering; one wrapper (and one Markdown renderer with its cache)
+ * per theme, so caches stay warm and a theme switch starts fresh.
+ */
+import { getMarkdownTheme, type Theme } from "@earendil-works/pi-coding-agent";
+import type { LobbyTheme } from "./layout.ts";
+import { createMarkdownRenderer } from "./markdown.ts";
+
+const lobbyThemes = new WeakMap<Theme, LobbyTheme>();
+
+export function lobbyTheme(theme: Theme): LobbyTheme {
+  let wrapped = lobbyThemes.get(theme);
+  if (!wrapped) {
+    wrapped = {
+      fg: (color, text) => theme.fg(color, text),
+      bold: (text) => theme.bold(text),
+      italic: (text) => theme.italic(text),
+      bg: (color, text) => theme.bg(color, text),
+      // The same looks pi gives your messages and the thinking it shows.
+      markdown: createMarkdownRenderer(getMarkdownTheme(), {
+        you: { color: (text) => theme.fg("accent", text) },
+        thought: { color: (text) => theme.fg("thinkingText", text), italic: true },
+      }),
+      strike: (text) => theme.strikethrough(text),
+    };
+    lobbyThemes.set(theme, wrapped);
+  }
+  return wrapped;
+}