@oh-my-pi/pi-coding-agent 16.2.2 → 16.2.4

package/src/config/settings-schema.ts

@@ -600,6 +600,17 @@ export const SETTINGS_SCHEMA = {
 				"Use the terminal's default background for the status line instead of the theme's `statusLineBg`. Powerline end caps are dropped because they need a contrasting fill to bridge into the surrounding terminal.",
 		},
 	},
+	"statusLine.compactThinkingLevel": {
+		type: "boolean",
+		default: false,
+		ui: {
+			tab: "appearance",
+			group: "Status Line",
+			label: "Compact Thinking Level",
+			description:
+				"Show the thinking level as a single icon on the model name instead of a separate ` · <level>` suffix.",
+		},
+	},
 	"tools.artifactSpillThreshold": {
 		type: "number",
 		default: 50,
@@ -1633,6 +1644,35 @@ export const SETTINGS_SCHEMA = {
 		},
 	},
 
+	"recap.enabled": {
+		type: "boolean",
+		default: true,
+		ui: {
+			tab: "interaction",
+			group: "Notifications",
+			label: "Idle Recap",
+			description: "Generate a brief LLM recap of where things stand after the terminal has been idle",
+		},
+	},
+
+	"recap.idleSeconds": {
+		type: "number",
+		default: 240,
+		ui: {
+			tab: "interaction",
+			group: "Notifications",
+			label: "Idle Recap Delay",
+			description: "Seconds to wait while idle before showing the recap",
+			options: [
+				{ value: "60", label: "1 minute" },
+				{ value: "120", label: "2 minutes" },
+				{ value: "240", label: "4 minutes" },
+				{ value: "300", label: "5 minutes" },
+				{ value: "600", label: "10 minutes" },
+			],
+		},
+	},
+
 	// Collab
 	"collab.relayUrl": {
 		type: "string",
@@ -1889,6 +1929,17 @@ export const SETTINGS_SCHEMA = {
 		},
 	},
 
+	"compaction.remoteStreamingV2Enabled": {
+		type: "boolean",
+		default: true,
+		ui: {
+			tab: "context",
+			group: "Compaction",
+			label: "Remote Compaction V2",
+			description: "Use Responses streaming compaction for compatible remote compaction models",
+		},
+	},
+
 	"compaction.reserveTokens": { type: "number", default: 16384 },
 
 	"compaction.keepRecentTokens": { type: "number", default: 20000 },
@@ -1897,6 +1948,8 @@ export const SETTINGS_SCHEMA = {
 
 	"compaction.remoteEndpoint": { type: "string", default: undefined },
 
+	"compaction.v2RetainedMessageBudget": { type: "number", default: 64000 },
+
 	// Idle compaction
 	"compaction.idleEnabled": {
 		type: "boolean",
@@ -3796,6 +3849,17 @@ export const SETTINGS_SCHEMA = {
 		},
 	},
 
+	"title.refreshOnReplan": {
+		type: "boolean",
+		default: true,
+		ui: {
+			tab: "tasks",
+			group: "Modes",
+			label: "Refresh Title on Replan",
+			description: "Refresh generated session titles after todo init replans unless the title was set by the user",
+		},
+	},
+
 	// Delegation
 	"task.isolation.mode": {
 		type: "enum",
@@ -4850,6 +4914,8 @@ export interface CompactionSettings {
 	autoContinue: boolean;
 	remoteEnabled: boolean;
 	remoteEndpoint: string | undefined;
+	remoteStreamingV2Enabled: boolean;
+	v2RetainedMessageBudget: number;
 	idleEnabled: boolean;
 	idleThresholdTokens: number;
 	idleTimeoutSeconds: number;
@@ -4857,6 +4923,15 @@ export interface CompactionSettings {
 	dropUseless: boolean;
 }
 
+export interface RecapSettings {
+	enabled: boolean;
+	idleSeconds: number;
+}
+
+export interface TitleSettings {
+	refreshOnReplan: boolean;
+}
+
 export interface ContextPromotionSettings {
 	enabled: boolean;
 }
@@ -5002,6 +5077,8 @@ export interface GcSettings {
 /** Map group prefix -> typed settings interface */
 export interface GroupTypeMap {
 	compaction: CompactionSettings;
+	recap: RecapSettings;
+	title: TitleSettings;
 	contextPromotion: ContextPromotionSettings;
 	retry: RetrySettings;
 	memories: MemoriesSettings;

package/src/debug/index.ts

@@ -10,6 +10,7 @@ import {
 	Container,
 	isNotificationSuppressed,
 	Loader,
+	type OverlayHandle,
 	type SelectItem,
 	SelectList,
 	Spacer,
@@ -327,18 +328,29 @@ export class DebugSelectorComponent extends Container {
 				return;
 			}
 
+			let overlay: OverlayHandle | undefined;
+			const close = (): void => {
+				overlay?.hide();
+				overlay = undefined;
+				void this.ctx.showDebugSelector();
+			};
 			const viewer = new DebugLogViewerComponent({
 				logs,
 				terminalRows: this.ctx.ui.terminal.rows,
-				onExit: () => this.ctx.showDebugSelector(),
+				onExit: close,
 				onStatus: message => this.ctx.showStatus(message, { dim: true }),
 				onError: message => this.ctx.showError(message),
 				onUpdate: () => this.ctx.ui.requestRender(),
 				logSource,
 			});
 
-			this.ctx.editorContainer.clear();
-			this.ctx.editorContainer.addChild(viewer);
+			overlay = this.ctx.ui.showOverlay(viewer, {
+				anchor: "top-left",
+				width: "100%",
+				maxHeight: "100%",
+				margin: 0,
+				fullscreen: true,
+			});
 			this.ctx.ui.setFocus(viewer);
 		} catch (err) {
 			this.ctx.showError(`Failed to read logs: ${err instanceof Error ? err.message : String(err)}`);
@@ -348,16 +360,29 @@ export class DebugSelectorComponent extends Container {
 	}
 
 	async #handleViewRawSse(): Promise<void> {
-		const viewer = new RawSseViewerComponent({
+		let overlay: OverlayHandle | undefined;
+		let viewer: RawSseViewerComponent | undefined;
+		const close = (): void => {
+			viewer?.dispose();
+			overlay?.hide();
+			overlay = undefined;
+			void this.ctx.showDebugSelector();
+		};
+		viewer = new RawSseViewerComponent({
 			buffer: resolveRawSseDebugBuffer(this.ctx.session),
 			terminalRows: this.ctx.ui.terminal.rows,
-			onExit: () => this.ctx.showDebugSelector(),
+			onExit: close,
 			onStatus: message => this.ctx.showStatus(message, { dim: true }),
 			onUpdate: () => this.ctx.ui.requestRender(),
 		});
 
-		this.ctx.editorContainer.clear();
-		this.ctx.editorContainer.addChild(viewer);
+		overlay = this.ctx.ui.showOverlay(viewer, {
+			anchor: "top-left",
+			width: "100%",
+			maxHeight: "100%",
+			margin: 0,
+			fullscreen: true,
+		});
 		this.ctx.ui.setFocus(viewer);
 		this.ctx.ui.requestRender();
 	}

package/src/debug/log-viewer.ts

@@ -3,11 +3,13 @@ import {
 	extractPrintableText,
 	matchesKey,
 	padding,
+	parseSgrMouse,
 	replaceTabs,
 	truncateToWidth,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
 import { sanitizeText } from "@oh-my-pi/pi-utils";
+import { bottomBorder, divider, row, topBorder } from "../modes/components/overlay-box";
 import { theme } from "../modes/theme/theme";
 import { copyToClipboard } from "../utils/clipboard";
 import {
@@ -23,6 +25,8 @@ export const LOAD_OLDER_LABEL = "### MOVE UP TO LOAD MORE...";
 
 const INITIAL_LOG_CHUNK = 50;
 const LOAD_OLDER_CHUNK = 50;
+const MIN_LOG_VIEWER_WIDTH = 48;
+const LOG_VIEWER_CHROME_LINES = 8;
 
 type LogEntry = {
 	rawLine: string;
@@ -184,6 +188,31 @@ export class DebugLogViewerModel {
 		}
 	}
 
+	moveCursorToRow(rowIndex: number, extendSelection: boolean): boolean {
+		const selectableIndex = this.#selectableRowIndices.indexOf(rowIndex);
+		if (selectableIndex < 0) {
+			return false;
+		}
+
+		if (extendSelection && this.#selectionAnchorSelectableIndex === undefined) {
+			const row = this.#getCursorRow();
+			if (row?.kind === "log") {
+				this.#selectionAnchorSelectableIndex = this.#cursorSelectableIndex;
+			}
+		}
+
+		this.#cursorSelectableIndex = selectableIndex;
+
+		if (!extendSelection) {
+			this.#selectionAnchorSelectableIndex = undefined;
+		}
+
+		if (this.#getCursorRow()?.kind !== "log" && !extendSelection) {
+			this.#selectionAnchorSelectableIndex = undefined;
+		}
+		return true;
+	}
+
 	getSelectedLogIndices(): number[] {
 		if (this.#selectableRowIndices.length === 0) {
 			return [];
@@ -484,6 +513,9 @@ export class DebugLogViewerComponent implements Component {
 	#scrollRowOffset = 0;
 	#statusMessage: string | undefined;
 	#loadingOlder = false;
+	#bodyRowStart = 0;
+	#bodyRowCount = 0;
+	#bodyLineToRowIndex: Array<number | undefined> = [];
 
 	constructor(options: DebugLogViewerComponentOptions) {
 		this.#logSource = options.logSource;
@@ -501,6 +533,10 @@ export class DebugLogViewerComponent implements Component {
 	}
 
 	handleInput(keyData: string): void {
+		if (keyData.startsWith("\x1b[<") && this.#handleMouse(keyData)) {
+			return;
+		}
+
 		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
 			this.#onExit();
 			return;
@@ -598,59 +634,99 @@ export class DebugLogViewerComponent implements Component {
 		}
 	}
 
+	#handleMouse(keyData: string): boolean {
+		const event = parseSgrMouse(keyData);
+		if (!event) return false;
+
+		const overBody = event.row >= this.#bodyRowStart && event.row < this.#bodyRowStart + this.#bodyRowCount;
+		if (event.wheel !== null && overBody) {
+			this.#statusMessage = undefined;
+			const maxOffset = Math.max(0, this.#model.rows.length - this.#bodyHeight());
+			this.#scrollRowOffset = Math.max(0, Math.min(maxOffset, this.#scrollRowOffset + event.wheel * 3));
+			this.#onUpdate?.();
+			return true;
+		}
+
+		if (!event.leftClick || !overBody) return false;
+		const rowIndex = this.#bodyLineToRowIndex[event.row - this.#bodyRowStart];
+		if (rowIndex === undefined) return false;
+
+		const target = this.#model.rows[rowIndex];
+		if (!target || target.kind === "warning") return false;
+		this.#statusMessage = undefined;
+		this.#model.moveCursorToRow(rowIndex, false);
+		if (target.kind === "load-older") {
+			void this.#handleLoadOlder();
+			return true;
+		}
+
+		if (this.#model.isExpanded(target.logIndex)) {
+			this.#model.collapseSelected();
+		} else {
+			this.#model.expandSelected();
+		}
+		this.#ensureCursorVisible();
+		this.#onUpdate?.();
+		return true;
+	}
+
 	invalidate(): void {
 		// no cached child state
 	}
 
 	render(width: number): readonly string[] {
-		this.#lastRenderWidth = Math.max(20, width);
+		this.#lastRenderWidth = Math.max(MIN_LOG_VIEWER_WIDTH, width);
 		this.#ensureCursorVisible();
 
-		const innerWidth = Math.max(1, this.#lastRenderWidth - 2);
+		const contentWidth = Math.max(1, this.#lastRenderWidth - 4);
 		const bodyHeight = this.#bodyHeight();
 
-		const rows = this.#renderRows(innerWidth);
-		const visibleBodyLines = this.#renderVisibleBodyLines(rows, innerWidth, bodyHeight);
+		const rows = this.#renderRows(contentWidth);
+		this.#bodyRowStart = 4;
+		this.#bodyRowCount = bodyHeight;
+		const visibleBodyLines = this.#renderVisibleBodyLines(rows, bodyHeight);
 
 		return [
-			this.#frameTop(innerWidth),
-			this.#frameLine(this.#summaryText(), innerWidth),
-			this.#frameSeparator(innerWidth),
-			this.#frameLine(this.#filterText(), innerWidth),
-			this.#frameSeparator(innerWidth),
+			topBorder(this.#lastRenderWidth, "Recent Logs"),
+			row(this.#summaryText(), this.#lastRenderWidth),
+			row(this.#filterText(), this.#lastRenderWidth),
+			divider(this.#lastRenderWidth),
 			...visibleBodyLines,
-			this.#frameLine(this.#statusText(), innerWidth),
-			this.#frameBottom(innerWidth),
+			divider(this.#lastRenderWidth),
+			row(this.#statusText(), this.#lastRenderWidth),
+			row(theme.fg("dim", this.#controlsText()), this.#lastRenderWidth),
+			bottomBorder(this.#lastRenderWidth),
 		];
 	}
 
 	#summaryText(): string {
-		return ` # ${this.#model.visibleLogCount}/${this.#model.logCount} logs | ${this.#controlsText()}`;
+		const selected = this.#model.getSelectedCount();
+		const expanded = this.#model.expandedCount;
+		return `${theme.fg("muted", "showing")} ${theme.fg("accent", `${this.#model.visibleLogCount}/${this.#model.logCount}`)}  ${theme.fg("muted", "selected")} ${theme.fg(selected > 0 ? "accent" : "muted", String(selected))}  ${theme.fg("muted", "expanded")} ${theme.fg(expanded > 0 ? "accent" : "muted", String(expanded))}`;
 	}
 
 	#controlsText(): string {
-		return "Esc: back  Ctrl+C: copy  Up/Down: move  Shift+Up/Down: select range  Left/Right: collapse/expand  Ctrl+A: select all  Ctrl+O: load older  Ctrl+P: pid filter";
+		return "Esc close · Ctrl+C copy · ↑/↓/wheel move · click toggle · Shift+↑/↓ select · ←/→ collapse/expand · Ctrl+A all · Ctrl+O older · Ctrl+P pid";
 	}
 
 	#filterText(): string {
 		const sanitized = replaceTabs(sanitizeText(this.#model.filterQuery));
-		const query = sanitized.length === 0 ? "" : theme.fg("accent", sanitized);
+		const query = sanitized.length === 0 ? theme.fg("muted", "type to filter") : theme.fg("accent", sanitized);
 		const pidStatus = this.#model.isProcessFilterEnabled()
-			? theme.fg("success", "pid:on")
-			: theme.fg("muted", "pid:off");
-		return ` filter: ${query}  ${pidStatus}`;
+			? theme.fg("success", "pid on")
+			: theme.fg("muted", "pid off");
+		const loading = this.#loadingOlder ? `  ${theme.fg("warning", "loading older…")}` : "";
+		return `${theme.fg("muted", "filter")} ${query}  ${pidStatus}${loading}`;
 	}
 
 	#statusText(): string {
-		const base = ` Selected: ${this.#model.getSelectedCount()}  Expanded: ${this.#model.expandedCount}`;
-		if (this.#statusMessage) {
-			return `${base}  ${this.#statusMessage}`;
-		}
-		return base;
+		return this.#statusMessage
+			? theme.fg("success", this.#statusMessage)
+			: theme.fg("dim", "Enter loads older when highlighted; printable keys update filter");
 	}
 
 	#bodyHeight(): number {
-		return Math.max(3, this.#terminalRows - 8);
+		return Math.max(3, (process.stdout.rows || this.#terminalRows || 24) - LOG_VIEWER_CHROME_LINES);
 	}
 
 	async #handleLoadOlder(additionalCount: number = LOAD_OLDER_CHUNK): Promise<void> {
@@ -780,26 +856,25 @@ export class DebugLogViewerComponent implements Component {
 		return rendered;
 	}
 
-	#renderVisibleBodyLines(
-		rows: Array<{ lines: string[]; rowIndex: number }>,
-		innerWidth: number,
-		bodyHeight: number,
-	): string[] {
+	#renderVisibleBodyLines(rows: Array<{ lines: string[]; rowIndex: number }>, bodyHeight: number): string[] {
+		this.#bodyLineToRowIndex = [];
 		const lines: string[] = [];
 		if (rows.length === 0) {
-			lines.push(this.#frameLine(theme.fg("muted", "no matches"), innerWidth));
+			this.#bodyLineToRowIndex.push(undefined);
+			lines.push(row(theme.fg("muted", "no matches"), this.#lastRenderWidth));
 		}
 		for (let i = this.#scrollRowOffset; i < rows.length; i++) {
-			const row = rows[i];
-			if (!row) {
+			const renderedRow = rows[i];
+			if (!renderedRow) {
 				continue;
 			}
 
-			for (const line of row.lines) {
+			for (const line of renderedRow.lines) {
 				if (lines.length >= bodyHeight) {
 					break;
 				}
-				lines.push(this.#frameLine(line, innerWidth));
+				this.#bodyLineToRowIndex.push(renderedRow.rowIndex);
+				lines.push(row(line, this.#lastRenderWidth));
 			}
 
 			if (lines.length >= bodyHeight) {
@@ -808,7 +883,8 @@ export class DebugLogViewerComponent implements Component {
 		}
 
 		while (lines.length < bodyHeight) {
-			lines.push(this.#frameLine("", innerWidth));
+			this.#bodyLineToRowIndex.push(undefined);
+			lines.push(row("", this.#lastRenderWidth));
 		}
 
 		return lines;
@@ -840,7 +916,7 @@ export class DebugLogViewerComponent implements Component {
 			return;
 		}
 		const bodyHeight = Math.max(1, this.#bodyHeight());
-		const innerWidth = Math.max(1, this.#lastRenderWidth - 2);
+		const innerWidth = Math.max(1, this.#lastRenderWidth - 4);
 
 		// Scroll up: cursor is above viewport
 		if (cursorRowIndex < this.#scrollRowOffset) {
@@ -865,24 +941,6 @@ export class DebugLogViewerComponent implements Component {
 		}
 	}
 
-	#frameTop(innerWidth: number): string {
-		return `${theme.boxRound.topLeft}${theme.boxRound.horizontal.repeat(innerWidth)}${theme.boxRound.topRight}`;
-	}
-
-	#frameSeparator(innerWidth: number): string {
-		return `${theme.boxRound.teeRight}${theme.boxRound.horizontal.repeat(innerWidth)}${theme.boxRound.teeLeft}`;
-	}
-
-	#frameBottom(innerWidth: number): string {
-		return `${theme.boxRound.bottomLeft}${theme.boxRound.horizontal.repeat(innerWidth)}${theme.boxRound.bottomRight}`;
-	}
-
-	#frameLine(content: string, innerWidth: number): string {
-		const truncated = truncateToWidth(content, innerWidth);
-		const remaining = Math.max(0, innerWidth - visibleWidth(truncated));
-		return `${theme.boxRound.vertical}${truncated}${padding(remaining)}${theme.boxRound.vertical}`;
-	}
-
 	#copySelected() {
 		const selectedPayload = buildLogCopyPayload(this.#model.getSelectedRawLines());
 		const selected = selectedPayload.length === 0 ? [] : selectedPayload.split("\n");

package/src/debug/raw-sse.ts

@@ -1,13 +1,6 @@
-import {
-	type Component,
-	matchesKey,
-	padding,
-	replaceTabs,
-	ScrollView,
-	truncateToWidth,
-	visibleWidth,
-} from "@oh-my-pi/pi-tui";
+import { type Component, matchesKey, parseSgrMouse, replaceTabs, ScrollView, truncateToWidth } from "@oh-my-pi/pi-tui";
 import { sanitizeText } from "@oh-my-pi/pi-utils";
+import { bottomBorder, divider, row, topBorder } from "../modes/components/overlay-box";
 import { theme } from "../modes/theme/theme";
 import { copyToClipboard } from "../utils/clipboard";
 import {
@@ -17,8 +10,8 @@ import {
 	rawSseRecordLines,
 } from "./raw-sse-buffer";
 
-const MIN_VIEWER_WIDTH = 20;
-const VIEWER_FRAME_LINES = 5;
+const MIN_VIEWER_WIDTH = 40;
+const VIEWER_CHROME_LINES = 6;
 // `data:` lines below this width render fine on a single row; anything wider gets pretty-printed
 // across multiple `data:` lines so streamed JSON blobs stop getting clipped by `truncateToWidth`.
 const PRETTY_PRINT_DATA_THRESHOLD = 100;
@@ -79,6 +72,8 @@ export class RawSseViewerComponent implements Component {
 	#followTail = true;
 	#lastRenderWidth = MIN_VIEWER_WIDTH;
 	#statusMessage: string | undefined;
+	#bodyRowStart = 0;
+	#bodyRowCount = 0;
 	// Pretty-printed wire lines keyed by `record.sequence`. Pretty-printing is
 	// the JSON.parse + JSON.stringify per `data:` line, so we cache the result —
 	// the render path runs on every keypress and from `#maxScrollOffset()`.
@@ -98,9 +93,17 @@ export class RawSseViewerComponent implements Component {
 		});
 	}
 
+	dispose(): void {
+		this.#unsubscribe();
+	}
+
 	handleInput(keyData: string): void {
+		if (keyData.startsWith("\x1b[<") && this.#handleMouse(keyData)) {
+			return;
+		}
+
 		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
-			this.#unsubscribe();
+			this.dispose();
 			this.#onExit();
 			return;
 		}
@@ -145,15 +148,44 @@ export class RawSseViewerComponent implements Component {
 		}
 	}
 
+	#handleMouse(keyData: string): boolean {
+		const event = parseSgrMouse(keyData);
+		if (!event) return false;
+
+		const overBody = event.row >= this.#bodyRowStart && event.row < this.#bodyRowStart + this.#bodyRowCount;
+		if (event.wheel !== null && overBody) {
+			this.#followTail = false;
+			this.#scrollOffset = Math.max(0, Math.min(this.#maxScrollOffset(), this.#scrollOffset + event.wheel * 3));
+			this.#onUpdate?.();
+			return true;
+		}
+
+		if (!event.leftClick) return false;
+		if (event.row === 1) {
+			this.#followTail = !this.#followTail;
+			this.#followIfNeeded();
+			this.#onUpdate?.();
+			return true;
+		}
+		if (overBody) {
+			this.#followTail = false;
+			const clickedOffset = this.#scrollOffset + event.row - this.#bodyRowStart;
+			this.#scrollOffset = Math.max(0, Math.min(this.#maxScrollOffset(), clickedOffset));
+			this.#onUpdate?.();
+			return true;
+		}
+		return false;
+	}
+
 	invalidate(): void {}
 
 	render(width: number): readonly string[] {
 		this.#lastRenderWidth = Math.max(MIN_VIEWER_WIDTH, width);
 		this.#followIfNeeded();
 
-		const innerWidth = Math.max(1, this.#lastRenderWidth - 2);
+		const contentWidth = Math.max(1, this.#lastRenderWidth - 4);
 		const bodyHeight = this.#bodyHeight();
-		const rawLines = this.#renderRawLines(innerWidth);
+		const rawLines = this.#renderRawLines(contentWidth);
 		const sv = new ScrollView(rawLines.slice(this.#scrollOffset, this.#scrollOffset + bodyHeight), {
 			height: bodyHeight,
 			scrollbar: "auto",
@@ -161,15 +193,18 @@ export class RawSseViewerComponent implements Component {
 			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
 		});
 		sv.setScrollOffset(this.#scrollOffset);
-		const bodyRows = sv.render(innerWidth);
+		const bodyRows = sv.render(contentWidth);
+		this.#bodyRowStart = 3;
+		this.#bodyRowCount = bodyHeight;
 
 		return [
-			this.#frameTop(innerWidth),
-			this.#frameLine(this.#summaryText(), innerWidth),
-			this.#frameSeparator(innerWidth),
-			...bodyRows.map(line => this.#frameLine(line, innerWidth)),
-			this.#frameLine(this.#statusText(), innerWidth),
-			this.#frameBottom(innerWidth),
+			topBorder(this.#lastRenderWidth, "Raw Provider Stream"),
+			row(this.#summaryText(), this.#lastRenderWidth),
+			divider(this.#lastRenderWidth),
+			...bodyRows.map(line => row(line, this.#lastRenderWidth)),
+			divider(this.#lastRenderWidth),
+			row(this.#statusText(), this.#lastRenderWidth),
+			bottomBorder(this.#lastRenderWidth),
 		];
 	}
 
@@ -221,22 +256,25 @@ export class RawSseViewerComponent implements Component {
 			if (key < firstSequence) this.#prettyLinesCache.delete(key);
 		}
 	}
-
 	#summaryText(): string {
 		const snapshot = this.#buffer.snapshot();
-		const last = snapshot.lastUpdatedAt ? ` last=${formatRawSseIsoTime(snapshot.lastUpdatedAt)}` : "";
-		const follow = this.#followTail ? "follow:on" : "follow:off";
-		return ` # raw provider stream (SSE + WS) | events=${snapshot.totalEvents} records=${snapshot.records.length}${last} | ${follow} | Esc back Ctrl+C copy End follow`;
+		const last = snapshot.lastUpdatedAt
+			? `${theme.fg("muted", "last")} ${theme.fg("accent", formatRawSseIsoTime(snapshot.lastUpdatedAt))}`
+			: theme.fg("muted", "waiting for first frame");
+		const follow = this.#followTail ? theme.fg("success", "follow on") : theme.fg("warning", "follow off");
+		return `${theme.fg("muted", "events")} ${theme.fg("accent", String(snapshot.totalEvents))}  ${theme.fg("muted", "records")} ${theme.fg("accent", String(snapshot.records.length))}  ${last}  ${follow}`;
 	}
 
 	#statusText(): string {
-		return this.#statusMessage ?? " Up/Down scroll  PgUp/PgDn page";
+		const help = "Esc close · Ctrl+C copy raw · End follow tail · wheel scroll · click summary toggles follow";
+		return this.#statusMessage
+			? `${theme.fg("success", this.#statusMessage)}  ${theme.fg("dim", help)}`
+			: theme.fg("dim", help);
 	}
 
 	#bodyHeight(): number {
-		return Math.max(3, this.#terminalRows - VIEWER_FRAME_LINES);
+		return Math.max(3, (process.stdout.rows || this.#terminalRows || 24) - VIEWER_CHROME_LINES);
 	}
-
 	#followIfNeeded(): void {
 		if (this.#followTail) this.#scrollToTail();
 	}
@@ -246,8 +284,8 @@ export class RawSseViewerComponent implements Component {
 	}
 
 	#maxScrollOffset(): number {
-		const innerWidth = Math.max(1, this.#lastRenderWidth - 2);
-		return Math.max(0, this.#renderRawLines(innerWidth).length - this.#bodyHeight());
+		const contentWidth = Math.max(1, this.#lastRenderWidth - 4);
+		return Math.max(0, this.#renderRawLines(contentWidth).length - this.#bodyHeight());
 	}
 
 	#copyAll(): void {
@@ -271,22 +309,4 @@ export class RawSseViewerComponent implements Component {
 		}
 		this.#onUpdate?.();
 	}
-
-	#frameTop(innerWidth: number): string {
-		return `${theme.boxRound.topLeft}${theme.boxRound.horizontal.repeat(innerWidth)}${theme.boxRound.topRight}`;
-	}
-
-	#frameSeparator(innerWidth: number): string {
-		return `${theme.boxRound.teeRight}${theme.boxRound.horizontal.repeat(innerWidth)}${theme.boxRound.teeLeft}`;
-	}
-
-	#frameBottom(innerWidth: number): string {
-		return `${theme.boxRound.bottomLeft}${theme.boxRound.horizontal.repeat(innerWidth)}${theme.boxRound.bottomRight}`;
-	}
-
-	#frameLine(content: string, innerWidth: number): string {
-		const truncated = truncateToWidth(content, innerWidth);
-		const remaining = Math.max(0, innerWidth - visibleWidth(truncated));
-		return `${theme.boxRound.vertical}${truncated}${padding(remaining)}${theme.boxRound.vertical}`;
-	}
 }