From ac0c804da8fa8f19688c5742ef3244afb961eb4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 20 Jul 2026 17:02:24 +0800
Subject: [PATCH 01/13] right click copy/dowload option

---
 .../【编辑器】画布Agent对话面板-2026-07-03.md |   6 +-
 .../AttachmentChip.tsx                        |  19 +-
 .../MessageBubble.test.tsx                    | 179 ++++++++++++++-
 .../EditorAgentConversation/MessageBubble.tsx | 138 +++++++-----
 .../MessageBubbleRightClickMenu.tsx           | 194 ++++++++++++++++
 .../EditorAgentConversation/ToolCallView.tsx  |  39 ++++
 .../EditorAgentConversation/common.ts         |  24 ++
 .../useRightClickMenu.ts                      | 208 ++++++++++++++++++
 8 files changed, 753 insertions(+), 54 deletions(-)
 create mode 100644 src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
 create mode 100644 src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts

diff --git a/docs/【编辑器】画布Agent对话面板-2026-07-03.md b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
index bbb9f3286..3f3262153 100644
--- a/docs/【编辑器】画布Agent对话面板-2026-07-03.md
+++ b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
@@ -1,6 +1,6 @@
 # 画布Agent对话面板
 
-日期：`2026-07-16`
+日期：`2026-07-20`
 
 ## 定位与边界
 
@@ -114,11 +114,12 @@
 5. 生成中的进行中动画；
 6. 错误气泡（失败/余额不足，带原因）；
 7. 普通消息请求等待期间禁用发送按钮，不提供客户端停止操作；前端持续等待后端响应，避免后端已持久化消息但前端中断请求后产生会话状态错位。
+8. 桌面端右键消息正文可复制该条可见文本；右键消息附件或生成结果可下载素材，图片额外支持复制图片本体。右键动作由消息气泡的 `useRightClickMenu` 内部执行，不向上层暴露消息文本、素材地址或私有对象键。
 
 不做（明确排除，防止后人补齐）：
 
 - 点赞/点踩反馈按钮；
-- 消息复制、分享/导出对话；
+- 分享/导出整段对话；
 - Agent 模式切换下拉（固定单一 Agent）；
 - 语音输入、@引用、多 Agent 协作；
 - Lovart 的积分/加速档位显示（泥点扣费只在生成动作上体现）。
@@ -156,3 +157,4 @@
 - 发送消息时先本地追加用户消息，再应用 JSON 响应中的 `deltaMessages`；请求等待期间发送按钮保持禁用，前端不主动中断当前回合。
 - Agent 消息内生成结果缩略图只用于预览，不显示名称，也不点击跳转图层；轮询到任务终态并完成会话懒回填后统一刷新工程快照和素材库。
 - 对话内容可被用户选中复制；用户从输入框或对话内容点击回画布图层 / 生成器时，焦点应回到画布对象，Backspace / Delete 等画布快捷键继续生效。
+- 对话正文右键菜单只复制当前气泡展示的完整文本，隐藏的内部 system 文本不得进入菜单；素材右键菜单优先于正文菜单，私有素材继续通过既有读取链路换签或代理下载，不复制会过期的临时链接。
diff --git a/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx b/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx
index 81b327f57..b5596b7a5 100644
--- a/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx
+++ b/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx
@@ -3,16 +3,33 @@ import { Image as ImageIcon, X } from 'lucide-react';
 import type { EditorAgentAttachmentRef } from '@/packages/shared/src/contracts';
 import { ResolvedAssetImage } from '@/src/components/ResolvedAssetImage.tsx';
 
+import type { RightClickMenuHandler } from './common.ts';
+
 function AttachmentChip({
   attachment,
   onRemove,
+  onRightClickMenu,
 }: {
   attachment: EditorAgentAttachmentRef;
   onRemove?: () => void;
+  onRightClickMenu?: RightClickMenuHandler;
 }) {
   const label = attachment.label?.trim() || attachment.referenceId;
   return (
-    <span className="group relative inline-flex max-w-full items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs text-slate-600 shadow-sm">
+    <span
+      className="group relative inline-flex max-w-full items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs text-slate-600 shadow-sm"
+      onContextMenu={
+        onRightClickMenu
+          ? (event) =>
+              onRightClickMenu(event, {
+                mediaType: 'image',
+                source: attachment.imageSrc,
+                objectKey: attachment.objectKey,
+                suggestedFileName: label,
+              })
+          : undefined
+      }
+    >
       <ImageIcon className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
       <span className="truncate">{label}</span>
       {onRemove ? (
diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
index 257892551..6c2f23342 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
@@ -1,12 +1,25 @@
 /* @vitest-environment jsdom */
 
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { EditorAgentMessage } from '@/packages/shared/src/contracts';
+import { readAssetBytes } from '@/src/services/assetReadUrlService.ts';
+import { copyTextToClipboard } from '@/src/services/clipboard.ts';
 
 import { MessageBubble } from './MessageBubble.tsx';
 
+vi.mock('@/src/services/assetReadUrlService.ts', () => ({
+  getSignedAssetReadUrl: vi.fn().mockResolvedValue('https://asset.test/signed'),
+  readAssetBytes: vi.fn(),
+  resolveAssetReadUrl: vi.fn().mockResolvedValue('https://asset.test/signed'),
+  shouldResolveAssetReadUrl: vi.fn(() => false),
+}));
+
+vi.mock('@/src/services/clipboard.ts', () => ({
+  copyTextToClipboard: vi.fn(),
+}));
+
 function renderMessage(message: EditorAgentMessage) {
   return render(
     <MessageBubble
@@ -19,6 +32,11 @@ function renderMessage(message: EditorAgentMessage) {
 }
 
 describe('MessageBubble', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(copyTextToClipboard).mockResolvedValue(true);
+  });
+
   it('shows prefixed system errors as red Agent errors without the wire prefix', () => {
     renderMessage({
       id: 2,
@@ -50,4 +68,161 @@ describe('MessageBubble', () => {
 
     expect(container.childElementCount).toBe(0);
   });
+
+  it('copies the complete visible message and only exposes the enum action', async () => {
+    renderMessage({
+      id: 4,
+      role: 'assistant',
+      text: '第一行\n第二行',
+      attachments: [],
+      toolCall: null,
+      createdAt: '2026-07-20T00:00:00Z',
+    });
+
+    fireEvent.contextMenu(screen.getByLabelText('Agent消息'), {
+      clientX: 30,
+      clientY: 40,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '复制文本' }));
+
+    await waitFor(() =>
+      expect(copyTextToClipboard).toHaveBeenCalledWith('第一行\n第二行'),
+    );
+    expect(
+      await screen.findByRole('menuitem', { name: '已复制' }),
+    ).toBeTruthy();
+  });
+
+  it('copies an attached WebP as PNG without opening the message text menu', async () => {
+    const clipboardWrite = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { write: clipboardWrite },
+    });
+    const ClipboardItemMock = vi.fn(function (
+      this: { items: Record<string, Blob> },
+      items: Record<string, Blob>,
+    ) {
+      this.items = items;
+    });
+    Object.defineProperty(globalThis, 'ClipboardItem', {
+      configurable: true,
+      value: ClipboardItemMock,
+    });
+    const bitmapClose = vi.fn();
+    Object.defineProperty(globalThis, 'createImageBitmap', {
+      configurable: true,
+      value: vi.fn().mockResolvedValue({
+        width: 16,
+        height: 9,
+        close: bitmapClose,
+      }),
+    });
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+      drawImage: vi.fn(),
+    } as unknown as CanvasRenderingContext2D);
+    vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(
+      (callback) => callback(new Blob(['png'], { type: 'image/png' })),
+    );
+    vi.mocked(readAssetBytes).mockResolvedValue({
+      blob: vi
+        .fn()
+        .mockResolvedValue(new Blob(['webp'], { type: 'image/webp' })),
+    } as unknown as Response);
+    const { container } = renderMessage({
+      id: 5,
+      role: 'user',
+      text: '参考这张图',
+      attachments: [
+        {
+          source: 'canvas_resource',
+          referenceId: 'resource-1',
+          objectKey: 'editor/private.webp',
+          imageSrc: '/generated-editor-images/private.webp',
+          label: '参考图.webp',
+        },
+      ],
+      toolCall: null,
+      createdAt: '2026-07-20T00:00:00Z',
+    });
+
+    fireEvent.contextMenu(container.querySelector('.group')!, {
+      clientX: 30,
+      clientY: 40,
+    });
+
+    expect(screen.getByRole('menu', { name: '消息素材右键菜单' })).toBeTruthy();
+    expect(screen.queryByRole('menuitem', { name: '复制文本' })).toBeNull();
+    fireEvent.click(screen.getByRole('menuitem', { name: '复制图片' }));
+
+    await waitFor(() => expect(clipboardWrite).toHaveBeenCalledTimes(1));
+    expect(readAssetBytes).toHaveBeenCalledWith(
+      '/generated-editor-images/private.webp',
+      { objectKey: 'editor/private.webp' },
+    );
+    expect(ClipboardItemMock).toHaveBeenCalledWith({
+      'image/png': expect.any(Blob),
+    });
+    expect(bitmapClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('downloads generated video with the inferred extension', async () => {
+    const createObjectURL = vi.fn(() => 'blob:agent-video');
+    const revokeObjectURL = vi.fn();
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: createObjectURL,
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: revokeObjectURL,
+    });
+    const anchorClick = vi
+      .spyOn(HTMLAnchorElement.prototype, 'click')
+      .mockImplementation(() => undefined);
+    vi.mocked(readAssetBytes).mockResolvedValue({
+      blob: vi
+        .fn()
+        .mockResolvedValue(new Blob(['video'], { type: 'video/mp4' })),
+    } as unknown as Response);
+    const { container } = renderMessage({
+      id: 6,
+      role: 'system',
+      text: 'internal tool result',
+      attachments: [],
+      toolCall: {
+        toolName: 'generate_video',
+        status: 'completed',
+        args: {},
+        displayArgs: {
+          stringArgs: [],
+          imageArgs: [],
+          extras: { priceMudPoints: 1 },
+        },
+        images: [],
+        videos: [
+          {
+            resourceId: 'video-1',
+            objectKey: 'editor/video.mp4',
+            videoSrc: '/generated-editor-videos/video.mp4',
+          },
+        ],
+        audios: [],
+      },
+      createdAt: '2026-07-20T00:00:00Z',
+    });
+    await waitFor(() => expect(container.querySelector('video')).toBeTruthy());
+    const video = container.querySelector('video');
+
+    fireEvent.contextMenu(video!.parentElement!, {
+      clientX: 30,
+      clientY: 40,
+    });
+    expect(screen.queryByRole('menuitem', { name: '复制图片' })).toBeNull();
+    fireEvent.click(screen.getByRole('menuitem', { name: '下载视频' }));
+
+    await waitFor(() => expect(anchorClick).toHaveBeenCalledTimes(1));
+    expect(createObjectURL).toHaveBeenCalledWith(expect.any(Blob));
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:agent-video');
+  });
 });
diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx
index 91e43eb52..e62e4796b 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx
@@ -7,6 +7,9 @@ import { attachmentKey } from '@/src/components/image-editor/EditorAgentConversa
 import { PendingToolCall } from '@/src/components/image-editor/EditorAgentConversation/PendingToolCall.tsx';
 import ToolCallView from '@/src/components/image-editor/EditorAgentConversation/ToolCallView.tsx';
 
+import { MessageBubbleRightClickMenu } from './MessageBubbleRightClickMenu.tsx';
+import { useRightClickMenu } from './useRightClickMenu.ts';
+
 function messageRoleLabel(role: EditorAgentMessage['role']) {
   if (role === 'user') {
     return '你';
@@ -54,6 +57,12 @@ export function MessageBubble({
   onCancelToolCall,
   onJobCompleted,
 }: MessageBubbleProps) {
+  const {
+    rightClickMenu,
+    openRightClickMenu,
+    closeRightClickMenu,
+    runRightClickAction,
+  } = useRightClickMenu();
   const systemErrorText =
     message.role === 'system' &&
     !message.toolCall &&
@@ -61,7 +70,16 @@ export function MessageBubble({
       ? message.text.slice(EDITOR_AGENT_ERROR_MESSAGE_PREFIX.length)
       : null;
 
-  if (message.role === 'system' && !message.toolCall && systemErrorText === null) {
+  const isUser = message.role === 'user';
+  const isSystem = message.role === 'system';
+  const isSystemError = systemErrorText !== null;
+  const visibleText = systemErrorText ?? (!isSystem ? message.text : '');
+
+  if (
+    message.role === 'system' &&
+    !message.toolCall &&
+    systemErrorText === null
+  ) {
     return null;
   }
   if (
@@ -81,56 +99,78 @@ export function MessageBubble({
     );
   }
 
-  const isUser = message.role === 'user';
-  const isSystem = message.role === 'system';
-  const isSystemError = systemErrorText !== null;
-
   return (
-    <article
-      className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}
-      aria-label={
-        isSystemError
-          ? 'Agent错误'
-          : isSystem
-            ? 'Agent操作'
-            : `${messageRoleLabel(message.role)}消息`
-      }
-    >
-      <div
-        className={
-          isSystem && !isSystemError
-            ? 'max-w-[86%]'
-            : `max-w-[86%] rounded-3xl px-3.5 py-3 text-sm leading-6 shadow-sm ${
-                isUser
-                  ? 'bg-slate-900 text-white'
-                  : isSystemError || message.toolCall?.status === 'failed'
-                    ? 'border border-red-200 bg-red-50 text-red-700'
-                    : 'border border-slate-200 bg-white text-slate-700'
-              }`
+    <>
+      <article
+        className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}
+        aria-label={
+          isSystemError
+            ? 'Agent错误'
+            : isSystem
+              ? 'Agent操作'
+              : `${messageRoleLabel(message.role)}消息`
+        }
+        onContextMenu={
+          visibleText.trim()
+            ? (event) =>
+                openRightClickMenu(event, { kind: 'text', text: visibleText })
+            : undefined
         }
       >
-        {(!isSystem || isSystemError) && (systemErrorText ?? message.text) ? (
-          <div className="whitespace-pre-wrap break-words">
-            {systemErrorText ?? message.text}
-          </div>
-        ) : null}
-        {!isSystem && message.attachments.length ? (
-          <div className="mt-2 flex flex-wrap gap-1.5">
-            {message.attachments.map((attachment) => (
-              <AttachmentChip
-                key={attachmentKey(attachment)}
-                attachment={attachment}
-              />
-            ))}
-          </div>
-        ) : null}
-        {message.toolCall ? (
-          <ToolCallView
-            toolCall={message.toolCall}
-            onJobCompleted={onJobCompleted}
-          />
-        ) : null}
-      </div>
-    </article>
+        <div
+          className={
+            isSystem && !isSystemError
+              ? 'max-w-[86%]'
+              : `max-w-[86%] rounded-3xl px-3.5 py-3 text-sm leading-6 shadow-sm ${
+                  isUser
+                    ? 'bg-slate-900 text-white'
+                    : isSystemError || message.toolCall?.status === 'failed'
+                      ? 'border border-red-200 bg-red-50 text-red-700'
+                      : 'border border-slate-200 bg-white text-slate-700'
+                }`
+          }
+        >
+          {(!isSystem || isSystemError) && (systemErrorText ?? message.text) ? (
+            <div className="whitespace-pre-wrap break-words">
+              {systemErrorText ?? message.text}
+            </div>
+          ) : null}
+          {!isSystem && message.attachments.length ? (
+            <div className="mt-2 flex flex-wrap gap-1.5">
+              {message.attachments.map((attachment) => (
+                <AttachmentChip
+                  key={attachmentKey(attachment)}
+                  attachment={attachment}
+                  onRightClickMenu={(event, asset) =>
+                    openRightClickMenu(event, { kind: 'asset', asset })
+                  }
+                />
+              ))}
+            </div>
+          ) : null}
+          {message.toolCall ? (
+            <ToolCallView
+              toolCall={message.toolCall}
+              onJobCompleted={onJobCompleted}
+              onRightClickMenu={(event, asset) =>
+                openRightClickMenu(event, { kind: 'asset', asset })
+              }
+            />
+          ) : null}
+        </div>
+      </article>
+      {rightClickMenu ? (
+        <MessageBubbleRightClickMenu
+          x={rightClickMenu.x}
+          y={rightClickMenu.y}
+          target={rightClickMenu.target}
+          pendingAction={rightClickMenu.pendingAction}
+          resultAction={rightClickMenu.resultAction}
+          result={rightClickMenu.result}
+          onAction={(action) => void runRightClickAction(action)}
+          onClose={closeRightClickMenu}
+        />
+      ) : null}
+    </>
   );
 }
diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
new file mode 100644
index 000000000..2c73b2049
--- /dev/null
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
@@ -0,0 +1,194 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import {
+  type EditorAgentContextAsset,
+  EditorAgentRightClickAction,
+  type RightClickMenuTarget,
+} from './common.ts';
+
+type MessageBubbleRightClickMenuProps = {
+  x: number;
+  y: number;
+  target: RightClickMenuTarget;
+  pendingAction: EditorAgentRightClickAction | null;
+  resultAction: EditorAgentRightClickAction | null;
+  result: 'success' | 'error' | null;
+  onAction: (action: EditorAgentRightClickAction) => void;
+  onClose: () => void;
+};
+
+const VIEWPORT_MARGIN = 8;
+
+function actionLabel({
+  action,
+  idleLabel,
+  pendingAction,
+  resultAction,
+  result,
+}: {
+  action: EditorAgentRightClickAction;
+  idleLabel: string;
+  pendingAction: EditorAgentRightClickAction | null;
+  resultAction: EditorAgentRightClickAction | null;
+  result: 'success' | 'error' | null;
+}) {
+  if (pendingAction === action) {
+    return action === EditorAgentRightClickAction.DownloadAsset
+      ? '下载中'
+      : '复制中';
+  }
+  if (resultAction !== action) {
+    return idleLabel;
+  }
+  if (result === 'success') {
+    return action === EditorAgentRightClickAction.DownloadAsset
+      ? '已下载'
+      : '已复制';
+  }
+  if (result === 'error') {
+    return action === EditorAgentRightClickAction.DownloadAsset
+      ? '下载失败'
+      : '复制失败';
+  }
+  return idleLabel;
+}
+
+function assetDownloadLabel(asset: EditorAgentContextAsset) {
+  return `下载${
+    asset.mediaType === 'image'
+      ? '图片'
+      : asset.mediaType === 'video'
+        ? '视频'
+        : '音频'
+  }`;
+}
+
+export function MessageBubbleRightClickMenu({
+  x,
+  y,
+  target,
+  pendingAction,
+  resultAction,
+  result,
+  onAction,
+  onClose,
+}: MessageBubbleRightClickMenuProps) {
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const [position, setPosition] = useState<{ x: number; y: number } | null>(
+    null,
+  );
+
+  useLayoutEffect(() => {
+    const menu = menuRef.current;
+    if (!menu || typeof window === 'undefined') {
+      return;
+    }
+    const rect = menu.getBoundingClientRect();
+    setPosition({
+      x: Math.min(
+        Math.max(x, VIEWPORT_MARGIN),
+        Math.max(
+          VIEWPORT_MARGIN,
+          window.innerWidth - rect.width - VIEWPORT_MARGIN,
+        ),
+      ),
+      y: Math.min(
+        Math.max(y, VIEWPORT_MARGIN),
+        Math.max(
+          VIEWPORT_MARGIN,
+          window.innerHeight - rect.height - VIEWPORT_MARGIN,
+        ),
+      ),
+    });
+  }, [target.kind, x, y]);
+
+  useEffect(() => {
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('pointerdown', handlePointerDown);
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('scroll', onClose, true);
+    window.addEventListener('resize', onClose);
+    return () => {
+      window.removeEventListener('pointerdown', handlePointerDown);
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('scroll', onClose, true);
+      window.removeEventListener('resize', onClose);
+    };
+  }, [onClose]);
+
+  if (typeof document === 'undefined') {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      className="image-canvas-editor__context-menu"
+      role="menu"
+      aria-label={target.kind === 'text' ? '消息右键菜单' : '消息素材右键菜单'}
+      style={{ left: position?.x ?? x, top: position?.y ?? y }}
+      onContextMenu={(event) => event.preventDefault()}
+    >
+      {target.kind === 'text' ? (
+        <button
+          type="button"
+          role="menuitem"
+          disabled={pendingAction !== null}
+          onClick={() => onAction(EditorAgentRightClickAction.CopyText)}
+        >
+          {actionLabel({
+            action: EditorAgentRightClickAction.CopyText,
+            idleLabel: '复制文本',
+            pendingAction,
+            resultAction,
+            result,
+          })}
+        </button>
+      ) : (
+        <>
+          {target.asset.mediaType === 'image' ? (
+            <button
+              type="button"
+              role="menuitem"
+              disabled={pendingAction !== null}
+              onClick={() => onAction(EditorAgentRightClickAction.CopyImage)}
+            >
+              {actionLabel({
+                action: EditorAgentRightClickAction.CopyImage,
+                idleLabel: '复制图片',
+                pendingAction,
+                resultAction,
+                result,
+              })}
+            </button>
+          ) : null}
+          <button
+            type="button"
+            role="menuitem"
+            disabled={pendingAction !== null}
+            onClick={() => onAction(EditorAgentRightClickAction.DownloadAsset)}
+          >
+            {actionLabel({
+              action: EditorAgentRightClickAction.DownloadAsset,
+              idleLabel: assetDownloadLabel(target.asset),
+              pendingAction,
+              resultAction,
+              result,
+            })}
+          </button>
+        </>
+      )}
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/components/image-editor/EditorAgentConversation/ToolCallView.tsx b/src/components/image-editor/EditorAgentConversation/ToolCallView.tsx
index 0c39c9749..74ba190cc 100644
--- a/src/components/image-editor/EditorAgentConversation/ToolCallView.tsx
+++ b/src/components/image-editor/EditorAgentConversation/ToolCallView.tsx
@@ -8,12 +8,16 @@ import { ResolvedAssetImage } from '@/src/components/ResolvedAssetImage.tsx';
 import { ResolvedAssetVideo } from '@/src/components/ResolvedAssetVideo.tsx';
 import { getExternalGenerationJobStatus } from '@/src/services/external-generation';
 
+import type { RightClickMenuHandler } from './common.ts';
+
 function ToolCallView({
   toolCall,
   onJobCompleted,
+  onRightClickMenu,
 }: {
   toolCall: EditorAgentToolCall;
   onJobCompleted?: () => void;
+  onRightClickMenu?: RightClickMenuHandler;
 }) {
   const videos = toolCall.videos ?? [];
   const audios = toolCall.audios ?? [];
@@ -69,6 +73,8 @@ function ToolCallView({
       disposed = true;
       if (timeoutId) clearTimeout(timeoutId);
     };
+    // 轮询只允许新的 job/status source 重置；其余值通过当前 source 对应的闭包读取。
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialDisplayError, initialDisplayStatus, jobId, shouldPoll]);
   const isCancelled = displayStatus === 'cancelled';
   const isCompleted = displayStatus === 'completed';
@@ -107,6 +113,17 @@ function ToolCallView({
             <div
               key={`${toolCall.toolName}-${image.resourceId ?? index}`}
               className="overflow-hidden rounded-xl border border-slate-200 bg-slate-100"
+              onContextMenu={
+                onRightClickMenu
+                  ? (event) =>
+                      onRightClickMenu(event, {
+                        mediaType: 'image',
+                        source: image.imageSrc,
+                        objectKey: image.objectKey,
+                        suggestedFileName: `Agent生成图片-${index + 1}`,
+                      })
+                  : undefined
+              }
             >
               <ResolvedAssetImage
                 src={image.thumbnailSrc ?? image.imageSrc}
@@ -125,6 +142,17 @@ function ToolCallView({
             <div
               key={`${toolCall.toolName}-${video.resourceId ?? video.objectKey ?? index}`}
               className="overflow-hidden rounded-xl border border-slate-200 bg-slate-100"
+              onContextMenu={
+                onRightClickMenu
+                  ? (event) =>
+                      onRightClickMenu(event, {
+                        mediaType: 'video',
+                        source: video.videoSrc,
+                        objectKey: video.objectKey,
+                        suggestedFileName: `Agent生成视频-${index + 1}`,
+                      })
+                  : undefined
+              }
             >
               <ResolvedAssetVideo
                 src={video.videoSrc}
@@ -148,6 +176,17 @@ function ToolCallView({
             <div
               key={`${toolCall.toolName}-${audio.resourceId ?? audio.objectKey ?? index}`}
               className="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 p-2"
+              onContextMenu={
+                onRightClickMenu
+                  ? (event) =>
+                      onRightClickMenu(event, {
+                        mediaType: 'audio',
+                        source: audio.audioSrc,
+                        objectKey: audio.objectKey,
+                        suggestedFileName: `Agent生成音频-${index + 1}`,
+                      })
+                  : undefined
+              }
             >
               <Volume2
                 className="h-4 w-4 shrink-0 text-slate-500"
diff --git a/src/components/image-editor/EditorAgentConversation/common.ts b/src/components/image-editor/EditorAgentConversation/common.ts
index 05f675a8d..4e3628e89 100644
--- a/src/components/image-editor/EditorAgentConversation/common.ts
+++ b/src/components/image-editor/EditorAgentConversation/common.ts
@@ -1,5 +1,29 @@
+import type { MouseEvent as ReactMouseEvent } from 'react';
+
 import type { EditorAgentAttachmentRef } from '@/packages/shared/src/contracts';
 
+export enum EditorAgentRightClickAction {
+  CopyText = 'copy_text',
+  CopyImage = 'copy_image',
+  DownloadAsset = 'download_asset',
+}
+
+export type EditorAgentContextAsset = {
+  mediaType: 'image' | 'video' | 'audio';
+  source: string;
+  objectKey?: string | null;
+  suggestedFileName: string;
+};
+
+export type RightClickMenuTarget =
+  | { kind: 'text'; text: string }
+  | { kind: 'asset'; asset: EditorAgentContextAsset };
+
+export type RightClickMenuHandler = (
+  event: ReactMouseEvent<HTMLElement>,
+  asset: EditorAgentContextAsset,
+) => void;
+
 export function attachmentKey(attachment: EditorAgentAttachmentRef) {
   return `${attachment.source}:${attachment.referenceId}`;
 }
diff --git a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
new file mode 100644
index 000000000..9f3be4b24
--- /dev/null
+++ b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
@@ -0,0 +1,208 @@
+import {
+  type MouseEvent as ReactMouseEvent,
+  useCallback,
+  useState,
+} from 'react';
+
+import { readAssetBytes } from '@/src/services/assetReadUrlService.ts';
+import { copyTextToClipboard } from '@/src/services/clipboard.ts';
+
+import {
+  type EditorAgentContextAsset,
+  EditorAgentRightClickAction,
+  type RightClickMenuTarget,
+} from './common.ts';
+
+type RightClickMenuState = {
+  x: number;
+  y: number;
+  target: RightClickMenuTarget;
+  pendingAction: EditorAgentRightClickAction | null;
+  resultAction: EditorAgentRightClickAction | null;
+  result: 'success' | 'error' | null;
+};
+
+const MIME_FILE_EXTENSIONS: Record<string, string> = {
+  'image/png': 'png',
+  'image/jpeg': 'jpg',
+  'image/webp': 'webp',
+  'image/gif': 'gif',
+  'video/mp4': 'mp4',
+  'video/webm': 'webm',
+  'audio/mpeg': 'mp3',
+  'audio/mp4': 'm4a',
+  'audio/ogg': 'ogg',
+  'audio/wav': 'wav',
+};
+
+function sanitizeDownloadName(value: string, mimeType: string) {
+  const normalized = value
+    .trim()
+    .replace(/[<>:"/\\|?*]/gu, '-')
+    .replace(/\p{Cc}/gu, '-')
+    .replace(/[. ]+$/u, '')
+    .slice(0, 100);
+  const baseName = normalized || 'Agent素材';
+  if (/\.[a-z0-9]{2,5}$/iu.test(baseName)) {
+    return baseName;
+  }
+  const extension = MIME_FILE_EXTENSIONS[mimeType.toLowerCase()] ?? '';
+  return extension ? `${baseName}.${extension}` : baseName;
+}
+
+async function convertImageBlobToPng(blob: Blob) {
+  if (blob.type.toLowerCase() === 'image/png') {
+    return blob;
+  }
+  if (
+    typeof createImageBitmap !== 'function' ||
+    typeof document === 'undefined'
+  ) {
+    throw new Error('当前浏览器不支持复制此图片格式');
+  }
+  const bitmap = await createImageBitmap(blob);
+  try {
+    const canvas = document.createElement('canvas');
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const context = canvas.getContext('2d');
+    if (!context) {
+      throw new Error('图片转换失败');
+    }
+    context.drawImage(bitmap, 0, 0);
+    return await new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob((pngBlob) => {
+        if (pngBlob) {
+          resolve(pngBlob);
+        } else {
+          reject(new Error('图片转换失败'));
+        }
+      }, 'image/png');
+    });
+  } finally {
+    bitmap.close();
+  }
+}
+
+async function copyAssetImage(asset: EditorAgentContextAsset) {
+  if (
+    typeof navigator === 'undefined' ||
+    typeof navigator.clipboard?.write !== 'function' ||
+    typeof ClipboardItem === 'undefined'
+  ) {
+    return false;
+  }
+  try {
+    const response = await readAssetBytes(asset.source, {
+      objectKey: asset.objectKey,
+    });
+    const pngBlob = await convertImageBlobToPng(await response.blob());
+    await navigator.clipboard.write([
+      new ClipboardItem({ 'image/png': pngBlob }),
+    ]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function downloadAsset(asset: EditorAgentContextAsset) {
+  if (
+    typeof document === 'undefined' ||
+    typeof URL.createObjectURL !== 'function'
+  ) {
+    return false;
+  }
+  try {
+    const response = await readAssetBytes(asset.source, {
+      objectKey: asset.objectKey,
+    });
+    const blob = await response.blob();
+    const downloadUrl = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = downloadUrl;
+    link.download = sanitizeDownloadName(asset.suggestedFileName, blob.type);
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(downloadUrl);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function useRightClickMenu() {
+  const [rightClickMenu, setRightClickMenu] =
+    useState<RightClickMenuState | null>(null);
+
+  const closeRightClickMenu = useCallback(() => {
+    setRightClickMenu(null);
+  }, []);
+
+  const openRightClickMenu = useCallback(
+    (event: ReactMouseEvent<HTMLElement>, target: RightClickMenuTarget) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setRightClickMenu({
+        x: event.clientX,
+        y: event.clientY,
+        target,
+        pendingAction: null,
+        resultAction: null,
+        result: null,
+      });
+    },
+    [],
+  );
+
+  const runRightClickAction = useCallback(
+    async (action: EditorAgentRightClickAction) => {
+      if (!rightClickMenu || rightClickMenu.pendingAction) {
+        return;
+      }
+      const target = rightClickMenu.target;
+      setRightClickMenu((current) =>
+        current?.target === target
+          ? {
+              ...current,
+              pendingAction: action,
+              resultAction: null,
+              result: null,
+            }
+          : current,
+      );
+      const succeeded =
+        action === EditorAgentRightClickAction.CopyText &&
+        target.kind === 'text'
+          ? await copyTextToClipboard(target.text)
+          : action === EditorAgentRightClickAction.CopyImage &&
+              target.kind === 'asset' &&
+              target.asset.mediaType === 'image'
+            ? await copyAssetImage(target.asset)
+            : action === EditorAgentRightClickAction.DownloadAsset &&
+                target.kind === 'asset'
+              ? await downloadAsset(target.asset)
+              : false;
+      setRightClickMenu((current) =>
+        current?.target === target && current.pendingAction === action
+          ? {
+              ...current,
+              pendingAction: null,
+              resultAction: action,
+              result: succeeded ? 'success' : 'error',
+            }
+          : current,
+      );
+    },
+    [rightClickMenu],
+  );
+
+  return {
+    rightClickMenu,
+    openRightClickMenu,
+    closeRightClickMenu,
+    runRightClickAction,
+  };
+}
-- 
2.52.0


From 93296a3e2fda06b2bc540dc4d6851306545b46ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 20 Jul 2026 17:25:10 +0800
Subject: [PATCH 02/13] fix: Raise the portaled menu above the Agent panel

---
 .../EditorAgentConversation/MessageBubble.test.tsx          | 3 +++
 .../EditorAgentConversation/MessageBubbleRightClickMenu.tsx | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
index 6c2f23342..af52065ff 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
@@ -83,6 +83,9 @@ describe('MessageBubble', () => {
       clientX: 30,
       clientY: 40,
     });
+    expect(
+      screen.getByRole('menu', { name: '消息右键菜单' }).style.zIndex,
+    ).toBe('60');
     fireEvent.click(screen.getByRole('menuitem', { name: '复制文本' }));
 
     await waitFor(() =>
diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
index 2c73b2049..9857dc1b5 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
@@ -136,7 +136,11 @@ export function MessageBubbleRightClickMenu({
       className="image-canvas-editor__context-menu"
       role="menu"
       aria-label={target.kind === 'text' ? '消息右键菜单' : '消息素材右键菜单'}
-      style={{ left: position?.x ?? x, top: position?.y ?? y }}
+      style={{
+        left: position?.x ?? x,
+        top: position?.y ?? y,
+        zIndex: 60,
+      }}
       onContextMenu={(event) => event.preventDefault()}
     >
       {target.kind === 'text' ? (
-- 
2.52.0


From f86df0c12a558f4875e576c99db646b48411c165 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 20 Jul 2026 17:25:52 +0800
Subject: [PATCH 03/13] fix: Keep the clipboard write within user activation

---
 .../MessageBubble.test.tsx                    | 33 +++++++++++++------
 .../useRightClickMenu.ts                      |  7 ++--
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
index af52065ff..3a083b04f 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
@@ -97,14 +97,24 @@ describe('MessageBubble', () => {
   });
 
   it('copies an attached WebP as PNG without opening the message text menu', async () => {
-    const clipboardWrite = vi.fn().mockResolvedValue(undefined);
+    let resolveAssetRead!: (response: Response) => void;
+    const pendingAssetRead = new Promise<Response>((resolve) => {
+      resolveAssetRead = resolve;
+    });
+    const clipboardWrite = vi.fn(
+      async (
+        items: Array<{ items: Record<string, Blob | PromiseLike<Blob>> }>,
+      ) => {
+        await items[0]?.items['image/png'];
+      },
+    );
     Object.defineProperty(navigator, 'clipboard', {
       configurable: true,
       value: { write: clipboardWrite },
     });
     const ClipboardItemMock = vi.fn(function (
-      this: { items: Record<string, Blob> },
-      items: Record<string, Blob>,
+      this: { items: Record<string, Blob | PromiseLike<Blob>> },
+      items: Record<string, Blob | PromiseLike<Blob>>,
     ) {
       this.items = items;
     });
@@ -127,11 +137,7 @@ describe('MessageBubble', () => {
     vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(
       (callback) => callback(new Blob(['png'], { type: 'image/png' })),
     );
-    vi.mocked(readAssetBytes).mockResolvedValue({
-      blob: vi
-        .fn()
-        .mockResolvedValue(new Blob(['webp'], { type: 'image/webp' })),
-    } as unknown as Response);
+    vi.mocked(readAssetBytes).mockReturnValue(pendingAssetRead);
     const { container } = renderMessage({
       id: 5,
       role: 'user',
@@ -158,14 +164,21 @@ describe('MessageBubble', () => {
     expect(screen.queryByRole('menuitem', { name: '复制文本' })).toBeNull();
     fireEvent.click(screen.getByRole('menuitem', { name: '复制图片' }));
 
-    await waitFor(() => expect(clipboardWrite).toHaveBeenCalledTimes(1));
+    // The clipboard write starts synchronously, before private asset loading completes.
+    expect(clipboardWrite).toHaveBeenCalledTimes(1);
     expect(readAssetBytes).toHaveBeenCalledWith(
       '/generated-editor-images/private.webp',
       { objectKey: 'editor/private.webp' },
     );
     expect(ClipboardItemMock).toHaveBeenCalledWith({
-      'image/png': expect.any(Blob),
+      'image/png': expect.any(Promise),
     });
+    resolveAssetRead({
+      blob: vi
+        .fn()
+        .mockResolvedValue(new Blob(['webp'], { type: 'image/webp' })),
+    } as unknown as Response);
+    await screen.findByRole('menuitem', { name: '已复制' });
     expect(bitmapClose).toHaveBeenCalledTimes(1);
   });
 
diff --git a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
index 9f3be4b24..bc4e39217 100644
--- a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
+++ b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
@@ -93,10 +93,11 @@ async function copyAssetImage(asset: EditorAgentContextAsset) {
     return false;
   }
   try {
-    const response = await readAssetBytes(asset.source, {
+    const pngBlob = readAssetBytes(asset.source, {
       objectKey: asset.objectKey,
-    });
-    const pngBlob = await convertImageBlobToPng(await response.blob());
+    }).then(async (response) => convertImageBlobToPng(await response.blob()));
+    // Clipboard write must start in the menu click's user-activation stack.
+    // Safari accepts promised ClipboardItem data and resolves it after asset loading/conversion.
     await navigator.clipboard.write([
       new ClipboardItem({ 'image/png': pngBlob }),
     ]);
-- 
2.52.0


From 26572cfc88afc983258087268736dfa37732d5c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 20 Jul 2026 18:14:06 +0800
Subject: [PATCH 04/13] add reference to right-click menu

---
 .../【编辑器】画布Agent对话面板-2026-07-03.md |  2 +-
 .../EditorAgentConversationPanelView.test.tsx | 97 ++++++++++++++++++
 .../EditorAgentConversationPanelView.tsx      | 29 +++++-
 .../MessageBubble.test.tsx                    | 99 ++++++++++++++++++-
 .../EditorAgentConversation/MessageBubble.tsx | 10 +-
 .../MessageBubbleRightClickMenu.tsx           | 60 +++++++----
 .../EditorAgentConversation/common.ts         |  1 +
 .../useRightClickMenu.ts                      | 13 ++-
 8 files changed, 287 insertions(+), 24 deletions(-)

diff --git a/docs/【编辑器】画布Agent对话面板-2026-07-03.md b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
index 3f3262153..f2c1ca6aa 100644
--- a/docs/【编辑器】画布Agent对话面板-2026-07-03.md
+++ b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
@@ -114,7 +114,7 @@
 5. 生成中的进行中动画；
 6. 错误气泡（失败/余额不足，带原因）；
 7. 普通消息请求等待期间禁用发送按钮，不提供客户端停止操作；前端持续等待后端响应，避免后端已持久化消息但前端中断请求后产生会话状态错位。
-8. 桌面端右键消息正文可复制该条可见文本；右键消息附件或生成结果可下载素材，图片额外支持复制图片本体。右键动作由消息气泡的 `useRightClickMenu` 内部执行，不向上层暴露消息文本、素材地址或私有对象键。
+8. 桌面端右键消息正文可复制该条可见文本；右键消息附件或生成结果可下载素材，图片额外支持复制图片本体和“引用”到当前输入区。引用复用附件去重、9 张上限和发送链路；右键菜单只保留已有的 `objectKey` 与素材 `source`，引用时由输入区优先按 `objectKey`、缺失时按 `source` 从当前画布和素材库选项重新查询并构造 `EditorAgentAttachmentRef`，同时命中时画布优先。
 
 不做（明确排除，防止后人补齐）：
 
diff --git a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
index 737068d1e..abd98c53b 100644
--- a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
@@ -306,6 +306,103 @@ describe('EditorAgentConversationPanelView', () => {
     );
   });
 
+  it('adds a generated result to the composer through the existing right click menu', async () => {
+    const client = createClient();
+    vi.mocked(client.getConversation).mockResolvedValue({
+      conversationId: 'conversation-1',
+      projectId: 'project-1',
+      title: '生成结果',
+      messages: [
+        {
+          id: 9,
+          role: 'system',
+          text: 'internal tool result',
+          attachments: [],
+          toolCall: {
+            toolName: 'generate_image',
+            status: 'completed',
+            args: {},
+            displayArgs: {
+              stringArgs: [],
+              imageArgs: [],
+              extras: { priceMudPoints: 1 },
+            },
+            images: [
+              {
+                resourceId: 'resource-generated-1',
+                objectKey: 'editor/generated-1.png',
+                imageSrc: '/generated-editor-images/generated-1.png',
+                width: 512,
+                height: 512,
+              },
+            ],
+          },
+          createdAt: '2026-07-20T00:00:00.000Z',
+        },
+      ],
+      createdAt: '2026-07-20T00:00:00.000Z',
+      updatedAt: '2026-07-20T00:00:10.000Z',
+    });
+
+    render(
+      <EditorAgentConversationPanelView
+        open
+        onToggleOpen={vi.fn()}
+        client={client}
+        layers={[
+          {
+            id: 'layer-generated-1',
+            resourceId: 'resource-generated-1',
+            title: 'Agent生成图片-1',
+            src: '/generated-editor-images/generated-1.png',
+            objectKey: 'editor/generated-1.png',
+            x: 0,
+            y: 0,
+            width: 512,
+            height: 512,
+            originalWidth: 512,
+            originalHeight: 512,
+            zIndex: 1,
+            sourceType: 'generated',
+          },
+        ]}
+      />,
+    );
+
+    const messageLog = await screen.findByRole('log', {
+      name: '画布 Agent 消息流',
+    });
+    await waitFor(() =>
+      expect(messageLog.querySelector('.grid.grid-cols-3 > div')).toBeTruthy(),
+    );
+    fireEvent.contextMenu(
+      messageLog.querySelector('.grid.grid-cols-3 > div')!,
+      { clientX: 30, clientY: 40 },
+    );
+    fireEvent.click(screen.getByRole('menuitem', { name: '引用' }));
+
+    expect(await screen.findByText('Agent生成图片-1')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: '发送' }));
+
+    await waitFor(() => {
+      expect(client.sendMessage).toHaveBeenCalledWith(
+        'conversation-1',
+        expect.objectContaining({
+          text: '',
+          attachments: [
+            expect.objectContaining({
+              source: 'canvas_resource',
+              referenceId: 'resource-generated-1',
+              objectKey: 'editor/generated-1.png',
+              imageSrc: '/generated-editor-images/generated-1.png',
+            }),
+          ],
+        }),
+        expect.any(Object),
+      );
+    });
+  });
+
   it('disables sending while a message request is pending without showing stop', async () => {
     const client = createClient();
     let resolveSend!: (response: EditorAgentMessageResponse) => void;
diff --git a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
index 7846c3b3c..433d9539d 100644
--- a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
+++ b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
@@ -25,7 +25,10 @@ import { PlatformActionButton } from '@/src/components/common/PlatformActionButt
 import { PlatformDangerConfirmDialog } from '@/src/components/common/PlatformDangerConfirmDialog.tsx';
 import { UnifiedModal } from '@/src/components/common/UnifiedModal.tsx';
 import AttachmentChip from '@/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx';
-import { attachmentKey } from '@/src/components/image-editor/EditorAgentConversation/common.ts';
+import {
+  attachmentKey,
+  type EditorAgentContextAsset,
+} from '@/src/components/image-editor/EditorAgentConversation/common.ts';
 import {
   MessageBubble,
   ThinkingBubble,
@@ -387,6 +390,29 @@ export function EditorAgentConversationPanelView({
     return true;
   };
 
+  const referenceContextAsset = (asset: EditorAgentContextAsset) => {
+    const objectKey = asset.objectKey?.trim();
+    const source = asset.source.trim();
+    if (!objectKey && !source) {
+      return false;
+    }
+    const options = [...canvasAttachmentOptions, ...libraryAttachmentOptions];
+    const objectKeyOption = objectKey
+      ? options.find(
+          ({ attachment }) => attachment.objectKey?.trim() === objectKey,
+        )
+      : undefined;
+    const option =
+      objectKeyOption ||
+      options.find(({ attachment }) => {
+        return (
+          attachment.imageSrc.trim() === source ||
+          attachment.thumbnailSrc?.trim() === source
+        );
+      });
+    return option ? appendAttachments([option.attachment]) : false;
+  };
+
   const createPastedAgentImageAttachment = async (
     file: File,
   ): Promise<EditorAgentAttachmentRef> => {
@@ -608,6 +634,7 @@ export function EditorAgentConversationPanelView({
                   }
                   onConfirmToolCall={confirmToolCall}
                   onCancelToolCall={cancelToolCall}
+                  onReferenceImage={referenceContextAsset}
                   onJobCompleted={() => {
                     void refreshActiveConversation();
                     onCanvasRefreshRequested?.();
diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
index 3a083b04f..6b02603ff 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
@@ -20,13 +20,17 @@ vi.mock('@/src/services/clipboard.ts', () => ({
   copyTextToClipboard: vi.fn(),
 }));
 
-function renderMessage(message: EditorAgentMessage) {
+function renderMessage(
+  message: EditorAgentMessage,
+  onReferenceImage?: Parameters<typeof MessageBubble>[0]['onReferenceImage'],
+) {
   return render(
     <MessageBubble
       message={message}
       busyAction={null}
       onConfirmToolCall={vi.fn()}
       onCancelToolCall={vi.fn()}
+      onReferenceImage={onReferenceImage}
     />,
   );
 }
@@ -182,6 +186,99 @@ describe('MessageBubble', () => {
     expect(bitmapClose).toHaveBeenCalledTimes(1);
   });
 
+  it('references a historical attachment through the existing asset menu', async () => {
+    const attachment = {
+      source: 'canvas_resource' as const,
+      referenceId: 'resource-reference-1',
+      objectKey: 'editor/reference.png',
+      imageSrc: '/generated-editor-images/reference.png',
+      label: '历史参考图',
+    };
+    const onReferenceImage = vi.fn(() => true);
+    const { container } = renderMessage(
+      {
+        id: 7,
+        role: 'user',
+        text: '参考这张图',
+        attachments: [attachment],
+        toolCall: null,
+        createdAt: '2026-07-20T00:00:00Z',
+      },
+      onReferenceImage,
+    );
+
+    fireEvent.contextMenu(container.querySelector('.group')!, {
+      clientX: 30,
+      clientY: 40,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '引用' }));
+
+    expect(onReferenceImage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        source: '/generated-editor-images/reference.png',
+        objectKey: 'editor/reference.png',
+      }),
+    );
+    expect(
+      await screen.findByRole('menuitem', { name: '已引用' }),
+    ).toBeTruthy();
+  });
+
+  it('offers reference for generated images using their media lookup fields', async () => {
+    const message = {
+      id: 8,
+      role: 'system' as const,
+      text: 'internal tool result',
+      attachments: [],
+      toolCall: {
+        toolName: 'generate_image',
+        status: 'completed' as const,
+        args: {},
+        displayArgs: {
+          stringArgs: [],
+          imageArgs: [],
+          extras: { priceMudPoints: 1 },
+        },
+        images: [
+          {
+            resourceId: 'resource-generated-1',
+            objectKey: 'editor/generated.png',
+            imageSrc: '/generated-editor-images/generated.png',
+            width: 512,
+            height: 512,
+          },
+          {
+            objectKey: 'editor/legacy.png',
+            imageSrc: '/generated-editor-images/legacy.png',
+          },
+        ],
+      },
+      createdAt: '2026-07-20T00:00:00Z',
+    };
+    const onReferenceImage = vi.fn(() => true);
+    const { container } = renderMessage(message, onReferenceImage);
+    await waitFor(() =>
+      expect(container.querySelectorAll('.grid.grid-cols-3 > div')).toHaveLength(
+        2,
+      ),
+    );
+    const imageCards = container.querySelectorAll('.grid.grid-cols-3 > div');
+
+    fireEvent.contextMenu(imageCards[0]!, { clientX: 30, clientY: 40 });
+    fireEvent.click(screen.getByRole('menuitem', { name: '引用' }));
+    expect(onReferenceImage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        source: '/generated-editor-images/generated.png',
+        objectKey: 'editor/generated.png',
+      }),
+    );
+
+    fireEvent.contextMenu(imageCards[1]!, { clientX: 50, clientY: 60 });
+    expect(screen.getByRole('menuitem', { name: '引用' })).toBeTruthy();
+    expect(screen.getByRole('menuitem', { name: '复制图片' })).toBeTruthy();
+    expect(screen.getByRole('menuitem', { name: '下载图片' })).toBeTruthy();
+  });
+
   it('downloads generated video with the inferred extension', async () => {
     const createObjectURL = vi.fn(() => 'blob:agent-video');
     const revokeObjectURL = vi.fn();
diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx
index e62e4796b..a6796519f 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubble.tsx
@@ -3,7 +3,10 @@ import {
   type EditorAgentMessage,
 } from '@/packages/shared/src/contracts';
 import AttachmentChip from '@/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx';
-import { attachmentKey } from '@/src/components/image-editor/EditorAgentConversation/common.ts';
+import {
+  attachmentKey,
+  type EditorAgentContextAsset,
+} from '@/src/components/image-editor/EditorAgentConversation/common.ts';
 import { PendingToolCall } from '@/src/components/image-editor/EditorAgentConversation/PendingToolCall.tsx';
 import ToolCallView from '@/src/components/image-editor/EditorAgentConversation/ToolCallView.tsx';
 
@@ -48,6 +51,8 @@ type MessageBubbleProps = {
   onConfirmToolCall: (messageId: number) => Promise<void>;
   onCancelToolCall: (messageId: number) => Promise<void>;
   onJobCompleted?: () => void;
+  // TODO prop drilling
+  onReferenceImage?: (asset: EditorAgentContextAsset) => boolean;
 };
 
 export function MessageBubble({
@@ -56,13 +61,14 @@ export function MessageBubble({
   onConfirmToolCall,
   onCancelToolCall,
   onJobCompleted,
+  onReferenceImage,
 }: MessageBubbleProps) {
   const {
     rightClickMenu,
     openRightClickMenu,
     closeRightClickMenu,
     runRightClickAction,
-  } = useRightClickMenu();
+  } = useRightClickMenu({ onReferenceImage });
   const systemErrorText =
     message.role === 'system' &&
     !message.toolCall &&
diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
index 9857dc1b5..689cf9663 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
@@ -36,7 +36,9 @@ function actionLabel({
   if (pendingAction === action) {
     return action === EditorAgentRightClickAction.DownloadAsset
       ? '下载中'
-      : '复制中';
+      : action === EditorAgentRightClickAction.ReferenceImage
+        ? '引用中'
+        : '复制中';
   }
   if (resultAction !== action) {
     return idleLabel;
@@ -44,12 +46,16 @@ function actionLabel({
   if (result === 'success') {
     return action === EditorAgentRightClickAction.DownloadAsset
       ? '已下载'
-      : '已复制';
+      : action === EditorAgentRightClickAction.ReferenceImage
+        ? '已引用'
+        : '已复制';
   }
   if (result === 'error') {
     return action === EditorAgentRightClickAction.DownloadAsset
       ? '下载失败'
-      : '复制失败';
+      : action === EditorAgentRightClickAction.ReferenceImage
+        ? '引用失败'
+        : '复制失败';
   }
   return idleLabel;
 }
@@ -161,20 +167,40 @@ export function MessageBubbleRightClickMenu({
       ) : (
         <>
           {target.asset.mediaType === 'image' ? (
-            <button
-              type="button"
-              role="menuitem"
-              disabled={pendingAction !== null}
-              onClick={() => onAction(EditorAgentRightClickAction.CopyImage)}
-            >
-              {actionLabel({
-                action: EditorAgentRightClickAction.CopyImage,
-                idleLabel: '复制图片',
-                pendingAction,
-                resultAction,
-                result,
-              })}
-            </button>
+            <>
+              {target.asset.source.trim() ? (
+                <button
+                  type="button"
+                  role="menuitem"
+                  disabled={pendingAction !== null}
+                  onClick={() =>
+                    onAction(EditorAgentRightClickAction.ReferenceImage)
+                  }
+                >
+                  {actionLabel({
+                    action: EditorAgentRightClickAction.ReferenceImage,
+                    idleLabel: '引用',
+                    pendingAction,
+                    resultAction,
+                    result,
+                  })}
+                </button>
+              ) : null}
+              <button
+                type="button"
+                role="menuitem"
+                disabled={pendingAction !== null}
+                onClick={() => onAction(EditorAgentRightClickAction.CopyImage)}
+              >
+                {actionLabel({
+                  action: EditorAgentRightClickAction.CopyImage,
+                  idleLabel: '复制图片',
+                  pendingAction,
+                  resultAction,
+                  result,
+                })}
+              </button>
+            </>
           ) : null}
           <button
             type="button"
diff --git a/src/components/image-editor/EditorAgentConversation/common.ts b/src/components/image-editor/EditorAgentConversation/common.ts
index 4e3628e89..c6390426b 100644
--- a/src/components/image-editor/EditorAgentConversation/common.ts
+++ b/src/components/image-editor/EditorAgentConversation/common.ts
@@ -5,6 +5,7 @@ import type { EditorAgentAttachmentRef } from '@/packages/shared/src/contracts';
 export enum EditorAgentRightClickAction {
   CopyText = 'copy_text',
   CopyImage = 'copy_image',
+  ReferenceImage = 'reference_image',
   DownloadAsset = 'download_asset',
 }
 
diff --git a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
index bc4e39217..fa6c5e84e 100644
--- a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
+++ b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
@@ -134,7 +134,11 @@ async function downloadAsset(asset: EditorAgentContextAsset) {
   }
 }
 
-export function useRightClickMenu() {
+export function useRightClickMenu({
+  onReferenceImage,
+}: {
+  onReferenceImage?: (asset: EditorAgentContextAsset) => boolean;
+} = {}) {
   const [rightClickMenu, setRightClickMenu] =
     useState<RightClickMenuState | null>(null);
 
@@ -182,6 +186,11 @@ export function useRightClickMenu() {
               target.kind === 'asset' &&
               target.asset.mediaType === 'image'
             ? await copyAssetImage(target.asset)
+            : action === EditorAgentRightClickAction.ReferenceImage &&
+                target.kind === 'asset' &&
+                target.asset.mediaType === 'image' &&
+                target.asset.source.trim()
+              ? (onReferenceImage?.(target.asset) ?? false)
             : action === EditorAgentRightClickAction.DownloadAsset &&
                 target.kind === 'asset'
               ? await downloadAsset(target.asset)
@@ -197,7 +206,7 @@ export function useRightClickMenu() {
           : current,
       );
     },
-    [rightClickMenu],
+    [onReferenceImage, rightClickMenu],
   );
 
   return {
-- 
2.52.0


From e6fd4a1fe1f817c5b6120550c2a616e9a3633b86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 20 Jul 2026 19:27:13 +0800
Subject: [PATCH 05/13] fix reference & paste concurrence, extract picker modal
 and hook

---
 .../【编辑器】画布Agent对话面板-2026-07-03.md |   1 +
 .../AttachmentPicker.tsx                      | 116 +++++
 .../EditorAgentConversationPanelView.test.tsx | 286 +++++++++++-
 .../EditorAgentConversationPanelView.tsx      | 428 ++----------------
 .../useConversationAttachments.ts             | 375 +++++++++++++++
 5 files changed, 796 insertions(+), 410 deletions(-)
 create mode 100644 src/components/image-editor/EditorAgentConversation/AttachmentPicker.tsx
 create mode 100644 src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts

diff --git a/docs/【编辑器】画布Agent对话面板-2026-07-03.md b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
index f2c1ca6aa..0bde7f9b9 100644
--- a/docs/【编辑器】画布Agent对话面板-2026-07-03.md
+++ b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
@@ -73,6 +73,7 @@
 - 网格末尾上传格为后续补齐项；在上传格未落地前，对话附件只从已有画布资源和账号素材库选择。后续若从对话入口上传图片，必须复用素材库 / 画布资源登记链路，不新增对话私有图片类型。
 - 应用后附件以胶囊 chip 挂在输入框上方；发出的消息内附件渲染为纯文本胶囊 chip（名称 + 小图标），**默认无缩略图，鼠标悬浮才浮出缩略图预览**。
 - 附件领域形状：统一为画布资源 / 素材库对象引用（`resourceId` / `assetId` + 可选 `objectKey`），不存在只属于对话的第三种图；单条消息上限 9 张（前后端共同校验）。前端可携带展示用 `imageSrc` / `thumbnailSrc`，后端必须按当前工程和当前账号重新归一、校验归属与 `objectKey`。
+- 输入区附件临时状态统一收口到 `useConversationAttachments`，选择弹窗由独立的 `AttachmentPicker` 负责纯展示；选择、引用、粘贴上传完成、移除、发送清空和失败恢复都必须经同一最新状态更新入口。异步粘贴完成时基于当时的最新附件去重并重新校验 9 张上限，不能用上传开始时捕获的旧列表覆盖期间新增的引用。
 
 ## 工具调用确认展示契约
 
diff --git a/src/components/image-editor/EditorAgentConversation/AttachmentPicker.tsx b/src/components/image-editor/EditorAgentConversation/AttachmentPicker.tsx
new file mode 100644
index 000000000..2df97baff
--- /dev/null
+++ b/src/components/image-editor/EditorAgentConversation/AttachmentPicker.tsx
@@ -0,0 +1,116 @@
+import { PlatformActionButton } from '@/src/components/common/PlatformActionButton.tsx';
+import { UnifiedModal } from '@/src/components/common/UnifiedModal.tsx';
+import { ResolvedAssetImage } from '@/src/components/ResolvedAssetImage.tsx';
+
+import type {
+  AttachmentPickerTab,
+  EditorAgentAttachmentOption,
+} from './useConversationAttachments.ts';
+
+export function AttachmentPicker({
+  open,
+  tab,
+  canvasOptions,
+  libraryOptions,
+  selectedKeys,
+  attachmentError,
+  onTabChange,
+  onToggleKey,
+  onApply,
+  onClose,
+}: {
+  open: boolean;
+  tab: AttachmentPickerTab;
+  canvasOptions: EditorAgentAttachmentOption[];
+  libraryOptions: EditorAgentAttachmentOption[];
+  selectedKeys: Set<string>;
+  attachmentError: string | null;
+  onTabChange: (tab: AttachmentPickerTab) => void;
+  onToggleKey: (key: string) => void;
+  onApply: () => void;
+  onClose: () => void;
+}) {
+  const visibleOptions = tab === 'canvas' ? canvasOptions : libraryOptions;
+
+  return (
+    <UnifiedModal
+      open={open}
+      title="选择图片附件"
+      size="md"
+      onClose={onClose}
+      footer={
+        <>
+          <PlatformActionButton tone="ghost" size="sm" onClick={onClose}>
+            取消
+          </PlatformActionButton>
+          <PlatformActionButton tone="primary" size="sm" onClick={onApply}>
+            应用
+          </PlatformActionButton>
+        </>
+      }
+    >
+      <div className="flex min-h-[18rem] flex-col gap-3">
+        <div className="flex gap-2">
+          <button
+            type="button"
+            className={`rounded-full px-3 py-1.5 text-sm ${
+              tab === 'canvas'
+                ? 'bg-slate-900 text-white'
+                : 'bg-slate-100 text-slate-600'
+            }`}
+            onClick={() => onTabChange('canvas')}
+          >
+            画布
+          </button>
+          <button
+            type="button"
+            className={`rounded-full px-3 py-1.5 text-sm ${
+              tab === 'library'
+                ? 'bg-slate-900 text-white'
+                : 'bg-slate-100 text-slate-600'
+            }`}
+            onClick={() => onTabChange('library')}
+          >
+            素材库
+          </button>
+        </div>
+        {attachmentError ? (
+          <div className="rounded-2xl bg-amber-50 px-3 py-2 text-sm text-amber-700">
+            {attachmentError}
+          </div>
+        ) : null}
+        <div className="grid grid-cols-2 gap-2 overflow-y-auto sm:grid-cols-3">
+          {visibleOptions.map((option) => {
+            const label =
+              option.attachment.label?.trim() || option.attachment.referenceId;
+            return (
+              <label
+                key={option.key}
+                className="flex cursor-pointer flex-col gap-2 rounded-2xl border border-slate-200 bg-white p-2 text-sm text-slate-700 shadow-sm"
+              >
+                <ResolvedAssetImage
+                  src={
+                    option.attachment.thumbnailSrc ?? option.attachment.imageSrc
+                  }
+                  objectKey={option.attachment.objectKey}
+                  refreshKey={option.attachment.referenceId}
+                  alt=""
+                  className="aspect-square rounded-xl bg-slate-100 object-cover"
+                />
+                <span className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    aria-label={`选择${option.sourceLabel}图片 ${label}`}
+                    checked={selectedKeys.has(option.key)}
+                    onChange={() => onToggleKey(option.key)}
+                  />
+                  <span className="truncate">{label}</span>
+                </span>
+              </label>
+            );
+          })}
+        </div>
+      </div>
+    </UnifiedModal>
+  );
+}
diff --git a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
index abd98c53b..8233b03cb 100644
--- a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
@@ -524,9 +524,277 @@ describe('EditorAgentConversationPanelView', () => {
       );
     });
     expect(screen.getByRole('option', { name: '角色参考' })).toBeTruthy();
-    expect(
-      screen.queryByRole('option', { name: 'conversation-1' }),
-    ).toBeNull();
+    expect(screen.queryByRole('option', { name: 'conversation-1' })).toBeNull();
+  });
+
+  it('keeps a referenced image when a pending paste upload finishes', async () => {
+    const client = createClient();
+    vi.mocked(client.getConversation).mockResolvedValue({
+      conversationId: 'conversation-1',
+      projectId: 'project-1',
+      title: '并发附件',
+      messages: [
+        {
+          id: 9,
+          role: 'system',
+          text: 'internal tool result',
+          attachments: [],
+          toolCall: {
+            toolName: 'generate_image',
+            status: 'completed',
+            args: {},
+            displayArgs: {
+              stringArgs: [],
+              imageArgs: [],
+              extras: { priceMudPoints: 1 },
+            },
+            images: [
+              {
+                resourceId: 'resource-referenced',
+                objectKey: 'editor/referenced.png',
+                imageSrc: '/generated-editor-images/referenced.png',
+                width: 512,
+                height: 512,
+              },
+            ],
+          },
+          createdAt: '2026-07-20T00:00:00.000Z',
+        },
+      ],
+      createdAt: '2026-07-20T00:00:00.000Z',
+      updatedAt: '2026-07-20T00:00:10.000Z',
+    });
+    let resolveUpload!: (upload: {
+      src: string;
+      objectKey: string;
+      assetObjectId: string;
+      legacyPublicPath: string;
+    }) => void;
+    uploadEditorMediaAssetFileMock.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveUpload = resolve;
+        }),
+    );
+
+    render(
+      <EditorAgentConversationPanelView
+        open
+        onToggleOpen={vi.fn()}
+        client={client}
+        layers={[
+          {
+            id: 'layer-referenced',
+            resourceId: 'resource-referenced',
+            title: '并发引用图',
+            src: '/generated-editor-images/referenced.png',
+            objectKey: 'editor/referenced.png',
+            x: 0,
+            y: 0,
+            width: 512,
+            height: 512,
+            originalWidth: 512,
+            originalHeight: 512,
+            zIndex: 1,
+            sourceType: 'generated',
+          },
+        ]}
+      />,
+    );
+
+    const messageLog = await screen.findByRole('log', {
+      name: '画布 Agent 消息流',
+    });
+    await waitFor(() =>
+      expect(messageLog.querySelector('.grid.grid-cols-3 > div')).toBeTruthy(),
+    );
+    const input = screen.getByLabelText('发送给画布 Agent');
+    fireEvent.paste(input, {
+      clipboardData: {
+        files: [
+          new File(['pending-paste'], 'pending.png', { type: 'image/png' }),
+        ],
+      },
+    });
+    await waitFor(() =>
+      expect(uploadEditorMediaAssetFileMock).toHaveBeenCalledTimes(1),
+    );
+
+    fireEvent.contextMenu(
+      messageLog.querySelector('.grid.grid-cols-3 > div')!,
+      { clientX: 30, clientY: 40 },
+    );
+    fireEvent.click(screen.getByRole('menuitem', { name: '引用' }));
+    expect(await screen.findByText('并发引用图')).toBeTruthy();
+
+    await act(async () => {
+      resolveUpload({
+        src: '/generated/pasted.png',
+        objectKey:
+          'generated-character-drafts/editor/agent-paste/image/pasted.png',
+        assetObjectId: 'asset-object-pasted',
+        legacyPublicPath: '/generated/pasted.png',
+      });
+    });
+    expect(await screen.findByText('粘贴图片')).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: '发送' }));
+    await waitFor(() => {
+      expect(client.sendMessage).toHaveBeenCalledWith(
+        'conversation-1',
+        expect.objectContaining({
+          attachments: [
+            expect.objectContaining({
+              referenceId: 'resource-referenced',
+            }),
+            expect.objectContaining({ referenceId: 'resource-pasted' }),
+          ],
+        }),
+        expect.any(Object),
+      );
+    });
+  });
+
+  it('evaluates the nine-image limit against references added during paste', async () => {
+    const client = createClient();
+    const layers = Array.from({ length: 9 }, (_, index) => ({
+      id: `layer-${index + 1}`,
+      resourceId: `resource-${index + 1}`,
+      title: `附件-${index + 1}`,
+      src: `/generated/attachment-${index + 1}.png`,
+      objectKey: `editor/attachment-${index + 1}.png`,
+      x: 0,
+      y: 0,
+      width: 512,
+      height: 512,
+      originalWidth: 512,
+      originalHeight: 512,
+      zIndex: index + 1,
+      sourceType: 'generated' as const,
+    }));
+    vi.mocked(client.getConversation).mockResolvedValue({
+      conversationId: 'conversation-1',
+      projectId: 'project-1',
+      title: '附件上限',
+      messages: [
+        {
+          id: 9,
+          role: 'system',
+          text: 'internal tool result',
+          attachments: [],
+          toolCall: {
+            toolName: 'generate_image',
+            status: 'completed',
+            args: {},
+            displayArgs: {
+              stringArgs: [],
+              imageArgs: [],
+              extras: { priceMudPoints: 1 },
+            },
+            images: [
+              {
+                resourceId: 'resource-9',
+                objectKey: 'editor/attachment-9.png',
+                imageSrc: '/generated/attachment-9.png',
+                width: 512,
+                height: 512,
+              },
+            ],
+          },
+          createdAt: '2026-07-20T00:00:00.000Z',
+        },
+      ],
+      createdAt: '2026-07-20T00:00:00.000Z',
+      updatedAt: '2026-07-20T00:00:10.000Z',
+    });
+    let resolveUpload!: (upload: {
+      src: string;
+      objectKey: string;
+      assetObjectId: string;
+      legacyPublicPath: string;
+    }) => void;
+    uploadEditorMediaAssetFileMock.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveUpload = resolve;
+        }),
+    );
+
+    render(
+      <EditorAgentConversationPanelView
+        open
+        onToggleOpen={vi.fn()}
+        client={client}
+        layers={layers}
+      />,
+    );
+
+    const messageLog = await screen.findByRole('log', {
+      name: '画布 Agent 消息流',
+    });
+    fireEvent.click(screen.getByRole('button', { name: '添加附件' }));
+    const attachmentDialog = screen.getByRole('dialog', {
+      name: '选择图片附件',
+    });
+    for (let index = 1; index <= 8; index += 1) {
+      fireEvent.click(
+        within(attachmentDialog).getByRole('checkbox', {
+          name: `选择画布图片 附件-${index}`,
+        }),
+      );
+    }
+    fireEvent.click(
+      within(attachmentDialog).getByRole('button', { name: '应用' }),
+    );
+
+    const input = screen.getByLabelText('发送给画布 Agent');
+    fireEvent.paste(input, {
+      clipboardData: {
+        files: [
+          new File(['pending-paste'], 'pending.png', { type: 'image/png' }),
+        ],
+      },
+    });
+    await waitFor(() =>
+      expect(uploadEditorMediaAssetFileMock).toHaveBeenCalledTimes(1),
+    );
+    await waitFor(() =>
+      expect(messageLog.querySelector('.grid.grid-cols-3 > div')).toBeTruthy(),
+    );
+    fireEvent.contextMenu(
+      messageLog.querySelector('.grid.grid-cols-3 > div')!,
+      { clientX: 30, clientY: 40 },
+    );
+    fireEvent.click(screen.getByRole('menuitem', { name: '引用' }));
+    expect(await screen.findByText('附件-9')).toBeTruthy();
+
+    await act(async () => {
+      resolveUpload({
+        src: '/generated/pasted.png',
+        objectKey:
+          'generated-character-drafts/editor/agent-paste/image/pasted.png',
+        assetObjectId: 'asset-object-pasted',
+        legacyPublicPath: '/generated/pasted.png',
+      });
+    });
+    expect(await screen.findByText('最多 9 张')).toBeTruthy();
+    expect(screen.queryByText('粘贴图片')).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: '发送' }));
+    await waitFor(() => {
+      const request = vi.mocked(client.sendMessage).mock.calls[0]?.[1];
+      expect(request?.attachments).toHaveLength(9);
+      expect(request?.attachments).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ referenceId: 'resource-9' }),
+        ]),
+      );
+      expect(request?.attachments).not.toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ referenceId: 'resource-pasted' }),
+        ]),
+      );
+    });
   });
 
   it('sends selected attachments even when the text input is empty', async () => {
@@ -648,9 +916,9 @@ describe('EditorAgentConversationPanelView', () => {
     ).toBe('失败后恢复这条草稿');
     expect(screen.getByText('角色图层')).toBeTruthy();
     expect(
-      within(screen.getByRole('log', { name: '画布 Agent 消息流' })).queryByText(
-        '失败后恢复这条草稿',
-      ),
+      within(
+        screen.getByRole('log', { name: '画布 Agent 消息流' }),
+      ).queryByText('失败后恢复这条草稿'),
     ).toBeNull();
   });
 
@@ -785,9 +1053,9 @@ describe('EditorAgentConversationPanelView', () => {
     });
     expect(screen.getByRole('button', { name: '执行中' })).toBeTruthy();
     expect(screen.queryByRole('button', { name: '确认' })).toBeNull();
-    expect(screen.getByRole('button', { name: '取消' }).hasAttribute('disabled')).toBe(
-      true,
-    );
+    expect(
+      screen.getByRole('button', { name: '取消' }).hasAttribute('disabled'),
+    ).toBe(true);
 
     await act(async () => {
       resolveConfirmation();
diff --git a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
index 433d9539d..94502ae59 100644
--- a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
+++ b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
@@ -9,26 +9,16 @@ import {
   X,
 } from 'lucide-react';
 import {
-  type ClipboardEvent as ReactClipboardEvent,
   type FormEvent,
   useEffect,
-  useMemo,
   useState,
   type WheelEvent as ReactWheelEvent,
 } from 'react';
 
-import {
-  EDITOR_AGENT_MAX_ATTACHMENTS,
-  type EditorAgentAttachmentRef,
-} from '@/packages/shared/src/contracts';
-import { PlatformActionButton } from '@/src/components/common/PlatformActionButton.tsx';
 import { PlatformDangerConfirmDialog } from '@/src/components/common/PlatformDangerConfirmDialog.tsx';
-import { UnifiedModal } from '@/src/components/common/UnifiedModal.tsx';
 import AttachmentChip from '@/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx';
-import {
-  attachmentKey,
-  type EditorAgentContextAsset,
-} from '@/src/components/image-editor/EditorAgentConversation/common.ts';
+import { AttachmentPicker } from '@/src/components/image-editor/EditorAgentConversation/AttachmentPicker.tsx';
+import { attachmentKey } from '@/src/components/image-editor/EditorAgentConversation/common.ts';
 import {
   MessageBubble,
   ThinkingBubble,
@@ -37,25 +27,14 @@ import type {
   CanvasLayer,
   EditorAsset,
 } from '@/src/components/image-editor/ImageCanvasEditorTypes.ts';
-import { probeImageFileDimensions } from '@/src/components/image-editor/ImageCanvasFileModel.ts';
-import { ResolvedAssetImage } from '@/src/components/ResolvedAssetImage.tsx';
-import { uploadEditorMediaAssetFile } from '@/src/services/image-editor/editorMediaAssetUploadClient.ts';
-import { createEditorProjectResource } from '@/src/services/image-editor/editorProjectClient.ts';
 
 import { useImageCanvasContextStore } from '../useImageCanvasContextStore.ts';
+import { useConversationAttachments } from './useConversationAttachments.ts';
 import {
   type EditorAgentConversationClient,
   useEditorAgentConversation,
 } from './useEditorAgentConversation';
 
-type AttachmentPickerTab = 'canvas' | 'library';
-
-type EditorAgentAttachmentOption = {
-  key: string;
-  sourceLabel: string;
-  attachment: EditorAgentAttachmentRef;
-};
-
 type EditorAgentConversationPanelViewProps = {
   open: boolean;
   onToggleOpen: () => void;
@@ -71,170 +50,6 @@ function stopAgentPanelWheel(event: ReactWheelEvent<HTMLElement>) {
   event.stopPropagation();
 }
 
-function isImageLayer(layer: CanvasLayer) {
-  return (
-    (layer.mediaType ?? 'image') === 'image' &&
-    Boolean(layer.resourceId?.trim()) &&
-    layer.src.trim()
-  );
-}
-
-function isImageAsset(asset: EditorAsset) {
-  return (asset.mediaType ?? 'image') === 'image' && asset.src.trim();
-}
-
-function createCanvasAttachmentOptions(
-  layers: CanvasLayer[] = [],
-): EditorAgentAttachmentOption[] {
-  return layers.filter(isImageLayer).map((layer) => {
-    const attachment: EditorAgentAttachmentRef = {
-      source: 'canvas_resource',
-      referenceId: layer.resourceId || layer.id,
-      objectKey: layer.objectKey ?? null,
-      imageSrc: layer.src,
-      thumbnailSrc: layer.thumbnailSrc ?? null,
-      label: layer.title,
-      width: layer.width,
-      height: layer.height,
-    };
-    return {
-      key: attachmentKey(attachment),
-      sourceLabel: '画布',
-      attachment,
-    };
-  });
-}
-
-function createLibraryAttachmentOptions(
-  assets: EditorAsset[] = [],
-): EditorAgentAttachmentOption[] {
-  return assets.filter(isImageAsset).map((asset) => {
-    const attachment: EditorAgentAttachmentRef = {
-      source: 'library_asset',
-      referenceId: asset.id,
-      objectKey: asset.objectKey ?? null,
-      imageSrc: asset.src,
-      thumbnailSrc: asset.thumbnailSrc ?? null,
-      label: asset.label,
-      width: asset.width,
-      height: asset.height,
-    };
-    return {
-      key: attachmentKey(attachment),
-      sourceLabel: '素材库',
-      attachment,
-    };
-  });
-}
-
-function AttachmentPickerModal({
-  open,
-  tab,
-  canvasOptions,
-  libraryOptions,
-  selectedKeys,
-  attachmentError,
-  onTabChange,
-  onToggleKey,
-  onApply,
-  onClose,
-}: {
-  open: boolean;
-  tab: AttachmentPickerTab;
-  canvasOptions: EditorAgentAttachmentOption[];
-  libraryOptions: EditorAgentAttachmentOption[];
-  selectedKeys: Set<string>;
-  attachmentError: string | null;
-  onTabChange: (tab: AttachmentPickerTab) => void;
-  onToggleKey: (key: string) => void;
-  onApply: () => void;
-  onClose: () => void;
-}) {
-  const visibleOptions = tab === 'canvas' ? canvasOptions : libraryOptions;
-
-  return (
-    <UnifiedModal
-      open={open}
-      title="选择图片附件"
-      size="md"
-      onClose={onClose}
-      footer={
-        <>
-          <PlatformActionButton tone="ghost" size="sm" onClick={onClose}>
-            取消
-          </PlatformActionButton>
-          <PlatformActionButton tone="primary" size="sm" onClick={onApply}>
-            应用
-          </PlatformActionButton>
-        </>
-      }
-    >
-      <div className="flex min-h-[18rem] flex-col gap-3">
-        <div className="flex gap-2">
-          <button
-            type="button"
-            className={`rounded-full px-3 py-1.5 text-sm ${
-              tab === 'canvas'
-                ? 'bg-slate-900 text-white'
-                : 'bg-slate-100 text-slate-600'
-            }`}
-            onClick={() => onTabChange('canvas')}
-          >
-            画布
-          </button>
-          <button
-            type="button"
-            className={`rounded-full px-3 py-1.5 text-sm ${
-              tab === 'library'
-                ? 'bg-slate-900 text-white'
-                : 'bg-slate-100 text-slate-600'
-            }`}
-            onClick={() => onTabChange('library')}
-          >
-            素材库
-          </button>
-        </div>
-        {attachmentError ? (
-          <div className="rounded-2xl bg-amber-50 px-3 py-2 text-sm text-amber-700">
-            {attachmentError}
-          </div>
-        ) : null}
-        <div className="grid grid-cols-2 gap-2 overflow-y-auto sm:grid-cols-3">
-          {visibleOptions.map((option) => {
-            const label =
-              option.attachment.label?.trim() || option.attachment.referenceId;
-            return (
-              <label
-                key={option.key}
-                className="flex cursor-pointer flex-col gap-2 rounded-2xl border border-slate-200 bg-white p-2 text-sm text-slate-700 shadow-sm"
-              >
-                <ResolvedAssetImage
-                  src={
-                    option.attachment.thumbnailSrc ?? option.attachment.imageSrc
-                  }
-                  objectKey={option.attachment.objectKey}
-                  refreshKey={option.attachment.referenceId}
-                  alt=""
-                  className="aspect-square rounded-xl bg-slate-100 object-cover"
-                />
-                <span className="flex items-center gap-2">
-                  <input
-                    type="checkbox"
-                    aria-label={`选择${option.sourceLabel}图片 ${label}`}
-                    checked={selectedKeys.has(option.key)}
-                    onChange={() => onToggleKey(option.key)}
-                  />
-                  <span className="truncate">{label}</span>
-                </span>
-              </label>
-            );
-          })}
-        </div>
-      </div>
-    </UnifiedModal>
-  );
-}
-
 export function EditorAgentConversationPanelView({
   open,
   onToggleOpen,
@@ -278,70 +93,31 @@ export function EditorAgentConversationPanelView({
     onConfirmSent,
   });
   const [draftText, setDraftText] = useState('');
-  const [attachments, setAttachments] = useState<EditorAgentAttachmentRef[]>(
-    [],
-  );
-  const [attachmentPickerOpen, setAttachmentPickerOpen] = useState(false);
-  const [attachmentPickerTab, setAttachmentPickerTab] =
-    useState<AttachmentPickerTab>('canvas');
-  const [attachmentError, setAttachmentError] = useState<string | null>(null);
-  const [isPastingAttachment, setIsPastingAttachment] = useState(false);
-  const [draftAttachmentKeys, setDraftAttachmentKeys] = useState<Set<string>>(
-    () => new Set(),
-  );
+  const {
+    attachments,
+    attachmentError,
+    isPastingAttachment,
+    attachmentPickerOpen,
+    attachmentPickerTab,
+    draftAttachmentKeys,
+    canvasAttachmentOptions,
+    libraryAttachmentOptions,
+    setAttachmentPickerTab,
+    openAttachmentPicker,
+    closeAttachmentPicker,
+    toggleAttachmentKey,
+    applyAttachmentSelection,
+    referenceContextAsset,
+    handleInputPaste,
+    removeAttachment,
+    consumeAttachments,
+    restoreAttachmentsIfEmpty,
+  } = useConversationAttachments({ projectId, layers, assets });
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
 
-  const canvasAttachmentOptions = useMemo(
-    () => createCanvasAttachmentOptions(layers),
-    [layers],
-  );
-  const libraryAttachmentOptions = useMemo(
-    () => createLibraryAttachmentOptions(assets),
-    [assets],
-  );
-  const attachmentOptionsByKey = useMemo(() => {
-    const optionMap = new Map<string, EditorAgentAttachmentOption>();
-    [...canvasAttachmentOptions, ...libraryAttachmentOptions].forEach(
-      (option) => optionMap.set(option.key, option),
-    );
-    return optionMap;
-  }, [canvasAttachmentOptions, libraryAttachmentOptions]);
-
   const hasProject = Boolean(projectId?.trim());
   const isConversationBusy = isWaiting || isToolCallActionPending;
 
-  const openAttachmentPicker = () => {
-    setAttachmentError(null);
-    setDraftAttachmentKeys(new Set(attachments.map(attachmentKey)));
-    setAttachmentPickerOpen(true);
-  };
-
-  const toggleAttachmentKey = (key: string) => {
-    setDraftAttachmentKeys((currentKeys) => {
-      const nextKeys = new Set(currentKeys);
-      if (nextKeys.has(key)) {
-        nextKeys.delete(key);
-      } else {
-        nextKeys.add(key);
-      }
-      return nextKeys;
-    });
-  };
-
-  const applyAttachmentSelection = () => {
-    const nextAttachments = Array.from(draftAttachmentKeys)
-      .map((key) => attachmentOptionsByKey.get(key)?.attachment)
-      .filter((attachment): attachment is EditorAgentAttachmentRef =>
-        Boolean(attachment),
-      );
-    if (nextAttachments.length > EDITOR_AGENT_MAX_ATTACHMENTS) {
-      setAttachmentError(`最多 ${EDITOR_AGENT_MAX_ATTACHMENTS} 张`);
-      return;
-    }
-    setAttachments(nextAttachments);
-    setAttachmentPickerOpen(false);
-  };
-
   const submitMessage = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (isWaiting) {
@@ -355,162 +131,12 @@ export function EditorAgentConversationPanelView({
       return;
     }
     setDraftText('');
-    const nextAttachments = attachments;
-    setAttachments([]);
+    const nextAttachments = consumeAttachments();
     void sendMessage(text, nextAttachments).catch(() => {
       setDraftText((currentText) => (currentText ? currentText : text));
-      setAttachments((currentAttachments) =>
-        currentAttachments.length ? currentAttachments : nextAttachments,
-      );
+      restoreAttachmentsIfEmpty(nextAttachments);
     });
   };
-  const appendAttachments = (nextAttachments: EditorAgentAttachmentRef[]) => {
-    function mergeAttachments(
-      currentAttachments: EditorAgentAttachmentRef[],
-      nextAttachments: EditorAgentAttachmentRef[],
-    ) {
-      const merged = [...currentAttachments];
-      const existingKeys = new Set(currentAttachments.map(attachmentKey));
-      nextAttachments.forEach((attachment) => {
-        const key = attachmentKey(attachment);
-        if (!existingKeys.has(key)) {
-          existingKeys.add(key);
-          merged.push(attachment);
-        }
-      });
-      return merged;
-    }
-    const mergedAttachments = mergeAttachments(attachments, nextAttachments);
-    if (mergedAttachments.length > EDITOR_AGENT_MAX_ATTACHMENTS) {
-      setAttachmentError(`最多 ${EDITOR_AGENT_MAX_ATTACHMENTS} 张`);
-      return false;
-    }
-    setAttachments(mergedAttachments);
-    setAttachmentError(null);
-    return true;
-  };
-
-  const referenceContextAsset = (asset: EditorAgentContextAsset) => {
-    const objectKey = asset.objectKey?.trim();
-    const source = asset.source.trim();
-    if (!objectKey && !source) {
-      return false;
-    }
-    const options = [...canvasAttachmentOptions, ...libraryAttachmentOptions];
-    const objectKeyOption = objectKey
-      ? options.find(
-          ({ attachment }) => attachment.objectKey?.trim() === objectKey,
-        )
-      : undefined;
-    const option =
-      objectKeyOption ||
-      options.find(({ attachment }) => {
-        return (
-          attachment.imageSrc.trim() === source ||
-          attachment.thumbnailSrc?.trim() === source
-        );
-      });
-    return option ? appendAttachments([option.attachment]) : false;
-  };
-
-  const createPastedAgentImageAttachment = async (
-    file: File,
-  ): Promise<EditorAgentAttachmentRef> => {
-    if (!projectId?.trim()) {
-      throw new Error('缺少画布项目');
-    }
-    const [upload, dimensions] = await Promise.all([
-      uploadEditorMediaAssetFile(file, 'image', {
-        pathSegments: ['editor', 'agent-paste', 'image', `${Date.now()}`],
-        entityId: projectId,
-        metadata: {
-          source: 'agent-input-paste',
-        },
-      }),
-      probeImageFileDimensions(file),
-    ]);
-    const width = dimensions?.width ?? 1;
-    const height = dimensions?.height ?? 1;
-    const resource = await createEditorProjectResource(projectId, {
-      imageSrc: upload.src,
-      objectKey: upload.objectKey,
-      assetObjectId: upload.assetObjectId,
-      width,
-      height,
-      sourceType: 'uploaded',
-    });
-    return {
-      source: 'canvas_resource',
-      referenceId: resource.resourceId,
-      objectKey: resource.objectKey ?? upload.objectKey,
-      imageSrc: resource.imageSrc,
-      thumbnailSrc: null,
-      label: resource.label ?? '粘贴图片',
-      width: resource.width,
-      height: resource.height,
-    };
-  };
-  function extractClipboardImageFiles(
-    clipboardData: DataTransfer | null,
-  ): File[] {
-    if (!clipboardData) {
-      return [];
-    }
-    const fileItems = Array.from(clipboardData.files ?? []).filter((file) =>
-      file.type.startsWith('image/'),
-    );
-    return [...fileItems];
-  }
-
-  const handleInputPaste = (
-    event: ReactClipboardEvent<HTMLTextAreaElement>,
-  ) => {
-    const imageFiles = extractClipboardImageFiles(event.clipboardData);
-    if (!imageFiles.length) {
-      return;
-    }
-
-    if (isPastingAttachment) {
-      return;
-    }
-
-    event.preventDefault();
-    if (attachments.length >= EDITOR_AGENT_MAX_ATTACHMENTS) {
-      setAttachmentError(`最多 ${EDITOR_AGENT_MAX_ATTACHMENTS} 张`);
-      return;
-    }
-
-    const remainingAttachmentSlots =
-      EDITOR_AGENT_MAX_ATTACHMENTS - attachments.length;
-    const uploadFiles = imageFiles.slice(0, remainingAttachmentSlots);
-    const hasOverflow = uploadFiles.length < imageFiles.length;
-    // TODO: deduplicate those existing assets
-    setIsPastingAttachment(true);
-    setAttachmentError('图片上传中');
-    void Promise.all(
-      uploadFiles.map((file) => createPastedAgentImageAttachment(file)),
-    )
-      .then((pastedAttachments) => {
-        if (appendAttachments(pastedAttachments) && hasOverflow) {
-          setAttachmentError(`最多 ${EDITOR_AGENT_MAX_ATTACHMENTS} 张`);
-        }
-      })
-      .catch(() => {
-        setAttachmentError('图片粘贴失败，请重试');
-      })
-      .finally(() => {
-        setIsPastingAttachment(false);
-      });
-  };
-
-  const removeAttachment = (targetAttachment: EditorAgentAttachmentRef) => {
-    const key = attachmentKey(targetAttachment);
-    setAttachments((currentAttachments) =>
-      currentAttachments.filter(
-        (attachment) => attachmentKey(attachment) !== key,
-      ),
-    );
-  };
 
   if (!open) {
     return (
@@ -713,7 +339,7 @@ export function EditorAgentConversationPanelView({
           </div>
         </form>
       </aside>
-      <AttachmentPickerModal
+      <AttachmentPicker
         open={attachmentPickerOpen}
         tab={attachmentPickerTab}
         canvasOptions={canvasAttachmentOptions}
@@ -723,7 +349,7 @@ export function EditorAgentConversationPanelView({
         onTabChange={setAttachmentPickerTab}
         onToggleKey={toggleAttachmentKey}
         onApply={applyAttachmentSelection}
-        onClose={() => setAttachmentPickerOpen(false)}
+        onClose={closeAttachmentPicker}
       />
       <PlatformDangerConfirmDialog
         open={deleteConfirmOpen}
diff --git a/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
new file mode 100644
index 000000000..ca5205276
--- /dev/null
+++ b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
@@ -0,0 +1,375 @@
+import {
+  type ClipboardEvent as ReactClipboardEvent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  EDITOR_AGENT_MAX_ATTACHMENTS,
+  type EditorAgentAttachmentRef,
+} from '@/packages/shared/src/contracts';
+import type {
+  CanvasLayer,
+  EditorAsset,
+} from '@/src/components/image-editor/ImageCanvasEditorTypes.ts';
+import { probeImageFileDimensions } from '@/src/components/image-editor/ImageCanvasFileModel.ts';
+import { uploadEditorMediaAssetFile } from '@/src/services/image-editor/editorMediaAssetUploadClient.ts';
+import { createEditorProjectResource } from '@/src/services/image-editor/editorProjectClient.ts';
+
+import { attachmentKey, type EditorAgentContextAsset } from './common.ts';
+
+export type AttachmentPickerTab = 'canvas' | 'library';
+
+export type EditorAgentAttachmentOption = {
+  key: string;
+  sourceLabel: string;
+  attachment: EditorAgentAttachmentRef;
+};
+
+type AttachmentUpdater =
+  | EditorAgentAttachmentRef[]
+  | ((
+      currentAttachments: EditorAgentAttachmentRef[],
+    ) => EditorAgentAttachmentRef[]);
+
+function isImageLayer(layer: CanvasLayer) {
+  return (
+    (layer.mediaType ?? 'image') === 'image' &&
+    Boolean(layer.resourceId?.trim()) &&
+    layer.src.trim()
+  );
+}
+
+function isImageAsset(asset: EditorAsset) {
+  return (asset.mediaType ?? 'image') === 'image' && asset.src.trim();
+}
+
+function createCanvasAttachmentOptions(
+  layers: CanvasLayer[],
+): EditorAgentAttachmentOption[] {
+  return layers.filter(isImageLayer).map((layer) => {
+    const attachment: EditorAgentAttachmentRef = {
+      source: 'canvas_resource',
+      referenceId: layer.resourceId || layer.id,
+      objectKey: layer.objectKey ?? null,
+      imageSrc: layer.src,
+      thumbnailSrc: layer.thumbnailSrc ?? null,
+      label: layer.title,
+      width: layer.width,
+      height: layer.height,
+    };
+    return {
+      key: attachmentKey(attachment),
+      sourceLabel: '画布',
+      attachment,
+    };
+  });
+}
+
+function createLibraryAttachmentOptions(
+  assets: EditorAsset[],
+): EditorAgentAttachmentOption[] {
+  return assets.filter(isImageAsset).map((asset) => {
+    const attachment: EditorAgentAttachmentRef = {
+      source: 'library_asset',
+      referenceId: asset.id,
+      objectKey: asset.objectKey ?? null,
+      imageSrc: asset.src,
+      thumbnailSrc: asset.thumbnailSrc ?? null,
+      label: asset.label,
+      width: asset.width,
+      height: asset.height,
+    };
+    return {
+      key: attachmentKey(attachment),
+      sourceLabel: '素材库',
+      attachment,
+    };
+  });
+}
+
+function mergeAttachments(
+  currentAttachments: EditorAgentAttachmentRef[],
+  nextAttachments: EditorAgentAttachmentRef[],
+) {
+  const merged = [...currentAttachments];
+  const existingKeys = new Set(currentAttachments.map(attachmentKey));
+  nextAttachments.forEach((attachment) => {
+    const key = attachmentKey(attachment);
+    if (!existingKeys.has(key)) {
+      existingKeys.add(key);
+      merged.push(attachment);
+    }
+  });
+  return merged;
+}
+
+function extractClipboardImageFiles(clipboardData: DataTransfer | null) {
+  if (!clipboardData) {
+    return [];
+  }
+  return Array.from(clipboardData.files ?? []).filter((file) =>
+    file.type.startsWith('image/'),
+  );
+}
+
+async function createPastedAgentImageAttachment(
+  projectId: string,
+  file: File,
+): Promise<EditorAgentAttachmentRef> {
+  const [upload, dimensions] = await Promise.all([
+    uploadEditorMediaAssetFile(file, 'image', {
+      pathSegments: ['editor', 'agent-paste', 'image', `${Date.now()}`],
+      entityId: projectId,
+      metadata: {
+        source: 'agent-input-paste',
+      },
+    }),
+    probeImageFileDimensions(file),
+  ]);
+  const width = dimensions?.width ?? 1;
+  const height = dimensions?.height ?? 1;
+  const resource = await createEditorProjectResource(projectId, {
+    imageSrc: upload.src,
+    objectKey: upload.objectKey,
+    assetObjectId: upload.assetObjectId,
+    width,
+    height,
+    sourceType: 'uploaded',
+  });
+  return {
+    source: 'canvas_resource',
+    referenceId: resource.resourceId,
+    objectKey: resource.objectKey ?? upload.objectKey,
+    imageSrc: resource.imageSrc,
+    thumbnailSrc: null,
+    label: resource.label ?? '粘贴图片',
+    width: resource.width,
+    height: resource.height,
+  };
+}
+
+export function useConversationAttachments({
+  projectId,
+  layers,
+  assets,
+}: {
+  projectId: string | null;
+  layers: CanvasLayer[];
+  assets: EditorAsset[];
+}) {
+  const [attachments, setAttachments] = useState<EditorAgentAttachmentRef[]>(
+    [],
+  );
+  const attachmentsRef = useRef<EditorAgentAttachmentRef[]>([]);
+  const [attachmentPickerOpen, setAttachmentPickerOpen] = useState(false);
+  const [attachmentPickerTab, setAttachmentPickerTab] =
+    useState<AttachmentPickerTab>('canvas');
+  const [attachmentError, setAttachmentError] = useState<string | null>(null);
+  const [isPastingAttachment, setIsPastingAttachment] = useState(false);
+  const isPastingAttachmentRef = useRef(false);
+  const [draftAttachmentKeys, setDraftAttachmentKeys] = useState<Set<string>>(
+    () => new Set(),
+  );
+
+  const canvasAttachmentOptions = useMemo(
+    () => createCanvasAttachmentOptions(layers),
+    [layers],
+  );
+  const libraryAttachmentOptions = useMemo(
+    () => createLibraryAttachmentOptions(assets),
+    [assets],
+  );
+  const attachmentOptions = useMemo(
+    () => [...canvasAttachmentOptions, ...libraryAttachmentOptions],
+    [canvasAttachmentOptions, libraryAttachmentOptions],
+  );
+  const attachmentOptionsByKey = useMemo(() => {
+    const optionMap = new Map<string, EditorAgentAttachmentOption>();
+    attachmentOptions.forEach((option) => optionMap.set(option.key, option));
+    return optionMap;
+  }, [attachmentOptions]);
+
+  const updateAttachments = useCallback((updater: AttachmentUpdater) => {
+    const nextAttachments =
+      typeof updater === 'function' ? updater(attachmentsRef.current) : updater;
+    attachmentsRef.current = nextAttachments;
+    setAttachments(nextAttachments);
+    return nextAttachments;
+  }, []);
+
+  const appendAttachments = useCallback(
+    (nextAttachments: EditorAgentAttachmentRef[]) => {
+      const mergedAttachments = mergeAttachments(
+        attachmentsRef.current,
+        nextAttachments,
+      );
+      if (mergedAttachments.length > EDITOR_AGENT_MAX_ATTACHMENTS) {
+        setAttachmentError(`最多 ${EDITOR_AGENT_MAX_ATTACHMENTS} 张`);
+        return false;
+      }
+      updateAttachments(mergedAttachments);
+      setAttachmentError(null);
+      return true;
+    },
+    [updateAttachments],
+  );
+
+  const openAttachmentPicker = useCallback(() => {
+    setAttachmentError(null);
+    setDraftAttachmentKeys(new Set(attachmentsRef.current.map(attachmentKey)));
+    setAttachmentPickerOpen(true);
+  }, []);
+
+  const closeAttachmentPicker = useCallback(() => {
+    setAttachmentPickerOpen(false);
+  }, []);
+
+  const toggleAttachmentKey = useCallback((key: string) => {
+    setDraftAttachmentKeys((currentKeys) => {
+      const nextKeys = new Set(currentKeys);
+      if (nextKeys.has(key)) {
+        nextKeys.delete(key);
+      } else {
+        nextKeys.add(key);
+      }
+      return nextKeys;
+    });
+  }, []);
+
+  const applyAttachmentSelection = useCallback(() => {
+    const nextAttachments = Array.from(draftAttachmentKeys)
+      .map((key) => attachmentOptionsByKey.get(key)?.attachment)
+      .filter((attachment): attachment is EditorAgentAttachmentRef =>
+        Boolean(attachment),
+      );
+    if (nextAttachments.length > EDITOR_AGENT_MAX_ATTACHMENTS) {
+      setAttachmentError(`最多 ${EDITOR_AGENT_MAX_ATTACHMENTS} 张`);
+      return;
+    }
+    updateAttachments(nextAttachments);
+    setAttachmentPickerOpen(false);
+  }, [attachmentOptionsByKey, draftAttachmentKeys, updateAttachments]);
+
+  const referenceContextAsset = useCallback(
+    (asset: EditorAgentContextAsset) => {
+      const objectKey = asset.objectKey?.trim();
+      const source = asset.source.trim();
+      if (!objectKey && !source) {
+        return false;
+      }
+      const objectKeyOption = objectKey
+        ? attachmentOptions.find(
+            ({ attachment }) => attachment.objectKey?.trim() === objectKey,
+          )
+        : undefined;
+      const option =
+        objectKeyOption ||
+        attachmentOptions.find(({ attachment }) => {
+          return (
+            attachment.imageSrc.trim() === source ||
+            attachment.thumbnailSrc?.trim() === source
+          );
+        });
+      return option ? appendAttachments([option.attachment]) : false;
+    },
+    [appendAttachments, attachmentOptions],
+  );
+
+  const handleInputPaste = useCallback(
+    (event: ReactClipboardEvent<HTMLTextAreaElement>) => {
+      const imageFiles = extractClipboardImageFiles(event.clipboardData);
+      if (!imageFiles.length || isPastingAttachmentRef.current) {
+        return;
+      }
+
+      event.preventDefault();
+      const remainingAttachmentSlots =
+        EDITOR_AGENT_MAX_ATTACHMENTS - attachmentsRef.current.length;
+      if (remainingAttachmentSlots <= 0) {
+        setAttachmentError(`最多 ${EDITOR_AGENT_MAX_ATTACHMENTS} 张`);
+        return;
+      }
+
+      const uploadFiles = imageFiles.slice(0, remainingAttachmentSlots);
+      const hasOverflow = uploadFiles.length < imageFiles.length;
+      const currentProjectId = projectId?.trim();
+      if (!currentProjectId) {
+        setAttachmentError('缺少画布项目');
+        return;
+      }
+
+      isPastingAttachmentRef.current = true;
+      setIsPastingAttachment(true);
+      setAttachmentError('图片上传中');
+      void Promise.all(
+        uploadFiles.map((file) =>
+          createPastedAgentImageAttachment(currentProjectId, file),
+        ),
+      )
+        .then((pastedAttachments) => {
+          if (appendAttachments(pastedAttachments) && hasOverflow) {
+            setAttachmentError(`最多 ${EDITOR_AGENT_MAX_ATTACHMENTS} 张`);
+          }
+        })
+        .catch(() => {
+          setAttachmentError('图片粘贴失败，请重试');
+        })
+        .finally(() => {
+          isPastingAttachmentRef.current = false;
+          setIsPastingAttachment(false);
+        });
+    },
+    [appendAttachments, projectId],
+  );
+
+  const removeAttachment = useCallback(
+    (targetAttachment: EditorAgentAttachmentRef) => {
+      const key = attachmentKey(targetAttachment);
+      updateAttachments((currentAttachments) =>
+        currentAttachments.filter(
+          (attachment) => attachmentKey(attachment) !== key,
+        ),
+      );
+    },
+    [updateAttachments],
+  );
+
+  const consumeAttachments = useCallback(() => {
+    const currentAttachments = attachmentsRef.current;
+    updateAttachments([]);
+    return currentAttachments;
+  }, [updateAttachments]);
+
+  const restoreAttachmentsIfEmpty = useCallback(
+    (failedAttachments: EditorAgentAttachmentRef[]) => {
+      updateAttachments((currentAttachments) =>
+        currentAttachments.length ? currentAttachments : failedAttachments,
+      );
+    },
+    [updateAttachments],
+  );
+
+  return {
+    attachments,
+    attachmentError,
+    isPastingAttachment,
+    attachmentPickerOpen,
+    attachmentPickerTab,
+    draftAttachmentKeys,
+    canvasAttachmentOptions,
+    libraryAttachmentOptions,
+    setAttachmentPickerTab,
+    openAttachmentPicker,
+    closeAttachmentPicker,
+    toggleAttachmentKey,
+    applyAttachmentSelection,
+    referenceContextAsset,
+    handleInputPaste,
+    removeAttachment,
+    consumeAttachments,
+    restoreAttachmentsIfEmpty,
+  };
+}
-- 
2.52.0


From e8d8dee7674c9f378e7322788e6bdf4c7a59790f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 20 Jul 2026 19:52:49 +0800
Subject: [PATCH 06/13] fix interactive error

---
 .../【编辑器】画布Agent对话面板-2026-07-03.md |  1 +
 .../MessageBubble.test.tsx                    | 88 +++++++++++++++++--
 .../MessageBubbleRightClickMenu.tsx           |  8 ++
 .../useRightClickMenu.ts                      | 14 +--
 4 files changed, 98 insertions(+), 13 deletions(-)

diff --git a/docs/【编辑器】画布Agent对话面板-2026-07-03.md b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
index 0bde7f9b9..daa156bcf 100644
--- a/docs/【编辑器】画布Agent对话面板-2026-07-03.md
+++ b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
@@ -116,6 +116,7 @@
 6. 错误气泡（失败/余额不足，带原因）；
 7. 普通消息请求等待期间禁用发送按钮，不提供客户端停止操作；前端持续等待后端响应，避免后端已持久化消息但前端中断请求后产生会话状态错位。
 8. 桌面端右键消息正文可复制该条可见文本；右键消息附件或生成结果可下载素材，图片额外支持复制图片本体和“引用”到当前输入区。引用复用附件去重、9 张上限和发送链路；右键菜单只保留已有的 `objectKey` 与素材 `source`，引用时由输入区优先按 `objectKey`、缺失时按 `source` 从当前画布和素材库选项重新查询并构造 `EditorAgentAttachmentRef`，同时命中时画布优先。
+9. 消息右键菜单遵循 Canva 式单实例交互：任一菜单已打开时，下一次右键必须先关闭旧菜单；新落点是消息正文或素材时再在新位置打开对应菜单，新落点没有右键动作时仅收起旧菜单，不允许多个消息菜单并存。复制、引用或下载成功后自动关闭菜单；失败时保留菜单和失败状态，避免错误无提示消失。
 
 不做（明确排除，防止后人补齐）：
 
diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
index 6b02603ff..6aec36f33 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
@@ -95,9 +95,74 @@ describe('MessageBubble', () => {
     await waitFor(() =>
       expect(copyTextToClipboard).toHaveBeenCalledWith('第一行\n第二行'),
     );
-    expect(
-      await screen.findByRole('menuitem', { name: '已复制' }),
-    ).toBeTruthy();
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('menu', { name: '消息右键菜单' }),
+      ).toBeNull(),
+    );
+  });
+
+  it('closes the previous menu before another right click opens a new one', () => {
+    render(
+      <>
+        <MessageBubble
+          message={{
+            id: 40,
+            role: 'assistant',
+            text: '第一条消息',
+            attachments: [],
+            toolCall: null,
+            createdAt: '2026-07-20T00:00:00Z',
+          }}
+          busyAction={null}
+          onConfirmToolCall={vi.fn()}
+          onCancelToolCall={vi.fn()}
+        />
+        <MessageBubble
+          message={{
+            id: 41,
+            role: 'assistant',
+            text: '第二条消息',
+            attachments: [],
+            toolCall: null,
+            createdAt: '2026-07-20T00:00:00Z',
+          }}
+          busyAction={null}
+          onConfirmToolCall={vi.fn()}
+          onCancelToolCall={vi.fn()}
+        />
+      </>,
+    );
+
+    const messages = screen.getAllByLabelText('Agent消息');
+    fireEvent.contextMenu(messages[0]!, { clientX: 30, clientY: 40 });
+    fireEvent.contextMenu(messages[1]!, { clientX: 70, clientY: 80 });
+
+    const menus = screen.getAllByRole('menu', { name: '消息右键菜单' });
+    expect(menus).toHaveLength(1);
+    expect(menus[0]?.style.left).toBe('70px');
+    expect(menus[0]?.style.top).toBe('80px');
+  });
+
+  it('closes an open menu when the next right click has no menu target', () => {
+    renderMessage({
+      id: 42,
+      role: 'assistant',
+      text: '右键后应可收起',
+      attachments: [],
+      toolCall: null,
+      createdAt: '2026-07-20T00:00:00Z',
+    });
+
+    fireEvent.contextMenu(screen.getByLabelText('Agent消息'), {
+      clientX: 30,
+      clientY: 40,
+    });
+    expect(screen.getByRole('menu', { name: '消息右键菜单' })).toBeTruthy();
+
+    fireEvent.contextMenu(document.body, { clientX: 70, clientY: 80 });
+
+    expect(screen.queryByRole('menu', { name: '消息右键菜单' })).toBeNull();
   });
 
   it('copies an attached WebP as PNG without opening the message text menu', async () => {
@@ -182,7 +247,11 @@ describe('MessageBubble', () => {
         .fn()
         .mockResolvedValue(new Blob(['webp'], { type: 'image/webp' })),
     } as unknown as Response);
-    await screen.findByRole('menuitem', { name: '已复制' });
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('menu', { name: '消息素材右键菜单' }),
+      ).toBeNull(),
+    );
     expect(bitmapClose).toHaveBeenCalledTimes(1);
   });
 
@@ -219,9 +288,11 @@ describe('MessageBubble', () => {
         objectKey: 'editor/reference.png',
       }),
     );
-    expect(
-      await screen.findByRole('menuitem', { name: '已引用' }),
-    ).toBeTruthy();
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('menu', { name: '消息素材右键菜单' }),
+      ).toBeNull(),
+    );
   });
 
   it('offers reference for generated images using their media lookup fields', async () => {
@@ -335,6 +406,9 @@ describe('MessageBubble', () => {
     fireEvent.click(screen.getByRole('menuitem', { name: '下载视频' }));
 
     await waitFor(() => expect(anchorClick).toHaveBeenCalledTimes(1));
+    expect(
+      screen.queryByRole('menu', { name: '消息素材右键菜单' }),
+    ).toBeNull();
     expect(createObjectURL).toHaveBeenCalledWith(expect.any(Blob));
     expect(revokeObjectURL).toHaveBeenCalledWith('blob:agent-video');
   });
diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
index 689cf9663..0bbb3c367 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
@@ -115,17 +115,25 @@ export function MessageBubbleRightClickMenu({
         onClose();
       }
     };
+    const handleContextMenu = (event: MouseEvent) => {
+      if (menuRef.current?.contains(event.target as Node)) {
+        event.preventDefault();
+      }
+      onClose();
+    };
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         onClose();
       }
     };
     window.addEventListener('pointerdown', handlePointerDown);
+    window.addEventListener('contextmenu', handleContextMenu, true);
     window.addEventListener('keydown', handleKeyDown);
     window.addEventListener('scroll', onClose, true);
     window.addEventListener('resize', onClose);
     return () => {
       window.removeEventListener('pointerdown', handlePointerDown);
+      window.removeEventListener('contextmenu', handleContextMenu, true);
       window.removeEventListener('keydown', handleKeyDown);
       window.removeEventListener('scroll', onClose, true);
       window.removeEventListener('resize', onClose);
diff --git a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
index fa6c5e84e..b69dd09de 100644
--- a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
+++ b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
@@ -197,12 +197,14 @@ export function useRightClickMenu({
               : false;
       setRightClickMenu((current) =>
         current?.target === target && current.pendingAction === action
-          ? {
-              ...current,
-              pendingAction: null,
-              resultAction: action,
-              result: succeeded ? 'success' : 'error',
-            }
+          ? succeeded
+            ? null
+            : {
+                ...current,
+                pendingAction: null,
+                resultAction: action,
+                result: 'error',
+              }
           : current,
       );
     },
-- 
2.52.0


From 3bea67d01a56fca61548af7c0ce4be08f6fba755 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Tue, 21 Jul 2026 12:51:42 +0800
Subject: [PATCH 07/13] editor agent: update data structure , allow ref
 attachment

---
 .../【编辑器】画布Agent对话面板-2026-07-03.md |   2 +-
 .../AttachmentChip.tsx                        |   4 +-
 .../EditorAgentConversationPanelView.test.tsx | 148 ++++++++++++++++++
 .../MessageBubble.test.tsx                    |   8 +-
 .../MessageBubbleRightClickMenu.tsx           |   3 +-
 .../EditorAgentConversation/ToolCallView.tsx  |   9 +-
 .../EditorAgentConversation/common.ts         |  23 ++-
 .../useConversationAttachments.ts             |  40 +++--
 .../useRightClickMenu.ts                      |   7 +-
 9 files changed, 217 insertions(+), 27 deletions(-)

diff --git a/docs/【编辑器】画布Agent对话面板-2026-07-03.md b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
index 51eb670df..34779120b 100644
--- a/docs/【编辑器】画布Agent对话面板-2026-07-03.md
+++ b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
@@ -117,7 +117,7 @@
 5. 生成中的进行中动画；
 6. 错误气泡（失败/余额不足，带原因）；
 7. 普通消息请求等待期间禁用发送按钮，不提供客户端停止操作；前端持续等待后端响应，避免后端已持久化消息但前端中断请求后产生会话状态错位。
-8. 桌面端右键消息正文可复制该条可见文本；右键消息附件或生成结果可下载素材，图片额外支持复制图片本体和“引用”到当前输入区。引用复用附件去重、9 张上限和发送链路；右键菜单只保留已有的 `objectKey` 与素材 `source`，引用时由输入区优先按 `objectKey`、缺失时按 `source` 从当前画布和素材库选项重新查询并构造 `EditorAgentAttachmentRef`，同时命中时画布优先。
+8. 桌面端右键消息正文可复制该条可见文本；右键消息附件或生成结果可下载素材，图片额外支持复制图片本体和“引用”到当前输入区。引用复用附件去重、9 张上限和发送链路；
 9. 消息右键菜单遵循 Canva 式单实例交互：任一菜单已打开时，下一次右键必须先关闭旧菜单；新落点是消息正文或素材时再在新位置打开对应菜单，新落点没有右键动作时仅收起旧菜单，不允许多个消息菜单并存。复制、引用或下载成功后自动关闭菜单；失败时保留菜单和失败状态，避免错误无提示消失。
 
 不做（明确排除，防止后人补齐）：
diff --git a/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx b/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx
index b5596b7a5..b4e9cfaeb 100644
--- a/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx
+++ b/src/components/image-editor/EditorAgentConversation/AttachmentChip.tsx
@@ -22,9 +22,9 @@ function AttachmentChip({
         onRightClickMenu
           ? (event) =>
               onRightClickMenu(event, {
+                ...attachment,
+                kind: 'attachment',
                 mediaType: 'image',
-                source: attachment.imageSrc,
-                objectKey: attachment.objectKey,
                 suggestedFileName: label,
               })
           : undefined
diff --git a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
index 26e249099..ef29dcfb7 100644
--- a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
@@ -531,6 +531,154 @@ describe('EditorAgentConversationPanelView', () => {
     expect(screen.queryByRole('option', { name: 'conversation-1' })).toBeNull();
   });
 
+  it('references a historical pasted attachment outside the current canvas', async () => {
+    const client = createClient();
+    vi.mocked(client.getConversation).mockResolvedValue({
+      conversationId: 'conversation-1',
+      projectId: 'project-1',
+      title: '历史附件',
+      messages: [
+        {
+          id: 8,
+          role: 'user',
+          text: '参考这张粘贴图',
+          attachments: [
+            {
+              source: 'canvas_resource',
+              referenceId: 'resource-historical-paste',
+              objectKey: 'editor/agent-paste/historical.png',
+              imageSrc: '/generated/historical-paste.png',
+              thumbnailSrc: null,
+              label: '历史粘贴图',
+              width: 320,
+              height: 240,
+            },
+          ],
+          toolCall: null,
+          createdAt: '2026-07-20T00:00:00.000Z',
+        },
+      ],
+      createdAt: '2026-07-20T00:00:00.000Z',
+      updatedAt: '2026-07-20T00:00:10.000Z',
+    });
+
+    render(
+      <EditorAgentConversationPanelView
+        open
+        onToggleOpen={vi.fn()}
+        client={client}
+        layers={[]}
+        assets={[]}
+      />,
+    );
+
+    const historicalAttachment = await screen.findByText('历史粘贴图');
+    fireEvent.contextMenu(historicalAttachment.closest('.group')!);
+    fireEvent.click(screen.getByRole('menuitem', { name: '引用' }));
+    await waitFor(() => {
+      expect(screen.getAllByText('历史粘贴图')).toHaveLength(2);
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: '发送' }));
+    await waitFor(() => {
+      expect(client.sendMessage).toHaveBeenCalledWith(
+        'conversation-1',
+        expect.objectContaining({
+          attachments: [
+            {
+              source: 'canvas_resource',
+              referenceId: 'resource-historical-paste',
+              objectKey: 'editor/agent-paste/historical.png',
+              imageSrc: '/generated/historical-paste.png',
+              thumbnailSrc: null,
+              label: '历史粘贴图',
+              width: 320,
+              height: 240,
+            },
+          ],
+        }),
+        expect.any(Object),
+      );
+    });
+  });
+
+  it('prefers the current attachment matched by source and reference id', async () => {
+    const client = createClient();
+    vi.mocked(client.getConversation).mockResolvedValue({
+      conversationId: 'conversation-1',
+      projectId: 'project-1',
+      title: '附件更新',
+      messages: [
+        {
+          id: 8,
+          role: 'user',
+          text: '参考旧版图片',
+          attachments: [
+            {
+              source: 'canvas_resource',
+              referenceId: 'resource-updated',
+              objectKey: 'editor/old.png',
+              imageSrc: '/generated/old.png',
+              label: '旧版附件',
+            },
+          ],
+          toolCall: null,
+          createdAt: '2026-07-20T00:00:00.000Z',
+        },
+      ],
+      createdAt: '2026-07-20T00:00:00.000Z',
+      updatedAt: '2026-07-20T00:00:10.000Z',
+    });
+
+    render(
+      <EditorAgentConversationPanelView
+        open
+        onToggleOpen={vi.fn()}
+        client={client}
+        layers={[
+          {
+            id: 'layer-updated',
+            resourceId: 'resource-updated',
+            title: '最新附件',
+            src: '/generated/current.png',
+            objectKey: 'editor/current.png',
+            x: 0,
+            y: 0,
+            width: 512,
+            height: 512,
+            originalWidth: 512,
+            originalHeight: 512,
+            zIndex: 1,
+            sourceType: 'generated',
+          },
+        ]}
+      />,
+    );
+
+    const historicalAttachment = await screen.findByText('旧版附件');
+    fireEvent.contextMenu(historicalAttachment.closest('.group')!);
+    fireEvent.click(screen.getByRole('menuitem', { name: '引用' }));
+    expect(await screen.findByText('最新附件')).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: '发送' }));
+    await waitFor(() => {
+      expect(client.sendMessage).toHaveBeenCalledWith(
+        'conversation-1',
+        expect.objectContaining({
+          attachments: [
+            expect.objectContaining({
+              source: 'canvas_resource',
+              referenceId: 'resource-updated',
+              objectKey: 'editor/current.png',
+              imageSrc: '/generated/current.png',
+            }),
+          ],
+        }),
+        expect.any(Object),
+      );
+    });
+  });
+
   it('keeps a referenced image when a pending paste upload finishes', async () => {
     const client = createClient();
     vi.mocked(client.getConversation).mockResolvedValue({
diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
index 6aec36f33..2d9866437 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
@@ -284,7 +284,10 @@ describe('MessageBubble', () => {
 
     expect(onReferenceImage).toHaveBeenCalledWith(
       expect.objectContaining({
-        source: '/generated-editor-images/reference.png',
+        kind: 'attachment',
+        source: 'canvas_resource',
+        referenceId: 'resource-reference-1',
+        imageSrc: '/generated-editor-images/reference.png',
         objectKey: 'editor/reference.png',
       }),
     );
@@ -339,7 +342,8 @@ describe('MessageBubble', () => {
     fireEvent.click(screen.getByRole('menuitem', { name: '引用' }));
     expect(onReferenceImage).toHaveBeenCalledWith(
       expect.objectContaining({
-        source: '/generated-editor-images/generated.png',
+        kind: 'generated_media',
+        mediaSrc: '/generated-editor-images/generated.png',
         objectKey: 'editor/generated.png',
       }),
     );
diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
index 0bbb3c367..743813b4f 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubbleRightClickMenu.tsx
@@ -2,6 +2,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import {
+  contextAssetMediaSrc,
   type EditorAgentContextAsset,
   EditorAgentRightClickAction,
   type RightClickMenuTarget,
@@ -176,7 +177,7 @@ export function MessageBubbleRightClickMenu({
         <>
           {target.asset.mediaType === 'image' ? (
             <>
-              {target.asset.source.trim() ? (
+              {contextAssetMediaSrc(target.asset).trim() ? (
                 <button
                   type="button"
                   role="menuitem"
diff --git a/src/components/image-editor/EditorAgentConversation/ToolCallView.tsx b/src/components/image-editor/EditorAgentConversation/ToolCallView.tsx
index 74ba190cc..65279fd36 100644
--- a/src/components/image-editor/EditorAgentConversation/ToolCallView.tsx
+++ b/src/components/image-editor/EditorAgentConversation/ToolCallView.tsx
@@ -117,8 +117,9 @@ function ToolCallView({
                 onRightClickMenu
                   ? (event) =>
                       onRightClickMenu(event, {
+                        kind: 'generated_media',
                         mediaType: 'image',
-                        source: image.imageSrc,
+                        mediaSrc: image.imageSrc,
                         objectKey: image.objectKey,
                         suggestedFileName: `Agent生成图片-${index + 1}`,
                       })
@@ -146,8 +147,9 @@ function ToolCallView({
                 onRightClickMenu
                   ? (event) =>
                       onRightClickMenu(event, {
+                        kind: 'generated_media',
                         mediaType: 'video',
-                        source: video.videoSrc,
+                        mediaSrc: video.videoSrc,
                         objectKey: video.objectKey,
                         suggestedFileName: `Agent生成视频-${index + 1}`,
                       })
@@ -180,8 +182,9 @@ function ToolCallView({
                 onRightClickMenu
                   ? (event) =>
                       onRightClickMenu(event, {
+                        kind: 'generated_media',
                         mediaType: 'audio',
-                        source: audio.audioSrc,
+                        mediaSrc: audio.audioSrc,
                         objectKey: audio.objectKey,
                         suggestedFileName: `Agent生成音频-${index + 1}`,
                       })
diff --git a/src/components/image-editor/EditorAgentConversation/common.ts b/src/components/image-editor/EditorAgentConversation/common.ts
index c6390426b..fbcf716ce 100644
--- a/src/components/image-editor/EditorAgentConversation/common.ts
+++ b/src/components/image-editor/EditorAgentConversation/common.ts
@@ -9,12 +9,19 @@ export enum EditorAgentRightClickAction {
   DownloadAsset = 'download_asset',
 }
 
-export type EditorAgentContextAsset = {
-  mediaType: 'image' | 'video' | 'audio';
-  source: string;
-  objectKey?: string | null;
-  suggestedFileName: string;
-};
+export type EditorAgentContextAsset =
+  | (EditorAgentAttachmentRef & {
+      kind: 'attachment';
+      mediaType: 'image';
+      suggestedFileName: string;
+    })
+  | {
+      kind: 'generated_media';
+      mediaType: 'image' | 'video' | 'audio';
+      mediaSrc: string;
+      objectKey?: string | null;
+      suggestedFileName: string;
+    };
 
 export type RightClickMenuTarget =
   | { kind: 'text'; text: string }
@@ -28,3 +35,7 @@ export type RightClickMenuHandler = (
 export function attachmentKey(attachment: EditorAgentAttachmentRef) {
   return `${attachment.source}:${attachment.referenceId}`;
 }
+
+export function contextAssetMediaSrc(asset: EditorAgentContextAsset) {
+  return asset.kind === 'attachment' ? asset.imageSrc : asset.mediaSrc;
+}
diff --git a/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
index ca5205276..626d56df5 100644
--- a/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
+++ b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
@@ -18,7 +18,11 @@ import { probeImageFileDimensions } from '@/src/components/image-editor/ImageCan
 import { uploadEditorMediaAssetFile } from '@/src/services/image-editor/editorMediaAssetUploadClient.ts';
 import { createEditorProjectResource } from '@/src/services/image-editor/editorProjectClient.ts';
 
-import { attachmentKey, type EditorAgentContextAsset } from './common.ts';
+import {
+  attachmentKey,
+  contextAssetMediaSrc,
+  type EditorAgentContextAsset,
+} from './common.ts';
 
 export type AttachmentPickerTab = 'canvas' | 'library';
 
@@ -255,11 +259,24 @@ export function useConversationAttachments({
 
   const referenceContextAsset = useCallback(
     (asset: EditorAgentContextAsset) => {
+      const directAttachment: EditorAgentAttachmentRef | undefined =
+        asset.kind === 'attachment'
+          ? {
+              source: asset.source,
+              referenceId: asset.referenceId,
+              objectKey: asset.objectKey,
+              imageSrc: asset.imageSrc,
+              thumbnailSrc: asset.thumbnailSrc,
+              label: asset.label,
+              width: asset.width,
+              height: asset.height,
+            }
+          : undefined;
+      const referenceOption = directAttachment
+        ? attachmentOptionsByKey.get(attachmentKey(directAttachment))
+        : undefined;
       const objectKey = asset.objectKey?.trim();
-      const source = asset.source.trim();
-      if (!objectKey && !source) {
-        return false;
-      }
+      const mediaSrc = contextAssetMediaSrc(asset).trim();
       const objectKeyOption = objectKey
         ? attachmentOptions.find(
             ({ attachment }) => attachment.objectKey?.trim() === objectKey,
@@ -269,13 +286,18 @@ export function useConversationAttachments({
         objectKeyOption ||
         attachmentOptions.find(({ attachment }) => {
           return (
-            attachment.imageSrc.trim() === source ||
-            attachment.thumbnailSrc?.trim() === source
+            attachment.imageSrc.trim() === mediaSrc ||
+            attachment.thumbnailSrc?.trim() === mediaSrc
           );
         });
-      return option ? appendAttachments([option.attachment]) : false;
+      const matchedAttachment =
+        referenceOption?.attachment || option?.attachment || directAttachment;
+      return matchedAttachment?.referenceId.trim() &&
+        matchedAttachment.imageSrc.trim()
+        ? appendAttachments([matchedAttachment])
+        : false;
     },
-    [appendAttachments, attachmentOptions],
+    [appendAttachments, attachmentOptions, attachmentOptionsByKey],
   );
 
   const handleInputPaste = useCallback(
diff --git a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
index b69dd09de..5d29b1230 100644
--- a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
+++ b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
@@ -8,6 +8,7 @@ import { readAssetBytes } from '@/src/services/assetReadUrlService.ts';
 import { copyTextToClipboard } from '@/src/services/clipboard.ts';
 
 import {
+  contextAssetMediaSrc,
   type EditorAgentContextAsset,
   EditorAgentRightClickAction,
   type RightClickMenuTarget,
@@ -93,7 +94,7 @@ async function copyAssetImage(asset: EditorAgentContextAsset) {
     return false;
   }
   try {
-    const pngBlob = readAssetBytes(asset.source, {
+    const pngBlob = readAssetBytes(contextAssetMediaSrc(asset), {
       objectKey: asset.objectKey,
     }).then(async (response) => convertImageBlobToPng(await response.blob()));
     // Clipboard write must start in the menu click's user-activation stack.
@@ -115,7 +116,7 @@ async function downloadAsset(asset: EditorAgentContextAsset) {
     return false;
   }
   try {
-    const response = await readAssetBytes(asset.source, {
+    const response = await readAssetBytes(contextAssetMediaSrc(asset), {
       objectKey: asset.objectKey,
     });
     const blob = await response.blob();
@@ -189,7 +190,7 @@ export function useRightClickMenu({
             : action === EditorAgentRightClickAction.ReferenceImage &&
                 target.kind === 'asset' &&
                 target.asset.mediaType === 'image' &&
-                target.asset.source.trim()
+                contextAssetMediaSrc(target.asset).trim()
               ? (onReferenceImage?.(target.asset) ?? false)
             : action === EditorAgentRightClickAction.DownloadAsset &&
                 target.kind === 'asset'
-- 
2.52.0


From 4ff482fcc1c80acb47f67eb850556c2b4febe184 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Tue, 21 Jul 2026 13:41:28 +0800
Subject: [PATCH 08/13] editor agent: add host bridge support for exporting
 images and audio from right-click menu

---
 .../MessageBubble.test.tsx                    | 192 +++++++++++++++++-
 .../useRightClickMenu.ts                      | 178 ++++++++++++----
 2 files changed, 320 insertions(+), 50 deletions(-)

diff --git a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
index 2d9866437..328738e8b 100644
--- a/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/MessageBubble.test.tsx
@@ -1,11 +1,16 @@
 /* @vitest-environment jsdom */
 
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { EditorAgentMessage } from '@/packages/shared/src/contracts';
 import { readAssetBytes } from '@/src/services/assetReadUrlService.ts';
 import { copyTextToClipboard } from '@/src/services/clipboard.ts';
+import {
+  resetHostRuntimeCacheForTest,
+  setHostRuntimeCacheForTest,
+} from '@/src/services/host-bridge/hostBridge.ts';
+import { resetNativeAppHostBridgeForTest } from '@/src/services/host-bridge/nativeAppHostBridge.ts';
 
 import { MessageBubble } from './MessageBubble.tsx';
 
@@ -41,6 +46,12 @@ describe('MessageBubble', () => {
     vi.mocked(copyTextToClipboard).mockResolvedValue(true);
   });
 
+  afterEach(() => {
+    delete window.__TAURI__;
+    resetNativeAppHostBridgeForTest();
+    resetHostRuntimeCacheForTest();
+  });
+
   it('shows prefixed system errors as red Agent errors without the wire prefix', () => {
     renderMessage({
       id: 2,
@@ -96,9 +107,7 @@ describe('MessageBubble', () => {
       expect(copyTextToClipboard).toHaveBeenCalledWith('第一行\n第二行'),
     );
     await waitFor(() =>
-      expect(
-        screen.queryByRole('menu', { name: '消息右键菜单' }),
-      ).toBeNull(),
+      expect(screen.queryByRole('menu', { name: '消息右键菜单' })).toBeNull(),
     );
   });
 
@@ -332,9 +341,9 @@ describe('MessageBubble', () => {
     const onReferenceImage = vi.fn(() => true);
     const { container } = renderMessage(message, onReferenceImage);
     await waitFor(() =>
-      expect(container.querySelectorAll('.grid.grid-cols-3 > div')).toHaveLength(
-        2,
-      ),
+      expect(
+        container.querySelectorAll('.grid.grid-cols-3 > div'),
+      ).toHaveLength(2),
     );
     const imageCards = container.querySelectorAll('.grid.grid-cols-3 > div');
 
@@ -354,6 +363,171 @@ describe('MessageBubble', () => {
     expect(screen.getByRole('menuitem', { name: '下载图片' })).toBeTruthy();
   });
 
+  it('exports right-click images through the native HostBridge', async () => {
+    const invoke = vi.fn(
+      async (_command: string, args?: Record<string, unknown>) => {
+        const request = (args as { request: { id: string } }).request;
+        return {
+          bridge: 'GenarrativeHostBridge',
+          version: 1,
+          id: request.id,
+          ok: true,
+          result: {
+            action: 'saved',
+            fileName: '参考图.png',
+            bytes: 5,
+          },
+        };
+      },
+    );
+    setHostRuntimeCacheForTest({
+      shell: 'tauri_desktop',
+      platform: 'linux',
+      hostVersion: '0.1.0',
+      bridgeVersion: 1,
+      capabilities: ['file.exportImage'],
+    });
+    window.__TAURI__ = {
+      core: {
+        invoke: async <Result,>(
+          command: string,
+          args?: Record<string, unknown>,
+        ) => (await invoke(command, args)) as Result,
+      },
+    };
+    const anchorClick = vi.spyOn(HTMLAnchorElement.prototype, 'click');
+    vi.mocked(readAssetBytes).mockResolvedValue({
+      blob: vi
+        .fn()
+        .mockResolvedValue(new Blob(['image'], { type: 'image/png' })),
+    } as unknown as Response);
+    const { container } = renderMessage({
+      id: 9,
+      role: 'user',
+      text: '保存参考图',
+      attachments: [
+        {
+          source: 'canvas_resource',
+          referenceId: 'resource-download-image',
+          objectKey: 'editor/reference.png',
+          imageSrc: '/generated-editor-images/reference.png',
+          label: '参考图.webp',
+        },
+      ],
+      toolCall: null,
+      createdAt: '2026-07-20T00:00:00Z',
+    });
+
+    fireEvent.contextMenu(container.querySelector('.group')!, {
+      clientX: 30,
+      clientY: 40,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '下载图片' }));
+
+    await waitFor(() =>
+      expect(invoke).toHaveBeenCalledWith('host_bridge_request', {
+        request: expect.objectContaining({
+          method: 'file.exportImage',
+          payload: {
+            fileName: '参考图.png',
+            base64Data: 'aW1hZ2U=',
+            mimeType: 'image/png',
+          },
+        }),
+      }),
+    );
+    expect(anchorClick).not.toHaveBeenCalled();
+    expect(screen.queryByRole('menu', { name: '消息素材右键菜单' })).toBeNull();
+  });
+
+  it('exports right-click audio through the native HostBridge', async () => {
+    const invoke = vi.fn(
+      async (_command: string, args?: Record<string, unknown>) => {
+        const request = (args as { request: { id: string } }).request;
+        return {
+          bridge: 'GenarrativeHostBridge',
+          version: 1,
+          id: request.id,
+          ok: true,
+          result: {
+            action: 'saved',
+            fileName: 'Agent生成音频-1.wav',
+            bytes: 5,
+          },
+        };
+      },
+    );
+    setHostRuntimeCacheForTest({
+      shell: 'tauri_desktop',
+      platform: 'linux',
+      hostVersion: '0.1.0',
+      bridgeVersion: 1,
+      capabilities: ['file.exportAudio'],
+    });
+    window.__TAURI__ = {
+      core: {
+        invoke: async <Result,>(
+          command: string,
+          args?: Record<string, unknown>,
+        ) => (await invoke(command, args)) as Result,
+      },
+    };
+    const anchorClick = vi.spyOn(HTMLAnchorElement.prototype, 'click');
+    vi.mocked(readAssetBytes).mockResolvedValue({
+      blob: vi
+        .fn()
+        .mockResolvedValue(new Blob(['audio'], { type: 'audio/wav' })),
+    } as unknown as Response);
+    const { container } = renderMessage({
+      id: 10,
+      role: 'system',
+      text: 'internal tool result',
+      attachments: [],
+      toolCall: {
+        toolName: 'generate_sound_effect',
+        status: 'completed',
+        args: {},
+        displayArgs: {
+          stringArgs: [],
+          imageArgs: [],
+          extras: { priceMudPoints: 1 },
+        },
+        images: [],
+        videos: [],
+        audios: [
+          {
+            resourceId: 'audio-1',
+            objectKey: 'editor/audio.wav',
+            audioSrc: '/generated-editor-audios/audio.wav',
+          },
+        ],
+      },
+      createdAt: '2026-07-20T00:00:00Z',
+    });
+    await waitFor(() => expect(container.querySelector('audio')).toBeTruthy());
+
+    fireEvent.contextMenu(container.querySelector('audio')!.parentElement!, {
+      clientX: 30,
+      clientY: 40,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '下载音频' }));
+
+    await waitFor(() =>
+      expect(invoke).toHaveBeenCalledWith('host_bridge_request', {
+        request: expect.objectContaining({
+          method: 'file.exportAudio',
+          payload: {
+            fileName: 'Agent生成音频-1.wav',
+            base64Data: 'YXVkaW8=',
+            mimeType: 'audio/wav',
+          },
+        }),
+      }),
+    );
+    expect(anchorClick).not.toHaveBeenCalled();
+    expect(screen.queryByRole('menu', { name: '消息素材右键菜单' })).toBeNull();
+  });
+
   it('downloads generated video with the inferred extension', async () => {
     const createObjectURL = vi.fn(() => 'blob:agent-video');
     const revokeObjectURL = vi.fn();
@@ -410,9 +584,7 @@ describe('MessageBubble', () => {
     fireEvent.click(screen.getByRole('menuitem', { name: '下载视频' }));
 
     await waitFor(() => expect(anchorClick).toHaveBeenCalledTimes(1));
-    expect(
-      screen.queryByRole('menu', { name: '消息素材右键菜单' }),
-    ).toBeNull();
+    expect(screen.queryByRole('menu', { name: '消息素材右键菜单' })).toBeNull();
     expect(createObjectURL).toHaveBeenCalledWith(expect.any(Blob));
     expect(revokeObjectURL).toHaveBeenCalledWith('blob:agent-video');
   });
diff --git a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
index 5d29b1230..fddbb6564 100644
--- a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
+++ b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
@@ -6,6 +6,16 @@ import {
 
 import { readAssetBytes } from '@/src/services/assetReadUrlService.ts';
 import { copyTextToClipboard } from '@/src/services/clipboard.ts';
+import {
+  type HostFileExportAudioRequest,
+  type HostFileExportImageRequest,
+  canUseNativeHostCapability,
+  exportHostAudioFile,
+  exportHostImageFile,
+  isNativeAppRuntime,
+} from '@/src/services/host-bridge/hostBridge.ts';
+
+import { getLayerAssetExtensionFromTypeOrSrc } from '../ImageCanvasExportModel.ts';
 
 import {
   contextAssetMediaSrc,
@@ -23,34 +33,97 @@ type RightClickMenuState = {
   result: 'success' | 'error' | null;
 };
 
-const MIME_FILE_EXTENSIONS: Record<string, string> = {
-  'image/png': 'png',
-  'image/jpeg': 'jpg',
-  'image/webp': 'webp',
-  'image/gif': 'gif',
-  'video/mp4': 'mp4',
-  'video/webm': 'webm',
-  'audio/mpeg': 'mp3',
-  'audio/mp4': 'm4a',
-  'audio/ogg': 'ogg',
-  'audio/wav': 'wav',
-};
-
-function sanitizeDownloadName(value: string, mimeType: string) {
+function sanitizeDownloadName(value: string, extension: string) {
   const normalized = value
     .trim()
     .replace(/[<>:"/\\|?*]/gu, '-')
     .replace(/\p{Cc}/gu, '-')
     .replace(/[. ]+$/u, '')
     .slice(0, 100);
-  const baseName = normalized || 'Agent素材';
-  if (/\.[a-z0-9]{2,5}$/iu.test(baseName)) {
-    return baseName;
-  }
-  const extension = MIME_FILE_EXTENSIONS[mimeType.toLowerCase()] ?? '';
+  const baseName = (normalized || 'Agent素材').replace(
+    /\.[a-z0-9]{1,8}$/iu,
+    '',
+  );
   return extension ? `${baseName}.${extension}` : baseName;
 }
 
+function blobToBase64Data(blob: Blob) {
+  return new Promise<string>((resolve, reject) => {
+    if (typeof FileReader === 'undefined') {
+      reject(new Error('当前环境不支持文件编码'));
+      return;
+    }
+    const reader = new FileReader();
+    reader.onerror = () => reject(new Error('文件编码失败'));
+    reader.onload = () => {
+      const result = typeof reader.result === 'string' ? reader.result : '';
+      const base64Data = result.split(',')[1] ?? '';
+      if (base64Data) {
+        resolve(base64Data);
+      } else {
+        reject(new Error('文件编码失败'));
+      }
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+
+function hostImageMimeTypeFromExtension(
+  extension: string,
+): HostFileExportImageRequest['mimeType'] | null {
+  if (extension === 'png') {
+    return 'image/png';
+  }
+  if (extension === 'jpg' || extension === 'jpeg') {
+    return 'image/jpeg';
+  }
+  if (extension === 'webp') {
+    return 'image/webp';
+  }
+  return null;
+}
+
+function hostAudioMimeTypeFromExtension(
+  extension: string,
+): HostFileExportAudioRequest['mimeType'] | null {
+  if (extension === 'mp3') {
+    return 'audio/mpeg';
+  }
+  if (extension === 'm4a' || extension === 'mp4') {
+    return 'audio/mp4';
+  }
+  if (extension === 'wav') {
+    return 'audio/wav';
+  }
+  if (extension === 'ogg') {
+    return 'audio/ogg';
+  }
+  if (extension === 'webm') {
+    return 'audio/webm';
+  }
+  return null;
+}
+
+function triggerBrowserDownload(blob: Blob, fileName: string) {
+  if (
+    typeof document === 'undefined' ||
+    typeof URL.createObjectURL !== 'function' ||
+    typeof URL.revokeObjectURL !== 'function'
+  ) {
+    return false;
+  }
+  const downloadUrl = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = downloadUrl;
+  link.download = fileName;
+  link.style.display = 'none';
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.setTimeout(() => URL.revokeObjectURL(downloadUrl), 0);
+  return true;
+}
+
 async function convertImageBlobToPng(blob: Blob) {
   if (blob.type.toLowerCase() === 'image/png') {
     return blob;
@@ -109,27 +182,52 @@ async function copyAssetImage(asset: EditorAgentContextAsset) {
 }
 
 async function downloadAsset(asset: EditorAgentContextAsset) {
-  if (
-    typeof document === 'undefined' ||
-    typeof URL.createObjectURL !== 'function'
-  ) {
-    return false;
-  }
   try {
-    const response = await readAssetBytes(contextAssetMediaSrc(asset), {
+    const source = contextAssetMediaSrc(asset);
+    const response = await readAssetBytes(source, {
       objectKey: asset.objectKey,
     });
     const blob = await response.blob();
-    const downloadUrl = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = downloadUrl;
-    link.download = sanitizeDownloadName(asset.suggestedFileName, blob.type);
-    link.style.display = 'none';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(downloadUrl);
-    return true;
+    const extension = getLayerAssetExtensionFromTypeOrSrc(
+      asset.mediaType,
+      // application/octet-stream is impossible by contract
+      blob.type,
+      asset.objectKey ?? source,
+    );
+    const fileName = sanitizeDownloadName(asset.suggestedFileName, extension);
+
+    if (!isNativeAppRuntime()) {
+      return triggerBrowserDownload(blob, fileName);
+    }
+
+    if (
+      asset.mediaType === 'image' &&
+      canUseNativeHostCapability('file.exportImage')
+    ) {
+      const mimeType = hostImageMimeTypeFromExtension(extension);
+      if (!mimeType) {
+        return false;
+      }
+      const base64Data = await blobToBase64Data(blob);
+      return Boolean(
+        await exportHostImageFile({ fileName, base64Data, mimeType }),
+      );
+    }
+    if (
+      asset.mediaType === 'audio' &&
+      canUseNativeHostCapability('file.exportAudio')
+    ) {
+      const mimeType = hostAudioMimeTypeFromExtension(extension);
+      if (!mimeType) {
+        return false;
+      }
+      const base64Data = await blobToBase64Data(blob);
+      return Boolean(
+        await exportHostAudioFile({ fileName, base64Data, mimeType }),
+      );
+    }
+    // video is not yet supported to export on native shell
+    return false;
   } catch {
     return false;
   }
@@ -192,10 +290,10 @@ export function useRightClickMenu({
                 target.asset.mediaType === 'image' &&
                 contextAssetMediaSrc(target.asset).trim()
               ? (onReferenceImage?.(target.asset) ?? false)
-            : action === EditorAgentRightClickAction.DownloadAsset &&
-                target.kind === 'asset'
-              ? await downloadAsset(target.asset)
-              : false;
+              : action === EditorAgentRightClickAction.DownloadAsset &&
+                  target.kind === 'asset'
+                ? await downloadAsset(target.asset)
+                : false;
       setRightClickMenu((current) =>
         current?.target === target && current.pendingAction === action
           ? succeeded
-- 
2.52.0


From 791493db0e799eb0b280ac73419b7c566c2a2d68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Tue, 21 Jul 2026 13:50:40 +0800
Subject: [PATCH 09/13] =?UTF-8?q?editor=20agent:=20fix=20A=20=E5=8F=91?=
 =?UTF-8?q?=E9=80=81=E4=B8=AD=E5=BC=95=E7=94=A8=20B=EF=BC=8C=E9=9A=8F?=
 =?UTF-8?q?=E5=90=8E=E8=AF=B7=E6=B1=82=E5=A4=B1=E8=B4=A5,=20B=20is=20lost?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../【编辑器】画布Agent对话面板-2026-07-03.md |   2 +-
 .../EditorAgentConversationPanelView.test.tsx | 130 ++++++++++++++++++
 .../EditorAgentConversationPanelView.tsx      |   4 +-
 .../useConversationAttachments.ts             |   6 +-
 4 files changed, 136 insertions(+), 6 deletions(-)

diff --git a/docs/【编辑器】画布Agent对话面板-2026-07-03.md b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
index 34779120b..c51df984d 100644
--- a/docs/【编辑器】画布Agent对话面板-2026-07-03.md
+++ b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
@@ -74,7 +74,7 @@
 - 附件选择弹窗使用 `PlatformToolModalShell` 承接 portal 主题变量和不透明 panel 背景；不能直接把未注入 `platform-theme` 的 `UnifiedModal` portal 到 `document.body`，否则 `--platform-modal-fill` 失效后面板会变透明。
 - 应用后附件以胶囊 chip 挂在输入框上方；发出的消息内附件渲染为纯文本胶囊 chip（名称 + 小图标），**默认无缩略图，鼠标悬浮才浮出缩略图预览**。
 - 附件领域形状：统一为画布资源 / 素材库对象引用（`resourceId` / `assetId` + 可选 `objectKey`），不存在只属于对话的第三种图；单条消息上限 9 张（前后端共同校验）。前端可携带展示用 `imageSrc` / `thumbnailSrc`，后端必须按当前工程和当前账号重新归一、校验归属与 `objectKey`。
-- 输入区附件临时状态统一收口到 `useConversationAttachments`，选择弹窗由独立的 `AttachmentPicker` 负责纯展示；选择、引用、粘贴上传完成、移除、发送清空和失败恢复都必须经同一最新状态更新入口。异步粘贴完成时基于当时的最新附件去重并重新校验 9 张上限，不能用上传开始时捕获的旧列表覆盖期间新增的引用。
+- 输入区附件临时状态统一收口到 `useConversationAttachments`，选择弹窗由独立的 `AttachmentPicker` 负责纯展示；选择、引用、粘贴上传完成、移除、发送清空和失败恢复都必须经同一最新状态更新入口。发送失败时，已发送附件必须与等待期间新增的附件去重合并，不得因输入区已非空而丢弃。异步粘贴完成时基于当时的最新附件去重并重新校验 9 张上限，不能用上传开始时捕获的旧列表覆盖期间新增的引用。
 
 ## 工具调用确认展示契约
 
diff --git a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
index ef29dcfb7..a6934ce5a 100644
--- a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
@@ -1074,6 +1074,136 @@ describe('EditorAgentConversationPanelView', () => {
     ).toBeNull();
   });
 
+  it('merges sent attachments with references added while a failed request is pending', async () => {
+    const client = createClient();
+    let rejectSend!: (reason?: unknown) => void;
+    vi.mocked(client.sendMessage).mockImplementationOnce(
+      () =>
+        new Promise<EditorAgentMessageResponse>((_resolve, reject) => {
+          rejectSend = reject;
+        }),
+    );
+    vi.mocked(client.getConversation).mockResolvedValue({
+      conversationId: 'conversation-1',
+      projectId: 'project-1',
+      title: '失败恢复并发附件',
+      messages: [
+        {
+          id: 9,
+          role: 'system',
+          text: 'internal tool result',
+          attachments: [],
+          toolCall: {
+            toolName: 'generate_image',
+            status: 'completed',
+            args: {},
+            displayArgs: {
+              stringArgs: [],
+              imageArgs: [],
+              extras: { priceMudPoints: 1 },
+            },
+            images: [
+              {
+                resourceId: 'resource-b',
+                objectKey: 'editor/attachment-b.png',
+                imageSrc: '/generated-editor-images/attachment-b.png',
+                width: 512,
+                height: 512,
+              },
+            ],
+          },
+          createdAt: '2026-07-20T00:00:00.000Z',
+        },
+      ],
+      createdAt: '2026-07-20T00:00:00.000Z',
+      updatedAt: '2026-07-20T00:00:10.000Z',
+    });
+
+    render(
+      <EditorAgentConversationPanelView
+        open
+        onToggleOpen={vi.fn()}
+        client={client}
+        layers={[
+          {
+            id: 'layer-a',
+            resourceId: 'resource-a',
+            title: '附件 A',
+            src: '/generated-editor-images/attachment-a.png',
+            objectKey: 'editor/attachment-a.png',
+            x: 0,
+            y: 0,
+            width: 512,
+            height: 512,
+            originalWidth: 512,
+            originalHeight: 512,
+            zIndex: 1,
+            sourceType: 'generated',
+          },
+          {
+            id: 'layer-b',
+            resourceId: 'resource-b',
+            title: '附件 B',
+            src: '/generated-editor-images/attachment-b.png',
+            objectKey: 'editor/attachment-b.png',
+            x: 0,
+            y: 0,
+            width: 512,
+            height: 512,
+            originalWidth: 512,
+            originalHeight: 512,
+            zIndex: 2,
+            sourceType: 'generated',
+          },
+        ]}
+      />,
+    );
+
+    const messageLog = await screen.findByRole('log', {
+      name: '画布 Agent 消息流',
+    });
+    fireEvent.click(screen.getByRole('button', { name: '添加附件' }));
+    const attachmentDialog = screen.getByRole('dialog', {
+      name: '选择图片附件',
+    });
+    fireEvent.click(
+      within(attachmentDialog).getByRole('checkbox', {
+        name: '选择画布图片 附件 A',
+      }),
+    );
+    fireEvent.click(
+      within(attachmentDialog).getByRole('button', { name: '应用' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '发送' }));
+
+    await waitFor(() => {
+      expect(client.sendMessage).toHaveBeenCalledWith(
+        'conversation-1',
+        expect.objectContaining({
+          attachments: [expect.objectContaining({ referenceId: 'resource-a' })],
+        }),
+        expect.any(Object),
+      );
+    });
+    await waitFor(() =>
+      expect(messageLog.querySelector('.grid.grid-cols-3 > div')).toBeTruthy(),
+    );
+    fireEvent.contextMenu(
+      messageLog.querySelector('.grid.grid-cols-3 > div')!,
+      { clientX: 30, clientY: 40 },
+    );
+    fireEvent.click(screen.getByRole('menuitem', { name: '引用' }));
+    expect(await screen.findByText('附件 B')).toBeTruthy();
+
+    await act(async () => {
+      rejectSend(new Error('Network error'));
+    });
+
+    expect(await screen.findByText('Network error')).toBeTruthy();
+    expect(screen.getByText('附件 A')).toBeTruthy();
+    expect(screen.getByText('附件 B')).toBeTruthy();
+  });
+
   it('preserves messages when the panel is collapsed and reopened', async () => {
     const client = createClient();
     vi.mocked(client.sendMessage).mockResolvedValue({
diff --git a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
index 94502ae59..23d1a3341 100644
--- a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
+++ b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.tsx
@@ -111,7 +111,7 @@ export function EditorAgentConversationPanelView({
     handleInputPaste,
     removeAttachment,
     consumeAttachments,
-    restoreAttachmentsIfEmpty,
+    restoreAttachments,
   } = useConversationAttachments({ projectId, layers, assets });
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
 
@@ -134,7 +134,7 @@ export function EditorAgentConversationPanelView({
     const nextAttachments = consumeAttachments();
     void sendMessage(text, nextAttachments).catch(() => {
       setDraftText((currentText) => (currentText ? currentText : text));
-      restoreAttachmentsIfEmpty(nextAttachments);
+      restoreAttachments(nextAttachments);
     });
   };
 
diff --git a/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
index 626d56df5..7b9631ad4 100644
--- a/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
+++ b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
@@ -365,10 +365,10 @@ export function useConversationAttachments({
     return currentAttachments;
   }, [updateAttachments]);
 
-  const restoreAttachmentsIfEmpty = useCallback(
+  const restoreAttachments = useCallback(
     (failedAttachments: EditorAgentAttachmentRef[]) => {
       updateAttachments((currentAttachments) =>
-        currentAttachments.length ? currentAttachments : failedAttachments,
+        mergeAttachments(failedAttachments, currentAttachments),
       );
     },
     [updateAttachments],
@@ -392,6 +392,6 @@ export function useConversationAttachments({
     handleInputPaste,
     removeAttachment,
     consumeAttachments,
-    restoreAttachmentsIfEmpty,
+    restoreAttachments,
   };
 }
-- 
2.52.0


From 632d05cf55914a479f2faa7d53dfe15a4e9676ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Tue, 21 Jul 2026 15:22:36 +0800
Subject: [PATCH 10/13] editor agent: add attachment count limit for recovery

---
 .../【编辑器】画布Agent对话面板-2026-07-03.md |  2 +-
 .../EditorAgentConversationPanelView.test.tsx | 94 +++++++++++++++++++
 .../useConversationAttachments.ts             | 17 +++-
 3 files changed, 109 insertions(+), 4 deletions(-)

diff --git a/docs/【编辑器】画布Agent对话面板-2026-07-03.md b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
index c51df984d..ed45c26c1 100644
--- a/docs/【编辑器】画布Agent对话面板-2026-07-03.md
+++ b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
@@ -74,7 +74,7 @@
 - 附件选择弹窗使用 `PlatformToolModalShell` 承接 portal 主题变量和不透明 panel 背景；不能直接把未注入 `platform-theme` 的 `UnifiedModal` portal 到 `document.body`，否则 `--platform-modal-fill` 失效后面板会变透明。
 - 应用后附件以胶囊 chip 挂在输入框上方；发出的消息内附件渲染为纯文本胶囊 chip（名称 + 小图标），**默认无缩略图，鼠标悬浮才浮出缩略图预览**。
 - 附件领域形状：统一为画布资源 / 素材库对象引用（`resourceId` / `assetId` + 可选 `objectKey`），不存在只属于对话的第三种图；单条消息上限 9 张（前后端共同校验）。前端可携带展示用 `imageSrc` / `thumbnailSrc`，后端必须按当前工程和当前账号重新归一、校验归属与 `objectKey`。
-- 输入区附件临时状态统一收口到 `useConversationAttachments`，选择弹窗由独立的 `AttachmentPicker` 负责纯展示；选择、引用、粘贴上传完成、移除、发送清空和失败恢复都必须经同一最新状态更新入口。发送失败时，已发送附件必须与等待期间新增的附件去重合并，不得因输入区已非空而丢弃。异步粘贴完成时基于当时的最新附件去重并重新校验 9 张上限，不能用上传开始时捕获的旧列表覆盖期间新增的引用。
+- 输入区附件临时状态统一收口到 `useConversationAttachments`，选择弹窗由独立的 `AttachmentPicker` 负责纯展示；选择、引用、粘贴上传完成、移除、发送清空和失败恢复都必须经同一最新状态更新入口。发送失败时，已发送附件必须与等待期间新增的附件去重合并，不得因输入区已非空而丢弃；合并后超过 9 张时优先保留等待期间的最新附件，不恢复失败请求的附件，并立即显示上限错误。异步粘贴完成时基于当时的最新附件去重并重新校验 9 张上限，不能用上传开始时捕获的旧列表覆盖期间新增的引用。
 
 ## 工具调用确认展示契约
 
diff --git a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
index a6934ce5a..0059a0a00 100644
--- a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
@@ -1204,6 +1204,100 @@ describe('EditorAgentConversationPanelView', () => {
     expect(screen.getByText('附件 B')).toBeTruthy();
   });
 
+  it('keeps the latest nine attachments when failed attachment recovery would exceed the limit', async () => {
+    const client = createClient();
+    let rejectSend!: (reason?: unknown) => void;
+    vi.mocked(client.sendMessage).mockImplementationOnce(
+      () =>
+        new Promise<EditorAgentMessageResponse>((_resolve, reject) => {
+          rejectSend = reject;
+        }),
+    );
+    const layers = Array.from({ length: 18 }, (_, index) => ({
+      id: `layer-${index + 1}`,
+      resourceId: `resource-${index + 1}`,
+      title: `附件-${index + 1}`,
+      src: `/generated-editor-images/attachment-${index + 1}.png`,
+      objectKey: `editor/attachment-${index + 1}.png`,
+      x: 0,
+      y: 0,
+      width: 512,
+      height: 512,
+      originalWidth: 512,
+      originalHeight: 512,
+      zIndex: index + 1,
+      sourceType: 'generated' as const,
+    }));
+
+    render(
+      <EditorAgentConversationPanelView
+        open
+        onToggleOpen={vi.fn()}
+        client={client}
+        layers={layers}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('已经看到画布内容')).toBeTruthy();
+    });
+    fireEvent.click(screen.getByRole('button', { name: '添加附件' }));
+    let attachmentDialog = screen.getByRole('dialog', {
+      name: '选择图片附件',
+    });
+    for (let index = 1; index <= 9; index += 1) {
+      fireEvent.click(
+        within(attachmentDialog).getByRole('checkbox', {
+          name: `选择画布图片 附件-${index}`,
+        }),
+      );
+    }
+    fireEvent.click(
+      within(attachmentDialog).getByRole('button', { name: '应用' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '发送' }));
+
+    await waitFor(() => {
+      expect(client.sendMessage).toHaveBeenCalledWith(
+        'conversation-1',
+        expect.objectContaining({ attachments: expect.any(Array) }),
+        expect.any(Object),
+      );
+      expect(
+        vi.mocked(client.sendMessage).mock.calls[0]?.[1].attachments,
+      ).toHaveLength(9);
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: '添加附件' }));
+    attachmentDialog = screen.getByRole('dialog', {
+      name: '选择图片附件',
+    });
+    for (let index = 10; index <= 18; index += 1) {
+      fireEvent.click(
+        within(attachmentDialog).getByRole('checkbox', {
+          name: `选择画布图片 附件-${index}`,
+        }),
+      );
+    }
+    fireEvent.click(
+      within(attachmentDialog).getByRole('button', { name: '应用' }),
+    );
+
+    await act(async () => {
+      rejectSend(new Error('Network error'));
+    });
+
+    expect(
+      await screen.findByText('最多 9 张，发送失败的附件未恢复'),
+    ).toBeTruthy();
+    for (let index = 1; index <= 9; index += 1) {
+      expect(screen.queryByText(`附件-${index}`)).toBeNull();
+    }
+    for (let index = 10; index <= 18; index += 1) {
+      expect(screen.getByText(`附件-${index}`)).toBeTruthy();
+    }
+  });
+
   it('preserves messages when the panel is collapsed and reopened', async () => {
     const client = createClient();
     vi.mocked(client.sendMessage).mockResolvedValue({
diff --git a/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
index 7b9631ad4..5254cc524 100644
--- a/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
+++ b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
@@ -367,9 +367,20 @@ export function useConversationAttachments({
 
   const restoreAttachments = useCallback(
     (failedAttachments: EditorAgentAttachmentRef[]) => {
-      updateAttachments((currentAttachments) =>
-        mergeAttachments(failedAttachments, currentAttachments),
-      );
+      updateAttachments((currentAttachments) => {
+        const restoredAttachments = mergeAttachments(
+          failedAttachments,
+          currentAttachments,
+        );
+        if (restoredAttachments.length > EDITOR_AGENT_MAX_ATTACHMENTS) {
+          setAttachmentError(
+            `最多 ${EDITOR_AGENT_MAX_ATTACHMENTS} 张，发送失败的附件未恢复`,
+          );
+          return currentAttachments;
+        }
+        setAttachmentError(null);
+        return restoredAttachments;
+      });
     },
     [updateAttachments],
   );
-- 
2.52.0


From d08e61453f13c8cc138acef50b53ab4b84416e97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Tue, 21 Jul 2026 17:20:11 +0800
Subject: [PATCH 11/13] fix lint

---
 .../EditorAgentConversation/useRightClickMenu.ts             | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
index fddbb6564..ae04351bf 100644
--- a/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
+++ b/src/components/image-editor/EditorAgentConversation/useRightClickMenu.ts
@@ -7,16 +7,15 @@ import {
 import { readAssetBytes } from '@/src/services/assetReadUrlService.ts';
 import { copyTextToClipboard } from '@/src/services/clipboard.ts';
 import {
-  type HostFileExportAudioRequest,
-  type HostFileExportImageRequest,
   canUseNativeHostCapability,
   exportHostAudioFile,
   exportHostImageFile,
+  type HostFileExportAudioRequest,
+  type HostFileExportImageRequest,
   isNativeAppRuntime,
 } from '@/src/services/host-bridge/hostBridge.ts';
 
 import { getLayerAssetExtensionFromTypeOrSrc } from '../ImageCanvasExportModel.ts';
-
 import {
   contextAssetMediaSrc,
   type EditorAgentContextAsset,
-- 
2.52.0


From cb6dc4eb38f4e1ab3f41e28245771750912e5245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Tue, 21 Jul 2026 17:28:26 +0800
Subject: [PATCH 12/13] fix objectKey mismatch

---
 .../【编辑器】画布Agent对话面板-2026-07-03.md |  2 +-
 .../EditorAgentConversationPanelView.test.tsx |  7 ++-
 .../useConversationAttachments.ts             | 46 ++++++++++---------
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/docs/【编辑器】画布Agent对话面板-2026-07-03.md b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
index 4f60749bb..6329638a0 100644
--- a/docs/【编辑器】画布Agent对话面板-2026-07-03.md
+++ b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
@@ -74,7 +74,7 @@
 - 附件选择弹窗使用 `PlatformToolModalShell` 承接 portal 主题变量和不透明 panel 背景；不能直接把未注入 `platform-theme` 的 `UnifiedModal` portal 到 `document.body`，否则 `--platform-modal-fill` 失效后面板会变透明。
 - 应用后附件以胶囊 chip 挂在输入框上方；发出的消息内附件渲染为纯文本胶囊 chip（名称 + 小图标），**默认无缩略图，鼠标悬浮才浮出缩略图预览**。
 - 附件领域形状：统一为画布资源 / 素材库对象引用（`resourceId` / `assetId` + 可选 `objectKey`），不存在只属于对话的第三种图；单条消息上限 9 张（前后端共同校验）。前端可携带展示用 `imageSrc` / `thumbnailSrc`，后端必须按当前工程和当前账号重新归一、校验归属与 `objectKey`。
-- 输入区附件临时状态统一收口到 `useConversationAttachments`，选择弹窗由独立的 `AttachmentPicker` 负责纯展示；选择、引用、粘贴上传完成、移除、发送清空和失败恢复都必须经同一最新状态更新入口。发送失败时，已发送附件必须与等待期间新增的附件去重合并，不得因输入区已非空而丢弃；合并后超过 9 张时优先保留等待期间的最新附件，不恢复失败请求的附件，并立即显示上限错误。异步粘贴完成时基于当时的最新附件去重并重新校验 9 张上限，不能用上传开始时捕获的旧列表覆盖期间新增的引用。
+- 输入区附件临时状态统一收口到 `useConversationAttachments`，选择弹窗由独立的 `AttachmentPicker` 负责纯展示；选择、引用、粘贴上传完成、移除、发送清空和失败恢复都必须经同一最新状态更新入口。引用历史消息附件时先保留消息中的展示快照，最终发送前再按 `source + referenceId` 从当前画布和素材库选项刷新，避免提前刷新后又被失败恢复的旧快照覆盖。发送失败时，已发送附件必须与等待期间新增的附件去重合并，不得因输入区已非空而丢弃；合并后超过 9 张时优先保留等待期间的最新附件，不恢复失败请求的附件，并立即显示上限错误。异步粘贴完成时基于当时的最新附件去重并重新校验 9 张上限，不能用上传开始时捕获的旧列表覆盖期间新增的引用。
 
 ## 工具调用确认展示契约
 
diff --git a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
index a275dbb4b..4f49fd310 100644
--- a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
@@ -617,7 +617,7 @@ describe('EditorAgentConversationPanelView', () => {
     });
   });
 
-  it('prefers the current attachment matched by source and reference id', async () => {
+  it('refreshes an attachment matched by source and reference id when sending', async () => {
     const client = createClient();
     vi.mocked(client.getConversation).mockResolvedValue({
       conversationId: 'conversation-1',
@@ -673,7 +673,10 @@ describe('EditorAgentConversationPanelView', () => {
     const historicalAttachment = await screen.findByText('旧版附件');
     fireEvent.contextMenu(historicalAttachment.closest('.group')!);
     fireEvent.click(screen.getByRole('menuitem', { name: '引用' }));
-    expect(await screen.findByText('最新附件')).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.getAllByText('旧版附件')).toHaveLength(2);
+    });
+    expect(screen.queryByText('最新附件')).toBeNull();
 
     fireEvent.click(screen.getByRole('button', { name: '发送' }));
     await waitFor(() => {
diff --git a/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
index 5254cc524..130b095e0 100644
--- a/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
+++ b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
@@ -259,22 +259,22 @@ export function useConversationAttachments({
 
   const referenceContextAsset = useCallback(
     (asset: EditorAgentContextAsset) => {
-      const directAttachment: EditorAgentAttachmentRef | undefined =
-        asset.kind === 'attachment'
-          ? {
-              source: asset.source,
-              referenceId: asset.referenceId,
-              objectKey: asset.objectKey,
-              imageSrc: asset.imageSrc,
-              thumbnailSrc: asset.thumbnailSrc,
-              label: asset.label,
-              width: asset.width,
-              height: asset.height,
-            }
-          : undefined;
-      const referenceOption = directAttachment
-        ? attachmentOptionsByKey.get(attachmentKey(directAttachment))
-        : undefined;
+      if (asset.kind === 'attachment') {
+        const directAttachment: EditorAgentAttachmentRef = {
+          source: asset.source,
+          referenceId: asset.referenceId,
+          objectKey: asset.objectKey,
+          imageSrc: asset.imageSrc,
+          thumbnailSrc: asset.thumbnailSrc,
+          label: asset.label,
+          width: asset.width,
+          height: asset.height,
+        };
+        return directAttachment.referenceId.trim() &&
+          directAttachment.imageSrc.trim()
+          ? appendAttachments([directAttachment])
+          : false;
+      }
       const objectKey = asset.objectKey?.trim();
       const mediaSrc = contextAssetMediaSrc(asset).trim();
       const objectKeyOption = objectKey
@@ -290,14 +290,13 @@ export function useConversationAttachments({
             attachment.thumbnailSrc?.trim() === mediaSrc
           );
         });
-      const matchedAttachment =
-        referenceOption?.attachment || option?.attachment || directAttachment;
+      const matchedAttachment = option?.attachment;
       return matchedAttachment?.referenceId.trim() &&
         matchedAttachment.imageSrc.trim()
         ? appendAttachments([matchedAttachment])
         : false;
     },
-    [appendAttachments, attachmentOptions, attachmentOptionsByKey],
+    [appendAttachments, attachmentOptions],
   );
 
   const handleInputPaste = useCallback(
@@ -361,9 +360,14 @@ export function useConversationAttachments({
 
   const consumeAttachments = useCallback(() => {
     const currentAttachments = attachmentsRef.current;
+    const refreshedAttachments = currentAttachments.map(
+      (attachment) =>
+        attachmentOptionsByKey.get(attachmentKey(attachment))?.attachment ??
+        attachment,
+    );
     updateAttachments([]);
-    return currentAttachments;
-  }, [updateAttachments]);
+    return refreshedAttachments;
+  }, [attachmentOptionsByKey, updateAttachments]);
 
   const restoreAttachments = useCallback(
     (failedAttachments: EditorAgentAttachmentRef[]) => {
-- 
2.52.0


From 718dc5d09cc3fd656928aca8702748e1a2749fe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Wed, 22 Jul 2026 15:35:00 +0800
Subject: [PATCH 13/13] fix: editor agent ensure failed attachment recovery
 respects current attachment states

---
 .../【编辑器】画布Agent对话面板-2026-07-03.md |   2 +-
 .../EditorAgentConversationPanelView.test.tsx | 114 ++++++++++++++++++
 .../useConversationAttachments.ts             |   3 +-
 3 files changed, 117 insertions(+), 2 deletions(-)

diff --git a/docs/【编辑器】画布Agent对话面板-2026-07-03.md b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
index 44a98094b..9c9a55663 100644
--- a/docs/【编辑器】画布Agent对话面板-2026-07-03.md
+++ b/docs/【编辑器】画布Agent对话面板-2026-07-03.md
@@ -74,7 +74,7 @@
 - 附件选择弹窗使用 `PlatformToolModalShell` 承接 portal 主题变量和不透明 panel 背景；不能直接把未注入 `platform-theme` 的 `UnifiedModal` portal 到 `document.body`，否则 `--platform-modal-fill` 失效后面板会变透明。
 - 应用后附件以胶囊 chip 挂在输入框上方；发出的消息内附件渲染为纯文本胶囊 chip（名称 + 小图标），**默认无缩略图，鼠标悬浮才浮出缩略图预览**。
 - 附件领域形状：统一为画布资源 / 素材库对象引用（`resourceId` / `assetId` + 可选 `objectKey`），不存在只属于对话的第三种图；单条消息上限 9 张（前后端共同校验）。前端可携带展示用 `imageSrc` / `thumbnailSrc`，后端必须按当前工程和当前账号重新归一、校验归属与 `objectKey`。
-- 输入区附件临时状态统一收口到 `useConversationAttachments`，选择弹窗由独立的 `AttachmentPicker` 负责纯展示；选择、引用、粘贴上传完成、移除、发送清空和失败恢复都必须经同一最新状态更新入口。引用历史消息附件时先保留消息中的展示快照，最终发送前再按 `source + referenceId` 从当前画布和素材库选项刷新，避免提前刷新后又被失败恢复的旧快照覆盖。发送失败时，已发送附件必须与等待期间新增的附件去重合并，不得因输入区已非空而丢弃；合并后超过 9 张时优先保留等待期间的最新附件，不恢复失败请求的附件，并立即显示上限错误。异步粘贴完成时基于当时的最新附件去重并重新校验 9 张上限，不能用上传开始时捕获的旧列表覆盖期间新增的引用。
+- 输入区附件临时状态统一收口到 `useConversationAttachments`，选择弹窗由独立的 `AttachmentPicker` 负责纯展示；选择、引用、粘贴上传完成、移除、发送清空和失败恢复都必须经同一最新状态更新入口。引用历史消息附件时先保留消息中的展示快照，最终发送前再按 `source + referenceId` 从当前画布和素材库选项刷新，避免提前刷新后又被失败恢复的旧快照覆盖。发送失败时，已发送附件必须与等待期间新增的附件去重合并，不得因输入区已非空而丢弃；同一 `source + referenceId` 冲突时保留等待期间的当前草稿快照，失败请求快照只补充缺失 identity。合并后超过 9 张时优先保留等待期间的最新附件，不恢复失败请求的附件，并立即显示上限错误。异步粘贴完成时基于当时的最新附件去重并重新校验 9 张上限，不能用上传开始时捕获的旧列表覆盖期间新增的引用。
 
 ## 工具调用确认展示契约
 
diff --git a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
index 4f49fd310..edafe0bab 100644
--- a/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
+++ b/src/components/image-editor/EditorAgentConversation/EditorAgentConversationPanelView.test.tsx
@@ -1222,6 +1222,120 @@ describe('EditorAgentConversationPanelView', () => {
     expect(screen.getByText('附件 B')).toBeTruthy();
   });
 
+  it('keeps the current snapshot when failed recovery has the same attachment identity', async () => {
+    const client = createClient();
+    let rejectSend!: (reason?: unknown) => void;
+    vi.mocked(client.sendMessage).mockImplementationOnce(
+      () =>
+        new Promise<EditorAgentMessageResponse>((_resolve, reject) => {
+          rejectSend = reject;
+        }),
+    );
+    const oldLayer = {
+      id: 'layer-updated',
+      resourceId: 'resource-updated',
+      title: '旧版附件',
+      src: '/generated-editor-images/old.png',
+      objectKey: 'editor/old.png',
+      x: 0,
+      y: 0,
+      width: 512,
+      height: 512,
+      originalWidth: 512,
+      originalHeight: 512,
+      zIndex: 1,
+      sourceType: 'generated' as const,
+    };
+    const currentLayer = {
+      ...oldLayer,
+      title: '当前附件',
+      src: '/generated-editor-images/current.png',
+      objectKey: 'editor/current.png',
+    };
+    const { rerender } = render(
+      <EditorAgentConversationPanelView
+        open
+        onToggleOpen={vi.fn()}
+        client={client}
+        layers={[oldLayer]}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('已经看到画布内容')).toBeTruthy();
+    });
+    fireEvent.click(screen.getByRole('button', { name: '添加附件' }));
+    let attachmentDialog = screen.getByRole('dialog', {
+      name: '选择图片附件',
+    });
+    fireEvent.click(
+      within(attachmentDialog).getByRole('checkbox', {
+        name: '选择画布图片 旧版附件',
+      }),
+    );
+    fireEvent.click(
+      within(attachmentDialog).getByRole('button', { name: '应用' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '发送' }));
+
+    await waitFor(() => {
+      expect(client.sendMessage).toHaveBeenCalledWith(
+        'conversation-1',
+        expect.objectContaining({
+          attachments: [
+            expect.objectContaining({
+              referenceId: 'resource-updated',
+              objectKey: 'editor/old.png',
+            }),
+          ],
+        }),
+        expect.any(Object),
+      );
+    });
+
+    rerender(
+      <EditorAgentConversationPanelView
+        open
+        onToggleOpen={vi.fn()}
+        client={client}
+        layers={[currentLayer]}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: '添加附件' }));
+    attachmentDialog = screen.getByRole('dialog', {
+      name: '选择图片附件',
+    });
+    fireEvent.click(
+      within(attachmentDialog).getByRole('checkbox', {
+        name: '选择画布图片 当前附件',
+      }),
+    );
+    fireEvent.click(
+      within(attachmentDialog).getByRole('button', { name: '应用' }),
+    );
+
+    await act(async () => {
+      rejectSend(new Error('Network error'));
+    });
+
+    expect(await screen.findByText('Network error')).toBeTruthy();
+    expect(screen.getByText('当前附件')).toBeTruthy();
+    expect(screen.queryByText('旧版附件')).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: '发送' }));
+    await waitFor(() => {
+      expect(client.sendMessage).toHaveBeenCalledTimes(2);
+      expect(
+        vi.mocked(client.sendMessage).mock.calls[1]?.[1].attachments,
+      ).toEqual([
+        expect.objectContaining({
+          referenceId: 'resource-updated',
+          objectKey: 'editor/current.png',
+        }),
+      ]);
+    });
+  });
+
   it('keeps the latest nine attachments when failed attachment recovery would exceed the limit', async () => {
     const client = createClient();
     let rejectSend!: (reason?: unknown) => void;
diff --git a/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
index 130b095e0..64a233cd7 100644
--- a/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
+++ b/src/components/image-editor/EditorAgentConversation/useConversationAttachments.ts
@@ -372,9 +372,10 @@ export function useConversationAttachments({
   const restoreAttachments = useCallback(
     (failedAttachments: EditorAgentAttachmentRef[]) => {
       updateAttachments((currentAttachments) => {
+        // respect current (version) when duplicated with old ones
         const restoredAttachments = mergeAttachments(
-          failedAttachments,
           currentAttachments,
+          failedAttachments,
         );
         if (restoredAttachments.length > EDITOR_AGENT_MAX_ATTACHMENTS) {
           setAttachmentError(
-- 
2.52.0