@rosetears/aili-pi 0.1.0 → 0.1.1

package/extensions/zentui/state.ts

@@ -0,0 +1,55 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import {
+	buildContextGauge,
+	buildCostLabel,
+	formatCount,
+	buildTokenLabel,
+	formatProviderLabel,
+	getUsageTotals,
+} from "./format.js";
+import type { GitStatusSummary } from "./git.js";
+import type { PackageVersionResult } from "./package-version.js";
+import type { RuntimeInfo } from "./runtime.js";
+
+export type FooterState = GitStatusSummary & {
+	modelLabel: string;
+	providerLabel: string;
+	contextLabel: string;
+	contextUsedLabel: string;
+	tokenLabel: string;
+	costLabel: string;
+	runtime?: RuntimeInfo;
+	packageVersion?: PackageVersionResult;
+	sessionStartEpoch?: number;
+};
+
+export function createInitialState(gitDefaults: GitStatusSummary): FooterState {
+	return {
+		modelLabel: "no-model",
+		providerLabel: "Unknown",
+		contextLabel: "--",
+		contextUsedLabel: "--",
+		tokenLabel: "↑0 ↓0",
+		costLabel: "$0.000",
+		runtime: undefined,
+		packageVersion: undefined,
+		sessionStartEpoch: Date.now(),
+		...gitDefaults,
+	};
+}
+
+export function syncState(state: FooterState, ctx: ExtensionContext, cacheHitIcon: string): void {
+	const totals = getUsageTotals(ctx);
+	state.modelLabel = ctx.model?.id ?? "no-model";
+	state.providerLabel = formatProviderLabel(ctx.model?.provider);
+	const usage = ctx.getContextUsage();
+	const contextWindow = ctx.model?.contextWindow ?? usage?.contextWindow;
+	state.contextLabel = contextWindow && contextWindow > 0
+		? `[${buildContextGauge(usage?.percent ?? 0, 18)}]`
+		: "--";
+	state.contextUsedLabel = contextWindow && contextWindow > 0 && typeof usage?.tokens === "number"
+		? `${formatCount(usage.tokens)}/${formatCount(contextWindow)}`
+		: "--";
+	state.tokenLabel = buildTokenLabel(totals, cacheHitIcon);
+	state.costLabel = buildCostLabel(totals);
+}

package/extensions/zentui/style.ts

@@ -0,0 +1,332 @@
+import type { ThemeColor } from "@earendil-works/pi-coding-agent";
+import type { ColorSource, ColorSpec } from "./config.js";
+
+type ThemeLike = {
+	fg(color: string, text: string): string;
+	bold?: (text: string) => string;
+	italic?: (text: string) => string;
+	underline?: (text: string) => string;
+};
+
+export type { ThemeLike };
+
+export const EDITOR_ACCENT_STYLE = "blue";
+export const EDITOR_BORDER_STYLE = "bright-black";
+
+export type SourceStyleFallback = {
+	theme: ColorSpec;
+	terminal: ColorSpec;
+};
+
+export const EDITOR_ACCENT_FALLBACK: SourceStyleFallback = {
+	theme: "accent",
+	terminal: EDITOR_ACCENT_STYLE,
+};
+
+export const EDITOR_BORDER_FALLBACK: SourceStyleFallback = {
+	theme: "borderMuted",
+	terminal: EDITOR_BORDER_STYLE,
+};
+
+function isHexColor(value: string): boolean {
+	return /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
+}
+
+function expandHexColor(hex: string): string {
+	const body = hex.slice(1);
+	if (body.length === 3) {
+		return body
+			.split("")
+			.map((ch) => ch + ch)
+			.join("");
+	}
+	return body;
+}
+
+function hexToAnsi(hex: string, isBackground = false): string {
+	const normalized = expandHexColor(hex);
+	const r = Number.parseInt(normalized.slice(0, 2), 16);
+	const g = Number.parseInt(normalized.slice(2, 4), 16);
+	const b = Number.parseInt(normalized.slice(4, 6), 16);
+	return `\x1b[${isBackground ? 48 : 38};2;${r};${g};${b}m`;
+}
+
+const terminalColorCodes = new Map([
+	["black", 30],
+	["red", 31],
+	["green", 32],
+	["yellow", 33],
+	["blue", 34],
+	["purple", 35],
+	["cyan", 36],
+	["white", 37],
+	["bright-black", 90],
+	["bright-red", 91],
+	["bright-green", 92],
+	["bright-yellow", 93],
+	["bright-blue", 94],
+	["bright-purple", 95],
+	["bright-cyan", 96],
+	["bright-white", 97],
+]);
+
+const terminalStyleModifiers = new Map([
+	["bold", 1],
+	["dim", 2],
+	["dimmed", 2],
+	["italic", 3],
+	["underline", 4],
+]);
+
+const themeColorNameMap = new Map([
+	["red", "error"],
+	["bright-red", "error"],
+	["green", "success"],
+	["bright-green", "success"],
+	["yellow", "warning"],
+	["bright-yellow", "warning"],
+	["blue", "syntaxFunction"],
+	["bright-blue", "syntaxFunction"],
+	["cyan", "syntaxFunction"],
+	["bright-cyan", "syntaxFunction"],
+	["purple", "syntaxKeyword"],
+	["bright-purple", "syntaxKeyword"],
+	["black", "muted"],
+	["bright-black", "muted"],
+	["white", "text"],
+	["bright-white", "text"],
+]);
+
+const themeStyleModifiers = new Set(["bold", "italic", "underline"]);
+
+const themeColorTokens = new Set<ThemeColor>([
+	"accent",
+	"border",
+	"borderAccent",
+	"borderMuted",
+	"success",
+	"error",
+	"warning",
+	"muted",
+	"dim",
+	"text",
+	"thinkingText",
+	"userMessageText",
+	"customMessageText",
+	"customMessageLabel",
+	"toolTitle",
+	"toolOutput",
+	"mdHeading",
+	"mdLink",
+	"mdLinkUrl",
+	"mdCode",
+	"mdCodeBlock",
+	"mdCodeBlockBorder",
+	"mdQuote",
+	"mdQuoteBorder",
+	"mdHr",
+	"mdListBullet",
+	"toolDiffAdded",
+	"toolDiffRemoved",
+	"toolDiffContext",
+	"syntaxComment",
+	"syntaxKeyword",
+	"syntaxFunction",
+	"syntaxVariable",
+	"syntaxString",
+	"syntaxNumber",
+	"syntaxType",
+	"syntaxOperator",
+	"syntaxPunctuation",
+	"thinkingOff",
+	"thinkingMinimal",
+	"thinkingLow",
+	"thinkingMedium",
+	"thinkingHigh",
+	"thinkingXhigh",
+	"bashMode",
+]);
+
+function terminalColorToAnsi(color: string, isBackground = false): string | undefined {
+	const normalized = color.toLowerCase();
+	const colorCode = terminalColorCodes.get(normalized);
+	if (colorCode !== undefined) return `${isBackground ? colorCode + 10 : colorCode}`;
+
+	if (/^(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/.test(normalized)) {
+		return `${isBackground ? 48 : 38};5;${normalized}`;
+	}
+
+	if (isHexColor(normalized)) return hexToAnsi(normalized, isBackground).slice(2, -1);
+	return undefined;
+}
+
+function isExplicitTerminalColorToken(token: string): boolean {
+	const normalized = token.toLowerCase();
+	if (normalized.startsWith("fg:") || normalized.startsWith("bg:")) return true;
+	if (isHexColor(normalized)) return true;
+	return /^(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/.test(normalized);
+}
+
+function isSupportedStyleToken(token: string): boolean {
+	const normalized = token.toLowerCase();
+	if (terminalStyleModifiers.has(normalized)) return true;
+	if (terminalColorToAnsi(normalized) !== undefined) return true;
+
+	const isForeground = normalized.startsWith("fg:");
+	const isBackground = normalized.startsWith("bg:");
+	if (isForeground || isBackground) {
+		return terminalColorToAnsi(normalized.slice(3), isBackground) !== undefined;
+	}
+
+	return themeColorTokens.has(token as ThemeColor);
+}
+
+export function isSupportedColorSpec(style: ColorSpec): boolean {
+	const trimmed = style.trim();
+	if (trimmed === "") return true;
+	return trimmed.split(/\s+/).every(isSupportedStyleToken);
+}
+
+function applyThemeModifiers(theme: ThemeLike, styleTokens: string[], text: string): string {
+	let rendered = text;
+	for (const token of styleTokens) {
+		const normalized = token.toLowerCase();
+		if (normalized === "bold") rendered = theme.bold?.(rendered) ?? rendered;
+		if (normalized === "italic") rendered = theme.italic?.(rendered) ?? rendered;
+		if (normalized === "underline") rendered = theme.underline?.(rendered) ?? rendered;
+	}
+	return rendered;
+}
+
+export function safeThemeFg(theme: ThemeLike, color: string, text: string): string {
+	try {
+		return theme.fg(color, text);
+	} catch {
+		return text;
+	}
+}
+
+function mapThemeColor(styleTokens: string[]): string | undefined {
+	let fallback: string | undefined;
+	for (const token of styleTokens) {
+		const normalized = token.toLowerCase();
+		if (themeStyleModifiers.has(normalized)) continue;
+		if (normalized === "dim" || normalized === "dimmed") {
+			fallback = "muted";
+			continue;
+		}
+
+		const mapped = themeColorNameMap.get(normalized);
+		if (mapped) return mapped;
+		return token;
+	}
+	return fallback;
+}
+
+/**
+ * Colorize text using a theme color token or hex color.
+ * Non-hex values are passed directly to `theme.fg()`; invalid tokens fall back
+ * to unstyled text so a config typo does not break rendering.
+ */
+export function colorize(theme: ThemeLike, color: ColorSpec, text: string): string {
+	if (isHexColor(color)) {
+		return `${hexToAnsi(color)}${text}\x1b[39m`;
+	}
+	return safeThemeFg(theme, color, text);
+}
+
+/**
+ * Render text with Starship-style terminal styling strings (e.g. "bold red", "fg:202",
+ * "bg:blue", "underline bg:#bf5700").
+ */
+export function renderTerminalStyle(style: string, text: string): string {
+	const codes: string[] = [];
+	for (const token of style.trim().split(/\s+/)) {
+		if (!token) continue;
+
+		const normalized = token.toLowerCase();
+		const modifier = terminalStyleModifiers.get(normalized);
+		if (modifier !== undefined) {
+			codes.push(`${modifier}`);
+			continue;
+		}
+
+		const isForeground = normalized.startsWith("fg:");
+		const isBackground = normalized.startsWith("bg:");
+		const colorName = isForeground || isBackground ? normalized.slice(3) : normalized;
+		const color = terminalColorToAnsi(colorName, isBackground);
+		if (color) codes.push(color);
+	}
+
+	return codes.length ? `\x1b[${codes.join(";")}m${text}\x1b[0m` : text;
+}
+
+/**
+ * Apply Starship-style terminal styling first, falling back to Pi theme tokens for
+ * legacy config values such as "accent" or "syntaxKeyword".
+ */
+export function renderStyle(theme: ThemeLike, style: ColorSpec, text: string): string {
+	if (style.trim() === "") return text;
+	const styled = renderTerminalStyle(style, text);
+	return styled === text ? colorize(theme, style, text) : styled;
+}
+
+export function renderThemeStyle(theme: ThemeLike, style: ColorSpec, text: string): string {
+	const trimmed = style.trim();
+	if (trimmed === "") return text;
+
+	const tokens = trimmed.split(/\s+/).filter(Boolean);
+	if (tokens.some(isExplicitTerminalColorToken)) return renderTerminalStyle(style, text);
+
+	const color = mapThemeColor(tokens) ?? "text";
+	return safeThemeFg(theme, color, applyThemeModifiers(theme, tokens, text));
+}
+
+export function renderStyleForSource(
+	theme: ThemeLike,
+	source: ColorSource,
+	style: ColorSpec,
+	text: string,
+): string {
+	return source === "terminal"
+		? renderStyle(theme, style, text)
+		: renderThemeStyle(theme, style, text);
+}
+
+export function renderStyleForSourceOrFallback(
+	theme: ThemeLike,
+	source: ColorSource,
+	style: ColorSpec | undefined,
+	fallback: ColorSpec | SourceStyleFallback,
+	text: string,
+): string {
+	const fallbackStyle = typeof fallback === "string" ? fallback : fallback[source];
+	return renderStyleForSource(theme, source, style ?? fallbackStyle, text);
+}
+
+export function renderEditorAccent(text: string): string {
+	return renderTerminalStyle(EDITOR_ACCENT_STYLE, text);
+}
+
+export function renderEditorBorder(text: string): string {
+	return renderTerminalStyle(EDITOR_BORDER_STYLE, text);
+}
+
+export function renderAccentLine(theme: ThemeLike, source: ColorSource, text: string): string {
+	return renderStyleForSourceOrFallback(theme, source, undefined, EDITOR_ACCENT_FALLBACK, text);
+}
+
+export function renderChromeBorder(
+	theme: ThemeLike,
+	source: ColorSource,
+	terminalFallbackStyle: ColorSpec,
+	text: string,
+): string {
+	return renderStyleForSourceOrFallback(
+		theme,
+		source,
+		undefined,
+		{ theme: "borderMuted", terminal: terminalFallbackStyle },
+		text,
+	);
+}

package/extensions/zentui/thinking-message.ts

@@ -0,0 +1,159 @@
+import { AssistantMessageComponent, type Theme } from "@earendil-works/pi-coding-agent";
+import { type Component, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { renderSakuraGradient } from "./gradient.js";
+import { installPrototypePatch } from "./prototype-patch-registry.js";
+
+type Cleanup = () => void;
+type AssistantContent = {
+	type: string;
+	text?: string;
+	thinking?: string;
+};
+type AssistantMessageRuntime = {
+	contentContainer?: { children?: Component[] };
+	hideThinkingBlock?: boolean;
+};
+type AssistantMessageLike = {
+	content?: AssistantContent[];
+};
+
+const MAX_REASONING_WIDTH = 96;
+
+function isBlankRenderedLine(line: string): boolean {
+	return line
+		.replace(/\x1b\][^\x07]*(?:\x07|\x1b\\)/g, "")
+		.replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, "")
+		.trim().length === 0;
+}
+
+function removeTrailingPadding(line: string): string {
+	return line.replace(
+		/ +((?:(?:\x1b\[[0-?]*[ -/]*[@-~])|(?:\x1b\][^\x07]*(?:\x07|\x1b\\)))*)$/,
+		"$1",
+	);
+}
+
+function removeOutputPadding(line: string): string {
+	let index = 0;
+	while (index < line.length && line[index] === "\x1b") {
+		if (line[index + 1] === "[") {
+			const match = line.slice(index).match(/^\x1b\[[0-?]*[ -/]*[@-~]/);
+			if (!match) break;
+			index += match[0].length;
+			continue;
+		}
+		if (line[index + 1] === "]") {
+			const bell = line.indexOf("\x07", index + 2);
+			const st = line.indexOf("\x1b\\", index + 2);
+			const end = bell >= 0 && (st < 0 || bell < st) ? bell + 1 : st >= 0 ? st + 2 : -1;
+			if (end < 0) break;
+			index = end;
+			continue;
+		}
+		break;
+	}
+	return line[index] === " " ? `${line.slice(0, index)}${line.slice(index + 1)}` : line;
+}
+
+function isVisibleContent(content: AssistantContent): boolean {
+	return (
+		(content.type === "text" && Boolean(content.text?.trim())) ||
+		(content.type === "thinking" && Boolean(content.thinking?.trim()))
+	);
+}
+
+/** Locate the children emitted for thinking runs by Pi's updateContent algorithm. */
+function thinkingChildIndices(message: AssistantMessageLike): number[] {
+	const content = message.content ?? [];
+	let childIndex = content.some(isVisibleContent) ? 1 : 0; // Initial Spacer
+	const result: number[] = [];
+
+	for (let index = 0; index < content.length; index++) {
+		const item = content[index]!;
+		if (item.type === "text" && item.text?.trim()) {
+			childIndex += 1;
+			continue;
+		}
+		if (item.type !== "thinking") continue;
+
+		let hasThinking = false;
+		while (index < content.length && content[index]!.type === "thinking") {
+			hasThinking ||= Boolean(content[index]!.thinking?.trim());
+			index += 1;
+		}
+		index -= 1;
+		if (!hasThinking) continue;
+
+		result.push(childIndex);
+		childIndex += 1;
+		if (content.slice(index + 1).some(isVisibleContent)) childIndex += 1; // Spacer
+	}
+	return result;
+}
+
+class ThinkingTrailComponent implements Component {
+	constructor(
+		private readonly inner: Component,
+		private readonly getTheme: () => Theme | undefined,
+	) {}
+
+	invalidate(): void {
+		this.inner.invalidate?.();
+	}
+
+	render(width: number): string[] {
+		if (width < 8) return this.inner.render(width);
+		const contentWidth = Math.max(1, Math.min(width - 2, MAX_REASONING_WIDTH));
+		const rawLines = this.inner.render(contentWidth);
+		const rows: Array<{ line: string; step: boolean }> = [];
+		let startsStep = true;
+		for (const line of rawLines) {
+			if (isBlankRenderedLine(line)) {
+				startsStep = true;
+				continue;
+			}
+			rows.push({ line: removeOutputPadding(removeTrailingPadding(line)), step: startsStep });
+			startsStep = false;
+		}
+		if (rows.length === 0) return [];
+
+		const stepCount = rows.filter((row) => row.step).length;
+		const theme = this.getTheme();
+		if (!theme) return rawLines;
+		const count = theme.fg("muted", ` · ${stepCount} ${stepCount === 1 ? "STEP" : "STEPS"}`);
+		const title = `${renderSakuraGradient("✦ REASONING")}${count}`;
+		let currentStep = 0;
+		const body = rows.map(({ line, step }) => {
+			if (step) currentStep += 1;
+			const isLastStep = currentStep === stepCount;
+			const branchText = step ? (isLastStep ? "╰─ " : "├─ ") : isLastStep ? "   " : "│  ";
+			const branch = theme.fg("thinkingXhigh", branchText);
+			const marker = step ? renderSakuraGradient("◇ ") : "  ";
+			return truncateToWidth(`${branch}${marker}${line}`, width, "");
+		});
+
+		return [title, ...body];
+	}
+}
+
+/** Decorate only thinking runs; normal assistant Markdown remains untouched. */
+export function installThinkingMessageStyle(getTheme: () => Theme | undefined): Cleanup {
+	return installPrototypePatch(
+		AssistantMessageComponent.prototype,
+		"updateContent",
+		"assistant-thinking-content",
+		({ predecessor, receiver, args }) => {
+			const result = Reflect.apply(predecessor, receiver, args);
+			const runtime = receiver as AssistantMessageRuntime;
+			const children = runtime.contentContainer?.children;
+			const message = args[0] as AssistantMessageLike | undefined;
+			if (!children || !message) return result;
+
+			for (const index of thinkingChildIndices(message)) {
+				const child = children[index];
+				if (child) children[index] = new ThinkingTrailComponent(child, getTheme);
+			}
+			return result;
+		},
+	);
+}