@janvitos/pi-plan-build 0.1.16 → 0.1.18

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 the rounded top-left border and left rail, complemented by Pi's border color on the right rail and rounded bottom-right border; the frame leaves open gaps at the top right and bottom left. It also includes a mode/model/thinking metadata row; cycling the thinking level updates this row without adding a duplicate status above the composer. 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.
+- The composer uses OpenCode prompt-inspired blue/orange mode colors on the rounded top-left border and left rail, complemented by Pi's border color on the right rail and rounded bottom-right border; dim rounded corners with color-matched horizontal `╌` and vertical `┆` segments bridge the borders at the top right and bottom left. It also includes a mode/model/thinking metadata row; cycling the thinking level updates this row without adding a duplicate status above the composer. 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

@@ -495,19 +495,33 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 
 					const leftRail = `${formatModeRail(selectedMode)} `;
 					const rightRail = this.borderColor("│");
+					const topRightVerticalTransition = this.borderColor("┆");
+					const bottomLeftVerticalTransition = formatModeRail(selectedMode, "┆");
 					const metadata = truncateToWidth(
 						formatModeMetadata(selectedMode, pi.getThinkingLevel(), ctx.ui.theme, this.borderColor, {
 							modelName: ctx.model?.id ?? "no-model",
 							modelProvider: ctx.model?.provider,
+							rail: bottomLeftVerticalTransition,
 						}),
 						width - 1,
 						"",
 					);
-					const topBorder = formatModeTopBorder(selectedMode, width);
-					return renderModeComposer(lines, topBorder, leftRail, rightRail, metadata, railWidth, width, {
-						truncate: (line, maxWidth) => truncateToWidth(line, maxWidth, ""),
-						measure: visibleWidth,
-					});
+					const topBorder = formatModeTopBorder(selectedMode, width, ctx.ui.theme.fg("dim", "╮"));
+					return renderModeComposer(
+						lines,
+						topBorder,
+						leftRail,
+						rightRail,
+						topRightVerticalTransition,
+						metadata,
+						ctx.ui.theme.fg("dim", "╰"),
+						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.16",
+  "version": "0.1.18",
   "description": "Plan safely, approve explicitly, then implement here or in a clean session.",
   "type": "module",
   "license": "MIT",

package/utils.ts

@@ -15,6 +15,7 @@ export interface ModeStatusTheme {
 export interface PromptMetadataOptions {
 	modelName: string;
 	modelProvider?: string;
+	rail?: string;
 }
 
 export type ThinkingLevel = "off" | "minimal" | "low" | "medium" | "high" | "xhigh" | "max";
@@ -38,13 +39,13 @@ 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 formatModeRail(mode: Mode, glyph = "│"): string {
+	return formatModeColor(mode, glyph);
 }
 
-export function formatModeTopBorder(mode: Mode, width: number): string {
-	if (width <= 1) return "";
-	return formatModeColor(mode, `╭${"─".repeat(width - 2)}`);
+export function formatModeTopBorder(mode: Mode, width: number, topRightCorner: string): string {
+	if (width <= 2) return "";
+	return `${formatModeColor(mode, `╭${"─".repeat(width - 3)}╌`)}${topRightCorner}`;
 }
 
 export function formatModeMetadata(
@@ -62,7 +63,7 @@ export function formatModeMetadata(
 		}`
 		: "";
 	const thinkingSeparator = options ? " • " : " · ";
-	return `${formatModeRail(mode)} ${modeText}${modelText}${theme.fg("dim", thinkingSeparator)}${thinkingColor(thinkingLevel)}`;
+	return `${options?.rail ?? formatModeRail(mode)} ${modeText}${modelText}${theme.fg("dim", thinkingSeparator)}${thinkingColor(thinkingLevel)}`;
 }
 
 export function formatTokens(count: number): string {
@@ -94,7 +95,9 @@ export function renderModeComposer(
 	topBorder: string,
 	leftRailPrefix: string,
 	rightRail: string,
+	topRightRail: string,
 	metadata: string,
+	bottomLeftCorner: string,
 	reservedWidth: number,
 	width: number,
 	lineWidth: LineWidthTools,
@@ -104,18 +107,20 @@ export function renderModeComposer(
 	const bottomBorderIndex = lines.findIndex((line, index) => index > 0 && !line.startsWith(reservedPrefix));
 	if (bottomBorderIndex < 2) return lines;
 
-	const addRightRail = (line: string): string => {
+	const addRightRail = (line: string, rail = rightRail): string => {
 		const content = lineWidth.truncate(line, width - 1);
-		return `${content}${" ".repeat(Math.max(0, width - 1 - lineWidth.measure(content)))}${rightRail}`;
+		return `${content}${" ".repeat(Math.max(0, width - 1 - lineWidth.measure(content)))}${rail}`;
 	};
 	const promptLines = lines
 		.slice(1, bottomBorderIndex)
 		.map((line) => addRightRail(leftRailPrefix + line.slice(reservedPrefix.length)));
-	const bottomBorder = lineWidth.truncate(lines[bottomBorderIndex]!, width)
-		.replace(/^((?:\x1b\[[0-?]*[ -/]*[@-~])*)./u, "$1 ")
+	const ansiSequence = "(?:\\x1b\\[[0-?]*[ -/]*[@-~])*";
+	const bottomBorder = bottomLeftCorner + lineWidth.truncate(lines[bottomBorderIndex]!, width)
+		.replace(new RegExp(`^(${ansiSequence}).${ansiSequence}.`, "u"), "$1╌")
 		.replace(/.(?=(?:\x1b\[[0-?]*[ -/]*[@-~])*$)/u, "╯");
 	return [
 		topBorder,
+		addRightRail(leftRailPrefix, topRightRail),
 		...promptLines,
 		addRightRail(leftRailPrefix),
 		addRightRail(metadata),