pi-zentui 0.1.6 → 0.1.7

package/README.md

@@ -28,6 +28,7 @@ Zentui brings two popular aesthetics to Pi:
 - Bordered input box with accent-colored left rail
 - Model name and provider displayed inside the editor frame
 - Thinking level indicator when enabled
+- Prompt-box-style user messages matching the ZentUI input chrome
 
 ### Git Status Icons
 

package/extensions/zentui/index.ts

@@ -17,6 +17,7 @@ import { type GitStatusSummary, emptyGitStatus, readGitStatus } from "./git";
 import { type StopProjectRefreshInterval, startProjectRefreshInterval } from "./project-refresh";
 import { type RuntimeInfo, readRuntimeInfo } from "./runtime";
 import { PolishedEditor } from "./ui";
+import { installUserMessageStyle } from "./user-message";
 
 type FooterState = GitStatusSummary & {
 	modelLabel: string;
@@ -120,12 +121,14 @@ export default function (pi: ExtensionAPI) {
 	};
 
 	let currentConfig: PolishedTuiConfig = loadConfig();
+	let activeTheme: Theme | undefined;
 	let requestFooterRender: (() => void) | undefined;
 	let stopProjectRefreshInterval: StopProjectRefreshInterval = () => {};
 	let projectRefreshInFlight = false;
 	let projectRefreshPending = false;
 
 	const refresh = () => requestFooterRender?.();
+	const getActiveTheme = () => activeTheme;
 
 	const cleanupUi = (ctx?: ExtensionContext) => {
 		stopProjectRefreshInterval();
@@ -137,6 +140,7 @@ export default function (pi: ExtensionAPI) {
 			ctx.ui.setFooter(undefined);
 			ctx.ui.setEditorComponent(undefined);
 		}
+		activeTheme = undefined;
 	};
 
 	const refreshInteractiveState = (ctx: ExtensionContext, project = false) => {
@@ -289,6 +293,8 @@ export default function (pi: ExtensionAPI) {
 
 	const installUi = (ctx: ExtensionContext) => {
 		if (!ctx.hasUI) return;
+		activeTheme = ctx.ui.theme;
+		installUserMessageStyle(getActiveTheme);
 		ensureConfigExists();
 		currentConfig = loadConfig();
 		installFooter(ctx);

package/extensions/zentui/user-message.ts

@@ -0,0 +1,133 @@
+import { type Theme, type ThemeColor, UserMessageComponent } from "@earendil-works/pi-coding-agent";
+import {
+	Markdown,
+	type MarkdownTheme,
+	truncateToWidth,
+	visibleWidth,
+} from "@earendil-works/pi-tui";
+
+const OSC133_ZONE_START = "\x1b]133;A\x07";
+const OSC133_ZONE_END = "\x1b]133;B\x07";
+const OSC133_ZONE_FINAL = "\x1b]133;C\x07";
+
+type RenderFn = (width: number) => string[];
+
+type PatchableUserMessagePrototype = {
+	render: RenderFn;
+	children?: unknown[];
+	__zentuiUserMessageOriginalRender?: RenderFn;
+	__zentuiUserMessagePatched?: boolean;
+	__zentuiUserMessageGetTheme?: () => Theme | undefined;
+};
+
+type MarkdownLike = {
+	text?: unknown;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function findMarkdownText(value: unknown): string | undefined {
+	if (isRecord(value) && typeof (value as MarkdownLike).text === "string") {
+		return (value as { text: string }).text;
+	}
+
+	if (!isRecord(value)) return undefined;
+
+	const children = Array.isArray(value.children) ? value.children : [];
+	for (const child of children) {
+		const text = findMarkdownText(child);
+		if (text !== undefined) return text;
+	}
+
+	return undefined;
+}
+
+function themeFg(theme: Theme | undefined, color: ThemeColor, text: string): string {
+	return theme ? theme.fg(color, text) : text;
+}
+
+function makeMarkdownTheme(theme: Theme | undefined): MarkdownTheme {
+	return {
+		heading: (text) => themeFg(theme, "mdHeading", text),
+		link: (text) => themeFg(theme, "mdLink", text),
+		linkUrl: (text) => themeFg(theme, "mdLinkUrl", text),
+		code: (text) => themeFg(theme, "mdCode", text),
+		codeBlock: (text) => themeFg(theme, "mdCodeBlock", text),
+		codeBlockBorder: (text) => themeFg(theme, "mdCodeBlockBorder", text),
+		quote: (text) => themeFg(theme, "mdQuote", text),
+		quoteBorder: (text) => themeFg(theme, "mdQuoteBorder", text),
+		hr: (text) => themeFg(theme, "mdHr", text),
+		listBullet: (text) => themeFg(theme, "mdListBullet", text),
+		bold: (text) => (theme ? theme.bold(text) : text),
+		italic: (text) => (theme ? theme.italic(text) : text),
+		underline: (text) => (theme ? theme.underline(text) : text),
+		strikethrough: (text) => (theme ? theme.strikethrough(text) : text),
+	};
+}
+
+function fillLine(content: string, width: number): string {
+	const truncated = truncateToWidth(content, Math.max(0, width), "");
+	const pad = " ".repeat(Math.max(0, width - visibleWidth(truncated)));
+	return `${truncated}${pad}`;
+}
+
+function renderPromptBoxLine(line: string, width: number, theme: Theme | undefined): string {
+	if (width <= 0) return "";
+	const rail = `${themeFg(theme, "accent", "│")} `;
+	const contentWidth = Math.max(0, width - visibleWidth(rail));
+	return truncateToWidth(`${rail}${fillLine(line, contentWidth)}`, width, "");
+}
+
+function renderZentuiUserMessage(
+	instance: PatchableUserMessagePrototype,
+	width: number,
+	theme: Theme | undefined,
+): string[] | undefined {
+	const text = findMarkdownText(instance);
+	if (text === undefined) return undefined;
+	if (width <= 0) return [""];
+
+	const railWidth = visibleWidth(`${themeFg(theme, "accent", "│")} `);
+	const contentWidth = Math.max(1, width - railWidth);
+	const renderer = new Markdown(text, 0, 0, makeMarkdownTheme(theme), {
+		color: (content) => themeFg(theme, "userMessageText", content),
+	});
+	const body = renderer.render(contentWidth);
+	const contentLines = body.length > 0 ? body : [""];
+	const border = themeFg(theme, "border", "─".repeat(width));
+
+	return [
+		truncateToWidth(border, width, ""),
+		renderPromptBoxLine("", width, theme),
+		...contentLines.map((line) => renderPromptBoxLine(line, width, theme)),
+		renderPromptBoxLine("", width, theme),
+		truncateToWidth(border, width, ""),
+	];
+}
+
+export function installUserMessageStyle(getTheme: () => Theme | undefined): void {
+	const prototype = UserMessageComponent.prototype as unknown as PatchableUserMessagePrototype;
+	prototype.__zentuiUserMessageGetTheme = getTheme;
+
+	if (prototype.__zentuiUserMessagePatched) return;
+
+	prototype.__zentuiUserMessageOriginalRender = prototype.render;
+	prototype.render = function renderWithZentuiUserMessage(width: number): string[] {
+		const original = prototype.__zentuiUserMessageOriginalRender ?? prototype.render;
+		const lines = renderZentuiUserMessage(
+			this as PatchableUserMessagePrototype,
+			width,
+			prototype.__zentuiUserMessageGetTheme?.(),
+		);
+
+		if (!lines) return original.call(this, width);
+		if (lines.length === 0) return lines;
+
+		lines[0] = OSC133_ZONE_START + lines[0];
+		lines[lines.length - 1] = OSC133_ZONE_END + OSC133_ZONE_FINAL + lines[lines.length - 1];
+		return lines;
+	};
+	prototype.__zentuiUserMessagePatched = true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-zentui",
-	"version": "0.1.6",
+	"version": "0.1.7",
 	"description": "A Starship-inspired statusline and Opencode-style TUI for Pi.",
 	"type": "module",
 	"license": "MIT",