pi-message-sidebar 1.5.0 → 2.0.0

package/src/sidebar-component.ts

@@ -2,36 +2,28 @@ import {
   copyToClipboard,
   type ExtensionContext,
   type ReadonlyFooterDataProvider,
+  type Theme,
 } from "@earendil-works/pi-coding-agent";
 import { basename } from "node:path";
 import type { Component, TUI } from "@earendil-works/pi-tui";
-import { matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { matchesKey } from "@earendil-works/pi-tui";
+import { ANIM_TICK_MS, EasedMeter, isVictory } from "./anim.ts";
 import type { CmuxContext } from "./cmux.ts";
 import { SIDEBAR_WIDTH } from "./constants.ts";
+import type { FileEdit } from "./files.ts";
+import { flagRow } from "./flag.ts";
 import { readSessionGoal } from "./goal.ts";
 import { assertLinesFit } from "./layout.ts";
-import { renderStatusDock } from "./status-dock.ts";
-import {
-  BG,
-  BG_HDR,
-  BG_SEL,
-  BOLD,
-  DIM,
-  FG_ACC,
-  FG_BRIGHT,
-  FG_DIM,
-  FG_EXP,
-  FG_FAINT,
-  FG_MID,
-  FG_NORM,
-  FG_TIME,
-  RST,
-  fillRow,
-  formatTime,
-  wrapText,
-} from "./style.ts";
+import { MessagePanel } from "./messages.ts";
+import { resolvePalette } from "./palette.ts";
+import { renderGoalSection } from "./goal-card.ts";
+import { renderRuntimeSection, renderSessionSection } from "./sections.ts";
+import { computeUsage } from "./status-dock.ts";
+import { RST, fillRow } from "./style.ts";
+
+import type { UserMessage } from "./types.ts";
 
-export type UserMessage = { id: string; text: string; index: number; timestamp: string };
+export type { UserMessage };
 
 type SidebarOptions = {
   tui: TUI;
@@ -39,30 +31,105 @@ type SidebarOptions = {
   getFooterData: () => ReadonlyFooterDataProvider | null;
   getThinkingLevel: () => string;
   getCmuxContext: () => CmuxContext | null;
+  getTheme: () => Theme | null;
+  getSummary: (messageId: string, text: string) => string;
+  hasSummary: (messageId: string) => boolean;
+  isPending: (messageId: string) => boolean;
+  summariesConfigured: () => boolean;
+  getEditedFiles: () => FileEdit[];
+  getGitStatus: (path: string) => string | null;
   messages: UserMessage[];
 };
 
+type Layout = { goal: number; session: number; runtime: number; messages: number };
+
+/** Rows a section cannot render without losing content it is required to show.
+ *  Section headers embed their own rules, so no separator rows are budgeted. */
+const MANDATORY = {
+  /** the flag crown row. */
+  crown: 1,
+  /** status chip + two title rows + budget meter; the no-goal state is one ghost row. */
+  goal: (hasGoal: boolean) => (hasGoal ? 4 : 1),
+  /** separator + ghost header + surface/workspace + cwd. */
+  session: 4,
+  /** air + ghost header + one two-row message + hint strip. */
+  messages: 5,
+  /** separator + ghost header + model route + ctx meter. */
+  runtime: 4,
+} as const;
+
+/** Smallest terminal that can hold every mandatory row; below it the rail shows a notice. */
+export function minimumHeight(hasGoal: boolean): number {
+  return MANDATORY.crown + MANDATORY.goal(hasGoal) + MANDATORY.session + MANDATORY.messages + MANDATORY.runtime;
+}
+
+/**
+ * Mandatory rows first, then optional rows in priority order, then every
+ * remaining row to the message viewport. Returns null when the mandatory
+ * budget does not fit, so the caller renders a notice instead of silently
+ * slicing content away.
+ */
+function allocate(height: number, hasGoal: boolean, fileCount: number): Layout | null {
+  if (height < minimumHeight(hasGoal)) return null;
+
+  let goal = MANDATORY.goal(hasGoal);
+  let session = MANDATORY.session;
+  let runtime = MANDATORY.runtime;
+  let spare = height - minimumHeight(hasGoal);
+
+  const grow = (rows: number, take: (granted: number) => void) => {
+    const granted = Math.min(rows, spare);
+    if (granted <= 0) return;
+    take(granted);
+    spare -= granted;
+  };
+  if (hasGoal) grow(5, (granted) => { goal += granted; }); // card air: pad, third title line, meter pad
+  grow(1, (granted) => { session += granted; });          // session id row
+  if (fileCount > 0) {
+    // FILES lives inside the session block: air, header, plus file rows. It
+    // needs the air, the header and one row to be worth anything, so a
+    // cramped rail leaves it out entirely.
+    const granted = Math.min(2 + fileCount, spare);
+    if (granted >= 3) { session += granted; spare -= granted; }
+  }
+  grow(1, (granted) => { runtime += granted; });          // trailing breath under the meter
+
+  return { goal, session, runtime, messages: MANDATORY.messages + spare };
+}
+
 export class SidebarComponent implements Component {
   private focused = false;
-  private selectedId: string | null;
-  private readonly expandedIds = new Set<string>();
-  private followTail = true;
-  private messages: UserMessage[];
+  private panel: MessagePanel;
   private version = 0;
   private restoreFocus: Component | null = null;
   private cachedSignature = "";
   private cachedLines: string[] = [];
-  private viewportStartId: string | null = null;
+  private animTimer: ReturnType<typeof setInterval> | null = null;
+  private readonly goalMeter = new EasedMeter();
+  private readonly ctxMeter = new EasedMeter();
+  private goalTarget: number | null = null;
+  private ctxTarget: number | null = null;
+  private previousGoalStatus: string | null = null;
+  private victoryAt: number | null = null;
 
   constructor(private readonly options: SidebarOptions) {
-    this.messages = options.messages;
-    this.selectedId = this.messages.at(-1)?.id ?? null;
+    this.panel = new MessagePanel(
+      {
+        getSummary: options.getSummary,
+        hasSummary: options.hasSummary,
+        isPending: options.isPending,
+        summariesConfigured: options.summariesConfigured,
+        requestRefresh: () => this.refresh(),
+      },
+      options.messages,
+    );
   }
 
   isFocused(): boolean { return this.focused; }
-  getSelectedMessageId(): string | null { return this.selectedId; }
-  isFollowingTail(): boolean { return this.followTail; }
-  isExpanded(messageId: string): boolean { return this.expandedIds.has(messageId); }
+  getSelectedMessageId(): string | null { return this.panel.getSelectedMessageId(); }
+  isFollowingTail(): boolean { return this.panel.isFollowingTail(); }
+  isExpanded(messageId: string): boolean { return this.panel.isExpanded(messageId); }
+  isDetailOpen(): boolean { return this.panel.isDetailOpen(); }
 
   setFocused(focused: boolean): void {
     if (this.focused === focused) return;
@@ -72,6 +139,7 @@ export class SidebarComponent implements Component {
       this.options.tui.setFocus(this);
     } else {
       this.focused = false;
+      this.panel.closeDetail();
       if ((this.options.tui as any).getFocusedComponent?.() === this) this.options.tui.setFocus(this.restoreFocus);
       this.restoreFocus = null;
     }
@@ -79,52 +147,58 @@ export class SidebarComponent implements Component {
   }
 
   updateMessages(messages: UserMessage[]): void {
-    const previousId = this.selectedId;
-    const previousStartId = this.viewportStartId;
-    this.messages = messages;
-    const ids = new Set(messages.map((message) => message.id));
-    for (const id of this.expandedIds) if (!ids.has(id)) this.expandedIds.delete(id);
-    this.viewportStartId = previousStartId && ids.has(previousStartId) ? previousStartId : null;
-
-    if (this.followTail || !previousId || !ids.has(previousId)) {
-      this.selectedId = messages.at(-1)?.id ?? null;
-      this.followTail = true;
-      this.viewportStartId = null;
-    } else {
-      this.selectedId = previousId;
-    }
-    this.refresh();
+    this.panel.updateMessages(messages);
   }
 
   refresh(): void {
     this.version++;
     this.options.tui.requestRender();
+    this.ensureAnim();
+  }
+
+  /** Stops the animation tick; the extension calls this on session shutdown. */
+  stopAnimations(): void {
+    if (this.animTimer) clearInterval(this.animTimer);
+    this.animTimer = null;
+  }
+
+  /** The tick exists only while a dot pulses or a summary settles. */
+  /** The rail is alive while a dot pulses, a glow decays, a meter eases, or
+   *  an active goal breathes: the ambient breath is the session's heartbeat,
+   *  and it stops the moment the goal completes or clears. */
+  private needsAnim(now: number): boolean {
+    if (this.panel.needsAnim(now)) return true;
+    if (this.goalMeter.moving(this.goalTarget) || this.ctxMeter.moving(this.ctxTarget)) return true;
+    if (this.victoryAt !== null && isVictory(now, this.victoryAt)) return true;
+    return readSessionGoal(this.options.ctx)?.status === "active";
+  }
+
+  private ensureAnim(): void {
+    const live = this.needsAnim(Date.now());
+    if (live && !this.animTimer) {
+      this.animTimer = setInterval(() => {
+        if (!this.panel.needsAnim(Date.now())) {
+          this.stopAnimations();
+          this.refresh();
+          return;
+        }
+        this.version++;
+        this.options.tui.requestRender();
+      }, ANIM_TICK_MS);
+      (this.animTimer as { unref?: () => void }).unref?.();
+    }
   }
 
   handleInput(data: string): void {
-    if (matchesKey(data, "escape")) return this.setFocused(false);
-    if (matchesKey(data, "c")) { void this.copySessionPath(); return; }
-    const current = this.selectedIndex();
-    let target: number | null = null;
-    if (matchesKey(data, "up")) target = Math.max(0, current - 1);
-    else if (matchesKey(data, "down")) target = Math.min(this.messages.length - 1, current + 1);
-    else if (matchesKey(data, "pageUp")) target = Math.max(0, current - 10);
-    else if (matchesKey(data, "pageDown")) target = Math.min(this.messages.length - 1, current + 10);
-    else if (matchesKey(data, "home")) target = 0;
-    else if (matchesKey(data, "end")) target = Math.max(0, this.messages.length - 1);
-    else if (matchesKey(data, "return") || matchesKey(data, "enter") || data === " ") {
-      if (!this.selectedId) return;
-      if (this.expandedIds.has(this.selectedId)) this.expandedIds.delete(this.selectedId);
-      else this.expandedIds.add(this.selectedId);
-      this.refresh();
+    if (matchesKey(data, "escape")) {
+      if (this.panel.isDetailOpen()) { this.panel.closeDetail(); return; }
+      return this.setFocused(false);
+    }
+    if (!this.panel.isDetailOpen() && matchesKey(data, "c")) {
+      void this.copyRailTarget();
       return;
-    } else return;
-
-    if (target < 0 || !this.messages[target]) return;
-    this.selectedId = this.messages[target].id;
-    this.followTail = target === this.messages.length - 1;
-    if (this.followTail) this.viewportStartId = null;
-    this.refresh();
+    }
+    this.panel.handleInput(data);
   }
 
   render(width: number): string[] {
@@ -133,27 +207,19 @@ export class SidebarComponent implements Component {
     const signature = this.signature(safeWidth, targetHeight);
     if (signature === this.cachedSignature) return this.cachedLines;
 
-    const fullHeader = this.renderHeader(safeWidth);
-    const headerRows = this.messages.length > 0 && targetHeight === 1 ? 0 : targetHeight <= 5 ? 1 : 2;
-    const header = fullHeader.slice(0, Math.min(headerRows, targetHeight));
-    const available = Math.max(0, targetHeight - header.length);
-    // At tiny heights, keep one chronological message row before allocating dock chrome.
-    const messageReserve = this.messages.length > 0 && available > 0 ? 1 : 0;
-    const dock = renderStatusDock(
-      safeWidth,
-      this.options.ctx,
-      this.options.getFooterData(),
-      this.options.getThinkingLevel(),
-      this.focused,
-      this.options.getCmuxContext,
-      Math.min(4, Math.max(0, available - messageReserve)),
-    );
-    const bodyHeight = Math.max(0, targetHeight - header.length - dock.length);
-    const result = [...header, ...this.renderBody(safeWidth, bodyHeight), ...dock];
+    const hasGoal = readSessionGoal(this.options.ctx) !== null;
+    const files = this.options.getEditedFiles();
+    const layout = safeWidth < SIDEBAR_WIDTH ? null : allocate(targetHeight, hasGoal, files.length);
+    const result = layout
+      ? this.renderRail(safeWidth, targetHeight, layout, files)
+      : this.renderNotice(safeWidth, targetHeight, hasGoal);
     assertLinesFit(result, safeWidth, "sidebar");
-    if (result.length !== targetHeight) throw new Error(`sidebar height mismatch (${result.length} != ${targetHeight})`);
+    if (result.length !== targetHeight) {
+      throw new Error(`sidebar height mismatch (${result.length} != ${targetHeight})`);
+    }
     this.cachedSignature = signature;
     this.cachedLines = result;
+    this.ensureAnim();
     return result;
   }
 
@@ -162,111 +228,52 @@ export class SidebarComponent implements Component {
     this.cachedLines = [];
   }
 
-  private renderHeader(width: number): string[] {
-    const position = this.selectedIndex() + 1;
-    const count = this.messages.length;
-    const location = count > 0 ? `${position}/${count}` : "0";
-    const selected = this.messages[this.selectedIndex()];
-    const detail = selected
-      ? `${this.focused ? "Selected" : "Current"} #${selected.index} ${formatTime(selected.timestamp)}`
-      : "User prompts";
-    return [
-      fillRow(` ${BOLD}${FG_BRIGHT}Messages${RST} ${FG_FAINT}${location}${RST}`, width, BG_HDR),
-      fillRow(` ${FG_DIM}${detail}${RST}`, width, BG),
-    ];
-  }
-
-  private renderBody(width: number, height: number): string[] {
-    if (height === 0) return [];
-    if (this.messages.length === 0) return this.padBottom([fillRow(` ${FG_DIM}No messages yet${RST}`, width, BG)], height, width);
-
-    const selected = this.selectedIndex();
-    let start = this.followTail ? this.tailStart(width, height) : this.startForSelection(width, height, selected);
-    const preserved = this.indexForId(this.viewportStartId);
-    if (!this.followTail && preserved >= 0 && selected >= preserved && this.rangeFitsSelection(width, height, preserved, selected)) start = preserved;
+  // --- rail ---------------------------------------------------------------
 
+  private renderRail(_width: number, height: number, layout: Layout, files: FileEdit[]): string[] {
+    const ctx = this.options.ctx;
+    const palette = resolvePalette(this.options.getTheme());
+    const now = Date.now();
     const lines: string[] = [];
-    for (let index = start; index < this.messages.length && lines.length < height; index++) {
-      const remaining = height - lines.length;
-      lines.push(...this.renderMessage(index, width, remaining));
-    }
-    this.viewportStartId = this.messages[start]?.id ?? null;
-    return this.padBottom(lines.slice(0, height), height, width);
-  }
-
-  private tailStart(width: number, height: number): number {
-    let start = this.messages.length - 1;
-    let rows = this.messageRowCount(start, width, height);
-    while (start > 0) {
-      const next = this.messageRowCount(start - 1, width, height);
-      if (rows + next > height) break;
-      rows += next;
-      start--;
-    }
-    return start;
-  }
+    const goal = readSessionGoal(ctx);
+    if (goal?.status === "complete" && this.previousGoalStatus !== "complete") this.victoryAt = now;
+    this.previousGoalStatus = goal?.status ?? null;
+    const live = this.needsAnim(now);
+    lines.push(flagRow(palette, SIDEBAR_WIDTH - 1, now, live));
+    this.goalTarget = goal?.tokenBudget ? Math.min(1, goal.usage.tokensUsed / goal.tokenBudget) : null;
+    this.goalMeter.tick(this.goalTarget);
+    const usage = computeUsage(ctx);
+    this.ctxTarget = usage.contextPercent === null ? null : Math.min(1, usage.contextPercent / 100);
+    this.ctxMeter.tick(this.ctxTarget);
+    const goalShimmer = this.goalMeter.moving(this.goalTarget) ? Math.floor(now / 120) % 12 : null;
+    const ctxShimmer = this.ctxMeter.moving(this.ctxTarget) ? Math.floor(now / 120) % 10 : null;
 
-  private startForSelection(width: number, height: number, selected: number): number {
-    let start = selected;
-    let rows = this.messageRowCount(selected, width, height);
-    while (start > 0) {
-      const next = this.messageRowCount(start - 1, width, height);
-      if (rows + next > height) break;
-      rows += next;
-      start--;
-    }
-    return start;
-  }
-
-  private rangeFitsSelection(width: number, height: number, start: number, selected: number): boolean {
-    let rows = 0;
-    for (let index = start; index <= selected; index++) {
-      rows += this.messageRowCount(index, width, height);
-      if (rows > height) return false;
-    }
-    return true;
-  }
-
-  private messageRowCount(index: number, width: number, maxRows: number): number {
-    return this.renderMessage(index, width, maxRows).length;
-  }
-
-  private padBottom(lines: string[], height: number, width: number): string[] {
-    const padding = Array.from({ length: Math.max(0, height - lines.length) }, () => fillRow(" ", width, BG));
-    return [...lines, ...padding];
-  }
-
-  private renderMessage(index: number, width: number, maxRows = Number.MAX_SAFE_INTEGER): string[] {
-    const message = this.messages[index]!;
-    const selected = message.id === this.selectedId;
-    const background = selected ? BG_SEL : BG;
-    const arrow = selected && this.focused ? `${FG_ACC}›${RST}` : " ";
-    if (!this.expandedIds.has(message.id) || maxRows <= 1) {
-      const prefix = ` ${arrow} `;
-      const text = truncateToWidth(message.text.replace(/\s+/g, " "), Math.max(0, width - visibleWidth(prefix)), "…");
-      return [fillRow(`${prefix}${selected ? FG_BRIGHT : FG_NORM}${text}${RST}`, width, background)];
-    }
-
-    const number = `${FG_FAINT}#${message.index}${RST}`;
-    const time = `${FG_TIME}${formatTime(message.timestamp)}${RST}`;
-    const lines = [fillRow(` ${arrow} ${number} ${time}`, width, background)];
-    const wrapped = wrapText(message.text, Math.max(1, width - 4));
-    const contentRows = Math.max(0, maxRows - 1);
-    for (const line of wrapped.slice(0, contentRows)) lines.push(fillRow(`   ${FG_EXP}${line}${RST}`, width, background));
-    if (wrapped.length > contentRows && lines.length === maxRows) {
-      lines[lines.length - 1] = fillRow(`   ${FG_DIM}${DIM}…+${wrapped.length - contentRows + 1} lines${RST}`, width, background);
-    }
+    lines.push(...renderGoalSection(goal, layout.goal, palette, now, this.goalMeter, undefined, goalShimmer, this.victoryAt));
+    lines.push(...renderSessionSection(
+      ctx, this.options.getFooterData(), this.options.getCmuxContext(),
+      layout.session, palette, files, this.options.getGitStatus,
+    ));
+    lines.push(...this.panel.renderSection(layout.messages, this.focused, palette, now));
+    lines.push(...renderRuntimeSection(
+      ctx, this.options.getFooterData(), this.options.getThinkingLevel(),
+      layout.runtime, palette, undefined, this.ctxMeter.get(), ctxShimmer,
+    ));
     return lines;
   }
 
-  private selectedIndex(): number {
-    if (this.messages.length === 0) return -1;
-    const index = this.indexForId(this.selectedId);
-    return index >= 0 ? index : this.messages.length - 1;
-  }
-
-  private indexForId(id: string | null): number {
-    return id ? this.messages.findIndex((message) => message.id === id) : -1;
+  /** Bounded to the width actually offered, so a narrow slot never overflows its column. */
+  private renderNotice(width: number, height: number, hasGoal: boolean): string[] {
+    const palette = resolvePalette(this.options.getTheme());
+    const row = (text: string) =>
+      width <= 1
+        ? fillRow("", width, palette.bgDeep)
+        : `${palette.edge}│${RST}${fillRow(` ${text}`, width - 1, palette.bgDeep)}`;
+    const lines: string[] = [];
+    const push = (text: string) => { if (lines.length < height) lines.push(row(text)); };
+    push(`${palette.bold(`${palette.textNew}Sidebar${RST}`)}`);
+    push(`${palette.ghost}needs ${SIDEBAR_WIDTH}×${minimumHeight(hasGoal)}${RST}`);
+    while (lines.length < height) lines.push(row(""));
+    return lines;
   }
 
   private signature(width: number, height: number): string {
@@ -274,6 +281,8 @@ export class SidebarComponent implements Component {
     const statuses = this.options.getFooterData()?.getExtensionStatuses();
     const goal = readSessionGoal(this.options.ctx);
     const cmux = this.options.getCmuxContext();
+    const files = this.options.getEditedFiles();
+    const theme = this.options.getTheme();
     return JSON.stringify({
       width,
       height,
@@ -284,9 +293,28 @@ export class SidebarComponent implements Component {
       statuses: statuses && typeof (statuses as any).entries === "function" ? [...statuses.entries()] : [],
       goal: goal ? `${goal.goalId}:${goal.status}:${goal.usage.tokensUsed}:${goal.usage.activeSeconds}:${goal.updatedAt}` : null,
       cmux: cmux ? `${cmux.workspaceTitle}:${cmux.workspaceRef}:${cmux.surfaceRef}` : null,
+      files: `${files.length}:${files[0]?.path ?? ""}`,
+      theme: theme?.name ?? null,
+      goalMeter: this.goalMeter.get()?.toFixed(3) ?? null,
+      ctxMeter: this.ctxMeter.get()?.toFixed(3) ?? null,
     });
   }
 
+  /** Focused with a selection copies that prompt; the unfocused rail copies the session identity. */
+  private async copyRailTarget(): Promise<void> {
+    const message = this.focused ? this.panel.selectedMessageText() : null;
+    if (message !== null) {
+      try {
+        await copyToClipboard(message);
+        this.options.ctx.ui.notify("Copied prompt", "info");
+      } catch {
+        this.options.ctx.ui.notify("Copy failed", "warning");
+      }
+      return;
+    }
+    await this.copySessionPath();
+  }
+
   private async copySessionPath(): Promise<void> {
     const target = this.options.ctx.sessionManager.getSessionFile() ?? this.options.ctx.sessionManager.getSessionId();
     try {

package/src/slots.ts

@@ -0,0 +1,130 @@
+import { DOT_GLYPH, arriveProgress, glowStrength, pulse, settlePhase } from "./anim.ts";
+import type { Palette } from "./palette.ts";
+import { bgRgb, fgRgb, rgbLerp } from "./palette.ts";
+import { RAIL_CONTENT, railRow } from "./sections.ts";
+import { RST, clip, formatTime, wrapText } from "./style.ts";
+import type { UserMessage } from "./types.ts";
+
+/** Cells in front of the summary text: marker, time, space. The ordinal is
+ *  gone: its four cells buy summary text instead. */
+export const META_CELLS = 7;
+export const TEXT_CELLS = RAIL_CONTENT - META_CELLS;
+/** Messages this far from the newest read as current; older ones fade. */
+const FRESH_WINDOW = 4;
+
+export type SlotDeps = {
+  getSummary: (messageId: string, text: string) => string;
+  hasSummary: (messageId: string) => boolean;
+  isPending: (messageId: string) => boolean;
+};
+
+/** Per-message animation memory the panel owns and slots read. */
+export type SlotMemory = {
+  seenSummary: Map<string, boolean>;
+  landedAt: Map<string, number>;
+  arrivedAt: Map<string, number>;
+};
+
+/**
+ * One message slot: two rail rows carrying the marker, the time, and the
+ * summary wrapped across both text cells. The selection bar spans both rows
+ * as a yellow edge; pending summaries pulse; landed summaries sweep accent
+ * and glow-decay; arrivals reveal left to right; age fades the rest.
+ */
+export function slotRows(
+  message: UserMessage,
+  index: number,
+  total: number,
+  selected: boolean,
+  palette: Palette,
+  now: number,
+  deps: SlotDeps,
+  memory: SlotMemory,
+): string[] {
+  const pending = deps.isPending(message.id);
+  const bar = selected ? `${palette.badgeModified}▎${RST}` : " ";
+  const marker = pending ? pendingDot(palette, now) : bar;
+  const secondMarker = pending ? " " : bar;
+  const time = formatTime(message.timestamp).padEnd(5);
+  const meta = `${palette.ghost}${time}${RST} `;
+  const arrived = memory.arrivedAt.get(message.id);
+  const progress = arrived === undefined ? 1 : arriveProgress(now, arrived);
+  const text = summaryLines(message, progress, deps);
+  const color = textColor(message, index, total, selected, palette, now, deps, memory);
+  const background = slotBackground(message, selected, palette, now, memory);
+  const first = `${marker}${meta}${color}${text[0]}${RST}`;
+  const second = `${secondMarker}${" ".repeat(META_CELLS - 1)}${color}${text[1]}${RST}`;
+  return [
+    railRow(palette, first, background),
+    railRow(palette, second, background),
+  ];
+}
+
+/**
+ * The slot surface: a selection is the soft accent tint, and a message whose
+ * summary just landed keeps a decaying glow over the deep canvas. Everything
+ * else floats on deep.
+ */
+function slotBackground(message: UserMessage, selected: boolean, palette: Palette, now: number, memory: SlotMemory): string {
+  if (selected) return palette.bgSelect;
+  const landed = memory.landedAt.get(message.id);
+  if (landed === undefined || !palette.truecolor || !palette.glowFrom || !palette.glowTo) return palette.bgDeep;
+  const strength = glowStrength(now, landed);
+  return strength > 0 ? bgRgb(rgbLerp(palette.glowTo, palette.glowFrom, strength)) : palette.bgDeep;
+}
+
+/** The working dot: a fast pulse while the summary is still in flight. */
+function pendingDot(palette: Palette, now: number): string {
+  if (palette.truecolor && palette.dotDim && palette.dotPeak) {
+    return `${fgRgb(rgbLerp(palette.dotDim, palette.dotPeak, pulse(now, 0)))}${DOT_GLYPH}${RST}`;
+  }
+  const step = Math.round(pulse(now, 0) * (palette.dotFallback.length - 1));
+  return `${palette.dotFallback[step] ?? palette.ghost}${DOT_GLYPH}${RST}`;
+}
+
+/** Age fade like pi-recap: newest bright, recent normal, older muted; a
+ *  landing summary sweeps accent then bold accent before settling. */
+function textColor(
+  message: UserMessage,
+  index: number,
+  total: number,
+  selected: boolean,
+  palette: Palette,
+  now: number,
+  deps: SlotDeps,
+  memory: SlotMemory,
+): string {
+  const has = deps.hasSummary(message.id);
+  const was = memory.seenSummary.get(message.id);
+  if (has && was === false) memory.landedAt.set(message.id, now);
+  memory.seenSummary.set(message.id, has);
+
+  const landed = memory.landedAt.get(message.id);
+  if (has && landed !== undefined) {
+    const phase = settlePhase(now, landed);
+    if (phase === 1) return palette.accent;
+    if (phase === 2) return palette.bold(palette.accent);
+  }
+  if (selected) return palette.textNew;
+  if (!has) return palette.preview;
+  const distance = total - 1 - index;
+  if (distance === 0) return palette.textNew;
+  if (distance <= FRESH_WINDOW) return palette.textMid;
+  return palette.textOld;
+}
+
+/** The summary wrapped into the two text cells of a message slot. While a
+ *  slot is arriving, the first line reveals left to right and the second
+ *  waits its turn. */
+function summaryLines(message: UserMessage, progress: number, deps: SlotDeps): [string, string] {
+  const wrapped = wrapText(deps.getSummary(message.id, message.text), TEXT_CELLS);
+  if (progress < 1) {
+    const reveal = Math.max(1, Math.floor(progress * TEXT_CELLS));
+    return [clip(wrapped[0] ?? "", reveal), ""];
+  }
+  if (wrapped.length <= 1) return [wrapped[0] ?? "", ""];
+  const second = wrapped.length > 2
+    ? clip(wrapped.slice(1).join(" "), TEXT_CELLS)
+    : wrapped[1]!;
+  return [wrapped[0]!, second];
+}