pi-open-tui 0.4.2 → 0.4.4

package/extensions/open-tui/footer.ts

@@ -2,6 +2,7 @@ import type { ExtensionContext, Theme, ThemeColor } from "@earendil-works/pi-cod
 import { hostname as osHostname } from "node:os";
 import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
 import type { OpenTuiConfig } from "./config.ts";
+import type { FooterBuiltinSegment, FooterPosition, RegisteredFooterSegment } from "./footer-segments.ts";
 import type { IconGlyphs } from "./icons.ts";
 import { resolveGlyphs, resolveIconMode, runtimeSymbol } from "./icons.ts";
 import type { GitStatus } from "./git.ts";
@@ -55,13 +56,14 @@ function renderBar(theme: Theme, pct: number, barWidth: number, ascii: boolean):
 	);
 }
 
-/** Compact context form: icon + percentage, no bar or token counts. */
-function renderContextCompact(theme: Theme, ctx: ExtensionContext, glyphs: IconGlyphs): string {
+/** Compact context form: percentage only, no bar, token counts, or icon when the bar is off. */
+function renderContextCompact(theme: Theme, ctx: ExtensionContext, glyphs: IconGlyphs, showBar: boolean): string {
 	const contextUsage = ctx.getContextUsage();
 	const contextWindow = contextUsage?.contextWindow ?? ctx.model?.contextWindow ?? 0;
 	if (contextWindow <= 0) return "";
 	const contextPct = contextUsage?.percent ?? 0;
-	return `${theme.fg(stressColor(contextPct), glyphs.context)} ${theme.fg(stressColor(contextPct), `${contextPct.toFixed(1)}%`)}`;
+	const pctText = theme.fg(stressColor(contextPct), `${contextPct.toFixed(1)}%`);
+	return showBar ? `${theme.fg(stressColor(contextPct), glyphs.context)} ${pctText}` : pctText;
 }
 
 function renderGitSegment(
@@ -148,6 +150,7 @@ function renderContextBar(
 	width: number,
 	glyphs: IconGlyphs,
 	iconMode: OpenTuiConfig["icons"]["mode"],
+	showBar: boolean,
 ): string {
 	const contextUsage = ctx.getContextUsage();
 	const contextWindow = contextUsage?.contextWindow ?? ctx.model?.contextWindow ?? 0;
@@ -160,6 +163,7 @@ function renderContextBar(
 
 	const pctText = theme.fg(stressColor(contextPct), `${contextPct.toFixed(1)}%`);
 	const ctxText = `${theme.fg("text", fmtTokens(contextTokens))}${theme.fg("dim", "/")}${theme.fg("text", fmtTokens(contextWindow))}`;
+	if (!showBar) return `${pctText} ${theme.fg("dim", "·")} ${ctxText}`;
 	const contextIcon = theme.fg(stressColor(contextPct), glyphs.context);
 	// Cap the bar at `width - reserved` (with a floor of 4) so the full form
 	// never forces the left segments out before compact/drop logic kicks in.
@@ -168,12 +172,12 @@ function renderContextBar(
 	return `${contextIcon} ${renderBar(theme, contextPct, barWidth, resolveIconMode(iconMode) === "ascii")} ${pctText} ${theme.fg("dim", "·")} ${ctxText}`;
 }
 
-function renderStatsBlock(
+function renderStatsSegments(
 	theme: Theme,
 	totals: UsageTotals,
 	glyphs: IconGlyphs,
 	segments: OpenTuiConfig["footerSegments"],
-): string {
+): { tokens: string; cost: string } {
 	const stats: string[] = [];
 	if (segments.tokens) {
 		stats.push(theme.fg("accent", `${glyphs.input} ${formatInputBreakdown(totals.input, totals.cacheRead)}`));
@@ -185,11 +189,10 @@ function renderStatsBlock(
 			stats.push(theme.fg(cacheHitColor(totals.latestCacheHitRate), `${glyphs.cacheHit} ${totals.latestCacheHitRate.toFixed(1)}%`));
 		}
 	}
-	if (segments.cost) {
-		stats.push(theme.fg("warning", `${glyphs.cost} $${totals.cost.toFixed(3)}`));
-	}
-
-	return stats.join(` ${theme.fg("dim", "|")} `);
+	return {
+		tokens: stats.join(` ${theme.fg("dim", "|")} `),
+		cost: segments.cost ? theme.fg("warning", `${glyphs.cost} $${totals.cost.toFixed(3)}`) : "",
+	};
 }
 
 const ANSI_RESET = "\x1b[0m";
@@ -226,6 +229,7 @@ export interface FooterHooks {
 	setRequestRender: (fn: (() => void) | undefined) => void;
 	scheduleGitRefresh: () => void;
 	getLiveTps?: () => LiveTps | null;
+	getExtensionSegments?: () => readonly RegisteredFooterSegment[];
 	canEmbedInEditor?: () => boolean;
 }
 
@@ -278,6 +282,84 @@ function fitInlineSegments(
 	).filter(Boolean).join(separator);
 }
 
+type FooterSide = "left" | "right";
+type FooterLayoutMode = "plain" | "inline";
+
+// Empty built-ins retain their slots so before/after contributions remain visible.
+const FOOTER_ANCHORS: Record<FooterLayoutMode, Record<1 | 2, Record<FooterSide, readonly FooterBuiltinSegment[]>>> = {
+	plain: {
+		1: { left: ["cwd", "hostname", "sessionName", "git", "runtime", "timer"], right: ["context"] },
+		2: { left: ["model"], right: ["tokens", "cost"] },
+	},
+	inline: {
+		1: { left: ["sessionName", "git"], right: ["cwd", "hostname", "runtime", "timer", "context"] },
+		2: { left: ["model"], right: ["tokens", "cost"] },
+	},
+};
+
+function fitContributedRow(
+	row: 1 | 2,
+	mode: FooterLayoutMode,
+	builtins: Partial<Record<FooterBuiltinSegment, PrioritizedSegment>>,
+	contributions: readonly RegisteredFooterSegment[],
+	width: number,
+	theme: Theme,
+): InlineFooterLine | undefined {
+	let contributed = false;
+	const collect = (side: FooterSide): PrioritizedSegment[] => {
+		const parts: PrioritizedSegment[] = [];
+		const append = (matches: (position: FooterPosition) => boolean) => {
+			for (const segment of contributions) {
+				if (!matches(segment.position)) continue;
+				contributed = true;
+				parts.push({
+					text: renderStatusText(theme, segment.text),
+					compactText: segment.compactText && visibleWidth(segment.compactText) > 0
+						? renderStatusText(theme, segment.compactText)
+						: undefined,
+					priority: segment.priority,
+				});
+			}
+		};
+		const atEdge = (edge: "start" | "end") => append((position) => "row" in position
+			&& position.row === row && position.side === side && (position.edge ?? "end") === edge);
+		atEdge("start");
+		for (const anchor of FOOTER_ANCHORS[mode][row][side]) {
+			append((position) => "before" in position && position.before === anchor);
+			const builtin = builtins[anchor];
+			if (builtin?.text) parts.push(builtin);
+			append((position) => "after" in position && position.after === anchor);
+		}
+		atEdge("end");
+		return parts;
+	};
+	const left = collect("left");
+	const right = collect("right");
+	if (!contributed) return undefined;
+
+	const leftSeparator = row === 1 && mode === "plain" ? " " : theme.fg("dim", " · ");
+	const rightSeparator = row === 1 ? leftSeparator : theme.fg("dim", " | ");
+	const fitted = fitSegmentsByPriority([...left, ...right], width, theme.fg("dim", "..."), {
+		compactOrder: "priority",
+		gapWidth: (previous, next) => {
+			if (previous < left.length && next >= left.length) return 1;
+			return visibleWidth(next < left.length ? leftSeparator : rightSeparator);
+		},
+	});
+	// Truncation can remove an input's trailing reset; terminate each surviving style.
+	const join = (parts: string[], separator: string) => parts.filter(Boolean)
+		.map((part) => `${part}${ANSI_RESET}`).join(separator);
+	return {
+		left: join(fitted.slice(0, left.length), leftSeparator),
+		right: join(fitted.slice(left.length), rightSeparator),
+	};
+}
+
+function alignContributedRow(line: InlineFooterLine, width: number, theme: Theme): string {
+	if (!line.right) return truncateToWidth(line.left, width, theme.fg("dim", "..."));
+	return alignRight(line.left, line.right, width, theme);
+}
+
 function renderFooterContent(
 	ctx: ExtensionContext,
 	getState: () => FooterState,
@@ -287,6 +369,7 @@ function renderFooterContent(
 	footerData: FooterDataLike,
 	width: number,
 	getLiveTps: () => LiveTps | null,
+	getExtensionSegments: () => readonly RegisteredFooterSegment[],
 ): { mainLines: [string, string]; inlineLines: InlineFooterLines; extensionLines: string[] } {
 	if (width <= 0) {
 		return {
@@ -310,6 +393,10 @@ function renderFooterContent(
 	}
 	const meta = getModelMeta();
 	const totals = getUsageTotals(ctx);
+	const builtins: Partial<Record<FooterBuiltinSegment, PrioritizedSegment>> = {};
+	const contributions = segments.extensionSegments
+		? getExtensionSegments().filter((segment) => visibleWidth(segment.text) > 0)
+		: [];
 
 	const leftParts: PrioritizedSegment[] = [];
 	const inlineTopLeftParts: PrioritizedSegment[] = [];
@@ -332,6 +419,7 @@ function renderFooterContent(
 			},
 		});
 		inlineTopRightParts.push(leftParts.at(-1)!);
+		builtins.cwd = leftParts.at(-1)!;
 	}
 	if (segments.hostname) {
 		const shortHost = shortHostname(osHostname());
@@ -341,6 +429,7 @@ function renderFooterContent(
 				priority: 3,
 			});
 			inlineTopRightParts.push(leftParts.at(-1)!);
+			builtins.hostname = leftParts.at(-1)!;
 		}
 	}
 	const sessionName = ctx.sessionManager.getSessionName();
@@ -352,18 +441,21 @@ function renderFooterContent(
 		if (segments.sessionName) {
 			leftParts.push(sessionPart);
 			inlineTopLeftParts.push(sessionPart);
+			builtins.sessionName = sessionPart;
 		}
 	}
 	const gitSeg = renderGitSegment(theme, state.git, glyphs, segments);
 	if (gitSeg) {
 		leftParts.push({ text: gitSeg, priority: 1 });
 		inlineTopLeftParts.push(leftParts.at(-1)!);
+		builtins.git = leftParts.at(-1)!;
 	}
 	if (segments.runtime) {
 		const runtimeSeg = renderRuntimeSegment(theme, state.runtime, config.icons.mode, segments.nerdIconSpacing);
 		if (runtimeSeg) {
 			leftParts.push({ text: runtimeSeg, priority: 0 });
 			inlineTopRightParts.push(leftParts.at(-1)!);
+			builtins.runtime = leftParts.at(-1)!;
 		}
 	}
 	const timerSeg = renderTimerSegment(theme, state, glyphs);
@@ -377,6 +469,7 @@ function renderFooterContent(
 		// Narrow widths shed the live TPS before the timer itself.
 		leftParts.push({ text, compactText: liveTps === null ? undefined : timerSeg, priority: 3 });
 		inlineTopRightParts.push(leftParts.at(-1)!);
+		builtins.timer = leftParts.at(-1)!;
 	}
 
 	// The context bar competes with the left segments for the same row:
@@ -384,8 +477,8 @@ function renderFooterContent(
 	let contextText = "";
 	let contextCompact: string | undefined;
 	if (segments.context) {
-		contextText = renderContextBar(theme, ctx, width, glyphs, config.icons.mode);
-		const compact = renderContextCompact(theme, ctx, glyphs);
+		contextText = renderContextBar(theme, ctx, width, glyphs, config.icons.mode, segments.contextBar);
+		const compact = renderContextCompact(theme, ctx, glyphs, segments.contextBar);
 		if (compact && visibleWidth(compact) < visibleWidth(contextText)) {
 			contextCompact = compact;
 		}
@@ -396,16 +489,20 @@ function renderFooterContent(
 		allParts.push({ text: contextText, compactText: contextCompact, priority: 0 });
 		// Context stays at the far right; cwd is the first item in this group.
 		inlineTopRightParts.push({ text: contextText, compactText: contextCompact, priority: 0 });
+		builtins.context = allParts.at(-1)!;
 	}
 
 	const fitted = fitSegmentsByPriority(allParts, width, theme.fg("dim", "..."));
 	const fittedContext = contextText ? fitted.pop() ?? "" : "";
-	const line1 = alignRight(fitted.filter(Boolean).join(" "), fittedContext, width, theme);
+	const contributedTop = fitContributedRow(1, "plain", builtins, contributions, width, theme);
+	const line1 = contributedTop
+		? alignContributedRow(contributedTop, width, theme)
+		: alignRight(fitted.filter(Boolean).join(" "), fittedContext, width, theme);
 
 	const inlineLeftBudget = Math.floor(width * 0.45);
 	const inlineTopLeft = fitInlineSegments(inlineTopLeftParts, inlineLeftBudget, theme);
 	const inlineRightBudget = Math.max(0, width - visibleWidth(inlineTopLeft) - (inlineTopLeft ? 1 : 0));
-	const inlineTop: InlineFooterLine = {
+	const inlineTop: InlineFooterLine = fitContributedRow(1, "inline", builtins, contributions, width, theme) ?? {
 		left: inlineTopLeft,
 		right: fitInlineSegments(inlineTopRightParts, inlineRightBudget, theme),
 	};
@@ -420,9 +517,16 @@ function renderFooterContent(
 		modelParts.push(theme.fg(effortColor(meta.effort), `${glyphs.thinking} ${meta.effort}`));
 	}
 	const modelBlock = modelParts.join(theme.fg("dim", " · "));
-	const statsBlock = renderStatsBlock(theme, totals, glyphs, segments);
-	const inlineBottom = fitInlineLine(modelBlock, statsBlock, width, theme);
-	const line2 = alignRight(inlineBottom.left, inlineBottom.right, width, theme);
+	const stats = renderStatsSegments(theme, totals, glyphs, segments);
+	const statsBlock = [stats.tokens, stats.cost].filter(Boolean).join(` ${theme.fg("dim", "|")} `);
+	builtins.model = { text: modelBlock, priority: 0 };
+	builtins.tokens = { text: stats.tokens, priority: 2 };
+	builtins.cost = { text: stats.cost, priority: 1 };
+	const contributedBottom = fitContributedRow(2, "plain", builtins, contributions, width, theme);
+	const inlineBottom = contributedBottom ?? fitInlineLine(modelBlock, statsBlock, width, theme);
+	const line2 = contributedBottom
+		? alignContributedRow(contributedBottom, width, theme)
+		: alignRight(inlineBottom.left, inlineBottom.right, width, theme);
 	const mainLines: [string, string] = [line1, line2]
 		.map((line) => truncateToWidth(line, width, theme.fg("dim", "..."))) as [string, string];
 	const extensionLines = segments.extensionStatuses
@@ -439,8 +543,11 @@ export function installFooter(
 	hooks: FooterHooks,
 ): FooterHandle {
 	let renderInline: (width: number) => InlineFooterLines | undefined = () => undefined;
+	let mounted = false;
 
 	ctx.ui.setFooter((tui, theme, footerData) => {
+		mounted = true;
+		let disposed = false;
 		hooks.setRequestRender(() => tui.requestRender());
 		const unsubBranch = footerData.onBranchChange(() => {
 			hooks.scheduleGitRefresh();
@@ -455,12 +562,16 @@ export function installFooter(
 			footerData,
 			width,
 			hooks.getLiveTps ?? (() => null),
+			hooks.getExtensionSegments ?? (() => []),
 		);
 
 		renderInline = (width) => getContent(width).inlineLines;
 
 		return {
 			dispose() {
+				if (disposed) return;
+				disposed = true;
+				mounted = false;
 				unsubBranch();
 				hooks.setRequestRender(undefined);
 				renderInline = () => undefined;
@@ -478,7 +589,7 @@ export function installFooter(
 	return {
 		renderInline: (width) => renderInline(width),
 		cleanup() {
-			ctx.ui.setFooter(undefined);
+			if (mounted) ctx.ui.setFooter(undefined);
 		},
 	};
 }

package/extensions/open-tui/index.ts

@@ -3,6 +3,7 @@ import { type OpenTuiConfig, DEFAULT_CONFIG, ensureConfigExists, loadConfig, sav
 import { installCopyButtons, markCopyScope } from "./copy-buttons.ts";
 import { installEditor } from "./editor.ts";
 import { installFooter } from "./footer.ts";
+import { createFooterSegments } from "./footer-segments.ts";
 import { installHeader } from "./header.ts";
 import { emptyGitStatus, readGitStatus } from "./git.ts";
 import { readRuntimeInfo } from "./runtime.ts";
@@ -52,6 +53,7 @@ export default function (pi: ExtensionAPI) {
 	let editor: ReturnType<typeof installEditor> | undefined;
 	let copyButtons: ReturnType<typeof installCopyButtons> | undefined;
 	let pendingUiChange: PendingUiChange | undefined;
+	const footerSegments = createFooterSegments(pi.events, () => requestFooterRender?.());
 
 	// thinking-peek state (rendered by Pi inside its hidden-thinking block)
 	const peek: PeekState = createPeekState();
@@ -114,11 +116,14 @@ export default function (pi: ExtensionAPI) {
 				{
 					setRequestRender: (fn) => {
 						requestFooterRender = fn ?? undefined;
+						if (!fn) footerSegments.deactivate();
+						else if (active && sessionLifecycle.isCurrent()) footerSegments.activate();
 					},
 					scheduleGitRefresh: () => {
 						void scheduleGitRefresh(ctx);
 					},
 					getLiveTps: () => turnTelemetry.getLiveTps(),
+					getExtensionSegments: footerSegments.getSegments,
 					canEmbedInEditor: () => editor?.isFramed() ?? false,
 				},
 			);
@@ -138,6 +143,7 @@ export default function (pi: ExtensionAPI) {
 				isEnabled: () => config.copyButtons,
 			});
 			active = true;
+			if (requestFooterRender) footerSegments.activate();
 		}
 	};
 
@@ -237,6 +243,7 @@ export default function (pi: ExtensionAPI) {
 	pi.on("session_shutdown", async (_event, ctx) => {
 		sessionLifecycle.shutdown();
 		stopWorkingTimer();
+		footerSegments.deactivate();
 		if (active) {
 			uninstallUi(ctx);
 		}
@@ -373,7 +380,7 @@ export default function (pi: ExtensionAPI) {
 				config = loadConfig();
 				configLoaded = true;
 			}
-			return config.enabled ? config.toolView.mode : "native";
+			return config.enabled ? config.toolView : { ...config.toolView, mode: "native" };
 		},
 		() => resolveGlyphs(config.icons.mode),
 	);