@janvitos/pi-plan-build 0.1.12 → 0.1.14

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.
-- 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 model is shown as `model-id [provider]` (for example, `gpt-5.6-luna [openai]`), with the provider in the footer's dim text color. The footer keeps the remaining path and usage stats without duplicating model metadata.
+- The composer uses OpenCode prompt-inspired blue/orange mode colors on the top and left borders, complemented by Pi's border color on the right and bottom borders; rounded corners close the frame while matching their adjoining horizontal border colors. It also includes a mode/model/thinking metadata row. The model is shown as `model-id [provider]` (for example, `gpt-5.6-luna [openai]`), with the model ID inheriting the terminal foreground like unselected entries in `/model` and the provider using the footer's dim text color. 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, truncateToWidth } from "@earendil-works/pi-tui";
+import { Key, Markdown, matchesKey, Text, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { Type } from "typebox";
 import { registerQuestionTool } from "./question-ui.ts";
 import {
@@ -490,18 +490,21 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 					const lines = super.render(width);
 					if (paddingWidth !== railWidth) return lines;
 
-					const rail = `${formatModeRail(selectedMode)} `;
+					const leftRail = `${formatModeRail(selectedMode)} `;
+					const rightRail = this.borderColor("│");
 					const metadata = truncateToWidth(
 						formatModeMetadata(selectedMode, pi.getThinkingLevel(), ctx.ui.theme, this.borderColor, {
 							modelName: ctx.model?.id ?? "no-model",
 							modelProvider: ctx.model?.provider,
-							modelColor: (text) => ctx.ui.theme.fg("text", text),
 						}),
-						width,
+						width - 1,
 						"",
 					);
 					const topBorder = formatModeTopBorder(selectedMode, width);
-					return renderModeComposer(lines, topBorder, rail, metadata, railWidth);
+					return renderModeComposer(lines, topBorder, leftRail, rightRail, metadata, railWidth, width, {
+						truncate: (line, maxWidth) => truncateToWidth(line, maxWidth, ""),
+						measure: visibleWidth,
+					});
 				}
 
 				override handleInput(data: string): void {

package/package.json

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

package/utils.ts

@@ -9,14 +9,12 @@ const MODE_LABELS: Record<Mode, { color: string; text: string }> = {
 };
 
 export interface ModeStatusTheme {
-	bold(text: string): string;
 	fg(color: "dim", text: string): string;
 }
 
 export interface PromptMetadataOptions {
 	modelName: string;
 	modelProvider?: string;
-	modelColor: (text: string) => string;
 }
 
 function formatModeColor(mode: Mode, text: string): string {
@@ -28,8 +26,8 @@ export function formatModeRail(mode: Mode): string {
 }
 
 export function formatModeTopBorder(mode: Mode, width: number): string {
-	if (width <= 0) return "";
-	return formatModeColor(mode, `╭${"─".repeat(width - 1)}`);
+	if (width <= 1) return "";
+	return formatModeColor(mode, `╭${"─".repeat(width - 2)}╮`);
 }
 
 export function formatModeMetadata(
@@ -40,9 +38,9 @@ export function formatModeMetadata(
 	options?: PromptMetadataOptions,
 ): string {
 	const label = MODE_LABELS[mode];
-	const modeText = `\x1b[${label.color}m${theme.bold(label.text)}${ANSI_RESET}`;
+	const modeText = `\x1b[${label.color}m${label.text}${ANSI_RESET}`;
 	const modelText = options
-		? `${theme.fg("dim", " • ")}${options.modelColor(options.modelName)}${
+		? `${theme.fg("dim", " • ")}${options.modelName}${
 			options.modelProvider ? theme.fg("dim", ` [${options.modelProvider}]`) : ""
 		}`
 		: "";
@@ -69,29 +67,41 @@ export function formatFooterCwd(cwd: string, home: string | undefined): string {
 	return relativeToHome === "" ? "~" : `~${sep}${relativeToHome}`;
 }
 
+export interface LineWidthTools {
+	truncate(line: string, width: number): string;
+	measure(line: string): number;
+}
+
 export function renderModeComposer(
 	lines: string[],
 	topBorder: string,
-	railPrefix: string,
+	leftRailPrefix: string,
+	rightRail: string,
 	metadata: string,
 	reservedWidth: number,
+	width: number,
+	lineWidth: LineWidthTools,
 ): string[] {
-	if (reservedWidth <= 0 || lines.length < 3) return lines;
+	if (reservedWidth <= 0 || width <= 1 || 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 addRightRail = (line: string): string => {
+		const content = lineWidth.truncate(line, width - 1);
+		return `${content}${" ".repeat(Math.max(0, width - 1 - lineWidth.measure(content)))}${rightRail}`;
+	};
 	const promptLines = lines
 		.slice(1, bottomBorderIndex)
-		.map((line) => railPrefix + line.slice(reservedPrefix.length));
-	const bottomBorder = lines[bottomBorderIndex]!.replace(
-		/^((?:\x1b\[[0-?]*[ -/]*[@-~])*)./u,
-		"$1 ",
-	);
+		.map((line) => addRightRail(leftRailPrefix + line.slice(reservedPrefix.length)));
+	const bottomBorder = lineWidth.truncate(lines[bottomBorderIndex]!, width)
+		.replace(/^((?:\x1b\[[0-?]*[ -/]*[@-~])*)./u, "$1╰")
+		.replace(/.(?=(?:\x1b\[[0-?]*[ -/]*[@-~])*$)/u, "╯");
 	return [
 		topBorder,
 		...promptLines,
-		railPrefix,
-		metadata,
+		addRightRail(leftRailPrefix),
+		addRightRail(metadata),
 		bottomBorder,
 		"",
 		...lines.slice(bottomBorderIndex + 1),