rinco-pi-hud 1.0.0

package/extensions/hud/footer/layout.ts

@@ -0,0 +1,183 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+export type CategorizedFooterRows = {
+	project: string[];
+	session: string[];
+	usage: string[];
+};
+
+function joinStatusTexts(statusTexts: string[], separator: string): string {
+	return statusTexts.filter(Boolean).join(separator);
+}
+
+function fitStatusTexts(statusTexts: string[], maxWidth: number, separator: string): string {
+	if (maxWidth <= 0) return "";
+
+	const fitted: string[] = [];
+	for (const text of statusTexts) {
+		const candidate = joinStatusTexts([...fitted, text], separator);
+		if (visibleWidth(candidate) <= maxWidth) {
+			fitted.push(text);
+			continue;
+		}
+
+		if (fitted.length === 0) {
+			return maxWidth > 1 ? truncateToWidth(text, maxWidth, "…") : "";
+		}
+		break;
+	}
+
+	return joinStatusTexts(fitted, separator);
+}
+
+function appendStatusArea(base: string, statusText: string, separator: string): string {
+	if (!base) return statusText;
+	if (!statusText) return base;
+	return `${base}${separator}${statusText}`;
+}
+
+function prependStatusArea(base: string, statusText: string, separator: string): string {
+	if (!base) return statusText;
+	if (!statusText) return base;
+	return `${statusText}${separator}${base}`;
+}
+
+export function composeBuiltInFooterContent(left: string, right: string, innerWidth: number): string {
+	const leftWidth = visibleWidth(left);
+	const rightWidth = visibleWidth(right);
+	if (!right) return truncateToWidth(left, innerWidth, "");
+	if (!left) {
+		const fittedRight = truncateToWidth(right, innerWidth, "");
+		return `${" ".repeat(Math.max(0, innerWidth - visibleWidth(fittedRight)))}${fittedRight}`;
+	}
+	if (leftWidth + 1 + rightWidth <= innerWidth) {
+		return `${left}${" ".repeat(innerWidth - leftWidth - rightWidth)}${right}`;
+	}
+
+	const gap = innerWidth > 1 ? 1 : 0;
+	const available = Math.max(0, innerWidth - gap);
+	let rightBudget = Math.min(rightWidth, Math.max(0, Math.floor(available * 0.48)));
+	let leftBudget = Math.min(leftWidth, Math.max(0, available - rightBudget));
+	let remaining = Math.max(0, available - leftBudget - rightBudget);
+	const leftExtra = Math.min(remaining, Math.max(0, leftWidth - leftBudget));
+	leftBudget += leftExtra;
+	remaining -= leftExtra;
+	rightBudget += Math.min(remaining, Math.max(0, rightWidth - rightBudget));
+	let fittedLeft = truncateToWidth(left, leftBudget, "");
+	let fittedRight = truncateToWidth(right, rightBudget, "");
+	for (let pass = 0; pass < 2; pass += 1) {
+		let spare = Math.max(
+			0,
+			available - visibleWidth(fittedLeft) - visibleWidth(fittedRight),
+		);
+		if (spare === 0) break;
+		if (visibleWidth(fittedLeft) < leftWidth) {
+			fittedLeft = truncateToWidth(left, visibleWidth(fittedLeft) + spare, "");
+			spare = Math.max(
+				0,
+				available - visibleWidth(fittedLeft) - visibleWidth(fittedRight),
+			);
+		}
+		if (spare > 0 && visibleWidth(fittedRight) < rightWidth) {
+			fittedRight = truncateToWidth(right, visibleWidth(fittedRight) + spare, "");
+		}
+	}
+	const padding = Math.max(0, innerWidth - visibleWidth(fittedLeft) - visibleWidth(fittedRight));
+	return `${fittedLeft}${" ".repeat(padding)}${fittedRight}`;
+}
+
+export function composeFooterContent(
+	builtInLeft: string,
+	builtInRight: string,
+	extensionLeft: string[],
+	extensionMiddle: string[],
+	extensionRight: string[],
+	separator: string,
+	innerWidth: number,
+): string {
+	const builtInLeftWidth = visibleWidth(builtInLeft);
+	const builtInRightWidth = visibleWidth(builtInRight);
+	const minimumGap = builtInLeft && builtInRight ? 1 : 0;
+
+	if (builtInLeftWidth + minimumGap + builtInRightWidth > innerWidth) {
+		return composeBuiltInFooterContent(builtInLeft, builtInRight, innerWidth);
+	}
+
+	const available = Math.max(0, innerWidth - builtInLeftWidth - builtInRightWidth - minimumGap);
+	const reservedMiddle = fitStatusTexts(
+		extensionMiddle,
+		Math.max(0, Math.floor(available * 0.4)),
+		separator,
+	);
+	const sideAvailable = Math.max(0, available - visibleWidth(reservedMiddle));
+	let remaining = sideAvailable;
+	const leftConnectorWidth = builtInLeft && extensionLeft.length > 0 ? visibleWidth(separator) : 0;
+	const rightConnectorWidth =
+		builtInRight && extensionRight.length > 0 ? visibleWidth(separator) : 0;
+	let leftStatus = "";
+	let rightStatus = "";
+
+	if (extensionLeft.length > 0 && extensionRight.length > 0) {
+		const leftBudget = Math.max(0, Math.floor(sideAvailable / 2) - leftConnectorWidth);
+		leftStatus = fitStatusTexts(extensionLeft, leftBudget, separator);
+		remaining -= leftStatus ? leftConnectorWidth + visibleWidth(leftStatus) : 0;
+
+		const rightBudget = Math.max(0, remaining - rightConnectorWidth);
+		rightStatus = fitStatusTexts(extensionRight, rightBudget, separator);
+		remaining -= rightStatus ? rightConnectorWidth + visibleWidth(rightStatus) : 0;
+
+		const expandedLeftBudget = Math.max(0, remaining + visibleWidth(leftStatus));
+		const expandedLeftStatus = fitStatusTexts(extensionLeft, expandedLeftBudget, separator);
+		if (visibleWidth(expandedLeftStatus) > visibleWidth(leftStatus)) {
+			remaining += leftStatus ? leftConnectorWidth + visibleWidth(leftStatus) : 0;
+			leftStatus = expandedLeftStatus;
+			remaining -= leftStatus ? leftConnectorWidth + visibleWidth(leftStatus) : 0;
+		}
+	} else if (extensionLeft.length > 0) {
+		leftStatus = fitStatusTexts(
+			extensionLeft,
+			Math.max(0, sideAvailable - leftConnectorWidth),
+			separator,
+		);
+		remaining -= leftStatus ? leftConnectorWidth + visibleWidth(leftStatus) : 0;
+	} else if (extensionRight.length > 0) {
+		rightStatus = fitStatusTexts(
+			extensionRight,
+			Math.max(0, sideAvailable - rightConnectorWidth),
+			separator,
+		);
+		remaining -= rightStatus ? rightConnectorWidth + visibleWidth(rightStatus) : 0;
+	}
+
+	const left = appendStatusArea(builtInLeft, leftStatus, separator);
+	const right = prependStatusArea(builtInRight, rightStatus, separator);
+	const gapWidth = Math.max(0, innerWidth - visibleWidth(left) - visibleWidth(right));
+	const middle = fitStatusTexts(extensionMiddle, gapWidth, separator);
+	const middleWidth = visibleWidth(middle);
+
+	if (!middle || middleWidth <= 0) {
+		return `${left}${" ".repeat(gapWidth)}${right}`;
+	}
+
+	const leftPadding = Math.floor((gapWidth - middleWidth) / 2);
+	const rightPadding = gapWidth - middleWidth - leftPadding;
+	return `${left}${" ".repeat(leftPadding)}${middle}${" ".repeat(rightPadding)}${right}`;
+}
+
+function composeLeftAlignedRow(parts: string[], separator: string, innerWidth: number): string {
+	const content = joinStatusTexts(parts, separator);
+	if (innerWidth <= 1) return truncateToWidth(content, Math.max(0, innerWidth), "");
+	return truncateToWidth(content, innerWidth, "…");
+}
+
+export function composeCategorizedFooterRows(
+	rows: CategorizedFooterRows,
+	separator: string,
+	innerWidth: number,
+): [string, string, string] {
+	return [
+		composeLeftAlignedRow(rows.project, separator, innerWidth),
+		composeLeftAlignedRow(rows.session, separator, innerWidth),
+		composeLeftAlignedRow(rows.usage, separator, innerWidth),
+	];
+}

package/extensions/hud/footer/render-labels.ts

@@ -0,0 +1,305 @@
+/**
+ * Footer render-time label builders.
+ *
+ * `installFooter`'s render callback composes dozens of small styled label
+ * strings (git status, telemetry counters, sanitized state fields) before
+ * dispatching to either the custom `footerFormat` template or the default
+ * categorized rows. Those label computations are pulled out here as pure
+ * functions of `(state, config, theme, colorSource, ...)` so the render
+ * callback itself stays focused on composition/layout.
+ */
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import type { ColorSource, PolishedTuiConfig } from "../config/config.js";
+import type { McpStatus } from "../segments/mcp-status.js";
+import { formatSkillCounts } from "../segments/skill-activity.js";
+import type { FooterState } from "../state/index.js";
+import { getTelemetryStats } from "../state/telemetry.js";
+import { buildSessionDurationLabel, formatCount } from "../telemetry/format.js";
+import { renderStyleForSource, type ThemeLike } from "../ui/style.js";
+import { sanitizeExtensionStatusText } from "../segments/extension-status.js";
+
+export function safeStatusText(value: string | null | undefined, maxLength = 256): string {
+	if (!value) return "";
+	return sanitizeExtensionStatusText(value.slice(0, maxLength * 4)).slice(0, maxLength);
+}
+
+export type SanitizedFooterInputs = {
+	safeCwd: string;
+	safeRuntime:
+		| { name: string; symbol: string; style: string; version: string | undefined }
+		| undefined;
+	safePackageVersion: { ecosystem: string; version: string } | undefined;
+	safeCommit:
+		| { oid: string | null; detached: boolean; tag: string | null }
+		| undefined;
+};
+
+/** Sanitize the state/ctx fields that flow into the terminal so a malicious
+ * runtime name, git branch, etc. cannot inject ANSI/control sequences. */
+export function sanitizeFooterInputs(
+	ctx: Pick<ExtensionContext, "cwd">,
+	state: FooterState,
+): SanitizedFooterInputs {
+	const safeCwd = safeStatusText(ctx.cwd, 1024);
+	const safeRuntime = state.runtime
+		? {
+				...state.runtime,
+				name: safeStatusText(state.runtime.name, 64),
+				symbol: safeStatusText(state.runtime.symbol, 32),
+				version: safeStatusText(state.runtime.version, 128) || undefined,
+			}
+		: undefined;
+	const safePackageVersion = state.packageVersion
+		? {
+				ecosystem: safeStatusText(state.packageVersion.ecosystem, 64),
+				version: safeStatusText(state.packageVersion.version, 160),
+			}
+		: undefined;
+	const safeCommit = state.commit
+		? {
+				...state.commit,
+				oid: safeStatusText(state.commit.oid, 64) || null,
+				tag: safeStatusText(state.commit.tag, 160) || null,
+			}
+		: undefined;
+	return { safeCwd, safeRuntime, safePackageVersion, safeCommit };
+}
+
+export type GitStatusLabels = {
+	gitColor: (text: string) => string;
+	gitStatusColor: (text: string) => string;
+	gitIcon: string;
+	statusBlock: string;
+	gitStateLabel: string;
+	gitStateBlock: string;
+};
+
+/** Build the ` [icons ahead/behind]` git-status block and the git operation
+ * state (REBASING/MERGING/…) block, both pre-styled for the active theme. */
+export function buildGitStatusLabels(
+	state: FooterState,
+	config: PolishedTuiConfig,
+	theme: ThemeLike,
+	colorSource: ColorSource,
+): GitStatusLabels {
+	const gitColor = (text: string) =>
+		renderStyleForSource(theme, colorSource, config.colors.gitBranch, text);
+	const gitStatusColor = (text: string) =>
+		renderStyleForSource(theme, colorSource, config.colors.gitStatus, text);
+	const gitIcon = config.icons.git ? gitColor(config.icons.git) : "";
+	const gitCounts = config.footerSegments.gitCounts;
+	const stashLabel =
+		state.stashed > 0
+			? gitCounts
+				? `${config.icons.stashed} ${state.stashed}`
+				: config.icons.stashed
+			: "";
+	const allStatus = [
+		state.conflicted > 0 ? config.icons.conflicted : "",
+		stashLabel,
+		state.deleted > 0 ? config.icons.deleted : "",
+		state.renamed > 0 ? config.icons.renamed : "",
+		state.modified > 0 ? config.icons.modified : "",
+		state.typechanged > 0 ? config.icons.typechanged : "",
+		state.staged > 0 ? config.icons.staged : "",
+		state.untracked > 0 ? config.icons.untracked : "",
+	]
+		.filter(Boolean)
+		.join(" ");
+	const aheadBehind = (() => {
+		if (state.ahead > 0 && state.behind > 0) {
+			return gitCounts
+				? `${config.icons.ahead} ${state.ahead} ${config.icons.behind} ${state.behind}`
+				: config.icons.diverged;
+		}
+		if (state.ahead > 0)
+			return gitCounts ? `${config.icons.ahead} ${state.ahead}` : config.icons.ahead;
+		if (state.behind > 0)
+			return gitCounts ? `${config.icons.behind} ${state.behind}` : config.icons.behind;
+		return "";
+	})();
+	const gitStatusText = [allStatus, aheadBehind].filter(Boolean).join(" ");
+	const statusBlock = gitStatusText ? gitStatusColor(`[${gitStatusText}]`) : "";
+	const gitStateLabel = safeStatusText(state.gitStateLabel, 64);
+	const gitStateBlock = gitStateLabel ? gitStatusColor(gitStateLabel) : "";
+	return { gitColor, gitStatusColor, gitIcon, statusBlock, gitStateLabel, gitStateBlock };
+}
+
+export type TelemetryLabels = {
+	projectCategoryLabel: string;
+	sessionCategoryLabel: string;
+	usageCategoryLabel: string;
+	sessionNameLabel: string;
+	modelValueLabel: string;
+	modelStatusLabel: string;
+	providerId: string;
+	modelId: string;
+	thinkingLabel: string;
+	turnLabel: string;
+	cacheReadLabel: string;
+	cacheWriteLabel: string;
+	cacheHitLabel: string;
+	cacheDetailsLabel: string;
+	codexUsageLabel: string;
+	instructionFilesLabel: string;
+	agentsFilesLabel: string;
+	claudeFilesLabel: string;
+	skillsLabel: string;
+	activeSkillsLabel: string;
+	extensionsLabel: string;
+	configCountsLabel: string;
+	mcpLabel: string;
+	toolCountsLabel: string;
+	runningToolsLabel: string;
+	activeAgentsLabel: string;
+};
+
+/** Build every session/usage-row telemetry label (model, thinking level, turn
+ * count, cache/tool/agent counters, skills, MCP, Codex usage, …). */
+export function buildTelemetryLabels(
+	ctx: Pick<ExtensionContext, "model">,
+	state: FooterState,
+	config: PolishedTuiConfig,
+	theme: ThemeLike,
+	colorSource: ColorSource,
+	mcpStatus: McpStatus | undefined,
+): TelemetryLabels {
+	const statusStyle = (style: string, text: string) =>
+		text ? renderStyleForSource(theme, colorSource, style, text) : "";
+
+	const projectCategoryLabel = statusStyle(config.colors.cwd, "⌂ project");
+	const sessionCategoryLabel = statusStyle(config.colors.runtimePrefix, "λ session");
+	const usageCategoryLabel = statusStyle(config.colors.contextNormal, "◉ usage");
+
+	const sessionName = safeStatusText(state.telemetry.sessionName, 256);
+	const sessionNameLabel = statusStyle(config.colors.gitBranch, sessionName ? `◈ ${sessionName}` : "");
+
+	const providerId = safeStatusText(ctx.model?.provider, 128);
+	const modelId = safeStatusText(ctx.model?.id, 256);
+	const modelText = providerId && modelId ? `${providerId}/${modelId}` : modelId || providerId;
+	const modelValueLabel = statusStyle(config.colors.runtimePrefix, modelText);
+	const modelStatusLabel = statusStyle(config.colors.runtimePrefix, modelText ? `λ ${modelText}` : "");
+
+	const thinkingLabel = state.telemetry.modelSupportsReasoning
+		? statusStyle(
+				config.colors.extensionStatus,
+				`◈ ${state.telemetry.thinkingLevel === "off" ? "thinking off" : state.telemetry.thinkingLevel}`,
+			)
+		: "";
+	const turnLabel =
+		state.telemetry.turnIndex > 0
+			? statusStyle(config.colors.extensionStatus, `↺ ${state.telemetry.turnIndex}`)
+			: "";
+
+	const cacheReadLabel =
+		state.usageTotals.cacheRead > 0
+			? statusStyle(config.colors.tokens, `R ${formatCount(state.usageTotals.cacheRead)}`)
+			: "";
+	const cacheWriteLabel =
+		state.usageTotals.cacheWrite > 0
+			? statusStyle(config.colors.tokens, `W ${formatCount(state.usageTotals.cacheWrite)}`)
+			: "";
+	const cacheHitLabel =
+		state.usageTotals.latestCacheHitRate !== undefined
+			? statusStyle(
+					config.colors.contextNormal,
+					`CH ${state.usageTotals.latestCacheHitRate.toFixed(1)}%`,
+				)
+			: "";
+	const cacheDetailsLabel = [cacheReadLabel, cacheWriteLabel].filter(Boolean).join(" ");
+
+	const codexStyle =
+		state.codexUsageStatus === "checking"
+			? config.colors.contextWarning
+			: state.codexUsageStatus === "usage error"
+				? config.colors.contextError
+				: config.colors.contextNormal;
+	const codexUsageLabel = statusStyle(
+		codexStyle,
+		state.codexUsageStatus ? `◉ ${safeStatusText(state.codexUsageStatus, 256)}` : "",
+	);
+
+	const instructionFilesLabel =
+		state.configCounts.instructionFiles.total > 0
+			? statusStyle(config.colors.runtimePrefix, `※ ${state.configCounts.instructionFiles.total}`)
+			: "";
+	const agentsFilesLabel =
+		state.configCounts.instructionFiles.agentsMd > 0
+			? statusStyle(
+					config.colors.runtimePrefix,
+					String(state.configCounts.instructionFiles.agentsMd),
+				)
+			: "";
+	const claudeFilesLabel =
+		state.configCounts.instructionFiles.claudeMd > 0
+			? statusStyle(
+					config.colors.runtimePrefix,
+					String(state.configCounts.instructionFiles.claudeMd),
+				)
+			: "";
+
+	const skillCounts = state.skillCounts ?? { total: 0, active: 0 };
+	const skillsLabel = statusStyle(config.colors.extensionStatus, formatSkillCounts(skillCounts));
+	const activeSkillsLabel =
+		skillCounts.total > 0
+			? statusStyle(config.colors.extensionStatus, String(skillCounts.active))
+			: "";
+
+	const extensionsLabel =
+		state.configCounts.packages > 0
+			? statusStyle(config.colors.sessionDuration, `◈ ${state.configCounts.packages}`)
+			: "";
+	const configCountsLabel = [instructionFilesLabel, extensionsLabel].filter(Boolean).join(" ");
+
+	const mcpLabel = mcpStatus
+		? statusStyle(config.colors.gitStatus, `⊕ ${mcpStatus.connected}/${mcpStatus.total}`)
+		: "";
+
+	const telemetryStats = getTelemetryStats(state.telemetry);
+	const toolCountsText = Object.entries(telemetryStats.completedToolCounts)
+		.filter(([, count]) => count > 0)
+		.map(([tool, count]) => `${tool}${count > 1 ? ` × ${count}` : ""}`)
+		.join(" ");
+	const toolCountsLabel = statusStyle(config.colors.contextNormal, toolCountsText);
+	const runningToolsText = telemetryStats.recentRunningTools
+		.map((tool) => {
+			const target = tool.target ? `:${truncateToWidth(tool.target, 18, "…")}` : "";
+			return `↻ ${tool.name}${target} (${buildSessionDurationLabel(tool.startTime)})`;
+		})
+		.join(" ");
+	const runningToolsLabel = statusStyle(config.colors.contextWarning, runningToolsText);
+	const activeAgentsLabel =
+		telemetryStats.activeAgentRuns > 0
+			? statusStyle(config.colors.extensionStatus, `↻ agent × ${telemetryStats.activeAgentRuns}`)
+			: statusStyle(config.colors.muted, "agent idle");
+
+	return {
+		projectCategoryLabel,
+		sessionCategoryLabel,
+		usageCategoryLabel,
+		sessionNameLabel,
+		modelValueLabel,
+		modelStatusLabel,
+		providerId,
+		modelId,
+		thinkingLabel,
+		turnLabel,
+		cacheReadLabel,
+		cacheWriteLabel,
+		cacheHitLabel,
+		cacheDetailsLabel,
+		codexUsageLabel,
+		instructionFilesLabel,
+		agentsFilesLabel,
+		claudeFilesLabel,
+		skillsLabel,
+		activeSkillsLabel,
+		extensionsLabel,
+		configCountsLabel,
+		mcpLabel,
+		toolCountsLabel,
+		runningToolsLabel,
+		activeAgentsLabel,
+	};
+}