pi-zentui 0.19.0 → 0.20.1

package/README.md

@@ -41,7 +41,7 @@ Editor, User messages, Working line, and selector borders use independent `enabl
 - Opencode autocomplete rows retain Pi's original unframed trailing layout; Minimalist keeps autocomplete inside its rounded frame
 - Configurable model, provider, thinking-level, accent, and border colors
 
-Editor previews:
+Editor styles:
 
 <h4 align="center"><code>opencode</code></h4>
 
@@ -193,15 +193,15 @@ User config lives at `~/.pi/agent/zentui.json`. The file is optional: missing or
 The interactive `/zentui` menu is split into exactly eight component-oriented sections, in this order. Use `Tab` and `Shift+Tab` to switch sections:
 
 1. **Appearance** — selector-border enablement, style, and colors; icon mode.
-2. **Editor** — editor enablement, style, colors, model label, border behavior, viewport indicators, and settings for the selected editor style.
-3. **User messages** — message enablement, `framed | framed-copy-friendly | compact | labeled` style selection (including **Framed (copy-friendly)**), and colors.
-4. **Working line** — ownership, settled Turn summary, spinner and text speeds, optional spinner-color motion, text animation, color source, custom-message toggle and editable list, Tool/Elapsed/Thinking/Tokens toggles, and preview.
+2. **Editor** — editor enablement, style, colors, model label, border behavior, viewport indicators, settings for the selected editor style, and a static synthetic preview.
+3. **User messages** — message enablement, `framed | framed-copy-friendly | compact | labeled` style selection (including **Framed (copy-friendly)**), colors, and a static synthetic Markdown preview.
+4. **Working line** — ownership, settled Turn summary, spinner and text speeds, optional spinner-color motion, text animation, color source, custom-message toggle and editable list, Tool/Elapsed/Thinking/Tokens toggles, and animated preview.
 5. **Footer** — `Native | Starship | Hidden` style selection. Starship additionally shows colors, model label, responsive layout, separator, context style, and path display.
 6. **Segments** — visibility toggles for non-Git Starship segments.
 7. **Git** — Starship Git segment and probe controls.
 8. **Extensions** — Starship extension-status placement and color controls for active keys.
 
-Editor, User messages, and Working line retain independent configuration. Footer's single style selects Pi's built-in Footer (`Native`), Zentui's Starship Footer, or an owned zero-row Footer (`Hidden`). Color and model-label rows update only their owning component.
+Editor, User messages, and Working line retain independent configuration. Editor and User-message previews use fixed synthetic content and remain visible while their component is disabled; the Working-line preview reflects its current configured sample, state, and animation. Each preview appears above its settings. Only the Working-line preview owns an animation timer. Footer's single style selects Pi's built-in Footer (`Native`), Zentui's Starship Footer, or an owned zero-row Footer (`Hidden`). Color and model-label rows update only their owning component.
 
 Starship-specific Footer rows are shown only while Starship is selected. The **Segments**, **Git**, and **Extensions** sections remain available for preconfiguration under every Footer style. Free-form values such as custom formats, Opencode metadata format, raw colors/styles, and inactive extension keys remain JSON-only; Working-line speed accepts validated custom milliseconds in `/zentui`.
 

package/extensions/zentui/settings-command.ts

@@ -50,6 +50,11 @@ import {
 import { sanitizeExtensionStatusText } from "./extension-status";
 import { isIconMode } from "./icons";
 import type { SessionLifecycle } from "./session-lifecycle";
+import {
+	renderEditorSettingsPreview,
+	renderUserMessageSettingsPreview,
+	SETTINGS_PREVIEW_MAX_WIDTH,
+} from "./settings-previews";
 import { EDITOR_BORDER_STYLE, renderChromeBorder, safeThemeFg } from "./style";
 import {
 	buildWorkingLinePreviewFrames,
@@ -120,6 +125,7 @@ const speedValues = (presets: readonly { label: string }[]) => [
 	"Custom…",
 ];
 const workingLineTextAnimationValues: WorkingLineTextAnimation[] = ["classic", "kitt", "disabled"];
+
 const settingsSections = [
 	"appearance",
 	"editor",
@@ -1574,6 +1580,22 @@ export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCo
 					};
 					settingsList = makeSettingsList(initialFocusId);
 					startPreview();
+					const renderPreviewRows = (previewWidth: number): string[] => {
+						if (previewWidth <= 0) return [];
+						if (activeSection === "editor")
+							return renderEditorSettingsPreview(deps.getConfig(), theme, previewWidth);
+						if (activeSection === "userMessages")
+							return renderUserMessageSettingsPreview(deps.getConfig(), theme, previewWidth);
+						if (activeSection === "workingLine" && preview && preview.frames.length > 0)
+							return [
+								truncateToWidth(
+									preview.frames[previewFrameIndex] ?? preview.frames[0],
+									Math.min(SETTINGS_PREVIEW_MAX_WIDTH, previewWidth),
+									"",
+								),
+							];
+						return [];
+					};
 					return {
 						render(width: number) {
 							const border = renderChromeBorder(
@@ -1582,22 +1604,23 @@ export function registerZentuiSettingsCommand(pi: ExtensionAPI, deps: SettingsCo
 								EDITOR_BORDER_STYLE,
 								"─".repeat(Math.max(0, width)),
 							);
+							const settingsRows = withSectionFooter(settingsList.render(width), theme).map(
+								(line) => truncateToWidth(line, width, ""),
+							);
+							const previewRows = renderPreviewRows(Math.max(0, width - 4));
+							while (previewRows.length > 0 && visibleWidth(previewRows.at(-1) ?? "") === 0)
+								previewRows.pop();
+							const indentedPreviewRows = previewRows.map((line) =>
+								truncateToWidth(`  ${line}`, width, ""),
+							);
+							const bodyRows = indentedPreviewRows.some((line) => visibleWidth(line) > 0)
+								? ["", ...indentedPreviewRows, "", ...settingsRows]
+								: settingsRows;
 							return [
 								truncateToWidth(border, width, ""),
 								truncateToWidth(formatSectionTabs(activeSection, theme, width), width, ""),
 								truncateToWidth(border, width, ""),
-								...(activeSection === "workingLine" && preview && preview.frames.length > 0
-									? [
-											truncateToWidth(
-												`  ${preview.frames[previewFrameIndex] ?? preview.frames[0]}`,
-												width,
-												"",
-											),
-										]
-									: []),
-								...withSectionFooter(settingsList.render(width), theme).map((line) =>
-									truncateToWidth(line, width, ""),
-								),
+								...bodyRows,
 								truncateToWidth(border, width, ""),
 							];
 						},

package/extensions/zentui/settings-previews.ts

@@ -0,0 +1,110 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { PolishedTuiConfig } from "./config";
+import { sanitizeEditorMetadataText } from "./editor-metadata-format";
+import { renderMinimalistFrame } from "./minimalist-editor";
+import { safeThemeFg } from "./style";
+import { renderPolishedEditorFrame } from "./ui";
+import { renderUserMessageStyle } from "./user-message-styles";
+
+export const SETTINGS_PREVIEW_MAX_WIDTH = 72;
+export const SETTINGS_PREVIEW_MAX_ROWS = 8;
+export const EDITOR_PREVIEW_INPUT = "Explain this change safely.";
+export const USER_MESSAGE_PREVIEW_MARKDOWN = "Please review **this change** safely.";
+
+function boundedRows(rows: string[], width: number): string[] {
+	const safeWidth = Math.max(0, Math.min(SETTINGS_PREVIEW_MAX_WIDTH, width));
+	if (safeWidth <= 0) return [];
+	const bounded = rows
+		.slice(0, SETTINGS_PREVIEW_MAX_ROWS)
+		.map((line) => truncateToWidth(line, safeWidth, ""));
+	while (bounded.length > 0 && visibleWidth(bounded.at(-1) ?? "") === 0) bounded.pop();
+	return bounded;
+}
+
+function previewConfig(config: PolishedTuiConfig): PolishedTuiConfig {
+	const derived = structuredClone(config);
+	derived.icons = Object.fromEntries(
+		Object.entries(derived.icons).map(([key, value]) => [
+			key,
+			typeof value === "string" ? sanitizeEditorMetadataText(value) : value,
+		]),
+	) as typeof derived.icons;
+	return derived;
+}
+
+function adaptiveBorder(theme: Theme): (text: string) => string {
+	return (text) => safeThemeFg(theme, "thinkingHigh", text);
+}
+
+export function renderEditorSettingsPreview(
+	config: PolishedTuiConfig,
+	theme: Theme,
+	width: number,
+): string[] {
+	const previewWidth = Math.max(0, Math.min(SETTINGS_PREVIEW_MAX_WIDTH, width));
+	if (previewWidth <= 0) return [];
+	const safeConfig = previewConfig(config);
+	const editor = safeConfig.components.editor;
+	const borderColor = adaptiveBorder(theme);
+	const modelLabel = editor.modelLabel === "name" ? "Sonnet 4" : "sonnet-4";
+	const editorLines = [EDITOR_PREVIEW_INPUT];
+	const viewport = editor.viewportIndicators ? { above: "2", below: "3" } : undefined;
+	const frame =
+		editor.style === "minimalist"
+			? renderMinimalistFrame({
+					width: previewWidth,
+					editorLines,
+					viewport,
+					inputText: EDITOR_PREVIEW_INPUT,
+					metadata: {
+						cwd: "/workspace/zentui/src",
+						projectRoot: "/workspace/zentui",
+						branch: "feat/settings-previews",
+						dirty: true,
+						ahead: 2,
+						behind: 1,
+						costLabel: "$.12",
+						modelLabel,
+						thinkingLevel: "high",
+						contextPercent: 75,
+						contextWindow: 372_000,
+						sessionName: "Preview",
+						agentDurationMs: 12_000,
+						agentActive: true,
+					},
+					uiTheme: theme,
+					config: safeConfig,
+					borderColor,
+				})
+			: renderPolishedEditorFrame({
+					width: previewWidth,
+					editorLines,
+					viewport,
+					uiTheme: theme,
+					config: safeConfig,
+					modelMeta: {
+						modelLabel,
+						modelId: "sonnet-4",
+						modelName: "Sonnet 4",
+						providerLabel: "Anthropic",
+						sessionName: "Preview",
+					},
+					thinkingLevel: "high",
+					borderColor,
+				});
+	return boundedRows(frame, previewWidth);
+}
+
+export function renderUserMessageSettingsPreview(
+	config: PolishedTuiConfig,
+	theme: Theme,
+	width: number,
+	text = USER_MESSAGE_PREVIEW_MARKDOWN,
+): string[] {
+	const previewWidth = Math.max(0, Math.min(SETTINGS_PREVIEW_MAX_WIDTH, width));
+	if (previewWidth <= 0) return [];
+	const safeConfig = previewConfig(config);
+	const frame = renderUserMessageStyle({ text, width: previewWidth, theme, config: safeConfig });
+	return boundedRows(frame, previewWidth);
+}

package/extensions/zentui/ui.ts

@@ -20,7 +20,7 @@ import {
 
 const LEGACY_SPLIT_POLISHED_FRAME = Symbol.for("pi-zentui.polished-frame");
 
-type ViewportCounts = {
+export type ViewportCounts = {
 	above?: string;
 	below?: string;
 };
@@ -75,7 +75,7 @@ type WrappedEditor = EditorComponent &
 		setAutocompleteMaxVisible?: (maxVisible: number) => void;
 	};
 
-type EditorMeta = {
+export type EditorMeta = {
 	modelLabel: string;
 	modelId?: string;
 	modelName?: string;
@@ -83,6 +83,19 @@ type EditorMeta = {
 	sessionName?: string;
 };
 
+export type PolishedEditorFrameOptions = {
+	width: number;
+	editorLines: string[];
+	autocompleteLines?: string[];
+	viewport?: ViewportCounts;
+	uiTheme: Theme;
+	config: ZentuiConfig;
+	modelMeta: EditorMeta;
+	thinkingLevel?: string;
+	rightStatus?: string;
+	borderColor?: (text: string) => string;
+};
+
 type PolishedFrameOptions = {
 	width: number;
 	baseRendered: string[];
@@ -542,12 +555,6 @@ function renderPolishedFrame({
 }: PolishedFrameOptions): PolishedFrameResult {
 	if (width <= 2) return { lines: clampRenderedLines(baseRendered, width), decorated: false };
 
-	const reset = "\x1b[0m";
-	const colorSource = config.components.editor.colorSource;
-	const { prompt, promptWidth, rail, railWidth } = getEditorChromeWidths(config, uiTheme, reset);
-	const innerWidth = Math.max(0, width - railWidth);
-	const lowRailContinuation = " ".repeat(promptWidth);
-
 	if (baseRendered.length < 2) {
 		return { lines: clampRenderedLines(baseRendered, width), decorated: false };
 	}
@@ -584,6 +591,48 @@ function renderPolishedFrame({
 		above: parsedTop?.count,
 		below: parsedBottom?.count,
 	};
+	const lines = renderPolishedEditorFrame({
+		width,
+		editorLines,
+		autocompleteLines,
+		viewport,
+		uiTheme,
+		config,
+		modelMeta,
+		thinkingLevel,
+		rightStatus,
+		borderColor,
+	});
+	POLISHED_FRAME_SPLITS.set(lines, {
+		rows: Object.freeze([...lines]),
+		split: {
+			editorLines,
+			trailingLines: autocompleteLines,
+			viewport,
+		},
+	});
+	return { lines, decorated: true };
+}
+
+/** Pure Opencode frame composition shared by the live editor and settings preview. */
+export function renderPolishedEditorFrame({
+	width,
+	editorLines,
+	autocompleteLines = [],
+	viewport = {},
+	uiTheme,
+	config,
+	modelMeta,
+	thinkingLevel,
+	rightStatus,
+	borderColor,
+}: PolishedEditorFrameOptions): string[] {
+	if (width <= 2) return clampRenderedLines(editorLines, width);
+	const reset = "\x1b[0m";
+	const colorSource = config.components.editor.colorSource;
+	const { prompt, promptWidth, rail, railWidth } = getEditorChromeWidths(config, uiTheme, reset);
+	const innerWidth = Math.max(0, width - railWidth);
+	const lowRailContinuation = " ".repeat(promptWidth);
 	const meta = renderEditorMetadataFormat(
 		selectedPolishedConfig(config)?.metadataFormat ??
 			config.components.editor.styles.opencode.metadataFormat,
@@ -658,19 +707,7 @@ function renderPolishedFrame({
 				...autocompleteLines,
 			];
 
-	const clamped = clampRenderedLines(renderedLines, width);
-	POLISHED_FRAME_SPLITS.set(clamped, {
-		rows: Object.freeze([...clamped]),
-		split: {
-			editorLines,
-			trailingLines: autocompleteLines,
-			viewport,
-		},
-	});
-	return {
-		lines: clamped,
-		decorated: true,
-	};
+	return clampRenderedLines(renderedLines, width);
 }
 
 export class PolishedEditor extends CustomEditor {

package/extensions/zentui/working-line.ts

@@ -7,6 +7,7 @@ import type {
 	WorkingLineTextAnimation,
 	ZentuiConfig,
 } from "./config";
+import { formatCount } from "./format";
 import {
 	isSafeSgrStylePrefix,
 	isSupportedColorSpec,
@@ -561,7 +562,7 @@ export function formatWorkingLineTokens(
 	) {
 		return undefined;
 	}
-	return `↑${tokens.input} ↓${tokens.output}`;
+	return `↑${formatCount(tokens.input)} ↓${formatCount(tokens.output)}`;
 }
 
 function truncateWithEllipsis(value: string, capacity: number): string {

package/package.json

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