@janvitos/pi-plan-build 0.1.46 → 0.1.48

package/README.md

@@ -26,7 +26,7 @@ Optionally keep the approved plan visible in a docked side panel while implement
 
 - 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; rounded corners inherit their vertical rail colors while horizontal `╌` segments bridge the borders at both junctions, paired with a light vertical `┆` at the top right and a mode-specific bottom-left transition: thin `┆` in Plan and heavy `┇` in Build. 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; rounded corners inherit their vertical rail colors while horizontal `╌` segments bridge the borders at both junctions, paired with a light vertical `┆` at the top right and a mode-specific bottom-left transition: thin `┆` in Plan and heavy `┇` in Build. The active composer and submitted user messages use a continuous solid thin `│` left rail in both modes. These rails use the active Pi theme's `warning` color in Plan and `thinkingLow` color in Build, and submitted messages retain their original mode after mode changes and session restores. 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.
@@ -148,7 +148,7 @@ Once the request is sufficiently understood and the agent is ready to present th
 
 ## Design and attribution
 
-Pi Plan & Build is an independent extension with its own workflow and UI behavior. Its conversational read-only lifecycle follows OpenCode’s standard Plan agent, while persisted finalization and approval are adapted for Pi. Earlier prompt and transition semantics were informed by OpenCode 1.18.16, and clean-session implementation ideas were informed by the former `pi-plan-mode` extension. This project is not affiliated with either project.
+Pi Plan & Build is an independent extension with its own workflow and UI behavior. Its conversational read-only lifecycle follows OpenCode’s standard Plan agent, while persisted finalization and approval are adapted for Pi. Earlier prompt and transition semantics were informed by OpenCode 1.18.16, and clean-session implementation ideas were informed by the former `pi-plan-mode` extension. The mode-colored transcript rail decorates Pi's exported `UserMessageComponent` because Pi does not currently expose a built-in user-message renderer hook; this compatibility layer is guarded against duplicate installation on reload. This project is not affiliated with either project.
 
 The Plan workflow uses Pi's native exploration tools directly and does not bundle or require subagents.
 

package/index.ts

@@ -1,7 +1,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 { CustomEditor, getAgentDir, getMarkdownTheme, parseSkillBlock, type EntryRenderer, type ExtensionAPI, type ExtensionContext, UserMessageComponent } from "@earendil-works/pi-coding-agent";
 import { HStack, Key, Markdown, matchesKey, Text, truncateToWidth, visibleWidth, isViewportTUI, type Component, type TUI, type ViewportTUI } from "@earendil-works/pi-tui";
 import { Type } from "typebox";
 import { registerQuestionTool } from "./question-ui.ts";
@@ -28,6 +28,7 @@ import {
 	type PlanExecutionState,
 } from "./plan-execution.ts";
 import { PlanPanel } from "./plan-panel.ts";
+import { collectTranscriptModeRecords, extractUserMessageText, installUserMessageRail } from "./user-message-rail.ts";
 import {
 	applyManualSelection,
 	buildFreshImplementationHandoff,
@@ -105,6 +106,23 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 	let originalLayoutRoot: Component | undefined;
 	let panelLayoutRoot: Component | undefined;
 	let fullscreenPanelCapable = false;
+	const displayUserMessageText = (text: string): string | undefined => {
+		const skillBlock = parseSkillBlock(text);
+		return skillBlock ? skillBlock.userMessage || undefined : text || undefined;
+	};
+	const userMessageRail = installUserMessageRail(UserMessageComponent, {
+		formatRail: (mode, glyph) => currentContext ? formatModeRail(mode, currentContext.ui.theme, glyph) : glyph,
+		getFallbackMode: () => runMode ?? selectedMode,
+	});
+	const restoreUserMessageRails = (entries: readonly unknown[]) => {
+		userMessageRail.setTranscript(
+			collectTranscriptModeRecords(entries, {
+				stateTypes: new Set([STATE_TYPE, LEGACY_STATE_TYPE]),
+				decodeState: decodeModeState,
+				displayText: displayUserMessageText,
+			}),
+		);
+	};
 
 	pi.registerFlag("plan", {
 		description: "Start in Plan mode",
@@ -665,7 +683,14 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 		if (execution && execution.status !== "completed") ensurePanelLayout();
 	});
 
+	pi.on("message_start", (event) => {
+		if (event.message.role !== "user") return;
+		const text = displayUserMessageText(extractUserMessageText(event.message.content));
+		if (text) userMessageRail.addMessage(text, runMode ?? selectedMode);
+	});
+
 	pi.on("session_start", async (event, ctx) => {
+		userMessageRail.activate();
 		currentContext = ctx;
 		const entries = ctx.sessionManager.getEntries();
 		const latest = entries
@@ -679,6 +704,7 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 		const raw = latest?.data as StoredState | undefined;
 		execution = decodePlanExecution(raw?.execution);
 		selectedMode = decoded?.selectedMode ?? (pi.getFlag("plan") === true ? "plan" : "build");
+		restoreUserMessageRails(ctx.sessionManager.getBranch());
 		pendingReminder = raw?.pendingReminder ?? (decoded ? undefined : pi.getFlag("plan") === true ? "plan" : undefined);
 		toolsBeforeModes = Array.isArray(raw?.toolsBeforeModes)
 			? raw.toolsBeforeModes.filter((name): name is string => typeof name === "string" && !MANAGED_TOOLS.has(name))
@@ -787,10 +813,10 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 					const lines = super.render(width);
 					if (paddingWidth !== railWidth) return lines;
 
-					const leftRail = `${formatModeRail(selectedMode)} `;
+					const leftRail = `${formatModeRail(selectedMode, ctx.ui.theme)} `;
 					const rightRail = this.borderColor("│");
 					const topRightVerticalTransition = this.borderColor("┆");
-					const bottomLeftVerticalTransition = formatModeRail(selectedMode, selectedMode === "build" ? "┇" : "┆");
+					const bottomLeftVerticalTransition = formatModeRail(selectedMode, ctx.ui.theme, selectedMode === "build" ? "┇" : "┆");
 					const metadata = truncateToWidth(
 						formatModeMetadata(selectedMode, pi.getThinkingLevel(), ctx.ui.theme, this.borderColor, {
 							modelName: ctx.model?.id ?? "no-model",
@@ -800,7 +826,7 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 						width - 1,
 						"",
 					);
-					const topBorder = formatModeTopBorder(selectedMode, width, this.borderColor("╮"));
+					const topBorder = formatModeTopBorder(selectedMode, width, this.borderColor("╮"), ctx.ui.theme);
 					return renderModeComposer(
 						lines,
 						topBorder,
@@ -808,7 +834,7 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 						rightRail,
 						topRightVerticalTransition,
 						metadata,
-						formatModeRail(selectedMode, "╰"),
+						formatModeRail(selectedMode, ctx.ui.theme, "╰"),
 						railWidth,
 						width,
 						{
@@ -863,6 +889,7 @@ export default function planBuildModes(pi: ExtensionAPI): void {
 	});
 
 	pi.on("session_shutdown", async (_event, ctx) => {
+		userMessageRail.deactivate();
 		removePanelLayout();
 		ctx.ui.setStatus(STATUS_KEY, undefined);
 		ctx.ui.setFooter(undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janvitos/pi-plan-build",
-  "version": "0.1.46",
+  "version": "0.1.48",
   "description": "Plan safely, approve explicitly, then implement here or in a clean session.",
   "type": "module",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "question-ui.ts",
     "plan-execution.ts",
     "plan-panel.ts",
+    "user-message-rail.ts",
     "utils.ts",
     "docs/images"
   ],
@@ -32,7 +33,7 @@
     "access": "public"
   },
   "scripts": {
-    "test": "node --experimental-strip-types --test utils.test.ts question-ui.test.ts plan-execution.test.ts plan-panel.test.ts",
+    "test": "node --experimental-strip-types --test utils.test.ts question-ui.test.ts plan-execution.test.ts plan-panel.test.ts user-message-rail.test.ts",
     "prepublishOnly": "npm test"
   },
   "peerDependencies": {

package/user-message-rail.ts

@@ -0,0 +1,187 @@
+import type { Mode } from "./utils.ts";
+
+const OSC133_PREFIX = /^((?:\x1b\]133;[ABC]\x07)*)/u;
+const PATCH_KEY = Symbol.for("@janvitos/pi-plan-build:user-message-rail");
+
+export interface TranscriptModeRecord {
+	text: string;
+	mode: Mode;
+}
+
+interface UserMessageLike {
+	text?: unknown;
+	render(width: number): string[];
+}
+
+interface UserMessageClass {
+	prototype: UserMessageLike;
+}
+
+interface RailPatchState {
+	originalRender: (this: UserMessageLike, width: number) => string[];
+	componentModes: WeakMap<object, Mode>;
+	resolver: TranscriptModeResolver;
+	formatRail: (mode: Mode, glyph: string) => string;
+	getFallbackMode: () => Mode;
+	glyph: string;
+	owner?: symbol;
+}
+
+export interface UserMessageRailController {
+	activate(): void;
+	setTranscript(records: readonly TranscriptModeRecord[]): void;
+	addMessage(text: string, mode: Mode): void;
+	deactivate(): void;
+}
+
+export class TranscriptModeResolver {
+	private records: TranscriptModeRecord[] = [];
+	private assigned = 0;
+
+	setTranscript(records: readonly TranscriptModeRecord[]): void {
+		this.records = [...records];
+		this.assigned = 0;
+	}
+
+	addMessage(text: string, mode: Mode): void {
+		if (!text) return;
+		this.records.push({ text, mode });
+	}
+
+	resolve(text: string, fallback: Mode): Mode {
+		if (this.records.length === 0) {
+			this.assigned++;
+			return fallback;
+		}
+
+		const start = this.assigned % this.records.length;
+		for (let offset = 0; offset < this.records.length; offset++) {
+			const index = (start + offset) % this.records.length;
+			const record = this.records[index]!;
+			if (record.text !== text) continue;
+			this.assigned += offset + 1;
+			return record.mode;
+		}
+
+		this.assigned++;
+		return fallback;
+	}
+}
+
+export function extractUserMessageText(content: unknown): string {
+	if (typeof content === "string") return content;
+	if (!Array.isArray(content)) return "";
+	return 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("");
+}
+
+export function collectTranscriptModeRecords(
+	entries: readonly unknown[],
+	options: {
+		initialMode?: Mode;
+		stateTypes: ReadonlySet<string>;
+		decodeState(data: unknown): { selectedMode: Mode } | undefined;
+		displayText(text: string): string | undefined;
+	},
+): TranscriptModeRecord[] {
+	let mode = options.initialMode ?? "build";
+	const records: TranscriptModeRecord[] = [];
+
+	for (const entry of entries) {
+		if (!entry || typeof entry !== "object") continue;
+		const candidate = entry as {
+			type?: unknown;
+			customType?: unknown;
+			data?: unknown;
+			message?: { role?: unknown; content?: unknown };
+		};
+		if (
+			candidate.type === "custom" &&
+			typeof candidate.customType === "string" &&
+			options.stateTypes.has(candidate.customType)
+		) {
+			mode = options.decodeState(candidate.data)?.selectedMode ?? mode;
+			continue;
+		}
+		if (candidate.type !== "message" || candidate.message?.role !== "user") continue;
+		const displayText = options.displayText(extractUserMessageText(candidate.message.content));
+		if (displayText) records.push({ text: displayText, mode });
+	}
+	return records;
+}
+
+function prependRail(line: string, rail: string): string {
+	return line.replace(OSC133_PREFIX, `$1${rail}`);
+}
+
+export function installUserMessageRail(
+	UserMessageComponent: UserMessageClass,
+	options: {
+		formatRail: (mode: Mode, glyph: string) => string;
+		getFallbackMode: () => Mode;
+	},
+): UserMessageRailController {
+	const globalState = globalThis as typeof globalThis & { [PATCH_KEY]?: RailPatchState };
+	let state = globalState[PATCH_KEY];
+	if (!state) {
+		const originalRender = UserMessageComponent.prototype.render;
+		state = {
+			originalRender,
+			componentModes: new WeakMap(),
+			resolver: new TranscriptModeResolver(),
+			formatRail: options.formatRail,
+			getFallbackMode: options.getFallbackMode,
+			glyph: "│",
+		};
+		globalState[PATCH_KEY] = state;
+	}
+
+	const owner = Symbol("pi-plan-build-user-message-rail-owner");
+	state.owner = owner;
+	state.formatRail = options.formatRail;
+	state.getFallbackMode = options.getFallbackMode;
+	state.glyph = "│";
+	// Reinstall from the preserved original on every extension load. This migrates
+	// already-running processes away from stale decorator code without stacking wrappers.
+	UserMessageComponent.prototype.render = function renderWithModeRail(width: number): string[] {
+		const active = globalState[PATCH_KEY];
+		if (!active?.owner || width <= 1) return state.originalRender.call(this, width);
+		let mode = active.componentModes.get(this);
+		if (!mode) {
+			const text = typeof this.text === "string" ? this.text : "";
+			mode = active.resolver.resolve(text, active.getFallbackMode());
+			active.componentModes.set(this, mode);
+		}
+		const rail = active.formatRail(mode, active.glyph);
+		return active.originalRender.call(this, width - 1).map((line) => prependRail(line, rail));
+	};
+
+	return {
+		activate() {
+			const active = globalState[PATCH_KEY];
+			if (active) active.owner = owner;
+		},
+		setTranscript(records) {
+			const active = globalState[PATCH_KEY];
+			if (active?.owner !== owner) return;
+			active.componentModes = new WeakMap();
+			active.resolver.setTranscript(records);
+		},
+		addMessage(text, mode) {
+			const active = globalState[PATCH_KEY];
+			if (active?.owner === owner) active.resolver.addMessage(text, mode);
+		},
+		deactivate() {
+			const active = globalState[PATCH_KEY];
+			if (active?.owner === owner) active.owner = undefined;
+		},
+	};
+}

package/utils.ts

@@ -2,15 +2,16 @@ import path, { isAbsolute, relative, resolve, sep } from "node:path";
 
 export type Mode = "build" | "plan";
 
-const ANSI_RESET = "\x1b[0m";
-const MODE_LABELS: Record<Mode, { color: string; text: string }> = {
-	plan: { color: "38;2;245;167;66", text: "plan" },
-	build: { color: "38;2;92;156;245", text: "build" },
+const MODE_LABELS: Record<Mode, string> = {
+	plan: "plan",
+	build: "build",
 };
 
+type ModeThemeColor = "warning" | "thinkingLow";
+
 export interface ModeStatusTheme {
 	bold(text: string): string;
-	fg(color: "dim", text: string): string;
+	fg(color: "dim" | ModeThemeColor, text: string): string;
 }
 
 export interface PromptMetadataOptions {
@@ -36,17 +37,26 @@ export function nextThinkingLevel(
 	return available[(currentIndex + 1) % available.length];
 }
 
-function formatModeColor(mode: Mode, text: string): string {
-	return `\x1b[${MODE_LABELS[mode].color}m${text}${ANSI_RESET}`;
+function modeThemeColor(mode: Mode): ModeThemeColor {
+	return mode === "plan" ? "warning" : "thinkingLow";
+}
+
+function formatModeColor(mode: Mode, text: string, theme: ModeStatusTheme): string {
+	return theme.fg(modeThemeColor(mode), text);
 }
 
-export function formatModeRail(mode: Mode, glyph = "│"): string {
-	return formatModeColor(mode, glyph);
+export function formatModeRail(mode: Mode, theme: ModeStatusTheme, glyph = "│"): string {
+	return formatModeColor(mode, glyph, theme);
 }
 
-export function formatModeTopBorder(mode: Mode, width: number, topRightCorner: string): string {
+export function formatModeTopBorder(
+	mode: Mode,
+	width: number,
+	topRightCorner: string,
+	theme: ModeStatusTheme,
+): string {
 	if (width <= 2) return "";
-	return `${formatModeColor(mode, `╭${"─".repeat(width - 3)}╌`)}${topRightCorner}`;
+	return `${formatModeColor(mode, `╭${"─".repeat(width - 3)}╌`, theme)}${topRightCorner}`;
 }
 
 export function formatModeMetadata(
@@ -56,15 +66,14 @@ export function formatModeMetadata(
 	thinkingColor: (text: string) => string,
 	options?: PromptMetadataOptions,
 ): string {
-	const label = MODE_LABELS[mode];
-	const modeText = `\x1b[${label.color}m${theme.bold(label.text)}${ANSI_RESET}`;
+	const modeText = formatModeColor(mode, theme.bold(MODE_LABELS[mode]), theme);
 	const modelText = options
 		? `${theme.fg("dim", " • ")}${options.modelName}${
 			options.modelProvider ? theme.fg("dim", ` [${options.modelProvider}]`) : ""
 		}`
 		: "";
 	const thinkingSeparator = " • ";
-	return `${options?.rail ?? formatModeRail(mode)} ${modeText}${modelText}${theme.fg("dim", thinkingSeparator)}${thinkingColor(thinkingLevel)}`;
+	return `${options?.rail ?? formatModeRail(mode, theme)} ${modeText}${modelText}${theme.fg("dim", thinkingSeparator)}${thinkingColor(thinkingLevel)}`;
 }
 
 export function formatTokens(count: number): string {