zidane 4.1.8 → 5.0.0

package/dist/tui.js

@@ -1,11 +1,220 @@
-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 { $ 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";
+import { d as createAgent } from "./tools-CLazLRb4.js";
+import { n as formatTokenUsage } from "./stats-DZIsGqzu.js";
+import { n as loadSession, t as createSession } from "./session-791hhrFa.js";
+import { createTuiStore } from "./session/sqlite.js";
+import { C as useSafeModeQueue, Ct as findGitRoot, D as isOnSafelist, E as getSafelist, Et as uniqueSkillNamesFromReferences, F as supportsOAuth, Ft as detectAuth, G as shortId, H as ageString, I as buildMcpServers, J as DEFAULT_SETTINGS, K as listProjectFiles, N as splitPromptSegments, Ot as createFilesCompletionProvider, P as runOAuthLogin, Pt as useCompletion, Q as useSettings, R as discoverProjectMcps, S as useSafeModeActions, St as toolResultText, T as addToSafelist, Tt as createSkillsCompletionProvider, U as compactPath, V as generateSessionTitle, Vt as setProviderCredential, W as fmtTokens, X as SETTINGS_TOGGLES, Y as SETTINGS_CHOICES, Z as SettingsProvider, _ as discoverProjectSkills, a as ThemeProvider, b as writeSessionExport, c as useSurfaces, ct as ConfigProvider, d as finalizeStreamingMarkdown, f as finalizeStreamingMarkdownForOwner, ft as deriveSessionTitle, g as defaultSkillScanPaths, h as buildSkillsConfig, ht as listSessionMeta, i as turnAsText, j as suggestSafelistEntry, lt as useConfig, m as useStreamBuffer, mt as lastContextSizeFromTurns, n as deleteTurnSafely, nt as resolveTheme, o as useColors, p as turnContextSize, pt as eventsFromTurns, q as useEnabledToggleSet, qt as getContextWindow, r as truncateTurnsAt, s as useSelectStyle, tt as resolveChipColor, u as useTheme, ut as resolveConfig, vt as selectableTurnIds, x as SafeModeProvider, xt as toolCallPreview, yt as stripSpawnTokensLine } from "./turn-operations-5aQu4dJg.js";
+import { Buffer } from "node:buffer";
+import { createContext, createElement, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { RGBA, SyntaxStyle, addDefaultParsers, createCliRenderer, defaultTextareaKeyBindings, getTreeSitterClient } from "@opentui/core";
 import { createRoot, useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
+import { Fragment, jsx, jsxs } from "@opentui/react/jsx-runtime";
+//#region src/tui/modal.tsx
+const ModalContext = createContext(null);
+function ModalRoot({ children }) {
+	const [active, setActive] = useState(null);
+	const api = useMemo(() => ({
+		open: (node) => setActive(node),
+		close: () => setActive(null),
+		get isOpen() {
+			return active !== null;
+		}
+	}), [active]);
+	return /* @__PURE__ */ jsxs(ModalContext.Provider, {
+		value: api,
+		children: [/* @__PURE__ */ jsx("box", {
+			style: {
+				flexDirection: "column",
+				flexGrow: 1
+			},
+			children
+		}), active && /* @__PURE__ */ jsx("box", {
+			style: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				alignItems: "center",
+				justifyContent: "center",
+				zIndex: 100
+			},
+			children: active
+		})]
+	});
+}
+function useModal() {
+	const ctx = useContext(ModalContext);
+	if (!ctx) throw new Error("useModal must be used inside <ModalRoot>");
+	return ctx;
+}
+/**
+* Focus computed against the modal layer.
+*
+* Pass a component's preferred focus state and this returns `false` whenever a
+* modal is open — so focused inputs (textarea, selects) release their focus and
+* stop intercepting keys behind the overlay. Pair with `focusable={false}` on
+* "passive" focusables (scrollbox) so the renderer doesn't cycle focus into
+* them when the primary input blurs.
+*/
+function useModalAwareFocus(preferred = true) {
+	const { isOpen } = useModal();
+	return preferred && !isOpen;
+}
+/**
+* Responsive modal — picks a width (and optionally a height) based on the
+* live terminal size.
+*
+* - On a wide terminal, the modal grows to `maxWidth` so descriptions sit on
+*   one line and don't wrap.
+* - On a narrow terminal, the modal shrinks down to `minWidth`, keeping a
+*   small horizontal margin from the screen edges. Text inside wraps naturally.
+* - When `maxHeight` is set, the same tier logic applies on the vertical
+*   axis — anything beyond is the consumer's job (typically a `scrollbox`
+*   child for long content).
+*
+* Uses `useTerminalDimensions()` so it reflows on `SIGWINCH` without remount.
+*/
+function Modal({ title, bottomTitle, onClose, disableEscape = false, children, maxWidth = 92, minWidth = 44, maxHeight, horizontalMargin = 4, verticalMargin = 2 }) {
+	const ctx = useContext(ModalContext);
+	const dismiss = onClose ?? ctx?.close;
+	const COLOR = useColors();
+	const SURFACE = useSurfaces();
+	useKeyboard((key) => {
+		if (key.name === "escape" && !disableEscape) dismiss?.();
+	});
+	const { width: termWidth, height: termHeight } = useTerminalDimensions();
+	const width = Math.max(minWidth, Math.min(maxWidth, termWidth - horizontalMargin * 2));
+	const height = maxHeight === void 0 ? void 0 : Math.min(maxHeight, Math.max(0, termHeight - verticalMargin * 2));
+	return /* @__PURE__ */ jsx("box", {
+		title: title ? ` ${title} ` : void 0,
+		bottomTitle: bottomTitle ? ` ${bottomTitle} ` : void 0,
+		bottomTitleAlignment: "right",
+		style: {
+			border: true,
+			borderColor: COLOR.borderActive,
+			backgroundColor: SURFACE.modal,
+			paddingTop: 1,
+			paddingBottom: 1,
+			paddingLeft: 2,
+			paddingRight: 2,
+			width,
+			...height !== void 0 ? { height } : {},
+			flexDirection: "column",
+			gap: 1
+		},
+		children
+	});
+}
+//#endregion
+//#region src/tui/agent-picker.tsx
+/** Cap the scroll window — a long custom registry shouldn't push the modal off-screen. */
+const VISIBLE_ROW_CAP$1 = 10;
+/**
+* Modal that lists the registered {@link AgentProfile}s and lets the user
+* pick one. Rows show: `● selected · label  description`.
+*
+* The accent column is intentionally compact (single-char marker) — the
+* profile's `accent` color is read from the active theme so Build and Plan
+* stand apart at a glance without taking horizontal space.
+*
+* Used by `App` (Ctrl+A binding) and exported for hosts that want to drive
+* agent switching from elsewhere in their own composition.
+*/
+function AgentPickerModal({ agents, currentAgentId, onPick }) {
+	const COLOR = useColors();
+	const SELECT_THEME = useSelectStyle();
+	const profiles = useMemo(() => Object.values(agents), [agents]);
+	const initialIndex = useMemo(() => profiles.findIndex((p) => p.id === currentAgentId), [profiles, currentAgentId]);
+	const options = useMemo(() => profiles.map((p) => ({
+		name: `${p.id === currentAgentId ? "● " : "  "}${p.label}`,
+		description: p.description,
+		value: p.id
+	})), [profiles, currentAgentId]);
+	if (profiles.length === 0) return /* @__PURE__ */ jsx(EmptyState$2, {});
+	const visibleRows = Math.min(options.length, VISIBLE_ROW_CAP$1);
+	const currentMissing = initialIndex < 0;
+	const safeIndex = currentMissing ? 0 : initialIndex;
+	return /* @__PURE__ */ jsxs(Modal, {
+		title: "select agent",
+		children: [
+			currentMissing && /* @__PURE__ */ jsx("text", {
+				fg: COLOR.warn,
+				children: `Current agent "${currentAgentId}" is not in this registry — pick one below.`
+			}),
+			/* @__PURE__ */ jsx("select", {
+				...SELECT_THEME,
+				focused: true,
+				options,
+				wrapSelection: true,
+				selectedIndex: safeIndex,
+				showScrollIndicator: options.length > visibleRows,
+				style: { height: visibleRows },
+				onSelect: (_idx, option) => {
+					if (option) onPick(option.value);
+				}
+			}),
+			/* @__PURE__ */ jsxs("text", {
+				fg: COLOR.mute,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.warn,
+						children: "↑↓"
+					}),
+					" navigate · ",
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.warn,
+						children: "↵"
+					}),
+					" select · ",
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.warn,
+						children: "esc"
+					}),
+					" close"
+				]
+			})
+		]
+	});
+}
+function EmptyState$2() {
+	const COLOR = useColors();
+	return /* @__PURE__ */ jsxs(Modal, {
+		title: "select agent",
+		children: [/* @__PURE__ */ jsx("text", {
+			fg: COLOR.dim,
+			children: "No agents registered."
+		}), /* @__PURE__ */ jsxs("text", {
+			fg: COLOR.mute,
+			children: [
+				"Pass an",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " agents "
+				}),
+				"registry to",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " runTui({ agents }) "
+				}),
+				"to populate this list."
+			]
+		})]
+	});
+}
+/**
+* Resolve a profile's `accent` token to a concrete theme color via the
+* caller's color palette. Exposed for the Footer badge so all surfaces
+* stay in sync with the picker's row tinting.
+*/
+function accentColor(accent, COLOR) {
+	switch (accent) {
+		case "brand": return COLOR.brand;
+		case "warn": return COLOR.warn;
+		case "model": return COLOR.model;
+		default: return COLOR.accent;
+	}
+}
+//#endregion
 //#region src/tui/theme.ts
 /**
 * Convert the renderer-agnostic `Theme.syntax` map (hex strings + plain
@@ -29,14 +238,123 @@ function buildMdStyle(theme) {
 	}
 	return SyntaxStyle.fromStyles(styles);
 }
+const MdStyleContext = createContext(null);
+function MdStyleProvider({ children }) {
+	const theme = useTheme();
+	const style = useMemo(() => buildMdStyle(theme), [theme]);
+	return createElement(MdStyleContext.Provider, { value: style }, children);
+}
 /**
-* 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.
+* Active markdown / syntax-highlighting style. Returns a single shared
+* `SyntaxStyle` instance for the active theme — built once at provider
+* mount, re-built on theme switch. A `Settings.theme` flip re-paints every
+* `<markdown>` that reads this hook.
+*
+* Throws if used outside `<MdStyleProvider>` so a missing wiring shows up
+* loudly in development rather than silently rendering plain text.
 */
 function useMdStyle() {
+	const style = useContext(MdStyleContext);
+	if (!style) throw new Error("useMdStyle must be used inside <MdStyleProvider>");
+	return style;
+}
+const CHIP_TOKEN_PREFIX = "completion.reference";
+/** Per-kind token name in the chip `SyntaxStyle` — e.g. `completion.reference.skills`. */
+function chipTokenFor(providerId) {
+	return `${CHIP_TOKEN_PREFIX}.${providerId}`;
+}
+/** Fallback token registered for every theme — always resolves to a styleId. */
+const CHIP_TOKEN_DEFAULT = chipTokenFor("default");
+function buildChipStyle(theme) {
+	const styles = {};
+	for (const [providerId, chip] of Object.entries(theme.surfaces.chips)) {
+		if (!chip) continue;
+		styles[chipTokenFor(providerId)] = {
+			fg: RGBA.fromHex(chip.fg),
+			bg: RGBA.fromHex(chip.bg)
+		};
+	}
+	return SyntaxStyle.fromStyles(styles);
+}
+/**
+* Resolve the styleId for a chip of the given provider id, falling back
+* to {@link CHIP_TOKEN_DEFAULT} when the theme has no kind-specific
+* entry. Returns `null` only when the style was built from a malformed
+* theme (missing `default`) — every built-in theme satisfies the
+* contract, so callers can treat `null` as "skip highlight".
+*/
+function resolveChipStyleId(style, providerId) {
+	return style.getStyleId(chipTokenFor(providerId)) ?? style.getStyleId(CHIP_TOKEN_DEFAULT);
+}
+/**
+* Convert a JS string offset in `text` to the column offset expected by
+* OpenTUI's `addHighlightByCharRange`. The native API takes display-
+* column offsets that EXCLUDE newlines (each `\n` consumes zero
+* columns) — mirroring the convention documented in `@opentui/core`'s
+* extmark wrapper. Skipping the conversion paints chips at the wrong
+* column once the prompt spans multiple lines, drifting one column
+* further left per preceding newline.
+*
+* Single-cell text covers every chip kind the built-in providers emit
+* (slash-commands + `@`-prefixed file paths). Wide-cell graphemes
+* (emoji, CJK) would need `stringWidth` accounting; left as a TODO
+* until a chip kind actually carries them.
+*/
+function offsetToHighlightColumn(text, offset) {
+	const clamped = Math.max(0, Math.min(offset, text.length));
+	let newlines = 0;
+	for (let i = 0; i < clamped; i++) if (text.charCodeAt(i) === 10) newlines++;
+	return clamped - newlines;
+}
+const ChipStyleContext = createContext(null);
+function ChipStyleProvider({ children }) {
 	const theme = useTheme();
-	return useMemo(() => buildMdStyle(theme), [theme]);
+	const style = useMemo(() => buildChipStyle(theme), [theme]);
+	return createElement(ChipStyleContext.Provider, { value: style }, children);
+}
+/**
+* Active chip-highlight style for the prompt textarea. Single shared
+* instance per theme so the underlying buffer style table is re-allocated
+* only on a theme switch.
+*/
+function useChipStyle() {
+	const style = useContext(ChipStyleContext);
+	if (!style) throw new Error("useChipStyle must be used inside <ChipStyleProvider>");
+	return style;
+}
+/**
+* Sync per-range chip highlights onto a textarea on every `references`
+* change. Encapsulates the OpenTUI plumbing — `clearAllHighlights` +
+* one `addHighlightByCharRange` per ref, with JS→column-offset
+* translation — so the prompt block stays focused on UX state.
+*
+* The hook owns the contract documented in
+* {@link offsetToHighlightColumn}: refs carry JS string offsets that
+* include newlines; the edit buffer's highlight API takes display
+* columns that exclude them. Skipping this conversion is the difference
+* between stable multi-line chips and the one-column-per-newline drift
+* we shipped in the first cut.
+*/
+function useChipHighlights(textareaRef, references, chipStyle) {
+	useEffect(() => {
+		const ta = textareaRef.current;
+		if (!ta) return;
+		ta.clearAllHighlights();
+		const text = ta.plainText;
+		for (const ref of references) {
+			const styleId = resolveChipStyleId(chipStyle, ref.providerId);
+			if (styleId == null) continue;
+			ta.addHighlightByCharRange({
+				start: offsetToHighlightColumn(text, ref.start),
+				end: offsetToHighlightColumn(text, ref.end),
+				styleId
+			});
+		}
+	}, [
+		textareaRef,
+		references,
+		chipStyle
+	]);
 }
 //#endregion
 //#region src/tui/components.tsx
@@ -46,20 +364,31 @@ function useMdStyle() {
 * its content changes (we only ever recreate the streaming-markdown tail).
 *
 * The outer wrapper handles top-margin per kind (and per neighbor) so spacing
-* is the single source of truth for inter-event breathing room.
+* is the single source of truth for inter-event breathing room. Selected
+* rows fill with `surfaces.selection` and absorb their `marginTop` as
+* `paddingTop` — that keeps the gap above colored too so consecutive
+* same-turn events read as one continuous highlighted block instead of a
+* striped list.
 */
-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
-	})
-}));
+const EventLine = memo(({ event, previous, depthOffset = 0, selected = false, anchorId }) => {
+	const SURFACE = useSurfaces();
+	const gap = marginTopFor(event, previous);
+	return /* @__PURE__ */ jsx("box", {
+		id: anchorId,
+		style: {
+			marginTop: selected ? 0 : gap,
+			paddingTop: selected ? gap : 0,
+			backgroundColor: selected ? SURFACE.selection : void 0,
+			alignSelf: "stretch",
+			flexShrink: 0,
+			flexDirection: "column"
+		},
+		children: /* @__PURE__ */ jsx(EventLineImpl, {
+			event,
+			depthOffset
+		})
+	});
+});
 /**
 * `@opentui/react` extends `React.JSX.IntrinsicElements`, so `onSubmit` on `<input>`
 * gets intersected with the DOM `SubmitEvent` shape and demands an unhelpful overload.
@@ -69,9 +398,18 @@ const EventLine = memo(({ event, previous, depthOffset = 0 }) => /* @__PURE__ */
 function onInputSubmit(handler) {
 	return handler;
 }
-function Footer({ hints, picked, context }) {
-	const COLOR = useColors();
-	return /* @__PURE__ */ jsxs("box", {
+/**
+* Footer status bar. Renders as a single row when the terminal is wide
+* enough, otherwise stacks the context indicator beneath the hint row.
+* Width tiering is driven by plain-text length estimates — close enough
+* since the segments are ASCII-heavy.
+*/
+function Footer({ hints, context }) {
+	const { width } = useTerminalDimensions();
+	const inner = Math.max(0, width - 2);
+	const hW = hintsLength(hints);
+	const cW = context ? contextIndicatorLength(context) : 0;
+	if (hW + (cW > 0 ? cW + 1 : 0) <= inner) return /* @__PURE__ */ jsxs("box", {
 		style: {
 			flexDirection: "row",
 			height: 1,
@@ -79,62 +417,69 @@ function Footer({ hints, picked, context }) {
 			paddingRight: 1
 		},
 		children: [
-			/* @__PURE__ */ jsx("text", {
-				fg: COLOR.dim,
-				children: hints.map((h, i) => /* @__PURE__ */ jsxs("span", { children: [
-					i > 0 && /* @__PURE__ */ jsx("span", {
-						fg: COLOR.mute,
-						children: " · "
-					}),
-					/* @__PURE__ */ jsx("span", {
-						fg: COLOR.warn,
-						children: h.key
-					}),
-					/* @__PURE__ */ jsx("span", {
-						fg: COLOR.dim,
-						children: ` ${h.label}`
-					})
-				] }, i))
-			}),
-			picked && /* @__PURE__ */ jsx(ProviderBadge, { picked }),
+			/* @__PURE__ */ jsx(HintsText, { hints }),
 			/* @__PURE__ */ jsx("box", { style: { flexGrow: 1 } }),
 			context && /* @__PURE__ */ jsx(ContextIndicator, { context })
 		]
 	});
+	return /* @__PURE__ */ jsxs("box", {
+		style: {
+			flexDirection: "column",
+			paddingLeft: 1,
+			paddingRight: 1
+		},
+		children: [/* @__PURE__ */ jsx("box", {
+			style: {
+				flexDirection: "row",
+				height: 1
+			},
+			children: /* @__PURE__ */ jsx(HintsText, { hints })
+		}), context && /* @__PURE__ */ jsxs("box", {
+			style: {
+				flexDirection: "row",
+				height: 1
+			},
+			children: [/* @__PURE__ */ jsx("box", { style: { flexGrow: 1 } }), /* @__PURE__ */ jsx(ContextIndicator, { context })]
+		})]
+	});
 }
-function ProviderBadge({ picked }) {
+function HintsText({ hints }) {
 	const COLOR = useColors();
-	const source = picked.provider.methods[0].source;
-	return /* @__PURE__ */ jsxs("text", {
+	return /* @__PURE__ */ jsx("text", {
 		fg: COLOR.dim,
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				fg: COLOR.mute,
-				children: " · "
-			}),
-			/* @__PURE__ */ jsx("span", {
-				fg: COLOR.accent,
-				children: picked.provider.label
-			}),
-			/* @__PURE__ */ jsx("span", {
-				fg: COLOR.mute,
-				children: " · "
-			}),
-			/* @__PURE__ */ jsx("span", {
-				fg: COLOR.model,
-				children: picked.model
-			}),
-			/* @__PURE__ */ jsx("span", {
-				fg: COLOR.mute,
-				children: " · "
-			}),
-			/* @__PURE__ */ jsx("span", {
-				fg: source === "oauth" ? COLOR.accent : COLOR.warn,
-				children: source
-			})
-		]
+		children: renderHintSpans(hints, COLOR)
 	});
 }
+/**
+* Pure renderer for a list of {@link Hint}s as colored spans —
+* `<key1> <label1> · <key2> <label2> · …` with warn/dim/mute colors.
+*
+* Returns spans only (no enclosing `<text>`, no leading / trailing
+* whitespace) so the caller can wrap it in whichever container fits
+* their surface: the bottom-bar footer uses a single-row `<text>`, the
+* prompt-box overlay wraps it with leading + trailing spaces so the
+* outermost cells punch through the border like a native title would.
+*
+* Pattern matches `renderRefSpans` below — pure function over an opaque
+* `ThemeColors`, no internal hook calls so it composes inside any
+* `<text>` regardless of where the parent grabbed its palette.
+*/
+function renderHintSpans(hints, COLOR) {
+	return hints.map((h, i) => /* @__PURE__ */ jsxs("span", { children: [
+		i > 0 && /* @__PURE__ */ jsx("span", {
+			fg: COLOR.mute,
+			children: " · "
+		}),
+		/* @__PURE__ */ jsx("span", {
+			fg: h.keyColor ?? COLOR.warn,
+			children: h.key
+		}),
+		/* @__PURE__ */ jsx("span", {
+			fg: h.labelColor ?? COLOR.dim,
+			children: ` ${h.label}`
+		})
+	] }, i));
+}
 function ContextIndicator({ context }) {
 	const COLOR = useColors();
 	const ratio = context.max > 0 ? context.used / context.max : 0;
@@ -162,11 +507,156 @@ function ContextIndicator({ context }) {
 		]
 	});
 }
-const SPINNER_FRAMES = [
-	"⠋",
-	"⠙",
-	"⠹",
-	"⠸",
+/**
+* Width budget reservations applied to the responsive math in
+* {@link TitleOverlay}. Each title / meta segment owns a leading +
+* trailing mute space (the cells that punch through the underlying
+* border `─`); a 2-cell `GAP` keeps title and meta visually distinct
+* when both render in the same row.
+*/
+const TITLE_OVERLAY_WRAP = 2;
+const TITLE_OVERLAY_META_WRAP = 2;
+const TITLE_OVERLAY_GAP = 2;
+/**
+* Colored title for a full-screen bordered surface. The `title` slot
+* rides `titleColor` (defaults to `COLOR.brand` — the theme's primary
+* anchor) on the LEFT of the top border; the optional `meta` slot
+* rides on the RIGHT.
+*
+* `meta` accepts either:
+*   - a plain `string` → rendered entirely in `COLOR.dim` (the simple
+*     "single dim label" case, e.g. `"5 sessions"`).
+*   - a {@link MetaSegment} array → rendered concatenated with each
+*     segment's own color (lets a stat like turn count stand out from
+*     the surrounding separators).
+*
+* Responsive behavior (driven by `useTerminalDimensions`):
+*   - Both fit → render both with a 2-cell visual gap between them.
+*   - Meta doesn't fit → drop meta; title takes the full budget.
+*   - Title doesn't fit → truncate with a trailing `…`.
+*   - Terminal is degenerately narrow → render nothing.
+*
+* The width math assumes the immediate parent fills the screen's
+* content area (the standard `flexGrow: 1` flex column). Hosts running
+* the bordered box inside a narrower container should pass `parentWidth`
+* to override the terminal-width assumption.
+*
+* @example
+* ```tsx
+* <box style={{ flexDirection: 'column', flexGrow: 1 }}>
+*   <box style={{ border: true, flexGrow: 1 }}>...</box>
+*   <TitleOverlay
+*     title="my session"
+*     meta={[
+*       { text: '#abcd' },
+*       { text: ' · ', color: COLOR.mute },
+*       { text: '5 turns', color: COLOR.warn },
+*     ]}
+*   />
+* </box>
+* ```
+*/
+function TitleOverlay({ title, meta = null, titleColor, parentWidth }) {
+	const COLOR = useColors();
+	const { width: termWidth } = useTerminalDimensions();
+	const fg = titleColor ?? COLOR.brand;
+	const W = Math.max(0, parentWidth ?? termWidth - 2);
+	const inner = Math.max(0, W - 2);
+	const metaLen = metaSegmentsLength(meta);
+	const showMeta = meta != null && metaLen > 0 && title.length + TITLE_OVERLAY_WRAP + TITLE_OVERLAY_GAP + metaLen + TITLE_OVERLAY_META_WRAP <= inner;
+	const titleBudget = showMeta ? inner - (metaLen + TITLE_OVERLAY_META_WRAP) - TITLE_OVERLAY_GAP - TITLE_OVERLAY_WRAP : inner - TITLE_OVERLAY_WRAP;
+	const visibleTitle = titleBudget <= 0 ? "" : truncateTrailing(title, titleBudget);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [visibleTitle && /* @__PURE__ */ jsxs("text", {
+		style: {
+			position: "absolute",
+			top: 0,
+			left: 1
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: " "
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg,
+				children: visibleTitle
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: " "
+			})
+		]
+	}), showMeta && meta && /* @__PURE__ */ jsxs("text", {
+		style: {
+			position: "absolute",
+			top: 0,
+			right: 1
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: " "
+			}),
+			typeof meta === "string" ? /* @__PURE__ */ jsx("span", {
+				fg: COLOR.dim,
+				children: meta
+			}) : meta.map((seg, i) => /* @__PURE__ */ jsx("span", {
+				fg: seg.color ?? COLOR.dim,
+				children: seg.text
+			}, i)),
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: " "
+			})
+		]
+	})] });
+}
+/** Total printed-character length of a {@link TitleOverlay} `meta` value. */
+function metaSegmentsLength(meta) {
+	if (meta == null) return 0;
+	if (typeof meta === "string") return meta.length;
+	return meta.reduce((sum, seg) => sum + seg.text.length, 0);
+}
+/**
+* Truncate `text` to at most `max` characters, replacing the trailing
+* overflow with `…`. Edge cases:
+*   - `max <= 0` → empty string (no room to render at all).
+*   - `max === 1` → just the ellipsis glyph.
+*   - `text.length <= max` → unchanged.
+*
+* Trailing-style truncation matches the natural read order of titles:
+* the prefix carries enough signal to identify the surface.
+*
+* Exported for unit-tests; consumers should normally lean on
+* {@link TitleOverlay} instead of calling this directly.
+*/
+function truncateTrailing(text, max) {
+	if (max <= 0) return "";
+	if (text.length <= max) return text;
+	if (max === 1) return "…";
+	return `${text.slice(0, max - 1)}…`;
+}
+/**
+* Plain-text width estimate for a list of {@link Hint}s rendered via
+* `renderHintSpans` — `<key> <label> · <key> <label> · …`. Exported so
+* the prompt-box overlay (in `screens.tsx`) can run the same responsive
+* math as the bottom-bar footer when deciding whether trigger hints
+* fit. Pure / total.
+*/
+function hintsLength(hints) {
+	if (hints.length === 0) return 0;
+	return hints.reduce((sum, h, i) => sum + h.key.length + 1 + h.label.length + (i > 0 ? 3 : 0), 0);
+}
+function contextIndicatorLength(context) {
+	const ratio = context.max > 0 ? context.used / context.max : 0;
+	const pct = Math.round(ratio * 100);
+	return 4 + fmtTokens(context.used).length + 3 + fmtTokens(context.max).length + 2 + String(pct).length + 2;
+}
+const SPINNER_FRAMES = [
+	"⠋",
+	"⠙",
+	"⠹",
+	"⠸",
 	"⠼",
 	"⠴",
 	"⠦",
@@ -190,10 +680,50 @@ function Spinner({ label }) {
 		})]
 	});
 }
-function Transcript({ events, settings }) {
+/**
+* Minimum scrollbar thumb size, in half-block units (OpenTUI's
+* `SliderRenderable` renders the vertical thumb at 2 half-blocks per
+* character cell). `8` half-blocks = 4 character cells — always large
+* enough to read + grab with the mouse, never so large that it
+* dominates the track on short transcripts.
+*/
+const MIN_THUMB_HALF_BLOCKS = 8;
+function Transcript({ events, settings, selectedTurnId = null }) {
 	const items = useMemo(() => partitionTranscript(events, settings), [events, settings]);
+	const scrollboxRef = useRef(null);
+	useEffect(() => {
+		const scrollbox = scrollboxRef.current;
+		if (!scrollbox) return;
+		const slider = scrollbox.verticalScrollBar?.slider;
+		if (!slider || typeof slider.getVirtualThumbSize !== "function") return;
+		const original = slider.getVirtualThumbSize.bind(slider);
+		slider.getVirtualThumbSize = function() {
+			const upstream = original();
+			const virtualTrackSize = slider.height * 2;
+			return Math.min(virtualTrackSize, Math.max(MIN_THUMB_HALF_BLOCKS, upstream));
+		};
+		return () => {
+			slider.getVirtualThumbSize = original;
+		};
+	}, []);
+	const anchors = useMemo(() => computeTurnAnchors(items), [items]);
+	useEffect(() => {
+		if (!selectedTurnId) return;
+		const scrollbox = scrollboxRef.current;
+		if (!scrollbox) return;
+		const handle = requestAnimationFrame(() => {
+			if (selectedTurnId === anchors.lastTurnId) {
+				scrollbox.scrollTop = scrollbox.scrollHeight;
+				return;
+			}
+			const id = anchors.idByTurn.get(selectedTurnId);
+			if (id) scrollbox.scrollChildIntoView(id);
+		});
+		return () => cancelAnimationFrame(handle);
+	}, [selectedTurnId, anchors]);
 	if (items.length === 0) return /* @__PURE__ */ jsx(EmptyState$1, {});
 	return /* @__PURE__ */ jsx("scrollbox", {
+		ref: scrollboxRef,
 		focusable: false,
 		style: {
 			flexGrow: 1,
@@ -204,14 +734,53 @@ function Transcript({ events, settings }) {
 		stickyStart: "bottom",
 		children: items.map((item, i) => item.kind === "event" ? /* @__PURE__ */ jsx(EventLine, {
 			event: item.event,
-			previous: item.previous
+			previous: item.previous,
+			selected: selectedTurnId !== null && item.event.turnId === selectedTurnId,
+			anchorId: anchors.ids[i][0]
 		}, i) : /* @__PURE__ */ jsx(SubagentBlock, {
 			events: item.events,
-			previous: item.previous
+			previous: item.previous,
+			selectedTurnId,
+			anchorIds: anchors.ids[i]
 		}, i))
 	});
 }
 /**
+* Per-item anchor ids for auto-scroll. Walks `items` in render order and,
+* for each event, returns either:
+*   - `'turn-anchor-<turnId>'` — the first event of this turn (the
+*     scrollbox's target).
+*   - `undefined` — later event of an already-tagged turn (or a synthetic
+*     event with no `turnId`).
+*
+* `ids[i]` is a tuple per item: length 1 for plain events, length N for
+* subagent runs (one entry per inner event). `idByTurn` is the inverse
+* lookup used by the scroll effect. `lastTurnId` is the most-recently-
+* rendered turn — the scroll effect special-cases it to snap to bottom.
+*
+* Exported so the anchor-tagging matrix can be unit-tested without rendering.
+*/
+function computeTurnAnchors(items) {
+	const idByTurn = /* @__PURE__ */ new Map();
+	let lastTurnId;
+	const tag = (turnId) => {
+		if (!turnId) return void 0;
+		lastTurnId = turnId;
+		if (idByTurn.has(turnId)) return void 0;
+		const id = `turn-anchor-${turnId}`;
+		idByTurn.set(turnId, id);
+		return id;
+	};
+	const ids = [];
+	for (const item of items) if (item.kind === "event") ids.push([tag(item.event.turnId)]);
+	else ids.push(item.events.map((e) => tag(e.turnId)));
+	return {
+		idByTurn,
+		ids,
+		lastTurnId
+	};
+}
+/**
 * 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` /
@@ -292,7 +861,7 @@ function partitionTranscript(events, settings) {
 * indented twice. Grandchildren (depth ≥ 2) still indent further, so
 * nested subagents remain visually distinct.
 */
-function SubagentBlock({ events, previous }) {
+function SubagentBlock({ events, previous, selectedTurnId = null, anchorIds }) {
 	const COLOR = useColors();
 	const childIds = useMemo(() => {
 		const set = /* @__PURE__ */ new Set();
@@ -318,7 +887,9 @@ function SubagentBlock({ events, previous }) {
 		children: events.map((evt, i) => /* @__PURE__ */ jsx(EventLine, {
 			event: evt,
 			previous: events[i - 1],
-			depthOffset: 1
+			depthOffset: 1,
+			selected: selectedTurnId !== null && evt.turnId === selectedTurnId,
+			anchorId: anchorIds?.[i]
 		}, i))
 	});
 }
@@ -372,6 +943,7 @@ function rowStyle(paddingLeft) {
 */
 const MARGIN_TOP = {
 	"separator": 0,
+	"user-prompt": 1,
 	"info": 1,
 	"thinking": 0,
 	"tool": 1,
@@ -414,7 +986,17 @@ function EventLineImpl({ event, depthOffset = 0 }) {
 	const child = isChild(event);
 	switch (event.kind) {
 		case "separator": return /* @__PURE__ */ jsx("text", { children: " " });
-		case "info": return /* @__PURE__ */ jsx(UserPromptBlock, { text: safeText });
+		case "user-prompt": return /* @__PURE__ */ jsx(UserPromptBlock, {
+			text: safeText,
+			refs: event.refs
+		});
+		case "info": return /* @__PURE__ */ jsx("box", {
+			style: row,
+			children: /* @__PURE__ */ jsx("text", {
+				fg: COLOR.dim,
+				children: safeText
+			})
+		});
 		case "thinking": return /* @__PURE__ */ jsx("box", {
 			style: row,
 			children: /* @__PURE__ */ jsx("text", {
@@ -497,19 +1079,65 @@ function EventLineImpl({ event, depthOffset = 0 }) {
 		default: return /* @__PURE__ */ jsx("text", { children: safeText });
 	}
 }
-/** User prompt — bordered to rhyme with the prompt input box below. */
-function UserPromptBlock({ text }) {
+/**
+* User prompt — bordered to rhyme with the prompt input box below.
+*
+* No refs → plain text, rendered as a single `<text>` node. Mixed text +
+* refs → flex-row of word-sized atomic segments; each chip is its own
+* `<text>` painted with the theme's per-provider `chips[providerId]`
+* pair (or `chips.default` when the provider id isn't themed).
+*
+* Why flex-row instead of `<span>` siblings inside `<text>`: the OpenTUI
+* text buffer's "word" wrap breaks at every punctuation boundary, so a
+* file path like `@src/index.ts` would split between line 1 (`@src/index.`)
+* and line 2 (`ts`) on a narrow terminal — and the chip's background
+* would visually fragment across the wrap. With flex-row + flexWrap, each
+* chip is one atomic flex item; the wrap engine never breaks inside it.
+*/
+/** Prompt chevron rendered ahead of every user-prompt block. */
+const USER_PROMPT_PREFIX = "❯ ";
+function UserPromptBlock({ text, refs }) {
 	const COLOR = useColors();
-	return /* @__PURE__ */ jsx("box", {
-		style: {
-			border: true,
-			borderColor: COLOR.borderActive,
-			paddingLeft: 1,
-			paddingRight: 1
-		},
-		children: /* @__PURE__ */ jsx("text", {
+	const SURFACE = useSurfaces();
+	const boxStyle = {
+		border: true,
+		borderColor: COLOR.borderActive,
+		paddingLeft: 1,
+		paddingRight: 1
+	};
+	if (!refs || refs.length === 0) return /* @__PURE__ */ jsx("box", {
+		style: boxStyle,
+		children: /* @__PURE__ */ jsxs("text", {
 			fg: COLOR.brand,
-			children: text
+			children: [/* @__PURE__ */ jsx("span", {
+				fg: COLOR.brand,
+				children: USER_PROMPT_PREFIX
+			}), text]
+		})
+	});
+	const segments = splitPromptSegments(text, refs);
+	return /* @__PURE__ */ jsx("box", {
+		style: boxStyle,
+		children: /* @__PURE__ */ jsxs("box", {
+			style: {
+				flexDirection: "row",
+				flexWrap: "wrap"
+			},
+			children: [/* @__PURE__ */ jsx("text", {
+				fg: COLOR.brand,
+				children: USER_PROMPT_PREFIX
+			}), segments.map((seg, i) => {
+				if (seg.kind === "plain") return /* @__PURE__ */ jsx("text", {
+					fg: COLOR.brand,
+					children: seg.text
+				}, i);
+				const chip = resolveChipColor(SURFACE.chips, seg.providerId);
+				return /* @__PURE__ */ jsx("text", {
+					fg: chip.fg,
+					bg: chip.bg,
+					children: seg.text
+				}, i);
+			})]
 		})
 	});
 }
@@ -575,93 +1203,164 @@ function ToolResultBlock({ text, indent }) {
 	});
 }
 //#endregion
-//#region src/tui/modal.tsx
-const ModalContext = createContext(null);
-function ModalRoot({ children }) {
-	const [active, setActive] = useState(null);
-	const api = useMemo(() => ({
-		open: (node) => setActive(node),
-		close: () => setActive(null),
-		get isOpen() {
-			return active !== null;
+//#region src/tui/toggle-list-modal.tsx
+/**
+* Generic list-with-checkboxes modal. Powers both the Skills and MCP
+* server pickers — same state machine, same keyboard map, same row
+* geometry. Per-feature variance flows in through props:
+*
+*   - `keyOf` — extract the persisted identity (skill name, server name).
+*   - `settingKey` — `'enabledSkills'` | `'enabledMcps'`.
+*   - `renderDetail` — appended to each row in mute color (descriptions,
+*     transports, …). Optional.
+*   - `emptyState` — replacement content when `catalog` is empty.
+*
+* Renderer-agnostic state machine lives in `useEnabledToggleSet`
+* (chat layer) — a GUI shell can build its own toggle list against the
+* same hook without pulling OpenTUI.
+*/
+function ToggleListModal({ catalog, keyOf, settingKey, title, renderDetail, emptyState }) {
+	const COLOR = useColors();
+	const { enabledSet, toggle } = useEnabledToggleSet({
+		catalog,
+		keyOf,
+		settingKey
+	});
+	const [cursor, setCursorRaw] = useState(0);
+	const setCursor = useCallback((update) => setCursorRaw((prev) => Math.min(Math.max(0, update(prev)), Math.max(0, catalog.length - 1))), [catalog.length]);
+	const safeCursor = Math.min(cursor, Math.max(0, catalog.length - 1));
+	useKeyboard((key) => {
+		if (key.name === "up" || key.ctrl && key.name === "p") setCursor((c) => c - 1);
+		else if (key.name === "down" || key.ctrl && key.name === "n") setCursor((c) => c + 1);
+		else if (key.name === "return" || key.name === "space") {
+			const entry = catalog[safeCursor];
+			if (entry) toggle(keyOf(entry));
 		}
-	}), [active]);
-	return /* @__PURE__ */ jsxs(ModalContext.Provider, {
-		value: api,
+	});
+	if (catalog.length === 0) return /* @__PURE__ */ jsxs(Modal, {
+		title,
+		children: [emptyState, /* @__PURE__ */ jsxs("text", {
+			fg: COLOR.mute,
+			children: [/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "esc"
+			}), " close"]
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Modal, {
+		title: ` ${title} · ${enabledSet.size} / ${catalog.length} enabled `,
 		children: [/* @__PURE__ */ jsx("box", {
-			style: {
-				flexDirection: "column",
-				flexGrow: 1
-			},
-			children
-		}), active && /* @__PURE__ */ jsx("box", {
-			style: {
-				position: "absolute",
-				top: 0,
-				left: 0,
-				right: 0,
-				bottom: 0,
-				alignItems: "center",
-				justifyContent: "center",
-				zIndex: 100
-			},
-			children: active
+			style: { flexDirection: "column" },
+			children: catalog.map((entry, i) => {
+				const focused = i === safeCursor;
+				const name = keyOf(entry);
+				const enabled = enabledSet.has(name);
+				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: enabled ? COLOR.accent : COLOR.mute,
+							children: enabled ? "[✓] " : "[ ] "
+						}),
+						/* @__PURE__ */ jsx("span", {
+							fg: focused ? COLOR.brand : COLOR.dim,
+							children: name
+						}),
+						renderDetail && /* @__PURE__ */ jsxs("span", {
+							fg: COLOR.mute,
+							children: ["  ", renderDetail(entry)]
+						})
+					]
+				}, name);
+			})
+		}), /* @__PURE__ */ jsxs("text", {
+			fg: COLOR.mute,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.warn,
+					children: "↑↓"
+				}),
+				" navigate · ",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.warn,
+					children: "↵"
+				}),
+				" toggle · ",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.warn,
+					children: "esc"
+				}),
+				" close"
+			]
 		})]
 	});
 }
-function useModal() {
-	const ctx = useContext(ModalContext);
-	if (!ctx) throw new Error("useModal must be used inside <ModalRoot>");
-	return ctx;
-}
-/**
-* Focus computed against the modal layer.
-*
-* Pass a component's preferred focus state and this returns `false` whenever a
-* modal is open — so focused inputs (textarea, selects) release their focus and
-* stop intercepting keys behind the overlay. Pair with `focusable={false}` on
-* "passive" focusables (scrollbox) so the renderer doesn't cycle focus into
-* them when the primary input blurs.
-*/
-function useModalAwareFocus(preferred = true) {
-	const { isOpen } = useModal();
-	return preferred && !isOpen;
-}
+//#endregion
+//#region src/tui/mcps-settings.tsx
 /**
-* Responsive modal — picks a width based on the live terminal size.
-*
-* - On a wide terminal, the modal grows to `maxWidth` so descriptions sit on
-*   one line and don't wrap.
-* - On a narrow terminal, the modal shrinks down to `minWidth`, keeping a
-*   small horizontal margin from the screen edges. Text inside wraps naturally.
+* List + toggle modal for MCP servers discovered from `.{prefix}/mcps.json`
+* / `.agents/mcps.json` (project + user). State machine lives in
+* `<ToggleListModal>` (shared with the Skills picker); this file supplies
+* the transport/command detail column and the empty-state copy.
 *
-* Uses `useTerminalDimensions()` so it reflows on `SIGWINCH` without remount.
+* Toggling does NOT restart the active agent — the change applies on the
+* next session activation (the app rebuilds the agent there), keeping
+* current runs stable.
 */
-function Modal({ title, onClose, children, maxWidth = 92, minWidth = 44, horizontalMargin = 4 }) {
-	const ctx = useContext(ModalContext);
-	const dismiss = onClose ?? ctx?.close;
+function McpsSettingsModal({ catalog }) {
 	const COLOR = useColors();
-	const SURFACE = useSurfaces();
-	useKeyboard((key) => {
-		if (key.name === "escape") dismiss?.();
-	});
-	const { width: termWidth } = useTerminalDimensions();
-	const width = Math.max(minWidth, Math.min(maxWidth, termWidth - horizontalMargin * 2));
-	return /* @__PURE__ */ jsx("box", {
-		title: title ? ` ${title} ` : void 0,
-		style: {
-			border: true,
-			borderColor: COLOR.borderActive,
-			backgroundColor: SURFACE.modal,
-			paddingTop: 1,
-			paddingBottom: 1,
-			paddingLeft: 2,
-			paddingRight: 2,
-			width,
-			flexDirection: "column",
-			gap: 1
+	return /* @__PURE__ */ jsx(ToggleListModal, {
+		catalog,
+		keyOf: (d) => d.config.name,
+		settingKey: "enabledMcps",
+		title: "mcp servers",
+		renderDetail: (entry) => {
+			const transport = entry.config.transport;
+			return `${transport} · ${transport === "stdio" ? entry.config.command ?? "" : entry.config.url ?? ""}`;
 		},
-		children
+		emptyState: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("text", {
+			fg: COLOR.dim,
+			children: "No MCP servers discovered."
+		}), /* @__PURE__ */ jsxs("text", {
+			fg: COLOR.mute,
+			children: [
+				"Drop a",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " mcps.json "
+				}),
+				"into",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " .zidane/ "
+				}),
+				"or",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " .agents/ "
+				}),
+				"(project or",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " ~/"
+				}),
+				"). Array of",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " McpServerConfig "
+				}),
+				"or",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " { \"mcpServers\": { ... } } "
+				}),
+				"."
+			]
+		})] })
 	});
 }
 //#endregion
@@ -764,23 +1463,200 @@ function describeModel(m) {
 	return parts.join(" · ");
 }
 //#endregion
-//#region src/tui/screens.tsx
+//#region src/tui/completion-popup.tsx
 /**
-* Build a key-binding set for the prompt textarea / API-key input. Strips the
-* default `return` action and reinstalls it with our preferred meaning, so the
-* binding wins regardless of modifier state. Pass `allowShiftReturnNewline`
-* to enable `shift+enter` → newline (multi-line input).
+* Popover above the textarea showing the active provider's items. Provider-
+* agnostic — reads `label` + `description` off each `CompletionItem`. The
+* TUI hosts can pass any `CompletionState<TItem>`; the popup never needs
+* to know what `TItem` is.
+*
+* Geometry: 1 row of chrome + min(N, visibleRows) item rows + 1 hint row.
+* `flexShrink: 0` pins the height so a long transcript can't squeeze it.
+*
+* The popup is invisible (`null`-rendered) when `state.active` is null or
+* `state.items` is empty — the prompt block keeps its layout calm.
+*
+* Solid `backgroundColor: SURFACE.modal` is load-bearing: in `PromptBlock`
+* the popup floats over the transcript via `position: absolute`, and a
+* transparent fill would let the transcript text bleed through. Pairs
+* with the modal panel surface so floating UI shares one visual identity.
+*
+* Title overlays are painted on the top border (same trick as
+* `PromptHints`): provider label on the left in the chip-id's accent
+* color, match count on the right in dim text. Both ride absolute
+* positions so they take no flow space; the popup's height comes
+* entirely from the bordered body. The accent reuses
+* `resolveChipColor(...).bg` (foreground only, no background pill) so
+* the picker title still reads as "this is the X provider" without
+* carrying the chip pill's heavy visual weight.
 */
-function makeSubmitBindings(allowShiftReturnNewline) {
-	const base = defaultTextareaKeyBindings.filter((b) => b.name !== "return");
-	return allowShiftReturnNewline ? [
-		...base,
-		{
-			name: "return",
-			action: "submit"
-		},
-		{
-			name: "return",
+function CompletionPopup({ state, visibleRows = 6 }) {
+	const COLOR = useColors();
+	const SURFACE = useSurfaces();
+	const SELECT = useSelectStyle();
+	if (!state.active) return null;
+	const loading = state.loading && state.items.length === 0;
+	if (state.items.length === 0 && !loading) return null;
+	const chip = resolveChipColor(SURFACE.chips, state.active.provider.id);
+	const providerLabel = state.active.provider.label.toLowerCase();
+	let body;
+	let height;
+	if (loading) {
+		body = /* @__PURE__ */ jsx("text", {
+			fg: COLOR.dim,
+			children: "loading…"
+		});
+		height = 3;
+	} else {
+		const rows = Math.min(state.items.length, visibleRows);
+		const half = Math.floor(rows / 2);
+		let start = Math.max(0, state.selectedIndex - half);
+		if (start + rows > state.items.length) start = state.items.length - rows;
+		const slice = state.items.slice(start, start + rows);
+		height = 2 + rows + 1;
+		body = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("box", {
+			style: { flexDirection: "column" },
+			children: slice.map((item, i) => {
+				const focused = start + i === state.selectedIndex;
+				return /* @__PURE__ */ jsx("box", {
+					style: {
+						height: 1,
+						overflow: "hidden",
+						flexShrink: 0
+					},
+					children: /* @__PURE__ */ jsxs("text", {
+						fg: focused ? COLOR.brand : COLOR.dim,
+						wrapMode: "none",
+						truncate: true,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								fg: focused ? COLOR.brand : COLOR.mute,
+								children: focused ? "▶ " : "  "
+							}),
+							/* @__PURE__ */ jsx("span", {
+								fg: focused ? COLOR.brand : SELECT.textColor,
+								children: item.label
+							}),
+							item.description && /* @__PURE__ */ jsxs("span", {
+								fg: COLOR.mute,
+								children: ["  ", item.description]
+							})
+						]
+					})
+				}, item.id);
+			})
+		}), /* @__PURE__ */ jsxs("text", {
+			fg: COLOR.mute,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.warn,
+					children: "↑↓"
+				}),
+				" navigate · ",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.warn,
+					children: "↵"
+				}),
+				" / ",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.warn,
+					children: "tab"
+				}),
+				" select · ",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.warn,
+					children: "esc"
+				}),
+				" close"
+			]
+		})] });
+	}
+	return /* @__PURE__ */ jsxs("box", {
+		style: {
+			flexDirection: "column",
+			flexShrink: 0
+		},
+		children: [
+			/* @__PURE__ */ jsx("box", {
+				style: {
+					border: true,
+					borderColor: COLOR.borderActive,
+					backgroundColor: SURFACE.modal,
+					paddingLeft: 1,
+					paddingRight: 1,
+					height,
+					flexShrink: 0,
+					alignSelf: "stretch",
+					flexDirection: "column"
+				},
+				children: body
+			}),
+			/* @__PURE__ */ jsxs("text", {
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 1
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: " "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: chip.bg,
+						children: providerLabel
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: " "
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("text", {
+				style: {
+					position: "absolute",
+					top: 0,
+					right: 1
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: " "
+					}),
+					loading ? /* @__PURE__ */ jsx("span", {
+						fg: COLOR.dim,
+						children: "loading…"
+					}) : /* @__PURE__ */ jsx("span", {
+						fg: COLOR.dim,
+						children: `${state.items.length} match${state.items.length === 1 ? "" : "es"}`
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: " "
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/tui/screens.tsx
+/**
+* Build a key-binding set for the prompt textarea / API-key input. Strips the
+* default `return` action and reinstalls it with our preferred meaning, so the
+* binding wins regardless of modifier state. Pass `allowShiftReturnNewline`
+* to enable `shift+enter` → newline (multi-line input).
+*/
+function makeSubmitBindings(allowShiftReturnNewline) {
+	const base = defaultTextareaKeyBindings.filter((b) => b.name !== "return");
+	return allowShiftReturnNewline ? [
+		...base,
+		{
+			name: "return",
+			action: "submit"
+		},
+		{
+			name: "return",
 			shift: true,
 			action: "newline"
 		}
@@ -813,7 +1689,7 @@ function AuthScreen({ onPick }) {
 	const COLOR = useColors();
 	const SELECT_THEME = useSelectStyle();
 	const [providers, setProviders] = useState([]);
-	const refresh = useCallback(() => setProviders(detectAuth(config.paths.dir, registry)), [config.paths.dir, registry]);
+	const refresh = useCallback(() => setProviders(detectAuth(config.paths.userDir, registry)), [config.paths.userDir, registry]);
 	useEffect(() => {
 		refresh();
 	}, [refresh]);
@@ -827,7 +1703,7 @@ function AuthScreen({ onPick }) {
 		const canCancel = forceWizard && available.length > 0;
 		return /* @__PURE__ */ jsx(SetupWizard, {
 			registry,
-			dataDir: config.paths.dir,
+			dataDir: config.paths.userDir,
 			onConfigured: onWizardDone,
 			onCancel: canCancel ? () => setForceWizard(false) : void 0
 		});
@@ -841,31 +1717,36 @@ function AuthScreen({ onPick }) {
 		description: "launch the setup wizard",
 		value: WIZARD_OPTION_VALUE
 	}];
-	return /* @__PURE__ */ jsx("box", {
-		title: " pick a provider ",
+	return /* @__PURE__ */ jsxs("box", {
 		style: {
-			border: true,
-			borderColor: COLOR.border,
-			padding: 1,
 			flexDirection: "column",
 			flexGrow: 1
 		},
-		children: /* @__PURE__ */ jsx("select", {
-			...SELECT_THEME,
-			focused,
-			options,
-			wrapSelection: true,
-			onSelect: (_idx, option) => {
-				if (!option) return;
-				if (option.value === WIZARD_OPTION_VALUE) {
-					setForceWizard(true);
-					return;
-				}
-				const provider = findByKey(available, option.value);
-				if (provider) onPick(provider);
+		children: [/* @__PURE__ */ jsx("box", {
+			style: {
+				border: true,
+				borderColor: COLOR.border,
+				padding: 1,
+				flexDirection: "column",
+				flexGrow: 1
 			},
-			style: { flexGrow: 1 }
-		})
+			children: /* @__PURE__ */ jsx("select", {
+				...SELECT_THEME,
+				focused,
+				options,
+				wrapSelection: true,
+				onSelect: (_idx, option) => {
+					if (!option) return;
+					if (option.value === WIZARD_OPTION_VALUE) {
+						setForceWizard(true);
+						return;
+					}
+					const provider = findByKey(available, option.value);
+					if (provider) onPick(provider);
+				},
+				style: { flexGrow: 1 }
+			})
+		}), /* @__PURE__ */ jsx(TitleOverlay, { title: "pick a provider" })]
 	});
 }
 function SetupWizard({ registry, dataDir, onConfigured, onCancel }) {
@@ -907,6 +1788,13 @@ function SetupWizard({ registry, dataDir, onConfigured, onCancel }) {
 			setError(err instanceof Error ? err.message : String(err));
 		}
 	}, [dataDir, onConfigured]);
+	const onOAuthError = useCallback((msg) => {
+		setError(msg);
+		setStep((prev) => prev.kind === "oauth-running" ? {
+			kind: "pick-method",
+			descriptor: prev.descriptor
+		} : prev);
+	}, []);
 	if (descriptors.length === 0) return /* @__PURE__ */ jsx(EmptyRegistryNotice, {});
 	if (step.kind === "pick-provider") return /* @__PURE__ */ jsx(PickProviderStep, {
 		descriptors,
@@ -928,35 +1816,43 @@ function SetupWizard({ registry, dataDir, onConfigured, onCancel }) {
 		descriptor: step.descriptor,
 		dataDir,
 		onSuccess: onConfigured,
-		onError: (msg) => {
-			setError(msg);
-			setStep({
-				kind: "pick-method",
-				descriptor: step.descriptor
-			});
-		}
+		onError: onOAuthError
 	});
 }
 /**
-* Shared wrapper for every wizard step — same border + padding + flex layout
-* with a customizable title and accent color. Footnote slot at the bottom for
-* an error banner.
+* Shared wrapper for every wizard step — same border + padding + flex
+* layout with a customizable title and accent color. Footnote slot at the
+* bottom for an error banner.
+*
+* Title rides `accent` when present (so the empty-registry notice's red
+* title matches its red border) and falls back to `COLOR.brand`. The
+* outer flex column hosts both the bordered content box and the
+* `TitleOverlay`, which must be its sibling (not a child) so the
+* border-row paint isn't clipped by the bordered box's scissor rect.
 */
 function WizardPanel({ title, accent, error, children }) {
 	const COLOR = useColors();
 	return /* @__PURE__ */ jsxs("box", {
-		title,
 		style: {
-			border: true,
-			borderColor: accent ?? COLOR.border,
-			padding: 1,
-			gap: 1,
 			flexDirection: "column",
 			flexGrow: 1
 		},
-		children: [children, error && /* @__PURE__ */ jsx("text", {
-			fg: COLOR.error,
-			children: error
+		children: [/* @__PURE__ */ jsxs("box", {
+			style: {
+				border: true,
+				borderColor: accent ?? COLOR.border,
+				padding: 1,
+				gap: 1,
+				flexDirection: "column",
+				flexGrow: 1
+			},
+			children: [children, error && /* @__PURE__ */ jsx("text", {
+				fg: COLOR.error,
+				children: error
+			})]
+		}), /* @__PURE__ */ jsx(TitleOverlay, {
+			title: title.trim(),
+			titleColor: accent
 		})]
 	});
 }
@@ -970,7 +1866,7 @@ function WizardEscHint() {
 function EmptyRegistryNotice() {
 	const COLOR = useColors();
 	return /* @__PURE__ */ jsxs(WizardPanel, {
-		title: " no providers configured ",
+		title: "no providers configured",
 		accent: COLOR.error,
 		children: [/* @__PURE__ */ jsx("text", {
 			fg: COLOR.error,
@@ -1012,7 +1908,7 @@ function PickProviderStep({ descriptors, error, onPick, onCancel }) {
 		value: WIZARD_BACK_VALUE
 	}] : []];
 	return /* @__PURE__ */ jsxs(WizardPanel, {
-		title: onCancel ? " add or re-configure a provider " : " welcome to zidane · pick a provider ",
+		title: onCancel ? "add or re-configure a provider" : "welcome to zidane · pick a provider",
 		error,
 		children: [!onCancel && /* @__PURE__ */ jsxs("text", {
 			fg: COLOR.dim,
@@ -1062,7 +1958,7 @@ function PickMethodStep({ descriptor, error, onPick }) {
 		return items;
 	}, [descriptor]);
 	return /* @__PURE__ */ jsxs(WizardPanel, {
-		title: ` configure ${descriptor.label} — pick auth method `,
+		title: `configure ${descriptor.label} — pick auth method`,
 		error,
 		children: [/* @__PURE__ */ jsx(WizardEscHint, {}), /* @__PURE__ */ jsx("select", {
 			...SELECT_THEME,
@@ -1084,7 +1980,7 @@ function EnterApiKeyStep({ descriptor, error, onSubmit }) {
 		onSubmit(descriptor, inputRef.current?.value ?? "");
 	}, [descriptor, onSubmit]);
 	return /* @__PURE__ */ jsxs(WizardPanel, {
-		title: ` configure ${descriptor.label} — paste API key `,
+		title: `configure ${descriptor.label} — paste API key`,
 		error,
 		children: [/* @__PURE__ */ jsxs("text", {
 			fg: COLOR.dim,
@@ -1159,7 +2055,7 @@ function OAuthRunningStep({ descriptor, dataDir, onSuccess, onError }) {
 		onError
 	]);
 	return /* @__PURE__ */ jsxs(WizardPanel, {
-		title: ` configure ${descriptor.label} — OAuth `,
+		title: `configure ${descriptor.label} — OAuth`,
 		children: [
 			/* @__PURE__ */ jsx(WizardEscHint, {}),
 			/* @__PURE__ */ jsx(Spinner, { label: status }),
@@ -1179,153 +2075,468 @@ function OAuthRunningStep({ descriptor, dataDir, onSuccess, onError }) {
 		]
 	});
 }
-const NEW_VALUE = "__new__";
-function SessionsScreen({ sessions, currentId, onPick, onCreate }) {
+/**
+* Sentinel row id for the synthetic "+ new" row at the top of the
+* sessions list. Exposed so the AppShell can pass it through
+* `focusedSessionId` (or rather: the focused ROW id, which is either a
+* real session id or this sentinel) and gate global shortcuts that
+* only make sense on real sessions — `ctrl+x` is the canonical example.
+*
+* Stays a plain string (rather than a discriminated union) so the
+* parent's focus state remains a flat `string | null` — `null` means
+* "no preference yet, please default to the first session"; this
+* sentinel means "+ new is the active row".
+*/
+const NEW_SESSION_ROW_ID = "__new__";
+/** Guard for the `ctrl+x` handler: only a real session id should open the details modal. */
+function isSessionRowId(rowId) {
+	return rowId !== null && rowId !== "__new__";
+}
+/** Page-up / page-down jump size — half a typical visible window. */
+const PAGE_JUMP = 6;
+function SessionsScreen({ sessions, currentId, focusedSessionId, onPick, onCreate, onFocusChange, showAllProjects = false, currentProjectRoot }) {
 	const focused = useModalAwareFocus();
 	const COLOR = useColors();
-	const SELECT_THEME = useSelectStyle();
-	const options = useMemo(() => {
-		const items = [{
-			name: "+ new session",
-			description: "start fresh",
-			value: NEW_VALUE
-		}];
-		for (const s of sessions) {
-			const marker = s.id === currentId ? "● " : "  ";
-			const turnLabel = `${s.turnCount} turn${s.turnCount === 1 ? "" : "s"}`;
-			items.push({
-				name: `${marker}${s.title}`,
-				description: `#${shortId(s.id)} · ${turnLabel} · ${ageString(s.updatedAt)}`,
-				value: s.id
-			});
+	const rows = useMemo(() => [{
+		kind: "new",
+		rowId: NEW_SESSION_ROW_ID,
+		meta: null
+	}, ...sessions.map((meta) => ({
+		kind: "session",
+		rowId: meta.id,
+		meta
+	}))], [sessions]);
+	const cursorIndex = useMemo(() => {
+		if (focusedSessionId === "__new__") return 0;
+		if (focusedSessionId) {
+			const idx = rows.findIndex((r) => r.kind === "session" && r.rowId === focusedSessionId);
+			if (idx !== -1) return idx;
 		}
-		return items;
-	}, [sessions, currentId]);
-	return /* @__PURE__ */ jsx("box", {
-		title: " sessions ",
-		style: {
-			border: true,
-			borderColor: COLOR.border,
-			padding: 1,
-			flexDirection: "column",
-			flexGrow: 1
-		},
-		children: /* @__PURE__ */ jsx("select", {
-			...SELECT_THEME,
-			focused,
-			options,
-			wrapSelection: true,
-			onSelect: (_idx, option) => {
-				if (!option) return;
-				if (option.value === NEW_VALUE) onCreate();
-				else if (typeof option.value === "string") onPick(option.value);
-			},
-			style: { flexGrow: 1 }
-		})
+		return rows.length > 1 ? 1 : 0;
+	}, [rows, focusedSessionId]);
+	useEffect(() => {
+		if (!onFocusChange) return;
+		if (focusedSessionId === "__new__") return;
+		if (focusedSessionId && rows.some((r) => r.kind === "session" && r.rowId === focusedSessionId)) return;
+		const fallback = rows[cursorIndex];
+		onFocusChange(fallback?.rowId ?? null);
+	}, [
+		rows,
+		focusedSessionId,
+		cursorIndex,
+		onFocusChange
+	]);
+	const moveCursor = useCallback((nextIndex) => {
+		if (!onFocusChange || rows.length === 0) return;
+		const row = rows[(nextIndex % rows.length + rows.length) % rows.length];
+		onFocusChange(row?.rowId ?? null);
+	}, [rows, onFocusChange]);
+	const commitCurrent = useCallback(() => {
+		const row = rows[cursorIndex];
+		if (!row) return;
+		if (row.kind === "new") onCreate();
+		else onPick(row.rowId);
+	}, [
+		rows,
+		cursorIndex,
+		onCreate,
+		onPick
+	]);
+	useKeyboard((key) => {
+		if (!focused) return;
+		if (key.name === "up") {
+			moveCursor(cursorIndex - 1);
+			return;
+		}
+		if (key.name === "down") {
+			moveCursor(cursorIndex + 1);
+			return;
+		}
+		if (key.name === "pageup") {
+			moveCursor(cursorIndex - PAGE_JUMP);
+			return;
+		}
+		if (key.name === "pagedown") {
+			moveCursor(cursorIndex + PAGE_JUMP);
+			return;
+		}
+		if (key.name === "home") {
+			moveCursor(0);
+			return;
+		}
+		if (key.name === "end") {
+			moveCursor(rows.length - 1);
+			return;
+		}
+		if (key.name === "return") commitCurrent();
 	});
-}
-/** 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, pending, onApproval }) {
-	const COLOR = useColors();
-	const title = useMemo(() => {
-		if (!session) return " untitled ";
-		const turns = `${session.turnCount} turn${session.turnCount === 1 ? "" : "s"}`;
-		return ` ${session.title} · #${shortId(session.id)} · ${turns} `;
-	}, [session]);
-	const userPrompts = useMemo(() => events.filter((e) => e.kind === "info").map((e) => e.text.replace(/^❯ /, "")), [events]);
+	const titleMeta = useMemo(() => {
+		if (sessions.length === 0) return [{
+			text: "no sessions yet",
+			color: COLOR.mute
+		}];
+		return [{
+			text: String(sessions.length),
+			color: COLOR.warn
+		}, { text: ` session${sessions.length === 1 ? "" : "s"}` }];
+	}, [sessions.length, COLOR]);
+	const { width: termWidth } = useTerminalDimensions();
+	const cwdMaxWidth = Math.max(16, termWidth - 8);
 	return /* @__PURE__ */ jsxs("box", {
 		style: {
 			flexDirection: "column",
 			flexGrow: 1
 		},
-		children: [/* @__PURE__ */ jsx("box", {
-			title,
+		children: [/* @__PURE__ */ jsxs("box", {
 			style: {
 				border: true,
 				borderColor: COLOR.border,
-				flexGrow: 1,
-				flexDirection: "column"
+				padding: 1,
+				flexDirection: "column",
+				flexGrow: 1
 			},
-			children: /* @__PURE__ */ jsx(Transcript, {
-				events,
-				settings
-			})
-		}), pending ? /* @__PURE__ */ jsx(ApprovalBlock, {
-			request: pending,
-			onPick: onApproval
-		}) : busy ? /* @__PURE__ */ jsx(BusyBlock, {}) : /* @__PURE__ */ jsx(PromptBlock, {
-			userPrompts,
-			onSubmit
+			children: [currentProjectRoot && /* @__PURE__ */ jsx("box", {
+				style: {
+					flexDirection: "column",
+					flexShrink: 0,
+					marginBottom: 1
+				},
+				children: /* @__PURE__ */ jsxs("text", {
+					wrapMode: "none",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							fg: COLOR.mute,
+							children: "cwd "
+						}),
+						/* @__PURE__ */ jsx("span", {
+							fg: COLOR.dim,
+							children: compactPath(currentProjectRoot, cwdMaxWidth)
+						}),
+						showAllProjects && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							fg: COLOR.mute,
+							children: "  ·  "
+						}), /* @__PURE__ */ jsx("span", {
+							fg: COLOR.accent,
+							children: "all projects"
+						})] })
+					]
+				})
+			}), /* @__PURE__ */ jsx("scrollbox", {
+				focusable: false,
+				style: { flexGrow: 1 },
+				children: rows.map((row, idx) => /* @__PURE__ */ jsx(SessionRow, {
+					row,
+					focused: idx === cursorIndex && focused,
+					isCurrent: row.kind === "session" && row.rowId === currentId,
+					showProject: showAllProjects,
+					currentProjectRoot
+				}, row.rowId))
+			})]
+		}), /* @__PURE__ */ jsx(TitleOverlay, {
+			title: "sessions",
+			meta: titleMeta
 		})]
 	});
 }
-/** 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.
+* Two-line row for `SessionsScreen`. Top line is the title with the
+* focus + active markers; bottom is the stats summary (turns / user /
+* runs / age) in the bottom-bar's warn-number + dim-label palette.
 *
-* 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).
+* Alignment contract: the stats line indents by `STATS_INDENT` cells —
+* exactly the width of the focus + current markers above — so the first
+* stat (the turn count) sits flush under the title's first letter.
 */
-function ApprovalBlock({ request, onPick }) {
-	const focused = useModalAwareFocus();
+function SessionRow({ row, focused, isCurrent, showProject = false, currentProjectRoot }) {
 	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"
+	const STATS_INDENT = "    ";
+	const focusMark = focused ? "▶ " : "  ";
+	const focusColor = focused ? COLOR.brand : COLOR.mute;
+	const titleColor = focused ? COLOR.brand : COLOR.dim;
+	if (row.kind === "new") return /* @__PURE__ */ jsxs("box", {
+		style: {
+			flexDirection: "column",
+			flexShrink: 0,
+			alignSelf: "stretch"
+		},
+		children: [/* @__PURE__ */ jsxs("text", {
+			wrapMode: "none",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					fg: focusColor,
+					children: focusMark
+				}),
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.mute,
+					children: "  "
+				}),
+				/* @__PURE__ */ jsx("span", {
+					fg: titleColor,
+					children: "+ new session"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("text", {
+			wrapMode: "none",
+			children: [/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: STATS_INDENT
+			}), /* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: "start fresh"
+			})]
+		})]
+	});
+	const meta = row.meta;
+	const currentMark = isCurrent ? "● " : "  ";
+	const currentColor = isCurrent ? COLOR.accent : COLOR.mute;
+	return /* @__PURE__ */ jsxs("box", {
+		style: {
+			flexDirection: "column",
+			flexShrink: 0,
+			alignSelf: "stretch"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("text", {
+				wrapMode: "none",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						fg: focusColor,
+						children: focusMark
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: currentColor,
+						children: currentMark
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: titleColor,
+						children: meta.title
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("text", {
+				wrapMode: "none",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: STATS_INDENT
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.warn,
+						children: meta.turnCount
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: ` turn${meta.turnCount === 1 ? "" : "s"} · `
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.warn,
+						children: meta.userMessageCount
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: ` user · `
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.warn,
+						children: meta.runCount
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: ` run${meta.runCount === 1 ? "" : "s"} · `
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: ageString(meta.updatedAt)
+					})
+				]
+			}),
+			showProject && /* @__PURE__ */ jsxs("text", {
+				wrapMode: "none",
+				children: [/* @__PURE__ */ jsx("span", {
+					fg: COLOR.mute,
+					children: STATS_INDENT
+				}), renderProjectLabel(meta.projectRoot, currentProjectRoot, COLOR)]
+			})
+		]
+	});
+}
+/**
+* Render the project label for the cross-project view. Three cases:
+*
+*   - The row belongs to the current project → render "this project"
+*     in `accent` so the user can quickly spot rows that match where
+*     they are.
+*   - The row is tagged but for a different project → render the
+*     basename of the project root in `dim` (full path would be too
+*     long for the row).
+*   - The row is untagged (legacy) → render "untagged" in `mute`.
+*/
+function renderProjectLabel(rowProject, currentProject, COLOR) {
+	if (!rowProject) return /* @__PURE__ */ jsx("span", {
+		fg: COLOR.mute,
+		children: "untagged"
+	});
+	if (currentProject && rowProject === currentProject) return /* @__PURE__ */ jsx("span", {
+		fg: COLOR.accent,
+		children: "this project"
+	});
+	const basename = rowProject.split("/").pop() ?? rowProject;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		fg: COLOR.mute,
+		children: "project "
+	}), /* @__PURE__ */ jsx("span", {
+		fg: COLOR.dim,
+		children: basename
+	})] });
+}
+/** 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, pending, onApproval, completionProviders, onPopupOpenChange, selectedTurnId, promptTriggerHints }) {
+	const COLOR = useColors();
+	const titleText = session?.title ?? "untitled";
+	const showSessionShortcut = !!session && !busy && !pending;
+	const userMessageCount = useMemo(() => events.filter((e) => e.kind === "user-prompt").length, [events]);
+	const metaSegments = useMemo(() => {
+		if (!session) return null;
+		const turnsSuffix = `turn${session.turnCount === 1 ? "" : "s"}`;
+		const messagesSuffix = `user message${userMessageCount === 1 ? "" : "s"}`;
+		const segments = [
+			{
+				text: String(userMessageCount),
+				color: COLOR.warn
+			},
+			{ text: ` ${messagesSuffix}` },
+			{
+				text: " · ",
+				color: COLOR.mute
+			},
+			{
+				text: String(session.turnCount),
+				color: COLOR.warn
+			},
+			{ text: ` ${turnsSuffix}` }
+		];
+		if (showSessionShortcut) segments.push({
+			text: " · ",
+			color: COLOR.mute
+		}, {
+			text: "ctrl+x",
+			color: COLOR.warn
+		}, { text: " session" });
+		return segments;
+	}, [
+		session,
+		userMessageCount,
+		COLOR,
+		showSessionShortcut
+	]);
+	const userPrompts = useMemo(() => events.filter((e) => e.kind === "user-prompt").map((e) => e.text), [events]);
+	return /* @__PURE__ */ jsxs("box", {
+		style: {
+			flexDirection: "column",
+			flexGrow: 1
+		},
+		children: [
+			/* @__PURE__ */ jsx("box", {
+				style: {
+					border: true,
+					borderColor: COLOR.border,
+					flexGrow: 1,
+					flexDirection: "column"
+				},
+				children: /* @__PURE__ */ jsx(Transcript, {
+					events,
+					settings,
+					selectedTurnId: selectedTurnId ?? null
+				})
+			}),
+			pending ? /* @__PURE__ */ jsx(ApprovalBlock, {
+				request: pending,
+				onPick: onApproval
+			}) : busy ? /* @__PURE__ */ jsx(BusyBlock, {}) : /* @__PURE__ */ jsx(PromptBlock, {
+				userPrompts,
+				onSubmit,
+				completionProviders,
+				onPopupOpenChange,
+				selectMode: selectedTurnId != null,
+				triggerHints: promptTriggerHints
+			}),
+			/* @__PURE__ */ jsx(TitleOverlay, {
+				title: titleText,
+				meta: metaSegments
+			})
+		]
+	});
+}
+/** 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);
+			if (json.length > APPROVAL_ARG_MAX) {
+				const closer = json[0] === "{" ? "…}" : json[0] === "[" ? "…]" : "…";
+				value = `${json.slice(0, APPROVAL_ARG_MAX)}${closer}`;
+			} else value = 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",
@@ -1390,29 +2601,72 @@ function BusyBlock() {
 		children: /* @__PURE__ */ jsx(Spinner, { label: "streaming response — esc to abort" })
 	});
 }
-function PromptBlock({ userPrompts, onSubmit }) {
+/** Stable empty providers reference — avoids `useCompletion` rerun on every render when no providers are wired. */
+const EMPTY_PROVIDERS = [];
+function PromptBlock({ userPrompts, onSubmit, completionProviders, onPopupOpenChange, selectMode = false, triggerHints }) {
 	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);
 	/**
+	* Mirror of the textarea buffer + cursor, updated on every `onContentChange`.
+	* Drives `useCompletion` — the textarea stays uncontrolled (we don't push
+	* React state back into it on every keystroke), this is a read-only view
+	* for the engine.
+	*/
+	const [bufferState, setBufferState] = useState({
+		text: "",
+		cursor: 0
+	});
+	/**
 	* History navigation state. `null` = not navigating (textarea owns its content).
 	* Once the user enters history (up at top), we snapshot the draft and cycle.
 	*/
 	const historyRef = useRef(null);
-	const syncLines = useCallback(() => {
-		const lines = textareaRef.current?.lineCount ?? MIN_CONTENT_LINES;
-		setContentLines(Math.max(MIN_CONTENT_LINES, lines));
+	const completion = useCompletion(bufferState, completionProviders ?? EMPTY_PROVIDERS);
+	const popupOpen = completion.active != null && completion.items.length > 0;
+	useEffect(() => {
+		onPopupOpenChange?.(popupOpen);
+	}, [popupOpen, onPopupOpenChange]);
+	const chipStyle = useChipStyle();
+	useChipHighlights(textareaRef, completion.references, chipStyle);
+	/**
+	* Pull the latest buffer state from the OpenTUI textarea ref. Called from
+	* `onContentChange` + `onKeyDown` so cursor moves (without text changes)
+	* also re-evaluate the active trigger.
+	*/
+	const syncBuffer = useCallback(() => {
+		const ta = textareaRef.current;
+		if (!ta) return;
+		setBufferState({
+			text: ta.plainText,
+			cursor: ta.cursorOffset
+		});
+		setContentLines(Math.max(MIN_CONTENT_LINES, ta.lineCount));
 	}, []);
 	const submit = useCallback(() => {
 		const value = textareaRef.current?.plainText ?? "";
 		if (!value.trim()) return;
-		onSubmit(value);
+		onSubmit(value, completion.references);
 		textareaRef.current?.clear();
 		historyRef.current = null;
+		setBufferState({
+			text: "",
+			cursor: 0
+		});
 		setContentLines(MIN_CONTENT_LINES);
-	}, [onSubmit]);
+	}, [onSubmit, completion.references]);
+	const commitCompletion = useCallback(() => {
+		const result = completion.commit();
+		if (!result) return false;
+		const ta = textareaRef.current;
+		if (!ta) return false;
+		ta.setText(result.text);
+		ta.cursorOffset = result.cursor;
+		syncBuffer();
+		return true;
+	}, [completion, syncBuffer]);
 	const cycleHistory = useCallback((direction) => {
 		if (userPrompts.length === 0 || !textareaRef.current) return;
 		if (historyRef.current === null) historyRef.current = {
@@ -1430,47 +2684,749 @@ function PromptBlock({ userPrompts, onSubmit }) {
 			textareaRef.current.gotoBufferEnd();
 			historyRef.current.idx = nextIdx;
 		}
-		syncLines();
-	}, [userPrompts, syncLines]);
+		syncBuffer();
+	}, [userPrompts, syncBuffer]);
 	/**
-	* Up/Down at the buffer boundary cycles prompt history (fish/zsh pattern).
-	* Mid-buffer up/down move the cursor normally — handled by the default
-	* `move-up` / `move-down` actions in `TEXTAREA_BINDINGS`.
+	* Key interception. OpenTUI fires `onKeyDown` BEFORE the textarea's
+	* binding table (`Renderable.keypressHandler` invokes the user
+	* listener first, then gates `handleKeyPress` on `defaultPrevented`).
+	* That means a single `event.preventDefault()` here cleanly skips the
+	* textarea's default action — no parallel binding-filter dance, no
+	* stray newline when the popup owns Enter.
+	*
+	* Popup-owned keys (up/down/return/tab/escape): forward to the
+	* completion engine and `preventDefault` so the textarea never sees
+	* them — committing a selection should land the cursor at end-of-
+	* insert + the trailing space from `insertText`, never an extra `\n`.
+	*
+	* History keys: up/down at the top/bottom row of an idle buffer cycle
+	* the prompt history. `preventDefault` after a successful cycle keeps
+	* the cursor at the end of the recalled prompt; non-edge presses fall
+	* through so the textarea moves the cursor as usual.
 	*/
 	const onKeyDown = useCallback((event) => {
+		if (popupOpen) {
+			if (event.ctrl || event.meta) return;
+			switch (event.name) {
+				case "up":
+					completion.selectPrev();
+					event.preventDefault();
+					return;
+				case "down":
+					completion.selectNext();
+					event.preventDefault();
+					return;
+				case "return":
+					if (event.shift) return;
+					commitCompletion();
+					event.preventDefault();
+					return;
+				case "tab":
+					commitCompletion();
+					event.preventDefault();
+					return;
+				case "escape":
+					completion.dismiss();
+					event.preventDefault();
+					return;
+				default:
+			}
+			return;
+		}
 		if (event.ctrl || event.shift || event.meta) return;
 		if (event.name !== "up" && event.name !== "down") return;
 		const buffer = textareaRef.current;
 		if (!buffer) return;
 		const cursorRow = buffer.logicalCursor.row;
-		if (event.name === "up" && cursorRow === 0) cycleHistory(-1);
-		else if (event.name === "down" && cursorRow === buffer.lineCount - 1) cycleHistory(1);
-	}, [cycleHistory]);
+		if (event.name === "up" && cursorRow === 0) {
+			cycleHistory(-1);
+			event.preventDefault();
+		} else if (event.name === "down" && cursorRow === buffer.lineCount - 1) {
+			cycleHistory(1);
+			event.preventDefault();
+		}
+	}, [
+		popupOpen,
+		completion,
+		commitCompletion,
+		cycleHistory
+	]);
 	const boxHeight = Math.min(MAX_CONTENT_LINES, contentLines) + 2;
-	return /* @__PURE__ */ jsx("box", {
+	return /* @__PURE__ */ jsxs("box", {
 		style: {
-			border: true,
-			borderColor: COLOR.borderActive,
-			paddingLeft: 1,
-			paddingRight: 1,
-			height: boxHeight,
-			flexDirection: "column"
+			flexDirection: "column",
+			flexShrink: 0
 		},
-		children: /* @__PURE__ */ jsx("textarea", {
-			ref: textareaRef,
-			focused,
-			keyBindings: TEXTAREA_BINDINGS,
-			placeholder: "Ask zidane… (enter = send · shift+enter = newline · ↑↓ at edges = history)",
+		children: [/* @__PURE__ */ jsxs("box", {
 			style: {
-				flexGrow: 1,
-				height: "100%"
+				flexDirection: "column",
+				flexShrink: 0
 			},
-			onSubmit: submit,
-			onContentChange: syncLines,
-			onKeyDown
-		})
+			children: [/* @__PURE__ */ jsx("box", {
+				style: {
+					border: true,
+					borderColor: selectMode ? COLOR.warn : COLOR.borderActive,
+					paddingLeft: 1,
+					paddingRight: 1,
+					height: boxHeight,
+					flexDirection: "column"
+				},
+				children: /* @__PURE__ */ jsx("textarea", {
+					ref: textareaRef,
+					focused: focused && !selectMode,
+					keyBindings: TEXTAREA_BINDINGS,
+					placeholder: selectMode ? "— turn-select mode — press ⎋ to resume typing —" : "Ask zidane…",
+					syntaxStyle: chipStyle,
+					style: {
+						flexGrow: 1,
+						height: "100%"
+					},
+					onSubmit: submit,
+					onContentChange: syncBuffer,
+					onKeyDown
+				})
+			}), /* @__PURE__ */ jsx(PromptHints, {
+				selectMode,
+				triggerHints
+			})]
+		}), !selectMode && /* @__PURE__ */ jsx("box", {
+			style: {
+				position: "absolute",
+				bottom: "100%",
+				left: 0,
+				right: 0,
+				flexDirection: "column"
+			},
+			children: /* @__PURE__ */ jsx(CompletionPopup, { state: completion })
+		})]
+	});
+}
+/** Prompt-box shortcuts in normal mode — order matches reading flow. */
+const PROMPT_HINTS_NORMAL = [
+	{
+		key: "↵",
+		label: "send"
+	},
+	{
+		key: "shift+↵",
+		label: "newline"
+	},
+	{
+		key: "↑↓",
+		label: "history"
+	},
+	{
+		key: "ctrl+s",
+		label: "messages"
+	}
+];
+/** Prompt-box shortcuts in select-turn mode — only the selection actions are valid. */
+const PROMPT_HINTS_SELECT = [
+	{
+		key: "↑↓",
+		label: "navigate"
+	},
+	{
+		key: "↵",
+		label: "open"
+	},
+	{
+		key: "esc",
+		label: "exit"
+	}
+];
+/**
+* Inline shortcut hints for the prompt box. Drawn as an absolutely-
+* positioned overlay across the box's top border (right-aligned, one
+* cell from the corner) so it reads like a `<box title>` while keeping
+* the warn / dim / mute palette of the bottom bar — native `title` is
+* painted as part of the border with a single color and can't carry
+* per-segment hue.
+*
+* Must be declared AFTER the bordered box in its parent so the
+* renderer paints it on top, and must be a SIBLING (not a child) of
+* the box: bordered boxes clip their own absolute children via a
+* scissor rect that excludes the border row.
+*
+* Leading + trailing spaces overwrite the border characters underneath
+* the title text, mirroring native titles (`── sessions ──`).
+*
+* Swaps the hint set based on `selectMode` so the user sees only the
+* shortcuts that actually do something in the active mode.
+*/
+function PromptHints({ selectMode, triggerHints }) {
+	const COLOR = useColors();
+	const { width: termWidth } = useTerminalDimensions();
+	const primary = selectMode ? PROMPT_HINTS_SELECT : PROMPT_HINTS_NORMAL;
+	const hints = useMemo(() => {
+		if (selectMode || !triggerHints || triggerHints.length === 0) return primary;
+		const budget = Math.max(0, termWidth - 5);
+		if (hintsLength(primary) + (hintsLength(triggerHints) + 3) > budget) return primary;
+		return [...primary, ...triggerHints];
+	}, [
+		selectMode,
+		primary,
+		triggerHints,
+		termWidth
+	]);
+	return /* @__PURE__ */ jsxs("text", {
+		style: {
+			position: "absolute",
+			top: 0,
+			right: 1
+		},
+		fg: COLOR.dim,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: " "
+			}),
+			renderHintSpans(hints, COLOR),
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: " "
+			})
+		]
+	});
+}
+//#endregion
+//#region src/tui/clipboard.ts
+/**
+* Write text to the system clipboard via the terminal's OSC 52 escape
+* sequence — `\x1b]52;c;<base64>\x07`. Modern terminals (iTerm2, kitty,
+* alacritty, wezterm, recent xterm, recent macOS Terminal) honor this;
+* tmux/screen pass it through with the right config. Older or stripped
+* terminals silently drop it — we have no way to detect that in-band.
+*
+* Why OSC 52 over `pbcopy` / `xclip` / `clip.exe`: zero dependencies, no
+* shell-out, works equally over SSH (which is where copy/paste is most
+* painful — the user's clipboard, not the remote box's clipboard).
+*
+* Returns `true` on a successful write to stdout, `false` otherwise.
+* Callers should reflect the result in UX (toast / inline message) but
+* not treat `false` as a hard failure — it just means "stdout is not a
+* TTY" or the terminal swallowed the sequence.
+*/
+function writeToClipboard(text) {
+	if (typeof process === "undefined" || !process.stdout?.write) return false;
+	if (!process.stdout.isTTY) return false;
+	try {
+		const encoded = Buffer.from(text, "utf8").toString("base64");
+		process.stdout.write(`\x1B]52;c;${encoded}\x07`);
+		return true;
+	} catch {
+		return false;
+	}
+}
+//#endregion
+//#region src/tui/session-details-modal.tsx
+function SessionDetailsModal({ session, title, isCurrent, actions }) {
+	const COLOR = useColors();
+	const modal = useModal();
+	const { width: termWidth } = useTerminalDimensions();
+	const cwdMaxWidth = Math.max(24, Math.floor(termWidth * .6) - 12);
+	const [displayTitle, setDisplayTitle] = useState(title ?? (typeof session.metadata?.title === "string" ? session.metadata.title : void 0) ?? "untitled");
+	const usage = aggregateUsage(session.runs);
+	const turnCount = session.turns.length;
+	const userMessageCount = session.turns.filter((t) => t.role === "user").length;
+	const hasGenerate = actions.onGenerateTitle != null && turnCount > 0;
+	const [pending, setPending] = useState(null);
+	const [copyStatus, setCopyStatus] = useState("idle");
+	const [titleStatus, setTitleStatus] = useState("idle");
+	const [titleError, setTitleError] = useState(null);
+	const [exportStatus, setExportStatus] = useState("idle");
+	const [exportResult, setExportResult] = useState(null);
+	const [exportError, setExportError] = useState(null);
+	const hasExport = actions.onExport != null && turnCount > 0;
+	const generationAbortRef = useRef(null);
+	const mountedRef = useRef(true);
+	useEffect(() => () => {
+		mountedRef.current = false;
+		generationAbortRef.current?.abort();
+		generationAbortRef.current = null;
+	}, []);
+	const resetPeerFeedback = (keep = "none") => {
+		if (keep !== "copy") setCopyStatus("idle");
+		if (keep !== "export") {
+			setExportStatus("idle");
+			setExportResult(null);
+			setExportError(null);
+		}
+		if (keep !== "title") {
+			setTitleStatus((prev) => prev === "loading" ? prev : "idle");
+			setTitleError(null);
+		}
+	};
+	const commitDelete = () => {
+		modal.close();
+		actions.onDelete(session.id);
+	};
+	const handleCopy = () => {
+		resetPeerFeedback("copy");
+		setCopyStatus(writeToClipboard(session.id) ? "copied" : "failed");
+	};
+	const handleExport = async (format) => {
+		if (!actions.onExport || exportStatus === "writing") return;
+		resetPeerFeedback("export");
+		setExportStatus("writing");
+		try {
+			const result = await actions.onExport(session.id, format);
+			if (!mountedRef.current) return;
+			setExportResult(result);
+			setExportStatus("success");
+		} catch (err) {
+			if (!mountedRef.current) return;
+			setExportError(err instanceof Error ? err.message : String(err));
+			setExportStatus("failed");
+		}
+	};
+	const handleGenerate = async () => {
+		if (!actions.onGenerateTitle || titleStatus === "loading") return;
+		resetPeerFeedback("title");
+		setTitleStatus("loading");
+		const ac = new AbortController();
+		generationAbortRef.current = ac;
+		try {
+			const next = await actions.onGenerateTitle(session.id, ac.signal);
+			if (!mountedRef.current || ac.signal.aborted) return;
+			setDisplayTitle(next);
+			setTitleStatus("idle");
+		} catch (err) {
+			if (!mountedRef.current || ac.signal.aborted) return;
+			setTitleError(err instanceof Error ? err.message : String(err));
+			setTitleStatus("failed");
+		} finally {
+			if (generationAbortRef.current === ac) generationAbortRef.current = null;
+		}
+	};
+	useKeyboard((key) => {
+		if (titleStatus === "loading" || exportStatus === "writing") return;
+		if (key.name === "escape" && pending) {
+			setPending(null);
+			return;
+		}
+		if (key.name === "d") {
+			if (pending === "delete") commitDelete();
+			else setPending("delete");
+			return;
+		}
+		if (key.name === "c") {
+			setPending(null);
+			handleCopy();
+			return;
+		}
+		if (key.name === "g" && hasGenerate) {
+			setPending(null);
+			handleGenerate();
+			return;
+		}
+		if (key.name === "e" && hasExport) {
+			setPending(null);
+			handleExport("markdown");
+			return;
+		}
+		if (key.name === "j" && hasExport) {
+			setPending(null);
+			handleExport("json");
+			return;
+		}
+		if (pending) setPending(null);
+	});
+	return /* @__PURE__ */ jsxs(Modal, {
+		title: `session · ${displayTitle}`,
+		bottomTitle: `#${shortId(session.id)} · ${turnCount} turn${turnCount === 1 ? "" : "s"}`,
+		disableEscape: titleStatus === "loading" || exportStatus === "writing" || pending !== null,
+		children: [
+			/* @__PURE__ */ jsxs("text", {
+				fg: COLOR.dim,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "id "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.model,
+						children: session.id
+					}),
+					isCurrent && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "  ·  "
+					}), /* @__PURE__ */ jsx("span", {
+						fg: COLOR.accent,
+						children: "active"
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsxs("text", {
+				fg: COLOR.dim,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "created "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.dim,
+						children: ageString(session.createdAt)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "  ·  "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "updated "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.dim,
+						children: ageString(session.updatedAt)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("text", {
+				fg: COLOR.dim,
+				wrapMode: "none",
+				children: [/* @__PURE__ */ jsx("span", {
+					fg: COLOR.mute,
+					children: "cwd "
+				}), session.projectRoot ? /* @__PURE__ */ jsx("span", {
+					fg: COLOR.dim,
+					children: compactPath(session.projectRoot, cwdMaxWidth)
+				}) : /* @__PURE__ */ jsx("span", {
+					fg: COLOR.mute,
+					children: "untagged"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("text", {
+				fg: COLOR.dim,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "turns "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.warn,
+						children: turnCount
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "  ·  "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "user "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.warn,
+						children: userMessageCount
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "  ·  "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "runs "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.dim,
+						children: session.runs.length
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "  ·  "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "status "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: statusColor(session.status, COLOR),
+						children: session.status
+					})
+				]
+			}),
+			usage.total > 0 && /* @__PURE__ */ jsxs("text", {
+				fg: COLOR.dim,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "tokens "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.model,
+						children: fmtTokens(usage.total)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "  ·  in "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.dim,
+						children: fmtTokens(usage.input)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "  ·  out "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.dim,
+						children: fmtTokens(usage.output)
+					}),
+					usage.cacheRead > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "  ·  cached "
+					}), /* @__PURE__ */ jsx("span", {
+						fg: COLOR.dim,
+						children: fmtTokens(usage.cacheRead)
+					})] }),
+					usage.cost > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "  ·  cost "
+					}), /* @__PURE__ */ jsx("span", {
+						fg: COLOR.dim,
+						children: `$${usage.cost.toFixed(usage.cost < .01 ? 4 : 2)}`
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsx(ActionRow$2, {
+				pending,
+				copyStatus,
+				titleStatus,
+				titleError,
+				hasGenerate,
+				exportStatus,
+				exportResult,
+				exportError,
+				hasExport
+			})
+		]
+	});
+}
+/**
+* Footer action row — mirrors the turn-details modal's pattern. Swaps
+* between the default hint row, a delete-confirm prompt, copy
+* success/failure feedback, an in-flight title-generation spinner, and
+* a title-generation error message. The geometry stays a single row
+* across all states so the modal body never shifts.
+*/
+function ActionRow$2({ pending, copyStatus, titleStatus, titleError, hasGenerate, exportStatus, exportResult, exportError, hasExport }) {
+	const COLOR = useColors();
+	if (titleStatus === "loading") return /* @__PURE__ */ jsx(Spinner, { label: "generating title — please wait" });
+	if (exportStatus === "writing") return /* @__PURE__ */ jsx(Spinner, { label: "exporting session — please wait" });
+	if (titleStatus === "failed") return /* @__PURE__ */ jsxs("text", {
+		fg: COLOR.dim,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.error,
+				children: "title generation failed"
+			}),
+			titleError ? /* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: ` — ${titleError}`
+			}) : null,
+			" · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "g"
+			}),
+			" retry · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "esc"
+			}),
+			" close"
+		]
+	});
+	if (exportStatus === "failed") return /* @__PURE__ */ jsxs("text", {
+		fg: COLOR.dim,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.error,
+				children: "export failed"
+			}),
+			exportError ? /* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: ` — ${exportError}`
+			}) : null,
+			" · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "e"
+			}),
+			" / ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "j"
+			}),
+			" retry · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "esc"
+			}),
+			" close"
+		]
+	});
+	if (pending === "delete") return /* @__PURE__ */ jsxs("text", {
+		fg: COLOR.dim,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.error,
+				children: "delete this session?"
+			}),
+			" press ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.error,
+				children: "d"
+			}),
+			" again to confirm · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "esc"
+			}),
+			" cancel"
+		]
+	});
+	if (exportStatus === "success" && exportResult) return /* @__PURE__ */ jsxs("text", {
+		fg: COLOR.dim,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.accent,
+				children: `✓ wrote ${exportResult.format === "json" ? "JSON" : "Markdown"}`
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: " → "
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.model,
+				children: compactPath(exportResult.filepath)
+			}),
+			" · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "esc"
+			}),
+			" close"
+		]
+	});
+	if (copyStatus === "copied") return /* @__PURE__ */ jsxs("text", {
+		fg: COLOR.dim,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.accent,
+				children: "✓ session id copied"
+			}),
+			" · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "d"
+			}),
+			" delete · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "esc"
+			}),
+			" close"
+		]
+	});
+	if (copyStatus === "failed") return /* @__PURE__ */ jsxs("text", {
+		fg: COLOR.dim,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.error,
+				children: "copy failed (terminal may not support OSC 52)"
+			}),
+			" · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "esc"
+			}),
+			" close"
+		]
+	});
+	return /* @__PURE__ */ jsxs("text", {
+		fg: COLOR.dim,
+		children: [
+			hasGenerate && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "g"
+			}), " generate title · "] }),
+			hasExport && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.warn,
+					children: "e"
+				}),
+				"/",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.warn,
+					children: "j"
+				}),
+				" export md/json · "
+			] }),
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "d"
+			}),
+			" delete · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "c"
+			}),
+			" copy id · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "esc"
+			}),
+			" close"
+		]
 	});
 }
+/**
+* Sum token + cost figures across every {@link SessionRun}. Preference
+* order for a run's tally is `totalUsage` → per-`turnUsage[]` sum.
+* `turnUsage` exists on every completed run; `totalUsage` is provider-
+* specific (set by some pi-ai adapters when the API surfaces it).
+*
+* Returns an aggregate of zeroes when no usage data is available — the
+* caller decides whether to render the tokens row at all.
+*/
+function aggregateUsage(runs) {
+	const acc = {
+		input: 0,
+		output: 0,
+		cacheRead: 0,
+		cost: 0
+	};
+	for (const run of runs) {
+		if (run.totalUsage) {
+			acc.input += run.totalUsage.input ?? 0;
+			acc.output += run.totalUsage.output ?? 0;
+			acc.cacheRead += run.totalUsage.cacheRead ?? 0;
+		} else if (run.turnUsage) for (const u of run.turnUsage) {
+			acc.input += u.input ?? 0;
+			acc.output += u.output ?? 0;
+			acc.cacheRead += u.cacheRead ?? 0;
+		}
+		if (run.cost) acc.cost += run.cost;
+	}
+	return {
+		...acc,
+		total: acc.input + acc.output
+	};
+}
+/**
+* Color a `SessionData.status` for the metadata row — `idle` reads
+* normal, `running` warm (something's in flight), `error` red. Falls
+* back to dim for any future-added status the palette doesn't know.
+*/
+function statusColor(status, COLOR) {
+	switch (status) {
+		case "completed": return COLOR.accent;
+		case "running": return COLOR.warn;
+		case "error": return COLOR.error;
+		default: return COLOR.dim;
+	}
+}
 //#endregion
 //#region src/tui/settings-modal.tsx
 function SettingsModal({ actions } = {}) {
@@ -1487,6 +3443,20 @@ function SettingsModal({ actions } = {}) {
 			...c
 		}));
 		const actionItems = [];
+		if (actions?.onOpenSkills) actionItems.push({
+			kind: "action",
+			id: "skills",
+			label: "Skills",
+			description: "discover + toggle slash-command skills",
+			onPick: actions.onOpenSkills
+		});
+		if (actions?.onOpenMcps) actionItems.push({
+			kind: "action",
+			id: "mcps",
+			label: "MCP servers",
+			description: "enable / disable discovered servers",
+			onPick: actions.onOpenMcps
+		});
 		if (actions?.onReauth) actionItems.push({
 			kind: "action",
 			id: "reauth",
@@ -1545,7 +3515,7 @@ function SettingsModal({ actions } = {}) {
 						cyclable: item.options.length > 1,
 						focused: i === safeCursor
 					}),
-					item.kind === "action" && /* @__PURE__ */ jsx(ActionRow, {
+					item.kind === "action" && /* @__PURE__ */ jsx(ActionRow$1, {
 						label: item.label,
 						description: item.description,
 						focused: i === safeCursor
@@ -1587,96 +3557,415 @@ function ToggleRow({ label, description, enabled, focused }) {
 		fg: focused ? COLOR.brand : COLOR.dim,
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				fg: focused ? COLOR.brand : COLOR.mute,
-				children: focused ? "▶ " : "  "
+				fg: focused ? COLOR.brand : COLOR.mute,
+				children: focused ? "▶ " : "  "
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg: enabled ? COLOR.accent : COLOR.mute,
+				children: enabled ? "[✓] " : "[ ] "
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg: focused ? COLOR.brand : COLOR.dim,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: `  ${description}`
+			})
+		]
+	});
+}
+/**
+* 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
+* after the 2-col cursor slot). The trailing `›` only renders when focused
+* so it reads as a "this row runs" affordance, not a static decoration on
+* every action.
+*/
+function ActionRow$1({ label, description, 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.accent,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.mute,
+				children: `  ${description}`
+			}),
+			focused && /* @__PURE__ */ jsx("span", {
+				fg: COLOR.brand,
+				children: " ›"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/tui/skills-settings.tsx
+/**
+* List + toggle modal for discovered skills. State machine + keyboard +
+* row geometry live in `<ToggleListModal>`; this file just supplies the
+* skill-specific column (description) and the empty-state hint.
+*/
+function SkillsSettingsModal({ catalog }) {
+	const COLOR = useColors();
+	return /* @__PURE__ */ jsx(ToggleListModal, {
+		catalog,
+		keyOf: (s) => s.name,
+		settingKey: "enabledSkills",
+		title: "skills",
+		renderDetail: (skill) => skill.description,
+		emptyState: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("text", {
+			fg: COLOR.dim,
+			children: "No skills discovered."
+		}), /* @__PURE__ */ jsxs("text", {
+			fg: COLOR.mute,
+			children: [
+				"Drop a",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " SKILL.md "
+				}),
+				"into",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " .zidane/skills/<name>/ "
+				}),
+				"or",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " .agents/skills/<name>/ "
+				}),
+				"(project or",
+				/* @__PURE__ */ jsx("span", {
+					fg: COLOR.model,
+					children: " ~/"
+				}),
+				")."
+			]
+		})] })
+	});
+}
+//#endregion
+//#region src/tui/turn-details-modal.tsx
+/** Max chars surfaced in the scrollable preview pane. Long enough that almost everything fits without truncation. */
+const PREVIEW_CHAR_MAX = 8e3;
+/**
+* Visible rows allocated to the modal. Smaller terminals shrink down via
+* the Modal's own clamp; this is the cap on wide terminals so the modal
+* keeps a comfortable shape rather than stretching to the full height.
+*/
+const MAX_MODAL_HEIGHT = 28;
+function TurnDetailsModal({ turn, index, total, actions }) {
+	const COLOR = useColors();
+	const modal = useModal();
+	const fullText = turnAsText(turn);
+	const preview = fullText.length > PREVIEW_CHAR_MAX ? `${fullText.slice(0, PREVIEW_CHAR_MAX)}\n\n…(${fullText.length - PREVIEW_CHAR_MAX} more chars)` : fullText;
+	const summary = blockSummary(turn);
+	const bottomTitle = `${index - 1} before · ${total - index} after`;
+	const [pending, setPending] = useState(null);
+	const [copyStatus, setCopyStatus] = useState("idle");
+	const commitFork = () => {
+		modal.close();
+		actions.onFork(turn.id);
+	};
+	const commitDelete = () => {
+		modal.close();
+		actions.onDelete(turn.id);
+	};
+	const handleCopy = () => {
+		if (!fullText) {
+			setCopyStatus("failed");
+			return;
+		}
+		setCopyStatus(writeToClipboard(fullText) ? "copied" : "failed");
+	};
+	useKeyboard((key) => {
+		if (key.name === "escape" && pending) {
+			setPending(null);
+			return;
+		}
+		if (key.name === "f") {
+			setCopyStatus("idle");
+			if (pending === "fork") commitFork();
+			else setPending("fork");
+			return;
+		}
+		if (key.name === "d") {
+			setCopyStatus("idle");
+			if (pending === "delete") commitDelete();
+			else setPending("delete");
+			return;
+		}
+		if (key.name === "c") {
+			setPending(null);
+			handleCopy();
+			return;
+		}
+		if (pending) setPending(null);
+	});
+	return /* @__PURE__ */ jsxs(Modal, {
+		title: `turn ${index} / ${total} · ${turn.role}`,
+		bottomTitle,
+		maxHeight: MAX_MODAL_HEIGHT,
+		disableEscape: pending !== null,
+		children: [
+			/* @__PURE__ */ jsxs("text", {
+				fg: COLOR.dim,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "id "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.model,
+						children: shortId(turn.id)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "  ·  "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.mute,
+						children: "created "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						fg: COLOR.dim,
+						children: ageString(turn.createdAt)
+					}),
+					turn.runId && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("span", {
+							fg: COLOR.mute,
+							children: "  ·  "
+						}),
+						/* @__PURE__ */ jsx("span", {
+							fg: COLOR.mute,
+							children: "run "
+						}),
+						/* @__PURE__ */ jsx("span", {
+							fg: COLOR.dim,
+							children: turn.runId
+						})
+					] })
+				]
+			}),
+			/* @__PURE__ */ jsxs("text", {
+				fg: COLOR.dim,
+				children: [/* @__PURE__ */ jsx("span", {
+					fg: COLOR.mute,
+					children: "blocks "
+				}), /* @__PURE__ */ jsx("span", {
+					fg: COLOR.dim,
+					children: summary
+				})]
+			}),
+			/* @__PURE__ */ jsx("box", {
+				title: " preview ",
+				style: {
+					border: true,
+					borderColor: COLOR.mute,
+					paddingLeft: 1,
+					paddingRight: 1,
+					flexDirection: "column",
+					flexGrow: 1,
+					flexShrink: 1,
+					minHeight: 5
+				},
+				children: preview ? /* @__PURE__ */ jsx("scrollbox", {
+					focusable: false,
+					style: { flexGrow: 1 },
+					stickyScroll: false,
+					children: /* @__PURE__ */ jsx("text", {
+						fg: COLOR.dim,
+						children: preview
+					})
+				}) : /* @__PURE__ */ jsx("text", {
+					fg: COLOR.mute,
+					children: "— no text content —"
+				})
+			}),
+			/* @__PURE__ */ jsx(ActionRow, {
+				pending,
+				copyStatus,
+				canCopy: fullText.length > 0
+			})
+		]
+	});
+}
+/**
+* Footer row showing the action shortcuts. When a destructive action
+* (fork / delete) is pending confirmation, the row swaps to a clear
+* "press <key> again to confirm" prompt so the user can't trigger it
+* by accident. The copy result rides the same row when present — same
+* geometry, no layout shift.
+*/
+function ActionRow({ pending, copyStatus, canCopy }) {
+	const COLOR = useColors();
+	if (pending === "fork") return /* @__PURE__ */ jsxs("text", {
+		fg: COLOR.dim,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "fork from here?"
+			}),
+			" press ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "f"
+			}),
+			" again to confirm · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "esc"
+			}),
+			" cancel"
+		]
+	});
+	if (pending === "delete") return /* @__PURE__ */ jsxs("text", {
+		fg: COLOR.dim,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.error,
+				children: "delete this turn?"
 			}),
+			" press ",
 			/* @__PURE__ */ jsx("span", {
-				fg: enabled ? COLOR.accent : COLOR.mute,
-				children: enabled ? "[✓] " : "[ ] "
+				fg: COLOR.error,
+				children: "d"
 			}),
+			" again to confirm · ",
 			/* @__PURE__ */ jsx("span", {
-				fg: focused ? COLOR.brand : COLOR.dim,
-				children: label
+				fg: COLOR.warn,
+				children: "esc"
 			}),
-			/* @__PURE__ */ jsx("span", {
-				fg: COLOR.mute,
-				children: `  ${description}`
-			})
+			" cancel"
 		]
 	});
-}
-/**
-* 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,
+	if (copyStatus === "copied") return /* @__PURE__ */ jsxs("text", {
+		fg: COLOR.dim,
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				fg: focused ? COLOR.brand : COLOR.mute,
-				children: focused ? "▶ " : "  "
+				fg: COLOR.accent,
+				children: "✓ copied"
 			}),
+			" · ",
 			/* @__PURE__ */ jsx("span", {
-				fg: focused ? COLOR.brand : COLOR.dim,
-				children: label
+				fg: COLOR.warn,
+				children: "f"
 			}),
+			" fork · ",
 			/* @__PURE__ */ jsx("span", {
-				fg: COLOR.mute,
-				children: ": "
+				fg: COLOR.warn,
+				children: "d"
 			}),
+			" delete · ",
 			/* @__PURE__ */ jsx("span", {
-				fg: focused ? COLOR.brand : COLOR.accent,
-				children: value
+				fg: COLOR.warn,
+				children: "esc"
 			}),
+			" close"
+		]
+	});
+	if (copyStatus === "failed") return /* @__PURE__ */ jsxs("text", {
+		fg: COLOR.dim,
+		children: [
 			/* @__PURE__ */ jsx("span", {
-				fg: COLOR.mute,
-				children: `  ${description}`
+				fg: COLOR.error,
+				children: "copy failed (terminal may not support OSC 52)"
 			}),
-			focused && cyclable && /* @__PURE__ */ jsx("span", {
-				fg: COLOR.brand,
-				children: " ↻"
-			})
+			" · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "esc"
+			}),
+			" close"
 		]
 	});
-}
-/**
-* Action row — cursor marker · label · description · (focus-only) trailing arrow.
-*
-* The label sits in the same column as a toggle row's `[✓]` checkbox (right
-* after the 2-col cursor slot). The trailing `›` only renders when focused
-* so it reads as a "this row runs" affordance, not a static decoration on
-* every action.
-*/
-function ActionRow({ label, description, focused }) {
-	const COLOR = useColors();
 	return /* @__PURE__ */ jsxs("text", {
-		fg: focused ? COLOR.brand : COLOR.dim,
+		fg: COLOR.dim,
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				fg: focused ? COLOR.brand : COLOR.mute,
-				children: focused ? "▶ " : "  "
+				fg: COLOR.warn,
+				children: "f"
 			}),
+			" fork · ",
 			/* @__PURE__ */ jsx("span", {
-				fg: focused ? COLOR.brand : COLOR.accent,
-				children: label
+				fg: COLOR.warn,
+				children: "d"
 			}),
+			" delete · ",
 			/* @__PURE__ */ jsx("span", {
-				fg: COLOR.mute,
-				children: `  ${description}`
+				fg: canCopy ? COLOR.warn : COLOR.mute,
+				children: "c"
 			}),
-			focused && /* @__PURE__ */ jsx("span", {
-				fg: COLOR.brand,
-				children: " ›"
-			})
+			canCopy ? " copy · " : " (nothing to copy) · ",
+			/* @__PURE__ */ jsx("span", {
+				fg: COLOR.warn,
+				children: "esc"
+			}),
+			" close"
 		]
 	});
 }
+/**
+* Human-readable per-kind block tally — e.g. `1 text · 2 tool_call`. Skips
+* zero-count kinds so the line stays scannable; uses canonical block-type
+* names so they line up with what the LLM and persistence layer see.
+*/
+function blockSummary(turn) {
+	const counts = {};
+	for (const block of turn.content) counts[block.type] = (counts[block.type] ?? 0) + 1;
+	const parts = [];
+	for (const [type, n] of Object.entries(counts)) parts.push(`${n} ${type}`);
+	return parts.length === 0 ? "(empty)" : parts.join(" · ");
+}
 //#endregion
 //#region src/tui/app.tsx
 /**
@@ -1722,7 +4011,7 @@ 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, {}) }) })
+		children: /* @__PURE__ */ jsx(MdStyleProvider, { children: /* @__PURE__ */ jsx(ChipStyleProvider, { children: /* @__PURE__ */ jsx(SafeModeProvider, { children: /* @__PURE__ */ jsx(ModalRoot, { children: /* @__PURE__ */ jsx(AppShell, {}) }) }) }) })
 	});
 }
 function AppShell() {
@@ -1730,16 +4019,21 @@ function AppShell() {
 	const modal = useModal();
 	const config = useConfig();
 	const { settings } = useSettings();
+	const COLOR = useColors();
+	const SURFACE = useSurfaces();
 	const queue = useSafeModeQueue();
 	const { requestApproval, resolveHead, denyAll } = useSafeModeActions();
-	const { providers: providerRegistry, preset, store, stateStore, modelsFor, resumeProvider, initialPicked, initialState } = config;
+	const { providers: providerRegistry, agents: agentRegistry, initialAgentId, store, stateStore, modelsFor, resumeProvider, initialPicked, initialState } = config;
 	const lastResumedSessionId = initialState.lastSessionId;
-	const dataDir = config.paths.dir;
+	const dataDir = config.paths.userDir;
+	const [pickedAgent, setPickedAgent] = useState(() => agentRegistry[initialAgentId] ?? Object.values(agentRegistry)[0]);
+	const pickedAgentRef = useRef(pickedAgent);
 	const safeModeEnabledRef = useRef(settings.safeMode);
 	useEffect(() => {
 		safeModeEnabledRef.current = settings.safeMode;
 	}, [settings.safeMode]);
 	const [projectDir] = useState(() => process.cwd());
+	const [sessionProjectRoot] = useState(() => findGitRoot(process.cwd()) ?? process.cwd());
 	const safelistRef = useRef(null);
 	const readSafelist = useCallback(() => {
 		if (safelistRef.current === null) safelistRef.current = getSafelist(dataDir, projectDir);
@@ -1748,6 +4042,61 @@ function AppShell() {
 	useEffect(() => {
 		safelistRef.current = null;
 	}, [dataDir, projectDir]);
+	const [skillsCatalog, setSkillsCatalog] = useState([]);
+	const [mcpsCatalog, setMcpsCatalog] = useState([]);
+	const [filesCatalog, setFilesCatalog] = useState([]);
+	useEffect(() => {
+		const ac = new AbortController();
+		let cancelled = false;
+		(async () => {
+			try {
+				const skills = await discoverProjectSkills({
+					cwd: projectDir,
+					prefix: config.prefix
+				});
+				if (!cancelled) setSkillsCatalog(skills);
+			} catch (err) {
+				debugLog("discoverProjectSkills failed", err);
+			}
+		})();
+		(async () => {
+			try {
+				const files = await listProjectFiles({
+					cwd: projectDir,
+					signal: ac.signal
+				});
+				if (!cancelled) setFilesCatalog(files);
+			} catch (err) {
+				debugLog("listProjectFiles failed", err);
+			}
+		})();
+		try {
+			setMcpsCatalog(discoverProjectMcps({
+				cwd: projectDir,
+				prefix: config.prefix
+			}));
+		} catch (err) {
+			debugLog("discoverProjectMcps failed", err);
+		}
+		return () => {
+			cancelled = true;
+			ac.abort();
+		};
+	}, [projectDir, config.prefix]);
+	const skillsCatalogRef = useRef(skillsCatalog);
+	skillsCatalogRef.current = skillsCatalog;
+	const enabledSkillsRef = useRef(settings.enabledSkills);
+	enabledSkillsRef.current = settings.enabledSkills;
+	const mcpsCatalogRef = useRef(mcpsCatalog);
+	mcpsCatalogRef.current = mcpsCatalog;
+	const enabledMcpsRef = useRef(settings.enabledMcps);
+	enabledMcpsRef.current = settings.enabledMcps;
+	const filesCatalogRef = useRef(filesCatalog);
+	filesCatalogRef.current = filesCatalog;
+	const completionProviders = useMemo(() => [createSkillsCompletionProvider({
+		getCatalog: () => skillsCatalogRef.current,
+		getEnabled: () => enabledSkillsRef.current
+	}), createFilesCompletionProvider({ getCatalog: () => filesCatalogRef.current })], []);
 	/**
 	* Single source of truth for "should this call execute?". Returns true to
 	* let the call through, false to refuse it. Handles three short-circuits:
@@ -1789,6 +4138,13 @@ function AppShell() {
 	const [busy, setBusy] = useState(false);
 	/** Token count from the most recent assistant turn (caching-aware). */
 	const [lastInputTokens, setLastInputTokens] = useState(0);
+	/**
+	* Active turn id when the user is in "select turn" mode (ctrl+s on the
+	* chat screen). `null` means normal mode — typing is enabled, transcript
+	* has no highlight. When set, the prompt textarea is unfocused so up/down
+	* navigate the turn list, ↵ opens the details modal, ⎋ exits the mode.
+	*/
+	const [selectedTurnId, setSelectedTurnId] = useState(null);
 	const agentRef = useRef(null);
 	const sessionRef = useRef(null);
 	const stream = useStreamBuffer(setEvents);
@@ -1804,8 +4160,25 @@ function AppShell() {
 	const buildAgent = useCallback((session, key) => {
 		const descriptor = providerRegistry[key];
 		if (!descriptor) throw new Error(`No provider registered for key "${key}"`);
+		const profile = pickedAgentRef.current;
+		const skillsConfig = buildSkillsConfig({
+			scan: defaultSkillScanPaths({
+				cwd: projectDir,
+				prefix: config.prefix
+			}),
+			enabled: enabledSkillsRef.current
+		});
+		const projectMcps = buildMcpServers({
+			discovered: mcpsCatalogRef.current,
+			enabled: enabledMcpsRef.current
+		});
 		const agent = createAgent({
-			...preset,
+			...profile.preset,
+			skills: {
+				...skillsConfig,
+				...profile.preset.skills ?? {}
+			},
+			mcpServers: [...projectMcps, ...profile.preset.mcpServers ?? []],
 			provider: descriptor.factory(),
 			session
 		});
@@ -1820,29 +4193,32 @@ function AppShell() {
 		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 }) => {
+		agent.hooks.hook("stream:thinking", ({ delta, turnId }) => stream.queueStreamDelta("thinking", delta, { turnId }));
+		agent.hooks.hook("stream:text", ({ delta, turnId }) => stream.queueStreamDelta("markdown", delta, { turnId }));
+		agent.hooks.hook("tool:before", ({ name, input, turnId }) => {
 			stream.appendImmediate({
 				kind: "tool",
 				text: toolCallPreview(name, input),
-				tool: name
+				tool: name,
+				turnId
 			});
 		});
-		agent.hooks.hook("tool:after", ({ name, result }) => {
+		agent.hooks.hook("tool:after", ({ name, result, turnId }) => {
 			const raw = toolResultText(result);
 			const text = name === "spawn" ? stripSpawnTokensLine(raw) : raw;
 			stream.appendImmediate({
 				kind: "tool-result",
 				text,
-				tool: name
+				tool: name,
+				turnId
 			});
 		});
-		agent.hooks.hook("mcp:tool:after", ({ displayName, result }) => {
+		agent.hooks.hook("mcp:tool:after", ({ displayName, result, turnId }) => {
 			stream.appendImmediate({
 				kind: "tool-result",
 				text: toolResultText(result),
-				tool: displayName
+				tool: displayName,
+				turnId
 			});
 		});
 		agent.hooks.hook("turn:after", ({ usage }) => {
@@ -1875,34 +4251,38 @@ function AppShell() {
 				depth: depth ?? 1
 			});
 		});
-		agent.hooks.hook("child:stream:thinking", ({ delta, childId, depth }) => {
+		agent.hooks.hook("child:stream:thinking", ({ delta, childId, depth, turnId }) => {
 			stream.queueStreamDelta("thinking", delta, {
 				childId,
-				depth
+				depth,
+				turnId
 			});
 		});
-		agent.hooks.hook("child:stream:text", ({ delta, childId, depth }) => {
+		agent.hooks.hook("child:stream:text", ({ delta, childId, depth, turnId }) => {
 			stream.queueStreamDelta("markdown", delta, {
 				childId,
-				depth
+				depth,
+				turnId
 			});
 		});
-		agent.hooks.hook("child:tool:before", ({ name, input, childId, depth }) => {
+		agent.hooks.hook("child:tool:before", ({ name, input, childId, depth, turnId }) => {
 			stream.appendImmediate({
 				kind: "tool",
 				text: toolCallPreview(name, input),
 				tool: name,
 				childId,
-				depth
+				depth,
+				turnId
 			});
 		});
-		agent.hooks.hook("child:tool:after", ({ name, result, childId, depth }) => {
+		agent.hooks.hook("child:tool:after", ({ name, result, childId, depth, turnId }) => {
 			stream.appendImmediate({
 				kind: "tool-result",
 				text: toolResultText(result),
 				tool: name,
 				childId,
-				depth
+				depth,
+				turnId
 			});
 		});
 		agent.hooks.hook("child:stream:end", ({ childId }) => {
@@ -1911,35 +4291,53 @@ function AppShell() {
 		return agent;
 	}, [
 		providerRegistry,
-		preset,
 		stream,
-		gateDecision
+		gateDecision,
+		projectDir,
+		config.prefix
 	]);
 	const refreshSessions = useCallback(async () => {
-		const list = await listSessionMeta(store);
+		const list = await listSessionMeta(store, settings.showAllProjects ? void 0 : { projectRoot: sessionProjectRoot });
 		setSessions(list);
 		return list;
-	}, [store]);
+	}, [
+		store,
+		settings.showAllProjects,
+		sessionProjectRoot
+	]);
 	const teardown = useCallback(async () => {
+		try {
+			denyAll();
+		} catch (err) {
+			debugLog("teardown: denyAll failed", err);
+		}
+		try {
+			agentRef.current?.abort();
+		} catch (err) {
+			debugLog("teardown: agent.abort failed", err);
+		}
 		stream.reset();
 		await agentRef.current?.destroy().catch((err) => debugLog("agent.destroy failed", err));
 		agentRef.current = null;
 		sessionRef.current = null;
-	}, [stream]);
+	}, [stream, denyAll]);
 	const activateSession = useCallback(async (id, key) => {
 		await teardown();
 		const session = (id ? await loadSession(store, id) : null) ?? await createSession({
 			store,
+			projectRoot: sessionProjectRoot,
 			...id ? { id } : {}
 		});
 		sessionRef.current = session;
 		agentRef.current = buildAgent(session, key);
 		setEvents(eventsFromTurns(session.turns, session.runs));
-		setLastInputTokens(lastContextSizeFromTurns(session.turns));
+		setLastInputTokens(lastContextSizeFromTurns(session.turns, session.runs));
 		setCurrentSession({
 			id: session.id,
-			title: titleFromTurns(session.turns) ?? "untitled",
+			title: deriveSessionTitle(session.turns, session.metadata),
 			turnCount: session.turns.length,
+			userMessageCount: session.turns.reduce((n, t) => t.role === "user" ? n + 1 : n, 0),
+			runCount: session.runs.length,
 			updatedAt: Date.now()
 		});
 		setScreen("chat");
@@ -1952,7 +4350,8 @@ function AppShell() {
 		teardown,
 		buildAgent,
 		store,
-		stateStore
+		stateStore,
+		sessionProjectRoot
 	]);
 	useEffect(() => {
 		if (!resumeProvider) return;
@@ -2007,7 +4406,12 @@ function AppShell() {
 		await refreshSessions();
 		setScreen("sessions");
 	}, [refreshSessions]);
+	const popupOpenRef = useRef(false);
+	const onPopupOpenChange = useCallback((open) => {
+		popupOpenRef.current = open;
+	}, []);
 	const onAbort = useCallback(() => {
+		if (popupOpenRef.current) return;
 		denyAll();
 		agentRef.current?.abort();
 	}, [denyAll]);
@@ -2029,19 +4433,59 @@ function AppShell() {
 		});
 		modal.close();
 	}, [modal, stateStore]);
-	const onSubmitPrompt = useCallback(async (prompt) => {
+	const onPickAgent = useCallback(async (id) => {
+		const profile = agentRegistry[id];
+		if (!profile) return;
+		pickedAgentRef.current = profile;
+		setPickedAgent(profile);
+		stateStore.save({
+			...stateStore.load(),
+			lastAgent: id
+		});
+		modal.close();
+		if (picked && currentSession && !busy) await activateSession(currentSession.id, picked.provider.key);
+	}, [
+		agentRegistry,
+		picked,
+		currentSession,
+		busy,
+		activateSession,
+		stateStore,
+		modal
+	]);
+	const onCycleAgent = useCallback(async () => {
+		const ids = Object.keys(agentRegistry);
+		if (ids.length <= 1) return;
+		const nextId = ids[(ids.indexOf(pickedAgentRef.current.id) + 1) % ids.length];
+		await onPickAgent(nextId);
+	}, [agentRegistry, onPickAgent]);
+	const eventsLengthRef = useRef(0);
+	eventsLengthRef.current = events.length;
+	const onSubmitPrompt = useCallback(async (prompt, references) => {
 		const agent = agentRef.current;
 		const session = sessionRef.current;
 		if (!agent || !session || !picked || !prompt.trim()) return;
-		if (events.length > 0) stream.appendImmediate({
+		if (eventsLengthRef.current > 0) stream.appendImmediate({
 			kind: "separator",
 			text: ""
 		});
+		const refSpans = references.filter((r) => r.start >= 0 && r.end > r.start).map((r) => ({
+			start: r.start,
+			end: r.end,
+			providerId: r.providerId
+		}));
 		stream.appendImmediate({
-			kind: "info",
-			text: `❯ ${prompt}`
+			kind: "user-prompt",
+			text: prompt,
+			...refSpans.length > 0 ? { refs: refSpans } : {}
 		});
 		setBusy(true);
+		const skillNames = uniqueSkillNamesFromReferences(references);
+		for (const name of skillNames) try {
+			await agent.activateSkill(name);
+		} catch (err) {
+			debugLog(`activateSkill("${name}")`, err);
+		}
 		try {
 			await agent.run({
 				model: picked.model,
@@ -2050,8 +4494,10 @@ function AppShell() {
 			await session.save().catch((err) => debugLog("session.save failed", err));
 			setCurrentSession((prev) => prev ? {
 				...prev,
-				title: titleFromTurns(session.turns) ?? prev.title,
+				title: deriveSessionTitle(session.turns, session.metadata),
 				turnCount: session.turns.length,
+				userMessageCount: session.turns.reduce((n, t) => t.role === "user" ? n + 1 : n, 0),
+				runCount: session.runs.length,
 				updatedAt: Date.now()
 			} : prev);
 		} catch (err) {
@@ -2063,22 +4509,296 @@ function AppShell() {
 			stream.flushAndUpdate(finalizeStreamingMarkdown);
 			setBusy(false);
 		}
+	}, [picked, stream]);
+	const pendingApproval = queue[0] ?? null;
+	const onReauth = useMemo(() => {
+		if (busy || pendingApproval) return void 0;
+		return () => {
+			modal.close();
+			setScreen("auth");
+		};
+	}, [
+		modal,
+		busy,
+		pendingApproval
+	]);
+	const onOpenSkillsSettings = useCallback(() => {
+		modal.open(/* @__PURE__ */ jsx(SkillsSettingsModal, { catalog: skillsCatalog }));
+	}, [modal, skillsCatalog]);
+	const onOpenMcpsSettings = useCallback(() => {
+		modal.open(/* @__PURE__ */ jsx(McpsSettingsModal, { catalog: mcpsCatalog }));
+	}, [modal, mcpsCatalog]);
+	const hasMultipleAgents = useMemo(() => Object.keys(agentRegistry).length > 1, [agentRegistry]);
+	const turnIds = useMemo(() => selectableTurnIds(events), [events]);
+	/** Drop the selection if its turn disappeared (session swap, history reset). */
+	useEffect(() => {
+		if (selectedTurnId && !turnIds.includes(selectedTurnId)) setSelectedTurnId(null);
+	}, [selectedTurnId, turnIds]);
+	const inSelectMode = selectedTurnId !== null;
+	const enterSelectMode = useCallback(() => {
+		if (turnIds.length === 0) return;
+		setSelectedTurnId(turnIds[turnIds.length - 1]);
+	}, [turnIds]);
+	const cycleSelectedTurn = useCallback((direction) => {
+		setSelectedTurnId((prev) => {
+			if (!prev || turnIds.length === 0) return prev;
+			const idx = turnIds.indexOf(prev);
+			if (idx === -1) return turnIds[turnIds.length - 1];
+			return turnIds[Math.max(0, Math.min(turnIds.length - 1, idx + direction))];
+		});
+	}, [turnIds]);
+	const onForkTurn = useCallback(async (turnId) => {
+		const source = sessionRef.current;
+		if (!source || !picked) return;
+		const slice = truncateTurnsAt(source.turns, turnId);
+		if (!slice || slice.length === 0) return;
+		const referencedRunIds = /* @__PURE__ */ new Set();
+		for (const t of slice) if (t.runId) referencedRunIds.add(t.runId);
+		const inheritedRuns = source.runs.filter((r) => referencedRunIds.has(r.id)).map((r) => ({ ...r }));
+		const fork = await createSession({
+			store,
+			...source.projectRoot ? { projectRoot: source.projectRoot } : {}
+		});
+		fork.setTurns(slice);
+		fork.setRuns(inheritedRuns);
+		try {
+			await fork.save();
+		} catch (err) {
+			debugLog("fork: save failed", err);
+			return;
+		}
+		setSelectedTurnId(null);
+		await activateSession(fork.id, picked.provider.key);
 	}, [
 		picked,
-		events.length,
-		stream
+		store,
+		activateSession
+	]);
+	const onDeleteTurn = useCallback(async (turnId) => {
+		const session = sessionRef.current;
+		if (!session) return;
+		const nextTurns = deleteTurnSafely(session.turns, turnId);
+		if (!nextTurns) return;
+		session.setTurns(nextTurns);
+		try {
+			await session.save();
+		} catch (err) {
+			debugLog("delete: save failed", err);
+			return;
+		}
+		setEvents(eventsFromTurns(session.turns, session.runs));
+		setLastInputTokens(lastContextSizeFromTurns(session.turns, session.runs));
+		setCurrentSession((prev) => prev ? {
+			...prev,
+			turnCount: session.turns.length,
+			userMessageCount: session.turns.reduce((n, t) => t.role === "user" ? n + 1 : n, 0),
+			updatedAt: Date.now()
+		} : prev);
+		setSelectedTurnId((prev) => {
+			if (!prev) return prev;
+			return nextTurns.some((t) => t.id === prev) ? prev : null;
+		});
+	}, []);
+	/**
+	* Identity of the session row the user has focused on the sessions
+	* screen — single source of truth. `SessionsScreen` is rendered fully
+	* controlled against it: the select's `selectedIndex` is derived from
+	* this id, so when the underlying list reorders (e.g. after `generate
+	* title` updates `updatedAt`, SQLite returns rows in a new order) the
+	* cursor follows the IDENTITY of the row the user was on, not the
+	* numerical slot it used to occupy. `ctrl+x` reads it directly.
+	*
+	* `null` means the cursor is on `+ new session` (or the list is
+	* empty); the keyboard handler skips opening the details modal in
+	* that case.
+	*/
+	const [focusedSessionId, setFocusedSessionId] = useState(null);
+	const onDeleteSession = useCallback(async (id) => {
+		try {
+			await store.delete(id);
+		} catch (err) {
+			debugLog("delete session failed", err);
+			return;
+		}
+		const wasCurrent = id === currentSession?.id;
+		if (wasCurrent) {
+			await teardown();
+			setCurrentSession(null);
+			setEvents([]);
+			setSelectedTurnId(null);
+			stateStore.save({
+				...stateStore.load(),
+				lastSessionId: void 0
+			});
+		}
+		await refreshSessions();
+		if (wasCurrent) setScreen("sessions");
+	}, [
+		store,
+		currentSession,
+		teardown,
+		refreshSessions,
+		stateStore
+	]);
+	const onGenerateTitle = useCallback(async (sessionId, signal) => {
+		if (!picked) throw new Error("No provider picked — open the chat screen first.");
+		const descriptor = providerRegistry[picked.provider.key];
+		if (!descriptor) throw new Error(`Provider "${picked.provider.key}" is not registered.`);
+		let turns;
+		let metadataRecord;
+		let liveSession = null;
+		let loadedData = null;
+		if (sessionId === sessionRef.current?.id) {
+			liveSession = sessionRef.current;
+			turns = sessionRef.current.turns;
+			metadataRecord = sessionRef.current.metadata;
+		} else {
+			loadedData = await store.load(sessionId);
+			if (!loadedData) throw new Error("Session not found.");
+			turns = loadedData.turns;
+			metadataRecord = loadedData.metadata;
+		}
+		const title = await generateSessionTitle({
+			provider: descriptor.factory(),
+			model: picked.model,
+			turns,
+			signal
+		});
+		if (liveSession) {
+			liveSession.setMeta("title", title);
+			await liveSession.save().catch((err) => debugLog("generate-title: save failed", err));
+		} else {
+			if (!loadedData) throw new Error("Session disappeared mid-generation.");
+			const nextMeta = {
+				...metadataRecord ?? {},
+				title
+			};
+			await store.save({
+				...loadedData,
+				metadata: nextMeta,
+				updatedAt: Date.now()
+			}).catch((err) => debugLog("generate-title: store.save failed", err));
+		}
+		setCurrentSession((prev) => prev && prev.id === sessionId ? {
+			...prev,
+			title,
+			updatedAt: Date.now()
+		} : prev);
+		await refreshSessions().catch((err) => debugLog("generate-title: refreshSessions failed", err));
+		return title;
+	}, [
+		picked,
+		providerRegistry,
+		store,
+		refreshSessions
+	]);
+	const onExportSession = useCallback(async (sessionId, format) => {
+		let data = null;
+		if (sessionId === sessionRef.current?.id) data = sessionRef.current.toJSON();
+		else data = await store.load(sessionId);
+		if (!data) throw new Error("Session not found.");
+		return {
+			filepath: (await writeSessionExport({
+				session: data,
+				format,
+				cwd: projectDir,
+				prefix: config.prefix
+			})).filepath,
+			format
+		};
+	}, [
+		store,
+		projectDir,
+		config.prefix
+	]);
+	const openSessionDetails = useCallback(async (sessionId) => {
+		const data = await store.load(sessionId);
+		if (!data) {
+			debugLog("openSessionDetails: session not found", sessionId);
+			return;
+		}
+		modal.open(/* @__PURE__ */ jsx(SessionDetailsModal, {
+			session: data,
+			title: sessionId === currentSession?.id ? currentSession.title : void 0,
+			isCurrent: sessionId === currentSession?.id,
+			actions: {
+				onDelete: onDeleteSession,
+				onExport: onExportSession,
+				...picked ? { onGenerateTitle } : {}
+			}
+		}));
+	}, [
+		modal,
+		store,
+		currentSession,
+		onDeleteSession,
+		picked,
+		onGenerateTitle,
+		onExportSession
+	]);
+	const openSelectedTurn = useCallback(() => {
+		const id = selectedTurnId;
+		if (!id) return;
+		const session = sessionRef.current;
+		if (!session) return;
+		const turn = session.turns.find((t) => t.id === id);
+		if (!turn) return;
+		const index = turnIds.indexOf(id) + 1;
+		modal.open(/* @__PURE__ */ jsx(TurnDetailsModal, {
+			turn,
+			index,
+			total: turnIds.length,
+			actions: {
+				onFork: onForkTurn,
+				onDelete: onDeleteTurn
+			}
+		}));
+	}, [
+		modal,
+		selectedTurnId,
+		turnIds,
+		onForkTurn,
+		onDeleteTurn
 	]);
-	const onReauth = useCallback(() => {
-		modal.close();
-		setScreen("auth");
-	}, [modal]);
-	const pendingApproval = queue[0] ?? null;
 	useKeyboard((key) => {
 		if (modal.isOpen) return;
+		if (inSelectMode && screen === "chat") {
+			if (key.name === "up") {
+				cycleSelectedTurn(-1);
+				return;
+			}
+			if (key.name === "down") {
+				cycleSelectedTurn(1);
+				return;
+			}
+			if (key.name === "return") {
+				openSelectedTurn();
+				return;
+			}
+			if (key.name === "escape") {
+				setSelectedTurnId(null);
+				return;
+			}
+			return;
+		}
 		if (key.ctrl && key.name === "," && screen !== "auth") {
-			modal.open(/* @__PURE__ */ jsx(SettingsModal, { actions: { onReauth } }));
+			modal.open(/* @__PURE__ */ jsx(SettingsModal, { actions: {
+				onReauth,
+				onOpenSkills: onOpenSkillsSettings,
+				onOpenMcps: onOpenMcpsSettings
+			} }));
 			return;
 		}
+		if (key.ctrl && key.name === "x") {
+			if (screen === "chat" && currentSession && !busy && !pendingApproval) {
+				openSessionDetails(currentSession.id);
+				return;
+			}
+			if (screen === "sessions" && isSessionRowId(focusedSessionId)) {
+				openSessionDetails(focusedSessionId);
+				return;
+			}
+		}
 		if (key.ctrl && key.name === "m" && screen === "chat" && picked && !busy) {
 			modal.open(/* @__PURE__ */ jsx(ModelPickerModal, {
 				models: modelsFor(picked.provider.key),
@@ -2087,6 +4807,22 @@ function AppShell() {
 			}));
 			return;
 		}
+		if (key.ctrl && key.name === "s" && screen === "chat" && !busy && !pendingApproval) {
+			enterSelectMode();
+			return;
+		}
+		if (key.ctrl && key.name === "a" && screen === "chat" && hasMultipleAgents && !busy) {
+			modal.open(/* @__PURE__ */ jsx(AgentPickerModal, {
+				agents: agentRegistry,
+				currentAgentId: pickedAgent.id,
+				onPick: onPickAgent
+			}));
+			return;
+		}
+		if (key.shift && key.name === "tab" && screen === "chat" && hasMultipleAgents && !busy) {
+			onCycleAgent();
+			return;
+		}
 		if (key.name !== "escape") return;
 		if (busy || pendingApproval) return onAbort();
 		if (screen === "chat") return onOpenSessions();
@@ -2101,11 +4837,43 @@ function AppShell() {
 		}
 		renderer.destroy();
 	});
-	const hints = useMemo(() => buildHints(screen, busy, !!pendingApproval, currentSession), [
+	const hints = useMemo(() => buildHints({
+		screen,
+		busy,
+		pending: !!pendingApproval,
+		currentSession,
+		hasMultipleAgents,
+		modelLabel: picked?.model ?? null,
+		modelColor: COLOR.model,
+		agentLabel: pickedAgent.label,
+		agentColor: accentColor(pickedAgent.accent, COLOR)
+	}), [
 		screen,
 		busy,
 		pendingApproval,
-		currentSession
+		currentSession,
+		hasMultipleAgents,
+		picked,
+		pickedAgent,
+		COLOR
+	]);
+	const promptTriggerHints = useMemo(() => {
+		const out = [];
+		if (filesCatalog.length > 0) out.push({
+			key: "@",
+			label: "files",
+			keyColor: resolveChipColor(SURFACE.chips, "files").bg
+		});
+		if (skillsCatalog.length > 0) out.push({
+			key: "/",
+			label: "skills",
+			keyColor: resolveChipColor(SURFACE.chips, "skills").bg
+		});
+		return out;
+	}, [
+		filesCatalog,
+		skillsCatalog,
+		SURFACE
 	]);
 	const contextUsage = useMemo(() => {
 		if (screen !== "chat" || !picked) return null;
@@ -2142,8 +4910,12 @@ function AppShell() {
 				screen === "sessions" && /* @__PURE__ */ jsx(SessionsScreen, {
 					sessions,
 					currentId: currentSession?.id ?? null,
+					focusedSessionId,
 					onPick: onSwitchSession,
-					onCreate: onCreateSession
+					onCreate: onCreateSession,
+					onFocusChange: setFocusedSessionId,
+					showAllProjects: settings.showAllProjects,
+					currentProjectRoot: sessionProjectRoot
 				}),
 				screen === "chat" && /* @__PURE__ */ jsx(ChatScreen, {
 					events,
@@ -2152,17 +4924,26 @@ function AppShell() {
 					onSubmit: onSubmitPrompt,
 					session: currentSession,
 					pending: pendingApproval,
-					onApproval: resolveHead
+					onApproval: resolveHead,
+					completionProviders,
+					onPopupOpenChange,
+					selectedTurnId,
+					promptTriggerHints
 				})
 			]
 		}), /* @__PURE__ */ jsx(Footer, {
 			hints,
-			picked,
 			context: contextUsage
 		})]
 	});
 }
-function buildHints(screen, busy, pending, currentSession) {
+/**
+* Build the footer's shortcut hints for the current screen. On the chat
+* screen the model id rides next to its `ctrl+m` shortcut and the agent
+* label rides next to `shift+tab`, each in its accent color — the bar
+* doubles as the status display without needing separate badges.
+*/
+function buildHints({ screen, busy, pending, currentSession, hasMultipleAgents, modelLabel, modelColor, agentLabel, agentColor }) {
 	if (pending) return [
 		{
 			key: "↑↓",
@@ -2204,6 +4985,10 @@ function buildHints(screen, busy, pending, currentSession) {
 			key: "↵",
 			label: "open"
 		},
+		{
+			key: "ctrl+x",
+			label: "session"
+		},
 		{
 			key: "ctrl+,",
 			label: "settings"
@@ -2214,14 +4999,20 @@ function buildHints(screen, busy, pending, currentSession) {
 		}
 	];
 	return [
-		{
-			key: "↵",
-			label: "send"
-		},
-		{
+		...hasMultipleAgents ? [{
+			key: "shift+tab",
+			label: agentLabel,
+			labelColor: agentColor
+		}] : [],
+		...modelLabel ? [{
 			key: "ctrl+m",
-			label: "model"
-		},
+			label: modelLabel,
+			labelColor: modelColor
+		}] : [],
+		...currentSession ? [{
+			key: "ctrl+x",
+			label: "session"
+		}] : [],
 		{
 			key: "ctrl+,",
 			label: "settings"
@@ -2363,7 +5154,7 @@ let runTuiInvoked = false;
 * to `runTui({ storageDir, prefix })`.
 *
 * ```ts
-* import { BUILTIN_PROVIDERS } from 'zidane/chat'
+* import { BUILTIN_AGENTS, BUILTIN_PROVIDERS } from 'zidane/chat'
 * import { runTui } from 'zidane/tui'
 * import { createRemoteStore } from 'zidane/session'  // for the `store` option
 *
@@ -2372,6 +5163,7 @@ let runTuiInvoked = false;
 * await runTui({ storageDir: '/data', prefix: 'myapp' })
 * await runTui({ providers: { ...BUILTIN_PROVIDERS, mine: myDescriptor } })
 * await runTui({ store: createRemoteStore({ url: '…' }) })
+* await runTui({ agents: { ...BUILTIN_AGENTS, debug: myDebugProfile } })
 * ```
 */
 async function runTui(options = {}) {
@@ -2381,19 +5173,23 @@ async function runTui(options = {}) {
 		const cause = err instanceof Error ? err.message : String(err);
 		process.stderr.write(`[zidane/tui] tree-sitter setup failed: ${cause}\n`);
 	});
-	const config = resolveConfig(options);
+	const config = resolveConfig({
+		...options,
+		store: options.store ?? ((paths) => createTuiStore(paths.db))
+	});
 	let done = () => {};
 	const exited = new Promise((resolve) => {
 		done = resolve;
 	});
 	createRoot(await createCliRenderer({
 		exitOnCtrlC: true,
-		onDestroy: () => done()
+		onDestroy: () => done(),
+		debounceDelay: 0
 	})).render(/* @__PURE__ */ jsx(App, { config }));
 	await exited;
 	process.exit(0);
 }
 //#endregion
-export { App, AuthScreen, ChatScreen, Footer, Modal, ModalRoot, ModelPickerModal, SessionsScreen, SettingsModal, Spinner, Transcript, buildMdStyle, isVisible, marginTopFor, onInputSubmit, runTui, useMdStyle, useModal, useModalAwareFocus };
+export { AgentPickerModal, App, AuthScreen, ChatScreen, CompletionPopup, Footer, McpsSettingsModal, Modal, ModalRoot, ModelPickerModal, SessionsScreen, SettingsModal, SkillsSettingsModal, Spinner, ToggleListModal, Transcript, accentColor, buildMdStyle, hintsLength, isVisible, marginTopFor, onInputSubmit, renderHintSpans, runTui, splitPromptSegments, useMdStyle, useModal, useModalAwareFocus };
 
 //# sourceMappingURL=tui.js.map