@oh-my-pi/pi-coding-agent 3.14.0 → 3.15.0

package/src/modes/interactive/components/status-line.ts

@@ -4,62 +4,25 @@ import { dirname, join } from "node:path";
 import type { AssistantMessage } from "@oh-my-pi/pi-ai";
 import { type Component, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
 import type { AgentSession } from "../../../core/agent-session";
+import type { StatusLineSegmentOptions, StatusLineSettings } from "../../../core/settings-manager";
 import { theme } from "../theme/theme";
+import { getPreset } from "./status-line/presets";
+import { renderSegment, type SegmentContext } from "./status-line/segments";
+import { getSeparator } from "./status-line/separators";
 
-// Thinking level icons (Nerd Font)
-const THINKING_ICONS: Record<string, string> = {
-	minimal: "🤨 min",
-	low: "🤔 low",
-	medium: "🤓 mid",
-	high: "🤯 high",
-	xhigh: "🧠 xhi",
-};
-
-// Nerd Font icons
-const ICONS = {
-	model: "\uec19", //  robot/model
-	folder: "\uf115 ", //  folder
-	branch: "\ue725", //  git branch
-	sep: "\ue0b1", //  powerline thin chevron
-	tokens: "\ue26b", //  coins
-	context: "\ue70f", //  window
-	auto: "\udb80\udc68", //  auto
-	pi: "\ue22c", //  pi
-} as const;
-
-/** Create a colored text segment with background */
-function plSegment(content: string, fgAnsi: string, bgAnsi: string): string {
-	return `${bgAnsi}${fgAnsi} ${content} \x1b[0m`;
-}
-
-/** Create separator with background */
-function plSep(sepAnsi: string, bgAnsi: string): string {
-	return `${bgAnsi}${sepAnsi}${ICONS.sep}\x1b[0m`;
-}
+// ═══════════════════════════════════════════════════════════════════════════
+// Rendering Helpers
+// ═══════════════════════════════════════════════════════════════════════════
 
-/** Create end cap - solid arrow transitioning bg to terminal default */
-function plEnd(bgAnsi: string): string {
-	// Use the bg color as fg for the arrow (creates the triangle effect)
-	const fgFromBg = bgAnsi.replace("\x1b[48;", "\x1b[38;");
-	return `${fgFromBg}\ue0b0\x1b[0m`;
-}
-
-/**
- * Sanitize text for display in a single-line status.
- * Removes newlines, tabs, carriage returns, and other control characters.
- */
+/** Sanitize text for display in a single-line status */
 function sanitizeStatusText(text: string): string {
-	// Replace newlines, tabs, carriage returns with space, then collapse multiple spaces
 	return text
 		.replace(/[\r\n\t]/g, " ")
 		.replace(/ +/g, " ")
 		.trim();
 }
 
-/**
- * Find the git root directory by walking up from cwd.
- * Returns the path to .git/HEAD if found, null otherwise.
- */
+/** Find the git root directory by walking up from cwd */
 function findGitHeadPath(): string | null {
 	let dir = process.cwd();
 	while (true) {
@@ -69,43 +32,53 @@ function findGitHeadPath(): string | null {
 		}
 		const parent = dirname(dir);
 		if (parent === dir) {
-			// Reached filesystem root
 			return null;
 		}
 		dir = parent;
 	}
 }
 
-/**
- * Footer component that shows pwd, token stats, and context usage
- */
+// ═══════════════════════════════════════════════════════════════════════════
+// StatusLineComponent
+// ═══════════════════════════════════════════════════════════════════════════
+
 export class StatusLineComponent implements Component {
 	private session: AgentSession;
-	private cachedBranch: string | null | undefined = undefined; // undefined = not checked yet, null = not in git repo, string = branch name
+	private settings: StatusLineSettings = {};
+	private cachedBranch: string | null | undefined = undefined;
 	private gitWatcher: FSWatcher | null = null;
 	private onBranchChange: (() => void) | null = null;
 	private autoCompactEnabled: boolean = true;
 	private hookStatuses: Map<string, string> = new Map();
+	private subagentCount: number = 0;
+	private sessionStartTime: number = Date.now();
 
-	// Git status caching (1s TTL to avoid excessive subprocess spawns)
+	// Git status caching (1s TTL)
 	private cachedGitStatus: { staged: number; unstaged: number; untracked: number } | null = null;
 	private gitStatusLastFetch = 0;
 
 	constructor(session: AgentSession) {
 		this.session = session;
+		// Load initial settings
+		this.settings = session.settingsManager?.getStatusLineSettings() ?? {};
+	}
+
+	updateSettings(settings: StatusLineSettings): void {
+		this.settings = settings;
 	}
 
 	setAutoCompactEnabled(enabled: boolean): void {
 		this.autoCompactEnabled = enabled;
 	}
 
-	/**
-	 * Set hook status text to display in the footer.
-	 * Text is sanitized (newlines/tabs replaced with spaces) and truncated to terminal width.
-	 * ANSI escape codes for styling are preserved.
-	 * @param key - Unique key to identify this status
-	 * @param text - Status text, or undefined to clear
-	 */
+	setSubagentCount(count: number): void {
+		this.subagentCount = count;
+	}
+
+	setSessionStartTime(time: number): void {
+		this.sessionStartTime = time;
+	}
+
 	setHookStatus(key: string, text: string | undefined): void {
 		if (text === undefined) {
 			this.hookStatuses.delete(key);
@@ -114,42 +87,32 @@ export class StatusLineComponent implements Component {
 		}
 	}
 
-	/**
-	 * Set up a file watcher on .git/HEAD to detect branch changes.
-	 * Call the provided callback when branch changes.
-	 */
 	watchBranch(onBranchChange: () => void): void {
 		this.onBranchChange = onBranchChange;
 		this.setupGitWatcher();
 	}
 
 	private setupGitWatcher(): void {
-		// Clean up existing watcher
 		if (this.gitWatcher) {
 			this.gitWatcher.close();
 			this.gitWatcher = null;
 		}
 
 		const gitHeadPath = findGitHeadPath();
-		if (!gitHeadPath) {
-			return;
-		}
+		if (!gitHeadPath) return;
 
 		try {
 			this.gitWatcher = watch(gitHeadPath, () => {
-				this.cachedBranch = undefined; // Invalidate cache
+				this.cachedBranch = undefined;
 				if (this.onBranchChange) {
 					this.onBranchChange();
 				}
 			});
 		} catch {
-			// Silently fail if we can't watch
+			// Silently fail
 		}
 	}
 
-	/**
-	 * Clean up the file watcher
-	 */
 	dispose(): void {
 		if (this.gitWatcher) {
 			this.gitWatcher.close();
@@ -158,16 +121,10 @@ export class StatusLineComponent implements Component {
 	}
 
 	invalidate(): void {
-		// Invalidate cached branch so it gets re-read on next render
 		this.cachedBranch = undefined;
 	}
 
-	/**
-	 * Get current git branch by reading .git/HEAD directly.
-	 * Returns null if not in a git repo, branch name otherwise.
-	 */
 	private getCurrentBranch(): string | null {
-		// Return cached value if available
 		if (this.cachedBranch !== undefined) {
 			return this.cachedBranch;
 		}
@@ -181,25 +138,17 @@ export class StatusLineComponent implements Component {
 			const content = readFileSync(gitHeadPath, "utf8").trim();
 
 			if (content.startsWith("ref: refs/heads/")) {
-				// Normal branch: extract branch name
 				this.cachedBranch = content.slice(16);
 			} else {
-				// Detached HEAD state
 				this.cachedBranch = "detached";
 			}
 		} catch {
-			// Not in a git repo or error reading file
 			this.cachedBranch = null;
 		}
 
 		return this.cachedBranch;
 	}
 
-	/**
-	 * Get git status indicators (staged, unstaged, untracked counts).
-	 * Returns null if not in a git repo.
-	 * Cached for 1s to avoid excessive subprocess spawns.
-	 */
 	private getGitStatus(): { staged: number; unstaged: number; untracked: number } | null {
 		const now = Date.now();
 		if (now - this.gitStatusLastFetch < 1000) {
@@ -219,21 +168,18 @@ export class StatusLineComponent implements Component {
 
 			for (const line of output.split("\n")) {
 				if (!line) continue;
-				const x = line[0]; // Index (staged) status
-				const y = line[1]; // Working tree status
+				const x = line[0];
+				const y = line[1];
 
-				// Untracked files
 				if (x === "?" && y === "?") {
 					untracked++;
 					continue;
 				}
 
-				// Staged changes (first column is not space or ?)
 				if (x && x !== " " && x !== "?") {
 					staged++;
 				}
 
-				// Unstaged changes (second column is not space)
 				if (y && y !== " ") {
 					unstaged++;
 				}
@@ -249,10 +195,19 @@ export class StatusLineComponent implements Component {
 		}
 	}
 
-	private buildStatusLine(): string {
+	private buildSegmentContext(width: number): SegmentContext {
 		const state = this.session.state;
 
-		// Get context percentage from last assistant message
+		// Get usage statistics
+		const usageStats = this.session.sessionManager?.getUsageStatistics() ?? {
+			input: 0,
+			output: 0,
+			cacheRead: 0,
+			cacheWrite: 0,
+			cost: 0,
+		};
+
+		// Get context percentage
 		const lastAssistantMessage = state.messages
 			.slice()
 			.reverse()
@@ -265,166 +220,158 @@ export class StatusLineComponent implements Component {
 				lastAssistantMessage.usage.cacheWrite
 			: 0;
 		const contextWindow = state.model?.contextWindow || 0;
-		const contextPercentValue = contextWindow > 0 ? (contextTokens / contextWindow) * 100 : 0;
-
-		// Format helpers
-		const formatTokens = (n: number): string => {
-			if (n < 1000) return n.toString();
-			if (n < 10000) return `${(n / 1000).toFixed(1)}k`;
-			if (n < 1000000) return `${Math.round(n / 1000)}k`;
-			if (n < 10000000) return `${(n / 1000000).toFixed(1)}M`;
-			return `${Math.round(n / 1000000)}M`;
-		};
+		const contextPercent = contextWindow > 0 ? (contextTokens / contextWindow) * 100 : 0;
 
-		// ═══════════════════════════════════════════════════════════════════════
-		// SEGMENT 1: Model
-		// ═══════════════════════════════════════════════════════════════════════
-		let modelName = state.model?.name || state.model?.id || "no-model";
-		// Strip "Claude " prefix for brevity
-		if (modelName.startsWith("Claude ")) {
-			modelName = modelName.slice(7);
-		}
-		let modelContent = `${ICONS.model} ${modelName}`;
-		if (state.model?.reasoning) {
-			const level = state.thinkingLevel || "off";
-			if (level !== "off") {
-				modelContent += ` · ${THINKING_ICONS[level] ?? level}`;
-			}
-		}
+		return {
+			session: this.session,
+			width,
+			options: this.resolveSettings().segmentOptions ?? {},
+			usageStats,
+			contextPercent,
+			contextWindow,
+			autoCompactEnabled: this.autoCompactEnabled,
+			subagentCount: this.subagentCount,
+			sessionStartTime: this.sessionStartTime,
+			git: {
+				branch: this.getCurrentBranch(),
+				status: this.getGitStatus(),
+			},
+		};
+	}
 
-		// ═══════════════════════════════════════════════════════════════════════
-		// SEGMENT 2: Path
-		// ═══════════════════════════════════════════════════════════════════════
-		let pwd = process.cwd();
-		const home = process.env.HOME || process.env.USERPROFILE;
-		if (home && pwd.startsWith(home)) {
-			pwd = `~${pwd.slice(home.length)}`;
-		}
-		if (pwd.startsWith("/work/")) {
-			pwd = pwd.slice(6);
-		}
-		const pathContent = `${ICONS.folder} ${pwd}`;
-
-		// ═══════════════════════════════════════════════════════════════════════
-		// SEGMENT 3: Git Branch + Status
-		// ═══════════════════════════════════════════════════════════════════════
-		const branch = this.getCurrentBranch();
-		let gitContent = "";
-		let gitColorName: "statusLineGitClean" | "statusLineGitDirty" = "statusLineGitClean";
-		if (branch) {
-			const gitStatus = this.getGitStatus();
-			const isDirty = gitStatus && (gitStatus.staged > 0 || gitStatus.unstaged > 0 || gitStatus.untracked > 0);
-			gitColorName = isDirty ? "statusLineGitDirty" : "statusLineGitClean";
-
-			gitContent = `${ICONS.branch} ${branch}`;
-
-			if (gitStatus) {
-				const indicators: string[] = [];
-				if (gitStatus.unstaged > 0) {
-					indicators.push(theme.fg("statusLineDirty", `*${gitStatus.unstaged}`));
-				}
-				if (gitStatus.staged > 0) {
-					indicators.push(theme.fg("statusLineStaged", `+${gitStatus.staged}`));
-				}
-				if (gitStatus.untracked > 0) {
-					indicators.push(theme.fg("statusLineUntracked", `?${gitStatus.untracked}`));
-				}
-				if (indicators.length > 0) {
-					gitContent += ` ${indicators.join(" ")}`;
-				}
-			}
-		}
+	private resolveSettings(): Required<
+		Pick<StatusLineSettings, "leftSegments" | "rightSegments" | "separator" | "segmentOptions">
+	> &
+		StatusLineSettings {
+		const preset = this.settings.preset ?? "default";
+		const presetDef = getPreset(preset);
+		const mergedSegmentOptions: StatusLineSettings["segmentOptions"] = {};
 
-		// ═══════════════════════════════════════════════════════════════════════
-		// SEGMENT 4: Context (window usage)
-		// ═══════════════════════════════════════════════════════════════════════
-		const autoIndicator = this.autoCompactEnabled ? ` ${ICONS.auto}` : "";
-		const contextText = `${contextPercentValue.toFixed(1)}%/${formatTokens(contextWindow)}${autoIndicator}`;
-		let contextContent: string;
-		if (contextPercentValue > 90) {
-			contextContent = `${ICONS.context} ${theme.fg("error", contextText)}`;
-		} else if (contextPercentValue > 70) {
-			contextContent = `${ICONS.context} ${theme.fg("warning", contextText)}`;
-		} else {
-			contextContent = `${ICONS.context} ${contextText}`;
+		for (const [segment, options] of Object.entries(presetDef.segmentOptions ?? {})) {
+			mergedSegmentOptions[segment as keyof StatusLineSegmentOptions] = { ...(options as Record<string, unknown>) };
 		}
 
-		// ═══════════════════════════════════════════════════════════════════════
-		// SEGMENT 5: Spend (tokens + cost)
-		// ═══════════════════════════════════════════════════════════════════════
-		const spendParts: string[] = [];
-
-		const { input, output, cacheRead, cacheWrite, cost } = this.session.sessionManager.getUsageStatistics();
-		const totalTokens = input + output + cacheRead + cacheWrite;
-		if (totalTokens) {
-			spendParts.push(`${ICONS.tokens} ${formatTokens(totalTokens)}`);
+		for (const [segment, options] of Object.entries(this.settings.segmentOptions ?? {})) {
+			const current = mergedSegmentOptions[segment as keyof StatusLineSegmentOptions] ?? {};
+			mergedSegmentOptions[segment as keyof StatusLineSegmentOptions] = {
+				...(current as Record<string, unknown>),
+				...(options as Record<string, unknown>),
+			};
 		}
 
-		const usingSubscription = state.model ? this.session.modelRegistry.isUsingOAuth(state.model) : false;
-		if (cost || usingSubscription) {
-			const costDisplay = `$${cost.toFixed(2)}${usingSubscription ? " (sub)" : ""}`;
-			spendParts.push(costDisplay);
-		}
+		return {
+			...this.settings,
+			leftSegments: this.settings.leftSegments ?? presetDef.leftSegments,
+			rightSegments: this.settings.rightSegments ?? presetDef.rightSegments,
+			separator: this.settings.separator ?? presetDef.separator,
+			segmentOptions: mergedSegmentOptions,
+		};
+	}
 
-		const spendContent = theme.fg("statusLineCost", spendParts.join(" · "));
+	private buildStatusLine(width: number): string {
+		const ctx = this.buildSegmentContext(width);
+		const effectiveSettings = this.resolveSettings();
+		const separatorDef = getSeparator(effectiveSettings.separator ?? "powerline-thin", theme);
 
-		// ═══════════════════════════════════════════════════════════════════════
-		// Assemble: [Model] > [Path] > [Git?] > [Context] > [Spend] >
-		// ═══════════════════════════════════════════════════════════════════════
 		const bgAnsi = theme.getBgAnsi("statusLineBg");
+		const fgAnsi = theme.getFgAnsi("text");
 		const sepAnsi = theme.getFgAnsi("statusLineSep");
 
-		let statusLine = "";
+		// Collect visible segment contents
+		const leftParts: string[] = [];
+		for (const segId of effectiveSettings.leftSegments) {
+			const rendered = renderSegment(segId, ctx);
+			if (rendered.visible && rendered.content) {
+				leftParts.push(rendered.content);
+			}
+		}
+
+		const rightParts: string[] = [];
+		for (const segId of effectiveSettings.rightSegments) {
+			const rendered = renderSegment(segId, ctx);
+			if (rendered.visible && rendered.content) {
+				rightParts.push(rendered.content);
+			}
+		}
+
+		const topFillWidth = width > 0 ? Math.max(0, width - 4) : 0;
+		const left = [...leftParts];
+		const right = [...rightParts];
 
-		// Pi segment
-		statusLine += plSegment(`${ICONS.pi} `, theme.getFgAnsi("statusLineContext"), bgAnsi);
-		statusLine += plSep(sepAnsi, bgAnsi);
+		const leftSepWidth = visibleWidth(separatorDef.left);
+		const rightSepWidth = visibleWidth(separatorDef.right);
+		const leftCapWidth = separatorDef.endCaps ? visibleWidth(separatorDef.endCaps.right) : 0;
+		const rightCapWidth = separatorDef.endCaps ? visibleWidth(separatorDef.endCaps.left) : 0;
 
-		// Model segment
-		statusLine += plSegment(modelContent, theme.getFgAnsi("statusLineModel"), bgAnsi);
-		statusLine += plSep(sepAnsi, bgAnsi);
+		const groupWidth = (parts: string[], capWidth: number, sepWidth: number): number => {
+			if (parts.length === 0) return 0;
+			const partsWidth = parts.reduce((sum, part) => sum + visibleWidth(part), 0);
+			const sepTotal = Math.max(0, parts.length - 1) * (sepWidth + 2);
+			return partsWidth + sepTotal + 2 + capWidth;
+		};
 
-		// Path segment
-		statusLine += plSegment(pathContent, theme.getFgAnsi("statusLinePath"), bgAnsi);
+		let leftWidth = groupWidth(left, leftCapWidth, leftSepWidth);
+		let rightWidth = groupWidth(right, rightCapWidth, rightSepWidth);
+		const totalWidth = () => leftWidth + rightWidth + (left.length > 0 && right.length > 0 ? 1 : 0);
 
-		if (gitContent) {
-			statusLine += plSep(sepAnsi, bgAnsi);
-			statusLine += plSegment(gitContent, theme.getFgAnsi(gitColorName), bgAnsi);
+		if (topFillWidth > 0) {
+			while (totalWidth() > topFillWidth && right.length > 0) {
+				right.pop();
+				rightWidth = groupWidth(right, rightCapWidth, rightSepWidth);
+			}
+			while (totalWidth() > topFillWidth && left.length > 0) {
+				left.pop();
+				leftWidth = groupWidth(left, leftCapWidth, leftSepWidth);
+			}
 		}
 
-		// Context segment
-		statusLine += plSep(sepAnsi, bgAnsi);
-		statusLine += plSegment(contextContent, theme.getFgAnsi("statusLineContext"), bgAnsi);
+		const renderGroup = (parts: string[], direction: "left" | "right"): string => {
+			if (parts.length === 0) return "";
+			const sep = direction === "left" ? separatorDef.left : separatorDef.right;
+			const cap = separatorDef.endCaps
+				? direction === "left"
+					? separatorDef.endCaps.right
+					: separatorDef.endCaps.left
+				: "";
+			const capPrefix = separatorDef.endCaps?.useBgAsFg ? bgAnsi.replace("\x1b[48;", "\x1b[38;") : sepAnsi;
+			const capText = cap ? `${capPrefix}${cap}\x1b[0m` : "";
+
+			let content = bgAnsi + fgAnsi;
+			content += ` ${parts.join(` ${sepAnsi}${sep}${fgAnsi} `)} `;
+			content += "\x1b[0m";
+
+			if (capText) {
+				return direction === "right" ? capText + content : content + capText;
+			}
+			return content;
+		};
 
-		// Spend segment
-		statusLine += plSep(sepAnsi, bgAnsi);
-		statusLine += plSegment(spendContent, theme.getFgAnsi("statusLineSpend"), bgAnsi);
+		const leftGroup = renderGroup(left, "left");
+		const rightGroup = renderGroup(right, "right");
+		if (!leftGroup && !rightGroup) return "";
 
-		// End cap (solid arrow to terminal bg)
-		statusLine += plEnd(bgAnsi);
+		if (topFillWidth === 0 || left.length === 0 || right.length === 0) {
+			return leftGroup + (leftGroup && rightGroup ? " " : "") + rightGroup;
+		}
 
-		return statusLine;
+		leftWidth = groupWidth(left, leftCapWidth, leftSepWidth);
+		rightWidth = groupWidth(right, rightCapWidth, rightSepWidth);
+		const gapWidth = Math.max(1, topFillWidth - leftWidth - rightWidth);
+		return leftGroup + " ".repeat(gapWidth) + rightGroup;
 	}
 
-	/**
-	 * Get the status line content for use as editor top border.
-	 * Returns the content string and its visible width.
-	 */
-	getTopBorder(_width: number): { content: string; width: number } {
-		const content = this.buildStatusLine();
+	getTopBorder(width: number): { content: string; width: number } {
+		const content = this.buildStatusLine(width);
 		return {
 			content,
 			width: visibleWidth(content),
 		};
 	}
 
-	/**
-	 * Render only hook statuses (if any).
-	 * Used when footer is integrated into editor border.
-	 */
 	render(width: number): string[] {
 		// Only render hook statuses - main status is in editor's top border
-		if (this.hookStatuses.size === 0) {
+		const showHooks = this.settings.showHookStatus ?? true;
+		if (!showHooks || this.hookStatuses.size === 0) {
 			return [];
 		}
 
@@ -432,6 +379,6 @@ export class StatusLineComponent implements Component {
 			.sort(([a], [b]) => a.localeCompare(b))
 			.map(([, text]) => sanitizeStatusText(text));
 		const hookLine = sortedStatuses.join(" ");
-		return [truncateToWidth(hookLine, width, theme.fg("statusLineSep", "…"))];
+		return [truncateToWidth(hookLine, width, theme.fg("statusLineSep", theme.format.ellipsis))];
 	}
 }