miantiao.me 0.1.0 → 0.1.1

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
@@ -24,7 +24,7 @@ npx miantiao.me
 | `/clear`                             | 清空 AI 对话上下文         |
 | `/quit`                              | 退出                       |
 
-Tab 在输入框和列表之间切换；↑↓ 选择条目，Enter 打开；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-UWAFKI3E.js → app-ZZYXIU6G.js}

@@ -4,8 +4,8 @@ import {
 
 // packages/cli/src/app.tsx
 import { AssistantRuntimeProvider } from "@assistant-ui/react-ink";
-import { Box as Box3, render, Text as Text3, useApp as useApp2, useInput as useInput3, useStdout } from "ink";
-import { useCallback as useCallback3, useEffect as useEffect4, useState as useState4, useSyncExternalStore } from "react";
+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";
 
 // src/terminal/schema.ts
 import { z } from "zod";
@@ -52,12 +52,22 @@ var terminalIndexSchema = z.object({
   tags: z.array(z.object({ name: z.string(), path: z.string(), count: z.number().int().nonnegative() })),
   searchIndexUrl: z.string()
 });
+var sectionSchema = z.discriminatedUnion("kind", [
+  z.object({
+    kind: z.literal("welcome"),
+    markdown: z.string(),
+    logo: z.string().optional(),
+    menu: z.array(linkSchema.extend({ command: z.string() })).optional()
+  }),
+  z.object({ kind: z.literal("turn"), prompt: z.string(), markdown: z.string() })
+]);
 var terminalDocumentSchema = z.object({
   schemaVersion: z.literal(1),
   revision: z.string().min(1),
   path: z.string(),
   title: z.string(),
-  markdown: z.string().min(1)
+  markdown: z.string().min(1),
+  sections: z.array(sectionSchema).optional()
 });
 
 // src/utils/search-core.ts
@@ -276,49 +286,12 @@ var TerminalClient = class {
 };
 
 // packages/cli/src/console.tsx
-import {
-  ComposerPrimitive,
-  LoadingPrimitive,
-  ThreadPrimitive as ThreadPrimitive2,
-  useAui,
-  useAuiState as useAuiState2
-} from "@assistant-ui/react-ink";
-import { Box as Box2, Static, Text as Text2, useFocus, useInput } from "ink";
-import { useState } from "react";
-
-// src/agent/commands.ts
-var commands = [
-  { id: "help", description: "\u67E5\u770B\u53EF\u7528\u547D\u4EE4" },
-  { id: "theme", args: "[\u4E3B\u9898]", description: "\u5207\u6362\u4E3B\u9898\uFF0C\u4E0D\u5E26\u53C2\u6570\u65F6\u6253\u5F00\u9009\u62E9\u5668" },
-  { id: "clear", description: "\u6E05\u7A7A\u5F53\u524D\u5BF9\u8BDD" },
-  { id: "home", description: "\u6253\u5F00\u9996\u9875" },
-  { id: "blog", description: "\u6D4F\u89C8\u5168\u90E8\u6587\u7AE0" },
-  { id: "projects", description: "\u67E5\u770B\u6298\u817E\u7684\u9879\u76EE" },
-  { id: "tags", description: "\u6309\u6807\u7B7E\u6D4F\u89C8\u6587\u7AE0" },
-  { id: "search", args: "[\u5173\u952E\u8BCD]", description: "\u641C\u7D22\u6587\u7AE0" },
-  { id: "about", description: "\u5173\u4E8E\u672C\u7AD9" },
-  { id: "rss", description: "\u8BA2\u9605 RSS" }
-];
-var pageCommands = {
-  home: "/",
-  blog: "/blog/",
-  projects: "/projects/",
-  tags: "/tags/",
-  about: "/about/"
-};
-function parseCommand(input) {
-  const match = input.trim().match(/^\/(\S+)(?:\s+([\s\S]*))?$/);
-  if (!match)
-    return null;
-  return { name: match[1].toLowerCase(), args: (match[2] ?? "").trim() };
-}
-function getSearchPath(query) {
-  return query ? `/search/?q=${encodeURIComponent(query)}` : "/search/";
-}
+import { ThreadPrimitive as ThreadPrimitive2 } from "@assistant-ui/react-ink";
+import { useRef as useRef4 } from "react";
 
 // packages/cli/src/chat.tsx
 import { ThreadPrimitive, useAuiState } from "@assistant-ui/react-ink";
-import { Box, Text } from "ink";
+import { Box as Box4, Text as Text4 } from "ink";
 
 // packages/cli/src/theme.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -423,43 +396,225 @@ function useTerminalStyle() {
   if (!style) throw new Error("TerminalTheme is required");
   return style;
 }
-function Markdown({ text }) {
+function Markdown({ text, width: availableWidth }) {
   const { width, markdownTheme, highlighter } = useTerminalStyle();
   return /* @__PURE__ */ jsx(
     MarkdownText,
     {
       text,
-      width: Math.max(10, width - 6),
+      width: Math.max(10, availableWidth ?? width - 3),
       theme: markdownTheme,
       highlighter,
       codeWrap: true,
+      hyperlinks: true,
       tableTruncate: false
     }
   );
 }
 
-// packages/cli/src/chat.tsx
+// packages/cli/src/blocks.tsx
+import { Box as Box3, Text as Text3, useBoxMetrics as useBoxMetrics3 } from "ink";
+import { useRef as useRef3 } from "react";
+
+// packages/cli/src/page-list.tsx
+import { Box as Box2, Text as Text2, useBoxMetrics as useBoxMetrics2, useInput as useInput2 } from "ink";
+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 {
+  createContext as createContext2,
+  useContext as useContext2,
+  useImperativeHandle,
+  useMemo as useMemo2,
+  useRef,
+  useState
+} from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ScrollContext = createContext2(null);
+function useScrollArea() {
+  const value = useContext2(ScrollContext);
+  if (!value) throw new Error("ScrollArea is required");
+  return value;
+}
+function ScrollArea({
+  children,
+  selection,
+  ref
+}) {
+  const { colors } = useTerminalStyle();
+  const { isFocused } = useFocus({ id: "content" });
+  const viewport = useRef(null);
+  const content = useRef(null);
+  const { clientHeight: height } = useBoxMetrics(viewport);
+  const { height: contentHeight } = useBoxMetrics(content);
+  const [anchor, setAnchor] = useState(0);
+  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));
+  });
+  const track = Math.max(0, height);
+  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");
+  const after = Array(Math.max(0, track - thumbTop - thumbSize)).fill("\u2502").join("\n");
+  return /* @__PURE__ */ jsx2(ScrollContext, { value: context, children: /* @__PURE__ */ jsxs(Box, { flexGrow: 1, flexShrink: 1, minHeight: 1, marginX: 2, children: [
+    /* @__PURE__ */ jsx2(
+      Box,
+      {
+        ref: viewport,
+        flexDirection: "column",
+        flexGrow: 1,
+        flexShrink: 1,
+        overflow: "hidden",
+        contentOffsetY: offset,
+        children: /* @__PURE__ */ jsx2(Box, { ref: content, flexDirection: "column", flexShrink: 0, width: "100%", children })
+      }
+    ),
+    /* @__PURE__ */ jsx2(Box, { width: 1, flexShrink: 0, "aria-hidden": true, children: /* @__PURE__ */ jsxs(Text, { color: colors.line, children: [
+      before,
+      before && "\n",
+      /* @__PURE__ */ jsx2(Text, { color: isFocused ? colors.accent : colors.muted, children: thumb }),
+      after && "\n",
+      after
+    ] }) })
+  ] }) });
+}
+
+// packages/cli/src/page-list.tsx
+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 elements = useRef2(/* @__PURE__ */ new Map());
+  const container = useRef2(null);
+  const { hasMeasured } = useBoxMetrics2(container);
+  useEffect(() => {
+    const element = elements.current.get(items[selected].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 });
+  return /* @__PURE__ */ jsx3(Box2, { ref: container, flexDirection: "column", marginTop: 1, children: items.map((item, index) => {
+    const active = focused && index === selected;
+    return /* @__PURE__ */ jsxs2(
+      Box2,
+      {
+        flexDirection: compact ? "row" : "column",
+        justifyContent: compact ? "space-between" : void 0,
+        marginBottom: compact ? 0 : 1,
+        backgroundColor: active ? colors.band : void 0,
+        ref: (element) => {
+          if (element) elements.current.set(item.path, element);
+          else elements.current.delete(item.path);
+        },
+        children: [
+          /* @__PURE__ */ jsxs2(Text2, { color: active ? colors.accent : colors.fg, bold: active, children: [
+            active ? "\u25B8" : compact ? " " : "\u2022",
+            " ",
+            compact ? "" : `${index + 1}. `,
+            cleanText(item.title)
+          ] }),
+          item.description && /* @__PURE__ */ jsx3(Text2, { color: colors.muted, children: cleanText(item.description) })
+        ]
+      },
+      item.path
+    );
+  }) });
+}
+
+// packages/cli/src/blocks.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Prompt({ text, command = false }) {
+  const { colors } = useTerminalStyle();
+  return /* @__PURE__ */ jsxs3(Box3, { backgroundColor: colors.band, paddingX: 2, children: [
+    /* @__PURE__ */ jsx4(Text3, { color: colors.prompt, children: "\u276F " }),
+    /* @__PURE__ */ jsx4(Text3, { color: command ? colors.skill : colors.fg, children: cleanText(text) })
+  ] });
+}
+function Welcome({ section, ...selection }) {
+  const { colors, width } = useTerminalStyle();
+  const content = useRef3(null);
+  const { clientWidth } = useBoxMetrics3(content);
+  return /* @__PURE__ */ jsxs3(Box3, { borderStyle: "round", borderColor: colors.line, paddingX: 2, paddingY: 1, gap: 4, children: [
+    section.logo && width >= 90 && /* @__PURE__ */ jsx4(Text3, { color: colors.skill, children: cleanText(section.logo) }),
+    /* @__PURE__ */ jsxs3(Box3, { ref: content, flexDirection: "column", flexGrow: 1, flexShrink: 1, minWidth: 0, children: [
+      /* @__PURE__ */ jsx4(Markdown, { text: section.markdown, width: clientWidth || width - 6 }),
+      section.menu && selection.items.length > 0 && /* @__PURE__ */ jsx4(PageList, { ...selection, compact: true })
+    ] })
+  ] });
+}
+function HomeSections({ page, ...selection }) {
+  return /* @__PURE__ */ jsx4(Box3, { flexDirection: "column", gap: 1, children: page.sections?.map((section) => section.kind === "welcome" ? /* @__PURE__ */ jsx4(Welcome, { section, items: page.items, ...selection }, "welcome") : /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx4(Prompt, { text: section.prompt }),
+    /* @__PURE__ */ jsx4(Box3, { flexDirection: "column", paddingLeft: 2, paddingRight: 1, children: /* @__PURE__ */ jsx4(Markdown, { text: section.markdown }) })
+  ] }, section.prompt)) });
+}
+
+// packages/cli/src/chat.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var toolTitles = { set_theme: "Theme", open_page: "Open" };
 function MessageBody({ message }) {
   const { colors } = useTerminalStyle();
   if (message.role === "user") {
-    return /* @__PURE__ */ jsx2(Box, { marginY: 1, children: /* @__PURE__ */ jsxs(Text, { color: colors.prompt, children: [
-      "\u276F",
-      " ",
-      message.content.filter((part) => part.type === "text").map((part) => cleanText(part.text)).join("\n")
-    ] }) });
+    return /* @__PURE__ */ jsx5(Box4, { marginY: 1, children: /* @__PURE__ */ jsx5(Prompt, { text: message.content.filter((part) => part.type === "text").map((part) => part.text).join("\n") }) });
   }
   if (message.role !== "assistant") return null;
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: [
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: [
     message.content.map((part, index) => {
       if (part.type === "text")
-        return /* @__PURE__ */ jsx2(Markdown, { text: part.text }, index);
+        return /* @__PURE__ */ jsx5(Markdown, { text: part.text }, index);
       if (part.type === "reasoning") {
         const label = message.status.type === "running" ? "\u601D\u8003\u4E2D\u2026" : "\u601D\u8003";
         return (
           // eslint-disable-next-line react-doctor/no-array-index-as-key
-          /* @__PURE__ */ jsxs(Text, { color: colors.muted, children: [
+          /* @__PURE__ */ jsxs4(Text4, { color: colors.muted, children: [
             "\u25C6 ",
             label
           ] }, index)
@@ -467,7 +622,7 @@ function MessageBody({ message }) {
       }
       if (part.type === "tool-call") {
         const title = toolTitles[part.toolName] ?? part.toolName;
-        return /* @__PURE__ */ jsxs(Text, { color: colors.skill, children: [
+        return /* @__PURE__ */ jsxs4(Text4, { color: colors.skill, children: [
           "\u25C6 ",
           cleanText(title),
           " ",
@@ -476,116 +631,85 @@ function MessageBody({ message }) {
       }
       return null;
     }),
-    message.status.type === "incomplete" && message.status.reason === "error" && /* @__PURE__ */ jsx2(Text, { color: colors.err, children: "\u25C6 AI \u6682\u65F6\u65E0\u6CD5\u56DE\u590D\uFF0C\u8BF7\u7A0D\u540E\u518D\u8BD5\u3002" })
+    message.status.type === "incomplete" && message.status.reason === "error" && /* @__PURE__ */ jsx5(Text4, { color: colors.err, children: "\u25C6 AI \u6682\u65F6\u65E0\u6CD5\u56DE\u590D\uFF0C\u8BF7\u7A0D\u540E\u518D\u8BD5\u3002" })
   ] });
 }
-function LiveMessage() {
+function Message() {
   const message = useAuiState((state) => state.message);
-  return message.role === "assistant" && message.status.type === "running" ? /* @__PURE__ */ jsx2(MessageBody, { message }) : null;
+  return /* @__PURE__ */ jsx5(MessageBody, { message });
 }
 function ChatThread() {
-  return /* @__PURE__ */ jsx2(ThreadPrimitive.Messages, { components: { Message: LiveMessage } });
+  return /* @__PURE__ */ jsx5(ThreadPrimitive.Messages, { components: { Message } });
 }
 
-// packages/cli/src/console.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var pageSize = 8;
-function PageOutput({ page, prompt }) {
-  const { colors } = useTerminalStyle();
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginY: 1, children: [
-    /* @__PURE__ */ jsxs2(Text2, { color: colors.prompt, children: [
-      "\u276F ",
-      cleanText(prompt)
-    ] }),
-    /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingLeft: 2, marginTop: 1, children: [
-      /* @__PURE__ */ jsxs2(Text2, { color: colors.skill, children: [
-        "\u25C6 ",
-        page.verb,
-        " ",
-        /* @__PURE__ */ jsx3(Text2, { color: colors.path, children: cleanText(page.title) })
-      ] }),
-      page.markdown && /* @__PURE__ */ jsx3(Markdown, { text: page.markdown })
-    ] })
-  ] });
+// 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";
+
+// src/agent/appearance.ts
+var composerPlaceholder = "\u95EE\u70B9\u4EC0\u4E48\uFF0C\u6216\u8F93\u5165 / \u67E5\u770B\u547D\u4EE4";
+var composerBrand = { mark: "<MT/>", model: "V3.14 Pro" };
+
+// src/agent/commands.ts
+var commands = [
+  { id: "help", description: "\u67E5\u770B\u53EF\u7528\u547D\u4EE4" },
+  { id: "theme", args: "[\u4E3B\u9898]", description: "\u5207\u6362\u4E3B\u9898\uFF0C\u4E0D\u5E26\u53C2\u6570\u65F6\u6253\u5F00\u9009\u62E9\u5668" },
+  { id: "clear", description: "\u6E05\u7A7A\u5F53\u524D\u5BF9\u8BDD" },
+  { id: "home", description: "\u6253\u5F00\u9996\u9875" },
+  { id: "blog", description: "\u6D4F\u89C8\u5168\u90E8\u6587\u7AE0" },
+  { id: "projects", description: "\u67E5\u770B\u6298\u817E\u7684\u9879\u76EE" },
+  { id: "tags", description: "\u6309\u6807\u7B7E\u6D4F\u89C8\u6587\u7AE0" },
+  { id: "search", args: "[\u5173\u952E\u8BCD]", description: "\u641C\u7D22\u6587\u7AE0" },
+  { id: "about", description: "\u5173\u4E8E\u672C\u7AD9" },
+  { id: "rss", description: "\u8BA2\u9605 RSS" }
+];
+var pageCommands = {
+  home: "/",
+  blog: "/blog/",
+  projects: "/projects/",
+  tags: "/tags/",
+  about: "/about/"
+};
+function parseCommand(input) {
+  const match = input.trim().match(/^\/(\S+)(?:\s+([\s\S]*))?$/);
+  if (!match)
+    return null;
+  return { name: match[1].toLowerCase(), args: (match[2] ?? "").trim() };
 }
-function PageList({ page, onSelect }) {
-  const { isFocused } = useFocus();
-  const { colors } = useTerminalStyle();
-  const [selected, setSelected] = useState(0);
-  const start = Math.floor(selected / pageSize) * pageSize;
-  useInput(
-    (_input, key) => {
-      if (key.upArrow) setSelected((value) => Math.max(0, value - 1));
-      if (key.downArrow) setSelected((value) => Math.min(page.items.length - 1, value + 1));
-      if (key.return) {
-        const item = page.items[selected];
-        if (item) onSelect(item.path, item.external);
-      }
-    },
-    { isActive: isFocused }
-  );
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: [
-    page.items.slice(start, start + pageSize).map((item, offset) => {
-      const active = isFocused && start + offset === selected;
-      return /* @__PURE__ */ jsxs2(Text2, { wrap: "truncate-end", color: active ? colors.accent : colors.fg, children: [
-        active ? "\u25B8" : "\u2022",
-        " ",
-        start + offset + 1,
-        ". ",
-        cleanText(item.title),
-        item.description && /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, children: [
-          "\n ",
-          cleanText(item.description)
-        ] })
-      ] }, item.path);
-    }),
-    /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, children: [
-      start + 1,
-      "\u2013",
-      Math.min(start + pageSize, page.items.length),
-      " / ",
-      page.items.length,
-      " \xB7 Tab",
-      " ",
-      isFocused ? "\u56DE\u5230\u8F93\u5165" : "\u9009\u62E9\u5217\u8868"
-    ] })
-  ] });
+function getSearchPath(query) {
+  return query ? `/search/?q=${encodeURIComponent(query)}` : "/search/";
 }
-function Console({
+
+// packages/cli/src/composer.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Composer({
   runtime,
   page,
   revision,
-  output,
   loading,
   notice,
   onCommand,
-  onSelect
+  onSubmit
 }) {
   const { colors } = useTerminalStyle();
   const aui = useAui();
-  const isRunning = useAuiState2((state) => state.thread.isRunning);
-  return /* @__PURE__ */ jsxs2(ThreadPrimitive2.Root, { children: [
-    /* @__PURE__ */ jsx3(Static, { items: output, children: (item) => "page" in item ? /* @__PURE__ */ jsx3(PageOutput, { page: item.page, prompt: item.prompt }, item.id) : /* @__PURE__ */ jsx3(MessageBody, { message: item.message }, item.id) }),
-    page.items.length > 0 && /* @__PURE__ */ jsx3(PageList, { page, onSelect }, `${page.path}:${revision}`),
-    /* @__PURE__ */ jsx3(ChatThread, {}),
-    (loading || isRunning) && /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__PURE__ */ jsx3(LoadingPrimitive.Spinner, {}),
-      /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, children: [
-        " ",
-        loading ? "\u6B63\u5728\u8BFB\u53D6\u5B98\u7F51\u2026" : "\u56DE\u590D\u4E2D\u2026",
-        " \xB7 Esc \u505C\u6B62"
-      ] })
+  const { activeId } = useFocusManager();
+  const running = useAuiState2((state) => state.thread.isRunning);
+  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` })
     ] }),
-    notice && /* @__PURE__ */ jsx3(Text2, { color: colors.warn, children: cleanText(notice) }),
-    /* @__PURE__ */ jsxs2(Box2, { borderStyle: "single", borderColor: colors.line, paddingX: 1, children: [
-      /* @__PURE__ */ jsx3(Text2, { color: colors.prompt, children: "\u276F " }),
-      /* @__PURE__ */ jsx3(
+    /* @__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(
         ComposerPrimitive.Input,
         {
           autoFocus: true,
           submitOnEnter: true,
           flexGrow: 1,
-          placeholder: "\u95EE\u6211\u4EFB\u4F55\u95EE\u9898\uFF0C\u6216\u8F93\u5165 /help",
+          placeholder: composerPlaceholder,
           onSubmit: (text) => {
             const input = text.trim();
             if (!input) return;
@@ -593,19 +717,166 @@ function Console({
             if (command) {
               aui.composer.setText("");
               void onCommand(command.name, command.args);
-            } else if (!isRunning) runtime.thread.composer.send();
+            } else if (!running) {
+              onSubmit();
+              runtime.thread.composer.send();
+            }
           }
         },
-        page.path
-      )
+        `${page.path}:${revision}`
+      ),
+      /* @__PURE__ */ jsx6(Box5, { position: "absolute", bottom: -1, right: 1, children: /* @__PURE__ */ jsxs5(Text5, { color: colors.muted, backgroundColor: colors.bg, children: [
+        " ",
+        composerBrand.mark,
+        " \xB7 ",
+        composerBrand.model,
+        " "
+      ] }) })
     ] }),
-    /* @__PURE__ */ jsxs2(Text2, { color: colors.muted, children: [
-      cleanText(page.path),
-      " \xB7 /help \xB7 Tab \u5207\u6362 \xB7 Ctrl+C \u9000\u51FA"
+    /* @__PURE__ */ jsxs5(Text5, { color: colors.muted, wrap: "truncate-end", children: [
+      /* @__PURE__ */ jsx6(Text5, { color: colors["fg-soft"], bold: true, children: "Tab" }),
+      ":\u5207\u6362 \u2502 ",
+      /* @__PURE__ */ jsx6(Text5, { bold: true, children: "PgUp/PgDn" }),
+      ":\u6EDA\u52A8 \u2502 ",
+      /* @__PURE__ */ jsx6(Text5, { 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 { memo } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var PageContent = memo(function PageContent2({
+  page,
+  prompt,
+  onSelect,
+  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: [
+          " ",
+          cleanText(page.title)
+        ] })
+      ] }),
+      page.markdown && /* @__PURE__ */ jsx7(Markdown, { text: page.markdown }),
+      page.items.length > 0 && /* @__PURE__ */ jsx7(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,
+  path,
+  nav = [],
+  children
+}) {
+  const { columns, rows } = useWindowSize();
+  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,
+    {
+      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
+          ]
+        }
+      )
+    }
+  );
+}
+
+// packages/cli/src/console.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function Console({
+  runtime,
+  page,
+  prompt,
+  revision,
+  site,
+  loading,
+  notice,
+  onCommand,
+  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, {})
+    ] }, `${page.path}:${revision}`),
+    /* @__PURE__ */ jsx9(
+      Composer,
+      {
+        runtime,
+        page,
+        revision,
+        loading,
+        notice,
+        onCommand,
+        onSubmit: () => scroll.current?.end()
+      }
+    )
+  ] }) });
+}
+
 // packages/cli/src/pages.ts
 var terminalCommands = [
   ...commands.map((command) => command.id === "tags" ? { ...command, args: "[\u6807\u7B7E]" } : command),
@@ -622,7 +893,7 @@ function helpPage() {
     items: [],
     markdown: terminalCommands.map(
       (command) => `- \`/${command.id}${command.args ? ` ${command.args}` : ""}\` \u2014 ${command.description}`
-    ).join("\n") + "\n\nTab \u5207\u6362\u8F93\u5165\u548C\u5217\u8868\uFF1B\u2191\u2193 \u9009\u62E9\uFF0CEnter \u6253\u5F00\uFF1BEsc \u505C\u6B62\u56DE\u590D\u6216\u53D6\u6D88\u52A0\u8F7D\uFF1BCtrl+C \u9000\u51FA\u3002"
+    ).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"
   };
 }
 function themePage() {
@@ -651,13 +922,23 @@ async function loadPage(client, path, signal) {
     page.path = result.document.path + url.search;
     page.title = result.document.title;
     page.markdown = result.document.markdown;
+    page.sections = result.document.sections;
     page.verb = "Read";
-    if (page.path === index.pages.home.path)
-      page.items = index.site.nav.map((link) => ({
-        title: link.title,
-        path: link.href,
-        external: !link.href.startsWith("/")
-      }));
+    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));
+      page.items = menu.map((link) => {
+        const destination = new URL(link.href, client.site);
+        const external = !siteOrigins.has(destination.origin);
+        return {
+          title: link.title,
+          description: link.command,
+          path: external ? destination.href : destination.pathname + destination.search,
+          external
+        };
+      });
+    }
   } else if (pathname === "/blog/") {
     page.title = "\u5168\u90E8\u6587\u7AE0";
     page.items = index.posts.map((post) => ({
@@ -706,12 +987,12 @@ async function loadPage(client, path, signal) {
 }
 
 // packages/cli/src/session.ts
-import { useApp, useInput as useInput2 } from "ink";
-import { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
+import { useApp, useInput as useInput3 } from "ink";
+import { useState as useState4 } from "react";
 
 // packages/cli/src/agent.ts
 import { useChatRuntime } from "@assistant-ui/ai-sdk";
-import { useEffect, useMemo as useMemo2 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo3 } from "react";
 
 // src/agent/transport.ts
 import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
@@ -857,7 +1138,7 @@ function createAgentTransport(handlers, options) {
 
 // packages/cli/src/agent.ts
 function useTerminalAgent({ site, index, page, theme, setTheme, navigate }) {
-  const transport = useMemo2(
+  const transport = useMemo3(
     () => createAgentTransport(
       {
         getContext: () => {
@@ -900,7 +1181,7 @@ function useTerminalAgent({ site, index, page, theme, setTheme, navigate }) {
     ]
   );
   const runtime = useChatRuntime({ transport });
-  useEffect(() => () => runtime.thread.cancelRun(), [runtime]);
+  useEffect2(() => () => runtime.thread.cancelRun(), [runtime]);
   return runtime;
 }
 
@@ -948,15 +1229,16 @@ function resolveTagPath(input, index) {
 }
 
 // packages/cli/src/navigation.ts
-import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
-function useNavigation(client, initial, onPage) {
-  const [state, setState] = useState2({
+import { useCallback, useEffect as useEffect3, useRef as useRef5, useState as useState3 } from "react";
+function useNavigation(client, initial) {
+  const [state, setState] = useState3({
     ...initial,
     status: "idle",
-    notice: client.warning
+    notice: client.warning,
+    prompt: "/home"
   });
-  const active = useRef(void 0);
-  useEffect2(
+  const active = useRef5(void 0);
+  useEffect3(
     () => () => {
       active.current?.abort();
       active.current = void 0;
@@ -974,10 +1256,9 @@ function useNavigation(client, initial, onPage) {
   const show = useCallback(
     (page, prompt) => {
       cancel();
-      setState((current) => ({ ...current, page, notice: "" }));
-      onPage(page, prompt);
+      setState((current) => ({ ...current, page, prompt, notice: "" }));
     },
-    [cancel, onPage]
+    [cancel]
   );
   const navigate = useCallback(
     async (path, prompt = path) => {
@@ -1001,11 +1282,10 @@ function useNavigation(client, initial, onPage) {
       }
       if (active.current !== request) return false;
       active.current = void 0;
-      setState({ ...next, status: "idle", notice: client.warning });
-      onPage(next.page, prompt);
+      setState({ ...next, status: "idle", notice: client.warning, prompt });
       return true;
     },
-    [client, onPage]
+    [client]
   );
   return { ...state, navigate, show, cancel, notify };
 }
@@ -1013,39 +1293,14 @@ function useNavigation(client, initial, onPage) {
 // packages/cli/src/session.ts
 function useTerminalSession(client, initial) {
   const { exit } = useApp();
-  const [theme, setTheme] = useState3("auto");
-  const [output, setOutput] = useState3([
-    { id: "home", page: initial.page, prompt: "/home" }
-  ]);
-  const appendPage = useCallback2((page2, prompt) => {
-    const entry = { id: crypto.randomUUID(), page: page2, prompt };
-    setOutput((items) => [...items, entry]);
-  }, []);
-  const { index, page, status, notice, navigate, show, cancel, notify } = useNavigation(
-    client,
-    initial,
-    appendPage
-  );
+  const [theme, setTheme] = useState4("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 });
-  useEffect3(() => {
-    const printed = /* @__PURE__ */ new Set();
-    const publish = () => {
-      const completed = runtime.thread.getState().messages.filter(
-        (message) => !printed.has(message.id) && (message.role !== "assistant" || message.status.type !== "running")
-      );
-      if (!completed.length) return;
-      const entries = completed.map((message) => ({ id: message.id, message }));
-      completed.forEach((message) => printed.add(message.id));
-      setOutput((items) => [...items, ...entries]);
-    };
-    publish();
-    return runtime.thread.subscribe(publish);
-  }, [runtime]);
   const stop = () => {
     cancel();
     runtime.thread.cancelRun();
   };
-  useInput2((input, key) => {
+  useInput3((input, key) => {
     if (key.escape) {
       stop();
       notify("\u5DF2\u505C\u6B62\u3002");
@@ -1117,7 +1372,8 @@ function useTerminalSession(client, initial) {
     runtime,
     page,
     revision: index.revision,
-    output,
+    prompt,
+    site: index.site,
     loading: status === "loading",
     notice,
     onCommand,
@@ -1127,33 +1383,22 @@ function useTerminalSession(client, initial) {
 }
 
 // packages/cli/src/app.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function Session({
   client,
   initial,
   width
 }) {
   const { theme, ...session } = useTerminalSession(client, initial);
-  return /* @__PURE__ */ jsx4(TerminalTheme, { preference: theme, width, children: /* @__PURE__ */ jsx4(AssistantRuntimeProvider, { runtime: session.runtime, children: /* @__PURE__ */ jsx4(Console, { ...session }) }) });
+  return /* @__PURE__ */ jsx10(TerminalTheme, { preference: theme, width, children: /* @__PURE__ */ jsx10(AssistantRuntimeProvider, { runtime: session.runtime, children: /* @__PURE__ */ jsx10(Console, { ...session }) }) });
 }
 function App({ site }) {
   const { exit } = useApp2();
-  const { stdout } = useStdout();
-  const [client] = useState4(() => new TerminalClient(site));
-  const [state, setState] = useState4({ status: "loading" });
-  const [attempt, setAttempt] = useState4(0);
-  const width = useSyncExternalStore(
-    useCallback3(
-      (notify) => {
-        stdout.on("resize", notify);
-        return () => {
-          stdout.off("resize", notify);
-        };
-      },
-      [stdout]
-    ),
-    () => "columns" in stdout && typeof stdout.columns === "number" ? stdout.columns : 80
-  );
+  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 request = new AbortController();
     loadPage(client, "/", request.signal).then((content) => {
@@ -1167,7 +1412,7 @@ function App({ site }) {
     });
     return () => request.abort();
   }, [client, attempt]);
-  useInput3(
+  useInput4(
     (input, key) => {
       if (key.ctrl && input === "c" || input === "q") exit();
       else if (state.status === "error" && (key.return || input === "r" || input === "/refresh")) {
@@ -1178,17 +1423,21 @@ function App({ site }) {
     { isActive: state.status !== "ready" }
   );
   if (state.status === "ready")
-    return /* @__PURE__ */ jsx4(Session, { client, initial: state.content, width });
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs3(Text3, { children: [
+    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: [
       "\u25C6 ",
       state.status === "error" ? state.message : "\u6B63\u5728\u8BFB\u53D6\u5B98\u7F51\u2026"
     ] }),
-    /* @__PURE__ */ jsx4(Text3, { children: state.status === "error" ? "Enter \u91CD\u8BD5 \xB7 q \u9000\u51FA" : "Ctrl+C \u9000\u51FA" })
-  ] });
+    /* @__PURE__ */ jsx10(Text8, { children: state.status === "error" ? "Enter \u91CD\u8BD5 \xB7 q \u9000\u51FA" : "Ctrl+C \u9000\u51FA" })
+  ] }) }) });
 }
 async function run(site) {
-  const app = render(/* @__PURE__ */ jsx4(App, { site }), { exitOnCtrlC: false });
+  const app = render(/* @__PURE__ */ jsx10(App, { site }), {
+    exitOnCtrlC: false,
+    alternateScreen: true,
+    incrementalRendering: true
+  });
   await app.waitUntilExit();
 }
 export {

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.0");
+    console.log("0.1.1");
   } 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-UWAFKI3E.js");
+    const { run } = await import("./app-ZZYXIU6G.js");
     await run(site.origin);
   }
 } catch (error) {

package/package.json

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