pi-open-tui 0.3.0 → 0.3.3

package/README.md

@@ -13,6 +13,7 @@ A polished terminal interface for the [Pi](https://pi.dev) coding agent. It brin
 - **Framed editor** with block, bar, and underline cursor styles
 - **Project awareness** for 50+ runtimes and detailed Git states, including ahead/behind, staged, modified, untracked, stashed, and detached HEAD
 - **Turn telemetry** for TPS, time to first token (TTFT), duration, stalls, tokens, and list-price rate
+- **Thinking peek**: an inline ticker replaces Pi's hidden `Thinking...` label with the tail of the model's reasoning while it works
 - **Interactive settings** through `/open-tui`, available in English and Simplified Chinese
 - **Version-guarded Pi compatibility shim**: fullscreen wheel speed falls back to Pi's default if its runtime support changes
 
@@ -83,6 +84,9 @@ Run `/open-tui` to open the settings dialog. It provides **General**, **Appearan
     "tokens": true,
     "stalls": true,
     "cost": true
+  },
+  "thinkingPeek": {
+    "lines": 1
   }
 }
 ```
@@ -97,6 +101,7 @@ Key options:
 | `icons.mode` | `auto`, `nerd`, `ascii` | Controls footer and telemetry icons |
 | `footerSegments` | Boolean flags | Shows or hides individual footer data |
 | `telemetry` | Boolean flags | Enables telemetry and its individual measurements |
+| `thinkingPeek.lines` | `0`, `1`, `2` | Off, one-line, or two-line hidden thinking preview |
 
 `sessionName` appears only when the session has a name. `gitCommit` shows the short hash and tag in detached HEAD state. Disabling `extensionStatuses` hides the entire extension status line, including MCP status.
 
@@ -114,6 +119,22 @@ TPS is calculated from all provider-reported assistant output tokens divided by
 
 The `$ / M` value is the model's list-price rate from `usage.cost.total`, not the cumulative session cost shown in the footer. Every telemetry field can be toggled from the **Telemetry** tab.
 
+## Thinking peek
+
+When Pi's **Hide thinking** setting is enabled, pi-open-tui shows a compact ticker in the native hidden thinking block's `Thinking...` position. The `/open-tui` setting offers three modes: **Off**, **1 line**, and **2 lines**.
+
+- while the model is reasoning, the current thinking tail streams by with a spinner (`~ think ⠋ …`);
+- when the answer starts, it settles on a check mark (`~ think ✓`);
+- in 2-line mode, the previous and latest thinking lines share the same text indentation; if the latest line overflows, both rows follow its newest tail as tokens arrive instead of retaining the previous line;
+- after the task settles, the native `Thinking...` label is restored.
+
+```text
+~ think ⠋ previous thought
+          latest thought
+```
+
+The ticker appears only once the model actually streams reasoning, so non-reasoning models never show it. Pi's own Hide thinking toggle controls visibility; changing it takes effect immediately. Each row is truncated by *visible* width, so CJK-wide thinking text cannot overflow. Configure it from **General → Thinking peek** in `/open-tui`, or via `thinkingPeek.lines` in `open-tui.json`.
+
 ## Local development
 
 ```bash

package/README.zh-CN.md

@@ -13,6 +13,7 @@
 - **带边框的编辑器**：支持块状、竖线和下划线三种光标样式
 - **项目环境感知**：识别 50 多种运行环境，并展示 ahead/behind、已暂存、已修改、未跟踪、stash 和 detached HEAD 等 Git 状态
 - **单轮遥测**：展示 TPS、首 Token 延迟（TTFT）、耗时、停顿、Token 数量和模型标价速率
+- **思考预览**：模型工作时，在 Pi 隐藏思考块的 `Thinking...` 位置显示实时字幕，展示推理内容的末尾片段
 - **交互式设置**：通过 `/open-tui` 配置，并支持英文和简体中文界面
 - **带版本保护的 Pi 兼容层**：全屏滚轮速度所依赖的运行时支持发生变化时，会回退为 Pi 默认行为
 
@@ -83,6 +84,9 @@ pi -e npm:pi-open-tui
     "tokens": true,
     "stalls": true,
     "cost": true
+  },
+  "thinkingPeek": {
+    "lines": 1
   }
 }
 ```
@@ -97,6 +101,7 @@ pi -e npm:pi-open-tui
 | `icons.mode` | `auto`、`nerd`、`ascii` | 控制底栏和遥测通知使用的图标 |
 | `footerSegments` | 布尔开关 | 分别控制底栏中的各项数据 |
 | `telemetry` | 布尔开关 | 控制遥测总开关和各项指标 |
+| `thinkingPeek.lines` | `0`、`1`、`2` | 关闭、单行或双行思考预览 |
 
 `sessionName` 仅在会话有名称时显示；`gitCommit` 会在 detached HEAD 状态下显示短哈希和标签；关闭 `extensionStatuses` 会隐藏整行扩展状态，其中也包括 MCP 状态。
 
@@ -114,6 +119,22 @@ TPS 的计算方式是：将本次运行中服务商报告的全部 Assistant
 
 `$ / M` 表示根据 `usage.cost.total` 得到的模型标价速率，不是底栏中的会话累计费用。所有遥测字段都可以在**遥测**页单独开关。
 
+## 思考预览
+
+开启 Pi 的 **Hide thinking** 后，任务运行期间 pi-open-tui 会在原生隐藏思考块的 `Thinking...` 位置显示紧凑的实时字幕。`/open-tui` 中提供**关闭、单行、双行**三种模式：
+
+- 模型推理时，思考内容的末尾片段会随 spinner 滚动（`~ think ⠋ …`）；
+- 开始输出正文时定格为对勾（`~ think ✓`）；
+- 双行模式中，上一条和最新一条思考内容使用相同的文字缩进；如果最新一行超出宽度，则两行随新 Token 持续显示它的最新末尾片段，不再保留上一条；
+- 任务结束后恢复原生 `Thinking...` 标签。
+
+```text
+~ think ⠋ 上一条思考
+          最新一条思考
+```
+
+该字幕仅在模型真正输出推理内容后出现，非推理模型不会显示。可见性由 Pi 自身的 Hide thinking 开关控制，切换后立即生效。每一行都按*显示宽度*截断（全角字符计 2 列），因此包含中文的思考文本也不会溢出终端。可在 `/open-tui` 的**常规 → 思考预览**中切换，或直接修改 `open-tui.json` 中的 `thinkingPeek.lines`。
+
 ## 本地开发
 
 ```bash

package/extensions/open-tui/config.ts

@@ -9,6 +9,7 @@ import type { IconMode } from "./icons.ts";
 
 export type SettingsLanguage = "en" | "zh";
 export type CursorStyle = "block" | "bar" | "underline";
+export type ThinkingPeekLines = 0 | 1 | 2;
 
 export type { IconMode } from "./icons.ts";
 
@@ -35,6 +36,10 @@ export interface TelemetryConfig {
 	cost: boolean;
 }
 
+export interface ThinkingPeekConfig {
+	lines: ThinkingPeekLines;
+}
+
 export interface FullscreenConfig {
 	wheelScrollLines: number;
 }
@@ -49,6 +54,7 @@ export interface OpenTuiConfig {
 	};
 	footerSegments: FooterSegments;
 	telemetry: TelemetryConfig;
+	thinkingPeek: ThinkingPeekConfig;
 }
 
 export const DEFAULT_CONFIG: OpenTuiConfig = {
@@ -82,6 +88,9 @@ export const DEFAULT_CONFIG: OpenTuiConfig = {
 		stalls: true,
 		cost: true,
 	},
+	thinkingPeek: {
+		lines: 1,
+	},
 };
 
 export function getConfigPath(): string {
@@ -89,6 +98,10 @@ export function getConfigPath(): string {
 	return join(agentDir, "open-tui.json");
 }
 
+function normalizeThinkingPeekLines(value: unknown): ThinkingPeekLines {
+	return value === 0 || value === 1 || value === 2 ? value : DEFAULT_CONFIG.thinkingPeek.lines;
+}
+
 function deepMerge<T>(base: T, override: unknown): T {
 	if (typeof base !== "object" || base === null || Array.isArray(base)) {
 		return (override as T) ?? base;
@@ -144,6 +157,11 @@ export function loadConfig(notify?: (msg: string, level: "warning" | "info") =>
 			config.fullscreen.wheelScrollLines,
 			DEFAULT_CONFIG.fullscreen.wheelScrollLines,
 		);
+		if (typeof config.thinkingPeek !== "object" || config.thinkingPeek === null || Array.isArray(config.thinkingPeek)) {
+			config.thinkingPeek = structuredClone(DEFAULT_CONFIG.thinkingPeek);
+		} else {
+			config.thinkingPeek.lines = normalizeThinkingPeekLines(config.thinkingPeek.lines);
+		}
 		return config;
 	} catch (err) {
 		notify?.(`open-tui config parse error: ${err instanceof Error ? err.message : String(err)}`, "warning");

package/extensions/open-tui/editor.ts

@@ -1,6 +1,6 @@
-import {
-	CustomEditor,
-	type ExtensionAPI,
+import {
+	CustomEditor,
+	type ExtensionAPI,
 	type ExtensionContext,
 	type KeybindingsManager,
 } from "@earendil-works/pi-coding-agent";
@@ -23,7 +23,40 @@ const CURSOR_STYLE_SEQUENCES: Partial<Record<CursorStyle, string>> = {
 	bar: "\x1b[6 q",
 	underline: "\x1b[4 q",
 };
-const DEFAULT_CURSOR_STYLE_SEQUENCE = "\x1b[0 q";
+const DEFAULT_CURSOR_STYLE_SEQUENCE = "\x1b[0 q";
+
+interface HiddenThinkingLabelComponent {
+	children: unknown[];
+	setHiddenThinkingLabel(label: string): void;
+	setHideThinkingBlock(hide: boolean): void;
+	updateContent(message: unknown, isStreaming?: boolean): void;
+}
+
+function isHiddenThinkingLabelComponent(value: object): value is HiddenThinkingLabelComponent {
+	const component = value as unknown as Record<string, unknown>;
+	return Array.isArray(component.children)
+		&& typeof component.setHiddenThinkingLabel === "function"
+		&& typeof component.setHideThinkingBlock === "function"
+		&& typeof component.updateContent === "function";
+}
+
+/** Ponytail until Pi exposes a per-message hidden-thinking label API. */
+function findLatestHiddenThinkingLabel(tui: TUI): HiddenThinkingLabelComponent {
+	const pending: unknown[] = [tui];
+	const visited = new Set<object>();
+	let latest: HiddenThinkingLabelComponent | undefined;
+	while (pending.length > 0) {
+		const value = pending.pop();
+		if (!value || typeof value !== "object" || visited.has(value)) continue;
+		visited.add(value);
+		if (isHiddenThinkingLabelComponent(value)) latest = value;
+		const children = (value as { children?: unknown }).children;
+		if (!Array.isArray(children)) continue;
+		for (let i = children.length - 1; i >= 0; i--) pending.push(children[i]);
+	}
+	if (!latest) throw new Error("Unable to find the active hidden-thinking component");
+	return latest;
+}
 
 function removeSoftwareCursor(line: string, cursorMarker = ""): string {
 	return line.replace(/\x1b\[7m([\s\S]*?)\x1b\[0m/g, (_match, cursor: string) => {
@@ -159,28 +192,51 @@ export function installEditor(
 ) {
 	let activeTui: TUI | undefined;
 	let activeEditor: OpenTuiEditor | undefined;
-	let previousHardwareCursor: boolean | undefined;
-	let currentCursorStyle = cursorStyle;
-	let currentWheelScrollLines = wheelScrollLines;
-
-	ctx.ui.setEditorComponent((tui, editorTheme, keybindings) => {
-		activeTui = tui;
-		applyFullscreenWheelScrollLines(tui, currentWheelScrollLines);
+	let previousHardwareCursor: boolean | undefined;
+	let currentCursorStyle = cursorStyle;
+	let currentWheelScrollLines = wheelScrollLines;
+	let hiddenThinkingTarget: HiddenThinkingLabelComponent | undefined;
+	const getActiveTui = (): TUI => {
+		if (!activeTui) throw new Error("Open TUI editor is not mounted");
+		return activeTui;
+	};
+
+	ctx.ui.setEditorComponent((tui, editorTheme, keybindings) => {
+		activeTui = tui;
+		hiddenThinkingTarget = undefined;
+		applyFullscreenWheelScrollLines(tui, currentWheelScrollLines);
 		previousHardwareCursor = tui.getShowHardwareCursor();
 		activeEditor = new OpenTuiEditor(tui, editorTheme, keybindings, currentCursorStyle);
 		return activeEditor;
-	});
-	return {
-		setCursorStyle(nextCursorStyle: CursorStyle): void {
-			currentCursorStyle = nextCursorStyle;
-			activeEditor?.setCursorStyle(nextCursorStyle, previousHardwareCursor);
+	});
+	return {
+		getViewportWidth(): number {
+			const columns = getActiveTui().terminal.columns;
+			if (typeof columns !== "number" || !Number.isFinite(columns)) {
+				throw new Error("Open TUI editor terminal has an invalid width");
+			}
+			return Math.max(1, Math.floor(columns));
+		},
+		setLatestHiddenThinkingLabel(label: string): void {
+			const tui = getActiveTui();
+			hiddenThinkingTarget ??= findLatestHiddenThinkingLabel(tui);
+			hiddenThinkingTarget.setHiddenThinkingLabel(label);
+			tui.requestRender();
+		},
+		resetHiddenThinkingLabelTarget(): void {
+			hiddenThinkingTarget = undefined;
+		},
+		setCursorStyle(nextCursorStyle: CursorStyle): void {
+			currentCursorStyle = nextCursorStyle;
+			activeEditor?.setCursorStyle(nextCursorStyle, previousHardwareCursor);
 		},
 		setWheelScrollLines(nextWheelScrollLines: number): void {
 			currentWheelScrollLines = nextWheelScrollLines;
 			if (activeTui) applyFullscreenWheelScrollLines(activeTui, currentWheelScrollLines);
 		},
-		cleanup(): void {
-			ctx.ui.setEditorComponent(undefined);
+		cleanup(): void {
+			hiddenThinkingTarget = undefined;
+			ctx.ui.setEditorComponent(undefined);
 			if (activeTui) {
 				if (currentCursorStyle !== "block") activeTui.terminal.write(DEFAULT_CURSOR_STYLE_SEQUENCE);
 				if (previousHardwareCursor !== undefined) activeTui.setShowHardwareCursor(previousHardwareCursor);

package/extensions/open-tui/index.ts

@@ -14,31 +14,25 @@ import {
 	invalidateUsageCache,
 	type FooterState,
 } from "./state.ts";
-
-function isInteractiveLaunch(): boolean {
-	if (!process.stdout.isTTY) return false;
-	const args = process.argv.slice(2);
-	const nonInteractiveFlags = ["-p", "--print", "--help", "-h", "--version", "-v", "--list-models", "--export"];
-	for (const arg of args) {
-		if (nonInteractiveFlags.includes(arg)) return false;
-		if (arg.startsWith("--mode")) return false;
-	}
-	return true;
-}
-
-type PendingUiChange = "install" | "uninstall";
+import { resolveGlyphs } from "./icons.ts";
+import {
+	buildPeekLabel,
+	collectPeekParts,
+	createPeekState,
+	reducePeek,
+	type PeekState,
+} from "./peek.ts";
+
+type PendingUiChange = "install" | "uninstall";
+const HIDDEN_THINKING_HORIZONTAL_PADDING = 2;
+// Pi's fullscreen transcript can reserve one more column for its scrollbar.
+const HIDDEN_THINKING_SCROLLBAR_RESERVE = 1;
 
 export function getPendingUiChange(enabled: boolean, active: boolean): PendingUiChange | undefined {
 	if (enabled === active) return undefined;
 	return enabled ? "install" : "uninstall";
 }
 
-function clearVisibleScreen(): void {
-	if (process.stdout.isTTY) {
-		process.stdout.write("\x1b[2J\x1b[H");
-	}
-}
-
 function isTuiContext(ctx: ExtensionContext): boolean {
 	try {
 		const mode = (ctx as ExtensionContext & { mode?: string }).mode;
@@ -63,8 +57,72 @@ export default function (pi: ExtensionAPI) {
 	let editor: ReturnType<typeof installEditor> | undefined;
 	let pendingUiChange: PendingUiChange | undefined;
 
+	// thinking-peek state (rendered by Pi inside its hidden-thinking block)
+	const peek: PeekState = createPeekState();
+	let peekFrame = 0;
+	let peekSettleTimer: ReturnType<typeof setTimeout> | undefined;
+	let peekTaskEpoch = 0; // bumped at every agent task boundary
+	let peekLabelActive = false;
+
 	const getThinkingLevel = () => (sessionLifecycle.isCurrent() ? pi.getThinkingLevel() : "off");
 
+	/** True while the agent is running (false during session-restore replay). */
+	const isAgentIdle = (ctx: ExtensionContext): boolean => {
+		try {
+			return (ctx as ExtensionContext & { isIdle?: () => boolean }).isIdle?.() === true;
+		} catch {
+			return false;
+		}
+	};
+
+	/** Pi decides whether this label is visible; our toggle only controls updates. */
+	const isPeekEnabled = () => sessionLifecycle.isCurrent() && config.enabled && config.thinkingPeek.lines > 0 && active;
+
+	/** Keep each native hidden-thinking label row within Pi's narrowest transcript width. */
+	const hiddenThinkingLabelWidth = (): number => {
+		if (!editor) throw new Error("Open TUI editor is not installed");
+		return Math.max(
+			1,
+			editor.getViewportWidth() - HIDDEN_THINKING_HORIZONTAL_PADDING - HIDDEN_THINKING_SCROLLBAR_RESERVE,
+		);
+	};
+
+	const setPeekLabel = (ctx?: ExtensionContext): void => {
+		if (!isPeekEnabled() || peek.phase === "idle") return;
+		const target = ctx ?? lastCtx;
+		if (!target || !isTuiContext(target)) return;
+		if (!editor) throw new Error("Open TUI editor is not installed");
+		editor.setLatestHiddenThinkingLabel(
+			buildPeekLabel(
+				peek,
+				peekFrame,
+				resolveGlyphs(config.icons.mode),
+				hiddenThinkingLabelWidth(),
+				config.thinkingPeek.lines,
+			),
+		);
+		peekLabelActive = true;
+	};
+
+	const clearPeekLabel = (ctx?: ExtensionContext): void => {
+		if (!peekLabelActive) return;
+		const target = ctx ?? lastCtx;
+		if (!target || !isTuiContext(target)) return;
+		// The global reset is safe here: every completed message returns to Pi's native label.
+		target.ui.setHiddenThinkingLabel();
+		peekLabelActive = false;
+	};
+
+	/** Reset peek state to idle and cancel any scheduled cleanup. */
+	const resetPeek = () => {
+		peek.phase = "idle";
+		peek.tail = "";
+		editor?.resetHiddenThinkingLabelTarget();
+		if (peekSettleTimer) {
+			clearTimeout(peekSettleTimer);
+			peekSettleTimer = undefined;
+		}
+	};
 	const applyUi = (ctx: ExtensionContext) => {
 		if (!isTuiContext(ctx)) return;
 		if (!config.enabled) {
@@ -102,6 +160,8 @@ export default function (pi: ExtensionAPI) {
 			cleanupFooter = undefined;
 			editor = undefined;
 			requestFooterRender = undefined;
+			resetPeek();
+			clearPeekLabel(ctx);
 			active = false;
 		}
 	};
@@ -173,10 +233,7 @@ export default function (pi: ExtensionAPI) {
 
 		ensureConfigExists();
 		config = loadConfig((msg, level) => ctx.ui.notify(msg, level));
-
-		if (isInteractiveLaunch() && config.enabled) {
-			clearVisibleScreen();
-		}
+		clearPeekLabel(ctx);
 
 		applyUi(ctx);
 
@@ -195,6 +252,9 @@ export default function (pi: ExtensionAPI) {
 	pi.on("agent_start", (event, _ctx) => {
 		turnTelemetry.handle(event);
 		if (!sessionLifecycle.isCurrent()) return;
+		// agent_start also covers custom-message and continuation-triggered tasks
+		// that do not emit a user message_start event.
+		peekTaskEpoch++;
 		state.workingSince = Date.now();
 		state.lastDoneIn = undefined;
 		startWorkingTimer();
@@ -214,12 +274,40 @@ export default function (pi: ExtensionAPI) {
 		turnTelemetry.handle(event);
 	});
 
-	pi.on("message_start", (event) => {
+	pi.on("message_start", (event, ctx) => {
 		turnTelemetry.handle(event);
+		if (!sessionLifecycle.isCurrent() || isAgentIdle(ctx)) return;
+		const role = event.message?.role;
+		if (role === "user") {
+			// Restore Pi's native label until real thinking arrives. The task epoch is
+			// advanced by agent_start so custom/no-user tasks are covered too.
+			resetPeek();
+			clearPeekLabel(ctx);
+		} else if (role === "assistant") {
+			resetPeek();
+			clearPeekLabel(ctx);
+		}
 	});
 
-	pi.on("message_update", (event) => {
+	pi.on("message_update", (event, ctx) => {
 		turnTelemetry.handle(event);
+		if (!sessionLifecycle.isCurrent() || isAgentIdle(ctx)) return;
+		if (!isPeekEnabled()) return;
+		const message = event.message;
+		if (!message || message.role !== "assistant") return;
+		if (peek.phase === "done") return;
+		const parts = collectPeekParts(message.content);
+		const next = reducePeek(peek, parts);
+		const changed = next.phase !== peek.phase || next.tail !== peek.tail;
+		peek.phase = next.phase;
+		peek.tail = next.tail;
+		if (!changed) return;
+		if (peek.phase === "thinking") {
+			peekFrame++;
+			setPeekLabel(ctx);
+		} else if (peek.phase === "done") {
+			setPeekLabel(ctx);
+		}
 	});
 
 	pi.on("tool_execution_start", (event) => {
@@ -236,6 +324,15 @@ export default function (pi: ExtensionAPI) {
 			const message = formatTurnTelemetry(telemetry, ctx.ui.theme, config.telemetry, config.icons.mode);
 			if (message) ctx.ui.notify(message, "info");
 		}
+		// Only clear the peek label when this task is still the current one.
+		const settleEpoch = peekTaskEpoch;
+		if (peekSettleTimer) clearTimeout(peekSettleTimer);
+		peekSettleTimer = setTimeout(() => {
+			peekSettleTimer = undefined;
+			if (!sessionLifecycle.isCurrent() || peekTaskEpoch !== settleEpoch) return;
+			resetPeek();
+			clearPeekLabel(ctx);
+		}, 300);
 	});
 
 	pi.on("model_select", (_event, ctx) => {
@@ -249,6 +346,11 @@ export default function (pi: ExtensionAPI) {
 	pi.on("message_end", (event, ctx) => {
 		turnTelemetry.handle(event);
 		if (!sessionLifecycle.isCurrent()) return;
+		if (event.message?.role === "assistant" && peek.phase === "thinking") {
+			// Sub-message finished (answer text or a tool call): freeze the peek line.
+			peek.phase = "done";
+			setPeekLabel(ctx);
+		}
 		invalidateUsageCache();
 		refreshInteractiveState(ctx);
 	});
@@ -274,8 +376,15 @@ export default function (pi: ExtensionAPI) {
 		onConfigChanged: (newConfig) => {
 			const cursorStyleChanged = config.cursorStyle !== newConfig.cursorStyle;
 			const wheelScrollLinesChanged = config.fullscreen.wheelScrollLines !== newConfig.fullscreen.wheelScrollLines;
+			const thinkingPeekLinesChanged = config.thinkingPeek.lines !== newConfig.thinkingPeek.lines;
 			saveConfig(newConfig);
 			config = newConfig;
+			if (newConfig.thinkingPeek.lines === 0 || !newConfig.enabled) {
+				resetPeek();
+				clearPeekLabel(lastCtx);
+			} else if (thinkingPeekLinesChanged && peekLabelActive) {
+				setPeekLabel(lastCtx);
+			}
 			if (cursorStyleChanged && active && editor) {
 				editor.setCursorStyle(newConfig.cursorStyle);
 			}

package/extensions/open-tui/peek.ts

@@ -0,0 +1,168 @@
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import type { IconGlyphs } from "./icons.ts";
+import { sanitizeStatus } from "./utils.ts";
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const MAX_PEEK_LINES = 2;
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+export type PeekPhase = "idle" | "thinking" | "done";
+
+export interface PeekState {
+	phase: PeekPhase;
+	tail: string;
+}
+
+export interface PeekMessageParts {
+	thinking: string;
+	text: string;
+}
+
+function stringValue(value: unknown): string | undefined {
+	return typeof value === "string" ? value : undefined;
+}
+
+const normalizePeekLineCount = (lineCount: number): number => Math.max(1, Math.min(MAX_PEEK_LINES, Math.floor(lineCount)));
+
+/**
+ * Pure phase machine for one assistant-message update.
+ *
+ * Thinking text is cumulative: once the answer starts, later updates still
+ * carry the full thinking block alongside new text. To keep the spinner honest:
+ * - idle + thinking        -> thinking (spinner starts)
+ * - idle + thinking + text -> done    (already answered, never spin)
+ * - thinking + text        -> done    (answer started: stop spinner)
+ * - done + thinking        -> done    (never restart the spinner)
+ * - any + text only        -> idle stays idle (plain answer, nothing to peek)
+ */
+export function reducePeek(prev: PeekState, parts: PeekMessageParts): PeekState {
+	const tail = parts.thinking ? peekTail(parts.thinking, MAX_PEEK_LINES) : prev.tail;
+	let phase = prev.phase;
+	if (parts.thinking && phase === "idle") phase = "thinking";
+	if (parts.text && phase === "thinking") phase = "done";
+	return { phase, tail };
+}
+
+/** Fresh peek state (no task running yet). */
+export function createPeekState(): PeekState {
+	return { phase: "idle", tail: "" };
+}
+
+/**
+ * Collect the running thinking text and answer text from an assistant
+ * message's content parts. Thinking arrives token-by-token, so re-calling
+ * this on every `message_update` yields the cumulative text.
+ */
+export function collectPeekParts(content: unknown): PeekMessageParts {
+	let thinking = "";
+	let text = "";
+	if (!Array.isArray(content)) return { thinking, text };
+	for (const rawPart of content) {
+		if (!rawPart || typeof rawPart !== "object") continue;
+		const part = rawPart as { type?: unknown; thinking?: unknown; text?: unknown };
+		if (part.type === "thinking") {
+			thinking += stringValue(part.thinking) ?? stringValue(part.text) ?? "";
+		} else if (part.type === "text") {
+			text += stringValue(part.text) ?? "";
+		}
+	}
+	return { thinking, text };
+}
+
+/**
+ * Extract the last non-empty logical lines of the thinking text, whitespace-
+ * normalized. NOT width-bounded: clipping to the terminal happens at render
+ * time in buildPeekLabel/clipTail, so wide terminals get to see more of it.
+ */
+export function peekTail(fullThinking: string, lineCount = 1): string {
+	if (!fullThinking) return "";
+	const count = normalizePeekLineCount(lineCount);
+	const lines: string[] = [];
+	let end = fullThinking.length;
+	while (end > 0 && lines.length < count) {
+		const start = fullThinking.lastIndexOf("\n", end - 1) + 1;
+		const line = fullThinking.slice(start, end).replace(/\s+/g, " ").trim();
+		if (line) lines.push(line);
+		end = start - 1;
+	}
+	return lines.reverse().join("\n");
+}
+
+/**
+ * Clip a tail string to `budget` visible columns, keeping the END (it is a
+ * tail view) and prefixing "…" when clipped. Walk backwards over complete
+ * graphemes so measurement is limited to the visible suffix.
+ */
+export function clipTail(text: string, budget: number): string {
+	if (!text || budget <= 0) return "";
+	const limit = budget - 1; // reserve one column for the ellipsis
+	let w = 0;
+	let end = text.length;
+	let clippedStart = end;
+	const segments = graphemeSegmenter.segment(text);
+	while (end > 0) {
+		const part = segments.containing(end - 1)!;
+		w += visibleWidth(part.segment);
+		if (w > budget) return "…" + text.slice(clippedStart);
+		end = part.index;
+		if (w <= limit) clippedStart = end;
+	}
+	return text;
+}
+
+/**
+ * Build the label Pi renders in its hidden-thinking block. `width` is a
+ * conservative budget that keeps each native Text row within the terminal.
+ * In two-line mode, an overflowing latest logical line uses both rows for
+ * its continuation instead of retaining the previous logical line.
+ */
+export function buildPeekLabel(
+	state: PeekState,
+	frame: number,
+	glyphs: IconGlyphs,
+	width: number,
+	lineCount = 1,
+): string {
+	const w = Math.max(1, Math.floor(width));
+	const prefix = `${glyphs.thinking} think`;
+	const count = normalizePeekLineCount(lineCount);
+	const fit = (line: string): string => truncateToWidth(line, w, "…");
+	switch (state.phase) {
+		case "thinking": {
+			const spin = SPINNER_FRAMES[frame % SPINNER_FRAMES.length] ?? "";
+			// Thinking text is model output (untrusted): strip terminal control
+			// sequences before placing it in Pi's native label.
+			const marker = `${prefix} ${spin}`;
+			const markerWidth = visibleWidth(`${marker} `);
+			const contentWidth = Math.max(0, w - markerWidth);
+			const thoughtIndent = " ".repeat(markerWidth);
+			const safeLines = state.tail
+				.split("\n")
+				.map((tail) => sanitizeStatus(tail))
+				.filter(Boolean)
+				.slice(-count);
+			const latest = safeLines.at(-1) ?? "";
+			const lineWithMarker = (tail: string): string => fit(tail ? `${marker} ${tail}` : marker);
+			if (count >= 2) {
+				const window = clipTail(latest, contentWidth * count);
+				const latestWrapped = wrapTextWithAnsi(window, Math.max(1, contentWidth));
+				if (latestWrapped.length > 1) {
+					// Word wrapping may add short rows; always retain the newest content.
+					const first = latestWrapped.at(-2) ?? "";
+					const second = latestWrapped.at(-1) ?? "";
+					return `${lineWithMarker(first)}\n${fit(`${thoughtIndent}${second}`)}`;
+				}
+			}
+			const firstTail = clipTail(count >= 2 ? safeLines[0] ?? "" : latest, contentWidth);
+			if (count < 2 || safeLines.length < 2) return lineWithMarker(firstTail);
+			// Align the latest line with the first line's thinking text, not with
+			// the status marker.
+			const secondTail = clipTail(latest, contentWidth);
+			return `${lineWithMarker(firstTail)}\n${fit(secondTail ? `${thoughtIndent}${secondTail}` : thoughtIndent)}`;
+		}
+		case "done":
+			return fit(`${prefix} ${glyphs.done}`);
+		default:
+			return fit(`${prefix} ·`);
+	}
+}

package/extensions/open-tui/settings-command.ts

@@ -5,11 +5,12 @@ import {
 	Key,
 	matchesKey,
 	SelectList,
+	type Component,
 	type SelectItem,
 	type TUI,
 	Text,
 } from "@earendil-works/pi-tui";
-import type { CursorStyle, IconMode, OpenTuiConfig, SettingsLanguage } from "./config.ts";
+import type { CursorStyle, IconMode, OpenTuiConfig, SettingsLanguage, ThinkingPeekLines } from "./config.ts";
 import {
 	DEFAULT_FULLSCREEN_WHEEL_SCROLL_LINES,
 	normalizeFullscreenWheelScrollLines,
@@ -32,6 +33,7 @@ const COPY = {
 		hint: "Tab/Shift+Tab/←/→: tabs · ↑/↓: move · Enter/Space: change · Enter on wheel speed: type 1-10 · Esc/q: close",
 		labels: {
 			enabled: "Enabled",
+			thinkingPeek: "Thinking peek",
 			language: "Language",
 			wheelScrollLines: "Mouse wheel speed",
 			cursorStyle: "Cursor style",
@@ -54,6 +56,7 @@ const COPY = {
 		values: {
 			on: "On",
 			off: "Off",
+			thinkingPeek: { off: "Off", one: "1 line", two: "2 lines" },
 			languages: { en: "English", zh: "简体中文" },
 			wheelLines: (count: number) => `${count} ${count === 1 ? "line" : "lines"} / notch`,
 			wheelPrompt: (count: number) => `Wheel scroll lines per notch, 1-10 (current: ${count}). Enter: apply · Esc: cancel`,
@@ -67,6 +70,7 @@ const COPY = {
 		hint: "Tab/Shift+Tab/←/→：切页 · ↑/↓：移动 · Enter/Space：更改 · 滚轮速度项 Enter 输入 1-10 · Esc/q：关闭",
 		labels: {
 			enabled: "启用",
+			thinkingPeek: "思考预览",
 			language: "语言",
 			wheelScrollLines: "鼠标滚轮速度",
 			cursorStyle: "光标样式",
@@ -89,6 +93,7 @@ const COPY = {
 		values: {
 			on: "开启",
 			off: "关闭",
+			thinkingPeek: { off: "关闭", one: "单行", two: "双行" },
 			languages: { en: "English", zh: "简体中文" },
 			wheelLines: (count: number) => `每格 ${count} 行`,
 			wheelPrompt: (count: number) => `滚轮每格滚动行数（当前 ${count}，范围 1-10），输入后 Enter 应用 · Esc 取消`,
@@ -100,6 +105,11 @@ const COPY = {
 
 type SettingsCopy = (typeof COPY)[SettingsLanguage];
 
+function formatThinkingPeekLines(lines: ThinkingPeekLines, copy: SettingsCopy): string {
+	const values = [copy.values.thinkingPeek.off, copy.values.thinkingPeek.one, copy.values.thinkingPeek.two];
+	return values[lines] ?? values[0];
+}
+
 function toggleSetting(config: OpenTuiConfig, key: keyof OpenTuiConfig["footerSegments"]): OpenTuiConfig {
 	return {
 		...config,
@@ -152,15 +162,25 @@ function toggleTelemetry(config: OpenTuiConfig, key: keyof OpenTuiConfig["teleme
 	};
 }
 
+function cycleThinkingPeek(config: OpenTuiConfig): OpenTuiConfig {
+	const next = ([1, 2, 0] as const)[config.thinkingPeek.lines] ?? 0;
+	return {
+		...config,
+		thinkingPeek: { lines: next },
+	};
+}
+
 function buildFeaturesItems(config: OpenTuiConfig, copy: SettingsCopy): SettingItem[] {
+	const flag = (value: boolean) => value ? copy.values.on : copy.values.off;
 	return [
-		{ id: "enabled", label: copy.labels.enabled, currentValue: config.enabled ? copy.values.on : copy.values.off },
+		{ id: "enabled", label: copy.labels.enabled, currentValue: flag(config.enabled) },
 		{ id: "settingsLanguage", label: copy.labels.language, currentValue: copy.values.languages[config.settingsLanguage] },
 		{
 			id: "wheelScrollLines",
 			label: copy.labels.wheelScrollLines,
 			currentValue: copy.values.wheelLines(config.fullscreen.wheelScrollLines),
 		},
+		{ id: "thinkingPeek", label: copy.labels.thinkingPeek, currentValue: formatThinkingPeekLines(config.thinkingPeek.lines, copy) },
 	];
 }
 
@@ -220,6 +240,7 @@ function handleSettingChange(
 	if (tab === "features") {
 		if (itemId === "enabled") return toggleEnabled(config);
 		if (itemId === "settingsLanguage") return toggleLanguage(config);
+		if (itemId === "thinkingPeek") return cycleThinkingPeek(config);
 	}
 	if (tab === "icons") {
 		if (itemId === "mode") return cycleIconMode(config);
@@ -240,6 +261,23 @@ interface SettingsUiHandle {
 	handleInput: (data: string) => void;
 }
 
+function insertComponentAfter(list: Component, child: Component, index: () => number): Component {
+	// SelectList renders one line per item; splice the editor into that output.
+	return {
+		render(width: number): string[] {
+			const lines = list.render(width);
+			const insertAt = index();
+			if (insertAt < 0 || insertAt >= lines.length) return lines;
+			const childLines = child.render(width);
+			return [...lines.slice(0, insertAt + 1), ...childLines, ...lines.slice(insertAt + 1)];
+		},
+		invalidate(): void {
+			list.invalidate();
+			child.invalidate();
+		},
+	};
+}
+
 class SettingsUi implements SettingsUiHandle {
 	private tab: Tab = "features";
 	private config: OpenTuiConfig;
@@ -357,7 +395,6 @@ class SettingsUi implements SettingsUiHandle {
 		this.selectList.onCancel = () => {
 			this.onClose();
 		};
-		this.container.addChild(this.selectList);
 		if (editingWheel) {
 			this.wheelInput!.focused = true;
 			const wheelInputGroup = new Box(4, 0);
@@ -367,7 +404,10 @@ class SettingsUi implements SettingsUiHandle {
 				0,
 			));
 			wheelInputGroup.addChild(this.wheelInput!);
-			this.container.addChild(wheelInputGroup);
+			const selectedIndex = () => items.findIndex((item) => item.value === this.selectList.getSelectedItem()?.value);
+			this.container.addChild(insertComponentAfter(this.selectList, wheelInputGroup, selectedIndex));
+		} else {
+			this.container.addChild(this.selectList);
 		}
 
 		this.cachedWidth = undefined;

package/extensions/open-tui/state.ts

@@ -1,5 +1,5 @@
+import type { Usage } from "@earendil-works/pi-ai";
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
-import type { AssistantMessage } from "@earendil-works/pi-ai";
 import type { GitStatus } from "./git.ts";
 import { emptyGitStatus } from "./git.ts";
 import type { RuntimeInfo } from "./runtime.ts";
@@ -39,24 +39,32 @@ export function getUsageTotals(ctx: ExtensionContext): UsageTotals {
 		latestCacheHitRate: undefined,
 	};
 	for (const entry of ctx.sessionManager.getEntries()) {
-		if (entry.type === "message" && entry.message?.role === "assistant") {
-			const m = entry.message as AssistantMessage;
-			const u = m.usage;
-			if (!u) continue;
-			const input = finiteOrZero(u.input);
-			const cacheRead = finiteOrZero(u.cacheRead);
-			const cacheWrite = finiteOrZero(u.cacheWrite);
-			// input matches /session's "uncached" total: cacheWrite is billed near full
-			// price (fresh content), only cacheRead is discounted repeat content.
-			totals.input += input + cacheWrite;
-			totals.output += finiteOrZero(u.output);
-			totals.cacheRead += cacheRead;
-			totals.cacheWrite += cacheWrite;
-			totals.cost += finiteOrZero(u.cost?.total);
+		let u: Usage | undefined;
+		let updateCacheHitRate = false;
+		if (entry.type === "message" && entry.message.role === "assistant") {
+			u = entry.message.usage;
+			updateCacheHitRate = true;
+		} else if (entry.type === "message" && entry.message.role === "toolResult") {
+			u = entry.message.usage;
+		} else if (entry.type === "branch_summary" || entry.type === "compaction") {
+			u = entry.usage;
+		}
+		if (!u) continue;
+		const input = finiteOrZero(u.input);
+		const cacheRead = finiteOrZero(u.cacheRead);
+		const cacheWrite = finiteOrZero(u.cacheWrite);
+		// input matches /session's "uncached" total: cacheWrite is billed near full
+		// price (fresh content), only cacheRead is discounted repeat content.
+		totals.input += input + cacheWrite;
+		totals.output += finiteOrZero(u.output);
+		totals.cacheRead += cacheRead;
+		totals.cacheWrite += cacheWrite;
+		totals.cost += finiteOrZero(u.cost?.total);
+		if (updateCacheHitRate) {
 			const promptTokens = input + cacheRead + cacheWrite;
-			if (promptTokens > 0) {
-				totals.latestCacheHitRate = (cacheRead / promptTokens) * 100;
-			}
+			totals.latestCacheHitRate = promptTokens > 0
+				? (cacheRead / promptTokens) * 100
+				: undefined;
 		}
 	}
 	usageCache = { key, totals };

package/extensions/open-tui/utils.ts

@@ -1,15 +1,22 @@
 import { isAbsolute, relative, resolve, sep } from "node:path";
 import type { ThinkingLevel } from "@earendil-works/pi-ai";
 import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import {
+	stripTerminalSequences as stripTerminalSequencesFromTui,
+	truncateToWidth,
+	visibleWidth,
+} from "@earendil-works/pi-tui";
 
 export { truncateToWidth, visibleWidth };
 
+// pi-tui handles the common ANSI/OSC/APC forms. Keep a generic CSI pass for
+// valid sequences whose final byte is outside its intentionally narrow set.
+const CSI_SEQUENCE = /(?:\x1b\[|\x9b)[0-?]*[ -/]*[@-~]/g;
+
 export function stripAnsi(text: string): string {
-	return text
-		.replace(/\x1b\[[0-9;]*m/g, "")
-		.replace(/\x1b\][^\x07]*(?:\x07|\x1b\\)/g, "")
-		.replace(/\x1b_[^\x07]*\x07/g, "");
+	// Remove CSI first so pi-tui's parser cannot mistake an unsupported CSI
+	// final byte for part of a later sequence and swallow intervening text.
+	return stripTerminalSequencesFromTui(text.replace(CSI_SEQUENCE, ""));
 }
 
 export function formatCwd(cwd: string): string {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-open-tui",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "A polished TUI for Pi coding agent: animated logo header, Starship-style footer, rounded editor with model metadata, and prompt-box user messages.",
   "type": "module",
   "repository": {
@@ -25,7 +25,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "test": "node --test tests/settings-command.test.ts tests/fullscreen-scroll.test.ts tests/footer.test.ts tests/editor.test.ts tests/telemetry.test.ts",
+    "test": "node --test tests/settings-command.test.ts tests/fullscreen-scroll.test.ts tests/footer.test.ts tests/editor.test.ts tests/telemetry.test.ts tests/peek.test.ts",
     "typecheck": "tsc --noEmit"
   },
   "pi": {
@@ -35,9 +35,9 @@
     "image": "https://raw.githubusercontent.com/OldSuns/pi-open-tui/main/assets/preview_dashboard_1.png"
   },
   "peerDependencies": {
-    "@earendil-works/pi-coding-agent": ">=0.80",
-    "@earendil-works/pi-ai": ">=0.80",
-    "@earendil-works/pi-tui": ">=0.80"
+    "@earendil-works/pi-coding-agent": ">=0.81",
+    "@earendil-works/pi-ai": ">=0.81",
+    "@earendil-works/pi-tui": ">=0.81"
   },
   "peerDependenciesMeta": {
     "@earendil-works/pi-coding-agent": {