@janvitos/pi-plan-build 0.1.7 → 0.1.9

package/README.md

@@ -8,7 +8,7 @@ A global [Pi coding agent](https://github.com/badlogic/pi-mono) extension that a
 
 - New sessions start in **Build** mode.
 - Bare `Tab` cycles **Build → Plan → Build**, while active autocomplete dropdowns retain Pi's normal Tab completion.
-- Bracketed **build** (blue) and **plan** (yellow) indicators rendered as bold prompt prefixes inside Pi's text input box.
+- The composer uses OpenCode prompt-inspired blue/orange mode colors on a rounded `╭─` top border and `│` rail, plus a mode/model/thinking metadata row and Pi's bottom border. The footer keeps the remaining path and usage stats without duplicating model metadata.
 - `/plan`, `/build`, and the `--plan` startup flag.
 - Per-session plans at `~/.pi/agent/plans/<session-id>.md`.
 - In Plan mode, built-in `edit` and `write` are restricted to the exact plan file.

package/index.ts

@@ -2,7 +2,7 @@ import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
 import { CustomEditor, getAgentDir, getMarkdownTheme, type EntryRenderer, type ExtensionAPI, type ExtensionContext } from "@earendil-works/pi-coding-agent";
-import { Key, Markdown, matchesKey, Text, visibleWidth } from "@earendil-works/pi-tui";
+import { Key, Markdown, matchesKey, Text, truncateToWidth } from "@earendil-works/pi-tui";
 import { Type } from "typebox";
 import { registerQuestionTool } from "./question-ui.ts";
 import {
@@ -20,7 +20,11 @@ import {
 	classifyPlanExitChoice,
 	decodeModeState,
 	extractPromptHistory,
-	formatModeStatus,
+	formatFooterCwd,
+	formatModeMetadata,
+	formatModeRail,
+	formatModeTopBorder,
+	formatTokens,
 	isAllowedPlanMutation,
 	makePlanPath,
 	nextMode,
@@ -28,6 +32,7 @@ import {
 	PLAN_EXIT_FRESH_CHOICE,
 	PLAN_EXIT_STAY_ACKNOWLEDGEMENT,
 	PLAN_EXIT_STAY_CHOICE,
+	renderModeComposer,
 	type Mode,
 	unique,
 } from "./utils.ts";
@@ -390,6 +395,84 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 		updateModeIndicator(ctx);
 
 		if (ctx.mode === "tui") {
+			ctx.ui.setFooter((tui, theme, footerData) => {
+				const unsubscribe = footerData.onBranchChange(() => tui.requestRender());
+				return {
+					dispose: unsubscribe,
+					invalidate() {},
+					render(width: number): string[] {
+						let input = 0;
+						let output = 0;
+						let cacheRead = 0;
+						let cacheWrite = 0;
+						let cost = 0;
+						let latestCacheHitRate: number | undefined;
+						for (const entry of ctx.sessionManager.getEntries()) {
+							const usage =
+								entry.type === "message" &&
+								(entry.message.role === "assistant" || entry.message.role === "toolResult")
+									? entry.message.usage
+									: (entry.type === "branch_summary" || entry.type === "compaction")
+										? entry.usage
+										: undefined;
+							if (!usage) continue;
+							input += usage.input;
+							output += usage.output;
+							cacheRead += usage.cacheRead;
+							cacheWrite += usage.cacheWrite;
+							cost += usage.cost.total;
+							if (entry.type === "message" && entry.message.role === "assistant") {
+								const promptTokens = usage.input + usage.cacheRead + usage.cacheWrite;
+								latestCacheHitRate = promptTokens > 0 ? (usage.cacheRead / promptTokens) * 100 : undefined;
+							}
+						}
+
+						let cwd = formatFooterCwd(ctx.sessionManager.getCwd(), process.env.HOME || process.env.USERPROFILE);
+						const branch = footerData.getGitBranch();
+						if (branch) cwd += ` (${branch})`;
+						const sessionName = ctx.sessionManager.getSessionName();
+						if (sessionName) cwd += ` • ${sessionName}`;
+
+						const stats: string[] = [];
+						if (input) stats.push(`↑${formatTokens(input)}`);
+						if (output) stats.push(`↓${formatTokens(output)}`);
+						if (cacheRead) stats.push(`R${formatTokens(cacheRead)}`);
+						if (cacheWrite) stats.push(`W${formatTokens(cacheWrite)}`);
+						if ((cacheRead || cacheWrite) && latestCacheHitRate !== undefined) {
+							stats.push(`CH${latestCacheHitRate.toFixed(1)}%`);
+						}
+						const usingSubscription = ctx.model
+							? ctx.model.provider === "kimi-coding" || ctx.modelRegistry.isUsingOAuth(ctx.model)
+							: false;
+						if (cost || usingSubscription) {
+							stats.push(`$${cost.toFixed(3)}${usingSubscription ? " (sub)" : ""}`);
+						}
+
+						const contextUsage = ctx.getContextUsage();
+						const contextWindow = contextUsage?.contextWindow ?? ctx.model?.contextWindow ?? 0;
+						const contextPercent = contextUsage?.percent;
+						const contextText = `${contextPercent === null || contextPercent === undefined ? "?" : `${contextPercent.toFixed(1)}%`}/${formatTokens(contextWindow)} (auto)`;
+						stats.push(
+							contextPercent !== null && contextPercent !== undefined && contextPercent > 90
+								? theme.fg("error", contextText)
+								: contextPercent !== null && contextPercent !== undefined && contextPercent > 70
+									? theme.fg("warning", contextText)
+									: contextText,
+						);
+
+						const lines = [
+							truncateToWidth(theme.fg("dim", cwd), width, theme.fg("dim", "...")),
+							truncateToWidth(theme.fg("dim", stats.join(" ")), width, theme.fg("dim", "...")),
+						];
+						const statuses = Array.from(footerData.getExtensionStatuses().entries())
+							.sort(([a], [b]) => a.localeCompare(b))
+							.map(([, text]) => text.replace(/[\r\n\t]/g, " ").replace(/ +/g, " ").trim());
+						if (statuses.length) lines.push(truncateToWidth(statuses.join(" "), width, theme.fg("dim", "...")));
+						return lines;
+					},
+				};
+			});
+
 			// Startup history is populated after session_start; replacement flows recreate the editor after that step.
 			const promptHistory = event.reason === "startup" ? [] : extractPromptHistory(ctx.sessionManager.getBranch());
 			class ModeEditor extends CustomEditor {
@@ -400,18 +483,24 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 				}
 
 				override render(width: number): string[] {
-					const badge = formatModeStatus(selectedMode, ctx.ui.theme, this.borderColor);
-					const prompt = `${badge} `;
-					const promptWidth = visibleWidth(prompt);
-					const paddingWidth = Math.min(promptWidth, Math.max(0, Math.floor((width - 1) / 2)));
-					if (this.getPaddingX() !== paddingWidth) this.setPaddingX(paddingWidth);
+					const railWidth = 2;
+					const paddingWidth = Math.min(railWidth, Math.max(0, Math.floor((width - 1) / 2)));
+					if (this.getPaddingX() !== railWidth) this.setPaddingX(railWidth);
 
 					const lines = super.render(width);
-					const reservedPrefix = " ".repeat(paddingWidth);
-					if (paddingWidth === promptWidth && lines[1]?.startsWith(reservedPrefix)) {
-						lines[1] = prompt + lines[1].slice(reservedPrefix.length);
-					}
-					return lines;
+					if (paddingWidth !== railWidth) return lines;
+
+					const rail = `${formatModeRail(selectedMode)} `;
+					const metadata = truncateToWidth(
+						formatModeMetadata(selectedMode, pi.getThinkingLevel(), ctx.ui.theme, this.borderColor, {
+							modelName: ctx.model?.id ?? "no-model",
+							modelColor: (text) => ctx.ui.theme.fg("dim", text),
+						}),
+						width,
+						"",
+					);
+					const topBorder = formatModeTopBorder(selectedMode, width);
+					return renderModeComposer(lines, topBorder, rail, metadata, railWidth);
 				}
 
 				override handleInput(data: string): void {
@@ -436,6 +525,7 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 
 	pi.on("session_shutdown", async (_event, ctx) => {
 		ctx.ui.setStatus(STATUS_KEY, undefined);
+		ctx.ui.setFooter(undefined);
 		ctx.ui.setEditorComponent(undefined);
 		requestEditorRender = undefined;
 		currentContext = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janvitos/pi-plan-build",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Plan safely, approve explicitly, then implement here or in a clean session.",
   "type": "module",
   "license": "MIT",

package/utils.ts

@@ -1,21 +1,98 @@
-import path from "node:path";
+import path, { isAbsolute, relative, resolve, sep } from "node:path";
 
 export type Mode = "build" | "plan";
 
 const ANSI_RESET = "\x1b[0m";
 const MODE_LABELS: Record<Mode, { color: string; text: string }> = {
-	plan: { color: "38;2;255;215;0", text: "plan" },
-	build: { color: "38;2;59;130;246", text: "build" },
+	plan: { color: "38;2;245;167;66", text: "plan" },
+	build: { color: "38;2;92;156;245", text: "build" },
 };
 
 export interface ModeStatusTheme {
 	bold(text: string): string;
+	fg(color: "dim", text: string): string;
 }
 
-export function formatModeStatus(mode: Mode, theme: ModeStatusTheme, borderColor: (text: string) => string): string {
+export interface PromptMetadataOptions {
+	modelName: string;
+	modelColor: (text: string) => string;
+}
+
+function formatModeColor(mode: Mode, text: string): string {
+	return `\x1b[${MODE_LABELS[mode].color}m${text}${ANSI_RESET}`;
+}
+
+export function formatModeRail(mode: Mode): string {
+	return formatModeColor(mode, "│");
+}
+
+export function formatModeTopBorder(mode: Mode, width: number): string {
+	if (width <= 0) return "";
+	return formatModeColor(mode, `╭${"─".repeat(width - 1)}`);
+}
+
+export function formatModeMetadata(
+	mode: Mode,
+	thinkingLevel: string,
+	theme: ModeStatusTheme,
+	thinkingColor: (text: string) => string,
+	options?: PromptMetadataOptions,
+): string {
 	const label = MODE_LABELS[mode];
 	const modeText = `\x1b[${label.color}m${theme.bold(label.text)}${ANSI_RESET}`;
-	return borderColor("[") + modeText + borderColor("]");
+	const modelText = options
+		? `${theme.fg("dim", " • ")}${options.modelColor(options.modelName)}`
+		: "";
+	const thinkingSeparator = options ? " • " : " · ";
+	return `${formatModeRail(mode)} ${modeText}${modelText}${theme.fg("dim", thinkingSeparator)}${thinkingColor(thinkingLevel)}`;
+}
+
+export function formatTokens(count: number): string {
+	if (count < 1000) return count.toString();
+	if (count < 10000) return `${(count / 1000).toFixed(1)}k`;
+	if (count < 1000000) return `${Math.round(count / 1000)}k`;
+	if (count < 10000000) return `${(count / 1000000).toFixed(1)}M`;
+	return `${Math.round(count / 1000000)}M`;
+}
+
+export function formatFooterCwd(cwd: string, home: string | undefined): string {
+	if (!home) return cwd;
+	const resolvedCwd = resolve(cwd);
+	const relativeToHome = relative(resolve(home), resolvedCwd);
+	const isInsideHome =
+		relativeToHome === "" ||
+		(relativeToHome !== ".." && !relativeToHome.startsWith(`..${sep}`) && !isAbsolute(relativeToHome));
+	if (!isInsideHome) return cwd;
+	return relativeToHome === "" ? "~" : `~${sep}${relativeToHome}`;
+}
+
+export function renderModeComposer(
+	lines: string[],
+	topBorder: string,
+	railPrefix: string,
+	metadata: string,
+	reservedWidth: number,
+): string[] {
+	if (reservedWidth <= 0 || lines.length < 3) return lines;
+	const reservedPrefix = " ".repeat(reservedWidth);
+	const bottomBorderIndex = lines.findIndex((line, index) => index > 0 && !line.startsWith(reservedPrefix));
+	if (bottomBorderIndex < 2) return lines;
+	const promptLines = lines
+		.slice(1, bottomBorderIndex)
+		.map((line) => railPrefix + line.slice(reservedPrefix.length));
+	const bottomBorder = lines[bottomBorderIndex]!.replace(
+		/^((?:\x1b\[[0-?]*[ -/]*[@-~])*)./u,
+		"$1 ",
+	);
+	return [
+		topBorder,
+		...promptLines,
+		railPrefix,
+		metadata,
+		bottomBorder,
+		"",
+		...lines.slice(bottomBorderIndex + 1),
+	];
 }
 
 export const PLAN_EXIT_APPROVE_CHOICE = "Switch to Build and implement here";