@claude-code-kit/ui 0.1.0 → 0.1.1

package/dist/index.mjs

@@ -5,7 +5,7 @@ export * from "@claude-code-kit/ink-renderer";
 import { useContext } from "react";
 import { Text, Ansi, TerminalSizeContext, stringWidth } from "@claude-code-kit/ink-renderer";
 import { jsx, jsxs } from "react/jsx-runtime";
-function Divider({ width, color, char = "\u2500", padding = 0, title }) {
+function Divider({ width, color: color2, char = "\u2500", padding = 0, title }) {
   const terminalSize = useContext(TerminalSizeContext);
   const terminalWidth = terminalSize?.columns ?? 80;
   const effectiveWidth = Math.max(0, (width ?? terminalWidth - 2) - padding);
@@ -14,7 +14,7 @@ function Divider({ width, color, char = "\u2500", padding = 0, title }) {
     const sideWidth = Math.max(0, effectiveWidth - titleWidth);
     const leftWidth = Math.floor(sideWidth / 2);
     const rightWidth = sideWidth - leftWidth;
-    return /* @__PURE__ */ jsxs(Text, { color, dimColor: !color, children: [
+    return /* @__PURE__ */ jsxs(Text, { color: color2, dimColor: !color2, children: [
       char.repeat(leftWidth),
       " ",
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: /* @__PURE__ */ jsx(Ansi, { children: title }) }),
@@ -22,7 +22,7 @@ function Divider({ width, color, char = "\u2500", padding = 0, title }) {
       char.repeat(rightWidth)
     ] });
   }
-  return /* @__PURE__ */ jsx(Text, { color, dimColor: !color, children: char.repeat(effectiveWidth) });
+  return /* @__PURE__ */ jsx(Text, { color: color2, dimColor: !color2, children: char.repeat(effectiveWidth) });
 }
 
 // src/ProgressBar.tsx
@@ -365,10 +365,13 @@ function parseBindings(blocks) {
 
 // src/keybindings/resolver.ts
 function getBindingDisplayText(action, context, bindings) {
-  const binding = bindings.findLast(
-    (b) => b.action === action && b.context === context
-  );
-  return binding ? chordToString(binding.chord) : void 0;
+  for (let i = bindings.length - 1; i >= 0; i--) {
+    const binding = bindings[i];
+    if (binding && binding.action === action && binding.context === context) {
+      return chordToString(binding.chord);
+    }
+  }
+  return void 0;
 }
 function buildKeystroke(input, key) {
   const keyName = getKeyName(input, key);
@@ -1706,8 +1709,62 @@ function ChordInterceptor({
   return null;
 }
 
+// src/hooks/useDoublePress.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef2 } from "react";
+var DOUBLE_PRESS_TIMEOUT_MS = 800;
+function useDoublePress(setPending, onDoublePress, onFirstPress) {
+  const lastPressRef = useRef2(0);
+  const timeoutRef = useRef2(void 0);
+  const clearTimeoutSafe = useCallback3(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = void 0;
+    }
+  }, []);
+  useEffect4(() => {
+    return () => {
+      clearTimeoutSafe();
+    };
+  }, [clearTimeoutSafe]);
+  return useCallback3(() => {
+    const now = Date.now();
+    const timeSinceLastPress = now - lastPressRef.current;
+    const isDoublePress = timeSinceLastPress <= DOUBLE_PRESS_TIMEOUT_MS && timeoutRef.current !== void 0;
+    if (isDoublePress) {
+      clearTimeoutSafe();
+      setPending(false);
+      onDoublePress();
+    } else {
+      onFirstPress?.();
+      setPending(true);
+      clearTimeoutSafe();
+      timeoutRef.current = setTimeout(
+        (setPending2, timeoutRef2) => {
+          setPending2(false);
+          timeoutRef2.current = void 0;
+        },
+        DOUBLE_PRESS_TIMEOUT_MS,
+        setPending,
+        timeoutRef
+      );
+    }
+    lastPressRef.current = now;
+  }, [setPending, onDoublePress, onFirstPress, clearTimeoutSafe]);
+}
+
+// src/hooks/useTerminalSize.ts
+import { useContext as useContext3 } from "react";
+import { TerminalSizeContext as TerminalSizeContext2 } from "@claude-code-kit/ink-renderer";
+function useTerminalSize() {
+  const size = useContext3(TerminalSizeContext2);
+  if (!size) {
+    throw new Error("useTerminalSize must be used within an Ink App component");
+  }
+  return size;
+}
+
 // src/PromptInput.tsx
-import { useState as useState3, useCallback as useCallback3 } from "react";
+import { useState as useState3, useCallback as useCallback4 } from "react";
 import { Text as Text5, Box as Box2, useInput as useInput3 } from "@claude-code-kit/ink-renderer";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function PromptInput({
@@ -1728,7 +1785,7 @@ function PromptInput({
   const [showSuggestions, setShowSuggestions] = useState3(false);
   const suggestions = value.startsWith("/") && commands.length > 0 ? commands.filter((cmd) => `/${cmd.name}`.startsWith(value)) : [];
   const hasSuggestions = showSuggestions && suggestions.length > 0;
-  const updateValue = useCallback3(
+  const updateValue = useCallback4(
     (newValue, newCursor) => {
       onChange(newValue);
       setCursor(newCursor ?? newValue.length);
@@ -1896,7 +1953,7 @@ function PromptInput({
 }
 
 // src/Spinner.tsx
-import { useState as useState4, useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useState as useState4, useEffect as useEffect5, useRef as useRef3 } from "react";
 import { Text as Text6, Box as Box3 } from "@claude-code-kit/ink-renderer";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
@@ -1908,22 +1965,22 @@ function Spinner({
   label,
   verb,
   verbs,
-  color = DEFAULT_COLOR,
+  color: color2 = DEFAULT_COLOR,
   showElapsed = true
 }) {
   const [frameIndex, setFrameIndex] = useState4(0);
   const [verbIndex, setVerbIndex] = useState4(0);
   const [elapsed, setElapsed] = useState4(0);
-  const startRef = useRef2(Date.now());
+  const startRef = useRef3(Date.now());
   const allVerbs = verbs ?? (verb ? [verb] : ["Thinking"]);
-  useEffect4(() => {
+  useEffect5(() => {
     const id = setInterval(() => {
       setFrameIndex((i) => (i + 1) % FRAMES.length);
       setElapsed(Date.now() - startRef.current);
     }, SPINNER_INTERVAL);
     return () => clearInterval(id);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (allVerbs.length <= 1) return;
     const id = setInterval(() => {
       setVerbIndex((i) => (i + 1) % allVerbs.length);
@@ -1935,7 +1992,7 @@ function Spinner({
   const elapsedSec = Math.floor(elapsed / 1e3);
   const showTime = showElapsed && elapsed >= ELAPSED_SHOW_AFTER;
   return /* @__PURE__ */ jsxs5(Box3, { children: [
-    /* @__PURE__ */ jsx7(Text6, { color, children: frame }),
+    /* @__PURE__ */ jsx7(Text6, { color: color2, children: frame }),
     /* @__PURE__ */ jsxs5(Text6, { children: [
       " ",
       currentVerb,
@@ -1953,29 +2010,766 @@ function Spinner({
   ] });
 }
 
+// src/Markdown.tsx
+import { marked as marked2 } from "marked";
+import { Suspense, use, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { Ansi as Ansi4, Box as Box4 } from "@claude-code-kit/ink-renderer";
+
+// src/design-system/ThemeProvider.tsx
+import { createContext as createContext2, useContext as useContext4, useMemo as useMemo2, useState as useState5 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var themes = {
+  dark: {
+    text: "#E0E0E0",
+    dimText: "#666666",
+    border: "#444444",
+    accent: "#5B9BD5",
+    success: "#6BC76B",
+    warning: "#E5C07B",
+    error: "#E06C75",
+    assistant: "#DA7756",
+    inactive: "#666666",
+    inverseText: "#1E1E1E",
+    permission: "#5B9BD5"
+  },
+  light: {
+    text: "#1E1E1E",
+    dimText: "#999999",
+    border: "#CCCCCC",
+    accent: "#0066CC",
+    success: "#2E7D32",
+    warning: "#F57C00",
+    error: "#C62828",
+    assistant: "#DA7756",
+    inactive: "#999999",
+    inverseText: "#FFFFFF",
+    permission: "#0066CC"
+  }
+};
+function getTheme(name) {
+  return themes[name] ?? themes.dark;
+}
+var DEFAULT_THEME = "dark";
+var ThemeContext = createContext2({
+  themeSetting: DEFAULT_THEME,
+  setThemeSetting: () => {
+  },
+  setPreviewTheme: () => {
+  },
+  savePreview: () => {
+  },
+  cancelPreview: () => {
+  },
+  currentTheme: DEFAULT_THEME
+});
+function ThemeProvider({
+  children,
+  initialState = "dark",
+  onThemeSave
+}) {
+  const [themeSetting, setThemeSetting] = useState5(initialState);
+  const [previewTheme, setPreviewTheme] = useState5(null);
+  const activeSetting = previewTheme ?? themeSetting;
+  const currentTheme = activeSetting === "auto" ? "dark" : activeSetting;
+  const value = useMemo2(
+    () => ({
+      themeSetting,
+      setThemeSetting: (newSetting) => {
+        setThemeSetting(newSetting);
+        setPreviewTheme(null);
+        onThemeSave?.(newSetting);
+      },
+      setPreviewTheme: (newSetting) => {
+        setPreviewTheme(newSetting);
+      },
+      savePreview: () => {
+        if (previewTheme !== null) {
+          setThemeSetting(previewTheme);
+          setPreviewTheme(null);
+          onThemeSave?.(previewTheme);
+        }
+      },
+      cancelPreview: () => {
+        if (previewTheme !== null) {
+          setPreviewTheme(null);
+        }
+      },
+      currentTheme
+    }),
+    [themeSetting, previewTheme, currentTheme, onThemeSave]
+  );
+  return /* @__PURE__ */ jsx8(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const { currentTheme, setThemeSetting } = useContext4(ThemeContext);
+  return [currentTheme, setThemeSetting];
+}
+function useThemeSetting() {
+  return useContext4(ThemeContext).themeSetting;
+}
+function usePreviewTheme() {
+  const { setPreviewTheme, savePreview, cancelPreview } = useContext4(ThemeContext);
+  return { setPreviewTheme, savePreview, cancelPreview };
+}
+
+// src/utils/optional/cliHighlight.ts
+var cliHighlightPromise;
+async function loadCliHighlight() {
+  try {
+    const cliHighlight = await import("cli-highlight");
+    return {
+      highlight: cliHighlight.highlight,
+      supportsLanguage: cliHighlight.supportsLanguage
+    };
+  } catch {
+    return null;
+  }
+}
+function getCliHighlightPromise() {
+  cliHighlightPromise ?? (cliHighlightPromise = loadCliHighlight());
+  return cliHighlightPromise;
+}
+
+// src/utils/hash.ts
+function hashContent(content) {
+  let h = 2166136261 | 0;
+  for (let i = 0; i < content.length; i++) {
+    h ^= content.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  let h2 = 26499749718 | 0;
+  for (let i = 0; i < content.length; i++) {
+    h2 ^= content.charCodeAt(i);
+    h2 = Math.imul(h2, 16777619);
+  }
+  return ((h >>> 0) * 1048576 + (h2 >>> 0)).toString(36) + content.length.toString(36);
+}
+
+// src/utils/markdown.ts
+import chalk from "chalk";
+import { marked } from "marked";
+import stripAnsi from "strip-ansi";
+import { stringWidth as stringWidth2 } from "@claude-code-kit/ink-renderer";
+
+// src/design-system/color.ts
+import { colorize } from "@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 colorize(text, c, type);
+    }
+    return colorize(text, getTheme(theme)[c], type);
+  };
+}
+
+// src/utils/markdown.ts
+function logForDebugging3(...args) {
+  if (process.env["DEBUG"]) {
+    console.debug(...args);
+  }
+}
+var EOL = "\n";
+var BLOCKQUOTE_BAR = "\u258E";
+var OSC8_START = "\x1B]8;;";
+var OSC8_END = "\x07";
+function supportsHyperlinks() {
+  const termProgram = process.env["TERM_PROGRAM"];
+  const lcTerminal = process.env["LC_TERMINAL"];
+  const term = process.env["TERM"];
+  const supported = ["ghostty", "Hyper", "kitty", "alacritty", "iTerm.app", "iTerm2"];
+  return !!(termProgram && supported.includes(termProgram)) || !!(lcTerminal && supported.includes(lcTerminal)) || !!term?.includes("kitty");
+}
+function createHyperlink(url, content) {
+  if (!supportsHyperlinks()) {
+    return url;
+  }
+  const displayText = content ?? url;
+  const coloredText = chalk.blue(displayText);
+  return `${OSC8_START}${url}${OSC8_END}${coloredText}${OSC8_START}${OSC8_END}`;
+}
+var markedConfigured = false;
+function configureMarked() {
+  if (markedConfigured) return;
+  markedConfigured = true;
+  marked.use({
+    tokenizer: {
+      del() {
+        return void 0;
+      }
+    }
+  });
+}
+function formatToken(token, theme, listDepth = 0, orderedListNumber = null, parent = null, highlight = null) {
+  switch (token.type) {
+    case "blockquote": {
+      const inner = (token.tokens ?? []).map((_) => formatToken(_, theme, 0, null, null, highlight)).join("");
+      const bar = chalk.dim(BLOCKQUOTE_BAR);
+      return inner.split(EOL).map(
+        (line) => stripAnsi(line).trim() ? `${bar} ${chalk.italic(line)}` : line
+      ).join(EOL);
+    }
+    case "code": {
+      if (!highlight) {
+        return token.text + EOL;
+      }
+      let language = "plaintext";
+      if (token.lang) {
+        if (highlight.supportsLanguage(token.lang)) {
+          language = token.lang;
+        } else {
+          logForDebugging3(
+            `Language not supported while highlighting code, falling back to plaintext: ${token.lang}`
+          );
+        }
+      }
+      return highlight.highlight(token.text, { language }) + EOL;
+    }
+    case "codespan": {
+      return color("permission", theme)(token.text);
+    }
+    case "em":
+      return chalk.italic(
+        (token.tokens ?? []).map((_) => formatToken(_, theme, 0, null, parent, highlight)).join("")
+      );
+    case "strong":
+      return chalk.bold(
+        (token.tokens ?? []).map((_) => formatToken(_, theme, 0, null, parent, highlight)).join("")
+      );
+    case "heading":
+      switch (token.depth) {
+        case 1:
+          return chalk.bold.italic.underline(
+            (token.tokens ?? []).map((_) => formatToken(_, theme, 0, null, null, highlight)).join("")
+          ) + EOL + EOL;
+        case 2:
+          return chalk.bold(
+            (token.tokens ?? []).map((_) => formatToken(_, theme, 0, null, null, highlight)).join("")
+          ) + EOL + EOL;
+        default:
+          return chalk.bold(
+            (token.tokens ?? []).map((_) => formatToken(_, theme, 0, null, null, highlight)).join("")
+          ) + EOL + EOL;
+      }
+    case "hr":
+      return "---";
+    case "image":
+      return token.href;
+    case "link": {
+      if (token.href.startsWith("mailto:")) {
+        const email = token.href.replace(/^mailto:/, "");
+        return email;
+      }
+      const linkText = (token.tokens ?? []).map((_) => formatToken(_, theme, 0, null, token, highlight)).join("");
+      const plainLinkText = stripAnsi(linkText);
+      if (plainLinkText && plainLinkText !== token.href) {
+        return createHyperlink(token.href, linkText);
+      }
+      return createHyperlink(token.href);
+    }
+    case "list": {
+      return token.items.map(
+        (_, index) => formatToken(
+          _,
+          theme,
+          listDepth,
+          token.ordered ? token.start + index : null,
+          token,
+          highlight
+        )
+      ).join("");
+    }
+    case "list_item":
+      return (token.tokens ?? []).map(
+        (_) => `${"  ".repeat(listDepth)}${formatToken(_, theme, listDepth + 1, orderedListNumber, token, highlight)}`
+      ).join("");
+    case "paragraph":
+      return (token.tokens ?? []).map((_) => formatToken(_, theme, 0, null, null, highlight)).join("") + EOL;
+    case "space":
+      return EOL;
+    case "br":
+      return EOL;
+    case "text":
+      if (parent?.type === "link") {
+        return token.text;
+      }
+      if (parent?.type === "list_item") {
+        return `${orderedListNumber === null ? "-" : getListNumber(listDepth, orderedListNumber) + "."} ${token.tokens ? token.tokens.map((_) => formatToken(_, theme, listDepth, orderedListNumber, token, highlight)).join("") : linkifyIssueReferences(token.text)}${EOL}`;
+      }
+      return linkifyIssueReferences(token.text);
+    case "table": {
+      let getDisplayText2 = function(tokens) {
+        return stripAnsi(
+          tokens?.map((_) => formatToken(_, theme, 0, null, null, highlight)).join("") ?? ""
+        );
+      };
+      var getDisplayText = getDisplayText2;
+      const tableToken = token;
+      const columnWidths = tableToken.header.map((header, index) => {
+        let maxWidth = stringWidth2(getDisplayText2(header.tokens));
+        for (const row of tableToken.rows) {
+          const cellLength = stringWidth2(getDisplayText2(row[index]?.tokens));
+          maxWidth = Math.max(maxWidth, cellLength);
+        }
+        return Math.max(maxWidth, 3);
+      });
+      let tableOutput = "| ";
+      tableToken.header.forEach((header, index) => {
+        const content = header.tokens?.map((_) => formatToken(_, theme, 0, null, null, highlight)).join("") ?? "";
+        const displayText = getDisplayText2(header.tokens);
+        const width = columnWidths[index];
+        const align = tableToken.align?.[index];
+        tableOutput += padAligned(content, stringWidth2(displayText), width, align) + " | ";
+      });
+      tableOutput = tableOutput.trimEnd() + EOL;
+      tableOutput += "|";
+      columnWidths.forEach((width) => {
+        const separator = "-".repeat(width + 2);
+        tableOutput += separator + "|";
+      });
+      tableOutput += EOL;
+      tableToken.rows.forEach((row) => {
+        tableOutput += "| ";
+        row.forEach((cell, index) => {
+          const content = cell.tokens?.map((_) => formatToken(_, theme, 0, null, null, highlight)).join("") ?? "";
+          const displayText = getDisplayText2(cell.tokens);
+          const width = columnWidths[index];
+          const align = tableToken.align?.[index];
+          tableOutput += padAligned(content, stringWidth2(displayText), width, align) + " | ";
+        });
+        tableOutput = tableOutput.trimEnd() + EOL;
+      });
+      return tableOutput + EOL;
+    }
+    case "escape":
+      return token.text;
+    case "def":
+    case "del":
+    case "html":
+      return "";
+  }
+  return "";
+}
+var ISSUE_REF_PATTERN = /(^|[^\w./-])([A-Za-z0-9][\w-]*\/[A-Za-z0-9][\w.-]*)#(\d+)\b/g;
+function linkifyIssueReferences(text) {
+  if (!supportsHyperlinks()) {
+    return text;
+  }
+  return text.replace(
+    ISSUE_REF_PATTERN,
+    (_match, prefix, repo, num) => prefix + createHyperlink(
+      `https://github.com/${repo}/issues/${num}`,
+      `${repo}#${num}`
+    )
+  );
+}
+function numberToLetter(n) {
+  let result = "";
+  while (n > 0) {
+    n--;
+    result = String.fromCharCode(97 + n % 26) + result;
+    n = Math.floor(n / 26);
+  }
+  return result;
+}
+var ROMAN_VALUES = [
+  [1e3, "m"],
+  [900, "cm"],
+  [500, "d"],
+  [400, "cd"],
+  [100, "c"],
+  [90, "xc"],
+  [50, "l"],
+  [40, "xl"],
+  [10, "x"],
+  [9, "ix"],
+  [5, "v"],
+  [4, "iv"],
+  [1, "i"]
+];
+function numberToRoman(n) {
+  let result = "";
+  for (const [value, numeral] of ROMAN_VALUES) {
+    while (n >= value) {
+      result += numeral;
+      n -= value;
+    }
+  }
+  return result;
+}
+function getListNumber(listDepth, orderedListNumber) {
+  switch (listDepth) {
+    case 0:
+    case 1:
+      return orderedListNumber.toString();
+    case 2:
+      return numberToLetter(orderedListNumber);
+    case 3:
+      return numberToRoman(orderedListNumber);
+    default:
+      return orderedListNumber.toString();
+  }
+}
+function padAligned(content, displayWidth, targetWidth, align) {
+  const padding = Math.max(0, targetWidth - displayWidth);
+  if (align === "center") {
+    const leftPad = Math.floor(padding / 2);
+    return " ".repeat(leftPad) + content + " ".repeat(padding - leftPad);
+  }
+  if (align === "right") {
+    return " ".repeat(padding) + content;
+  }
+  return content + " ".repeat(padding);
+}
+
+// src/MarkdownTable.tsx
+import { useContext as useContext5 } from "react";
+import stripAnsi2 from "strip-ansi";
+import { TerminalSizeContext as TerminalSizeContext3 } from "@claude-code-kit/ink-renderer";
+import { stringWidth as stringWidth3 } from "@claude-code-kit/ink-renderer";
+import { wrapAnsi } from "@claude-code-kit/ink-renderer";
+import { Ansi as Ansi3 } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var SAFETY_MARGIN = 4;
+var MIN_COLUMN_WIDTH = 3;
+var MAX_ROW_LINES = 4;
+var ANSI_BOLD_START = "\x1B[1m";
+var ANSI_BOLD_END = "\x1B[22m";
+function wrapText(text, width, options) {
+  if (width <= 0) return [text];
+  const trimmedText = text.trimEnd();
+  const wrapped = wrapAnsi(trimmedText, width, {
+    hard: options?.hard ?? false,
+    trim: false,
+    wordWrap: true
+  });
+  const lines = wrapped.split("\n").filter((line) => line.length > 0);
+  return lines.length > 0 ? lines : [""];
+}
+function MarkdownTable({
+  token,
+  highlight,
+  forceWidth
+}) {
+  const [theme] = useTheme();
+  const terminalSize = useContext5(TerminalSizeContext3);
+  const actualTerminalWidth = terminalSize?.columns ?? 80;
+  const terminalWidth = forceWidth ?? actualTerminalWidth;
+  function formatCell(tokens) {
+    return tokens?.map((_) => formatToken(_, theme, 0, null, null, highlight)).join("") ?? "";
+  }
+  function getPlainText(tokens_0) {
+    return stripAnsi2(formatCell(tokens_0));
+  }
+  function getMinWidth(tokens_1) {
+    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) => stringWidth3(w_0)), MIN_COLUMN_WIDTH);
+  }
+  function getIdealWidth(tokens_2) {
+    return Math.max(stringWidth3(getPlainText(tokens_2)), MIN_COLUMN_WIDTH);
+  }
+  const minWidths = token.header.map((header, colIndex) => {
+    let maxMinWidth = getMinWidth(header.tokens);
+    for (const row of token.rows) {
+      maxMinWidth = Math.max(maxMinWidth, getMinWidth(row[colIndex]?.tokens));
+    }
+    return maxMinWidth;
+  });
+  const idealWidths = token.header.map((header_0, colIndex_0) => {
+    let maxIdeal = getIdealWidth(header_0.tokens);
+    for (const row_0 of token.rows) {
+      maxIdeal = Math.max(maxIdeal, getIdealWidth(row_0[colIndex_0]?.tokens));
+    }
+    return maxIdeal;
+  });
+  const numCols = token.header.length;
+  const borderOverhead = 1 + numCols * 3;
+  const availableWidth = Math.max(terminalWidth - borderOverhead - SAFETY_MARGIN, numCols * MIN_COLUMN_WIDTH);
+  const totalMin = minWidths.reduce((sum, w_1) => sum + w_1, 0);
+  const totalIdeal = idealWidths.reduce((sum_0, w_2) => sum_0 + w_2, 0);
+  let needsHardWrap = false;
+  let columnWidths;
+  if (totalIdeal <= availableWidth) {
+    columnWidths = idealWidths;
+  } else if (totalMin <= availableWidth) {
+    const extraSpace = availableWidth - totalMin;
+    const overflows = idealWidths.map((ideal, i) => ideal - minWidths[i]);
+    const totalOverflow = overflows.reduce((sum_1, o) => sum_1 + o, 0);
+    columnWidths = minWidths.map((min, i_0) => {
+      if (totalOverflow === 0) return min;
+      const extra = Math.floor(overflows[i_0] / totalOverflow * extraSpace);
+      return min + extra;
+    });
+  } else {
+    needsHardWrap = true;
+    const scaleFactor = availableWidth / totalMin;
+    columnWidths = minWidths.map((w_3) => Math.max(Math.floor(w_3 * scaleFactor), MIN_COLUMN_WIDTH));
+  }
+  function calculateMaxRowLines() {
+    let maxLines = 1;
+    for (let i_1 = 0; i_1 < token.header.length; i_1++) {
+      const content = formatCell(token.header[i_1].tokens);
+      const wrapped = wrapText(content, columnWidths[i_1], {
+        hard: needsHardWrap
+      });
+      maxLines = Math.max(maxLines, wrapped.length);
+    }
+    for (const row_1 of token.rows) {
+      for (let i_2 = 0; i_2 < row_1.length; i_2++) {
+        const content_0 = formatCell(row_1[i_2]?.tokens);
+        const wrapped_0 = wrapText(content_0, columnWidths[i_2], {
+          hard: needsHardWrap
+        });
+        maxLines = Math.max(maxLines, wrapped_0.length);
+      }
+    }
+    return maxLines;
+  }
+  const maxRowLines = calculateMaxRowLines();
+  const useVerticalFormat = maxRowLines > MAX_ROW_LINES;
+  function renderRowLines(cells, isHeader) {
+    const cellLines = cells.map((cell, colIndex_1) => {
+      const formattedText = formatCell(cell.tokens);
+      const width = columnWidths[colIndex_1];
+      return wrapText(formattedText, width, {
+        hard: needsHardWrap
+      });
+    });
+    const maxLines_0 = Math.max(...cellLines.map((lines) => lines.length), 1);
+    const verticalOffsets = cellLines.map((lines_0) => Math.floor((maxLines_0 - lines_0.length) / 2));
+    const result = [];
+    for (let lineIdx = 0; lineIdx < maxLines_0; lineIdx++) {
+      let line = "\u2502";
+      for (let colIndex_2 = 0; colIndex_2 < cells.length; colIndex_2++) {
+        const lines_1 = cellLines[colIndex_2];
+        const offset = verticalOffsets[colIndex_2];
+        const contentLineIdx = lineIdx - offset;
+        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, stringWidth3(lineText), width_0, align) + " \u2502";
+      }
+      result.push(line);
+    }
+    return result;
+  }
+  function renderBorderLine(type) {
+    const [left, mid, cross, right] = {
+      top: ["\u250C", "\u2500", "\u252C", "\u2510"],
+      middle: ["\u251C", "\u2500", "\u253C", "\u2524"],
+      bottom: ["\u2514", "\u2500", "\u2534", "\u2518"]
+    }[type];
+    let line_0 = left;
+    columnWidths.forEach((width_1, colIndex_3) => {
+      line_0 += mid.repeat(width_1 + 2);
+      line_0 += colIndex_3 < columnWidths.length - 1 ? cross : right;
+    });
+    return line_0;
+  }
+  function renderVerticalFormat() {
+    const lines_2 = [];
+    const headers = token.header.map((h) => getPlainText(h.tokens));
+    const separatorWidth = Math.min(terminalWidth - 1, 40);
+    const separator = "\u2500".repeat(separatorWidth);
+    const wrapIndent = "  ";
+    token.rows.forEach((row_2, rowIndex) => {
+      if (rowIndex > 0) {
+        lines_2.push(separator);
+      }
+      row_2.forEach((cell_0, colIndex_4) => {
+        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 - stringWidth3(label) - 3;
+        const subsequentLineWidth = terminalWidth - wrapIndent.length - 1;
+        const firstPassLines = wrapText(value, Math.max(firstLineWidth, 10));
+        const firstLine = firstPassLines[0] || "";
+        let wrappedValue;
+        if (firstPassLines.length <= 1 || subsequentLineWidth <= firstLineWidth) {
+          wrappedValue = firstPassLines;
+        } else {
+          const remainingText = firstPassLines.slice(1).map((l) => l.trim()).join(" ");
+          const rewrapped = wrapText(remainingText, subsequentLineWidth);
+          wrappedValue = [firstLine, ...rewrapped];
+        }
+        lines_2.push(`${ANSI_BOLD_START}${label}:${ANSI_BOLD_END} ${wrappedValue[0] || ""}`);
+        for (let i_3 = 1; i_3 < wrappedValue.length; i_3++) {
+          const line_1 = wrappedValue[i_3];
+          if (!line_1.trim()) continue;
+          lines_2.push(`${wrapIndent}${line_1}`);
+        }
+      });
+    });
+    return lines_2.join("\n");
+  }
+  if (useVerticalFormat) {
+    return /* @__PURE__ */ jsx9(Ansi3, { children: renderVerticalFormat() });
+  }
+  const tableLines = [];
+  tableLines.push(renderBorderLine("top"));
+  tableLines.push(...renderRowLines(token.header, true));
+  tableLines.push(renderBorderLine("middle"));
+  token.rows.forEach((row_3, rowIndex_0) => {
+    tableLines.push(...renderRowLines(row_3, false));
+    if (rowIndex_0 < token.rows.length - 1) {
+      tableLines.push(renderBorderLine("middle"));
+    }
+  });
+  tableLines.push(renderBorderLine("bottom"));
+  const maxLineWidth = Math.max(...tableLines.map((line_2) => stringWidth3(stripAnsi2(line_2))));
+  if (maxLineWidth > terminalWidth - SAFETY_MARGIN) {
+    return /* @__PURE__ */ jsx9(Ansi3, { children: renderVerticalFormat() });
+  }
+  return /* @__PURE__ */ jsx9(Ansi3, { children: tableLines.join("\n") });
+}
+
+// src/Markdown.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var TOKEN_CACHE_MAX = 500;
+var tokenCache = /* @__PURE__ */ new Map();
+var MD_SYNTAX_RE = /[#*`|[>\-_~]|\n\n|^\d+\. |\n\d+\. /;
+function hasMarkdownSyntax(s) {
+  return MD_SYNTAX_RE.test(s.length > 500 ? s.slice(0, 500) : s);
+}
+function stripPromptXMLTags(content) {
+  return content.replace(/<(commit_analysis|context|function_analysis|pr_analysis)>.*?<\/\1>\n?/gs, "").trim();
+}
+function cachedLexer(content) {
+  if (!hasMarkdownSyntax(content)) {
+    return [
+      {
+        type: "paragraph",
+        raw: content,
+        text: content,
+        tokens: [{ type: "text", raw: content, text: content }]
+      }
+    ];
+  }
+  const key = hashContent(content);
+  const hit = tokenCache.get(key);
+  if (hit) {
+    tokenCache.delete(key);
+    tokenCache.set(key, hit);
+    return hit;
+  }
+  const tokens = marked2.lexer(content);
+  if (tokenCache.size >= TOKEN_CACHE_MAX) {
+    const first = tokenCache.keys().next().value;
+    if (first !== void 0) tokenCache.delete(first);
+  }
+  tokenCache.set(key, tokens);
+  return tokens;
+}
+function Markdown(props) {
+  const settings = {};
+  if (settings.syntaxHighlightingDisabled) {
+    return /* @__PURE__ */ jsx10(MarkdownBody, { ...props, highlight: null });
+  }
+  return /* @__PURE__ */ jsx10(Suspense, { fallback: /* @__PURE__ */ jsx10(MarkdownBody, { ...props, highlight: null }), children: /* @__PURE__ */ jsx10(MarkdownWithHighlight, { ...props }) });
+}
+function MarkdownWithHighlight(props) {
+  const highlight = use(getCliHighlightPromise());
+  return /* @__PURE__ */ jsx10(MarkdownBody, { ...props, highlight });
+}
+function MarkdownBody({
+  children,
+  dimColor,
+  highlight
+}) {
+  const [theme] = useTheme();
+  configureMarked();
+  const elements = useMemo3(() => {
+    const tokens = cachedLexer(stripPromptXMLTags(children));
+    const elements2 = [];
+    let nonTableContent = "";
+    function flushNonTableContent() {
+      if (nonTableContent) {
+        elements2.push(
+          /* @__PURE__ */ jsx10(Ansi4, { dimColor, children: nonTableContent.trim() }, elements2.length)
+        );
+        nonTableContent = "";
+      }
+    }
+    for (const token of tokens) {
+      if (token.type === "table") {
+        flushNonTableContent();
+        elements2.push(
+          /* @__PURE__ */ jsx10(
+            MarkdownTable,
+            {
+              token,
+              highlight
+            },
+            elements2.length
+          )
+        );
+      } else {
+        nonTableContent += formatToken(token, theme, 0, null, null, highlight);
+      }
+    }
+    flushNonTableContent();
+    return elements2;
+  }, [children, dimColor, highlight, theme]);
+  return /* @__PURE__ */ jsx10(Box4, { flexDirection: "column", gap: 1, children: elements });
+}
+function StreamingMarkdown({
+  children
+}) {
+  "use no memo";
+  configureMarked();
+  const stripped = stripPromptXMLTags(children);
+  const stablePrefixRef = useRef4("");
+  if (!stripped.startsWith(stablePrefixRef.current)) {
+    stablePrefixRef.current = "";
+  }
+  const boundary = stablePrefixRef.current.length;
+  const tokens = marked2.lexer(stripped.substring(boundary));
+  let lastContentIdx = tokens.length - 1;
+  while (lastContentIdx >= 0 && tokens[lastContentIdx].type === "space") {
+    lastContentIdx--;
+  }
+  let advance = 0;
+  for (let i = 0; i < lastContentIdx; i++) {
+    advance += tokens[i].raw.length;
+  }
+  if (advance > 0) {
+    stablePrefixRef.current = stripped.substring(0, boundary + advance);
+  }
+  const stablePrefix = stablePrefixRef.current;
+  const unstableSuffix = stripped.substring(stablePrefix.length);
+  return /* @__PURE__ */ jsxs6(Box4, { flexDirection: "column", gap: 1, children: [
+    stablePrefix && /* @__PURE__ */ jsx10(Markdown, { children: stablePrefix }),
+    unstableSuffix && /* @__PURE__ */ jsx10(Markdown, { children: unstableSuffix })
+  ] });
+}
+
 // src/Select.tsx
-import { useState as useState5, useRef as useRef3, useMemo as useMemo2, useCallback as useCallback4 } from "react";
-import { Box as Box4, Text as Text7, useInput as useInput4 } from "@claude-code-kit/ink-renderer";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState6, useRef as useRef5, useMemo as useMemo4, useCallback as useCallback5 } from "react";
+import { Box as Box5, Text as Text7, useInput as useInput4 } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function useListNavigation(opts) {
   const { options, maxVisible, onCancel, onSelect, extraHandler } = opts;
-  const [focusIndex, setFocusIndex] = useState5(0);
-  const focusRef = useRef3(focusIndex);
+  const [focusIndex, setFocusIndex] = useState6(0);
+  const focusRef = useRef5(focusIndex);
   focusRef.current = focusIndex;
   const total = options.length;
   const max = maxVisible ?? total;
-  const scrollOffset = useMemo2(() => {
+  const scrollOffset = useMemo4(() => {
     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 = useMemo2(
+  const visibleOptions = useMemo4(
     () => options.slice(scrollOffset, scrollOffset + max),
     [options, scrollOffset, max]
   );
-  const moveFocus = useCallback4(
+  const moveFocus = useCallback5(
     (dir) => {
       setFocusIndex((prev) => {
         let next = prev;
@@ -2011,7 +2805,7 @@ function useListNavigation(opts) {
   return { focusIndex, scrollOffset, visibleOptions, max, total };
 }
 function ScrollHint({ count, direction }) {
-  return /* @__PURE__ */ jsxs6(Text7, { dimColor: true, children: [
+  return /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
     "  ",
     direction === "up" ? "\u2191" : "\u2193",
     " ",
@@ -2027,25 +2821,25 @@ function Select({
   title,
   maxVisible
 }) {
-  const handleSelect = useCallback4(
+  const handleSelect = useCallback5(
     (index) => onChange(options[index].value),
     [onChange, options]
   );
   const { focusIndex, scrollOffset, visibleOptions, max, total } = useListNavigation({ options, maxVisible, onCancel, onSelect: handleSelect });
-  return /* @__PURE__ */ jsxs6(Box4, { flexDirection: "column", children: [
-    title && /* @__PURE__ */ jsx8(Box4, { marginBottom: 1, children: /* @__PURE__ */ jsx8(Text7, { bold: true, children: title }) }),
-    scrollOffset > 0 && /* @__PURE__ */ jsx8(ScrollHint, { count: scrollOffset, direction: "up" }),
+  return /* @__PURE__ */ jsxs7(Box5, { flexDirection: "column", children: [
+    title && /* @__PURE__ */ jsx11(Box5, { marginBottom: 1, children: /* @__PURE__ */ jsx11(Text7, { bold: true, children: title }) }),
+    scrollOffset > 0 && /* @__PURE__ */ jsx11(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__ */ jsxs6(Box4, { children: [
-        /* @__PURE__ */ jsxs6(Text7, { color: isFocused ? "cyan" : void 0, children: [
+      return /* @__PURE__ */ jsxs7(Box5, { children: [
+        /* @__PURE__ */ jsxs7(Text7, { color: isFocused ? "cyan" : void 0, children: [
           isFocused ? "\u276F" : " ",
           " "
         ] }),
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           Text7,
           {
             color: isDisabled ? "gray" : isFocused ? "cyan" : void 0,
@@ -2058,15 +2852,15 @@ function Select({
             ]
           }
         ),
-        isSelected && /* @__PURE__ */ jsx8(Text7, { color: "green", children: " \u2713" }),
-        opt.description && /* @__PURE__ */ jsxs6(Text7, { dimColor: true, children: [
+        isSelected && /* @__PURE__ */ jsx11(Text7, { color: "green", children: " \u2713" }),
+        opt.description && /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
           "   ",
           opt.description
         ] })
       ] }, realIndex);
     }),
-    scrollOffset + max < total && /* @__PURE__ */ jsx8(ScrollHint, { count: total - scrollOffset - max, direction: "down" }),
-    /* @__PURE__ */ jsx8(Box4, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "Enter to confirm \xB7 Esc to exit" }) })
+    scrollOffset + max < total && /* @__PURE__ */ jsx11(ScrollHint, { count: total - scrollOffset - max, direction: "down" }),
+    /* @__PURE__ */ jsx11(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx11(Text7, { dimColor: true, children: "Enter to confirm \xB7 Esc to exit" }) })
   ] });
 }
 function MultiSelect({
@@ -2078,12 +2872,12 @@ function MultiSelect({
   title,
   maxVisible
 }) {
-  const [selected, setSelected] = useState5(() => new Set(selectedValues));
-  const handleConfirm = useCallback4(
+  const [selected, setSelected] = useState6(() => new Set(selectedValues));
+  const handleConfirm = useCallback5(
     () => onConfirm(Array.from(selected)),
     [onConfirm, selected]
   );
-  const handleSpace = useCallback4(
+  const handleSpace = useCallback5(
     (input, _key, focusIndex2) => {
       if (input !== " ") return false;
       const opt = options[focusIndex2];
@@ -2106,20 +2900,20 @@ function MultiSelect({
     onSelect: handleConfirm,
     extraHandler: handleSpace
   });
-  return /* @__PURE__ */ jsxs6(Box4, { flexDirection: "column", children: [
-    title && /* @__PURE__ */ jsx8(Box4, { marginBottom: 1, children: /* @__PURE__ */ jsx8(Text7, { bold: true, children: title }) }),
-    scrollOffset > 0 && /* @__PURE__ */ jsx8(ScrollHint, { count: scrollOffset, direction: "up" }),
+  return /* @__PURE__ */ jsxs7(Box5, { flexDirection: "column", children: [
+    title && /* @__PURE__ */ jsx11(Box5, { marginBottom: 1, children: /* @__PURE__ */ jsx11(Text7, { bold: true, children: title }) }),
+    scrollOffset > 0 && /* @__PURE__ */ jsx11(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__ */ jsxs6(Box4, { children: [
-        /* @__PURE__ */ jsxs6(Text7, { color: isFocused ? "cyan" : void 0, children: [
+      return /* @__PURE__ */ jsxs7(Box5, { children: [
+        /* @__PURE__ */ jsxs7(Text7, { color: isFocused ? "cyan" : void 0, children: [
           isFocused ? "\u276F" : " ",
           " "
         ] }),
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           Text7,
           {
             color: isDisabled ? "gray" : isFocused ? "cyan" : void 0,
@@ -2134,20 +2928,20 @@ function MultiSelect({
             ]
           }
         ),
-        opt.description && /* @__PURE__ */ jsxs6(Text7, { dimColor: true, children: [
+        opt.description && /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
           "   ",
           opt.description
         ] })
       ] }, realIndex);
     }),
-    scrollOffset + max < total && /* @__PURE__ */ jsx8(ScrollHint, { count: total - scrollOffset - max, direction: "down" }),
-    /* @__PURE__ */ jsx8(Box4, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "Space to toggle \xB7 Enter to confirm \xB7 Esc to exit" }) })
+    scrollOffset + max < total && /* @__PURE__ */ jsx11(ScrollHint, { count: total - scrollOffset - max, direction: "down" }),
+    /* @__PURE__ */ jsx11(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx11(Text7, { dimColor: true, children: "Space to toggle \xB7 Enter to confirm \xB7 Esc to exit" }) })
   ] });
 }
 
 // src/MessageList.tsx
-import { Box as Box5, Text as Text8 } from "@claude-code-kit/ink-renderer";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Box as Box6, Text as Text8 } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var ROLE_CONFIG = {
   user: { icon: "\u276F", label: "You", color: "cyan" },
   assistant: { icon: "\u25CF", label: "Claude", color: "#DA7756" },
@@ -2162,15 +2956,15 @@ function MessageItem({
   }
   const config = ROLE_CONFIG[message.role];
   const isSystem = message.role === "system";
-  return /* @__PURE__ */ jsxs7(Box5, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs7(Box5, { children: [
-      /* @__PURE__ */ jsx9(Text8, { color: config.color, dimColor: isSystem, children: config.icon }),
-      /* @__PURE__ */ jsxs7(Text8, { color: config.color, dimColor: isSystem, bold: !isSystem, children: [
+  return /* @__PURE__ */ jsxs8(Box6, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs8(Box6, { children: [
+      /* @__PURE__ */ jsx12(Text8, { color: config.color, dimColor: isSystem, children: config.icon }),
+      /* @__PURE__ */ jsxs8(Text8, { color: config.color, dimColor: isSystem, bold: !isSystem, children: [
         " ",
         config.label
       ] })
     ] }),
-    message.content.split("\n").map((line, i) => /* @__PURE__ */ jsx9(Box5, { marginLeft: 2, children: /* @__PURE__ */ jsx9(Text8, { dimColor: isSystem, children: line }) }, i))
+    message.content.split("\n").map((line, i) => /* @__PURE__ */ jsx12(Box6, { marginLeft: 2, children: /* @__PURE__ */ jsx12(Text8, { dimColor: isSystem, children: line }) }, i))
   ] });
 }
 function MessageList({
@@ -2178,39 +2972,39 @@ function MessageList({
   streamingContent,
   renderMessage
 }) {
-  return /* @__PURE__ */ jsxs7(Box5, { flexDirection: "column", children: [
-    messages.map((message, i) => /* @__PURE__ */ jsx9(Box5, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: /* @__PURE__ */ jsx9(MessageItem, { message, renderMessage }) }, message.id)),
-    streamingContent != null && streamingContent.length > 0 && /* @__PURE__ */ jsxs7(Box5, { flexDirection: "column", marginTop: messages.length > 0 ? 1 : 0, children: [
-      /* @__PURE__ */ jsxs7(Box5, { children: [
-        /* @__PURE__ */ jsx9(Text8, { color: "#DA7756", children: "\u25CF" }),
-        /* @__PURE__ */ jsxs7(Text8, { color: "#DA7756", bold: true, children: [
+  return /* @__PURE__ */ jsxs8(Box6, { flexDirection: "column", children: [
+    messages.map((message, i) => /* @__PURE__ */ jsx12(Box6, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: /* @__PURE__ */ jsx12(MessageItem, { message, renderMessage }) }, message.id)),
+    streamingContent != null && streamingContent.length > 0 && /* @__PURE__ */ jsxs8(Box6, { flexDirection: "column", marginTop: messages.length > 0 ? 1 : 0, children: [
+      /* @__PURE__ */ jsxs8(Box6, { children: [
+        /* @__PURE__ */ jsx12(Text8, { color: "#DA7756", children: "\u25CF" }),
+        /* @__PURE__ */ jsxs8(Text8, { color: "#DA7756", bold: true, children: [
           " ",
           "Claude"
         ] })
       ] }),
-      streamingContent.split("\n").map((line, i) => /* @__PURE__ */ jsx9(Box5, { marginLeft: 2, children: /* @__PURE__ */ jsxs7(Text8, { children: [
+      streamingContent.split("\n").map((line, i) => /* @__PURE__ */ jsx12(Box6, { marginLeft: 2, children: /* @__PURE__ */ jsxs8(Text8, { children: [
         line,
-        i === streamingContent.split("\n").length - 1 && /* @__PURE__ */ jsx9(Text8, { color: "#DA7756", children: "\u2588" })
+        i === streamingContent.split("\n").length - 1 && /* @__PURE__ */ jsx12(Text8, { color: "#DA7756", children: "\u2588" })
       ] }) }, i))
     ] })
   ] });
 }
 
 // src/StreamingText.tsx
-import { useState as useState6, useEffect as useEffect5, useRef as useRef4 } from "react";
+import { useState as useState7, useEffect as useEffect6, useRef as useRef6 } from "react";
 import { Text as Text9 } from "@claude-code-kit/ink-renderer";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function StreamingText({
   text,
   speed = 3,
   interval = 20,
   onComplete,
-  color
+  color: color2
 }) {
-  const [revealed, setRevealed] = useState6(0);
-  const onCompleteRef = useRef4(onComplete);
+  const [revealed, setRevealed] = useState7(0);
+  const onCompleteRef = useRef6(onComplete);
   onCompleteRef.current = onComplete;
-  useEffect5(() => {
+  useEffect6(() => {
     if (revealed >= text.length) return;
     const id = setInterval(() => {
       setRevealed((prev) => {
@@ -2223,13 +3017,13 @@ function StreamingText({
     }, interval);
     return () => clearInterval(id);
   }, [text.length, speed, interval, revealed >= text.length]);
-  return /* @__PURE__ */ jsx10(Text9, { color, children: text.slice(0, revealed) });
+  return /* @__PURE__ */ jsx13(Text9, { color: color2, children: text.slice(0, revealed) });
 }
 
 // src/REPL.tsx
-import { useState as useState7, useCallback as useCallback5, useRef as useRef5 } from "react";
-import { Box as Box6, useInput as useInput5, useApp } from "@claude-code-kit/ink-renderer";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState8, useCallback as useCallback6, useRef as useRef7 } from "react";
+import { Box as Box7, useInput as useInput5, useApp } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function REPL({
   onSubmit,
   onExit,
@@ -2246,15 +3040,15 @@ function REPL({
   spinner
 }) {
   const { exit } = useApp();
-  const [inputValue, setInputValue] = useState7("");
-  const [internalHistory, setInternalHistory] = useState7([]);
-  const submittingRef = useRef5(false);
+  const [inputValue, setInputValue] = useState8("");
+  const [internalHistory, setInternalHistory] = useState8([]);
+  const submittingRef = useRef7(false);
   const history = externalHistory ?? internalHistory;
   const promptCommands = commands.map((c) => ({
     name: c.name,
     description: c.description
   }));
-  const handleSubmit = useCallback5(
+  const handleSubmit = useCallback6(
     (value) => {
       if (submittingRef.current) return;
       const trimmed = value.trim();
@@ -2302,9 +3096,9 @@ function REPL({
     { isActive: true }
   );
   const resolvedSegments = statusSegments ?? buildDefaultSegments(model);
-  return /* @__PURE__ */ jsxs8(Box6, { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsxs8(Box6, { flexDirection: "column", flexGrow: 1, children: [
-      /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs9(Box7, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs9(Box7, { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx14(
         MessageList,
         {
           messages,
@@ -2312,10 +3106,10 @@ function REPL({
           renderMessage
         }
       ),
-      isLoading && !streamingContent && /* @__PURE__ */ jsx11(Box6, { marginTop: messages.length > 0 ? 1 : 0, children: spinner ?? /* @__PURE__ */ jsx11(Spinner, {}) })
+      isLoading && !streamingContent && /* @__PURE__ */ jsx14(Box7, { marginTop: messages.length > 0 ? 1 : 0, children: spinner ?? /* @__PURE__ */ jsx14(Spinner, {}) })
     ] }),
-    /* @__PURE__ */ jsx11(Divider, {}),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx14(Divider, {}),
+    /* @__PURE__ */ jsx14(
       PromptInput,
       {
         value: inputValue,
@@ -2328,37 +3122,722 @@ function REPL({
         history
       }
     ),
-    /* @__PURE__ */ jsx11(Divider, {}),
-    resolvedSegments.length > 0 && /* @__PURE__ */ jsx11(StatusLine, { segments: resolvedSegments })
+    /* @__PURE__ */ jsx14(Divider, {}),
+    resolvedSegments.length > 0 && /* @__PURE__ */ jsx14(StatusLine, { segments: resolvedSegments })
   ] });
 }
 function buildDefaultSegments(model) {
   if (!model) return [];
   return [{ content: model, color: "green" }];
 }
+
+// src/design-system/ThemedBox.tsx
+import { Box as Box8 } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function resolveColor(color2, theme) {
+  if (!color2) return void 0;
+  if (color2.startsWith("rgb(") || color2.startsWith("#") || color2.startsWith("ansi256(") || color2.startsWith("ansi:")) {
+    return color2;
+  }
+  return theme[color2];
+}
+function ThemedBox({
+  borderColor,
+  borderTopColor,
+  borderBottomColor,
+  borderLeftColor,
+  borderRightColor,
+  backgroundColor,
+  children,
+  ref,
+  ...rest
+}) {
+  const [themeName] = useTheme();
+  const theme = getTheme(themeName);
+  const resolvedBorderColor = resolveColor(borderColor, theme);
+  const resolvedBorderTopColor = resolveColor(borderTopColor, theme);
+  const resolvedBorderBottomColor = resolveColor(borderBottomColor, theme);
+  const resolvedBorderLeftColor = resolveColor(borderLeftColor, theme);
+  const resolvedBorderRightColor = resolveColor(borderRightColor, theme);
+  const resolvedBackgroundColor = resolveColor(backgroundColor, theme);
+  return /* @__PURE__ */ jsx15(
+    Box8,
+    {
+      ref,
+      borderColor: resolvedBorderColor,
+      borderTopColor: resolvedBorderTopColor,
+      borderBottomColor: resolvedBorderBottomColor,
+      borderLeftColor: resolvedBorderLeftColor,
+      borderRightColor: resolvedBorderRightColor,
+      backgroundColor: resolvedBackgroundColor,
+      ...rest,
+      children
+    }
+  );
+}
+var ThemedBox_default = ThemedBox;
+
+// src/design-system/ThemedText.tsx
+import React13, { useContext as useContext6 } from "react";
+import { Text as Text11 } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var TextHoverColorContext = React13.createContext(void 0);
+function resolveColor2(color2, theme) {
+  if (!color2) return void 0;
+  if (color2.startsWith("rgb(") || color2.startsWith("#") || color2.startsWith("ansi256(") || color2.startsWith("ansi:")) {
+    return color2;
+  }
+  return theme[color2];
+}
+function ThemedText({
+  color: color2,
+  backgroundColor,
+  dimColor = false,
+  bold = false,
+  italic = false,
+  underline = false,
+  strikethrough = false,
+  inverse = false,
+  wrap = "wrap",
+  children
+}) {
+  const [themeName] = useTheme();
+  const theme = getTheme(themeName);
+  const hoverColor = useContext6(TextHoverColorContext);
+  const resolvedColor = !color2 && hoverColor ? resolveColor2(hoverColor, theme) : dimColor ? theme.inactive : resolveColor2(color2, theme);
+  const resolvedBackgroundColor = backgroundColor ? theme[backgroundColor] : void 0;
+  return /* @__PURE__ */ jsx16(
+    Text11,
+    {
+      color: resolvedColor,
+      backgroundColor: resolvedBackgroundColor,
+      bold,
+      italic,
+      underline,
+      strikethrough,
+      inverse,
+      wrap,
+      children
+    }
+  );
+}
+
+// src/design-system/Dialog.tsx
+import { useCallback as useCallback7 } from "react";
+import { Box as Box10, Text as Text14, useInput as useInput6 } from "@claude-code-kit/ink-renderer";
+
+// src/design-system/Byline.tsx
+import React14, { Children, isValidElement } from "react";
+import { Text as Text12 } from "@claude-code-kit/ink-renderer";
+import { Fragment, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function Byline({ children }) {
+  const validChildren = Children.toArray(children);
+  if (validChildren.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx17(Fragment, { children: validChildren.map((child, index) => /* @__PURE__ */ jsxs10(
+    React14.Fragment,
+    {
+      children: [
+        index > 0 && /* @__PURE__ */ jsx17(Text12, { dimColor: true, children: " \xB7 " }),
+        child
+      ]
+    },
+    isValidElement(child) ? child.key ?? index : index
+  )) });
+}
+
+// src/design-system/KeyboardShortcutHint.tsx
+import { Text as Text13 } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function KeyboardShortcutHint({
+  shortcut,
+  action,
+  parens = false,
+  bold = false
+}) {
+  const shortcutText = bold ? /* @__PURE__ */ jsx18(Text13, { bold: true, children: shortcut }) : shortcut;
+  if (parens) {
+    return /* @__PURE__ */ jsxs11(Text13, { children: [
+      "(",
+      shortcutText,
+      " to ",
+      action,
+      ")"
+    ] });
+  }
+  return /* @__PURE__ */ jsxs11(Text13, { children: [
+    shortcutText,
+    " to ",
+    action
+  ] });
+}
+
+// src/design-system/Pane.tsx
+import { Box as Box9 } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function Pane({ children, color: color2 }) {
+  return /* @__PURE__ */ jsxs12(Box9, { flexDirection: "column", paddingTop: 1, children: [
+    /* @__PURE__ */ jsx19(Divider, { color: color2 }),
+    /* @__PURE__ */ jsx19(Box9, { flexDirection: "column", paddingX: 2, children })
+  ] });
+}
+
+// src/design-system/Dialog.tsx
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function Dialog({
+  title,
+  subtitle,
+  children,
+  onCancel,
+  color: color2 = "permission",
+  hideInputGuide,
+  hideBorder
+}) {
+  useInput6(
+    useCallback7(
+      (_input, key) => {
+        if (key.escape) {
+          onCancel();
+        }
+      },
+      [onCancel]
+    )
+  );
+  const defaultInputGuide = /* @__PURE__ */ jsxs13(Byline, { children: [
+    /* @__PURE__ */ jsx20(KeyboardShortcutHint, { shortcut: "Enter", action: "confirm" }),
+    /* @__PURE__ */ jsx20(KeyboardShortcutHint, { shortcut: "Esc", action: "cancel" })
+  ] });
+  const content = /* @__PURE__ */ jsxs13(Fragment2, { children: [
+    /* @__PURE__ */ jsxs13(Box10, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsxs13(Box10, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsx20(Text14, { bold: true, color: color2, children: title }),
+        subtitle && /* @__PURE__ */ jsx20(Text14, { dimColor: true, children: subtitle })
+      ] }),
+      children
+    ] }),
+    !hideInputGuide && /* @__PURE__ */ jsx20(Box10, { marginTop: 1, children: /* @__PURE__ */ jsx20(Text14, { dimColor: true, italic: true, children: defaultInputGuide }) })
+  ] });
+  if (hideBorder) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx20(Pane, { color: color2, children: content });
+}
+
+// src/design-system/FuzzyPicker.tsx
+import { useCallback as useCallback8, useContext as useContext7, useEffect as useEffect7, useState as useState9 } from "react";
+import {
+  clamp,
+  Box as Box12,
+  Text as Text16,
+  useInput as useInput7,
+  TerminalSizeContext as TerminalSizeContext4
+} from "@claude-code-kit/ink-renderer";
+
+// src/design-system/ListItem.tsx
+import figures2 from "figures";
+import { useDeclaredCursor } from "@claude-code-kit/ink-renderer";
+import { Box as Box11, Text as Text15 } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+function ListItem({
+  isFocused,
+  isSelected = false,
+  children,
+  description,
+  showScrollDown,
+  showScrollUp,
+  styled = true,
+  disabled = false,
+  declareCursor
+}) {
+  function renderIndicator() {
+    if (disabled) {
+      return /* @__PURE__ */ jsx21(Text15, { children: " " });
+    }
+    if (isFocused) {
+      return /* @__PURE__ */ jsx21(Text15, { color: "suggestion", children: figures2.pointer });
+    }
+    if (showScrollDown) {
+      return /* @__PURE__ */ jsx21(Text15, { dimColor: true, children: figures2.arrowDown });
+    }
+    if (showScrollUp) {
+      return /* @__PURE__ */ jsx21(Text15, { dimColor: true, children: figures2.arrowUp });
+    }
+    return /* @__PURE__ */ jsx21(Text15, { children: " " });
+  }
+  function getTextColor() {
+    if (disabled) {
+      return "inactive";
+    }
+    if (!styled) {
+      return void 0;
+    }
+    if (isSelected) {
+      return "success";
+    }
+    if (isFocused) {
+      return "suggestion";
+    }
+    return void 0;
+  }
+  const textColor = getTextColor();
+  const cursorRef = useDeclaredCursor({
+    line: 0,
+    column: 0,
+    active: isFocused && !disabled && declareCursor !== false
+  });
+  return /* @__PURE__ */ jsxs14(Box11, { ref: cursorRef, flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs14(Box11, { flexDirection: "row", gap: 1, children: [
+      renderIndicator(),
+      styled ? /* @__PURE__ */ jsx21(Text15, { color: textColor, dimColor: disabled, children }) : children,
+      isSelected && !disabled && /* @__PURE__ */ jsx21(Text15, { color: "success", children: figures2.tick })
+    ] }),
+    description && /* @__PURE__ */ jsx21(Box11, { paddingLeft: 2, children: /* @__PURE__ */ jsx21(Text15, { color: "inactive", children: description }) })
+  ] });
+}
+
+// src/design-system/FuzzyPicker.tsx
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var DEFAULT_VISIBLE = 8;
+var CHROME_ROWS = 10;
+var MIN_VISIBLE = 2;
+function FuzzyPicker({
+  title,
+  placeholder = "Type to search...",
+  initialQuery,
+  items,
+  getKey,
+  renderItem,
+  renderPreview,
+  previewPosition = "bottom",
+  visibleCount: requestedVisible = DEFAULT_VISIBLE,
+  direction = "down",
+  onQueryChange,
+  onSelect,
+  onTab,
+  onShiftTab,
+  onFocus,
+  onCancel,
+  emptyMessage = "No results",
+  matchLabel,
+  selectAction = "select",
+  extraHints
+}) {
+  const terminalSize = useContext7(TerminalSizeContext4);
+  const rows = terminalSize?.rows ?? 24;
+  const columns = terminalSize?.columns ?? 80;
+  const [focusedIndex, setFocusedIndex] = useState9(0);
+  const [query, setQuery] = useState9(initialQuery ?? "");
+  const visibleCount = Math.max(
+    MIN_VISIBLE,
+    Math.min(requestedVisible, rows - CHROME_ROWS - (matchLabel ? 1 : 0))
+  );
+  const compact = columns < 120;
+  const step = useCallback8(
+    (delta) => {
+      setFocusedIndex((i) => clamp(i + delta, 0, items.length - 1));
+    },
+    [items.length]
+  );
+  useInput7(
+    useCallback8(
+      (input, key) => {
+        if (key.escape) {
+          onCancel();
+          return;
+        }
+        if (key.upArrow || key.ctrl && input === "p") {
+          step(direction === "up" ? 1 : -1);
+          return;
+        }
+        if (key.downArrow || key.ctrl && input === "n") {
+          step(direction === "up" ? -1 : 1);
+          return;
+        }
+        if (key.return) {
+          const selected = items[focusedIndex];
+          if (selected) onSelect(selected);
+          return;
+        }
+        if (key.tab) {
+          const selected = items[focusedIndex];
+          if (!selected) return;
+          const tabAction = key.shift ? onShiftTab ?? onTab : onTab;
+          if (tabAction) {
+            tabAction.handler(selected);
+          } else {
+            onSelect(selected);
+          }
+          return;
+        }
+        if (key.backspace) {
+          setQuery((q) => q.slice(0, -1));
+          return;
+        }
+        if (input && !key.ctrl) {
+          setQuery((q) => q + input);
+        }
+      },
+      [onCancel, step, direction, items, focusedIndex, onSelect, onShiftTab, onTab]
+    )
+  );
+  useEffect7(() => {
+    onQueryChange(query);
+    setFocusedIndex(0);
+  }, [query]);
+  useEffect7(() => {
+    setFocusedIndex((i) => clamp(i, 0, items.length - 1));
+  }, [items.length]);
+  const focused = items[focusedIndex];
+  useEffect7(() => {
+    onFocus?.(focused);
+  }, [focused]);
+  const windowStart = 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__ */ jsx22(Box12, { borderStyle: "round", paddingX: 1, children: /* @__PURE__ */ jsx22(Text16, { dimColor: !query, children: query || placeholder }) });
+  const listBlock = /* @__PURE__ */ jsx22(
+    List,
+    {
+      visible,
+      windowStart,
+      visibleCount,
+      total: items.length,
+      focusedIndex,
+      direction,
+      getKey,
+      renderItem,
+      emptyText
+    }
+  );
+  const preview = renderPreview && focused ? /* @__PURE__ */ jsx22(Box12, { flexDirection: "column", flexGrow: 1, children: renderPreview(focused) }) : null;
+  const listGroup = renderPreview && previewPosition === "right" ? /* @__PURE__ */ jsxs15(
+    Box12,
+    {
+      flexDirection: "row",
+      gap: 2,
+      height: visibleCount + (matchLabel ? 1 : 0),
+      children: [
+        /* @__PURE__ */ jsxs15(Box12, { flexDirection: "column", flexShrink: 0, children: [
+          listBlock,
+          matchLabel && /* @__PURE__ */ jsx22(Text16, { dimColor: true, children: matchLabel })
+        ] }),
+        preview ?? /* @__PURE__ */ jsx22(Box12, { flexGrow: 1 })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs15(Box12, { flexDirection: "column", children: [
+    listBlock,
+    matchLabel && /* @__PURE__ */ jsx22(Text16, { dimColor: true, children: matchLabel }),
+    preview
+  ] });
+  const inputAbove = direction !== "up";
+  return /* @__PURE__ */ jsx22(Pane, { color: "permission", children: /* @__PURE__ */ jsxs15(Box12, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx22(Text16, { bold: true, color: "permission", children: title }),
+    inputAbove && searchInput,
+    listGroup,
+    !inputAbove && searchInput,
+    /* @__PURE__ */ jsx22(Text16, { dimColor: true, children: /* @__PURE__ */ jsxs15(Byline, { children: [
+      /* @__PURE__ */ jsx22(
+        KeyboardShortcutHint,
+        {
+          shortcut: "up/dn",
+          action: compact ? "nav" : "navigate"
+        }
+      ),
+      /* @__PURE__ */ jsx22(KeyboardShortcutHint, { shortcut: "Enter", action: selectAction }),
+      onTab && /* @__PURE__ */ jsx22(KeyboardShortcutHint, { shortcut: "Tab", action: onTab.action }),
+      onShiftTab && !compact && /* @__PURE__ */ jsx22(
+        KeyboardShortcutHint,
+        {
+          shortcut: "shift+tab",
+          action: onShiftTab.action
+        }
+      ),
+      /* @__PURE__ */ jsx22(KeyboardShortcutHint, { shortcut: "Esc", action: "cancel" }),
+      extraHints
+    ] }) })
+  ] }) });
+}
+function List({
+  visible,
+  windowStart,
+  visibleCount,
+  total,
+  focusedIndex,
+  direction,
+  getKey,
+  renderItem,
+  emptyText
+}) {
+  if (visible.length === 0) {
+    return /* @__PURE__ */ jsx22(Box12, { height: visibleCount, flexShrink: 0, children: /* @__PURE__ */ jsx22(Text16, { 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__ */ jsx22(
+      ListItem,
+      {
+        isFocused,
+        showScrollUp: direction === "up" ? atHighEdge : atLowEdge,
+        showScrollDown: direction === "up" ? atLowEdge : atHighEdge,
+        styled: false,
+        children: renderItem(item, isFocused)
+      },
+      getKey(item)
+    );
+  });
+  return /* @__PURE__ */ jsx22(
+    Box12,
+    {
+      height: visibleCount,
+      flexShrink: 0,
+      flexDirection: direction === "up" ? "column-reverse" : "column",
+      children: rows
+    }
+  );
+}
+
+// src/design-system/LoadingState.tsx
+import { Box as Box13, Text as Text17 } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+function LoadingState({
+  message,
+  bold = false,
+  dimColor = false,
+  subtitle
+}) {
+  return /* @__PURE__ */ jsxs16(Box13, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs16(Box13, { flexDirection: "row", children: [
+      /* @__PURE__ */ jsx23(Spinner, {}),
+      /* @__PURE__ */ jsxs16(Text17, { bold, dimColor, children: [
+        " ",
+        message
+      ] })
+    ] }),
+    subtitle && /* @__PURE__ */ jsx23(Text17, { dimColor: true, children: subtitle })
+  ] });
+}
+
+// src/design-system/Ratchet.tsx
+import { useCallback as useCallback9, useContext as useContext8, useLayoutEffect as useLayoutEffect2, useRef as useRef8, useState as useState10 } from "react";
+import { TerminalSizeContext as TerminalSizeContext5 } from "@claude-code-kit/ink-renderer";
+import { useTerminalViewport } from "@claude-code-kit/ink-renderer";
+import { Box as Box14, measureElement } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx24 } from "react/jsx-runtime";
+function Ratchet({
+  children,
+  lock = "always"
+}) {
+  const [viewportRef, { isVisible }] = useTerminalViewport();
+  const terminalSize = useContext8(TerminalSizeContext5);
+  const rows = terminalSize?.rows ?? 24;
+  const innerRef = useRef8(null);
+  const maxHeight = useRef8(0);
+  const [minHeight, setMinHeight] = useState10(0);
+  const outerRef = useCallback9(
+    (el) => {
+      viewportRef(el);
+    },
+    [viewportRef]
+  );
+  const engaged = lock === "always" || !isVisible;
+  useLayoutEffect2(() => {
+    if (!innerRef.current) {
+      return;
+    }
+    const { height } = measureElement(innerRef.current);
+    if (height > maxHeight.current) {
+      maxHeight.current = Math.min(height, rows);
+      setMinHeight(maxHeight.current);
+    }
+  });
+  return /* @__PURE__ */ jsx24(Box14, { minHeight: engaged ? minHeight : void 0, ref: outerRef, children: /* @__PURE__ */ jsx24(Box14, { ref: innerRef, flexDirection: "column", children }) });
+}
+
+// src/design-system/Tabs.tsx
+import {
+  createContext as createContext3,
+  useCallback as useCallback10,
+  useContext as useContext9,
+  useState as useState11
+} from "react";
+import { TerminalSizeContext as TerminalSizeContext6 } from "@claude-code-kit/ink-renderer";
+import { stringWidth as stringWidth4 } from "@claude-code-kit/ink-renderer";
+import { Box as Box15, Text as Text18, useInput as useInput8 } from "@claude-code-kit/ink-renderer";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var TabsContext = createContext3({
+  selectedTab: void 0,
+  width: void 0
+});
+function Tabs({
+  title,
+  color: color2,
+  defaultTab,
+  children,
+  hidden,
+  useFullWidth,
+  selectedTab: controlledSelectedTab,
+  onTabChange,
+  banner,
+  disableNavigation
+}) {
+  const terminalSize = useContext9(TerminalSizeContext6);
+  const terminalWidth = terminalSize?.columns ?? 80;
+  const tabs = children.map((child) => [
+    child.props.id ?? child.props.title,
+    child.props.title
+  ]);
+  const defaultTabIndex = defaultTab ? tabs.findIndex((tab) => defaultTab === tab[0]) : 0;
+  const isControlled = controlledSelectedTab !== void 0;
+  const [internalSelectedTab, setInternalSelectedTab] = useState11(
+    defaultTabIndex !== -1 ? defaultTabIndex : 0
+  );
+  const controlledTabIndex = isControlled ? tabs.findIndex((tab) => tab[0] === controlledSelectedTab) : -1;
+  const selectedTabIndex = isControlled ? controlledTabIndex !== -1 ? controlledTabIndex : 0 : internalSelectedTab;
+  const handleTabChange = useCallback10(
+    (offset) => {
+      const newIndex = (selectedTabIndex + tabs.length + offset) % tabs.length;
+      const newTabId = tabs[newIndex]?.[0];
+      if (isControlled && onTabChange && newTabId) {
+        onTabChange(newTabId);
+      } else {
+        setInternalSelectedTab(newIndex);
+      }
+    },
+    [selectedTabIndex, tabs, isControlled, onTabChange]
+  );
+  useInput8(
+    useCallback10(
+      (_input, key) => {
+        if (hidden || disableNavigation) return;
+        if (key.tab && !key.shift) {
+          handleTabChange(1);
+        } else if (key.tab && key.shift) {
+          handleTabChange(-1);
+        } else if (key.leftArrow) {
+          handleTabChange(-1);
+        } else if (key.rightArrow) {
+          handleTabChange(1);
+        }
+      },
+      [hidden, disableNavigation, handleTabChange]
+    )
+  );
+  const titleWidth = title ? stringWidth4(title) + 1 : 0;
+  const tabsWidth = tabs.reduce(
+    (sum, [, tabTitle]) => sum + (tabTitle ? stringWidth4(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__ */ jsx25(
+    TabsContext.Provider,
+    {
+      value: {
+        selectedTab: tabs[selectedTabIndex]?.[0],
+        width: contentWidth
+      },
+      children: /* @__PURE__ */ jsxs17(Box15, { flexDirection: "column", children: [
+        !hidden && /* @__PURE__ */ jsxs17(Box15, { flexDirection: "row", gap: 1, children: [
+          title !== void 0 && /* @__PURE__ */ jsx25(Text18, { bold: true, color: color2, children: title }),
+          tabs.map(([id, tabTitle], i) => {
+            const isCurrent = selectedTabIndex === i;
+            return /* @__PURE__ */ jsxs17(
+              Text18,
+              {
+                inverse: isCurrent,
+                bold: isCurrent,
+                children: [
+                  " ",
+                  tabTitle,
+                  " "
+                ]
+              },
+              id
+            );
+          }),
+          spacerWidth > 0 && /* @__PURE__ */ jsx25(Text18, { children: " ".repeat(spacerWidth) })
+        ] }),
+        banner,
+        /* @__PURE__ */ jsx25(
+          Box15,
+          {
+            width: contentWidth,
+            marginTop: hidden ? 0 : 1,
+            children
+          }
+        )
+      ] })
+    }
+  );
+}
+function Tab({ title, id, children }) {
+  const { selectedTab, width } = useContext9(TabsContext);
+  if (selectedTab !== (id ?? title)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx25(Box15, { width, children });
+}
+function useTabsWidth() {
+  const { width } = useContext9(TabsContext);
+  return width;
+}
 export {
+  Byline,
   CommandRegistry,
   DEFAULT_BINDINGS,
+  Dialog,
   Divider,
+  FuzzyPicker,
   KeybindingSetup,
+  KeyboardShortcutHint,
+  ListItem,
+  LoadingState,
+  Markdown,
+  MarkdownTable,
   MessageList,
   MultiSelect,
+  Pane,
   ProgressBar,
   PromptInput,
   REPL,
+  Ratchet,
   Select,
   Spinner,
   StatusIcon,
   StatusLine,
+  StreamingMarkdown,
   StreamingText,
+  Tab,
+  Tabs,
+  TextHoverColorContext,
+  ThemeProvider,
+  ThemedBox_default as ThemedBox,
+  ThemedText,
   clearCommand,
+  color,
   createCommandRegistry,
   defineCommand,
   defineJSXCommand,
   defineLocalCommand,
   exitCommand,
+  getTheme,
   helpCommand,
+  useDoublePress,
   useKeybinding,
   useKeybindings,
-  useStatusLine
+  usePreviewTheme,
+  useStatusLine,
+  useTabsWidth,
+  useTerminalSize,
+  useTheme,
+  useThemeSetting
 };