@quandev104/pi-style 0.1.1

package/extension-src/pi-style/features/editor/index.ts

@@ -0,0 +1,304 @@
+import type { ExtensionUIContext } from "@earendil-works/pi-coding-agent";
+import { CustomEditor } from "@earendil-works/pi-coding-agent";
+import { type EditorComponent, visibleWidth } from "@earendil-works/pi-tui";
+import type { NormalizedPiStyleConfig } from "../../domain/config-types.js";
+import { contextPercent, type StatusSnapshot, type ThinkingLevel } from "../../domain/status.js";
+import type { ResolvedTheme } from "../../domain/theme.js";
+import { resolveTheme } from "../../domain/theme.js";
+import { stripAnsi, truncateAnsi } from "../../shared/ansi.js";
+
+export const EDITOR_DIAGNOSTIC_KEY = "pi-style.editor";
+type SetEditorComponent = NonNullable<ExtensionUIContext["setEditorComponent"]>;
+type EditorFactory = NonNullable<Parameters<SetEditorComponent>[0]>;
+type Tui = Parameters<EditorFactory>[0];
+type PiEditorTheme = Parameters<EditorFactory>[1];
+type Keybindings = Parameters<EditorFactory>[2];
+type EditorHost = Pick<ExtensionUIContext, "setEditorComponent"> & {
+	getEditorComponent?: () => EditorFactory | undefined;
+	notify?: (message: string, type?: "info" | "warning" | "error") => void;
+	/** Full Pi theme; provides thinking-level border colors when available. */
+	readonly theme?: { getThinkingBorderColor?: (level: ThinkingLevel) => (str: string) => string };
+};
+
+export interface EditorInstallation {
+	readonly generation: number;
+	readonly installedFactory: EditorFactory;
+	readonly previousFactory: EditorFactory | undefined;
+	readonly preservedPrevious: boolean;
+	update(snapshot: StatusSnapshot): void;
+	configure(config: NormalizedPiStyleConfig): void;
+	dispose(): void;
+}
+
+interface EditorOptions {
+	config: NormalizedPiStyleConfig;
+	snapshot: StatusSnapshot;
+	theme: PiEditorTheme;
+	/** Full Pi theme for thinking-level border colors (optional; falls back to borderColor). */
+	fullTheme?: { getThinkingBorderColor?: (level: ThinkingLevel) => (str: string) => string };
+	onSnapshot: (snapshot: StatusSnapshot) => void;
+}
+
+const widthOf = visibleWidth;
+
+function widthSafe(value: string, width: number): string {
+	if (width <= 0) return "";
+	const fitted = widthOf(value) > width ? truncateAnsi(value, width, "") : value;
+	const current = widthOf(fitted);
+	return current < width ? fitted + " ".repeat(width - current) : fitted;
+}
+
+function isNativeBorderLine(line: string): boolean {
+	const stripped = stripAnsi(line);
+	return /^─{2,}$/.test(stripped) || /^─── [↑↓] \d+ more /.test(stripped);
+}
+
+function semanticTheme(theme: PiEditorTheme, config: NormalizedPiStyleConfig): ResolvedTheme {
+	const editorTheme = theme;
+	return resolveTheme(
+		{
+			fg: (token) => {
+				if (token === "borderActive" || token.startsWith("thinking")) return editorTheme.borderColor("");
+				return "";
+			},
+		},
+		config,
+	);
+}
+
+/**
+ * A thin CustomEditor treatment: all text, cursor, paste, autocomplete, history,
+ * and keybinding state remains owned by Pi's editor implementation.
+ */
+export class StyledEditor extends CustomEditor implements EditorComponent {
+	private config: NormalizedPiStyleConfig;
+	private snapshot: StatusSnapshot;
+	private readonly piTheme: PiEditorTheme;
+	private readonly fullTheme: EditorOptions["fullTheme"];
+	private readonly onSnapshot: (snapshot: StatusSnapshot) => void;
+	private semantic: ResolvedTheme;
+	private disposed = false;
+
+	constructor(tui: Tui, theme: PiEditorTheme, keybindings: Keybindings, options: EditorOptions) {
+		super(tui, theme, keybindings);
+		this.config = options.config;
+		this.snapshot = options.snapshot;
+		this.piTheme = theme;
+		this.fullTheme = options.fullTheme;
+		this.onSnapshot = options.onSnapshot;
+		this.semantic = semanticTheme(theme, options.config);
+		this.setPaddingX(0);
+	}
+
+	update(snapshot: StatusSnapshot): void {
+		if (this.disposed) return;
+		this.snapshot = snapshot;
+		this.invalidate();
+	}
+
+	configure(config: NormalizedPiStyleConfig): void {
+		if (this.disposed) return;
+		this.config = config;
+		this.semantic = semanticTheme(this.piTheme, config);
+		this.invalidate();
+	}
+
+	override handleInput(data: string): void {
+		if (this.disposed) return;
+		super.handleInput(data);
+		this.onSnapshot({ ...this.snapshot });
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.semantic = semanticTheme(this.piTheme, this.config);
+		this.tui.requestRender();
+	}
+
+	override render(width: number): string[] {
+		if (width <= 0) return [];
+		const nativeLines = super.render(width);
+		// Autocomplete (slash menu / @-mentions) restructure: Pi draws the
+		// suggestions after its own bottom border, which pushes the below-editor
+		// widgets (status line) down. Re-frame the native output so the dropdown
+		// lives INSIDE the input box, keeping the footer directly below the input.
+		// Native layout: [top border, text lines, bottom border, dropdown lines...].
+		if ((this as unknown as { autocompleteState?: unknown }).autocompleteState) {
+			const prompt = this.prompt();
+			const padding = this.paddingFor(width, this.styleFor(width));
+			const promptWidth = widthOf(prompt) + 1;
+			const prefix = `${" ".repeat(padding)}${prompt} `;
+			const continuation = " ".repeat(padding + promptWidth);
+			const borderIndex = nativeLines.slice(1).findIndex((line) => isNativeBorderLine(line));
+			const split = borderIndex >= 0 ? borderIndex + 1 : nativeLines.length;
+			const body = nativeLines.slice(1, split);
+			const dropdown = nativeLines.slice(split);
+			const border = this.borderFor(width);
+			const renderedBody = body.map((line, index) => widthSafe(`${index === 0 ? prefix : continuation}${line}`, width));
+			return [
+				border("─".repeat(width)),
+				...renderedBody,
+				...dropdown.map((line) => widthSafe(line, width)),
+				border("─".repeat(width)),
+			];
+		}
+		const style = this.styleFor(width);
+		if (style === "native") return nativeLines.map((line) => widthSafe(line, width));
+
+		const prompt = this.prompt();
+		const promptWidth = widthOf(prompt) + 1;
+		const padding = this.paddingFor(width, style);
+		const innerWidth = Math.max(1, width - promptWidth - padding * 2);
+		const innerLines = super.render(innerWidth);
+		if (innerLines.length === 0) return [];
+
+		const body = innerLines.slice(1, -1);
+		const prefix = `${" ".repeat(padding)}${prompt} `;
+		const continuation = " ".repeat(padding + promptWidth);
+		const renderedBody = body.map((line, index) => {
+			const lead = index === 0 ? prefix : continuation;
+			return widthSafe(`${lead}${line}`, width);
+		});
+		const metadata = this.metadata(width, style);
+		const framed = this.frame(width, style, renderedBody, metadata);
+		return framed.map((line) => widthSafe(line, width));
+	}
+
+	dispose(): void {
+		if (this.disposed) return;
+		this.disposed = true;
+		this.invalidate();
+	}
+
+	private prompt(): string {
+		const configured = this.config.theme.glyphs.prompt;
+		if (configured) return configured;
+		return this.semantic.mode === "ascii" ? ">" : "❯";
+	}
+
+	private styleFor(width: number): "compact" | "boxed" | "dock" | "native" {
+		if (width < 20) return "native";
+		if (["compact", "boxed", "dock", "native"].includes(this.config.editor.style)) {
+			if (this.config.editor.style === "native") return "native";
+			if (width < 40 && this.config.editor.style !== "compact") return "compact";
+			return this.config.editor.style as "compact" | "boxed" | "dock";
+		}
+		return "compact";
+	}
+
+	private paddingFor(width: number, style: "compact" | "boxed" | "dock" | "native"): number {
+		if (width < 50) return 0;
+		return style === "boxed" ? 2 : style === "dock" ? 1 : 1;
+	}
+
+	private borderFor(width: number): (line: string) => string {
+		// Sync the frame color with the active thinking level, matching Pi's native editor.
+		const level = this.snapshot.thinkingLevel;
+		const thinking = this.fullTheme?.getThinkingBorderColor?.(level ?? "off");
+		const border = thinking ?? this.piTheme.borderColor;
+		return (line: string) => border(widthSafe(line, width));
+	}
+
+	private frame(
+		width: number,
+		style: "compact" | "boxed" | "dock" | "native",
+		body: string[],
+		metadata: string[],
+	): string[] {
+		const border = this.borderFor(width);
+		const lineMode = this.config.editor.frame === "line" || this.config.editor.frame === "solid";
+		if (style === "compact" || lineMode) {
+			// Match Pi's native editor: a horizontal border above and below the input.
+			return [border("─".repeat(width)), ...body, border("─".repeat(width)), ...metadata];
+		}
+		if (style === "boxed") {
+			const glyph = this.config.editor.frame === "halfblock" ? "▀" : "━";
+			return [border(glyph.repeat(width)), ...body, border(glyph.repeat(width)), ...metadata];
+		}
+		if (this.config.editor.frame === "native") return body;
+		return [
+			border(`┌${"─".repeat(Math.max(0, width - 2))}┐`),
+			...body,
+			border(`└${"─".repeat(Math.max(0, width - 2))}┘`),
+			...metadata,
+		];
+	}
+
+	private metadata(width: number, style: "compact" | "boxed" | "dock" | "native"): string[] {
+		if (!this.config.editor.showMetadata || width < 60) return [];
+		const percent = contextPercent(this.snapshot.context ?? {});
+		if (percent === undefined) return [];
+		const label = `ctx ${Math.round(percent)}%`;
+		return [this.piTheme.borderColor(` ${style === "boxed" ? "· " : ""}${label}`)];
+	}
+}
+
+export function installEditor(options: {
+	host: EditorHost;
+	config: NormalizedPiStyleConfig;
+	generation: number;
+	initialSnapshot: StatusSnapshot;
+	isCurrent?: () => boolean;
+}): EditorInstallation | undefined {
+	if (!options.host.setEditorComponent) return undefined;
+	const previous = options.host.getEditorComponent?.();
+	if (previous && options.config.compatibility.preferExistingEditor) {
+		return {
+			generation: options.generation,
+			installedFactory: previous,
+			previousFactory: previous,
+			preservedPrevious: true,
+			update() {},
+			configure() {},
+			dispose() {},
+		};
+	}
+	let config = options.config;
+	let snapshot = options.initialSnapshot;
+	let disposed = false;
+	const components = new Set<StyledEditor>();
+	const factory = ((tui: Tui, theme: PiEditorTheme, keybindings: Keybindings) => {
+		const editor = new StyledEditor(tui, theme, keybindings, {
+			config,
+			snapshot,
+			theme,
+			...(options.host.theme ? { fullTheme: options.host.theme } : {}),
+			onSnapshot: (next) => {
+				if (!disposed && options.isCurrent?.() !== false) snapshot = next;
+			},
+		});
+		components.add(editor);
+		return editor;
+	}) as EditorFactory;
+	try {
+		options.host.setEditorComponent(factory);
+	} catch {
+		options.host.notify?.("pi-style editor unavailable; keeping the native editor", "warning");
+		return undefined;
+	}
+	return {
+		generation: options.generation,
+		installedFactory: factory,
+		previousFactory: previous,
+		preservedPrevious: false,
+		update(next) {
+			if (disposed || options.isCurrent?.() === false) return;
+			snapshot = next;
+			for (const component of components) component.update(next);
+		},
+		configure(next) {
+			if (disposed || options.isCurrent?.() === false) return;
+			config = next;
+			for (const component of components) component.configure(next);
+		},
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			for (const component of components) component.dispose();
+			components.clear();
+			if (options.host.getEditorComponent?.() === factory) {
+				options.host.setEditorComponent(previous);
+			}
+		},
+	};
+}

package/extension-src/pi-style/features/messages/boxed-block.ts

@@ -0,0 +1,74 @@
+// Boxed message-block shell (skill/compaction/branch/custom/MCP blocks).
+// Returns only border/content lines with foreground styling; the parent Box
+// applies the customMessageBg background (the native components already set
+// that bgFn).
+
+import type { Component } from "@earendil-works/pi-tui";
+import type { BoxTheme } from "../../shared/box.js";
+import { boxBorder, boxInnerWidth, boxInsetDivider, boxLine, boxLineWithRight, boxWidth } from "../../shared/box.js";
+
+export type MessageBlockOptions = {
+	kind: string;
+	title?: string;
+	right?: string;
+	body: (contentWidth: number) => string[];
+	hasDivider?: boolean | "auto";
+	icon?: string;
+	cache?: boolean;
+};
+
+function formatMessageBlockTitle(theme: BoxTheme, kind: string, title?: string, icon = "➔"): string {
+	const rawTitle = title ? `${icon} ${kind} | ${title}` : `${icon} ${kind}`;
+	const coloredTitle = theme.fg("accent", rawTitle);
+	return typeof theme?.bold === "function" ? theme.bold(coloredTitle) : coloredTitle;
+}
+
+/**
+ * Render a boxed message block.
+ *
+ * Returns only border/content lines with foreground styling. Background is
+ * applied by the parent Box (all patched components extend Box with a
+ * customMessageBg bgFn), so this helper must NOT apply background itself —
+ * that would create a double-background conflict.
+ */
+export function renderBoxedMessageBlock(theme: BoxTheme, options: MessageBlockOptions): Component {
+	const { kind, title, right, body, icon = "➔", hasDivider = true, cache: shouldCache = true } = options;
+	let cache: { width: number; lines: string[] } | null = null;
+
+	return {
+		invalidate() {
+			cache = null;
+		},
+		render(width: number): string[] {
+			if (shouldCache && cache?.width === width) return cache.lines;
+
+			const renderedWidth = boxWidth(width);
+			const contentWidth = boxInnerWidth(renderedWidth);
+			const titleLine = formatMessageBlockTitle(theme, kind, title, icon);
+
+			const lines: string[] = [];
+			lines.push(boxBorder(theme, "┌", "┐", renderedWidth));
+
+			if (right) {
+				const rightStyled = theme.fg("dim", right);
+				lines.push(boxLineWithRight(theme, titleLine, rightStyled, renderedWidth));
+			} else {
+				lines.push(boxLine(theme, titleLine, renderedWidth));
+			}
+
+			const bodyLines = body(contentWidth);
+			const showDivider = hasDivider === "auto" ? bodyLines.length > 0 : hasDivider;
+			if (showDivider) {
+				lines.push(boxInsetDivider(theme, renderedWidth));
+			}
+			for (const line of bodyLines) {
+				lines.push(boxLine(theme, line, renderedWidth));
+			}
+
+			lines.push(boxBorder(theme, "└", "┘", renderedWidth));
+
+			if (shouldCache) cache = { width, lines };
+			return lines;
+		},
+	};
+}

package/extension-src/pi-style/features/messages/index.ts

@@ -0,0 +1,145 @@
+import { 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 OscParts = { start: string; body: string; end: string };
+
+function extractOscEnvelope(line: string): OscParts | undefined {
+	if (!line.startsWith(OSC133_ZONE_START)) return undefined;
+	const bodyEnd = line.indexOf(OSC133_ZONE_END, OSC133_ZONE_START.length);
+	if (bodyEnd < 0 || !line.endsWith(OSC133_ZONE_FINAL)) return undefined;
+	return { start: OSC133_ZONE_START, body: line.slice(OSC133_ZONE_START.length, bodyEnd), end: line.slice(bodyEnd) };
+}
+
+function prefixAtFirstContent(line: string, prefix: string): string {
+	let index = 0;
+	while (index < line.length) {
+		if (line[index] === "\x1b" && line[index + 1] === "[") {
+			index += 2;
+			while (index < line.length && (line.charCodeAt(index) < 64 || line.charCodeAt(index) > 126)) index++;
+			if (index < line.length) index++;
+			continue;
+		}
+		if (/\s/u.test(line[index] ?? "")) {
+			index++;
+			continue;
+		}
+		break;
+	}
+	return `${line.slice(0, index)}${prefix}${line.slice(index)}`;
+}
+
+function decorateMessageLine(
+	line: string,
+	index: number,
+	lastIndex: number,
+	contentIndex: number,
+	options: {
+		firstEnvelope: OscParts | undefined;
+		firstHasStart: boolean;
+		multilineEnvelope: boolean;
+		prefix: string;
+	},
+): string {
+	const { firstEnvelope, firstHasStart, multilineEnvelope, prefix } = options;
+	const prefixWidth = visibleWidth(prefix);
+	if (index === contentIndex && firstEnvelope)
+		return `${firstEnvelope.start}${prefixAtFirstContent(firstEnvelope.body, prefix)}${firstEnvelope.end}`;
+	if (index === contentIndex && firstHasStart)
+		return `${OSC133_ZONE_START}${prefix}${line.slice(OSC133_ZONE_START.length)}`;
+	if (index === lastIndex && multilineEnvelope && index !== contentIndex)
+		return `${OSC133_ZONE_END}${OSC133_ZONE_FINAL}${line.slice((OSC133_ZONE_END + OSC133_ZONE_FINAL).length)}`;
+	if (index === contentIndex) return `${prefix}${line}`;
+	return index > contentIndex ? `${" ".repeat(prefixWidth)}${line}` : line;
+}
+
+function contentText(line: string): string {
+	let output = "";
+	for (let index = 0; index < line.length; index++) {
+		if (line.charCodeAt(index) !== 27) {
+			output += line[index];
+			continue;
+		}
+		const next = line[index + 1];
+		if (next === "]") {
+			index += 2;
+			while (index < line.length && line.charCodeAt(index) !== 7) index++;
+			continue;
+		}
+		if (next === "[") {
+			index += 2;
+			while (index < line.length && (line.charCodeAt(index) < 64 || line.charCodeAt(index) > 126)) index++;
+		}
+	}
+	return output.replaceAll(OSC133_ZONE_START, "").replaceAll(OSC133_ZONE_END, "").replaceAll(OSC133_ZONE_FINAL, "");
+}
+
+function hasContent(line: string): boolean {
+	return [...contentText(line)].some((character) => !/\s/u.test(character));
+}
+
+function prefixNative(lines: unknown, width: number, prefix: string): string[] | undefined {
+	if (!Array.isArray(lines) || lines.length === 0 || !lines.every((line) => typeof line === "string")) return undefined;
+	const nativeLines = lines as string[];
+	const prefixWidth = visibleWidth(prefix);
+	if (width <= prefixWidth) return undefined;
+	const bodyWidth = width - prefixWidth;
+	const first = nativeLines[0] ?? "";
+	const last = nativeLines.at(-1) ?? "";
+	const multilineEnvelope = nativeLines.length > 1 && last.startsWith(OSC133_ZONE_END + OSC133_ZONE_FINAL);
+	const firstContentIndex = nativeLines.findIndex((line, index) =>
+		index !== nativeLines.length - 1 || !multilineEnvelope ? hasContent(line) : false,
+	);
+	if (firstContentIndex < 0) return nativeLines;
+	const firstEnvelope = firstContentIndex === 0 ? extractOscEnvelope(first) : undefined;
+	const firstHasStart = firstContentIndex === 0 && first.startsWith(OSC133_ZONE_START);
+	const decorated = nativeLines.map((line, index) => {
+		if (index === firstContentIndex)
+			return decorateMessageLine(line, index, nativeLines.length - 1, firstContentIndex, {
+				firstEnvelope,
+				firstHasStart,
+				multilineEnvelope,
+				prefix,
+			});
+		if (index > firstContentIndex && hasContent(line)) return `${" ".repeat(prefixWidth)}${line}`;
+		return line;
+	});
+	if (!decorated.every((line) => visibleWidth(line) <= width)) return undefined;
+	if (!nativeLines.every((line) => visibleWidth(line) <= bodyWidth)) return undefined;
+	return decorated;
+}
+
+export type MessageDecorationSnapshot = Readonly<{
+	userPrefix: string;
+	assistantPrefix: string;
+	userEnabled: boolean;
+	assistantEnabled: boolean;
+}>;
+
+export function decorateMessageRender(
+	subtype: "native-user-message" | "native-assistant-message",
+	original: unknown,
+	instance: object,
+	args: unknown[],
+	snapshot: MessageDecorationSnapshot = {
+		userPrefix: "❯ ",
+		assistantPrefix: "│ ",
+		userEnabled: true,
+		assistantEnabled: true,
+	},
+): unknown {
+	if (typeof original !== "function") return undefined;
+	const width = typeof args[0] === "number" ? args[0] : 0;
+	const enabled = subtype === "native-user-message" ? snapshot.userEnabled : snapshot.assistantEnabled;
+	const prefix = subtype === "native-user-message" ? snapshot.userPrefix : snapshot.assistantPrefix;
+	if (!enabled) return Reflect.apply(original, instance, args);
+	if (width <= visibleWidth(prefix)) return Reflect.apply(original, instance, args);
+	// Exactly one native invocation. If the reduced render cannot be certified, the
+	// already-obtained result is the only safe fallback; retrying can mutate state.
+	const reducedWidth = width - visibleWidth(prefix);
+	const native = Reflect.apply(original, instance, [reducedWidth, ...args.slice(1)]);
+	return prefixNative(native, width, prefix) ?? native;
+}
+
+// Special private layouts are intentionally not installed; their prototypes remain native.