pi-zentui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025
+
+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,160 @@
+# Zentui
+
+A Starship-inspired statusline and Opencode-style TUI for [Pi](https://github.com/badlogic/pi-mono).
+
+## Screenshots
+
+![Zentui](https://raw.githubusercontent.com/lmilojevicc/pi-zentui/main/assets/zentui.png)
+
+## What is this?
+
+Zentui brings two popular aesthetics to Pi:
+
+- **[Starship](https://starship.rs/) footer** — shows your current directory, git branch, git status indicators, and runtime/version detection in a compact, icon-rich format
+- **[Opencode](https://github.com/opencode-ai/opencode) editor and messages** — clean bordered input box with accent rail, transparent previous messages, and model/provider display inside the editor frame
+
+## Features
+
+### Footer (Starship-inspired)
+
+- `󰝰 dirname` — current directory with icon
+- `on  branch` — git branch with icon
+- `[!?↑]` — git status indicators (modified, untracked, ahead/behind, stashed, etc.)
+- `via  v5.5.0` — runtime detection with version (Bun, Deno, Node, Python, Go, Rust, Lua, Java, Ruby, PHP)
+- Right side shows context usage, token counts, and cost
+
+### Editor (Opencode-inspired)
+
+- Bordered input box with accent-colored left rail
+- Model name and provider displayed inside the editor frame
+- Thinking level indicator when enabled
+- Matching style for previous user messages
+
+### Git Status Icons
+
+| Icon | Meaning    |
+| ---- | ---------- |
+| `!`  | Modified   |
+| `?`  | Untracked  |
+| `+`  | Staged     |
+| `✘`  | Deleted    |
+| `»`  | Renamed    |
+| `=`  | Conflicted |
+| `$`  | Stashed    |
+| `↑`  | Ahead      |
+| `↓`  | Behind     |
+| `⇕`  | Diverged   |
+
+### Runtime Detection
+
+Detects project type and shows runtime version:
+
+| Runtime | Detection                                                   |
+| ------- | ----------------------------------------------------------- |
+| Bun     | `bun.lock`, `bun.lockb`                                     |
+| Deno    | `deno.json`, `deno.jsonc`, `deno.lock`                      |
+| Node.js | `package.json`, `.nvmrc`, `.node-version`                   |
+| Python  | `pyproject.toml`, `requirements.txt`, `setup.py`, `Pipfile` |
+| Go      | `go.mod`                                                    |
+| Rust    | `Cargo.toml`                                                |
+| Lua     | `stylua.toml`, `.luarc.json`, `init.lua`, `lua/` dir        |
+| Java    | `pom.xml`, `build.gradle`                                   |
+| Ruby    | `Gemfile`, `.ruby-version`                                  |
+| PHP     | `composer.json`                                             |
+
+## Install
+
+```bash
+# From npm
+pi install npm:pi-zentui
+
+# From git
+pi install git:github.com/lmilojevicc/pi-zentui
+```
+
+## Config
+
+On first run, Zentui creates a config file at:
+
+```
+~/.pi/agent/zentui.json
+```
+
+### Default config
+
+```json
+{
+  "icons": {
+    "cwd": "󰝰",
+    "git": "",
+    "ahead": "↑",
+    "behind": "↓",
+    "diverged": "⇕",
+    "conflicted": "=",
+    "untracked": "?",
+    "stashed": "$",
+    "modified": "!",
+    "staged": "+",
+    "renamed": "»",
+    "deleted": "✘",
+    "typechanged": "T"
+  },
+  "colors": {
+    "cwdText": "syntaxOperator",
+    "git": "syntaxKeyword",
+    "gitStatus": "error",
+    "contextNormal": "muted",
+    "contextWarning": "warning",
+    "contextError": "error",
+    "tokens": "muted",
+    "cost": "success",
+    "separator": "borderMuted"
+  }
+}
+```
+
+### Color values
+
+Colors can be:
+
+- Pi theme token names (e.g., `accent`, `error`, `syntaxKeyword`)
+- Hex colors (e.g., `#89b4fa`)
+
+This means Zentui works with any Pi theme — it uses your theme's colors by default.
+
+## Requirements
+
+- [Pi](https://github.com/badlogic/pi-mono) coding agent
+- A [Nerd Font](https://www.nerdfonts.com/) for icons
+
+## Development
+
+If you use [mise](https://mise.jdx.dev/):
+
+```bash
+mise install
+mise run setup
+mise run verify
+mise run fmt
+mise run ci
+```
+
+Without mise:
+
+```bash
+npm install
+npm run verify
+npm run fmt
+npm run pack:check
+```
+
+## Credits
+
+Inspired by:
+
+- [Starship](https://starship.rs/) — the minimal, blazing-fast, and infinitely customizable prompt
+- [Opencode](https://github.com/opencode-ai/opencode) — terminal-based AI coding assistant
+
+## License
+
+MIT

package/extensions/zentui/config.ts

@@ -0,0 +1,168 @@
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { getAgentDir } from "@mariozechner/pi-coding-agent";
+
+export type ColorSpec = string;
+
+export type PolishedTuiConfig = {
+	icons: {
+		cwd: string;
+		git: string;
+		ahead: string;
+		behind: string;
+		diverged: string;
+		conflicted: string;
+		untracked: string;
+		stashed: string;
+		modified: string;
+		staged: string;
+		renamed: string;
+		deleted: string;
+		typechanged: string;
+	};
+	colors: {
+		cwdText: ColorSpec;
+		git: ColorSpec;
+		gitStatus: ColorSpec;
+		contextNormal: ColorSpec;
+		contextWarning: ColorSpec;
+		contextError: ColorSpec;
+		tokens: ColorSpec;
+		cost: ColorSpec;
+		separator: ColorSpec;
+	};
+};
+
+export const configPath = join(getAgentDir(), "zentui.json");
+
+const themeColorTokens = new Set([
+	"accent",
+	"border",
+	"borderAccent",
+	"borderMuted",
+	"success",
+	"error",
+	"warning",
+	"muted",
+	"dim",
+	"text",
+	"thinkingText",
+	"userMessageText",
+	"customMessageText",
+	"customMessageLabel",
+	"toolTitle",
+	"toolOutput",
+	"mdHeading",
+	"mdLink",
+	"mdLinkUrl",
+	"mdCode",
+	"mdCodeBlock",
+	"mdCodeBlockBorder",
+	"mdQuote",
+	"mdQuoteBorder",
+	"mdHr",
+	"mdListBullet",
+	"toolDiffAdded",
+	"toolDiffRemoved",
+	"toolDiffContext",
+	"syntaxComment",
+	"syntaxKeyword",
+	"syntaxFunction",
+	"syntaxVariable",
+	"syntaxString",
+	"syntaxNumber",
+	"syntaxType",
+	"syntaxOperator",
+	"syntaxPunctuation",
+	"thinkingOff",
+	"thinkingMinimal",
+	"thinkingLow",
+	"thinkingMedium",
+	"thinkingHigh",
+	"thinkingXhigh",
+	"bashMode",
+]);
+
+export const defaultConfig: PolishedTuiConfig = {
+	icons: {
+		cwd: "󰝰",
+		git: "",
+		ahead: "↑",
+		behind: "↓",
+		diverged: "⇕",
+		conflicted: "=",
+		untracked: "?",
+		stashed: "$",
+		modified: "!",
+		staged: "+",
+		renamed: "»",
+		deleted: "✘",
+		typechanged: "T",
+	},
+	colors: {
+		cwdText: "syntaxOperator",
+		git: "syntaxKeyword",
+		gitStatus: "error",
+		contextNormal: "muted",
+		contextWarning: "warning",
+		contextError: "error",
+		tokens: "muted",
+		cost: "success",
+		separator: "borderMuted",
+	},
+};
+
+function isHexColor(value: string): boolean {
+	return /^#(?:[0-9a-fA-F]{6})$/.test(value);
+}
+
+function hexToAnsi(hex: string, isBackground = false): string {
+	const normalized = hex.slice(1);
+	const r = Number.parseInt(normalized.slice(0, 2), 16);
+	const g = Number.parseInt(normalized.slice(2, 4), 16);
+	const b = Number.parseInt(normalized.slice(4, 6), 16);
+	return `\x1b[${isBackground ? 48 : 38};2;${r};${g};${b}m`;
+}
+
+type ThemeLike = {
+	fg(color: string, text: string): string;
+};
+
+export function colorize(theme: ThemeLike, color: ColorSpec, text: string): string {
+	if (themeColorTokens.has(color)) {
+		return theme.fg(color, text);
+	}
+	if (isHexColor(color)) {
+		return `${hexToAnsi(color)}${text}\x1b[39m`;
+	}
+	return theme.fg("text", text);
+}
+
+export function ensureConfigExists(): void {
+	try {
+		if (!existsSync(configPath)) {
+			writeFileSync(configPath, `${JSON.stringify(defaultConfig, null, 2)}\n`, "utf8");
+		}
+	} catch {
+		// Ignore config bootstrap failures; extension will fall back to defaults.
+	}
+}
+
+export function loadConfig(): PolishedTuiConfig {
+	try {
+		if (!existsSync(configPath)) return defaultConfig;
+		const parsed = JSON.parse(readFileSync(configPath, "utf8")) as Partial<PolishedTuiConfig>;
+		return {
+			icons: {
+				...defaultConfig.icons,
+				...(parsed.icons ?? {}),
+			},
+			colors: {
+				...defaultConfig.colors,
+				...(parsed.colors ?? {}),
+			},
+		};
+	} catch {
+		return defaultConfig;
+	}
+}

package/extensions/zentui/git.ts

@@ -0,0 +1,103 @@
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+
+const execFileAsync = promisify(execFile);
+
+export type GitStatusSummary = {
+	branch?: string;
+	dirty: boolean;
+	ahead: number;
+	behind: number;
+	conflicted: number;
+	untracked: number;
+	stashed: boolean;
+	modified: number;
+	staged: number;
+	renamed: number;
+	deleted: number;
+	typechanged: number;
+};
+
+export function emptyGitStatus(): GitStatusSummary {
+	return {
+		branch: undefined,
+		dirty: false,
+		ahead: 0,
+		behind: 0,
+		conflicted: 0,
+		untracked: 0,
+		stashed: false,
+		modified: 0,
+		staged: 0,
+		renamed: 0,
+		deleted: 0,
+		typechanged: 0,
+	};
+}
+
+export function parseGitStatusPorcelain(stdoutText: string, hasStash: boolean): GitStatusSummary {
+	const status = emptyGitStatus();
+	status.stashed = hasStash;
+
+	for (const line of stdoutText.split(/\r?\n/)) {
+		if (!line) continue;
+		if (line.startsWith("# branch.head ")) {
+			const branch = line.slice("# branch.head ".length).trim();
+			status.branch = branch && branch !== "(detached)" ? branch : undefined;
+			continue;
+		}
+		if (line.startsWith("# branch.ab ")) {
+			const match = line.match(/\+(\d+)\s+-(\d+)/);
+			if (match) {
+				status.ahead = Number(match[1] ?? 0);
+				status.behind = Number(match[2] ?? 0);
+			}
+			continue;
+		}
+		if (line.startsWith("#")) continue;
+
+		status.dirty = true;
+
+		if (line.startsWith("? ")) {
+			status.untracked += 1;
+			continue;
+		}
+		if (line.startsWith("u ")) {
+			status.conflicted += 1;
+			continue;
+		}
+		if (!(line.startsWith("1 ") || line.startsWith("2 "))) continue;
+
+		const xy = line.split(" ")[1] ?? "..";
+		const x = xy[0] ?? ".";
+		const y = xy[1] ?? ".";
+
+		if (x === "R") status.renamed += 1;
+		else if (x === "D") status.deleted += 1;
+		else if (x === "T") status.typechanged += 1;
+		else if (x !== "." && x !== " ") status.staged += 1;
+
+		if (y === "M") status.modified += 1;
+		else if (y === "D") status.deleted += 1;
+		else if (y === "T") status.typechanged += 1;
+	}
+
+	return status;
+}
+
+export async function readGitStatus(cwd: string): Promise<GitStatusSummary> {
+	try {
+		const [{ stdout: statusStdout }, stashResult] = await Promise.all([
+			execFileAsync("git", ["status", "--porcelain=2", "--branch"], { cwd }),
+			execFileAsync("git", ["rev-parse", "--verify", "--quiet", "refs/stash"], { cwd }).catch(
+				() => ({ stdout: "" }),
+			),
+		]);
+		const stdoutText = typeof statusStdout === "string" ? statusStdout : String(statusStdout);
+		const stashStdout =
+			typeof stashResult.stdout === "string" ? stashResult.stdout : String(stashResult.stdout);
+		return parseGitStatusPorcelain(stdoutText, stashStdout.trim().length > 0);
+	} catch {
+		return emptyGitStatus();
+	}
+}

package/extensions/zentui/index.ts

@@ -0,0 +1,359 @@
+import type { AssistantMessage } from "@mariozechner/pi-ai";
+import type {
+	ExtensionAPI,
+	ExtensionContext,
+	KeybindingsManager,
+	Theme,
+} from "@mariozechner/pi-coding-agent";
+import { type EditorTheme, type TUI, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+import { type PolishedTuiConfig, colorize, ensureConfigExists, loadConfig } from "./config";
+import { type GitStatusSummary, emptyGitStatus, readGitStatus } from "./git";
+import { type RuntimeInfo, readRuntimeInfo } from "./runtime";
+import { PolishedEditor, patchUserMessageComponent } from "./ui";
+
+type FooterState = GitStatusSummary & {
+	busy: boolean;
+	modelLabel: string;
+	providerLabel: string;
+	contextLabel: string;
+	tokenLabel: string;
+	costLabel: string;
+	runtime?: RuntimeInfo;
+};
+
+type UsageTotals = {
+	input: number;
+	output: number;
+	cost: number;
+};
+
+function formatCount(value: number): string {
+	if (value < 1000) return `${value}`;
+	if (value < 10_000) return `${(value / 1000).toFixed(1)}k`;
+	return `${Math.round(value / 1000)}k`;
+}
+
+function formatProviderLabel(provider: string | undefined): string {
+	if (!provider) return "Unknown";
+
+	const known: Record<string, string> = {
+		anthropic: "Anthropic",
+		gemini: "Google",
+		google: "Google",
+		ollama: "Ollama",
+		openai: "OpenAI",
+		"openai-codex": "OpenAI",
+	};
+
+	return (
+		known[provider] ?? provider.replace(/[-_]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase())
+	);
+}
+
+function getUsageTotals(ctx: ExtensionContext): UsageTotals {
+	let input = 0;
+	let output = 0;
+	let cost = 0;
+
+	for (const entry of ctx.sessionManager.getBranch()) {
+		if (entry.type !== "message" || entry.message.role !== "assistant") continue;
+		const message = entry.message as AssistantMessage;
+		input += message.usage?.input ?? 0;
+		output += message.usage?.output ?? 0;
+		cost += message.usage?.cost?.total ?? 0;
+	}
+
+	return { input, output, cost };
+}
+
+function buildTokenLabel(totals: UsageTotals): string {
+	return `↑${formatCount(totals.input)} ↓${formatCount(totals.output)}`;
+}
+
+function buildCostLabel(totals: UsageTotals): string {
+	return `$${totals.cost.toFixed(3)}`;
+}
+
+function buildContextLabel(ctx: ExtensionContext): string {
+	const usage = ctx.getContextUsage();
+	const contextWindow = ctx.model?.contextWindow ?? usage?.contextWindow;
+
+	if (!usage || !contextWindow || contextWindow <= 0) return "--";
+
+	const percent =
+		usage.percent === null ? "?" : `${Math.max(0, Math.min(999, Math.round(usage.percent)))}%`;
+	return `${percent}/${formatCount(contextWindow)}`;
+}
+
+function getRuntimeColorToken(runtime: RuntimeInfo | undefined): string {
+	switch (runtime?.name) {
+		case "nodejs":
+			return "success";
+		case "deno":
+			return "syntaxType";
+		case "bun":
+			return "warning";
+		case "python":
+		case "java":
+			return "warning";
+		case "rust":
+		case "ruby":
+			return "error";
+		case "golang":
+			return "syntaxType";
+		case "lua":
+		case "php":
+			return "accent";
+		default:
+			return "text";
+	}
+}
+
+function formatRuntimeSegment(
+	theme: Pick<Theme, "fg">,
+	runtime: RuntimeInfo | undefined,
+	mutedColor: string,
+): string {
+	if (!runtime) return "";
+	const label = runtime.version ? `${runtime.symbol} ${runtime.version}` : runtime.symbol;
+	return `${colorize(theme, mutedColor, "via")} ${colorize(theme, getRuntimeColorToken(runtime), label)}`;
+}
+
+function formatCwdLabel(cwd: string, cwdIcon: string): string {
+	const normalized = cwd.replace(/\\/g, "/").replace(/\/+$/, "");
+	const parts = normalized.split("/").filter(Boolean);
+	const last = parts[parts.length - 1] ?? cwd;
+	return cwdIcon ? `${cwdIcon} ${last}` : last;
+}
+
+export default function (pi: ExtensionAPI) {
+	const state: FooterState = {
+		busy: false,
+		modelLabel: "no-model",
+		providerLabel: "Unknown",
+		contextLabel: "--",
+		tokenLabel: "↑0 ↓0",
+		costLabel: "$0.000",
+		runtime: undefined,
+		...emptyGitStatus(),
+	};
+
+	let currentConfig: PolishedTuiConfig = loadConfig();
+	let requestFooterRender: (() => void) | undefined;
+	let projectRefreshInFlight = false;
+	let projectRefreshPending = false;
+
+	const refresh = () => requestFooterRender?.();
+
+	const syncState = (ctx: ExtensionContext) => {
+		const totals = getUsageTotals(ctx);
+		state.modelLabel = ctx.model?.id ?? "no-model";
+		state.providerLabel = formatProviderLabel(ctx.model?.provider);
+		state.contextLabel = buildContextLabel(ctx);
+		state.tokenLabel = buildTokenLabel(totals);
+		state.costLabel = buildCostLabel(totals);
+	};
+
+	const refreshProjectState = async (ctx: ExtensionContext) => {
+		const [gitStatus, runtime] = await Promise.all([
+			readGitStatus(ctx.cwd),
+			readRuntimeInfo(ctx.cwd),
+		]);
+		Object.assign(state, gitStatus);
+		state.runtime = runtime;
+	};
+
+	const scheduleProjectRefresh = (ctx: ExtensionContext) => {
+		if (projectRefreshInFlight) {
+			projectRefreshPending = true;
+			return;
+		}
+
+		projectRefreshInFlight = true;
+		void refreshProjectState(ctx).finally(() => {
+			projectRefreshInFlight = false;
+			refresh();
+			if (projectRefreshPending) {
+				projectRefreshPending = false;
+				scheduleProjectRefresh(ctx);
+			}
+		});
+	};
+
+	const installFooter = (ctx: ExtensionContext) => {
+		syncState(ctx);
+
+		ctx.ui.setFooter((tui, theme, footerData) => {
+			requestFooterRender = () => tui.requestRender();
+			const unsubscribeBranch = footerData.onBranchChange(() => {
+				scheduleProjectRefresh(ctx);
+				tui.requestRender();
+			});
+			const separator = colorize(theme, currentConfig.colors.separator, " | ");
+
+			return {
+				dispose: () => {
+					unsubscribeBranch();
+					requestFooterRender = undefined;
+				},
+				invalidate() {},
+				render(width: number): string[] {
+					const innerWidth = Math.max(1, width - 2);
+					const cwdLabel = colorize(
+						theme,
+						currentConfig.colors.cwdText,
+						formatCwdLabel(ctx.cwd, currentConfig.icons.cwd),
+					);
+					const branch = state.branch;
+					const contextUsage = ctx.getContextUsage();
+					const contextColor =
+						contextUsage?.percent !== null && contextUsage?.percent !== undefined
+							? contextUsage.percent >= 90
+								? currentConfig.colors.contextError
+								: contextUsage.percent >= 70
+									? currentConfig.colors.contextWarning
+									: currentConfig.colors.contextNormal
+							: currentConfig.colors.contextNormal;
+					const gitColor = (text: string) => colorize(theme, currentConfig.colors.git, text);
+					const gitStatusColor = (text: string) =>
+						colorize(theme, currentConfig.colors.gitStatus, text);
+					const gitIcon = gitColor(currentConfig.icons.git);
+					const allStatus = [
+						state.conflicted > 0 ? currentConfig.icons.conflicted : "",
+						state.stashed ? currentConfig.icons.stashed : "",
+						state.deleted > 0 ? currentConfig.icons.deleted : "",
+						state.renamed > 0 ? currentConfig.icons.renamed : "",
+						state.modified > 0 ? currentConfig.icons.modified : "",
+						state.typechanged > 0 ? currentConfig.icons.typechanged : "",
+						state.staged > 0 ? currentConfig.icons.staged : "",
+						state.untracked > 0 ? currentConfig.icons.untracked : "",
+					].join("");
+					const aheadBehind =
+						state.ahead > 0 && state.behind > 0
+							? currentConfig.icons.diverged
+							: state.ahead > 0
+								? currentConfig.icons.ahead
+								: state.behind > 0
+									? currentConfig.icons.behind
+									: "";
+					const statusBlock =
+						allStatus || aheadBehind ? gitStatusColor(`[${allStatus}${aheadBehind}]`) : "";
+					const branchLabel = branch
+						? `${colorize(theme, "text", "on")} ${gitIcon} ${gitColor(branch)}${statusBlock ? ` ${statusBlock}` : ""}`
+						: "";
+					const runtimeLabel = formatRuntimeSegment(theme, state.runtime, "text");
+
+					const left = [cwdLabel, branchLabel, runtimeLabel].filter(Boolean).join(" ");
+					const right = [
+						colorize(theme, contextColor, state.contextLabel),
+						colorize(theme, currentConfig.colors.tokens, state.tokenLabel),
+						colorize(theme, currentConfig.colors.cost, state.costLabel),
+					].join(separator);
+
+					const leftWidth = visibleWidth(left);
+					const rightWidth = visibleWidth(right);
+					const content =
+						leftWidth >= innerWidth
+							? truncateToWidth(left, innerWidth)
+							: leftWidth + 1 + rightWidth <= innerWidth
+								? `${left}${" ".repeat(innerWidth - leftWidth - rightWidth)}${right}`
+								: left;
+					return [` ${content} `];
+				},
+			};
+		});
+	};
+
+	const installEditor = (ctx: ExtensionContext) => {
+		syncState(ctx);
+
+		let currentEditor: PolishedEditor | undefined;
+		let autocompleteFixed = false;
+
+		type AutocompleteEditorInternals = {
+			autocompleteProvider?: unknown;
+		};
+
+		const editorFactory = (tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager) => {
+			const editor = new PolishedEditor(
+				tui,
+				theme,
+				keybindings,
+				ctx.ui.theme,
+				() =>
+					[
+						ctx.ui.theme.fg("accent", state.modelLabel),
+						ctx.ui.theme.fg("text", state.providerLabel),
+					].join(ctx.ui.theme.fg("borderMuted", "  ")),
+				() => pi.getThinkingLevel(),
+			);
+			currentEditor = editor;
+
+			const originalHandleInput = editor.handleInput.bind(editor);
+			editor.handleInput = (data: string) => {
+				const editorInternals = editor as unknown as AutocompleteEditorInternals;
+				if (!autocompleteFixed && !editorInternals.autocompleteProvider) {
+					autocompleteFixed = true;
+					ctx.ui.setEditorComponent(editorFactory);
+					currentEditor?.handleInput(data);
+					return;
+				}
+				originalHandleInput(data);
+			};
+
+			return editor;
+		};
+
+		ctx.ui.setEditorComponent(editorFactory);
+	};
+
+	const installUi = (ctx: ExtensionContext) => {
+		ensureConfigExists();
+		currentConfig = loadConfig();
+		patchUserMessageComponent(ctx.ui.theme);
+		installFooter(ctx);
+		installEditor(ctx);
+		scheduleProjectRefresh(ctx);
+		refresh();
+	};
+
+	pi.on("session_start", async (_event, ctx) => {
+		installUi(ctx);
+	});
+
+	pi.on("agent_start", async (_event, ctx) => {
+		state.busy = true;
+		syncState(ctx);
+		refresh();
+	});
+
+	pi.on("agent_end", async (_event, ctx) => {
+		state.busy = false;
+		syncState(ctx);
+		scheduleProjectRefresh(ctx);
+		refresh();
+	});
+
+	pi.on("model_select", async (_event, ctx) => {
+		syncState(ctx);
+		refresh();
+	});
+
+	pi.on("message_end", async (_event, ctx) => {
+		syncState(ctx);
+		scheduleProjectRefresh(ctx);
+		refresh();
+	});
+
+	pi.on("tool_execution_end", async (_event, ctx) => {
+		syncState(ctx);
+		scheduleProjectRefresh(ctx);
+		refresh();
+	});
+
+	pi.on("session_compact", async (_event, ctx) => {
+		syncState(ctx);
+		scheduleProjectRefresh(ctx);
+		refresh();
+	});
+}

package/extensions/zentui/runtime.ts

@@ -0,0 +1,193 @@
+import { execFile } from "node:child_process";
+import { existsSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { promisify } from "node:util";
+
+const execFileAsync = promisify(execFile);
+const VERSION_TIMEOUT_MS = 2500;
+
+export type RuntimeInfo = {
+	name: string;
+	symbol: string;
+	version?: string;
+};
+
+type RuntimeCandidate = {
+	name: string;
+	symbol: string;
+	detect: (cwd: string, entries: string[]) => boolean;
+	version: (cwd: string) => Promise<string | undefined>;
+};
+
+function hasAnyFile(cwd: string, names: string[]): boolean {
+	return names.some((name) => existsSync(join(cwd, name)));
+}
+
+function hasLuaFile(entries: string[]): boolean {
+	return entries.some((entry) => entry.endsWith(".lua"));
+}
+
+function hasAnyEntry(entries: string[], names: string[]): boolean {
+	return names.some((name) => entries.includes(name));
+}
+
+async function runVersion(
+	command: string,
+	args: string[] = [],
+	cwd?: string,
+): Promise<string | undefined> {
+	try {
+		const { stdout, stderr } = await execFileAsync(command, args, {
+			cwd,
+			timeout: VERSION_TIMEOUT_MS,
+		});
+		const text =
+			`${typeof stdout === "string" ? stdout : String(stdout)}\n${typeof stderr === "string" ? stderr : String(stderr)}`.trim();
+		return text || undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+function prefixVersion(version: string | undefined): string | undefined {
+	if (!version) return undefined;
+	return version.startsWith("v") ? version : `v${version}`;
+}
+
+const runtimes: RuntimeCandidate[] = [
+	{
+		name: "bun",
+		symbol: "",
+		detect: (cwd) => hasAnyFile(cwd, ["bun.lock", "bun.lockb"]),
+		version: async () => prefixVersion(await runVersion("bun", ["--version"])),
+	},
+	{
+		name: "deno",
+		symbol: "",
+		detect: (cwd) => hasAnyFile(cwd, ["deno.json", "deno.jsonc", "deno.lock"]),
+		version: async () => {
+			const output = await runVersion("deno", ["--version"]);
+			const match = output?.match(/deno\s+([0-9][^\s]*)/i);
+			return prefixVersion(match?.[1]);
+		},
+	},
+	{
+		name: "lua",
+		symbol: "",
+		detect: (cwd, entries) =>
+			hasAnyFile(cwd, ["stylua.toml", ".stylua.toml", ".luarc.json", ".luarc.jsonc", "init.lua"]) ||
+			hasAnyEntry(entries, ["lua"]) ||
+			hasLuaFile(entries),
+		version: async () => {
+			const lua = await runVersion("lua", ["-v"]);
+			const luaMatch = lua?.match(/Lua\s+([0-9][^\s]*)/i);
+			if (luaMatch?.[1]) return prefixVersion(luaMatch[1]);
+			const luajit = await runVersion("luajit", ["-v"]);
+			const luajitMatch = luajit?.match(/LuaJIT\s+([0-9][^\s]*)/i);
+			return prefixVersion(luajitMatch?.[1]);
+		},
+	},
+	{
+		name: "nodejs",
+		symbol: "",
+		detect: (cwd) => hasAnyFile(cwd, ["package.json", ".nvmrc", ".node-version"]),
+		version: async () => prefixVersion(await runVersion("node", ["--version"])),
+	},
+	{
+		name: "python",
+		symbol: "",
+		detect: (cwd) =>
+			hasAnyFile(cwd, [
+				"pyproject.toml",
+				"requirements.txt",
+				"setup.py",
+				"setup.cfg",
+				"Pipfile",
+				".python-version",
+			]),
+		version: async () => {
+			const python3 = await runVersion("python3", ["--version"]);
+			const python3Match = python3?.match(/Python\s+([0-9][^\s]*)/i);
+			if (python3Match?.[1]) return prefixVersion(python3Match[1]);
+			const python = await runVersion("python", ["--version"]);
+			const pythonMatch = python?.match(/Python\s+([0-9][^\s]*)/i);
+			return prefixVersion(pythonMatch?.[1]);
+		},
+	},
+	{
+		name: "golang",
+		symbol: "",
+		detect: (cwd) => hasAnyFile(cwd, ["go.mod"]),
+		version: async () => {
+			const output = await runVersion("go", ["version"]);
+			const match = output?.match(/go version go([0-9][^\s]*)/i);
+			return prefixVersion(match?.[1]);
+		},
+	},
+	{
+		name: "rust",
+		symbol: "󱘗",
+		detect: (cwd) => hasAnyFile(cwd, ["Cargo.toml"]),
+		version: async () => {
+			const output = await runVersion("rustc", ["--version"]);
+			const match = output?.match(/rustc\s+([0-9][^\s]*)/i);
+			return prefixVersion(match?.[1]);
+		},
+	},
+	{
+		name: "java",
+		symbol: "",
+		detect: (cwd) => hasAnyFile(cwd, ["pom.xml", "build.gradle", "build.gradle.kts"]),
+		version: async () => {
+			const output = await runVersion("java", ["-version"]);
+			const quoted = output?.match(/"([0-9][^"]*)"/);
+			if (quoted?.[1]) return prefixVersion(quoted[1]);
+			const plain = output?.match(/version\s+([0-9][^\s]*)/i);
+			return prefixVersion(plain?.[1]);
+		},
+	},
+	{
+		name: "ruby",
+		symbol: "",
+		detect: (cwd) => hasAnyFile(cwd, ["Gemfile", ".ruby-version"]),
+		version: async () => {
+			const output = await runVersion("ruby", ["--version"]);
+			const match = output?.match(/ruby\s+([0-9][^\s]*)/i);
+			return prefixVersion(match?.[1]);
+		},
+	},
+	{
+		name: "php",
+		symbol: "",
+		detect: (cwd) => hasAnyFile(cwd, ["composer.json"]),
+		version: async () => {
+			const output = await runVersion("php", ["--version"]);
+			const match = output?.match(/PHP\s+([0-9][^\s]*)/i);
+			return prefixVersion(match?.[1]);
+		},
+	},
+];
+
+export function detectRuntime(cwd: string, entries: string[]): RuntimeCandidate | undefined {
+	for (const runtime of runtimes) {
+		if (runtime.detect(cwd, entries)) return runtime;
+	}
+	return undefined;
+}
+
+export async function readRuntimeInfo(cwd: string): Promise<RuntimeInfo | undefined> {
+	let entries: string[] = [];
+	try {
+		entries = readdirSync(cwd);
+	} catch {
+		entries = [];
+	}
+
+	const runtime = detectRuntime(cwd, entries);
+	if (!runtime) return undefined;
+	return {
+		name: runtime.name,
+		symbol: runtime.symbol,
+		version: await runtime.version(cwd),
+	};
+}

package/extensions/zentui/ui.ts

@@ -0,0 +1,164 @@
+import {
+	CustomEditor,
+	type KeybindingsManager,
+	type Theme,
+	UserMessageComponent,
+} from "@mariozechner/pi-coding-agent";
+import {
+	type Component,
+	Container,
+	type EditorTheme,
+	type TUI,
+	truncateToWidth,
+	visibleWidth,
+} from "@mariozechner/pi-tui";
+
+const OSC133_ZONE_START = "\x1b]133;A\x07";
+const OSC133_ZONE_END = "\x1b]133;B\x07";
+const OSC133_ZONE_FINAL = "\x1b]133;C\x07";
+const originalUserMessageRender = UserMessageComponent.prototype.render;
+
+type AutocompleteEditorInternals = {
+	autocompleteList?: Pick<Component, "render">;
+	isShowingAutocomplete?: () => boolean;
+};
+
+let currentUiTheme: Theme | undefined;
+
+const TRUECOLOR_BACKGROUND_ANSI = /\x1b\[48;2;\d+;\d+;\d+m/g;
+const INDEXED_BACKGROUND_ANSI = /\x1b\[48;5;\d+m/g;
+const SIMPLE_BACKGROUND_ANSI = /\x1b\[(?:4\d|10[0-7]|49)m/g;
+
+function stripBackgroundAnsi(text: string): string {
+	return text
+		.replace(TRUECOLOR_BACKGROUND_ANSI, "")
+		.replace(INDEXED_BACKGROUND_ANSI, "")
+		.replace(SIMPLE_BACKGROUND_ANSI, "");
+}
+
+function fillStyledLine(
+	content: string,
+	width: number,
+	background?: (text: string) => string,
+): string {
+	const truncated = truncateToWidth(stripBackgroundAnsi(content), width, "");
+	const padWidth = Math.max(0, width - visibleWidth(truncated));
+	const pad =
+		padWidth > 0 ? (background ? background(" ".repeat(padWidth)) : " ".repeat(padWidth)) : "";
+	return `${truncated}${pad}`;
+}
+
+export function patchUserMessageComponent(uiTheme: Theme): void {
+	currentUiTheme = uiTheme;
+
+	const prototype = UserMessageComponent.prototype as {
+		render(width: number): string[];
+	};
+	prototype.render = function (this: UserMessageComponent, width: number): string[] {
+		if (!currentUiTheme) {
+			return originalUserMessageRender.call(this, width);
+		}
+
+		const railWidth = 2;
+		const innerWidth = Math.max(1, width - railWidth);
+		const baseLines = Container.prototype.render.call(this, innerWidth) as string[];
+		if (baseLines.length === 0) return baseLines;
+
+		const hasLeadingSpacer = baseLines.length > 1 && visibleWidth(baseLines[0] ?? "") === 0;
+		const leadingLines = hasLeadingSpacer ? [baseLines[0] ?? ""] : [];
+		const contentLines = hasLeadingSpacer ? baseLines.slice(1) : baseLines;
+		const rail = `${currentUiTheme.fg("accent", "│")}\x1b[0m `;
+		const border = currentUiTheme.fg("border", "─".repeat(width));
+		const styledLines = contentLines.map((line) => `${rail}${fillStyledLine(line, innerWidth)}`);
+
+		if (styledLines.length === 0) {
+			return leadingLines;
+		}
+
+		const framedLines = [border, ...styledLines, border];
+		framedLines[0] = OSC133_ZONE_START + framedLines[0];
+		framedLines[framedLines.length - 1] =
+			framedLines[framedLines.length - 1] + OSC133_ZONE_END + OSC133_ZONE_FINAL;
+		return [...leadingLines, ...framedLines];
+	};
+}
+
+export class PolishedEditor extends CustomEditor {
+	private readonly getModelMeta: () => string;
+	private readonly getThinkingLevel: () => string | undefined;
+	private readonly uiTheme: Theme;
+	private readonly reset = "\x1b[0m";
+
+	constructor(
+		tui: TUI,
+		theme: EditorTheme,
+		keybindings: KeybindingsManager,
+		uiTheme: Theme,
+		getModelMeta: () => string,
+		getThinkingLevel: () => string | undefined,
+	) {
+		super(tui, theme, keybindings, { paddingX: 0 });
+		this.borderColor = (text: string) => uiTheme.fg("border", text);
+		this.uiTheme = uiTheme;
+		this.getModelMeta = getModelMeta;
+		this.getThinkingLevel = getThinkingLevel;
+	}
+
+	private fillLine(content: string, width: number): string {
+		const truncated = truncateToWidth(content, width, "");
+		const pad = " ".repeat(Math.max(0, width - visibleWidth(truncated)));
+		return `${truncated}${pad}`;
+	}
+
+	render(width: number): string[] {
+		const innerWidth = Math.max(1, width - 2);
+		const rendered = super.render(innerWidth);
+		const editorInternals = this as unknown as AutocompleteEditorInternals;
+		const isShowingAutocomplete =
+			typeof editorInternals.isShowingAutocomplete === "function"
+				? Boolean(editorInternals.isShowingAutocomplete())
+				: false;
+
+		if (rendered.length < 2) {
+			return super.render(width);
+		}
+
+		const { autocompleteList } = editorInternals;
+		const autocompleteCount =
+			isShowingAutocomplete && typeof autocompleteList?.render === "function"
+				? autocompleteList.render(innerWidth).length
+				: 0;
+		const editorFrame =
+			autocompleteCount > 0 && autocompleteCount < rendered.length
+				? rendered.slice(0, -autocompleteCount)
+				: rendered;
+		const autocompleteLines =
+			autocompleteCount > 0 && autocompleteCount < rendered.length
+				? rendered.slice(-autocompleteCount)
+				: [];
+
+		if (editorFrame.length < 2) {
+			return rendered;
+		}
+
+		const editorLines = editorFrame.slice(1, -1);
+		const metaParts = [this.getModelMeta()];
+		const thinkingLevel = this.getThinkingLevel();
+		if (thinkingLevel && thinkingLevel !== "off") {
+			metaParts.push(this.uiTheme.fg("muted", thinkingLevel));
+		}
+		const meta = metaParts.filter(Boolean).join(this.uiTheme.fg("border", "  "));
+
+		const rail = `${this.uiTheme.fg("accent", "│")}${this.reset} `;
+		const top = this.uiTheme.fg("border", "─".repeat(width));
+		const bottom = this.uiTheme.fg("border", "─".repeat(width));
+		const lines = ["", ...editorLines, "", meta];
+
+		return [
+			top,
+			...lines.map((line) => `${rail}${this.fillLine(line, innerWidth)}`),
+			bottom,
+			...autocompleteLines,
+		];
+	}
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "pi-zentui",
+	"version": "0.1.0",
+	"description": "A Starship-inspired statusline and Opencode-style TUI for Pi.",
+	"type": "module",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/lmilojevicc/pi-zentui.git"
+	},
+	"homepage": "https://github.com/lmilojevicc/pi-zentui#readme",
+	"bugs": {
+		"url": "https://github.com/lmilojevicc/pi-zentui/issues"
+	},
+	"keywords": ["pi-package", "pi-extension", "starship", "tui"],
+	"files": ["extensions"],
+	"scripts": {
+		"lint": "biome check .",
+		"typecheck": "tsc --noEmit",
+		"test": "vitest run",
+		"fmt": "biome format --write .",
+		"fmt:check": "biome format --check .",
+		"verify": "npm run lint && npm run typecheck && npm run test",
+		"pack:check": "npm pack --dry-run",
+		"prepublishOnly": "npm run verify && npm run pack:check"
+	},
+	"peerDependencies": {
+		"@mariozechner/pi-ai": "*",
+		"@mariozechner/pi-coding-agent": "*",
+		"@mariozechner/pi-tui": "*"
+	},
+	"pi": {
+		"extensions": ["./extensions"],
+		"image": "https://raw.githubusercontent.com/lmilojevicc/pi-zentui/main/assets/zentui.png"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.9.4",
+		"@mariozechner/pi-ai": "^0.65.2",
+		"@mariozechner/pi-coding-agent": "^0.65.2",
+		"@mariozechner/pi-tui": "^0.65.2",
+		"@types/node": "^25.5.2",
+		"typescript": "^6.0.2",
+		"vitest": "^3.2.4"
+	}
+}