miantiao.me 0.1.1 → 0.1.2

package/README.md

@@ -1,6 +1,6 @@
 # miantiao.me
 
-在终端浏览面条的文章、项目和标签，也可以直接向 AI 助手提问。界面使用 assistant-ui Ink：固定窗口、底部输入框和独立滚动的内容区，与 [miantiao.me](https://miantiao.me) 的主题、欢迎页和会话块保持一致。
+在终端浏览面条的文章、项目和标签，也可以直接向 AI 助手提问。界面使用 assistant-ui Ink：铺满终端、底部输入框和独立滚动的内容区，与 [miantiao.me](https://miantiao.me) 的主题、欢迎页和会话块保持一致。
 
 ```sh
 npx miantiao.me
@@ -8,7 +8,7 @@ npx miantiao.me
 
 需要 Node.js 22.14 或更新版本，以及交互式终端。文章、项目、首页、关于和搜索索引从官网读取；官网部署后，下一次启动、导航或 `/refresh` 就能读取更新内容。已打开的终端无需重装包。TUI 功能升级仍通过 npm 版本发布。
 
-输入普通文字可向 AI 助手提问。斜杠命令在本地执行：
+输入普通文字可向 AI 助手提问。输入 `/` 展开命令面板，可按命令名或中文说明筛选，用 ↑↓ 选择、Enter 确认、Esc 关闭。选择 `/search` 或 `/read` 后继续填写参数。斜杠命令在本地执行：
 
 | 命令                                 | 用途                       |
 | ------------------------------------ | -------------------------- |
@@ -24,7 +24,7 @@ npx miantiao.me
 | `/clear`                             | 清空 AI 对话上下文         |
 | `/quit`                              | 退出                       |
 
-PgUp/PgDn 滚动正文，输入框始终固定在底部。Tab 在输入框和内容区之间切换；列表中用 ↑↓ 选择、Enter 打开，文章中用 ↑↓、Home、End 滚动。Esc 取消加载或停止回复，Ctrl+C 退出。编号对应当前页面的结果列表，可用于 `/read 1` 或 `/open 1`。`/clear` 清空 AI 会话。退出后恢复原终端画面。
+PgUp/PgDn 滚动正文，输入框始终固定在底部。Tab 在输入框和内容区之间切换；内容区按 `/` 可返回输入框打开命令面板。列表中用 ↑↓ 选择、Enter 打开，文章中用 ↑↓、Home、End 滚动。Esc 取消加载或停止回复，Ctrl+C 退出。编号对应当前页面的结果列表，可用于 `/read 1` 或 `/open 1`。`/clear` 清空 AI 会话。退出后恢复原终端画面。
 
 支持 GrokNight、GrokDay、TokyoNight、RosePine Moon、Oscura Midnight 和 `auto`。自动模式参考终端的 `COLORFGBG`；未提供时使用 GrokNight。可用 `/theme light` 或 `/theme dark` 显式选择。
 

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

@@ -4,8 +4,8 @@ import {
 
 // packages/cli/src/app.tsx
 import { AssistantRuntimeProvider } from "@assistant-ui/react-ink";
-import { Box as Box8, render, Text as Text8, useApp as useApp2, useInput as useInput4, useWindowSize as useWindowSize2 } from "ink";
-import { useEffect as useEffect4, useState as useState5 } from "react";
+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";
 
 // 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 useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 
 // packages/cli/src/chat.tsx
 import { ThreadPrimitive, useAuiState } from "@assistant-ui/react-ink";
@@ -644,7 +644,8 @@ function ChatThread() {
 
 // packages/cli/src/composer.tsx
 import { ComposerPrimitive, LoadingPrimitive, useAui, useAuiState as useAuiState2 } from "@assistant-ui/react-ink";
-import { Box as Box5, Text as Text5, useFocusManager } from "ink";
+import { Box as Box6, Text as Text6, useFocusManager, useInput as useInput4 } from "ink";
+import { useEffect as useEffect2, useRef as useRef4 } from "react";
 
 // src/agent/appearance.ts
 var composerPlaceholder = "\u95EE\u70B9\u4EC0\u4E48\uFF0C\u6216\u8F93\u5165 / \u67E5\u770B\u547D\u4EE4";
@@ -680,8 +681,103 @@ function getSearchPath(query) {
   return query ? `/search/?q=${encodeURIComponent(query)}` : "/search/";
 }
 
-// packages/cli/src/composer.tsx
+// 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";
+
+// packages/cli/src/commands.ts
+var terminalCommands = [
+  ...commands.map((command) => command.id === "tags" ? { ...command, args: "[\u6807\u7B7E]" } : command),
+  { id: "read", args: "<\u7F16\u53F7\u3001slug \u6216\u8DEF\u5F84>", description: "\u9605\u8BFB\u6587\u7AE0\u5168\u6587" },
+  { id: "open", args: "[\u7F16\u53F7\u6216 URL]", description: "\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u5F53\u524D\u9875\u9762\u6216\u94FE\u63A5" },
+  { id: "refresh", description: "\u4ECE\u5B98\u7F51\u5237\u65B0\u5F53\u524D\u9875\u9762" },
+  { id: "quit", description: "\u9000\u51FA" }
+];
+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));
+}
+function numberedItem(input, page) {
+  if (!/^\d+$/.test(input)) return void 0;
+  const item = page.items[Number(input) - 1];
+  if (!item) throw new Error("\u5F53\u524D\u5217\u8868\u6CA1\u6709\u8FD9\u4E2A\u7F16\u53F7\uFF0C\u8BF7\u4F7F\u7528\u5217\u8868\u4E2D\u663E\u793A\u7684\u7F16\u53F7\u3002");
+  return item;
+}
+function resolveReadPath(input, page) {
+  if (!input) throw new Error("\u8F93\u5165 /read <\u7F16\u53F7\u3001slug \u6216\u7AD9\u5185\u8DEF\u5F84> \u9605\u8BFB\u6587\u7AE0\u3002");
+  const item = numberedItem(input, page);
+  if (item) {
+    if (item.external || !item.path.startsWith("/posts/"))
+      throw new Error("\u8FD9\u4E2A\u7F16\u53F7\u4E0D\u662F\u6587\u7AE0\uFF0C\u8BF7\u4F7F\u7528 /blog \u6216 /search \u67E5\u627E\u6587\u7AE0\u3002");
+    return item.path;
+  }
+  return input.startsWith("/") ? input : `/posts/${input.replace(/\/$/, "")}/`;
+}
+function resolveOpenTarget(input, page) {
+  return numberedItem(input, page)?.path ?? (input || page.path);
+}
+function resolveTagPath(input, index) {
+  const tag = index.tags.find((tag2) => tag2.name === input);
+  if (!tag) throw new Error("\u627E\u4E0D\u5230\u8FD9\u4E2A\u6807\u7B7E\uFF0C\u8BF7\u4F7F\u7528 /tags \u67E5\u770B\u53EF\u7528\u6807\u7B7E\u3002");
+  return tag.path;
+}
+
+// packages/cli/src/command-menu.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function CommandMenu({
+  text,
+  focused,
+  onSelect,
+  ref
+}) {
+  const { colors } = useTerminalStyle();
+  const { rows } = useWindowSize();
+  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 start = Math.max(0, selected - visibleCount + 1);
+  useImperativeHandle2(ref, () => ({
+    submit: (input) => {
+      if (!open || input !== text || !matches.length) return false;
+      onSelect(matches[selected]);
+      return true;
+    },
+    dismiss: () => {
+      if (!open) return false;
+      setDismissed(true);
+      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 });
+  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
+        ] }) }),
+        /* @__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" })
+  ] });
+}
+
+// packages/cli/src/composer.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function Composer({
   runtime,
   page,
@@ -689,34 +785,69 @@ function Composer({
   loading,
   notice,
   onCommand,
+  onCancel,
   onSubmit
 }) {
   const { colors } = useTerminalStyle();
   const aui = useAui();
-  const { activeId } = useFocusManager();
+  const { activeId, focus, focusNext } = useFocusManager();
   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";
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginX: 2, flexShrink: 0, children: [
-    (loading || running || notice) && /* @__PURE__ */ jsxs5(Box5, { paddingLeft: 2, height: 1, overflow: "hidden", children: [
-      (loading || running) && /* @__PURE__ */ jsx6(LoadingPrimitive.Spinner, {}),
-      /* @__PURE__ */ jsx6(Text5, { 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` })
+  useEffect2(() => {
+    if (activeId && activeId !== "content") inputFocusId.current = activeId;
+  }, [activeId]);
+  useInput4((input, key) => {
+    if (key.escape) {
+      if (!menu.current?.dismiss()) onCancel();
+      if (inputFocusId.current) focus(inputFocusId.current);
+    }
+    if (input === "/" && activeId === "content") {
+      focusNext();
+      aui.composer.setText("/");
+    }
+  });
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", marginX: 2, flexShrink: 0, children: [
+    /* @__PURE__ */ jsx7(
+      CommandMenu,
+      {
+        ref: menu,
+        text,
+        focused,
+        onSelect: (command) => {
+          if (command.id === "search" || command.id === "read") {
+            aui.composer.setText(`/${command.id} `);
+          } 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__ */ jsxs5(Box5, { borderStyle: "round", borderColor: focused ? colors["line-strong"] : colors.line, paddingX: 1, children: [
-      /* @__PURE__ */ jsx6(Text5, { color: colors.prompt, children: "\u276F " }),
-      /* @__PURE__ */ jsx6(
+    /* @__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: (text) => {
-            const input = text.trim();
+          onSubmit: (text2) => {
+            const input = text2.trim();
             if (!input) return;
-            const command = parseCommand(input);
-            if (command) {
+            if (menu.current?.submit(text2)) return;
+            if (input.startsWith("/")) {
+              const command = parseCommand(input);
               aui.composer.setText("");
-              void onCommand(command.name, command.args);
+              void onCommand(command?.name ?? "help", command?.args ?? "");
             } else if (!running) {
               onSubmit();
               runtime.thread.composer.send();
@@ -725,7 +856,7 @@ function Composer({
         },
         `${page.path}:${revision}`
       ),
-      /* @__PURE__ */ jsx6(Box5, { position: "absolute", bottom: -1, right: 1, children: /* @__PURE__ */ jsxs5(Text5, { color: colors.muted, backgroundColor: colors.bg, children: [
+      /* @__PURE__ */ jsx7(Box6, { position: "absolute", bottom: -1, right: 1, children: /* @__PURE__ */ jsxs6(Text6, { color: colors.muted, backgroundColor: colors.bg, children: [
         " ",
         composerBrand.mark,
         " \xB7 ",
@@ -733,21 +864,21 @@ function Composer({
         " "
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs5(Text5, { color: colors.muted, wrap: "truncate-end", children: [
-      /* @__PURE__ */ jsx6(Text5, { color: colors["fg-soft"], bold: true, children: "Tab" }),
+    /* @__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__ */ jsx6(Text5, { bold: true, children: "PgUp/PgDn" }),
+      /* @__PURE__ */ jsx7(Text6, { bold: true, children: "PgUp/PgDn" }),
       ":\u6EDA\u52A8 \u2502 ",
-      /* @__PURE__ */ jsx6(Text5, { bold: true, children: "/help" }),
+      /* @__PURE__ */ jsx7(Text6, { bold: true, children: "/help" }),
       " \u2502 Ctrl+C:\u9000\u51FA"
     ] })
   ] });
 }
 
 // packages/cli/src/page-content.tsx
-import { Box as Box6, Text as Text6 } from "ink";
+import { Box as Box7, Text as Text7 } from "ink";
 import { memo } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var PageContent = memo(function PageContent2({
   page,
   prompt,
@@ -755,96 +886,56 @@ var PageContent = memo(function PageContent2({
   scroll
 }) {
   const { colors } = useTerminalStyle();
-  if (page.sections) return /* @__PURE__ */ jsx7(HomeSections, { page, onSelect, scroll });
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", marginBottom: 1, children: [
-    page.path !== "/" && /* @__PURE__ */ jsx7(Prompt, { text: prompt, command: true }),
-    /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", paddingLeft: 2, paddingRight: 1, paddingTop: 1, children: [
-      page.path !== "/" && /* @__PURE__ */ jsxs6(Text6, { children: [
-        /* @__PURE__ */ jsx7(Text6, { color: colors.skill, children: "\u25C6 " }),
-        /* @__PURE__ */ jsx7(Text6, { color: colors.fg, bold: true, children: page.verb }),
-        /* @__PURE__ */ jsxs6(Text6, { color: colors.path, children: [
+  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: [
           " ",
           cleanText(page.title)
         ] })
       ] }),
-      page.markdown && /* @__PURE__ */ jsx7(Markdown, { text: page.markdown }),
-      page.items.length > 0 && /* @__PURE__ */ jsx7(PageList, { items: page.items, onSelect, scroll })
+      page.markdown && /* @__PURE__ */ jsx8(Markdown, { text: page.markdown }),
+      page.items.length > 0 && /* @__PURE__ */ jsx8(PageList, { items: page.items, onSelect, scroll })
     ] })
   ] });
 });
 
-// packages/cli/src/window.tsx
-import { Box as Box7, Text as Text7, useWindowSize } from "ink";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-function windowWidth(columns) {
-  return Math.min(120, columns >= 84 ? columns - 4 : columns);
-}
-function Window({
-  name,
+// 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";
+function TerminalLayout({
   path,
   nav = [],
   children
 }) {
-  const { columns, rows } = useWindowSize();
+  const { columns, rows } = useWindowSize2();
   const { colors } = useTerminalStyle();
-  const width = windowWidth(columns);
-  const margin = columns >= 80 && rows >= 24 ? 1 : 0;
   const directory = `~/miantiao.me${path === "/" ? "" : path.replace(/\/$/, "")}`;
-  return /* @__PURE__ */ jsx8(
-    Box7,
+  return /* @__PURE__ */ jsxs8(
+    Box8,
     {
       width: columns,
       height: rows,
       flexDirection: "column",
-      alignItems: "center",
-      paddingY: margin,
-      backgroundColor: colors.page,
-      children: /* @__PURE__ */ jsxs7(
-        Box7,
-        {
-          width,
-          height: Math.max(1, rows - margin * 2),
-          flexDirection: "column",
-          borderStyle: "round",
-          borderColor: colors.line,
-          backgroundColor: colors.bg,
-          overflow: "hidden",
-          children: [
-            /* @__PURE__ */ jsxs7(
-              Box7,
-              {
-                paddingX: 2,
-                flexShrink: 0,
-                borderStyle: "single",
-                borderTop: false,
-                borderLeft: false,
-                borderRight: false,
-                borderColor: colors.line,
-                children: [
-                  /* @__PURE__ */ jsx8(Text7, { color: colors.err, children: "\u25CF " }),
-                  /* @__PURE__ */ jsx8(Text7, { color: colors.warn, children: "\u25CF " }),
-                  /* @__PURE__ */ jsx8(Text7, { color: colors.ok, children: "\u25CF " }),
-                  /* @__PURE__ */ jsx8(Box7, { flexGrow: 1, justifyContent: "center", paddingRight: 6, children: /* @__PURE__ */ jsxs7(Text7, { color: colors.muted, wrap: "truncate-end", children: [
-                    cleanText(name),
-                    " \u2014 miantiao.me"
-                  ] }) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs7(Box7, { paddingX: 2, paddingTop: 1, flexShrink: 0, children: [
-              /* @__PURE__ */ jsx8(Box7, { flexGrow: 1, flexShrink: 1, children: /* @__PURE__ */ jsx8(Text7, { color: colors.muted, wrap: "truncate-middle", children: cleanText(directory) }) }),
-              width >= 70 && nav.map((link) => /* @__PURE__ */ jsx8(Box7, { marginLeft: 2, flexShrink: 0, children: /* @__PURE__ */ jsx8(Text7, { color: path.startsWith(link.href) ? colors.fg : colors.muted, children: cleanText(link.title) }) }, link.href))
-            ] }),
-            children
-          ]
-        }
-      )
+      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))
+        ] }),
+        children
+      ]
     }
   );
 }
 
 // packages/cli/src/console.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function Console({
   runtime,
   page,
@@ -854,15 +945,16 @@ function Console({
   loading,
   notice,
   onCommand,
+  onCancel,
   onSelect
 }) {
-  const scroll = useRef4(null);
-  return /* @__PURE__ */ jsx9(Window, { name: site.name, path: page.path, nav: site.nav, children: /* @__PURE__ */ jsxs8(ThreadPrimitive2.Root, { flexGrow: 1, flexShrink: 1, minHeight: 0, children: [
-    /* @__PURE__ */ jsxs8(ScrollArea, { ref: scroll, selection: page.items.length > 0, children: [
-      /* @__PURE__ */ jsx9(PageContent, { page, prompt, onSelect, scroll }),
-      /* @__PURE__ */ jsx9(ChatThread, {})
+  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__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Composer,
       {
         runtime,
@@ -871,6 +963,7 @@ function Console({
         loading,
         notice,
         onCommand,
+        onCancel,
         onSubmit: () => scroll.current?.end()
       }
     )
@@ -878,13 +971,6 @@ function Console({
 }
 
 // packages/cli/src/pages.ts
-var terminalCommands = [
-  ...commands.map((command) => command.id === "tags" ? { ...command, args: "[\u6807\u7B7E]" } : command),
-  { id: "read", args: "<\u7F16\u53F7\u3001slug \u6216\u8DEF\u5F84>", description: "\u9605\u8BFB\u6587\u7AE0\u5168\u6587" },
-  { id: "open", args: "[\u7F16\u53F7\u6216 URL]", description: "\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u5F53\u524D\u9875\u9762\u6216\u94FE\u63A5" },
-  { id: "refresh", description: "\u4ECE\u5B98\u7F51\u5237\u65B0\u5F53\u524D\u9875\u9762" },
-  { id: "quit", description: "\u9000\u51FA" }
-];
 function helpPage() {
   return {
     path: "/help/",
@@ -893,7 +979,7 @@ function helpPage() {
     items: [],
     markdown: terminalCommands.map(
       (command) => `- \`/${command.id}${command.args ? ` ${command.args}` : ""}\` \u2014 ${command.description}`
-    ).join("\n") + "\n\nPgUp/PgDn \u6EDA\u52A8\u6B63\u6587\uFF1BTab \u5207\u6362\u8F93\u5165\u548C\u5185\u5BB9\uFF1B\u2191\u2193 \u9009\u62E9\uFF0CEnter \u6253\u5F00\uFF1BEsc \u505C\u6B62\uFF1BCtrl+C \u9000\u51FA\u3002"
+    ).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() {
@@ -987,12 +1073,12 @@ async function loadPage(client, path, signal) {
 }
 
 // packages/cli/src/session.ts
-import { useApp, useInput as useInput3 } from "ink";
-import { useState as useState4 } from "react";
+import { useApp, useInput as useInput5 } from "ink";
+import { useState as useState5 } from "react";
 
 // packages/cli/src/agent.ts
 import { useChatRuntime } from "@assistant-ui/ai-sdk";
-import { useEffect as useEffect2, useMemo as useMemo3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo3 } from "react";
 
 // src/agent/transport.ts
 import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
@@ -1181,7 +1267,7 @@ function useTerminalAgent({ site, index, page, theme, setTheme, navigate }) {
     ]
   );
   const runtime = useChatRuntime({ transport });
-  useEffect2(() => () => runtime.thread.cancelRun(), [runtime]);
+  useEffect3(() => () => runtime.thread.cancelRun(), [runtime]);
   return runtime;
 }
 
@@ -1202,43 +1288,17 @@ async function openBrowser(input, site) {
   });
 }
 
-// packages/cli/src/commands.ts
-function numberedItem(input, page) {
-  if (!/^\d+$/.test(input)) return void 0;
-  const item = page.items[Number(input) - 1];
-  if (!item) throw new Error("\u5F53\u524D\u5217\u8868\u6CA1\u6709\u8FD9\u4E2A\u7F16\u53F7\uFF0C\u8BF7\u4F7F\u7528\u5217\u8868\u4E2D\u663E\u793A\u7684\u7F16\u53F7\u3002");
-  return item;
-}
-function resolveReadPath(input, page) {
-  if (!input) throw new Error("\u8F93\u5165 /read <\u7F16\u53F7\u3001slug \u6216\u7AD9\u5185\u8DEF\u5F84> \u9605\u8BFB\u6587\u7AE0\u3002");
-  const item = numberedItem(input, page);
-  if (item) {
-    if (item.external || !item.path.startsWith("/posts/"))
-      throw new Error("\u8FD9\u4E2A\u7F16\u53F7\u4E0D\u662F\u6587\u7AE0\uFF0C\u8BF7\u4F7F\u7528 /blog \u6216 /search \u67E5\u627E\u6587\u7AE0\u3002");
-    return item.path;
-  }
-  return input.startsWith("/") ? input : `/posts/${input.replace(/\/$/, "")}/`;
-}
-function resolveOpenTarget(input, page) {
-  return numberedItem(input, page)?.path ?? (input || page.path);
-}
-function resolveTagPath(input, index) {
-  const tag = index.tags.find((tag2) => tag2.name === input);
-  if (!tag) throw new Error("\u627E\u4E0D\u5230\u8FD9\u4E2A\u6807\u7B7E\uFF0C\u8BF7\u4F7F\u7528 /tags \u67E5\u770B\u53EF\u7528\u6807\u7B7E\u3002");
-  return tag.path;
-}
-
 // packages/cli/src/navigation.ts
-import { useCallback, useEffect as useEffect3, useRef as useRef5, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect4, useRef as useRef6, useState as useState4 } from "react";
 function useNavigation(client, initial) {
-  const [state, setState] = useState3({
+  const [state, setState] = useState4({
     ...initial,
     status: "idle",
     notice: client.warning,
     prompt: "/home"
   });
-  const active = useRef5(void 0);
-  useEffect3(
+  const active = useRef6(void 0);
+  useEffect4(
     () => () => {
       active.current?.abort();
       active.current = void 0;
@@ -1293,23 +1353,23 @@ function useNavigation(client, initial) {
 // packages/cli/src/session.ts
 function useTerminalSession(client, initial) {
   const { exit } = useApp();
-  const [theme, setTheme] = useState4("auto");
+  const [theme, setTheme] = useState5("auto");
   const { index, page, prompt, status, notice, navigate, show, cancel, notify } = useNavigation(client, initial);
   const runtime = useTerminalAgent({ site: client.site, index, page, theme, setTheme, navigate });
   const stop = () => {
     cancel();
     runtime.thread.cancelRun();
   };
-  useInput3((input, key) => {
-    if (key.escape) {
-      stop();
-      notify("\u5DF2\u505C\u6B62\u3002");
-    }
+  useInput5((input, key) => {
     if (key.ctrl && input === "c") {
       stop();
       exit();
     }
   });
+  const onCancel = () => {
+    stop();
+    notify("\u5DF2\u505C\u6B62\u3002");
+  };
   const onCommand = async (name, args) => {
     try {
       if (pageCommands[name] && !(name === "tags" && args)) {
@@ -1377,29 +1437,30 @@ function useTerminalSession(client, initial) {
     loading: status === "loading",
     notice,
     onCommand,
+    onCancel,
     onSelect,
     theme
   };
 }
 
 // packages/cli/src/app.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function Session({
   client,
   initial,
   width
 }) {
   const { theme, ...session } = useTerminalSession(client, initial);
-  return /* @__PURE__ */ jsx10(TerminalTheme, { preference: theme, width, children: /* @__PURE__ */ jsx10(AssistantRuntimeProvider, { runtime: session.runtime, children: /* @__PURE__ */ jsx10(Console, { ...session }) }) });
+  return /* @__PURE__ */ jsx11(TerminalTheme, { preference: theme, width, children: /* @__PURE__ */ jsx11(AssistantRuntimeProvider, { runtime: session.runtime, children: /* @__PURE__ */ jsx11(Console, { ...session }) }) });
 }
 function App({ site }) {
   const { exit } = useApp2();
-  const { columns } = useWindowSize2();
-  const [client] = useState5(() => new TerminalClient(site));
-  const [state, setState] = useState5({ status: "loading" });
-  const [attempt, setAttempt] = useState5(0);
-  const width = Math.max(10, windowWidth(columns) - 7);
-  useEffect4(() => {
+  const { columns } = useWindowSize3();
+  const [client] = useState6(() => new TerminalClient(site));
+  const [state, setState] = useState6({ status: "loading" });
+  const [attempt, setAttempt] = useState6(0);
+  const width = Math.max(10, columns - 5);
+  useEffect5(() => {
     const request = new AbortController();
     loadPage(client, "/", request.signal).then((content) => {
       if (!request.signal.aborted) setState({ status: "ready", content });
@@ -1412,7 +1473,7 @@ function App({ site }) {
     });
     return () => request.abort();
   }, [client, attempt]);
-  useInput4(
+  useInput6(
     (input, key) => {
       if (key.ctrl && input === "c" || input === "q") exit();
       else if (state.status === "error" && (key.return || input === "r" || input === "/refresh")) {
@@ -1423,17 +1484,17 @@ function App({ site }) {
     { isActive: state.status !== "ready" }
   );
   if (state.status === "ready")
-    return /* @__PURE__ */ jsx10(Session, { client, initial: state.content, width });
-  return /* @__PURE__ */ jsx10(TerminalTheme, { preference: "auto", width, children: /* @__PURE__ */ jsx10(Window, { name: "miantiao.me", path: "/", children: /* @__PURE__ */ jsxs9(Box8, { flexDirection: "column", flexGrow: 1, padding: 2, children: [
-    /* @__PURE__ */ jsxs9(Text8, { children: [
+    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: [
       "\u25C6 ",
       state.status === "error" ? state.message : "\u6B63\u5728\u8BFB\u53D6\u5B98\u7F51\u2026"
     ] }),
-    /* @__PURE__ */ jsx10(Text8, { children: state.status === "error" ? "Enter \u91CD\u8BD5 \xB7 q \u9000\u51FA" : "Ctrl+C \u9000\u51FA" })
+    /* @__PURE__ */ jsx11(Text9, { children: state.status === "error" ? "Enter \u91CD\u8BD5 \xB7 q \u9000\u51FA" : "Ctrl+C \u9000\u51FA" })
   ] }) }) });
 }
 async function run(site) {
-  const app = render(/* @__PURE__ */ jsx10(App, { site }), {
+  const app = render(/* @__PURE__ */ jsx11(App, { site }), {
     exitOnCtrlC: false,
     alternateScreen: true,
     incrementalRendering: true

package/dist/index.js

@@ -16,14 +16,14 @@ try {
       "miantiao.me \u2014 \u7EC8\u7AEF\u91CC\u7684\u9762\u6761\n\n\u7528\u6CD5\uFF1Anpx miantiao.me [--site <URL>]\n\n  -h, --help     \u67E5\u770B\u5E2E\u52A9\n  -v, --version  \u67E5\u770B\u7248\u672C\n  --site <URL>  \u5B98\u7F51\u5730\u5740\uFF0C\u4E5F\u53EF\u6307\u5411\u672C\u5730\u9884\u89C8\n\n\u8FDB\u5165\u540E\u8F93\u5165 /help \u67E5\u770B\u547D\u4EE4\uFF0CCtrl+C \u9000\u51FA\u3002\n\u9700\u8981 Node.js 22.14 \u6216\u66F4\u65B0\u7248\u672C\uFF0C\u4EE5\u53CA\u53EF\u4EA4\u4E92\u7684\u7EC8\u7AEF\u3002"
     );
   } else if (values.version) {
-    console.log("0.1.1");
+    console.log("0.1.2");
   } else {
     const site = new URL(values.site);
     if (!["https:", "http:"].includes(site.protocol) || site.username || site.password)
       throw new Error("--site \u5FC5\u987B\u4E3A\u4E0D\u542B\u51ED\u8BC1\u7684 HTTP \u6216 HTTPS \u5730\u5740\u3002");
     if (!process.stdin.isTTY || !process.stdout.isTTY)
       throw new Error("\u8BF7\u5728\u4EA4\u4E92\u5F0F\u7EC8\u7AEF\u8FD0\u884C npx miantiao.me\uFF1B\u4F7F\u7528 --help \u67E5\u770B\u5E2E\u52A9\u3002");
-    const { run } = await import("./app-ZZYXIU6G.js");
+    const { run } = await import("./app-IW4THTCR.js");
     await run(site.origin);
   }
 } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miantiao.me",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "在终端浏览 miantiao.me，与面条的 AI 助手对话。",
   "type": "module",
   "bin": {