pi-message-sidebar 1.2.0 → 1.4.0

package/message-sidebar.ts

@@ -125,8 +125,8 @@ export default function messageSidebar(pi: ExtensionAPI): void {
 
     ctx.ui.onTerminalInput((data) => {
       // Slash commands such as /goal mutate session entries without firing
-      // turn events; a coalesced refresh on any keystroke keeps the dock live.
-      scheduleRefresh();
+      // turn events. Refresh on submit, not every keystroke.
+      if (matchesKey(data, "return") || matchesKey(data, "enter")) scheduleRefresh();
       if (tui && !isSidebarVisible(tui.terminal.columns) && sidebar?.isFocused()) {
         sidebar.setFocused(false);
         tui.requestRender();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-message-sidebar",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Persistent responsive message history sidebar for Pi",
   "keywords": [
     "pi-package",

package/src/goal.ts

@@ -15,22 +15,32 @@ type BranchEntry = { type?: string; customType?: string; data?: unknown };
 
 const GOAL_ENTRY_TYPE = "pi-codex-goal";
 
-function isThreadGoal(value: unknown): value is ThreadGoal {
-  const goal = value as ThreadGoal | null;
+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 (
-    !!goal &&
-    typeof goal === "object" &&
     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.tokensUsed === "number" &&
-    typeof goal.activeSeconds === "number" &&
     typeof goal.createdAt === "number" &&
-    typeof goal.updatedAt === "number"
+    typeof goal.updatedAt === "number" &&
+    typeof usage?.tokensUsed === "number" &&
+    typeof usage.activeSeconds === "number"
   );
 }
 
+type RawGoal = Omit<ThreadGoal, "tokensUsed" | "activeSeconds"> & {
+  usage: { tokensUsed: number; activeSeconds: number };
+};
+
 /**
  * Reconstructs the current thread goal from pi-codex-goal session entries.
  * Mirrors reconstructGoal() from pi-codex-goal dist/state.js (schema version 1):
@@ -42,35 +52,55 @@ export function readThreadGoal(entries: Iterable<BranchEntry>): ThreadGoal | nul
   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.kind === "clear") {
+    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")) {
       goal = null;
-    } else if (data.kind === "set" && isThreadGoal(data.goal)) {
-      goal = { ...(data.goal as ThreadGoal) };
-    } else if (data.kind === "usage" && goal) {
+    } 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" && data.status === "active") 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;
-      goal = { ...goal, status: data.status as ThreadGoal["status"], tokensUsed: usage.tokensUsed, activeSeconds: usage.activeSeconds, updatedAt } as ThreadGoal;
+      const current: ThreadGoal = goal;
+      goal = {
+        ...current,
+        status,
+        tokensUsed: usage.tokensUsed,
+        activeSeconds: usage.activeSeconds,
+        updatedAt,
+      };
     }
   }
   return goal;
 }
 
-type GoalCache = { key: string; goal: ThreadGoal | null };
-let cache: GoalCache | null = null;
+type GoalCache = { branch: object; key: string; goal: ThreadGoal | null };
+const cache = new WeakMap<ExtensionContext, GoalCache>();
 
 /** Cached readThreadGoal over the current session branch. */
 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 ?? ""}`;
-  if (cache && cache.key === key) return cache.goal;
+  const previous = cache.get(ctx);
+  if (previous?.branch === branch && previous.key === key) return previous.goal;
   const goal = readThreadGoal(branch);
-  cache = { key, goal };
+  cache.set(ctx, { branch, key, goal });
   return goal;
 }

package/src/sidebar-component.ts

@@ -6,7 +6,7 @@ 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 { SIDEBAR_WIDTH } from "./constants.ts";
 import type { CmuxContext } from "./cmux.ts";
 import { readSessionGoal } from "./goal.ts";
 import { assertLinesFit } from "./layout.ts";
@@ -42,10 +42,13 @@ type SidebarOptions = {
   messages: UserMessage[];
 };
 
-export class SidebarComponent {
+type MessageRows = { index: number; lines: string[] };
+
+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;
@@ -54,10 +57,13 @@ export class SidebarComponent {
 
   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;
@@ -76,8 +82,17 @@ export class SidebarComponent {
   }
 
   updateMessages(messages: UserMessage[]): void {
+    const previousId = this.selectedId;
     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);
+
+    if (this.followTail || !previousId || !ids.has(previousId)) {
+      this.selectedId = messages.at(-1)?.id ?? null;
+      this.followTail = true;
+    } else {
+      this.selectedId = previousId;
+    }
     this.refresh();
   }
 
@@ -89,32 +104,37 @@ 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;
     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 renderedHeader = this.renderHeader(safeWidth);
+    const header = renderedHeader.slice(0, Math.min(renderedHeader.length, targetHeight));
+    const maxDockRows = Math.max(0, targetHeight - header.length);
     const dock = renderStatusDock(
       safeWidth,
       this.options.ctx,
@@ -122,11 +142,14 @@ export class SidebarComponent {
       this.options.getThinkingLevel(),
       this.focused,
       this.options.getCmuxContext,
+      maxDockRows,
     );
-    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,38 +161,74 @@ 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 focus = this.focused ? `${FG_ACC}focused${RST}` : `${FG_DIM}passive${RST}`;
+    const tail = this.followTail ? `${FG_DIM}tail${RST}` : `${FG_MID}browsing${RST}`;
     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}${this.messages.length}${RST}`, width, BG_HDR),
+      fillRow(` ${focus}${FG_FAINT} · ${RST}${tail}`, width, BG),
     ];
   }
 
-  private renderMessages(width: number): string[] {
-    const result: string[] = [];
+  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);
+    }
+
+    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) });
+    }
+
+    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);
+    }
+
+    let lines = this.composeGroups(groups, width, true);
+    if (lines.length > height) lines = this.composeGroups(groups, width, false);
+    return this.padTop(lines, height, width);
+  }
+
+  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 index of this.visibleIndices()) {
-      if (index > previous + 1 && previous >= 0) {
-        result.push(fillRow(`     ${FG_DIM}··· ${index - previous - 1} more ···${RST}`, width, BG));
+    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));
       }
-      result.push(...this.renderMessage(index, width));
-      previous = index;
+      lines.push(...group.lines);
+      previous = group.index;
     }
-    return result;
+    return lines;
+  }
+
+  private padTop(lines: string[], height: number, width: number): string[] {
+    const padding = Array.from({ length: Math.max(0, height - lines.length) }, () => fillRow(" ", width, BG));
+    return [...padding, ...lines];
   }
 
-  private renderMessage(index: number, width: number): string[] {
+  private renderMessage(index: number, width: number, maxRows = 10): 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 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)) {
+    if (!this.expandedIds.has(message.id) || maxRows <= 1) {
       const prefix = ` ${arrow}${number} ${time} `;
       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)];
@@ -177,25 +236,22 @@ export class SidebarComponent {
 
     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 - 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));
     }
-    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.messages.findIndex((message) => message.id === this.selectedId);
+    return index >= 0 ? index : this.messages.length - 1;
   }
 
   private signature(width: number, height: number): string {
@@ -207,13 +263,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,
+      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 {
   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,9 +23,7 @@ import {
   formatCwd,
   formatDuration,
   formatTokens,
-  progressBar,
   sanitizeStatusText,
-  wrapText,
 } from "./style.ts";
 
 type Usage = {
@@ -42,13 +37,14 @@ type Usage = {
   contextWindow: number;
 };
 
-let usageCache: { key: string; usage: Usage } | null = null;
+type UsageCache = { owner: object; key: string; usage: Usage };
+let usageCache: UsageCache | null = null;
 
 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;
+  if (usageCache?.owner === ctx && usageCache.key === key) return usageCache.usage;
 
   let input = 0;
   let output = 0;
@@ -56,7 +52,6 @@ function computeUsage(ctx: ExtensionContext): Usage {
   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 ?? {};
@@ -80,77 +75,71 @@ function computeUsage(ctx: ExtensionContext): Usage {
     contextPercent: context?.percent ?? null,
     contextWindow: context?.contextWindow ?? ctx.model?.contextWindow ?? 0,
   };
-  usageCache = { key, usage };
+  usageCache = { owner: ctx, 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 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 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 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")];
-
-  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 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 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;
+  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 renderSessRow(width: number, ctx: ExtensionContext, cmux: CmuxContext | null): string {
-  const sessionId = ctx.sessionManager.getSessionId();
-  const shortId = sessionId.replace(/-/g, "").slice(-8);
-  let value: string;
+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}`);
+}
+
+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);
+}
+
+function renderSession(width: number, ctx: ExtensionContext, cmux: CmuxContext | null): 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} `);
+    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}`);
   }
-  return dockRow(width, "sess", value);
+  const shortId = ctx.sessionManager.getSessionId().replace(/-/g, "").slice(-8);
+  return row(width, "sess", `${FG_INFO}#${shortId}${RST}`);
 }
 
 export function renderStatusDock(
@@ -160,67 +149,31 @@ export function renderStatusDock(
   thinkingLevel: string,
   focused: boolean,
   getCmuxContext: () => CmuxContext | null,
+  maxRows = Number.MAX_SAFE_INTEGER,
 ): string[] {
+  if (maxRows <= 0) return [];
+  const rowLimit = Math.max(1, Math.floor(maxRows));
   const usage = computeUsage(ctx);
   const goal = readSessionGoal(ctx);
   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()));
+  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
-      ? `${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 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}`));
   }
-
-  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}`),
-  ));
+  rows.push(renderContextRow(width, usage));
 
   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}`));
-  }
+  if (statuses[0]) rows.push(row(width, "stat", `${FG_INFO}•${RST} ${FG_MID}${sanitizeStatusText(statuses[0][1])}${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;
+  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)!];
 }