pi-zentui 0.21.0 → 0.22.0

package/README.md

@@ -14,14 +14,15 @@
 
 ## What is this?
 
-Zentui gives four Pi surfaces independent ownership and styling:
+Zentui gives Pi surfaces independent, opt-in treatments:
 
 - **Editor** — Opencode, Opencode copy-friendly, Accent Rail, and Minimalist input treatments
 - **User messages** — framed, framed copy-friendly, compact, and labeled transcript messages
+- **Thinking (Experimental)** — optional Rail, Tree, or Streaming private thinking renderers, without owning the Working line
 - **Working line** — optional ownership of Pi's complete in-progress row and settled turn summary
 - **Footer** — Pi's native Footer, a Starship-style statusline, or a hidden zero-row Footer
 
-Editor, User messages, Working line, and selector borders have independent `enabled` fields. Footer uses one `style`: `native`, `starship`, or `hidden`. Use `/zentui` to configure each component without coupling it to the others.
+Editor, User messages, Thinking (Experimental), Working line, and selector borders have independent `enabled` fields. Footer uses one `style`: `native`, `starship`, or `hidden`. Use `/zentui` to configure each component without coupling it to the others.
 
 ## Highlights
 
@@ -29,6 +30,7 @@ Editor, User messages, Working line, and selector borders have independent `enab
 | --- | --- | --- |
 | Editor | `opencode` | Opencode, copy-friendly, Accent Rail, Minimalist |
 | User messages | `framed` | Framed, copy-friendly, Compact, Labeled |
+| Thinking (Experimental) | disabled (`tree`) | Rail, Tree, Streaming |
 | Working line | disabled | Five spinner presets, live tool/time/thinking/token segments, turn summary |
 | Footer | `starship` | Native, Starship, Hidden |
 | Selector borders | `zentui` | Independent enablement and color source |
@@ -87,7 +89,7 @@ pi install git:github.com/lmilojevicc/pi-zentui
 
 ## Configure
 
-Run `/zentui` inside Pi to configure Appearance, Editor, User messages, Working line, Footer, Segments, Git, and Extensions. Use `Tab` and `Shift+Tab` to switch sections. Changes are applied live and saved to:
+Run `/zentui` inside Pi to configure Appearance, Editor, User messages, Thinking (Experimental), Working line, Footer, Segments, Git, and Extensions. Use `Tab` and `Shift+Tab` to switch sections. Most changes apply live; Thinking (Experimental) changes are saved and require restarting Pi. Configuration is saved to:
 
 ```text
 ~/.pi/agent/zentui.json
@@ -106,6 +108,10 @@ A small starter config:
       "enabled": true,
       "style": "framed"
     },
+    "thinkingSteps": {
+      "enabled": false,
+      "mode": "tree"
+    },
     "workingLine": {
       "enabled": false
     },
@@ -124,6 +130,8 @@ Detailed reference:
 - [Configuration, component styles, defaults, runtime detection, and compatibility](https://github.com/lmilojevicc/pi-zentui/blob/main/docs/configuration.md)
 - [Footer format template and variables](https://github.com/lmilojevicc/pi-zentui/blob/main/docs/footer-format.md)
 
+The Starship Footer path defaults to `basename`. Opt into `components.footer.styles.starship.pathDisplay.mode: "repository"` to omit the repository directory itself: the repository root renders `.`, while `/repo/extensions/zentui` renders `extensions/zentui`. `depth` keeps the final N components in `full` and `repository` modes; `0` is unlimited. Until a current, safely contained repository root is available, repository mode silently uses the unlimited `full` path with `~` home abbreviation.
+
 Useful shortcuts:
 
 ```text
@@ -136,6 +144,12 @@ Useful shortcuts:
 /zentui format clear
 ```
 
+**Thinking (Experimental)** uses one restart-gated private `AssistantMessageComponent` renderer for Rail, Tree, and Streaming, tested against exact Pi versions 0.80.5, 0.83.0, 0.84.0, and 0.84.4. It is disabled by default and may break after Pi updates. Every enable, disable, or mode change is saved but does not alter the active startup snapshot; restart Pi to apply it. Zentui installs an enabled startup snapshot before transcript restoration. Missing constructors, incompatible child layouts, parser limits, theme/render/width errors, or displaced patch ownership fail open to complete native thinking rather than switching modes.
+
+Rail shows every parsed label in each native contiguous thinking run (`│ Label`, with only the open final phase shown as `│ • Label`). Tree independently shows the latest five labels in each run (`├─ · Label`, settled `└─ · Label`, open `└─ • Label`); it never aggregates across intervening text or tool blocks. Labels are rendered by fresh host-shaped Pi Markdown instances before cropping, so emphasis, code, links, HTML, LaTeX, custom transforms, and native `thinkingText` styling remain host-controlled. Every label occupies one terminal row: ANSI/OSC/grapheme-aware cropping adds `…` only when needed. Native horizontal padding stays external. Connectors are styled directly with the current theme's `accent` callback on every render, so custom themes control them independently. Hidden native thinking remains hidden and keeps Pi's native hidden label.
+
+Streaming retains Pi's host-rendered final five rows under `Thinking 7.1s`, folds completed reasoning under `Thought` or current-session `Thought for 12.3s`, and owns the configured thinking-toggle binding (Ctrl+T by default) only for an active Streaming startup. Restored completions cannot recover a duration because Pi does not persist the thinking-end timestamp. Expand/refold and lifecycle tracking are bounded to 256 retained assistant components; evicted entries are first restored natively. All modes restore/dispose on shutdown. Thinking (Experimental) never writes the Working line and does not change its existing **Thinking time** option, working text, Footer, Editor, statuses, or model behavior.
+
 Pi 0.84 also provides a native fullscreen TUI with a sticky editor and Footer. Zentui does not enable it automatically; select fullscreen from Pi's `/settings`, set `"tuiMode": "fullscreen"` in Pi settings, or launch Pi with `--tui-mode fullscreen`.
 
 ## Requirements

package/extensions/zentui/config.ts

@@ -46,6 +46,7 @@ export type WorkingLineSpinner =
 	| "claude-inspired"
 	| "pulse";
 export type WorkingLineTextAnimation = "classic" | "kitt" | "disabled";
+export type ThinkingStepsMode = "rail" | "tree" | "streaming";
 export type ComponentStyleOwner = "editor" | "userMessages" | "selectorBorders" | "footer";
 export type MinimalistPathDisplayMode = "compact" | "project" | "full";
 export type MinimalistContextFormat = "percent" | "percent-total";
@@ -61,11 +62,11 @@ export type ContextThresholds = {
 	error: number;
 };
 
-export type PathDisplayMode = "basename" | "full";
+export type PathDisplayMode = "basename" | "full" | "repository";
 
 export type PathDisplayConfig = {
 	mode: PathDisplayMode;
-	/** Trailing directories to show in full mode. 0 = unlimited; clamped to 0..5. */
+	/** Final components to show in full/repository mode. 0 = unlimited; clamped to 0..5. */
 	depth: number;
 };
 
@@ -250,9 +251,15 @@ export type WorkingLineComponentPatch = Partial<
 	segments?: Partial<WorkingLineSegmentsConfig>;
 };
 
+export type ThinkingStepsComponentConfig = {
+	enabled: boolean;
+	mode: ThinkingStepsMode;
+};
+
 export type ComponentsConfig = {
 	editor: EditorComponentConfig;
 	userMessages: UserMessagesComponentConfig;
+	thinkingSteps: ThinkingStepsComponentConfig;
 	workingLine: WorkingLineComponentConfig;
 	selectorBorders: SelectorBordersComponentConfig;
 	footer: FooterComponentConfig;
@@ -500,6 +507,7 @@ const defaultComponents: ComponentsConfig = {
 		colorSource: "theme",
 		styles: { framed: {}, "framed-copy-friendly": {}, compact: {}, labeled: {} },
 	},
+	thinkingSteps: { enabled: false, mode: "tree" },
 	workingLine: {
 		enabled: false,
 		turnSummary: true,
@@ -665,7 +673,10 @@ function parseContextThresholds(
 function parsePathDisplay(value: unknown): PathDisplayConfig {
 	const defaults = defaultConfig.pathDisplay;
 	if (!isRecord(value)) return { ...defaults };
-	const mode = value.mode === "full" || value.mode === "basename" ? value.mode : defaults.mode;
+	const mode =
+		value.mode === "full" || value.mode === "basename" || value.mode === "repository"
+			? value.mode
+			: defaults.mode;
 	const rawDepth = value.depth;
 	const depth =
 		typeof rawDepth === "number" && Number.isFinite(rawDepth) && rawDepth >= 0
@@ -1188,6 +1199,7 @@ function resolveComponents(config: ConfigRecord): ComponentsConfig {
 	const userMessages = recordValue(components.userMessages);
 	const userMessageStyles = recordValue(userMessages.styles);
 	const framed = recordValue(userMessageStyles.framed);
+	const thinkingSteps = recordValue(components.thinkingSteps);
 	const workingLine = recordValue(components.workingLine);
 	const workingLineMessages = recordValue(workingLine.messages);
 	const workingLineSegments = recordValue(workingLine.segments);
@@ -1295,6 +1307,15 @@ function resolveComponents(config: ConfigRecord): ComponentsConfig {
 				labeled: {},
 			},
 		},
+		thinkingSteps: {
+			enabled: parseBoolean(thinkingSteps.enabled, defaultComponents.thinkingSteps.enabled),
+			mode:
+				thinkingSteps.mode === "rail" || thinkingSteps.mode === "tree"
+					? thinkingSteps.mode
+					: thinkingSteps.mode === "streaming" || thinkingSteps.mode === "streaming-experimental"
+						? "streaming"
+						: defaultComponents.thinkingSteps.mode,
+		},
 		workingLine: {
 			enabled: parseBoolean(workingLine.enabled, defaultComponents.workingLine.enabled),
 			turnSummary: parseBoolean(workingLine.turnSummary, defaultComponents.workingLine.turnSummary),
@@ -1734,6 +1755,17 @@ export function saveUserMessagesComponentPatch(
 	);
 }
 
+export function saveThinkingStepsComponentPatch(
+	patch: Partial<ThinkingStepsComponentConfig>,
+	path = configPath,
+): PolishedTuiConfig {
+	return saveComponentsMutation((components) => {
+		const component = components.thinkingSteps;
+		if (patch.enabled !== undefined) component.enabled = patch.enabled;
+		if (patch.mode !== undefined) component.mode = patch.mode;
+	}, path);
+}
+
 export function saveWorkingLineComponentPatch(
 	patch: WorkingLineComponentPatch,
 	path = configPath,

package/extensions/zentui/editor-metadata-format.ts

@@ -1,6 +1,7 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import type { ZentuiConfig } from "./config";
 import { type FormatToken, parseFooterFormat } from "./footer-format";
+import { buildSessionTokenLabel, formatCacheHitRate, formatContextPercentLabel } from "./format";
 import { EDITOR_ACCENT_FALLBACK, renderStyleForSourceOrFallback, safeThemeFg } from "./style";
 
 export type EditorMetadataValues = {
@@ -10,6 +11,11 @@ export type EditorMetadataValues = {
 	provider: string;
 	thinking: string;
 	sessionName: string;
+	contextPercent?: number;
+	contextWindow?: number;
+	inputTokens?: number;
+	outputTokens?: number;
+	cacheHitRate?: number;
 };
 
 type RenderedTokens = {
@@ -18,6 +24,12 @@ type RenderedTokens = {
 	hasNonEmptyDynamic: boolean;
 };
 
+export type EditorMetadataZones = {
+	left: string;
+	middle: string;
+	right: string;
+};
+
 const ESC = 0x1b;
 const BEL = 0x07;
 const CAN = 0x18;
@@ -164,7 +176,16 @@ function renderVariable(
 							? thinking
 							: name === "session_name"
 								? values.sessionName
-								: "";
+								: name === "context"
+									? formatContextPercentLabel(values.contextPercent, values.contextWindow)
+									: name === "tokens"
+										? buildSessionTokenLabel({
+												input: values.inputTokens ?? 0,
+												output: values.outputTokens ?? 0,
+											})
+										: name === "cache_hit"
+											? formatCacheHitRate(values.cacheHitRate)
+											: "";
 	const plain = sanitizeEditorMetadataText(raw);
 	if (!plain) return { plain: "", styled: "" };
 
@@ -204,7 +225,7 @@ function renderVariable(
 			),
 		};
 	}
-	if (name === "session_name") {
+	if (name === "session_name" || name === "context" || name === "tokens" || name === "cache_hit") {
 		return { plain, styled: safeThemeFg(uiTheme, "border", plain) };
 	}
 	return { plain: "", styled: "" };
@@ -250,6 +271,41 @@ function renderTokens(
 	return { styled, hasDynamic, hasNonEmptyDynamic };
 }
 
+export function renderEditorMetadataFormatSplit(
+	format: string,
+	values: EditorMetadataValues,
+	uiTheme: Theme,
+	config: ZentuiConfig,
+): EditorMetadataZones {
+	const tokens = parseFooterFormat(sanitizeEditorMetadataText(format));
+	const fillIndices: number[] = [];
+	for (let index = 0; index < tokens.length; index++) {
+		if (tokens[index]?.kind === "fill") fillIndices.push(index);
+	}
+
+	const first = fillIndices[0];
+	const second = fillIndices[1];
+	if (first === undefined) {
+		return {
+			left: renderTokens(tokens, values, uiTheme, config).styled,
+			middle: "",
+			right: "",
+		};
+	}
+	if (second === undefined) {
+		return {
+			left: renderTokens(tokens.slice(0, first), values, uiTheme, config).styled,
+			middle: "",
+			right: renderTokens(tokens.slice(first + 1), values, uiTheme, config).styled,
+		};
+	}
+	return {
+		left: renderTokens(tokens.slice(0, first), values, uiTheme, config).styled,
+		middle: renderTokens(tokens.slice(first + 1, second), values, uiTheme, config).styled,
+		right: renderTokens(tokens.slice(second + 1), values, uiTheme, config).styled,
+	};
+}
+
 export function renderEditorMetadataFormat(
 	format: string,
 	values: EditorMetadataValues,

package/extensions/zentui/footer.ts

@@ -35,6 +35,7 @@ import {
 	formatRuntimeSegment,
 	formatTimeLabel,
 	formatUsernameHostLabel,
+	resolveContextUsage,
 } from "./format";
 import { resolveRuntimeSymbol } from "./icons";
 import type { LiveContextOverride } from "./live-context";
@@ -187,6 +188,7 @@ export function installFooter(
 		scheduleProjectRefresh: (ctx: ExtensionContext) => void;
 		setExtensionStatusesGetter?: (fn: (() => ReadonlyMap<string, string>) | undefined) => void;
 		getLiveContext?: () => LiveContextOverride | undefined;
+		getRepositoryRoot?: (cwd: string) => string | undefined;
 		onDispose?: () => void;
 	},
 ): void {
@@ -227,10 +229,13 @@ export function installFooter(
 				);
 				const colorSource = config.components.footer.colorSource;
 				const iconMode = config.icons.mode;
+				const pathDisplay = config.components.footer.styles.starship.pathDisplay;
 				const formattedCwd = sanitizeEditorMetadataText(
 					formatCwdLabel(ctx.cwd, config.icons.cwd, {
-						mode: config.components.footer.styles.starship.pathDisplay.mode,
-						depth: config.components.footer.styles.starship.pathDisplay.depth,
+						mode: pathDisplay.mode,
+						depth: pathDisplay.depth,
+						repositoryRoot:
+							pathDisplay.mode === "repository" ? hooks.getRepositoryRoot?.(ctx.cwd) : undefined,
 					}),
 				);
 				const branch = sanitizeEditorMetadataText(state.branch ?? "") || undefined;
@@ -282,14 +287,10 @@ export function installFooter(
 							config.components.footer.styles.starship.gitBranch.maxLength,
 						)
 					: undefined;
-				const contextUsage = ctx.getContextUsage();
-				const liveContext = hooks.getLiveContext?.();
-				const contextWindow = ctx.model?.contextWindow ?? contextUsage?.contextWindow;
-				const useLiveContext =
-					liveContext !== undefined && contextWindow !== undefined && contextWindow > 0;
-				const contextPercent = useLiveContext
-					? (liveContext.tokens / contextWindow) * 100
-					: contextUsage?.percent;
+				const { percent: contextPercent, contextWindow } = resolveContextUsage(
+					ctx,
+					hooks.getLiveContext?.(),
+				);
 				const contextLabel = buildContextDisplayLabel({
 					percent: contextPercent,
 					contextWindow,
@@ -731,18 +732,7 @@ export function installFooter(
 				if (reflowed) return frameRows(reflowed);
 
 				const chunkBudget = compactChunkBudget(innerWidth);
-				const compactCwdLabel = truncateToWidth(
-					renderStyleForSource(
-						theme,
-						colorSource,
-						config.colors.cwd,
-						sanitizeEditorMetadataText(
-							formatCwdLabel(ctx.cwd, config.icons.cwd, { mode: "basename", depth: 0 }),
-						),
-					),
-					chunkBudget,
-					"…",
-				);
+				const compactCwdLabel = truncateToWidth(cwdLabel, chunkBudget, "…");
 				const compactSessionNameLabel = truncateToWidth(
 					sessionNameLabel,
 					Math.max(1, chunkBudget - visibleWidth("in ")),

package/extensions/zentui/format.ts

@@ -294,17 +294,24 @@ export function buildCacheWriteLabel(cacheWrite: number): string {
 	return cacheWrite > 0 ? `W${formatCount(cacheWrite)}` : "";
 }
 
-export function buildTokenLabel(totals: UsageTotals, cacheHitIcon = "󰆼"): string {
+export function buildSessionTokenLabel(totals: Pick<UsageTotals, "input" | "output">): string {
 	const parts: string[] = [];
 	if (totals.input) parts.push(`↑${formatCount(totals.input)}`);
 	if (totals.output) parts.push(`↓${formatCount(totals.output)}`);
+	return parts.length > 0 ? parts.join(" ") : "↑0 ↓0";
+}
 
+export function formatCacheHitRate(rate: number | undefined): string {
+	return `${rate !== undefined && Number.isFinite(rate) ? rate.toFixed(1) : "0.0"}%`;
+}
+
+export function buildTokenLabel(totals: UsageTotals, cacheHitIcon = "󰆼"): string {
+	const tokenLabel = buildSessionTokenLabel(totals);
 	const hasCacheTokens = totals.cacheRead > 0 || totals.cacheWrite > 0;
-	if (hasCacheTokens && totals.latestCacheHitRate !== undefined) {
-		const cacheHitRate = `${totals.latestCacheHitRate.toFixed(1)}%`;
-		parts.push(cacheHitIcon ? `${cacheHitIcon} ${cacheHitRate}` : cacheHitRate);
-	}
-	return parts.length > 0 ? parts.join(" ") : "↑0 ↓0";
+	if (!hasCacheTokens || totals.latestCacheHitRate === undefined) return tokenLabel;
+
+	const cacheHitRate = formatCacheHitRate(totals.latestCacheHitRate);
+	return `${tokenLabel} ${cacheHitIcon ? `${cacheHitIcon} ` : ""}${cacheHitRate}`;
 }
 
 export function buildCostLabel(totals: UsageTotals): string {
@@ -372,10 +379,29 @@ export function buildContextDisplayLabel(options: {
 	return text;
 }
 
-export function buildContextLabel(ctx: ExtensionContext): string {
+export type ContextUsageSnapshot = {
+	percent: number | undefined;
+	contextWindow: number | undefined;
+};
+
+export function resolveContextUsage(
+	ctx: Pick<ExtensionContext, "model" | "getContextUsage">,
+	live?: { tokens: number },
+): ContextUsageSnapshot {
 	const usage = ctx.getContextUsage();
 	const contextWindow = ctx.model?.contextWindow ?? usage?.contextWindow;
-	return formatContextPercentLabel(usage?.percent, contextWindow);
+	return {
+		percent:
+			live && contextWindow && contextWindow > 0
+				? (live.tokens / contextWindow) * 100
+				: (usage?.percent ?? undefined),
+		contextWindow,
+	};
+}
+
+export function buildContextLabel(ctx: ExtensionContext): string {
+	const { percent, contextWindow } = resolveContextUsage(ctx);
+	return formatContextPercentLabel(percent, contextWindow);
 }
 
 export function formatRuntimeSegment(
@@ -417,9 +443,10 @@ export function formatPackageVersionSegment(
 
 export type FormatCwdOptions = {
 	mode?: PathDisplayMode;
-	/** Trailing directory components to keep in full mode. 0 = unlimited. */
+	/** Final path components to keep in full/repository mode. 0 = unlimited. */
 	depth?: number;
 	home?: string;
+	repositoryRoot?: string;
 };
 
 function normalizeDisplayPath(cwd: string): string {
@@ -462,8 +489,7 @@ function applyPathDepth(path: string, depth: number): string {
 export function formatCwdLabel(cwd: string, cwdIcon: string, options?: FormatCwdOptions): string {
 	const mode = options?.mode ?? "basename";
 	const normalized = normalizeDisplayPath(cwd);
-	let pathText: string;
-	if (mode === "full") {
+	const fullPath = (depth = options?.depth ?? 0) => {
 		const home =
 			options?.home ??
 			(() => {
@@ -473,7 +499,25 @@ export function formatCwdLabel(cwd: string, cwdIcon: string, options?: FormatCwd
 					return "";
 				}
 			})();
-		pathText = applyPathDepth(toHomePath(normalized, home), options?.depth ?? 0);
+		return applyPathDepth(toHomePath(normalized, home), depth);
+	};
+	let pathText: string;
+	if (mode === "full") {
+		pathText = fullPath();
+	} else if (mode === "repository") {
+		const root = options?.repositoryRoot ? normalizeDisplayPath(options.repositoryRoot) : undefined;
+		if (!root) {
+			pathText = fullPath(0);
+		} else {
+			const rootPrefix = root === "/" ? "/" : `${root}/`;
+			if (normalized !== root && !normalized.startsWith(rootPrefix)) {
+				// Unsafe roots fail open to the existing unlimited full path.
+				pathText = fullPath(0);
+			} else {
+				const relative = normalized === root ? "." : normalized.slice(rootPrefix.length);
+				pathText = relative === "." ? relative : applyPathDepth(relative, options?.depth ?? 0);
+			}
+		}
 	} else if (normalized === "/") {
 		pathText = "/";
 	} else {