@janvitos/pi-plan-build 0.1.7 → 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.

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,9 @@ import {
 	classifyPlanExitChoice,
 	decodeModeState,
 	extractPromptHistory,
-	formatModeStatus,
+	formatModeMetadata,
+	formatModeRail,
+	formatModeTopBorder,
 	isAllowedPlanMutation,
 	makePlanPath,
 	nextMode,
@@ -28,6 +30,7 @@ import {
 	PLAN_EXIT_FRESH_CHOICE,
 	PLAN_EXIT_STAY_ACKNOWLEDGEMENT,
 	PLAN_EXIT_STAY_CHOICE,
+	renderModeComposer,
 	type Mode,
 	unique,
 } from "./utils.ts";
@@ -400,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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janvitos/pi-plan-build",
-  "version": "0.1.7",
+  "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";