pi-open-tui 0.4.0 → 0.4.2

package/extensions/open-tui/session-lifecycle.ts

@@ -1,43 +1,23 @@
-export class SessionLifecycle {
-	private current = 0;
-	private deferred: Array<() => void> = [];
-	private shutDown = false;
-
-	start(): void {
-		this.current++;
-		this.shutDown = false;
-		this.flushDeferred();
-	}
-
-	shutdown(): void {
-		this.shutDown = true;
-		this.deferred = [];
-	}
-
-	isCurrent(generation?: number): boolean {
-		if (this.shutDown) return false;
-		if (generation === undefined) return true;
-		return generation === this.current;
-	}
-
-	currentGeneration(): number {
-		return this.current;
-	}
-
-	defer(fn: () => void): void {
-		if (this.shutDown) return;
-		this.deferred.push(fn);
-	}
-
-	private flushDeferred(): void {
-		const pending = this.deferred;
-		this.deferred = [];
-		for (const fn of pending) {
-			try {
-				fn();
-			} catch {
-				// ponytail: silent fallback — deferred tasks are best-effort
-			}
-		}
-	}
-}
+export class SessionLifecycle {
+	private current = 0;
+	private shutDown = false;
+
+	start(): void {
+		this.current++;
+		this.shutDown = false;
+	}
+
+	shutdown(): void {
+		this.shutDown = true;
+	}
+
+	isCurrent(generation?: number): boolean {
+		if (this.shutDown) return false;
+		if (generation === undefined) return true;
+		return generation === this.current;
+	}
+
+	currentGeneration(): number {
+		return this.current;
+	}
+}

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

@@ -4,10 +4,11 @@ import {
 	Key,
 	matchesKey,
 	SelectList,
-	type Component,
 	type SelectItem,
 	type TUI,
 	Text,
+	truncateToWidth,
+	visibleWidth,
 } from "@earendil-works/pi-tui";
 import type { CursorStyle, IconMode, OpenTuiConfig, SettingsLanguage, ThinkingPeekLines } from "./config.ts";
 
@@ -30,6 +31,7 @@ const COPY = {
 			enabled: "Enabled",
 			header: "Override header",
 			inlineFooter: "Footer in editor border",
+			copyButtons: "Copy buttons",
 			thinkingPeek: "Thinking peek",
 			toolView: "Tool view",
 			language: "Language",
@@ -72,6 +74,7 @@ const COPY = {
 			enabled: "启用",
 			header: "覆盖顶部信息栏",
 			inlineFooter: "底栏嵌入输入框",
+			copyButtons: "复制按钮",
 			thinkingPeek: "思考预览",
 			toolView: "工具视图",
 			language: "语言",
@@ -170,6 +173,7 @@ function buildFeaturesItems(config: OpenTuiConfig, copy: SettingsCopy): SettingI
 		{ id: "settingsLanguage", label: copy.labels.language, currentValue: copy.values.languages[config.settingsLanguage] },
 		{ id: "thinkingPeek", label: copy.labels.thinkingPeek, currentValue: formatThinkingPeekLines(config.thinkingPeek.lines, copy) },
 		{ id: "inlineFooter", label: copy.labels.inlineFooter, currentValue: flag(config.inlineFooter) },
+		{ id: "copyButtons", label: copy.labels.copyButtons, currentValue: flag(config.copyButtons) },
 		{ id: "toolView", label: copy.labels.toolView, currentValue: copy.values.toolView[config.toolView.mode] },
 	];
 }
@@ -235,6 +239,7 @@ function handleSettingChange(
 		if (itemId === "enabled") return toggleEnabled(config);
 		if (itemId === "header") return { ...config, header: !config.header };
 		if (itemId === "inlineFooter") return { ...config, inlineFooter: !config.inlineFooter };
+		if (itemId === "copyButtons") return { ...config, copyButtons: !config.copyButtons };
 		if (itemId === "settingsLanguage") return toggleLanguage(config);
 		if (itemId === "thinkingPeek") return cycleThinkingPeek(config);
 		if (itemId === "toolView") {
@@ -263,34 +268,30 @@ interface SettingsUiHandle {
 class SettingsUi implements SettingsUiHandle {
 	private tab: Tab = "features";
 	private config: OpenTuiConfig;
-	private selectList: SelectList;
+	private selectList!: SelectList;
 	private readonly selectedItemByTab: Partial<Record<Tab, string>> = {};
 	private readonly container: Box;
+	private readonly tui: TUI;
 	private readonly theme: Theme;
 	private readonly onChange: (config: OpenTuiConfig) => void;
 	private readonly onClose: () => void;
-	private cachedWidth: number | undefined;
+	private layoutWidth: number | undefined;
+	private layoutRows: number | undefined;
 	private cachedLines: string[] | undefined;
-	private compact = false;
 
 	constructor(
+		tui: TUI,
 		theme: Theme,
 		config: OpenTuiConfig,
 		onChange: (config: OpenTuiConfig) => void,
 		onClose: () => void,
 	) {
+		this.tui = tui;
 		this.theme = theme;
 		this.config = config;
 		this.onChange = onChange;
 		this.onClose = onClose;
 		this.container = new Box(1, 1, (s: string) => theme.bg("customMessageBg", s));
-		this.selectList = new SelectList([], 12, {
-			selectedPrefix: (t) => theme.fg("accent", t),
-			selectedText: (t) => theme.fg("accent", t),
-			description: (t) => theme.fg("muted", t),
-			scrollInfo: (t) => theme.fg("dim", t),
-			noMatch: (t) => theme.fg("warning", t),
-		});
 		this.rebuild();
 	}
 
@@ -307,7 +308,13 @@ class SettingsUi implements SettingsUiHandle {
 		this.rebuild();
 	}
 
-	private rebuild(preferredItemId = this.selectedItemByTab[this.tab]): void {
+	private rebuild(
+		preferredItemId = this.selectedItemByTab[this.tab],
+		width = this.layoutWidth ?? Math.min(80, this.tui.terminal.columns),
+	): void {
+		this.layoutWidth = width;
+		this.layoutRows = this.tui.terminal.rows;
+		const compact = width <= 60;
 		const copy = COPY[this.config.settingsLanguage];
 		this.container.clear();
 		this.container.addChild(new Text(this.theme.bold(this.theme.fg("accent", copy.title)), 1, 0));
@@ -320,12 +327,18 @@ class SettingsUi implements SettingsUiHandle {
 		this.container.addChild(new Text(tabBar, 1, 0));
 		this.container.addChild(new Text(this.theme.fg("dim", copy.hint), 1, 0));
 
-		const items = buildItems(this.tab, this.config).map((item) => ({
+		const items = buildItems(this.tab, this.config).map<SelectItem>((item) => ({
 			value: item.id,
-			label: this.compact ? `${item.label}: ${item.currentValue}` : item.label,
-			description: this.compact ? undefined : item.currentValue,
-		} as SelectItem));
-		this.selectList = new SelectList(items, Math.min(items.length, 12), {
+			// Reserve Box padding (2), SelectList prefix/safety (4), and ": " (2).
+			label: compact
+				? `${truncateToWidth(item.label, Math.max(0, width - 8 - visibleWidth(item.currentValue)))}: ${item.currentValue}`
+				: item.label,
+			description: compact ? undefined : item.currentValue,
+		}));
+		const availableRows = this.layoutRows - this.container.render(width).length;
+		// A scrolling SelectList adds one status row below the items.
+		const visibleItems = items.length <= availableRows ? items.length : Math.max(1, availableRows - 1);
+		this.selectList = new SelectList(items, visibleItems, {
 			selectedPrefix: (t) => this.theme.fg("accent", t),
 			selectedText: (t) => this.theme.fg("accent", t),
 			description: (t) => this.theme.fg("muted", t),
@@ -348,7 +361,6 @@ class SettingsUi implements SettingsUiHandle {
 		};
 		this.container.addChild(this.selectList);
 
-		this.cachedWidth = undefined;
 		this.cachedLines = undefined;
 	}
 
@@ -377,19 +389,15 @@ class SettingsUi implements SettingsUiHandle {
 	}
 
 	render(width: number): string[] {
-		const compact = width <= 60;
-		if (compact !== this.compact) {
-			this.compact = compact;
-			this.rebuild();
+		if (width !== this.layoutWidth || this.tui.terminal.rows !== this.layoutRows) {
+			this.rebuild(undefined, width);
 		}
-		if (this.cachedLines && this.cachedWidth === width) return this.cachedLines;
-		this.cachedWidth = width;
+		if (this.cachedLines) return this.cachedLines;
 		this.cachedLines = this.container.render(width);
 		return this.cachedLines;
 	}
 
 	invalidate(): void {
-		this.cachedWidth = undefined;
 		this.cachedLines = undefined;
 		this.container.invalidate();
 	}
@@ -407,26 +415,27 @@ export function registerSettingsCommand(
 		description: "Open the open-tui settings UI",
 		handler: async (_args, ctx: ExtensionContext) => {
 			if (!ctx.hasUI) return;
-		await ctx.ui.custom<void>((tui: TUI, theme, _kb, done) => {
-			const ui = new SettingsUi(
-				theme,
-				hooks.getConfig(),
-				(config) => hooks.onConfigChanged(config),
-				() => done(undefined),
-			);
-			return {
-				render: (w: number) => ui.render(w),
-				invalidate: () => ui.invalidate(),
-				handleInput: (data: string) => {
-					ui.handleInput(data);
-					tui.requestRender();
-				},
-			};
-		}, { overlay: true });
-		// Overlay is closed and focus is back on the editor. Deferred UI changes
-		// (e.g. toggling the extension) run here, so pi core's focus restore
-		// cannot strand the overlay without keyboard input.
-		hooks.onOverlayClosed?.();
+			await ctx.ui.custom<void>((tui: TUI, theme, _kb, done) => {
+				const ui = new SettingsUi(
+					tui,
+					theme,
+					hooks.getConfig(),
+					(config) => hooks.onConfigChanged(config),
+					() => done(undefined),
+				);
+				return {
+					render: (w: number) => ui.render(w),
+					invalidate: () => ui.invalidate(),
+					handleInput: (data: string) => {
+						ui.handleInput(data);
+						tui.requestRender();
+					},
+				};
+			}, { overlay: true });
+			// Overlay is closed and focus is back on the editor. Deferred UI changes
+			// (e.g. toggling the extension) run here, so pi core's focus restore
+			// cannot strand the overlay without keyboard input.
+			hooks.onOverlayClosed?.();
 		},
 	});
 }

package/extensions/open-tui/state.ts

@@ -8,7 +8,6 @@ import { finiteOrZero, formatProviderLabel } from "./utils.ts";
 export interface FooterState {
 	git: GitStatus;
 	runtime: RuntimeInfo | null;
-	sessionStartEpoch: number;
 	workingSince: number | undefined;
 	lastDoneIn: number | undefined;
 }
@@ -22,23 +21,22 @@ export interface UsageTotals {
 	latestCacheHitRate: number | undefined;
 }
 
-let usageCache: { key: string; totals: UsageTotals } | undefined;
-
-function entriesKey(ctx: ExtensionContext): string {
-	const entries = ctx.sessionManager.getEntries();
-	const last = entries.at(-1);
-	return `${entries.length}:${last?.id ?? ""}:${last?.timestamp ?? ""}`;
-}
+let usageCache: {
+	sessionManager: ExtensionContext["sessionManager"];
+	leafId: string | null;
+	totals: UsageTotals;
+} | undefined;
 
 export function getUsageTotals(ctx: ExtensionContext): UsageTotals {
-	const key = entriesKey(ctx);
-	if (usageCache && usageCache.key === key) return usageCache.totals;
+	const { sessionManager } = ctx;
+	const leafId = sessionManager.getLeafId();
+	if (usageCache?.sessionManager === sessionManager && usageCache.leafId === leafId) return usageCache.totals;
 
 	const totals: UsageTotals = {
 		input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: 0,
 		latestCacheHitRate: undefined,
 	};
-	for (const entry of ctx.sessionManager.getEntries()) {
+	for (const entry of sessionManager.getEntries()) {
 		let u: Usage | undefined;
 		let updateCacheHitRate = false;
 		if (entry.type === "message" && entry.message.role === "assistant") {
@@ -46,7 +44,7 @@ export function getUsageTotals(ctx: ExtensionContext): UsageTotals {
 			updateCacheHitRate = true;
 		} else if (entry.type === "message" && entry.message.role === "toolResult") {
 			u = entry.message.usage;
-		} else if (entry.type === "branch_summary" || entry.type === "compaction") {
+		} else if (entry.type === "usage" || entry.type === "branch_summary" || entry.type === "compaction") {
 			u = entry.usage;
 		}
 		if (!u) continue;
@@ -67,7 +65,7 @@ export function getUsageTotals(ctx: ExtensionContext): UsageTotals {
 				: undefined;
 		}
 	}
-	usageCache = { key, totals };
+	usageCache = { sessionManager, leafId, totals };
 	return totals;
 }
 
@@ -79,7 +77,6 @@ export function createInitialState(): FooterState {
 	return {
 		git: emptyGitStatus(),
 		runtime: null,
-		sessionStartEpoch: Date.now(),
 		workingSince: undefined,
 		lastDoneIn: undefined,
 	};

package/extensions/open-tui/tool-preview.ts

@@ -0,0 +1,167 @@
+import { getLanguageFromPath, highlightCode, type Theme } from "@earendil-works/pi-coding-agent";
+import { backgroundAnsi, rgbColor, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { diffWordsWithSpace } from "diff";
+import { stripAnsi } from "./utils.ts";
+
+const MAX_PREVIEW_LINES = 16;
+const MAX_HIGHLIGHT_CHARS = 16_384;
+const MAX_WORD_CHARS = 4_096;
+const SGR = /\x1b\[([\d;]*)m/g;
+
+type Span = { start: number; end: number };
+type PreviewLine = {
+	kind: " " | "+" | "-" | "gap";
+	number: string;
+	text: string;
+	highlighted?: string;
+	spans?: Span[];
+};
+
+/** Code keeps its indentation and blank lines; raw terminal controls never reach highlighting. */
+export function codeLines(source: string): string[] {
+	if (!source) return [];
+	const clean = stripAnsi(source).replace(/\r\n?/g, "\n")
+		.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F-\x9F\uFFF9-\uFFFB]/g, "")
+		.replace(/\t/g, "   ");
+	return clean.replace(/\n$/, "").split("\n");
+}
+
+function parseDiff(source: string): PreviewLine[] {
+	const rows: PreviewLine[] = [];
+	for (const line of codeLines(source)) {
+		if (/^ +\.\.\.$/.test(line)) {
+			rows.push({ kind: "gap", number: "", text: "…" });
+			continue;
+		}
+		const match = /^([ +\-]) *(\d+) (.*)$/.exec(line);
+		// A malformed result gets no guessed preview.
+		if (!match) return [];
+		rows.push({ kind: match[1] as PreviewLine["kind"], number: match[2]!, text: match[3]! });
+	}
+	return rows.some((line) => line.kind === "+" || line.kind === "-") ? rows : [];
+}
+
+function changedWords(oldLine: PreviewLine, newLine: PreviewLine): void {
+	if (Math.max(oldLine.text.length, newLine.text.length) > MAX_WORD_CHARS) return;
+	const changes = diffWordsWithSpace(oldLine.text, newLine.text, { timeout: 5, maxEditLength: 256 });
+	if (!changes) return;
+	const shared = changes.filter((part) => !part.added && !part.removed)
+		.reduce((count, part) => count + part.value.replace(/\s/g, "").length, 0);
+	if (shared < 0.3 * Math.max(oldLine.text.trim().length, newLine.text.trim().length) || shared === 0) return;
+	let oldOffset = 0;
+	let newOffset = 0;
+	oldLine.spans = [];
+	newLine.spans = [];
+	for (const part of changes) {
+		if (part.removed) oldLine.spans.push({ start: oldOffset, end: oldOffset + part.value.length });
+		if (part.added) newLine.spans.push({ start: newOffset, end: newOffset + part.value.length });
+		if (!part.added) oldOffset += part.value.length;
+		if (!part.removed) newOffset += part.value.length;
+	}
+}
+
+function pairChanges(rows: PreviewLine[], shown: number): void {
+	for (let i = 0; i < shown; i++) {
+		if (rows[i]!.kind !== "-") continue;
+		const start = i;
+		while (rows[i]?.kind === "-") i++;
+		const added = i;
+		while (rows[i]?.kind === "+") i++;
+		for (let n = 0; n < Math.min(added - start, i - added); n++) {
+			if (start + n >= shown && added + n >= shown) break;
+			changedWords(rows[start + n]!, rows[added + n]!);
+		}
+		i--;
+	}
+}
+
+function highlight(rows: PreviewLine[], path: string, theme: Theme): void {
+	const language = getLanguageFromPath(path);
+	for (let start = 0; start < rows.length;) {
+		let end = start;
+		while (end < rows.length && rows[end]!.kind !== "gap") end++;
+		const segment = rows.slice(start, end);
+		// Highlight the two file versions independently, never as one mixed diff document.
+		for (const side of ["old", "new"] as const) {
+			if (side === "old" && !segment.some((line) => line.kind === "-")) continue;
+			const selected = segment.filter((line) => line.kind !== (side === "old" ? "+" : "-"));
+			const source = selected.map((line) => line.text).join("\n");
+			// shortcut: oversized snippets use plain foreground; raise the budget only with bounded highlighting.
+			const colored = language && source.length <= MAX_HIGHLIGHT_CHARS ? highlightCode(source, language) : undefined;
+			const unsupported = colored?.every((line, index) => line === theme.fg("mdCodeBlock", selected[index]?.text ?? ""));
+			selected.forEach((line, index) => {
+				if (side === "new" || line.kind === "-") line.highlighted = !unsupported && colored?.[index] !== undefined
+					? colored[index]!
+					: theme.fg("toolOutput", line.text);
+			});
+		}
+		start = end + 1;
+	}
+}
+
+/** Insert word bands by UTF-16 source offsets, leaving syntax ANSI outside the offset count. */
+function withBands(code: string, spans: Span[], base: string, word: string): string {
+	if (spans.length === 0) return base + code.replace(SGR, (sgr, values: string) =>
+		values === "" || values.split(";").some((value) => value === "0" || value === "49") ? sgr + base : sgr);
+	let output = base;
+	let offset = 0;
+	let spanIndex = 0;
+	let active = base;
+	let from = 0;
+	const append = (text: string) => {
+		for (const char of text) {
+			while (spans[spanIndex] && spans[spanIndex]!.end <= offset) spanIndex++;
+			const span = spans[spanIndex];
+			const next = span && span.start < offset + char.length && span.end > offset ? word : base;
+			if (next !== active) output += next;
+			active = next;
+			output += char;
+			offset += char.length;
+		}
+	};
+	for (const match of code.matchAll(SGR)) {
+		append(code.slice(from, match.index));
+		output += match[0];
+		// Syntax resets must restore the current band, including a word band.
+		if (match[1] === "" || match[1]!.split(";").some((value) => value === "0" || value === "49")) output += active;
+		from = match.index + match[0].length;
+	}
+	append(code.slice(from));
+	return output;
+}
+
+export function prepareToolPreview(kind: "edit" | "write", source: string, path: string, theme: Theme): (width: number, indent: string) => string[] {
+	const rows: PreviewLine[] = kind === "edit" ? parseDiff(source) : codeLines(source)
+		.map((text, index) => ({ kind: " ", number: String(index + 1), text }));
+	const shown = Math.min(rows.length, MAX_PREVIEW_LINES);
+	if (kind === "edit") pairChanges(rows, shown);
+	const preview = rows.slice(0, shown);
+	highlight(preview, path, theme);
+	const digits = preview.reduce((max, line) => Math.max(max, line.number.length), 1);
+	const palette = theme.appearance === "light"
+		? { "+": [[229, 245, 232], [174, 226, 185]], "-": [[255, 230, 230], [255, 188, 188]] }
+		: { "+": [[26, 55, 40], [32, 96, 59]], "-": [[70, 30, 32], [124, 42, 48]] };
+	const prepared = preview.map((line) => {
+		const marker = kind === "edit" ? (line.kind === "gap" ? " " : line.kind) : "";
+		const prefix = `${marker}${line.number.padStart(digits)} `;
+		const code = theme.fg("dim", prefix) + (line.highlighted ?? theme.fg("dim", line.text));
+		if (line.kind !== "+" && line.kind !== "-") return { code };
+		const [normal, strong] = palette[line.kind].map(([r, g, b]) => backgroundAnsi(rgbColor(r!, g!, b!), theme.getColorMode()));
+		const spans = (line.spans ?? []).map(({ start, end }) => ({ start: start + prefix.length, end: end + prefix.length }));
+		return { code: withBands(code, spans, normal!, strong!), band: normal };
+	});
+	const hidden = rows.length - shown;
+	return (width, indent) => {
+		const pad = truncateToWidth(indent, Math.max(0, width), "");
+		const available = Math.max(0, width - visibleWidth(pad));
+		const result = prepared.map(({ code, band }) => {
+			const columns = Math.max(0, available - (band ? 2 : 0));
+			const clipped = truncateToWidth(code, columns, band ? `${band}…` : "…");
+			return pad + (band && columns > 0
+				? clipped + band + " ".repeat(Math.max(0, columns - visibleWidth(clipped))) + "\x1b[49m"
+				: clipped);
+		});
+		if (hidden > 0) result.push(pad + theme.fg("dim", truncateToWidth(`… +${hidden} lines (ctrl+o to expand)`, available, "…")));
+		return result;
+	};
+}