pi-open-tui 0.2.2 → 0.2.4

package/extensions/open-tui/editor.ts

@@ -3,7 +3,6 @@ import {
 	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";
@@ -45,11 +44,13 @@ export class OpenTuiEditor extends CustomEditor {
 		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);
+		// ponytail: route the frame through this.borderColor so Pi can recolor it
+		// via updateEditorBorderColor() — bash mode ("! " prefix → green) and
+		// thinking-level borders both flow through this one property.
+		this.getRail = () => this.borderColor("│");
+		this.getBorder = (s: string) => this.borderColor(s);
 	}
 
 	override setPaddingX(_padding: number): void {
@@ -62,9 +63,8 @@ export class OpenTuiEditor extends CustomEditor {
 
 		const rail = this.getRail();
 		const borderPaint = this.getBorder;
-		const railWidth = 2;
-
-		const innerWidth = Math.max(0, width - railWidth);
+		// ponytail: 1-char rail + 1-char gap on each side = 4 chars of chrome.
+		const innerWidth = Math.max(0, width - 4);
 		const baseLines = super.render(innerWidth);
 		const bottomIdx = findBottomBorderIndex(baseLines);
 
@@ -74,9 +74,9 @@ export class OpenTuiEditor extends CustomEditor {
 		for (let i = 1; i < bottomIdx; i++) {
 			const line = baseLines[i] ?? "";
 			if (isEditorBorderLine(line)) {
-				result.push(`${rail} ${fillLine("", innerWidth)}`);
+				result.push(`${rail} ${fillLine("", innerWidth)} ${rail}`);
 			} else {
-				result.push(`${rail} ${fillLine(line, innerWidth)}`);
+				result.push(`${rail} ${fillLine(line, innerWidth)} ${rail}`);
 			}
 		}
 
@@ -91,9 +91,8 @@ export class OpenTuiEditor extends CustomEditor {
 }
 
 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),
+		new OpenTuiEditor(tui, editorTheme, keybindings),
 	);
 	return () => {
 		ctx.ui.setEditorComponent(undefined);

package/extensions/open-tui/footer.ts

@@ -9,6 +9,7 @@ import {
 	alignRight,
 	cacheHitColor,
 	effortColor,
+	fitSegmentsByPriority,
 	fmtTokens,
 	formatCwd,
 	formatDuration,
@@ -16,6 +17,7 @@ import {
 	providerColor,
 	sanitizeStatus,
 	stressColor,
+	truncatePath,
 } from "./utils.ts";
 import type { FooterState, ModelMeta, UsageTotals } from "./state.ts";
 import { getUsageTotals } from "./state.ts";
@@ -39,35 +41,37 @@ function renderGitSegment(
 	git: GitStatus,
 	glyphs: IconGlyphs,
 	segments: OpenTuiConfig["footerSegments"],
+	maxBranchLen = 20,
 ): string {
 	const parts: string[] = [];
 	if (segments.gitBranch) {
 		if (git.branch) {
 			parts.push(theme.fg("mdLink", glyphs.git));
-			parts.push(theme.fg("success", git.branch));
+			parts.push(theme.fg("mdLink", truncatePath(git.branch, maxBranchLen)));
 		} else if (git.commit?.detached) {
-			parts.push(theme.fg("mdLink", glyphs.git));
-			parts.push(theme.fg("success", "HEAD"));
-			if (segments.gitCommit && git.commit.oid) {
+			parts.push(theme.fg("warning", glyphs.git));
+			parts.push(theme.fg("warning", "HEAD"));
+			if (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})`));
+				parts.push(theme.fg("dim", `${shortHash}${tag}`));
 			}
 		}
 	}
 
 	if (segments.gitStatus) {
 		const statusIcons: string[] = [];
+		// ponytail: always show count — `!1` not `!`, so 1 vs 100 is distinguishable.
 		const addStatus = (count: number, glyph: string, color: ThemeColor) => {
-			if (count > 0) statusIcons.push(theme.fg(color, `${glyph}${count > 1 ? count : ""}`));
+			if (count > 0) statusIcons.push(theme.fg(color, `${glyph}${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.renamed, glyphs.renamed, "warning");
 		addStatus(git.staged, glyphs.staged, "success");
 		addStatus(git.untracked, glyphs.untracked, "muted");
+		addStatus(git.stashed, glyphs.stashed, "muted");
 
 		if (git.ahead > 0 && git.behind > 0) {
 			statusIcons.push(theme.fg("warning", `${glyphs.diverged}${git.ahead}/${git.behind}`));
@@ -128,7 +132,7 @@ function renderContextBar(
 	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));
+	const barWidth = Math.max(4, Math.min(12, width - reserved));
 	return `${contextIcon} ${renderBar(theme, contextPct, barWidth, resolveIconMode(iconMode) === "ascii")} ${pctText} ${theme.fg("dim", "·")} ${ctxText}`;
 }
 
@@ -209,25 +213,32 @@ export function installFooter(
 
 				const totals = getUsageTotals(ctx);
 
-				const leftParts: string[] = [];
+				const leftParts: { text: string; priority: number }[] = [];
 				if (segments.cwd) {
-					leftParts.push(`${theme.fg("mdLink", glyphs.cwd)} ${theme.fg("accent", formatCwd(ctx.sessionManager.getCwd()))}`);
+					const maxCwd = Math.min(30, Math.max(10, Math.floor(width * 0.4)));
+					leftParts.push({
+						text: `${theme.fg("mdLink", glyphs.cwd)} ${theme.fg("accent", truncatePath(formatCwd(ctx.sessionManager.getCwd()), maxCwd))}`,
+						priority: 0,
+					});
 				}
 				const gitSeg = renderGitSegment(theme, state.git, glyphs, segments);
-				if (gitSeg) leftParts.push(gitSeg);
+				if (gitSeg) leftParts.push({ text: gitSeg, priority: 3 });
 				if (segments.runtime) {
 					const runtimeSeg = renderRuntimeSegment(theme, state.runtime, config.icons.mode);
-					if (runtimeSeg) leftParts.push(runtimeSeg);
+					if (runtimeSeg) leftParts.push({ text: runtimeSeg, priority: 1 });
 				}
 				const timerSeg = renderTimerSegment(theme, state, glyphs);
-				if (timerSeg) leftParts.push(timerSeg);
+				if (timerSeg) leftParts.push({ text: timerSeg, priority: 2 });
 
 				let rightBlock = "";
 				if (segments.context) {
 					rightBlock = renderContextBar(theme, ctx, width, glyphs, config.icons.mode);
 				}
 
-				const line1 = alignRight(leftParts.join(" "), rightBlock, width, theme);
+				const rightW = visibleWidth(rightBlock);
+				const availLeft = Math.max(0, width - rightW - (rightBlock ? 1 : 0));
+				const fittedLeft = fitSegmentsByPriority(leftParts, availLeft, theme.fg("dim", "..."));
+				const line1 = alignRight(fittedLeft.join(" "), rightBlock, width, theme);
 
 				const modelParts: string[] = [];
 				modelParts.push(theme.fg("mdLink", glyphs.model));

package/extensions/open-tui/git.ts

@@ -83,7 +83,7 @@ export async function readGitStatus(
 				status.branch = undefined;
 				status.commit = { oid: null, detached: true, tag: null };
 			} else {
-				const branchMatch = branchPart.match(/^(\S+?)(?:\.\.\.(\S+))?(?:\s+\[(ahead|behind) (\d+)\])?/);
+				const branchMatch = branchPart.match(/^(\S+?)(?:\.\.\.(\S+))?(?:\s+\[(ahead|behind) (\d+)\])?$/);
 				if (branchMatch) {
 					status.branch = branchMatch[1];
 					if (branchMatch[3] === "ahead") status.ahead = parseInt(branchMatch[4]!, 10);

package/extensions/open-tui/header.ts

@@ -1,9 +1,19 @@
 import { VERSION, type ExtensionAPI, type ExtensionContext } from "@earendil-works/pi-coding-agent";
 import type { Component, TUI } from "@earendil-works/pi-tui";
-import { center, truncateToWidth } from "./utils.ts";
+import {
+	center,
+	collectPiCommandNames,
+	formatCwd,
+	formatModelLabel,
+	formatThinkingLabel,
+	headerColumnWidths,
+	padRight,
+	pickSlashCommandTips,
+	truncateToWidth,
+	visibleWidth,
+} from "./utils.ts";
 
 const LOGO_CELL = "███";
-const LOGO_ANIMATION_MS = 80;
 
 type LogoColor = "panel" | "cyan" | "red" | "green" | "orange" | "white" | "flash" | "brand";
 type LogoFrame = { phase: number; active: "left" | "top" | "right" | "none"; ax: number; ay: number; flash: boolean; white: boolean };
@@ -116,50 +126,107 @@ function renderLogo(frameIndex: number, paintBrand: (text: string) => string): s
 	});
 }
 
+function borderLine(
+	left: string,
+	label: string,
+	right: string,
+	width: number,
+	paint: (text: string) => string,
+): string {
+	if (width <= 1) return "";
+	if (width < 8 || label.length === 0) {
+		return paint(truncateToWidth(left + "─".repeat(Math.max(0, width - 2)) + right, width, ""));
+	}
+
+	const before = "─── ";
+	const after = " ─────";
+	const fixedWidth = visibleWidth(before) + visibleWidth(label) + visibleWidth(after);
+	const fill = Math.max(0, width - 2 - fixedWidth);
+	return `${paint(left)}${paint(before)}${label}${paint(after)}${paint("─".repeat(fill))}${paint(right)}`;
+}
+
+function boxedLine(content: string, width: number, paint: (text: string) => string): string {
+	if (width <= 2) return truncateToWidth(content, width, "");
+	return `${paint("│")}${padRight(content, width - 2)}${paint("│")}`;
+}
+
+function twoColumn(
+	left: string,
+	right: string,
+	leftWidth: number,
+	rightWidth: number,
+	paint: (text: string) => string,
+): string {
+	return `${padRight(left, leftWidth)} ${paint("│")} ${padRight(right, rightWidth, "…")}`;
+}
+
 export class OpenTuiHeader implements Component {
-	private frame = 0;
-	private readonly timer: ReturnType<typeof setInterval>;
+	private readonly pi: ExtensionAPI;
 	private readonly ctx: ExtensionContext;
+	private readonly frame = LOGO_FRAMES.length - 1;
+	private readonly tipCommands: string[];
 
-	constructor(_pi: ExtensionAPI, ctx: ExtensionContext, tui: TUI) {
+	constructor(pi: ExtensionAPI, ctx: ExtensionContext, _tui: TUI) {
+		this.pi = pi;
 		this.ctx = ctx;
-		this.timer = setInterval(() => {
-			if (this.frame < LOGO_FRAMES.length - 1) {
-				this.frame++;
-				tui.requestRender();
-			} else {
-				clearInterval(this.timer);
-			}
-		}, LOGO_ANIMATION_MS);
-		this.timer.unref?.();
+		const pool = collectPiCommandNames(pi.getCommands());
+		this.tipCommands = pickSlashCommandTips(pool, {
+			fixed: ["open-tui"],
+			count: 3,
+		});
 	}
 
 	render(width: number): string[] {
 		const theme = this.ctx.ui.theme;
 		const paint = (s: string) => theme.fg("accent", s);
 		const muted = (s: string) => theme.fg("muted", s);
+		const dim = (s: string) => theme.fg("dim", s);
 		const bold = (s: string) => theme.bold(s);
 
 		if (width < 24) return [paint(`Pi v${VERSION}`)];
 
-		const lines: string[] = [];
-		lines.push(bold(theme.fg("accent", "pi")) + " " + muted(`v${VERSION}`));
-		lines.push("");
-
-		for (const logoLine of renderLogo(this.frame, paint)) {
-			lines.push(center(logoLine, width));
+		const innerWidth = width - 2;
+		const { leftWidth, rightWidth, useTips } = headerColumnWidths(innerWidth);
+		const model = formatModelLabel(this.ctx.model);
+		const effort = formatThinkingLabel(this.pi.getThinkingLevel());
+		const cwd = formatCwd(this.ctx.cwd);
+
+		const leftLines = [
+			...renderLogo(this.frame, paint).map((line) => center(line, leftWidth)),
+			center(bold("Let's build something great"), leftWidth),
+			center(muted(`${model} · ${effort}`), leftWidth),
+			center(dim(cwd), leftWidth),
+		];
+
+		const tipDivider = paint("─".repeat(Math.max(8, Math.min(rightWidth, 22))));
+		const [cmd0 = "", cmd1 = "", cmd2 = "", cmd3 = ""] = this.tipCommands;
+		const tipLines = [
+			"",
+			paint(bold("Welcome")),
+			muted("Ask Pi anything"),
+			tipDivider,
+			paint(bold("Commands")),
+			muted(cmd0),
+			muted(cmd1),
+			muted(cmd2),
+			muted(cmd3),
+			"",
+		];
+
+		const lines = [borderLine("╭", `${paint("Pi")} v${VERSION}`, "╮", width, paint)];
+		for (let i = 0; i < leftLines.length; i++) {
+			const content = useTips
+				? twoColumn(leftLines[i] ?? "", tipLines[i] ?? "", leftWidth, rightWidth, paint)
+				: padRight(leftLines[i] ?? "", leftWidth);
+			lines.push(boxedLine(content, width, paint));
 		}
-
-		lines.push(center(bold("Let's build something great"), width));
-
+		lines.push(borderLine("╰", "", "╯", width, paint));
 		return lines.map((line) => truncateToWidth(line, width, ""));
 	}
 
 	invalidate(): void {}
 
-	dispose(): void {
-		clearInterval(this.timer);
-	}
+	dispose(): void {}
 }
 
 export function installHeader(pi: ExtensionAPI, ctx: ExtensionContext): () => void {

package/extensions/open-tui/index.ts

@@ -101,7 +101,7 @@ export default function (pi: ExtensionAPI) {
 		const generation = sessionLifecycle.currentGeneration();
 		const cwd = ctx.cwd;
 		const git = await readGitStatus(cwd, {
-			readCommit: config.footerSegments.gitCommit,
+			readCommit: true,
 			readTag: config.footerSegments.gitCommit,
 		});
 		if (!sessionLifecycle.isCurrent(generation)) return;

package/extensions/open-tui/utils.ts

@@ -24,6 +24,26 @@ export function formatCwd(cwd: string): string {
 	return rel === "" ? "~" : `~${sep}${rel}`;
 }
 
+export function truncatePath(path: string, maxLen: number): string {
+	if (path.length <= maxLen) return path;
+	if (maxLen <= 3) return "...".slice(0, maxLen);
+	const sepChar = path.includes("/") ? "/" : "\\";
+	const parts = path.split(/[\\/]/);
+	if (parts.length <= 2) return path.slice(0, maxLen - 3) + "...";
+	// Keep first segment (e.g. ~) and as many trailing segments as fit.
+	const tail: string[] = [];
+	let tailLen = 0;
+	for (let i = parts.length - 1; i >= 1; i--) {
+		const seg = parts[i]!;
+		if (tailLen + seg.length + 4 > maxLen) break;
+		tail.unshift(seg);
+		tailLen += seg.length + 1;
+	}
+	const head = parts[0]!;
+	const result = `${head}${sepChar}...${sepChar}${tail.join(sepChar)}`;
+	return result.length > maxLen ? result.slice(0, maxLen - 3) + "..." : result;
+}
+
 export function fmtTokens(n: number): string {
 	if (n < 1000) return n.toString();
 	if (n < 10_000) return `${(n / 1000).toFixed(1)}k`;
@@ -70,6 +90,51 @@ export function alignRight(left: string, right: string, width: number, theme: Th
 	return truncatedLeft ? truncatedLeft + " " + right : right;
 }
 
+export type PrioritizedSegment = {
+	text: string;
+	priority: number;
+};
+
+/**
+ * Pack segments into maxWidth, shrinking/dropping lowest-priority segments first.
+ * Higher priority = survives longer. Returns the surviving segment texts in
+ * original order, space-joined. Each segment is either kept whole, truncated
+ * with ellipsis, or dropped entirely.
+ */
+export function fitSegmentsByPriority(
+	segs: readonly PrioritizedSegment[],
+	maxW: number,
+	ellipsis = "...",
+): string[] {
+	const items = segs.map((s) => ({ text: s.text, priority: s.priority, w: visibleWidth(s.text) }));
+	const totalW = () => {
+		const active = items.filter((it) => it.text !== "");
+		return active.reduce((a, it) => a + it.w, 0) + Math.max(0, active.length - 1);
+	};
+	while (totalW() > maxW) {
+		let target = -1;
+		for (let i = 0; i < items.length; i++) {
+			if (items[i].text !== "" && (target === -1 || items[i].priority < items[target].priority)) {
+				target = i;
+			}
+		}
+		if (target === -1) break;
+		const others = items.filter((_, i) => i !== target && items[i].text !== "");
+		const otherW = others.reduce((a, it) => a + it.w, 0) + Math.max(0, others.length - 1);
+		const avail = maxW - otherW - (others.length > 0 ? 1 : 0);
+		if (avail <= visibleWidth(ellipsis)) {
+			items[target].text = "";
+			items[target].w = 0;
+		} else if (avail < items[target].w) {
+			items[target].text = truncateToWidth(items[target].text, avail, ellipsis);
+			items[target].w = visibleWidth(items[target].text);
+		} else {
+			break;
+		}
+	}
+	return items.filter((it) => it.text !== "").map((it) => it.text);
+}
+
 export function stressColor(value: number, warn = 70, danger = 90): ThemeColor {
 	if (value >= danger) return "error";
 	if (value >= warn) return "warning";
@@ -155,3 +220,110 @@ export function sanitizeStatus(text: string): string {
 		.replace(/ +/g, " ")
 		.trim();
 }
+
+export function formatThinkingLabel(level: string): string {
+	if (level === "off") return "thinking off";
+	return `${level} effort`;
+}
+
+export const PI_BUILTIN_SLASH_COMMAND_NAMES = [
+	"settings",
+	"model",
+	"scoped-models",
+	"export",
+	"import",
+	"share",
+	"copy",
+	"name",
+	"session",
+	"changelog",
+	"hotkeys",
+	"fork",
+	"clone",
+	"tree",
+	"trust",
+	"login",
+	"logout",
+	"new",
+	"compact",
+	"resume",
+	"reload",
+	"quit",
+] as const;
+
+export function collectPiCommandNames(sessionCommands: readonly { name: string }[]): string[] {
+	const names = new Set<string>(PI_BUILTIN_SLASH_COMMAND_NAMES);
+	for (const command of sessionCommands) {
+		if (command.name) names.add(command.name);
+	}
+	return [...names];
+}
+
+export function pickSlashCommandTips(
+	availableNames: readonly string[],
+	options: {
+		fixed?: readonly string[];
+		count?: number;
+		exclude?: readonly string[];
+		random?: () => number;
+	} = {},
+): string[] {
+	const fixed = [...(options.fixed ?? [])];
+	const count = options.count ?? 3;
+	const exclude = new Set<string>([...(options.exclude ?? []), ...fixed]);
+	const random = options.random ?? Math.random;
+
+	const pool = [...new Set(availableNames.map((n) => n.trim()).filter(Boolean))].filter(
+		(name) => !exclude.has(name),
+	);
+
+	for (let i = pool.length - 1; i > 0; i--) {
+		const j = Math.floor(random() * (i + 1));
+		const tmp = pool[i]!;
+		pool[i] = pool[j]!;
+		pool[j] = tmp;
+	}
+
+	const picked = pool.slice(0, Math.max(0, count));
+	return [...fixed, ...picked].map((name) => (name.startsWith("/") ? name : `/${name}`));
+}
+
+export const MIN_LEFT_WIDTH = 28;
+export const MIN_TIPS_WIDTH = 16;
+export const MAX_TIPS_WIDTH = 28;
+const COLUMN_GAP = 3;
+
+export function headerColumnWidths(
+	innerWidth: number,
+	minTipsWidth = MIN_TIPS_WIDTH,
+	maxTipsWidth = MAX_TIPS_WIDTH,
+	minLeftWidth = MIN_LEFT_WIDTH,
+): { leftWidth: number; rightWidth: number; useTips: boolean } {
+	if (innerWidth <= 0) {
+		return { leftWidth: 0, rightWidth: 0, useTips: false };
+	}
+
+	const gap = COLUMN_GAP;
+	if (innerWidth < minLeftWidth + gap + minTipsWidth) {
+		return { leftWidth: innerWidth, rightWidth: 0, useTips: false };
+	}
+
+	let rightWidth = Math.min(maxTipsWidth, Math.max(minTipsWidth, Math.round(innerWidth * 0.28)));
+	let leftWidth = innerWidth - gap - rightWidth;
+
+	if (leftWidth < minLeftWidth) {
+		leftWidth = minLeftWidth;
+		rightWidth = innerWidth - gap - leftWidth;
+	}
+
+	if (leftWidth <= rightWidth) {
+		leftWidth = Math.ceil((innerWidth - gap) * 0.65);
+		rightWidth = innerWidth - gap - leftWidth;
+	}
+
+	if (rightWidth < minTipsWidth || leftWidth < minLeftWidth) {
+		return { leftWidth: innerWidth, rightWidth: 0, useTips: false };
+	}
+
+	return { leftWidth, rightWidth, useTips: true };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-open-tui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "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": [
@@ -55,6 +55,8 @@
   "allowScripts": {
     "protobufjs@7.6.5": true,
     "protobufjs@7.6.4": true,
-    "@google/genai@1.52.0": true
+    "@google/genai@1.52.0": true,
+    "koffi@2.16.2": true,
+    "tree-sitter-bash@0.25.1": true
   }
 }