pi-message-sidebar 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.5.0
+
+- Replaced selected/newest pinning with a row-aware contiguous chronological viewport.
+- Top-aligned short histories and preserved selection, expansion, viewport anchor, and follow-tail state by message ID.
+- Reduced the header to two compact rows and the normal status dock to at most four rows.
+- Removed collapsed-row ordinal and timestamp columns; metadata now appears only on expanded rows.
+- Preserved complete cmux surface refs by truncating workspace titles first.
+- Corrected tiny-height allocation so a message remains visible whenever one row is available.
+- Matched the nested pi-codex-goal usage schema, tightened goal status/value validation, refreshed live context independently of entry totals, and isolated usage caches per context.
+- Clarified that fullscreen is persistent while regular mode is a current-screen compositor under terminal-owned scrollback.
+
 ## 1.2.0
 
 > Live goal tracking and cmux session context in the status dock.

package/README.md

@@ -5,14 +5,14 @@ Persistent message history sidebar for [Pi](https://pi.dev).
 ## Features
 
 - Fixed 42-column panel on the right
-- Live goal card: objective, status, token budget, and elapsed time from pi-codex-goal entries
-- cmux session context: workspace title and surface ref replace the session file datetime inside cmux
+- Two-row message header with position and selected-message metadata
+- Contiguous chronological message viewport that top-aligns short histories and follows new messages until you browse away
+- Compact status dock of at most four rows, including an optional two-line goal
+- cmux session context that preserves the complete surface ref by truncating the workspace title first
 - Main transcript and editor render in their own reserved width
-- Native side-by-side layout in fullscreen TUI mode
-- Regular-mode compositor that reserves the same width in scrollback mode
+- Persistent native right rail in fullscreen TUI mode
+- Compact regular-mode compositor in terminal-owned scrollback mode
 - Automatic collapse when the terminal cannot keep an 80-column main pane
-- First and last five user messages remain visible
-- Gap indicator shows hidden message counts
 - `Ctrl+Shift+H` focuses the sidebar
 - Arrow keys navigate messages
 - `Enter` expands or collapses a message
@@ -43,7 +43,9 @@ pi install git:github.com/Fornace/pi-message-sidebar
 
 ## Usage
 
-The sidebar appears automatically in interactive mode when the terminal is at least 123 columns wide. It collapses below that breakpoint so Pi keeps a usable main pane.
+The sidebar appears automatically in interactive mode when the terminal is at least 123 columns wide. It collapses below that breakpoint so Pi keeps a usable main pane. Fullscreen mode uses a persistent `HStack` right rail. Regular mode uses a compact compositor over the terminal's current screenful; because the terminal owns regular-mode scrollback, the sidebar is not permanently sticky while browsing old scrollback. An on-demand overlay is intentionally not implemented: overlay components are disposed on close, which conflicts with the persistent ID-stable sidebar state, so the compact compositor is kept instead.
+
+The message body is one contiguous chronological viewport. New messages remain selected while follow-tail is active. Navigating away preserves the selected message, expansion state, and visible range by message ID when history entries are inserted or refreshed.
 
 - Press `Ctrl+Shift+H` to focus or unfocus the sidebar.
 - Press `↑` or `↓` to navigate.
@@ -55,9 +57,9 @@ The sidebar appears automatically in interactive mode when the terminal is at le
 ## Architecture
 
 - `index.ts` is the auto-discovered extension entrypoint.
-- `src/layout.ts` reserves a real horizontal region in fullscreen mode and composes an equivalent region in regular mode.
-- `src/sidebar-component.ts` owns message navigation and bounded rendering.
-- `src/status-dock.ts` renders session, model, context, cost, goal, and extension status data.
+- `src/layout.ts` reserves a persistent horizontal region in fullscreen mode and composes the current screenful in regular mode.
+- `src/sidebar-component.ts` owns ID-stable navigation, expansion, follow-tail behavior, and the row-aware contiguous viewport.
+- `src/status-dock.ts` renders a compact, height-bounded goal, runtime, cmux, and validated status summary.
 - `src/goal.ts` reconstructs the active pi-codex-goal from session entries.
 - `src/cmux.ts` resolves the cmux workspace title and surface ref once per session.
 - `src/style.ts` provides ANSI-safe row filling and width helpers.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-message-sidebar",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Persistent responsive message history sidebar for Pi",
   "keywords": [
     "pi-package",
@@ -31,6 +31,7 @@
   "scripts": {
     "test": "node --import tsx --test test/*.test.ts",
     "test:pty": "node test/pty-smoke.mjs regular 142 55 && node test/pty-smoke.mjs regular 121 55 && node test/pty-smoke.mjs fullscreen 142 55 && node test/pty-smoke.mjs fullscreen 121 55",
+    "test:pty:matrix": "node test/pty-smoke.mjs regular 80 24 && node test/pty-smoke.mjs regular 120 40 && node test/pty-smoke.mjs regular 148 55 && node test/pty-smoke.mjs regular 200 60 && node test/pty-smoke.mjs fullscreen 80 24 && node test/pty-smoke.mjs fullscreen 120 40 && node test/pty-smoke.mjs fullscreen 148 55 && node test/pty-smoke.mjs fullscreen 200 60",
     "typecheck": "tsc --noEmit",
     "test:load": "node --import tsx test/load.test.mjs"
   },

package/src/constants.ts

@@ -2,8 +2,6 @@ export const SIDEBAR_WIDTH = 42;
 export const SIDEBAR_GAP = 1;
 export const RESERVED_WIDTH = SIDEBAR_WIDTH + SIDEBAR_GAP;
 export const MIN_MAIN_WIDTH = 80;
-export const PINNED_COUNT = 5;
-export const GAP_WINDOW = 3;
 
 export function isSidebarVisible(terminalWidth: number): boolean {
   return terminalWidth >= MIN_MAIN_WIDTH + RESERVED_WIDTH;

package/src/goal.ts

@@ -1,106 +1,96 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 
+export type GoalStatus = "active" | "paused" | "budgetLimited" | "complete";
+
 export type ThreadGoal = {
   goalId: string;
   objective: string;
-  status: "active" | "paused" | "budgetLimited" | "complete";
+  status: GoalStatus;
   tokenBudget: number | null;
-  tokensUsed: number;
-  activeSeconds: number;
+  usage: { tokensUsed: number; activeSeconds: number };
   createdAt: number;
   updatedAt: number;
 };
 
-type BranchEntry = { type?: string; customType?: string; data?: unknown };
+type BranchEntry = { type?: string; customType?: string; data?: unknown; id?: string; timestamp?: string };
+type GoalEntrySource = "command" | "tool" | "runtime";
 
 const GOAL_ENTRY_TYPE = "pi-codex-goal";
 
-type GoalEntrySource = "command" | "tool" | "runtime";
-
 function isGoalEntrySource(value: unknown): value is GoalEntrySource {
   return value === "command" || value === "tool" || value === "runtime";
 }
 
-function isThreadGoal(value: unknown): value is RawGoal {
-  const goal = value as RawGoal | null;
-  if (!goal || typeof goal !== "object") return false;
-  const usage = goal.usage as { tokensUsed?: unknown; activeSeconds?: unknown } | undefined;
-  return (
-    typeof goal.goalId === "string" &&
-    typeof goal.objective === "string" &&
-    (goal.status === "active" || goal.status === "paused" || goal.status === "budgetLimited" || goal.status === "complete") &&
-    (goal.tokenBudget === null || typeof goal.tokenBudget === "number") &&
-    typeof goal.createdAt === "number" &&
-    typeof goal.updatedAt === "number" &&
-    typeof usage?.tokensUsed === "number" &&
-    typeof usage.activeSeconds === "number"
+function isFiniteNonNegative(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0;
+}
+
+function isGoalStatus(value: unknown): value is GoalStatus {
+  return value === "active" || value === "paused" || value === "budgetLimited" || value === "complete";
+}
+
+function isThreadGoal(value: unknown): value is ThreadGoal {
+  const goal = value as ThreadGoal | null;
+  return Boolean(
+    goal && typeof goal === "object" &&
+    typeof goal.goalId === "string" && goal.goalId.length > 0 &&
+    typeof goal.objective === "string" && goal.objective.trim().length > 0 &&
+    isGoalStatus(goal.status) &&
+    (goal.tokenBudget === null || (Number.isInteger(goal.tokenBudget) && goal.tokenBudget >= 0)) &&
+    isFiniteNonNegative(goal.createdAt) &&
+    isFiniteNonNegative(goal.updatedAt) &&
+    isFiniteNonNegative(goal.usage?.tokensUsed) &&
+    isFiniteNonNegative(goal.usage?.activeSeconds)
   );
 }
 
-type RawGoal = Omit<ThreadGoal, "tokensUsed" | "activeSeconds"> & {
-  usage: { tokensUsed: number; activeSeconds: number };
-};
+function cloneGoal(goal: ThreadGoal): ThreadGoal {
+  return { ...goal, usage: { ...goal.usage } };
+}
 
-/**
- * Reconstructs the current thread goal from pi-codex-goal session entries.
- * Mirrors reconstructGoal() from pi-codex-goal dist/state.js (schema version 1):
- * "set" entries replace the goal, "clear" entries drop it, and "usage" entries
- * advance tokens/time for runtime-usage statuses only.
- */
+/** Mirrors pi-codex-goal's schema-v1 reconstruction contract. */
 export function readThreadGoal(entries: Iterable<BranchEntry>): ThreadGoal | null {
   let goal: ThreadGoal | null = null;
   for (const entry of entries) {
     if (entry.type !== "custom" || entry.customType !== GOAL_ENTRY_TYPE) continue;
     const data = entry.data as Record<string, unknown> | null;
-    if (!data || typeof data !== "object" || data.version !== 1 || typeof data.at !== "number") continue;
-    if (data.kind === "clear" && isGoalEntrySource(data.source) && (data.clearedGoalId === null || typeof data.clearedGoalId === "string")) {
+    if (!data || typeof data !== "object" || data.version !== 1 || !isFiniteNonNegative(data.at)) continue;
+
+    if (data.kind === "clear") {
+      if (!isGoalEntrySource(data.source) || (data.clearedGoalId !== null && typeof data.clearedGoalId !== "string")) continue;
       goal = null;
-    } else if (data.kind === "set" && isGoalEntrySource(data.source) && isThreadGoal(data.goal)) {
-      const raw = data.goal as RawGoal;
-      goal = {
-        goalId: raw.goalId,
-        objective: raw.objective,
-        status: raw.status,
-        tokenBudget: raw.tokenBudget,
-        tokensUsed: raw.usage.tokensUsed,
-        activeSeconds: raw.usage.activeSeconds,
-        createdAt: raw.createdAt,
-        updatedAt: raw.updatedAt,
-      };
-    } else if (data.kind === "usage" && data.source === "runtime" && goal) {
-      const usage = data.usage as { tokensUsed?: number; activeSeconds?: number } | undefined;
-      const updatedAt = data.updatedAt;
-      const status = data.status;
-      if (data.goalId !== goal.goalId) continue;
-      if (status !== "active" && status !== "budgetLimited") continue;
-      if (goal.status !== "active" && goal.status !== "budgetLimited") continue;
-      if (goal.status === "budgetLimited" && status === "active") continue;
-      if (typeof updatedAt !== "number" || typeof usage?.tokensUsed !== "number" || typeof usage.activeSeconds !== "number") continue;
-      if (updatedAt < goal.updatedAt || usage.tokensUsed < goal.tokensUsed || usage.activeSeconds < goal.activeSeconds) continue;
-      const current: ThreadGoal = goal;
-      goal = {
-        ...current,
-        status,
-        tokensUsed: usage.tokensUsed,
-        activeSeconds: usage.activeSeconds,
-        updatedAt,
-      };
+      continue;
+    }
+    if (data.kind === "set") {
+      if (!isGoalEntrySource(data.source) || !isThreadGoal(data.goal)) continue;
+      goal = cloneGoal(data.goal);
+      continue;
     }
+    if (data.kind !== "usage" || data.source !== "runtime" || !goal) continue;
+
+    const status = data.status;
+    const usage = data.usage as ThreadGoal["usage"] | undefined;
+    if (data.goalId !== goal.goalId || (status !== "active" && status !== "budgetLimited")) continue;
+    if (goal.status !== "active" && goal.status !== "budgetLimited") continue;
+    if (goal.status === "budgetLimited" && status === "active") continue;
+    if (!isFiniteNonNegative(data.updatedAt) || !isFiniteNonNegative(usage?.tokensUsed) || !isFiniteNonNegative(usage.activeSeconds)) continue;
+    if (data.updatedAt < goal.updatedAt || usage.tokensUsed < goal.usage.tokensUsed || usage.activeSeconds < goal.usage.activeSeconds) continue;
+    goal = { ...goal, status, usage: { ...usage }, updatedAt: data.updatedAt };
   }
   return goal;
 }
 
-type GoalCache = { branch: object; key: string; goal: ThreadGoal | null };
-const cache = new WeakMap<ExtensionContext, GoalCache>();
+type GoalCache = { key: string; goal: ThreadGoal | null };
+const caches = new WeakMap<ExtensionContext, GoalCache>();
 
-/** Cached readThreadGoal over the current session branch. */
+/** Cached reconstruction scoped to each extension context. */
 export function readSessionGoal(ctx: ExtensionContext): ThreadGoal | null {
   const branch = ctx.sessionManager.getBranch();
   const last = branch.at(-1);
   const key = `${branch.length}:${last?.id ?? ""}:${last?.timestamp ?? ""}`;
-  const previous = cache.get(ctx);
-  if (previous?.branch === branch && previous.key === key) return previous.goal;
+  const previous = caches.get(ctx);
+  if (previous?.key === key) return previous.goal;
   const goal = readThreadGoal(branch);
-  cache.set(ctx, { branch, key, goal });
+  caches.set(ctx, { key, goal });
   return goal;
 }

package/src/sidebar-component.ts

@@ -6,8 +6,8 @@ import {
 import { basename } from "node:path";
 import type { Component, TUI } from "@earendil-works/pi-tui";
 import { matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { SIDEBAR_WIDTH } from "./constants.ts";
 import type { CmuxContext } from "./cmux.ts";
+import { SIDEBAR_WIDTH } from "./constants.ts";
 import { readSessionGoal } from "./goal.ts";
 import { assertLinesFit } from "./layout.ts";
 import { renderStatusDock } from "./status-dock.ts";
@@ -42,8 +42,6 @@ type SidebarOptions = {
   messages: UserMessage[];
 };
 
-type MessageRows = { index: number; lines: string[] };
-
 export class SidebarComponent implements Component {
   private focused = false;
   private selectedId: string | null;
@@ -54,6 +52,7 @@ export class SidebarComponent implements Component {
   private restoreFocus: Component | null = null;
   private cachedSignature = "";
   private cachedLines: string[] = [];
+  private viewportStartId: string | null = null;
 
   constructor(private readonly options: SidebarOptions) {
     this.messages = options.messages;
@@ -73,9 +72,7 @@ export class SidebarComponent implements Component {
       this.options.tui.setFocus(this);
     } else {
       this.focused = false;
-      if ((this.options.tui as any).getFocusedComponent?.() === this) {
-        this.options.tui.setFocus(this.restoreFocus);
-      }
+      if ((this.options.tui as any).getFocusedComponent?.() === this) this.options.tui.setFocus(this.restoreFocus);
       this.restoreFocus = null;
     }
     this.refresh();
@@ -83,13 +80,16 @@ 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;
     }
@@ -123,6 +123,7 @@ export class SidebarComponent implements Component {
     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();
   }
 
@@ -132,9 +133,12 @@ export class SidebarComponent implements Component {
     const signature = this.signature(safeWidth, targetHeight);
     if (signature === this.cachedSignature) return this.cachedLines;
 
-    const renderedHeader = this.renderHeader(safeWidth);
-    const header = renderedHeader.slice(0, Math.min(renderedHeader.length, targetHeight));
-    const maxDockRows = Math.max(0, targetHeight - header.length);
+    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,
@@ -142,14 +146,12 @@ export class SidebarComponent implements Component {
       this.options.getThinkingLevel(),
       this.focused,
       this.options.getCmuxContext,
-      maxDockRows,
+      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];
     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;
     return result;
@@ -161,99 +163,112 @@ export class SidebarComponent implements Component {
   }
 
   private renderHeader(width: number): string[] {
-    const focus = this.focused ? `${FG_ACC}focused${RST}` : `${FG_DIM}passive${RST}`;
-    const tail = this.followTail ? `${FG_DIM}tail${RST}` : `${FG_MID}browsing${RST}`;
+    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}${this.messages.length}${RST}`, width, BG_HDR),
-      fillRow(` ${focus}${FG_FAINT} · ${RST}${tail}`, width, BG),
+      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.padTop([fillRow(` ${FG_DIM}No messages yet${RST}`, width, BG)], height, width);
-    }
+    if (this.messages.length === 0) return this.padBottom([fillRow(` ${FG_DIM}No messages yet${RST}`, width, BG)], height, width);
 
     const selected = this.selectedIndex();
-    const newest = this.messages.length - 1;
-    const selectedBudget = Math.max(1, height - (selected === newest ? 0 : height >= 3 ? 2 : 1));
-    const groups = new Map<number, MessageRows>();
-    groups.set(selected, { index: selected, lines: this.renderMessage(selected, width, selectedBudget) });
-    if (selected !== newest && height >= 2) {
-      groups.set(newest, { index: newest, lines: this.renderMessage(newest, width, 1) });
+    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;
+
+    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);
+  }
 
-    const candidates = Array.from({ length: this.messages.length }, (_, index) => index)
-      .filter((index) => !groups.has(index))
-      .sort((a, b) => {
-        const aDistance = Math.min(Math.abs(a - selected), newest - a);
-        const bDistance = Math.min(Math.abs(b - selected), newest - b);
-        return aDistance - bDistance || b - a;
-      });
-    for (const index of candidates) {
-      const group = { index, lines: this.renderMessage(index, width) };
-      groups.set(index, group);
-      if (this.composeGroups(groups, width, true).length > height) groups.delete(index);
+  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;
+  }
 
-    let lines = this.composeGroups(groups, width, true);
-    if (lines.length > height) lines = this.composeGroups(groups, width, false);
-    return this.padTop(lines, height, width);
+  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 composeGroups(groups: Map<number, MessageRows>, width: number, showGaps: boolean): string[] {
-    const ordered = [...groups.values()].sort((a, b) => a.index - b.index);
-    const lines: string[] = [];
-    let previous = -1;
-    for (const group of ordered) {
-      if (showGaps && previous >= 0 && group.index > previous + 1) {
-        lines.push(fillRow(` ${FG_FAINT}··· ${group.index - previous - 1} hidden${RST}`, width, BG));
-      }
-      lines.push(...group.lines);
-      previous = group.index;
+  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 lines;
+    return true;
   }
 
-  private padTop(lines: string[], height: number, width: number): string[] {
+  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 [...padding, ...lines];
+    return [...lines, ...padding];
   }
 
-  private renderMessage(index: number, width: number, maxRows = 10): string[] {
+  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}` : " ";
-    const number = `${FG_FAINT}${String(message.index).padStart(2)}${RST}`;
-    const time = `${FG_TIME}${formatTime(message.timestamp)}${RST}`;
     if (!this.expandedIds.has(message.id) || maxRows <= 1) {
-      const prefix = ` ${arrow}${number} ${time} `;
+      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 lines = [fillRow(` ${arrow}${number} ${time}`, 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 - 2);
-    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.push(fillRow(`   ${FG_DIM}${DIM}…+${wrapped.length - contentRows} lines${RST}`, width, background));
-    } else if (lines.length < maxRows) {
-      lines.push(fillRow(" ", width, background));
+    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);
     }
     return lines;
   }
 
   private selectedIndex(): number {
     if (this.messages.length === 0) return -1;
-    const index = this.messages.findIndex((message) => message.id === this.selectedId);
+    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;
+  }
+
   private signature(width: number, height: number): string {
     const usage = this.options.ctx.getContextUsage?.();
     const statuses = this.options.getFooterData()?.getExtensionStatuses();
@@ -266,8 +281,8 @@ export class SidebarComponent implements Component {
       model: this.options.ctx.model?.id,
       thinking: this.options.getThinkingLevel(),
       usage,
-      statuses: statuses ? [...statuses.entries()] : [],
-      goal: goal ? `${goal.goalId}:${goal.status}:${goal.tokensUsed}:${goal.activeSeconds}:${goal.updatedAt}` : null,
+      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,
     });
   }

package/src/status-dock.ts

@@ -3,8 +3,8 @@ import type {
   ReadonlyFooterDataProvider,
 } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { readSessionGoal, type ThreadGoal } from "./goal.ts";
 import type { CmuxContext } from "./cmux.ts";
+import { readSessionGoal, type ThreadGoal } from "./goal.ts";
 import {
   BG,
   BG_HDR,
@@ -24,59 +24,65 @@ import {
   formatDuration,
   formatTokens,
   sanitizeStatusText,
+  wrapText,
 } from "./style.ts";
 
-type Usage = {
+type UsageTotals = {
   input: number;
   output: number;
   cacheRead: number;
   cacheWrite: number;
   cost: number;
   latestCacheHitRate?: number;
+};
+
+type Usage = UsageTotals & {
   contextPercent: number | null;
   contextWindow: number;
 };
 
-type UsageCache = { owner: object; key: string; usage: Usage };
-let usageCache: UsageCache | null = null;
+type UsageCache = { key: string; totals: UsageTotals };
+const usageCaches = new WeakMap<ExtensionContext, UsageCache>();
 
-function computeUsage(ctx: ExtensionContext): Usage {
+/** Aggregate persisted usage once, but sample live context usage on every render. */
+export function computeUsage(ctx: ExtensionContext): Usage {
   const entries = ctx.sessionManager.getEntries();
   const last = entries.at(-1);
-  const key = `${entries.length}:${last?.id ?? ""}`;
-  if (usageCache?.owner === ctx && usageCache.key === key) return usageCache.usage;
-
-  let input = 0;
-  let output = 0;
-  let cacheRead = 0;
-  let cacheWrite = 0;
-  let cost = 0;
-  let latestCacheHitRate: number | undefined;
-  for (const entry of entries) {
-    if (entry.type !== "message" || entry.message.role !== "assistant") continue;
-    const usage = (entry.message as any).usage ?? {};
-    input += usage.input ?? 0;
-    output += usage.output ?? 0;
-    cacheRead += usage.cacheRead ?? 0;
-    cacheWrite += usage.cacheWrite ?? 0;
-    cost += usage.cost?.total ?? 0;
-    const prompt = (usage.input ?? 0) + (usage.cacheRead ?? 0) + (usage.cacheWrite ?? 0);
-    latestCacheHitRate = prompt > 0 ? ((usage.cacheRead ?? 0) / prompt) * 100 : undefined;
+  const key = `${entries.length}:${last?.id ?? ""}:${last?.timestamp ?? ""}`;
+  let totals = usageCaches.get(ctx);
+
+  if (!totals || totals.key !== key) {
+    let input = 0;
+    let output = 0;
+    let cacheRead = 0;
+    let cacheWrite = 0;
+    let cost = 0;
+    let latestCacheHitRate: number | undefined;
+    for (const entry of entries) {
+      if (entry.type !== "message" || entry.message.role !== "assistant") continue;
+      const value = (entry.message as any).usage ?? {};
+      input += value.input ?? 0;
+      output += value.output ?? 0;
+      cacheRead += value.cacheRead ?? 0;
+      cacheWrite += value.cacheWrite ?? 0;
+      cost += value.cost?.total ?? 0;
+      const prompt = (value.input ?? 0) + (value.cacheRead ?? 0) + (value.cacheWrite ?? 0);
+      latestCacheHitRate = prompt > 0 ? ((value.cacheRead ?? 0) / prompt) * 100 : undefined;
+    }
+    totals = { key, totals: { input, output, cacheRead, cacheWrite, cost, latestCacheHitRate } };
+    usageCaches.set(ctx, totals);
   }
 
   const context = ctx.getContextUsage?.();
-  const usage = {
-    input,
-    output,
-    cacheRead,
-    cacheWrite,
-    cost,
-    latestCacheHitRate,
-    contextPercent: context?.percent ?? null,
-    contextWindow: context?.contextWindow ?? ctx.model?.contextWindow ?? 0,
+  return {
+    ...totals.totals,
+    contextPercent: typeof context?.percent === "number" && Number.isFinite(context.percent)
+      ? context.percent
+      : null,
+    contextWindow: typeof context?.contextWindow === "number" && Number.isFinite(context.contextWindow)
+      ? context.contextWindow
+      : ctx.model?.contextWindow ?? 0,
   };
-  usageCache = { owner: ctx, key, usage };
-  return usage;
 }
 
 function row(width: number, label: string, value: string, background = BG): string {
@@ -95,30 +101,15 @@ function goalStatus(goal: ThreadGoal): { icon: string; color: string; label: str
 
 function renderGoal(width: number, goal: ThreadGoal): string[] {
   const status = goalStatus(goal);
-  const objective = truncateToWidth(goal.objective.replace(/\s+/g, " ").trim(), Math.max(0, width - 4), "…");
   const budget = goal.tokenBudget
-    ? `${formatTokens(goal.tokensUsed)}/${formatTokens(goal.tokenBudget)}`
-    : `${formatTokens(goal.tokensUsed)}/∞`;
-  const overBudget = goal.tokenBudget !== null && goal.tokensUsed > goal.tokenBudget;
-  return [
-    row(width, `${status.color}${status.icon}${RST}`, `${FG_BRIGHT}${objective}${RST}`),
-    row(width, "goal", `${overBudget ? FG_ERR : status.color}${budget}${RST} ${FG_FAINT}·${RST} ${FG_MID}${status.label} ${formatDuration(goal.activeSeconds)}${RST}`),
-  ];
-}
-
-function renderContextRow(width: number, usage: Usage): string {
-  const percent = usage.contextPercent === null ? "?" : `${usage.contextPercent.toFixed(0)}%`;
-  const parts = [
-    `${contextColor(usage.contextPercent)}${percent}${RST}/${formatTokens(usage.contextWindow)}`,
-    usage.input ? `↑${formatTokens(usage.input)}` : undefined,
-    usage.output ? `↓${formatTokens(usage.output)}` : undefined,
-    usage.cacheRead ? `R${formatTokens(usage.cacheRead)}` : undefined,
-    usage.latestCacheHitRate !== undefined && (usage.cacheRead || usage.cacheWrite)
-      ? `CH${usage.latestCacheHitRate.toFixed(0)}%`
-      : undefined,
-    `$${usage.cost.toFixed(3)}`,
-  ].filter(Boolean).join(` ${FG_FAINT}·${RST} `);
-  return row(width, "ctx", `${FG_MID}${parts}${RST}`);
+    ? `${formatTokens(goal.usage.tokensUsed)}/${formatTokens(goal.tokenBudget)}`
+    : `${formatTokens(goal.usage.tokensUsed)}`;
+  const overBudget = goal.tokenBudget !== null && goal.usage.tokensUsed > goal.tokenBudget;
+  const metadata = `${status.color}${status.icon} ${status.label}${RST} ${overBudget ? FG_ERR : FG_MID}${budget}${RST} ${FG_FAINT}${formatDuration(goal.usage.activeSeconds)}${RST}`;
+  const objective = wrapText(goal.objective, Math.max(1, width - 4));
+  const lines = [fillRow(` ${metadata}`, width, BG)];
+  if (objective[0]) lines.push(fillRow(`   ${FG_BRIGHT}${objective[0]}${RST}`, width, BG));
+  return lines;
 }
 
 function renderWorkspace(width: number, ctx: ExtensionContext, footerData: ReadonlyFooterDataProvider | null): string {
@@ -132,14 +123,39 @@ function renderWorkspace(width: number, ctx: ExtensionContext, footerData: Reado
   return row(width, "cwd", parts);
 }
 
-function renderSession(width: number, ctx: ExtensionContext, cmux: CmuxContext | null): string {
-  if (cmux) {
-    const workspace = cmux.workspaceTitle ?? cmux.workspaceRef ?? "cmux";
-    const surface = cmux.surfaceRef ? ` ${FG_FAINT}· ${cmux.surfaceRef}${RST}` : "";
-    return row(width, "cmux", `${FG_BRIGHT}${workspace}${RST}${surface}`);
+function renderCmux(width: number, cmux: CmuxContext): string {
+  const prefix = ` ${FG_FAINT}cmux${RST} `;
+  const available = Math.max(0, width - visibleWidth(prefix));
+  const surfaceText = cmux.surfaceRef ?? "";
+  const surface = truncateToWidth(surfaceText, available, "");
+  const separator = surface ? ` ${FG_FAINT}·${RST} ` : "";
+  const titleBudget = Math.max(0, available - visibleWidth(separator) - visibleWidth(surface));
+  const titleText = cmux.workspaceTitle ?? cmux.workspaceRef ?? "cmux";
+  const title = truncateToWidth(titleText, titleBudget, "…");
+  return fillRow(`${prefix}${FG_BRIGHT}${title}${RST}${separator}${FG_INFO}${surface}${RST}`, width, BG);
+}
+
+function renderRuntime(width: number, ctx: ExtensionContext, footerData: ReadonlyFooterDataProvider | null, thinkingLevel: string, usage: Usage): string | null {
+  const model = ctx.model;
+  if (!model) return null;
+  const provider = footerData && footerData.getAvailableProviderCount() > 1 ? `${model.provider}/` : "";
+  const thinking = model.reasoning ? ` ${FG_FAINT}·${RST} ${FG_MID}${thinkingLevel}${RST}` : "";
+  const percent = usage.contextPercent === null ? "?" : `${usage.contextPercent.toFixed(0)}%`;
+  const context = `${contextColor(usage.contextPercent)}${percent}/${formatTokens(usage.contextWindow)}${RST}`;
+  return row(width, "run", `${FG_BRIGHT}${provider}${model.id}${RST}${thinking} ${FG_FAINT}·${RST} ${context}`);
+}
+
+export function validExtensionStatuses(footerData: ReadonlyFooterDataProvider | null): string[] {
+  if (!footerData) return [];
+  const statuses = footerData.getExtensionStatuses();
+  if (!(statuses && typeof (statuses as any).entries === "function")) return [];
+  const valid: [string, string][] = [];
+  for (const entry of statuses.entries()) {
+    if (!Array.isArray(entry) || typeof entry[0] !== "string" || typeof entry[1] !== "string") continue;
+    const text = sanitizeStatusText(entry[1]);
+    if (text) valid.push([entry[0], text]);
   }
-  const shortId = ctx.sessionManager.getSessionId().replace(/-/g, "").slice(-8);
-  return row(width, "sess", `${FG_INFO}#${shortId}${RST}`);
+  return valid.sort(([a], [b]) => a.localeCompare(b)).map(([, text]) => text);
 }
 
 export function renderStatusDock(
@@ -149,31 +165,33 @@ export function renderStatusDock(
   thinkingLevel: string,
   focused: boolean,
   getCmuxContext: () => CmuxContext | null,
-  maxRows = Number.MAX_SAFE_INTEGER,
+  maxRows = 4,
 ): string[] {
-  if (maxRows <= 0) return [];
-  const rowLimit = Math.max(1, Math.floor(maxRows));
+  const limit = Math.max(0, Math.min(4, Math.floor(maxRows)));
+  if (limit === 0) return [];
+  const hint = fillRow(
+    ` ${FG_DIM}${focused ? "↑↓ move  Enter open  c copy  Esc close" : "Ctrl+Shift+H focus"}${RST}`,
+    width,
+    BG_HDR,
+  );
+  if (limit === 1) return [hint];
+
   const usage = computeUsage(ctx);
   const goal = readSessionGoal(ctx);
+  const cmux = getCmuxContext();
   const rows: string[] = [];
-  if (goal) rows.push(...renderGoal(width, goal));
-  rows.push(renderWorkspace(width, ctx, footerData));
-  rows.push(renderSession(width, ctx, getCmuxContext()));
 
-  const model = ctx.model;
-  if (model) {
-    const provider = footerData && footerData.getAvailableProviderCount() > 1 ? `${model.provider}/` : "";
-    const thinking = model.reasoning ? ` ${FG_FAINT}·${RST} ${FG_MID}${thinkingLevel}${RST}` : "";
-    rows.push(row(width, "model", `${FG_BRIGHT}${provider}${model.id}${RST}${thinking}`));
+  // A cmux surface reference is operational identity. Keep it ahead of optional
+  // title, runtime, and status text so truncation cannot discard it.
+  if (cmux) rows.push(renderCmux(width, cmux));
+  if (goal) rows.push(...renderGoal(width, goal));
+  if (!cmux && !goal) rows.push(renderWorkspace(width, ctx, footerData));
+  const runtime = renderRuntime(width, ctx, footerData, thinkingLevel, usage);
+  if (runtime) rows.push(runtime);
+  if (!goal) {
+    const status = validExtensionStatuses(footerData)[0];
+    if (status) rows.push(row(width, "stat", `${FG_MID}${status}${RST}`));
   }
-  rows.push(renderContextRow(width, usage));
-
-  const statuses = footerData ? [...footerData.getExtensionStatuses().entries()].sort(([a], [b]) => a.localeCompare(b)) : [];
-  if (statuses[0]) rows.push(row(width, "stat", `${FG_INFO}•${RST} ${FG_MID}${sanitizeStatusText(statuses[0][1])}${RST}`));
 
-  const hint = focused ? "↑↓ navigate  Enter expand  c copy  Esc done" : "Ctrl+Shift+H focus";
-  rows.push(fillRow(` ${FG_DIM}${hint}${RST}`, width, BG_HDR));
-  if (rows.length <= rowLimit) return rows;
-  if (rowLimit === 1) return [rows.at(-1)!];
-  return [...rows.slice(0, rowLimit - 1), rows.at(-1)!];
+  return [...rows.slice(0, limit - 1), hint];
 }