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

package/src/pi/ui.ts

@@ -4,10 +4,22 @@ import type { AgentRun } from "../schemas/findings.ts";
 import { TERMINAL_STATES, type Task } from "../schemas/task.ts";
 import { activeTask } from "../state/persistence.ts";
 import { detectProjectRoot } from "../state/project.ts";
-import { advanceExpression, anyPlaying, createExpression, FAST_TICK_MS, type ExpressionState } from "./expressions.ts";
+import {
+  advanceExpression,
+  anyPlaying,
+  createExpression,
+  expressionPhase,
+  FAST_TICK_MS,
+  ORACLE_GAP,
+  SLOT_GAP,
+  talkFrame,
+  type ExpressionGap,
+  type ExpressionState,
+} from "./expressions.ts";
+import { ORACLE_THINKING } from "./activity.ts";
 import { SLOT_IDS } from "./mascot-art.ts";
 import { isQuiet, isSubagentProcess, toggleQuiet } from "./quiet.ts";
-import { panelLines, type ExpressionFrames } from "./zen.ts";
+import { panelLines, type ExpressionFrames, type OracleMotion } from "./zen.ts";
 
 export const STATUS_KEY = "bot-lobby";
 
@@ -26,18 +38,42 @@ export function statusText(task: Task | undefined, minimized = false): string {
 }
 
 let zenOn = false;
-let zenState: { task: Task | undefined; runs: AgentRun[] } = { task: undefined, runs: [] };
 
-/** Latest master tool activity; the oracle spinner line shows it. */
+/**
+ * Widget state. `live` holds the runs reported in this session; `runs` is what the
+ * panel draws: the task's persisted worker records overlaid by the live copies,
+ * so the checklist replays after a reload. `version` bumps on every change and
+ * keys the widget's render cache.
+ */
+let zenState: { task: Task | undefined; live: AgentRun[]; runs: AgentRun[] } = { task: undefined, live: [], runs: [] };
+let zenVersion = 0;
+
+/** Latest master tool activity; the oracle's speech bubble shows it. */
 let oracleActivity: string | undefined;
 
-/** Record the master's current activity word (see events.ts); undefined clears it. */
-export function setOracleActivity(activity: string | undefined): void {
+/** The mounted widget, so run and activity updates can repaint without waiting a tick. */
+let mountedWidget: { refresh(): void } | undefined;
+
+function touch(): void {
+  zenVersion += 1;
+  mountedWidget?.refresh();
+}
+
+/** Record the master's current activity word (see events.ts); undefined means it waits on the user. */
+export function setOracleActivity(activity: string | undefined, now = Date.now()): void {
+  if (activity === oracleActivity) return;
   oracleActivity = activity;
+  // The oracle speaks when it names something new, including handing you the turn;
+  // quietly going back to "thinking" between tool calls is not worth a word.
+  if (activity !== ORACLE_THINKING) oracleSpokeAt = now;
+  touch();
 }
 
+/** When the oracle last said something new; its mouth lip-syncs for `TALK_MS` after. */
+let oracleSpokeAt: number | undefined;
+
 /** Upper bound on retained runs so a long task cannot grow the widget state without limit. */
-export const MAX_RETAINED_RUNS = 64;
+export const MAX_RETAINED_RUNS = 128;
 
 /**
  * Merge `incoming` runs into `previous`, keyed by `runId`: a newer copy of a run
@@ -46,13 +82,39 @@ export const MAX_RETAINED_RUNS = 64;
  */
 export function mergeRuns(previous: readonly AgentRun[], incoming: readonly AgentRun[]): AgentRun[] {
   if (incoming.length === 0) return [...previous];
-  const merged = [...previous];
+  const merged = new Map<string, AgentRun>();
+  for (const run of previous) merged.set(run.runId, run);
   for (const run of incoming) {
-    const at = merged.findIndex((existing) => existing.runId === run.runId);
-    if (at >= 0) merged.splice(at, 1);
-    merged.push(run);
+    merged.delete(run.runId);
+    merged.set(run.runId, run);
   }
-  return merged.slice(-MAX_RETAINED_RUNS);
+  return [...merged.values()].slice(-MAX_RETAINED_RUNS);
+}
+
+/** The task's persisted worker records as runs, oldest first; the panel only reads their plan fields. */
+export function persistedRuns(task: Task | undefined): AgentRun[] {
+  return (task?.workerRuns ?? []).map((record) => ({
+    runId: record.runId,
+    taskId: task!.id,
+    domain: record.domain,
+    role: "worker",
+    status: record.status,
+    instruction: record.instruction,
+    output: "",
+    attempts: 1,
+    startedAt: record.startedAt,
+    ...(record.finishedAt ? { finishedAt: record.finishedAt } : {}),
+  }));
+}
+
+/** Runs are retained without their report text: the panel never reads it and reports can be large. */
+function slim(runs: readonly AgentRun[]): AgentRun[] {
+  return runs.map((run) => (run.output ? { ...run, output: "" } : run));
+}
+
+function setZenState(task: Task | undefined, live: AgentRun[]): void {
+  zenState = { task, live, runs: mergeRuns(persistedRuns(task), live) };
+  touch();
 }
 
 /** Per-session standard-pi mode: the widget and Master prompt are hidden but ownership stays. */
@@ -69,7 +131,7 @@ export function setMinimized(value: boolean): void {
 /** Flip minimize/restore and refresh the footer; the session is unchanged. */
 export function toggleMinimized(ctx: ExtensionContext, configDir: string): void {
   setMinimized(!minimized);
-  applyStatus(ctx, detectProjectRoot(ctx.cwd, configDir), configDir, zenState.runs);
+  applyStatus(ctx, detectProjectRoot(ctx.cwd, configDir), configDir, zenState.live);
   ctx.ui.notify(minimized ? "bot-lobby minimized — ctrl+shift+m or /bot-lobby restore to return" : "bot-lobby restored", "info");
 }
 
@@ -87,9 +149,9 @@ function liveTickDelay(): number {
   return isLive() ? LIVE_TICK_MS : IDLE_TICK_MS;
 }
 
-/** Tick delay for the zen clock: fastest while an expression plays, so no blink or emote step is skipped. */
-export function expressionTickDelay(states: readonly ExpressionState[], now: number, live: boolean): number {
-  if (anyPlaying(states, now)) return FAST_TICK_MS;
+/** Tick delay for the zen clock: fastest while an expression plays or the oracle talks, so no step is skipped. */
+export function expressionTickDelay(states: readonly ExpressionState[], now: number, live: boolean, talking = false): number {
+  if (talking || anyPlaying(states, now)) return FAST_TICK_MS;
   return live ? LIVE_TICK_MS : IDLE_TICK_MS;
 }
 
@@ -97,9 +159,15 @@ export function expressionTickDelay(states: readonly ExpressionState[], now: num
 type ExpressionKey = keyof ExpressionFrames;
 const EXPRESSION_KEYS: readonly ExpressionKey[] = [...SLOT_IDS, "oracle"];
 
+/** The oracle keeps a livelier schedule than the agent slots. */
+function gapFor(key: ExpressionKey): ExpressionGap {
+  return key === "oracle" ? ORACLE_GAP : SLOT_GAP;
+}
+
 /** Animated zen scene + plan checklist shown above the editor while a task is active. */
 class ZenWidget implements Component {
   private tick = 0;
+  private cache: { key: string; theme: Theme; lines: string[] } | undefined;
   private delay = liveTickDelay();
   private timer: ReturnType<typeof setInterval>;
   private disposed = false;
@@ -113,9 +181,15 @@ class ZenWidget implements Component {
     this.theme = theme;
     this.rng = rng;
     const now = Date.now();
-    const entries = EXPRESSION_KEYS.map((key) => [key, createExpression(now, rng)] as const);
+    const entries = EXPRESSION_KEYS.map((key) => [key, createExpression(now, rng, gapFor(key))] as const);
     this.expressions = Object.fromEntries(entries) as Record<ExpressionKey, ExpressionState>;
     this.timer = setInterval(() => this.advance(), this.delay);
+    mountedWidget = this;
+  }
+
+  /** Repaint now: state changed between ticks. */
+  refresh(): void {
+    if (!this.disposed) this.tui.requestRender();
   }
 
   private advance(): void {
@@ -128,34 +202,55 @@ class ZenWidget implements Component {
   }
 
   private play(now: number): void {
-    for (const key of EXPRESSION_KEYS) this.expressions[key] = advanceExpression(this.expressions[key], now, this.rng);
+    for (const key of EXPRESSION_KEYS) this.expressions[key] = advanceExpression(this.expressions[key], now, this.rng, gapFor(key));
   }
 
   /** One interval, retimed when work starts or stops or an expression plays. */
   private retime(now: number): void {
-    const delay = expressionTickDelay(Object.values(this.expressions), now, isLive());
+    const delay = expressionTickDelay(Object.values(this.expressions), now, isLive(), talkFrame(oracleSpokeAt, now) !== undefined);
     if (delay === this.delay) return;
     this.delay = delay;
     clearInterval(this.timer);
     this.timer = setInterval(() => this.advance(), delay);
   }
 
+  private motion(now: number): OracleMotion {
+    return { phase: expressionPhase(this.expressions.oracle, now), talk: talkFrame(oracleSpokeAt, now) };
+  }
+
   private frames(): Partial<Record<ExpressionKey, number>> {
     return Object.fromEntries(EXPRESSION_KEYS.map((key) => [key, this.expressions[key].frame]));
   }
 
+  /**
+   * The panel only changes with the tick, an expression frame, the widget state or
+   * the elapsed second, so every other repaint (typing in the editor, streaming
+   * output) reuses the last lines instead of recomposing the scene.
+   */
   render(width: number): string[] {
     const now = Date.now();
-    const opts = { width, rows: this.tui.terminal.rows, tick: this.tick, theme: this.theme(), expressions: this.frames(), oracleActivity };
-    const lines = panelLines(zenState.task, zenState.runs, now, isQuiet(), opts);
-    return lines.map((line) => truncateToWidth(line, width));
+    const rows = this.tui.terminal.rows;
+    const theme = this.theme();
+    const expressions = this.frames();
+    const quiet = isQuiet();
+    const frameKey = EXPRESSION_KEYS.map((key) => expressions[key] ?? 0).join(",");
+    const motion = this.motion(now);
+    const key = `${width}|${rows}|${this.tick}|${frameKey}|${motion.phase}|${motion.talk}|${zenVersion}|${Math.floor(now / 1000)}|${quiet}`;
+    if (this.cache && this.cache.key === key && this.cache.theme === theme) return this.cache.lines;
+    const opts = { width, rows, tick: this.tick, theme, expressions, oracleActivity, oracleMotion: motion };
+    const lines = panelLines(zenState.task, zenState.runs, now, quiet, opts).map((line) => truncateToWidth(line, width));
+    this.cache = { key, theme, lines };
+    return lines;
   }
 
-  invalidate(): void {}
+  invalidate(): void {
+    this.cache = undefined;
+  }
 
   dispose(): void {
     this.disposed = true;
     clearInterval(this.timer);
+    if (mountedWidget === this) mountedWidget = undefined;
   }
 }
 
@@ -176,7 +271,7 @@ export function applyStatus(ctx: ExtensionContext, root: string, configDir: stri
   const sessionId = ctx.sessionManager.getSessionId();
   const task = isSubagentProcess() || minimized ? undefined : activeTask(root, configDir, sessionId);
   const sameTask = zenState.task?.id === task?.id;
-  zenState = { task, runs: mergeRuns(sameTask ? zenState.runs : [], runs) };
+  setZenState(task, mergeRuns(sameTask ? zenState.live : [], slim(runs)));
   ctx.ui.setStatus(STATUS_KEY, statusText(task, minimized));
   const active = Boolean(task && !TERMINAL_STATES.includes(task.state));
   if (!active) {
@@ -192,9 +287,24 @@ export function applyStatus(ctx: ExtensionContext, root: string, configDir: stri
   }
 }
 
+/**
+ * Streamed run updates (start, every activity change, finish) from an in-flight
+ * `orchestrate` call. The task on disk does not change mid-call, so this only
+ * merges the runs and repaints; `applyStatus` rereads the task once the call ends.
+ * Before any task is loaded it falls back to `applyStatus` so the widget appears.
+ */
+export function reportRuns(ctx: ExtensionContext, root: string, configDir: string, runs: AgentRun[]): void {
+  if (!zenState.task && !minimized) {
+    applyStatus(ctx, root, configDir, runs);
+    return;
+  }
+  setZenState(zenState.task, mergeRuns(zenState.live, slim(runs)));
+}
+
 export function clearStatus(ctx: ExtensionContext): void {
   leaveZen(ctx);
   oracleActivity = undefined;
+  zenState = { task: undefined, live: [], runs: [] };
   ctx.ui.setStatus(STATUS_KEY, undefined);
   ctx.ui.setWidget(STATUS_KEY, undefined);
 }
@@ -217,7 +327,7 @@ function revealTools(ctx: ExtensionContext, configDir: string): void {
   const expanded = ctx.ui.getToolsExpanded();
   ctx.ui.setToolsExpanded(!expanded);
   ctx.ui.setToolsExpanded(expanded);
-  applyStatus(ctx, detectProjectRoot(ctx.cwd, configDir), configDir, zenState.runs);
+  applyStatus(ctx, detectProjectRoot(ctx.cwd, configDir), configDir, zenState.live);
   ctx.ui.notify(
     quiet
       ? "bot-lobby: tool rows hidden from now on — alt+t reveals them"

package/src/pi/zen-large.ts

@@ -1,8 +1,27 @@
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import {
   BAR,
+  BUBBLE,
+  CLOSED_EYE,
+  EYE_WIDTH,
+  GAZE_AHEAD,
+  OPEN_EYE,
+  ORACLE_AURA,
+  ORACLE_AURA_TICKS,
+  ORACLE_BLINK,
+  ORACLE_BLINKS,
   ORACLE_COLORS,
   ORACLE_FRAMES,
+  ORACLE_GAZE_TICKS,
+  ORACLE_IDLE_WORD,
+  ORACLE_LOOK,
+  ORACLE_LOOK_PATH,
+  ORACLE_MOOD_MOUTHS,
+  ORACLE_PUPILS,
+  ORACLE_REST,
+  ORACLE_TALK,
+  ORACLE_WANDER,
+  ORACLE_WANDER_TICKS,
   ORACLE_WORDS,
   SLOT_FRAMES,
   SLOT_LABELS,
@@ -12,7 +31,10 @@ import {
   SPIN_FRAMES,
   TOWER,
   TOWER_DOOR,
+  TOWER_WIDTH,
+  type Gaze,
   type OracleFrame,
+  type OracleMood,
   type OraclePose,
   type PanelColor,
   type SlotId,
@@ -21,8 +43,8 @@ import {
 import type { PanelTheme } from "./zen.ts";
 
 /**
- * The large animated zen scene: a header box, the pulsing oracle tower with its
- * tree connector, the four animated agent columns (face, label, status word and
+ * The large animated zen scene: a header box, the oracle tower with its speech
+ * bubble and tree connector, the four animated agent columns (face, label, status word and
  * elapsed rows), and the TASKS checklist spanning the full scene width (there is
  * no LOG window).
  *
@@ -58,6 +80,17 @@ export interface LargeTaskRow {
   status: "done" | "current" | "pending";
 }
 
+/** The oracle's pose plus the caller-clocked animation state (see expressions.ts). */
+export interface OracleInput {
+  pose: OraclePose;
+  /** Expression frame: rest, blink, glance or delight (snore while dormant). */
+  frame: number;
+  /** Sub-step inside the playing expression; steps the blink lids and the glance. */
+  phase?: number;
+  /** Lip-sync shape index while the oracle talks about something it just said. */
+  talk?: number;
+}
+
 /** Everything the large scene draws; assembled by the caller from task and runs. */
 export interface LargeSceneInput {
   taskId: string;
@@ -71,9 +104,11 @@ export interface LargeSceneInput {
   total: number;
   slots: readonly LargeSlot[];
   tasks: readonly LargeTaskRow[];
-  oracle: { pose: OraclePose; frame: number };
-  /** Master's live tool activity for the oracle spinner; absent reads "working". */
+  oracle: OracleInput;
+  /** Master's live activity for the speech bubble; absent means it waits on the user. */
   oracleActivity?: string;
+  /** Plain-words task phase ("writing the plan"); the bubble's fallback second line. */
+  caption?: string;
   /** Approval/blocked line; never dropped when present. */
   alert?: string;
   /** Severity of the alert line: approvals are `warning`, blocked is `error`. */
@@ -98,11 +133,15 @@ const TASK_COLORS: Record<LargeTaskRow["status"], PanelColor> = {
 };
 
 const TOWER_ROWS: Record<TowerSize, number> = {
-  full: TOWER.rows.length + 1,
-  small: TOWER.smallRows.length + 1,
+  full: TOWER.rows.length,
+  small: TOWER.smallRows.length,
   none: 0,
 };
 
+/** Bubble rows: top border, the text lines and the bottom border. */
+const BUBBLE_ROWS = BUBBLE.lines + 2;
+const BUBBLE_TEXT = BUBBLE.width - 4;
+
 const TOWER_PATTERN = new RegExp(
   `(${Object.values(TOWER.tokens).map((token) => token.replace(/([{}])/g, "\\$1")).join("|")})`,
 );
@@ -299,40 +338,172 @@ function oracleFrame(input: LargeSceneInput): OracleFrame {
   return frames[mod(input.oracle.frame, frames.length)]!;
 }
 
-function towerRow(row: string, input: LargeSceneInput, theme?: PanelTheme): string {
+function frameIndex(input: LargeSceneInput): number {
+  return mod(input.oracle.frame, ORACLE_FRAMES[input.oracle.pose].length);
+}
+
+function phaseOf(input: LargeSceneInput): number {
+  const phase = input.oracle.phase ?? 0;
+  return Number.isFinite(phase) && phase > 0 ? Math.floor(phase) : 0;
+}
+
+/** The oracle's resting mood: worried by a blocker, otherwise steady. */
+export function oracleMood(input: LargeSceneInput): OracleMood {
+  return input.alert && input.alertKind === "error" ? "worried" : "steady";
+}
+
+function isLooking(input: LargeSceneInput): boolean {
+  return frameIndex(input) >= ORACLE_LOOK;
+}
+
+/**
+ * Where the pupils look. The look-around emote scans the room; while talking the
+ * oracle looks at you; while agents work it looks down at them, moving on to
+ * the next one every `ORACLE_GAZE_TICKS`; otherwise its eyes wander the room.
+ */
+export function oracleGaze(input: LargeSceneInput): Gaze {
+  if (input.oracle.pose !== "orchestrating") return GAZE_AHEAD;
+  if (isLooking(input)) return ORACLE_LOOK_PATH[Math.min(phaseOf(input), ORACLE_LOOK_PATH.length - 1)]!;
+  if (input.oracle.talk !== undefined) return GAZE_AHEAD;
+  const working = input.slots.flatMap((slot, index) => (slot.status === "working" ? [index] : []));
+  if (working.length === 0) return ORACLE_WANDER[mod(Math.floor(input.tick / ORACLE_WANDER_TICKS), ORACLE_WANDER.length)]!;
+  const target = working[mod(Math.floor(input.tick / ORACLE_GAZE_TICKS), working.length)]!;
+  const centre = (input.slots.length - 1) / 2;
+  return { x: target < centre ? -1 : target > centre ? 1 : 0, y: 1 };
+}
+
+/** One eye window: a lid fills it, otherwise the pupil sits at the gaze column. */
+function eyeCell(pupil: string, gaze: Gaze): string {
+  if (pupil === CLOSED_EYE) return CLOSED_EYE.repeat(EYE_WIDTH);
+  const glyph = pupil === OPEN_EYE ? ORACLE_PUPILS[gaze.y] : pupil;
+  const at = Math.floor(EYE_WIDTH / 2) + gaze.x;
+  return Array.from({ length: EYE_WIDTH }, (_value, column) => (column === at ? glyph : " ")).join("");
+}
+
+/** Both pupils: blink lids step with the phase, the frame supplies the rest. */
+function oraclePupils(input: LargeSceneInput): readonly [string, string] {
+  if (frameIndex(input) === ORACLE_BLINK) {
+    const lids = ORACLE_BLINKS[input.oracle.pose];
+    return lids[Math.min(phaseOf(input), lids.length - 1)]!;
+  }
   const frame = oracleFrame(input);
-  const values = new Map<string, string>([
-    [TOWER.tokens.orb, frame.orb],
-    [TOWER.tokens.winL, frame.winL],
-    [TOWER.tokens.winR, frame.winR],
-    [TOWER.tokens.mouth, frame.mouth],
-    [TOWER.tokens.door, input.doorLabel ?? TOWER_DOOR],
-  ]);
+  return [frame.winL, frame.winR];
+}
+
+/** The mouth: lip-sync while talking, the mood's straight line or frown otherwise; dormant it snores. */
+function oracleMouth(input: LargeSceneInput): string {
+  if (input.oracle.pose !== "orchestrating") return oracleFrame(input).mouth;
+  if (input.oracle.talk !== undefined) return ORACLE_TALK[mod(input.oracle.talk, ORACLE_TALK.length)]!;
+  return ORACLE_MOOD_MOUTHS[oracleMood(input)];
+}
+
+/** The whole face for this frame: orb, both eye windows (three columns each) and the mouth. */
+export function oracleFace(input: LargeSceneInput): { orb: string; left: string; right: string; mouth: string } {
+  const [left, right] = oraclePupils(input);
+  const gaze = oracleGaze(input);
+  return { orb: oracleFrame(input).orb, left: eyeCell(left, gaze), right: eyeCell(right, gaze), mouth: oracleMouth(input) };
+}
+
+function oracleAura(input: LargeSceneInput): string {
+  const frames = ORACLE_AURA[input.oracle.pose];
+  return frames[mod(Math.floor(input.tick / ORACLE_AURA_TICKS), frames.length)]!;
+}
+
+/** Painted token values for one frame; built once and shared by every tower row. */
+type TowerValues = ReadonlyMap<string, string>;
+
+function towerValues(input: LargeSceneInput, theme?: PanelTheme): TowerValues {
+  const face = oracleFace(input);
   const accent = ORACLE_COLORS[input.oracle.pose];
-  const parts = row.split(TOWER_PATTERN);
-  return parts
-    .map((part) => {
-      const value = values.get(part);
-      return value === undefined ? paint(part, "muted", theme) : paint(value, accent.color, theme, accent.bold);
-    })
+  const glow = (text: string) => paint(text, accent.color, theme, accent.bold);
+  return new Map([
+    [TOWER.tokens.aura, paint(oracleAura(input), accent.color, theme)],
+    [TOWER.tokens.orb, glow(face.orb)],
+    [TOWER.tokens.winL, glow(face.left)],
+    [TOWER.tokens.winR, glow(face.right)],
+    [TOWER.tokens.mouth, glow(face.mouth)],
+    [TOWER.tokens.door, glow(input.doorLabel ?? TOWER_DOOR)],
+  ]);
+}
+
+function towerRow(row: string, values: TowerValues, theme?: PanelTheme): string {
+  return row
+    .split(TOWER_PATTERN)
+    .map((part) => values.get(part) ?? paint(part, "muted", theme))
     .join("");
 }
 
-/** The oracle spinner line: the master's live tool activity, or the dormant word. */
-function oracleLine(input: LargeSceneInput, width: number, theme?: PanelTheme): string {
+/** The bubble's first line: what the oracle is doing right now. */
+export function oracleSpeech(input: LargeSceneInput): string {
+  if (input.oracle.pose !== "orchestrating") return `${SLOT_STATE_GLYPHS.idle} ${ORACLE_WORDS.dormant}`;
+  const spin = SPIN_FRAMES[mod(input.tick, SPIN_FRAMES.length)]!;
+  if (input.oracleActivity) return `${spin} ${input.oracleActivity}`;
+  if (workingLabels(input).length > 0) return `${spin} ${ORACLE_WORDS.orchestrating}`;
+  return `${SLOT_STATE_GLYPHS.idle} ${ORACLE_IDLE_WORD}`;
+}
+
+function workingLabels(input: LargeSceneInput): string[] {
+  return input.slots.filter((slot) => slot.status === "working").map((slot) => slot.label || SLOT_LABELS[slot.id]);
+}
+
+/** The bubble's second line: who is at work, else plan progress while building, else the task phase. */
+export function oracleAside(input: LargeSceneInput): string {
+  const working = workingLabels(input);
+  if (input.oracle.pose === "orchestrating" && working.length > 0) return `→ ${working.join(" · ")}`;
+  const building = /^(implementing|reviewing)\b/.test(input.state);
+  if (building && input.total > 0) {
+    return input.done >= input.total ? "all steps done" : `step ${Math.min(input.done + 1, input.total)} of ${input.total}`;
+  }
+  return input.caption ?? input.state;
+}
+
+/**
+ * The speech bubble beside the crown: a rounded box with `BUBBLE.lines` text
+ * rows. The first text row opens with `┤`, where the tail from the oracle lands.
+ */
+function bubbleRows(input: LargeSceneInput, theme?: PanelTheme): string[] {
   const accent = ORACLE_COLORS[input.oracle.pose];
-  return place(paint(oracleStatusText(input), accent.color, theme, accent.bold), width);
+  const border = (text: string) => paint(text, "muted", theme);
+  const text = (value: string) => padTo(truncateToWidth(value, BUBBLE_TEXT, "…"), BUBBLE_TEXT);
+  const rule = "─".repeat(BUBBLE.width - 2);
+  return [
+    border(`╭${rule}╮`),
+    border("┤ ") + paint(text(oracleSpeech(input)), accent.color, theme, accent.bold) + border(" │"),
+    border("│ ") + paint(text(oracleAside(input)), "muted", theme) + border(" │"),
+    border(`╰${rule}╯`),
+  ];
 }
 
-function oracleStatusText(input: LargeSceneInput): string {
-  if (input.oracle.pose !== "orchestrating") return `${SLOT_STATE_GLYPHS.idle} ${ORACLE_WORDS.dormant}`;
-  return `${SPIN_FRAMES[mod(input.tick, SPIN_FRAMES.length)]!} ${input.oracleActivity ?? "working"}`;
+/** Row where the bubble starts: its tail row lines up with the crown orb where there is room. */
+function bubbleStart(rows: readonly string[]): number {
+  const orb = rows.findIndex((row) => row.includes(TOWER.tokens.orb));
+  return clamp(orb - 1, 0, Math.max(0, rows.length - BUBBLE_ROWS));
+}
+
+/**
+ * The tail from the oracle to the bubble: the tower row's trailing blanks plus
+ * the one-column gap become `╶──` (`──(◉)── ╶──┤`); a full-width row gets a stub.
+ */
+function tailRow(row: string, values: TowerValues, theme?: PanelTheme): string {
+  const body = row.replace(/ +$/, "");
+  const pad = row.length - body.length;
+  const tail = pad >= 1 ? ` ╶${"─".repeat(pad - 1)}` : "╶";
+  return towerRow(body, values, theme) + paint(tail, "muted", theme);
 }
 
 function towerLines(input: LargeSceneInput, width: number, theme: PanelTheme | undefined, size: TowerSize): string[] {
   if (size === "none") return [];
   const rows = size === "small" ? TOWER.smallRows : TOWER.rows;
-  return [oracleLine(input, width, theme), ...rows.map((row) => place(towerRow(row, input, theme), width))];
+  const left = " ".repeat(sceneLeft(width) + Math.floor((SCENE_WIDTH - TOWER_WIDTH) / 2));
+  const values = towerValues(input, theme);
+  const bubble = bubbleRows(input, theme);
+  const start = bubbleStart(rows);
+  return rows.map((row, index) => {
+    const speech = bubble[index - start];
+    if (speech === undefined) return left + towerRow(row, values, theme);
+    const tower = index === start + 1 ? tailRow(row, values, theme) : `${towerRow(row, values, theme)} `;
+    return left + tower + speech;
+  });
 }
 
 function stripWidth(count: number): number {