pi-message-sidebar 1.3.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.3.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,100 +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";
 
-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 isGoalEntrySource(value: unknown): value is GoalEntrySource {
+  return value === "command" || value === "tool" || value === "runtime";
+}
+
+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) continue;
+    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" && 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" && 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 { GAP_WINDOW, PINNED_COUNT, 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,22 +42,27 @@ type SidebarOptions = {
   messages: UserMessage[];
 };
 
-export class SidebarComponent {
+export class SidebarComponent implements Component {
   private focused = false;
-  private selected = 0;
-  private expanded = new Set<number>();
+  private selectedId: string | null;
+  private readonly expandedIds = new Set<string>();
+  private followTail = true;
   private messages: UserMessage[];
   private version = 0;
   private restoreFocus: Component | null = null;
   private cachedSignature = "";
   private cachedLines: string[] = [];
+  private viewportStartId: string | null = null;
 
   constructor(private readonly options: SidebarOptions) {
     this.messages = options.messages;
-    this.selected = Math.max(0, this.messages.length - 1);
+    this.selectedId = this.messages.at(-1)?.id ?? null;
   }
 
   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); }
 
   setFocused(focused: boolean): void {
     if (this.focused === focused) return;
@@ -67,17 +72,27 @@ export class SidebarComponent {
       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();
   }
 
   updateMessages(messages: UserMessage[]): void {
+    const previousId = this.selectedId;
+    const previousStartId = this.viewportStartId;
     this.messages = messages;
-    this.selected = Math.min(this.selected, Math.max(0, messages.length - 1));
+    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();
   }
 
@@ -89,32 +104,41 @@ export class SidebarComponent {
   handleInput(data: string): void {
     if (matchesKey(data, "escape")) return this.setFocused(false);
     if (matchesKey(data, "c")) { void this.copySessionPath(); return; }
-    if (matchesKey(data, "up")) this.selected = Math.max(0, this.selected - 1);
-    else if (matchesKey(data, "down")) this.selected = Math.min(this.messages.length - 1, this.selected + 1);
-    else if (matchesKey(data, "pageUp")) this.selected = Math.max(0, this.selected - 10);
-    else if (matchesKey(data, "pageDown")) this.selected = Math.min(this.messages.length - 1, this.selected + 10);
-    else if (matchesKey(data, "home")) this.selected = 0;
-    else if (matchesKey(data, "end")) this.selected = Math.max(0, this.messages.length - 1);
+    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.expanded.has(this.selected)) this.expanded.delete(this.selected);
-      else this.expanded.add(this.selected);
+      if (!this.selectedId) return;
+      if (this.expandedIds.has(this.selectedId)) this.expandedIds.delete(this.selectedId);
+      else this.expandedIds.add(this.selectedId);
+      this.refresh();
+      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();
   }
 
   render(width: number): string[] {
     const safeWidth = Math.max(1, Math.min(SIDEBAR_WIDTH, width));
-    const targetHeight = Math.max(15, this.options.tui.terminal.rows);
+    const targetHeight = Math.max(1, this.options.tui.terminal.rows);
     const signature = this.signature(safeWidth, targetHeight);
     if (signature === this.cachedSignature) return this.cachedLines;
 
-    const lines = this.renderHeader(safeWidth);
-    if (this.messages.length === 0) {
-      lines.push(fillRow(" No messages yet", safeWidth, BG));
-    } else {
-      lines.push(...this.renderMessages(safeWidth));
-    }
-
+    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,
@@ -122,11 +146,12 @@ export class SidebarComponent {
       this.options.getThinkingLevel(),
       this.focused,
       this.options.getCmuxContext,
+      Math.min(4, Math.max(0, available - messageReserve)),
     );
-    while (lines.length < targetHeight - dock.length) lines.push(fillRow(" ", safeWidth, BG));
-    const bodyLimit = Math.max(0, targetHeight - dock.length);
-    const result = [...lines.slice(0, bodyLimit), ...dock].slice(0, targetHeight);
+    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})`);
     this.cachedSignature = signature;
     this.cachedLines = result;
     return result;
@@ -138,64 +163,110 @@ export class SidebarComponent {
   }
 
   private renderHeader(width: number): string[] {
-    const icon = this.focused ? `${FG_ACC}●${RST}` : `${FG_DIM}○${RST}`;
-    const mode = this.focused ? `${FG_ACC}●${RST} ${FG_MID}focused${RST}` : `${FG_DIM}passive${RST}`;
-    const separator = `${FG_DIM}${"─".repeat(Math.max(0, width - 2))}${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(" ", width, BG_HDR),
-      fillRow(` ${icon} ${BOLD}${FG_BRIGHT}Messages${RST}${FG_DIM} ${this.messages.length}${RST}  ${mode}`, width, BG_HDR),
-      fillRow(" ", width, BG_HDR),
-      fillRow(` ${separator}`, width, BG),
+      fillRow(` ${BOLD}${FG_BRIGHT}Messages${RST} ${FG_FAINT}${location}${RST}`, width, BG_HDR),
+      fillRow(` ${FG_DIM}${detail}${RST}`, width, BG),
     ];
   }
 
-  private renderMessages(width: number): string[] {
-    const result: string[] = [];
-    let previous = -1;
-    for (const index of this.visibleIndices()) {
-      if (index > previous + 1 && previous >= 0) {
-        result.push(fillRow(`     ${FG_DIM}··· ${index - previous - 1} more ···${RST}`, width, BG));
-      }
-      result.push(...this.renderMessage(index, width));
-      previous = index;
+  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;
+
+    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));
     }
-    return result;
+    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;
+  }
+
+  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 renderMessage(index: number, width: number): string[] {
+  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 = index === this.selected;
+    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.expanded.has(index)) {
-      const prefix = ` ${arrow}${number} ${time} `;
+    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 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));
-    for (const line of wrapped.slice(0, 8)) lines.push(fillRow(`   ${FG_EXP}${line}${RST}`, width, background));
-    if (wrapped.length > 8) {
-      lines.push(fillRow(`   ${FG_DIM}${DIM}…+${wrapped.length - 8} lines${RST}`, 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);
     }
-    lines.push(fillRow(" ", width, background));
     return lines;
   }
 
-  private visibleIndices(): number[] {
-    const total = this.messages.length;
-    if (total <= PINNED_COUNT * 2 + 1) return Array.from({ length: total }, (_, index) => index);
-    const indices = new Set<number>();
-    for (let i = 0; i < PINNED_COUNT; i++) indices.add(i);
-    for (let i = total - PINNED_COUNT; i < total; i++) indices.add(i);
-    if (this.selected >= PINNED_COUNT && this.selected < total - PINNED_COUNT) {
-      const start = Math.max(PINNED_COUNT, Math.min(this.selected - 1, total - PINNED_COUNT - GAP_WINDOW));
-      for (let i = start; i < start + GAP_WINDOW; i++) indices.add(i);
-    }
-    return [...indices].sort((a, b) => a - b);
+  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;
   }
 
   private signature(width: number, height: number): string {
@@ -207,13 +278,12 @@ export class SidebarComponent {
       width,
       height,
       version: this.version,
-      messages: this.messages.length,
       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,
-      cmux: cmux ? `${cmux.workspaceTitle}:${cmux.surfaceRef}` : 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

@@ -2,13 +2,11 @@ import type {
   ExtensionContext,
   ReadonlyFooterDataProvider,
 } from "@earendil-works/pi-coding-agent";
-import { basename } from "node:path";
 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_CARD,
   BG_HDR,
   FG_ACC,
   FG_BRIGHT,
@@ -17,7 +15,6 @@ import {
   FG_FAINT,
   FG_INFO,
   FG_MID,
-  FG_NORM,
   FG_OK,
   FG_WARN,
   RST,
@@ -26,131 +23,139 @@ import {
   formatCwd,
   formatDuration,
   formatTokens,
-  progressBar,
   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;
 };
 
-let usageCache: { key: string; usage: Usage } | 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 && 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 = { key, usage };
-  return usage;
 }
 
-function dockHeader(width: number, title: string): string {
-  const pad = " ";
-  const ruleWidth = Math.max(0, width - visibleWidth(pad) - visibleWidth(title) - 1);
-  return fillRow(`${pad}${FG_FAINT}${title}${RST} ${FG_FAINT}${"─".repeat(ruleWidth)}${RST}`, width, BG);
+function row(width: number, label: string, value: string, background = BG): string {
+  const prefix = ` ${FG_FAINT}${label}${RST} `;
+  return fillRow(`${prefix}${truncateToWidth(value, Math.max(0, width - visibleWidth(prefix)), "…")}`, width, background);
 }
 
-function dockRow(width: number, label: string, value: string): string {
-  const pad = " ";
-  const labelWidth = 5;
-  const maxValueWidth = Math.max(0, width - visibleWidth(pad) - labelWidth - 1);
-  const clipped = truncateToWidth(value, maxValueWidth, "…");
-  return fillRow(`${pad}${FG_FAINT}${label.padEnd(labelWidth)}${RST} ${clipped}`, width, BG_CARD);
-}
-
-function goalStatusGlyph(goal: ThreadGoal): { icon: string; color: string; label: string } {
+function goalStatus(goal: ThreadGoal): { icon: string; color: string; label: string } {
   switch (goal.status) {
-    case "active": return { icon: "◉", color: FG_ACC, label: "active" };
+    case "active": return { icon: "●", color: FG_ACC, label: "active" };
     case "paused": return { icon: "○", color: FG_DIM, label: "paused" };
     case "budgetLimited": return { icon: "▲", color: FG_WARN, label: "budget" };
     case "complete": return { icon: "✓", color: FG_OK, label: "done" };
   }
 }
 
-function renderGoalCard(width: number, goal: ThreadGoal): string[] {
-  const glyph = goalStatusGlyph(goal);
-  const rows = [dockHeader(width, "goal")];
+function renderGoal(width: number, goal: ThreadGoal): string[] {
+  const status = goalStatus(goal);
+  const budget = goal.tokenBudget
+    ? `${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;
+}
 
-  const indent = "   ";
-  const wrapped = wrapText(goal.objective, Math.max(1, width - 4));
-  const shown = wrapped.slice(0, 2);
-  rows.push(fillRow(` ${glyph.color}${glyph.icon}${RST} ${shown[0] ? `${FG_BRIGHT}${shown[0]}${RST}` : ""}`, width, BG_CARD));
-  if (shown[1]) rows.push(fillRow(`${indent}${FG_NORM}${shown[1]}${RST}`, width, BG_CARD));
-  if (wrapped.length > 2) rows.push(fillRow(`${indent}${FG_FAINT}…+${wrapped.length - 2} lines${RST}`, width, BG_CARD));
+function renderWorkspace(width: number, ctx: ExtensionContext, footerData: ReadonlyFooterDataProvider | null): string {
+  const branch = footerData?.getGitBranch();
+  const sessionName = ctx.sessionManager.getSessionName();
+  const parts = [
+    `${FG_BRIGHT}${formatCwd(ctx.sessionManager.getCwd())}${RST}`,
+    branch ? `${FG_INFO}${branch}${RST}` : undefined,
+    sessionName ? `${FG_MID}${sessionName}${RST}` : undefined,
+  ].filter(Boolean).join(` ${FG_FAINT}·${RST} `);
+  return row(width, "cwd", parts);
+}
 
-  const budget = goal.tokenBudget
-    ? `${formatTokens(goal.tokensUsed)}/${formatTokens(goal.tokenBudget)}`
-    : `${formatTokens(goal.tokensUsed)}/∞`;
-  const percent = goal.tokenBudget ? (goal.tokensUsed / goal.tokenBudget) * 100 : null;
-  const overBudget = percent !== null && percent > 100;
-  const budgetColor = overBudget ? FG_ERR : glyph.color;
-  rows.push(fillRow(
-    ` ${budgetColor}${budget}${RST} ${progressBar(percent)} ${glyph.color}${glyph.label}${RST} ${FG_FAINT}·${RST} ${FG_MID}${formatDuration(goal.activeSeconds)}${RST}`,
-    width,
-    BG_CARD,
-  ));
-  return rows;
+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 renderSessRow(width: number, ctx: ExtensionContext, cmux: CmuxContext | null): string {
-  const sessionId = ctx.sessionManager.getSessionId();
-  const shortId = sessionId.replace(/-/g, "").slice(-8);
-  let value: string;
-  if (cmux) {
-    const surfacePart = cmux.surfaceRef ? ` ${FG_FAINT}·${RST} ${FG_FAINT}${cmux.surfaceRef}${RST}` : "";
-    const budget = width - 7 - visibleWidth(surfacePart);
-    const name = cmux.workspaceTitle
-      ? truncateToWidth(cmux.workspaceTitle, budget, "…")
-      : cmux.workspaceRef ?? "";
-    value = `${FG_BRIGHT}${name}${RST}${surfacePart}`;
-  } else {
-    const sessionFile = ctx.sessionManager.getSessionFile();
-    value = [
-      `${FG_INFO}#${shortId}${RST}`,
-      sessionFile ? `${FG_FAINT}${basename(sessionFile)}${RST}` : undefined,
-    ].filter(Boolean).join(` ${FG_FAINT}·${RST} `);
+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]);
   }
-  return dockRow(width, "sess", value);
+  return valid.sort(([a], [b]) => a.localeCompare(b)).map(([, text]) => text);
 }
 
 export function renderStatusDock(
@@ -160,67 +165,33 @@ export function renderStatusDock(
   thinkingLevel: string,
   focused: boolean,
   getCmuxContext: () => CmuxContext | null,
+  maxRows = 4,
 ): string[] {
+  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(...renderGoalCard(width, goal));
-
-  rows.push(fillRow(" ", width, BG), dockHeader(width, "runtime"));
-  const branch = footerData?.getGitBranch();
-  const sessionName = ctx.sessionManager.getSessionName();
-  const workspace = [
-    `${FG_BRIGHT}${formatCwd(ctx.sessionManager.getCwd())}${RST}`,
-    branch ? `${FG_INFO}${branch}${RST}` : undefined,
-    sessionName ? `${FG_MID}${sessionName}${RST}` : undefined,
-  ].filter(Boolean).join(` ${FG_FAINT}•${RST} `);
-  rows.push(dockRow(width, "cwd", workspace));
-  rows.push(renderSessRow(width, ctx, getCmuxContext()));
-
-  const model = ctx.model;
-  if (model) {
-    const provider = footerData && footerData.getAvailableProviderCount() > 1
-      ? `${FG_FAINT}${model.provider}${RST} `
-      : "";
-    const thinking = model.reasoning ? ` ${FG_FAINT}•${RST} ${FG_MID}${thinkingLevel}${RST}` : "";
-    rows.push(dockRow(width, "model", `${provider}${FG_BRIGHT}${model.id}${RST}${thinking}`));
-  }
-
-  const contextDisplay = usage.contextPercent === null
-    ? `?/${formatTokens(usage.contextWindow)}`
-    : `${usage.contextPercent.toFixed(1)}%/${formatTokens(usage.contextWindow)}`;
-  const usingSubscription = model ? Boolean((ctx.modelRegistry as any).isUsingOAuth?.(model)) : false;
-  const tokenParts = [
-    usage.input ? `↑${formatTokens(usage.input)}` : undefined,
-    usage.output ? `↓${formatTokens(usage.output)}` : undefined,
-    usage.cacheRead ? `R${formatTokens(usage.cacheRead)}` : undefined,
-    usage.cacheWrite ? `W${formatTokens(usage.cacheWrite)}` : undefined,
-    usage.latestCacheHitRate !== undefined && (usage.cacheRead || usage.cacheWrite)
-      ? `CH${usage.latestCacheHitRate.toFixed(1)}%`
-      : undefined,
-  ].filter(Boolean).join(" ");
-  rows.push(dockRow(
-    width,
-    "ctx",
-    `${contextColor(usage.contextPercent)}${contextDisplay}${RST} ${progressBar(usage.contextPercent)}`,
-  ));
-  rows.push(dockRow(
-    width,
-    "use",
-    `${FG_BRIGHT}$${usage.cost.toFixed(3)}${usingSubscription ? " sub" : ""}${RST}` +
-      (tokenParts ? ` ${FG_FAINT}•${RST} ${FG_MID}${tokenParts}${RST}` : ` ${FG_FAINT}• no token usage${RST}`),
-  ));
-
-  const statuses = footerData ? [...footerData.getExtensionStatuses().entries()].sort(([a], [b]) => a.localeCompare(b)) : [];
-  for (const [, text] of statuses.slice(0, 2)) {
-    rows.push(dockRow(width, "stat", `${FG_INFO}•${RST} ${FG_MID}${sanitizeStatusText(text)}${RST}`));
+  // 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(fillRow(" ", width, BG));
-  const hint = focused
-    ? `${FG_DIM}↑↓${RST} ${FG_MID}nav${RST} ${FG_FAINT}·${RST} ${FG_DIM}Enter${RST} ${FG_MID}expand${RST} ${FG_FAINT}·${RST} ${FG_DIM}c${RST} ${FG_MID}copy${RST} ${FG_FAINT}·${RST} ${FG_DIM}Esc${RST} ${FG_MID}done${RST}`
-    : `${FG_DIM}Ctrl+Shift+H${RST} ${FG_MID}focus${RST}`;
-  rows.push(fillRow(` ${hint}`, width, BG_HDR));
-  return rows;
+  return [...rows.slice(0, limit - 1), hint];
 }