pi-open-tui 0.2.1 → 0.2.3

package/extensions/open-tui/footer.ts

@@ -142,8 +142,11 @@ function renderStatsBlock(
 	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)}%`));
+		// ponytail: hide cache-hit rate when the provider never reported cache
+		// tokens — avoids a misleading "0%" on providers without prompt caching.
+		const hasCacheTokens = totals.cacheRead > 0 || totals.cacheWrite > 0;
+		if (hasCacheTokens && totals.latestCacheHitRate !== undefined) {
+			stats.push(theme.fg(cacheHitColor(totals.latestCacheHitRate), `${glyphs.cacheHit} ${totals.latestCacheHitRate.toFixed(1)}%`));
 		}
 	}
 	if (segments.cost) {

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/utils.ts

@@ -155,3 +155,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.1",
+  "version": "0.2.3",
   "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
   }
 }