pi-zentui 0.1.6 → 0.1.8

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/config.ts

@@ -39,59 +39,11 @@ export type PolishedTuiConfig = {
 
 export const configPath = join(getAgentDir(), "zentui.json");
 
-const themeColorTokens = new Set([
-	"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",
-]);
-
 export const defaultConfig: PolishedTuiConfig = {
 	projectRefreshIntervalMs: DEFAULT_PROJECT_REFRESH_INTERVAL_MS,
 	icons: {
 		cwd: "󰝰",
-		git: "",
+		git: "",
 		ahead: "↑",
 		behind: "↓",
 		diverged: "⇕",
@@ -117,62 +69,6 @@ export const defaultConfig: PolishedTuiConfig = {
 	},
 };
 
-function isHexColor(value: string): boolean {
-	return /^#(?:[0-9a-fA-F]{6})$/.test(value);
-}
-
-function hexToAnsi(hex: string, isBackground = false): string {
-	const normalized = hex.slice(1);
-	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],
-]);
-
-function terminalColorToAnsi(color: string): string | undefined {
-	const normalized = color.toLowerCase();
-	const colorCode = terminalColorCodes.get(normalized);
-	if (colorCode !== undefined) return `${colorCode}`;
-
-	if (/^(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/.test(normalized)) {
-		return `38;5;${normalized}`;
-	}
-
-	if (isHexColor(normalized)) return hexToAnsi(normalized).slice(2, -1);
-	return undefined;
-}
-
-type ThemeLike = {
-	fg(color: string, text: string): string;
-};
-
 type ConfigRecord = Record<string, unknown>;
 
 function isRecord(value: unknown): value is ConfigRecord {
@@ -191,36 +87,6 @@ function parseProjectRefreshIntervalMs(value: unknown): number {
 		: defaultConfig.projectRefreshIntervalMs;
 }
 
-export function colorize(theme: ThemeLike, color: ColorSpec, text: string): string {
-	if (themeColorTokens.has(color)) {
-		return theme.fg(color, text);
-	}
-	if (isHexColor(color)) {
-		return `${hexToAnsi(color)}${text}\x1b[39m`;
-	}
-	return theme.fg("text", text);
-}
-
-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 foreground = normalized.startsWith("fg:") ? normalized.slice(3) : normalized;
-		const color = terminalColorToAnsi(foreground);
-		if (color) codes.push(color);
-	}
-
-	return codes.length ? `\x1b[${codes.join(";")}m${text}\x1b[0m` : text;
-}
-
 export function ensureConfigExists(): void {
 	try {
 		if (!existsSync(configPath)) {

package/extensions/zentui/footer.ts

@@ -0,0 +1,97 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { PolishedTuiConfig } from "./config";
+import { formatCwdLabel, formatRuntimeSegment } from "./format";
+import type { FooterState } from "./state";
+import { colorize } from "./style";
+
+export function installFooter(
+	ctx: ExtensionContext,
+	state: FooterState,
+	config: PolishedTuiConfig,
+	hooks: {
+		setRequestRender: (fn: (() => void) | undefined) => void;
+		scheduleProjectRefresh: (ctx: ExtensionContext) => void;
+	},
+): void {
+	ctx.ui.setFooter((tui, theme, footerData) => {
+		hooks.setRequestRender(() => tui.requestRender());
+		const unsubscribeBranch = footerData.onBranchChange(() => {
+			hooks.scheduleProjectRefresh(ctx);
+			tui.requestRender();
+		});
+		const separator = colorize(theme, config.colors.separator, " | ");
+
+		return {
+			dispose: () => {
+				unsubscribeBranch();
+				hooks.setRequestRender(undefined);
+			},
+			invalidate() {},
+			render(width: number): string[] {
+				if (width <= 0) return [""];
+				const innerWidth = Math.max(1, width - 2);
+				const cwdLabel = colorize(
+					theme,
+					config.colors.cwdText,
+					formatCwdLabel(ctx.cwd, config.icons.cwd),
+				);
+				const branch = state.branch;
+				const contextUsage = ctx.getContextUsage();
+				const contextColor =
+					contextUsage?.percent !== null && contextUsage?.percent !== undefined
+						? contextUsage.percent >= 90
+							? config.colors.contextError
+							: contextUsage.percent >= 70
+								? config.colors.contextWarning
+								: config.colors.contextNormal
+						: config.colors.contextNormal;
+				const gitColor = (text: string) => colorize(theme, config.colors.git, text);
+				const gitStatusColor = (text: string) => colorize(theme, config.colors.gitStatus, text);
+				const gitIcon = gitColor(config.icons.git);
+				const allStatus = [
+					state.conflicted > 0 ? config.icons.conflicted : "",
+					state.stashed ? config.icons.stashed : "",
+					state.deleted > 0 ? config.icons.deleted : "",
+					state.renamed > 0 ? config.icons.renamed : "",
+					state.modified > 0 ? config.icons.modified : "",
+					state.typechanged > 0 ? config.icons.typechanged : "",
+					state.staged > 0 ? config.icons.staged : "",
+					state.untracked > 0 ? config.icons.untracked : "",
+				].join("");
+				const aheadBehind =
+					state.ahead > 0 && state.behind > 0
+						? config.icons.diverged
+						: state.ahead > 0
+							? config.icons.ahead
+							: state.behind > 0
+								? config.icons.behind
+								: "";
+				const statusBlock =
+					allStatus || aheadBehind ? gitStatusColor(`[${allStatus}${aheadBehind}]`) : "";
+				const branchLabel = branch
+					? `${colorize(theme, "text", "on")} ${gitIcon} ${gitColor(branch)}${statusBlock ? ` ${statusBlock}` : ""}`
+					: "";
+				const runtimeLabel = formatRuntimeSegment(theme, state.runtime, "text");
+
+				const left = [cwdLabel, branchLabel, runtimeLabel].filter(Boolean).join(" ");
+				const right = [
+					colorize(theme, contextColor, state.contextLabel),
+					colorize(theme, config.colors.tokens, state.tokenLabel),
+					colorize(theme, config.colors.cost, state.costLabel),
+				].join(separator);
+
+				const leftWidth = visibleWidth(left);
+				const rightWidth = visibleWidth(right);
+				const content =
+					leftWidth >= innerWidth
+						? truncateToWidth(left, innerWidth, "")
+						: leftWidth + 1 + rightWidth <= innerWidth
+							? `${left}${" ".repeat(innerWidth - leftWidth - rightWidth)}${right}`
+							: truncateToWidth(left, innerWidth, "");
+				const framed = width > 2 ? ` ${truncateToWidth(content, width - 2, "")} ` : content;
+				return [truncateToWidth(framed, width, "")];
+			},
+		};
+	});
+}

package/extensions/zentui/format.ts

@@ -0,0 +1,85 @@
+import type { AssistantMessage } from "@earendil-works/pi-ai";
+import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import type { RuntimeInfo } from "./runtime";
+import { type ThemeLike, colorize, renderTerminalStyle } from "./style";
+
+export type UsageTotals = {
+	input: number;
+	output: number;
+	cost: number;
+};
+
+export function formatCount(value: number): string {
+	if (value < 1000) return `${value}`;
+	if (value < 10_000) return `${(value / 1000).toFixed(1)}k`;
+	return `${Math.round(value / 1000)}k`;
+}
+
+export function formatProviderLabel(provider: string | undefined): string {
+	if (!provider) return "Unknown";
+
+	const known: Record<string, string> = {
+		anthropic: "Anthropic",
+		gemini: "Google",
+		google: "Google",
+		ollama: "Ollama",
+		openai: "OpenAI",
+		"openai-codex": "OpenAI",
+	};
+
+	return (
+		known[provider] ?? provider.replace(/[-_]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase())
+	);
+}
+
+export function getUsageTotals(ctx: ExtensionContext): UsageTotals {
+	let input = 0;
+	let output = 0;
+	let cost = 0;
+
+	for (const entry of ctx.sessionManager.getBranch()) {
+		if (entry.type !== "message" || entry.message.role !== "assistant") continue;
+		const message = entry.message as AssistantMessage;
+		input += message.usage?.input ?? 0;
+		output += message.usage?.output ?? 0;
+		cost += message.usage?.cost?.total ?? 0;
+	}
+
+	return { input, output, cost };
+}
+
+export function buildTokenLabel(totals: UsageTotals): string {
+	return `↑${formatCount(totals.input)} ↓${formatCount(totals.output)}`;
+}
+
+export function buildCostLabel(totals: UsageTotals): string {
+	return `$${totals.cost.toFixed(3)}`;
+}
+
+export function buildContextLabel(ctx: ExtensionContext): string {
+	const usage = ctx.getContextUsage();
+	const contextWindow = ctx.model?.contextWindow ?? usage?.contextWindow;
+
+	if (!usage || !contextWindow || contextWindow <= 0) return "--";
+
+	const percent =
+		usage.percent === null ? "?" : `${Math.max(0, Math.min(999, Math.round(usage.percent)))}%`;
+	return `${percent}/${formatCount(contextWindow)}`;
+}
+
+export function formatRuntimeSegment(
+	theme: Pick<Theme, "fg">,
+	runtime: RuntimeInfo | undefined,
+	mutedColor: string,
+): string {
+	if (!runtime) return "";
+	const label = runtime.version ? `${runtime.symbol} ${runtime.version}` : runtime.symbol;
+	return `${colorize(theme, mutedColor, "via")} ${renderTerminalStyle(runtime.style, label)}`;
+}
+
+export function formatCwdLabel(cwd: string, cwdIcon: string): string {
+	const normalized = cwd.replace(/\\/g, "/").replace(/\/+$/, "");
+	const parts = normalized.split("/").filter(Boolean);
+	const last = parts[parts.length - 1] ?? cwd;
+	return cwdIcon ? `${cwdIcon} ${last}` : last;
+}

package/extensions/zentui/index.ts

@@ -1,159 +1,31 @@
-import type { AssistantMessage } from "@earendil-works/pi-ai";
 import type {
 	ExtensionAPI,
 	ExtensionContext,
 	KeybindingsManager,
 	Theme,
 } from "@earendil-works/pi-coding-agent";
-import { type EditorTheme, type TUI, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import {
-	type PolishedTuiConfig,
-	colorize,
-	ensureConfigExists,
-	loadConfig,
-	renderTerminalStyle,
-} from "./config";
-import { type GitStatusSummary, emptyGitStatus, readGitStatus } from "./git";
+import type { EditorTheme, TUI } from "@earendil-works/pi-tui";
+import { type PolishedTuiConfig, ensureConfigExists, loadConfig } from "./config";
+import { installFooter } from "./footer";
+import { emptyGitStatus, readGitStatus } from "./git";
 import { type StopProjectRefreshInterval, startProjectRefreshInterval } from "./project-refresh";
-import { type RuntimeInfo, readRuntimeInfo } from "./runtime";
+import { readRuntimeInfo } from "./runtime";
+import { type FooterState, createInitialState, syncState } from "./state";
 import { PolishedEditor } from "./ui";
-
-type FooterState = GitStatusSummary & {
-	modelLabel: string;
-	providerLabel: string;
-	contextLabel: string;
-	tokenLabel: string;
-	costLabel: string;
-	runtime?: RuntimeInfo;
-};
-
-type UsageTotals = {
-	input: number;
-	output: number;
-	cost: number;
-};
-
-function formatCount(value: number): string {
-	if (value < 1000) return `${value}`;
-	if (value < 10_000) return `${(value / 1000).toFixed(1)}k`;
-	return `${Math.round(value / 1000)}k`;
-}
-
-function formatProviderLabel(provider: string | undefined): string {
-	if (!provider) return "Unknown";
-
-	const known: Record<string, string> = {
-		anthropic: "Anthropic",
-		gemini: "Google",
-		google: "Google",
-		ollama: "Ollama",
-		openai: "OpenAI",
-		"openai-codex": "OpenAI",
-	};
-
-	return (
-		known[provider] ?? provider.replace(/[-_]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase())
-	);
-}
-
-function getUsageTotals(ctx: ExtensionContext): UsageTotals {
-	let input = 0;
-	let output = 0;
-	let cost = 0;
-
-	for (const entry of ctx.sessionManager.getBranch()) {
-		if (entry.type !== "message" || entry.message.role !== "assistant") continue;
-		const message = entry.message as AssistantMessage;
-		input += message.usage?.input ?? 0;
-		output += message.usage?.output ?? 0;
-		cost += message.usage?.cost?.total ?? 0;
-	}
-
-	return { input, output, cost };
-}
-
-function buildTokenLabel(totals: UsageTotals): string {
-	return `↑${formatCount(totals.input)} ↓${formatCount(totals.output)}`;
-}
-
-function buildCostLabel(totals: UsageTotals): string {
-	return `$${totals.cost.toFixed(3)}`;
-}
-
-function buildContextLabel(ctx: ExtensionContext): string {
-	const usage = ctx.getContextUsage();
-	const contextWindow = ctx.model?.contextWindow ?? usage?.contextWindow;
-
-	if (!usage || !contextWindow || contextWindow <= 0) return "--";
-
-	const percent =
-		usage.percent === null ? "?" : `${Math.max(0, Math.min(999, Math.round(usage.percent)))}%`;
-	return `${percent}/${formatCount(contextWindow)}`;
-}
-
-function formatRuntimeSegment(
-	theme: Pick<Theme, "fg">,
-	runtime: RuntimeInfo | undefined,
-	mutedColor: string,
-): string {
-	if (!runtime) return "";
-	const label = runtime.version ? `${runtime.symbol} ${runtime.version}` : runtime.symbol;
-	return `${colorize(theme, mutedColor, "via")} ${renderTerminalStyle(runtime.style, label)}`;
-}
-
-function formatCwdLabel(cwd: string, cwdIcon: string): string {
-	const normalized = cwd.replace(/\\/g, "/").replace(/\/+$/, "");
-	const parts = normalized.split("/").filter(Boolean);
-	const last = parts[parts.length - 1] ?? cwd;
-	return cwdIcon ? `${cwdIcon} ${last}` : last;
-}
+import { installUserMessageStyle } from "./user-message";
 
 export default function (pi: ExtensionAPI) {
-	const state: FooterState = {
-		modelLabel: "no-model",
-		providerLabel: "Unknown",
-		contextLabel: "--",
-		tokenLabel: "↑0 ↓0",
-		costLabel: "$0.000",
-		runtime: undefined,
-		...emptyGitStatus(),
-	};
+	const state: FooterState = createInitialState(emptyGitStatus());
 
 	let currentConfig: PolishedTuiConfig = loadConfig();
+	let activeTheme: Theme | undefined;
 	let requestFooterRender: (() => void) | undefined;
-	let stopProjectRefreshInterval: StopProjectRefreshInterval = () => {};
+	let stopRefreshInterval: StopProjectRefreshInterval = () => {};
 	let projectRefreshInFlight = false;
 	let projectRefreshPending = false;
 
 	const refresh = () => requestFooterRender?.();
-
-	const cleanupUi = (ctx?: ExtensionContext) => {
-		stopProjectRefreshInterval();
-		stopProjectRefreshInterval = () => {};
-		projectRefreshInFlight = false;
-		projectRefreshPending = false;
-		requestFooterRender = undefined;
-		if (ctx?.hasUI) {
-			ctx.ui.setFooter(undefined);
-			ctx.ui.setEditorComponent(undefined);
-		}
-	};
-
-	const refreshInteractiveState = (ctx: ExtensionContext, project = false) => {
-		if (!ctx.hasUI) return;
-		syncState(ctx);
-		if (project) scheduleProjectRefresh(ctx);
-		refresh();
-	};
-
-	const syncState = (ctx: ExtensionContext) => {
-		const totals = getUsageTotals(ctx);
-		state.modelLabel = ctx.model?.id ?? "no-model";
-		state.providerLabel = formatProviderLabel(ctx.model?.provider);
-		state.contextLabel = buildContextLabel(ctx);
-		state.tokenLabel = buildTokenLabel(totals);
-		state.costLabel = buildCostLabel(totals);
-	};
+	const getActiveTheme = () => activeTheme;
 
 	const refreshProjectState = async (ctx: ExtensionContext) => {
 		const [gitStatus, runtime] = await Promise.all([
@@ -181,127 +53,66 @@ export default function (pi: ExtensionAPI) {
 		});
 	};
 
-	const installFooter = (ctx: ExtensionContext) => {
-		syncState(ctx);
-
-		ctx.ui.setFooter((tui, theme, footerData) => {
-			requestFooterRender = () => tui.requestRender();
-			const unsubscribeBranch = footerData.onBranchChange(() => {
-				scheduleProjectRefresh(ctx);
-				tui.requestRender();
-			});
-			const separator = colorize(theme, currentConfig.colors.separator, " | ");
-
-			return {
-				dispose: () => {
-					unsubscribeBranch();
-					requestFooterRender = undefined;
-				},
-				invalidate() {},
-				render(width: number): string[] {
-					if (width <= 0) return [""];
-					const innerWidth = Math.max(1, width - 2);
-					const cwdLabel = colorize(
-						theme,
-						currentConfig.colors.cwdText,
-						formatCwdLabel(ctx.cwd, currentConfig.icons.cwd),
-					);
-					const branch = state.branch;
-					const contextUsage = ctx.getContextUsage();
-					const contextColor =
-						contextUsage?.percent !== null && contextUsage?.percent !== undefined
-							? contextUsage.percent >= 90
-								? currentConfig.colors.contextError
-								: contextUsage.percent >= 70
-									? currentConfig.colors.contextWarning
-									: currentConfig.colors.contextNormal
-							: currentConfig.colors.contextNormal;
-					const gitColor = (text: string) => colorize(theme, currentConfig.colors.git, text);
-					const gitStatusColor = (text: string) =>
-						colorize(theme, currentConfig.colors.gitStatus, text);
-					const gitIcon = gitColor(currentConfig.icons.git);
-					const allStatus = [
-						state.conflicted > 0 ? currentConfig.icons.conflicted : "",
-						state.stashed ? currentConfig.icons.stashed : "",
-						state.deleted > 0 ? currentConfig.icons.deleted : "",
-						state.renamed > 0 ? currentConfig.icons.renamed : "",
-						state.modified > 0 ? currentConfig.icons.modified : "",
-						state.typechanged > 0 ? currentConfig.icons.typechanged : "",
-						state.staged > 0 ? currentConfig.icons.staged : "",
-						state.untracked > 0 ? currentConfig.icons.untracked : "",
-					].join("");
-					const aheadBehind =
-						state.ahead > 0 && state.behind > 0
-							? currentConfig.icons.diverged
-							: state.ahead > 0
-								? currentConfig.icons.ahead
-								: state.behind > 0
-									? currentConfig.icons.behind
-									: "";
-					const statusBlock =
-						allStatus || aheadBehind ? gitStatusColor(`[${allStatus}${aheadBehind}]`) : "";
-					const branchLabel = branch
-						? `${colorize(theme, "text", "on")} ${gitIcon} ${gitColor(branch)}${statusBlock ? ` ${statusBlock}` : ""}`
-						: "";
-					const runtimeLabel = formatRuntimeSegment(theme, state.runtime, "text");
-
-					const left = [cwdLabel, branchLabel, runtimeLabel].filter(Boolean).join(" ");
-					const right = [
-						colorize(theme, contextColor, state.contextLabel),
-						colorize(theme, currentConfig.colors.tokens, state.tokenLabel),
-						colorize(theme, currentConfig.colors.cost, state.costLabel),
-					].join(separator);
-
-					const leftWidth = visibleWidth(left);
-					const rightWidth = visibleWidth(right);
-					const content =
-						leftWidth >= innerWidth
-							? truncateToWidth(left, innerWidth, "")
-							: leftWidth + 1 + rightWidth <= innerWidth
-								? `${left}${" ".repeat(innerWidth - leftWidth - rightWidth)}${right}`
-								: truncateToWidth(left, innerWidth, "");
-					const framed = width > 2 ? ` ${truncateToWidth(content, width - 2, "")} ` : content;
-					return [truncateToWidth(framed, width, "")];
-				},
-			};
-		});
+	const refreshInteractiveState = (ctx: ExtensionContext, project = false) => {
+		if (!ctx.hasUI) return;
+		syncState(state, ctx);
+		if (project) scheduleProjectRefresh(ctx);
+		refresh();
 	};
 
 	const installEditor = (ctx: ExtensionContext) => {
-		syncState(ctx);
-
-		const editorFactory = (tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager) =>
-			new PolishedEditor(
-				tui,
-				theme,
-				keybindings,
-				ctx.ui.theme,
-				() =>
-					[
-						ctx.ui.theme.fg("accent", state.modelLabel),
-						ctx.ui.theme.fg("text", state.providerLabel),
-					].join(ctx.ui.theme.fg("borderMuted", "  ")),
-				() => pi.getThinkingLevel(),
-			);
-
-		ctx.ui.setEditorComponent(editorFactory);
+		ctx.ui.setEditorComponent(
+			(tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager) =>
+				new PolishedEditor(
+					tui,
+					theme,
+					keybindings,
+					ctx.ui.theme,
+					() =>
+						[
+							ctx.ui.theme.fg("accent", state.modelLabel),
+							ctx.ui.theme.fg("text", state.providerLabel),
+						].join(ctx.ui.theme.fg("borderMuted", "  ")),
+					() => pi.getThinkingLevel(),
+				),
+		);
 	};
 
 	const installUi = (ctx: ExtensionContext) => {
 		if (!ctx.hasUI) return;
+		activeTheme = ctx.ui.theme;
+		installUserMessageStyle(getActiveTheme);
 		ensureConfigExists();
 		currentConfig = loadConfig();
-		installFooter(ctx);
+		syncState(state, ctx);
+		installFooter(ctx, state, currentConfig, {
+			setRequestRender: (fn) => {
+				requestFooterRender = fn;
+			},
+			scheduleProjectRefresh,
+		});
 		installEditor(ctx);
-		stopProjectRefreshInterval();
-		stopProjectRefreshInterval = startProjectRefreshInterval(
-			currentConfig.projectRefreshIntervalMs,
-			() => scheduleProjectRefresh(ctx),
+		stopRefreshInterval();
+		stopRefreshInterval = startProjectRefreshInterval(currentConfig.projectRefreshIntervalMs, () =>
+			scheduleProjectRefresh(ctx),
 		);
 		scheduleProjectRefresh(ctx);
 		refresh();
 	};
 
+	const cleanupUi = (ctx?: ExtensionContext) => {
+		stopRefreshInterval();
+		stopRefreshInterval = () => {};
+		projectRefreshInFlight = false;
+		projectRefreshPending = false;
+		requestFooterRender = undefined;
+		if (ctx?.hasUI) {
+			ctx.ui.setFooter(undefined);
+			ctx.ui.setEditorComponent(undefined);
+		}
+		activeTheme = undefined;
+	};
+
 	pi.on("session_start", async (_event, ctx) => {
 		installUi(ctx);
 	});