@claude-code-kit/ui 0.1.1 → 0.3.0

package/dist/index.js

@@ -31,11 +31,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AgentContext: () => AgentContext,
+  AgentProvider: () => AgentProvider,
+  AgentREPL: () => AgentREPL,
+  AuthFlowUI: () => AuthFlowUI,
+  BashPermissionContent: () => BashPermissionContent,
   Byline: () => Byline,
+  ClawdLogo: () => ClawdLogo,
   CommandRegistry: () => CommandRegistry,
   DEFAULT_BINDINGS: () => DEFAULT_BINDINGS,
   Dialog: () => Dialog,
+  DiffView: () => DiffView,
   Divider: () => Divider,
+  FileEditPermissionContent: () => FileEditPermissionContent,
   FuzzyPicker: () => FuzzyPicker,
   KeybindingSetup: () => KeybindingSetup,
   KeyboardShortcutHint: () => KeyboardShortcutHint,
@@ -46,10 +54,12 @@ __export(index_exports, {
   MessageList: () => MessageList,
   MultiSelect: () => MultiSelect,
   Pane: () => Pane,
+  PermissionRequest: () => PermissionRequest,
   ProgressBar: () => ProgressBar,
   PromptInput: () => PromptInput,
   REPL: () => REPL,
   Ratchet: () => Ratchet,
+  SearchOverlay: () => SearchOverlay,
   Select: () => Select,
   Spinner: () => Spinner,
   StatusIcon: () => StatusIcon,
@@ -62,6 +72,8 @@ __export(index_exports, {
   ThemeProvider: () => ThemeProvider,
   ThemedBox: () => ThemedBox_default,
   ThemedText: () => ThemedText,
+  VirtualList: () => VirtualList,
+  WelcomeScreen: () => WelcomeScreen,
   clearCommand: () => clearCommand,
   color: () => color,
   createCommandRegistry: () => createCommandRegistry,
@@ -71,46 +83,178 @@ __export(index_exports, {
   exitCommand: () => exitCommand,
   getTheme: () => getTheme,
   helpCommand: () => helpCommand,
+  parseUnifiedDiff: () => parseUnifiedDiff,
+  useAgent: () => useAgent,
+  useAgentContext: () => useAgentContext,
   useDoublePress: () => useDoublePress,
   useKeybinding: () => useKeybinding,
   useKeybindings: () => useKeybindings,
   usePreviewTheme: () => usePreviewTheme,
+  useSearch: () => useSearch,
   useStatusLine: () => useStatusLine,
   useTabsWidth: () => useTabsWidth,
   useTerminalSize: () => useTerminalSize,
   useTheme: () => useTheme,
-  useThemeSetting: () => useThemeSetting
+  useThemeSetting: () => useThemeSetting,
+  useVirtualScroll: () => useVirtualScroll
 });
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("@claude-code-kit/ink-renderer"), module.exports);
 
-// src/Divider.tsx
+// src/DiffView.tsx
 var import_react = require("react");
 var import_ink_renderer = require("@claude-code-kit/ink-renderer");
 var import_jsx_runtime = require("react/jsx-runtime");
+function parseUnifiedDiff(diff) {
+  const rawLines = diff.split("\n");
+  let filename = "";
+  const lines = [];
+  let oldLine = 0;
+  let newLine = 0;
+  for (const line of rawLines) {
+    if (line.startsWith("+++ ")) {
+      const path = line.slice(4).trim();
+      filename = path.startsWith("b/") ? path.slice(2) : path;
+      continue;
+    }
+    if (line.startsWith("--- ")) continue;
+    const hunkMatch = line.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+    if (hunkMatch) {
+      oldLine = parseInt(hunkMatch[1], 10);
+      newLine = parseInt(hunkMatch[2], 10);
+      continue;
+    }
+    if (line.startsWith("diff ") || line.startsWith("index ") || line.startsWith("\\")) {
+      continue;
+    }
+    if (oldLine === 0 && newLine === 0) continue;
+    if (line.startsWith("+")) {
+      lines.push({
+        type: "added",
+        content: line.slice(1),
+        newLineNumber: newLine
+      });
+      newLine++;
+    } else if (line.startsWith("-")) {
+      lines.push({
+        type: "removed",
+        content: line.slice(1),
+        oldLineNumber: oldLine
+      });
+      oldLine++;
+    } else {
+      lines.push({
+        type: "context",
+        content: line.startsWith(" ") ? line.slice(1) : line,
+        oldLineNumber: oldLine,
+        newLineNumber: newLine
+      });
+      oldLine++;
+      newLine++;
+    }
+  }
+  return { filename: filename || "unknown", lines };
+}
+function DiffView({
+  filename,
+  lines: propLines,
+  diff,
+  showLineNumbers = true,
+  maxHeight,
+  color: colorOverrides
+}) {
+  const parsed = (0, import_react.useMemo)(() => {
+    if (diff) return parseUnifiedDiff(diff);
+    return null;
+  }, [diff]);
+  const resolvedFilename = parsed?.filename ?? filename;
+  const resolvedLines = parsed?.lines ?? propLines;
+  const addedColor = colorOverrides?.added ?? "green";
+  const removedColor = colorOverrides?.removed ?? "red";
+  const headerColor = colorOverrides?.header ?? "cyan";
+  const contextColor = colorOverrides?.context;
+  const maxLineNum = (0, import_react.useMemo)(() => {
+    let max = 0;
+    for (const line of resolvedLines) {
+      if (line.oldLineNumber !== void 0 && line.oldLineNumber > max) max = line.oldLineNumber;
+      if (line.newLineNumber !== void 0 && line.newLineNumber > max) max = line.newLineNumber;
+    }
+    return max;
+  }, [resolvedLines]);
+  const gutterWidth = Math.max(2, String(maxLineNum).length);
+  const visibleLines = maxHeight && resolvedLines.length > maxHeight ? resolvedLines.slice(0, maxHeight) : resolvedLines;
+  const truncated = maxHeight && resolvedLines.length > maxHeight ? resolvedLines.length - maxHeight : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink_renderer.Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink_renderer.Text, { bold: true, color: headerColor, children: [
+      "  ",
+      resolvedFilename
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink_renderer.Text, { dimColor: true, children: [
+      "  ",
+      "\u2500".repeat(30)
+    ] }),
+    visibleLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DiffLineRow,
+      {
+        line,
+        gutterWidth,
+        showLineNumbers,
+        addedColor,
+        removedColor,
+        contextColor
+      },
+      i
+    )),
+    truncated > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink_renderer.Text, { dimColor: true, children: [
+      "  ... ",
+      truncated,
+      " more lines"
+    ] })
+  ] });
+}
+function DiffLineRow({ line, gutterWidth, showLineNumbers, addedColor, removedColor, contextColor }) {
+  const lineNum = line.type === "removed" ? line.oldLineNumber : line.newLineNumber ?? line.oldLineNumber;
+  const prefix = line.type === "added" ? "+ " : line.type === "removed" ? "- " : "  ";
+  const gutterStr = showLineNumbers && lineNum !== void 0 ? String(lineNum).padStart(gutterWidth) : " ".repeat(gutterWidth);
+  const contentColor = line.type === "added" ? addedColor : line.type === "removed" ? removedColor : contextColor;
+  const dim = line.type === "context" && !contextColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink_renderer.Text, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink_renderer.Text, { dimColor: true, children: gutterStr }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink_renderer.Text, { dimColor: true, children: " \u2502 " }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink_renderer.Text, { dimColor: dim, color: contentColor, children: [
+      prefix,
+      line.content
+    ] })
+  ] });
+}
+
+// src/Divider.tsx
+var import_react2 = require("react");
+var import_ink_renderer2 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Divider({ width, color: color2, char = "\u2500", padding = 0, title }) {
-  const terminalSize = (0, import_react.useContext)(import_ink_renderer.TerminalSizeContext);
+  const terminalSize = (0, import_react2.useContext)(import_ink_renderer2.TerminalSizeContext);
   const terminalWidth = terminalSize?.columns ?? 80;
   const effectiveWidth = Math.max(0, (width ?? terminalWidth - 2) - padding);
   if (title) {
-    const titleWidth = (0, import_ink_renderer.stringWidth)(title) + 2;
+    const titleWidth = (0, import_ink_renderer2.stringWidth)(title) + 2;
     const sideWidth = Math.max(0, effectiveWidth - titleWidth);
     const leftWidth = Math.floor(sideWidth / 2);
     const rightWidth = sideWidth - leftWidth;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink_renderer.Text, { color: color2, dimColor: !color2, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ink_renderer2.Text, { color: color2, dimColor: !color2, children: [
       char.repeat(leftWidth),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink_renderer.Text, { dimColor: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink_renderer.Ansi, { children: title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ink_renderer2.Text, { dimColor: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ink_renderer2.Ansi, { children: title }) }),
       " ",
       char.repeat(rightWidth)
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink_renderer.Text, { color: color2, dimColor: !color2, children: char.repeat(effectiveWidth) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ink_renderer2.Text, { color: color2, dimColor: !color2, children: char.repeat(effectiveWidth) });
 }
 
 // src/ProgressBar.tsx
-var import_ink_renderer2 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_ink_renderer3 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var BLOCKS = [" ", "\u258F", "\u258E", "\u258D", "\u258C", "\u258B", "\u258A", "\u2589", "\u2588"];
 function ProgressBar({ ratio: inputRatio, width, fillColor, emptyColor }) {
   const ratio = Math.min(1, Math.max(0, inputRatio));
@@ -125,13 +269,13 @@ function ProgressBar({ ratio: inputRatio, width, fillColor, emptyColor }) {
       segments.push(BLOCKS[0].repeat(empty));
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ink_renderer2.Text, { color: fillColor, backgroundColor: emptyColor, children: segments.join("") });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ink_renderer3.Text, { color: fillColor, backgroundColor: emptyColor, children: segments.join("") });
 }
 
 // src/StatusIcon.tsx
 var import_figures = __toESM(require("figures"));
-var import_ink_renderer3 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_ink_renderer4 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var STATUS_CONFIG = {
   success: { icon: import_figures.default.tick, color: "green" },
   error: { icon: import_figures.default.cross, color: "red" },
@@ -142,16 +286,16 @@ var STATUS_CONFIG = {
 };
 function StatusIcon({ status, withSpace = false }) {
   const config = STATUS_CONFIG[status];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ink_renderer3.Text, { color: config.color, dimColor: !config.color, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ink_renderer4.Text, { color: config.color, dimColor: !config.color, children: [
     config.icon,
     withSpace && " "
   ] });
 }
 
 // src/StatusLine.tsx
-var import_react2 = require("react");
-var import_ink_renderer4 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react3 = __toESM(require("react"));
+var import_ink_renderer5 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function hasAnsi(s) {
   return /\x1b\[/.test(s);
 }
@@ -159,28 +303,31 @@ function StatusLine({
   segments,
   text,
   paddingX = 1,
-  gap = 1,
+  separator = " \xB7 ",
   borderStyle = "none",
   borderColor
 }) {
   const border = borderStyle === "none" ? void 0 : borderStyle;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_ink_renderer4.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_ink_renderer5.Box,
     {
       flexDirection: "row",
       paddingX,
       borderStyle: border,
       borderColor,
-      children: text !== void 0 ? hasAnsi(text) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ink_renderer4.Ansi, { children: text }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ink_renderer4.Text, { dimColor: true, children: text }) : segments?.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ink_renderer4.Box, { flexGrow: seg.flex ? 1 : 0, marginRight: i < segments.length - 1 ? gap : 0, children: hasAnsi(seg.content) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ink_renderer4.Ansi, { children: seg.content }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ink_renderer4.Text, { dimColor: true, color: seg.color, children: seg.content }) }, i))
+      children: text !== void 0 ? hasAnsi(text) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ink_renderer5.Ansi, { children: text }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ink_renderer5.Text, { dimColor: true, children: text }) : segments?.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react3.default.Fragment, { children: [
+        i > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ink_renderer5.Text, { dimColor: true, children: separator }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ink_renderer5.Box, { flexGrow: seg.flex ? 1 : 0, children: hasAnsi(seg.content) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ink_renderer5.Ansi, { children: seg.content }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ink_renderer5.Text, { dimColor: true, color: seg.color, children: seg.content }) })
+      ] }, i))
     }
   );
 }
 function useStatusLine(updater, deps, intervalMs) {
-  const [value, setValue] = (0, import_react2.useState)(() => updater());
-  (0, import_react2.useEffect)(() => {
+  const [value, setValue] = (0, import_react3.useState)(() => updater());
+  (0, import_react3.useEffect)(() => {
     setValue(updater());
   }, deps);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!intervalMs) return;
     const id = setInterval(() => setValue(updater()), intervalMs);
     return () => clearInterval(id);
@@ -285,11 +432,11 @@ var clearCommand = {
 };
 
 // src/keybindings/useKeybinding.ts
-var import_react4 = require("react");
-var import_ink_renderer5 = require("@claude-code-kit/ink-renderer");
+var import_react5 = require("react");
+var import_ink_renderer6 = require("@claude-code-kit/ink-renderer");
 
 // src/keybindings/KeybindingContext.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/keybindings/match.ts
 function getKeyName(input, key) {
@@ -536,8 +683,8 @@ function resolveKeyWithChordState(input, key, activeContexts, bindings, pending)
 }
 
 // src/keybindings/KeybindingContext.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var KeybindingContext = (0, import_react3.createContext)(null);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var KeybindingContext = (0, import_react4.createContext)(null);
 function KeybindingProvider({
   bindings,
   pendingChordRef,
@@ -549,11 +696,11 @@ function KeybindingProvider({
   handlerRegistryRef,
   children
 }) {
-  const getDisplayText = (0, import_react3.useMemo)(
+  const getDisplayText = (0, import_react4.useMemo)(
     () => (action, context) => getBindingDisplayText(action, context, bindings),
     [bindings]
   );
-  const registerHandler = (0, import_react3.useMemo)(
+  const registerHandler = (0, import_react4.useMemo)(
     () => (registration) => {
       const registry = handlerRegistryRef.current;
       if (!registry) return () => {
@@ -574,7 +721,7 @@ function KeybindingProvider({
     },
     [handlerRegistryRef]
   );
-  const invokeAction = (0, import_react3.useMemo)(
+  const invokeAction = (0, import_react4.useMemo)(
     () => (action) => {
       const registry = handlerRegistryRef.current;
       if (!registry) return false;
@@ -590,7 +737,7 @@ function KeybindingProvider({
     },
     [activeContexts, handlerRegistryRef]
   );
-  const resolve = (0, import_react3.useMemo)(
+  const resolve = (0, import_react4.useMemo)(
     () => (input, key, contexts) => resolveKeyWithChordState(
       input,
       key,
@@ -600,7 +747,7 @@ function KeybindingProvider({
     ),
     [bindings, pendingChordRef]
   );
-  const value = (0, import_react3.useMemo)(
+  const value = (0, import_react4.useMemo)(
     () => ({
       resolve,
       setPendingChord,
@@ -626,21 +773,21 @@ function KeybindingProvider({
       invokeAction
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeybindingContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeybindingContext.Provider, { value, children });
 }
 function useOptionalKeybindingContext() {
-  return (0, import_react3.useContext)(KeybindingContext);
+  return (0, import_react4.useContext)(KeybindingContext);
 }
 
 // src/keybindings/useKeybinding.ts
 function useKeybinding(action, handler, options = {}) {
   const { context = "Global", isActive = true } = options;
   const keybindingContext = useOptionalKeybindingContext();
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!keybindingContext || !isActive) return;
     return keybindingContext.registerHandler({ action, context, handler });
   }, [action, context, handler, keybindingContext, isActive]);
-  const handleInput = (0, import_react4.useCallback)(
+  const handleInput = (0, import_react5.useCallback)(
     (input, key, event) => {
       if (!keybindingContext) return;
       const contextsToCheck = [
@@ -676,12 +823,12 @@ function useKeybinding(action, handler, options = {}) {
     },
     [action, context, handler, keybindingContext]
   );
-  (0, import_ink_renderer5.useInput)(handleInput, { isActive });
+  (0, import_ink_renderer6.useInput)(handleInput, { isActive });
 }
 function useKeybindings(handlers, options = {}) {
   const { context = "Global", isActive = true } = options;
   const keybindingContext = useOptionalKeybindingContext();
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!keybindingContext || !isActive) return;
     const unregisterFns = [];
     for (const [action, handler] of Object.entries(handlers)) {
@@ -695,7 +842,7 @@ function useKeybindings(handlers, options = {}) {
       }
     };
   }, [context, handlers, keybindingContext, isActive]);
-  const handleInput = (0, import_react4.useCallback)(
+  const handleInput = (0, import_react5.useCallback)(
     (input, key, event) => {
       if (!keybindingContext) return;
       const contextsToCheck = [
@@ -732,12 +879,12 @@ function useKeybindings(handlers, options = {}) {
     },
     [context, handlers, keybindingContext]
   );
-  (0, import_ink_renderer5.useInput)(handleInput, { isActive });
+  (0, import_ink_renderer6.useInput)(handleInput, { isActive });
 }
 
 // src/keybindings/KeybindingProviderSetup.tsx
-var import_react5 = require("react");
-var import_ink_renderer6 = require("@claude-code-kit/ink-renderer");
+var import_react6 = require("react");
+var import_ink_renderer7 = require("@claude-code-kit/ink-renderer");
 
 // src/keybindings/loadUserBindings.ts
 var import_chokidar = __toESM(require("chokidar"));
@@ -1605,22 +1752,22 @@ function handleDelete(path) {
 }
 
 // src/keybindings/KeybindingProviderSetup.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var plural = (n, s) => n === 1 ? s : s + "s";
 function logForDebugging2(msg) {
   if (process.env.DEBUG_KEYBINDINGS) console.error(msg);
 }
 var CHORD_TIMEOUT_MS = 1e3;
 function KeybindingSetup({ children, onWarnings }) {
-  const [{ bindings, warnings }, setLoadResult] = (0, import_react5.useState)(() => {
+  const [{ bindings, warnings }, setLoadResult] = (0, import_react6.useState)(() => {
     const result = loadKeybindingsSyncWithWarnings();
     logForDebugging2(
       `[keybindings] KeybindingSetup initialized with ${result.bindings.length} bindings, ${result.warnings.length} warnings`
     );
     return result;
   });
-  const [isReload, setIsReload] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [isReload, setIsReload] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
     if (!onWarnings || warnings.length === 0) return;
     const errorCount = warnings.filter((w) => w.severity === "error").length;
     const warnCount = warnings.filter((w) => w.severity === "warning").length;
@@ -1634,29 +1781,29 @@ function KeybindingSetup({ children, onWarnings }) {
     }
     onWarnings(message + " \xB7 /doctor for details", errorCount > 0);
   }, [warnings, isReload, onWarnings]);
-  const pendingChordRef = (0, import_react5.useRef)(null);
-  const [pendingChord, setPendingChordState] = (0, import_react5.useState)(null);
-  const chordTimeoutRef = (0, import_react5.useRef)(null);
-  const handlerRegistryRef = (0, import_react5.useRef)(
+  const pendingChordRef = (0, import_react6.useRef)(null);
+  const [pendingChord, setPendingChordState] = (0, import_react6.useState)(null);
+  const chordTimeoutRef = (0, import_react6.useRef)(null);
+  const handlerRegistryRef = (0, import_react6.useRef)(
     /* @__PURE__ */ new Map()
   );
-  const activeContextsRef = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
-  const registerActiveContext = (0, import_react5.useCallback)((context) => {
+  const activeContextsRef = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
+  const registerActiveContext = (0, import_react6.useCallback)((context) => {
     activeContextsRef.current.add(context);
   }, []);
-  const unregisterActiveContext = (0, import_react5.useCallback)(
+  const unregisterActiveContext = (0, import_react6.useCallback)(
     (context) => {
       activeContextsRef.current.delete(context);
     },
     []
   );
-  const clearChordTimeout = (0, import_react5.useCallback)(() => {
+  const clearChordTimeout = (0, import_react6.useCallback)(() => {
     if (chordTimeoutRef.current) {
       clearTimeout(chordTimeoutRef.current);
       chordTimeoutRef.current = null;
     }
   }, []);
-  const setPendingChord = (0, import_react5.useCallback)(
+  const setPendingChord = (0, import_react6.useCallback)(
     (pending) => {
       clearChordTimeout();
       if (pending !== null) {
@@ -1671,7 +1818,7 @@ function KeybindingSetup({ children, onWarnings }) {
     },
     [clearChordTimeout]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     void initializeKeybindingWatcher();
     const unsubscribe = subscribeToKeybindingChanges((result) => {
       setIsReload(true);
@@ -1685,7 +1832,7 @@ function KeybindingSetup({ children, onWarnings }) {
       clearChordTimeout();
     };
   }, [clearChordTimeout]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     KeybindingProvider,
     {
       bindings,
@@ -1697,7 +1844,7 @@ function KeybindingSetup({ children, onWarnings }) {
       unregisterActiveContext,
       handlerRegistryRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ChordInterceptor,
           {
             bindings,
@@ -1719,7 +1866,7 @@ function ChordInterceptor({
   activeContexts,
   handlerRegistryRef
 }) {
-  const handleInput = (0, import_react5.useCallback)(
+  const handleInput = (0, import_react6.useCallback)(
     (input, key, event) => {
       if ((key.wheelUp || key.wheelDown) && pendingChordRef.current === null) {
         return;
@@ -1783,28 +1930,28 @@ function ChordInterceptor({
     },
     [bindings, pendingChordRef, setPendingChord, activeContexts, handlerRegistryRef]
   );
-  (0, import_ink_renderer6.useInput)(handleInput);
+  (0, import_ink_renderer7.useInput)(handleInput);
   return null;
 }
 
 // src/hooks/useDoublePress.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var DOUBLE_PRESS_TIMEOUT_MS = 800;
 function useDoublePress(setPending, onDoublePress, onFirstPress) {
-  const lastPressRef = (0, import_react6.useRef)(0);
-  const timeoutRef = (0, import_react6.useRef)(void 0);
-  const clearTimeoutSafe = (0, import_react6.useCallback)(() => {
+  const lastPressRef = (0, import_react7.useRef)(0);
+  const timeoutRef = (0, import_react7.useRef)(void 0);
+  const clearTimeoutSafe = (0, import_react7.useCallback)(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = void 0;
     }
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     return () => {
       clearTimeoutSafe();
     };
   }, [clearTimeoutSafe]);
-  return (0, import_react6.useCallback)(() => {
+  return (0, import_react7.useCallback)(() => {
     const now = Date.now();
     const timeSinceLastPress = now - lastPressRef.current;
     const isDoublePress = timeSinceLastPress <= DOUBLE_PRESS_TIMEOUT_MS && timeoutRef.current !== void 0;
@@ -1831,10 +1978,10 @@ function useDoublePress(setPending, onDoublePress, onFirstPress) {
 }
 
 // src/hooks/useTerminalSize.ts
-var import_react7 = require("react");
-var import_ink_renderer7 = require("@claude-code-kit/ink-renderer");
+var import_react8 = require("react");
+var import_ink_renderer8 = require("@claude-code-kit/ink-renderer");
 function useTerminalSize() {
-  const size = (0, import_react7.useContext)(import_ink_renderer7.TerminalSizeContext);
+  const size = (0, import_react8.useContext)(import_ink_renderer8.TerminalSizeContext);
   if (!size) {
     throw new Error("useTerminalSize must be used within an Ink App component");
   }
@@ -1842,9 +1989,43 @@ function useTerminalSize() {
 }
 
 // src/PromptInput.tsx
-var import_react8 = require("react");
-var import_ink_renderer8 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_ink_renderer9 = require("@claude-code-kit/ink-renderer");
+
+// src/utils/promptInputLogic.ts
+function wordFwd(s, p) {
+  let i = p;
+  while (i < s.length && s[i] !== " ") i++;
+  while (i < s.length && s[i] === " ") i++;
+  return i;
+}
+function wordBwd(s, p) {
+  let i = p;
+  if (i > 0) i--;
+  while (i > 0 && s[i] === " ") i--;
+  while (i > 0 && s[i - 1] !== " ") i--;
+  return i;
+}
+function lineOffset(lines, line) {
+  let pos = 0;
+  for (let i = 0; i < line; i++) pos += lines[i].length + 1;
+  return pos;
+}
+function cursorLineIndex(lines, cursor) {
+  let pos = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (cursor <= pos + lines[i].length) return i;
+    pos += lines[i].length + 1;
+  }
+  return lines.length - 1;
+}
+function filterCommands(commands, value) {
+  if (!value.startsWith("/")) return [];
+  return commands.filter((cmd) => `/${cmd.name}`.startsWith(value));
+}
+
+// src/PromptInput.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function PromptInput({
   value,
   onChange,
@@ -1855,186 +2036,302 @@ function PromptInput({
   disabled = false,
   commands = [],
   onCommandSelect,
-  history = []
+  history = [],
+  vimMode = false,
+  multiline = false
 }) {
-  const [cursor, setCursor] = (0, import_react8.useState)(0);
-  const [historyIndex, setHistoryIndex] = (0, import_react8.useState)(-1);
-  const [suggestionIndex, setSuggestionIndex] = (0, import_react8.useState)(0);
-  const [showSuggestions, setShowSuggestions] = (0, import_react8.useState)(false);
-  const suggestions = value.startsWith("/") && commands.length > 0 ? commands.filter((cmd) => `/${cmd.name}`.startsWith(value)) : [];
+  const [cursor, setCursor] = (0, import_react9.useState)(0);
+  const [historyIndex, setHistoryIndex] = (0, import_react9.useState)(-1);
+  const [suggestionIndex, setSuggestionIndex] = (0, import_react9.useState)(0);
+  const [showSuggestions, setShowSuggestions] = (0, import_react9.useState)(false);
+  const [vim, setVim] = (0, import_react9.useState)("INSERT");
+  const [pendingD, setPendingD] = (0, import_react9.useState)(false);
+  const isVimNormal = vimMode && vim === "NORMAL";
+  const suggestions = commands.length > 0 ? filterCommands(commands, value) : [];
   const hasSuggestions = showSuggestions && suggestions.length > 0;
-  const updateValue = (0, import_react8.useCallback)(
-    (newValue, newCursor) => {
-      onChange(newValue);
-      setCursor(newCursor ?? newValue.length);
+  const lines = multiline ? value.split("\n") : [value];
+  const cursorLine = multiline ? cursorLineIndex(lines, cursor) : 0;
+  const lineOffset2 = (line) => lineOffset(lines, line);
+  const updateValue = (0, import_react9.useCallback)((nv, nc) => {
+    onChange(nv);
+    setCursor(nc ?? nv.length);
+    setHistoryIndex(-1);
+    setShowSuggestions(nv.startsWith("/"));
+    setSuggestionIndex(0);
+  }, [onChange]);
+  const insertNewline = () => {
+    updateValue(value.slice(0, cursor) + "\n" + value.slice(cursor), cursor + 1);
+  };
+  const moveLine = (dir) => {
+    const target = cursorLine + dir;
+    if (multiline && target >= 0 && target < lines.length) {
+      const col = cursor - lineOffset2(cursorLine);
+      setCursor(lineOffset2(target) + Math.min(col, lines[target].length));
+      return true;
+    }
+    return false;
+  };
+  const historyUp = () => {
+    if (history.length > 0 && historyIndex + 1 < history.length) {
+      const ni = historyIndex + 1;
+      setHistoryIndex(ni);
+      const hv = history[ni];
+      onChange(hv);
+      setCursor(hv.length);
+    }
+  };
+  const historyDown = () => {
+    if (historyIndex > 0) {
+      const ni = historyIndex - 1;
+      setHistoryIndex(ni);
+      const hv = history[ni];
+      onChange(hv);
+      setCursor(hv.length);
+    } else if (historyIndex === 0) {
       setHistoryIndex(-1);
-      setShowSuggestions(newValue.startsWith("/"));
-      setSuggestionIndex(0);
-    },
-    [onChange]
-  );
-  (0, import_ink_renderer8.useInput)(
-    (input, key) => {
-      if (disabled) return;
-      if (key.return) {
-        if (hasSuggestions) {
-          const cmd = suggestions[suggestionIndex];
-          const cmdValue = `/${cmd.name}`;
-          onCommandSelect?.(cmd.name);
-          onChange(cmdValue);
-          setCursor(cmdValue.length);
-          setShowSuggestions(false);
-          return;
-        }
-        if (value.length > 0) {
-          onSubmit(value);
-        }
+      onChange("");
+      setCursor(0);
+    }
+  };
+  (0, import_ink_renderer9.useInput)((input, key) => {
+    if (disabled) return;
+    if (isVimNormal) {
+      if (input !== "d") setPendingD(false);
+      if (input === "i") {
+        setVim("INSERT");
         return;
       }
-      if (key.escape) {
-        if (hasSuggestions) {
-          setShowSuggestions(false);
-        }
+      if (input === "a") {
+        setVim("INSERT");
+        setCursor((c) => Math.min(value.length, c + 1));
         return;
       }
-      if (key.tab) {
-        if (hasSuggestions) {
-          const cmd = suggestions[suggestionIndex];
-          const cmdValue = `/${cmd.name} `;
-          updateValue(cmdValue);
-        }
+      if (input === "h" || key.leftArrow) {
+        setCursor((c) => Math.max(0, c - 1));
         return;
       }
-      if (key.upArrow) {
-        if (hasSuggestions) {
-          setSuggestionIndex((i) => i > 0 ? i - 1 : suggestions.length - 1);
-          return;
+      if (input === "l" || key.rightArrow) {
+        setCursor((c) => Math.min(Math.max(0, value.length - 1), c + 1));
+        return;
+      }
+      if (input === "0" || key.home) {
+        setCursor(multiline ? lineOffset2(cursorLine) : 0);
+        return;
+      }
+      if (input === "$" || key.end) {
+        if (multiline) {
+          const endOfLine = lineOffset2(cursorLine) + lines[cursorLine].length;
+          setCursor(Math.max(lineOffset2(cursorLine), endOfLine - 1));
+        } else {
+          setCursor(Math.max(0, value.length - 1));
         }
-        if (history.length > 0) {
-          const nextIndex = historyIndex + 1;
-          if (nextIndex < history.length) {
-            setHistoryIndex(nextIndex);
-            const histValue = history[nextIndex];
-            onChange(histValue);
-            setCursor(histValue.length);
-          }
+        return;
+      }
+      if (input === "w") {
+        setCursor(wordFwd(value, cursor));
+        return;
+      }
+      if (input === "b") {
+        setCursor(wordBwd(value, cursor));
+        return;
+      }
+      if (input === "x") {
+        if (cursor < value.length) {
+          const nv = value.slice(0, cursor) + value.slice(cursor + 1);
+          updateValue(nv, Math.min(cursor, Math.max(0, nv.length - 1)));
         }
         return;
       }
-      if (key.downArrow) {
-        if (hasSuggestions) {
-          setSuggestionIndex((i) => i < suggestions.length - 1 ? i + 1 : 0);
+      if (input === "d") {
+        if (!pendingD) {
+          setPendingD(true);
           return;
         }
-        if (historyIndex > 0) {
-          const nextIndex = historyIndex - 1;
-          setHistoryIndex(nextIndex);
-          const histValue = history[nextIndex];
-          onChange(histValue);
-          setCursor(histValue.length);
-        } else if (historyIndex === 0) {
-          setHistoryIndex(-1);
-          onChange("");
-          setCursor(0);
+        setPendingD(false);
+        if (multiline && lines.length > 1) {
+          const pos = lineOffset2(cursorLine);
+          const end = pos + lines[cursorLine].length;
+          const from = cursorLine === 0 ? pos : pos - 1;
+          const to = cursorLine === 0 ? Math.min(end + 1, value.length) : end;
+          const nv = value.slice(0, from) + value.slice(to);
+          updateValue(nv, Math.min(from, Math.max(0, nv.length - 1)));
+        } else {
+          updateValue("", 0);
         }
         return;
       }
-      if (key.leftArrow) {
-        setCursor((c) => Math.max(0, c - 1));
+      if (key.upArrow || input === "k" && !key.ctrl) {
+        if (!moveLine(-1)) historyUp();
         return;
       }
-      if (key.rightArrow) {
-        setCursor((c) => Math.min(value.length, c + 1));
+      if (key.downArrow || input === "j" && !key.ctrl) {
+        if (!moveLine(1)) historyDown();
+        return;
+      }
+      if (key.return && value.length > 0) {
+        onSubmit(value);
         return;
       }
-      if (key.home || key.ctrl && input === "a") {
-        setCursor(0);
+      return;
+    }
+    if (key.return) {
+      if (hasSuggestions) {
+        const cmd = suggestions[suggestionIndex];
+        const cv = `/${cmd.name}`;
+        onCommandSelect?.(cmd.name);
+        onChange(cv);
+        setCursor(cv.length);
+        setShowSuggestions(false);
         return;
       }
-      if (key.end || key.ctrl && input === "e") {
-        setCursor(value.length);
+      if (multiline && key.shift) {
+        insertNewline();
         return;
       }
-      if (key.ctrl && input === "w") {
-        if (cursor > 0) {
-          let i = cursor - 1;
-          while (i > 0 && value[i - 1] === " ") i--;
-          while (i > 0 && value[i - 1] !== " ") i--;
-          const newValue = value.slice(0, i) + value.slice(cursor);
-          updateValue(newValue, i);
-        }
+      if (value.length > 0) onSubmit(value);
+      return;
+    }
+    if (key.escape) {
+      if (hasSuggestions) {
+        setShowSuggestions(false);
         return;
       }
-      if (key.ctrl && input === "u") {
-        const newValue = value.slice(cursor);
-        updateValue(newValue, 0);
+      if (vimMode) {
+        setVim("NORMAL");
         return;
       }
-      if (key.backspace) {
-        if (cursor > 0) {
-          const newValue = value.slice(0, cursor - 1) + value.slice(cursor);
-          updateValue(newValue, cursor - 1);
-        }
+      return;
+    }
+    if (multiline && key.ctrl && input === "j") {
+      insertNewline();
+      return;
+    }
+    if (key.tab) {
+      if (hasSuggestions) {
+        updateValue(`/${suggestions[suggestionIndex].name} `);
+      }
+      ;
+      return;
+    }
+    if (key.upArrow) {
+      if (hasSuggestions) {
+        setSuggestionIndex((i) => i > 0 ? i - 1 : suggestions.length - 1);
         return;
       }
-      if (key.delete) {
-        if (cursor < value.length) {
-          const newValue = value.slice(0, cursor) + value.slice(cursor + 1);
-          updateValue(newValue, cursor);
-        }
+      if (!moveLine(-1)) historyUp();
+      return;
+    }
+    if (key.downArrow) {
+      if (hasSuggestions) {
+        setSuggestionIndex((i) => i < suggestions.length - 1 ? i + 1 : 0);
         return;
       }
-      if (key.ctrl || key.meta) return;
-      if (input.length > 0) {
-        const newValue = value.slice(0, cursor) + input + value.slice(cursor);
-        updateValue(newValue, cursor + input.length);
+      if (!moveLine(1)) historyDown();
+      return;
+    }
+    if (key.leftArrow) {
+      setCursor((c) => Math.max(0, c - 1));
+      return;
+    }
+    if (key.rightArrow) {
+      setCursor((c) => Math.min(value.length, c + 1));
+      return;
+    }
+    if (key.home || key.ctrl && input === "a") {
+      setCursor(0);
+      return;
+    }
+    if (key.end || key.ctrl && input === "e") {
+      setCursor(value.length);
+      return;
+    }
+    if (key.ctrl && input === "w") {
+      if (cursor > 0) {
+        let i = cursor - 1;
+        while (i > 0 && value[i - 1] === " ") i--;
+        while (i > 0 && value[i - 1] !== " ") i--;
+        updateValue(value.slice(0, i) + value.slice(cursor), i);
       }
-    },
-    { isActive: !disabled }
-  );
-  const renderTextWithCursor = () => {
-    if (value.length === 0 && placeholder) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_ink_renderer8.Text, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ink_renderer8.Text, { inverse: true, children: " " }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ink_renderer8.Text, { dimColor: true, children: placeholder })
+      ;
+      return;
+    }
+    if (key.ctrl && input === "u") {
+      updateValue(value.slice(cursor), 0);
+      return;
+    }
+    if (key.backspace) {
+      if (cursor > 0) updateValue(value.slice(0, cursor - 1) + value.slice(cursor), cursor - 1);
+      return;
+    }
+    if (key.delete) {
+      if (cursor < value.length) updateValue(value.slice(0, cursor) + value.slice(cursor + 1), cursor);
+      return;
+    }
+    if (key.ctrl || key.meta) return;
+    if (input.length > 0) updateValue(value.slice(0, cursor) + input + value.slice(cursor), cursor + input.length);
+  }, { isActive: !disabled });
+  const renderCursor = (text, cur) => {
+    if (text.length === 0 && placeholder && cursor === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ink_renderer9.Text, { inverse: true, children: " " }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ink_renderer9.Text, { dimColor: true, children: placeholder })
       ] });
     }
-    const before = value.slice(0, cursor);
-    const atCursor = cursor < value.length ? value[cursor] : " ";
-    const after = cursor < value.length ? value.slice(cursor + 1) : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_ink_renderer8.Text, { children: [
+    const before = text.slice(0, cur);
+    const at = cur < text.length ? text[cur] : " ";
+    const after = cur < text.length ? text.slice(cur + 1) : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Text, { children: [
       before,
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ink_renderer8.Text, { inverse: true, children: atCursor }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ink_renderer9.Text, { inverse: true, children: at }),
       after
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_ink_renderer8.Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_ink_renderer8.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_ink_renderer8.Text, { color: prefixColor, children: [
-        prefix,
-        " "
-      ] }),
-      renderTextWithCursor()
-    ] }),
-    hasSuggestions && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ink_renderer8.Box, { flexDirection: "column", marginLeft: 2, children: suggestions.map((cmd, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_ink_renderer8.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_ink_renderer8.Text,
-        {
-          inverse: i === suggestionIndex,
-          color: i === suggestionIndex ? "cyan" : void 0,
-          children: `  /${cmd.name}`
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ink_renderer8.Text, { dimColor: true, children: `  ${cmd.description}` })
-    ] }, cmd.name)) })
+  const vimTag = vimMode ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ink_renderer9.Text, { dimColor: true, children: ` -- ${vim} --` }) : null;
+  const renderContent = () => {
+    if (!multiline || lines.length <= 1) {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Text, { color: prefixColor, children: [
+          prefix,
+          " "
+        ] }),
+        renderCursor(value, cursor),
+        vimTag
+      ] });
+    }
+    let off = 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ink_renderer9.Box, { flexDirection: "column", children: lines.map((line, i) => {
+      const ls = off;
+      off += line.length + 1;
+      const active = i === cursorLine;
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ink_renderer9.Text, { color: prefixColor, children: i === 0 ? `${prefix} ` : "\u2219 " }),
+        active ? renderCursor(line, cursor - ls) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ink_renderer9.Text, { children: line }),
+        i === lines.length - 1 && vimTag
+      ] }, i);
+    }) });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Box, { flexDirection: "column", children: [
+    renderContent(),
+    hasSuggestions && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ink_renderer9.Box, { flexDirection: "column", marginLeft: 2, children: suggestions.map((cmd, i) => {
+      const isFocused = i === suggestionIndex;
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Text, { color: isFocused ? "cyan" : void 0, children: [
+          isFocused ? "\u276F" : " ",
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ink_renderer9.Text, { color: isFocused ? "cyan" : void 0, bold: isFocused, children: `/${cmd.name}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ink_renderer9.Text, { dimColor: true, children: `  ${cmd.description}` })
+      ] }, cmd.name);
+    }) })
   ] });
 }
 
 // src/Spinner.tsx
-var import_react9 = require("react");
-var import_ink_renderer9 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+var import_react10 = require("react");
+var import_ink_renderer10 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DEFAULT_CHARACTERS = process.platform === "darwin" ? ["\xB7", "\u2722", "\u2733", "\u2736", "\u273B", "\u273D"] : ["\xB7", "\u2722", "*", "\u2736", "\u273B", "\u273D"];
+var FRAMES = [...DEFAULT_CHARACTERS, ...[...DEFAULT_CHARACTERS].reverse()];
 var SPINNER_INTERVAL = 80;
 var VERB_ROTATE_INTERVAL = 4e3;
 var ELAPSED_SHOW_AFTER = 1e3;
@@ -2046,19 +2343,19 @@ function Spinner({
   color: color2 = DEFAULT_COLOR,
   showElapsed = true
 }) {
-  const [frameIndex, setFrameIndex] = (0, import_react9.useState)(0);
-  const [verbIndex, setVerbIndex] = (0, import_react9.useState)(0);
-  const [elapsed, setElapsed] = (0, import_react9.useState)(0);
-  const startRef = (0, import_react9.useRef)(Date.now());
+  const [frameIndex, setFrameIndex] = (0, import_react10.useState)(0);
+  const [verbIndex, setVerbIndex] = (0, import_react10.useState)(0);
+  const [elapsed, setElapsed] = (0, import_react10.useState)(0);
+  const startRef = (0, import_react10.useRef)(Date.now());
   const allVerbs = verbs ?? (verb ? [verb] : ["Thinking"]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const id = setInterval(() => {
       setFrameIndex((i) => (i + 1) % FRAMES.length);
       setElapsed(Date.now() - startRef.current);
     }, SPINNER_INTERVAL);
     return () => clearInterval(id);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (allVerbs.length <= 1) return;
     const id = setInterval(() => {
       setVerbIndex((i) => (i + 1) % allVerbs.length);
@@ -2069,18 +2366,18 @@ function Spinner({
   const currentVerb = allVerbs[verbIndex % allVerbs.length];
   const elapsedSec = Math.floor(elapsed / 1e3);
   const showTime = showElapsed && elapsed >= ELAPSED_SHOW_AFTER;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ink_renderer9.Text, { color: color2, children: frame }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Text, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ink_renderer10.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_ink_renderer10.Text, { color: color2, children: frame }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ink_renderer10.Text, { children: [
       " ",
       currentVerb,
       "..."
     ] }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Text, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ink_renderer10.Text, { children: [
       " ",
       label
     ] }),
-    showTime && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_ink_renderer9.Text, { dimColor: true, children: [
+    showTime && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ink_renderer10.Text, { dimColor: true, children: [
       " (",
       elapsedSec,
       "s)"
@@ -2090,12 +2387,12 @@ function Spinner({
 
 // src/Markdown.tsx
 var import_marked2 = require("marked");
-var import_react12 = require("react");
-var import_ink_renderer16 = require("@claude-code-kit/ink-renderer");
+var import_react13 = require("react");
+var import_ink_renderer17 = require("@claude-code-kit/ink-renderer");
 
 // src/design-system/ThemeProvider.tsx
-var import_react10 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var themes = {
   dark: {
     text: "#E0E0E0",
@@ -2108,7 +2405,29 @@ var themes = {
     assistant: "#DA7756",
     inactive: "#666666",
     inverseText: "#1E1E1E",
-    permission: "#5B9BD5"
+    permission: "#5B9BD5",
+    diffAdded: "#1a3a1a",
+    diffRemoved: "#3a1a1a",
+    diffAddedWord: "#2d5a2d",
+    diffRemovedWord: "#5a2d2d",
+    diffHeader: "#1e2d3d",
+    userMessage: "#2B4A6F",
+    assistantMessage: "#3D2614",
+    systemMessage: "#2D2D2D",
+    toolUseMessage: "#1E3A2D",
+    permissionAllow: "#1B4332",
+    permissionDeny: "#3B1014",
+    permissionAlways: "#1B2F4D",
+    focus: "#5B9BD5",
+    selection: "#264F78",
+    placeholder: "#555555",
+    link: "#79B8FF",
+    code: "#F8BFB0",
+    codeBackground: "#2D2D2D",
+    blockquote: "#444444",
+    info: "#5B9BD5",
+    spinnerColor: "#DA7756",
+    shimmer: "#3A3A3A"
   },
   light: {
     text: "#1E1E1E",
@@ -2121,14 +2440,106 @@ var themes = {
     assistant: "#DA7756",
     inactive: "#999999",
     inverseText: "#FFFFFF",
-    permission: "#0066CC"
+    permission: "#0066CC",
+    diffAdded: "#E6FFEC",
+    diffRemoved: "#FFEBE9",
+    diffAddedWord: "#CCFFD8",
+    diffRemovedWord: "#FFD7D5",
+    diffHeader: "#DDF4FF",
+    userMessage: "#E8F0FE",
+    assistantMessage: "#FDF2EE",
+    systemMessage: "#F5F5F5",
+    toolUseMessage: "#EAF5EE",
+    permissionAllow: "#E6F4EA",
+    permissionDeny: "#FCE8E6",
+    permissionAlways: "#E8F0FE",
+    focus: "#0066CC",
+    selection: "#B3D4FF",
+    placeholder: "#AAAAAA",
+    link: "#0066CC",
+    code: "#C7522A",
+    codeBackground: "#F5F5F5",
+    blockquote: "#EEEEEE",
+    info: "#0066CC",
+    spinnerColor: "#DA7756",
+    shimmer: "#E8E8E8"
+  },
+  "light-high-contrast": {
+    text: "#000000",
+    dimText: "#595959",
+    border: "#767676",
+    accent: "#0000EE",
+    success: "#006400",
+    warning: "#7A4000",
+    error: "#AE1818",
+    assistant: "#B55530",
+    inactive: "#767676",
+    inverseText: "#FFFFFF",
+    permission: "#0000EE",
+    diffAdded: "#CCF0D0",
+    diffRemoved: "#F5C6C6",
+    diffAddedWord: "#99E0A0",
+    diffRemovedWord: "#EBA0A0",
+    diffHeader: "#B8DEFF",
+    userMessage: "#C8DCFF",
+    assistantMessage: "#FCDAC8",
+    systemMessage: "#E0E0E0",
+    toolUseMessage: "#C4EED0",
+    permissionAllow: "#C4EED0",
+    permissionDeny: "#F5C6C6",
+    permissionAlways: "#C8DCFF",
+    focus: "#0000EE",
+    selection: "#80BFFF",
+    placeholder: "#767676",
+    link: "#0000EE",
+    code: "#8B0000",
+    codeBackground: "#E8E8E8",
+    blockquote: "#D0D0D0",
+    info: "#0000EE",
+    spinnerColor: "#B55530",
+    shimmer: "#D0D0D0"
+  },
+  "dark-dimmed": {
+    text: "#ADBAC7",
+    dimText: "#545D68",
+    border: "#373E47",
+    accent: "#539BF5",
+    success: "#57AB5A",
+    warning: "#C69026",
+    error: "#E5534B",
+    assistant: "#DA7756",
+    inactive: "#545D68",
+    inverseText: "#22272E",
+    permission: "#539BF5",
+    diffAdded: "#1B2F23",
+    diffRemoved: "#2F1B1E",
+    diffAddedWord: "#264D30",
+    diffRemovedWord: "#4D2628",
+    diffHeader: "#1C2B3A",
+    userMessage: "#1C2B3A",
+    assistantMessage: "#2F211A",
+    systemMessage: "#2D333B",
+    toolUseMessage: "#1B2B23",
+    permissionAllow: "#1B2B23",
+    permissionDeny: "#2F1B1E",
+    permissionAlways: "#1C2B3A",
+    focus: "#539BF5",
+    selection: "#1C4066",
+    placeholder: "#545D68",
+    link: "#6CB6FF",
+    code: "#F0A070",
+    codeBackground: "#2D333B",
+    blockquote: "#373E47",
+    info: "#539BF5",
+    spinnerColor: "#DA7756",
+    shimmer: "#373E47"
   }
 };
 function getTheme(name) {
   return themes[name] ?? themes.dark;
 }
 var DEFAULT_THEME = "dark";
-var ThemeContext = (0, import_react10.createContext)({
+var ThemeContext = (0, import_react11.createContext)({
   themeSetting: DEFAULT_THEME,
   setThemeSetting: () => {
   },
@@ -2145,11 +2556,11 @@ function ThemeProvider({
   initialState = "dark",
   onThemeSave
 }) {
-  const [themeSetting, setThemeSetting] = (0, import_react10.useState)(initialState);
-  const [previewTheme, setPreviewTheme] = (0, import_react10.useState)(null);
+  const [themeSetting, setThemeSetting] = (0, import_react11.useState)(initialState);
+  const [previewTheme, setPreviewTheme] = (0, import_react11.useState)(null);
   const activeSetting = previewTheme ?? themeSetting;
   const currentTheme = activeSetting === "auto" ? "dark" : activeSetting;
-  const value = (0, import_react10.useMemo)(
+  const value = (0, import_react11.useMemo)(
     () => ({
       themeSetting,
       setThemeSetting: (newSetting) => {
@@ -2176,17 +2587,17 @@ function ThemeProvider({
     }),
     [themeSetting, previewTheme, currentTheme, onThemeSave]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  const { currentTheme, setThemeSetting } = (0, import_react10.useContext)(ThemeContext);
+  const { currentTheme, setThemeSetting } = (0, import_react11.useContext)(ThemeContext);
   return [currentTheme, setThemeSetting];
 }
 function useThemeSetting() {
-  return (0, import_react10.useContext)(ThemeContext).themeSetting;
+  return (0, import_react11.useContext)(ThemeContext).themeSetting;
 }
 function usePreviewTheme() {
-  const { setPreviewTheme, savePreview, cancelPreview } = (0, import_react10.useContext)(ThemeContext);
+  const { setPreviewTheme, savePreview, cancelPreview } = (0, import_react11.useContext)(ThemeContext);
   return { setPreviewTheme, savePreview, cancelPreview };
 }
 
@@ -2194,7 +2605,8 @@ function usePreviewTheme() {
 var cliHighlightPromise;
 async function loadCliHighlight() {
   try {
-    const cliHighlight = await import("cli-highlight");
+    const mod = await import("cli-highlight");
+    const cliHighlight = mod;
     return {
       highlight: cliHighlight.highlight,
       supportsLanguage: cliHighlight.supportsLanguage
@@ -2227,19 +2639,19 @@ function hashContent(content) {
 var import_chalk = __toESM(require("chalk"));
 var import_marked = require("marked");
 var import_strip_ansi = __toESM(require("strip-ansi"));
-var import_ink_renderer11 = require("@claude-code-kit/ink-renderer");
+var import_ink_renderer12 = require("@claude-code-kit/ink-renderer");
 
 // src/design-system/color.ts
-var import_ink_renderer10 = require("@claude-code-kit/ink-renderer");
+var import_ink_renderer11 = require("@claude-code-kit/ink-renderer");
 function color(c, theme, type = "foreground") {
   return (text) => {
     if (!c) {
       return text;
     }
     if (c.startsWith("rgb(") || c.startsWith("#") || c.startsWith("ansi256(") || c.startsWith("ansi:")) {
-      return (0, import_ink_renderer10.colorize)(text, c, type);
+      return (0, import_ink_renderer11.colorize)(text, c, type);
     }
-    return (0, import_ink_renderer10.colorize)(text, getTheme(theme)[c], type);
+    return (0, import_ink_renderer11.colorize)(text, getTheme(theme)[c], type);
   };
 }
 
@@ -2386,9 +2798,9 @@ function formatToken(token, theme, listDepth = 0, orderedListNumber = null, pare
       var getDisplayText = getDisplayText2;
       const tableToken = token;
       const columnWidths = tableToken.header.map((header, index) => {
-        let maxWidth = (0, import_ink_renderer11.stringWidth)(getDisplayText2(header.tokens));
+        let maxWidth = (0, import_ink_renderer12.stringWidth)(getDisplayText2(header.tokens));
         for (const row of tableToken.rows) {
-          const cellLength = (0, import_ink_renderer11.stringWidth)(getDisplayText2(row[index]?.tokens));
+          const cellLength = (0, import_ink_renderer12.stringWidth)(getDisplayText2(row[index]?.tokens));
           maxWidth = Math.max(maxWidth, cellLength);
         }
         return Math.max(maxWidth, 3);
@@ -2399,7 +2811,7 @@ function formatToken(token, theme, listDepth = 0, orderedListNumber = null, pare
         const displayText = getDisplayText2(header.tokens);
         const width = columnWidths[index];
         const align = tableToken.align?.[index];
-        tableOutput += padAligned(content, (0, import_ink_renderer11.stringWidth)(displayText), width, align) + " | ";
+        tableOutput += padAligned(content, (0, import_ink_renderer12.stringWidth)(displayText), width, align) + " | ";
       });
       tableOutput = tableOutput.trimEnd() + EOL;
       tableOutput += "|";
@@ -2415,7 +2827,7 @@ function formatToken(token, theme, listDepth = 0, orderedListNumber = null, pare
           const displayText = getDisplayText2(cell.tokens);
           const width = columnWidths[index];
           const align = tableToken.align?.[index];
-          tableOutput += padAligned(content, (0, import_ink_renderer11.stringWidth)(displayText), width, align) + " | ";
+          tableOutput += padAligned(content, (0, import_ink_renderer12.stringWidth)(displayText), width, align) + " | ";
         });
         tableOutput = tableOutput.trimEnd() + EOL;
       });
@@ -2503,13 +2915,13 @@ function padAligned(content, displayWidth, targetWidth, align) {
 }
 
 // src/MarkdownTable.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_strip_ansi2 = __toESM(require("strip-ansi"));
-var import_ink_renderer12 = require("@claude-code-kit/ink-renderer");
 var import_ink_renderer13 = require("@claude-code-kit/ink-renderer");
 var import_ink_renderer14 = require("@claude-code-kit/ink-renderer");
 var import_ink_renderer15 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_ink_renderer16 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var SAFETY_MARGIN = 4;
 var MIN_COLUMN_WIDTH = 3;
 var MAX_ROW_LINES = 4;
@@ -2518,7 +2930,7 @@ var ANSI_BOLD_END = "\x1B[22m";
 function wrapText(text, width, options) {
   if (width <= 0) return [text];
   const trimmedText = text.trimEnd();
-  const wrapped = (0, import_ink_renderer14.wrapAnsi)(trimmedText, width, {
+  const wrapped = (0, import_ink_renderer15.wrapAnsi)(trimmedText, width, {
     hard: options?.hard ?? false,
     trim: false,
     wordWrap: true
@@ -2532,7 +2944,7 @@ function MarkdownTable({
   forceWidth
 }) {
   const [theme] = useTheme();
-  const terminalSize = (0, import_react11.useContext)(import_ink_renderer12.TerminalSizeContext);
+  const terminalSize = (0, import_react12.useContext)(import_ink_renderer13.TerminalSizeContext);
   const actualTerminalWidth = terminalSize?.columns ?? 80;
   const terminalWidth = forceWidth ?? actualTerminalWidth;
   function formatCell(tokens) {
@@ -2545,10 +2957,10 @@ function MarkdownTable({
     const text = getPlainText(tokens_1);
     const words = text.split(/\s+/).filter((w) => w.length > 0);
     if (words.length === 0) return MIN_COLUMN_WIDTH;
-    return Math.max(...words.map((w_0) => (0, import_ink_renderer13.stringWidth)(w_0)), MIN_COLUMN_WIDTH);
+    return Math.max(...words.map((w_0) => (0, import_ink_renderer14.stringWidth)(w_0)), MIN_COLUMN_WIDTH);
   }
   function getIdealWidth(tokens_2) {
-    return Math.max((0, import_ink_renderer13.stringWidth)(getPlainText(tokens_2)), MIN_COLUMN_WIDTH);
+    return Math.max((0, import_ink_renderer14.stringWidth)(getPlainText(tokens_2)), MIN_COLUMN_WIDTH);
   }
   const minWidths = token.header.map((header, colIndex) => {
     let maxMinWidth = getMinWidth(header.tokens);
@@ -2629,7 +3041,7 @@ function MarkdownTable({
         const lineText = contentLineIdx >= 0 && contentLineIdx < lines_1.length ? lines_1[contentLineIdx] : "";
         const width_0 = columnWidths[colIndex_2];
         const align = isHeader ? "center" : token.align?.[colIndex_2] ?? "left";
-        line += " " + padAligned(lineText, (0, import_ink_renderer13.stringWidth)(lineText), width_0, align) + " \u2502";
+        line += " " + padAligned(lineText, (0, import_ink_renderer14.stringWidth)(lineText), width_0, align) + " \u2502";
       }
       result.push(line);
     }
@@ -2662,7 +3074,7 @@ function MarkdownTable({
         const label = headers[colIndex_4] || `Column ${colIndex_4 + 1}`;
         const rawValue = formatCell(cell_0.tokens).trimEnd();
         const value = rawValue.replace(/\n+/g, " ").replace(/\s+/g, " ").trim();
-        const firstLineWidth = terminalWidth - (0, import_ink_renderer13.stringWidth)(label) - 3;
+        const firstLineWidth = terminalWidth - (0, import_ink_renderer14.stringWidth)(label) - 3;
         const subsequentLineWidth = terminalWidth - wrapIndent.length - 1;
         const firstPassLines = wrapText(value, Math.max(firstLineWidth, 10));
         const firstLine = firstPassLines[0] || "";
@@ -2685,7 +3097,7 @@ function MarkdownTable({
     return lines_2.join("\n");
   }
   if (useVerticalFormat) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_ink_renderer15.Ansi, { children: renderVerticalFormat() });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ink_renderer16.Ansi, { children: renderVerticalFormat() });
   }
   const tableLines = [];
   tableLines.push(renderBorderLine("top"));
@@ -2698,15 +3110,15 @@ function MarkdownTable({
     }
   });
   tableLines.push(renderBorderLine("bottom"));
-  const maxLineWidth = Math.max(...tableLines.map((line_2) => (0, import_ink_renderer13.stringWidth)((0, import_strip_ansi2.default)(line_2))));
+  const maxLineWidth = Math.max(...tableLines.map((line_2) => (0, import_ink_renderer14.stringWidth)((0, import_strip_ansi2.default)(line_2))));
   if (maxLineWidth > terminalWidth - SAFETY_MARGIN) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_ink_renderer15.Ansi, { children: renderVerticalFormat() });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ink_renderer16.Ansi, { children: renderVerticalFormat() });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_ink_renderer15.Ansi, { children: tableLines.join("\n") });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ink_renderer16.Ansi, { children: tableLines.join("\n") });
 }
 
 // src/Markdown.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var TOKEN_CACHE_MAX = 500;
 var tokenCache = /* @__PURE__ */ new Map();
 var MD_SYNTAX_RE = /[#*`|[>\-_~]|\n\n|^\d+\. |\n\d+\. /;
@@ -2745,13 +3157,13 @@ function cachedLexer(content) {
 function Markdown(props) {
   const settings = {};
   if (settings.syntaxHighlightingDisabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkdownBody, { ...props, highlight: null });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkdownBody, { ...props, highlight: null });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react12.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkdownBody, { ...props, highlight: null }), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkdownWithHighlight, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react13.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkdownBody, { ...props, highlight: null }), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkdownWithHighlight, { ...props }) });
 }
 function MarkdownWithHighlight(props) {
-  const highlight = (0, import_react12.use)(getCliHighlightPromise());
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarkdownBody, { ...props, highlight });
+  const highlight = (0, import_react13.use)(getCliHighlightPromise());
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkdownBody, { ...props, highlight });
 }
 function MarkdownBody({
   children,
@@ -2760,14 +3172,14 @@ function MarkdownBody({
 }) {
   const [theme] = useTheme();
   configureMarked();
-  const elements = (0, import_react12.useMemo)(() => {
+  const elements = (0, import_react13.useMemo)(() => {
     const tokens = cachedLexer(stripPromptXMLTags(children));
     const elements2 = [];
     let nonTableContent = "";
     function flushNonTableContent() {
       if (nonTableContent) {
         elements2.push(
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ink_renderer16.Ansi, { dimColor, children: nonTableContent.trim() }, elements2.length)
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ink_renderer17.Ansi, { dimColor, children: nonTableContent.trim() }, elements2.length)
         );
         nonTableContent = "";
       }
@@ -2776,7 +3188,7 @@ function MarkdownBody({
       if (token.type === "table") {
         flushNonTableContent();
         elements2.push(
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             MarkdownTable,
             {
               token,
@@ -2792,7 +3204,7 @@ function MarkdownBody({
     flushNonTableContent();
     return elements2;
   }, [children, dimColor, highlight, theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ink_renderer16.Box, { flexDirection: "column", gap: 1, children: elements });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ink_renderer17.Box, { flexDirection: "column", gap: 1, children: elements });
 }
 function StreamingMarkdown({
   children
@@ -2800,7 +3212,7 @@ function StreamingMarkdown({
   "use no memo";
   configureMarked();
   const stripped = stripPromptXMLTags(children);
-  const stablePrefixRef = (0, import_react12.useRef)("");
+  const stablePrefixRef = (0, import_react13.useRef)("");
   if (!stripped.startsWith(stablePrefixRef.current)) {
     stablePrefixRef.current = "";
   }
@@ -2819,35 +3231,35 @@ function StreamingMarkdown({
   }
   const stablePrefix = stablePrefixRef.current;
   const unstableSuffix = stripped.substring(stablePrefix.length);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_ink_renderer16.Box, { flexDirection: "column", gap: 1, children: [
-    stablePrefix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Markdown, { children: stablePrefix }),
-    unstableSuffix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Markdown, { children: unstableSuffix })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_ink_renderer17.Box, { flexDirection: "column", gap: 1, children: [
+    stablePrefix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Markdown, { children: stablePrefix }),
+    unstableSuffix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Markdown, { children: unstableSuffix })
   ] });
 }
 
 // src/Select.tsx
-var import_react13 = require("react");
-var import_ink_renderer17 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_ink_renderer18 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function useListNavigation(opts) {
   const { options, maxVisible, onCancel, onSelect, extraHandler } = opts;
-  const [focusIndex, setFocusIndex] = (0, import_react13.useState)(0);
-  const focusRef = (0, import_react13.useRef)(focusIndex);
+  const [focusIndex, setFocusIndex] = (0, import_react14.useState)(0);
+  const focusRef = (0, import_react14.useRef)(focusIndex);
   focusRef.current = focusIndex;
   const total = options.length;
   const max = maxVisible ?? total;
-  const scrollOffset = (0, import_react13.useMemo)(() => {
+  const scrollOffset = (0, import_react14.useMemo)(() => {
     if (total <= max) return 0;
     const half = Math.floor(max / 2);
     if (focusIndex <= half) return 0;
     if (focusIndex >= total - max + half) return total - max;
     return focusIndex - half;
   }, [focusIndex, total, max]);
-  const visibleOptions = (0, import_react13.useMemo)(
+  const visibleOptions = (0, import_react14.useMemo)(
     () => options.slice(scrollOffset, scrollOffset + max),
     [options, scrollOffset, max]
   );
-  const moveFocus = (0, import_react13.useCallback)(
+  const moveFocus = (0, import_react14.useCallback)(
     (dir) => {
       setFocusIndex((prev) => {
         let next = prev;
@@ -2860,7 +3272,7 @@ function useListNavigation(opts) {
     },
     [options, total]
   );
-  (0, import_ink_renderer17.useInput)((input, key) => {
+  (0, import_ink_renderer18.useInput)((input, key) => {
     if (extraHandler?.(input, key, focusRef.current)) return;
     if (key.upArrow || input === "k") {
       moveFocus(-1);
@@ -2883,7 +3295,7 @@ function useListNavigation(opts) {
   return { focusIndex, scrollOffset, visibleOptions, max, total };
 }
 function ScrollHint({ count, direction }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_ink_renderer17.Text, { dimColor: true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Text, { dimColor: true, children: [
     "  ",
     direction === "up" ? "\u2191" : "\u2193",
     " ",
@@ -2899,26 +3311,26 @@ function Select({
   title,
   maxVisible
 }) {
-  const handleSelect = (0, import_react13.useCallback)(
+  const handleSelect = (0, import_react14.useCallback)(
     (index) => onChange(options[index].value),
     [onChange, options]
   );
   const { focusIndex, scrollOffset, visibleOptions, max, total } = useListNavigation({ options, maxVisible, onCancel, onSelect: handleSelect });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_ink_renderer17.Box, { flexDirection: "column", children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ink_renderer17.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ink_renderer17.Text, { bold: true, children: title }) }),
-    scrollOffset > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollHint, { count: scrollOffset, direction: "up" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Box, { flexDirection: "column", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Text, { bold: true, children: title }) }),
+    scrollOffset > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollHint, { count: scrollOffset, direction: "up" }),
     visibleOptions.map((opt, i) => {
       const realIndex = scrollOffset + i;
       const isFocused = realIndex === focusIndex;
       const isSelected = opt.value === defaultValue;
       const isDisabled = opt.disabled === true;
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_ink_renderer17.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_ink_renderer17.Text, { color: isFocused ? "cyan" : void 0, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Text, { color: isFocused ? "cyan" : void 0, children: [
           isFocused ? "\u276F" : " ",
           " "
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          import_ink_renderer17.Text,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          import_ink_renderer18.Text,
           {
             color: isDisabled ? "gray" : isFocused ? "cyan" : void 0,
             bold: isFocused,
@@ -2930,15 +3342,15 @@ function Select({
             ]
           }
         ),
-        isSelected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ink_renderer17.Text, { color: "green", children: " \u2713" }),
-        opt.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_ink_renderer17.Text, { dimColor: true, children: [
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Text, { color: "green", children: " \u2713" }),
+        opt.description && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Text, { dimColor: true, children: [
           "   ",
           opt.description
         ] })
       ] }, realIndex);
     }),
-    scrollOffset + max < total && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollHint, { count: total - scrollOffset - max, direction: "down" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ink_renderer17.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ink_renderer17.Text, { dimColor: true, children: "Enter to confirm \xB7 Esc to exit" }) })
+    scrollOffset + max < total && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollHint, { count: total - scrollOffset - max, direction: "down" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Text, { dimColor: true, children: "Enter to confirm \xB7 Esc to exit" }) })
   ] });
 }
 function MultiSelect({
@@ -2950,12 +3362,12 @@ function MultiSelect({
   title,
   maxVisible
 }) {
-  const [selected, setSelected] = (0, import_react13.useState)(() => new Set(selectedValues));
-  const handleConfirm = (0, import_react13.useCallback)(
+  const [selected, setSelected] = (0, import_react14.useState)(() => new Set(selectedValues));
+  const handleConfirm = (0, import_react14.useCallback)(
     () => onConfirm(Array.from(selected)),
     [onConfirm, selected]
   );
-  const handleSpace = (0, import_react13.useCallback)(
+  const handleSpace = (0, import_react14.useCallback)(
     (input, _key, focusIndex2) => {
       if (input !== " ") return false;
       const opt = options[focusIndex2];
@@ -2978,21 +3390,21 @@ function MultiSelect({
     onSelect: handleConfirm,
     extraHandler: handleSpace
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_ink_renderer17.Box, { flexDirection: "column", children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ink_renderer17.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ink_renderer17.Text, { bold: true, children: title }) }),
-    scrollOffset > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollHint, { count: scrollOffset, direction: "up" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Box, { flexDirection: "column", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Text, { bold: true, children: title }) }),
+    scrollOffset > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollHint, { count: scrollOffset, direction: "up" }),
     visibleOptions.map((opt, i) => {
       const realIndex = scrollOffset + i;
       const isFocused = realIndex === focusIndex;
       const isChecked = selected.has(opt.value);
       const isDisabled = opt.disabled === true;
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_ink_renderer17.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_ink_renderer17.Text, { color: isFocused ? "cyan" : void 0, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Text, { color: isFocused ? "cyan" : void 0, children: [
           isFocused ? "\u276F" : " ",
           " "
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          import_ink_renderer17.Text,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          import_ink_renderer18.Text,
           {
             color: isDisabled ? "gray" : isFocused ? "cyan" : void 0,
             bold: isFocused,
@@ -3006,72 +3418,319 @@ function MultiSelect({
             ]
           }
         ),
-        opt.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_ink_renderer17.Text, { dimColor: true, children: [
+        opt.description && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Text, { dimColor: true, children: [
           "   ",
           opt.description
         ] })
       ] }, realIndex);
     }),
-    scrollOffset + max < total && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollHint, { count: total - scrollOffset - max, direction: "down" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ink_renderer17.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ink_renderer17.Text, { dimColor: true, children: "Space to toggle \xB7 Enter to confirm \xB7 Esc to exit" }) })
+    scrollOffset + max < total && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollHint, { count: total - scrollOffset - max, direction: "down" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Text, { dimColor: true, children: "Space to toggle \xB7 Enter to confirm \xB7 Esc to exit" }) })
   ] });
 }
 
-// src/MessageList.tsx
-var import_ink_renderer18 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var ROLE_CONFIG = {
-  user: { icon: "\u276F", label: "You", color: "cyan" },
-  assistant: { icon: "\u25CF", label: "Claude", color: "#DA7756" },
-  system: { icon: "\u273B", label: "System", color: void 0 }
-};
-function MessageItem({
-  message,
-  renderMessage
+// src/PermissionRequest.tsx
+var import_react15 = __toESM(require("react"));
+var import_ink_renderer19 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function PermissionHeader({ toolName, width }) {
+  const label = ` ${toolName} `;
+  const labelLen = toolName.length + 2;
+  const leftLen = 3;
+  const rightLen = Math.max(0, width - leftLen - labelLen);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_ink_renderer19.Text, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { dimColor: true, children: "\u2500".repeat(leftLen) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { bold: true, color: "cyan", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { dimColor: true, children: "\u2500".repeat(rightLen) })
+  ] });
+}
+function HorizontalRule({ width }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { dimColor: true, children: "\u2500".repeat(width) });
+}
+function BashPermissionContent({ command }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_ink_renderer19.Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { children: "Run command:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Box, { marginLeft: 2, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { color: "yellow", children: command }) })
+  ] });
+}
+function FileEditPermissionContent({
+  filename,
+  diff
 }) {
-  if (renderMessage) {
-    return renderMessage(message);
-  }
-  const config = ROLE_CONFIG[message.role];
-  const isSystem = message.role === "system";
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Text, { color: config.color, dimColor: isSystem, children: config.icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Text, { color: config.color, dimColor: isSystem, bold: !isSystem, children: [
-        " ",
-        config.label
-      ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_ink_renderer19.Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_ink_renderer19.Text, { children: [
+      "Edit file: ",
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { color: "cyan", bold: true, children: filename })
     ] }),
-    message.content.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Box, { marginLeft: 2, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Text, { dimColor: isSystem, children: line }) }, i))
+    diff && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Box, { marginTop: 1, flexDirection: "column", children: diff.split("\n").map((line, i) => {
+      let color2;
+      if (line.startsWith("+")) color2 = "green";
+      else if (line.startsWith("-")) color2 = "red";
+      else if (line.startsWith("@")) color2 = "cyan";
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { color: color2, dimColor: !color2 && !line.startsWith("+"), children: line }, i);
+    }) })
   ] });
 }
-function MessageList({
-  messages,
-  streamingContent,
-  renderMessage
+function PermissionRequest({
+  toolName,
+  description,
+  details,
+  showAlwaysAllow = true,
+  onDecision,
+  children,
+  preview
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Box, { flexDirection: "column", children: [
-    messages.map((message, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Box, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MessageItem, { message, renderMessage }) }, message.id)),
-    streamingContent != null && streamingContent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Box, { flexDirection: "column", marginTop: messages.length > 0 ? 1 : 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Text, { color: "#DA7756", children: "\u25CF" }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Text, { color: "#DA7756", bold: true, children: [
+  const terminalSize = (0, import_react15.useContext)(import_ink_renderer19.TerminalSizeContext);
+  const terminalWidth = Math.min((terminalSize?.columns ?? 80) - 2, 80);
+  const options = (0, import_react15.useMemo)(() => {
+    const opts = [
+      { value: "allow", label: "Yes, allow this action" }
+    ];
+    if (showAlwaysAllow) {
+      opts.push({ value: "always_allow", label: `Yes, and always allow ${toolName}` });
+    }
+    opts.push({ value: "deny", label: "No, deny" });
+    return opts;
+  }, [showAlwaysAllow, toolName]);
+  const [focusIndex, setFocusIndex] = import_react15.default.useState(0);
+  const focusRef = import_react15.default.useRef(focusIndex);
+  focusRef.current = focusIndex;
+  const decide = (0, import_react15.useCallback)(
+    (action) => {
+      onDecision(action);
+    },
+    [onDecision]
+  );
+  (0, import_ink_renderer19.useInput)((input, key) => {
+    if (input === "y") {
+      decide("allow");
+      return;
+    }
+    if (input === "a" && showAlwaysAllow) {
+      decide("always_allow");
+      return;
+    }
+    if (input === "n" || key.escape) {
+      decide("deny");
+      return;
+    }
+    if (key.upArrow || input === "k") {
+      setFocusIndex((prev) => (prev - 1 + options.length) % options.length);
+    } else if (key.downArrow || input === "j") {
+      setFocusIndex((prev) => (prev + 1) % options.length);
+    } else if (key.return) {
+      decide(options[focusRef.current].value);
+    } else if (input >= "1" && input <= "9") {
+      const idx = parseInt(input, 10) - 1;
+      if (idx < options.length) {
+        setFocusIndex(idx);
+        decide(options[idx].value);
+      }
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_ink_renderer19.Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PermissionHeader, { toolName, width: terminalWidth }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Box, { marginTop: 1, marginLeft: 2, flexDirection: "column", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { children: description }) }),
+    details && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Box, { marginTop: 1, marginLeft: 4, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { color: "yellow", children: details }) }),
+    children && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Box, { marginTop: 1, marginLeft: 2, flexDirection: "column", children }),
+    preview && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Box, { marginTop: 1, marginLeft: 2, flexDirection: "column", children: preview }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HorizontalRule, { width: terminalWidth }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Box, { marginTop: 1, flexDirection: "column", children: options.map((opt, i) => {
+      const isFocused = i === focusIndex;
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_ink_renderer19.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_ink_renderer19.Text, { color: isFocused ? "cyan" : void 0, children: [
+          isFocused ? "\u276F" : " ",
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          import_ink_renderer19.Text,
+          {
+            color: isFocused ? "cyan" : void 0,
+            bold: isFocused,
+            children: [
+              i + 1,
+              ". ",
+              opt.label
+            ]
+          }
+        )
+      ] }, opt.value);
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { dimColor: true, children: "Enter to confirm \xB7 Esc to deny" }) })
+  ] });
+}
+
+// src/MessageList.tsx
+var import_react16 = require("react");
+var import_ink_renderer20 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ROLE_CONFIG = {
+  user: { icon: "\u276F", label: "You", color: "cyan" },
+  assistant: { icon: "\u25CF", label: "Claude", color: "#DA7756" },
+  system: { icon: "\u273B", label: "System", color: void 0 }
+};
+var GUTTER = "\u23BF";
+function TextBlock({ text, dim }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: text.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { marginLeft: 2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { dimColor: dim, children: line }) }, i)) });
+}
+function ToolUseBlock({ content }) {
+  const statusColor = content.status === "error" ? "red" : content.status === "success" ? "green" : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", marginLeft: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Text, { dimColor: true, children: [
+        GUTTER,
+        " "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { bold: true, children: content.toolName })
+    ] }),
+    content.input.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { marginLeft: 4, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { dimColor: true, children: line }) }, i)),
+    content.status === "running" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { marginLeft: 4, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Spinner, { label: content.toolName, showElapsed: true }) }),
+    content.result != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", marginLeft: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Text, { dimColor: true, children: [
+          GUTTER,
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Text, { color: statusColor, children: [
+          "result (",
+          content.status ?? "done",
+          ")"
+        ] })
+      ] }),
+      content.result.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { marginLeft: 6, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { color: statusColor, dimColor: !statusColor, children: line }) }, i))
+    ] })
+  ] });
+}
+function ThinkingBlock({ content }) {
+  const [collapsed, setCollapsed] = (0, import_react16.useState)(content.collapsed ?? true);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", marginLeft: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { onClick: () => setCollapsed((c) => !c), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Text, { color: "#DA7756", children: [
+        "\u273B",
+        " "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Text, { dimColor: true, children: [
+        "Thinking...",
+        collapsed ? " (click to expand)" : ""
+      ] })
+    ] }),
+    !collapsed && content.text.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { marginLeft: 4, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { dimColor: true, children: line }) }, i))
+  ] });
+}
+function DiffBlock({ content }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", marginLeft: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Text, { dimColor: true, children: [
+        GUTTER,
+        " "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { bold: true, children: content.filename })
+    ] }),
+    content.diff.split("\n").map((line, i) => {
+      let color2;
+      if (line.startsWith("+")) color2 = "green";
+      else if (line.startsWith("-")) color2 = "red";
+      else if (line.startsWith("@")) color2 = "cyan";
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { marginLeft: 4, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { color: color2, dimColor: !color2, children: line }) }, i);
+    })
+  ] });
+}
+function CodeBlock({ content }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", marginLeft: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Text, { dimColor: true, children: [
+      "```",
+      content.language ?? ""
+    ] }),
+    content.code.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { marginLeft: 2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { children: line }) }, i)),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { dimColor: true, children: "```" })
+  ] });
+}
+function ErrorBlock({ content }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", marginLeft: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Text, { color: "red", children: [
+        "\u2716",
+        " Error: "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { color: "red", children: content.message })
+    ] }),
+    content.details?.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { marginLeft: 4, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { color: "red", dimColor: true, children: line }) }, i))
+  ] });
+}
+function ContentBlock({ block }) {
+  switch (block.type) {
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextBlock, { text: block.text });
+    case "tool_use":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ToolUseBlock, { content: block });
+    case "thinking":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThinkingBlock, { content: block });
+    case "diff":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DiffBlock, { content: block });
+    case "code":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CodeBlock, { content: block });
+    case "error":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ErrorBlock, { content: block });
+    default:
+      return null;
+  }
+}
+function MessageItem({
+  message,
+  renderMessage
+}) {
+  if (renderMessage) {
+    return renderMessage(message);
+  }
+  const config = ROLE_CONFIG[message.role];
+  const isSystem = message.role === "system";
+  if (typeof message.content === "string") {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { color: config.color, dimColor: isSystem, children: config.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Text, { color: config.color, dimColor: isSystem, bold: !isSystem, children: [
           " ",
-          "Claude"
+          config.label
         ] })
       ] }),
-      streamingContent.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Box, { marginLeft: 2, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ink_renderer18.Text, { children: [
+      message.content.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { marginLeft: 2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { dimColor: isSystem, children: line }) }, i))
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { color: config.color, dimColor: isSystem, children: config.icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Text, { color: config.color, dimColor: isSystem, bold: !isSystem, children: [
+        " ",
+        config.label
+      ] })
+    ] }),
+    message.content.map((block, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContentBlock, { block }, i))
+  ] });
+}
+function MessageList({
+  messages,
+  streamingContent,
+  renderMessage
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", children: [
+    messages.map((message, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MessageItem, { message, renderMessage }) }, message.id)),
+    streamingContent != null && streamingContent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", marginTop: messages.length > 0 ? 1 : 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { color: "#DA7756", children: "\u25CF" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { color: "#DA7756", bold: true, children: " Claude" })
+      ] }),
+      streamingContent.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { marginLeft: 2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Text, { children: [
         line,
-        i === streamingContent.split("\n").length - 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ink_renderer18.Text, { color: "#DA7756", children: "\u2588" })
+        i === streamingContent.split("\n").length - 1 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Text, { color: "#DA7756", children: "\u2588" })
       ] }) }, i))
     ] })
   ] });
 }
 
 // src/StreamingText.tsx
-var import_react14 = require("react");
-var import_ink_renderer19 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_ink_renderer21 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function StreamingText({
   text,
   speed = 3,
@@ -3079,10 +3738,10 @@ function StreamingText({
   onComplete,
   color: color2
 }) {
-  const [revealed, setRevealed] = (0, import_react14.useState)(0);
-  const onCompleteRef = (0, import_react14.useRef)(onComplete);
+  const [revealed, setRevealed] = (0, import_react17.useState)(0);
+  const onCompleteRef = (0, import_react17.useRef)(onComplete);
   onCompleteRef.current = onComplete;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (revealed >= text.length) return;
     const id = setInterval(() => {
       setRevealed((prev) => {
@@ -3095,19 +3754,171 @@ function StreamingText({
     }, interval);
     return () => clearInterval(id);
   }, [text.length, speed, interval, revealed >= text.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ink_renderer19.Text, { color: color2, children: text.slice(0, revealed) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ink_renderer21.Text, { color: color2, children: text.slice(0, revealed) });
 }
 
 // src/REPL.tsx
-var import_react15 = require("react");
-var import_ink_renderer20 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_ink_renderer23 = require("@claude-code-kit/ink-renderer");
+
+// src/SearchOverlay.tsx
+var import_react18 = require("react");
+var import_ink_renderer22 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function computeMatches(content, query) {
+  if (!query) return [];
+  const lower = query.toLowerCase();
+  const found = [];
+  for (let i = 0; i < content.length; i++) {
+    const text = content[i] ?? "";
+    let offset = 0;
+    let pos = text.toLowerCase().indexOf(lower, offset);
+    while (pos !== -1) {
+      found.push({ index: i, offset: pos, length: query.length });
+      offset = pos + 1;
+      pos = text.toLowerCase().indexOf(lower, offset);
+    }
+  }
+  return found;
+}
+function useSearch({ content, isActive }) {
+  const [query, setQueryState] = (0, import_react18.useState)("");
+  const [matches, setMatches] = (0, import_react18.useState)([]);
+  const [currentIndex, setCurrentIndex] = (0, import_react18.useState)(0);
+  const setQuery = (0, import_react18.useCallback)((q) => {
+    setQueryState(q);
+    const found = computeMatches(content, q);
+    setMatches(found);
+    setCurrentIndex(found.length > 0 ? 0 : -1);
+  }, [content]);
+  const next = (0, import_react18.useCallback)(() => {
+    if (matches.length === 0) return;
+    setCurrentIndex((i) => (i + 1) % matches.length);
+  }, [matches.length]);
+  const previous = (0, import_react18.useCallback)(() => {
+    if (matches.length === 0) return;
+    setCurrentIndex((i) => (i - 1 + matches.length) % matches.length);
+  }, [matches.length]);
+  (0, import_react18.useEffect)(() => {
+    if (!isActive) {
+      setQueryState("");
+      setMatches([]);
+      setCurrentIndex(0);
+    }
+  }, [isActive]);
+  return { query, matches, currentIndex, next, previous, setQuery };
+}
+function SearchOverlay({
+  isOpen,
+  onClose,
+  onSearch,
+  onNavigate
+}) {
+  const [query, setQueryState] = (0, import_react18.useState)("");
+  const [cursor, setCursor] = (0, import_react18.useState)(0);
+  const [matches, setMatches] = (0, import_react18.useState)([]);
+  const matchIndexRef = (0, import_react18.useRef)(0);
+  const [matchIndex, setMatchIndexState] = (0, import_react18.useState)(0);
+  const setMatchIndex = (0, import_react18.useCallback)((next) => {
+    matchIndexRef.current = next;
+    setMatchIndexState(next);
+  }, []);
+  (0, import_react18.useEffect)(() => {
+    if (!isOpen) {
+      setQueryState("");
+      setCursor(0);
+      setMatches([]);
+      setMatchIndex(0);
+    }
+  }, [isOpen, setMatchIndex]);
+  const runSearch = (0, import_react18.useCallback)((q) => {
+    const found = onSearch(q);
+    setMatches(found);
+    setMatchIndex(0);
+    if (found.length > 0) onNavigate(found[0]);
+  }, [onSearch, onNavigate, setMatchIndex]);
+  const navigate = (0, import_react18.useCallback)((delta) => {
+    setMatches((currentMatches) => {
+      if (currentMatches.length === 0) return currentMatches;
+      const next = (matchIndexRef.current + delta + currentMatches.length) % currentMatches.length;
+      setMatchIndex(next);
+      onNavigate(currentMatches[next]);
+      return currentMatches;
+    });
+  }, [onNavigate, setMatchIndex]);
+  (0, import_ink_renderer22.useInput)(
+    (input, key) => {
+      if (key.escape) {
+        onClose();
+        return;
+      }
+      if (key.return) {
+        navigate(1);
+        return;
+      }
+      if (input === "n" && key.ctrl) {
+        navigate(1);
+        return;
+      }
+      if (input === "p" && key.ctrl) {
+        navigate(-1);
+        return;
+      }
+      if (key.backspace) {
+        if (cursor > 0) {
+          const next = query.slice(0, cursor - 1) + query.slice(cursor);
+          setQueryState(next);
+          setCursor(cursor - 1);
+          runSearch(next);
+        }
+        return;
+      }
+      if (key.leftArrow) {
+        setCursor((c) => Math.max(0, c - 1));
+        return;
+      }
+      if (key.rightArrow) {
+        setCursor((c) => Math.min(query.length, c + 1));
+        return;
+      }
+      if (key.ctrl || key.meta) return;
+      if (input.length > 0) {
+        const next = query.slice(0, cursor) + input + query.slice(cursor);
+        setQueryState(next);
+        setCursor(cursor + input.length);
+        runSearch(next);
+      }
+    },
+    { isActive: isOpen }
+  );
+  if (!isOpen) return null;
+  const total = matches.length;
+  const current = total > 0 ? matchIndex + 1 : 0;
+  const countLabel = total > 0 ? `${current}/${total} matches` : "no matches";
+  const before = query.slice(0, cursor);
+  const atCursor = cursor < query.length ? query[cursor] : " ";
+  const after = cursor < query.length ? query.slice(cursor + 1) : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_ink_renderer22.Box, { flexDirection: "row", paddingX: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ink_renderer22.Text, { color: "cyan", children: "Search: " }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ink_renderer22.Box, { flexGrow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_ink_renderer22.Text, { children: [
+      before,
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ink_renderer22.Text, { inverse: true, children: atCursor }),
+      after
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ink_renderer22.Text, { dimColor: true, children: countLabel })
+  ] });
+}
+
+// src/REPL.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function REPL({
   onSubmit,
   onExit,
   messages,
   isLoading = false,
   streamingContent,
+  welcome,
+  permissionRequest,
   commands = [],
   model,
   statusSegments,
@@ -3117,16 +3928,20 @@ function REPL({
   renderMessage,
   spinner
 }) {
-  const { exit } = (0, import_ink_renderer20.useApp)();
-  const [inputValue, setInputValue] = (0, import_react15.useState)("");
-  const [internalHistory, setInternalHistory] = (0, import_react15.useState)([]);
-  const submittingRef = (0, import_react15.useRef)(false);
+  const { exit } = (0, import_ink_renderer23.useApp)();
+  const [inputValue, setInputValue] = (0, import_react19.useState)("");
+  const [internalHistory, setInternalHistory] = (0, import_react19.useState)([]);
+  const [searchOpen, setSearchOpen] = (0, import_react19.useState)(false);
+  const submittingRef = (0, import_react19.useRef)(false);
   const history = externalHistory ?? internalHistory;
+  const messageContents = messages.map(
+    (m) => typeof m.content === "string" ? m.content : m.content.map((b) => "text" in b ? b.text : "").join(" ")
+  );
   const promptCommands = commands.map((c) => ({
     name: c.name,
     description: c.description
   }));
-  const handleSubmit = (0, import_react15.useCallback)(
+  const handleSubmit = (0, import_react19.useCallback)(
     (value) => {
       if (submittingRef.current) return;
       const trimmed = value.trim();
@@ -3158,7 +3973,7 @@ function REPL({
     },
     [commands, onSubmit, externalHistory]
   );
-  (0, import_ink_renderer20.useInput)(
+  (0, import_ink_renderer23.useInput)(
     (_input, key) => {
       if (key.ctrl && _input === "c" && isLoading) {
         return;
@@ -3170,13 +3985,20 @@ function REPL({
           exit();
         }
       }
+      if (key.ctrl && _input === "f") {
+        setSearchOpen(true);
+      }
     },
-    { isActive: true }
+    // Deactivate when search overlay is open so only SearchOverlay handles input.
+    { isActive: !searchOpen }
   );
   const resolvedSegments = statusSegments ?? buildDefaultSegments(model);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ink_renderer20.Box, { flexDirection: "column", flexGrow: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const showWelcome = welcome && messages.length === 0 && !isLoading;
+  const showPermission = !!permissionRequest;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_ink_renderer23.Box, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_ink_renderer23.Box, { flexDirection: "column", flexGrow: 1, children: [
+      showWelcome && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ink_renderer23.Box, { marginBottom: 1, children: welcome }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         MessageList,
         {
           messages,
@@ -3184,10 +4006,29 @@ function REPL({
           renderMessage
         }
       ),
-      isLoading && !streamingContent && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ink_renderer20.Box, { marginTop: messages.length > 0 ? 1 : 0, children: spinner ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Spinner, {}) })
+      isLoading && !streamingContent && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ink_renderer23.Box, { marginTop: messages.length > 0 ? 1 : 0, children: spinner ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Spinner, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    searchOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      SearchOverlay,
+      {
+        isOpen: searchOpen,
+        onClose: () => setSearchOpen(false),
+        onSearch: (q) => computeMatches(messageContents, q),
+        onNavigate: () => {
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Divider, {}),
+    showPermission ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      PermissionRequest,
+      {
+        toolName: permissionRequest.toolName,
+        description: permissionRequest.description,
+        details: permissionRequest.details,
+        preview: permissionRequest.preview,
+        onDecision: permissionRequest.onDecision
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       PromptInput,
       {
         value: inputValue,
@@ -3195,13 +4036,13 @@ function REPL({
         onSubmit: handleSubmit,
         prefix,
         placeholder,
-        disabled: isLoading,
+        disabled: isLoading || searchOpen,
         commands: promptCommands,
         history
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Divider, {}),
-    resolvedSegments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StatusLine, { segments: resolvedSegments })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Divider, {}),
+    resolvedSegments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StatusLine, { segments: resolvedSegments })
   ] });
 }
 function buildDefaultSegments(model) {
@@ -3210,8 +4051,8 @@ function buildDefaultSegments(model) {
 }
 
 // src/design-system/ThemedBox.tsx
-var import_ink_renderer21 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_ink_renderer24 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function resolveColor(color2, theme) {
   if (!color2) return void 0;
   if (color2.startsWith("rgb(") || color2.startsWith("#") || color2.startsWith("ansi256(") || color2.startsWith("ansi:")) {
@@ -3238,8 +4079,8 @@ function ThemedBox({
   const resolvedBorderLeftColor = resolveColor(borderLeftColor, theme);
   const resolvedBorderRightColor = resolveColor(borderRightColor, theme);
   const resolvedBackgroundColor = resolveColor(backgroundColor, theme);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_ink_renderer21.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_ink_renderer24.Box,
     {
       ref,
       borderColor: resolvedBorderColor,
@@ -3256,10 +4097,10 @@ function ThemedBox({
 var ThemedBox_default = ThemedBox;
 
 // src/design-system/ThemedText.tsx
-var import_react16 = __toESM(require("react"));
-var import_ink_renderer22 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var TextHoverColorContext = import_react16.default.createContext(void 0);
+var import_react20 = __toESM(require("react"));
+var import_ink_renderer25 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var TextHoverColorContext = import_react20.default.createContext(void 0);
 function resolveColor2(color2, theme) {
   if (!color2) return void 0;
   if (color2.startsWith("rgb(") || color2.startsWith("#") || color2.startsWith("ansi256(") || color2.startsWith("ansi:")) {
@@ -3281,11 +4122,11 @@ function ThemedText({
 }) {
   const [themeName] = useTheme();
   const theme = getTheme(themeName);
-  const hoverColor = (0, import_react16.useContext)(TextHoverColorContext);
+  const hoverColor = (0, import_react20.useContext)(TextHoverColorContext);
   const resolvedColor = !color2 && hoverColor ? resolveColor2(hoverColor, theme) : dimColor ? theme.inactive : resolveColor2(color2, theme);
   const resolvedBackgroundColor = backgroundColor ? theme[backgroundColor] : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_ink_renderer22.Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_ink_renderer25.Text,
     {
       color: resolvedColor,
       backgroundColor: resolvedBackgroundColor,
@@ -3301,42 +4142,42 @@ function ThemedText({
 }
 
 // src/design-system/Dialog.tsx
-var import_react18 = require("react");
-var import_ink_renderer26 = require("@claude-code-kit/ink-renderer");
+var import_react22 = require("react");
+var import_ink_renderer29 = require("@claude-code-kit/ink-renderer");
 
 // src/design-system/Byline.tsx
-var import_react17 = __toESM(require("react"));
-var import_ink_renderer23 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react21 = __toESM(require("react"));
+var import_ink_renderer26 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function Byline({ children }) {
-  const validChildren = import_react17.Children.toArray(children);
+  const validChildren = import_react21.Children.toArray(children);
   if (validChildren.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: validChildren.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    import_react17.default.Fragment,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: validChildren.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    import_react21.default.Fragment,
     {
       children: [
-        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ink_renderer23.Text, { dimColor: true, children: " \xB7 " }),
+        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ink_renderer26.Text, { dimColor: true, children: " \xB7 " }),
         child
       ]
     },
-    (0, import_react17.isValidElement)(child) ? child.key ?? index : index
+    (0, import_react21.isValidElement)(child) ? child.key ?? index : index
   )) });
 }
 
 // src/design-system/KeyboardShortcutHint.tsx
-var import_ink_renderer24 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_ink_renderer27 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function KeyboardShortcutHint({
   shortcut,
   action,
   parens = false,
   bold = false
 }) {
-  const shortcutText = bold ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ink_renderer24.Text, { bold: true, children: shortcut }) : shortcut;
+  const shortcutText = bold ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ink_renderer27.Text, { bold: true, children: shortcut }) : shortcut;
   if (parens) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_ink_renderer24.Text, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_ink_renderer27.Text, { children: [
       "(",
       shortcutText,
       " to ",
@@ -3344,7 +4185,7 @@ function KeyboardShortcutHint({
       ")"
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_ink_renderer24.Text, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_ink_renderer27.Text, { children: [
     shortcutText,
     " to ",
     action
@@ -3352,17 +4193,17 @@ function KeyboardShortcutHint({
 }
 
 // src/design-system/Pane.tsx
-var import_ink_renderer25 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_ink_renderer28 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Pane({ children, color: color2 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_ink_renderer25.Box, { flexDirection: "column", paddingTop: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Divider, { color: color2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ink_renderer25.Box, { flexDirection: "column", paddingX: 2, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_ink_renderer28.Box, { flexDirection: "column", paddingTop: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Divider, { color: color2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ink_renderer28.Box, { flexDirection: "column", paddingX: 2, children })
   ] });
 }
 
 // src/design-system/Dialog.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Dialog({
   title,
   subtitle,
@@ -3372,8 +4213,8 @@ function Dialog({
   hideInputGuide,
   hideBorder
 }) {
-  (0, import_ink_renderer26.useInput)(
-    (0, import_react18.useCallback)(
+  (0, import_ink_renderer29.useInput)(
+    (0, import_react22.useCallback)(
       (_input, key) => {
         if (key.escape) {
           onCancel();
@@ -3382,35 +4223,35 @@ function Dialog({
       [onCancel]
     )
   );
-  const defaultInputGuide = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Byline, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(KeyboardShortcutHint, { shortcut: "Enter", action: "confirm" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(KeyboardShortcutHint, { shortcut: "Esc", action: "cancel" })
+  const defaultInputGuide = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Byline, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(KeyboardShortcutHint, { shortcut: "Enter", action: "confirm" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(KeyboardShortcutHint, { shortcut: "Esc", action: "cancel" })
   ] });
-  const content = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_ink_renderer26.Box, { flexDirection: "column", gap: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_ink_renderer26.Box, { flexDirection: "column", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ink_renderer26.Text, { bold: true, color: color2, children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ink_renderer26.Text, { dimColor: true, children: subtitle })
+  const content = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_ink_renderer29.Box, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_ink_renderer29.Box, { flexDirection: "column", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ink_renderer29.Text, { bold: true, color: color2, children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ink_renderer29.Text, { dimColor: true, children: subtitle })
       ] }),
       children
     ] }),
-    !hideInputGuide && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ink_renderer26.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ink_renderer26.Text, { dimColor: true, italic: true, children: defaultInputGuide }) })
+    !hideInputGuide && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ink_renderer29.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ink_renderer29.Text, { dimColor: true, italic: true, children: defaultInputGuide }) })
   ] });
   if (hideBorder) {
     return content;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Pane, { color: color2, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Pane, { color: color2, children: content });
 }
 
 // src/design-system/FuzzyPicker.tsx
-var import_react19 = require("react");
-var import_ink_renderer29 = require("@claude-code-kit/ink-renderer");
+var import_react23 = require("react");
+var import_ink_renderer32 = require("@claude-code-kit/ink-renderer");
 
 // src/design-system/ListItem.tsx
 var import_figures2 = __toESM(require("figures"));
-var import_ink_renderer27 = require("@claude-code-kit/ink-renderer");
-var import_ink_renderer28 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_ink_renderer30 = require("@claude-code-kit/ink-renderer");
+var import_ink_renderer31 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function ListItem({
   isFocused,
   isSelected = false,
@@ -3424,52 +4265,52 @@ function ListItem({
 }) {
   function renderIndicator() {
     if (disabled) {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ink_renderer28.Text, { children: " " });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ink_renderer31.Text, { children: " " });
     }
     if (isFocused) {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ink_renderer28.Text, { color: "suggestion", children: import_figures2.default.pointer });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ink_renderer31.Text, { color: "cyan", children: import_figures2.default.pointer });
     }
     if (showScrollDown) {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ink_renderer28.Text, { dimColor: true, children: import_figures2.default.arrowDown });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ink_renderer31.Text, { dimColor: true, children: import_figures2.default.arrowDown });
     }
     if (showScrollUp) {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ink_renderer28.Text, { dimColor: true, children: import_figures2.default.arrowUp });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ink_renderer31.Text, { dimColor: true, children: import_figures2.default.arrowUp });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ink_renderer28.Text, { children: " " });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ink_renderer31.Text, { children: " " });
   }
   function getTextColor() {
     if (disabled) {
-      return "inactive";
+      return void 0;
     }
     if (!styled) {
       return void 0;
     }
     if (isSelected) {
-      return "success";
+      return "green";
     }
     if (isFocused) {
-      return "suggestion";
+      return "cyan";
     }
     return void 0;
   }
   const textColor = getTextColor();
-  const cursorRef = (0, import_ink_renderer27.useDeclaredCursor)({
+  const cursorRef = (0, import_ink_renderer30.useDeclaredCursor)({
     line: 0,
     column: 0,
     active: isFocused && !disabled && declareCursor !== false
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_ink_renderer28.Box, { ref: cursorRef, flexDirection: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_ink_renderer28.Box, { flexDirection: "row", gap: 1, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_ink_renderer31.Box, { ref: cursorRef, flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_ink_renderer31.Box, { flexDirection: "row", gap: 1, children: [
       renderIndicator(),
-      styled ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ink_renderer28.Text, { color: textColor, dimColor: disabled, children }) : children,
-      isSelected && !disabled && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ink_renderer28.Text, { color: "success", children: import_figures2.default.tick })
+      styled ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ink_renderer31.Text, { color: textColor, dimColor: disabled, children }) : children,
+      isSelected && !disabled && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ink_renderer31.Text, { color: "green", children: import_figures2.default.tick })
     ] }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ink_renderer28.Box, { paddingLeft: 2, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ink_renderer28.Text, { color: "inactive", children: description }) })
+    description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ink_renderer31.Box, { paddingLeft: 2, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ink_renderer31.Text, { dimColor: true, children: description }) })
   ] });
 }
 
 // src/design-system/FuzzyPicker.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var DEFAULT_VISIBLE = 8;
 var CHROME_ROWS = 10;
 var MIN_VISIBLE = 2;
@@ -3495,24 +4336,24 @@ function FuzzyPicker({
   selectAction = "select",
   extraHints
 }) {
-  const terminalSize = (0, import_react19.useContext)(import_ink_renderer29.TerminalSizeContext);
+  const terminalSize = (0, import_react23.useContext)(import_ink_renderer32.TerminalSizeContext);
   const rows = terminalSize?.rows ?? 24;
   const columns = terminalSize?.columns ?? 80;
-  const [focusedIndex, setFocusedIndex] = (0, import_react19.useState)(0);
-  const [query, setQuery] = (0, import_react19.useState)(initialQuery ?? "");
+  const [focusedIndex, setFocusedIndex] = (0, import_react23.useState)(0);
+  const [query, setQuery] = (0, import_react23.useState)(initialQuery ?? "");
   const visibleCount = Math.max(
     MIN_VISIBLE,
     Math.min(requestedVisible, rows - CHROME_ROWS - (matchLabel ? 1 : 0))
   );
   const compact = columns < 120;
-  const step = (0, import_react19.useCallback)(
+  const step = (0, import_react23.useCallback)(
     (delta) => {
-      setFocusedIndex((i) => (0, import_ink_renderer29.clamp)(i + delta, 0, items.length - 1));
+      setFocusedIndex((i) => (0, import_ink_renderer32.clamp)(i + delta, 0, items.length - 1));
     },
     [items.length]
   );
-  (0, import_ink_renderer29.useInput)(
-    (0, import_react19.useCallback)(
+  (0, import_ink_renderer32.useInput)(
+    (0, import_react23.useCallback)(
       (input, key) => {
         if (key.escape) {
           onCancel();
@@ -3553,26 +4394,26 @@ function FuzzyPicker({
       [onCancel, step, direction, items, focusedIndex, onSelect, onShiftTab, onTab]
     )
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     onQueryChange(query);
     setFocusedIndex(0);
   }, [query]);
-  (0, import_react19.useEffect)(() => {
-    setFocusedIndex((i) => (0, import_ink_renderer29.clamp)(i, 0, items.length - 1));
+  (0, import_react23.useEffect)(() => {
+    setFocusedIndex((i) => (0, import_ink_renderer32.clamp)(i, 0, items.length - 1));
   }, [items.length]);
   const focused = items[focusedIndex];
-  (0, import_react19.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     onFocus?.(focused);
   }, [focused]);
-  const windowStart = (0, import_ink_renderer29.clamp)(
+  const windowStart = (0, import_ink_renderer32.clamp)(
     focusedIndex - visibleCount + 1,
     0,
     items.length - visibleCount
   );
   const visible = items.slice(windowStart, windowStart + visibleCount);
   const emptyText = typeof emptyMessage === "function" ? emptyMessage(query) : emptyMessage;
-  const searchInput = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ink_renderer29.Box, { borderStyle: "round", paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ink_renderer29.Text, { dimColor: !query, children: query || placeholder }) });
-  const listBlock = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const searchInput = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer32.Box, { borderStyle: "round", paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer32.Text, { dimColor: !query, children: query || placeholder }) });
+  const listBlock = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     List,
     {
       visible,
@@ -3586,50 +4427,50 @@ function FuzzyPicker({
       emptyText
     }
   );
-  const preview = renderPreview && focused ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ink_renderer29.Box, { flexDirection: "column", flexGrow: 1, children: renderPreview(focused) }) : null;
-  const listGroup = renderPreview && previewPosition === "right" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-    import_ink_renderer29.Box,
+  const preview = renderPreview && focused ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer32.Box, { flexDirection: "column", flexGrow: 1, children: renderPreview(focused) }) : null;
+  const listGroup = renderPreview && previewPosition === "right" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    import_ink_renderer32.Box,
     {
       flexDirection: "row",
       gap: 2,
       height: visibleCount + (matchLabel ? 1 : 0),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_ink_renderer29.Box, { flexDirection: "column", flexShrink: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_ink_renderer32.Box, { flexDirection: "column", flexShrink: 0, children: [
           listBlock,
-          matchLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ink_renderer29.Text, { dimColor: true, children: matchLabel })
+          matchLabel && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer32.Text, { dimColor: true, children: matchLabel })
         ] }),
-        preview ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ink_renderer29.Box, { flexGrow: 1 })
+        preview ?? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer32.Box, { flexGrow: 1 })
       ]
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_ink_renderer29.Box, { flexDirection: "column", children: [
+  ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_ink_renderer32.Box, { flexDirection: "column", children: [
     listBlock,
-    matchLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ink_renderer29.Text, { dimColor: true, children: matchLabel }),
+    matchLabel && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer32.Text, { dimColor: true, children: matchLabel }),
     preview
   ] });
   const inputAbove = direction !== "up";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Pane, { color: "permission", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_ink_renderer29.Box, { flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ink_renderer29.Text, { bold: true, color: "permission", children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Pane, { color: "permission", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_ink_renderer32.Box, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer32.Text, { bold: true, color: "permission", children: title }),
     inputAbove && searchInput,
     listGroup,
     !inputAbove && searchInput,
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ink_renderer29.Text, { dimColor: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Byline, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer32.Text, { dimColor: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Byline, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         KeyboardShortcutHint,
         {
           shortcut: "up/dn",
           action: compact ? "nav" : "navigate"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(KeyboardShortcutHint, { shortcut: "Enter", action: selectAction }),
-      onTab && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(KeyboardShortcutHint, { shortcut: "Tab", action: onTab.action }),
-      onShiftTab && !compact && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(KeyboardShortcutHint, { shortcut: "Enter", action: selectAction }),
+      onTab && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(KeyboardShortcutHint, { shortcut: "Tab", action: onTab.action }),
+      onShiftTab && !compact && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         KeyboardShortcutHint,
         {
           shortcut: "shift+tab",
           action: onShiftTab.action
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(KeyboardShortcutHint, { shortcut: "Esc", action: "cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(KeyboardShortcutHint, { shortcut: "Esc", action: "cancel" }),
       extraHints
     ] }) })
   ] }) });
@@ -3646,14 +4487,14 @@ function List({
   emptyText
 }) {
   if (visible.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ink_renderer29.Box, { height: visibleCount, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ink_renderer29.Text, { dimColor: true, children: emptyText }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer32.Box, { height: visibleCount, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer32.Text, { dimColor: true, children: emptyText }) });
   }
   const rows = visible.map((item, i) => {
     const actualIndex = windowStart + i;
     const isFocused = actualIndex === focusedIndex;
     const atLowEdge = i === 0 && windowStart > 0;
     const atHighEdge = i === visible.length - 1 && windowStart + visibleCount < total;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       ListItem,
       {
         isFocused,
@@ -3665,8 +4506,8 @@ function List({
       getKey(item)
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_ink_renderer29.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_ink_renderer32.Box,
     {
       height: visibleCount,
       flexShrink: 0,
@@ -3677,69 +4518,69 @@ function List({
 }
 
 // src/design-system/LoadingState.tsx
-var import_ink_renderer30 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_ink_renderer33 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function LoadingState({
   message,
   bold = false,
   dimColor = false,
   subtitle
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_ink_renderer30.Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_ink_renderer30.Box, { flexDirection: "row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Spinner, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_ink_renderer30.Text, { bold, dimColor, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_ink_renderer33.Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_ink_renderer33.Box, { flexDirection: "row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Spinner, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_ink_renderer33.Text, { bold, dimColor, children: [
         " ",
         message
       ] })
     ] }),
-    subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ink_renderer30.Text, { dimColor: true, children: subtitle })
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ink_renderer33.Text, { dimColor: true, children: subtitle })
   ] });
 }
 
 // src/design-system/Ratchet.tsx
-var import_react20 = require("react");
-var import_ink_renderer31 = require("@claude-code-kit/ink-renderer");
-var import_ink_renderer32 = require("@claude-code-kit/ink-renderer");
-var import_ink_renderer33 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_ink_renderer34 = require("@claude-code-kit/ink-renderer");
+var import_ink_renderer35 = require("@claude-code-kit/ink-renderer");
+var import_ink_renderer36 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Ratchet({
   children,
   lock = "always"
 }) {
-  const [viewportRef, { isVisible }] = (0, import_ink_renderer32.useTerminalViewport)();
-  const terminalSize = (0, import_react20.useContext)(import_ink_renderer31.TerminalSizeContext);
+  const [viewportRef, { isVisible }] = (0, import_ink_renderer35.useTerminalViewport)();
+  const terminalSize = (0, import_react24.useContext)(import_ink_renderer34.TerminalSizeContext);
   const rows = terminalSize?.rows ?? 24;
-  const innerRef = (0, import_react20.useRef)(null);
-  const maxHeight = (0, import_react20.useRef)(0);
-  const [minHeight, setMinHeight] = (0, import_react20.useState)(0);
-  const outerRef = (0, import_react20.useCallback)(
+  const innerRef = (0, import_react24.useRef)(null);
+  const maxHeight = (0, import_react24.useRef)(0);
+  const [minHeight, setMinHeight] = (0, import_react24.useState)(0);
+  const outerRef = (0, import_react24.useCallback)(
     (el) => {
       viewportRef(el);
     },
     [viewportRef]
   );
   const engaged = lock === "always" || !isVisible;
-  (0, import_react20.useLayoutEffect)(() => {
+  (0, import_react24.useLayoutEffect)(() => {
     if (!innerRef.current) {
       return;
     }
-    const { height } = (0, import_ink_renderer33.measureElement)(innerRef.current);
+    const { height } = (0, import_ink_renderer36.measureElement)(innerRef.current);
     if (height > maxHeight.current) {
       maxHeight.current = Math.min(height, rows);
       setMinHeight(maxHeight.current);
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ink_renderer33.Box, { minHeight: engaged ? minHeight : void 0, ref: outerRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ink_renderer33.Box, { ref: innerRef, flexDirection: "column", children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ink_renderer36.Box, { minHeight: engaged ? minHeight : void 0, ref: outerRef, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ink_renderer36.Box, { ref: innerRef, flexDirection: "column", children }) });
 }
 
 // src/design-system/Tabs.tsx
-var import_react21 = require("react");
-var import_ink_renderer34 = require("@claude-code-kit/ink-renderer");
-var import_ink_renderer35 = require("@claude-code-kit/ink-renderer");
-var import_ink_renderer36 = require("@claude-code-kit/ink-renderer");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var TabsContext = (0, import_react21.createContext)({
+var import_react25 = require("react");
+var import_ink_renderer37 = require("@claude-code-kit/ink-renderer");
+var import_ink_renderer38 = require("@claude-code-kit/ink-renderer");
+var import_ink_renderer39 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var TabsContext = (0, import_react25.createContext)({
   selectedTab: void 0,
   width: void 0
 });
@@ -3755,7 +4596,7 @@ function Tabs({
   banner,
   disableNavigation
 }) {
-  const terminalSize = (0, import_react21.useContext)(import_ink_renderer34.TerminalSizeContext);
+  const terminalSize = (0, import_react25.useContext)(import_ink_renderer37.TerminalSizeContext);
   const terminalWidth = terminalSize?.columns ?? 80;
   const tabs = children.map((child) => [
     child.props.id ?? child.props.title,
@@ -3763,12 +4604,12 @@ function Tabs({
   ]);
   const defaultTabIndex = defaultTab ? tabs.findIndex((tab) => defaultTab === tab[0]) : 0;
   const isControlled = controlledSelectedTab !== void 0;
-  const [internalSelectedTab, setInternalSelectedTab] = (0, import_react21.useState)(
+  const [internalSelectedTab, setInternalSelectedTab] = (0, import_react25.useState)(
     defaultTabIndex !== -1 ? defaultTabIndex : 0
   );
   const controlledTabIndex = isControlled ? tabs.findIndex((tab) => tab[0] === controlledSelectedTab) : -1;
   const selectedTabIndex = isControlled ? controlledTabIndex !== -1 ? controlledTabIndex : 0 : internalSelectedTab;
-  const handleTabChange = (0, import_react21.useCallback)(
+  const handleTabChange = (0, import_react25.useCallback)(
     (offset) => {
       const newIndex = (selectedTabIndex + tabs.length + offset) % tabs.length;
       const newTabId = tabs[newIndex]?.[0];
@@ -3780,8 +4621,8 @@ function Tabs({
     },
     [selectedTabIndex, tabs, isControlled, onTabChange]
   );
-  (0, import_ink_renderer36.useInput)(
-    (0, import_react21.useCallback)(
+  (0, import_ink_renderer39.useInput)(
+    (0, import_react25.useCallback)(
       (_input, key) => {
         if (hidden || disableNavigation) return;
         if (key.tab && !key.shift) {
@@ -3797,28 +4638,28 @@ function Tabs({
       [hidden, disableNavigation, handleTabChange]
     )
   );
-  const titleWidth = title ? (0, import_ink_renderer35.stringWidth)(title) + 1 : 0;
+  const titleWidth = title ? (0, import_ink_renderer38.stringWidth)(title) + 1 : 0;
   const tabsWidth = tabs.reduce(
-    (sum, [, tabTitle]) => sum + (tabTitle ? (0, import_ink_renderer35.stringWidth)(tabTitle) : 0) + 3,
+    (sum, [, tabTitle]) => sum + (tabTitle ? (0, import_ink_renderer38.stringWidth)(tabTitle) : 0) + 3,
     0
   );
   const usedWidth = titleWidth + tabsWidth;
   const spacerWidth = useFullWidth ? Math.max(0, terminalWidth - usedWidth) : 0;
   const contentWidth = useFullWidth ? terminalWidth : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     TabsContext.Provider,
     {
       value: {
         selectedTab: tabs[selectedTabIndex]?.[0],
         width: contentWidth
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_ink_renderer36.Box, { flexDirection: "column", children: [
-        !hidden && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_ink_renderer36.Box, { flexDirection: "row", gap: 1, children: [
-          title !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer36.Text, { bold: true, color: color2, children: title }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_ink_renderer39.Box, { flexDirection: "column", children: [
+        !hidden && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_ink_renderer39.Box, { flexDirection: "row", gap: 1, children: [
+          title !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ink_renderer39.Text, { bold: true, color: color2, children: title }),
           tabs.map(([id, tabTitle], i) => {
             const isCurrent = selectedTabIndex === i;
-            return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-              import_ink_renderer36.Text,
+            return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+              import_ink_renderer39.Text,
               {
                 inverse: isCurrent,
                 bold: isCurrent,
@@ -3831,11 +4672,11 @@ function Tabs({
               id
             );
           }),
-          spacerWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer36.Text, { children: " ".repeat(spacerWidth) })
+          spacerWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ink_renderer39.Text, { children: " ".repeat(spacerWidth) })
         ] }),
         banner,
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          import_ink_renderer36.Box,
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_ink_renderer39.Box,
           {
             width: contentWidth,
             marginTop: hidden ? 0 : 1,
@@ -3847,23 +4688,663 @@ function Tabs({
   );
 }
 function Tab({ title, id, children }) {
-  const { selectedTab, width } = (0, import_react21.useContext)(TabsContext);
+  const { selectedTab, width } = (0, import_react25.useContext)(TabsContext);
   if (selectedTab !== (id ?? title)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ink_renderer36.Box, { width, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ink_renderer39.Box, { width, children });
 }
 function useTabsWidth() {
-  const { width } = (0, import_react21.useContext)(TabsContext);
+  const { width } = (0, import_react25.useContext)(TabsContext);
   return width;
 }
+
+// src/useVirtualScroll.ts
+var import_react26 = __toESM(require("react"));
+var import_ink_renderer40 = require("@claude-code-kit/ink-renderer");
+function clamp2(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function useVirtualScroll(options) {
+  const {
+    itemCount,
+    estimatedItemHeight = 3,
+    overscan = 20,
+    viewportHeight
+  } = options;
+  const totalHeight = itemCount * estimatedItemHeight;
+  const maxOffset = Math.max(0, totalHeight - viewportHeight);
+  const [scrollOffset, setScrollOffset] = (0, import_react26.useState)(0);
+  const clampedOffset = clamp2(scrollOffset, 0, maxOffset);
+  const rawStart = Math.floor(clampedOffset / estimatedItemHeight);
+  const rawEnd = Math.ceil((clampedOffset + viewportHeight) / estimatedItemHeight);
+  const startIndex = clamp2(rawStart - overscan, 0, itemCount);
+  const endIndex = clamp2(rawEnd + overscan, 0, itemCount);
+  const visibleItems = endIndex - startIndex;
+  const scrollTo = (0, import_react26.useCallback)(
+    (index) => {
+      const targetOffset = clamp2(index * estimatedItemHeight, 0, maxOffset);
+      setScrollOffset(targetOffset);
+    },
+    [estimatedItemHeight, maxOffset]
+  );
+  const scrollToEnd = (0, import_react26.useCallback)(() => {
+    setScrollOffset(maxOffset);
+  }, [maxOffset]);
+  const onScroll = (0, import_react26.useCallback)(
+    (delta) => {
+      setScrollOffset((prev) => clamp2(prev + delta * estimatedItemHeight, 0, maxOffset));
+    },
+    [estimatedItemHeight, maxOffset]
+  );
+  const isAtTop = clampedOffset <= 0;
+  const isAtEnd = clampedOffset >= maxOffset;
+  return (0, import_react26.useMemo)(
+    () => ({
+      startIndex,
+      endIndex,
+      visibleItems,
+      totalHeight,
+      scrollOffset: clampedOffset,
+      scrollTo,
+      scrollToEnd,
+      onScroll,
+      isAtTop,
+      isAtEnd
+    }),
+    [
+      startIndex,
+      endIndex,
+      visibleItems,
+      totalHeight,
+      clampedOffset,
+      scrollTo,
+      scrollToEnd,
+      onScroll,
+      isAtTop,
+      isAtEnd
+    ]
+  );
+}
+function VirtualList(props) {
+  const { items, renderItem, viewportHeight, estimatedItemHeight = 3, overscan = 20 } = props;
+  const { startIndex, endIndex, totalHeight } = useVirtualScroll({
+    itemCount: items.length,
+    estimatedItemHeight,
+    overscan,
+    viewportHeight
+  });
+  const topPad = startIndex * estimatedItemHeight;
+  const renderedHeight = (endIndex - startIndex) * estimatedItemHeight;
+  const bottomPad = Math.max(0, totalHeight - topPad - renderedHeight);
+  const visibleSlice = [];
+  for (let i = startIndex; i < endIndex && i < items.length; i++) {
+    visibleSlice.push(renderItem(items[i], i));
+  }
+  return import_react26.default.createElement(
+    import_ink_renderer40.Box,
+    {
+      flexDirection: "column",
+      height: viewportHeight,
+      overflow: "hidden"
+    },
+    topPad > 0 ? import_react26.default.createElement(import_ink_renderer40.Box, { height: topPad, key: "__virtual-top" }) : null,
+    ...visibleSlice,
+    bottomPad > 0 ? import_react26.default.createElement(import_ink_renderer40.Box, { height: bottomPad, key: "__virtual-bottom" }) : null
+  );
+}
+
+// src/WelcomeScreen.tsx
+var import_ink_renderer41 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var DEFAULT_COLOR2 = "#DA7756";
+function ClawdLogo({ color: color2 = DEFAULT_COLOR2 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_ink_renderer41.Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ink_renderer41.Text, { color: color2, children: " \u2590\u259B\u2588\u2588\u2588\u259C\u258C" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ink_renderer41.Text, { color: color2, children: "\u259D\u259C\u2588\u2588\u2588\u2588\u2588\u259B\u2598" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ink_renderer41.Text, { color: color2, children: "  \u2598\u2598 \u259D\u259D  " })
+  ] });
+}
+function WelcomeScreen({
+  appName,
+  subtitle,
+  version,
+  tips,
+  logo,
+  model,
+  color: color2 = DEFAULT_COLOR2
+}) {
+  const logoNode = logo ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ClawdLogo, { color: color2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_ink_renderer41.Box, { flexDirection: "column", gap: 1, marginTop: 1, marginLeft: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_ink_renderer41.Box, { flexDirection: "row", gap: 2, alignItems: "flex-start", children: [
+      logoNode,
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_ink_renderer41.Box, { flexDirection: "column", justifyContent: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_ink_renderer41.Box, { flexDirection: "row", gap: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ink_renderer41.Text, { bold: true, color: color2, children: appName }),
+          version && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ink_renderer41.Text, { dimColor: true, children: `v${version}` })
+        ] }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ink_renderer41.Text, { dimColor: true, children: subtitle }),
+        model && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ink_renderer41.Text, { dimColor: true, children: model })
+      ] })
+    ] }),
+    tips && tips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_ink_renderer41.Box, { flexDirection: "column", gap: 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ink_renderer41.Text, { dimColor: true, children: "Tips:" }),
+      tips.map((tip, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ink_renderer41.Text, { dimColor: true, children: `  - ${tip}` }, i))
+    ] })
+  ] });
+}
+
+// src/agent/useAgent.ts
+var import_react27 = require("react");
+var _msgId = 0;
+function nextId() {
+  return `msg-${++_msgId}-${Date.now()}`;
+}
+function toolCallToContent(tc) {
+  return {
+    type: "tool_use",
+    toolName: tc.name,
+    input: JSON.stringify(tc.input, null, 2),
+    status: "running"
+  };
+}
+function useAgent({ agent, onError }) {
+  const [messages, setMessages] = (0, import_react27.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react27.useState)(false);
+  const [streamingContent, setStreamingContent] = (0, import_react27.useState)(null);
+  const [permissionRequest, setPermissionRequest] = (0, import_react27.useState)(null);
+  const isRunningRef = (0, import_react27.useRef)(false);
+  const toolMsgMap = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react27.useEffect)(() => {
+    agent.setPermissionHandler(async (request) => {
+      return new Promise((resolve) => {
+        setPermissionRequest({
+          toolName: request.tool,
+          description: `Tool "${request.tool}" wants to execute`,
+          details: JSON.stringify(request.input, null, 2),
+          resolve: (decision) => {
+            setPermissionRequest(null);
+            resolve({ decision });
+          }
+        });
+      });
+    });
+  }, [agent]);
+  const cancel = (0, import_react27.useCallback)(() => {
+    agent.abort();
+    isRunningRef.current = false;
+    setIsLoading(false);
+    setStreamingContent(null);
+    setPermissionRequest(null);
+  }, [agent]);
+  const clearMessages = (0, import_react27.useCallback)(() => {
+    agent.clearMessages();
+    setMessages([]);
+    setStreamingContent(null);
+    setPermissionRequest(null);
+  }, [agent]);
+  const submit = (0, import_react27.useCallback)(
+    (input) => {
+      if (isRunningRef.current) return;
+      const trimmed = input.trim();
+      if (!trimmed) return;
+      const userMsg = {
+        id: nextId(),
+        role: "user",
+        content: trimmed,
+        timestamp: Date.now()
+      };
+      setMessages((prev) => [...prev, userMsg]);
+      isRunningRef.current = true;
+      setIsLoading(true);
+      setStreamingContent(null);
+      (async () => {
+        let accumulated = "";
+        try {
+          for await (const event of agent.run(trimmed)) {
+            switch (event.type) {
+              case "text": {
+                accumulated += event.text;
+                setStreamingContent(accumulated);
+                break;
+              }
+              case "tool_call": {
+                const msgId = nextId();
+                toolMsgMap.current.set(event.toolCall.id, msgId);
+                const toolMsg = {
+                  id: msgId,
+                  role: "assistant",
+                  content: [toolCallToContent(event.toolCall)],
+                  timestamp: Date.now()
+                };
+                setMessages((prev) => [...prev, toolMsg]);
+                break;
+              }
+              case "tool_result": {
+                const targetId = toolMsgMap.current.get(event.toolCallId);
+                if (targetId) {
+                  setMessages(
+                    (prev) => prev.map((m) => {
+                      if (m.id !== targetId) return m;
+                      const contents = Array.isArray(m.content) ? m.content : [];
+                      return {
+                        ...m,
+                        content: contents.map((c) => {
+                          if (c.type !== "tool_use") return c;
+                          return {
+                            ...c,
+                            result: event.result.content,
+                            status: event.result.isError ? "error" : "success"
+                          };
+                        })
+                      };
+                    })
+                  );
+                  toolMsgMap.current.delete(event.toolCallId);
+                }
+                break;
+              }
+              case "error": {
+                onError?.(event.error);
+                break;
+              }
+              case "done": {
+                if (accumulated.length > 0) {
+                  const assistantMsg = {
+                    id: nextId(),
+                    role: "assistant",
+                    content: accumulated,
+                    timestamp: Date.now()
+                  };
+                  setMessages((prev) => [...prev, assistantMsg]);
+                }
+                accumulated = "";
+                setStreamingContent(null);
+                break;
+              }
+            }
+          }
+        } catch (err) {
+          const error = err instanceof Error ? err : new Error(String(err));
+          onError?.(error);
+        } finally {
+          isRunningRef.current = false;
+          setIsLoading(false);
+          setStreamingContent(null);
+        }
+      })();
+    },
+    [agent, onError]
+  );
+  return {
+    messages,
+    isLoading,
+    streamingContent,
+    permissionRequest,
+    submit,
+    cancel,
+    clearMessages
+  };
+}
+
+// src/agent/AgentProvider.tsx
+var import_react28 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var AgentContext = (0, import_react28.createContext)(null);
+function AgentProvider({
+  agent,
+  model = "unknown",
+  onError,
+  children
+}) {
+  const agentState = useAgent({ agent, onError });
+  const value = (0, import_react28.useMemo)(
+    () => ({
+      ...agentState,
+      agent,
+      model
+    }),
+    [agentState, agent, model]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AgentContext.Provider, { value, children });
+}
+function useAgentContext() {
+  const ctx = (0, import_react28.useContext)(AgentContext);
+  if (!ctx) {
+    throw new Error(
+      "useAgentContext must be used within an <AgentProvider>. Wrap your component tree with <AgentProvider agent={agent}>."
+    );
+  }
+  return ctx;
+}
+
+// src/agent/AgentREPL.tsx
+var import_react29 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function AgentREPLInner({
+  commands,
+  welcome,
+  placeholder,
+  onExit
+}) {
+  const {
+    messages,
+    isLoading,
+    streamingContent,
+    permissionRequest,
+    submit,
+    model,
+    clearMessages
+  } = useAgentContext();
+  const permissionState = (0, import_react29.useMemo)(() => {
+    if (!permissionRequest) return void 0;
+    return {
+      toolName: permissionRequest.toolName,
+      description: permissionRequest.description,
+      details: permissionRequest.details,
+      onDecision: (action) => {
+        permissionRequest.resolve(action === "deny" ? "deny" : "allow");
+      }
+    };
+  }, [permissionRequest]);
+  const allCommands = (0, import_react29.useMemo)(() => {
+    const builtIn = [
+      {
+        name: "clear",
+        description: "Clear conversation history",
+        onExecute: () => clearMessages()
+      }
+    ];
+    return [...builtIn, ...commands ?? []];
+  }, [commands, clearMessages]);
+  const handleSubmit = (0, import_react29.useCallback)(
+    async (input) => {
+      submit(input);
+    },
+    [submit]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    REPL,
+    {
+      onSubmit: handleSubmit,
+      onExit,
+      messages,
+      isLoading,
+      streamingContent,
+      permissionRequest: permissionState,
+      commands: allCommands,
+      model,
+      welcome,
+      placeholder
+    }
+  );
+}
+function AgentREPL({
+  agent,
+  model,
+  commands,
+  welcome,
+  placeholder,
+  onError,
+  onExit
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AgentProvider, { agent, model, onError, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    AgentREPLInner,
+    {
+      commands,
+      welcome,
+      placeholder,
+      onExit
+    }
+  ) });
+}
+
+// src/AuthFlow.tsx
+var import_react30 = require("react");
+var import_ink_renderer42 = require("@claude-code-kit/ink-renderer");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function CredentialInput({
+  label,
+  masked,
+  onSubmit,
+  onCancel
+}) {
+  const [value, setValue] = (0, import_react30.useState)("");
+  const [cursor, setCursor] = (0, import_react30.useState)(0);
+  (0, import_ink_renderer42.useInput)((input, key) => {
+    if (key.escape) {
+      onCancel?.();
+      return;
+    }
+    if (key.return) {
+      if (value.length > 0) onSubmit(value);
+      return;
+    }
+    if (key.backspace) {
+      if (cursor > 0) {
+        setValue((v) => v.slice(0, cursor - 1) + v.slice(cursor));
+        setCursor((c) => c - 1);
+      }
+      return;
+    }
+    if (key.leftArrow) {
+      setCursor((c) => Math.max(0, c - 1));
+      return;
+    }
+    if (key.rightArrow) {
+      setCursor((c) => Math.min(value.length, c + 1));
+      return;
+    }
+    if (key.ctrl || key.meta) return;
+    if (input.length > 0) {
+      setValue((v) => v.slice(0, cursor) + input + v.slice(cursor));
+      setCursor((c) => c + input.length);
+    }
+  });
+  const display = masked ? "*".repeat(value.length) : value;
+  const before = display.slice(0, cursor);
+  const at = cursor < display.length ? display[cursor] : " ";
+  const after = cursor < display.length ? display.slice(cursor + 1) : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_ink_renderer42.Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ink_renderer42.Text, { bold: true, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_ink_renderer42.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ink_renderer42.Text, { color: "cyan", children: "> " }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_ink_renderer42.Text, { children: [
+        before,
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ink_renderer42.Text, { inverse: true, children: at }),
+        after
+      ] })
+    ] }),
+    value.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ink_renderer42.Text, { dimColor: true, children: "  Type your credential and press Enter" })
+  ] });
+}
+function AuthFlowUI({
+  auth,
+  onComplete,
+  onCancel,
+  title = "Authentication"
+}) {
+  const [phase, setPhase] = (0, import_react30.useState)({ type: "select-provider" });
+  const [baseURL, setBaseURL] = (0, import_react30.useState)();
+  const [error, setError] = (0, import_react30.useState)();
+  const flowState = auth.interactive();
+  const providerOptions = (flowState.providers ?? []).map((p) => ({
+    value: p.name,
+    label: `${p.displayName}`,
+    description: p.description
+  }));
+  const handleProviderSelect = (0, import_react30.useCallback)((providerName) => {
+    setError(void 0);
+    try {
+      const state = auth.selectProvider(providerName);
+      if (state.step === "done" && state.result) {
+        onComplete(state.result.provider, state.result.providerName, state.result.model);
+        setPhase({ type: "done" });
+        return;
+      }
+      if (state.step === "input-credentials" && state.currentAuthMethod) {
+        const method = state.currentAuthMethod;
+        const needsBaseURL = method.type === "base-url-key" && !method.defaultBaseURL;
+        setPhase({
+          type: "input-credentials",
+          providerName,
+          method,
+          needsBaseURL
+        });
+        return;
+      }
+      if (state.step === "select-model" && state.models) {
+        setPhase({
+          type: "select-model",
+          providerName,
+          method: state.currentAuthMethod,
+          models: state.models,
+          defaultModel: state.currentModel
+        });
+        return;
+      }
+      if (state.step === "select-auth-method" && state.authMethods) {
+        const method = state.authMethods[0];
+        const needsBaseURL = method.type === "base-url-key" && !("defaultBaseURL" in method && method.defaultBaseURL);
+        setPhase({
+          type: "input-credentials",
+          providerName,
+          method,
+          needsBaseURL: needsBaseURL && method.type === "base-url-key"
+        });
+        return;
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }, [auth, onComplete]);
+  const handleBaseURLSubmit = (0, import_react30.useCallback)((url) => {
+    setBaseURL(url);
+  }, []);
+  const handleCredentialSubmit = (0, import_react30.useCallback)(async (apiKey) => {
+    if (phase.type !== "input-credentials") return;
+    setError(void 0);
+    try {
+      const credentials = {
+        apiKey,
+        baseURL: baseURL || (phase.method.type === "base-url-key" ? phase.method.defaultBaseURL : void 0)
+      };
+      const state = await auth.inputCredentials(phase.providerName, phase.method, credentials);
+      if (state.step === "done" && state.result) {
+        onComplete(state.result.provider, state.result.providerName, state.result.model);
+        setPhase({ type: "done" });
+        return;
+      }
+      if (state.step === "select-model" && state.models) {
+        setPhase({
+          type: "select-model",
+          providerName: phase.providerName,
+          method: phase.method,
+          models: state.models,
+          defaultModel: state.currentModel
+        });
+        return;
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }, [auth, phase, baseURL, onComplete]);
+  const handleModelSelect = (0, import_react30.useCallback)(async (model) => {
+    if (phase.type !== "select-model") return;
+    setError(void 0);
+    try {
+      const state = await auth.selectModel(phase.providerName, phase.method, model);
+      if (state.step === "done" && state.result) {
+        onComplete(state.result.provider, state.result.providerName, state.result.model);
+        setPhase({ type: "done" });
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }, [auth, phase, onComplete]);
+  const handleCancel = (0, import_react30.useCallback)(() => {
+    if (phase.type === "select-provider") {
+      onCancel?.();
+    } else {
+      setPhase({ type: "select-provider" });
+      setBaseURL(void 0);
+      setError(void 0);
+    }
+  }, [phase, onCancel]);
+  if (phase.type === "done") {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_ink_renderer42.Box, { flexDirection: "column", marginTop: 1, marginLeft: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ink_renderer42.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ink_renderer42.Text, { bold: true, color: "#DA7756", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, {}),
+    error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ink_renderer42.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_ink_renderer42.Text, { color: "red", children: [
+      "Error: ",
+      error
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_ink_renderer42.Box, { marginTop: 1, children: [
+      phase.type === "select-provider" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        Select,
+        {
+          title: "Select a provider:",
+          options: providerOptions,
+          onChange: handleProviderSelect,
+          onCancel: handleCancel
+        }
+      ),
+      phase.type === "input-credentials" && phase.method.type === "base-url-key" && phase.needsBaseURL && !baseURL && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        CredentialInput,
+        {
+          label: "Enter Base URL:",
+          masked: false,
+          onSubmit: handleBaseURLSubmit,
+          onCancel: handleCancel
+        }
+      ),
+      phase.type === "input-credentials" && !(phase.method.type === "base-url-key" && phase.needsBaseURL && !baseURL) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        CredentialInput,
+        {
+          label: phase.method.type === "api-key" || phase.method.type === "base-url-key" ? phase.method.inputLabel ?? "Enter API Key:" : "Enter API Key:",
+          masked: true,
+          onSubmit: handleCredentialSubmit,
+          onCancel: handleCancel
+        }
+      ),
+      phase.type === "select-model" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        Select,
+        {
+          title: "Select a model:",
+          options: phase.models.map((m) => ({
+            value: m,
+            label: m,
+            description: m === phase.defaultModel ? "(default)" : void 0
+          })),
+          defaultValue: phase.defaultModel,
+          onChange: handleModelSelect,
+          onCancel: handleCancel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ink_renderer42.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_ink_renderer42.Text, { dimColor: true, children: [
+      "Esc to ",
+      phase.type === "select-provider" ? "cancel" : "go back"
+    ] }) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AgentContext,
+  AgentProvider,
+  AgentREPL,
+  AuthFlowUI,
+  BashPermissionContent,
   Byline,
+  ClawdLogo,
   CommandRegistry,
   DEFAULT_BINDINGS,
   Dialog,
+  DiffView,
   Divider,
+  FileEditPermissionContent,
   FuzzyPicker,
   KeybindingSetup,
   KeyboardShortcutHint,
@@ -3874,10 +5355,12 @@ function useTabsWidth() {
   MessageList,
   MultiSelect,
   Pane,
+  PermissionRequest,
   ProgressBar,
   PromptInput,
   REPL,
   Ratchet,
+  SearchOverlay,
   Select,
   Spinner,
   StatusIcon,
@@ -3890,6 +5373,8 @@ function useTabsWidth() {
   ThemeProvider,
   ThemedBox,
   ThemedText,
+  VirtualList,
+  WelcomeScreen,
   clearCommand,
   color,
   createCommandRegistry,
@@ -3899,14 +5384,19 @@ function useTabsWidth() {
   exitCommand,
   getTheme,
   helpCommand,
+  parseUnifiedDiff,
+  useAgent,
+  useAgentContext,
   useDoublePress,
   useKeybinding,
   useKeybindings,
   usePreviewTheme,
+  useSearch,
   useStatusLine,
   useTabsWidth,
   useTerminalSize,
   useTheme,
   useThemeSetting,
+  useVirtualScroll,
   ...require("@claude-code-kit/ink-renderer")
 });