miantiao.me 0.1.2 → 0.1.4

package/dist/{app-IW4THTCR.js → app-YAGEJAXF.js}

@@ -4,8 +4,8 @@ import {
 
 // packages/cli/src/app.tsx
 import { AssistantRuntimeProvider } from "@assistant-ui/react-ink";
-import { Box as Box9, render, Text as Text9, useApp as useApp2, useInput as useInput6, useWindowSize as useWindowSize3 } from "ink";
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { Box as Box14, render, Text as Text14, useApp as useApp2, useInput as useInput9, useWindowSize as useWindowSize4 } from "ink";
+import { useEffect as useEffect9, useState as useState11 } from "react";
 
 // src/terminal/schema.ts
 import { z } from "zod";
@@ -287,7 +287,7 @@ var TerminalClient = class {
 
 // packages/cli/src/console.tsx
 import { ThreadPrimitive as ThreadPrimitive2 } from "@assistant-ui/react-ink";
-import { useRef as useRef5 } from "react";
+import { useRef as useRef8 } from "react";
 
 // packages/cli/src/chat.tsx
 import { ThreadPrimitive, useAuiState } from "@assistant-ui/react-ink";
@@ -421,14 +421,7 @@ import { Box as Box2, Text as Text2, useBoxMetrics as useBoxMetrics2, useInput a
 import { useEffect, useRef as useRef2, useState as useState2 } from "react";
 
 // packages/cli/src/scroll-area.tsx
-import {
-  Box,
-  Text,
-  measureElement,
-  useBoxMetrics,
-  useFocus,
-  useInput
-} from "ink";
+import { Box, Text, measureElement, useBoxMetrics, useFocus, useInput } from "ink";
 import {
   createContext as createContext2,
   useContext as useContext2,
@@ -447,10 +440,11 @@ function useScrollArea() {
 function ScrollArea({
   children,
   selection,
+  active = true,
   ref
 }) {
   const { colors } = useTerminalStyle();
-  const { isFocused } = useFocus({ id: "content" });
+  const { isFocused } = useFocus({ id: "content", isActive: active });
   const viewport = useRef(null);
   const content = useRef(null);
   const { clientHeight: height } = useBoxMetrics(viewport);
@@ -459,32 +453,42 @@ function ScrollArea({
   const maximum = Math.max(0, contentHeight - height);
   const offset = anchor === "end" ? maximum : Math.min(anchor, maximum);
   const context = useMemo2(() => ({ focused: isFocused, height }), [isFocused, height]);
-  useImperativeHandle(ref, () => ({
-    end: () => setAnchor("end"),
-    reveal: (element) => {
-      if (!viewport.current) return false;
-      const item = measureElement(element);
-      const top = item.y - measureElement(viewport.current).y;
-      const visible = top >= offset && top < offset + height;
-      if (top < offset || item.height > height) setAnchor(Math.max(0, top));
-      else if (top + item.height > offset + height)
-        setAnchor(Math.min(maximum, top + item.height - height));
-      return visible;
-    }
-  }), [offset, height, maximum]);
-  useInput((_input, key) => {
-    let next = offset;
-    if (key.pageUp) next -= Math.max(1, height - 1);
-    else if (key.pageDown) next += Math.max(1, height - 1);
-    else if (isFocused && !selection && key.upArrow) next--;
-    else if (isFocused && !selection && key.downArrow) next++;
-    else if (isFocused && !selection && key.home) next = 0;
-    else if (isFocused && !selection && key.end) next = maximum;
-    else return;
-    setAnchor(next >= maximum ? "end" : Math.max(0, next));
-  });
+  useImperativeHandle(
+    ref,
+    () => ({
+      end: () => setAnchor("end"),
+      reveal: (element) => {
+        if (!viewport.current) return false;
+        const item = measureElement(element);
+        const top = item.y - measureElement(viewport.current).y;
+        const visible = top >= offset && top < offset + height;
+        if (top < offset || item.height > height) setAnchor(Math.max(0, top));
+        else if (top + item.height > offset + height)
+          setAnchor(Math.min(maximum, top + item.height - height));
+        return visible;
+      }
+    }),
+    [offset, height, maximum]
+  );
+  useInput(
+    (_input, key) => {
+      let next = offset;
+      if (key.pageUp) next -= Math.max(1, height - 1);
+      else if (key.pageDown) next += Math.max(1, height - 1);
+      else if (isFocused && !selection && key.upArrow) next--;
+      else if (isFocused && !selection && key.downArrow) next++;
+      else if (isFocused && !selection && key.home) next = 0;
+      else if (isFocused && !selection && key.end) next = maximum;
+      else return;
+      setAnchor(next >= maximum ? "end" : Math.max(0, next));
+    },
+    { isActive: active }
+  );
   const track = Math.max(0, height);
-  const thumbSize = Math.min(track, Math.max(1, Math.round(height * height / Math.max(1, contentHeight))));
+  const thumbSize = Math.min(
+    track,
+    Math.max(1, Math.round(height * height / Math.max(1, contentHeight)))
+  );
   const thumbTop = maximum > 0 ? Math.round(offset / maximum * (height - thumbSize)) : 0;
   const before = Array(thumbTop).fill("\u2502").join("\n");
   const thumb = Array(thumbSize).fill("\u2503").join("\n");
@@ -517,30 +521,35 @@ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function PageList({ items, onSelect, scroll, compact = false }) {
   const { focused } = useScrollArea();
   const { colors } = useTerminalStyle();
-  const [selected, setSelected] = useState2(0);
+  const [position, setSelected] = useState2(0);
+  const selected = Math.max(0, Math.min(position, items.length - 1));
+  const selectedItem = items[selected];
   const elements = useRef2(/* @__PURE__ */ new Map());
   const container = useRef2(null);
   const { hasMeasured } = useBoxMetrics2(container);
   useEffect(() => {
-    const element = elements.current.get(items[selected].path);
+    const element = selectedItem && elements.current.get(selectedItem.path);
     if (focused && hasMeasured && element) scroll.current?.reveal(element);
-  }, [focused, hasMeasured, selected, items, scroll]);
-  useInput2((_input, key) => {
-    let next = selected;
-    if (key.upArrow) next--;
-    else if (key.downArrow) next++;
-    else if (key.home) next = 0;
-    else if (key.end) next = items.length - 1;
-    else if (key.return) {
-      const item = items[selected];
-      const element = elements.current.get(item.path);
-      if (element && scroll.current?.reveal(element) === false) return;
-      onSelect(item.path, item.external);
-      return;
-    } else return;
-    next = Math.max(0, Math.min(items.length - 1, next));
-    setSelected(next);
-  }, { isActive: focused });
+  }, [focused, hasMeasured, selectedItem, scroll]);
+  useInput2(
+    (_input, key) => {
+      let next = selected;
+      if (key.upArrow) next--;
+      else if (key.downArrow) next++;
+      else if (key.home) next = 0;
+      else if (key.end) next = items.length - 1;
+      else if (key.return) {
+        if (!selectedItem) return;
+        const element = elements.current.get(selectedItem.path);
+        if (element && scroll.current?.reveal(element) === false) return;
+        onSelect(selectedItem.path, selectedItem.external);
+        return;
+      } else return;
+      next = Math.max(0, Math.min(items.length - 1, next));
+      setSelected(next);
+    },
+    { isActive: focused }
+  );
   return /* @__PURE__ */ jsx3(Box2, { ref: container, flexDirection: "column", marginTop: 1, children: items.map((item, index) => {
     const active = focused && index === selected;
     return /* @__PURE__ */ jsxs2(
@@ -643,9 +652,17 @@ function ChatThread() {
 }
 
 // packages/cli/src/composer.tsx
-import { ComposerPrimitive, LoadingPrimitive, useAui, useAuiState as useAuiState2 } from "@assistant-ui/react-ink";
-import { Box as Box6, Text as Text6, useFocusManager, useInput as useInput4 } from "ink";
-import { useEffect as useEffect2, useRef as useRef4 } from "react";
+import { useAui, useAuiState as useAuiState2 } from "@assistant-ui/react-ink";
+import {
+  Box as Box10,
+  Text as Text10,
+  useBoxMetrics as useBoxMetrics6,
+  useFocus as useFocus3,
+  useFocusManager as useFocusManager2,
+  useInput as useInput7,
+  useWindowSize as useWindowSize2
+} from "ink";
+import { useEffect as useEffect5, useEffectEvent, useRef as useRef6 } from "react";
 
 // src/agent/appearance.ts
 var composerPlaceholder = "\u95EE\u70B9\u4EC0\u4E48\uFF0C\u6216\u8F93\u5165 / \u67E5\u770B\u547D\u4EE4";
@@ -682,8 +699,8 @@ function getSearchPath(query) {
 }
 
 // packages/cli/src/command-menu.tsx
-import { Box as Box5, Text as Text5, useInput as useInput3, useWindowSize } from "ink";
-import { useImperativeHandle as useImperativeHandle2, useState as useState3 } from "react";
+import { Box as Box5, Text as Text5, useFocusManager, useInput as useInput3 } from "ink";
+import { useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, useState as useState3 } from "react";
 
 // packages/cli/src/commands.ts
 var terminalCommands = [
@@ -697,7 +714,9 @@ function getCommandSuggestions(text) {
   const match = text.match(/^\/([^\s]*)$/);
   if (!match) return null;
   const query = match[1].toLowerCase();
-  return terminalCommands.filter((command) => command.id.startsWith(query) || command.description.includes(query));
+  return terminalCommands.filter(
+    (command) => command.id.includes(query) || command.description.toLowerCase().includes(query)
+  );
 }
 function numberedItem(input, page) {
   if (!/^\d+$/.test(input)) return void 0;
@@ -729,22 +748,30 @@ import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function CommandMenu({
   text,
   focused,
+  availableHeight,
   onSelect,
   ref
 }) {
   const { colors } = useTerminalStyle();
-  const { rows } = useWindowSize();
+  const { activeId, disableFocus, enableFocus, focus, focusPrevious } = useFocusManager();
   const [selected, setSelected] = useState3(0);
   const [dismissed, setDismissed] = useState3(false);
   const suggestions = getCommandSuggestions(text);
   const matches = suggestions ?? [];
   const open = focused && suggestions !== null && !dismissed;
-  const visibleCount = Math.max(1, Math.min(8, rows - 10));
+  const visibleCount = Math.max(1, Math.min(8, availableHeight - 4));
   const start = Math.max(0, selected - visibleCount + 1);
+  useEffect2(() => {
+    if (!open || !activeId) return;
+    disableFocus();
+    focus(activeId);
+    return enableFocus;
+  }, [open, activeId, disableFocus, enableFocus, focus]);
   useImperativeHandle2(ref, () => ({
+    isOpen: () => open,
     submit: (input) => {
-      if (!open || input !== text || !matches.length) return false;
-      onSelect(matches[selected]);
+      if (!open || input !== text) return false;
+      if (matches.length) onSelect(matches[selected]);
       return true;
     },
     dismiss: () => {
@@ -753,170 +780,598 @@ function CommandMenu({
       return true;
     }
   }));
-  useInput3((_input, key) => {
-    if (!matches.length) return;
-    const direction = Number(key.downArrow) - Number(key.upArrow);
-    if (direction) setSelected((index) => (index + direction + matches.length) % matches.length);
-  }, { isActive: open });
+  useInput3(
+    (_input, key) => {
+      if (key.tab) {
+        if (key.shift) queueMicrotask(focusPrevious);
+        else if (matches.length) onSelect(matches[selected]);
+        return;
+      }
+      if (!matches.length) return;
+      const direction = Number(key.downArrow) - Number(key.upArrow);
+      if (direction) setSelected((index) => (index + direction + matches.length) % matches.length);
+    },
+    { isActive: open }
+  );
   if (!open) return null;
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", borderStyle: "round", borderColor: colors.line, paddingX: 1, marginBottom: 1, children: [
-    matches.length === 0 && /* @__PURE__ */ jsx6(Text5, { color: colors.muted, children: "\u6CA1\u6709\u5339\u914D\u7684\u547D\u4EE4" }),
-    matches.slice(start, start + visibleCount).map((command, index) => {
-      const active = start + index === selected;
-      return /* @__PURE__ */ jsxs5(Box5, { height: 1, backgroundColor: active ? colors.band : void 0, children: [
-        /* @__PURE__ */ jsx6(Box5, { width: 14, flexShrink: 0, children: /* @__PURE__ */ jsxs5(Text5, { color: active ? colors.accent : colors.skill, bold: active, children: [
-          active ? "\u25B8" : " ",
-          " /",
-          command.id
+  return /* @__PURE__ */ jsxs5(
+    Box5,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: colors.line,
+      backgroundColor: colors.bg,
+      paddingX: 1,
+      marginBottom: 1,
+      children: [
+        matches.length === 0 && /* @__PURE__ */ jsx6(Text5, { color: colors.muted, children: "\u6CA1\u6709\u5339\u914D\u7684\u547D\u4EE4" }),
+        matches.slice(start, start + visibleCount).map((command, index) => {
+          const active = start + index === selected;
+          return /* @__PURE__ */ jsxs5(Box5, { height: 1, backgroundColor: active ? colors.band : void 0, children: [
+            /* @__PURE__ */ jsx6(Box5, { width: 14, flexShrink: 0, children: /* @__PURE__ */ jsxs5(Text5, { color: colors.skill, children: [
+              active ? "\u25B8" : " ",
+              " /",
+              command.id
+            ] }) }),
+            /* @__PURE__ */ jsx6(Box5, { flexGrow: 1, flexShrink: 1, children: /* @__PURE__ */ jsx6(Text5, { color: colors.muted, wrap: "truncate-end", children: command.description }) })
+          ] }, command.id);
+        }),
+        /* @__PURE__ */ jsx6(Text5, { color: colors.muted, wrap: "truncate-end", children: "\u2191\u2193 \u9009\u62E9 \xB7 Enter/Tab \u786E\u8BA4 \xB7 Esc \u5173\u95ED" })
+      ]
+    }
+  );
+}
+
+// packages/cli/src/composer-input.tsx
+import { Box as Box6, Text as Text6, useBoxMetrics as useBoxMetrics4, useInput as useInput4, useWindowSize } from "ink";
+import { useRef as useRef4, useState as useState4 } from "react";
+
+// packages/cli/src/input-editor.ts
+import stringWidth from "string-width";
+var segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+function editorLines(text, width) {
+  const lines = [];
+  let start = 0;
+  let columns = 0;
+  for (const { segment, index } of segmenter.segment(text)) {
+    if (segment === "\n") {
+      lines.push({ start, end: index, text: text.slice(start, index) });
+      if (columns >= width) lines.push({ start: index, end: index, text: "" });
+      start = index + 1;
+      columns = 0;
+      continue;
+    }
+    const size = stringWidth(segment);
+    if (columns && columns + size > width) {
+      lines.push({ start, end: index, text: text.slice(start, index) });
+      start = index;
+      columns = 0;
+    }
+    columns += size;
+  }
+  lines.push({ start, end: text.length, text: text.slice(start) });
+  if (columns >= width) lines.push({ start: text.length, end: text.length, text: "" });
+  return lines;
+}
+function cursorRow(lines, cursor) {
+  return lines.findLastIndex((line) => line.start <= cursor);
+}
+function editText(state, start, end, inserted = "") {
+  return {
+    text: state.text.slice(0, start) + inserted + state.text.slice(end),
+    cursor: start + inserted.length
+  };
+}
+function moveCursor(state, direction) {
+  const boundaries = [...segmenter.segment(state.text)].map((part) => part.index);
+  boundaries.push(state.text.length);
+  const cursor = direction < 0 ? boundaries.findLast((index) => index < state.cursor) ?? 0 : boundaries.find((index) => index > state.cursor) ?? state.text.length;
+  return { text: state.text, cursor };
+}
+function moveVertical(state, width, direction) {
+  const lines = editorLines(state.text, width);
+  const row = cursorRow(lines, state.cursor);
+  const column = state.column ?? stringWidth(state.text.slice(lines[row].start, state.cursor));
+  const target = lines[Math.max(0, Math.min(lines.length - 1, row + direction))];
+  let cursor = target.start;
+  let cells = 0;
+  for (const { segment, index } of segmenter.segment(target.text)) {
+    cells += stringWidth(segment);
+    if (cells > column) break;
+    cursor = target.start + index + segment.length;
+  }
+  return { text: state.text, cursor, column };
+}
+function wordCursor(state, direction) {
+  if (direction < 0) {
+    return state.cursor - (state.text.slice(0, state.cursor).match(/\S+\s*$|\s+$/u)?.[0].length ?? 0);
+  }
+  return state.cursor + (state.text.slice(state.cursor).match(/^\s*\S*/u)?.[0].length ?? 0);
+}
+function updateEditor(state, input, key, width) {
+  const { text, cursor } = state;
+  if (key.escape || key.tab || key.pageUp || key.pageDown) return;
+  if (key.upArrow || key.downArrow) return moveVertical(state, width, key.upArrow ? -1 : 1);
+  if (key.leftArrow || key.rightArrow) {
+    const direction = key.leftArrow ? -1 : 1;
+    return key.ctrl || key.meta ? { text, cursor: wordCursor(state, direction) } : moveCursor(state, direction);
+  }
+  const start = cursor === 0 ? 0 : text.lastIndexOf("\n", cursor - 1) + 1;
+  const nextBreak = text.indexOf("\n", cursor);
+  const end = nextBreak < 0 ? text.length : nextBreak;
+  if (key.home || key.ctrl && input === "a") return { text, cursor: start };
+  if (key.end || key.ctrl && input === "e") return { text, cursor: end };
+  if (key.return || key.ctrl && input === "j") return editText(state, cursor, cursor, "\n");
+  if (key.ctrl) {
+    if (input === "u") return editText(state, start, cursor);
+    if (input === "k") return editText(state, cursor, end);
+    if (input === "w") return editText(state, wordCursor(state, -1), cursor);
+    return;
+  }
+  if (key.backspace) return editText(state, moveCursor(state, -1).cursor, cursor);
+  if (key.delete) return editText(state, cursor, moveCursor(state, 1).cursor);
+  if (key.meta) return;
+  const inserted = input.replace(/\r\n?/g, "\n").replace(/\t/g, "  ").replace(new RegExp("\\p{Cc}", "gu"), (character) => character === "\n" ? character : "");
+  if (inserted) return editText(state, cursor, cursor, inserted);
+}
+
+// packages/cli/src/composer-input.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ComposerInput({
+  value,
+  focused,
+  onChange,
+  onSubmit,
+  ignoreArrows
+}) {
+  const { colors, width: availableWidth } = useTerminalStyle();
+  const { rows } = useWindowSize();
+  const container = useRef4(null);
+  const { clientWidth } = useBoxMetrics4(container);
+  const width = Math.max(1, clientWidth || availableWidth - 5);
+  const maximum = Math.max(1, Math.min(10, rows - 8));
+  const [editor, setEditor] = useState4({ text: value, cursor: value.length });
+  const [offset, setOffset] = useState4(0);
+  const state = editor.text === value ? editor : { text: value, cursor: value.length };
+  if (state !== editor) setEditor(state);
+  const lines = editorLines(value, width);
+  const row = cursorRow(lines, state.cursor);
+  const height = Math.min(maximum, lines.length);
+  const start = Math.max(0, Math.min(offset, lines.length - height, row));
+  const visibleStart = row >= start + height ? row - height + 1 : start;
+  if (visibleStart !== offset) setOffset(visibleStart);
+  useInput4(
+    (input, key) => {
+      if (key.return && !key.shift && !key.meta) {
+        onSubmit(value);
+        return;
+      }
+      if (ignoreArrows() && (key.upArrow || key.downArrow)) return;
+      const next = updateEditor(state, input, key, width);
+      if (!next) return;
+      setEditor(next);
+      if (next.text !== value) onChange(next.text);
+    },
+    { isActive: focused }
+  );
+  return /* @__PURE__ */ jsx7(Box6, { ref: container, flexGrow: 1, minWidth: 0, height, flexDirection: "column", children: lines.slice(visibleStart, visibleStart + height).map((line, index) => {
+    const current = visibleStart + index === row;
+    const cursor = current ? state.cursor - line.start : -1;
+    const after = current ? moveCursor(state, 1).cursor - line.start : -1;
+    return /* @__PURE__ */ jsx7(Text6, { color: colors.fg, wrap: "truncate-end", children: !value ? /* @__PURE__ */ jsxs6(Text6, { color: colors.muted, children: [
+      /* @__PURE__ */ jsx7(Text6, { inverse: focused, children: composerPlaceholder[0] }),
+      composerPlaceholder.slice(1)
+    ] }) : current && focused ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+      line.text.slice(0, cursor),
+      /* @__PURE__ */ jsx7(Text6, { inverse: true, children: line.text.slice(cursor, after) || " " }),
+      line.text.slice(after)
+    ] }) : line.text || " " }, line.start);
+  }) });
+}
+
+// packages/cli/src/panels.tsx
+import { Box as Box8, Text as Text8, useBoxMetrics as useBoxMetrics5, useInput as useInput6 } from "ink";
+import { useRef as useRef5, useState as useState6 } from "react";
+
+// packages/cli/src/theme-picker.tsx
+import { Box as Box7, Text as Text7, useFocus as useFocus2, useInput as useInput5 } from "ink";
+import { useEffect as useEffect3, useState as useState5 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function ThemePicker({
+  initial,
+  visibleCount,
+  onPreview,
+  onApply
+}) {
+  const { colors } = useTerminalStyle();
+  const { isFocused, focus } = useFocus2({ id: "theme-picker" });
+  const [selected, setSelected] = useState5(
+    () => Math.max(
+      0,
+      themeOptions.findIndex((option) => option.id === initial)
+    )
+  );
+  useEffect3(() => {
+    focus("theme-picker");
+    return () => onPreview(void 0);
+  }, [focus, onPreview]);
+  useInput5(
+    (input, key) => {
+      const direction = Number(key.downArrow || input === "j") - Number(key.upArrow || input === "k");
+      if (direction) {
+        const next = (selected + direction + themeOptions.length) % themeOptions.length;
+        setSelected(next);
+        onPreview(themeOptions[next].id);
+      } else if (key.return) {
+        onApply(themeOptions[selected].id);
+      }
+    },
+    { isActive: isFocused }
+  );
+  const start = Math.max(0, selected - visibleCount + 1);
+  return /* @__PURE__ */ jsx8(Box7, { flexDirection: "column", children: themeOptions.slice(start, start + visibleCount).map((option, index) => /* @__PURE__ */ jsxs7(Box7, { backgroundColor: start + index === selected ? colors.band : void 0, children: [
+    /* @__PURE__ */ jsx8(Box7, { width: 20, flexShrink: 0, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.fg, bold: true, children: [
+      start + index === selected ? "\u25B8" : " ",
+      " ",
+      option.name
+    ] }) }),
+    /* @__PURE__ */ jsx8(Box7, { flexGrow: 1, flexShrink: 1, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, wrap: "truncate-end", children: [
+      option.description,
+      option.id === initial ? "\uFF08\u5F53\u524D\uFF09" : ""
+    ] }) })
+  ] }, option.id)) });
+}
+
+// packages/cli/src/panels.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function PanelBox({
+  title,
+  availableHeight,
+  children,
+  hints = "Esc:\u5173\u95ED"
+}) {
+  const { colors } = useTerminalStyle();
+  const viewport = useRef5(null);
+  const content = useRef5(null);
+  const { clientHeight: height } = useBoxMetrics5(viewport);
+  const { height: contentHeight } = useBoxMetrics5(content);
+  const [offset, setOffset] = useState6(0);
+  const maximum = Math.max(0, contentHeight - height);
+  useInput6((_input, key) => {
+    const direction = Number(key.pageDown) - Number(key.pageUp);
+    if (direction)
+      setOffset(
+        (current) => Math.max(0, Math.min(maximum, current + direction * Math.max(1, height - 1)))
+      );
+  });
+  return /* @__PURE__ */ jsxs8(
+    Box8,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      borderColor: colors.line,
+      backgroundColor: colors.bg,
+      paddingX: 2,
+      marginBottom: 1,
+      children: [
+        /* @__PURE__ */ jsx9(Text8, { color: colors.fg, bold: true, children: title }),
+        /* @__PURE__ */ jsx9(
+          Box8,
+          {
+            ref: viewport,
+            flexDirection: "column",
+            maxHeight: Math.max(1, availableHeight - 5),
+            overflow: "hidden",
+            contentOffsetY: Math.min(offset, maximum),
+            children: /* @__PURE__ */ jsx9(
+              Box8,
+              {
+                ref: content,
+                flexDirection: "column",
+                flexShrink: 0,
+                marginY: availableHeight >= 8 ? 1 : 0,
+                children
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs8(Text8, { color: colors.muted, wrap: "truncate-end", children: [
+          hints,
+          maximum > 0 ? " \u2502 PgUp/PgDn:\u6EDA\u52A8" : ""
+        ] })
+      ]
+    }
+  );
+}
+function TerminalPanels({
+  panel,
+  availableHeight,
+  savedTheme,
+  onPreviewTheme,
+  onApplyTheme,
+  site
+}) {
+  const { colors } = useTerminalStyle();
+  if (!panel) return null;
+  if (panel.type === "theme") {
+    return /* @__PURE__ */ jsx9(
+      PanelBox,
+      {
+        title: "\u9009\u62E9\u4E3B\u9898",
+        availableHeight,
+        hints: "\u2191\u2193:\u9884\u89C8 \u2502 Enter:\u5E94\u7528 \u2502 Esc:\u53D6\u6D88",
+        children: /* @__PURE__ */ jsx9(
+          ThemePicker,
+          {
+            initial: savedTheme,
+            visibleCount: Math.max(1, availableHeight - (availableHeight >= 8 ? 7 : 5)),
+            onPreview: onPreviewTheme,
+            onApply: onApplyTheme
+          }
+        )
+      }
+    );
+  }
+  if (panel.type === "help") {
+    return /* @__PURE__ */ jsxs8(PanelBox, { title: "\u547D\u4EE4", availableHeight, children: [
+      terminalCommands.map((command) => /* @__PURE__ */ jsxs8(Box8, { children: [
+        /* @__PURE__ */ jsx9(Box8, { width: 20, flexShrink: 0, children: /* @__PURE__ */ jsxs8(Text8, { color: colors.skill, children: [
+          "/",
+          command.id,
+          /* @__PURE__ */ jsx9(Text8, { color: colors.muted, children: command.args ? ` ${command.args}` : "" })
         ] }) }),
-        /* @__PURE__ */ jsx6(Box5, { flexGrow: 1, flexShrink: 1, children: /* @__PURE__ */ jsx6(Text5, { color: colors.muted, wrap: "truncate-end", children: command.description }) })
-      ] }, command.id);
-    }),
-    /* @__PURE__ */ jsx6(Text5, { color: colors.muted, wrap: "truncate-end", children: "\u2191\u2193 \u9009\u62E9 \xB7 Enter \u786E\u8BA4 \xB7 Esc \u5173\u95ED" })
+        /* @__PURE__ */ jsx9(Box8, { flexGrow: 1, flexShrink: 1, children: /* @__PURE__ */ jsx9(Text8, { color: colors.muted, wrap: "truncate-end", children: command.description }) })
+      ] }, command.id)),
+      /* @__PURE__ */ jsx9(Text8, { color: colors["fg-soft"], children: "\u76F4\u63A5\u8F93\u5165\u95EE\u9898\uFF0CAI \u4F1A\u68C0\u7D22\u5168\u7AD9\u6587\u7AE0\u540E\u56DE\u7B54\uFF0C\u4E5F\u80FD\u5E2E\u4F60\u5207\u6362\u4E3B\u9898\u3001\u6253\u5F00\u9875\u9762\u3002" })
+    ] });
+  }
+  if (panel.type === "rss") {
+    return /* @__PURE__ */ jsx9(PanelBox, { title: "\u8BA2\u9605", availableHeight, children: /* @__PURE__ */ jsx9(Markdown, { text: `RSS [${site.feedUrl}](${site.feedUrl})` }) });
+  }
+  return /* @__PURE__ */ jsxs8(
+    Text8,
+    {
+      color: panel.tone === "error" ? colors.err : colors["fg-soft"],
+      backgroundColor: colors.bg,
+      children: [
+        "\u25C6 ",
+        cleanText(panel.text)
+      ]
+    }
+  );
+}
+
+// packages/cli/src/run-status.tsx
+import { LoadingPrimitive } from "@assistant-ui/react-ink";
+import { Box as Box9, Text as Text9 } from "ink";
+import { useEffect as useEffect4, useState as useState7 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function RunStatus({ running, loading }) {
+  const { colors } = useTerminalStyle();
+  const [seconds, setSeconds] = useState7(0);
+  useEffect4(() => {
+    if (!running) return;
+    const started = Date.now();
+    setSeconds(0);
+    const timer = setInterval(() => setSeconds(Math.floor((Date.now() - started) / 1e3)), 1e3);
+    return () => clearInterval(timer);
+  }, [running]);
+  if (!running && !loading) return null;
+  return /* @__PURE__ */ jsxs9(Box9, { paddingLeft: 2, height: 1, children: [
+    /* @__PURE__ */ jsx10(LoadingPrimitive.Spinner, {}),
+    /* @__PURE__ */ jsxs9(Text9, { color: colors.fg, children: [
+      " ",
+      loading ? "\u601D\u8003\u4E2D\u2026\u2026" : "\u56DE\u590D\u4E2D\u2026"
+    ] }),
+    running && /* @__PURE__ */ jsxs9(Text9, { color: colors.muted, children: [
+      " ",
+      seconds,
+      "s"
+    ] }),
+    /* @__PURE__ */ jsx10(Box9, { flexGrow: 1 }),
+    /* @__PURE__ */ jsx10(Text9, { color: colors.muted, children: "[Esc \u505C\u6B62]" })
   ] });
 }
 
 // packages/cli/src/composer.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function Composer({
   runtime,
-  page,
-  revision,
   loading,
-  notice,
+  panel,
   onCommand,
   onCancel,
-  onSubmit
+  focusKey,
+  onSubmit,
+  ...panels
 }) {
   const { colors } = useTerminalStyle();
+  const { rows } = useWindowSize2();
   const aui = useAui();
-  const { activeId, focus, focusNext } = useFocusManager();
+  const { activeId, focus } = useFocusManager2();
   const running = useAuiState2((state) => state.thread.isRunning);
   const text = useAuiState2((state) => state.composer.text);
-  const menu = useRef4(null);
-  const inputFocusId = useRef4(void 0);
-  const focused = activeId !== "content";
-  useEffect2(() => {
-    if (activeId && activeId !== "content") inputFocusId.current = activeId;
-  }, [activeId]);
-  useInput4((input, key) => {
+  const menu = useRef6(null);
+  const dock = useRef6(null);
+  const { height } = useBoxMetrics6(dock);
+  const { isFocused: focused } = useFocus3({ id: "composer", autoFocus: true });
+  const restoreComposerFocus = useEffectEvent(() => {
+    if (panel?.type !== "theme") focus("composer");
+  });
+  useEffect5(() => {
+    restoreComposerFocus();
+  }, [focusKey, panel?.type]);
+  useInput7((input, key) => {
     if (key.escape) {
       if (!menu.current?.dismiss()) onCancel();
-      if (inputFocusId.current) focus(inputFocusId.current);
+      focus("composer");
     }
     if (input === "/" && activeId === "content") {
-      focusNext();
+      focus("composer");
       aui.composer.setText("/");
     }
   });
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", marginX: 2, flexShrink: 0, children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs10(Box10, { ref: dock, flexDirection: "column", marginX: 2, flexShrink: 0, children: [
+    /* @__PURE__ */ jsx11(RunStatus, { loading, running }),
+    /* @__PURE__ */ jsxs10(
+      Box10,
+      {
+        borderStyle: "round",
+        borderColor: focused ? colors["line-strong"] : colors.line,
+        paddingX: 1,
+        alignItems: "flex-start",
+        children: [
+          /* @__PURE__ */ jsx11(Text10, { color: colors.prompt, children: "\u276F " }),
+          /* @__PURE__ */ jsx11(
+            ComposerInput,
+            {
+              value: text,
+              focused,
+              onChange: (value) => aui.composer.setText(value),
+              ignoreArrows: () => menu.current?.isOpen() ?? false,
+              onSubmit: (text2) => {
+                const input = text2.trim();
+                if (!input) return;
+                if (menu.current?.submit(text2)) return;
+                if (input.startsWith("/")) {
+                  const command = parseCommand(input);
+                  aui.composer.setText("");
+                  void onCommand(command?.name ?? "help", command?.args ?? "");
+                } else if (!running) {
+                  onSubmit();
+                  runtime.thread.composer.send();
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx11(Box10, { position: "absolute", bottom: -1, right: 1, children: /* @__PURE__ */ jsxs10(Text10, { color: colors.muted, backgroundColor: colors.bg, children: [
+            " ",
+            composerBrand.mark,
+            " \xB7 ",
+            composerBrand.model,
+            " "
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs10(Text10, { color: colors.muted, wrap: "truncate-end", children: [
+      /* @__PURE__ */ jsx11(Text10, { bold: true, children: "/" }),
+      ":\u547D\u4EE4 \u2502 ",
+      /* @__PURE__ */ jsx11(Text10, { bold: true, children: "Enter" }),
+      ":\u53D1\u9001 \u2502 ",
+      /* @__PURE__ */ jsx11(Text10, { bold: true, children: "Shift+Enter" }),
+      ":\u6362\u884C \u2502 ",
+      /* @__PURE__ */ jsx11(Text10, { bold: true, children: "Esc" }),
+      ":\u505C\u6B62"
+    ] }),
+    /* @__PURE__ */ jsx11(Box10, { position: "absolute", bottom: height, width: "100%", flexDirection: "column", children: /* @__PURE__ */ jsx11(
+      TerminalPanels,
+      {
+        panel,
+        availableHeight: Math.max(6, rows - height - 1),
+        ...panels
+      }
+    ) }),
+    /* @__PURE__ */ jsx11(Box10, { position: "absolute", bottom: height, width: "100%", flexDirection: "column", children: /* @__PURE__ */ jsx11(
       CommandMenu,
       {
         ref: menu,
         text,
         focused,
+        availableHeight: Math.max(6, rows - height - 1),
         onSelect: (command) => {
-          if (command.id === "search" || command.id === "read") {
-            aui.composer.setText(`/${command.id} `);
-          } else {
+          if (command.id === "read") aui.composer.setText("/read ");
+          else {
             aui.composer.setText("");
             void onCommand(command.id, "");
           }
         }
       },
       text
-    ),
-    (loading || running || notice) && /* @__PURE__ */ jsxs6(Box6, { paddingLeft: 2, height: 1, overflow: "hidden", children: [
-      (loading || running) && /* @__PURE__ */ jsx7(LoadingPrimitive.Spinner, {}),
-      /* @__PURE__ */ jsx7(Text6, { color: notice ? colors.warn : colors.muted, wrap: "truncate-end", children: notice ? cleanText(notice) : ` ${loading ? "\u6B63\u5728\u8BFB\u53D6\u5B98\u7F51\u2026" : "\u56DE\u590D\u4E2D\u2026"} \xB7 Esc \u505C\u6B62` })
-    ] }),
-    /* @__PURE__ */ jsxs6(Box6, { borderStyle: "round", borderColor: focused ? colors["line-strong"] : colors.line, paddingX: 1, children: [
-      /* @__PURE__ */ jsx7(Text6, { color: colors.prompt, children: "\u276F " }),
-      /* @__PURE__ */ jsx7(
-        ComposerPrimitive.Input,
-        {
-          autoFocus: true,
-          submitOnEnter: true,
-          flexGrow: 1,
-          placeholder: composerPlaceholder,
-          onSubmit: (text2) => {
-            const input = text2.trim();
-            if (!input) return;
-            if (menu.current?.submit(text2)) return;
-            if (input.startsWith("/")) {
-              const command = parseCommand(input);
-              aui.composer.setText("");
-              void onCommand(command?.name ?? "help", command?.args ?? "");
-            } else if (!running) {
-              onSubmit();
-              runtime.thread.composer.send();
-            }
-          }
-        },
-        `${page.path}:${revision}`
-      ),
-      /* @__PURE__ */ jsx7(Box6, { position: "absolute", bottom: -1, right: 1, children: /* @__PURE__ */ jsxs6(Text6, { color: colors.muted, backgroundColor: colors.bg, children: [
-        " ",
-        composerBrand.mark,
-        " \xB7 ",
-        composerBrand.model,
-        " "
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs6(Text6, { color: colors.muted, wrap: "truncate-end", children: [
-      /* @__PURE__ */ jsx7(Text6, { color: colors["fg-soft"], bold: true, children: "Tab" }),
-      ":\u5207\u6362 \u2502 ",
-      /* @__PURE__ */ jsx7(Text6, { bold: true, children: "PgUp/PgDn" }),
-      ":\u6EDA\u52A8 \u2502 ",
-      /* @__PURE__ */ jsx7(Text6, { bold: true, children: "/help" }),
-      " \u2502 Ctrl+C:\u9000\u51FA"
-    ] })
+    ) })
   ] });
 }
 
 // packages/cli/src/page-content.tsx
-import { Box as Box7, Text as Text7 } from "ink";
+import { Box as Box12, Text as Text12 } from "ink";
 import { memo } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// packages/cli/src/search-input.tsx
+import { TextInput } from "@assistant-ui/react-ink";
+import { Box as Box11, Text as Text11 } from "ink";
+import { useEffect as useEffect6, useRef as useRef7, useState as useState8 } from "react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function SearchInput({
+  path,
+  onSearch
+}) {
+  const { colors } = useTerminalStyle();
+  const [query, setQuery] = useState8(
+    () => new URL(path, "https://miantiao.me").searchParams.get("q") ?? ""
+  );
+  const timer = useRef7(void 0);
+  useEffect6(() => () => clearTimeout(timer.current), []);
+  return /* @__PURE__ */ jsxs11(Box11, { borderStyle: "round", borderColor: colors.line, paddingX: 1, marginY: 1, children: [
+    /* @__PURE__ */ jsx12(Text11, { color: colors.prompt, children: "\u276F " }),
+    /* @__PURE__ */ jsx12(
+      TextInput,
+      {
+        value: query,
+        autoFocus: false,
+        flexGrow: 1,
+        placeholder: "\u641C\u7D22\u6807\u9898\u3001\u63CF\u8FF0\u3001\u6B63\u6587\u4E0E\u6807\u7B7E",
+        onChange: (value) => {
+          setQuery(value);
+          clearTimeout(timer.current);
+          timer.current = setTimeout(() => onSearch(value.trim()), 300);
+        }
+      }
+    )
+  ] });
+}
+
+// packages/cli/src/page-content.tsx
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var PageContent = memo(function PageContent2({
   page,
   prompt,
   onSelect,
-  scroll
+  scroll,
+  onSearch
 }) {
   const { colors } = useTerminalStyle();
-  if (page.sections) return /* @__PURE__ */ jsx8(HomeSections, { page, onSelect, scroll });
-  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", marginBottom: 1, children: [
-    page.path !== "/" && /* @__PURE__ */ jsx8(Prompt, { text: prompt, command: true }),
-    /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingLeft: 2, paddingRight: 1, paddingTop: 1, children: [
-      page.path !== "/" && /* @__PURE__ */ jsxs7(Text7, { children: [
-        /* @__PURE__ */ jsx8(Text7, { color: colors.skill, children: "\u25C6 " }),
-        /* @__PURE__ */ jsx8(Text7, { color: colors.fg, bold: true, children: page.verb }),
-        /* @__PURE__ */ jsxs7(Text7, { color: colors.path, children: [
+  if (page.sections) return /* @__PURE__ */ jsx13(HomeSections, { page, onSelect, scroll });
+  return /* @__PURE__ */ jsxs12(Box12, { flexDirection: "column", marginBottom: 1, children: [
+    page.path !== "/" && /* @__PURE__ */ jsx13(Prompt, { text: prompt, command: true }),
+    /* @__PURE__ */ jsxs12(Box12, { flexDirection: "column", paddingLeft: 2, paddingRight: 1, paddingTop: 1, children: [
+      page.path !== "/" && /* @__PURE__ */ jsxs12(Text12, { children: [
+        /* @__PURE__ */ jsx13(Text12, { color: colors.skill, children: "\u25C6 " }),
+        /* @__PURE__ */ jsx13(Text12, { color: colors.fg, bold: true, children: page.verb }),
+        /* @__PURE__ */ jsxs12(Text12, { color: colors.path, children: [
           " ",
           cleanText(page.title)
         ] })
       ] }),
-      page.markdown && /* @__PURE__ */ jsx8(Markdown, { text: page.markdown }),
-      page.items.length > 0 && /* @__PURE__ */ jsx8(PageList, { items: page.items, onSelect, scroll })
+      page.path.startsWith("/search/") && /* @__PURE__ */ jsx13(SearchInput, { path: page.path, onSearch }),
+      page.markdown && /* @__PURE__ */ jsx13(Markdown, { text: page.markdown }),
+      page.items.length > 0 && /* @__PURE__ */ jsx13(PageList, { items: page.items, onSelect, scroll })
     ] })
   ] });
 });
 
 // packages/cli/src/terminal-layout.tsx
-import { Box as Box8, Text as Text8, useWindowSize as useWindowSize2 } from "ink";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Box as Box13, Text as Text13, useWindowSize as useWindowSize3 } from "ink";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function TerminalLayout({
   path,
   nav = [],
   children
 }) {
-  const { columns, rows } = useWindowSize2();
+  const { columns, rows } = useWindowSize3();
   const { colors } = useTerminalStyle();
   const directory = `~/miantiao.me${path === "/" ? "" : path.replace(/\/$/, "")}`;
-  return /* @__PURE__ */ jsxs8(
-    Box8,
+  return /* @__PURE__ */ jsxs13(
+    Box13,
     {
       width: columns,
       height: rows,
@@ -924,9 +1379,9 @@ function TerminalLayout({
       backgroundColor: colors.bg,
       overflow: "hidden",
       children: [
-        /* @__PURE__ */ jsxs8(Box8, { paddingX: 2, flexShrink: 0, children: [
-          /* @__PURE__ */ jsx9(Box8, { flexGrow: 1, flexShrink: 1, children: /* @__PURE__ */ jsx9(Text8, { color: colors.muted, wrap: "truncate-middle", children: cleanText(directory) }) }),
-          columns >= 70 && nav.map((link) => /* @__PURE__ */ jsx9(Box8, { marginLeft: 2, flexShrink: 0, children: /* @__PURE__ */ jsx9(Text8, { color: path.startsWith(link.href) ? colors.fg : colors.muted, children: cleanText(link.title) }) }, link.href))
+        /* @__PURE__ */ jsxs13(Box13, { paddingX: 2, flexShrink: 0, children: [
+          /* @__PURE__ */ jsx14(Box13, { flexGrow: 1, flexShrink: 1, children: /* @__PURE__ */ jsx14(Text13, { color: colors.muted, wrap: "truncate-middle", children: cleanText(directory) }) }),
+          columns >= 70 && nav.map((link) => /* @__PURE__ */ jsx14(Box13, { marginLeft: 2, flexShrink: 0, children: /* @__PURE__ */ jsx14(Text13, { color: path.startsWith(link.href) ? colors.fg : colors.muted, children: cleanText(link.title) }) }, link.href))
         ] }),
         children
       ]
@@ -935,65 +1390,69 @@ function TerminalLayout({
 }
 
 // packages/cli/src/console.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function Console({
   runtime,
   page,
   prompt,
   revision,
+  locationKey,
   site,
   loading,
-  notice,
+  panel,
   onCommand,
   onCancel,
-  onSelect
+  onSelect,
+  onSearch,
+  onClosePanel,
+  ...themePicker
 }) {
-  const scroll = useRef5(null);
-  return /* @__PURE__ */ jsx10(TerminalLayout, { path: page.path, nav: site.nav, children: /* @__PURE__ */ jsxs9(ThreadPrimitive2.Root, { flexGrow: 1, flexShrink: 1, minHeight: 0, children: [
-    /* @__PURE__ */ jsxs9(ScrollArea, { ref: scroll, selection: page.items.length > 0, children: [
-      /* @__PURE__ */ jsx10(PageContent, { page, prompt, onSelect, scroll }),
-      /* @__PURE__ */ jsx10(ChatThread, {})
-    ] }, `${page.path}:${revision}`),
-    /* @__PURE__ */ jsx10(
+  const scroll = useRef8(null);
+  const focusKey = `${locationKey}:${revision}`;
+  return /* @__PURE__ */ jsx15(TerminalLayout, { path: page.path, nav: site.nav, children: /* @__PURE__ */ jsxs14(ThreadPrimitive2.Root, { flexGrow: 1, flexShrink: 1, minHeight: 0, children: [
+    /* @__PURE__ */ jsxs14(
+      ScrollArea,
+      {
+        ref: scroll,
+        selection: page.items.length > 0,
+        active: !panel || panel.type === "notice",
+        children: [
+          /* @__PURE__ */ jsx15(
+            PageContent,
+            {
+              page,
+              prompt,
+              onSelect,
+              scroll,
+              onSearch
+            }
+          ),
+          /* @__PURE__ */ jsx15(ChatThread, {})
+        ]
+      },
+      focusKey
+    ),
+    /* @__PURE__ */ jsx15(
       Composer,
       {
         runtime,
-        page,
-        revision,
+        focusKey,
         loading,
-        notice,
+        panel,
+        site,
         onCommand,
         onCancel,
-        onSubmit: () => scroll.current?.end()
+        ...themePicker,
+        onSubmit: () => {
+          onClosePanel();
+          scroll.current?.end();
+        }
       }
     )
   ] }) });
 }
 
 // packages/cli/src/pages.ts
-function helpPage() {
-  return {
-    path: "/help/",
-    title: "\u53EF\u7528\u547D\u4EE4",
-    verb: "Help",
-    items: [],
-    markdown: terminalCommands.map(
-      (command) => `- \`/${command.id}${command.args ? ` ${command.args}` : ""}\` \u2014 ${command.description}`
-    ).join("\n") + "\n\n/ \u6253\u5F00\u547D\u4EE4\u9762\u677F\uFF1B\u2191\u2193 \u9009\u62E9\u3001Enter \u786E\u8BA4\u3001Esc \u5173\u95ED\u3002PgUp/PgDn \u6EDA\u52A8\u6B63\u6587\uFF1BTab \u5207\u6362\u8F93\u5165\u548C\u5185\u5BB9\uFF1BEsc \u505C\u6B62\uFF1BCtrl+C \u9000\u51FA\u3002"
-  };
-}
-function themePage() {
-  return {
-    path: "/theme/",
-    title: "\u9009\u62E9\u4E3B\u9898",
-    verb: "Theme",
-    items: themeOptions.map((theme) => ({
-      title: theme.name,
-      description: theme.description,
-      path: `/theme/${theme.id}`
-    }))
-  };
-}
 async function loadPage(client, path, signal) {
   let index = await client.getIndex(signal);
   const url = new URL(path, client.site);
@@ -1013,7 +1472,9 @@ async function loadPage(client, path, signal) {
     if (page.path === index.pages.home.path) {
       const welcome = page.sections?.find((section) => section.kind === "welcome");
       const menu = welcome?.menu ?? index.site.nav.map((link) => ({ ...link, command: void 0 }));
-      const siteOrigins = new Set([client.site, index.site.url].map((site) => new URL(site).origin));
+      const siteOrigins = new Set(
+        [client.site, index.site.url].map((site) => new URL(site).origin)
+      );
       page.items = menu.map((link) => {
         const destination = new URL(link.href, client.site);
         const external = !siteOrigins.has(destination.origin);
@@ -1059,10 +1520,8 @@ async function loadPage(client, path, signal) {
         description: post.description,
         path: post.url
       }));
-      if (!page.items.length) page.markdown = "\u6CA1\u6709\u627E\u5230\u76F8\u5173\u6587\u7AE0\u3002";
-    } else {
-      page.markdown = "\u8F93\u5165 `/search \u5173\u952E\u8BCD` \u641C\u7D22\u6587\u7AE0\u3002";
     }
+    if (query && !page.items.length) page.markdown = `\u6CA1\u6709\u627E\u5230\u4E0E\u300C${query}\u300D\u76F8\u5173\u7684\u6587\u7AE0`;
   } else if (pathname === "/rss/") {
     page.title = "\u8BA2\u9605 RSS";
     page.items = [{ title: index.site.feedUrl, path: index.site.feedUrl, external: true }];
@@ -1073,12 +1532,12 @@ async function loadPage(client, path, signal) {
 }
 
 // packages/cli/src/session.ts
-import { useApp, useInput as useInput5 } from "ink";
-import { useState as useState5 } from "react";
+import { useApp, useInput as useInput8 } from "ink";
+import { useCallback as useCallback2, useState as useState10 } from "react";
 
 // packages/cli/src/agent.ts
 import { useChatRuntime } from "@assistant-ui/ai-sdk";
-import { useEffect as useEffect3, useMemo as useMemo3 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo3 } from "react";
 
 // src/agent/transport.ts
 import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
@@ -1267,7 +1726,7 @@ function useTerminalAgent({ site, index, page, theme, setTheme, navigate }) {
     ]
   );
   const runtime = useChatRuntime({ transport });
-  useEffect3(() => () => runtime.thread.cancelRun(), [runtime]);
+  useEffect7(() => () => runtime.thread.cancelRun(), [runtime]);
   return runtime;
 }
 
@@ -1289,88 +1748,110 @@ async function openBrowser(input, site) {
 }
 
 // packages/cli/src/navigation.ts
-import { useCallback, useEffect as useEffect4, useRef as useRef6, useState as useState4 } from "react";
+import { useCallback, useEffect as useEffect8, useRef as useRef9, useState as useState9 } from "react";
 function useNavigation(client, initial) {
-  const [state, setState] = useState4({
+  const [state, setState] = useState9({
     ...initial,
     status: "idle",
-    notice: client.warning,
-    prompt: "/home"
+    panel: client.warning ? { type: "notice", text: client.warning } : null,
+    prompt: "/home",
+    locationKey: 0
   });
-  const active = useRef6(void 0);
-  useEffect4(
+  const active = useRef9(void 0);
+  useEffect8(
     () => () => {
-      active.current?.abort();
+      active.current?.controller.abort();
       active.current = void 0;
     },
     []
   );
   const cancel = useCallback(() => {
-    active.current?.abort();
+    active.current?.controller.abort();
     active.current = void 0;
     setState((current) => current.status === "idle" ? current : { ...current, status: "idle" });
   }, []);
-  const notify = useCallback((notice) => {
-    setState((current) => ({ ...current, notice }));
+  const setPanel = useCallback((panel) => {
+    setState((current) => ({ ...current, panel }));
   }, []);
-  const show = useCallback(
-    (page, prompt) => {
-      cancel();
-      setState((current) => ({ ...current, page, prompt, notice: "" }));
+  const notify = useCallback(
+    (text, tone) => {
+      setPanel({ type: "notice", text, tone });
     },
-    [cancel]
+    [setPanel]
   );
   const navigate = useCallback(
-    async (path, prompt = path) => {
-      active.current?.abort();
-      const request = new AbortController();
+    async (path, prompt = path, replace = false) => {
+      if (replace && active.current && !active.current.replace) return false;
+      active.current?.controller.abort();
+      const request = { controller: new AbortController(), replace };
       active.current = request;
-      setState((current) => ({ ...current, status: "loading", notice: "" }));
+      setState((current) => ({ ...current, status: "loading", panel: null }));
       let next;
       try {
-        next = await loadPage(client, path, request.signal);
+        next = await loadPage(client, path, request.controller.signal);
       } catch (error) {
         if (active.current === request) {
           active.current = void 0;
           setState((current) => ({
             ...current,
             status: "idle",
-            notice: error instanceof Error ? error.message : "\u65E0\u6CD5\u8BFB\u53D6\u5B98\u7F51\u5185\u5BB9\u3002"
+            panel: {
+              type: "notice",
+              tone: "error",
+              text: error instanceof Error ? error.message : "\u65E0\u6CD5\u8BFB\u53D6\u5B98\u7F51\u5185\u5BB9\u3002"
+            }
           }));
         }
         return false;
       }
       if (active.current !== request) return false;
       active.current = void 0;
-      setState({ ...next, status: "idle", notice: client.warning, prompt });
+      setState((current) => ({
+        ...next,
+        status: "idle",
+        panel: client.warning ? { type: "notice", text: client.warning } : null,
+        prompt,
+        locationKey: current.locationKey + Number(!replace)
+      }));
       return true;
     },
     [client]
   );
-  return { ...state, navigate, show, cancel, notify };
+  return { ...state, navigate, setPanel, cancel, notify };
 }
 
 // packages/cli/src/session.ts
 function useTerminalSession(client, initial) {
   const { exit } = useApp();
-  const [theme, setTheme] = useState5("auto");
-  const { index, page, prompt, status, notice, navigate, show, cancel, notify } = useNavigation(client, initial);
+  const [theme, setTheme] = useState10("auto");
+  const [previewTheme, setPreviewTheme] = useState10();
+  const { index, page, prompt, locationKey, status, panel, navigate, setPanel, cancel, notify } = useNavigation(client, initial);
   const runtime = useTerminalAgent({ site: client.site, index, page, theme, setTheme, navigate });
   const stop = () => {
     cancel();
     runtime.thread.cancelRun();
   };
-  useInput5((input, key) => {
+  useInput8((input, key) => {
     if (key.ctrl && input === "c") {
       stop();
       exit();
     }
   });
+  const onClosePanel = () => {
+    setPreviewTheme(void 0);
+    setPanel(null);
+  };
   const onCancel = () => {
-    stop();
-    notify("\u5DF2\u505C\u6B62\u3002");
+    if (panel) onClosePanel();
+    else stop();
+  };
+  const onApplyTheme = (preference) => {
+    setPreviewTheme(void 0);
+    setTheme(preference);
+    notify(`\u5DF2\u5207\u6362\u5230 ${getThemeName(preference)}`);
   };
   const onCommand = async (name, args) => {
+    setPreviewTheme(void 0);
     try {
       if (pageCommands[name] && !(name === "tags" && args)) {
         await navigate(pageCommands[name], `/${name}`);
@@ -1378,31 +1859,31 @@ function useTerminalSession(client, initial) {
       }
       switch (name) {
         case "help":
-          show(helpPage(), "/help");
+        case "rss":
+          setPanel({ type: name });
           break;
         case "theme": {
           const preference = parseThemePreference(args);
-          if (!args) show(themePage(), "/theme");
-          else if (preference) {
-            setTheme(preference);
-            notify(`\u4E3B\u9898\uFF1A${getThemeName(preference)}`);
-          } else notify("\u672A\u77E5\u4E3B\u9898\uFF0C\u8F93\u5165 /theme \u67E5\u770B\u53EF\u7528\u4E3B\u9898\u3002");
+          if (!args) setPanel({ type: "theme" });
+          else if (preference) onApplyTheme(preference);
+          else
+            notify(
+              `\u672A\u77E5\u4E3B\u9898\uFF1A${args}\u3002\u53EF\u9009\uFF1A${themeOptions.map((option) => option.id).join("\u3001")}`,
+              "error"
+            );
           break;
         }
         case "tags":
           await navigate(resolveTagPath(args, index), `/tags ${args}`);
           break;
         case "search":
-          await navigate(getSearchPath(args), `/search ${args}`);
+          await navigate(getSearchPath(args), `/search ${args}`.trim());
           break;
         case "read":
           await navigate(resolveReadPath(args, page), `/read ${args}`);
           break;
-        case "rss":
-          await navigate("/rss/", "/rss");
-          break;
         case "refresh":
-          await navigate(["/help/", "/theme/"].includes(page.path) ? "/" : page.path, "/refresh");
+          await navigate(page.path, "/refresh");
           break;
         case "open":
           await openBrowser(resolveOpenTarget(args, page), client.site);
@@ -1410,57 +1891,68 @@ function useTerminalSession(client, initial) {
         case "clear":
           stop();
           runtime.thread.reset();
-          notify("\u5BF9\u8BDD\u5DF2\u6E05\u7A7A\u3002");
+          onClosePanel();
           break;
         case "quit":
           stop();
           exit();
           break;
         default:
-          notify(`\u672A\u77E5\u547D\u4EE4 /${name}\uFF0C\u8F93\u5165 /help \u67E5\u770B\u53EF\u7528\u547D\u4EE4\u3002`);
+          notify(`\u672A\u77E5\u547D\u4EE4\uFF1A/${name}\uFF0C\u8F93\u5165 /help \u67E5\u770B\u53EF\u7528\u547D\u4EE4`, "error");
       }
     } catch (error) {
-      notify(error instanceof Error ? error.message : "\u65E0\u6CD5\u6267\u884C\u547D\u4EE4\u3002");
+      notify(error instanceof Error ? error.message : "\u65E0\u6CD5\u6267\u884C\u547D\u4EE4\u3002", "error");
     }
   };
   const onSelect = (path, external = false) => {
-    if (path.startsWith("/theme/")) void onCommand("theme", path.slice("/theme/".length));
-    else if (external) void onCommand("open", path);
+    if (external) void onCommand("open", path);
     else void navigate(path);
   };
+  const onSearch = useCallback2(
+    (query) => {
+      void navigate(getSearchPath(query), `/search ${query}`.trim(), true);
+    },
+    [navigate]
+  );
   return {
     runtime,
     page,
     revision: index.revision,
+    locationKey,
     prompt,
     site: index.site,
     loading: status === "loading",
-    notice,
+    panel,
     onCommand,
     onCancel,
+    onClosePanel,
     onSelect,
-    theme
+    onSearch,
+    theme: previewTheme ?? theme,
+    savedTheme: theme,
+    onPreviewTheme: setPreviewTheme,
+    onApplyTheme
   };
 }
 
 // packages/cli/src/app.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function Session({
   client,
   initial,
   width
 }) {
   const { theme, ...session } = useTerminalSession(client, initial);
-  return /* @__PURE__ */ jsx11(TerminalTheme, { preference: theme, width, children: /* @__PURE__ */ jsx11(AssistantRuntimeProvider, { runtime: session.runtime, children: /* @__PURE__ */ jsx11(Console, { ...session }) }) });
+  return /* @__PURE__ */ jsx16(TerminalTheme, { preference: theme, width, children: /* @__PURE__ */ jsx16(AssistantRuntimeProvider, { runtime: session.runtime, children: /* @__PURE__ */ jsx16(Console, { ...session }) }) });
 }
 function App({ site }) {
   const { exit } = useApp2();
-  const { columns } = useWindowSize3();
-  const [client] = useState6(() => new TerminalClient(site));
-  const [state, setState] = useState6({ status: "loading" });
-  const [attempt, setAttempt] = useState6(0);
+  const { columns } = useWindowSize4();
+  const [client] = useState11(() => new TerminalClient(site));
+  const [state, setState] = useState11({ status: "loading" });
+  const [attempt, setAttempt] = useState11(0);
   const width = Math.max(10, columns - 5);
-  useEffect5(() => {
+  useEffect9(() => {
     const request = new AbortController();
     loadPage(client, "/", request.signal).then((content) => {
       if (!request.signal.aborted) setState({ status: "ready", content });
@@ -1473,7 +1965,7 @@ function App({ site }) {
     });
     return () => request.abort();
   }, [client, attempt]);
-  useInput6(
+  useInput9(
     (input, key) => {
       if (key.ctrl && input === "c" || input === "q") exit();
       else if (state.status === "error" && (key.return || input === "r" || input === "/refresh")) {
@@ -1484,17 +1976,17 @@ function App({ site }) {
     { isActive: state.status !== "ready" }
   );
   if (state.status === "ready")
-    return /* @__PURE__ */ jsx11(Session, { client, initial: state.content, width });
-  return /* @__PURE__ */ jsx11(TerminalTheme, { preference: "auto", width, children: /* @__PURE__ */ jsx11(TerminalLayout, { path: "/", children: /* @__PURE__ */ jsxs10(Box9, { flexDirection: "column", flexGrow: 1, padding: 2, children: [
-    /* @__PURE__ */ jsxs10(Text9, { children: [
+    return /* @__PURE__ */ jsx16(Session, { client, initial: state.content, width });
+  return /* @__PURE__ */ jsx16(TerminalTheme, { preference: "auto", width, children: /* @__PURE__ */ jsx16(TerminalLayout, { path: "/", children: /* @__PURE__ */ jsxs15(Box14, { flexDirection: "column", flexGrow: 1, padding: 2, children: [
+    /* @__PURE__ */ jsxs15(Text14, { children: [
       "\u25C6 ",
-      state.status === "error" ? state.message : "\u6B63\u5728\u8BFB\u53D6\u5B98\u7F51\u2026"
+      state.status === "error" ? state.message : "\u601D\u8003\u4E2D\u2026\u2026"
     ] }),
-    /* @__PURE__ */ jsx11(Text9, { children: state.status === "error" ? "Enter \u91CD\u8BD5 \xB7 q \u9000\u51FA" : "Ctrl+C \u9000\u51FA" })
+    /* @__PURE__ */ jsx16(Text14, { children: state.status === "error" ? "Enter \u91CD\u8BD5 \xB7 q \u9000\u51FA" : "Ctrl+C \u9000\u51FA" })
   ] }) }) });
 }
 async function run(site) {
-  const app = render(/* @__PURE__ */ jsx11(App, { site }), {
+  const app = render(/* @__PURE__ */ jsx16(App, { site }), {
     exitOnCtrlC: false,
     alternateScreen: true,
     incrementalRendering: true