@janvitos/pi-plan-build 0.1.6 → 0.1.8

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/thinking metadata row and Pi's bottom border.
 - `/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.
@@ -21,6 +21,7 @@ A global [Pi coding agent](https://github.com/badlogic/pi-mono) extension that a
   - **Stay in Plan mode**
 - Staying in Plan mode produces a durable acknowledgement and stops the run until the user responds.
 - Mode state survives reloads, resumes, and forks.
+- When Pi recreates the custom editor, the latest 100 user prompts from the active session branch are restored for Up/Down history navigation.
 
 ## Requirements
 
@@ -110,7 +111,7 @@ npm test
 npm pack --dry-run
 ```
 
-The tests cover state decoding, safe plan paths, mutation restrictions, deferred transitions, complete plan rendering, approval decisions, stop behavior, fresh-session handoff content, and question formatting.
+The tests cover state decoding, safe plan paths, mutation restrictions, deferred transitions, mode rendering, session-based prompt history restoration, complete plan rendering, approval decisions, stop behavior, fresh-session handoff content, and question formatting.
 
 ### Publishing
 

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 {
@@ -19,7 +19,10 @@ import {
 	buildPlanReviewMessage,
 	classifyPlanExitChoice,
 	decodeModeState,
-	formatModeStatus,
+	extractPromptHistory,
+	formatModeMetadata,
+	formatModeRail,
+	formatModeTopBorder,
 	isAllowedPlanMutation,
 	makePlanPath,
 	nextMode,
@@ -27,6 +30,7 @@ import {
 	PLAN_EXIT_FRESH_CHOICE,
 	PLAN_EXIT_STAY_ACKNOWLEDGEMENT,
 	PLAN_EXIT_STAY_CHOICE,
+	renderModeComposer,
 	type Mode,
 	unique,
 } from "./utils.ts";
@@ -366,7 +370,7 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 		updateModeIndicator(ctx);
 	});
 
-	pi.on("session_start", async (_event, ctx) => {
+	pi.on("session_start", async (event, ctx) => {
 		currentContext = ctx;
 		const entries = ctx.sessionManager.getEntries();
 		const latest = entries
@@ -389,6 +393,8 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 		updateModeIndicator(ctx);
 
 		if (ctx.mode === "tui") {
+			// 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 {
 				onCycle?: () => void;
 
@@ -397,18 +403,21 @@ 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),
+						width,
+						"",
+					);
+					const topBorder = formatModeTopBorder(selectedMode, width);
+					return renderModeComposer(lines, topBorder, rail, metadata, railWidth);
 				}
 
 				override handleInput(data: string): void {
@@ -421,6 +430,7 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 			}
 			ctx.ui.setEditorComponent((tui, theme, keybindings) => {
 				const editor = new ModeEditor(tui, theme, keybindings);
+				for (const prompt of promptHistory) editor.addToHistory(prompt);
 				requestEditorRender = () => editor.requestModeRender();
 				editor.onCycle = () => {
 					if (currentContext) void selectMode(nextMode(selectedMode), currentContext, "manual");

package/package.json

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

package/utils.ts

@@ -4,18 +4,66 @@ 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 {
+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,
+): string {
 	const label = MODE_LABELS[mode];
 	const modeText = `\x1b[${label.color}m${theme.bold(label.text)}${ANSI_RESET}`;
-	return borderColor("[") + modeText + borderColor("]");
+	return `${formatModeRail(mode)} ${modeText}${theme.fg("dim", " · ")}${thinkingColor(thinkingLevel)}`;
+}
+
+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";
@@ -121,6 +169,34 @@ export function formatQuestionAnswers(answers: QuestionAnswerData[]): string {
 	return answers.map((answer) => `"${answer.question}"="${answer.answers.length ? answer.answers.join(", ") : "Unanswered"}"`).join(", ");
 }
 
+export function extractPromptHistory(entries: readonly unknown[], limit = 100): string[] {
+	const prompts: string[] = [];
+	for (const entry of entries) {
+		if (!entry || typeof entry !== "object") continue;
+		const candidate = entry as {
+			type?: unknown;
+			message?: { role?: unknown; content?: unknown };
+		};
+		if (candidate.type !== "message" || candidate.message?.role !== "user") continue;
+
+		const content = candidate.message.content;
+		const text = typeof content === "string"
+			? content
+			: Array.isArray(content)
+				? content
+					.filter((block): block is { type: "text"; text: string } =>
+						!!block && typeof block === "object" && (block as { type?: unknown }).type === "text" && typeof (block as { text?: unknown }).text === "string")
+					.map((block) => block.text)
+					.join("")
+				: "";
+		const trimmed = text.trim();
+		if (!trimmed || prompts.at(-1) === trimmed) continue;
+		prompts.push(trimmed);
+	}
+	const maxEntries = Math.max(0, Math.floor(limit));
+	return maxEntries === 0 ? [] : prompts.slice(-maxEntries);
+}
+
 export function nextMode(mode: Mode): Mode {
 	return mode === "build" ? "plan" : "build";
 }