Release v0.1.17

Author: janvitos

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 and dashed `┄` segments bridge the border colors 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.

index.ts

@@ -503,11 +503,21 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 						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,
+						metadata,
+						ctx.ui.theme.fg("dim", "╰"),
+						railWidth,
+						width,
+						{
+							truncate: (line, maxWidth) => truncateToWidth(line, maxWidth, ""),
+							measure: visibleWidth,
+						},
+					);
 				}
 
 				override handleInput(data: string): void {

package.json

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

utils.test.ts

@@ -74,8 +74,11 @@ test("mode composer uses colored rails and mode/thinking metadata", () => {
 	const buildRail = formatModeRail("build");
 	assert.equal(planRail, "\x1b[38;2;245;167;66m│\x1b[0m");
 	assert.equal(buildRail, "\x1b[38;2;92;156;245m│\x1b[0m");
-	assert.equal(formatModeTopBorder("plan", 4), "\x1b[38;2;245;167;66m╭──\x1b[0m");
-	assert.equal(formatModeTopBorder("build", 1), "");
+	assert.equal(
+		formatModeTopBorder("plan", 4, "\x1b[2m╮\x1b[22m"),
+		"\x1b[38;2;245;167;66m╭─┄\x1b[0m\x1b[2m╮\x1b[22m",
+	);
+	assert.equal(formatModeTopBorder("build", 2, "\x1b[2m╮\x1b[22m"), "");
 	assert.equal(
 		formatModeMetadata("plan", "high", theme, thinkingColor),
 		"\x1b[38;2;245;167;66m│\x1b[0m \x1b[38;2;245;167;66mplan\x1b[0m\x1b[38;2;128;128;128m · \x1b[39m\x1b[38;2;0;255;0mhigh\x1b[39m",
@@ -107,37 +110,57 @@ test("footer helpers preserve compact counts and safe home-relative paths", () =
 	assert.equal(formatFooterCwd("/home/username/project", "/home/user"), "/home/username/project");
 });
 
-test("mode composer completes the right and lower borders while preserving corner gaps", () => {
+test("mode composer joins border colors with dashed transitions and dim corners", () => {
 	const ansiPattern = /\x1b\[[0-?]*[ -/]*[@-~]/gu;
 	const lineWidth = {
 		truncate: (line: string, width: number) => line.replace(ansiPattern, "").length <= width ? line : line.slice(0, width),
 		measure: (line: string) => line.replace(ansiPattern, "").length,
 	};
 	const lines = ["top border", "  first", "  second", "────────────────", "  autocomplete"];
-	assert.deepEqual(renderModeComposer(lines, "╭──────────────", "│ ", "│", "│ plan · high", 2, 16, lineWidth), [
-		"╭──────────────",
+	assert.deepEqual(renderModeComposer(lines, "╭─────────────┄╮", "│ ", "│", "│ plan · high", "╰", 2, 16, lineWidth), [
+		"╭─────────────┄╮",
+		"│              │",
 		"│ first        │",
 		"│ second       │",
 		"│              │",
 		"│ plan · high  │",
-		" ──────────────╯",
+		"╰┄─────────────╯",
 		"",
 		"  autocomplete",
 	]);
+
+	const styledGlyph = "\x1b[38;2;157;124;216m─\x1b[39m";
+	const realisticLines = ["top", "  prompt", styledGlyph.repeat(16)];
+	const realisticResult = renderModeComposer(
+		realisticLines,
+		"╭─────────────┄╮",
+		"│ ",
+		"│",
+		"metadata",
+		"╰",
+		2,
+		16,
+		lineWidth,
+	);
+	assert.equal(realisticResult.every((line) => lineWidth.measure(line) <= 16), true);
+	assert.equal(realisticResult[5]?.replace(ansiPattern, ""), "╰┄─────────────╯");
+	assert.equal(realisticResult[5]?.replace(ansiPattern, "").includes("[39m"), false);
+
 	assert.deepEqual(
 		renderModeComposer(
 			["top", "  prompt", "\x1b[38;2;128;128;128m────\x1b[0m"],
-			"╭──",
+			"╭─┄╮",
 			"│ ",
 			"│",
 			"metadata",
+			"╰",
 			2,
 			4,
 			lineWidth,
 		),
-		["╭──", "│ p│", "│  │", "met│", "\x1b[38;2;128;128;128m ──╯\x1b[0m", ""],
+		["╭─┄╮", "│  │", "│ p│", "│  │", "met│", "╰\x1b[38;2;128;128;128m┄─╯\x1b[0m", ""],
 	);
-	assert.deepEqual(renderModeComposer(lines, "top", "│ ", "│", "metadata", 0, 16, lineWidth), lines);
+	assert.deepEqual(renderModeComposer(lines, "top", "│ ", "│", "metadata", "╰", 0, 16, lineWidth), lines);
 });
 
 test("plan review preserves the complete plan without truncation", () => {

utils.ts

@@ -42,9 +42,9 @@ export function formatModeRail(mode: Mode): string {
 	return formatModeColor(mode, "│");
 }
 
-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(
@@ -95,6 +95,7 @@ export function renderModeComposer(
 	leftRailPrefix: string,
 	rightRail: string,
 	metadata: string,
+	bottomLeftCorner: string,
 	reservedWidth: number,
 	width: number,
 	lineWidth: LineWidthTools,
@@ -111,11 +112,13 @@ export function renderModeComposer(
 	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),
 		...promptLines,
 		addRightRail(leftRailPrefix),
 		addRightRail(metadata),