zidane 4.1.5 → 4.1.7

package/dist/tui.js

@@ -1,120 +1,43 @@
-import { d as createAgent } from "./tools-DpeWKzP1.js";
-import { n as toolResultToText } from "./types-Bx_F8jet.js";
-import { r as basic_default } from "./presets-Cs7_CsMk.js";
-import { i as anthropic, n as openai, r as cerebras, t as openrouter } from "./providers-CCDvIXGJ.js";
+import { d as createAgent } from "./tools-C8kDot0H.js";
+import { n as formatTokenUsage } from "./stats-BT9l57RS.js";
 import { n as loadSession, t as createSession } from "./session-Cn68UASv.js";
-import { createSqliteStore } from "./session/sqlite.js";
-import { spawn } from "node:child_process";
-import { dirname, resolve } from "node:path";
-import { existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
-import { homedir } from "node:os";
-import { anthropicOAuthProvider, openaiCodexOAuthProvider } from "@mariozechner/pi-ai/oauth";
-import { getModel, getModels } from "@mariozechner/pi-ai";
-import { RGBA, SyntaxStyle, createCliRenderer, defaultTextareaKeyBindings } from "@opentui/core";
-import { createRoot, useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
-import { heal, init } from "md4x/wasm";
+import { $ as toolCallPreview, A as isOnSafelist, B as shortId, E as useSafeModeQueue, H as useConfig, I as runOAuthLogin, J as listSessionMeta, K as eventsFromTurns, L as supportsOAuth, O as addToSafelist, P as suggestSafelistEntry, Q as titleFromTurns, R as ageString, T as useSafeModeActions, U as resolveConfig, V as ConfigProvider, Z as stripSpawnTokensLine, c as finalizeStreamingMarkdownForOwner, d as DEFAULT_SETTINGS, et as toolResultText, f as SETTINGS_CHOICES, h as useSettings, i as useSurfaces, k as getSafelist, l as turnContextSize, m as SettingsProvider, n as useColors, o as useTheme, p as SETTINGS_TOGGLES, pt as getContextWindow, q as lastContextSizeFromTurns, r as useSelectStyle, s as finalizeStreamingMarkdown, st as setProviderCredential, t as ThemeProvider, tt as detectAuth, u as useStreamBuffer, v as resolveTheme, w as SafeModeProvider, z as fmtTokens } from "./theme-context-MungM3SY.js";
 import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "@opentui/react/jsx-runtime";
-//#region src/tui/format.ts
-/** Compact token formatter — 12_415 → "12.4k", 1_234_567 → "1.23M". */
-function fmtTokens(n) {
-	if (n < 1e3) return String(n);
-	if (n < 1e6) return `${(n / 1e3).toFixed(n < 1e4 ? 2 : 1)}k`;
-	return `${(n / 1e6).toFixed(2)}M`;
-}
-/** Compact relative-time formatter — "just now / 5m / 3h / 2d". */
-function ageString(ts, now = Date.now()) {
-	const m = Math.floor((now - ts) / 6e4);
-	if (m < 1) return "just now";
-	if (m < 60) return `${m}m ago`;
-	const h = Math.floor(m / 60);
-	if (h < 24) return `${h}h ago`;
-	return `${Math.floor(h / 24)}d ago`;
-}
-/** Six-char short form of a session id for headers and lists. */
-function shortId(id) {
-	return id.replace(/-/g, "").slice(0, 6);
-}
-//#endregion
+import { RGBA, SyntaxStyle, addDefaultParsers, createCliRenderer, defaultTextareaKeyBindings, getTreeSitterClient } from "@opentui/core";
+import { createRoot, useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
 //#region src/tui/theme.ts
 /**
-* Shared color palette. Kept as plain hex strings so it can be consumed by
-* OpenTUI props that accept `string | RGBA`. The names describe role, not
-* literal hue, so the theme can be swapped without touching call sites.
+* Convert the renderer-agnostic `Theme.syntax` map (hex strings + plain
+* booleans) into an OpenTUI `SyntaxStyle`. Used both for the markdown
+* structural captures (`markup.heading`, `markup.bold`, …) and the
+* embedded Tree-sitter language tokens (`keyword`, `string`, `function`,
+* …) — OpenTUI's `<markdown>` re-uses the same `SyntaxStyle` for the
+* fenced-code renderable, so one table drives both surfaces.
 */
-const COLOR = {
-	brand: "#FFCC00",
-	accent: "#00FF88",
-	model: "#88CCFF",
-	warn: "#FFAA66",
-	error: "#FF6666",
-	dim: "#888888",
-	mute: "#555555",
-	border: "#333333",
-	borderActive: "#555555"
-};
-/**
-* Shared select styling — keeps the highlight bar from filling with a
-* different background than the surrounding box. The `▶` marker and the
-* brand-colored selected text carry the focus affordance.
-*/
-const SELECT_THEME = {
-	backgroundColor: "transparent",
-	focusedBackgroundColor: "transparent",
-	selectedBackgroundColor: "transparent",
-	selectedTextColor: COLOR.brand,
-	textColor: COLOR.dim,
-	descriptionColor: COLOR.mute,
-	selectedDescriptionColor: COLOR.dim
-};
+function buildMdStyle(theme) {
+	const styles = {};
+	for (const [token, style] of Object.entries(theme.syntax)) {
+		const out = {};
+		if (style.fg) out.fg = RGBA.fromHex(style.fg);
+		if (style.bg) out.bg = RGBA.fromHex(style.bg);
+		if (style.bold) out.bold = true;
+		if (style.italic) out.italic = true;
+		if (style.underline) out.underline = true;
+		if (style.dim) out.dim = true;
+		styles[token] = out;
+	}
+	return SyntaxStyle.fromStyles(styles);
+}
 /**
-* Theme for markdown token highlighting. Token names map to Tree-sitter highlight
-* captures emitted by OpenTUI's markdown parser; the `default` entry is the
-* fallback for unstyled text.
+* Active markdown / syntax-highlighting style, memoized per theme. Reading
+* this in a component subscribes it to theme changes — a `Settings.theme`
+* flip immediately re-renders the affected `<markdown>` instances.
 */
-const MD_STYLE = SyntaxStyle.fromStyles({
-	"default": { fg: RGBA.fromHex("#E6EDF3") },
-	"markup.heading": {
-		fg: RGBA.fromHex(COLOR.brand),
-		bold: true
-	},
-	"markup.heading.1": {
-		fg: RGBA.fromHex(COLOR.brand),
-		bold: true
-	},
-	"markup.heading.2": {
-		fg: RGBA.fromHex("#FFD84D"),
-		bold: true
-	},
-	"markup.heading.3": {
-		fg: RGBA.fromHex("#FFE680"),
-		bold: true
-	},
-	"markup.bold": {
-		fg: RGBA.fromHex("#FFFFFF"),
-		bold: true
-	},
-	"markup.italic": {
-		fg: RGBA.fromHex("#E6EDF3"),
-		italic: true
-	},
-	"markup.link": {
-		fg: RGBA.fromHex(COLOR.model),
-		underline: true
-	},
-	"markup.link.url": {
-		fg: RGBA.fromHex(COLOR.model),
-		underline: true
-	},
-	"markup.list": { fg: RGBA.fromHex(COLOR.warn) },
-	"markup.raw": { fg: RGBA.fromHex("#A5D6FF") },
-	"markup.raw.block": { fg: RGBA.fromHex("#A5D6FF") },
-	"markup.quote": {
-		fg: RGBA.fromHex(COLOR.dim),
-		italic: true
-	},
-	"punctuation": { fg: RGBA.fromHex(COLOR.mute) }
-});
+function useMdStyle() {
+	const theme = useTheme();
+	return useMemo(() => buildMdStyle(theme), [theme]);
+}
 //#endregion
 //#region src/tui/components.tsx
 /**
@@ -125,9 +48,17 @@ const MD_STYLE = SyntaxStyle.fromStyles({
 * The outer wrapper handles top-margin per kind (and per neighbor) so spacing
 * is the single source of truth for inter-event breathing room.
 */
-const EventLine = memo(({ event, previous }) => /* @__PURE__ */ jsx("box", {
-	style: { marginTop: marginTopFor(event, previous) },
-	children: /* @__PURE__ */ jsx(EventLineImpl, { event })
+const EventLine = memo(({ event, previous, depthOffset = 0 }) => /* @__PURE__ */ jsx("box", {
+	style: {
+		marginTop: marginTopFor(event, previous),
+		alignSelf: "stretch",
+		flexShrink: 0,
+		flexDirection: "column"
+	},
+	children: /* @__PURE__ */ jsx(EventLineImpl, {
+		event,
+		depthOffset
+	})
 }));
 /**
 * `@opentui/react` extends `React.JSX.IntrinsicElements`, so `onSubmit` on `<input>`
@@ -139,6 +70,7 @@ function onInputSubmit(handler) {
 	return handler;
 }
 function Footer({ hints, picked, context }) {
+	const COLOR = useColors();
 	return /* @__PURE__ */ jsxs("box", {
 		style: {
 			flexDirection: "row",
@@ -171,6 +103,7 @@ function Footer({ hints, picked, context }) {
 	});
 }
 function ProviderBadge({ picked }) {
+	const COLOR = useColors();
 	const source = picked.provider.methods[0].source;
 	return /* @__PURE__ */ jsxs("text", {
 		fg: COLOR.dim,
@@ -203,6 +136,7 @@ function ProviderBadge({ picked }) {
 	});
 }
 function ContextIndicator({ context }) {
+	const COLOR = useColors();
 	const ratio = context.max > 0 ? context.used / context.max : 0;
 	const pct = Math.round(ratio * 100);
 	const color = ratio >= .85 ? COLOR.error : ratio >= .6 ? COLOR.warn : COLOR.dim;
@@ -243,6 +177,7 @@ const SPINNER_FRAMES = [
 const SPINNER_INTERVAL_MS = 80;
 function Spinner({ label }) {
 	const [frame, setFrame] = useState(0);
+	const COLOR = useColors();
 	useEffect(() => {
 		const id = setInterval(() => setFrame((f) => (f + 1) % SPINNER_FRAMES.length), SPINNER_INTERVAL_MS);
 		return () => clearInterval(id);
@@ -256,8 +191,8 @@ function Spinner({ label }) {
 	});
 }
 function Transcript({ events, settings }) {
-	const visible = events.filter((e) => isVisible(e, settings));
-	if (visible.length === 0) return /* @__PURE__ */ jsx(EmptyState$1, {});
+	const items = useMemo(() => partitionTranscript(events, settings), [events, settings]);
+	if (items.length === 0) return /* @__PURE__ */ jsx(EmptyState$1, {});
 	return /* @__PURE__ */ jsx("scrollbox", {
 		focusable: false,
 		style: {
@@ -267,13 +202,33 @@ function Transcript({ events, settings }) {
 		},
 		stickyScroll: true,
 		stickyStart: "bottom",
-		children: visible.map((evt, i) => /* @__PURE__ */ jsx(EventLine, {
-			event: evt,
-			previous: visible[i - 1]
+		children: items.map((item, i) => item.kind === "event" ? /* @__PURE__ */ jsx(EventLine, {
+			event: item.event,
+			previous: item.previous
+		}, i) : /* @__PURE__ */ jsx(SubagentBlock, {
+			events: item.events,
+			previous: item.previous
 		}, i))
 	});
 }
+/**
+* Per-event visibility — filters honor user toggles and the
+* `hideSubagentOutput` setting. When subagent output is hidden:
+*   - Child-agent events are filtered down to the `spawn-start` /
+*     `spawn-end` markers so the user still sees "🌱 working… 🌳 done".
+*   - The parent's `tool-result` for `spawn` is hidden too. Its body
+*     duplicates `spawn-end`'s stats line *and* the parent's next markdown
+*     turn ("Here's what the sub-agent found: …"). Showing it again
+*     produced an extra `┃ [sub-agent child-1] Completed …` block that
+*     the user just wanted gone.
+*
+* Exported so the visibility matrix can be unit-tested without rendering.
+*/
 function isVisible(event, settings) {
+	if (settings.hideSubagentOutput) {
+		if (isChild(event)) return event.kind === "spawn-start" || event.kind === "spawn-end";
+		if (event.kind === "tool-result" && event.tool === "spawn") return false;
+	}
 	switch (event.kind) {
 		case "thinking": return settings.showThinking;
 		case "tool": return settings.showToolCalls;
@@ -281,6 +236,92 @@ function isVisible(event, settings) {
 		default: return true;
 	}
 }
+/**
+* Walk the visible-event list once and group consecutive child events
+* (`depth > 0`) into runs so we can wrap each run in a single bordered
+* subagent box.
+*
+* When `hideSubagentOutput` is on, `isVisible` already filters most child
+* events out; the surviving `spawn-start` / `spawn-end` markers render as
+* plain entries (no boxing) — there's nothing meaningful to box.
+*/
+function partitionTranscript(events, settings) {
+	const visible = events.filter((e) => isVisible(e, settings));
+	if (visible.length === 0) return [];
+	if (settings.hideSubagentOutput) return visible.map((event, i) => ({
+		kind: "event",
+		event,
+		previous: visible[i - 1]
+	}));
+	const items = [];
+	let run = [];
+	let runPrevious;
+	const flush = () => {
+		if (run.length > 0) {
+			items.push({
+				kind: "child-run",
+				events: run,
+				previous: runPrevious
+			});
+			run = [];
+			runPrevious = void 0;
+		}
+	};
+	for (let i = 0; i < visible.length; i++) {
+		const event = visible[i];
+		if (isChild(event)) {
+			if (run.length === 0) runPrevious = visible[i - 1];
+			run.push(event);
+		} else {
+			flush();
+			items.push({
+				kind: "event",
+				event,
+				previous: visible[i - 1]
+			});
+		}
+	}
+	flush();
+	return items;
+}
+/**
+* Bordered container for one run of subagent events. The box's border +
+* left padding give the visual "this is a subagent" affordance, so events
+* inside render with `depthOffset: 1` — a direct child of the parent
+* (depth 1) sits flush against the box's inner padding rather than being
+* indented twice. Grandchildren (depth ≥ 2) still indent further, so
+* nested subagents remain visually distinct.
+*/
+function SubagentBlock({ events, previous }) {
+	const COLOR = useColors();
+	const childIds = useMemo(() => {
+		const set = /* @__PURE__ */ new Set();
+		for (const e of events) if (e.childId) set.add(e.childId);
+		return Array.from(set);
+	}, [events]);
+	const title = childIds.length === 0 ? " subagent " : childIds.length === 1 ? ` ${childIds[0]} ` : ` subagents · ${childIds.join(", ")} `;
+	const marginTop = previous ? 1 : 0;
+	return /* @__PURE__ */ jsx("box", {
+		title,
+		style: {
+			border: true,
+			borderColor: COLOR.mute,
+			paddingLeft: 1,
+			paddingRight: 1,
+			paddingTop: 0,
+			paddingBottom: 0,
+			marginTop,
+			flexDirection: "column",
+			flexShrink: 0,
+			alignSelf: "stretch"
+		},
+		children: events.map((evt, i) => /* @__PURE__ */ jsx(EventLine, {
+			event: evt,
+			previous: events[i - 1],
+			depthOffset: 1
+		}, i))
+	});
+}
 function EmptyState$1() {
 	return /* @__PURE__ */ jsx("box", {
 		style: {
@@ -289,7 +330,7 @@ function EmptyState$1() {
 			justifyContent: "center"
 		},
 		children: /* @__PURE__ */ jsx("text", {
-			fg: COLOR.mute,
+			fg: useColors().mute,
 			children: "no messages yet — type below to start"
 		})
 	});
@@ -303,6 +344,23 @@ function isChild(event) {
 	return (event.depth ?? 0) > 0;
 }
 /**
+* Shared row geometry for every transcript event.
+*
+* `alignSelf: 'stretch'` + `flexShrink: 0` together pin each row to the
+* scrollbox's content width and prevent flex re-negotiation when neighboring
+* rows grow or shrink (streaming markdown, late-arriving tool results, etc.).
+* Without this, Yoga is free to re-compute widths every render and the
+* visible text appears to "wiggle" between columns as the stream advances.
+*/
+function rowStyle(paddingLeft) {
+	return {
+		paddingLeft,
+		flexDirection: "column",
+		flexShrink: 0,
+		alignSelf: "stretch"
+	};
+}
+/**
 * Default top-margin per kind. Spacing intent:
 *   - `info` / `markdown` / `tool` / `error` / `spawn-start` open a new block
 *     so they each get one row of breathing room above.
@@ -327,33 +385,45 @@ const TOOL_KINDS = new Set(["tool", "tool-result"]);
 /**
 * Resolve the top margin for an event given the one rendered just before it.
 *
-* The only context-aware rule today: a tool/tool-result event that follows
-* another tool/tool-result event collapses its margin to zero, so a chain of
-* tool calls reads as a tight list — whether the user has hidden tool outputs
-* or not, and whether the agent emits back-to-back calls or call→result pairs.
+* Context-aware rules:
+*
+*   - A `tool` / `tool-result` event right after another `tool` / `tool-result`
+*     collapses to a tight list — call→result pairs and back-to-back calls
+*     read as one logical block.
+*   - A parent-level event (`depth === 0`) right after a subagent event
+*     (`depth > 0`) collapses too. The subagent's `🌳` end marker (and, in
+*     show mode, the subagent box's bottom border) already provides the
+*     separation; adding the event's default `marginTop` on top would
+*     produce the visible "line jump" between a subagent's outcome and the
+*     parent's follow-up. Either form of marker is enough — we don't want
+*     both.
 *
 * Exported so the spacing matrix can be unit-tested without rendering.
 */
 function marginTopFor(event, previous) {
 	if (TOOL_KINDS.has(event.kind) && previous && TOOL_KINDS.has(previous.kind)) return 0;
+	const eventDepth = event.depth ?? 0;
+	const previousDepth = previous?.depth ?? 0;
+	if (eventDepth === 0 && previousDepth > 0) return 0;
 	return MARGIN_TOP[event.kind] ?? 0;
 }
-function EventLineImpl({ event }) {
+function EventLineImpl({ event, depthOffset = 0 }) {
+	const COLOR = useColors();
 	const safeText = event.text === "" ? " " : event.text;
-	const paddingLeft = indentFor(event.depth);
+	const row = rowStyle(indentFor(Math.max(0, (event.depth ?? 0) - depthOffset)));
 	const child = isChild(event);
 	switch (event.kind) {
 		case "separator": return /* @__PURE__ */ jsx("text", { children: " " });
 		case "info": return /* @__PURE__ */ jsx(UserPromptBlock, { text: safeText });
 		case "thinking": return /* @__PURE__ */ jsx("box", {
-			style: { paddingLeft },
+			style: row,
 			children: /* @__PURE__ */ jsx("text", {
 				fg: COLOR.dim,
 				children: safeText
 			})
 		});
 		case "tool": return /* @__PURE__ */ jsx("box", {
-			style: { paddingLeft },
+			style: row,
 			children: /* @__PURE__ */ jsxs("text", {
 				fg: child ? COLOR.dim : COLOR.model,
 				children: [/* @__PURE__ */ jsx("span", {
@@ -364,10 +434,10 @@ function EventLineImpl({ event }) {
 		});
 		case "tool-result": return /* @__PURE__ */ jsx(ToolResultBlock, {
 			text: event.text,
-			indent: paddingLeft
+			indent: row.paddingLeft
 		});
 		case "error": return /* @__PURE__ */ jsx("box", {
-			style: { paddingLeft },
+			style: row,
 			children: /* @__PURE__ */ jsxs("text", {
 				fg: COLOR.error,
 				children: [/* @__PURE__ */ jsx("span", {
@@ -377,7 +447,7 @@ function EventLineImpl({ event }) {
 			})
 		});
 		case "markdown": return /* @__PURE__ */ jsx("box", {
-			style: { paddingLeft },
+			style: row,
 			children: /* @__PURE__ */ jsx(MarkdownBlock, {
 				text: event.text,
 				streaming: event.streaming ?? false,
@@ -385,7 +455,7 @@ function EventLineImpl({ event }) {
 			})
 		});
 		case "spawn-start": return /* @__PURE__ */ jsx("box", {
-			style: { paddingLeft },
+			style: row,
 			children: /* @__PURE__ */ jsxs("text", {
 				fg: COLOR.dim,
 				children: [
@@ -405,13 +475,13 @@ function EventLineImpl({ event }) {
 			})
 		});
 		case "spawn-end": return /* @__PURE__ */ jsx("box", {
-			style: { paddingLeft },
+			style: row,
 			children: /* @__PURE__ */ jsxs("text", {
 				fg: COLOR.dim,
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						fg: COLOR.accent,
-						children: "✓ "
+						children: "🌳 "
 					}),
 					/* @__PURE__ */ jsx("span", {
 						fg: COLOR.dim,
@@ -429,6 +499,7 @@ function EventLineImpl({ event }) {
 }
 /** User prompt — bordered to rhyme with the prompt input box below. */
 function UserPromptBlock({ text }) {
+	const COLOR = useColors();
 	return /* @__PURE__ */ jsx("box", {
 		style: {
 			border: true,
@@ -443,21 +514,43 @@ function UserPromptBlock({ text }) {
 	});
 }
 /**
-* Markdown block. While `streaming` is true, content is passed through
-* `md4x.heal()` so unclosed delimiters (bold, italic, code, link, table) render
-* as if already complete. OpenTUI's `streaming` prop keeps its parser from
-* committing to the final layout for the trailing block.
+* Markdown block. Renders either live-streaming markdown (with `streaming`
+* on, while deltas are still appending) or finalized markdown (after
+* `turn:after`, or every entry on a reloaded transcript).
+*
+* `internalBlockMode` is the load-bearing knob for layout: the OpenTUI
+* default (`"coalesced"`) fuses adjacent top-level blocks into one render
+* block, which is the right tradeoff for finalized markdown — fewer flex
+* children, fewer layout passes, the parser already knows the final shape.
+* During streaming, that same coalescing makes earlier paragraphs visually
+* re-flow on every token, so we switch to `"top-level"` (each block its
+* own renderable, only the trailing one is unstable).
+*
+* `internalBlockMode` is set only at construction by OpenTUI — there's no
+* setter — so a `<MarkdownBlock>` keeps whichever mode it was born with.
+* Live blocks start `streaming=true` → top-level; reloaded blocks start
+* `streaming=false` → coalesced. Each variant stays optimal for its
+* lifecycle.
+*
+* Note: we don't pre-process unclosed delimiters. OpenTUI's markdown
+* parser already renders partial input reasonably during streaming (the
+* trailing block reflows as tokens close), and the simplicity is worth
+* accepting a brief literal `**` before the closer arrives. Persisted
+* reloads come from completed assistant turns whose markdown is closed.
 */
 function MarkdownBlock({ text, streaming, dim }) {
+	const COLOR = useColors();
 	return /* @__PURE__ */ jsx("markdown", {
-		content: useMemo(() => streaming ? heal(text) : text, [text, streaming]),
-		syntaxStyle: MD_STYLE,
+		content: text,
+		syntaxStyle: useMdStyle(),
 		streaming,
+		internalBlockMode: streaming ? "top-level" : "coalesced",
 		fg: dim ? COLOR.dim : void 0
 	});
 }
 const TOOL_RESULT_MAX_LINES = 6;
 function ToolResultBlock({ text, indent }) {
+	const COLOR = useColors();
 	const lines = text.split("\n");
 	const visible = lines.slice(0, TOOL_RESULT_MAX_LINES);
 	const omitted = Math.max(0, lines.length - TOOL_RESULT_MAX_LINES);
@@ -482,476 +575,6 @@ function ToolResultBlock({ text, indent }) {
 	});
 }
 //#endregion
-//#region src/tui/providers.ts
-/** Convenience accessor — returns `credentialFileKey ?? key`. */
-function credKeyOf(desc) {
-	return desc.credentialFileKey ?? desc.key;
-}
-/** Convenience accessor — returns `piProviderId ?? key`. */
-function piIdOf(desc) {
-	return desc.piProviderId ?? desc.key;
-}
-const anthropicDescriptor = {
-	key: "anthropic",
-	label: "Anthropic",
-	factory: anthropic,
-	defaultModel: "claude-opus-4-7",
-	envKey: "ANTHROPIC_API_KEY",
-	apiKeyPlaceholder: "sk-ant-…",
-	oauthProvider: anthropicOAuthProvider,
-	oauthHint: "Claude Pro/Max subscription"
-};
-const openaiDescriptor = {
-	key: "openai",
-	label: "OpenAI Codex",
-	factory: openai,
-	defaultModel: "gpt-5.4",
-	envKey: "OPENAI_CODEX_API_KEY",
-	credentialFileKey: "openai-codex",
-	piProviderId: "openai-codex",
-	apiKeyPlaceholder: "sk-… or eyJ… (Codex)",
-	oauthProvider: openaiCodexOAuthProvider
-};
-const openrouterDescriptor = {
-	key: "openrouter",
-	label: "OpenRouter",
-	factory: openrouter,
-	defaultModel: "anthropic/claude-sonnet-4-6",
-	envKey: "OPENROUTER_API_KEY",
-	apiKeyPlaceholder: "sk-or-…"
-};
-const cerebrasDescriptor = {
-	key: "cerebras",
-	label: "Cerebras",
-	factory: cerebras,
-	defaultModel: "zai-glm-4.7",
-	envKey: "CEREBRAS_API_KEY",
-	apiKeyPlaceholder: "csk-…"
-};
-/**
-* Default provider registry. Passed verbatim when `runTui` is invoked without
-* an explicit `providers` option. Hosts that want to override per-provider
-* metadata can spread this and replace specific entries:
-*
-* ```ts
-* runTui({ providers: { ...BUILTIN_PROVIDERS, anthropic: myOwnAnthropicDescriptor } })
-* ```
-*/
-const BUILTIN_PROVIDERS = {
-	anthropic: anthropicDescriptor,
-	openai: openaiDescriptor,
-	openrouter: openrouterDescriptor,
-	cerebras: cerebrasDescriptor
-};
-/**
-* Resolve the model list for a given provider. Honors `descriptor.models`
-* when set; otherwise queries pi-ai via `descriptor.piProviderId`. Returns
-* `[]` for descriptors with no known mapping (custom providers without a
-* model list) — callers should hide the model picker in that case.
-*/
-function modelsForDescriptor(descriptor) {
-	if (descriptor.models) return descriptor.models;
-	try {
-		return getModels(piIdOf(descriptor));
-	} catch {
-		return [];
-	}
-}
-/**
-* Look up the model's max context window via the descriptor's model source.
-* Returns `null` when the model isn't known (custom slugs, providers without
-* a registry); callers should hide the context indicator in that case.
-*/
-function getContextWindow(descriptor, modelId) {
-	if (descriptor.models) return descriptor.models.find((m) => m.id === modelId)?.contextWindow ?? null;
-	try {
-		return getModel(piIdOf(descriptor), modelId)?.contextWindow ?? null;
-	} catch {
-		return null;
-	}
-}
-//#endregion
-//#region src/tui/credentials.ts
-/** POSIX mode for the credentials file. Ignored on Windows. */
-const FILE_MODE = 384;
-/**
-* Resolve the credentials file path given the resolved TUI data directory
-* (typically `~/.zidane`, i.e. `config.paths.dir`).
-*
-* Matches the convention used elsewhere in the TUI (sessions.db, state.json)
-* so a single `ZIDANE_STORAGE_DIR` override moves the entire data root.
-*/
-function credentialsPath(dataDir) {
-	return resolve(dataDir, "credentials.json");
-}
-/**
-* Read credentials from disk.
-*
-* Returns `{}` when the file is missing or corrupt (last-ditch tolerance —
-* a hand-edit gone wrong shouldn't lock the user out of re-authing). On first
-* call with no file present, attempts a migration from `cwd/.credentials.json`
-* (the legacy location used by `bun run auth`).
-*/
-function readCredentials(dataDir) {
-	const path = credentialsPath(dataDir);
-	if (!existsSync(path)) {
-		const migrated = migrateLegacyFile(path);
-		if (migrated) return migrated;
-		return {};
-	}
-	try {
-		const raw = readFileSync(path, "utf-8");
-		const parsed = JSON.parse(raw);
-		if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
-		return parsed;
-	} catch {
-		return {};
-	}
-}
-/** Read a single provider's credential (translating via the descriptor). */
-function readProviderCredential(dataDir, descriptor) {
-	return readCredentials(dataDir)[credKeyOf(descriptor)];
-}
-/**
-* Write credentials atomically (write-then-rename) with mode 0o600.
-*
-* Atomic on the same filesystem — readers either see the previous file or the
-* new one, never a half-written intermediate. Creates the parent dir if needed
-* (first launch on a fresh machine: `~/.zidane/` may not exist yet).
-*/
-function writeCredentials(dataDir, creds) {
-	const path = credentialsPath(dataDir);
-	mkdirSync(dirname(path), { recursive: true });
-	const tmp = `${path}.${process.pid}.${Date.now()}.tmp`;
-	writeFileSync(tmp, `${JSON.stringify(creds, null, 2)}\n`, { mode: FILE_MODE });
-	renameSync(tmp, path);
-}
-function setProviderCredential(dataDir, descriptor, cred) {
-	const all = readCredentials(dataDir);
-	all[credKeyOf(descriptor)] = cred;
-	writeCredentials(dataDir, all);
-}
-function removeProviderCredential(dataDir, descriptor) {
-	const all = readCredentials(dataDir);
-	const fileKey = credKeyOf(descriptor);
-	if (!(fileKey in all)) return;
-	delete all[fileKey];
-	writeCredentials(dataDir, all);
-}
-/**
-* Inject API-key credentials into `process.env` so the harness providers pick
-* them up via their existing env-var resolution. Called once at TUI launch
-* after the credentials file has been resolved. OAuth credentials are NOT
-* injected — those reach providers via `ZIDANE_CREDENTIALS_PATH` + the file
-* reader in `src/providers/oauth.ts`.
-*
-* Does not overwrite env vars that are already set — explicit user-provided
-* env values win over stored API keys.
-*
-* Descriptors without an `envKey` (OAuth-only providers, custom providers
-* that bypass env-var resolution) are skipped silently.
-*/
-function applyApiKeyEnv(dataDir, registry) {
-	const creds = readCredentials(dataDir);
-	for (const descriptor of Object.values(registry)) {
-		if (!descriptor.envKey || process.env[descriptor.envKey]) continue;
-		const cred = creds[credKeyOf(descriptor)];
-		if (cred?.kind === "apikey" && cred.value) process.env[descriptor.envKey] = cred.value;
-	}
-}
-/**
-* `bun run auth` (pre-TUI) wrote `cwd/.credentials.json` with an entry per
-* provider mapping directly to an OAuthCredentials payload, e.g.:
-*
-*   {
-*     "anthropic":    { "access": "...", "refresh": "...", "expires": 123 },
-*     "openai-codex": { "access": "...", "refresh": "...", "expires": 123, "accountId": "..." }
-*   }
-*
-* We don't delete the legacy file — it might still be used by a host that
-* imports the harness directly. We just copy its contents into the new
-* location under the kind-tagged shape so the TUI picks them up.
-*
-* Migration is provider-agnostic: any top-level entry with an `access` field
-* is preserved verbatim (extras included), under the same key. The TUI's
-* detection then looks them up via the matching descriptor's `credentialFileKey`.
-*
-* Returns the migrated credentials when the migration ran, or `null` when
-* there's no legacy file to migrate.
-*/
-function migrateLegacyFile(targetPath) {
-	const legacyPath = resolve(process.cwd(), ".credentials.json");
-	if (!existsSync(legacyPath)) return null;
-	let legacy;
-	try {
-		legacy = JSON.parse(readFileSync(legacyPath, "utf-8"));
-	} catch {
-		return null;
-	}
-	if (!legacy || typeof legacy !== "object" || Array.isArray(legacy)) return null;
-	const migrated = {};
-	for (const [fileKey, value] of Object.entries(legacy)) {
-		if (!isOAuthLegacy(value)) continue;
-		const { access, refresh, expires, ...extras } = value;
-		migrated[fileKey] = {
-			kind: "oauth",
-			access,
-			...typeof refresh === "string" ? { refresh } : {},
-			...typeof expires === "number" ? { expires } : {},
-			...extras
-		};
-	}
-	if (Object.keys(migrated).length === 0) return null;
-	mkdirSync(dirname(targetPath), { recursive: true });
-	const tmp = `${targetPath}.${process.pid}.${Date.now()}.tmp`;
-	writeFileSync(tmp, `${JSON.stringify(migrated, null, 2)}\n`, { mode: FILE_MODE });
-	renameSync(tmp, targetPath);
-	return migrated;
-}
-function isOAuthLegacy(value) {
-	return typeof value === "object" && value !== null && "access" in value && typeof value.access === "string";
-}
-//#endregion
-//#region src/tui/auth.ts
-/**
-* Detect available auth for every registered provider.
-*
-* Resolution order per provider (a method appears in `methods` for each
-* layer that has a credential — the agent itself resolves them in the same
-* order via its provider factories):
-*
-*   1. `kind: 'apikey'` from `credentials.json` (injected into env at TUI launch)
-*   2. explicit env var (descriptor's `envKey`)
-*   3. `kind: 'oauth'` from `credentials.json` (or legacy `cwd/.credentials.json`)
-*
-* Pure read — never refreshes or rewrites the credentials file.
-*/
-function detectAuth(dataDir, registry, env = process.env) {
-	const creds = readCredentials(dataDir);
-	return Object.values(registry).map((descriptor) => {
-		const methods = [];
-		const fileEntry = creds[credKeyOf(descriptor)];
-		if (fileEntry?.kind === "apikey" && fileEntry.value) methods.push({
-			source: "apikey",
-			detail: "credentials.json"
-		});
-		if (descriptor.envKey && env[descriptor.envKey]) methods.push({
-			source: "env",
-			detail: descriptor.envKey
-		});
-		if (fileEntry?.kind === "oauth" && fileEntry.access) {
-			const detail = typeof fileEntry.expires === "number" ? `oauth · expires ${new Date(fileEntry.expires).toLocaleString()}` : "oauth · credentials.json";
-			methods.push({
-				source: "oauth",
-				detail
-			});
-		}
-		return {
-			key: descriptor.key,
-			label: descriptor.label,
-			available: methods.length > 0,
-			methods
-		};
-	});
-}
-//#endregion
-//#region src/tui/store.ts
-function ensureDir(path) {
-	const dir = dirname(path);
-	if (existsSync(dir)) return;
-	try {
-		mkdirSync(dir, { recursive: true });
-	} catch (err) {
-		const message = err instanceof Error ? err.message : String(err);
-		throw new Error(`Could not create TUI storage directory at "${dir}". Override the location via \`runTui({ storageDir, prefix })\` or the \`ZIDANE_STORAGE_DIR\` env var. Original error: ${message}`);
-	}
-}
-function createTuiStore(dbPath) {
-	ensureDir(dbPath);
-	return createSqliteStore({ path: dbPath });
-}
-function createStateStore(path) {
-	return {
-		load: () => loadState(path),
-		save: (state) => saveState(path, state)
-	};
-}
-function loadState(path) {
-	if (!existsSync(path)) return {};
-	try {
-		const parsed = JSON.parse(readFileSync(path, "utf-8"));
-		if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) return parsed;
-	} catch {}
-	return {};
-}
-function saveState(path, state) {
-	ensureDir(path);
-	const tmp = `${path}.${process.pid}.tmp`;
-	writeFileSync(tmp, JSON.stringify(state, null, 2));
-	renameSync(tmp, path);
-}
-/**
-* Load every session and project it to the compact `SessionMeta` shape used by
-* the picker. Sorted by recency via the underlying store's `list()` contract
-* (sqlite store returns by `updated_at DESC`).
-*/
-async function listSessionMeta(store) {
-	const ids = await store.list();
-	return (await Promise.all(ids.map(async (id) => {
-		const data = await store.load(id);
-		if (!data) return null;
-		return {
-			id,
-			title: titleFromTurns(data.turns) ?? "untitled",
-			turnCount: data.turns.length,
-			updatedAt: data.updatedAt
-		};
-	}))).filter((m) => m !== null);
-}
-/** Derive a short title from the first user message — returns null when empty. */
-function titleFromTurns(turns) {
-	const first = turns.find((t) => t.role === "user");
-	if (!first) return null;
-	for (const block of first.content) if (block.type === "text" && block.text.trim()) {
-		const oneLine = block.text.replace(/\s+/g, " ").trim();
-		return oneLine.length > 60 ? `${oneLine.slice(0, 60)}…` : oneLine;
-	}
-	return null;
-}
-/**
-* Replay persisted turns as a viewable transcript. Mirrors the event shape produced
-* live by the agent hooks so loaded and streaming history render identically.
-*
-* Skips `tool_result` blocks (they're not user-visible by default), and inserts a
-* `separator` event between turn groups so the eye can parse turn boundaries.
-*/
-function eventsFromTurns(turns) {
-	const events = [];
-	for (let i = 0; i < turns.length; i++) {
-		const turn = turns[i];
-		if (i > 0) events.push({
-			kind: "separator",
-			text: ""
-		});
-		if (turn.role === "user") {
-			for (const block of turn.content) if (block.type === "text" && block.text.trim()) events.push({
-				kind: "info",
-				text: `❯ ${block.text}`
-			});
-			else if (block.type === "tool_result") events.push({
-				kind: "tool-result",
-				text: toolResultText(block.output)
-			});
-			continue;
-		}
-		if (turn.role === "assistant") {
-			for (const block of turn.content) if (block.type === "text" && block.text.trim()) events.push({
-				kind: "markdown",
-				text: block.text,
-				streaming: false
-			});
-			else if (block.type === "tool_call") events.push({
-				kind: "tool",
-				text: toolCallPreview(block.name, block.input)
-			});
-		}
-	}
-	return events;
-}
-/** Shared formatter for the `↳ name(args)` line shown on tool calls. */
-function toolCallPreview(name, input) {
-	const args = JSON.stringify(input);
-	return args && args !== "{}" ? `${name}(${args})` : name;
-}
-/** Render tool output as plain text, whether it's a string or structured content. */
-function toolResultText(output) {
-	return typeof output === "string" ? output : toolResultToText(output);
-}
-/** Effective context size of the most recent assistant turn — drives the footer indicator. */
-function lastContextSizeFromTurns(turns) {
-	for (let i = turns.length - 1; i >= 0; i--) {
-		const turn = turns[i];
-		if (turn.role === "assistant" && turn.usage) return (turn.usage.input ?? 0) + (turn.usage.cacheRead ?? 0) + (turn.usage.cacheCreation ?? 0);
-	}
-	return 0;
-}
-//#endregion
-//#region src/tui/config.tsx
-/** Resolve user options into a fully-bound runtime config. Pure aside from disk reads. */
-function resolveConfig(options = {}) {
-	const prefix = options.prefix ?? process.env.ZIDANE_PREFIX ?? ".zidane";
-	const storageDir = options.storageDir ?? process.env.ZIDANE_STORAGE_DIR ?? homedir();
-	const dir = resolve(storageDir, prefix);
-	const paths = {
-		dir,
-		db: resolve(dir, "sessions.db"),
-		state: resolve(dir, "state.json")
-	};
-	const store = options.store ?? createTuiStore(paths.db);
-	const stateStore = createStateStore(paths.state);
-	const initialState = stateStore.load();
-	const providers = options.providers ?? BUILTIN_PROVIDERS;
-	const preset = options.preset ?? basic_default;
-	process.env.ZIDANE_CREDENTIALS_PATH = credentialsPath(dir);
-	applyApiKeyEnv(dir, providers);
-	const modelsFor = makeModelsResolver(providers);
-	const resumeProvider = resolveResumeProvider(initialState, providers, dir);
-	const initialPicked = resumeProvider ? pickInitial(resumeProvider, providers, initialState) : null;
-	return {
-		prefix,
-		storageDir,
-		paths,
-		providers,
-		preset,
-		store,
-		stateStore,
-		modelsFor,
-		initialState,
-		initialSettings: initialState.settings ?? {},
-		resumeProvider,
-		initialPicked
-	};
-}
-function makeModelsResolver(registry) {
-	return (key) => {
-		const descriptor = registry[key];
-		return descriptor ? modelsForDescriptor(descriptor) : [];
-	};
-}
-function resolveResumeProvider(state, providers, storageDir) {
-	if (!state.lastProvider) return null;
-	if (!providers[state.lastProvider]) return null;
-	return detectAuth(storageDir, providers).find((p) => p.key === state.lastProvider && p.available) ?? null;
-}
-function pickInitial(auth, providers, state) {
-	const descriptor = providers[auth.key];
-	if (!descriptor) return null;
-	const model = state.lastModelByProvider?.[auth.key] ?? descriptor.defaultModel ?? safeFactoryDefault(descriptor);
-	return model ? {
-		provider: auth,
-		model
-	} : null;
-}
-function safeFactoryDefault(descriptor) {
-	try {
-		return descriptor.factory().meta.defaultModel;
-	} catch {
-		return;
-	}
-}
-const ConfigContext = createContext(null);
-function ConfigProvider({ config, children }) {
-	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
-		value: config,
-		children
-	});
-}
-function useConfig() {
-	const ctx = useContext(ConfigContext);
-	if (!ctx) throw new Error("useConfig must be used inside <ConfigProvider>");
-	return ctx;
-}
-//#endregion
 //#region src/tui/modal.tsx
 const ModalContext = createContext(null);
 function ModalRoot({ children }) {
@@ -1017,6 +640,8 @@ function useModalAwareFocus(preferred = true) {
 function Modal({ title, onClose, children, maxWidth = 92, minWidth = 44, horizontalMargin = 4 }) {
 	const ctx = useContext(ModalContext);
 	const dismiss = onClose ?? ctx?.close;
+	const COLOR = useColors();
+	const SURFACE = useSurfaces();
 	useKeyboard((key) => {
 		if (key.name === "escape") dismiss?.();
 	});
@@ -1027,7 +652,7 @@ function Modal({ title, onClose, children, maxWidth = 92, minWidth = 44, horizon
 		style: {
 			border: true,
 			borderColor: COLOR.borderActive,
-			backgroundColor: "#101010",
+			backgroundColor: SURFACE.modal,
 			paddingTop: 1,
 			paddingBottom: 1,
 			paddingLeft: 2,
@@ -1052,6 +677,8 @@ const VISIBLE_ROW_CAP = 12;
 * Each row shows: `● selected · name (ctx N · reasoning · vision)`.
 */
 function ModelPickerModal({ models, currentModelId, onPick }) {
+	const COLOR = useColors();
+	const SELECT_THEME = useSelectStyle();
 	const initialIndex = useMemo(() => models.findIndex((m) => m.id === currentModelId), [models, currentModelId]);
 	const options = useMemo(() => models.map((m) => ({
 		name: `${m.id === currentModelId ? "● " : "  "}${m.name ?? m.id}`,
@@ -1105,6 +732,7 @@ function ModelPickerModal({ models, currentModelId, onPick }) {
 	});
 }
 function EmptyState() {
+	const COLOR = useColors();
 	return /* @__PURE__ */ jsxs(Modal, {
 		title: "select model",
 		children: [/* @__PURE__ */ jsx("text", {
@@ -1136,65 +764,6 @@ function describeModel(m) {
 	return parts.join(" · ");
 }
 //#endregion
-//#region src/tui/oauth.ts
-function supportsOAuth(descriptor) {
-	return descriptor.oauthProvider !== void 0;
-}
-/**
-* Run the OAuth login flow for a provider.
-*
-* Returns the OAuth credentials on success; caller persists them via
-* `setProviderCredential(dataDir, descriptor, { kind: 'oauth', ...credentials })`.
-* Throws when the descriptor has no `oauthProvider` configured.
-*/
-async function runOAuthLogin(descriptor, options) {
-	if (!descriptor.oauthProvider) throw new Error(`OAuth not supported for ${descriptor.label} (${descriptor.key}) — use an API key instead.`);
-	const callbacks = {
-		onAuth: (info) => {
-			options.onUrl(info.url, info.instructions);
-			tryOpenBrowser(info.url);
-		},
-		onPrompt: async () => {
-			if (!options.onCodeRequest) throw new Error("OAuth flow requires manual code input but no handler is wired.");
-			return options.onCodeRequest();
-		},
-		onProgress: options.onProgress,
-		signal: options.signal
-	};
-	return descriptor.oauthProvider.login(callbacks);
-}
-/**
-* Best-effort cross-platform browser open. macOS uses `open`, Linux uses
-* `xdg-open`, Windows uses `start`. Failures are swallowed — the callback
-* server is already listening, and the URL is displayed in the TUI for
-* manual click.
-*
-* Uses `spawn` (not `exec`) so the URL is passed as an argv element rather
-* than interpolated into a shell command — no need to think about quoting
-* URLs that contain `&`, `?`, `"` or other shell metacharacters.
-*/
-function tryOpenBrowser(url) {
-	const [cmd, ...args] = (() => {
-		if (process.platform === "darwin") return ["open", url];
-		if (process.platform === "win32") return [
-			"cmd",
-			"/c",
-			"start",
-			"",
-			url
-		];
-		return ["xdg-open", url];
-	})();
-	try {
-		const child = spawn(cmd, args, {
-			stdio: "ignore",
-			detached: true
-		});
-		child.on("error", () => {});
-		child.unref();
-	} catch {}
-}
-//#endregion
 //#region src/tui/screens.tsx
 /**
 * Build a key-binding set for the prompt textarea / API-key input. Strips the
@@ -1241,6 +810,8 @@ function AuthScreen({ onPick }) {
 	const config = useConfig();
 	const { providers: registry } = config;
 	const focused = useModalAwareFocus();
+	const COLOR = useColors();
+	const SELECT_THEME = useSelectStyle();
 	const [providers, setProviders] = useState([]);
 	const refresh = useCallback(() => setProviders(detectAuth(config.paths.dir, registry)), [config.paths.dir, registry]);
 	useEffect(() => {
@@ -1371,12 +942,13 @@ function SetupWizard({ registry, dataDir, onConfigured, onCancel }) {
 * with a customizable title and accent color. Footnote slot at the bottom for
 * an error banner.
 */
-function WizardPanel({ title, accent = COLOR.border, error, children }) {
+function WizardPanel({ title, accent, error, children }) {
+	const COLOR = useColors();
 	return /* @__PURE__ */ jsxs("box", {
 		title,
 		style: {
 			border: true,
-			borderColor: accent,
+			borderColor: accent ?? COLOR.border,
 			padding: 1,
 			gap: 1,
 			flexDirection: "column",
@@ -1391,11 +963,12 @@ function WizardPanel({ title, accent = COLOR.border, error, children }) {
 /** "esc to exit" footer hint shared by every wizard step that doesn't offer a "← back" affordance. */
 function WizardEscHint() {
 	return /* @__PURE__ */ jsx("text", {
-		fg: COLOR.dim,
+		fg: useColors().dim,
 		children: "esc to exit"
 	});
 }
 function EmptyRegistryNotice() {
+	const COLOR = useColors();
 	return /* @__PURE__ */ jsxs(WizardPanel, {
 		title: " no providers configured ",
 		accent: COLOR.error,
@@ -1424,6 +997,8 @@ function EmptyRegistryNotice() {
 const WIZARD_BACK_VALUE = "__back__";
 function PickProviderStep({ descriptors, error, onPick, onCancel }) {
 	const focused = useModalAwareFocus();
+	const COLOR = useColors();
+	const SELECT_THEME = useSelectStyle();
 	const options = [...descriptors.map((d) => {
 		const methods = supportsOAuth(d) ? ["API key", "OAuth"] : ["API key"];
 		return {
@@ -1469,6 +1044,7 @@ function PickProviderStep({ descriptors, error, onPick, onCancel }) {
 }
 function PickMethodStep({ descriptor, error, onPick }) {
 	const focused = useModalAwareFocus();
+	const SELECT_THEME = useSelectStyle();
 	const options = useMemo(() => {
 		const items = [{
 			name: "API key",
@@ -1503,6 +1079,7 @@ function PickMethodStep({ descriptor, error, onPick }) {
 function EnterApiKeyStep({ descriptor, error, onSubmit }) {
 	const focused = useModalAwareFocus();
 	const inputRef = useRef(null);
+	const COLOR = useColors();
 	const submit = useCallback(() => {
 		onSubmit(descriptor, inputRef.current?.value ?? "");
 	}, [descriptor, onSubmit]);
@@ -1543,6 +1120,7 @@ function EnterApiKeyStep({ descriptor, error, onSubmit }) {
 function OAuthRunningStep({ descriptor, dataDir, onSuccess, onError }) {
 	const [url, setUrl] = useState(null);
 	const [status, setStatus] = useState("starting browser…");
+	const COLOR = useColors();
 	useEffect(() => {
 		const ac = new AbortController();
 		let cancelled = false;
@@ -1604,6 +1182,8 @@ function OAuthRunningStep({ descriptor, dataDir, onSuccess, onError }) {
 const NEW_VALUE = "__new__";
 function SessionsScreen({ sessions, currentId, onPick, onCreate }) {
 	const focused = useModalAwareFocus();
+	const COLOR = useColors();
+	const SELECT_THEME = useSelectStyle();
 	const options = useMemo(() => {
 		const items = [{
 			name: "+ new session",
@@ -1647,7 +1227,8 @@ function SessionsScreen({ sessions, currentId, onPick, onCreate }) {
 /** Visible content lines: 1 minimum, 5 maximum (textarea scrolls past 5). */
 const MIN_CONTENT_LINES = 1;
 const MAX_CONTENT_LINES = 5;
-function ChatScreen({ events, busy, settings, onSubmit, session }) {
+function ChatScreen({ events, busy, settings, onSubmit, session, pending, onApproval }) {
+	const COLOR = useColors();
 	const title = useMemo(() => {
 		if (!session) return " untitled ";
 		const turns = `${session.turnCount} turn${session.turnCount === 1 ? "" : "s"}`;
@@ -1671,17 +1252,137 @@ function ChatScreen({ events, busy, settings, onSubmit, session }) {
 				events,
 				settings
 			})
-		}), busy ? /* @__PURE__ */ jsx(BusyBlock, {}) : /* @__PURE__ */ jsx(PromptBlock, {
+		}), pending ? /* @__PURE__ */ jsx(ApprovalBlock, {
+			request: pending,
+			onPick: onApproval
+		}) : busy ? /* @__PURE__ */ jsx(BusyBlock, {}) : /* @__PURE__ */ jsx(PromptBlock, {
 			userPrompts,
 			onSubmit
 		})]
 	});
 }
+/** Max chars per scalar argument in the approval preview. */
+const APPROVAL_ARG_MAX = 80;
+/**
+* Render `{ path: 'x.ts', contents: 'long string' }` as
+* `path: "x.ts", contents: "long string…"` — readable, per-key, truncated
+* per value rather than dumping `JSON.stringify(input)` (which produces an
+* illegible 50KB blob for `write_file` etc.).
+*/
+function formatApprovalArgs(input) {
+	const parts = [];
+	for (const [key, raw] of Object.entries(input)) {
+		let value;
+		if (typeof raw === "string") {
+			const escaped = raw.replace(/\n/g, "\\n");
+			value = escaped.length > APPROVAL_ARG_MAX ? `"${escaped.slice(0, APPROVAL_ARG_MAX)}…"` : `"${escaped}"`;
+		} else {
+			const json = JSON.stringify(raw);
+			value = json.length > APPROVAL_ARG_MAX ? `${json.slice(0, APPROVAL_ARG_MAX)}…` : json;
+		}
+		parts.push(`${key}: ${value}`);
+	}
+	return parts.join(", ");
+}
+/**
+* Inline approval picker — replaces the chat input while a tool call is
+* pending. Three options:
+*   - **accept once** — let this call execute, don't persist anything.
+*   - **accept + remember** — execute + add a `projects.json` entry so the
+*     same shape doesn't prompt again in this directory.
+*   - **deny** — refuse the call. The model gets `Blocked: …` and adapts.
+*
+* Esc aborts the whole run via the parent keyboard handler; per-call
+* accept/deny only happens through the select below.
+*
+* Layout is fully pinned so the picker never overlaps with itself or the
+* transcript above:
+*
+*   - Outer `<box>` has an explicit `height`. The slot below the transcript
+*     adapts (the chat container is column-flex), so we control exactly how
+*     many rows we occupy.
+*   - Summary row is a `<box height: 1, overflow: hidden>` wrapping a
+*     `<text wrapMode="none">` — a 500-char tool-call preview can never
+*     wrap to row 2 and push the select off-screen.
+*   - `<select showDescription={false}>` keeps each option to exactly one
+*     row. Hints live in the `name` string after a `·` separator. Without
+*     this, the default `showDescription: true` makes every option take 2
+*     rows, and a `height: options.length` select would overdraw into the
+*     summary above (the original bug).
+*/
+function ApprovalBlock({ request, onPick }) {
+	const focused = useModalAwareFocus();
+	const COLOR = useColors();
+	const SELECT_THEME = useSelectStyle();
+	const summary = useMemo(() => `${request.tool}(${formatApprovalArgs(request.input)})`, [request.tool, request.input]);
+	const options = useMemo(() => {
+		return [
+			{
+				name: "accept once  ·  allow this call only",
+				description: "",
+				value: "accept-once"
+			},
+			{
+				name: `accept + remember  ·  add "${suggestSafelistEntry(request.tool, request.input)}" to projects.json`,
+				description: "",
+				value: "accept-safelist"
+			},
+			{
+				name: "deny  ·  refuse — the model will see Blocked",
+				description: "",
+				value: "deny"
+			}
+		];
+	}, [request.tool, request.input]);
+	const height = 3 + options.length;
+	return /* @__PURE__ */ jsxs("box", {
+		title: " approve tool call · esc to abort run ",
+		style: {
+			border: true,
+			borderColor: COLOR.warn,
+			paddingLeft: 1,
+			paddingRight: 1,
+			paddingTop: 0,
+			paddingBottom: 0,
+			height,
+			flexDirection: "column",
+			flexShrink: 0
+		},
+		children: [/* @__PURE__ */ jsx("box", {
+			style: {
+				height: 1,
+				overflow: "hidden",
+				flexShrink: 0
+			},
+			children: /* @__PURE__ */ jsxs("text", {
+				fg: COLOR.model,
+				wrapMode: "none",
+				children: [/* @__PURE__ */ jsx("span", {
+					fg: COLOR.warn,
+					children: "↳ "
+				}), summary]
+			})
+		}), /* @__PURE__ */ jsx("select", {
+			...SELECT_THEME,
+			focused,
+			options,
+			showDescription: false,
+			wrapSelection: true,
+			onSelect: (_idx, option) => {
+				if (option) onPick(option.value);
+			},
+			style: {
+				height: options.length,
+				flexShrink: 0
+			}
+		})]
+	});
+}
 function BusyBlock() {
 	return /* @__PURE__ */ jsx("box", {
 		style: {
 			border: true,
-			borderColor: COLOR.warn,
+			borderColor: useColors().warn,
 			paddingLeft: 1,
 			paddingRight: 1,
 			height: 3
@@ -1691,6 +1392,7 @@ function BusyBlock() {
 }
 function PromptBlock({ userPrompts, onSubmit }) {
 	const focused = useModalAwareFocus();
+	const COLOR = useColors();
 	const textareaRef = useRef(null);
 	/** Auto-grow: visible content rows the textarea currently occupies (clamped 1..5). */
 	const [contentLines, setContentLines] = useState(MIN_CONTENT_LINES);
@@ -1770,63 +1472,20 @@ function PromptBlock({ userPrompts, onSubmit }) {
 	});
 }
 //#endregion
-//#region src/tui/settings.tsx
-const DEFAULT_SETTINGS = {
-	showThinking: true,
-	showToolCalls: true,
-	showToolResults: true
-};
-const SettingsContext = createContext(null);
-function SettingsProvider({ initial, onChange, children }) {
-	const [settings, setSettings] = useState(initial);
-	const toggle = useCallback((key) => {
-		setSettings((prev) => {
-			const next = {
-				...prev,
-				[key]: !prev[key]
-			};
-			onChange?.(next);
-			return next;
-		});
-	}, [onChange]);
-	const value = useMemo(() => ({
-		settings,
-		toggle
-	}), [settings, toggle]);
-	return /* @__PURE__ */ jsx(SettingsContext.Provider, {
-		value,
-		children
-	});
-}
-function useSettings() {
-	const ctx = useContext(SettingsContext);
-	if (!ctx) throw new Error("useSettings must be used inside <SettingsProvider>");
-	return ctx;
-}
-const TOGGLES = [
-	{
-		kind: "toggle",
-		key: "showThinking",
-		label: "Thinking blocks",
-		description: "agent reasoning shown inline"
-	},
-	{
-		kind: "toggle",
-		key: "showToolCalls",
-		label: "Tool calls",
-		description: "the ↳ name(args) lines"
-	},
-	{
-		kind: "toggle",
-		key: "showToolResults",
-		label: "Tool outputs",
-		description: "the ┃ result blocks under tool calls"
-	}
-];
+//#region src/tui/settings-modal.tsx
 function SettingsModal({ actions } = {}) {
-	const { settings, toggle } = useSettings();
+	const { settings, toggle, setSetting } = useSettings();
 	const [cursor, setCursorRaw] = useState(0);
+	const COLOR = useColors();
 	const items = useMemo(() => {
+		const toggleItems = SETTINGS_TOGGLES.map((t) => ({
+			kind: "toggle",
+			...t
+		}));
+		const choiceItems = SETTINGS_CHOICES.map((c) => ({
+			kind: "choice",
+			...c
+		}));
 		const actionItems = [];
 		if (actions?.onReauth) actionItems.push({
 			kind: "action",
@@ -1835,7 +1494,11 @@ function SettingsModal({ actions } = {}) {
 			description: "switch provider, add another, or re-authenticate",
 			onPick: actions.onReauth
 		});
-		return [...TOGGLES, ...actionItems];
+		return [
+			...toggleItems,
+			...choiceItems,
+			...actionItems
+		];
 	}, [actions]);
 	const safeCursor = Math.min(cursor, items.length - 1);
 	const setCursor = useCallback((update) => setCursorRaw((prev) => Math.min(Math.max(0, update(prev)), items.length - 1)), [items.length]);
@@ -1846,33 +1509,49 @@ function SettingsModal({ actions } = {}) {
 			const item = items[safeCursor];
 			if (!item) return;
 			if (item.kind === "toggle") toggle(item.key);
-			else item.onPick();
+			else if (item.kind === "choice") {
+				const current = settings[item.key];
+				const idx = item.options.findIndex((o) => o.value === current);
+				const next = item.options[(idx + 1) % item.options.length];
+				if (next) setSetting(item.key, next.value);
+			} else item.onPick();
 		}
 	});
-	const firstActionIndex = items.findIndex((i) => i.kind === "action");
+	const firstNonToggleIndex = items.findIndex((i) => i.kind !== "toggle");
 	return /* @__PURE__ */ jsxs(Modal, {
 		title: "settings",
 		children: [/* @__PURE__ */ jsx("box", {
 			style: { flexDirection: "column" },
 			children: items.map((item, i) => /* @__PURE__ */ jsxs("box", {
 				style: { flexDirection: "column" },
-				children: [i === firstActionIndex && i > 0 && /* @__PURE__ */ jsx("box", { style: {
-					border: ["top"],
-					borderColor: COLOR.mute,
-					height: 1,
-					marginTop: 1,
-					marginBottom: 1
-				} }), item.kind === "toggle" ? /* @__PURE__ */ jsx(ToggleRow, {
-					label: item.label,
-					description: item.description,
-					enabled: settings[item.key],
-					focused: i === safeCursor
-				}) : /* @__PURE__ */ jsx(ActionRow, {
-					label: item.label,
-					description: item.description,
-					focused: i === safeCursor
-				})]
-			}, item.kind === "toggle" ? item.key : item.id))
+				children: [
+					i === firstNonToggleIndex && i > 0 && /* @__PURE__ */ jsx("box", { style: {
+						border: ["top"],
+						borderColor: COLOR.mute,
+						height: 1,
+						marginTop: 1,
+						marginBottom: 1
+					} }),
+					item.kind === "toggle" && /* @__PURE__ */ jsx(ToggleRow, {
+						label: item.label,
+						description: item.description,
+						enabled: settings[item.key],
+						focused: i === safeCursor
+					}),
+					item.kind === "choice" && /* @__PURE__ */ jsx(ChoiceRow, {
+						label: item.label,
+						description: item.description,
+						value: item.options.find((o) => o.value === settings[item.key])?.label ?? String(settings[item.key]),
+						cyclable: item.options.length > 1,
+						focused: i === safeCursor
+					}),
+					item.kind === "action" && /* @__PURE__ */ jsx(ActionRow, {
+						label: item.label,
+						description: item.description,
+						focused: i === safeCursor
+					})
+				]
+			}, item.kind === "action" ? item.id : item.key))
 		}), /* @__PURE__ */ jsxs("text", {
 			fg: COLOR.mute,
 			children: [
@@ -1885,7 +1564,7 @@ function SettingsModal({ actions } = {}) {
 					fg: COLOR.warn,
 					children: "↵"
 				}),
-				firstActionIndex >= 0 ? " toggle/select · " : " toggle · ",
+				" toggle/cycle/select · ",
 				/* @__PURE__ */ jsx("span", {
 					fg: COLOR.warn,
 					children: "esc"
@@ -1903,6 +1582,7 @@ function SettingsModal({ actions } = {}) {
 * the trailing description wraps under the label without breaking the row.
 */
 function ToggleRow({ label, description, enabled, focused }) {
+	const COLOR = useColors();
 	return /* @__PURE__ */ jsxs("text", {
 		fg: focused ? COLOR.brand : COLOR.dim,
 		children: [
@@ -1926,6 +1606,46 @@ function ToggleRow({ label, description, enabled, focused }) {
 	});
 }
 /**
+* Choice row — `▶` marker · label · `:` · current value · description.
+*
+* Cycles through `options` on enter/space. When only one option is
+* available (`cyclable=false`) the row still renders with the current
+* value but the enter handler is a no-op — we surface this via the absence
+* of the trailing `›` affordance so it visually reads as informational.
+*/
+function ChoiceRow({ label, description, value, cyclable, focused }) {
+	const COLOR = useColors();
+	return /* @__PURE__ */ jsxs("text", {
+		fg: focused ? COLOR.brand : COLOR.dim,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: focused ? COLOR.brand : COLOR.mute,
+				children: focused ? "▶ " : "  "
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg: focused ? COLOR.brand : COLOR.dim,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: ": "
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg: focused ? COLOR.brand : COLOR.accent,
+				children: value
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: `  ${description}`
+			}),
+			focused && cyclable && /* @__PURE__ */ jsx("span", {
+				fg: COLOR.brand,
+				children: " ↻"
+			})
+		]
+	});
+}
+/**
 * Action row — cursor marker · label · description · (focus-only) trailing arrow.
 *
 * The label sits in the same column as a toggle row's `[✓]` checkbox (right
@@ -1934,6 +1654,7 @@ function ToggleRow({ label, description, enabled, focused }) {
 * every action.
 */
 function ActionRow({ label, description, focused }) {
+	const COLOR = useColors();
 	return /* @__PURE__ */ jsxs("text", {
 		fg: focused ? COLOR.brand : COLOR.dim,
 		children: [
@@ -1957,170 +1678,6 @@ function ActionRow({ label, description, focused }) {
 	});
 }
 //#endregion
-//#region src/tui/streaming.ts
-/** Target one flush per ~33ms (one frame at the default renderer targetFps=30). */
-const FLUSH_INTERVAL_MS = 33;
-const PARENT_OWNER = "parent";
-function emptyBucket(owner, depth) {
-	return {
-		markdown: "",
-		thinking: "",
-		owner,
-		depth
-	};
-}
-function applyBucket(prev, bucket) {
-	let result = prev;
-	if (bucket.thinking) result = appendThinkingLines(result, bucket.thinking, bucket.owner, bucket.depth);
-	if (bucket.markdown) result = appendMarkdownDelta(result, bucket.markdown, bucket.owner, bucket.depth);
-	return result;
-}
-function appendMarkdownDelta(prev, delta, owner, depth) {
-	const last = prev[prev.length - 1];
-	if (last && last.kind === "markdown" && last.streaming && ownerOf(last) === owner) {
-		const next = prev.slice(0, -1);
-		next.push({
-			...last,
-			text: last.text + delta
-		});
-		return next;
-	}
-	return [...prev, eventWithOwner({
-		kind: "markdown",
-		text: delta,
-		streaming: true
-	}, owner, depth)];
-}
-function appendThinkingLines(prev, delta, owner, depth) {
-	const lines = delta.split("\n");
-	const result = [...prev];
-	const last = result[result.length - 1];
-	if (last && last.kind === "thinking" && ownerOf(last) === owner) result[result.length - 1] = {
-		...last,
-		text: last.text + lines[0]
-	};
-	else if (lines[0] || lines.length > 1) result.push(eventWithOwner({
-		kind: "thinking",
-		text: lines[0]
-	}, owner, depth));
-	for (let i = 1; i < lines.length; i++) result.push(eventWithOwner({
-		kind: "thinking",
-		text: lines[i]
-	}, owner, depth));
-	return result;
-}
-function ownerOf(evt) {
-	return evt.childId ?? PARENT_OWNER;
-}
-function eventWithOwner(evt, owner, depth) {
-	if (owner === PARENT_OWNER) return evt;
-	return {
-		...evt,
-		childId: owner,
-		depth
-	};
-}
-/** Flip any trailing streaming markdown blocks (any owner) to finalized. */
-function finalizeStreamingMarkdown(events) {
-	let changed = false;
-	const next = events.map((e) => {
-		if (e.kind === "markdown" && e.streaming) {
-			changed = true;
-			return {
-				...e,
-				streaming: false
-			};
-		}
-		return e;
-	});
-	return changed ? next : events;
-}
-/** Flip the trailing streaming markdown block for one specific owner. */
-function finalizeStreamingMarkdownForOwner(events, owner) {
-	for (let i = events.length - 1; i >= 0; i--) {
-		const e = events[i];
-		if (e.kind !== "markdown") continue;
-		if (!e.streaming) continue;
-		if (ownerOf(e) !== owner) continue;
-		const next = events.slice();
-		next[i] = {
-			...e,
-			streaming: false
-		};
-		return next;
-	}
-	return events;
-}
-/**
-* Effective context size for a single turn.
-*
-* `usage.input` is misleading on its own when prompt caching is active: providers
-* (Anthropic, OpenRouter→Anthropic, Gemini) report `input` as the *new uncached*
-* tokens only — the cached prefix shows up in `cacheRead`, and newly-cached
-* tokens in `cacheCreation`. The model still saw all three buckets, so the real
-* context-window utilization is their sum.
-*
-* Non-caching providers leave `cacheRead`/`cacheCreation` undefined, so this
-* collapses to plain `input` for them.
-*/
-function turnContextSize(usage) {
-	if (!usage) return 0;
-	return (usage.input ?? 0) + (usage.cacheRead ?? 0) + (usage.cacheCreation ?? 0);
-}
-function useStreamBuffer(setEvents) {
-	const bucketsRef = useRef(/* @__PURE__ */ new Map());
-	const flushTimerRef = useRef(null);
-	const drainPendingInto = useCallback((updater) => {
-		if (flushTimerRef.current) {
-			clearTimeout(flushTimerRef.current);
-			flushTimerRef.current = null;
-		}
-		const buckets = Array.from(bucketsRef.current.values());
-		bucketsRef.current.clear();
-		if (!buckets.some((b) => b.markdown.length > 0 || b.thinking.length > 0) && !updater) return;
-		setEvents((prev) => {
-			let merged = prev;
-			for (const bucket of buckets) merged = applyBucket(merged, bucket);
-			return updater ? updater(merged) : merged;
-		});
-	}, [setEvents]);
-	const flush = useCallback(() => drainPendingInto(), [drainPendingInto]);
-	const flushAndUpdate = useCallback((update) => drainPendingInto(update), [drainPendingInto]);
-	const appendImmediate = useCallback((evt) => drainPendingInto((events) => [...events, evt]), [drainPendingInto]);
-	const queueStreamDelta = useCallback((kind, delta, source) => {
-		if (!delta) return;
-		const owner = source?.childId ?? PARENT_OWNER;
-		const depth = source?.depth ?? 0;
-		let bucket = bucketsRef.current.get(owner);
-		if (!bucket) {
-			bucket = emptyBucket(owner, depth);
-			bucketsRef.current.set(owner, bucket);
-		}
-		bucket[kind] += delta;
-		if (!flushTimerRef.current) flushTimerRef.current = setTimeout(flush, FLUSH_INTERVAL_MS);
-	}, [flush]);
-	const reset = useCallback(() => {
-		if (flushTimerRef.current) {
-			clearTimeout(flushTimerRef.current);
-			flushTimerRef.current = null;
-		}
-		bucketsRef.current.clear();
-	}, []);
-	return useMemo(() => ({
-		queueStreamDelta,
-		appendImmediate,
-		flushAndUpdate,
-		flush,
-		reset
-	}), [
-		queueStreamDelta,
-		appendImmediate,
-		flushAndUpdate,
-		flush,
-		reset
-	]);
-}
-//#endregion
 //#region src/tui/app.tsx
 /**
 * Surface failures that are normally silenced (teardown / save) when the
@@ -2148,17 +1705,79 @@ function App({ config }) {
 				...config.stateStore.load(),
 				settings
 			}), [config.stateStore]),
-			children: /* @__PURE__ */ jsx(ModalRoot, { children: /* @__PURE__ */ jsx(AppShell, {}) })
+			children: /* @__PURE__ */ jsx(ThemedShell, {})
 		})
 	});
 }
+/**
+* Reads `settings.theme` from the surrounding `SettingsProvider`, resolves
+* it to a `Theme`, and mounts everything else underneath a `ThemeProvider`.
+* Split out so `App` doesn't need to call `useSettings` (which would force
+* it to live inside its own provider — invalid).
+*
+* `resolveTheme` falls back to `DEFAULT_THEME` on unknown ids, so an
+* out-of-date `state.json` (theme renamed / removed) never breaks rendering.
+*/
+function ThemedShell() {
+	const { settings } = useSettings();
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		theme: useMemo(() => resolveTheme(settings.theme), [settings.theme]),
+		children: /* @__PURE__ */ jsx(SafeModeProvider, { children: /* @__PURE__ */ jsx(ModalRoot, { children: /* @__PURE__ */ jsx(AppShell, {}) }) })
+	});
+}
 function AppShell() {
 	const renderer = useRenderer();
 	const modal = useModal();
 	const config = useConfig();
 	const { settings } = useSettings();
+	const queue = useSafeModeQueue();
+	const { requestApproval, resolveHead, denyAll } = useSafeModeActions();
 	const { providers: providerRegistry, preset, store, stateStore, modelsFor, resumeProvider, initialPicked, initialState } = config;
 	const lastResumedSessionId = initialState.lastSessionId;
+	const dataDir = config.paths.dir;
+	const safeModeEnabledRef = useRef(settings.safeMode);
+	useEffect(() => {
+		safeModeEnabledRef.current = settings.safeMode;
+	}, [settings.safeMode]);
+	const [projectDir] = useState(() => process.cwd());
+	const safelistRef = useRef(null);
+	const readSafelist = useCallback(() => {
+		if (safelistRef.current === null) safelistRef.current = getSafelist(dataDir, projectDir);
+		return safelistRef.current;
+	}, [dataDir, projectDir]);
+	useEffect(() => {
+		safelistRef.current = null;
+	}, [dataDir, projectDir]);
+	/**
+	* Single source of truth for "should this call execute?". Returns true to
+	* let the call through, false to refuse it. Handles three short-circuits:
+	*
+	*   - Safe-mode globally off → always allow.
+	*   - Call covered by the project safelist or the implicit read-only set
+	*     → always allow without prompting.
+	*   - Otherwise → prompt the user and act on their decision (including
+	*     persisting a new safelist entry on "accept + safelist").
+	*
+	* Wired into the parent agent via `tool:gate` / `mcp:tool:gate`, and to
+	* every subagent (transitively, for free) via `child:tool:gate` /
+	* `child:mcp:tool:gate` — see the bubble in `src/tools/spawn.ts`.
+	*/
+	const gateDecision = useCallback(async (tool, input) => {
+		if (!safeModeEnabledRef.current) return true;
+		if (isOnSafelist(readSafelist(), tool, input)) return true;
+		const decision = await requestApproval(tool, input);
+		if (decision === "deny") return false;
+		if (decision === "accept-safelist") {
+			addToSafelist(dataDir, projectDir, suggestSafelistEntry(tool, input));
+			safelistRef.current = null;
+		}
+		return true;
+	}, [
+		dataDir,
+		projectDir,
+		requestApproval,
+		readSafelist
+	]);
 	const [screen, setScreen] = useState(() => {
 		if (!resumeProvider) return "auth";
 		return lastResumedSessionId ? "chat" : "sessions";
@@ -2190,24 +1809,40 @@ function AppShell() {
 			provider: descriptor.factory(),
 			session
 		});
+		const applyGate = async (name, input, ctx) => {
+			if (ctx.block) return;
+			if (!await gateDecision(name, input)) {
+				ctx.block = true;
+				ctx.reason = "User denied this tool call";
+			}
+		};
+		agent.hooks.hook("tool:gate", (ctx) => applyGate(ctx.name, ctx.input, ctx));
+		agent.hooks.hook("child:tool:gate", (ctx) => applyGate(ctx.name, ctx.input, ctx));
+		agent.hooks.hook("mcp:tool:gate", (ctx) => applyGate(ctx.displayName, ctx.input, ctx));
+		agent.hooks.hook("child:mcp:tool:gate", (ctx) => applyGate(ctx.displayName, ctx.input, ctx));
 		agent.hooks.hook("stream:thinking", ({ delta }) => stream.queueStreamDelta("thinking", delta));
 		agent.hooks.hook("stream:text", ({ delta }) => stream.queueStreamDelta("markdown", delta));
 		agent.hooks.hook("tool:before", ({ name, input }) => {
 			stream.appendImmediate({
 				kind: "tool",
-				text: toolCallPreview(name, input)
+				text: toolCallPreview(name, input),
+				tool: name
 			});
 		});
-		agent.hooks.hook("tool:after", ({ result }) => {
+		agent.hooks.hook("tool:after", ({ name, result }) => {
+			const raw = toolResultText(result);
+			const text = name === "spawn" ? stripSpawnTokensLine(raw) : raw;
 			stream.appendImmediate({
 				kind: "tool-result",
-				text: toolResultText(result)
+				text,
+				tool: name
 			});
 		});
-		agent.hooks.hook("mcp:tool:after", ({ result }) => {
+		agent.hooks.hook("mcp:tool:after", ({ displayName, result }) => {
 			stream.appendImmediate({
 				kind: "tool-result",
-				text: toolResultText(result)
+				text: toolResultText(result),
+				tool: displayName
 			});
 		});
 		agent.hooks.hook("turn:after", ({ usage }) => {
@@ -2227,7 +1862,7 @@ function AppShell() {
 			const tag = status === "aborted" ? "aborted" : status === "error" ? "error" : "done";
 			stream.appendImmediate({
 				kind: "spawn-end",
-				text: `${tag} · ${stats.totalIn} in / ${stats.totalOut} out`,
+				text: `${tag} ${formatTokenUsage(stats)}`,
 				childId: id,
 				depth: depth ?? 1
 			});
@@ -2256,14 +1891,16 @@ function AppShell() {
 			stream.appendImmediate({
 				kind: "tool",
 				text: toolCallPreview(name, input),
+				tool: name,
 				childId,
 				depth
 			});
 		});
-		agent.hooks.hook("child:tool:after", ({ result, childId, depth }) => {
+		agent.hooks.hook("child:tool:after", ({ name, result, childId, depth }) => {
 			stream.appendImmediate({
 				kind: "tool-result",
 				text: toolResultText(result),
+				tool: name,
 				childId,
 				depth
 			});
@@ -2275,7 +1912,8 @@ function AppShell() {
 	}, [
 		providerRegistry,
 		preset,
-		stream
+		stream,
+		gateDecision
 	]);
 	const refreshSessions = useCallback(async () => {
 		const list = await listSessionMeta(store);
@@ -2296,7 +1934,7 @@ function AppShell() {
 		});
 		sessionRef.current = session;
 		agentRef.current = buildAgent(session, key);
-		setEvents(eventsFromTurns(session.turns));
+		setEvents(eventsFromTurns(session.turns, session.runs));
 		setLastInputTokens(lastContextSizeFromTurns(session.turns));
 		setCurrentSession({
 			id: session.id,
@@ -2370,8 +2008,9 @@ function AppShell() {
 		setScreen("sessions");
 	}, [refreshSessions]);
 	const onAbort = useCallback(() => {
+		denyAll();
 		agentRef.current?.abort();
-	}, []);
+	}, [denyAll]);
 	const onPickModel = useCallback((modelId) => {
 		setPicked((prev) => {
 			if (!prev) return prev;
@@ -2433,6 +2072,7 @@ function AppShell() {
 		modal.close();
 		setScreen("auth");
 	}, [modal]);
+	const pendingApproval = queue[0] ?? null;
 	useKeyboard((key) => {
 		if (modal.isOpen) return;
 		if (key.ctrl && key.name === "," && screen !== "auth") {
@@ -2448,7 +2088,7 @@ function AppShell() {
 			return;
 		}
 		if (key.name !== "escape") return;
-		if (busy) return onAbort();
+		if (busy || pendingApproval) return onAbort();
 		if (screen === "chat") return onOpenSessions();
 		if (screen === "sessions") {
 			if (currentSession) setScreen("chat");
@@ -2461,9 +2101,10 @@ function AppShell() {
 		}
 		renderer.destroy();
 	});
-	const hints = useMemo(() => buildHints(screen, busy, currentSession), [
+	const hints = useMemo(() => buildHints(screen, busy, !!pendingApproval, currentSession), [
 		screen,
 		busy,
+		pendingApproval,
 		currentSession
 	]);
 	const contextUsage = useMemo(() => {
@@ -2509,7 +2150,9 @@ function AppShell() {
 					busy,
 					settings,
 					onSubmit: onSubmitPrompt,
-					session: currentSession
+					session: currentSession,
+					pending: pendingApproval,
+					onApproval: resolveHead
 				})
 			]
 		}), /* @__PURE__ */ jsx(Footer, {
@@ -2519,7 +2162,21 @@ function AppShell() {
 		})]
 	});
 }
-function buildHints(screen, busy, currentSession) {
+function buildHints(screen, busy, pending, currentSession) {
+	if (pending) return [
+		{
+			key: "↑↓",
+			label: "navigate"
+		},
+		{
+			key: "↵",
+			label: "select"
+		},
+		{
+			key: "esc",
+			label: "abort run"
+		}
+	];
 	if (busy) return [{
 		key: "esc",
 		label: "abort"
@@ -2576,6 +2233,101 @@ function buildHints(screen, busy, currentSession) {
 	];
 }
 //#endregion
+//#region src/tui/tree-sitter.ts
+/**
+* Register Tree-sitter parsers for the languages we'd like highlighted
+* inside fenced markdown code blocks.
+*
+* OpenTUI ships JS/TS/Markdown/Zig out of the box. Anything else needs a
+* Tree-sitter `.wasm` grammar + a `highlights.scm` capture query. We fetch
+* both from the upstream Tree-sitter grammar repos; OpenTUI's worker
+* caches them under its data path (`~/.local/share/opentui/...` by
+* default) so the download is a one-shot cost per language per machine.
+*
+* `aliases` lets a single grammar handle multiple fence info-strings — e.g.
+* `bash` also matches ` ```sh ` and ` ```shell `. The model picks fences
+* inconsistently across providers; aliases save us from missing highlights
+* on synonyms.
+*
+* Runtime caveats:
+*   - **First use** of a language triggers an HTTPS download. Subsequent
+*     uses (same machine, same data path) are instant.
+*   - **Compiled binaries** (`bun --compile`) still work — the data path
+*     is a writable OS dir, not the bunfs. Air-gapped deployments would
+*     need to either pre-populate the cache or migrate to local-file
+*     vendoring via `with { type: 'file' }` imports (see
+*     https://opentui.com/docs/reference/tree-sitter/#use-local-files).
+*   - If a download fails (offline / firewall), the language renders as
+*     plain `markup.raw.block` — no crash, just no syntax color.
+*
+* Versions are pinned in the WASM URLs so a grammar repo's `master`
+* landing a breaking change can't silently affect us.
+*/
+const EXTRA_PARSERS = [
+	{
+		filetype: "python",
+		aliases: ["py"],
+		wasm: "https://github.com/tree-sitter/tree-sitter-python/releases/download/v0.23.6/tree-sitter-python.wasm",
+		queries: { highlights: ["https://raw.githubusercontent.com/tree-sitter/tree-sitter-python/v0.23.6/queries/highlights.scm"] }
+	},
+	{
+		filetype: "bash",
+		aliases: [
+			"sh",
+			"shell",
+			"zsh"
+		],
+		wasm: "https://github.com/tree-sitter/tree-sitter-bash/releases/download/v0.23.3/tree-sitter-bash.wasm",
+		queries: { highlights: ["https://raw.githubusercontent.com/tree-sitter/tree-sitter-bash/v0.23.3/queries/highlights.scm"] }
+	},
+	{
+		filetype: "json",
+		wasm: "https://github.com/tree-sitter/tree-sitter-json/releases/download/v0.24.8/tree-sitter-json.wasm",
+		queries: { highlights: ["https://raw.githubusercontent.com/tree-sitter/tree-sitter-json/v0.24.8/queries/highlights.scm"] }
+	},
+	{
+		filetype: "rust",
+		aliases: ["rs"],
+		wasm: "https://github.com/tree-sitter/tree-sitter-rust/releases/download/v0.23.2/tree-sitter-rust.wasm",
+		queries: { highlights: ["https://raw.githubusercontent.com/tree-sitter/tree-sitter-rust/v0.23.2/queries/highlights.scm"] }
+	},
+	{
+		filetype: "go",
+		aliases: ["golang"],
+		wasm: "https://github.com/tree-sitter/tree-sitter-go/releases/download/v0.23.4/tree-sitter-go.wasm",
+		queries: { highlights: ["https://raw.githubusercontent.com/tree-sitter/tree-sitter-go/v0.23.4/queries/highlights.scm"] }
+	},
+	{
+		filetype: "yaml",
+		aliases: ["yml"],
+		wasm: "https://github.com/tree-sitter-grammars/tree-sitter-yaml/releases/download/v0.7.0/tree-sitter-yaml.wasm",
+		queries: { highlights: ["https://raw.githubusercontent.com/tree-sitter-grammars/tree-sitter-yaml/v0.7.0/queries/highlights.scm"] }
+	},
+	{
+		filetype: "html",
+		aliases: ["htm"],
+		wasm: "https://github.com/tree-sitter/tree-sitter-html/releases/download/v0.23.2/tree-sitter-html.wasm",
+		queries: { highlights: ["https://raw.githubusercontent.com/tree-sitter/tree-sitter-html/v0.23.2/queries/highlights.scm"] }
+	},
+	{
+		filetype: "css",
+		wasm: "https://github.com/tree-sitter/tree-sitter-css/releases/download/v0.23.2/tree-sitter-css.wasm",
+		queries: { highlights: ["https://raw.githubusercontent.com/tree-sitter/tree-sitter-css/v0.23.2/queries/highlights.scm"] }
+	}
+];
+let registered = false;
+/**
+* Register the extra Tree-sitter parsers + start the worker. Idempotent —
+* subsequent calls are no-ops. Safe to invoke from `runTui()` and from
+* composition hosts that mount `<App>` directly.
+*/
+async function setupTreeSitter() {
+	if (registered) return;
+	registered = true;
+	addDefaultParsers(EXTRA_PARSERS);
+	await getTreeSitterClient().initialize();
+}
+//#endregion
 //#region src/tui/index.tsx
 /**
 * Tracks whether `runTui` has been invoked in this process. `createCliRenderer`
@@ -2611,7 +2363,8 @@ let runTuiInvoked = false;
 * to `runTui({ storageDir, prefix })`.
 *
 * ```ts
-* import { BUILTIN_PROVIDERS, runTui } from 'zidane/tui'
+* import { BUILTIN_PROVIDERS } from 'zidane/chat'
+* import { runTui } from 'zidane/tui'
 * import { createRemoteStore } from 'zidane/session'  // for the `store` option
 *
 * await runTui()                                       // ~/.zidane/sessions.db + state.json
@@ -2624,7 +2377,10 @@ let runTuiInvoked = false;
 async function runTui(options = {}) {
 	if (runTuiInvoked) throw new Error("runTui() can only be invoked once per process. Compose `<App config={resolveConfig(...)} />` against your own renderer if you need to run multiple TUIs in the same lifetime.");
 	runTuiInvoked = true;
-	await init();
+	await setupTreeSitter().catch((err) => {
+		const cause = err instanceof Error ? err.message : String(err);
+		process.stderr.write(`[zidane/tui] tree-sitter setup failed: ${cause}\n`);
+	});
 	const config = resolveConfig(options);
 	let done = () => {};
 	const exited = new Promise((resolve) => {
@@ -2638,6 +2394,6 @@ async function runTui(options = {}) {
 	process.exit(0);
 }
 //#endregion
-export { App, AuthScreen, BUILTIN_PROVIDERS, COLOR, ChatScreen, ConfigProvider, DEFAULT_SETTINGS, Footer, MD_STYLE, Modal, ModalRoot, ModelPickerModal, SELECT_THEME, SessionsScreen, SettingsModal, SettingsProvider, Spinner, Transcript, ageString, anthropicDescriptor, applyApiKeyEnv, cerebrasDescriptor, createStateStore, createTuiStore, credKeyOf, credentialsPath, detectAuth, eventsFromTurns, finalizeStreamingMarkdown, finalizeStreamingMarkdownForOwner, fmtTokens, getContextWindow, lastContextSizeFromTurns, listSessionMeta, loadState, marginTopFor, modelsForDescriptor, onInputSubmit, openaiDescriptor, openrouterDescriptor, piIdOf, readCredentials, readProviderCredential, removeProviderCredential, resolveConfig, runOAuthLogin, runTui, saveState, setProviderCredential, shortId, supportsOAuth, titleFromTurns, toolCallPreview, toolResultText, turnContextSize, useConfig, useModal, useModalAwareFocus, useSettings, useStreamBuffer, writeCredentials };
+export { App, AuthScreen, ChatScreen, Footer, Modal, ModalRoot, ModelPickerModal, SessionsScreen, SettingsModal, Spinner, Transcript, buildMdStyle, isVisible, marginTopFor, onInputSubmit, runTui, useMdStyle, useModal, useModalAwareFocus };
 
 //# sourceMappingURL=tui.js.map