From 5cd02aa8b093bdfbfdeb0e0f65f970b6cbf44ef4 Mon Sep 17 00:00:00 2001
From: Suzumiya <suzmii@qq.com>
Date: Wed, 16 Sep 2026 03:59:27 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=99=BA=E8=83=BD=E4=BD=93?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E5=B1=82=E7=BA=A7=E5=B9=B6=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E7=B4=A0=E6=9D=90=E5=AF=BC=E5=87=BA=E4=B8=8E=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

当前Agent与策划Agent共用正文和过程表现组件，统一思考及工具调用的小字号浅色样式
素材工具栏按实际动作分组，导出紧邻删除并修复空分组重复分隔线
文档与代码使用共享Markdown预览和代码高亮，复用按需读取与缓存
移除未调用的活跃回合查询命令，保留正式快照恢复链路
补充回归用例并同步技术方案和团队约定
---
 apps/ai-game-creator-shell/package.json       |   1 +
 .../src-tauri/src/agent/direct_runtime/mod.rs |  14 +-
 .../src-tauri/src/main.rs                     |   1 -
 apps/ai-game-creator-shell/src/app/types.ts   |  13 --
 .../ChatMarkdownMessage/codeHighlight.css     |  37 +++++
 .../components/ChatMarkdownMessage/index.tsx  |  74 +++++++--
 .../ProjectSupervisorView.tsx                 | 143 ++++++++++-------
 .../project-workspace/ToolCallGroup.tsx       |   7 +-
 .../resource-canvas/resourceCanvasChrome.css  |  35 ++++-
 .../resourceCanvasFocusModel.ts               |   4 +-
 .../resourceDocumentPreviewModel.ts           |  80 ++++++++++
 apps/ai-game-creator-shell/src/styles.css     |  28 +---
 .../ResourceDocumentPreviewDialog.tsx         |  87 +++++++++++
 .../src/view/project-development/index.tsx    | 141 ++++++++++++-----
 .../resourceCardPreviewModel.ts               |   5 +-
 .../useProjectResourceCardPreviews.ts         |  25 +--
 .../tests/AgentMessageContent.test.tsx        | 111 ++++++++++++++
 .../tests/ChatMarkdownMessage.test.tsx        |  40 +++++
 .../ResourceDocumentPreviewDialog.test.tsx    | 126 +++++++++++++++
 .../tests/appSurface/design-agent.suite.ts    |   6 +
 .../tests/appSurface/tool-call-group.suite.ts |   1 +
 .../resourceCanvasFloatingDismiss.test.tsx    |  14 ++
 .../tests/resourceCanvasToolbarModel.test.ts  |  28 ++++
 .../resourceDocumentPreviewModel.test.ts      |  74 +++++++++
 .../useProjectResourceCardPreviews.test.ts    |  59 +++++++
 ...��施计划】文档素材Markdown预览-2026-09-16.md |  17 +++
 ...�里程碑】文档素材Markdown预览-2026-09-16.md |  23 +++
 .../shared-memory/team-conventions.md         |   1 +
 ...�案】AI游戏创作智能体App实施计划-2026-06-24.md |  13 ++
 ...方案】GameAgent对话工具调用卡片-2026-09-14.md |   2 +-
 package-lock.json                             | 141 +++++++++++++++++
 .../src/components/AgentMessageContent.css    |  25 +++
 .../src/components/AgentMessageContent.tsx    |  24 +++
 packages/shared/src/components/index.ts       |   2 +
 ...ageCanvasSelectedLayerToolbarView.test.tsx | 120 ++++++++++++++-
 .../ImageCanvasSelectedLayerToolbarView.tsx   | 144 ++++++++++++------
 src/index.css                                 |  12 --
 37 files changed, 1439 insertions(+), 239 deletions(-)
 create mode 100644 apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/codeHighlight.css
 create mode 100644 apps/ai-game-creator-shell/src/features/resource-canvas/resourceDocumentPreviewModel.ts
 create mode 100644 apps/ai-game-creator-shell/src/view/project-development/ResourceDocumentPreviewDialog.tsx
 create mode 100644 apps/ai-game-creator-shell/tests/AgentMessageContent.test.tsx
 create mode 100644 apps/ai-game-creator-shell/tests/ResourceDocumentPreviewDialog.test.tsx
 create mode 100644 apps/ai-game-creator-shell/tests/resourceDocumentPreviewModel.test.ts
 create mode 100644 docs/project-memory/plans/【实施计划】文档素材Markdown预览-2026-09-16.md
 create mode 100644 docs/project-memory/plans/【里程碑】文档素材Markdown预览-2026-09-16.md
 create mode 100644 packages/shared/src/components/AgentMessageContent.css
 create mode 100644 packages/shared/src/components/AgentMessageContent.tsx

diff --git a/apps/ai-game-creator-shell/package.json b/apps/ai-game-creator-shell/package.json
index c08cb6ac9..650ebf029 100644
--- a/apps/ai-game-creator-shell/package.json
+++ b/apps/ai-game-creator-shell/package.json
@@ -57,6 +57,7 @@
     "react-colorful": "^5.8.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
+    "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
     "vite": "^6.2.0",
     "zustand": "^5.0.14"
diff --git a/apps/ai-game-creator-shell/src-tauri/src/agent/direct_runtime/mod.rs b/apps/ai-game-creator-shell/src-tauri/src/agent/direct_runtime/mod.rs
index 08c7f56be..a515954cb 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/agent/direct_runtime/mod.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/agent/direct_runtime/mod.rs
@@ -444,7 +444,8 @@ pub(crate) fn direct_taonier_active_invocation_id_at(root: &Path) -> Result<Stri
         })
 }
 
-/// `read_direct_codex_active_turn` 的返回值：前端重进会话时用它恢复正在跑的回合。
+/// 测试读取进程内调用守卫快照，校验占用与释放生命周期。
+#[cfg(test)]
 #[derive(Clone, Debug, Eq, PartialEq, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub(crate) struct DirectActiveTurnView {
@@ -458,6 +459,7 @@ pub(crate) struct DirectActiveTurnView {
 ///
 /// 只读，不改变互斥语义与释放时机：守卫仍然只由回合自己的 `Drop` 或
 /// [`release_stale_direct_taonier_active_invocation`] 释放。
+#[cfg(test)]
 pub(crate) fn read_direct_taonier_active_invocation_at(
     root: &Path,
 ) -> Result<Option<DirectActiveTurnView>, String> {
@@ -475,16 +477,6 @@ pub(crate) fn read_direct_taonier_active_invocation_at(
         }))
 }
 
-/// 只读命令：读取该项目当前登记的 Direct 活跃回合，供前端重进会话时恢复。
-///
-/// 不进入、不抢占、不释放守卫；没有回合时返回 `null`。
-#[tauri::command]
-pub(crate) fn read_direct_codex_active_turn(
-    project_path: String,
-) -> Result<Option<DirectActiveTurnView>, String> {
-    read_direct_taonier_active_invocation_at(Path::new(project_path.trim()))
-}
-
 /// "终止"拿不到可中断句柄时的分类，决定是否允许强制释放本地守卫。
 #[derive(Clone, Copy, Debug, Eq, PartialEq)]
 pub(crate) enum DirectTaonierStaleGuardReason {
diff --git a/apps/ai-game-creator-shell/src-tauri/src/main.rs b/apps/ai-game-creator-shell/src-tauri/src/main.rs
index 9a6c48a3b..bec55a981 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/main.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/main.rs
@@ -2677,7 +2677,6 @@ fn main() {
             chat_with_game_creator_role_agent,
             chat_with_game_creator_role_agent_stream,
             chat_with_game_creator_direct_codex,
-            read_direct_codex_active_turn,
             cancel_direct_codex_turn,
             select_game_creator_reasoning_effort,
             start_planning_session_v2,
diff --git a/apps/ai-game-creator-shell/src/app/types.ts b/apps/ai-game-creator-shell/src/app/types.ts
index b71988918..1a8e48d72 100644
--- a/apps/ai-game-creator-shell/src/app/types.ts
+++ b/apps/ai-game-creator-shell/src/app/types.ts
@@ -1204,19 +1204,6 @@ interface TurnStreamItemBase {
  */
 export type TurnStreamItem = TurnStreamTextItem | TurnStreamToolItem;
 
-/**
- * `read_direct_codex_active_turn` 的返回值：Rust 进程内当前登记的 Direct 活跃回合。
- *
- * 重进会话时用它把前端的"当前活跃回合"接管回来，否则界面不知道有回合在跑，
- * 既不显示过程卡也不给终止入口，用户再发消息只会被守卫拒绝。
- */
-export interface DirectActiveTurnView {
-  /** 与回合事件的 `turnId` 同一个身份。 */
-  clientTurnId: string;
-  /** 这一轮登记的时刻（Unix 毫秒）。 */
-  startedAt: number;
-}
-
 /** `cancel_direct_codex_turn` 的返回值。 */
 export interface DirectTurnCancelView {
   /**
diff --git a/apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/codeHighlight.css b/apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/codeHighlight.css
new file mode 100644
index 000000000..d212361a5
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/codeHighlight.css
@@ -0,0 +1,37 @@
+/* 只作用于共享 Markdown 渲染器，不改变普通正文及用户消息的字体颜色。 */
+.agc-markdown-code .hljs-comment,
+.agc-markdown-code .hljs-quote {
+  color: #6a737d;
+}
+
+.agc-markdown-code .hljs-keyword,
+.agc-markdown-code .hljs-name,
+.agc-markdown-code .hljs-selector-tag,
+.agc-markdown-code .hljs-literal,
+.agc-markdown-code .hljs-deletion {
+  color: #a6264c;
+}
+
+.agc-markdown-code .hljs-string,
+.agc-markdown-code .hljs-regexp,
+.agc-markdown-code .hljs-addition {
+  color: #276438;
+}
+
+.agc-markdown-code .hljs-number,
+.agc-markdown-code .hljs-attr,
+.agc-markdown-code .hljs-variable,
+.agc-markdown-code .hljs-built_in {
+  color: #075a9c;
+}
+
+.agc-markdown-code .hljs-title,
+.agc-markdown-code .hljs-type,
+.agc-markdown-code .hljs-section {
+  color: #6f42a0;
+}
+
+.agc-markdown-code .hljs-meta,
+.agc-markdown-code .hljs-symbol {
+  color: #8a4c0a;
+}
diff --git a/apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/index.tsx b/apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/index.tsx
index d743dc2c2..d8acce153 100644
--- a/apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/index.tsx
+++ b/apps/ai-game-creator-shell/src/components/ChatMarkdownMessage/index.tsx
@@ -1,3 +1,5 @@
+import './codeHighlight.css';
+
 import type { ErrorInfo, ReactNode } from 'react';
 import {
   Children,
@@ -7,14 +9,20 @@ import {
   useContext,
 } from 'react';
 import ReactMarkdown, { type Components } from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
 import remarkGfm from 'remark-gfm';
 
 export type ChatMarkdownMessageProps = {
   text: string;
   role: 'assistant' | 'user';
   streaming?: boolean;
+  /** 文件预览不压缩正文空行，保留源码与文档的原始排版。 */
+  preserveBlankLines?: boolean;
 };
 
+const MAX_HIGHLIGHT_CHARACTERS = 100_000;
+const CodeBlockContext = createContext(false);
+
 /** 只压缩普通 Markdown 正文里多余的空行；代码块中的换行必须原样保留。 */
 function normalizeMarkdownBlankLines(text: string) {
   return text
@@ -183,22 +191,50 @@ const markdownComponents: Components = {
   a: ({ children }) => children,
   img: ({ alt }) => (alt?.trim() ? `图片：${alt}` : '图片已省略'),
   h1: ({ children }) => (
-    <h1 className="m-0 mt-4 !text-xl font-bold first:mt-0">{children}</h1>
+    <h1
+      className="m-0 mt-4 font-bold first:mt-0"
+      style={{ fontSize: 'var(--agent-message-heading-size, 1.25rem)' }}
+    >
+      {children}
+    </h1>
   ),
   h2: ({ children }) => (
-    <h2 className="m-0 mt-4 !text-lg font-bold first:mt-0">{children}</h2>
+    <h2
+      className="m-0 mt-4 font-bold first:mt-0"
+      style={{ fontSize: 'var(--agent-message-heading-size, 1.125rem)' }}
+    >
+      {children}
+    </h2>
   ),
   h3: ({ children }) => (
-    <h3 className="m-0 mt-3 !text-base font-semibold first:mt-0">{children}</h3>
+    <h3
+      className="m-0 mt-3 font-semibold first:mt-0"
+      style={{ fontSize: 'var(--agent-message-heading-size, 1rem)' }}
+    >
+      {children}
+    </h3>
   ),
   h4: ({ children }) => (
-    <h4 className="m-0 mt-3 !text-sm font-semibold first:mt-0">{children}</h4>
+    <h4
+      className="m-0 mt-3 font-semibold first:mt-0"
+      style={{ fontSize: 'var(--agent-message-heading-size, 0.875rem)' }}
+    >
+      {children}
+    </h4>
   ),
   h5: ({ children }) => (
-    <h5 className="m-0 mt-2 !text-sm font-medium first:mt-0">{children}</h5>
+    <h5
+      className="m-0 mt-2 font-medium first:mt-0"
+      style={{ fontSize: 'var(--agent-message-heading-size, 0.875rem)' }}
+    >
+      {children}
+    </h5>
   ),
   h6: ({ children }) => (
-    <h6 className="m-0 mt-2 !text-xs font-medium uppercase tracking-wide first:mt-0">
+    <h6
+      className="m-0 mt-2 font-medium uppercase tracking-wide first:mt-0"
+      style={{ fontSize: 'var(--agent-message-heading-size, 0.75rem)' }}
+    >
       {children}
     </h6>
   ),
@@ -213,15 +249,18 @@ const markdownComponents: Components = {
   ),
   pre: ({ children }) => (
     <pre className="m-0 mt-2 max-w-full overflow-x-auto rounded-lg bg-black/6 p-3 text-xs leading-5 first:mt-0">
-      {children}
+      <CodeBlockContext.Provider value={true}>
+        {children}
+      </CodeBlockContext.Provider>
     </pre>
   ),
-  code: ({ className, children, node: _node, ...props }) => {
-    const isBlock =
-      Boolean(className?.includes('language-')) ||
-      String(children).includes('\n');
+  code: function MarkdownCode({ className, children, node: _node, ...props }) {
+    const isBlock = useContext(CodeBlockContext);
     return isBlock ? (
-      <code {...props} className="font-mono whitespace-pre">
+      <code
+        {...props}
+        className={`agc-markdown-code font-mono whitespace-pre ${className ?? ''}`}
+      >
         {children}
       </code>
     ) : (
@@ -235,7 +274,10 @@ const markdownComponents: Components = {
   },
   table: ({ children }) => (
     <div className="mt-2 max-w-full overflow-x-auto first:mt-0">
-      <table className="min-w-full border-collapse text-left text-sm">
+      <table
+        className="min-w-full border-collapse text-left"
+        style={{ fontSize: 'var(--agent-message-table-size, 0.875rem)' }}
+      >
         {children}
       </table>
     </div>
@@ -264,6 +306,7 @@ export function ChatMarkdownMessage({
   text,
   role,
   streaming = false,
+  preserveBlankLines = false,
 }: ChatMarkdownMessageProps) {
   if (role === 'user') {
     return <span className="whitespace-pre-wrap break-words">{text}</span>;
@@ -274,11 +317,14 @@ export function ChatMarkdownMessage({
       <ReactMarkdown
         skipHtml
         remarkPlugins={[remarkGfm]}
+        rehypePlugins={
+          text.length <= MAX_HIGHLIGHT_CHARACTERS ? [rehypeHighlight] : []
+        }
         components={
           streaming ? streamingMarkdownComponents : markdownComponents
         }
       >
-        {normalizeMarkdownBlankLines(text)}
+        {preserveBlankLines ? text : normalizeMarkdownBlankLines(text)}
       </ReactMarkdown>
     </MarkdownErrorBoundary>
   );
diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/ProjectSupervisorView.tsx b/apps/ai-game-creator-shell/src/features/project-workspace/ProjectSupervisorView.tsx
index b2a9a0728..4124f3a5a 100644
--- a/apps/ai-game-creator-shell/src/features/project-workspace/ProjectSupervisorView.tsx
+++ b/apps/ai-game-creator-shell/src/features/project-workspace/ProjectSupervisorView.tsx
@@ -8,6 +8,10 @@ import type {
 } from 'react';
 import { Fragment, useEffect, useRef, useState } from 'react';
 
+import {
+  AgentMessageContent,
+  type AgentMessageTone,
+} from '../../../../../packages/shared/src/components/AgentMessageContent';
 import type {
   AgentStatusCard,
   ChatMessage,
@@ -131,6 +135,7 @@ function TurnStreamSequence({
   active,
   userSentAt,
   className,
+  tone = 'body',
 }: {
   items: readonly TurnStreamItem[];
   toolCalls: readonly GameCreatorDirectToolCall[];
@@ -138,6 +143,7 @@ function TurnStreamSequence({
   active: boolean;
   userSentAt: number;
   className?: string;
+  tone?: AgentMessageTone;
 }) {
   const runs = turnStreamRuns(items);
   const callsById = new Map<string, GameCreatorDirectToolCall>();
@@ -159,11 +165,13 @@ function TurnStreamSequence({
                 : 'message message--assistant'
             }
           >
-            <ChatMarkdownMessage
-              role="assistant"
-              text={run.text}
-              streaming={active && index === runs.length - 1}
-            />
+            <AgentMessageContent tone={tone}>
+              <ChatMarkdownMessage
+                role="assistant"
+                text={run.text}
+                streaming={active && index === runs.length - 1}
+              />
+            </AgentMessageContent>
           </div>
         ) : (
           <ToolCallGroup
@@ -183,6 +191,30 @@ function TurnStreamSequence({
   );
 }
 
+/** 当前 Agent 和策划 Agent 的实时/历史思考使用同一个折叠入口。 */
+function AgentReasoning({
+  text,
+  label = '思考过程',
+  testId,
+}: {
+  text: string;
+  label?: string;
+  testId?: string;
+}) {
+  return (
+    <AgentMessageContent
+      as="details"
+      tone="process"
+      className="design-agent-reasoning"
+      aria-label={label}
+      data-testid={testId}
+    >
+      <summary>思考过程</summary>
+      <pre>{text}</pre>
+    </AgentMessageContent>
+  );
+}
+
 type RuntimePanelProps = ComponentProps<typeof ProjectSupervisorRuntimePanel>;
 
 function directStatusTitle(status: string | null | undefined) {
@@ -437,7 +469,11 @@ export function ProjectSupervisorView({
       </p>
     );
   };
-  const renderMessage = (message: ChatMessage, index: number) => {
+  const renderMessageContent = (
+    message: ChatMessage,
+    index: number,
+    tone: AgentMessageTone,
+  ) => {
     const sentAt =
       message.role === 'user' ? directMessageTimestamp(message.updatedAt) : 0;
     return (
@@ -445,10 +481,12 @@ export function ProjectSupervisorView({
         key={message.messageId ?? `${message.role}-${index}`}
         className={`message message--${message.role}`}
       >
-        <ChatMarkdownMessage
-          role={message.role}
-          text={projectSupervisorChatMessageText(message)}
-        />
+        <AgentMessageContent tone={tone}>
+          <ChatMarkdownMessage
+            role={message.role}
+            text={projectSupervisorChatMessageText(message)}
+          />
+        </AgentMessageContent>
         {sentAt > 0 ? (
           <time
             className="message-sent-at"
@@ -459,17 +497,16 @@ export function ProjectSupervisorView({
           </time>
         ) : null}
         {showDesignReasoning && message.reasoningText ? (
-          <details
-            className="design-agent-reasoning"
-            aria-label="策划 Agent 思考过程"
-          >
-            <summary>思考过程</summary>
-            <pre>{message.reasoningText}</pre>
-          </details>
+          <AgentReasoning
+            text={message.reasoningText}
+            label="策划 Agent 思考过程"
+          />
         ) : null}
       </div>
     );
   };
+  const renderMessage = (message: ChatMessage, index: number) =>
+    renderMessageContent(message, index, 'body');
 
   const submitButton = (
     <button
@@ -578,17 +615,21 @@ export function ProjectSupervisorView({
           {directCodex
             ? directTurns.map((turn) => {
                 const content = splitDirectTurnContent(turn);
-                const renderStream = (items: TurnStreamItem[]) => (
+                const renderStream = (
+                  items: TurnStreamItem[],
+                  tone: AgentMessageTone = 'body',
+                ) => (
                   <TurnStreamSequence
                     items={items}
                     toolCalls={turn.calls}
                     active={turn.active}
                     userSentAt={turn.startedAt}
+                    tone={tone}
                   />
                 );
                 const process =
                   turn.source === 'stream' ? (
-                    renderStream(content.processItems)
+                    renderStream(content.processItems, 'process')
                   ) : (
                     <>
                       {turn.calls.length > 0 ? (
@@ -599,7 +640,9 @@ export function ProjectSupervisorView({
                           className="message-tool-call"
                         />
                       ) : null}
-                      {content.processMessages.map(renderMessage)}
+                      {content.processMessages.map((message, index) =>
+                        renderMessageContent(message, index, 'process'),
+                      )}
                     </>
                   );
                 const hasProcess =
@@ -641,11 +684,13 @@ export function ProjectSupervisorView({
                         aria-live="polite"
                         data-runtime-owned="true"
                       >
-                        <ChatMarkdownMessage
-                          role="assistant"
-                          text={turn.transientReply}
-                          streaming
-                        />
+                        <AgentMessageContent>
+                          <ChatMarkdownMessage
+                            role="assistant"
+                            text={turn.transientReply}
+                            streaming
+                          />
+                        </AgentMessageContent>
                       </div>
                     ) : null}
                     {renderTurnUsage(turn)}
@@ -654,35 +699,23 @@ export function ProjectSupervisorView({
               })
             : visibleMessages.map(renderMessage)}
           {directCodex && transientReasoning ? (
-            <details
-              className="design-agent-reasoning"
-              data-testid="live-reasoning"
-            >
-              <summary>思考过程</summary>
-              <pre>{transientReasoning}</pre>
-            </details>
+            <AgentReasoning text={transientReasoning} testId="live-reasoning" />
           ) : null}
           {showDesignReasoning &&
             designReasoningEntries
               .filter((entry) => !entry.messageId)
               .map((entry) => (
-                <details
+                <AgentReasoning
                   key={`reasoning-${entry.id}`}
-                  className="design-agent-reasoning"
-                  aria-label="策划 Agent 思考过程"
-                >
-                  <summary>思考过程</summary>
-                  <pre>{entry.text}</pre>
-                </details>
+                  text={entry.text}
+                  label="策划 Agent 思考过程"
+                />
               ))}
           {showDesignReasoning && designReasoning ? (
-            <details
-              className="design-agent-reasoning"
-              aria-label="策划 Agent 思考过程"
-            >
-              <summary>思考过程</summary>
-              <pre>{designReasoning}</pre>
-            </details>
+            <AgentReasoning
+              text={designReasoning}
+              label="策划 Agent 思考过程"
+            />
           ) : null}
           {!directCodex && transientReply ? (
             <div
@@ -693,11 +726,13 @@ export function ProjectSupervisorView({
               aria-live="polite"
               data-runtime-owned="true"
             >
-              <ChatMarkdownMessage
-                role="assistant"
-                text={transientReply}
-                streaming
-              />
+              <AgentMessageContent>
+                <ChatMarkdownMessage
+                  role="assistant"
+                  text={transientReply}
+                  streaming
+                />
+              </AgentMessageContent>
             </div>
           ) : null}
         </div>
@@ -768,7 +803,9 @@ export function ProjectSupervisorView({
         directStatus !== 'completed' &&
         directStatus !== 'failed' &&
         (runtimePanelProps.controlBusy || Boolean(activeTurnId)) ? (
-          <section
+          <AgentMessageContent
+            as="section"
+            tone="process"
             className={`project-supervisor-process-card${runtimePanelProps.controlBusy ? ' is-active' : ''}`}
             aria-label="陶泥儿执行过程"
             aria-live="polite"
@@ -825,7 +862,7 @@ export function ProjectSupervisorView({
                 ) : null}
               </div>
             ) : null}
-          </section>
+          </AgentMessageContent>
         ) : null}
         <form
           className={`project-supervisor-composer${
diff --git a/apps/ai-game-creator-shell/src/features/project-workspace/ToolCallGroup.tsx b/apps/ai-game-creator-shell/src/features/project-workspace/ToolCallGroup.tsx
index 35b4bff12..9396c17df 100644
--- a/apps/ai-game-creator-shell/src/features/project-workspace/ToolCallGroup.tsx
+++ b/apps/ai-game-creator-shell/src/features/project-workspace/ToolCallGroup.tsx
@@ -8,6 +8,7 @@ import {
 } from 'lucide-react';
 import { useEffect, useId, useState } from 'react';
 
+import { AgentMessageContent } from '../../../../../packages/shared/src/components/AgentMessageContent';
 import type { GameCreatorDirectToolCall } from '../../app/types';
 import {
   formatToolCallDuration,
@@ -93,7 +94,9 @@ export function ToolCallGroup({
     .filter(Boolean)
     .join('，');
   return (
-    <section
+    <AgentMessageContent
+      as="section"
+      tone="process"
       className={
         className
           ? `agent-tool-call-group ${className}`
@@ -146,7 +149,7 @@ export function ToolCallGroup({
           ))}
         </ul>
       </div>
-    </section>
+    </AgentMessageContent>
   );
 }
 
diff --git a/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasChrome.css b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasChrome.css
index 9492d2093..40de7843a 100644
--- a/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasChrome.css
+++ b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasChrome.css
@@ -42,7 +42,7 @@
   position: absolute;
   z-index: 60;
   display: inline-flex;
-  max-width: min(92vw, 640px);
+  max-width: min(92vw, 800px);
   align-items: center;
   flex-wrap: nowrap;
   gap: 0.3rem;
@@ -909,6 +909,39 @@
   }
 }
 
+.game-resource-document-preview {
+  display: flex;
+  flex-direction: column;
+  width: min(960px, calc(100vw - 32px));
+  max-height: calc(100dvh - 32px);
+  min-width: 0;
+  border: 1px solid var(--platform-surface-border);
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.game-resource-document-preview__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--platform-surface-border);
+}
+
+.game-resource-document-preview__header strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.game-resource-document-preview__body {
+  min-height: 0;
+  min-width: 0;
+  padding: 20px;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
 /* 资源面板：独立浮层面板（预览 / 上传 / 下载 / 多选）。 */
 .game-resource-panel {
   width: min(880px, calc(100% - 32px));
diff --git a/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasFocusModel.ts b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasFocusModel.ts
index 2b737b484..a2c24def2 100644
--- a/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasFocusModel.ts
+++ b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasFocusModel.ts
@@ -87,6 +87,7 @@ export type ResourceCanvasHostOverlayState = {
   readonly isClassificationPanelOpen: boolean;
   readonly isRenameDialogOpen: boolean;
   readonly isRecoveryPanelOpen: boolean;
+  readonly isDocumentPreviewOpen?: boolean;
 };
 
 export function isResourceCanvasHostOverlayOpen(
@@ -97,7 +98,8 @@ export function isResourceCanvasHostOverlayOpen(
     overlay.isGenerationPanelOpen ||
     overlay.isClassificationPanelOpen ||
     overlay.isRenameDialogOpen ||
-    overlay.isRecoveryPanelOpen
+    overlay.isRecoveryPanelOpen ||
+    Boolean(overlay.isDocumentPreviewOpen)
   );
 }
 
diff --git a/apps/ai-game-creator-shell/src/features/resource-canvas/resourceDocumentPreviewModel.ts b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceDocumentPreviewModel.ts
new file mode 100644
index 000000000..c0bc85c78
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceDocumentPreviewModel.ts
@@ -0,0 +1,80 @@
+import {
+  projectResourceCardPreviewKind,
+  projectResourcePathExtension,
+} from '../../view/project-development/resourceCardPreviewModel';
+import type { ProjectResource } from '../../view/project-development/resourceProjectionModel';
+
+const CODE_LANGUAGES: Readonly<Record<string, string>> = {
+  ts: 'typescript',
+  tsx: 'typescript',
+  mts: 'typescript',
+  cts: 'typescript',
+  js: 'javascript',
+  jsx: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  rs: 'rust',
+  py: 'python',
+  go: 'go',
+  java: 'java',
+  kt: 'kotlin',
+  kts: 'kotlin',
+  cs: 'csharp',
+  cpp: 'cpp',
+  cc: 'cpp',
+  cxx: 'cpp',
+  c: 'c',
+  h: 'c',
+  hpp: 'cpp',
+  swift: 'swift',
+  php: 'php',
+  rb: 'ruby',
+  lua: 'lua',
+  sh: 'bash',
+  bash: 'bash',
+  zsh: 'bash',
+  ps1: 'powershell',
+  psm1: 'powershell',
+  json: 'json',
+  jsonc: 'json',
+  yaml: 'yaml',
+  yml: 'yaml',
+  toml: 'ini',
+  xml: 'xml',
+  html: 'xml',
+  htm: 'xml',
+  vue: 'xml',
+  svelte: 'xml',
+  css: 'css',
+  scss: 'scss',
+  less: 'less',
+  sql: 'sql',
+  graphql: 'graphql',
+  gql: 'graphql',
+};
+
+export function isResourceDocumentPreviewable(resource: ProjectResource) {
+  const kind = projectResourceCardPreviewKind(resource);
+  return (
+    (kind === 'document' || kind === 'code') &&
+    (resource.content !== undefined || resource.path.trim() !== '')
+  );
+}
+
+export function resourceDocumentPreviewMarkdown(
+  resource: ProjectResource,
+  content: string,
+) {
+  if (projectResourceCardPreviewKind(resource) !== 'code') {
+    return content;
+  }
+  const language =
+    CODE_LANGUAGES[projectResourcePathExtension(resource.path) ?? ''] ?? 'text';
+  // 围栏长于源码里的任意反引号串，代码生成模板中的 Markdown 不能提前闭合代码块。
+  const longestRun = (content.match(/`+/g) ?? []).reduce(
+    (length, run) => Math.max(length, run.length),
+    0,
+  );
+  const fence = '`'.repeat(Math.max(3, longestRun + 1));
+  return `${fence}${language}\n${content}${content.endsWith('\n') ? '' : '\n'}${fence}`;
+}
diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index 39f4c1999..0f8ee6817 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -2913,7 +2913,6 @@ textarea {
   border: 1px solid #b9d8c5;
   border-radius: 8px;
   background: #f1f8f3;
-  color: #1f3d2a;
   overflow: hidden;
 }
 
@@ -2966,7 +2965,7 @@ textarea {
 .project-supervisor-process-elapsed {
   margin-left: auto !important;
   color: inherit;
-  font-size: 13px !important;
+  font-size: inherit;
   font-style: normal;
   font-weight: 500;
   white-space: nowrap;
@@ -2991,8 +2990,8 @@ textarea {
 
 .project-supervisor-process-card p {
   margin: 0;
-  color: #263142;
-  font-size: 13px;
+  color: inherit;
+  font-size: inherit;
   line-height: 1.55;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -3037,11 +3036,6 @@ textarea {
 .game-workbench-chat .project-supervisor-process-card {
   border-color: var(--platform-surface-border);
   background: var(--platform-warm-bg);
-  color: var(--platform-text-strong);
-}
-
-.game-workbench-chat .project-supervisor-process-card p {
-  color: var(--platform-text-base);
 }
 
 .project-supervisor-surface .agent-runtime-status {
@@ -11648,8 +11642,6 @@ button.design-workspace-tree__entry:hover,
 
 .design-agent-reasoning {
   margin: 8px 0;
-  color: var(--text-muted);
-  font-size: 0.82em;
 }
 .design-agent-reasoning summary {
   cursor: pointer;
@@ -11658,7 +11650,6 @@ button.design-workspace-tree__entry:hover,
   margin: 6px 0 0;
   white-space: pre-wrap;
   font: inherit;
-  opacity: 0.8;
 }
 
 /* ============================================================
@@ -11807,7 +11798,6 @@ button.design-workspace-tree__entry:hover,
   > .project-supervisor-process-card {
   border-color: var(--platform-line-soft);
   background: var(--platform-neutral-bg);
-  color: var(--platform-text-base);
 }
 
 .game-workbench-chat
@@ -12021,7 +12011,6 @@ button.design-workspace-tree__entry:hover,
   overflow: hidden;
   border-radius: 12px;
   background: var(--platform-button-secondary-fill);
-  color: var(--platform-text-base);
 }
 
 /* 块头：点整行展开，浅底条目本身是块头。 */
@@ -12209,7 +12198,7 @@ button.design-workspace-tree__entry:hover,
   border: 1px solid var(--platform-line-soft);
   border-radius: 8px;
   background: var(--platform-neutral-bg);
-  color: var(--platform-text-base);
+  color: inherit;
   font-size: 11px;
   line-height: 1.6;
   white-space: pre-wrap;
@@ -12229,7 +12218,7 @@ button.design-workspace-tree__entry:hover,
   align-items: baseline;
   gap: 6px;
   min-width: 0;
-  color: var(--platform-text-base);
+  color: inherit;
   font-size: 12px;
   overflow-wrap: anywhere;
 }
@@ -12295,7 +12284,6 @@ button.design-workspace-tree__entry:hover,
   .project-supervisor-conversation
   > .project-supervisor-process-card {
   margin: 0 16px 8px;
-  color: var(--platform-text-base);
 }
 
 /* 直连回合的「思考过程」块：默认折叠（<details> 默认收起），展开后按步骤列过程行。
@@ -12389,7 +12377,7 @@ button.design-workspace-tree__entry:hover,
 
 .message-turn-process {
   min-width: 0;
-  color: var(--platform-text-base);
+  color: var(--platform-text-soft);
 }
 
 .message-turn-process > summary {
@@ -12426,8 +12414,6 @@ button.design-workspace-tree__entry:hover,
   .project-supervisor-message-list
   details[data-testid='live-reasoning'] {
   margin: 0;
-  color: var(--platform-text-base);
-  font-size: 12px;
 }
 
 .game-workbench-chat
@@ -12445,7 +12431,7 @@ button.design-workspace-tree__entry:hover,
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   font-family: inherit;
-  font-size: 12px;
+  font-size: inherit;
   line-height: 1.5;
 }
 /* Markdown 正文继承消息颜色，层级由字号和字重表达，不混入全局段落或引用颜色。 */
diff --git a/apps/ai-game-creator-shell/src/view/project-development/ResourceDocumentPreviewDialog.tsx b/apps/ai-game-creator-shell/src/view/project-development/ResourceDocumentPreviewDialog.tsx
new file mode 100644
index 000000000..74b3680de
--- /dev/null
+++ b/apps/ai-game-creator-shell/src/view/project-development/ResourceDocumentPreviewDialog.tsx
@@ -0,0 +1,87 @@
+import { X } from 'lucide-react';
+import { useEffect, useMemo } from 'react';
+
+import { PlatformActionButton } from '../../../../../packages/shared/src/components/PlatformActionButton';
+import { PlatformIconButton } from '../../../../../packages/shared/src/components/PlatformIconButton';
+import { ChatMarkdownMessage } from '../../components/ChatMarkdownMessage';
+import { ThemedModal } from '../../components/modal/ThemedModal';
+import { resourceDocumentPreviewMarkdown } from '../../features/resource-canvas/resourceDocumentPreviewModel';
+import type { ProjectResourceCardPreviewState } from './resourceCardPreviewModel';
+import type { ProjectResource } from './resourceProjectionModel';
+
+export function ResourceDocumentPreviewDialog({
+  resource,
+  identity,
+  preview,
+  onRequestPreview,
+  onClose,
+}: {
+  resource: ProjectResource;
+  identity: string;
+  preview: ProjectResourceCardPreviewState;
+  onRequestPreview: (
+    resource: ProjectResource,
+    identity: string,
+    reason: 'detail',
+  ) => void;
+  onClose: () => void;
+}) {
+  useEffect(() => {
+    onRequestPreview(resource, identity, 'detail');
+  }, [resource, identity, onRequestPreview]);
+  const content =
+    preview.status === 'loaded' ? preview.preview.content : undefined;
+  const markdown = useMemo(
+    () =>
+      content === undefined
+        ? ''
+        : resourceDocumentPreviewMarkdown(resource, content),
+    [resource, content],
+  );
+
+  return (
+    <ThemedModal
+      open
+      ariaLabel="文档预览"
+      onClose={onClose}
+      panelClassName="game-resource-document-preview"
+    >
+      <header className="game-resource-document-preview__header">
+        <strong title={resource.label}>{resource.label}</strong>
+        <PlatformIconButton
+          label="关闭文档预览"
+          title="关闭"
+          icon={<X size={18} aria-hidden="true" />}
+          onClick={onClose}
+        />
+      </header>
+      <div className="game-resource-document-preview__body">
+        {preview.status === 'idle' || preview.status === 'loading' ? (
+          <p role="status">正在加载文档…</p>
+        ) : preview.status === 'failed' ? (
+          <>
+            <p role="alert">{preview.error}</p>
+            {preview.retryable ? (
+              <PlatformActionButton
+                tone="secondary"
+                onClick={() => onRequestPreview(resource, identity, 'detail')}
+              >
+                重试
+              </PlatformActionButton>
+            ) : null}
+          </>
+        ) : content === undefined ? (
+          <p role="alert">没有可预览的文本内容</p>
+        ) : content === '' ? (
+          <p role="status">文档为空</p>
+        ) : (
+          <ChatMarkdownMessage
+            role="assistant"
+            text={markdown}
+            preserveBlankLines
+          />
+        )}
+      </div>
+    </ThemedModal>
+  );
+}
diff --git a/apps/ai-game-creator-shell/src/view/project-development/index.tsx b/apps/ai-game-creator-shell/src/view/project-development/index.tsx
index ebb27ce44..3960acdc0 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/index.tsx
+++ b/apps/ai-game-creator-shell/src/view/project-development/index.tsx
@@ -18,6 +18,7 @@ import { save as saveNativeFileDialog } from '@tauri-apps/plugin-dialog';
 import {
   AtSign,
   Crosshair,
+  Eye,
   FileCode2,
   FileText,
   FolderOpen,
@@ -190,6 +191,7 @@ import {
   currentVersionResourceBindingIds,
   isResourceUsedByCurrentVersion,
 } from '../../features/resource-canvas/resourceCanvasVersionBindingModel';
+import { isResourceDocumentPreviewable } from '../../features/resource-canvas/resourceDocumentPreviewModel';
 import { ResourcePromptPolishSlot } from '../../features/resource-canvas/ResourcePromptPolishSlot';
 import {
   type LocalProjectVersionReplacementCandidate,
@@ -308,6 +310,7 @@ import {
   ResourceDependencyOverlay,
   type ResourceDependencyOverlayHandle,
 } from './ResourceDependencyOverlay';
+import { ResourceDocumentPreviewDialog } from './ResourceDocumentPreviewDialog';
 import {
   canonicalProjectedResourceMediaType,
   createResourceEditRequestIdentity,
@@ -1582,6 +1585,8 @@ export default function ProjectDevelopmentView({
     createResourceCanvasHistory,
   );
   const [resourcePanelOpen, setResourcePanelOpen] = useState(false);
+  const [resourceDocumentPreviewIdentity, setResourceDocumentPreviewIdentity] =
+    useState<string | null>(null);
   /**
    * 「生成素材」浮层的本次放行类型。
    *
@@ -1939,6 +1944,7 @@ export default function ProjectDevelopmentView({
         isClassificationPanelOpen: resourceClassificationOverlayOpen,
         isRenameDialogOpen: resourceRenameAssetId !== null,
         isRecoveryPanelOpen: resourceRecoveryPanelOpen,
+        isDocumentPreviewOpen: resourceDocumentPreviewIdentity !== null,
       },
     }),
     boundaryRefs: [resourceBookManagerRef],
@@ -1966,6 +1972,7 @@ export default function ProjectDevelopmentView({
           isClassificationPanelOpen: resourceClassificationOverlayOpen,
           isRenameDialogOpen: resourceRenameAssetId !== null,
           isRecoveryPanelOpen: resourceRecoveryPanelOpen,
+          isDocumentPreviewOpen: resourceDocumentPreviewIdentity !== null,
         },
       })
     ) {
@@ -1987,6 +1994,7 @@ export default function ProjectDevelopmentView({
     resourceClassificationOverlayOpen,
     resourcePanelOpen,
     resourceRecoveryPanelOpen,
+    resourceDocumentPreviewIdentity,
     resourceRenameAssetId,
     selectedResourceIds,
     uiEditorRoute,
@@ -6350,6 +6358,27 @@ export default function ProjectDevelopmentView({
       null)
     : null;
 
+  useEffect(() => {
+    if (
+      mode !== 'resources' ||
+      uiEditorRoute ||
+      resourceDocumentPreviewIdentity !== selectedResourcePreviewIdentity
+    ) {
+      setResourceDocumentPreviewIdentity(null);
+    }
+  }, [
+    mode,
+    uiEditorRoute,
+    resourceDocumentPreviewIdentity,
+    selectedResourcePreviewIdentity,
+  ]);
+
+  useEffect(() => {
+    if (!resourceDocumentPreviewIdentity) return;
+    protectResourceCardPreview(resourceDocumentPreviewIdentity);
+    return () => protectResourceCardPreview(null);
+  }, [protectResourceCardPreview, resourceDocumentPreviewIdentity]);
+
   /**
    * 解析一次资源派生的源身份：取项目 revision，必要时把任务产物正规化成正式素材。
    *
@@ -7863,13 +7892,38 @@ export default function ProjectDevelopmentView({
                         selectedToolbarStyle &&
                         ((selectedToolbarActions?.size ?? 0) > 0 ||
                           Boolean(selectedResource?.manifestAssetId) ||
+                          Boolean(
+                            selectedResource &&
+                              isResourceDocumentPreviewable(selectedResource),
+                          ) ||
                           selectedResourceOpensUiEditor) ? (
                           <ImageCanvasSelectedLayerToolbarView
                             selectedLayer={selectedResourceLayer}
                             selectedToolbarStyle={selectedToolbarStyle}
                             supportedActions={selectedToolbarActions}
+                            downloadLabel="导出"
                             extraActions={
                               <>
+                                {selectedResource &&
+                                selectedResourcePreviewIdentity &&
+                                isResourceDocumentPreviewable(
+                                  selectedResource,
+                                ) ? (
+                                  <CanvasChromeButton
+                                    className="image-canvas-editor__floating-toolbar-text-button"
+                                    label="预览"
+                                    title="预览"
+                                    icon={<Eye className="h-4 w-4" />}
+                                    onClick={() => {
+                                      stopActiveCardMedia();
+                                      setResourceDocumentPreviewIdentity(
+                                        selectedResourcePreviewIdentity,
+                                      );
+                                    }}
+                                  >
+                                    <span>预览</span>
+                                  </CanvasChromeButton>
+                                ) : null}
                                 {selectedResourceOpensUiEditor ? (
                                   <CanvasChromeButton
                                     className="image-canvas-editor__floating-toolbar-text-button"
@@ -7998,49 +8052,36 @@ export default function ProjectDevelopmentView({
                                     <span>替换素材</span>
                                   </CanvasChromeButton>
                                 ) : null}
-                                {/*
-                                  破坏性动作排在最后，并用共享工具条同一套分隔线（
-                                  `image-canvas-editor__floating-toolbar-divider`）把它与前面的
-                                  非破坏性动作隔开。只删素材登记：磁盘文件保留，确认面板里再问一次
-                                  「是否连带删除引用它的游戏版本」。
-                                */}
-                                {selectedResource?.manifestAssetId ? (
-                                  <>
-                                    <span
-                                      aria-hidden="true"
-                                      className="image-canvas-editor__floating-toolbar-divider"
-                                    />
-                                    <CanvasChromeButton
-                                      className="image-canvas-editor__floating-toolbar-text-button"
-                                      label="删除素材"
-                                      title="删除素材"
-                                      icon={<Trash2 className="h-4 w-4" />}
-                                      disabled={
-                                        resourceAssetDeleteFlow.deleting ||
-                                        resourceAssetDeleteFlow.preparing
-                                      }
-                                      onClick={() => {
-                                        if (!selectedResource.manifestAssetId) {
-                                          return;
-                                        }
-                                        void resourceAssetDeleteFlow.requestDelete(
-                                          {
-                                            assetId:
-                                              selectedResource.manifestAssetId,
-                                            // 资源投影的 `path` 就是 manifest 资产的
-                                            // `localPath`（见 `resourceProjectionModel`），
-                                            // 与面板曾用的副标题同源。
-                                            localPath: selectedResource.path,
-                                          },
-                                        );
-                                      }}
-                                    >
-                                      <span>删除素材</span>
-                                    </CanvasChromeButton>
-                                  </>
-                                ) : null}
                               </>
                             }
+                            endActions={
+                              selectedResource?.manifestAssetId ? (
+                                <CanvasChromeButton
+                                  className="image-canvas-editor__floating-toolbar-text-button"
+                                  label="删除素材"
+                                  title="删除素材"
+                                  icon={<Trash2 className="h-4 w-4" />}
+                                  disabled={
+                                    resourceAssetDeleteFlow.deleting ||
+                                    resourceAssetDeleteFlow.preparing
+                                  }
+                                  onClick={() => {
+                                    if (!selectedResource.manifestAssetId) {
+                                      return;
+                                    }
+                                    void resourceAssetDeleteFlow.requestDelete({
+                                      assetId: selectedResource.manifestAssetId,
+                                      // 资源投影的 `path` 就是 manifest 资产的
+                                      // `localPath`（见 `resourceProjectionModel`），
+                                      // 与面板曾用的副标题同源。
+                                      localPath: selectedResource.path,
+                                    });
+                                  }}
+                                >
+                                  <span>删除素材</span>
+                                </CanvasChromeButton>
+                              ) : null
+                            }
                             onOpenQuickEditPanel={openResourceQuickEditPanel}
                             onOpenRedrawPanel={() => {}}
                             onOpenCropExpandPanel={() => {}}
@@ -8765,6 +8806,24 @@ export default function ProjectDevelopmentView({
         onFocusTask={focusResourceAssetGenerationTask}
       />
 
+      {mode === 'resources' &&
+      !uiEditorRoute &&
+      selectedResource &&
+      resourceDocumentPreviewIdentity &&
+      resourceDocumentPreviewIdentity === selectedResourcePreviewIdentity ? (
+        <ResourceDocumentPreviewDialog
+          key={resourceDocumentPreviewIdentity}
+          resource={selectedResource}
+          identity={resourceDocumentPreviewIdentity}
+          preview={
+            resourceCardPreviews.previews.get(
+              resourceDocumentPreviewIdentity,
+            ) ?? resourceCardPreviews.idlePreview
+          }
+          onRequestPreview={resourceCardPreviews.requestPreview}
+          onClose={() => setResourceDocumentPreviewIdentity(null)}
+        />
+      ) : null}
       {resourcePanelOpen ? (
         <ResourceCanvasPanelView
           entries={resourcePanelEntries}
diff --git a/apps/ai-game-creator-shell/src/view/project-development/resourceCardPreviewModel.ts b/apps/ai-game-creator-shell/src/view/project-development/resourceCardPreviewModel.ts
index 2f73589f0..c336f025b 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/resourceCardPreviewModel.ts
+++ b/apps/ai-game-creator-shell/src/view/project-development/resourceCardPreviewModel.ts
@@ -224,7 +224,8 @@ const markdownExtension = /\.(md|markdown|mdx)$/iu;
 const cardCodeExtension =
   /\.(ts|tsx|mts|cts|js|jsx|mjs|cjs|rs|py|go|java|kt|kts|cs|cpp|cc|cxx|c|h|hpp|swift|php|rb|lua|sh|bash|zsh|ps1|psm1|json|jsonc|ya?ml|toml|xml|html?|css|scss|less|sql|graphql|gql|vue|svelte)$/iu;
 /** 纯文本：按纯文本处理，显示前几行但不做标记清理。 */
-const plainTextExtension = /\.(txt|text|csv|tsv|log|ini|conf|cfg|properties|env)$/iu;
+const plainTextExtension =
+  /\.(txt|text|csv|tsv|log|ini|conf|cfg|properties|env)$/iu;
 
 /**
  * 取路径末段的扩展名（小写、不含点）。取不到（无扩展名）时返回 `null`。
@@ -330,7 +331,7 @@ export function projectResourceCardPreviewVariant(
 }
 
 /**
- * 代码卡**不做文件读取**的判据：卡面只用路径画图标，读内容既无用又占读取槽。
+ * 卡面是否预取正文：代码卡只用路径画图标，不为卡面占读取槽；显式详情请求单独放行。
  *
  * 与 `projectResourceCardPreviewVariant` 同源，避免"卡面不画内容、却仍在后台读内容"的分叉。
  */
diff --git a/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts b/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts
index fffa0bd38..f175264ba 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts
+++ b/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceCardPreviews.ts
@@ -26,8 +26,8 @@ import {
   projectResourceCardPreviewImageDimensions,
   type ProjectResourceCardPreviewKind,
   projectResourceCardPreviewKind,
-  projectResourceCardPreviewReadsContent,
   type ProjectResourceCardPreviewPayload,
+  projectResourceCardPreviewReadsContent,
   type ProjectResourceCardPreviewState,
   type ProjectResourceCardPreviewTransportPayload,
   projectResourceMediaPreviewCategory,
@@ -492,11 +492,7 @@ export function useProjectResourceCardPreviews(input: {
       job: PreviewJob,
     ): Promise<ProjectResourceCardPreviewTransportPayload> => {
       const kind = projectResourceCardPreviewKind(job.resource);
-      /**
-       * 这段之前的 `kind === 'document' || kind === 'code'` 双分支已收窄：代码卡在
-       * `requestPreview` 的入队门禁就被挡下（**判据同源**，见 `projectResourceCardPreviewReadsContent`），
-       * 走到这里的只可能是需要读内容的文档卡（Markdown / 纯文本）。
-       */
+      // 内联文档和按需打开的代码详情共用现有预览结果，不另建读取或缓存链路。
       if (job.resource.content !== undefined) {
         return {
           path: job.resource.path,
@@ -508,7 +504,7 @@ export function useProjectResourceCardPreviews(input: {
       const invoke = window.__TAURI__?.core?.invoke;
       if (!invoke) {
         throw new Error(
-          kind === 'document'
+          kind === 'document' || kind === 'code'
             ? '文档预览需要在客户端内打开'
             : '媒体预览需要在客户端内打开',
         );
@@ -636,16 +632,11 @@ export function useProjectResourceCardPreviews(input: {
         return;
       }
       const kind = projectResourceCardPreviewKind(resource);
-      /**
-       * 代码卡**不入队列、不读内容**：卡面只用路径画图标 + 类型标签，读回来的内容没有任何
-       * 消费方。此前代码卡与文档卡走同一条读取分支，读回一大段源码再被折成一行摘要 ——
-       * 既是"丑预览"的来源，也白占全局 3 个读取槽。
-       *
-       * 判据与卡面分流（`projectResourceCardPreviewVariant`）同源，避免"卡面不画内容、
-       * 后台仍在读内容"的分叉。这里直接 `return` 而不是入队后失败：卡停在 `idle`，
-       * 卡面照常画代码图标，不产生误导性的失败态。
-       */
-      if (!projectResourceCardPreviewReadsContent(resource)) {
+      // 代码卡不预取正文；只有显式打开详情才占读取槽，沿用同一队列和项目权限边界。
+      if (
+        !projectResourceCardPreviewReadsContent(resource) &&
+        reason !== 'detail'
+      ) {
         return;
       }
       if (
diff --git a/apps/ai-game-creator-shell/tests/AgentMessageContent.test.tsx b/apps/ai-game-creator-shell/tests/AgentMessageContent.test.tsx
new file mode 100644
index 000000000..e0287af70
--- /dev/null
+++ b/apps/ai-game-creator-shell/tests/AgentMessageContent.test.tsx
@@ -0,0 +1,111 @@
+// @vitest-environment jsdom
+
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { AgentMessageContent } from '../../../packages/shared/src/components/AgentMessageContent';
+import { ChatMarkdownMessage } from '../src/components/ChatMarkdownMessage';
+import {
+  declaration,
+  parseStyleSheet,
+  resolveDeclarations,
+} from './styleCascade';
+
+const sharedCss = readFileSync(
+  resolve(
+    process.cwd(),
+    'packages/shared/src/components/AgentMessageContent.css',
+  ),
+  'utf8',
+);
+const appCss = readFileSync(
+  resolve(process.cwd(), 'apps/ai-game-creator-shell/src/styles.css'),
+  'utf8',
+);
+const base = '.agent-message-content[data-agent-content]';
+const processTone = ".agent-message-content[data-agent-content='process']";
+
+describe('AgentMessageContent', () => {
+  it('正文与过程复用表现组件，保留折叠语义和宿主属性', () => {
+    const { container } = render(
+      <>
+        <AgentMessageContent>最终回复</AgentMessageContent>
+        <AgentMessageContent as="details" tone="process" aria-label="思考过程">
+          <summary>思考过程</summary>
+          <pre>先分析需求</pre>
+        </AgentMessageContent>
+      </>,
+    );
+    expect(
+      container.querySelector('[data-agent-content="body"]')?.textContent,
+    ).toBe('最终回复');
+    const details = container.querySelector('details')!;
+    expect(details.getAttribute('data-agent-content')).toBe('process');
+    expect(details.getAttribute('aria-label')).toBe('思考过程');
+    expect(details.open).toBe(false);
+  });
+
+  it('过程的标题和表格继承层级变量，不用强制字号压回正文大小', () => {
+    const { container } = render(
+      <AgentMessageContent tone="process">
+        <ChatMarkdownMessage
+          role="assistant"
+          text={
+            '# 分析\n\n| 项目 |\n| --- |\n| 内容 |\n\n```js\nconst value = 1;\n```'
+          }
+        />
+      </AgentMessageContent>,
+    );
+    expect(container.querySelector('h1')?.getAttribute('style')).toContain(
+      '--agent-message-heading-size',
+    );
+    expect(container.querySelector('table')?.getAttribute('style')).toContain(
+      '--agent-message-table-size',
+    );
+    expect(container.querySelector('pre code .hljs-keyword')).not.toBeNull();
+  });
+
+  it.each([sharedCss + appCss, appCss + sharedCss])(
+    '共享层级不受宿主 CSS 加载顺序影响',
+    (css) => {
+      const rules = parseStyleSheet(css);
+      const body = resolveDeclarations(rules, [base], 1024);
+      expect(declaration(body, 'font-size')).toBe('14px');
+      expect(declaration(body, 'color')).toContain('--platform-text-strong');
+      for (const host of [
+        ['.design-agent-reasoning'],
+        ['.agent-tool-call-group'],
+        [
+          '.project-supervisor-process-card',
+          '.game-workbench-chat .project-supervisor-process-card',
+          '.game-workbench-chat .project-supervisor-surface.is-direct-codex .project-supervisor-conversation > .project-supervisor-process-card',
+        ],
+      ]) {
+        const process = resolveDeclarations(
+          rules,
+          [base, processTone, ...host],
+          1024,
+        );
+        expect(declaration(process, 'font-size')).toBe('12px');
+        expect(declaration(process, 'color')).toContain('--platform-text-soft');
+        expect(declaration(process, '--agent-message-heading-size')).toBe(
+          '1em',
+        );
+      }
+      const failure = resolveDeclarations(
+        rules,
+        [
+          '.agent-tool-call-row-status',
+          ".agent-tool-call-group-row[data-status='failed'] .agent-tool-call-row-status",
+        ],
+        1024,
+      );
+      expect(declaration(failure, 'color')).toBe(
+        'var(--platform-button-danger-text)',
+      );
+    },
+  );
+});
diff --git a/apps/ai-game-creator-shell/tests/ChatMarkdownMessage.test.tsx b/apps/ai-game-creator-shell/tests/ChatMarkdownMessage.test.tsx
index cd3a150bd..665eedee6 100644
--- a/apps/ai-game-creator-shell/tests/ChatMarkdownMessage.test.tsx
+++ b/apps/ai-game-creator-shell/tests/ChatMarkdownMessage.test.tsx
@@ -16,6 +16,46 @@ function FailingChild({ shouldThrow }: { shouldThrow: boolean }) {
 }
 
 describe('ChatMarkdownMessage', () => {
+  it('代码块带语言标识及高亮节点，文件预览保留空行和 HTML 源码', () => {
+    const source =
+      'const value = "<script>alert(1)</script>";\n\n\n  return value;\n';
+    const { container } = render(
+      <ChatMarkdownMessage
+        role="assistant"
+        preserveBlankLines
+        text={`\`\`\`\`typescript\n${source}\`\`\`\``}
+      />,
+    );
+    expect(container.querySelector('pre code')?.textContent).toBe(source);
+    expect(
+      container.querySelector('code.language-typescript .hljs-keyword'),
+    ).not.toBeNull();
+    expect(container.querySelector('script')).toBeNull();
+  });
+
+  it('未知语言保留代码而不进入错误回退', () => {
+    const { container } = render(
+      <ChatMarkdownMessage
+        role="assistant"
+        text={'```unknown-language\n原始内容\n```'}
+      />,
+    );
+    expect(container.querySelector('pre code')?.textContent).toBe('原始内容\n');
+  });
+
+  it('大文件跳过高亮但保留完整代码', () => {
+    const source = 'const value = 42;\n'.repeat(6000);
+    const { container } = render(
+      <ChatMarkdownMessage
+        role="assistant"
+        preserveBlankLines
+        text={`\`\`\`js\n${source}\`\`\``}
+      />,
+    );
+    expect(container.querySelector('pre code')?.textContent).toBe(source);
+    expect(container.querySelector('.hljs-keyword')).toBeNull();
+  });
+
   it('渲染 assistant 的 GFM 内容与代码块', () => {
     const { container } = render(
       <ChatMarkdownMessage
diff --git a/apps/ai-game-creator-shell/tests/ResourceDocumentPreviewDialog.test.tsx b/apps/ai-game-creator-shell/tests/ResourceDocumentPreviewDialog.test.tsx
new file mode 100644
index 000000000..254954d60
--- /dev/null
+++ b/apps/ai-game-creator-shell/tests/ResourceDocumentPreviewDialog.test.tsx
@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { ResourceDocumentPreviewDialog } from '../src/view/project-development/ResourceDocumentPreviewDialog';
+import type { ProjectResource } from '../src/view/project-development/resourceProjectionModel';
+
+vi.mock('../src/components/modal/ThemedModal', () => ({
+  ThemedModal: ({
+    children,
+    ariaLabel,
+  }: {
+    children: ReactNode;
+    ariaLabel: string;
+  }) => (
+    <section role="dialog" aria-label={ariaLabel}>
+      {children}
+    </section>
+  ),
+}));
+afterEach(cleanup);
+
+const resource: ProjectResource = {
+  id: 'doc',
+  path: 'docs/design.md',
+  label: '设计文档',
+  mediaType: 'text/markdown',
+  category: 'document',
+  subtype: 'document',
+  manifestAssetId: 'doc',
+  sourceLabel: '',
+  taskTitle: null,
+  producerTaskId: null,
+  externalResourceId: null,
+  referenceResourceIds: [],
+  dependencies: [],
+  dependencyDepth: 0,
+};
+
+describe('ResourceDocumentPreviewDialog', () => {
+  it('加载时通过现有详情回调请求正文，加载完成复用 Markdown 渲染', () => {
+    const onRequestPreview = vi.fn();
+    const onClose = vi.fn();
+    const props = { resource, identity: 'doc:v1', onRequestPreview, onClose };
+    const { rerender } = render(
+      <ResourceDocumentPreviewDialog
+        {...props}
+        preview={{ status: 'loading' }}
+      />,
+    );
+    expect(screen.getByRole('status').textContent).toContain('加载');
+    expect(onRequestPreview).toHaveBeenCalledWith(resource, 'doc:v1', 'detail');
+    rerender(
+      <ResourceDocumentPreviewDialog
+        {...props}
+        preview={{
+          status: 'loaded',
+          preview: {
+            path: resource.path,
+            mediaType: resource.mediaType,
+            byteLen: 10,
+            content: '# 标题\n\n**正文**',
+          },
+        }}
+      />,
+    );
+    expect(screen.getByRole('heading', { name: '标题' })).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: '关闭文档预览' }));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('失败显示错误与重试，换资源进入加载态时不残留旧正文', () => {
+    const onRequestPreview = vi.fn();
+    const props = {
+      resource,
+      identity: 'doc:v1',
+      onRequestPreview,
+      onClose: vi.fn(),
+    };
+    const { rerender } = render(
+      <ResourceDocumentPreviewDialog
+        {...props}
+        preview={{
+          status: 'failed',
+          error: '文档读取失败',
+          retryable: true,
+        }}
+      />,
+    );
+    expect(screen.getByRole('alert').textContent).toBe('文档读取失败');
+    onRequestPreview.mockClear();
+    fireEvent.click(screen.getByRole('button', { name: '重试' }));
+    expect(onRequestPreview).toHaveBeenCalledWith(resource, 'doc:v1', 'detail');
+    rerender(
+      <ResourceDocumentPreviewDialog
+        {...props}
+        identity="doc:v2"
+        preview={{ status: 'loading' }}
+      />,
+    );
+    expect(screen.queryByRole('alert')).toBeNull();
+    expect(screen.getByRole('status').textContent).toContain('加载');
+  });
+
+  it('空文档显示空态而不是永久加载', () => {
+    render(
+      <ResourceDocumentPreviewDialog
+        resource={resource}
+        identity="doc:v1"
+        onRequestPreview={vi.fn()}
+        onClose={vi.fn()}
+        preview={{
+          status: 'loaded',
+          preview: {
+            path: resource.path,
+            mediaType: resource.mediaType,
+            byteLen: 0,
+            content: '',
+          },
+        }}
+      />,
+    );
+    expect(screen.getByRole('status').textContent).toBe('文档为空');
+  });
+});
diff --git a/apps/ai-game-creator-shell/tests/appSurface/design-agent.suite.ts b/apps/ai-game-creator-shell/tests/appSurface/design-agent.suite.ts
index 499ec2464..54d9722fa 100644
--- a/apps/ai-game-creator-shell/tests/appSurface/design-agent.suite.ts
+++ b/apps/ai-game-creator-shell/tests/appSurface/design-agent.suite.ts
@@ -227,6 +227,7 @@ export function registerDesignAgentSurfaceTests() {
 
     const summary = await screen.findByText('思考过程');
     const details = summary.closest('details') as HTMLDetailsElement;
+    expect(details.getAttribute('data-agent-content')).toBe('process');
     expect(details.open).toBe(false);
     fireEvent.click(summary);
     expect(details.open).toBe(true);
@@ -257,6 +258,11 @@ export function registerDesignAgentSurfaceTests() {
       (summary) => summary.closest('details') as HTMLDetailsElement,
     );
     expect(details.every((element) => !element.open)).toBe(true);
+    expect(
+      details.every(
+        (element) => element.getAttribute('data-agent-content') === 'process',
+      ),
+    ).toBe(true);
     fireEvent.click(summaries[0]);
     expect(details[0].open).toBe(true);
     expect(details[1].open).toBe(false);
diff --git a/apps/ai-game-creator-shell/tests/appSurface/tool-call-group.suite.ts b/apps/ai-game-creator-shell/tests/appSurface/tool-call-group.suite.ts
index f58f36587..de4d266cc 100644
--- a/apps/ai-game-creator-shell/tests/appSurface/tool-call-group.suite.ts
+++ b/apps/ai-game-creator-shell/tests/appSurface/tool-call-group.suite.ts
@@ -112,6 +112,7 @@ export function registerToolCallGroupTests() {
       '[data-testid="agent-tool-call-group"]',
     ) as HTMLElement;
     expect(group).not.toBeNull();
+    expect(group.getAttribute('data-agent-content')).toBe('process');
     const head = within(group).getByTestId('agent-tool-call-group-head');
     // 块头是一行按钮：图标 + 汇总 + 展开箭头，默认折叠，正文由 `hidden` 收起。
     expect(head.tagName).toBe('BUTTON');
diff --git a/apps/ai-game-creator-shell/tests/resourceCanvasFloatingDismiss.test.tsx b/apps/ai-game-creator-shell/tests/resourceCanvasFloatingDismiss.test.tsx
index 3064b7f02..f3a58a319 100644
--- a/apps/ai-game-creator-shell/tests/resourceCanvasFloatingDismiss.test.tsx
+++ b/apps/ai-game-creator-shell/tests/resourceCanvasFloatingDismiss.test.tsx
@@ -240,6 +240,20 @@ describe('resourceCanvasFocusModel', () => {
         hostOverlay: { ...closed, isRenameDialogOpen: true },
       }),
     ).toBe(false);
+    const documentPreviewOverlay = { ...closed, isDocumentPreviewOpen: true };
+    expect(
+      resolveResourceCanvasFocusEscapeActive({
+        ...base,
+        hostOverlay: documentPreviewOverlay,
+      }),
+    ).toBe(false);
+    expect(
+      resolveResourceCanvasFloatingPanelDismissOpen({
+        isCanvasVisible: true,
+        isFloatingPanelOpen: true,
+        hostOverlay: documentPreviewOverlay,
+      }),
+    ).toBe(false);
   });
 });
 
diff --git a/apps/ai-game-creator-shell/tests/resourceCanvasToolbarModel.test.ts b/apps/ai-game-creator-shell/tests/resourceCanvasToolbarModel.test.ts
index 3e83c916d..c130241e6 100644
--- a/apps/ai-game-creator-shell/tests/resourceCanvasToolbarModel.test.ts
+++ b/apps/ai-game-creator-shell/tests/resourceCanvasToolbarModel.test.ts
@@ -237,6 +237,34 @@ describe('resource canvas toolbar actions', () => {
     );
   });
 
+  it.each([
+    ['image/png', 'character', 'assets/hero.png'],
+    ['image/svg+xml', 'icon', 'assets/icon.svg'],
+    ['image/png', 'character-animation', 'assets/walk.png'],
+    ['video/mp4', 'video', 'assets/intro.mp4'],
+    ['audio/wav', 'sound-effect', 'assets/hit.wav'],
+    ['audio/mpeg', 'background-music', 'assets/music.mp3'],
+    ['text/html', 'ui-prototype', 'ui/menu.html'],
+    ['text/markdown', 'document', 'docs/design.md'],
+    ['application/json', 'other', 'assets/data.json'],
+    ['application/octet-stream', 'other', 'assets/model.bin'],
+  ])(
+    '%s 素材导出不依赖媒体类型、预览或 manifest 身份',
+    (mediaType, subtype, path) => {
+      expect(
+        toolbarActions(
+          createManifest(),
+          createResource({
+            mediaType,
+            subtype,
+            path,
+            manifestAssetId: null,
+          }),
+        ),
+      ).toContain('download');
+    },
+  );
+
   it('拿不到本地文件路径的资源不放行下载，避免渲染出点了报错的按钮', () => {
     const manifest = createManifest();
     expect(
diff --git a/apps/ai-game-creator-shell/tests/resourceDocumentPreviewModel.test.ts b/apps/ai-game-creator-shell/tests/resourceDocumentPreviewModel.test.ts
new file mode 100644
index 000000000..9254c9462
--- /dev/null
+++ b/apps/ai-game-creator-shell/tests/resourceDocumentPreviewModel.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  isResourceDocumentPreviewable,
+  resourceDocumentPreviewMarkdown,
+} from '../src/features/resource-canvas/resourceDocumentPreviewModel';
+import type { ProjectResource } from '../src/view/project-development/resourceProjectionModel';
+
+function resource(path: string): ProjectResource {
+  return {
+    id: path,
+    path,
+    label: path,
+    mediaType: 'text/plain',
+    category: 'document',
+    subtype: 'document',
+    manifestAssetId: 'doc',
+    sourceLabel: '',
+    taskTitle: null,
+    producerTaskId: null,
+    externalResourceId: null,
+    referenceResourceIds: [],
+    dependencies: [],
+    dependencyDepth: 0,
+  };
+}
+
+describe('resourceDocumentPreviewMarkdown', () => {
+  it('文档与空行原样进入 Markdown 渲染', () => {
+    const text = '# 标题\n\n\n|列|\n|-|\n|值|';
+    expect(
+      resourceDocumentPreviewMarkdown(resource('docs/design.md'), text),
+    ).toBe(text);
+    expect(isResourceDocumentPreviewable(resource('docs/design.md'))).toBe(
+      true,
+    );
+  });
+
+  it.each([
+    ['game/main.ts', 'typescript'],
+    ['game/main.js', 'javascript'],
+    ['assets/data.json', 'json'],
+    ['game/main.py', 'python'],
+  ])('%s 包为 %s 代码块', (path, language) => {
+    expect(
+      resourceDocumentPreviewMarkdown(resource(path), '  source\n\n\n'),
+    ).toBe(`\`\`\`${language}\n  source\n\n\n\`\`\``);
+  });
+
+  it('正文包含 Markdown 围栏时不会逃出代码块', () => {
+    const text = 'const sample = "````";\n\n\n<script>alert(1)</script>';
+    expect(
+      resourceDocumentPreviewMarkdown(resource('game/main.js'), text),
+    ).toBe(`\`\`\`\`\`javascript\n${text}\n\`\`\`\`\``);
+  });
+
+  it('图片没有文档预览入口，内联文档不要求文件路径', () => {
+    expect(
+      isResourceDocumentPreviewable({
+        ...resource('assets/image.png'),
+        mediaType: 'image/png',
+        subtype: 'image',
+      }),
+    ).toBe(false);
+    expect(
+      isResourceDocumentPreviewable({
+        ...resource(''),
+        content: '# 回执',
+        subtype: 'agent-result',
+      }),
+    ).toBe(true);
+    expect(isResourceDocumentPreviewable(resource(''))).toBe(false);
+  });
+});
diff --git a/apps/ai-game-creator-shell/tests/useProjectResourceCardPreviews.test.ts b/apps/ai-game-creator-shell/tests/useProjectResourceCardPreviews.test.ts
index feba40865..6e821454f 100644
--- a/apps/ai-game-creator-shell/tests/useProjectResourceCardPreviews.test.ts
+++ b/apps/ai-game-creator-shell/tests/useProjectResourceCardPreviews.test.ts
@@ -141,6 +141,65 @@ afterEach(() => {
 });
 
 describe('useProjectResourceCardPreviews', () => {
+  it('代码卡不预取正文，显式详情复用文本预览队列与缓存', async () => {
+    const code = resource('code', {
+      path: 'game/main.ts',
+      subtype: 'code',
+      mediaType: 'text/typescript',
+    });
+    const invoke = vi.fn(
+      async (_command: string, _args?: Record<string, unknown>) => ({
+        path: code.path,
+        mediaType: code.mediaType,
+        byteLen: 19,
+        content: 'const answer = 42;',
+      }),
+    );
+    window.__TAURI__ = {
+      core: {
+        invoke: async <Result>(
+          command: string,
+          args?: Record<string, unknown>,
+        ) => (await invoke(command, args)) as Result,
+      },
+    };
+    const { result } = renderHook(() =>
+      useProjectResourceCardPreviews({
+        projectPath: '/tmp/document-preview',
+        projectId: 'document-preview',
+        mode: 'dependency',
+        resources: [code],
+        canvasRef: { current: document.createElement('div') },
+        eagerPreviewLimit: 12,
+      }),
+    );
+    const identity = result.current.identityByResourceId.get(code.id)!;
+    act(() => result.current.requestPreview(code, identity, 'visible'));
+    expect(
+      invoke.mock.calls.some(
+        ([command]) => command === 'read_local_project_text_preview',
+      ),
+    ).toBe(false);
+    act(() => result.current.requestPreview(code, identity, 'detail'));
+    await waitFor(() =>
+      expect(result.current.previews.get(identity)?.status).toBe('loaded'),
+    );
+    expect(invoke).toHaveBeenCalledWith(
+      'read_local_project_text_preview',
+      expect.objectContaining({
+        relativePath: code.path,
+        scopeId: expect.any(String),
+        requestId: expect.any(String),
+      }),
+    );
+    act(() => result.current.requestPreview(code, identity, 'detail'));
+    expect(
+      invoke.mock.calls.filter(
+        ([command]) => command === 'read_local_project_text_preview',
+      ),
+    ).toHaveLength(1);
+  });
+
   it('prefetches initial previewable resources without requiring a detail click', async () => {
     const art = resource('initial-art');
     const invoke = vi.fn(
diff --git a/docs/project-memory/plans/【实施计划】文档素材Markdown预览-2026-09-16.md b/docs/project-memory/plans/【实施计划】文档素材Markdown预览-2026-09-16.md
new file mode 100644
index 000000000..2e917adea
--- /dev/null
+++ b/docs/project-memory/plans/【实施计划】文档素材Markdown预览-2026-09-16.md
@@ -0,0 +1,17 @@
+# 文档素材 Markdown 预览实施计划
+
+- Date: 2026-09-16
+- Status: implemented-awaiting-validation
+- Milestone: `【里程碑】文档素材Markdown预览-2026-09-16.md`
+
+## 边界与顺序
+
+1. 扩展现有 Markdown 渲染器的代码高亮，未知语言、大正文安全降级；文档模式保留原始空行。
+2. 用资源现有预览类型和扩展名生成 Markdown；代码只放行 `detail` 读取。
+3. 工具栏挂载预览入口，复用 ThemedModal 和预览缓存展示加载/空/失败状态，身份变化关闭旧预览。
+4. 补充格式转换、渲染和按需读取回归用例，不执行测试。
+5. 执行 AGC TypeScript、编码、文档索引、CSS 语法与 diff 检查。
+
+## 风险与回滚
+
+重点检查高亮 class 不被自定义 code 渲染丢弃、Markdown 围栏不吞正文、弹窗 Esc 不误清画布选中、文档切换不串内容。回滚仅移除本次入口/渲染增量，保留此前工具栏修改，不改资源数据。
diff --git a/docs/project-memory/plans/【里程碑】文档素材Markdown预览-2026-09-16.md b/docs/project-memory/plans/【里程碑】文档素材Markdown预览-2026-09-16.md
new file mode 100644
index 000000000..703167563
--- /dev/null
+++ b/docs/project-memory/plans/【里程碑】文档素材Markdown预览-2026-09-16.md
@@ -0,0 +1,23 @@
+# 文档素材 Markdown 预览
+
+- Version: 1
+- Status: implemented-awaiting-validation
+- Date: 2026-09-16
+- Parent Spec: `docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md` 的“文档与代码素材预览”。
+
+## 范围与评审
+
+单里程碑：在已有资源画布和 Markdown 渲染链路中增加只读文档/代码预览。
+边界评审：沿用现有权限、scope 与缓存身份；不改 Rust/DTO/持久化数据；代码只在详情请求读取，卡片预取不变；未知语言与大文件退回普通代码，不执行源码。无前置里程碑。
+
+## 验收
+
+- 文档/代码有预览入口，其它素材无此入口；弹窗支持关闭与滚动。
+- Markdown 标题、列表、表格可读；代码有语言高亮，反引号、缩进、空行不丢失。
+- 代码可见性预取仍不读文件；显式详情复用现有队列。
+- 加载、空文件、错误与切换身份不显示错误素材的正文。
+- AGC 类型、编码、文档索引与 diff 检查通过。按用户此前约束不运行测试，补充回归用例，实机验收单列为待验证。
+
+## 验收状态
+
+已实现入口、弹窗、队列按需读取、Markdown 代码围栏与高亮；已通过 AGC TypeScript（含新增预览测试文件的静态类型检查）、编码、文档索引、CSS 语法和 diff 检查。回归用例未执行；原生客户端读取、弹窗焦点/滚动和视觉验收仍待验证，不进入下一里程碑。
diff --git a/docs/project-memory/shared-memory/team-conventions.md b/docs/project-memory/shared-memory/team-conventions.md
index 7dec95491..98662a4e2 100644
--- a/docs/project-memory/shared-memory/team-conventions.md
+++ b/docs/project-memory/shared-memory/team-conventions.md
@@ -18,6 +18,7 @@
 
 - 修改范围保持聚焦；优先扩展现有系统、页面、组件、DTO 和脚本，不新建平行入口或业务真相。
 - UI 开发优先复用现有公共组件；跨页面或跨端重复的视觉/交互模式应沉淀到 `packages/shared`，由现有页面迁移使用，禁止在业务页复制同类 UI。共享组件只承载通用表现与交互，不下沉领域规则、后端副作用或正式业务状态。
+- AGC 当前 Agent 与策划 Agent 的消息层级共用 `packages/shared` 的 `AgentMessageContent`：正文使用 `body`，思考、中间输出与工具调用使用 `process`；宿主不按 Agent 类型重新定义过程字号和颜色，错误状态保留语义色。
 - 后端遵循 `module-*`、`spacetime-module`、`spacetime-client`、`api-server`、`platform-*`、`shared-contracts` 的现役边界。
 - 前端只负责表现、交互和临时 UI 状态；正式状态来自后端投影、API 或持久化契约。
 - 对已明确退役且无现役调用方、公开契约、持久化迁移或活跃实例的对象，不写兼容实现、维持旧行为的测试、墓碑注释或墓碑文档。
diff --git a/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md b/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md
index 7c9ed80f0..e861ab2f6 100644
--- a/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md
+++ b/docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md
@@ -1,5 +1,18 @@
 # AI 游戏创作智能体 App 实施计划
 
+## 资源卡选中工具栏与导出
+
+- 共享选中工具栏按实际显示的快速编辑、编辑动作、改造、导出与宿主动作组生成分隔线；空组不产生分隔线，不依赖宿主 CSS 隐藏重复线。
+- AGC 所有具有本地文件路径的素材都显示带文字的「导出」按钮，位于工具栏末组的「删除素材」之前，两者之间不插入分隔线；「重命名」继续保留在前面的常规动作组。工具栏宽度上限为 `min(92vw, 800px)`，窄屏仍可横向滚动。图片、视频、音频、动画、UI、文档及其它文件共用 `isResourceCanvasExportable`，不按媒体类型限制导出；无文件路径及虚拟项目版本不提供文件导出入口。
+- 导出继续复用 `saveProjectResourcesToDisk`：原生保存对话框选择路径，`save_local_project_asset_file` 复制原始文件字节，不转图片、不重编码、不另建 IPC。后端继续校验源文件、敏感路径和目标路径；取消不写文件，失败通过工作台提示。
+
+## 文档与代码素材预览
+
+- 文档与代码素材选中工具栏提供「预览」，打开独立、可滚动的只读弹窗；关闭、切换素材或项目后不残留旧内容。加载中、空文件与读取失败分别呈现，允许重试可重试的错误。
+- 复用资源预览队列、身份缓存、项目 scope、失效与权限校验，继续调用 `read_local_project_text_preview`。代码卡不做可见性预取，仅用户显式打开详情时读取；不新增 IPC，不扩大可读取文件范围，不增加编辑/保存能力。
+- 文档正文统一使用现有 Markdown 渲染器；代码文件以按扩展名标注语言的 Markdown 围栏代码块呈现。围栏必须长于正文内的反引号串，正文空行与缩进保持原样，不把源码当 Markdown 正文或 HTML 执行。
+- 现有 Markdown 渲染器统一提供代码高亮，保留 HTML 禁用及外链/图片安全策略；未知语言回退普通代码块。超大正文跳过高亮但不截断内容，避免流式对话或文件预览被高亮计算阻塞。
+
 ## DirectProject 用户消息契约验证
 
 `chat_with_game_creator_direct_codex` 必须携带 `projectPath`、`prompt`、稳定的 `clientTurnId` 和完整 `userItem`；`creationType` 与 `attachments` 按实际输入传递。Rust 通过 `projectPath` 解析项目身份，不接收额外 `projectId`。界面测试必须核对 `userItem` 的消息身份、角色、正文及附件内容，拒绝回合用例仍验证实际返回的错误原因。重开项目的历史恢复测试使用 `read_direct_project_history_slice` 的 canonical raw items 与 `hasMore`，首屏 `limit: 20`。资源图和生成任务的读取继续遵守原有工作台恢复逻辑，不因聊天断言失败延迟、关闭或改变它们。
diff --git a/docs/technical/【技术方案】GameAgent对话工具调用卡片-2026-09-14.md b/docs/technical/【技术方案】GameAgent对话工具调用卡片-2026-09-14.md
index 472967863..11ce76401 100644
--- a/docs/technical/【技术方案】GameAgent对话工具调用卡片-2026-09-14.md
+++ b/docs/technical/【技术方案】GameAgent对话工具调用卡片-2026-09-14.md
@@ -99,7 +99,7 @@ toolCalls?: DirectTurnToolCall[] | null;
   - 耗时：单条工具 = `startedAt` → `updatedAt`，块头总用时 = 该回合所有工具的 `min(startedAt)` → `max(updatedAt)`。单条格式：`<1s` → `0.4s`、`<60s` → `12.3s`（整秒省略小数）、`≥60s` → `2m 5s`；块头格式：`42秒` / `4分钟` / `5分钟 45秒`。`startedAt` 为 0 或 `updatedAt < startedAt` 时不显示耗时（不显示 `0s` / 负数），耗时为 0 时同样不显示 `0s`。
   - 时间：块头显示该回合结束时间（`max(updatedAt)` 的本地 `HH:mm:ss`）；同一回合能拿到用户消息时间（`updatedAt > 0`）时显示 `HH:mm:ss → HH:mm:ss`（发送 → 结束），取不到就只显示结束时间，不编造。
   - 回合结束时间与耗时在正文下方右对齐；Direct 对话输入框提示统一为“描述你的想法，或 @ 引用素材”，引用按钮保留输入盒的 12px 内边距，不使用负边距贴边。
-  - 对话普通文字统一使用 `--platform-text-base`：用户与助手正文、工具摘要和输入输出、执行过程、发送时间及耗时同色，层级通过字号和字重表达。工具子元素继承容器颜色，失败状态保留错误色；输入提示使用主题弱文字色，禁用状态保留原有反馈，不混用硬编码灰蓝、绿色或棕色。
+  - 当前 Agent 与策划 Agent 共用 `packages/shared` 的 `AgentMessageContent` 表现组件：正文为 14px / `--platform-text-strong`，思考、中间输出和工具调用为 12px / `--platform-text-soft`。实时与历史思考共用同一个折叠入口；工具输入输出继承过程色，失败状态保留错误色。Markdown 标题、表格及代码高亮在过程区同步弱化，最终回复和文档预览仍保留正常排版，不按 Agent 类型复制样式。输入提示与禁用状态保持原有反馈。
   - Windows 命令展示：仅 `command` 卡片识别 `pwsh` / `powershell`（含完整路径、`.exe`、常见启动选项）的 `-Command` / `-c` 外层包装，摘要和展开输入只展示脚本正文，并解开单个 shell 参数的引用拼接。摘要优先读取已脱敏的 `detail.command`，再按首行 120 字符截断，避免历史摘要被可执行文件路径占满。无法识别的启动方式、`-File`、`-EncodedCommand`、普通命令和 MCP 输入原样展示；执行参数、持久化原文、脱敏和输出均不改变。
   - 调试属性：块与行都带 `data-duration-ms`（原始毫秒，无法计算时为空串）与稳定 `data-testid`（块 `agent-tool-call-group`、行 `agent-tool-call-row`）。
 - 必须用 `<button aria-expanded>` + `hidden` 控制展开（键盘可达、可读屏），块头与行都是按钮：`aria-label` = 汇总 / 行文案 + 耗时；默认折叠。
diff --git a/package-lock.json b/package-lock.json
index 98d451a05..c05f8be30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -118,6 +118,7 @@
         "react-colorful": "^5.8.0",
         "react-dom": "^19.0.0",
         "react-markdown": "^10.1.0",
+        "rehype-highlight": "^7.0.2",
         "remark-gfm": "^4.0.1",
         "vite": "^6.2.0",
         "zustand": "^5.0.14"
@@ -13314,6 +13315,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-is-element": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -13341,6 +13355,22 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-text": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
+      "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "unist-util-find-after": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -13375,6 +13405,15 @@
         "hermes-estree": "0.33.3"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.11.2",
+      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.11.2.tgz",
+      "integrity": "sha512-oaXMACAU0kzOMXBjWpNcX+vlwSBCIAiZ9BHa7gA15NOTtT2L/l8OSZDuqS2XppOhZBPJ7hm4o8ep2kyuip2uEQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -15203,6 +15242,21 @@
         "get-func-name": "^2.0.1"
       }
     },
+    "node_modules/lowlight": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/lowlight/-/lowlight-3.3.0.tgz",
+      "integrity": "sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "highlight.js": "~11.11.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -18820,6 +18874,23 @@
         "regjsparser": "bin/parser"
       }
     },
+    "node_modules/rehype-highlight": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmmirror.com/rehype-highlight/-/rehype-highlight-7.0.2.tgz",
+      "integrity": "sha512-k158pK7wdC2qL3M5NcZROZ2tR/l7zOzjxXd5VGdcfIyoijjQqpHd3JKtYSBDpDZ38UI2WJWuFAtkMDxmx5kstA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-to-text": "^4.0.0",
+        "lowlight": "^3.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-gfm": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
@@ -20520,6 +20591,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/unist-util-find-after": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
+      "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-is": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
@@ -26376,6 +26461,7 @@
         "react-colorful": "^5.8.0",
         "react-dom": "^19.0.0",
         "react-markdown": "^10.1.0",
+        "rehype-highlight": "^7.0.2",
         "remark-gfm": "^4.0.1",
         "tailwindcss": "^4.1.14",
         "typescript": "~5.8.2",
@@ -31704,6 +31790,14 @@
         "function-bind": "^1.1.2"
       }
     },
+    "hast-util-is-element": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+      "requires": {
+        "@types/hast": "^3.0.0"
+      }
+    },
     "hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -31726,6 +31820,17 @@
         "vfile-message": "^4.0.0"
       }
     },
+    "hast-util-to-text": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
+      "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+      "requires": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "unist-util-find-after": "^5.0.0"
+      }
+    },
     "hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -31752,6 +31857,11 @@
         "hermes-estree": "0.33.3"
       }
     },
+    "highlight.js": {
+      "version": "11.11.2",
+      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.11.2.tgz",
+      "integrity": "sha512-oaXMACAU0kzOMXBjWpNcX+vlwSBCIAiZ9BHa7gA15NOTtT2L/l8OSZDuqS2XppOhZBPJ7hm4o8ep2kyuip2uEQ=="
+    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -32888,6 +32998,16 @@
         "get-func-name": "^2.0.1"
       }
     },
+    "lowlight": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/lowlight/-/lowlight-3.3.0.tgz",
+      "integrity": "sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==",
+      "requires": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "highlight.js": "~11.11.0"
+      }
+    },
     "lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -35280,6 +35400,18 @@
         "jsesc": "~3.1.0"
       }
     },
+    "rehype-highlight": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmmirror.com/rehype-highlight/-/rehype-highlight-7.0.2.tgz",
+      "integrity": "sha512-k158pK7wdC2qL3M5NcZROZ2tR/l7zOzjxXd5VGdcfIyoijjQqpHd3JKtYSBDpDZ38UI2WJWuFAtkMDxmx5kstA==",
+      "requires": {
+        "@types/hast": "^3.0.0",
+        "hast-util-to-text": "^4.0.0",
+        "lowlight": "^3.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      }
+    },
     "remark-gfm": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
@@ -36441,6 +36573,15 @@
         "crypto-random-string": "^2.0.0"
       }
     },
+    "unist-util-find-after": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
+      "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+      "requires": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      }
+    },
     "unist-util-is": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
diff --git a/packages/shared/src/components/AgentMessageContent.css b/packages/shared/src/components/AgentMessageContent.css
new file mode 100644
index 000000000..9a1d241d2
--- /dev/null
+++ b/packages/shared/src/components/AgentMessageContent.css
@@ -0,0 +1,25 @@
+.agent-message-content[data-agent-content] {
+  min-width: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--platform-text-strong, #3d1f10);
+}
+
+.agent-message-content[data-agent-content='process'] {
+  --agent-message-heading-size: 1em;
+  --agent-message-table-size: 1em;
+  font-size: 12px;
+  color: var(--platform-text-soft, #988476);
+}
+
+/* Markdown 标题和代码不能把过程内容重新放大，或带回正文的高对比度配色。 */
+.agent-message-content[data-agent-content='process']
+  :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, blockquote, pre, code, th, td) {
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+.agent-message-content[data-agent-content='process'] pre code span {
+  color: inherit;
+}
diff --git a/packages/shared/src/components/AgentMessageContent.tsx b/packages/shared/src/components/AgentMessageContent.tsx
new file mode 100644
index 000000000..831ffc335
--- /dev/null
+++ b/packages/shared/src/components/AgentMessageContent.tsx
@@ -0,0 +1,24 @@
+import './AgentMessageContent.css';
+
+import type { HTMLAttributes } from 'react';
+
+export type AgentMessageTone = 'body' | 'process';
+
+/** 只表达正文/过程的视觉层级；消息身份、状态与分组由宿主决定。 */
+export function AgentMessageContent({
+  as: Tag = 'div',
+  tone = 'body',
+  className,
+  ...props
+}: HTMLAttributes<HTMLElement> & {
+  as?: 'div' | 'section' | 'details';
+  tone?: AgentMessageTone;
+}) {
+  return (
+    <Tag
+      {...props}
+      data-agent-content={tone}
+      className={['agent-message-content', className].filter(Boolean).join(' ')}
+    />
+  );
+}
diff --git a/packages/shared/src/components/index.ts b/packages/shared/src/components/index.ts
index 1196225e1..f2b1cee94 100644
--- a/packages/shared/src/components/index.ts
+++ b/packages/shared/src/components/index.ts
@@ -218,6 +218,8 @@ export { Textarea } from './ui/textarea';
 
 // Additional platform-prefixed aliases make the package discoverable beside
 // existing application adapters while keeping the public API product-neutral.
+export type { AgentMessageTone } from './AgentMessageContent';
+export { AgentMessageContent } from './AgentMessageContent';
 export type {
   ButtonProps as PlatformButtonProps,
   SwitchProps as PlatformSwitchProps,
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
index 2f2146ed2..8b5a462fc 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
@@ -10,7 +10,10 @@ import {
 import { describe, expect, it, vi } from 'vitest';
 
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
-import { ImageCanvasSelectedLayerToolbarView } from './ImageCanvasSelectedLayerToolbarView';
+import {
+  ImageCanvasSelectedLayerToolbarView,
+  type ImageCanvasSelectedToolbarAction,
+} from './ImageCanvasSelectedLayerToolbarView';
 
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   return {
@@ -67,6 +70,121 @@ function renderSelectedToolbar(
 }
 
 describe('ImageCanvasSelectedLayerToolbarView', () => {
+  it('常规动作与末组分别分隔，导出紧邻删除且位于删除之前', () => {
+    const props = renderSelectedToolbar({
+      supportedActions: new Set(['quick-edit', 'download']),
+      downloadLabel: '导出',
+      extraActions: <button>引用</button>,
+      endActions: <button>删除素材</button>,
+    });
+    const toolbar = screen.getByRole('toolbar');
+    expect(
+      toolbar.querySelectorAll(
+        '.image-canvas-editor__floating-toolbar-divider',
+      ),
+    ).toHaveLength(2);
+    expect(
+      within(toolbar)
+        .getAllByRole('button')
+        .map((button) => button.textContent),
+    ).toEqual(['快速编辑', '引用', '导出', '删除素材']);
+    expect(
+      screen.getByRole('button', { name: '导出' }).nextElementSibling,
+    ).toBe(screen.getByRole('button', { name: '删除素材' }));
+    fireEvent.click(screen.getByRole('button', { name: '导出' }));
+    expect(props.onDownloadLayer).toHaveBeenCalledWith(props.selectedLayer);
+  });
+
+  it('任意动作组合都不生成相邻、开头或结尾分隔线', () => {
+    const actions: ImageCanvasSelectedToolbarAction[] = [
+      'quick-edit',
+      'crop-expand',
+      'redraw',
+      'download',
+    ];
+    for (const mediaType of ['image', 'audio', 'video'] as const) {
+      for (let mask = 0; mask < 1 << actions.length; mask += 1) {
+        for (const withExtraActions of [false, true]) {
+          renderSelectedToolbar({
+            selectedLayer: createLayer({ mediaType }),
+            supportedActions: new Set(
+              actions.filter((_, index) => (mask & (1 << index)) !== 0),
+            ),
+            extraActions: withExtraActions ? <button>信息</button> : null,
+          });
+          const toolbar = screen.getByRole('toolbar');
+          const divider = '.image-canvas-editor__floating-toolbar-divider';
+          expect(toolbar.querySelector(`${divider} + ${divider}`)).toBeNull();
+          expect(toolbar.firstElementChild?.matches(divider) ?? false).toBe(
+            false,
+          );
+          expect(toolbar.lastElementChild?.matches(divider) ?? false).toBe(
+            false,
+          );
+          cleanup();
+        }
+      }
+    }
+  });
+
+  it('空的条件动作和嵌套 Fragment 不产生空分组', () => {
+    renderSelectedToolbar({
+      supportedActions: new Set(['quick-edit', 'download']),
+      extraActions: (
+        <>
+          {null}
+          <>{false}</>
+        </>
+      ),
+      endActions: <>{null}</>,
+    });
+    const toolbar = screen.getByRole('toolbar');
+    expect(
+      toolbar.querySelectorAll(
+        '.image-canvas-editor__floating-toolbar-divider',
+      ),
+    ).toHaveLength(1);
+    expect(
+      within(toolbar)
+        .getAllByRole('button')
+        .map((button) => button.getAttribute('aria-label')),
+    ).toEqual(['快速编辑', '下载按钮']);
+    expect(toolbar.lastElementChild?.tagName).toBe('BUTTON');
+  });
+
+  it.each(['image', 'audio', 'video', 'image-sequence', undefined] as const)(
+    '%s 素材使用同一个带文字导出入口与回调',
+    (mediaType) => {
+      const props = renderSelectedToolbar({
+        selectedLayer: createLayer({ mediaType }),
+        supportedActions: new Set(['download']),
+        downloadLabel: '导出',
+        extraActions: <button>信息</button>,
+        endActions: <button>删除素材</button>,
+      });
+      const toolbar = screen.getByRole('toolbar');
+      expect(
+        within(toolbar)
+          .getAllByRole('button')
+          .map((button) => button.textContent),
+      ).toEqual(['信息', '导出', '删除素材']);
+      expect(
+        screen.getByRole('button', { name: '导出' }).nextElementSibling,
+      ).toBe(screen.getByRole('button', { name: '删除素材' }));
+      fireEvent.click(screen.getByRole('button', { name: '导出' }));
+      expect(props.onDownloadLayer).toHaveBeenCalledWith(props.selectedLayer);
+    },
+  );
+
+  it('宿主未放行下载时不展示导出入口', () => {
+    renderSelectedToolbar({
+      supportedActions: new Set(),
+      downloadLabel: '导出',
+      extraActions: <button>信息</button>,
+    });
+    expect(screen.queryByRole('button', { name: '导出' })).toBeNull();
+  });
+
   it('renders common layer actions in the Lovart toolbar order and forwards callbacks', () => {
     const props = renderSelectedToolbar();
     const toolbar = screen.getByRole('toolbar', { name: '图片工具栏' });
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
index bdb924146..6587025c0 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
@@ -10,7 +10,13 @@ import {
   Sparkles,
   WandSparkles,
 } from 'lucide-react';
-import type { CSSProperties, ReactNode } from 'react';
+import {
+  Children,
+  type CSSProperties,
+  Fragment,
+  isValidElement,
+  type ReactNode,
+} from 'react';
 
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
@@ -39,8 +45,12 @@ type ImageCanvasSelectedLayerToolbarViewProps = {
    * 让没有对应后端链路的画布宿主不必把「点了没反应」的按钮渲染出来。
    */
   supportedActions?: ReadonlySet<ImageCanvasSelectedToolbarAction> | null;
-  /** 宿主在工具条上追加的动作节点，渲染在下载按钮之前。 */
+  /** 宿主在工具条上追加的常规动作，渲染在下载按钮之前。 */
   extraActions?: ReactNode;
+  /** 工具栏末组动作，紧随下载按钮，与下载共用一个分组。 */
+  endActions?: ReactNode;
+  /** 提供文字时显示带文字的导出入口；缺省保持网页画布的图标按钮。 */
+  downloadLabel?: string;
   selectedLayer: CanvasLayer | null;
   selectedToolbarStyle: CSSProperties | null;
   onOpenQuickEditPanel: (layer: CanvasLayer) => void;
@@ -58,9 +68,20 @@ type ImageCanvasSelectedLayerToolbarViewProps = {
   onDownloadLayer: (layer: CanvasLayer) => void;
 };
 
+/** 条件动作通常放在 Fragment 中；空 Fragment 不能产生一个空分组。 */
+function hasToolbarActions(actions: ReactNode): boolean {
+  return Children.toArray(actions).some((action) =>
+    isValidElement<{ children?: ReactNode }>(action) && action.type === Fragment
+      ? hasToolbarActions(action.props.children)
+      : action !== '',
+  );
+}
+
 export function ImageCanvasSelectedLayerToolbarView({
   supportedActions = null,
   extraActions,
+  endActions,
+  downloadLabel,
   selectedLayer,
   selectedToolbarStyle,
   onOpenQuickEditPanel,
@@ -88,12 +109,35 @@ export function ImageCanvasSelectedLayerToolbarView({
     'redraw',
     canOpenRedrawPanel(selectedLayer),
   );
-  const extraActionDivider = extraActions ? (
+  const showDownload = isActionSupported('download', true);
+  const downloadAction = showDownload ? (
+    downloadLabel ? (
+      <CanvasChromeButton
+        className="image-canvas-editor__floating-toolbar-text-button"
+        label={downloadLabel}
+        title={downloadLabel}
+        icon={<Download className="h-4 w-4" />}
+        onClick={() => onDownloadLayer(selectedLayer)}
+      >
+        <span>{downloadLabel}</span>
+      </CanvasChromeButton>
+    ) : (
+      <EditorIconButton
+        label="下载按钮"
+        title="下载按钮"
+        icon={Download}
+        onClick={() => onDownloadLayer(selectedLayer)}
+      />
+    )
+  ) : null;
+  const hasExtraActions = hasToolbarActions(extraActions);
+  const hasEndActions = showDownload || hasToolbarActions(endActions);
+  const divider = (
     <span
       aria-hidden="true"
       className="image-canvas-editor__floating-toolbar-divider"
     />
-  ) : null;
+  );
 
   if (selectedLayer.mediaType === 'audio') {
     return (
@@ -115,16 +159,11 @@ export function ImageCanvasSelectedLayerToolbarView({
             <span>改造</span>
           </CanvasChromeButton>
         ) : null}
-        {extraActionDivider}
+        {canRedraw && hasExtraActions ? divider : null}
         {extraActions}
-        {isActionSupported('download', true) ? (
-          <EditorIconButton
-            label="下载按钮"
-            title="下载按钮"
-            icon={Download}
-            onClick={() => onDownloadLayer(selectedLayer)}
-          />
-        ) : null}
+        {(canRedraw || hasExtraActions) && hasEndActions ? divider : null}
+        {downloadAction}
+        {endActions}
       </div>
     );
   }
@@ -141,6 +180,25 @@ export function ImageCanvasSelectedLayerToolbarView({
     'character-animation',
     selectedLayer.assetKind === 'character',
   );
+  const showCropExpand =
+    canRasterEdit && isActionSupported('crop-expand', true);
+  const showRemoveBackground =
+    canRasterEdit && isActionSupported('remove-background', true);
+  const showPerfectPixel =
+    canRasterEdit && isActionSupported('perfect-pixel', true);
+  const showSplitIconSpritesheet =
+    selectedLayer.assetKind === 'icon-spritesheet' &&
+    isActionSupported('split-icon-spritesheet', true);
+  const showExtractUiDesign =
+    selectedLayer.assetKind === 'ui-design' &&
+    isActionSupported('extract-ui-design', true);
+  const hasEditingActions =
+    showCropExpand ||
+    showRemoveBackground ||
+    showPerfectPixel ||
+    showSplitIconSpritesheet ||
+    showExtractUiDesign ||
+    showCharacterAnimation;
 
   return (
     <div
@@ -151,23 +209,18 @@ export function ImageCanvasSelectedLayerToolbarView({
       onPointerDown={(event) => event.stopPropagation()}
     >
       {showQuickEdit ? (
-        <>
-          <CanvasChromeButton
-            className="image-canvas-editor__floating-toolbar-text-button"
-            label="快速编辑"
-            title="快速编辑"
-            icon={<Sparkles className="h-4 w-4" />}
-            onClick={() => onOpenQuickEditPanel(selectedLayer)}
-          >
-            <span>快速编辑</span>
-          </CanvasChromeButton>
-          <span
-            aria-hidden="true"
-            className="image-canvas-editor__floating-toolbar-divider"
-          />
-        </>
+        <CanvasChromeButton
+          className="image-canvas-editor__floating-toolbar-text-button"
+          label="快速编辑"
+          title="快速编辑"
+          icon={<Sparkles className="h-4 w-4" />}
+          onClick={() => onOpenQuickEditPanel(selectedLayer)}
+        >
+          <span>快速编辑</span>
+        </CanvasChromeButton>
       ) : null}
-      {canRasterEdit && isActionSupported('crop-expand', true) ? (
+      {showQuickEdit && hasEditingActions ? divider : null}
+      {showCropExpand ? (
         <EditorIconButton
           label="裁扩按钮"
           title="裁扩按钮"
@@ -175,7 +228,7 @@ export function ImageCanvasSelectedLayerToolbarView({
           onClick={() => onOpenCropExpandPanel(selectedLayer)}
         />
       ) : null}
-      {canRasterEdit && isActionSupported('remove-background', true) ? (
+      {showRemoveBackground ? (
         <EditorIconButton
           label="去除背景按钮"
           title="去除背景按钮"
@@ -183,7 +236,7 @@ export function ImageCanvasSelectedLayerToolbarView({
           onClick={() => onRemoveBackground(selectedLayer)}
         />
       ) : null}
-      {canRasterEdit && isActionSupported('perfect-pixel', true) ? (
+      {showPerfectPixel ? (
         <CanvasChromeButton
           className="image-canvas-editor__floating-toolbar-text-button"
           // 中文注释：保存态名称不能直接用「素材类型保存中」——icon-spritesheet 图层上
@@ -236,8 +289,7 @@ export function ImageCanvasSelectedLayerToolbarView({
           </span>
         </CanvasChromeButton>
       ) : null}
-      {selectedLayer.assetKind === 'icon-spritesheet' &&
-      isActionSupported('split-icon-spritesheet', true) ? (
+      {showSplitIconSpritesheet ? (
         <CanvasChromeButton
           className="image-canvas-editor__floating-toolbar-text-button"
           label={
@@ -274,8 +326,7 @@ export function ImageCanvasSelectedLayerToolbarView({
           </span>
         </CanvasChromeButton>
       ) : null}
-      {selectedLayer.assetKind === 'ui-design' &&
-      isActionSupported('extract-ui-design', true) ? (
+      {showExtractUiDesign ? (
         <CanvasChromeButton
           className="image-canvas-editor__floating-toolbar-text-button"
           label="提取素材"
@@ -299,10 +350,7 @@ export function ImageCanvasSelectedLayerToolbarView({
       ) : null}
       {canRedraw ? (
         <>
-          <span
-            aria-hidden="true"
-            className="image-canvas-editor__floating-toolbar-divider"
-          />
+          {showQuickEdit || hasEditingActions ? divider : null}
           <CanvasChromeButton
             className="image-canvas-editor__floating-toolbar-text-button"
             label="改造"
@@ -314,16 +362,16 @@ export function ImageCanvasSelectedLayerToolbarView({
           </CanvasChromeButton>
         </>
       ) : null}
-      {extraActionDivider}
+      {(showQuickEdit || hasEditingActions || canRedraw) && hasExtraActions
+        ? divider
+        : null}
       {extraActions}
-      {isActionSupported('download', true) ? (
-        <EditorIconButton
-          label="下载按钮"
-          title="下载按钮"
-          icon={Download}
-          onClick={() => onDownloadLayer(selectedLayer)}
-        />
-      ) : null}
+      {(showQuickEdit || hasEditingActions || canRedraw || hasExtraActions) &&
+      hasEndActions
+        ? divider
+        : null}
+      {downloadAction}
+      {endActions}
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index 24c0918e4..322c9e7ea 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5090,18 +5090,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   height: 1.125rem;
 }
 
-/* 紧挨着的两条分隔线只保留一条。
-   共享工具条会在「快速编辑」之后输出一条（`ImageCanvasSelectedLayerToolbarView.tsx`
-   的 showQuickEdit 分支），并为 `extraActions` 再自动生成一条前置分隔线
-   （同文件 `extraActionDivider`）。AGC 资源卡恰好是"快速编辑可用 + 中间那些动作未接通
-   不渲染"的组合，于是这两条直接相邻，用户看到两条竖线。两条相邻的分隔线在视觉上
-   本来就没有意义，所以在样式层去重：不改任何 JSX 结构，对两端（美术画布与资源画布）
-   都成立，也不会隐藏任何真正起分隔作用的那一条。 */
-.image-canvas-editor__floating-toolbar-divider
-  + .image-canvas-editor__floating-toolbar-divider {
-  display: none;
-}
-
 .image-canvas-editor__bottom-toolbar-option-wrap {
   display: inline-flex;
 }