pi-open-tui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pi-open-tui contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# pi-open-tui
+
+A polished TUI for [Pi](https://pi.dev) coding agent. Combines the best of pi-haiku, pi-claude-code-tui, and pi-zentui into one cohesive package.
+
+## What's in it
+
+- **Animated Pi logo header** — 16-frame color-changing logo animation + "Let's build something great" tagline
+- **Starship-style footer** — 2 lines showing cwd, git branch/status, runtime version, context bar, model, token counts, and cost
+- **Rounded editor** — accent rail + borderMuted rounded corners, clean visual frame
+- **60+ runtime detection** — Node, Rust, Go, Python, Ruby, Java, Swift, Kotlin, C/C++, Deno, Bun, and many more
+- **Git status** — branch, ahead/behind, modified/untracked/staged/stashed, detached HEAD commit hash + tag
+- **Working timer** — live elapsed time while the agent is working, done duration when finished
+- **Zero prototype patches** — uses public Pi APIs (setHeader/setFooter/setEditorComponent), safe across Pi updates
+- **Interactive settings UI** — `/open-tui` opens a tabbed settings dialog (Features / Icons / Segments)
+
+## Install
+
+```bash
+pi install npm:pi-open-tui
+```
+
+Or try it for one run:
+
+```bash
+pi -e npm:pi-open-tui
+```
+
+## Configuration
+
+Run `/open-tui` to open the interactive settings UI. Configuration is stored at `~/.pi/agent/open-tui.json`:
+
+```json
+{
+  "enabled": true,
+  "icons": {
+    "mode": "auto"
+  },
+  "footerSegments": {
+    "cwd": true,
+    "gitBranch": true,
+    "gitStatus": true,
+    "gitCommit": false,
+    "runtime": true,
+    "context": true,
+    "tokens": true,
+    "cost": true
+  }
+}
+```
+
+- `icons.mode`: `auto` (detect Nerd Font), `nerd` (force Nerd Font glyphs), or `ascii` (plain fallbacks)
+- `footerSegments.gitCommit`: shows short hash + tag on detached HEAD (off by default)
+
+## Local development
+
+```bash
+pi -e .
+```
+
+## License
+
+MIT
+
+## Acknowledgements
+
+This project builds on the work of several Pi community packages:
+
+- **[pi-haiku](https://github.com/nnocte/pi-haiku)** — the 2-line footer structure (location+model · timer+context) and working-timer pattern
+- **[pi-claude-code-tui](https://github.com/Phoobobo/pi-claude-code-tui)** — the 16-frame animated Pi logo and rounded editor border technique
+- **[pi-zentui](https://github.com/lmilojevicc/pi-zentui)** — the Starship-style footer segments (git status icons, runtime detection, context gauge), generation-based session lifecycle, and interactive settings UI pattern
+
+The animated logo frames are derived from `pi-claude-code-tui`, which in turn derive from Pi's official install script (`pi.dev/install.sh`). The runtime detection list and git porcelain parsing borrow structure from `pi-zentui`.

package/extensions/open-tui/config.ts

@@ -0,0 +1,109 @@
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from "node:fs";
+import { join } from "node:path";
+import { getAgentDir } from "@earendil-works/pi-coding-agent";
+import type { IconMode } from "./icons.ts";
+
+export type { IconMode } from "./icons.ts";
+
+export interface FooterSegments {
+	cwd: boolean;
+	gitBranch: boolean;
+	gitStatus: boolean;
+	gitCommit: boolean;
+	runtime: boolean;
+	context: boolean;
+	tokens: boolean;
+	cost: boolean;
+}
+
+export interface OpenTuiConfig {
+	enabled: boolean;
+	icons: {
+		mode: IconMode;
+	};
+	footerSegments: FooterSegments;
+}
+
+export const DEFAULT_CONFIG: OpenTuiConfig = {
+	enabled: true,
+	icons: {
+		mode: "auto",
+	},
+	footerSegments: {
+		cwd: true,
+		gitBranch: true,
+		gitStatus: true,
+		gitCommit: false,
+		runtime: true,
+		context: true,
+		tokens: true,
+		cost: true,
+	},
+};
+
+export function getConfigPath(): string {
+	const agentDir = getAgentDir();
+	return join(agentDir, "open-tui.json");
+}
+
+function deepMerge<T>(base: T, override: unknown): T {
+	if (typeof base !== "object" || base === null || Array.isArray(base)) {
+		return (override as T) ?? base;
+	}
+	if (typeof override !== "object" || override === null || Array.isArray(override)) {
+		return base;
+	}
+	const result = { ...(base as Record<string, unknown>) };
+	const overrideRec = override as Record<string, unknown>;
+	for (const key of Object.keys(overrideRec)) {
+		const baseVal = (base as Record<string, unknown>)[key];
+		const overVal = overrideRec[key];
+		if (typeof baseVal === "object" && baseVal !== null && !Array.isArray(baseVal)
+			&& typeof overVal === "object" && overVal !== null && !Array.isArray(overVal)) {
+			result[key] = deepMerge(baseVal, overVal);
+		} else if (overVal !== undefined) {
+			result[key] = overVal;
+		}
+	}
+	return result as T;
+}
+
+export function ensureConfigExists(): void {
+	const path = getConfigPath();
+	if (existsSync(path)) return;
+	try {
+		const agentDir = getAgentDir();
+		if (!existsSync(agentDir)) mkdirSync(agentDir, { recursive: true });
+		writeFileSync(path, JSON.stringify(DEFAULT_CONFIG, null, 2) + "\n", "utf8");
+	} catch {
+		// ponytail: silent fallback — config creation is best-effort
+	}
+}
+
+export function loadConfig(notify?: (msg: string, level: "warning" | "info") => void): OpenTuiConfig {
+	const path = getConfigPath();
+	if (!existsSync(path)) {
+		ensureConfigExists();
+		return structuredClone(DEFAULT_CONFIG);
+	}
+
+	try {
+		const raw = readFileSync(path, "utf8");
+		const parsed: unknown = JSON.parse(raw);
+		return deepMerge(DEFAULT_CONFIG, parsed);
+	} catch (err) {
+		notify?.(`open-tui config parse error: ${err instanceof Error ? err.message : String(err)}`, "warning");
+		return structuredClone(DEFAULT_CONFIG);
+	}
+}
+
+export function saveConfig(config: OpenTuiConfig): void {
+	const path = getConfigPath();
+	try {
+		const agentDir = getAgentDir();
+		if (!existsSync(agentDir)) mkdirSync(agentDir, { recursive: true });
+		writeFileSync(path, JSON.stringify(config, null, 2) + "\n", "utf8");
+	} catch {
+		// ponytail: silent fallback — config save is best-effort
+	}
+}

package/extensions/open-tui/editor.ts

@@ -0,0 +1,101 @@
+import {
+	CustomEditor,
+	type ExtensionAPI,
+	type ExtensionContext,
+	type KeybindingsManager,
+	type Theme,
+} from "@earendil-works/pi-coding-agent";
+import type { EditorTheme, TUI } from "@earendil-works/pi-tui";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { findBottomBorderIndex, isEditorBorderLine, stripAnsi } from "./utils.ts";
+
+function fillLine(content: string, width: number): string {
+	const truncated = truncateToWidth(content, Math.max(0, width), "");
+	const pad = " ".repeat(Math.max(0, width - visibleWidth(truncated)));
+	return `${truncated}${pad}`;
+}
+
+function roundedBorder(
+	width: number,
+	kind: "top" | "bottom",
+	paint: (s: string) => string,
+	sourceLine?: string,
+): string {
+	if (width < 2) return paint(truncateToWidth(kind === "top" ? "╭╮" : "╰╯", width, ""));
+	const corners = kind === "top" ? (["╭", "╮"] as const) : (["╰", "╯"] as const);
+
+	if (sourceLine) {
+		const plain = stripAnsi(sourceLine);
+		const scrollMatch = plain.match(/([↑↓]\s+\d+\s+more)/);
+		if (scrollMatch) {
+			const label = `─── ${scrollMatch[1]} `;
+			const fill = Math.max(0, width - 2 - visibleWidth(label));
+			return paint(`${corners[0]}${label}${"─".repeat(fill)}${corners[1]}`);
+		}
+	}
+
+	return paint(`${corners[0]}${"─".repeat(Math.max(0, width - 2))}${corners[1]}`);
+}
+
+export class OpenTuiEditor extends CustomEditor {
+	private readonly getRail: () => string;
+	private readonly getBorder: (s: string) => string;
+
+	constructor(
+		tui: TUI,
+		editorTheme: EditorTheme,
+		keybindings: KeybindingsManager,
+		getUiTheme: () => Theme,
+	) {
+		super(tui, editorTheme, keybindings, { paddingX: 0 });
+		this.getRail = () => getUiTheme().fg("accent", "│");
+		this.getBorder = (s: string) => getUiTheme().fg("borderMuted", s);
+	}
+
+	override setPaddingX(_padding: number): void {
+		// The custom rail owns the horizontal inset and keeps one stable text gap.
+		super.setPaddingX(0);
+	}
+
+	render(width: number): string[] {
+		if (width < 4) return super.render(width);
+
+		const rail = this.getRail();
+		const borderPaint = this.getBorder;
+		const railWidth = 2;
+
+		const innerWidth = Math.max(0, width - railWidth);
+		const baseLines = super.render(innerWidth);
+		const bottomIdx = findBottomBorderIndex(baseLines);
+
+		const result: string[] = [];
+		result.push(roundedBorder(width, "top", borderPaint, baseLines[0]));
+
+		for (let i = 1; i < bottomIdx; i++) {
+			const line = baseLines[i] ?? "";
+			if (isEditorBorderLine(line)) {
+				result.push(`${rail} ${fillLine("", innerWidth)}`);
+			} else {
+				result.push(`${rail} ${fillLine(line, innerWidth)}`);
+			}
+		}
+
+		result.push(roundedBorder(width, "bottom", borderPaint, baseLines[bottomIdx]));
+
+		for (let i = bottomIdx + 1; i < baseLines.length; i++) {
+			result.push(baseLines[i]!);
+		}
+
+		return result.map((line) => truncateToWidth(line, width, ""));
+	}
+}
+
+export function installEditor(_pi: ExtensionAPI, ctx: ExtensionContext): () => void {
+	const getUiTheme = () => ctx.ui.theme;
+	ctx.ui.setEditorComponent((tui, editorTheme, keybindings) =>
+		new OpenTuiEditor(tui, editorTheme, keybindings, getUiTheme),
+	);
+	return () => {
+		ctx.ui.setEditorComponent(undefined);
+	};
+}

package/extensions/open-tui/footer.ts

@@ -0,0 +1,267 @@
+import type { ExtensionContext, Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import type { OpenTuiConfig } from "./config.ts";
+import type { IconGlyphs } from "./icons.ts";
+import { resolveGlyphs, resolveIconMode, runtimeSymbol } from "./icons.ts";
+import type { GitStatus } from "./git.ts";
+import type { RuntimeInfo } from "./runtime.ts";
+import {
+	alignRight,
+	cacheHitColor,
+	effortColor,
+	fmtTokens,
+	formatCwd,
+	formatDuration,
+	formatProviderLabel,
+	providerColor,
+	sanitizeStatus,
+	stressColor,
+} from "./utils.ts";
+import type { FooterState, ModelMeta, UsageTotals } from "./state.ts";
+import { getUsageTotals } from "./state.ts";
+
+function renderBar(theme: Theme, pct: number, barWidth: number, ascii: boolean): string {
+	const filled = Math.max(0, Math.min(barWidth, Math.round((pct / 100) * barWidth)));
+	const empty = barWidth - filled;
+	const color = stressColor(pct);
+	const filledCell = ascii ? "#" : "█";
+	const emptyCell = ascii ? "-" : "░";
+	return (
+		theme.fg("dim", "[") +
+		theme.fg(color, filledCell.repeat(filled)) +
+		theme.fg("dim", emptyCell.repeat(empty)) +
+		theme.fg("dim", "]")
+	);
+}
+
+function renderGitSegment(
+	theme: Theme,
+	git: GitStatus,
+	glyphs: IconGlyphs,
+	segments: OpenTuiConfig["footerSegments"],
+): string {
+	const parts: string[] = [];
+	if (segments.gitBranch) {
+		if (git.branch) {
+			parts.push(theme.fg("mdLink", glyphs.git));
+			parts.push(theme.fg("success", git.branch));
+		} else if (git.commit?.detached) {
+			parts.push(theme.fg("mdLink", glyphs.git));
+			parts.push(theme.fg("success", "HEAD"));
+			if (segments.gitCommit && git.commit.oid) {
+				const shortHash = git.commit.oid.slice(0, 7);
+				const tag = git.commit.tag ? ` ${git.commit.tag}` : "";
+				parts.push(theme.fg("success", `(${shortHash}${tag})`));
+			}
+		}
+	}
+
+	if (segments.gitStatus) {
+		const statusIcons: string[] = [];
+		const addStatus = (count: number, glyph: string, color: ThemeColor) => {
+			if (count > 0) statusIcons.push(theme.fg(color, `${glyph}${count > 1 ? count : ""}`));
+		};
+		addStatus(git.conflicted, glyphs.conflicted, "error");
+		addStatus(git.stashed, glyphs.stashed, "muted");
+		addStatus(git.deleted, glyphs.deleted, "error");
+		addStatus(git.renamed, glyphs.renamed, "warning");
+		addStatus(git.modified, glyphs.modified, "warning");
+		addStatus(git.staged, glyphs.staged, "success");
+		addStatus(git.untracked, glyphs.untracked, "muted");
+
+		if (git.ahead > 0 && git.behind > 0) {
+			statusIcons.push(theme.fg("warning", `${glyphs.diverged}${git.ahead}/${git.behind}`));
+		} else if (git.ahead > 0) {
+			statusIcons.push(theme.fg("success", `${glyphs.ahead}${git.ahead}`));
+		} else if (git.behind > 0) {
+			statusIcons.push(theme.fg("warning", `${glyphs.behind}${git.behind}`));
+		}
+
+		const statusBlock = statusIcons.join(" ");
+		if (statusBlock) {
+			parts.push(`${theme.fg("dim", "[")}${statusBlock}${theme.fg("dim", "]")}`);
+		}
+	}
+
+	return parts.join(" ");
+}
+
+function renderRuntimeSegment(
+	theme: Theme,
+	runtime: RuntimeInfo | null,
+	iconMode: OpenTuiConfig["icons"]["mode"],
+): string {
+	if (!runtime) return "";
+	const symbol = theme.fg("success", runtimeSymbol(runtime.name, iconMode));
+	const version = runtime.version ? theme.fg("muted", runtime.version) : "";
+	const label = [symbol, version].filter(Boolean).join(" ");
+	return label;
+}
+
+function renderTimerSegment(theme: Theme, state: FooterState, glyphs: IconGlyphs): string {
+	if (state.workingSince !== undefined) {
+		return `${theme.fg("accent", glyphs.working)} ${theme.fg("dim", "working")} ${theme.fg("accent", formatDuration(Date.now() - state.workingSince))}`;
+	}
+	if (state.lastDoneIn !== undefined) {
+		return `${theme.fg("success", glyphs.done)} ${theme.fg("success", "done")} ${theme.fg("text", formatDuration(state.lastDoneIn))}`;
+	}
+	return "";
+}
+
+function renderContextBar(
+	theme: Theme,
+	ctx: ExtensionContext,
+	width: number,
+	glyphs: IconGlyphs,
+	iconMode: OpenTuiConfig["icons"]["mode"],
+): string {
+	const contextUsage = ctx.getContextUsage();
+	const contextWindow = contextUsage?.contextWindow ?? ctx.model?.contextWindow ?? 0;
+	const contextTokens = contextUsage?.tokens ?? 0;
+	const contextPct = contextUsage?.percent ?? 0;
+
+	// ponytail: render 0% bar once we know the window — keeps the right side
+	// populated instead of collapsing everything left in an empty session.
+	if (contextWindow <= 0) return "";
+
+	const pctText = theme.fg(stressColor(contextPct), `${contextPct.toFixed(1)}%`);
+	const ctxText = `${theme.fg("text", fmtTokens(contextTokens))}${theme.fg("dim", "/")}${theme.fg("text", fmtTokens(contextWindow))}`;
+	const contextIcon = theme.fg(stressColor(contextPct), glyphs.context);
+	const reserved = visibleWidth(contextIcon) + visibleWidth(pctText) + visibleWidth(ctxText) + 5 + 2;
+	const barWidth = Math.max(6, Math.min(16, width - reserved));
+	return `${contextIcon} ${renderBar(theme, contextPct, barWidth, resolveIconMode(iconMode) === "ascii")} ${pctText} ${theme.fg("dim", "·")} ${ctxText}`;
+}
+
+function renderStatsBlock(
+	theme: Theme,
+	totals: UsageTotals,
+	glyphs: IconGlyphs,
+	segments: OpenTuiConfig["footerSegments"],
+): string {
+	const stats: string[] = [];
+	if (segments.tokens) {
+		stats.push(theme.fg("accent", `${glyphs.input} ${fmtTokens(totals.input)}`));
+		stats.push(theme.fg("success", `${glyphs.output} ${fmtTokens(totals.output)}`));
+		if (totals.latestCacheHitRate !== undefined) {
+			stats.push(theme.fg(cacheHitColor(totals.latestCacheHitRate), `${glyphs.cacheHit} ${totals.latestCacheHitRate.toFixed(0)}%`));
+		}
+	}
+	if (segments.cost) {
+		stats.push(theme.fg("warning", `${glyphs.cost} $${totals.cost.toFixed(3)}`));
+	}
+
+	return stats.join(` ${theme.fg("dim", "|")} `);
+}
+
+function renderExtensionStatusLines(
+	theme: Theme,
+	extensionStatuses: ReadonlyMap<string, string>,
+	glyphs: IconGlyphs,
+	width: number,
+): string[] {
+	const statuses = Array.from(extensionStatuses.entries())
+		.sort(([a], [b]) => a.localeCompare(b))
+		.map(([, text]) => sanitizeStatus(text))
+		.filter((text) => text.length > 0);
+	if (statuses.length === 0) return [];
+
+	const separator = ` ${theme.fg("dim", "|")} `;
+	const statusText = statuses.map((status) => theme.fg("muted", status)).join(separator);
+	const line = `${theme.fg("mdLink", glyphs.extensions)} ${statusText}`;
+	return wrapTextWithAnsi(line, width);
+}
+
+export interface FooterHooks {
+	setRequestRender: (fn: (() => void) | undefined) => void;
+	scheduleGitRefresh: () => void;
+}
+
+export function installFooter(
+	ctx: ExtensionContext,
+	getState: () => FooterState,
+	getConfig: () => OpenTuiConfig,
+	getModelMeta: () => ModelMeta,
+	hooks: FooterHooks,
+): () => void {
+	ctx.ui.setFooter((tui, theme, footerData) => {
+		hooks.setRequestRender(() => tui.requestRender());
+		const unsubBranch = footerData.onBranchChange(() => {
+			hooks.scheduleGitRefresh();
+			tui.requestRender();
+		});
+
+		return {
+			dispose() {
+				unsubBranch();
+				hooks.setRequestRender(undefined);
+			},
+			invalidate() {},
+			render(width: number): string[] {
+				if (width <= 0) return [""];
+				const state = getState();
+				const config = getConfig();
+				const glyphs = resolveGlyphs(config.icons.mode);
+				const segments = config.footerSegments;
+				const meta = getModelMeta();
+
+				const totals = getUsageTotals(ctx);
+
+				const leftParts: string[] = [];
+				if (segments.cwd) {
+					leftParts.push(`${theme.fg("mdLink", glyphs.cwd)} ${theme.fg("accent", formatCwd(ctx.sessionManager.getCwd()))}`);
+				}
+				const gitSeg = renderGitSegment(theme, state.git, glyphs, segments);
+				if (gitSeg) leftParts.push(gitSeg);
+				if (segments.runtime) {
+					const runtimeSeg = renderRuntimeSegment(theme, state.runtime, config.icons.mode);
+					if (runtimeSeg) leftParts.push(runtimeSeg);
+				}
+				const timerSeg = renderTimerSegment(theme, state, glyphs);
+				if (timerSeg) leftParts.push(timerSeg);
+
+				let rightBlock = "";
+				if (segments.context) {
+					rightBlock = renderContextBar(theme, ctx, width, glyphs, config.icons.mode);
+				}
+
+				const line1 = alignRight(leftParts.join(" "), rightBlock, width, theme);
+
+				const modelParts: string[] = [];
+				modelParts.push(theme.fg("mdLink", glyphs.model));
+				if (meta.provider && meta.provider !== "Unknown") {
+					modelParts.push(theme.fg(providerColor(ctx.model?.provider ?? "none"), meta.provider));
+				}
+				modelParts.push(theme.fg("text", meta.model));
+				if (meta.effort && meta.effort !== "off") {
+					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 line2 = alignRight(modelBlock, statsBlock, width, theme);
+
+				const mainLines = [line1, line2]
+					.map((line) => truncateToWidth(line, width, theme.fg("dim", "...")));
+				return [
+					...mainLines,
+					...renderExtensionStatusLines(
+						theme,
+						footerData.getExtensionStatuses(),
+						glyphs,
+						width,
+					),
+				];
+			},
+		};
+	});
+
+	return () => {
+		ctx.ui.setFooter(undefined);
+	};
+}