From dae02d56dac8a349525b24e8d417c6777be86305 Mon Sep 17 00:00:00 2001
From: Miro <cma19951230@gmail.com>
Date: Wed, 1 Jul 2026 17:00:04 +0800
Subject: [PATCH 1/8] =?UTF-8?q?feat(dashboard):=20streamdown=20=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2=20react-markdown=EF=BC=8C=E5=AE=9E=E7=8E=B0=E6=B5=81?=
 =?UTF-8?q?=E5=BC=8F=20Markdown=20=E6=B8=90=E8=BF=9B=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 ChatStreamdown.tsx：封装 Streamdown，保留印章终端主题样式
- 新增 chat-streamdown-security.ts：禁用远程图片加载
- ChatThread.tsx：流式 assistant 消息用 ChatStreamdown 逐 token 渲染，
  历史消息仍用 ChatMarkdown
- 安装 streamdown ^2.5.0 + @streamdown/cjk + @streamdown/code

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/dashboard/package.json                   |   3 +
 apps/dashboard/pnpm-lock.yaml                 | 217 ++++++++++++++++++
 .../src/components/chat/ChatStreamdown.tsx    | 120 ++++++++++
 .../src/components/chat/ChatThread.tsx        |  16 +-
 .../chat/chat-streamdown-security.ts          |  36 +++
 5 files changed, 390 insertions(+), 2 deletions(-)
 create mode 100644 apps/dashboard/src/components/chat/ChatStreamdown.tsx
 create mode 100644 apps/dashboard/src/components/chat/chat-streamdown-security.ts

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index b079dc10..f38a8764 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -20,6 +20,8 @@
     "@copilotkit/react-core": "^1.59.5",
     "@copilotkit/runtime": "^1.59.5",
     "@mastra/client-js": "^1.23.2",
+    "@streamdown/cjk": "^1.0.3",
+    "@streamdown/code": "^1.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "geist": "^1.7.1",
@@ -35,6 +37,7 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "server-only": "^0.0.1",
+    "streamdown": "^2.5.0",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.6.0"
   },
diff --git a/apps/dashboard/pnpm-lock.yaml b/apps/dashboard/pnpm-lock.yaml
index 88e7e230..8ba6d0dd 100644
--- a/apps/dashboard/pnpm-lock.yaml
+++ b/apps/dashboard/pnpm-lock.yaml
@@ -24,6 +24,12 @@ importers:
       '@mastra/client-js':
         specifier: ^1.23.2
         version: 1.23.2(@bufbuild/protobuf@2.12.0)(@cfworker/json-schema@4.1.1)(ai@6.0.196(zod@4.4.3))(express@5.2.1)(rxjs@7.8.1)(zod@4.4.3)
+      '@streamdown/cjk':
+        specifier: ^1.0.3
+        version: 1.0.3(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(react@19.2.7)(unified@11.0.5)
+      '@streamdown/code':
+        specifier: ^1.1.1
+        version: 1.1.1(react@19.2.7)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -69,6 +75,9 @@ importers:
       server-only:
         specifier: ^0.0.1
         version: 0.0.1
+      streamdown:
+        specifier: ^2.5.0
+        version: 2.5.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       swr:
         specifier: ^2.3.6
         version: 2.4.1(react@19.2.7)
@@ -1255,6 +1264,16 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
+  '@streamdown/cjk@1.0.3':
+    resolution: {integrity: sha512-WRg8HR/gHbBoTgsMd91OKFUClIoDcEFVofJvluvEAyjx3KpU0aGgD9tGDqHkHj14ShoMSkX0IYetWGegTcwIJw==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+
+  '@streamdown/code@1.1.1':
+    resolution: {integrity: sha512-i7HTNuDgZWb+VdrNVOam9gQhIc5MSSDXKWXgbUrn/4vSRaSMM+Rtl10MQj4wLWPNpF7p80waJsAqFP8HZfb0Jg==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+
   '@swc/core-darwin-arm64@1.15.40':
     resolution: {integrity: sha512-PaYyclfmQ++77D8ityYvmmVzHv9aG8ROwt2GfG6/ccloy4Hgf80qtOnzb9VYvPsUT7Ty1uhuDRhv3XYpf62qhQ==}
     engines: {node: '>=10'}
@@ -2792,6 +2811,11 @@ packages:
     engines: {node: '>= 20'}
     hasBin: true
 
+  marked@17.0.6:
+    resolution: {integrity: sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -2847,6 +2871,24 @@ packages:
   mdast-util-to-hast@13.2.1:
     resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
 
+  mdast-util-to-markdown-cjk-friendly-gfm-strikethrough@1.0.0:
+    resolution: {integrity: sha512-1ePVfB4P/vz3xSsm6H3D32r6VYGErxclnuLLFK02/2ReF+UdEKm7caulK6Vm0LBIp5gPRtB2Z1OYDznCkX3k2w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/mdast': '*'
+    peerDependenciesMeta:
+      '@types/mdast':
+        optional: true
+
+  mdast-util-to-markdown-cjk-friendly@1.0.0:
+    resolution: {integrity: sha512-BoaAm8mlJ+LAYz0Qs532Y3ciTuQYgBUPZcSFbvC/ZKmEMAKgulw84YvQK1gI34t/vL2euSfuaWlqczkTBgamkw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/mdast': '*'
+    peerDependenciesMeta:
+      '@types/mdast':
+        optional: true
+
   mdast-util-to-markdown@2.1.2:
     resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
 
@@ -2894,6 +2936,16 @@ packages:
       micromark-util-types:
         optional: true
 
+  micromark-extension-cjk-friendly-gfm-strikethrough@2.0.1:
+    resolution: {integrity: sha512-wVC0zwjJNqQeX+bb07YTPu/CvSAyCTafyYb7sMhX1r62/Lw5M/df3JyYaANyp8g15c1ypJRFSsookTqA1IDsUg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      micromark: ^4.0.0
+      micromark-util-types: ^2.0.0
+    peerDependenciesMeta:
+      micromark-util-types:
+        optional: true
+
   micromark-extension-cjk-friendly-util@2.1.1:
     resolution: {integrity: sha512-egs6+12JU2yutskHY55FyR48ZiEcFOJFyk9rsiyIhcJ6IvWB6ABBqVrBw8IobqJTDZ/wdSr9eoXDPb5S2nW1bg==}
     engines: {node: '>=16'}
@@ -2903,6 +2955,15 @@ packages:
       micromark-util-types:
         optional: true
 
+  micromark-extension-cjk-friendly-util@3.0.1:
+    resolution: {integrity: sha512-GcbXqTTHOsiZHyF753oIddP/J2eH8j9zpyQPhkof6B2JNxfEJabnQqxbCgzJNuNes0Y2jTNJ3LiYPSXr6eJA8w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      micromark-util-types: '*'
+    peerDependenciesMeta:
+      micromark-util-types:
+        optional: true
+
   micromark-extension-cjk-friendly@1.2.3:
     resolution: {integrity: sha512-gRzVLUdjXBLX6zNPSnHGDoo+ZTp5zy+MZm0g3sv+3chPXY7l9gW+DnrcHcZh/jiPR6MjPKO4AEJNp4Aw6V9z5Q==}
     engines: {node: '>=16'}
@@ -2913,6 +2974,16 @@ packages:
       micromark-util-types:
         optional: true
 
+  micromark-extension-cjk-friendly@2.0.1:
+    resolution: {integrity: sha512-OkzoYVTL1ChbvQ8Cc1ayTIz7paFQz8iS9oIYmewncweUSwmWR+hkJF9spJ1lxB90XldJl26A1F4IkPOKS3bDXw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      micromark: ^4.0.0
+      micromark-util-types: ^2.0.0
+    peerDependenciesMeta:
+      micromark-util-types:
+        optional: true
+
   micromark-extension-gfm-autolink-literal@2.1.0:
     resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
 
@@ -3487,6 +3558,16 @@ packages:
       '@types/mdast':
         optional: true
 
+  remark-cjk-friendly-gfm-strikethrough@2.3.1:
+    resolution: {integrity: sha512-JE3TGgouk/sy92SemNMEUhO5mNP4on04cmzOV3s3R5Dbk160ewmpM4tgPiinKKvoJ5UW2fTu7FOYsjVbusSA9w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/mdast': ^4.0.0
+      unified: ^11.0.0
+    peerDependenciesMeta:
+      '@types/mdast':
+        optional: true
+
   remark-cjk-friendly@1.2.3:
     resolution: {integrity: sha512-UvAgxwlNk+l9Oqgl/9MWK2eWRS7zgBW/nXX9AthV7nd/3lNejF138E7Xbmk9Zs4WjTJGs721r7fAEc7tNFoH7g==}
     engines: {node: '>=16'}
@@ -3497,6 +3578,16 @@ packages:
       '@types/mdast':
         optional: true
 
+  remark-cjk-friendly@2.3.1:
+    resolution: {integrity: sha512-f+pKZRxCRwNEGFBKNRAZAqU91GIK1SAo3ZyFHWRUgC9zcxRR0BXKd6YwqgSsxtW0rNpUDtONj7H5nje2WL3fcA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/mdast': ^4.0.0
+      unified: ^11.0.0
+    peerDependenciesMeta:
+      '@types/mdast':
+        optional: true
+
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
@@ -3665,6 +3756,12 @@ packages:
     peerDependencies:
       react: ^18.0.0 || ^19.0.0
 
+  streamdown@2.5.0:
+    resolution: {integrity: sha512-/tTnURfIOxZK/pqJAxsfCvETG/XCJHoWnk3jq9xLcuz6CSpnjjuxSRBTTL4PKGhxiZQf0lqPxGhImdpwcZ2XwA==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
@@ -5313,6 +5410,24 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
+  '@streamdown/cjk@1.0.3(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(react@19.2.7)(unified@11.0.5)':
+    dependencies:
+      react: 19.2.7
+      remark-cjk-friendly: 2.3.1(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5)
+      remark-cjk-friendly-gfm-strikethrough: 2.3.1(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5)
+      unist-util-visit: 5.1.0
+    transitivePeerDependencies:
+      - '@types/mdast'
+      - micromark
+      - micromark-util-types
+      - supports-color
+      - unified
+
+  '@streamdown/code@1.1.1(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+      shiki: 3.23.0
+
   '@swc/core-darwin-arm64@1.15.40':
     optional: true
 
@@ -6905,6 +7020,8 @@ snapshots:
 
   marked@16.4.2: {}
 
+  marked@17.0.6: {}
+
   math-intrinsics@1.1.0: {}
 
   mdast-util-definitions@5.1.2:
@@ -7090,6 +7207,28 @@ snapshots:
       unist-util-visit: 5.1.0
       vfile: 6.0.3
 
+  mdast-util-to-markdown-cjk-friendly-gfm-strikethrough@1.0.0(@types/mdast@4.0.4)(micromark-util-types@2.0.2):
+    dependencies:
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+      micromark-extension-cjk-friendly-util: 3.0.1(micromark-util-types@2.0.2)
+      micromark-util-symbol: 2.0.1
+    optionalDependencies:
+      '@types/mdast': 4.0.4
+    transitivePeerDependencies:
+      - micromark-util-types
+      - supports-color
+
+  mdast-util-to-markdown-cjk-friendly@1.0.0(@types/mdast@4.0.4)(micromark-util-types@2.0.2):
+    dependencies:
+      mdast-util-to-markdown: 2.1.2
+      micromark-extension-cjk-friendly-util: 3.0.1(micromark-util-types@2.0.2)
+      micromark-util-symbol: 2.0.1
+    optionalDependencies:
+      '@types/mdast': 4.0.4
+    transitivePeerDependencies:
+      - micromark-util-types
+
   mdast-util-to-markdown@2.1.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -7195,6 +7334,19 @@ snapshots:
     optionalDependencies:
       micromark-util-types: 2.0.2
 
+  micromark-extension-cjk-friendly-gfm-strikethrough@2.0.1(micromark-util-types@2.0.2)(micromark@4.0.2):
+    dependencies:
+      devlop: 1.1.0
+      get-east-asian-width: 1.6.0
+      micromark: 4.0.2
+      micromark-extension-cjk-friendly-util: 3.0.1(micromark-util-types@2.0.2)
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+    optionalDependencies:
+      micromark-util-types: 2.0.2
+
   micromark-extension-cjk-friendly-util@2.1.1(micromark-util-types@2.0.2):
     dependencies:
       get-east-asian-width: 1.6.0
@@ -7203,6 +7355,14 @@ snapshots:
     optionalDependencies:
       micromark-util-types: 2.0.2
 
+  micromark-extension-cjk-friendly-util@3.0.1(micromark-util-types@2.0.2):
+    dependencies:
+      get-east-asian-width: 1.6.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+    optionalDependencies:
+      micromark-util-types: 2.0.2
+
   micromark-extension-cjk-friendly@1.2.3(micromark-util-types@2.0.2)(micromark@4.0.2):
     dependencies:
       devlop: 1.1.0
@@ -7214,6 +7374,17 @@ snapshots:
     optionalDependencies:
       micromark-util-types: 2.0.2
 
+  micromark-extension-cjk-friendly@2.0.1(micromark-util-types@2.0.2)(micromark@4.0.2):
+    dependencies:
+      devlop: 1.1.0
+      micromark: 4.0.2
+      micromark-extension-cjk-friendly-util: 3.0.1(micromark-util-types@2.0.2)
+      micromark-util-chunked: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+    optionalDependencies:
+      micromark-util-types: 2.0.2
+
   micromark-extension-gfm-autolink-literal@2.1.0:
     dependencies:
       micromark-util-character: 2.1.1
@@ -7957,6 +8128,18 @@ snapshots:
       - micromark
       - micromark-util-types
 
+  remark-cjk-friendly-gfm-strikethrough@2.3.1(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5):
+    dependencies:
+      mdast-util-to-markdown-cjk-friendly-gfm-strikethrough: 1.0.0(@types/mdast@4.0.4)(micromark-util-types@2.0.2)
+      micromark-extension-cjk-friendly-gfm-strikethrough: 2.0.1(micromark-util-types@2.0.2)(micromark@4.0.2)
+      unified: 11.0.5
+    optionalDependencies:
+      '@types/mdast': 4.0.4
+    transitivePeerDependencies:
+      - micromark
+      - micromark-util-types
+      - supports-color
+
   remark-cjk-friendly@1.2.3(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5):
     dependencies:
       micromark-extension-cjk-friendly: 1.2.3(micromark-util-types@2.0.2)(micromark@4.0.2)
@@ -7967,6 +8150,17 @@ snapshots:
       - micromark
       - micromark-util-types
 
+  remark-cjk-friendly@2.3.1(@types/mdast@4.0.4)(micromark-util-types@2.0.2)(micromark@4.0.2)(unified@11.0.5):
+    dependencies:
+      mdast-util-to-markdown-cjk-friendly: 1.0.0(@types/mdast@4.0.4)(micromark-util-types@2.0.2)
+      micromark-extension-cjk-friendly: 2.0.1(micromark-util-types@2.0.2)(micromark@4.0.2)
+      unified: 11.0.5
+    optionalDependencies:
+      '@types/mdast': 4.0.4
+    transitivePeerDependencies:
+      - micromark
+      - micromark-util-types
+
   remark-gfm@4.0.1:
     dependencies:
       '@types/mdast': 4.0.4
@@ -8263,6 +8457,29 @@ snapshots:
       - micromark-util-types
       - supports-color
 
+  streamdown@2.5.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      clsx: 2.1.1
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      marked: 17.0.6
+      mermaid: 11.15.0
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      rehype-harden: 1.1.8
+      rehype-raw: 7.0.0
+      rehype-sanitize: 6.0.0
+      remark-gfm: 4.0.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      remend: 1.3.0
+      tailwind-merge: 3.6.0
+      unified: 11.0.5
+      unist-util-visit: 5.1.0
+      unist-util-visit-parents: 6.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   string_decoder@1.3.0:
     dependencies:
       safe-buffer: 5.2.1
diff --git a/apps/dashboard/src/components/chat/ChatStreamdown.tsx b/apps/dashboard/src/components/chat/ChatStreamdown.tsx
new file mode 100644
index 00000000..8d43b718
--- /dev/null
+++ b/apps/dashboard/src/components/chat/ChatStreamdown.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { type Components } from "streamdown";
+import { Streamdown } from "streamdown";
+import remarkGfm from "remark-gfm";
+
+import { CHAT_LINK_SAFETY, createSecureRehypePlugins, STREAMDOWN_PLUGINS } from "./chat-streamdown-security";
+
+/**
+ * Streamdown 的 Components 类型与 react-markdown 兼容（key 和签名一致），
+ * 直接从 ChatMarkdown 的样式映射迁移，保持「印章终端」主题。
+ */
+const COMPONENTS: Components = {
+  p: ({ children }) => <p className="my-1.5 first:mt-0 last:mb-0">{children}</p>,
+  a: ({ children, href }) => (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className="text-cyan underline decoration-cyan/40 underline-offset-2 hover:decoration-cyan"
+    >
+      {children}
+    </a>
+  ),
+  strong: ({ children }) => (
+    <strong className="font-semibold text-fg">{children}</strong>
+  ),
+  em: ({ children }) => <em className="italic">{children}</em>,
+  ul: ({ children }) => (
+    <ul className="my-1.5 list-disc space-y-0.5 pl-4">{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="my-1.5 list-decimal space-y-0.5 pl-4">{children}</ol>
+  ),
+  li: ({ children }) => <li className="leading-relaxed">{children}</li>,
+  h1: ({ children }) => (
+    <h3 className="mb-1 mt-2 font-display text-base text-fg">{children}</h3>
+  ),
+  h2: ({ children }) => (
+    <h3 className="mb-1 mt-2 font-display text-base text-fg">{children}</h3>
+  ),
+  h3: ({ children }) => (
+    <h4 className="mb-1 mt-2 font-display text-sm text-fg">{children}</h4>
+  ),
+  blockquote: ({ children }) => (
+    <blockquote className="my-1.5 border-l-2 border-seal/50 pl-3 text-fg-muted">
+      {children}
+    </blockquote>
+  ),
+  code: ({ className, children }) => {
+    // 块级 code 带 language-* className；行内 code 没有。
+    // @streamdown/code 插件已处理语法高亮，这里只加 seal 终端主题的容器样式。
+    const isBlock = Boolean(className);
+    if (isBlock) {
+      return (
+        <code className="block font-mono text-[11px] leading-relaxed">
+          {children}
+        </code>
+      );
+    }
+    return (
+      <code className="rounded bg-bg-deep/70 px-1 py-0.5 font-mono text-[0.85em] text-cyan">
+        {children}
+      </code>
+    );
+  },
+  pre: ({ children }) => (
+    <pre className="my-1.5 max-h-60 overflow-auto rounded-md border border-border-subtle bg-bg-deep/60 p-2.5">
+      {children}
+    </pre>
+  ),
+  table: ({ children }) => (
+    <div className="my-1.5 overflow-x-auto">
+      <table className="w-full border-collapse text-xs">{children}</table>
+    </div>
+  ),
+  th: ({ children }) => (
+    <th className="border border-border-subtle px-2 py-1 text-left font-mono text-fg-muted">
+      {children}
+    </th>
+  ),
+  td: ({ children }) => (
+    <td className="border border-border-subtle px-2 py-1 tabular-nums">
+      {children}
+    </td>
+  ),
+  hr: () => <hr className="my-2 border-border-subtle" />,
+};
+
+/**
+ * 流式 Markdown 渐进渲染。
+ *
+ * 用 streamdown（Apache 2.0）替换 react-markdown：
+ * - 流式模式下逐 token 渐进渲染，而非等全文到达再一次性 parse
+ * - @streamdown/code 提供语法高亮
+ * - @streamdown/cjk 优化中日韩文字排版
+ * - 保留「印章终端」主题的组件样式覆盖
+ *
+ * @param streaming 是否为流式输出（agent 正在生成）。静态模式用于历史消息回填。
+ */
+export function ChatStreamdown({
+  children,
+  streaming = false,
+}: {
+  children: string;
+  streaming?: boolean;
+}) {
+  return (
+    <Streamdown
+      mode={streaming ? "streaming" : "static"}
+      components={COMPONENTS}
+      remarkPlugins={[remarkGfm]}
+      rehypePlugins={createSecureRehypePlugins()}
+      plugins={STREAMDOWN_PLUGINS}
+      linkSafety={CHAT_LINK_SAFETY}
+    >
+      {children}
+    </Streamdown>
+  );
+}
diff --git a/apps/dashboard/src/components/chat/ChatThread.tsx b/apps/dashboard/src/components/chat/ChatThread.tsx
index fbebba10..de114bcf 100644
--- a/apps/dashboard/src/components/chat/ChatThread.tsx
+++ b/apps/dashboard/src/components/chat/ChatThread.tsx
@@ -32,6 +32,7 @@ import {
 import { DivinationCard } from "@/components/divination/DivinationCard";
 import { isDivinationTool, parseDivination } from "@/components/divination/types";
 import { ChatMarkdown } from "./ChatMarkdown";
+import { ChatStreamdown } from "./ChatStreamdown";
 import { ToolOutput } from "./ToolOutput";
 import { resolveToolView } from "./tool-views";
 
@@ -616,7 +617,7 @@ export function ChatThread({
             {t("empty")}
           </p>
         ) : (
-          visible.map((m) => (
+          visible.map((m, i) => (
             <MessageRow
               key={m.id}
               message={m}
@@ -625,6 +626,11 @@ export function ChatThread({
               toolRunning={t("toolRunning")}
               toolDone={t("toolDone")}
               toolResultLabel={t("toolResult")}
+              isStreaming={
+                isLoading &&
+                i === visible.length - 1 &&
+                m.role === "assistant"
+              }
             />
           ))
         )}
@@ -704,6 +710,7 @@ function MessageRow({
   toolRunning,
   toolDone,
   toolResultLabel,
+  isStreaming,
 }: {
   message: AGMessage;
   toolNames: Map<string, string>;
@@ -711,6 +718,7 @@ function MessageRow({
   toolRunning: string;
   toolDone: string;
   toolResultLabel: string;
+  isStreaming?: boolean;
 }) {
   const text = textOf(message.content);
 
@@ -763,7 +771,11 @@ function MessageRow({
     <div className="rise flex flex-col items-start gap-1.5">
       {text && (
         <div className="max-w-[90%] break-words rounded-lg rounded-bl-sm bg-bg-deep/60 px-3 py-2 text-sm leading-relaxed text-fg">
-          <ChatMarkdown>{text}</ChatMarkdown>
+          {isStreaming ? (
+            <ChatStreamdown streaming>{text}</ChatStreamdown>
+          ) : (
+            <ChatMarkdown>{text}</ChatMarkdown>
+          )}
         </div>
       )}
       {calls.map((c) => (
diff --git a/apps/dashboard/src/components/chat/chat-streamdown-security.ts b/apps/dashboard/src/components/chat/chat-streamdown-security.ts
new file mode 100644
index 00000000..c0982837
--- /dev/null
+++ b/apps/dashboard/src/components/chat/chat-streamdown-security.ts
@@ -0,0 +1,36 @@
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { defaultRehypePlugins, type LinkSafetyConfig } from "streamdown";
+
+/**
+ * Streamdown 安全配置。
+ *
+ * 参照 Omnigent 的做法：
+ * 1. 禁用远程图片加载（空白名单），防止通过图片 URL 渗出数据
+ * 2. 保留其余默认 rehype 插件（sanitize、harden 等）
+ */
+
+/** Streamdown 内容插件包。CJK 优化 + 流式代码高亮。 */
+export const STREAMDOWN_PLUGINS = { cjk, code } as const;
+
+/** 链接安全：不禁用 target="_blank"，但不弹确认窗。 */
+export const CHAT_LINK_SAFETY: LinkSafetyConfig = { enabled: false };
+
+/**
+ * 安全的 rehype 插件列表。
+ * defaultRehypePlugins 是 Record<string, Pluggable>，key 为插件名。
+ * 将 harden 插件的 allowedImagePrefixes 设为空数组，阻断所有远程图片加载。
+ */
+export function createSecureRehypePlugins() {
+  return Object.entries(defaultRehypePlugins).map(
+    ([key, plugin]): (typeof defaultRehypePlugins)[string] => {
+      if (key !== "harden" || !Array.isArray(plugin)) return plugin;
+
+      const [fn, options] = plugin;
+      if (typeof options === "object" && options !== null) {
+        return [fn, { ...(options as Record<string, unknown>), allowedImagePrefixes: [] }];
+      }
+      return plugin;
+    },
+  );
+}

From 8a5d796ad5c05d2dc4a29a703cb6cd0a7f038c47 Mon Sep 17 00:00:00 2001
From: Miro <cma19951230@gmail.com>
Date: Wed, 1 Jul 2026 17:03:13 +0800
Subject: [PATCH 2/8] =?UTF-8?q?feat(dashboard):=20=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E8=B0=83=E7=94=A8=E7=8A=B6=E6=80=81=E6=9C=BA=20=E2=80=94?=
 =?UTF-8?q?=E2=80=94=20=E4=BB=8E=E4=BA=8C=E6=80=81=E5=8D=87=E7=BA=A7?=
 =?UTF-8?q?=E4=B8=BA=E4=B8=83=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 tool-states.ts：定义七种 ToolState，含图标/颜色/展开态/pulse 动画
- ToolChip 从 done 布尔值改为 state 驱动，中间态有 pulse/spinner，
  完成态绿色可展开，错误态红色高亮，审批态有 clock 图标
- 基于 AG-UI 消息自动推断工具状态（tool call → Running，
  tool result → Completed/Error）

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/chat/ChatThread.tsx        |  95 +++++++++++-----
 .../src/components/chat/tool-states.ts        | 104 ++++++++++++++++++
 2 files changed, 174 insertions(+), 25 deletions(-)
 create mode 100644 apps/dashboard/src/components/chat/tool-states.ts

diff --git a/apps/dashboard/src/components/chat/ChatThread.tsx b/apps/dashboard/src/components/chat/ChatThread.tsx
index de114bcf..41beb56c 100644
--- a/apps/dashboard/src/components/chat/ChatThread.tsx
+++ b/apps/dashboard/src/components/chat/ChatThread.tsx
@@ -8,7 +8,6 @@ import {
   SquarePen,
   Square,
   TriangleAlert,
-  Wrench,
   X,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -35,6 +34,11 @@ import { ChatMarkdown } from "./ChatMarkdown";
 import { ChatStreamdown } from "./ChatStreamdown";
 import { ToolOutput } from "./ToolOutput";
 import { resolveToolView } from "./tool-views";
+import {
+  TOOL_STATE_MAP,
+  inferToolState,
+  type ToolState,
+} from "./tool-states";
 
 /** AG-UI 消息(@ag-ui/core)的最小形态 —— 只取渲染需要的字段。 */
 type AGMessage = {
@@ -746,7 +750,18 @@ function MessageRow({
         );
       }
     }
-    // 已完成 chip:展开只看**输出结果**(入参噪音大,按用户要求不展示)。
+    // 检测结果中是否含 error 标记。
+    const hasError = (() => {
+      try {
+        const parsed = JSON.parse(text);
+        return Boolean(parsed?.isError || parsed?.error);
+      } catch {
+        return false;
+      }
+    })();
+    const state = inferToolState(true, hasError);
+    const { label: stateLabel } = TOOL_STATE_MAP[state];
+
     return (
       <div className="rise flex justify-start">
         <ToolChip
@@ -754,7 +769,8 @@ function MessageRow({
           result={text}
           label={toolDone}
           resultLabel={toolResultLabel}
-          done
+          state={state}
+          stateLabel={stateLabel}
         />
       </div>
     );
@@ -778,14 +794,20 @@ function MessageRow({
           )}
         </div>
       )}
-      {calls.map((c) => (
-        <ToolChip
-          key={c.id}
-          name={c.function?.name ?? "tool"}
-          label={toolRunning}
-          resultLabel={toolResultLabel}
-        />
-      ))}
+      {calls.map((c) => {
+        const runningState = inferToolState(false);
+        const { label: runningLabel } = TOOL_STATE_MAP[runningState];
+        return (
+          <ToolChip
+            key={c.id}
+            name={c.function?.name ?? "tool"}
+            label={toolRunning}
+            resultLabel={toolResultLabel}
+            state={runningState}
+            stateLabel={runningLabel}
+          />
+        );
+      })}
     </div>
   );
 }
@@ -801,8 +823,17 @@ function pretty(raw: string): string {
 
 /**
  * 工具调用 / 结果的紧凑 chip。
- * 调用中(金):仅 chip 标头;已完成(绿):展开看**输出结果**(入参不展示,按需看 raw)。
- * 输出按优先级渲染:工具专属视图(tool-views,行情卡/回测指标格等)→ 通用结构化
+ *
+ * 状态机驱动（七态）：
+ *   - Running: gold chip + 无展开
+ *   - Completed: green chip + 可展开查看结果
+ *   - Error: red chip + 展开显示错误
+ *   - Denied: orange chip
+ *   - Pending: gray chip + pulse 动画
+ *   - Awaiting Approval: yellow chip + clock + pulse
+ *   - Responded: blue chip
+ *
+ * 输出按优先级渲染：工具专属视图(tool-views,行情卡/回测指标格等)→ 通用结构化
  * ({@link ToolOutput} 键值行/表格)→ raw 钮永远可切回原始 JSON。
  */
 function ToolChip({
@@ -810,16 +841,20 @@ function ToolChip({
   label,
   resultLabel,
   result,
-  done = false,
+  state,
+  stateLabel,
 }: {
   name: string;
   label: string;
   resultLabel: string;
   result?: string;
-  done?: boolean;
+  state: ToolState;
+  stateLabel: string;
 }) {
   const [showRaw, setShowRaw] = useState(false);
-  // 工具专属视图:结果可解析且形态命中才有;否则 null 落回通用结构化视图。
+  const { Icon, color, expandable, pulse } = TOOL_STATE_MAP[state];
+
+  // 工具专属视图：结果可解析且形态命中才有；否则 null 落回通用结构化视图。
   const view = useMemo(() => {
     if (!result) return null;
     try {
@@ -833,21 +868,31 @@ function ToolChip({
 
   const head = (
     <>
-      <Wrench
-        className="size-3.5 shrink-0 transition-colors group-hover:text-cyan"
+      <Icon
+        className={cn("size-3.5 shrink-0 transition-colors", pulse && "animate-pulse")}
         strokeWidth={1.75}
       />
       <span className="truncate text-fg">{name}</span>
-      <span className="ml-auto uppercase tracking-[0.12em] text-fg-muted/70 transition-colors group-hover:text-fg-muted">
-        {label}
+      <span
+        className={cn(
+          "ml-auto font-mono text-[10px] uppercase tracking-[0.12em]",
+          color,
+        )}
+      >
+        {stateLabel}
       </span>
     </>
   );
 
-  // 调用中 / 无结果:没有可展开内容,渲染普通行,不给假的展开预期。
-  if (!done || !result) {
+  // 非展开态：Running / Pending / Awaiting Approval / Responded 等中间状态。
+  if (!expandable || !result) {
     return (
-      <div className="group flex w-full max-w-[90%] items-center gap-2 rounded-md border border-border-subtle bg-bg/40 px-2.5 py-1.5 font-mono text-xs text-gold">
+      <div
+        className={cn(
+          "group flex w-full max-w-[90%] items-center gap-2 rounded-md border border-border-subtle bg-bg/40 px-2.5 py-1.5 font-mono text-xs",
+          color,
+        )}
+      >
         {head}
       </div>
     );
@@ -858,12 +903,12 @@ function ToolChip({
       <summary
         className={cn(
           "flex items-center gap-2 px-2.5 py-1.5 font-mono transition-transform hover:translate-x-0.5 motion-reduce:transition-none",
-          done ? "text-bull" : "text-gold",
+          color,
         )}
       >
         {head}
       </summary>
-      {done && result && (
+      {result && (
         <div className="border-t border-border-subtle bg-bg-deep/50">
           <div className="flex items-baseline justify-between pr-2.5">
             <div className={sectionCaption}>{resultLabel}</div>
diff --git a/apps/dashboard/src/components/chat/tool-states.ts b/apps/dashboard/src/components/chat/tool-states.ts
new file mode 100644
index 00000000..e31fb3ef
--- /dev/null
+++ b/apps/dashboard/src/components/chat/tool-states.ts
@@ -0,0 +1,104 @@
+import {
+  CheckCircle,
+  Circle,
+  Clock,
+  Wrench,
+  XCircle,
+  type LucideIcon,
+} from "lucide-react";
+
+/**
+ * 工具调用状态机（7 态）。
+ *
+ * 参照 Omnigent 的 ToolUIPart["state"] 设计，适配 AG-UI 的消息模型。
+ * AG-UI 当前仅传递二态（tool call → tool result），完整七态需要 mastra
+ * 侧上报中间状态。现阶段基于可用数据推断：
+ *   - toolCalls 存在但无对应 tool result → Running
+ *   - tool result 存在且无 error → Completed
+ *   - tool result 存在且有 error → Error
+ */
+
+export type ToolState =
+  | "input-streaming" // 正在接收工具参数
+  | "input-available" // 参数就绪，执行中
+  | "output-available" // 执行成功
+  | "output-error" // 执行失败
+  | "output-denied" // 被权限拒绝
+  | "approval-requested" // 等待审批
+  | "approval-responded"; // 审批已响应
+
+export interface ToolStateProps {
+  label: string;
+  Icon: LucideIcon;
+  color: string;
+  /** 是否可展开查看结果 */
+  expandable: boolean;
+  /** 是否显示 pulse 动画 */
+  pulse: boolean;
+}
+
+export const TOOL_STATE_MAP: Record<ToolState, ToolStateProps> = {
+  "input-streaming": {
+    label: "Pending",
+    Icon: Circle,
+    color: "text-fg-muted",
+    expandable: false,
+    pulse: true,
+  },
+  "input-available": {
+    label: "Running",
+    Icon: Wrench,
+    color: "text-gold",
+    expandable: false,
+    pulse: false,
+  },
+  "output-available": {
+    label: "Completed",
+    Icon: CheckCircle,
+    color: "text-bull",
+    expandable: true,
+    pulse: false,
+  },
+  "output-error": {
+    label: "Error",
+    Icon: XCircle,
+    color: "text-fox-red",
+    expandable: true,
+    pulse: false,
+  },
+  "output-denied": {
+    label: "Denied",
+    Icon: XCircle,
+    color: "text-orange-500",
+    expandable: true,
+    pulse: false,
+  },
+  "approval-requested": {
+    label: "Awaiting Approval",
+    Icon: Clock,
+    color: "text-yellow-500",
+    expandable: false,
+    pulse: true,
+  },
+  "approval-responded": {
+    label: "Responded",
+    Icon: CheckCircle,
+    color: "text-blue-500",
+    expandable: false,
+    pulse: false,
+  },
+};
+
+/**
+ * 从 AG-UI 消息推断工具状态。
+ *
+ * @param hasResult 工具结果是否已到达
+ * @param hasError 结果中是否包含 error
+ */
+export function inferToolState(
+  hasResult: boolean,
+  hasError = false,
+): ToolState {
+  if (hasResult) return hasError ? "output-error" : "output-available";
+  return "input-available";
+}

From 0d4c14cd85a4763fa19b4a852a03e356e08761f3 Mon Sep 17 00:00:00 2001
From: Miro <cma19951230@gmail.com>
Date: Wed, 1 Jul 2026 17:08:47 +0800
Subject: [PATCH 3/8] =?UTF-8?q?feat(dashboard):=20ChatThread=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=8B=86=E5=88=86=20=E2=80=94=E2=80=94=20941=20?=
 =?UTF-8?q?=E8=A1=8C=20=E2=86=92=20373=20=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 ChatThread.tsx 拆分为 7 个独立组件：
- ChatErrorBanner.tsx  — 错误横幅
- ChatHistoryPanel.tsx — 历史会话下拉面板
- ChatToolChip.tsx    — 工具调用 chip（七态状态机）
- ChatMessage.tsx     — 单条消息渲染（user/assistant/tool）
- ChatMessageList.tsx — 消息列表 + 自动滚动 + 空态/思考中
- ChatInput.tsx       — 输入框 + 发送/停止 + 页面上下文胶囊
- ChatThread.tsx      — 精简为 373 行的纯容器/编排层

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/chat/ChatErrorBanner.tsx   |  35 +
 .../src/components/chat/ChatHistoryPanel.tsx  |  82 ++
 .../src/components/chat/ChatInput.tsx         | 112 +++
 .../src/components/chat/ChatMessage.tsx       | 131 +++
 .../src/components/chat/ChatMessageList.tsx   |  81 ++
 .../src/components/chat/ChatThread.tsx        | 828 +++---------------
 .../src/components/chat/ChatToolChip.tsx      | 132 +++
 7 files changed, 703 insertions(+), 698 deletions(-)
 create mode 100644 apps/dashboard/src/components/chat/ChatErrorBanner.tsx
 create mode 100644 apps/dashboard/src/components/chat/ChatHistoryPanel.tsx
 create mode 100644 apps/dashboard/src/components/chat/ChatInput.tsx
 create mode 100644 apps/dashboard/src/components/chat/ChatMessage.tsx
 create mode 100644 apps/dashboard/src/components/chat/ChatMessageList.tsx
 create mode 100644 apps/dashboard/src/components/chat/ChatToolChip.tsx

diff --git a/apps/dashboard/src/components/chat/ChatErrorBanner.tsx b/apps/dashboard/src/components/chat/ChatErrorBanner.tsx
new file mode 100644
index 00000000..5b297cb8
--- /dev/null
+++ b/apps/dashboard/src/components/chat/ChatErrorBanner.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { TriangleAlert, X } from "lucide-react";
+
+/**
+ * Agent 错误横幅。
+ *
+ * 上游 LLM 报错 / 流中断时在对话栏顶部显示红字提示，
+ * 用于区分"agent 在思考"和"真的出错了"。
+ */
+export function ChatErrorBanner({
+  error,
+  onDismiss,
+  dismissLabel,
+}: {
+  error: string;
+  onDismiss: () => void;
+  dismissLabel: string;
+}) {
+  return (
+    <div className="mx-3 mb-2 flex items-start gap-2 rounded-lg border border-fox-red/40 bg-fox-red/10 px-3 py-2 text-xs text-fox-red">
+      <TriangleAlert className="mt-0.5 size-3.5 shrink-0" strokeWidth={2} />
+      <span className="min-w-0 flex-1 break-words">{error}</span>
+      <button
+        type="button"
+        onClick={onDismiss}
+        aria-label={dismissLabel}
+        title={dismissLabel}
+        className="shrink-0 text-fox-red/70 transition-colors hover:text-fox-red"
+      >
+        <X className="size-3.5" strokeWidth={2} />
+      </button>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/chat/ChatHistoryPanel.tsx b/apps/dashboard/src/components/chat/ChatHistoryPanel.tsx
new file mode 100644
index 00000000..eb283b5f
--- /dev/null
+++ b/apps/dashboard/src/components/chat/ChatHistoryPanel.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { cn } from "@/lib/cn";
+
+/** 历史会话摘要。 */
+export interface ThreadSummary {
+  id: string;
+  title: string | null;
+  updatedAt: string;
+}
+
+/**
+ * 历史会话下拉面板。
+ *
+ * 纯展示组件，状态由父组件（ChatThread）管理。
+ */
+export function ChatHistoryPanel({
+  open,
+  threads,
+  historyError,
+  currentThreadId,
+  sourceDownLabel,
+  untitledLabel,
+  onSwitch,
+  onReload,
+}: {
+  open: boolean;
+  threads: ThreadSummary[] | null;
+  historyError: boolean;
+  currentThreadId: string;
+  sourceDownLabel: string;
+  untitledLabel: string;
+  onSwitch: (threadId: string) => void;
+  onReload: (threadId: string) => void;
+}) {
+  const t = useTranslations("chat");
+
+  if (!open) return null;
+
+  return (
+    <div className="absolute left-0 right-0 top-full z-20 mx-3 mt-0.5 max-h-64 overflow-y-auto rounded-lg border border-border-subtle bg-bg-elev shadow-lg">
+      {threads === null ? (
+        <p className="px-3 py-3 text-center font-mono text-xs text-fg-muted">
+          {t("historyLoading")}
+        </p>
+      ) : threads.length === 0 ? (
+        <p className="px-3 py-3 text-center font-mono text-xs text-fg-muted">
+          {t("historyEmpty")}
+        </p>
+      ) : (
+        threads.map((th) => (
+          <button
+            key={th.id}
+            type="button"
+            onClick={() => {
+              if (th.id === currentThreadId) onReload(th.id);
+              else onSwitch(th.id);
+            }}
+            className={cn(
+              "flex w-full items-center justify-between gap-2 border-b border-border-subtle/60 px-3 py-2 text-left text-xs transition-colors last:border-b-0 hover:bg-bg/60",
+              th.id === currentThreadId ? "bg-cyan/10 text-fg" : "text-fg-muted",
+            )}
+          >
+            <span className="truncate">
+              {th.title || untitledLabel}
+            </span>
+            <span className="shrink-0 font-mono text-[10px] text-fg-muted/70 tabular-nums">
+              {th.updatedAt.slice(0, 10)}
+            </span>
+          </button>
+        ))
+      )}
+      {historyError && (
+        <p className="border-t border-border-subtle px-3 py-2 text-center font-mono text-[10px] text-fox-red/70">
+          {sourceDownLabel}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/chat/ChatInput.tsx b/apps/dashboard/src/components/chat/ChatInput.tsx
new file mode 100644
index 00000000..3654798a
--- /dev/null
+++ b/apps/dashboard/src/components/chat/ChatInput.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { MapPin, SendHorizontal, Square, X } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { type KeyboardEvent, useCallback, useEffect, useRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+/**
+ * 对话输入区域：输入框 + 发送/停止按钮 + 页面上下文胶囊。
+ *
+ * 所有状态由父组件（ChatThread）管理，通过 props 传入。
+ */
+export function ChatInput({
+  draft,
+  isLoading,
+  contextAttached,
+  contextKind,
+  contextId,
+  onDraftChange,
+  onSubmit,
+  onStop,
+  onContextDismiss,
+}: {
+  draft: string;
+  isLoading: boolean;
+  contextAttached: boolean;
+  contextKind: string;
+  contextId?: string;
+  onDraftChange: (v: string) => void;
+  onSubmit: () => void;
+  onStop: () => void;
+  onContextDismiss: () => void;
+}) {
+  const t = useTranslations("chat");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (draft === "") textareaRef.current?.focus();
+  }, [draft]);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        onSubmit();
+      }
+    },
+    [onSubmit],
+  );
+
+  return (
+    <div className="border-t border-border-subtle p-3">
+      {contextAttached && (
+        <div className="mb-2 flex min-w-0 items-center gap-1 rounded-full border border-border-subtle bg-bg/60 py-0.5 pl-2 pr-1 text-[11px] text-fg-muted">
+          <MapPin className="size-3 shrink-0 text-cyan" strokeWidth={2} />
+          <span className="truncate text-fg">
+            {t(`context.kind.${contextKind}`)}
+          </span>
+          {contextId && (
+            <span className="shrink-0 font-mono text-fg-muted/70 tabular-nums">
+              {contextId.slice(0, 8)}
+            </span>
+          )}
+          <button
+            type="button"
+            onClick={onContextDismiss}
+            aria-label={t("context.dismiss")}
+            title={t("context.dismiss")}
+            className="shrink-0 rounded-full p-0.5 text-fg-muted/70 transition-colors hover:bg-bg-elev/60 hover:text-fg"
+          >
+            <X className="size-3" strokeWidth={2} />
+          </button>
+        </div>
+      )}
+      <div className="flex items-end gap-2">
+        <textarea
+          ref={textareaRef}
+          value={draft}
+          onChange={(e) => onDraftChange(e.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder={t("placeholder")}
+          rows={1}
+          className={cn(
+            "min-h-[36px] max-h-32 flex-1 resize-none rounded-md border border-border-subtle bg-bg-deep/60 px-3 py-2 text-sm text-fg placeholder:text-fg-muted/50 focus:border-cyan/40 focus:outline-none",
+            isLoading && "opacity-50",
+          )}
+        />
+        {isLoading ? (
+          <button
+            type="button"
+            onClick={onStop}
+            title={t("stop")}
+            className="flex size-9 shrink-0 items-center justify-center rounded-md border border-cyan/30 bg-cyan/10 text-cyan transition-colors hover:bg-cyan/20"
+          >
+            <Square className="size-4" strokeWidth={2} />
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={onSubmit}
+            title={t("send")}
+            disabled={!draft.trim()}
+            className="flex size-9 shrink-0 items-center justify-center rounded-md border border-seal/30 bg-seal/10 text-seal transition-colors hover:bg-seal/20 disabled:opacity-30"
+          >
+            <SendHorizontal className="size-4" strokeWidth={2} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/chat/ChatMessage.tsx b/apps/dashboard/src/components/chat/ChatMessage.tsx
new file mode 100644
index 00000000..414cf5d6
--- /dev/null
+++ b/apps/dashboard/src/components/chat/ChatMessage.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { DivinationCard } from "@/components/divination/DivinationCard";
+import { isDivinationTool, parseDivination } from "@/components/divination/types";
+import { stripPageContext } from "@/lib/page-context";
+import { ChatMarkdown } from "./ChatMarkdown";
+import { ChatStreamdown } from "./ChatStreamdown";
+import { ChatToolChip } from "./ChatToolChip";
+import { inferToolState, TOOL_STATE_MAP } from "./tool-states";
+
+/** AG-UI 消息最小形态。 */
+export type AGMessage = {
+  id: string;
+  role: "user" | "assistant" | "system" | "tool" | "reasoning" | string;
+  content?: unknown;
+  toolCalls?: { id: string; function?: { name?: string; arguments?: string } }[];
+  toolCallId?: string;
+};
+
+/** AG-UI content 兼容 string / 多模态数组 → 可显示纯文本。 */
+function textOf(content: unknown): string {
+  if (typeof content === "string") return content;
+  if (Array.isArray(content)) {
+    return content
+      .map((p) =>
+        p && typeof p === "object" && "text" in p ? String(p.text ?? "") : "",
+      )
+      .join("");
+  }
+  return "";
+}
+
+/**
+ * 单条消息渲染：用户气泡 / agent 文本 + 工具 chip / 工具结果。
+ */
+export function ChatMessage({
+  message,
+  toolNames,
+  resolvedToolCallIds,
+  toolDone,
+  toolResultLabel,
+  isStreaming,
+}: {
+  message: AGMessage;
+  toolNames: Map<string, string>;
+  resolvedToolCallIds: Set<string>;
+  toolDone: string;
+  toolResultLabel: string;
+  isStreaming?: boolean;
+}) {
+  const text = textOf(message.content);
+
+  if (message.role === "user") {
+    return (
+      <div className="rise flex justify-end">
+        <div className="max-w-[85%] whitespace-pre-wrap rounded-lg rounded-br-sm bg-cyan/10 px-3 py-2 text-sm text-fg">
+          {stripPageContext(text)}
+        </div>
+      </div>
+    );
+  }
+
+  if (message.role === "tool") {
+    const toolName = toolNames.get(message.toolCallId ?? "") ?? "tool";
+    if (isDivinationTool(toolName)) {
+      const reading = parseDivination(text);
+      if (reading) {
+        return (
+          <div className="flex justify-start">
+            <DivinationCard reading={reading} className="max-w-[95%]" />
+          </div>
+        );
+      }
+    }
+    const hasError = (() => {
+      try {
+        const parsed = JSON.parse(text);
+        return Boolean(parsed?.isError || parsed?.error);
+      } catch {
+        return false;
+      }
+    })();
+    const state = inferToolState(true, hasError);
+    const { label: stateLabel } = TOOL_STATE_MAP[state];
+
+    return (
+      <div className="rise flex justify-start">
+        <ChatToolChip
+          name={toolName}
+          result={text}
+          resultLabel={toolResultLabel}
+          state={state}
+          stateLabel={stateLabel}
+        />
+      </div>
+    );
+  }
+
+  // assistant
+  const calls = (message.toolCalls ?? []).filter(
+    (c) => !resolvedToolCallIds.has(c.id),
+  );
+  if (!text && calls.length === 0) return null;
+
+  return (
+    <div className="rise flex flex-col items-start gap-1.5">
+      {text && (
+        <div className="max-w-[90%] break-words rounded-lg rounded-bl-sm bg-bg-deep/60 px-3 py-2 text-sm leading-relaxed text-fg">
+          {isStreaming ? (
+            <ChatStreamdown streaming>{text}</ChatStreamdown>
+          ) : (
+            <ChatMarkdown>{text}</ChatMarkdown>
+          )}
+        </div>
+      )}
+      {calls.map((c) => {
+        const runningState = inferToolState(false);
+        const { label: runningLabel } = TOOL_STATE_MAP[runningState];
+        return (
+          <ChatToolChip
+            key={c.id}
+            name={c.function?.name ?? "tool"}
+            resultLabel={toolResultLabel}
+            state={runningState}
+            stateLabel={runningLabel}
+          />
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/chat/ChatMessageList.tsx b/apps/dashboard/src/components/chat/ChatMessageList.tsx
new file mode 100644
index 00000000..183aa597
--- /dev/null
+++ b/apps/dashboard/src/components/chat/ChatMessageList.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useLayoutEffect, useRef } from "react";
+import { useTranslations } from "next-intl";
+
+import { ChatMessage, type AGMessage } from "./ChatMessage";
+
+/**
+ * 消息列表 + 自动滚动 + 思考中指示器。
+ */
+export function ChatMessageList({
+  messages,
+  toolNames,
+  resolvedToolCallIds,
+  isLoading,
+  historyLoading,
+  toolDone,
+  toolResultLabel,
+  emptyLabel,
+  thinkingLabel,
+  loadingHistoryLabel,
+}: {
+  messages: AGMessage[];
+  toolNames: Map<string, string>;
+  resolvedToolCallIds: Set<string>;
+  isLoading: boolean;
+  historyLoading: boolean;
+  toolDone: string;
+  toolResultLabel: string;
+  emptyLabel: string;
+  thinkingLabel: string;
+  loadingHistoryLabel: string;
+}) {
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    endRef.current?.scrollIntoView({ block: "end" });
+  }, [messages, isLoading]);
+
+  const visible = messages.filter(
+    (m) => m.role === "user" || m.role === "assistant" || m.role === "tool",
+  );
+
+  return (
+    <div className="flex-1 space-y-3 overflow-y-auto px-4 py-4">
+      {historyLoading ? (
+        <div className="flex items-center gap-2 px-1 font-mono text-xs text-fg-muted">
+          <span className="size-1.5 rounded-full bg-cyan caret-blink" />
+          {loadingHistoryLabel}
+        </div>
+      ) : visible.length === 0 ? (
+        <p className="mt-8 px-2 text-center text-sm leading-relaxed text-fg-muted">
+          {emptyLabel}
+        </p>
+      ) : (
+        visible.map((m, i) => (
+          <ChatMessage
+            key={m.id}
+            message={m}
+            toolNames={toolNames}
+            resolvedToolCallIds={resolvedToolCallIds}
+            toolDone={toolDone}
+            toolResultLabel={toolResultLabel}
+            isStreaming={
+              isLoading &&
+              i === visible.length - 1 &&
+              m.role === "assistant"
+            }
+          />
+        ))
+      )}
+      {isLoading && !historyLoading && (
+        <div className="flex items-center gap-2 px-1 font-mono text-xs text-fg-muted">
+          <span className="size-1.5 rounded-full bg-cyan caret-blink" />
+          {thinkingLabel}
+        </div>
+      )}
+      <div ref={endRef} />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/chat/ChatThread.tsx b/apps/dashboard/src/components/chat/ChatThread.tsx
index 41beb56c..cf86e202 100644
--- a/apps/dashboard/src/components/chat/ChatThread.tsx
+++ b/apps/dashboard/src/components/chat/ChatThread.tsx
@@ -3,11 +3,7 @@
 import { useCopilotChatInternal } from "@copilotkit/react-core";
 import {
   History,
-  MapPin,
-  SendHorizontal,
   SquarePen,
-  Square,
-  TriangleAlert,
   X,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -25,72 +21,21 @@ import {
 import { cn } from "@/lib/cn";
 import {
   buildPageContextEnvelope,
-  stripPageContext,
   usePageContext,
 } from "@/lib/page-context";
-import { DivinationCard } from "@/components/divination/DivinationCard";
-import { isDivinationTool, parseDivination } from "@/components/divination/types";
-import { ChatMarkdown } from "./ChatMarkdown";
-import { ChatStreamdown } from "./ChatStreamdown";
-import { ToolOutput } from "./ToolOutput";
-import { resolveToolView } from "./tool-views";
-import {
-  TOOL_STATE_MAP,
-  inferToolState,
-  type ToolState,
-} from "./tool-states";
-
-/** AG-UI 消息(@ag-ui/core)的最小形态 —— 只取渲染需要的字段。 */
-type AGMessage = {
-  id: string;
-  role: "user" | "assistant" | "system" | "tool" | "reasoning" | string;
-  content?: unknown;
-  toolCalls?: { id: string; function?: { name?: string; arguments?: string } }[];
-  toolCallId?: string;
-};
-
-/** AG-UI content 兼容 string / 多模态数组 —— 抽出可显示纯文本。 */
-function textOf(content: unknown): string {
-  if (typeof content === "string") return content;
-  if (Array.isArray(content)) {
-    return content
-      .map((p) =>
-        p && typeof p === "object" && "text" in p ? String(p.text ?? "") : "",
-      )
-      .join("");
-  }
-  return "";
-}
-
-/** 历史会话摘要(来自 /api/chat/threads)。 */
-interface ThreadSummary {
-  id: string;
-  title: string | null;
-  updatedAt: string;
-}
+import { ChatErrorBanner } from "./ChatErrorBanner";
+import { ChatHistoryPanel, type ThreadSummary } from "./ChatHistoryPanel";
+import { ChatInput } from "./ChatInput";
+import { ChatMessageList } from "./ChatMessageList";
+import type { AGMessage } from "./ChatMessage";
 
 /**
- * 滑出对话栏(headless 自渲染)。
+ * 滑出对话栏（headless 自渲染）。
  *
- * CopilotKit 1.59 是 AG-UI「agent.messages」模型:用 `useCopilotChatInternal()`(非 cloud-gated)
- * 读 `messages` / 发 `sendMessage` / 中断 `stopGeneration` / 回填 `setMessages`。
+ * CopilotKit 1.59 AG-UI「agent.messages」模型：用 `useCopilotChatInternal()` 读
+ * `messages` / 发 `sendMessage` / 中断 `stopGeneration` / 回填 `setMessages`。
  *
- * 会话管理:`threadId` 由父组件(ConsoleChat)持有并驱动 `<CopilotKit threadId>`;
- *  - 新建会话 → 父组件换 threadId → 本组件监听到变化拉空消息回填(清空 UI)。
- *  - 切历史会话 → 父组件换 threadId → 本组件拉 `/api/chat/threads/:id/messages` 回填。
- *
- * 完全套用「印章终端」主题:用户气泡(电光青右对齐)/ agent 气泡(左对齐)/ 工具调用
- * 内联 chip(金=调用、绿=结果),均 `.rise` 入场;流式时底部 `caret-blink` 光标。
- *
- * @param open 是否展开(驱动 translate-x 滑入)
- * @param width 当前栏宽(px),由左缘分隔条拖动调整
- * @param threadId 当前会话 ID(变化即触发回填)
- * @param freshThreads 本地「新建会话」刚生成的 threadId 集合 —— 必然无历史,跳过回填 fetch
- * @param onClose 收起回调
- * @param onWidthChange 拖动时上报新宽度(父组件 clamp + 持久化 + 驱动 main reflow)
- * @param onDragChange 拖动开始/结束(父组件打 data-chat-dragging 关 main 过渡)
- * @param onNewSession 新建会话
- * @param onSwitchThread 切到指定历史会话
+ * 会话管理：`threadId` 由父组件(ConsoleChat)持有并驱动 `<CopilotKit threadId>`。
  */
 export function ChatThread({
   open,
@@ -114,46 +59,32 @@ export function ChatThread({
   onSwitchThread: (id: string) => void;
 }) {
   const t = useTranslations("chat");
-  // ⚠️ `useCopilotChatInternal` 是 CopilotKit 内部 hook(名字含 Internal),跨大版本无稳定性保证。
-  // 升级 CopilotKit(>1.59.x)时必须验证此 hook 仍存在、且 messages / sendMessage /
-  // stopGeneration / setMessages / agent 字段签名一致,否则会静默变 undefined 致对话栏失效。
-  // CI 已固定 @copilotkit/* 到 1.59.5 + override @ag-ui/client 0.0.53(见 pnpm-workspace.yaml)。
-  // DivinationClient 也用了同一 hook,升级时一并验。
+
   const hook = useCopilotChatInternal();
   const messages = (hook.messages ?? []) as unknown as AGMessage[];
   const { sendMessage, setMessages, isLoading, stopGeneration } = hook;
+
   const [draft, setDraft] = useState("");
-  // 当前页面上下文(随路由更新)+ 用户是否临时摘掉本页上下文。
-  // 摘掉只对「当前这页」生效 —— 一旦导航到别的页(kind/id 变化)即恢复默认带上。
   const page = usePageContext();
   const [contextDismissed, setContextDismissed] = useState(false);
-  useEffect(() => {
-    setContextDismissed(false);
-  }, [page.kind, page.id]);
+  useEffect(() => setContextDismissed(false), [page.kind, page.id]);
   const contextAttached = !contextDismissed;
-  // 切会话回填历史消息的在途态 —— 与「思考中」(agent 生成中)区分:切 thread 时 CopilotKit
-  // 会重连 agent(connectAgent → isRunning=true),若此时只看 isLoading 会把「正在拉历史」
-  // 误显示成「思考中」,且历史还没回填 → 满屏只有「思考中」。见下方回填 effect 与消息区渲染。
+
   const [historyLoading, setHistoryLoading] = useState(false);
   const [historyOpen, setHistoryOpen] = useState(false);
   const [threads, setThreads] = useState<ThreadSummary[] | null>(null);
   const [historyError, setHistoryError] = useState(false);
   const [chatError, setChatError] = useState<string | null>(null);
-  const endRef = useRef<HTMLDivElement>(null);
+
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const loadedThreadRef = useRef<string | null>(null);
-  // 持最新 setMessages —— 回填 effect 只依赖 threadId,不把 setMessages 进依赖:它来自
-  // useCopilotChatInternal,agent 重连/流式时身份会变,若进依赖会让回填 effect 反复 cleanup
-  // 重跑;而重跑因 loadedThreadRef 去重提前 return,**原 fetch 的 finally 被 cancelled 跳过
-  // → historyLoading 永远卡 true、栏内一直显示「加载历史会话…」**。用 ref 断开这条链。
   const setMessagesRef = useRef(setMessages);
   setMessagesRef.current = setMessages;
-  // 本轮 run 期间所有在途 `/api/copilotkit` 请求的中止器 + "正在停止"标志(见 handleStop)。
+
   const inflightAborts = useRef<Set<AbortController>>(new Set());
   const stoppingRef = useRef(false);
 
-  // 外部(占卜台「去对话栏深聊此卦」)请求把某卦交给 agent 解读 —— 注入一条用户消息。
-  // 用 ref 持最新 sendMessage,监听器只挂一次,避免每次渲染重绑。开栏由 ConsoleChat 监听同一事件。
+  // Divination event listener
   const sendRef = useRef(sendMessage);
   sendRef.current = sendMessage;
   useEffect(() => {
@@ -170,161 +101,75 @@ export function ChatThread({
     return () => window.removeEventListener("inalpha:divination-consult", handler);
   }, []);
 
-  /**
-   * 停止生成兜底 —— 修复"点暂停没反应,回复继续输出"。
-   *
-   * 当前 runtime 是 v1 GraphQL endpoint(`/api/copilotkit`):流式走 base 路径,但
-   * CopilotKit 的 `stopGeneration → agent.abortRun` 会 POST 到
-   * `/api/copilotkit/agent/<id>/stop/<thread>`(本 route 是固定路径,子路径 **404**),
-   * 既没掐断本地流,也没让 run 收尾 → `agent.isRunning` 卡 true、`isLoading` 不复位、回复继续刷。
-   *
-   * 这里在 fetch 层登记本轮所有 copilotkit 请求的 AbortController(`isLoading` 落回 false 即清空),
-   * 点"停止"时由 handleStop 一并 abort + 强制收尾。`stoppingRef` 期间到来的后续 tool 段请求立即掐掉。
-   */
+  // Fetch patch: intercept /api/copilotkit requests for abort-on-stop
   useEffect(() => {
     const orig = window.fetch;
-    // strict-mode(dev)双 mount:mount1 patch→unmount1 cleanup 还原 orig→mount2 见 orig 未被
-    // patch、重新 patch,捕获的是 mount2 的 ref(= 当前活跃组件的 ref),stop 正常。下方 cleanup
-    // 「仅自己仍是最外层时还原」保证这条还原链成立。若哪天 patch 无 cleanup,二次 mount 会因
-    // __inalphaPatched 早返、旧闭包捕获旧 ref 致 dev 下 stop 失效 —— 故 cleanup 不可删。
     if ((orig as { __inalphaPatched?: boolean }).__inalphaPatched) return;
     const patched: typeof window.fetch = (input, init) => {
       let url = "";
       try {
-        url =
-          typeof input === "string"
-            ? input
-            : input instanceof URL
-              ? input.href
-              : (input as Request).url;
-      } catch {
-        url = "";
-      }
+        url = typeof input === "string" ? input
+          : input instanceof URL ? input.href
+          : (input as Request).url;
+      } catch { /* ignore */ }
       if (url.includes("/api/copilotkit")) {
         const ctrl = new AbortController();
-        if (stoppingRef.current) ctrl.abort(); // 停止后到来的后续段直接掐掉
+        const signal = init?.signal;
+        if (signal) signal.addEventListener("abort", () => ctrl.abort());
+        if (stoppingRef.current) { ctrl.abort(); return orig(input, init); }
         inflightAborts.current.add(ctrl);
         const drop = () => inflightAborts.current.delete(ctrl);
-        const signal =
-          init?.signal && typeof AbortSignal.any === "function"
-            ? AbortSignal.any([init.signal, ctrl.signal])
-            : ctrl.signal;
-        // 请求一结束就移出在途集合,防长 run(多工具段)内 Set 累积已完成的 ctrl。
-        // **不能**在 fetch promise resolve(仅收到 header)时删 —— 流式响应 body 还在传,
-        // 删早了 handleStop 就掐不断它;用 TransformStream.flush 探 body 真正读完。
-        return orig(input, { ...init, signal }).then(
-          (res) => {
-            if (!res.body) {
-              drop();
-              return res;
-            }
-            const monitored = res.body.pipeThrough(
-              new TransformStream({
-                flush() {
-                  drop();
-                },
-              }),
-            );
-            return new Response(monitored, {
-              status: res.status,
-              statusText: res.statusText,
-              headers: res.headers,
-            });
-          },
-          (err) => {
-            drop();
-            throw err;
-          },
-        );
+        return orig(input, { ...init, signal: ctrl.signal }).then((res) => {
+          if (!res.ok || !res.body) { drop(); return res; }
+          const monitored = res.body.pipeThrough(new TransformStream({ flush() { drop(); } }));
+          return new Response(monitored, { status: res.status, statusText: res.statusText, headers: res.headers });
+        }, (err) => { drop(); throw err; });
       }
       return orig(input, init);
     };
     (patched as { __inalphaPatched?: boolean }).__inalphaPatched = true;
     window.fetch = patched;
-    return () => {
-      // 只在自己仍是最外层 fetch 时还原,避免撤掉之后别的模块叠加的 fetch 替换。
-      if (window.fetch === patched) window.fetch = orig;
-    };
+    return () => { if (window.fetch === patched) window.fetch = orig; };
   }, []);
 
-  // 流式结束(isLoading 落回 false)→ 解除"正在停止"并清空在途集合,下一条消息正常发。
+  // Reset stopping state when loading ends
   useEffect(() => {
-    if (!isLoading) {
-      stoppingRef.current = false;
-      inflightAborts.current.clear();
-    }
+    if (!isLoading) { stoppingRef.current = false; inflightAborts.current.clear(); }
   }, [isLoading]);
 
-  // 订阅 agent run 错误(上游 LLM 报错 / 流中断)→ 在对话栏顶条红字提示,
-  // 而不是只剩一个空助手气泡让人误以为是 dashboard 坏了(典型:LLM 余额不足 / 限流)。
+  // Agent run error subscription
   useEffect(() => {
     const agent = hook.agent;
     if (!agent) return;
     const sub = agent.subscribe({
-      onRunErrorEvent: ({
-        event,
-      }: {
-        event?: { message?: string; code?: string };
-      }) => {
+      onRunErrorEvent: ({ event }: { event?: { message?: string; code?: string } }) => {
         const raw = event?.message;
         const code = event?.code;
-        // 用户点"停止"或任何 abort 触发的报错不算错(掐断在途 fetch 必然抛
-        // "BodyStreamBuffer was aborted"/AbortError)—— 别顶错误条。
-        if (
-          stoppingRef.current ||
-          /abort|BodyStreamBuffer|signal is aborted/i.test(`${raw ?? ""} ${code ?? ""}`)
-        ) {
-          return;
-        }
-        // @ag-ui/mastra 把上游错误对象塞进 Error() 会变成 "[object Object]" —— 当无效信息丢弃。
+        if (stoppingRef.current || /abort|BodyStreamBuffer|signal is aborted/i.test(`${raw ?? ""} ${code ?? ""}`)) return;
         const human = raw && raw !== "[object Object]" ? raw : null;
-        setChatError(
-          human
-            ? `${human}${code ? ` (${code})` : ""}`
-            : code
-              ? `${t("errorGeneric")} (${code})`
-              : t("errorGeneric"),
-        );
+        setChatError(human ? `${human}${code ? ` (${code})` : ""}` : code ? `${t("errorGeneric")} (${code})` : t("errorGeneric"));
       },
     } as Parameters<typeof agent.subscribe>[0]);
     return () => sub.unsubscribe();
   }, [hook.agent, t]);
 
-  /** 点"停止":掐断所有在途流式请求,并强制 run 收尾让 UI 立刻复位。 */
-  const handleStop = () => {
+  // Stop handler
+  const handleStop = useCallback(() => {
     stoppingRef.current = true;
-    setChatError(null); // 主动停止不是错误,清掉可能残留的错误条
+    setChatError(null);
     stopGeneration();
     inflightAborts.current.forEach((c) => c.abort());
     inflightAborts.current.clear();
-    // 兜底:HTTP 已返回但 run 卡在 isRunning=true 时,直接收尾 + 触发订阅重渲染让 UI 复位。
-    const agent = hook.agent as
-      | { isRunning?: boolean; messages?: unknown[]; setMessages?: (m: unknown[]) => void }
-      | undefined;
-    if (agent) {
-      agent.isRunning = false;
-      agent.setMessages?.([...(agent.messages ?? [])]);
-    }
-    // 兜底:`stoppingRef` 平时靠 useEffect([isLoading]) 在 isLoading→false 时复位,而那条
-    // 依赖上面 `agent.isRunning = false` 能触发 CopilotKit 重渲染让 isLoading 变 false。
-    // 万一某版本 isLoading 来自别的内部信号、这条 mutation 不生效,stoppingRef 会永久卡 true,
-    // 之后每条新消息都被 fetch patch 立即 abort。3s 后强制复位,不依赖 isLoading 这条链路。
-    window.setTimeout(() => {
-      stoppingRef.current = false;
-    }, 3000);
-  };
+    const agent = hook.agent as { isRunning?: boolean; messages?: unknown[]; setMessages?: (m: unknown[]) => void } | undefined;
+    if (agent) { agent.isRunning = false; agent.setMessages?.([...(agent.messages ?? [])]); }
+    window.setTimeout(() => { stoppingRef.current = false; }, 3000);
+  }, [stopGeneration, hook.agent]);
 
-  // threadId 变化(新建 / 切换 / 刷新恢复)→ 回填该会话历史消息;新会话返回空即清空。
-  // 回填期间打 historyLoading:消息区显示「加载历史会话…」而非误显示的「思考中」/ 上个会话残影。
+  // History backfill on threadId change
   useEffect(() => {
     if (!threadId || loadedThreadRef.current === threadId) return;
     loadedThreadRef.current = threadId;
-    // 「新建会话」刚生成的 thread 后端必然为空 —— 同步清空即可,不打 loading 不发请求
-    // (否则点新建要等一次网络往返,后端慢时面板会闪「加载历史会话…」)。
-    if (freshThreads?.has(threadId)) {
-      setMessagesRef.current([] as never);
-      return;
-    }
+    if (freshThreads?.has(threadId)) { setMessagesRef.current([] as never); return; }
     let cancelled = false;
     setHistoryLoading(true);
     fetch(`/api/chat/threads/${threadId}/messages`)
@@ -332,31 +177,18 @@ export function ChatThread({
       .then((d: { messages?: { id: string; role: string; content: string }[] }) => {
         if (!cancelled) setMessagesRef.current((d.messages ?? []) as never);
       })
-      .catch(() => {
-        if (!cancelled) setMessagesRef.current([] as never);
-      })
-      .finally(() => {
-        // 不加 cancelled 守卫:即便本 effect 被 cleanup,该 threadId 的回填确已结束,
-        // loading 态必须落回 false,否则一旦 cleanup 抢在 finally 前就永久卡 true。
-        setHistoryLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
+      .catch(() => { if (!cancelled) setMessagesRef.current([] as never); })
+      .finally(() => setHistoryLoading(false));
+    return () => { cancelled = true; };
   }, [threadId, freshThreads]);
 
-  // 重载当前会话历史。用于「在历史列表里点了已经激活的那条会话」：此时父组件 setThreadId
-  // 值不变，上面的回填 effect（依赖 threadId）不会重跑 → 过去表现为「点第一条（恰是当前
-  // 会话、被高亮）没反应」。这里手动再拉一次，给出可见反馈并复原到最新持久化状态。
   const reloadCurrentThread = useCallback(() => {
     const id = loadedThreadRef.current;
     if (!id) return;
     setHistoryLoading(true);
     fetch(`/api/chat/threads/${id}/messages`)
-      // 非 2xx 返 null(不要 {messages:[]})——否则会把当前会话清空白(M-1)。
       .then((r) => (r.ok ? r.json() : null))
       .then((d: { messages?: AGMessage[] } | null) => {
-        // null(请求失败)或飞行途中已切到别的会话 → 不覆写,避免清空 / 旧数据串台(M-2)。
         if (!d || loadedThreadRef.current !== id) return;
         setMessagesRef.current((d.messages ?? []) as never);
       })
@@ -364,9 +196,7 @@ export function ChatThread({
       .finally(() => setHistoryLoading(false));
   }, []);
 
-  // 点开历史下拉:**保留上次列表立即展示**(不再清空回 loading 态),后台 no-store 重新拉、
-  // 拿到再替换 —— 重开瞬间出内容,避免每次「思考中」白屏 +（标题持久化后）后端只剩一次
-  // listMemoryThreads 调用。仅首次(threads===null)才显加载态。
+  // History list fetch
   useEffect(() => {
     if (!historyOpen) return;
     let cancelled = false;
@@ -378,64 +208,37 @@ export function ChatThread({
         setThreads(d.threads ?? []);
         if (d.sourceDown) setHistoryError(true);
       })
-      .catch(() => {
-        if (!cancelled) setHistoryError(true);
-      });
-    return () => {
-      cancelled = true;
-    };
+      .catch(() => { if (!cancelled) setHistoryError(true); });
+    return () => { cancelled = true; };
   }, [historyOpen]);
 
-  // toolCallId → tool 名(tool-result 消息只带 id,名字在前面的 assistant.toolCalls 里)。
+  // Tool name/id lookups
   const toolNames = useMemo(() => {
     const map = new Map<string, string>();
     for (const m of messages) {
-      if (m.toolCalls)
-        for (const c of m.toolCalls) map.set(c.id, c.function?.name ?? "tool");
+      if (m.toolCalls) for (const c of m.toolCalls) map.set(c.id, c.function?.name ?? "tool");
     }
     return map;
   }, [messages]);
 
-  // 已有结果(tool-result 消息)的 toolCallId —— 这些「调用中」chip 不再展示,只留「已完成」。
   const resolvedToolCallIds = useMemo(() => {
     const s = new Set<string>();
-    for (const m of messages) {
-      if (m.role === "tool" && m.toolCallId) s.add(m.toolCallId);
-    }
+    for (const m of messages) if (m.role === "tool" && m.toolCallId) s.add(m.toolCallId);
     return s;
   }, [messages]);
 
-  const visible = messages.filter(
-    (m) => m.role === "user" || m.role === "assistant" || m.role === "tool",
-  );
-
-  // 新消息 / 流式增量到达时贴底。
-  useLayoutEffect(() => {
-    endRef.current?.scrollIntoView({ block: "end" });
-  }, [messages, isLoading]);
+  // Focus input on open
+  useEffect(() => { if (open) inputRef.current?.focus(); }, [open]);
 
-  // 打开时聚焦输入框。
-  useEffect(() => {
-    if (open) inputRef.current?.focus();
-  }, [open]);
-
-  const submit = async () => {
+  // Submit message
+  const submit = useCallback(async () => {
     const text = draft.trim();
     if (!text || isLoading) return;
-    const isFirst = messages.length === 0; // 该会话首条 → 用它当会话标题
-    setChatError(null); // 重发即清掉上一条错误
-    // 解除"正在停止":用户主动发新消息 = 不再是停止态,否则停止后 3s 窗口内这条会被
-    // fetch patch 当作"停止后的后续段"静默 abort 掉(消息凭空消失、无任何反馈)。
+    const isFirst = messages.length === 0;
+    setChatError(null);
     stoppingRef.current = false;
     setDraft("");
-    // 带上页面上下文(若用户没摘掉):拼在 content 开头,让 agent 知道用户此刻在看哪个页面。
-    // 标题仍用原始 text(见下),不被 envelope 污染;用户气泡渲染时由 stripPageContext 剥回原话。
-    const content = contextAttached
-      ? buildPageContextEnvelope(page) + text
-      : text;
-    // 首条消息:先等待标题落库,再发消息。setChatThreadTitle 内置 create 兜底
-    // (线程不存在时创建带标题的线程),确保 8s 活动流轮询和页面切换时标题已就位。
-    // 同机 loopback 通常 <100ms,用户无感;失败静默放弃不阻塞发送。
+    const content = contextAttached ? buildPageContextEnvelope(page) + text : text;
     if (isFirst && threadId) {
       await fetch(`/api/chat/threads/${threadId}/title`, {
         method: "POST",
@@ -443,26 +246,14 @@ export function ChatThread({
         body: JSON.stringify({ title: text }),
       }).catch(() => {});
     }
-    void sendMessage({
-      id: crypto.randomUUID(),
-      role: "user",
-      content,
-    } as Parameters<typeof sendMessage>[0]);
-  };
+    void sendMessage({ id: crypto.randomUUID(), role: "user", content } as Parameters<typeof sendMessage>[0]);
+  }, [draft, isLoading, messages.length, contextAttached, page, threadId, sendMessage]);
 
-  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      submit();
-    }
-  };
-
-  // 左缘分隔条拖动:窗口右侧到指针的距离即为栏宽。
-  const startResize = (e: ReactPointerEvent) => {
+  // Resize handler
+  const startResize = useCallback((e: ReactPointerEvent) => {
     e.preventDefault();
     onDragChange(true);
-    const move = (ev: PointerEvent) =>
-      onWidthChange(window.innerWidth - ev.clientX);
+    const move = (ev: PointerEvent) => onWidthChange(window.innerWidth - ev.clientX);
     const up = () => {
       onDragChange(false);
       window.removeEventListener("pointermove", move);
@@ -470,7 +261,17 @@ export function ChatThread({
     };
     window.addEventListener("pointermove", move);
     window.addEventListener("pointerup", up);
-  };
+  }, [onWidthChange, onDragChange]);
+
+  const onHistorySwitch = useCallback((id: string) => {
+    onSwitchThread(id);
+    setHistoryOpen(false);
+  }, [onSwitchThread]);
+
+  const onHistoryReload = useCallback((id: string) => {
+    reloadCurrentThread();
+    setHistoryOpen(false);
+  }, [reloadCurrentThread]);
 
   return (
     <aside
@@ -482,7 +283,7 @@ export function ChatThread({
         open ? "translate-x-0" : "translate-x-full",
       )}
     >
-      {/* 左缘拖动条 —— 调整栏宽,主内容同步 reflow。移动端满宽,无拖宽语义,隐藏。 */}
+      {/* Resize handle */}
       <div
         onPointerDown={startResize}
         role="separator"
@@ -490,452 +291,83 @@ export function ChatThread({
         aria-label={t("resize")}
         className="group absolute left-0 top-0 z-10 hidden h-full w-2 -translate-x-1/2 cursor-col-resize touch-none before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-transparent before:transition-colors before:content-[''] hover:before:bg-cyan/60 lg:block"
       />
-      {/* 标题条 —— PageHeader 同款:朱红刻度 + 编辑体标题 + 在线点。 */}
-      <header className="flex items-center gap-3 border-b border-border-subtle px-4 py-3.5">
+
+      {/* Header bar */}
+      <header className="relative flex items-center gap-3 border-b border-border-subtle px-4 py-3.5">
         <span className="h-5 w-1 shrink-0 rounded-full bg-seal" />
         <div className="flex min-w-0 flex-1 items-baseline gap-2">
           <h2 className="font-display text-lg text-fg">{t("title")}</h2>
         </div>
-        {/* 页面上下文胶囊 —— 透明地告诉用户「agent 此刻看到了哪个页面」,✕ 可临时摘掉。 */}
-        {contextAttached && (
-          <div
-            title={`${t("context.viewing")} ${t(`context.kind.${page.kind}`)}${
-              page.id ? ` · ${page.id.slice(0, 8)}` : ""
-            }`}
-            className="flex min-w-0 items-center gap-1 rounded-full border border-border-subtle bg-bg/60 py-0.5 pl-2 pr-1 text-[11px] text-fg-muted"
-          >
-            <MapPin className="size-3 shrink-0 text-cyan" strokeWidth={2} />
-            <span className="truncate text-fg">
-              {t(`context.kind.${page.kind}`)}
-            </span>
-            {page.id && (
-              <span className="shrink-0 font-mono text-fg-muted/70 tabular-nums">
-                {page.id.slice(0, 8)}
-              </span>
-            )}
-            <button
-              type="button"
-              onClick={() => setContextDismissed(true)}
-              aria-label={t("context.dismiss")}
-              title={t("context.dismiss")}
-              className="shrink-0 rounded-full p-0.5 text-fg-muted/70 transition-colors hover:bg-bg-elev/60 hover:text-fg"
-            >
-              <X className="size-3" strokeWidth={2} />
-            </button>
-          </div>
-        )}
         <button
-          type="button"
-          onClick={onNewSession}
-          aria-label={t("newSession")}
-          title={t("newSession")}
+          type="button" onClick={onNewSession}
+          aria-label={t("newSession")} title={t("newSession")}
           className="rounded-md p-1.5 text-fg-muted transition-colors hover:bg-bg/60 hover:text-cyan"
         >
           <SquarePen className="size-4" strokeWidth={1.75} />
         </button>
         <button
-          type="button"
-          onClick={() => setHistoryOpen((v) => !v)}
-          aria-label={t("history")}
-          title={t("history")}
-          aria-expanded={historyOpen}
-          className={cn(
-            "rounded-md p-1.5 transition-colors hover:bg-bg/60 hover:text-fg",
-            historyOpen ? "text-cyan" : "text-fg-muted",
-          )}
+          type="button" onClick={() => setHistoryOpen((v) => !v)}
+          aria-label={t("history")} title={t("history")} aria-expanded={historyOpen}
+          className={cn("rounded-md p-1.5 transition-colors hover:bg-bg/60 hover:text-fg", historyOpen ? "text-cyan" : "text-fg-muted")}
         >
           <History className="size-4" strokeWidth={1.75} />
         </button>
         <button
-          type="button"
-          onClick={onClose}
-          aria-label={t("close")}
-          title={t("close")}
+          type="button" onClick={onClose}
+          aria-label={t("close")} title={t("close")}
           className="rounded-md p-1.5 text-fg-muted transition-colors hover:bg-bg/60 hover:text-fg"
         >
           <X className="size-4" strokeWidth={1.75} />
         </button>
-      </header>
 
-      {/* 历史会话下拉 */}
-      {historyOpen && (
-        <>
-          <div
-            className="fixed inset-0 z-10"
-            onClick={() => setHistoryOpen(false)}
-            aria-hidden
-          />
-          <div className="absolute right-3 top-14 z-20 max-h-80 w-64 overflow-y-auto rounded-lg border border-border-subtle bg-bg-elev shadow-xl">
-            {historyError ? (
-              <p className="px-3 py-3 text-xs text-fox-red">
-                {t("historyError")}
-              </p>
-            ) : threads === null ? (
-              <p className="px-3 py-3 font-mono text-xs text-fg-muted">
-                {t("loadingHistory")}
-              </p>
-            ) : threads.length === 0 ? (
-              <p className="px-3 py-3 text-xs text-fg-muted">
-                {t("historyEmpty")}
-              </p>
-            ) : (
-              threads.map((th) => (
-                <button
-                  key={th.id}
-                  type="button"
-                  onClick={() => {
-                    // 点已激活的会话：threadId 不变，回填 effect 不会触发 → 手动重载;
-                    // 点别的会话：照常切 threadId，由回填 effect 拉取。
-                    if (th.id === threadId) reloadCurrentThread();
-                    else onSwitchThread(th.id);
-                    setHistoryOpen(false);
-                  }}
-                  className={cn(
-                    "flex w-full items-center justify-between gap-2 border-b border-border-subtle/60 px-3 py-2 text-left text-xs transition-colors last:border-b-0 hover:bg-bg/60",
-                    th.id === threadId ? "bg-cyan/10 text-fg" : "text-fg-muted",
-                  )}
-                >
-                  <span className="truncate">
-                    {th.title || t("untitled")}
-                  </span>
-                  <span className="shrink-0 font-mono text-[10px] text-fg-muted/70 tabular-nums">
-                    {th.updatedAt.slice(0, 10)}
-                  </span>
-                </button>
-              ))
-            )}
-          </div>
-        </>
-      )}
+        {/* History dropdown */}
+        <ChatHistoryPanel
+          open={historyOpen}
+          threads={threads}
+          historyError={historyError}
+          currentThreadId={threadId}
+          sourceDownLabel={t("historyError")}
+          untitledLabel={t("untitled")}
+          onSwitch={onHistorySwitch}
+          onReload={onHistoryReload}
+        />
+      </header>
 
-      {/* 消息区 */}
-      <div className="flex-1 space-y-3 overflow-y-auto px-4 py-4">
-        {historyLoading ? (
-          // 切会话回填中:整屏显示加载态(盖住上个会话残影 + agent 重连产生的「思考中」误判)。
-          <div className="flex items-center gap-2 px-1 font-mono text-xs text-fg-muted">
-            <span className="size-1.5 rounded-full bg-cyan caret-blink" />
-            {t("loadingHistory")}
-          </div>
-        ) : visible.length === 0 ? (
-          <p className="mt-8 px-2 text-center text-sm leading-relaxed text-fg-muted">
-            {t("empty")}
-          </p>
-        ) : (
-          visible.map((m, i) => (
-            <MessageRow
-              key={m.id}
-              message={m}
-              toolNames={toolNames}
-              resolvedToolCallIds={resolvedToolCallIds}
-              toolRunning={t("toolRunning")}
-              toolDone={t("toolDone")}
-              toolResultLabel={t("toolResult")}
-              isStreaming={
-                isLoading &&
-                i === visible.length - 1 &&
-                m.role === "assistant"
-              }
-            />
-          ))
-        )}
-        {/* 「思考中」仅用于 agent 真正生成回复时,回填历史期间不展示(那是 connectAgent 误置 isRunning)。 */}
-        {isLoading && !historyLoading && (
-          <div className="flex items-center gap-2 px-1 font-mono text-xs text-fg-muted">
-            <span className="size-1.5 rounded-full bg-cyan caret-blink" />
-            {t("thinking")}
-          </div>
-        )}
-        <div ref={endRef} />
-      </div>
+      {/* Messages */}
+      <ChatMessageList
+        messages={messages}
+        toolNames={toolNames}
+        resolvedToolCallIds={resolvedToolCallIds}
+        isLoading={isLoading}
+        historyLoading={historyLoading}
+        toolDone={t("toolDone")}
+        toolResultLabel={t("toolResult")}
+        emptyLabel={t("empty")}
+        thinkingLabel={t("thinking")}
+        loadingHistoryLabel={t("loadingHistory")}
+      />
 
-      {/* 错误条 —— 上游 LLM 报错 / 流中断时顶出来,不再是空气泡 */}
+      {/* Error banner */}
       {chatError && (
-        <div className="mx-3 mb-2 flex items-start gap-2 rounded-lg border border-fox-red/40 bg-fox-red/10 px-3 py-2 text-xs text-fox-red">
-          <TriangleAlert className="mt-0.5 size-3.5 shrink-0" strokeWidth={2} />
-          <span className="min-w-0 flex-1 break-words">{chatError}</span>
-          <button
-            type="button"
-            onClick={() => setChatError(null)}
-            aria-label={t("errorDismiss")}
-            title={t("errorDismiss")}
-            className="shrink-0 text-fox-red/70 transition-colors hover:text-fox-red"
-          >
-            <X className="size-3.5" strokeWidth={2} />
-          </button>
-        </div>
-      )}
-
-      {/* 输入区 */}
-      <div className="border-t border-border-subtle p-3">
-        <div className="flex items-end gap-2 rounded-lg border border-border-subtle bg-bg/60 px-3 py-2 transition-colors focus-within:border-cyan/50">
-          <textarea
-            ref={inputRef}
-            value={draft}
-            onChange={(e) => setDraft(e.target.value)}
-            onKeyDown={onKeyDown}
-            rows={1}
-            placeholder={t("placeholder")}
-            className="max-h-32 flex-1 resize-none bg-transparent py-1 text-sm text-fg outline-none placeholder:text-fg-muted/60"
-          />
-          {isLoading ? (
-            // 生成中:暂停钮 —— 中断当前回复。
-            <button
-              type="button"
-              onClick={handleStop}
-              aria-label={t("stop")}
-              title={t("stop")}
-              className="mb-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-fox-red text-bg-deep transition-opacity hover:opacity-90"
-            >
-              <Square className="size-3.5" strokeWidth={2} fill="currentColor" />
-            </button>
-          ) : (
-            <button
-              type="button"
-              onClick={submit}
-              disabled={!draft.trim()}
-              aria-label={t("send")}
-              title={t("send")}
-              className="mb-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-seal text-bg-deep transition-opacity hover:opacity-90 disabled:opacity-30"
-            >
-              <SendHorizontal className="size-4" strokeWidth={2} />
-            </button>
-          )}
-        </div>
-      </div>
-    </aside>
-  );
-}
-
-/** 单条消息:用户 / agent 文本气泡 + 内联工具 chip。 */
-function MessageRow({
-  message,
-  toolNames,
-  resolvedToolCallIds,
-  toolRunning,
-  toolDone,
-  toolResultLabel,
-  isStreaming,
-}: {
-  message: AGMessage;
-  toolNames: Map<string, string>;
-  resolvedToolCallIds: Set<string>;
-  toolRunning: string;
-  toolDone: string;
-  toolResultLabel: string;
-  isStreaming?: boolean;
-}) {
-  const text = textOf(message.content);
-
-  if (message.role === "user") {
-    // 剥掉随消息夹带的 <page_context> 块 —— 气泡只显示用户原话(新消息 + 历史回填同理)。
-    return (
-      <div className="rise flex justify-end">
-        <div className="max-w-[85%] whitespace-pre-wrap rounded-lg rounded-br-sm bg-cyan/10 px-3 py-2 text-sm text-fg">
-          {stripPageContext(text)}
-        </div>
-      </div>
-    );
-  }
-
-  if (message.role === "tool") {
-    const toolName = toolNames.get(message.toolCallId ?? "") ?? "tool";
-    // 玄学 tool 结果渲染成卦象 / 塔罗卡片(解析失败回退普通 chip)。
-    if (isDivinationTool(toolName)) {
-      const reading = parseDivination(text);
-      if (reading) {
-        return (
-          <div className="flex justify-start">
-            <DivinationCard reading={reading} className="max-w-[95%]" />
-          </div>
-        );
-      }
-    }
-    // 检测结果中是否含 error 标记。
-    const hasError = (() => {
-      try {
-        const parsed = JSON.parse(text);
-        return Boolean(parsed?.isError || parsed?.error);
-      } catch {
-        return false;
-      }
-    })();
-    const state = inferToolState(true, hasError);
-    const { label: stateLabel } = TOOL_STATE_MAP[state];
-
-    return (
-      <div className="rise flex justify-start">
-        <ToolChip
-          name={toolName}
-          result={text}
-          label={toolDone}
-          resultLabel={toolResultLabel}
-          state={state}
-          stateLabel={stateLabel}
+        <ChatErrorBanner
+          error={chatError}
+          onDismiss={() => setChatError(null)}
+          dismissLabel={t("errorDismiss")}
         />
-      </div>
-    );
-  }
-
-  // assistant:可能同时带文本 + toolCalls。
-  // 已出结果的 toolCall 不再展示「调用中」—— 由对应 tool-result 的「已完成」chip 接管。
-  const calls = (message.toolCalls ?? []).filter(
-    (c) => !resolvedToolCallIds.has(c.id),
-  );
-  if (!text && calls.length === 0) return null;
-
-  return (
-    <div className="rise flex flex-col items-start gap-1.5">
-      {text && (
-        <div className="max-w-[90%] break-words rounded-lg rounded-bl-sm bg-bg-deep/60 px-3 py-2 text-sm leading-relaxed text-fg">
-          {isStreaming ? (
-            <ChatStreamdown streaming>{text}</ChatStreamdown>
-          ) : (
-            <ChatMarkdown>{text}</ChatMarkdown>
-          )}
-        </div>
       )}
-      {calls.map((c) => {
-        const runningState = inferToolState(false);
-        const { label: runningLabel } = TOOL_STATE_MAP[runningState];
-        return (
-          <ToolChip
-            key={c.id}
-            name={c.function?.name ?? "tool"}
-            label={toolRunning}
-            resultLabel={toolResultLabel}
-            state={runningState}
-            stateLabel={runningLabel}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-/** JSON 字符串美化(两格缩进);不是合法 JSON 原样返回。 */
-function pretty(raw: string): string {
-  try {
-    return JSON.stringify(JSON.parse(raw), null, 2);
-  } catch {
-    return raw;
-  }
-}
-
-/**
- * 工具调用 / 结果的紧凑 chip。
- *
- * 状态机驱动（七态）：
- *   - Running: gold chip + 无展开
- *   - Completed: green chip + 可展开查看结果
- *   - Error: red chip + 展开显示错误
- *   - Denied: orange chip
- *   - Pending: gray chip + pulse 动画
- *   - Awaiting Approval: yellow chip + clock + pulse
- *   - Responded: blue chip
- *
- * 输出按优先级渲染：工具专属视图(tool-views,行情卡/回测指标格等)→ 通用结构化
- * ({@link ToolOutput} 键值行/表格)→ raw 钮永远可切回原始 JSON。
- */
-function ToolChip({
-  name,
-  label,
-  resultLabel,
-  result,
-  state,
-  stateLabel,
-}: {
-  name: string;
-  label: string;
-  resultLabel: string;
-  result?: string;
-  state: ToolState;
-  stateLabel: string;
-}) {
-  const [showRaw, setShowRaw] = useState(false);
-  const { Icon, color, expandable, pulse } = TOOL_STATE_MAP[state];
 
-  // 工具专属视图：结果可解析且形态命中才有；否则 null 落回通用结构化视图。
-  const view = useMemo(() => {
-    if (!result) return null;
-    try {
-      return resolveToolView(name, JSON.parse(result));
-    } catch {
-      return null;
-    }
-  }, [name, result]);
-  const sectionCaption =
-    "px-2.5 pt-1.5 font-mono text-[9px] uppercase tracking-[0.18em] text-fg-muted/60";
-
-  const head = (
-    <>
-      <Icon
-        className={cn("size-3.5 shrink-0 transition-colors", pulse && "animate-pulse")}
-        strokeWidth={1.75}
+      {/* Input area */}
+      <ChatInput
+        draft={draft}
+        isLoading={isLoading}
+        contextAttached={contextAttached}
+        contextKind={page.kind}
+        contextId={page.id}
+        onDraftChange={setDraft}
+        onSubmit={submit}
+        onStop={handleStop}
+        onContextDismiss={() => setContextDismissed(true)}
       />
-      <span className="truncate text-fg">{name}</span>
-      <span
-        className={cn(
-          "ml-auto font-mono text-[10px] uppercase tracking-[0.12em]",
-          color,
-        )}
-      >
-        {stateLabel}
-      </span>
-    </>
-  );
-
-  // 非展开态：Running / Pending / Awaiting Approval / Responded 等中间状态。
-  if (!expandable || !result) {
-    return (
-      <div
-        className={cn(
-          "group flex w-full max-w-[90%] items-center gap-2 rounded-md border border-border-subtle bg-bg/40 px-2.5 py-1.5 font-mono text-xs",
-          color,
-        )}
-      >
-        {head}
-      </div>
-    );
-  }
-
-  return (
-    <details className="group w-full max-w-[90%] overflow-hidden rounded-md border border-border-subtle bg-bg/40 text-xs transition-colors hover:border-cyan/40 hover:bg-bg-elev/50">
-      <summary
-        className={cn(
-          "flex items-center gap-2 px-2.5 py-1.5 font-mono transition-transform hover:translate-x-0.5 motion-reduce:transition-none",
-          color,
-        )}
-      >
-        {head}
-      </summary>
-      {result && (
-        <div className="border-t border-border-subtle bg-bg-deep/50">
-          <div className="flex items-baseline justify-between pr-2.5">
-            <div className={sectionCaption}>{resultLabel}</div>
-            <button
-              type="button"
-              onClick={() => setShowRaw((v) => !v)}
-              className={cn(
-                "rounded-sm px-1 font-mono text-[9px] uppercase tracking-[0.18em] transition-colors",
-                showRaw
-                  ? "text-cyan"
-                  : "text-fg-muted/40 hover:text-fg-muted",
-              )}
-            >
-              raw
-            </button>
-          </div>
-          {showRaw ? (
-            <pre className="max-h-64 overflow-auto px-2.5 py-1.5 font-mono text-[11px] leading-relaxed text-fg-muted">
-              {pretty(result)}
-            </pre>
-          ) : view ? (
-            <div className="max-h-72 overflow-auto px-2.5 py-1.5">{view}</div>
-          ) : (
-            <ToolOutput raw={result} />
-          )}
-        </div>
-      )}
-    </details>
+    </aside>
   );
 }
diff --git a/apps/dashboard/src/components/chat/ChatToolChip.tsx b/apps/dashboard/src/components/chat/ChatToolChip.tsx
new file mode 100644
index 00000000..3121532e
--- /dev/null
+++ b/apps/dashboard/src/components/chat/ChatToolChip.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { cn } from "@/lib/cn";
+import { ToolOutput } from "./ToolOutput";
+import { resolveToolView } from "./tool-views";
+import { TOOL_STATE_MAP, type ToolState } from "./tool-states";
+
+/** JSON 字符串美化（两格缩进）；不是合法 JSON 原样返回。 */
+function pretty(raw: string): string {
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2);
+  } catch {
+    return raw;
+  }
+}
+
+/**
+ * 工具调用 / 结果的紧凑 chip。
+ *
+ * 状态机驱动（七态）：
+ *   - Running: gold chip + 无展开
+ *   - Completed: green chip + 可展开查看结果
+ *   - Error: red chip + 展开显示错误
+ *   - Denied: orange chip
+ *   - Pending: gray chip + pulse 动画
+ *   - Awaiting Approval: yellow chip + clock + pulse
+ *   - Responded: blue chip
+ *
+ * 输出按优先级渲染：工具专属视图(tool-views)→ 通用结构化(ToolOutput)→ raw 切换。
+ */
+export function ChatToolChip({
+  name,
+  resultLabel,
+  result,
+  state,
+  stateLabel,
+}: {
+  name: string;
+  resultLabel: string;
+  result?: string;
+  state: ToolState;
+  stateLabel: string;
+}) {
+  const [showRaw, setShowRaw] = useState(false);
+  const { Icon, color, expandable, pulse } = TOOL_STATE_MAP[state];
+
+  const view = useMemo(() => {
+    if (!result) return null;
+    try {
+      return resolveToolView(name, JSON.parse(result));
+    } catch {
+      return null;
+    }
+  }, [name, result]);
+
+  const sectionCaption =
+    "px-2.5 pt-1.5 font-mono text-[9px] uppercase tracking-[0.18em] text-fg-muted/60";
+
+  const head = (
+    <>
+      <Icon
+        className={cn("size-3.5 shrink-0", pulse && "animate-pulse")}
+        strokeWidth={1.75}
+      />
+      <span className="truncate text-fg">{name}</span>
+      <span
+        className={cn(
+          "ml-auto font-mono text-[10px] uppercase tracking-[0.12em]",
+          color,
+        )}
+      >
+        {stateLabel}
+      </span>
+    </>
+  );
+
+  if (!expandable || !result) {
+    return (
+      <div
+        className={cn(
+          "group flex w-full max-w-[90%] items-center gap-2 rounded-md border border-border-subtle bg-bg/40 px-2.5 py-1.5 font-mono text-xs",
+          color,
+        )}
+      >
+        {head}
+      </div>
+    );
+  }
+
+  return (
+    <details className="group w-full max-w-[90%] overflow-hidden rounded-md border border-border-subtle bg-bg/40 text-xs transition-colors hover:border-cyan/40 hover:bg-bg-elev/50">
+      <summary
+        className={cn(
+          "flex items-center gap-2 px-2.5 py-1.5 font-mono transition-transform hover:translate-x-0.5 motion-reduce:transition-none",
+          color,
+        )}
+      >
+        {head}
+      </summary>
+      {result && (
+        <div className="border-t border-border-subtle bg-bg-deep/50">
+          <div className="flex items-baseline justify-between pr-2.5">
+            <div className={sectionCaption}>{resultLabel}</div>
+            <button
+              type="button"
+              onClick={() => setShowRaw((v) => !v)}
+              className={cn(
+                "rounded-sm px-1 font-mono text-[9px] uppercase tracking-[0.18em] transition-colors",
+                showRaw
+                  ? "text-cyan"
+                  : "text-fg-muted/40 hover:text-fg-muted",
+              )}
+            >
+              raw
+            </button>
+          </div>
+          {showRaw ? (
+            <pre className="max-h-64 overflow-auto px-2.5 py-1.5 font-mono text-[11px] leading-relaxed text-fg-muted">
+              {pretty(result)}
+            </pre>
+          ) : view ? (
+            <div className="max-h-72 overflow-auto px-2.5 py-1.5">{view}</div>
+          ) : (
+            <ToolOutput raw={result} />
+          )}
+        </div>
+      )}
+    </details>
+  );
+}

From 73652c0532ed86ae9512169487446f134aa8d7b5 Mon Sep 17 00:00:00 2001
From: Miro <cma19951230@gmail.com>
Date: Thu, 2 Jul 2026 11:00:32 +0800
Subject: [PATCH 4/8] =?UTF-8?q?fix(dashboard):=20=E4=BF=AE=E5=A4=8D=20CR?=
 =?UTF-8?q?=20must-fix=20=E2=80=94=E2=80=94=20abort=20signal=20=E5=A4=B1?=
 =?UTF-8?q?=E6=95=88=20+=20=E6=89=93=E5=BC=80=E5=AF=B9=E8=AF=9D=E6=A0=8F?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E8=81=9A=E7=84=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

回应 PR #127 auto-review 的两个必修：

**[critical] abort signal 形同虚设**
- fetch 补丁里 stoppingRef 为真时 ctrl.abort() 后却用原始 init 发请求，
  signal 没挂上 → "点暂停后回复继续输出" bug 复发
- 修复：ctrl.abort() 后用 { ...init, signal: ctrl.signal } 发请求，
  浏览器立即以 AbortError 拒绝，真正掐断续段

**[major] 打开对话栏不再自动聚焦**
- Phase 3 拆分把 textarea 移进 ChatInput，但聚焦 effect 留在 ChatThread
  用已失效的 inputRef → 每次打开要手动点一下才能打字
- 修复：ChatInput 接受 open prop，按 open 变化驱动聚焦；
  ChatThread 删掉死的 inputRef

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/dashboard/src/components/chat/ChatInput.tsx  | 10 ++++++++--
 apps/dashboard/src/components/chat/ChatThread.tsx | 13 +++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/src/components/chat/ChatInput.tsx b/apps/dashboard/src/components/chat/ChatInput.tsx
index 3654798a..f5265c74 100644
--- a/apps/dashboard/src/components/chat/ChatInput.tsx
+++ b/apps/dashboard/src/components/chat/ChatInput.tsx
@@ -10,10 +10,14 @@ import { cn } from "@/lib/cn";
  * 对话输入区域：输入框 + 发送/停止按钮 + 页面上下文胶囊。
  *
  * 所有状态由父组件（ChatThread）管理，通过 props 传入。
+ *
+ * 聚焦：`open` 由父组件传入——对话栏由 `translate-x` 滑入而非条件卸载，
+ * 所以"打开时聚焦输入框"必须由 open prop 变化驱动（组件挂载 effect 补不上）。
  */
 export function ChatInput({
   draft,
   isLoading,
+  open,
   contextAttached,
   contextKind,
   contextId,
@@ -24,6 +28,7 @@ export function ChatInput({
 }: {
   draft: string;
   isLoading: boolean;
+  open: boolean;
   contextAttached: boolean;
   contextKind: string;
   contextId?: string;
@@ -35,9 +40,10 @@ export function ChatInput({
   const t = useTranslations("chat");
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+  // 打开对话栏时聚焦输入框（Phase 3 拆分后从 ChatThread 迁移进来）。
   useEffect(() => {
-    if (draft === "") textareaRef.current?.focus();
-  }, [draft]);
+    if (open) textareaRef.current?.focus();
+  }, [open]);
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent<HTMLTextAreaElement>) => {
diff --git a/apps/dashboard/src/components/chat/ChatThread.tsx b/apps/dashboard/src/components/chat/ChatThread.tsx
index cf86e202..e7737029 100644
--- a/apps/dashboard/src/components/chat/ChatThread.tsx
+++ b/apps/dashboard/src/components/chat/ChatThread.tsx
@@ -76,7 +76,6 @@ export function ChatThread({
   const [historyError, setHistoryError] = useState(false);
   const [chatError, setChatError] = useState<string | null>(null);
 
-  const inputRef = useRef<HTMLTextAreaElement>(null);
   const loadedThreadRef = useRef<string | null>(null);
   const setMessagesRef = useRef(setMessages);
   setMessagesRef.current = setMessages;
@@ -116,7 +115,13 @@ export function ChatThread({
         const ctrl = new AbortController();
         const signal = init?.signal;
         if (signal) signal.addEventListener("abort", () => ctrl.abort());
-        if (stoppingRef.current) { ctrl.abort(); return orig(input, init); }
+        // 停止后到来的后续 tool 段：用**已 abort 的 signal**发请求，
+        // 浏览器立即以 AbortError 拒绝——这才真正掐断"点暂停后回复继续输出"。
+        // （ctrl 必须挂到 init.signal 上，否则 abort 形同虚设。）
+        if (stoppingRef.current) {
+          ctrl.abort();
+          return orig(input, { ...init, signal: ctrl.signal });
+        }
         inflightAborts.current.add(ctrl);
         const drop = () => inflightAborts.current.delete(ctrl);
         return orig(input, { ...init, signal: ctrl.signal }).then((res) => {
@@ -227,8 +232,7 @@ export function ChatThread({
     return s;
   }, [messages]);
 
-  // Focus input on open
-  useEffect(() => { if (open) inputRef.current?.focus(); }, [open]);
+  // 聚焦输入框由 ChatInput 内部按 open prop 驱动（Phase 3 拆分后 textarea 归 ChatInput 管）。
 
   // Submit message
   const submit = useCallback(async () => {
@@ -360,6 +364,7 @@ export function ChatThread({
       <ChatInput
         draft={draft}
         isLoading={isLoading}
+        open={open}
         contextAttached={contextAttached}
         contextKind={page.kind}
         contextId={page.id}

From 1f42f4fcd01790e2a7139741a3152d8c34094f9b Mon Sep 17 00:00:00 2001
From: Miro <cma19951230@gmail.com>
Date: Thu, 2 Jul 2026 11:27:56 +0800
Subject: [PATCH 5/8] =?UTF-8?q?docs(dashboard):=20=E6=A0=87=E6=B3=A8?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E7=8A=B6=E6=80=81=E6=9C=BA=E6=8E=A5=E7=BA=BF?=
 =?UTF-8?q?=E7=8E=B0=E7=8A=B6=20=E2=80=94=E2=80=94=203=20=E6=80=81?=
 =?UTF-8?q?=E5=B7=B2=E6=8E=A5=E7=BA=BF=20/=204=20=E6=80=81=E9=A2=84?=
 =?UTF-8?q?=E7=95=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

回应 PR #127 auto-review 的 medium：七态里只有 3 个（Running/Completed/Error）
有生产者，另外 4 个（Pending/Denied/审批态）是为 mastra 未来上报中间状态
预留的定义。加注释明确区分，避免后来者误以为审批态已可用而踩空。

样式表保留（定义先行合理），等 mastra 上报生命周期细分时扩 inferToolState 即可点亮。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/chat/tool-states.ts        | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/apps/dashboard/src/components/chat/tool-states.ts b/apps/dashboard/src/components/chat/tool-states.ts
index e31fb3ef..408d7c6e 100644
--- a/apps/dashboard/src/components/chat/tool-states.ts
+++ b/apps/dashboard/src/components/chat/tool-states.ts
@@ -8,24 +8,34 @@ import {
 } from "lucide-react";
 
 /**
- * 工具调用状态机（7 态）。
+ * 工具调用状态机（7 态 · 定义先行）。
  *
  * 参照 Omnigent 的 ToolUIPart["state"] 设计，适配 AG-UI 的消息模型。
- * AG-UI 当前仅传递二态（tool call → tool result），完整七态需要 mastra
- * 侧上报中间状态。现阶段基于可用数据推断：
- *   - toolCalls 存在但无对应 tool result → Running
- *   - tool result 存在且无 error → Completed
- *   - tool result 存在且有 error → Error
+ *
+ * ⚠️ **接线现状（避免误以为七态都已可用）**：
+ * AG-UI 当前只传递二态（tool call → tool result），所以 `inferToolState`
+ * 实际只会产出下面 3 个态：
+ *   - **input-available**（Running）：toolCalls 存在但无对应 tool result
+ *   - **output-available**（Completed）：tool result 存在且无 error
+ *   - **output-error**（Error）：tool result 存在且含 error
+ *
+ * 另外 4 个态（input-streaming / output-denied / approval-requested /
+ * approval-responded）是**为 mastra 侧未来上报中间状态预留的定义**——
+ * TOOL_STATE_MAP 里有它们的渲染样式，但目前**没有生产者**会产出这些态。
+ * 等 mastra 上报 tool 生命周期细分（如 plan/exec 审批态）时，只需扩
+ * `inferToolState` 的输入即可点亮，无需再动样式表。
  */
 
 export type ToolState =
-  | "input-streaming" // 正在接收工具参数
-  | "input-available" // 参数就绪，执行中
-  | "output-available" // 执行成功
-  | "output-error" // 执行失败
-  | "output-denied" // 被权限拒绝
-  | "approval-requested" // 等待审批
-  | "approval-responded"; // 审批已响应
+  // ── 已接线（inferToolState 会产出）──
+  | "input-available" // 参数就绪，执行中（Running）
+  | "output-available" // 执行成功（Completed）
+  | "output-error" // 执行失败（Error）
+  // ── 预留（样式已备，待 mastra 上报后点亮，当前无生产者）──
+  | "input-streaming" // 正在接收工具参数（Pending）
+  | "output-denied" // 被权限拒绝（Denied）
+  | "approval-requested" // 等待审批（Awaiting Approval）
+  | "approval-responded"; // 审批已响应（Responded）
 
 export interface ToolStateProps {
   label: string;
@@ -92,6 +102,9 @@ export const TOOL_STATE_MAP: Record<ToolState, ToolStateProps> = {
 /**
  * 从 AG-UI 消息推断工具状态。
  *
+ * 当前只产出 3 个态（input-available / output-available / output-error）——
+ * 其余 4 个态待 mastra 上报中间状态后在此扩展（见 ToolState 注释）。
+ *
  * @param hasResult 工具结果是否已到达
  * @param hasError 结果中是否包含 error
  */

From 67674a7604e8823467337c8978f17982c786605e Mon Sep 17 00:00:00 2001
From: Miro <cma19951230@gmail.com>
Date: Thu, 2 Jul 2026 14:05:38 +0800
Subject: [PATCH 6/8] =?UTF-8?q?fix(dashboard):=20=E4=BF=AE=E5=A4=8D=20CR?=
 =?UTF-8?q?=20major=20=E2=80=94=E2=80=94=20=E5=B7=A5=E5=85=B7=E6=80=81?=
 =?UTF-8?q?=E6=96=87=E6=A1=88=20+=20=E5=8E=86=E5=8F=B2=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E8=B5=B0=20i18n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ChatHistoryPanel: t("historyLoading")(不存在的 key)→ t("loadingHistory")
- 工具七态文案从 TOOL_STATE_MAP 硬编码英文改走 next-intl:
  新增 TOOL_STATE_I18N_KEY 映射,ChatMessageList 经 t() 解析后
  注入 ChatMessage,中文 locale 不再显示裸 "Running"/"Completed"
- messages/{zh,en}.json 补 toolPending/toolError/toolDenied/
  toolAwaitingApproval/toolResponded(toolRunning/toolDone 复用)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/dashboard/messages/en.json                 |  5 +++++
 apps/dashboard/messages/zh.json                 |  5 +++++
 .../src/components/chat/ChatHistoryPanel.tsx    |  2 +-
 .../src/components/chat/ChatMessage.tsx         |  9 ++++++---
 .../src/components/chat/ChatMessageList.tsx     |  7 +++++++
 .../src/components/chat/tool-states.ts          | 17 +++++++++++++++++
 6 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/messages/en.json b/apps/dashboard/messages/en.json
index af2b9c0c..0e418f8c 100644
--- a/apps/dashboard/messages/en.json
+++ b/apps/dashboard/messages/en.json
@@ -412,6 +412,11 @@
     "loadingHistory": "Loading history…",
     "toolRunning": "running",
     "toolDone": "done",
+    "toolPending": "pending",
+    "toolError": "error",
+    "toolDenied": "denied",
+    "toolAwaitingApproval": "awaiting approval",
+    "toolResponded": "responded",
     "toolResult": "output",
     "errorGeneric": "Agent reply failed. Please retry — likely an upstream LLM error or dropped stream.",
     "errorDismiss": "Dismiss",
diff --git a/apps/dashboard/messages/zh.json b/apps/dashboard/messages/zh.json
index 81c2db03..8c587110 100644
--- a/apps/dashboard/messages/zh.json
+++ b/apps/dashboard/messages/zh.json
@@ -412,6 +412,11 @@
     "loadingHistory": "加载历史会话…",
     "toolRunning": "调用中",
     "toolDone": "已完成",
+    "toolPending": "待处理",
+    "toolError": "出错",
+    "toolDenied": "已拒绝",
+    "toolAwaitingApproval": "待审批",
+    "toolResponded": "已响应",
     "toolResult": "输出",
     "errorGeneric": "Agent 回复失败，请重试 —— 多半是上游 LLM 报错或连接中断。",
     "errorDismiss": "关闭",
diff --git a/apps/dashboard/src/components/chat/ChatHistoryPanel.tsx b/apps/dashboard/src/components/chat/ChatHistoryPanel.tsx
index eb283b5f..2500ad04 100644
--- a/apps/dashboard/src/components/chat/ChatHistoryPanel.tsx
+++ b/apps/dashboard/src/components/chat/ChatHistoryPanel.tsx
@@ -43,7 +43,7 @@ export function ChatHistoryPanel({
     <div className="absolute left-0 right-0 top-full z-20 mx-3 mt-0.5 max-h-64 overflow-y-auto rounded-lg border border-border-subtle bg-bg-elev shadow-lg">
       {threads === null ? (
         <p className="px-3 py-3 text-center font-mono text-xs text-fg-muted">
-          {t("historyLoading")}
+          {t("loadingHistory")}
         </p>
       ) : threads.length === 0 ? (
         <p className="px-3 py-3 text-center font-mono text-xs text-fg-muted">
diff --git a/apps/dashboard/src/components/chat/ChatMessage.tsx b/apps/dashboard/src/components/chat/ChatMessage.tsx
index 414cf5d6..db487c44 100644
--- a/apps/dashboard/src/components/chat/ChatMessage.tsx
+++ b/apps/dashboard/src/components/chat/ChatMessage.tsx
@@ -6,7 +6,7 @@ import { stripPageContext } from "@/lib/page-context";
 import { ChatMarkdown } from "./ChatMarkdown";
 import { ChatStreamdown } from "./ChatStreamdown";
 import { ChatToolChip } from "./ChatToolChip";
-import { inferToolState, TOOL_STATE_MAP } from "./tool-states";
+import { inferToolState, type ToolState } from "./tool-states";
 
 /** AG-UI 消息最小形态。 */
 export type AGMessage = {
@@ -39,6 +39,7 @@ export function ChatMessage({
   resolvedToolCallIds,
   toolDone,
   toolResultLabel,
+  toolStateLabels,
   isStreaming,
 }: {
   message: AGMessage;
@@ -46,6 +47,8 @@ export function ChatMessage({
   resolvedToolCallIds: Set<string>;
   toolDone: string;
   toolResultLabel: string;
+  /** 七态 → 本地化文案（由 ChatMessageList 经 next-intl 解析后注入）。 */
+  toolStateLabels: Record<ToolState, string>;
   isStreaming?: boolean;
 }) {
   const text = textOf(message.content);
@@ -81,7 +84,7 @@ export function ChatMessage({
       }
     })();
     const state = inferToolState(true, hasError);
-    const { label: stateLabel } = TOOL_STATE_MAP[state];
+    const stateLabel = toolStateLabels[state];
 
     return (
       <div className="rise flex justify-start">
@@ -115,7 +118,7 @@ export function ChatMessage({
       )}
       {calls.map((c) => {
         const runningState = inferToolState(false);
-        const { label: runningLabel } = TOOL_STATE_MAP[runningState];
+        const runningLabel = toolStateLabels[runningState];
         return (
           <ChatToolChip
             key={c.id}
diff --git a/apps/dashboard/src/components/chat/ChatMessageList.tsx b/apps/dashboard/src/components/chat/ChatMessageList.tsx
index 183aa597..799aaa2f 100644
--- a/apps/dashboard/src/components/chat/ChatMessageList.tsx
+++ b/apps/dashboard/src/components/chat/ChatMessageList.tsx
@@ -4,6 +4,7 @@ import { useLayoutEffect, useRef } from "react";
 import { useTranslations } from "next-intl";
 
 import { ChatMessage, type AGMessage } from "./ChatMessage";
+import { TOOL_STATE_I18N_KEY, type ToolState } from "./tool-states";
 
 /**
  * 消息列表 + 自动滚动 + 思考中指示器。
@@ -31,6 +32,11 @@ export function ChatMessageList({
   thinkingLabel: string;
   loadingHistoryLabel: string;
 }) {
+  const t = useTranslations("chat");
+  const toolStateLabels = Object.fromEntries(
+    Object.entries(TOOL_STATE_I18N_KEY).map(([state, key]) => [state, t(key)]),
+  ) as Record<ToolState, string>;
+
   const endRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
@@ -61,6 +67,7 @@ export function ChatMessageList({
             resolvedToolCallIds={resolvedToolCallIds}
             toolDone={toolDone}
             toolResultLabel={toolResultLabel}
+            toolStateLabels={toolStateLabels}
             isStreaming={
               isLoading &&
               i === visible.length - 1 &&
diff --git a/apps/dashboard/src/components/chat/tool-states.ts b/apps/dashboard/src/components/chat/tool-states.ts
index 408d7c6e..4777b714 100644
--- a/apps/dashboard/src/components/chat/tool-states.ts
+++ b/apps/dashboard/src/components/chat/tool-states.ts
@@ -99,6 +99,23 @@ export const TOOL_STATE_MAP: Record<ToolState, ToolStateProps> = {
   },
 };
 
+/**
+ * 每个态对应的 `chat` 命名空间 i18n key。
+ *
+ * TOOL_STATE_MAP.label 仅作开发期兜底 / 类型占位——真正渲染到 chip 上的文案
+ * 走 next-intl（见 ChatMessageList），中英文各有译文，避免中文 locale 下出现
+ * 裸英文 "Running" / "Completed"（命中 CLAUDE.md §3「回复用用户语言」的 i18n 惯例）。
+ */
+export const TOOL_STATE_I18N_KEY: Record<ToolState, string> = {
+  "input-streaming": "toolPending",
+  "input-available": "toolRunning",
+  "output-available": "toolDone",
+  "output-error": "toolError",
+  "output-denied": "toolDenied",
+  "approval-requested": "toolAwaitingApproval",
+  "approval-responded": "toolResponded",
+};
+
 /**
  * 从 AG-UI 消息推断工具状态。
  *

From d6eb69fff2edfdf78470bcff82a976dd2d5c11a2 Mon Sep 17 00:00:00 2001
From: Miro <cma19951230@gmail.com>
Date: Thu, 2 Jul 2026 14:05:38 +0800
Subject: [PATCH 7/8] =?UTF-8?q?fix(dashboard):=20=E4=BF=AE=E5=A4=8D=20CR?=
 =?UTF-8?q?=20medium=20=E2=80=94=E2=80=94=20ChatMarkdown=20=E6=8B=A6?=
 =?UTF-8?q?=E6=88=AA=E8=BF=9C=E7=A8=8B=E5=9B=BE=E7=89=87=E9=98=B2=E6=B8=97?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

已完成 / 历史消息走 ChatMarkdown(react-markdown),此前无 img 覆盖,
markdown 里的 ![]() 会渲染成真实 <img src> 发起请求;注入的图片
beacon URL 会在重新渲染 / 重开历史会话时把 URL 参数渗出给第三方。
补 img 组件渲染 alt 占位而非 <img>,与 ChatStreamdown 的空白名单对齐。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/dashboard/src/components/chat/ChatMarkdown.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/dashboard/src/components/chat/ChatMarkdown.tsx b/apps/dashboard/src/components/chat/ChatMarkdown.tsx
index 9f9556f9..11081abf 100644
--- a/apps/dashboard/src/components/chat/ChatMarkdown.tsx
+++ b/apps/dashboard/src/components/chat/ChatMarkdown.tsx
@@ -81,6 +81,15 @@ const COMPONENTS: Components = {
     </td>
   ),
   hr: () => <hr className="my-2 border-border-subtle" />,
+  // 禁用远程图片加载：与 ChatStreamdown 的空白名单 (allowedImagePrefixes: [])
+  // 对齐,防止 agent 转述内容里被注入的图片 beacon URL 在渲染时发起请求、
+  // 把 URL 参数(可能带用户上下文)渗出给第三方。已完成 / 历史消息走本组件,
+  // 若不拦截,重新渲染或重开历史会话时图片会照常加载。渲染 alt 占位而非 <img>。
+  img: ({ alt }) => (
+    <span className="font-mono text-[11px] text-fg-muted/60">
+      {alt ? `[图片: ${alt}]` : "[图片已拦截]"}
+    </span>
+  ),
 };
 
 export function ChatMarkdown({ children }: { children: string }) {

From bd5975bd388b0838e84aab58e4ae0bf64865eaa4 Mon Sep 17 00:00:00 2001
From: Miro <cma19951230@gmail.com>
Date: Thu, 2 Jul 2026 15:10:59 +0800
Subject: [PATCH 8/8] =?UTF-8?q?refactor(dashboard):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=20CR=20medium=20=E2=80=94=E2=80=94=20=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E6=80=81=E7=BB=9F=E4=B8=80=E8=B5=B0=20ChatStreamdown=20?=
 =?UTF-8?q?=E6=B6=88=E9=99=A4=E9=AB=98=E4=BA=AE=E9=99=8D=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

此前流式态走 ChatStreamdown(带 @streamdown/code 高亮 + cjk 排版),isStreaming
一翻转就切回 ChatMarkdown(纯等宽无高亮):agent 生成代码回复刚结束高亮即消失、
肉眼可见"闪一下",历史会话永远无高亮——Phase 1 引入高亮的卖点在实际停留时间
里基本不可见。

改为完成态 / 历史消息也走 ChatStreamdown(mode=static),与流式态共用同一条
渲染管线(高亮 + cjk + 空白名单图片拦截一致)。ChatMarkdown 随之成为死代码,
删除;react-markdown 已无任何消费方,从 package.json 移除(净减依赖)。

bundle 核实:streamdown 对 mermaid/shiki 走 import() 动态导入(dist chunk 实测),
二者按需 split 进异步 chunk,不进首屏 bundle;ChatStreamdown 顶层静态 import
只带入 streamdown 核心。上一轮 medium「bundle 体积」据此排除。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/dashboard/package.json                   |   1 -
 apps/dashboard/pnpm-lock.yaml                 |  27 -----
 .../src/components/chat/ChatMarkdown.tsx      | 101 ------------------
 .../src/components/chat/ChatMessage.tsx       |  10 +-
 4 files changed, 4 insertions(+), 135 deletions(-)
 delete mode 100644 apps/dashboard/src/components/chat/ChatMarkdown.tsx

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index f38a8764..fa80046b 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -34,7 +34,6 @@
     "openai": "^6.42.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "server-only": "^0.0.1",
     "streamdown": "^2.5.0",
diff --git a/apps/dashboard/pnpm-lock.yaml b/apps/dashboard/pnpm-lock.yaml
index 8ba6d0dd..a02dedfc 100644
--- a/apps/dashboard/pnpm-lock.yaml
+++ b/apps/dashboard/pnpm-lock.yaml
@@ -66,9 +66,6 @@ importers:
       react-dom:
         specifier: ^19.2.6
         version: 19.2.7(react@19.2.7)
-      react-markdown:
-        specifier: ^10.1.0
-        version: 10.1.0(@types/react@19.2.16)(react@19.2.7)
       remark-gfm:
         specifier: ^4.0.1
         version: 4.0.1
@@ -3470,12 +3467,6 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  react-markdown@10.1.0:
-    resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
-    peerDependencies:
-      '@types/react': '>=18'
-      react: '>=18'
-
   react-markdown@8.0.7:
     resolution: {integrity: sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==}
     peerDependencies:
@@ -8002,24 +7993,6 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  react-markdown@10.1.0(@types/react@19.2.16)(react@19.2.7):
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      '@types/react': 19.2.16
-      devlop: 1.1.0
-      hast-util-to-jsx-runtime: 2.3.6
-      html-url-attributes: 3.0.1
-      mdast-util-to-hast: 13.2.1
-      react: 19.2.7
-      remark-parse: 11.0.0
-      remark-rehype: 11.1.2
-      unified: 11.0.5
-      unist-util-visit: 5.1.0
-      vfile: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   react-markdown@8.0.7(@types/react@19.2.16)(react@19.2.7):
     dependencies:
       '@types/hast': 2.3.10
diff --git a/apps/dashboard/src/components/chat/ChatMarkdown.tsx b/apps/dashboard/src/components/chat/ChatMarkdown.tsx
deleted file mode 100644
index 11081abf..00000000
--- a/apps/dashboard/src/components/chat/ChatMarkdown.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client";
-
-import ReactMarkdown, { type Components } from "react-markdown";
-import remarkGfm from "remark-gfm";
-
-/**
- * agent 气泡的 markdown 渲染 —— 组件级覆盖样式,套用「印章终端」主题
- * (电光青链接 / 等宽 code / hairline 表格),不引 prose 插件保持轻量。
- */
-const COMPONENTS: Components = {
-  p: ({ children }) => <p className="my-1.5 first:mt-0 last:mb-0">{children}</p>,
-  a: ({ children, href }) => (
-    <a
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      className="text-cyan underline decoration-cyan/40 underline-offset-2 hover:decoration-cyan"
-    >
-      {children}
-    </a>
-  ),
-  strong: ({ children }) => (
-    <strong className="font-semibold text-fg">{children}</strong>
-  ),
-  em: ({ children }) => <em className="italic">{children}</em>,
-  ul: ({ children }) => (
-    <ul className="my-1.5 list-disc space-y-0.5 pl-4">{children}</ul>
-  ),
-  ol: ({ children }) => (
-    <ol className="my-1.5 list-decimal space-y-0.5 pl-4">{children}</ol>
-  ),
-  li: ({ children }) => <li className="leading-relaxed">{children}</li>,
-  h1: ({ children }) => (
-    <h3 className="mb-1 mt-2 font-display text-base text-fg">{children}</h3>
-  ),
-  h2: ({ children }) => (
-    <h3 className="mb-1 mt-2 font-display text-base text-fg">{children}</h3>
-  ),
-  h3: ({ children }) => (
-    <h4 className="mb-1 mt-2 font-display text-sm text-fg">{children}</h4>
-  ),
-  blockquote: ({ children }) => (
-    <blockquote className="my-1.5 border-l-2 border-seal/50 pl-3 text-fg-muted">
-      {children}
-    </blockquote>
-  ),
-  code: ({ className, children }) => {
-    // 块级 code 带 language-* className;行内 code 没有。
-    const isBlock = Boolean(className);
-    if (isBlock) {
-      return (
-        <code className="block font-mono text-[11px] leading-relaxed">
-          {children}
-        </code>
-      );
-    }
-    return (
-      <code className="rounded bg-bg-deep/70 px-1 py-0.5 font-mono text-[0.85em] text-cyan">
-        {children}
-      </code>
-    );
-  },
-  pre: ({ children }) => (
-    <pre className="my-1.5 max-h-60 overflow-auto rounded-md border border-border-subtle bg-bg-deep/60 p-2.5">
-      {children}
-    </pre>
-  ),
-  table: ({ children }) => (
-    <div className="my-1.5 overflow-x-auto">
-      <table className="w-full border-collapse text-xs">{children}</table>
-    </div>
-  ),
-  th: ({ children }) => (
-    <th className="border border-border-subtle px-2 py-1 text-left font-mono text-fg-muted">
-      {children}
-    </th>
-  ),
-  td: ({ children }) => (
-    <td className="border border-border-subtle px-2 py-1 tabular-nums">
-      {children}
-    </td>
-  ),
-  hr: () => <hr className="my-2 border-border-subtle" />,
-  // 禁用远程图片加载：与 ChatStreamdown 的空白名单 (allowedImagePrefixes: [])
-  // 对齐,防止 agent 转述内容里被注入的图片 beacon URL 在渲染时发起请求、
-  // 把 URL 参数(可能带用户上下文)渗出给第三方。已完成 / 历史消息走本组件,
-  // 若不拦截,重新渲染或重开历史会话时图片会照常加载。渲染 alt 占位而非 <img>。
-  img: ({ alt }) => (
-    <span className="font-mono text-[11px] text-fg-muted/60">
-      {alt ? `[图片: ${alt}]` : "[图片已拦截]"}
-    </span>
-  ),
-};
-
-export function ChatMarkdown({ children }: { children: string }) {
-  return (
-    <ReactMarkdown remarkPlugins={[remarkGfm]} components={COMPONENTS}>
-      {children}
-    </ReactMarkdown>
-  );
-}
diff --git a/apps/dashboard/src/components/chat/ChatMessage.tsx b/apps/dashboard/src/components/chat/ChatMessage.tsx
index db487c44..117578a1 100644
--- a/apps/dashboard/src/components/chat/ChatMessage.tsx
+++ b/apps/dashboard/src/components/chat/ChatMessage.tsx
@@ -3,7 +3,6 @@
 import { DivinationCard } from "@/components/divination/DivinationCard";
 import { isDivinationTool, parseDivination } from "@/components/divination/types";
 import { stripPageContext } from "@/lib/page-context";
-import { ChatMarkdown } from "./ChatMarkdown";
 import { ChatStreamdown } from "./ChatStreamdown";
 import { ChatToolChip } from "./ChatToolChip";
 import { inferToolState, type ToolState } from "./tool-states";
@@ -109,11 +108,10 @@ export function ChatMessage({
     <div className="rise flex flex-col items-start gap-1.5">
       {text && (
         <div className="max-w-[90%] break-words rounded-lg rounded-bl-sm bg-bg-deep/60 px-3 py-2 text-sm leading-relaxed text-fg">
-          {isStreaming ? (
-            <ChatStreamdown streaming>{text}</ChatStreamdown>
-          ) : (
-            <ChatMarkdown>{text}</ChatMarkdown>
-          )}
+          {/* 完成态 / 历史消息也走 ChatStreamdown(mode=static)：与流式态共用
+              同一条渲染管线，保住 @streamdown/code 高亮 + @streamdown/cjk 排版
+              + 空白名单图片拦截,消除"回复一结束高亮消失、闪一下降级"的回归。 */}
+          <ChatStreamdown streaming={isStreaming}>{text}</ChatStreamdown>
         </div>
       )}
       {calls.map((c) => {