pi-open-tui 0.1.0

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

@@ -0,0 +1,258 @@
+import type { ExtensionAPI, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import {
+	Box,
+	Key,
+	matchesKey,
+	SelectList,
+	type SelectItem,
+	type TUI,
+	Text,
+} from "@earendil-works/pi-tui";
+import type { IconMode, OpenTuiConfig } from "./config.ts";
+
+interface SettingItem {
+	id: string;
+	label: string;
+	currentValue: string;
+	values: string[];
+}
+
+type Tab = "features" | "icons" | "segments";
+
+const TABS: { id: Tab; label: string }[] = [
+	{ id: "features", label: "Features" },
+	{ id: "icons", label: "Icons" },
+	{ id: "segments", label: "Segments" },
+];
+
+function toggleSetting(config: OpenTuiConfig, key: keyof OpenTuiConfig["footerSegments"]): OpenTuiConfig {
+	return {
+		...config,
+		footerSegments: {
+			...config.footerSegments,
+			[key]: !config.footerSegments[key],
+		},
+	};
+}
+
+function cycleIconMode(config: OpenTuiConfig): OpenTuiConfig {
+	const order: IconMode[] = ["auto", "nerd", "ascii"];
+	const currentIdx = order.indexOf(config.icons.mode);
+	const next = order[(currentIdx + 1) % order.length]!;
+	return { ...config, icons: { mode: next } };
+}
+
+function toggleEnabled(config: OpenTuiConfig): OpenTuiConfig {
+	return { ...config, enabled: !config.enabled };
+}
+
+function buildFeaturesItems(config: OpenTuiConfig): SettingItem[] {
+	return [
+		{
+			id: "enabled",
+			label: "Enabled",
+			currentValue: config.enabled ? "on" : "off",
+			values: ["on", "off"],
+		},
+	];
+}
+
+function buildIconsItems(config: OpenTuiConfig): SettingItem[] {
+	return [
+		{
+			id: "mode",
+			label: "Icon mode",
+			currentValue: config.icons.mode,
+			values: ["auto", "nerd", "ascii"],
+		},
+	];
+}
+
+function buildSegmentsItems(config: OpenTuiConfig): SettingItem[] {
+	const segs = config.footerSegments;
+	return [
+		{ id: "cwd", label: "cwd", currentValue: segs.cwd ? "on" : "off", values: ["on", "off"] },
+		{ id: "gitBranch", label: "git branch", currentValue: segs.gitBranch ? "on" : "off", values: ["on", "off"] },
+		{ id: "gitStatus", label: "git status", currentValue: segs.gitStatus ? "on" : "off", values: ["on", "off"] },
+		{ id: "gitCommit", label: "git commit (detached)", currentValue: segs.gitCommit ? "on" : "off", values: ["on", "off"] },
+		{ id: "runtime", label: "runtime", currentValue: segs.runtime ? "on" : "off", values: ["on", "off"] },
+		{ id: "context", label: "context bar", currentValue: segs.context ? "on" : "off", values: ["on", "off"] },
+		{ id: "tokens", label: "tokens", currentValue: segs.tokens ? "on" : "off", values: ["on", "off"] },
+		{ id: "cost", label: "cost", currentValue: segs.cost ? "on" : "off", values: ["on", "off"] },
+	];
+}
+
+function buildItems(tab: Tab, config: OpenTuiConfig): SettingItem[] {
+	switch (tab) {
+		case "features": return buildFeaturesItems(config);
+		case "icons": return buildIconsItems(config);
+		case "segments": return buildSegmentsItems(config);
+	}
+}
+
+function handleSettingChange(
+	tab: Tab,
+	itemId: string,
+	config: OpenTuiConfig,
+): OpenTuiConfig {
+	if (tab === "features" && itemId === "enabled") {
+		return toggleEnabled(config);
+	}
+	if (tab === "icons" && itemId === "mode") {
+		return cycleIconMode(config);
+	}
+	if (tab === "segments") {
+		return toggleSetting(config, itemId as keyof OpenTuiConfig["footerSegments"]);
+	}
+	return config;
+}
+
+interface SettingsUiHandle {
+	render: (width: number) => string[];
+	invalidate: () => void;
+	handleInput: (data: string) => void;
+}
+
+class SettingsUi implements SettingsUiHandle {
+	private tab: Tab = "features";
+	private config: OpenTuiConfig;
+	private selectList: SelectList;
+	private readonly selectedItemByTab: Partial<Record<Tab, string>> = {};
+	private readonly container: Box;
+	private cachedWidth: number | undefined;
+	private cachedLines: string[] | undefined;
+
+	constructor(
+		private readonly theme: Theme,
+		config: OpenTuiConfig,
+		private readonly onChange: (config: OpenTuiConfig) => void,
+		private readonly onClose: () => void,
+	) {
+		this.config = config;
+		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();
+	}
+
+	private rebuild(preferredItemId = this.selectedItemByTab[this.tab]): void {
+		this.container.clear();
+		this.container.addChild(new Text(this.theme.bold(this.theme.fg("accent", "Open TUI Settings")), 1, 0));
+
+		const tabBar = TABS.map((t) => {
+			const active = t.id === this.tab;
+			const label = active ? `[${t.label}]` : ` ${t.label} `;
+			return active ? this.theme.fg("accent", label) : this.theme.fg("dim", label);
+		}).join(" ");
+		this.container.addChild(new Text(tabBar, 1, 0));
+		this.container.addChild(new Text(this.theme.fg("dim", "Tab/Shift+Tab to switch · Enter to toggle · Esc to close"), 1, 0));
+
+		const items = buildItems(this.tab, this.config).map((item) => ({
+			value: item.id,
+			label: item.label,
+			description: item.currentValue,
+		} as SelectItem));
+		this.selectList = new SelectList(items, Math.min(items.length, 10), {
+			selectedPrefix: (t) => this.theme.fg("accent", t),
+			selectedText: (t) => this.theme.fg("accent", t),
+			description: (t) => this.theme.fg("muted", t),
+			scrollInfo: (t) => this.theme.fg("dim", t),
+			noMatch: (t) => this.theme.fg("warning", t),
+		});
+		const selectedIndex = items.findIndex((item) => item.value === preferredItemId);
+		if (selectedIndex >= 0) {
+			this.selectList.setSelectedIndex(selectedIndex);
+		}
+		this.selectedItemByTab[this.tab] = this.selectList.getSelectedItem()?.value;
+		this.selectList.onSelectionChange = (item) => {
+			this.selectedItemByTab[this.tab] = item.value;
+		};
+		this.selectList.onSelect = (item) => {
+			this.selectedItemByTab[this.tab] = item.value;
+			this.config = handleSettingChange(this.tab, item.value, this.config);
+			this.onChange(this.config);
+			this.rebuild(item.value);
+			this.invalidate();
+		};
+		this.selectList.onCancel = () => {
+			this.onClose();
+		};
+		this.container.addChild(this.selectList);
+
+		this.cachedWidth = undefined;
+		this.cachedLines = undefined;
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, Key.tab)) {
+			const idx = TABS.findIndex((t) => t.id === this.tab);
+			this.tab = TABS[(idx + 1) % TABS.length]!.id;
+			this.rebuild();
+			this.invalidate();
+			return;
+		}
+		if (matchesKey(data, Key.shift("tab"))) {
+			const idx = TABS.findIndex((t) => t.id === this.tab);
+			this.tab = TABS[(idx - 1 + TABS.length) % TABS.length]!.id;
+			this.rebuild();
+			this.invalidate();
+			return;
+		}
+		if (matchesKey(data, Key.escape)) {
+			this.onClose();
+			return;
+		}
+		this.selectList.handleInput?.(data);
+		this.invalidate();
+		this.invalidate();
+	}
+
+	render(width: number): string[] {
+		if (this.cachedLines && this.cachedWidth === width) return this.cachedLines;
+		this.cachedWidth = width;
+		this.cachedLines = this.container.render(width);
+		return this.cachedLines;
+	}
+
+	invalidate(): void {
+		this.cachedWidth = undefined;
+		this.cachedLines = undefined;
+		this.container.invalidate();
+	}
+}
+
+export function registerSettingsCommand(
+	pi: ExtensionAPI,
+	hooks: {
+		getConfig: () => OpenTuiConfig;
+		onConfigChanged: (config: OpenTuiConfig) => void;
+	},
+): void {
+	pi.registerCommand("open-tui", {
+		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 });
+		},
+	});
+}

package/extensions/open-tui/state.ts

@@ -0,0 +1,90 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type { AssistantMessage } from "@earendil-works/pi-ai";
+import type { GitStatus } from "./git.ts";
+import { emptyGitStatus } from "./git.ts";
+import type { RuntimeInfo } from "./runtime.ts";
+import { fmtTokens, formatProviderLabel } from "./utils.ts";
+
+export interface FooterState {
+	git: GitStatus;
+	runtime: RuntimeInfo | null;
+	sessionStartEpoch: number;
+	workingSince: number | undefined;
+	lastDoneIn: number | undefined;
+}
+
+export interface UsageTotals {
+	input: number;
+	output: number;
+	cacheRead: number;
+	cacheWrite: number;
+	cost: number;
+	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 ?? ""}`;
+}
+
+export function getUsageTotals(ctx: ExtensionContext): UsageTotals {
+	const key = entriesKey(ctx);
+	if (usageCache && usageCache.key === key) 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()) {
+		if (entry.type === "message" && entry.message?.role === "assistant") {
+			const m = entry.message as AssistantMessage;
+			const u = m.usage;
+			if (!u) continue;
+			totals.input += u.input ?? 0;
+			totals.output += u.output ?? 0;
+			totals.cacheRead += u.cacheRead ?? 0;
+			totals.cacheWrite += u.cacheWrite ?? 0;
+			totals.cost += u.cost?.total ?? 0;
+			const promptTokens = (u.input ?? 0) + (u.cacheRead ?? 0) + (u.cacheWrite ?? 0);
+			if (promptTokens > 0) {
+				totals.latestCacheHitRate = ((u.cacheRead ?? 0) / promptTokens) * 100;
+			}
+		}
+	}
+	usageCache = { key, totals };
+	return totals;
+}
+
+export function invalidateUsageCache(): void {
+	usageCache = undefined;
+}
+
+export function createInitialState(): FooterState {
+	return {
+		git: emptyGitStatus(),
+		runtime: null,
+		sessionStartEpoch: Date.now(),
+		workingSince: undefined,
+		lastDoneIn: undefined,
+	};
+}
+
+export interface ModelMeta {
+	provider: string;
+	model: string;
+	effort: string | undefined;
+}
+
+export function getModelMeta(
+	ctx: ExtensionContext,
+	getThinkingLevel: () => string,
+): ModelMeta {
+	const provider = formatProviderLabel(ctx.model?.provider);
+	const model = ctx.model?.id ?? "no-model";
+	const reasoning = ctx.model?.reasoning ?? false;
+	const effort = reasoning ? getThinkingLevel() : undefined;
+	return { provider, model, effort };
+}

package/extensions/open-tui/utils.ts

@@ -0,0 +1,157 @@
+import { isAbsolute, relative, resolve, sep } from "node:path";
+import type { ThinkingLevel } from "@earendil-works/pi-ai";
+import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+export { truncateToWidth, visibleWidth };
+
+export function stripAnsi(text: string): string {
+	return text
+		.replace(/\x1b\[[0-9;]*m/g, "")
+		.replace(/\x1b\][^\x07]*(?:\x07|\x1b\\)/g, "")
+		.replace(/\x1b_[^\x07]*\x07/g, "");
+}
+
+export function formatCwd(cwd: string): string {
+	const home = process.env.HOME || process.env.USERPROFILE;
+	if (!home) return cwd;
+	const resolvedCwd = resolve(cwd);
+	const resolvedHome = resolve(home);
+	const rel = relative(resolvedHome, resolvedCwd);
+	const insideHome =
+		rel === "" || (rel !== ".." && !rel.startsWith(`..${sep}`) && !isAbsolute(rel));
+	if (!insideHome) return cwd;
+	return rel === "" ? "~" : `~${sep}${rel}`;
+}
+
+export function fmtTokens(n: number): string {
+	if (n < 1000) return n.toString();
+	if (n < 10_000) return `${(n / 1000).toFixed(1)}k`;
+	if (n < 1_000_000) return `${Math.round(n / 1000)}k`;
+	if (n < 10_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+	return `${Math.round(n / 1_000_000)}M`;
+}
+
+export function formatDuration(ms: number): string {
+	const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+	if (totalSeconds < 60) return `${totalSeconds}s`;
+	const s = totalSeconds % 60;
+	const totalMinutes = Math.floor(totalSeconds / 60);
+	if (totalMinutes < 60) return `${totalMinutes}m ${s}s`;
+	const m = totalMinutes % 60;
+	const h = Math.floor(totalMinutes / 60);
+	return `${h}h ${m}m ${s}s`;
+}
+
+export function formatModelLabel(model: { provider?: string; id?: string } | null | undefined): string {
+	if (!model?.id) return "no-model";
+	return model.provider ? `${model.provider}/${model.id}` : model.id;
+}
+
+export function formatProviderLabel(provider: string | undefined): string {
+	if (!provider) return "Unknown";
+	return provider.charAt(0).toUpperCase() + provider.slice(1);
+}
+
+export function alignRight(left: string, right: string, width: number, theme: Theme): string {
+	const rightW = visibleWidth(right);
+	if (rightW > width) {
+		right = truncateToWidth(right, width, theme.fg("dim", "..."));
+	}
+	const leftW = visibleWidth(left);
+	const rightW2 = visibleWidth(right);
+	const pad = width - leftW - rightW2;
+	if (pad >= 1) {
+		return left + " ".repeat(pad) + right;
+	}
+	const availableForLeft = Math.max(0, width - rightW2 - 1);
+	const truncatedLeft =
+		availableForLeft > 0 ? truncateToWidth(left, availableForLeft, theme.fg("dim", "...")) : "";
+	return truncatedLeft ? truncatedLeft + " " + right : right;
+}
+
+export function stressColor(value: number, warn = 70, danger = 90): ThemeColor {
+	if (value >= danger) return "error";
+	if (value >= warn) return "warning";
+	return "accent";
+}
+
+export function cacheHitColor(value: number): ThemeColor {
+	if (value < 30) return "error";
+	if (value < 70) return "warning";
+	return "success";
+}
+
+export function providerColor(provider: string): ThemeColor {
+	switch (provider.toLowerCase()) {
+		case "anthropic":
+			return "accent";
+		case "openai":
+		case "openai-codex":
+			return "success";
+		case "google":
+		case "google-vertex":
+			return "warning";
+		case "amazon-bedrock":
+			return "thinkingHigh";
+		case "github-copilot":
+			return "mdLink";
+		case "deepseek":
+			return "thinkingLow";
+		case "xai":
+		case "groq":
+			return "error";
+		default:
+			return "muted";
+	}
+}
+
+export function effortColor(level: ThinkingLevel | string | undefined): ThemeColor {
+	switch (level) {
+		case "minimal":
+			return "thinkingMinimal";
+		case "low":
+			return "thinkingLow";
+		case "medium":
+			return "thinkingMedium";
+		case "high":
+			return "thinkingHigh";
+		case "xhigh":
+			return "thinkingXhigh";
+		default:
+			return "thinkingMedium";
+	}
+}
+
+export function isEditorBorderLine(line: string): boolean {
+	const plain = stripAnsi(line);
+	if (/^─+$/.test(plain)) return true;
+	if (/^─*\s*[↑↓]\s+\d+\s+more\s*─*$/.test(plain)) return true;
+	return false;
+}
+
+export function findBottomBorderIndex(lines: string[]): number {
+	for (let i = lines.length - 1; i >= 1; i--) {
+		if (isEditorBorderLine(lines[i]!)) return i;
+	}
+	return Math.max(0, lines.length - 1);
+}
+
+export function padRight(text: string, width: number, ellipsis = ""): string {
+	const clipped = truncateToWidth(text, width, ellipsis);
+	return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+
+export function center(text: string, width: number): string {
+	if (width <= 0) return "";
+	const w = visibleWidth(text);
+	if (w >= width) return truncateToWidth(text, width, "...");
+	return `${" ".repeat(Math.floor((width - w) / 2))}${text}`;
+}
+
+export function sanitizeStatus(text: string): string {
+	return stripAnsi(text)
+		.replace(/[\u0000-\u001f\u007f-\u009f]/g, " ")
+		.replace(/ +/g, " ")
+		.trim();
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "pi-open-tui",
+  "version": "0.1.0",
+  "description": "A polished TUI for Pi coding agent: animated logo header, Starship-style footer, rounded editor with model metadata, and prompt-box user messages. Combines the best of pi-haiku, pi-claude-code-tui, and pi-zentui.",
+  "type": "module",
+  "keywords": [
+    "pi-package",
+    "pi",
+    "pi-coding-agent",
+    "pi-extension",
+    "tui",
+    "starship",
+    "theme"
+  ],
+  "license": "MIT",
+  "files": [
+    "extensions/",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "node --test --experimental-transform-types tests/settings-command.test.ts tests/footer.test.ts tests/editor.test.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "pi": {
+    "extensions": [
+      "./extensions/open-tui/index.ts"
+    ]
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-coding-agent": ">=0.80",
+    "@earendil-works/pi-ai": ">=0.80",
+    "@earendil-works/pi-tui": ">=0.80"
+  },
+  "peerDependenciesMeta": {
+    "@earendil-works/pi-coding-agent": {
+      "optional": true
+    },
+    "@earendil-works/pi-ai": {
+      "optional": true
+    },
+    "@earendil-works/pi-tui": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-ai": "*",
+    "@earendil-works/pi-tui": "*",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.5.0"
+  }
+}