feat(prompts): unify sources and add personal library

style(agent): distinguish chat participants
fix(agent): improve chat navigation
2026-07-24 15:24:06 +08:00 · 2026-07-21 01:08:11 +08:00 · 2026-07-20 12:14:36 +08:00 · 2026-07-20 12:13:33 +08:00 · 2026-07-20 11:34:46 +08:00 · 2026-07-20 07:55:56 +08:00
80 changed files with 4833 additions and 1579 deletions
@@ -51,6 +51,8 @@
 - 不要硬编码黑白、stone、slate 等颜色导致浅色/深色主题不一致。
 - 新增画布按钮、弹窗、浮层时，尽量复用已有工具栏、节点面板、Modal 的视觉风格。
 - 画布顶部工具栏和状态信息优先采用极简扁平风格：无边框、无阴影、无胶囊背景，融入整体背景，弱化按钮感，仅保留轻微 hover 反馈，保持简洁现代、低视觉重量。
+- 左侧画布面板等列表里的节点/元素缩略图容器，非图片类型（文本、配置、视频、音频等）不要使用 `theme.node.fill`（`#e7e5df`/`#292524`）这类灰色背景，图标直接无背景展示，尽量不要给多余底色，保持干净。
+- 画布内的操作按钮（如面板里的「添加」「导出」「选择」等）默认用扁平无底色样式：透明背景、仅 `hover:bg-black/5 dark:hover:bg-white/10` 轻微反馈，靠图标+文字表达，不要用 `theme.toolbar.activeBg`（`#e7e5df`/`#3a3631`）或 `theme.node.fill` 之类的灰色作为按钮填充底色。灰色 `activeBg` 只允许用于「选中态」等需要表达状态的高亮，不要当普通装饰底色。
 - 图片节点尺寸逻辑要尊重原始比例，除非功能明确要求自由变形。
 - 批量生成、多图展示、助手面板等画布交互要尽量简洁，不要占用过多画布空间。

@@ -2,11 +2,36 @@

 ## Unreleased

+ [新增] 提示词来源新增 Banana Prompt Quicker，并支持添加自定义标准 JSON 来源。
+ [新增] 提示词中心新增「我的提示词」，支持本地管理、从公共库保存，并可在画布提示词库中直接使用。
+ [新增] Agent 新增统一生成任务状态查询，支持查看画布、生图工作台和视频工作台任务进度。
+ [调整] 内置提示词来源改为读取 Image Prompts 统一 JSON 数据，不再由画布端分别解析。
+ [调整] 提示词来源配置保留卡片式交互，并展示来源数量、同步状态和上次成功时间。
+ [优化] 提示词来源支持独立缓存和更新，更新失败时保留上一次成功内容。
+ [优化] Agent 对话区分用户与 AI 消息，并优化会话切换和回到最新消息的交互。
+ [优化] 画布生成完成后保留提示词输入，并改善提示词库和资产面板的交互性能。
+ [修复] 本地 Agent 完善多标签页请求隔离、结果归属、焦点回退和 Codex 会话状态同步。
+ [修复] 本地 Agent 上传的图片附件可正确创建画布图片节点并连接生成流程。
+ [修复] 画布提示词库支持跨来源搜索，插入节点时保留提示词标题。
+
+## v0.9.0 - 2026-07-17
+
+ [新增] 左侧面板「资产」Tab 支持上传添加图片/视频资产、卡片悬停移除资产。
+ [新增] 左侧画布面板支持拖拽调整宽度、展开/收起(带动画),顶栏菜单左侧新增面板开关按钮。
+ [新增] 顶栏菜单新增「导出当前画布」,导出为包含全部资源的压缩包。
+ [新增] 左侧画布元素列表支持多选并批量导出选中元素为压缩包。
+ [新增] 可选的网站统计分析:支持 Google Analytics 4 与百度统计。
+ [调整] 画布节点名称默认不再显示,仅在选中/悬停/编辑时出现,画布更简洁。
+ [优化] 左侧面板「画布/资产」切换改为带滑动下划线的动画,移除非图片元素图标的灰色底色。
+ [优化] 画布节点提示词面板 `@` 引用图片时,输入框内直接显示真实缩略图。
+ [优化] 移除画布节点右上角的「图片1/文本1」资源角标,引用改在对话面板 `@` 直接选取。
+ [修复] 连接本地 Codex Agent 后,拖拽画布节点边框缩放等高频编辑导致页面崩溃。
+
 ## v0.8.2 - 2026-07-16

 + [新增] 图像设置新增「透明背景」开关,开启后生成无背景的透明图像。
-+ [修复] 画布节点提示词输入框补上悬停文本光标。
 + [优化] 画布节点输入区域移除灰色底色与边框、美化样式。
+ [修复] 画布节点提示词输入框补上悬停文本光标。

 ## v0.8.1 - 2026-07-16

@@ -14,5 +14,7 @@ FROM nginx:1.27-alpine

 COPY --from=web-build /app/web/dist /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY web/docker-entrypoint.sh /docker-entrypoint.d/40-runtime-config.sh
+RUN chmod +x /docker-entrypoint.d/40-runtime-config.sh

 EXPOSE 3000
@@ -32,10 +32,12 @@
 ## 核心功能

 - 无限画布：多画布项目、节点拖拽缩放、连线、小地图、撤销重做、导入导出。
- AI 创作：浏览器前台直连你配置的 OpenAI 兼容接口，支持文生图、图生图、参考图编辑、文本问答、音频和视频生成；Seedance 2.0 可通过火山方舟 Agent Plan 接入。
+- AI 创作：浏览器前台直连你配置的 OpenAI 兼容接口，支持文生图、图生图、参考图编辑、文本问答、音频和视频生成。
 - 画布助手：围绕选中节点和上游节点对话、生图，并把结果插回画布。
 - 本地 Agent：通过本机 Canvas Agent 连接 Codex / Claude Code，让 Agent 通过 MCP 操作当前画布；
 - Codex App 插件：提供 Codex app 插件，安装后会自动注册 MCP 并尝试拉起本地 Agent。
+- 插件系统：支持通过 URL 动态安装 / 启用 / 更新 / 卸载远程节点插件，并提供 TypeScript SDK 自行开发画布节点插件。
+- 自定义接口调用：可自定义生图 / 视频接口的调用方式，灵活适配各类中转站与自建服务。
 - 提示词库：浏览器前端直连多个 GitHub 开源项目，并缓存到 IndexedDB。

 完整功能说明见 [功能介绍](docs/content/docs/overview/features.mdx)。
@@ -68,16 +70,7 @@ docker compose up -d

 首次打开后进入右上角配置，填入自己的 OpenAI 兼容 `Base URL` 和 `API Key`。

-## New API 自动配置
-
-如果使用 New API，可在 `系统设置 -> 聊天方式 -> 添加聊天设置` 中填入：
-
-```text
-https://canvas.best?apiKey={key}&baseUrl={address}
-```
-
-跳转后会自动打开配置弹窗并填入 API Key 和 Base URL。
-如果自己部署了，可以把 `https://canvas.best` 替换成你部署的地址。
+如果默认的OpenAI接口调用方式与您的API不同，可自定义生图/视频脚本调用。

 ## 效果展示

@@ -108,20 +101,9 @@ https://canvas.best?apiKey={key}&baseUrl={address}

 ## 赞助支持

-<div align="center">
+本项目长期开放广告赞助合作，欢迎品牌 / 产品投放，你的支持是持续更新的动力！

-如果这个项目对你有帮助，欢迎通过爱发电赞助支持，你的每一份鼓励都是持续更新的动力！
-
-<br>
-
-<a href="https://ifdian.net/a/basketikun">
-  <img src="https://img.shields.io/badge/%E7%88%B1%E5%8F%91%E7%94%B5-%E8%B5%9E%E5%8A%A9%E4%BD%9C%E8%80%85-946ce6?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0xMiAyMS4zNWwtMS40NS0xLjMyQzUuNCAxNS4zNiAyIDEyLjI4IDIgOC41IDIgNS40MiA0LjQyIDMgNy41IDNjMS43NCAwIDMuNDEuODEgNC41IDIuMDlDMTMuMDkgMy44MSAxNC43NiAzIDE2LjUgMyAxOS41OCAzIDIyIDUuNDIgMjIgOC41YzAgMy43OC0zLjQgNi44Ni04LjU1IDExLjU0TDEyIDIxLjM1eiIvPjwvc3ZnPg==&logoColor=white" alt="爱发电赞助" />
-</a>
-
-<br>
-<br>
-
-</div>
+有广告赞助意向请通过上方联系方式沟通。

 ## 社区支持

@@ -1 +1 @@
-v0.8.2
+v0.9.0
@@ -13,6 +13,7 @@
  ],
  "scripts": {
    "dev": "tsx src/index.ts",
+    "test": "tsx --test src/canvas-session.test.ts",
    "build": "tsc -p tsconfig.json",
    "start": "node dist/index.js",
    "prepack": "npm run build"
@@ -11,11 +11,12 @@ import type { AgentAttachment, AgentEmit } from "./types.js";
 type Json = Record<string, unknown>;
 type AgentEvent = Json & { type: string; usage?: unknown };
 type PendingRequest = { resolve: (value: unknown) => void; reject: (error: Error) => void };
-type CodexRunOptions = { threadId?: string; cwd?: string };
+type CodexRunOptions = { threadId?: string; cwd?: string; appEmit?: AgentEmit; onStart?: () => void; onThread?: (threadId: string) => void; onTurn?: (turnId: string) => void; onFinish?: () => void };
 type AgentHistoryMessage = { id: string; role: "user" | "assistant" | "tool" | "error"; title?: string; text: string; detail?: unknown; streamId?: string };

 let codexQueue: Promise<unknown> = Promise.resolve();
 let codexApp: CodexAppClient | null = null;
+let codexAppStart: Promise<CodexAppClient> | null = null;
 let codexThreadId = "";
 const canvasAgentMcp = canvasAgentMcpCommand();
 const require = createRequire(import.meta.url);
@@ -30,52 +31,56 @@ export async function runCodexTurn(prompt: string, emit: AgentEmit, attachments:
    await codexQueue;
 }

-export function interruptCodexTurn() {
-    if (!codexApp) return false;
+export function interruptCodexTurn(threadId?: string) {
+    if (!codexApp || (threadId && threadId !== codexThreadId)) return false;
    return codexApp.interruptCurrentTurn();
 }

 async function runCodexTurnNow(prompt: string, emit: AgentEmit, attachments: AgentAttachment[], options: CodexRunOptions) {
    let files: string[] = [];
    try {
+        options.onStart?.();
        files = await writeAttachmentFiles(attachments);
-        codexApp ||= await CodexAppClient.start(emit);
-        let threadId = await ensureCodexThread(codexApp, options, emit);
+        const app = await getCodexApp(options.appEmit || emit);
+        let threadId = await ensureCodexThread(app, options, emit);
+        options.onThread?.(threadId);
        try {
-            await codexApp.startTurn(threadId, prompt, files);
+            await app.startTurn(threadId, prompt, files, options.onTurn);
        } catch (error) {
            if (!isRecoverableThreadError(error)) throw error;
            emit("agent_log", { text: `Codex thread unavailable, starting a new thread: ${errorMessage(error)}` });
            codexThreadId = "";
-            threadId = await ensureCodexThread(codexApp, { cwd: options.cwd }, emit);
-            await codexApp.startTurn(threadId, prompt, files);
+            threadId = await ensureCodexThread(app, { cwd: options.cwd }, emit);
+            options.onThread?.(threadId);
+            await app.startTurn(threadId, prompt, files, options.onTurn);
        }
    } catch (error) {
        emit("agent_error", { message: errorMessage(error) });
    } finally {
+        options.onFinish?.();
        await Promise.all(files.map((file) => fs.unlink(file).catch(() => undefined)));
    }
 }

 export async function startCodexThread(emit: AgentEmit, cwd?: string) {
-    codexApp ||= await CodexAppClient.start(emit);
-    const thread = await codexApp.startThread(cwd);
+    const app = await getCodexApp(emit);
+    const thread = await app.startThread(cwd);
    codexThreadId = String(field(thread, "id") || "");
    return thread;
 }

 export async function resumeCodexThread(emit: AgentEmit, threadId: string, cwd?: string) {
-    codexApp ||= await CodexAppClient.start(emit);
+    const app = await getCodexApp(emit);
    await loadCodexThread(emit, threadId, cwd, false);
-    const thread = await codexApp.resumeThread(threadId, cwd);
+    const thread = await app.resumeThread(threadId, cwd);
    assertThreadWorkspace(thread, cwd);
    codexThreadId = String(field(thread, "id") || threadId);
    return { thread, messages: threadMessages(thread) };
 }

 export async function listCodexThreads(emit: AgentEmit, options: { cwd: string; searchTerm?: string; limit?: number }) {
-    codexApp ||= await CodexAppClient.start(emit);
-    const result = await codexApp.listThreads({
+    const app = await getCodexApp(emit);
+    const result = await app.listThreads({
        limit: options.limit || 40,
        sortKey: "updated_at",
        sortDirection: "desc",
@@ -97,9 +102,9 @@ export async function verifyCodexThreadWorkspace(emit: AgentEmit, threadId: stri
 }

 export async function archiveCodexThread(emit: AgentEmit, threadId: string, cwd?: string) {
-    codexApp ||= await CodexAppClient.start(emit);
+    const app = await getCodexApp(emit);
    await loadCodexThread(emit, threadId, cwd, false);
-    await codexApp.archiveThread(threadId);
+    await app.archiveThread(threadId);
 }

 export function runClaudeTurn(prompt: string, emit: AgentEmit) {
@@ -131,7 +136,7 @@ async function ensureCodexThread(app: CodexAppClient, options: CodexRunOptions,
    return codexThreadId;
 }

-function isRecoverableThreadError(error: unknown) {
+export function isRecoverableThreadError(error: unknown) {
    return /thread not loaded|no rollout found/i.test(errorMessage(error));
 }

@@ -192,10 +197,11 @@ class CodexAppClient {
        return this.request("thread/archive", { threadId });
    }

-    async startTurn(threadId: string, prompt: string, images: string[]) {
+    async startTurn(threadId: string, prompt: string, images: string[], onTurn?: (turnId: string) => void) {
        const result = await this.request("turn/start", { threadId, input: codexInput(prompt, images), approvalPolicy: "never" });
        const turnId = String(field(field(result, "turn"), "id") || "");
        if (!turnId) throw new Error("Codex app-server 没有返回 turn id");
+        onTurn?.(turnId);
        const completed = this.completedTurns.get(turnId);
        if (this.completedTurns.has(turnId)) {
            this.completedTurns.delete(turnId);
@@ -267,9 +273,9 @@ class CodexAppClient {
            } else if (turnId) {
                this.completedTurns.set(turnId, error ? new Error(String(field(error, "message") || "Codex turn failed")) : null);
            }
-            this.emit("agent_event", { agent: "codex", type: "stream.summary", delta_count: this.deltaCount });
+            this.emit("agent_event", { agent: "codex", type: "stream.summary", delta_count: this.deltaCount, ...codexEventScope(params) });
            this.deltaCount = 0;
-            this.emit("agent_done", { agent: "codex", usage: event.usage });
+            this.emit("agent_done", { agent: "codex", usage: event.usage, ...codexEventScope(params) });
        }
    }

@@ -278,7 +284,7 @@ class CodexAppClient {
        const text = `${this.textByItem.get(id) || ""}${String(field(params, "delta") || "")}`;
        this.deltaCount += 1;
        this.textByItem.set(id, text);
-        this.emit("agent_event", { agent: "codex", type: "item.updated", item: { id, type: "agent_message", text } });
+        this.emit("agent_event", { agent: "codex", type: "item.updated", item: { id, type: "agent_message", text }, ...codexEventScope(params) });
    }

    private answerServerRequest(message: Json) {
@@ -321,23 +327,41 @@ function codexInput(prompt: string, images: string[]) {
 }

 function normalizeCodexNotification(method: string, params: Json): AgentEvent | null {
-    if (method === "thread/started") return { type: "thread.started", thread_id: field(field(params, "thread"), "id") };
-    if (method === "turn/started") return { type: "turn.started" };
-    if (method === "turn/completed") return { type: "turn.completed", usage: null };
-    if (method === "item/started") return { type: "item.started", item: normalizeItem(field(params, "item")) };
-    if (method === "item/completed") return { type: "item.completed", item: normalizeItem(field(params, "item")) };
-    if (method === "error") return { type: "error", message: field(params, "message") };
+    const scope = codexEventScope(params);
+    if (method === "thread/started") return { type: "thread.started", ...scope };
+    if (method === "turn/started") return { type: "turn.started", ...scope };
+    if (method === "turn/completed") return { type: "turn.completed", usage: null, ...scope };
+    if (method === "item/started") return { type: "item.started", item: normalizeItem(field(params, "item")), ...scope };
+    if (method === "item/completed") return { type: "item.completed", item: normalizeItem(field(params, "item")), ...scope };
+    if (method === "error") return { type: "error", message: field(params, "message"), ...scope };
    return null;
 }

+function codexEventScope(params: Json) {
+    const threadId = String(field(params, "threadId") || field(field(params, "thread"), "id") || "");
+    const turnId = String(field(params, "turnId") || field(field(params, "turn"), "id") || "");
+    return { ...(threadId ? { thread_id: threadId } : {}), ...(turnId ? { turn_id: turnId } : {}) };
+}
+
 async function loadCodexThread(emit: AgentEmit, threadId: string, cwd: string | undefined, includeTurns: boolean) {
-    codexApp ||= await CodexAppClient.start(emit);
-    const result = await codexApp.readThread(threadId, includeTurns);
+    const app = await getCodexApp(emit);
+    const result = await app.readThread(threadId, includeTurns);
    const thread = field(result, "thread") || {};
    assertThreadWorkspace(thread, cwd);
    return thread;
 }

+async function getCodexApp(emit: AgentEmit) {
+    if (codexApp) return codexApp;
+    codexAppStart ||= CodexAppClient.start(emit);
+    try {
+        codexApp = await codexAppStart;
+        return codexApp;
+    } finally {
+        codexAppStart = null;
+    }
+}
+
 function assertThreadWorkspace(thread: unknown, cwd?: string) {
    if (!cwd || threadInWorkspace(thread, cwd)) return;
    throw new Error("该 Codex 会话不属于当前画布工作空间");
@@ -458,6 +482,7 @@ function toolName(name: string) {
    if (name === "canvas_get_state") return "读取画布";
    if (name === "canvas_get_selection") return "读取选区";
    if (name === "canvas_export_snapshot") return "导出快照";
+    if (name === "canvas_create_attachment_nodes") return "添加附件图片";
    if (name === "canvas_create_text_node") return "创建文本";
    if (name === "canvas_create_image_prompt_flow") return "创建生图流程";
    if (name === "canvas_create_generation_flow") return "创建生成流程";
@@ -0,0 +1,289 @@
+import { EventEmitter } from "node:events";
+import type { ServerResponse } from "node:http";
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { CanvasSession } from "./canvas-session.js";
+
+test("MCP 读取当前激活网页的画布", async (t) => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    const second = connect(session, "second");
+    t.after(() => {
+        first.close();
+        second.close();
+    });
+    session.updateState(snapshot("canvas-first"), "first");
+    session.updateState(snapshot("canvas-second"), "second");
+
+    session.activateClient("first");
+    assert.equal(field(await session.callTool("canvas_get_state", {}), "projectId"), "canvas-first");
+
+    session.activateClient("second");
+    assert.equal(field(await session.callTool("canvas_get_state", {}), "projectId"), "canvas-second");
+});
+
+test("画布写操作只发送给当前激活网页", async (t) => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    const second = connect(session, "second");
+    t.after(() => {
+        first.close();
+        second.close();
+    });
+    session.updateState(snapshot("canvas-first"), "first");
+    session.updateState(snapshot("canvas-second"), "second");
+    session.activateClient("second");
+
+    const result = session.callTool("canvas_create_text_node", { text: "只写入第二个画布" });
+    const call = second.event("tool_call");
+    assert.equal(first.event("tool_call"), undefined);
+    assert.equal(field(call, "name"), "canvas_apply_ops");
+    session.resolveResult("second", { requestId: String(field(call, "requestId")), result: { ok: true } });
+    assert.deepEqual(await result, { ok: true });
+});
+
+test("当前 turn 的图片附件可在发起标签页画布创建图片节点", async (t) => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    t.after(() => first.close());
+    const dataUrl = "data:image/png;base64,aW1hZ2U=";
+    session.setTurnAttachments("first", [{ id: "attachment-1", name: "商品.png", type: "image/png", size: 5, width: 1200, height: 600, dataUrl }]);
+    session.bindClient("first");
+
+    const result = session.callTool("canvas_create_attachment_nodes", { attachmentIds: ["attachment-1"], x: 100, y: 200 });
+    const call = first.event("tool_call");
+    const input = field(call, "input") as Record<string, unknown>;
+    const nodes = input.nodes as Array<Record<string, unknown>>;
+    assert.equal(field(call, "name"), "canvas_create_attachment_nodes");
+    assert.equal(nodes.length, 1);
+    assert.equal(nodes[0].attachmentId, "attachment-1");
+    assert.equal(nodes[0].title, "商品.png");
+    assert.deepEqual(nodes[0].position, { x: 100, y: 200 });
+    assert.equal(nodes[0].width, 640);
+    assert.equal(nodes[0].height, 320);
+    assert.equal("dataUrl" in nodes[0], false);
+    assert.equal(session.getTurnAttachment("first", "attachment-1").dataUrl, dataUrl);
+
+    session.resolveResult("first", { requestId: String(field(call, "requestId")), result: { ok: true } });
+    const created = (await result) as { nodes: Array<{ id: string; attachmentId: string; title: string }> };
+    assert.equal(created.nodes[0].id, nodes[0].id);
+    assert.equal(created.nodes[0].attachmentId, "attachment-1");
+    session.clearTurnAttachments("first");
+    assert.throws(() => session.getTurnAttachment("first", "attachment-1"), /找不到/);
+});
+
+test("图片附件只允许发起 turn 的标签页读取和落入画布", async (t) => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    const second = connect(session, "second");
+    t.after(() => {
+        first.close();
+        second.close();
+    });
+    session.setTurnAttachments("first", [{ id: "attachment-1", name: "商品.png", type: "image/png", dataUrl: "data:image/png;base64,aW1hZ2U=" }]);
+    session.bindClient("second");
+
+    await assert.rejects(session.callTool("canvas_create_attachment_nodes", { attachmentIds: ["attachment-1"] }), /发起标签页/);
+    assert.throws(() => session.getTurnAttachment("second", "attachment-1"), /发起标签页/);
+    assert.equal(first.event("tool_call"), undefined);
+    assert.equal(second.event("tool_call"), undefined);
+});
+
+test("tool result is accepted only from the request client", async (t) => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    const second = connect(session, "second");
+    t.after(() => {
+        first.close();
+        second.close();
+    });
+    session.activateClient("first");
+
+    const result = session.callTool("canvas_create_text_node", { text: "first only" });
+    const call = first.event("tool_call");
+    const requestId = String(field(call, "requestId"));
+
+    assert.equal(session.resolveResult("second", { requestId, result: { client: "second" } }), false);
+    assert.equal(session.resolveResult("first", { requestId, result: { client: "first" } }), true);
+    assert.deepEqual(await result, { client: "first" });
+});
+
+test("生成状态查询由当前激活网页返回", async (t) => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    const second = connect(session, "second");
+    t.after(() => {
+        first.close();
+        second.close();
+    });
+    session.activateClient("second");
+
+    const result = session.callTool("generation_get_status", { scope: "all" });
+    const call = second.event("tool_call");
+    assert.equal(first.event("tool_call"), undefined);
+    assert.equal(field(call, "name"), "generation_get_status");
+    session.resolveResult("second", { requestId: String(field(call, "requestId")), result: { total: 1, tasks: [{ id: "image-1", status: "running" }] } });
+    assert.deepEqual(await result, { total: 1, tasks: [{ id: "image-1", status: "running" }] });
+});
+
+test("活动网页关闭后回退到仍连接的画布", async (t) => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    const second = connect(session, "second");
+    t.after(() => {
+        first.close();
+        second.close();
+    });
+    session.updateState(snapshot("canvas-first"), "first");
+    session.updateState(snapshot("canvas-second"), "second");
+    session.activateClient("second");
+    second.close();
+
+    assert.equal(field(await session.callTool("canvas_get_state", {}), "projectId"), "canvas-first");
+});
+
+test("closing the active client falls back to the most recently focused client", async (t) => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    const second = connect(session, "second");
+    const third = connect(session, "third");
+    t.after(() => {
+        first.close();
+        second.close();
+        third.close();
+    });
+    session.updateState(snapshot("canvas-first"), "first");
+    session.updateState(snapshot("canvas-second"), "second");
+    session.updateState(snapshot("canvas-third"), "third");
+    session.activateClient("third");
+    session.activateClient("second");
+    second.close();
+
+    assert.equal(field(await session.callTool("canvas_get_state", {}), "projectId"), "canvas-third");
+});
+
+test("closing a client rejects its pending tool requests", async () => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    const result = session.callTool("canvas_create_text_node", { text: "pending" });
+    const call = first.event("tool_call");
+    const requestId = String(field(call, "requestId"));
+    first.close();
+
+    const outcome = await Promise.race([
+        result.then(() => "resolved", (error) => error instanceof Error ? error.message : String(error)),
+        new Promise<string>((resolve) => setTimeout(() => resolve("pending"), 20)),
+    ]);
+    if (outcome === "pending") session.resolveResult("first", { requestId, result: null });
+    assert.match(outcome, /断开/);
+});
+
+test("shared thread events are broadcast with the active thread id", (t) => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    const second = connect(session, "second");
+    t.after(() => {
+        first.close();
+        second.close();
+    });
+
+    session.emitThread("workspace_changed", "thread-2", { activeThreadId: "thread-2" });
+
+    assert.deepEqual(first.event("workspace_changed"), { activeThreadId: "thread-2", threadId: "thread-2" });
+    assert.deepEqual(second.event("workspace_changed"), { activeThreadId: "thread-2", threadId: "thread-2" });
+});
+
+test("new clients receive the current Codex state and later updates", (t) => {
+    const session = new CanvasSession();
+    session.setCodexState({ busy: true, threadId: "thread-2", turnId: "turn-1" });
+    const client = connect(session, "first");
+    t.after(() => client.close());
+
+    assert.deepEqual(field(client.event("hello"), "codex"), { busy: true, threadId: "thread-2", turnId: "turn-1" });
+
+    session.setCodexState({ busy: false });
+    assert.deepEqual(client.event("codex_state"), { busy: false, threadId: "thread-2", turnId: "turn-1" });
+});
+
+test("a bound client remains the tool target while focus changes", async (t) => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    const second = connect(session, "second");
+    t.after(() => {
+        first.close();
+        second.close();
+    });
+    session.updateState(snapshot("canvas-first"), "first");
+    session.updateState(snapshot("canvas-second"), "second");
+    session.bindClient("first");
+    session.activateClient("second");
+
+    assert.equal(field(await session.callTool("canvas_get_state", {}), "projectId"), "canvas-first");
+    const result = session.callTool("canvas_create_text_node", { text: "bound" });
+    const call = first.event("tool_call");
+    assert.equal(second.event("tool_call"), undefined);
+    session.resolveResult("first", { requestId: String(field(call, "requestId")), result: { ok: true } });
+    assert.deepEqual(await result, { ok: true });
+
+    session.releaseClient("first");
+    assert.equal(field(await session.callTool("canvas_get_state", {}), "projectId"), "canvas-second");
+});
+
+test("closing the bound client falls back to the active client", async (t) => {
+    const session = new CanvasSession();
+    const first = connect(session, "first");
+    const second = connect(session, "second");
+    t.after(() => {
+        first.close();
+        second.close();
+    });
+    session.updateState(snapshot("canvas-first"), "first");
+    session.updateState(snapshot("canvas-second"), "second");
+    session.bindClient("first");
+    session.activateClient("second");
+    first.close();
+
+    assert.equal(field(await session.callTool("canvas_get_state", {}), "projectId"), "canvas-second");
+    const result = session.callTool("canvas_create_text_node", { text: "fallback" });
+    const call = second.event("tool_call");
+    session.resolveResult("second", { requestId: String(field(call, "requestId")), result: { ok: true } });
+    assert.deepEqual(await result, { ok: true });
+});
+
+function connect(session: CanvasSession, clientId: string) {
+    const response = new FakeSseResponse();
+    session.openEvents(new URL(`http://127.0.0.1/events?clientId=${clientId}`), response as unknown as ServerResponse);
+    return response;
+}
+
+function snapshot(projectId: string) {
+    return { projectId, title: projectId, nodes: [], connections: [], selectedNodeIds: [], viewport: { x: 0, y: 0, k: 1 } };
+}
+
+function field(value: unknown, key: string) {
+    return value && typeof value === "object" ? (value as Record<string, unknown>)[key] : undefined;
+}
+
+class FakeSseResponse extends EventEmitter {
+    private chunks: string[] = [];
+
+    writeHead() {
+        return this;
+    }
+
+    write(chunk: string) {
+        this.chunks.push(chunk);
+        return true;
+    }
+
+    event(type: string) {
+        const chunk = this.chunks.find((item) => item.startsWith(`event: ${type}\n`));
+        const data = chunk?.split("\n").find((line) => line.startsWith("data: "))?.slice(6);
+        return data ? (JSON.parse(data) as unknown) : undefined;
+    }
+
+    close() {
+        this.emit("close");
+    }
+}
@@ -3,9 +3,11 @@ import type { ServerResponse } from "node:http";

 import { type ToolName } from "./schemas.js";
 import { compactCanvasState, compactNode, isToolName, nextCanvasX, parseToolInput } from "./tools.js";
-import type { CanvasNode, CanvasNodeType, CanvasSnapshot } from "./types.js";
+import type { AgentAttachment, CanvasNode, CanvasNodeType, CanvasSnapshot } from "./types.js";

-type PendingRequest = { resolve: (value: unknown) => void; reject: (error: Error) => void };
+type PendingRequest = { clientId: string; resolve: (value: unknown) => void; reject: (error: Error) => void };
+type TurnAttachment = { clientId: string; id: string; name: string; type: string; size: number; width: number; height: number; dataUrl: string };
+export type CodexState = { busy: boolean; threadId: string; turnId: string };

 const SITE_TOOLS = new Set<ToolName>([
    "site_navigate",
@@ -17,46 +19,141 @@ const SITE_TOOLS = new Set<ToolName>([
    "prompts_search",
    "assets_list",
    "assets_add",
+    "generation_get_status",
 ]);

 export class CanvasSession {
    private clients = new Map<string, ServerResponse>();
+    private clientFocusOrder = new Map<string, number>();
    private pending = new Map<string, PendingRequest>();
-    private canvasState: CanvasSnapshot | null = null;
+    private canvasStates = new Map<string, CanvasSnapshot>();
+    private turnAttachments = new Map<string, TurnAttachment>();
+    private activeClientId = "";
+    private boundClientId = "";
+    private focusSequence = 0;
+    private codexState: CodexState = { busy: false, threadId: "", turnId: "" };
+
+    private get canvasState() {
+        return this.canvasStates.get(this.targetClientId) || null;
+    }
+
+    private get targetClientId() {
+        return this.boundClientId || this.activeClientId;
+    }

    health() {
-        return { ok: true, hasCanvas: Boolean(this.canvasState), clients: this.clients.size };
+        return { ok: true, hasCanvas: Boolean(this.canvasState), clients: this.clients.size, codexBusy: this.codexState.busy };
+    }
+
+    get codexBusy() {
+        return this.codexState.busy;
+    }
+
+    setCodexState(patch: Partial<CodexState>) {
+        this.codexState = { ...this.codexState, ...patch };
+        this.emitAll("codex_state", this.codexState);
    }

    openEvents(url: URL, res: ServerResponse) {
        const clientId = url.searchParams.get("clientId") || crypto.randomUUID();
        const statusOnly = url.searchParams.get("role") === "status";
        res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive" });
-        if (!statusOnly) this.clients.set(clientId, res);
-        sendEvent(res, "hello", { ok: true, clientId });
+        if (!statusOnly) {
+            this.clients.set(clientId, res);
+            if (!this.clientFocusOrder.has(clientId)) this.clientFocusOrder.set(clientId, 0);
+            if (!this.activeClientId) {
+                this.activeClientId = clientId;
+                this.clientFocusOrder.set(clientId, ++this.focusSequence);
+            }
+        }
+        sendEvent(res, "hello", { ok: true, clientId, codex: this.codexState });
        const timer = setInterval(() => sendEvent(res, "ping", { time: Date.now() }), 15000);
        res.on("close", () => {
            clearInterval(timer);
-            if (!statusOnly) this.clients.delete(clientId);
-            if (this.canvasState?.clientId === clientId) this.canvasState = null;
+            if (statusOnly || this.clients.get(clientId) !== res) return;
+            this.clients.delete(clientId);
+            this.clientFocusOrder.delete(clientId);
+            this.canvasStates.delete(clientId);
+            if (this.boundClientId === clientId) this.boundClientId = "";
+            this.pending.forEach((item, requestId) => {
+                if (item.clientId !== clientId) return;
+                this.pending.delete(requestId);
+                item.reject(new Error("请求页面已断开"));
+            });
+            if (this.activeClientId === clientId) this.activeClientId = [...this.clients.keys()].sort((a, b) => (this.clientFocusOrder.get(b) || 0) - (this.clientFocusOrder.get(a) || 0))[0] || "";
        });
    }

    updateState(body: unknown, clientId?: string) {
-        this.canvasState = { ...((body && typeof body === "object" && !Array.isArray(body) ? body : {}) as Record<string, unknown>), clientId } as CanvasSnapshot;
+        const targetClientId = clientId || this.activeClientId;
+        if (!targetClientId) return;
+        this.canvasStates.set(targetClientId, { ...((body && typeof body === "object" && !Array.isArray(body) ? body : {}) as Record<string, unknown>), clientId: targetClientId } as CanvasSnapshot);
    }

-    resolveResult(body: { requestId?: string; error?: string; result?: unknown }) {
+    activateClient(clientId: string) {
+        if (!this.clients.has(clientId)) throw new Error("当前网页未连接");
+        this.activeClientId = clientId;
+        this.clientFocusOrder.set(clientId, ++this.focusSequence);
+    }
+
+    bindClient(clientId: string) {
+        if (!this.clients.has(clientId)) throw new Error("当前网页未连接");
+        this.boundClientId = clientId;
+    }
+
+    releaseClient(clientId: string) {
+        if (this.boundClientId === clientId) this.boundClientId = "";
+    }
+
+    setTurnAttachments(clientId: string, attachments: AgentAttachment[]) {
+        this.turnAttachments.clear();
+        return attachments.flatMap((item, index) => {
+            if (!item.dataUrl?.startsWith("data:image/")) return [];
+            const id = item.id?.trim() || `attachment-${crypto.randomUUID()}`;
+            const attachment: TurnAttachment = {
+                clientId,
+                id,
+                name: item.name?.trim() || `图片 ${index + 1}`,
+                type: item.type?.startsWith("image/") ? item.type : item.dataUrl.match(/^data:([^;]+)/)?.[1] || "image/png",
+                size: positiveNumber(item.size, 0),
+                width: positiveNumber(item.width, 1024),
+                height: positiveNumber(item.height, 1024),
+                dataUrl: item.dataUrl,
+            };
+            this.turnAttachments.set(id, attachment);
+            return [{ id, name: attachment.name, type: attachment.type, size: attachment.size, width: attachment.width, height: attachment.height }];
+        });
+    }
+
+    clearTurnAttachments(clientId?: string) {
+        this.turnAttachments.forEach((item, id) => {
+            if (!clientId || item.clientId === clientId) this.turnAttachments.delete(id);
+        });
+    }
+
+    getTurnAttachment(clientId: string, attachmentId: string) {
+        const attachment = this.turnAttachments.get(attachmentId);
+        if (!attachment) throw new Error(`找不到本轮图片附件：${attachmentId}`);
+        if (attachment.clientId !== clientId) throw new Error("图片附件不属于当前 turn 的发起标签页");
+        return attachment;
+    }
+
+    resolveResult(clientId: string, body: { requestId?: string; error?: string; result?: unknown }) {
        const item = body.requestId ? this.pending.get(body.requestId) : null;
-        if (!item || !body.requestId) return;
+        if (!item || !body.requestId || item.clientId !== clientId) return false;
        this.pending.delete(body.requestId);
        body.error ? item.reject(new Error(body.error)) : item.resolve(body.result);
+        return true;
    }

    emitAll(type: string, payload: unknown) {
        this.clients.forEach((client) => sendEvent(client, type, payload));
    }

+    emitThread(type: string, threadId: string, payload: Record<string, unknown> = {}) {
+        this.emitAll(type, { ...payload, threadId });
+    }
+
    async callTool(name: unknown, rawInput: unknown) {
        if (!isToolName(name)) throw new Error(`未知工具：${String(name)}`);
        let tool: ToolName = name;
@@ -72,6 +169,7 @@ export class CanvasSession {
            const ids = new Set(this.canvasState?.selectedNodeIds || []);
            return { nodes: (this.canvasState?.nodes || []).filter((node) => ids.has(node.id)).map(compactNode) };
        }
+        if (tool === "canvas_create_attachment_nodes") return await this.createAttachmentNodes(input as { attachmentIds: string[]; x?: number; y?: number; gap?: number; direction?: "row" | "column" });
        if (tool === "canvas_create_node") {
            const data = input as { nodeType: CanvasNodeType; title?: string; x?: number; y?: number; width?: number; height?: number; metadata?: Record<string, unknown> };
            input = { ops: [{ type: "add_node", nodeType: data.nodeType, title: data.title, position: { x: data.x ?? nextCanvasX(this.canvasState), y: data.y ?? 0 }, width: data.width, height: data.height, metadata: data.metadata }] };
@@ -166,9 +264,36 @@ export class CanvasSession {
        return await this.requestCanvasTool(tool, input);
    }

+    private async createAttachmentNodes(input: { attachmentIds: string[]; x?: number; y?: number; gap?: number; direction?: "row" | "column" }) {
+        const clientId = this.targetClientId;
+        if (!this.clients.has(clientId)) throw new Error("当前没有已连接画布");
+        const attachments = input.attachmentIds.map((id) => this.getTurnAttachment(clientId, id));
+        const x = Number(input.x ?? nextCanvasX(this.canvasState));
+        const y = Number(input.y ?? 0);
+        const gap = Number(input.gap ?? 40);
+        const direction = input.direction || "row";
+        let offset = 0;
+        const nodes = attachments.map((attachment) => {
+            const size = fitAttachmentNodeSize(attachment.width, attachment.height);
+            const node = {
+                id: `image-${crypto.randomUUID()}`,
+                attachmentId: attachment.id,
+                title: attachment.name,
+                position: { x: direction === "row" ? x + offset : x, y: direction === "column" ? y + offset : y },
+                width: size.width,
+                height: size.height,
+            };
+            offset += (direction === "row" ? size.width : size.height) + gap;
+            return node;
+        });
+        await this.requestCanvasTool("canvas_create_attachment_nodes", { nodes });
+        return { nodes: nodes.map(({ id, attachmentId, title }) => ({ id, attachmentId, title })) };
+    }
+
    private async requestCanvasTool(name: ToolName, input: Record<string, unknown>) {
        const requestId = crypto.randomUUID();
-        const client = this.clients.get(this.canvasState?.clientId || "") || this.clients.values().next().value;
+        const clientId = this.targetClientId;
+        const client = this.clients.get(clientId);
        if (!client) throw new Error("当前没有已连接画布");
        sendEvent(client, "tool_call", { requestId, name, input });
        return await new Promise((resolve, reject) => {
@@ -176,7 +301,7 @@ export class CanvasSession {
                this.pending.delete(requestId);
                reject(new Error("画布操作超时"));
            }, 30000);
-            this.pending.set(requestId, { resolve: (value) => (clearTimeout(timer), resolve(value)), reject: (error) => (clearTimeout(timer), reject(error)) });
+            this.pending.set(requestId, { clientId, resolve: (value) => (clearTimeout(timer), resolve(value)), reject: (error) => (clearTimeout(timer), reject(error)) });
        });
    }
 }
@@ -263,3 +388,13 @@ function findNode(state: CanvasSnapshot | null, id: string): CanvasNode | undefi
 function cleanRecord(value: Record<string, unknown>) {
    return Object.fromEntries(Object.entries(value).filter(([, item]) => item !== undefined && item !== ""));
 }
+
+function positiveNumber(value: unknown, fallback: number) {
+    const number = Number(value);
+    return Number.isFinite(number) && number > 0 ? number : fallback;
+}
+
+function fitAttachmentNodeSize(width: number, height: number) {
+    const scale = Math.min(1, 640 / width, 640 / height);
+    return { width: width * scale, height: height * scale };
+}
@@ -7,7 +7,7 @@ export const DEFAULT_PORT = 17371;
 export const CONFIG_DIR = path.join(os.homedir(), ".infinite-canvas");
 export const CONFIG_FILE = path.join(CONFIG_DIR, "canvas-agent.json");
 export const VERSION = readPackageVersion();
-export const AGENT_PROMPT = "你正在帮助用户操作 Infinite Canvas 网站。切换网站页面用 site_navigate，可跳 / (首页)、/canvas (我的画布)、/canvas/:id (指定画布)、/image、/video、/prompts、/assets、/config。需要改动画布时优先使用已配置的 infinite-canvas MCP 工具：先 canvas_get_state 读取当前画布，再根据任务使用 canvas_create_text_node、canvas_generate_text、canvas_generate_image、canvas_generate_video、canvas_generate_audio、canvas_create_generation_flow、canvas_create_config_node、canvas_run_generation、canvas_update_node、canvas_connect_nodes 等通用工具；复杂批量改动再用 canvas_apply_ops，删除连线可用 delete_connections。若当前不在画布页，画布工具会报错，需先用 site_navigate 打开画布。想了解或打开用户已有画布，用 canvas_list_projects 获取画布清单和 id，再用 site_navigate 跳 /canvas/:id 打开。生图工作台可用 workbench_image_get_config 看可选项、workbench_image_generate 填提示词并生成；视频创作台对应 workbench_video_get_config 与 workbench_video_generate；用 prompts_search 分页搜索提示词库；用 assets_list 查看「我的素材」、assets_add 新增文本或图片素材。需要生成内容时直接调用对应生成工具，不要绑定特定业务场景。不要模拟鼠标点击，不要要求用户手动复制 JSON。";
+export const AGENT_PROMPT = "你正在帮助用户操作 Infinite Canvas 网站。切换网站页面用 site_navigate，可跳 / (首页)、/canvas (我的画布)、/canvas/:id (指定画布)、/image、/video、/prompts、/assets、/config。需要改动画布时优先使用已配置的 infinite-canvas MCP 工具：先 canvas_get_state 读取当前画布，再根据任务使用 canvas_create_text_node、canvas_generate_text、canvas_generate_image、canvas_generate_video、canvas_generate_audio、canvas_create_generation_flow、canvas_create_config_node、canvas_run_generation、canvas_update_node、canvas_connect_nodes 等通用工具；复杂批量改动再用 canvas_apply_ops，删除连线可用 delete_connections。本轮若有用户上传的图片附件，会同时给出 attachmentId；用户要求把附件放入画布或作为生成参考图时，必须先用 canvas_create_attachment_nodes 创建真实图片节点，再把返回的节点 ID 传给 canvas_create_generation_flow.referenceNodeIds，不要创建空图片占位节点。若当前不在画布页，画布工具会报错，需先用 site_navigate 打开画布。想了解或打开用户已有画布，用 canvas_list_projects 获取画布清单和 id，再用 site_navigate 跳 /canvas/:id 打开。生图工作台可用 workbench_image_get_config 看可选项、workbench_image_generate 填提示词并生成；视频创作台对应 workbench_video_get_config 与 workbench_video_generate；用 prompts_search 分页搜索提示词库；用 assets_list 查看「我的素材」、assets_add 新增文本或图片素材。需要生成内容时直接调用对应生成工具，不要绑定特定业务场景。不要模拟鼠标点击，不要要求用户手动复制 JSON。";

 export type SiteWorkspaceConfig = { workspacePath: string; activeThreadId?: string; pinnedThreadIds?: string[] };
 export type CanvasAgentConfig = { url: string; token: string; origins?: string[]; workspace?: SiteWorkspaceConfig };
@@ -2,7 +2,7 @@ import express, { type NextFunction, type Request, type Response } from "express

 import { DEFAULT_PORT, ensureSiteWorkspace, loadConfig, saveConfig, updateSiteWorkspace, type CanvasAgentConfig } from "./config.js";
 import { CanvasSession } from "./canvas-session.js";
-import { archiveCodexThread, interruptCodexTurn, listCodexThreads, readCodexThread, resumeCodexThread, runClaudeTurn, runCodexTurn, startCodexThread, summarizeCodexThread, verifyCodexThreadWorkspace, withAgentPrompt } from "./agents.js";
+import { archiveCodexThread, interruptCodexTurn, isRecoverableThreadError, listCodexThreads, readCodexThread, resumeCodexThread, runClaudeTurn, runCodexTurn, startCodexThread, summarizeCodexThread, verifyCodexThreadWorkspace, withAgentPrompt } from "./agents.js";
 import type { AgentAttachment } from "./types.js";

 export function startHttpServer() {
@@ -12,7 +12,16 @@ export function startHttpServer() {
    saveConfig(config);

    const session = new CanvasSession();
-    const emit = (type: string, payload: unknown) => session.emitAll(type, payload);
+    const emit = (type: string, payload: unknown) => {
+        const data = payload && typeof payload === "object" && !Array.isArray(payload) ? payload as Record<string, unknown> : { value: payload };
+        const threadId = String(data.threadId || data.thread_id || ensureSiteWorkspace(config).activeThreadId || "");
+        threadId ? session.emitThread(type, threadId, data) : session.emitAll(type, data);
+    };
+    const setActiveThread = (activeThreadId: string, payload: Record<string, unknown> = {}) => {
+        const workspace = updateSiteWorkspace(config, { activeThreadId: activeThreadId || undefined });
+        session.emitThread("workspace_changed", activeThreadId, { ...payload, activeThreadId });
+        return workspace;
+    };
    const app = express();
    app.disable("x-powered-by");
    app.use(express.json({ limit: "30mb" }));
@@ -33,10 +42,21 @@ export function startHttpServer() {
        session.updateState(req.body, String(req.query.clientId || "") || undefined);
        res.json({ ok: true });
    });
-    app.post("/canvas/result", (req, res) => {
-        session.resolveResult(req.body);
+    app.post("/canvas/activate", (req, res) => {
+        session.activateClient(String(req.query.clientId || ""));
        res.json({ ok: true });
    });
+    app.post("/canvas/result", (req, res) => {
+        const ok = session.resolveResult(String(req.query.clientId || ""), req.body);
+        res.status(ok ? 200 : 409).json({ ok });
+    });
+    app.get("/agent/attachments/:attachmentId", route(async (req, res) => {
+        const attachment = session.getTurnAttachment(String(req.query.clientId || ""), routeParam(req.params.attachmentId));
+        const data = attachment.dataUrl.split(",", 2)[1];
+        if (!data) throw new Error("图片附件内容无效");
+        res.setHeader("Cache-Control", "no-store");
+        res.type(attachment.type).send(Buffer.from(data, "base64"));
+    }));
    app.post("/api/tools", route(async (req, res) => res.json({ ok: true, result: await session.callTool(req.body?.name, req.body?.input || {}) })));
    app.get("/agent/codex/workspace", (_req, res) => {
        const workspace = ensureSiteWorkspace(config);
@@ -48,48 +68,102 @@ export function startHttpServer() {
        res.json({ ok: true, workspace, ...result });
    }));
    app.post("/agent/codex/threads/new", route(async (_req, res) => {
+        if (session.codexBusy) return res.status(409).json({ ok: false, error: "Codex 正在运行，请等待当前任务完成" });
        const workspace = ensureSiteWorkspace(config);
        const thread = await startCodexThread(emit, workspace.workspacePath);
        const activeThreadId = String((thread as Record<string, unknown>).id || "");
-        updateSiteWorkspace(config, { activeThreadId });
-        res.json({ ok: true, workspace: { ...workspace, activeThreadId }, thread: summarizeCodexThread(thread), messages: [] });
+        const nextWorkspace = setActiveThread(activeThreadId, { emptyThread: true });
+        res.json({ ok: true, workspace: nextWorkspace, thread: summarizeCodexThread(thread), messages: [] });
    }));
    app.get("/agent/codex/threads/:threadId", route(async (req, res) => {
        const workspace = ensureSiteWorkspace(config);
        const threadId = routeParam(req.params.threadId);
-        res.json({ ok: true, workspace, ...(await readCodexThread(emit, threadId, workspace.workspacePath)) });
+        try {
+            res.json({ ok: true, workspace, ...(await readCodexThread(emit, threadId, workspace.workspacePath)) });
+        } catch (error) {
+            if (workspace.activeThreadId !== threadId || !isRecoverableThreadError(error)) throw error;
+            res.json({ ok: true, workspace, thread: { id: threadId, preview: "", cwd: workspace.workspacePath }, messages: [] });
+        }
    }));
    app.post("/agent/codex/threads/:threadId/resume", route(async (req, res) => {
+        if (session.codexBusy) return res.status(409).json({ ok: false, error: "Codex 正在运行，请等待当前任务完成" });
        const workspace = ensureSiteWorkspace(config);
        const threadId = routeParam(req.params.threadId);
        const result = await resumeCodexThread(emit, threadId, workspace.workspacePath);
-        updateSiteWorkspace(config, { activeThreadId: threadId });
-        res.json({ ok: true, workspace: { ...workspace, activeThreadId: threadId }, ...result });
+        const nextWorkspace = setActiveThread(threadId);
+        res.json({ ok: true, workspace: nextWorkspace, ...result });
    }));
    app.post("/agent/codex/threads/:threadId/delete", route(async (req, res) => {
+        if (session.codexBusy) return res.status(409).json({ ok: false, error: "Codex 正在运行，请等待当前任务完成" });
        const workspace = ensureSiteWorkspace(config);
        const threadId = routeParam(req.params.threadId);
        await archiveCodexThread(emit, threadId, workspace.workspacePath);
-        if (workspace.activeThreadId === threadId) updateSiteWorkspace(config, { activeThreadId: undefined });
+        setActiveThread(workspace.activeThreadId === threadId ? "" : workspace.activeThreadId || "");
        res.json({ ok: true });
    }));
    app.post("/agent/codex/turn", route(async (req, res) => {
+        if (session.codexBusy) return res.status(409).json({ ok: false, error: "Codex 正在运行，请等待当前任务完成" });
        const attachments = Array.isArray(req.body?.attachments) ? (req.body.attachments as AgentAttachment[]) : [];
        const workspace = ensureSiteWorkspace(config);
-        let threadId = String(req.body?.threadId || workspace.activeThreadId || "");
-        if (!threadId) {
-            const thread = await startCodexThread(emit, workspace.workspacePath);
-            threadId = String((thread as Record<string, unknown>).id || "");
-            updateSiteWorkspace(config, { activeThreadId: threadId });
-        } else if (threadId !== workspace.activeThreadId) {
-            await verifyCodexThreadWorkspace(emit, threadId, workspace.workspacePath);
-            updateSiteWorkspace(config, { activeThreadId: threadId });
+        const prompt = String(req.body?.prompt || "");
+        if (!prompt.trim()) return res.status(400).json({ ok: false, error: "请输入任务内容" });
+        const clientId = String(req.body?.clientId || "");
+        session.setCodexState({ busy: true, threadId: String(req.body?.threadId || workspace.activeThreadId || ""), turnId: "" });
+        try {
+            let threadId = String(req.body?.threadId || workspace.activeThreadId || "");
+            let turnId = "";
+            if (!threadId) {
+                const thread = await startCodexThread(emit, workspace.workspacePath);
+                threadId = String((thread as Record<string, unknown>).id || "");
+                setActiveThread(threadId, { emptyThread: true });
+            } else if (threadId !== workspace.activeThreadId) {
+                await verifyCodexThreadWorkspace(emit, threadId, workspace.workspacePath);
+                setActiveThread(threadId);
+            }
+            const attachmentRefs = session.setTurnAttachments(clientId, attachments);
+            const chatMessage = {
+                sourceClientId: clientId,
+                message: { id: String(req.body?.messageId || Date.now()), role: "user", text: String(req.body?.messageText || prompt || `发送了 ${attachments.length} 张图片`) },
+            };
+            let chatThreadId = "";
+            const turnEmit = (type: string, payload: unknown) => {
+                const data = payload && typeof payload === "object" && !Array.isArray(payload) ? payload as Record<string, unknown> : { value: payload };
+                session.emitThread(type, threadId, data);
+            };
+            void runCodexTurn(withAgentPrompt(withAttachmentContext(prompt, attachmentRefs)), turnEmit, attachments, {
+                threadId,
+                cwd: workspace.workspacePath,
+                appEmit: emit,
+                onStart: clientId ? () => session.bindClient(clientId) : undefined,
+                onThread: (actualThreadId) => {
+                    if (actualThreadId !== threadId) {
+                        threadId = actualThreadId;
+                        setActiveThread(threadId, { emptyThread: true });
+                    }
+                    session.setCodexState({ busy: true, threadId, turnId: "" });
+                    if (chatThreadId !== threadId) {
+                        chatThreadId = threadId;
+                        session.emitThread("chat_message", threadId, chatMessage);
+                    }
+                },
+                onTurn: (actualTurnId) => {
+                    turnId = actualTurnId;
+                    session.setCodexState({ busy: true, threadId, turnId });
+                },
+                onFinish: () => {
+                    session.clearTurnAttachments(clientId);
+                    if (clientId) session.releaseClient(clientId);
+                    session.setCodexState({ busy: false, threadId, turnId });
+                },
+            });
+            res.json({ ok: true, threadId });
+        } catch (error) {
+            session.setCodexState({ busy: false, threadId: String(req.body?.threadId || workspace.activeThreadId || ""), turnId: "" });
+            throw error;
        }
-        void runCodexTurn(withAgentPrompt(String(req.body?.prompt || "")), emit, attachments, { threadId, cwd: workspace.workspacePath });
-        res.json({ ok: true, threadId });
    }));
-    app.post("/agent/codex/interrupt", (_req, res) => {
-        const ok = interruptCodexTurn();
+    app.post("/agent/codex/interrupt", (req, res) => {
+        const ok = interruptCodexTurn(String(req.body?.threadId || ""));
        res.json({ ok });
    });
    app.post("/agent/claude/turn", (req, res) => {
@@ -141,3 +215,9 @@ function validToken(req: Request, url: URL, token: string) {
    const header = req.headers["x-canvas-agent-token"];
    return url.searchParams.get("token") === token || header === token || (Array.isArray(header) && header.includes(token));
 }
+
+function withAttachmentContext(prompt: string, attachments: Array<{ id: string; name: string }>) {
+    if (!attachments.length) return prompt;
+    const list = attachments.map((item, index) => `${index + 1}. attachmentId=${item.id}, name=${JSON.stringify(item.name)}`).join("\n");
+    return `${prompt}\n\n本轮可用图片附件（顺序与图片输入一致）：\n${list}\n需要把附件放入画布或作为生成参考图时，先调用 canvas_create_attachment_nodes，再使用返回的画布节点 ID 创建生成流程。`;
+}
@@ -14,6 +14,7 @@ export const toolNames = [
    "canvas_export_snapshot",
    "canvas_apply_ops",
    "canvas_create_node",
+    "canvas_create_attachment_nodes",
    "canvas_create_text_node",
    "canvas_create_text_nodes",
    "canvas_create_config_node",
@@ -32,6 +33,7 @@ export const toolNames = [
    "canvas_select_nodes",
    "canvas_set_viewport",
    "canvas_run_generation",
+    "generation_get_status",
    "workbench_image_get_config",
    "workbench_image_generate",
    "workbench_video_get_config",
@@ -93,6 +95,7 @@ export const toolInputSchemas = {
    canvas_export_snapshot: z.object({}).passthrough(),
    canvas_apply_ops: z.object({ ops: z.array(canvasOpSchema) }),
    canvas_create_node: z.object({ nodeType: nodeTypeSchema, title: z.string().optional(), x: z.number().optional(), y: z.number().optional(), width: z.number().optional(), height: z.number().optional(), metadata: recordSchema.optional() }),
+    canvas_create_attachment_nodes: z.object({ attachmentIds: z.array(z.string()).min(1), x: z.number().optional(), y: z.number().optional(), gap: z.number().optional(), direction: z.enum(["row", "column"]).optional() }),
    canvas_create_text_node: z.object({ text: z.string().optional(), x: z.number().optional(), y: z.number().optional(), title: z.string().optional(), width: z.number().optional(), height: z.number().optional() }),
    canvas_create_text_nodes: z.object({ items: z.array(textNodeSchema).min(1), x: z.number().optional(), y: z.number().optional(), gap: z.number().optional(), direction: z.enum(["row", "column"]).optional() }),
    canvas_create_config_node: z.object({ prompt: z.string().optional(), mode: generationModeSchema.optional(), title: z.string().optional(), x: z.number().optional(), y: z.number().optional(), width: z.number().optional(), height: z.number().optional(), autoRun: z.boolean().optional() }).merge(generationOptionsSchema),
@@ -111,6 +114,7 @@ export const toolInputSchemas = {
    canvas_select_nodes: z.object({ ids: z.array(z.string()) }),
    canvas_set_viewport: z.object({ viewport: viewportSchema }),
    canvas_run_generation: z.object({ nodeId: z.string(), mode: generationModeSchema.optional(), prompt: z.string().optional() }),
+    generation_get_status: z.object({ scope: z.enum(["all", "canvas", "image", "video"]).optional(), taskId: z.string().optional(), nodeIds: z.array(z.string()).optional(), limit: z.number().optional() }),
    workbench_image_get_config: z.object({}).passthrough(),
    workbench_image_generate: z.object({ prompt: z.string(), model: z.string().optional(), quality: z.string().optional(), size: z.string().optional(), count: z.number().optional(), run: z.boolean().optional() }),
    workbench_video_get_config: z.object({}).passthrough(),
@@ -128,6 +132,7 @@ export const toolDescriptions: Record<ToolName, string> = {
    canvas_export_snapshot: "导出当前画布快照，用于理解布局。",
    canvas_apply_ops: "批量操作当前网页画布。ops 支持 add_node、update_node、delete_node、delete_connections、connect_nodes、set_viewport、select_nodes、run_generation。",
    canvas_create_node: "创建任意类型节点：text、image、config、video、audio。适合创建占位图、媒体占位、配置节点或自定义 metadata 节点。",
+    canvas_create_attachment_nodes: "把当前对话中用户上传的图片附件创建成真实画布图片节点。attachmentIds 使用本轮附件清单中的 ID；返回的节点 ID 可传给 canvas_create_generation_flow.referenceNodeIds 作为生成参考图。",
    canvas_create_text_node: "在当前画布创建单个文本节点。",
    canvas_create_text_nodes: "批量创建文本节点，适合生成标题、段落、脚本、说明等内容块。",
    canvas_create_config_node: "创建生成配置节点，可指定 text/image/video/audio 模式和生成参数，可选择立即触发生成。",
@@ -146,10 +151,11 @@ export const toolDescriptions: Record<ToolName, string> = {
    canvas_select_nodes: "设置当前选中节点。",
    canvas_set_viewport: "调整画布视口。",
    canvas_run_generation: "触发指定节点生成，通常用于配置节点或文本/图片/视频/音频节点。",
+    generation_get_status: "查询当前活动网页的生成任务状态。默认返回画布、生图工作台和视频工作台最近任务；可用 scope 过滤来源，用 taskId 查询工作台任务，用 nodeIds 查询画布节点。",
    workbench_image_get_config: "读取生图工作台的当前参数和可选项（可用模型、质量、尺寸/宽高比、张数范围），在调用 workbench_image_generate 前先了解可选值。",
-    workbench_image_generate: "在生图工作台填入提示词并按需设置 model、quality、size（如 1:1 或 1024x1024）、count，run 默认 true 会自动点击生成按钮。会自动跳转到生图工作台。生成为异步过程，工具返回代表已提交，结果请在工作台查看。",
+    workbench_image_generate: "在生图工作台填入提示词并按需设置 model、quality、size（如 1:1 或 1024x1024）、count，run 默认 true 会自动点击生成按钮。会自动跳转到生图工作台。生成为异步过程，提交后返回 taskId，可用 generation_get_status 查询状态。",
    workbench_video_get_config: "读取视频创作台的当前参数和可选项（可用模型、尺寸/比例、时长、清晰度/分辨率、是否生成声音与水印）。",
-    workbench_video_generate: "在视频创作台填入提示词并按需设置 model、size、seconds、resolution、generateAudio、watermark，run 默认 true 会自动点击生成按钮。会自动跳转到视频创作台。生成为异步过程，工具返回代表已提交。",
+    workbench_video_generate: "在视频创作台填入提示词并按需设置 model、size、seconds、resolution、generateAudio、watermark，run 默认 true 会自动点击生成按钮。会自动跳转到视频创作台。生成为异步过程，提交后返回 taskId，可用 generation_get_status 查询状态。",
    prompts_search: "搜索提示词库（第三方提示词合集），支持 keyword、category、tags 过滤和 page/pageSize 分页，返回标题、提示词、分类、标签、封面等。",
    assets_list: "列出用户「我的素材」，支持 kind（text/image/video）过滤、keyword 搜索和 page/pageSize 分页。为控制体积不返回图片/视频原始 data，仅返回封面与元信息。",
    assets_add: "向「我的素材」新增素材。kind=text 时用 content 传文本内容；kind=image 时用 imageUrl 传图片地址或 dataURL。可附带 title、tags、source、note。",
@@ -5,4 +5,4 @@ export type CanvasNode = { id: string; type: CanvasNodeType; title?: string; pos
 export type CanvasConnection = { id: string; fromNodeId: string; toNodeId: string };
 export type CanvasSnapshot = { projectId?: string; title?: string; nodes?: CanvasNode[]; connections?: CanvasConnection[]; selectedNodeIds?: string[]; viewport?: Viewport; clientId?: string };
 export type AgentEmit = (type: string, payload: unknown) => void;
-export type AgentAttachment = { name?: string; type?: string; dataUrl?: string };
+export type AgentAttachment = { id?: string; name?: string; type?: string; size?: number; width?: number; height?: number; dataUrl?: string };
@@ -10,5 +10,6 @@
    "rootDir": "src",
    "skipLibCheck": true
  },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.test.ts"]
 }
@@ -5,3 +5,7 @@ services:
    ports:
      - "3000:3000"
    restart: unless-stopped
+    # 统计分析（可选，默认关闭）。每家一个独立变量，填了谁就启用谁，可同时启用多家：
+    # environment:
+    #   ANALYTICS_GA4_ID: G-XXXXXXXXXX                    # Google Analytics 4 衡量 ID
+    #   ANALYTICS_BAIDU_ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxx   # 百度统计站点 ID
@@ -24,6 +24,7 @@ description: 当前画布节点的主要用途与操作流程
 - 当文本节点为空时，输入框用于填写想生成的文本内容；点击发送后，结果会回填到当前文本节点。
 - 当文本节点已有内容时，输入框用于填写想把本段文本修改成什么；点击发送后，会在右侧生成新的文本节点，并自动连接原节点和新节点。
 - 输入内容可以手写，也可以从提示词库选择。
+- 输入框支持 `@` 引用已连接的图片、文本、视频、音频资源；`@` 引用图片时会在输入框内直接显示真实缩略图，发送时按当前连接自动编号交给模型。因此不需要再记忆「图片1 / 文本1」编号，画布节点右上角也不再显示资源角标。
 - 对话框里的模型下拉来自全局配置里已拉取的模型列表；选择结果只作用于当前节点，不会修改其它节点或全局默认模型。
 - 如果下拉中没有模型，需要先打开配置弹窗拉取模型列表，并设置默认生图模型和默认文本模型。火山方舟 Agent Plan 若提示不支持 `/models`，请手动填写模型名。

@@ -4,6 +4,7 @@
  "defaultOpen": true,
  "pages": [
    "local-development",
-    "canvas-data-structure"
+    "canvas-data-structure",
+    "local-codex-canvas"
  ]
 }
@@ -50,3 +50,42 @@ docker compose -f docker-compose.local.yml up -d --build
 ## 数据说明

 当前主应用镜像只启动 Next.js。画布、我的素材、生成记录和 AI API Key 默认保存在浏览器本地；第三方提示词由浏览器前端直连拉取，不需要额外挂载数据目录。
+
+## 统计分析（可选）
+
+项目**默认不接入任何统计**：不设置下列环境变量时，页面不会加载任何统计脚本，也不会发送任何外部请求。你在自己的部署上想查看流量时，设置对应环境变量即可，无需修改代码或重新构建镜像——镜像启动时会据此生成运行期配置。
+
+统计按「每家一个独立变量」配置：**填了谁就启用谁，可同时启用多家**（例如 GA4 + 百度一起开）。仅支持 GA4 与百度，两者都只接受 ID，脚本地址由代码固定拼接，不接受任意脚本地址或内联 JS。
+
+| 变量 | 说明 |
+| --- | --- |
+| `ANALYTICS_GA4_ID` | Google Analytics 4 衡量 ID（`G-XXXX`） |
+| `ANALYTICS_BAIDU_ID` | 百度统计站点 ID（`hm.js?` 后面那串 hash） |
+
+在 `docker-compose.yml` 的 `environment` 中配置（文件内已附注释示例），下例同时启用 GA4 与百度：
+
+```yaml
+services:
+  app:
+    image: ghcr.io/basketikun/infinite-canvas:latest
+    ports:
+      - "3000:3000"
+    environment:
+      ANALYTICS_GA4_ID: G-XXXXXXXXXX
+      ANALYTICS_BAIDU_ID: e8263761cc5c32f5f7a855b8203b965a
+```
+
+或使用 `docker run`：
+
+```bash
+docker run -d -p 3000:3000 \
+  -e ANALYTICS_GA4_ID=G-XXXXXXXXXX \
+  -e ANALYTICS_BAIDU_ID=e8263761cc5c32f5f7a855b8203b965a \
+  ghcr.io/basketikun/infinite-canvas:latest
+```
+
+单页应用的路由切换会自动向所有已启用的统计上报 pageview。
+
+<Callout type="warn">
+请只在你自己的站点上配置统计 ID，不要把 ID 提交进仓库；fork 或自托管本项目的用户默认不会产生任何统计。
+</Callout>
@@ -85,9 +85,12 @@ Base URL 如果已经以 `/v1`、`/api/v3` 或 `/api/plan/v3` 结尾，系统不
 - 生成数量。
 - 视频模型。
 - 视频比例、清晰度、时长、生成声音和水印。
+- 自定义生图 / 视频接口的调用方式，灵活适配不同中转站与自建服务。

 普通图片/文本节点可以直接输入提示词生成结果。生成配置节点可以读取上游节点内容，并按节点自己的配置批量生成多个图片或文本结果。生成配置节点支持预览当前提示词和参考图输入，并调整输入顺序。

+节点下方对话框和组装提示词输入框都支持 `@` 引用已连接的图片、文本、视频、音频等资源；`@` 引用图片时，输入框内会直接显示该图片的真实缩略图，而不再是「图片1」这类文字编号，发送时会按当前连接自动编号交给模型理解。由于引用改在对话框内直接 `@`，画布节点右上角不再显示「图片1 / 文本1」资源角标。
+
 视频生成可从文本节点读取 prompt，从图片节点读取参考图，从视频节点读取参考视频，从音频节点读取参考音频。Seedance 2.0 支持最多 9 张参考图、3 个参考视频、3 个参考音频；分辨率支持 `480p`、`720p`、`1080p`（fast 模型不支持 `1080p`），比例支持 `16:9`、`4:3`、`1:1`、`3:4`、`9:16`、`21:9`、`adaptive`，时长支持 4-15 秒或智能时长。生成成功后会把视频插入画布为视频节点并使用原生播放器预览。参考视频和参考音频优先使用公网可访问 URL；本地素材会以前端可读取的数据传给兼容接口，是否支持取决于具体上游。

 ## 画布助手
@@ -106,6 +109,18 @@ Base URL 如果已经以 `/v1`、`/api/v3` 或 `/api/plan/v3` 结尾，系统不
 - 把助手生成的图片插入画布。
 - 折叠和展开助手面板。

+## 节点插件系统
+
+画布支持通过节点插件扩展新的节点类型，内置节点之外的能力都可以以插件形式加载：
+
+- 支持通过 URL 动态安装、启用、更新和卸载远程节点插件。
+- 提供官方插件注册表，节点插件面板可从项目仓库读取官方插件列表并一键安装。
+- 提供 TypeScript 插件开发 SDK，可自行开发画布节点插件，并使用 AI 生成、面板控制等扩展能力。
+- 内置 Markdown、SVG、HTML、3D 全景、便利贴等示例插件。
+- 插件面板会显示插件版本，并对可升级的插件给出提醒。
+
+Codex App 插件的安装与使用见 [Codex App 插件](/docs/overview/codex-app-plugin)。
+
 ## 提示词库

 前台提示词库支持：
@@ -9,7 +9,6 @@
    "render",
    "docker",
    "third-party-prompt-repositories",
-    "[在线体验](https://canvas.best/)",
-    "local-codex-canvas"
+    "[在线体验](https://canvas.best/)"
  ]
 }
@@ -7,7 +7,6 @@ description: 当前已接入同步逻辑的第三方提示词仓库

 | 地址 | 状态 |
 | --- | --- |
-| https://github.com/EvoLinkAI/awesome-gpt-image-2-API-and-Prompts | 已实现同步逻辑 |
 | https://github.com/ZeroLu/awesome-gpt-image | 已实现同步逻辑 |
 | https://github.com/ImgEdify/Awesome-GPT4o-Image-Prompts | 已实现同步逻辑 |
 | https://github.com/YouMind-OpenLab/awesome-gpt-image-2 | 已实现同步逻辑 |
@@ -5,47 +5,14 @@ description: 当前版本已实现但仍需人工验证的变更项

 # 待测试

- 画布节点插件系统:内置节点(图片/文本/视频/音频/配置/组)改为统一注册表管理,创建菜单由注册表动态生成;需验证六种内置节点的创建、渲染、缩放、连线、小地图颜色、作为生成输入等行为与之前一致。内置节点仅这六种,其余均为插件。
- 画布节点插件系统:左上菜单新增「节点插件」,可通过 URL 安装远程插件、启用/禁用、更新、卸载;安装时有安全警告说明插件代码在页面内执行、可访问本地数据。可用 `/plugins/sticky-note.js` 安装便利贴节点验证:换色、编辑、「衍生文本节点」(演示 applyOps 增节点+连线)。
- 画布节点插件系统:示例插件 Markdown(编辑/渲染)、HTML(沙箱 iframe 渲染,支持 {{input}} 注入上游文本)、SVG(渲染/编辑,可取上游文本 SVG 源码)、3D 全景(three.js CDN 动态加载,可从上游图片节点取全景图并拖拽查看);均为远程插件,需分别安装 `/plugins/markdown.js`、`/plugins/html.js`、`/plugins/svg.js`、`/plugins/panorama.js` 后验证创建、渲染、编辑及与上游节点的交互。
- 画布节点插件系统:卸载或禁用插件后,画布上遗留的该类型节点显示「缺少插件」占位且数据保留,重新安装/启用后恢复渲染;需验证刷新后已启用插件自动加载。
- 画布节点插件系统:每个插件为 `plugins/canvas/<name>/` 独立目录(各自 package.json + esbuild + src + README,互不耦合),`npm run build` 产物落到 `dist/<name>.js` 并同步到 `web/public/plugins/`;需验证各插件可独立构建与安装。
- 画布节点插件本地开发:每个插件支持 `npm run dev`(watch 自动构建并同步到 `web/public/plugins/`),配合 `web/.env.local` 的 `VITE_DEV_PLUGINS`(逗号分隔 URL)每次刷新重新拉取、无需反复安装;需验证改源码刷新页面即生效。
- 画布节点创建:鼠标左键双击画布空白区域会在点击位置打开节点选择菜单,可创建文本、图片、视频、音频、生成配置和组节点;双击已有节点或连线不应触发菜单。
- 本地 Agent 连接说明：新增提醒说明只有安装 Codex 插件或手动添加 MCP 后才会增加 Codex token 消耗，直接运行 `npx -y @basketikun/canvas-agent` 不会安装 MCP；需验证文案位置清晰。
- 本地 Agent 连接说明：画布面板和配置页 Codex Tab 改为区分“Codex 插件启动画布”和“直接运行 Agent 后网页连接”两种方式，需验证文案和布局清晰。
- 全站 Agent：Agent 面板从画布页抽离为全站常驻面板，挂在全局布局右侧，开/关只挤压左侧内容不遮挡；顶栏和画布工具条各有一个开关按钮，需验证在首页、生图、视频、素材、提示词库、画布等页面都能打开面板并保持 SSE 连接不断开。
- 全站 Agent：新增 `site_navigate` 工具，Agent 可直接跳转 `/`、`/canvas`、`/canvas/:id`、`/image`、`/video`、`/prompts`、`/assets`、`/config`；导航直接执行不走工具确认，需验证跳转正确且面板不消失。
- 全站 Agent：画布工具（canvas_apply_ops 等）仅在当前处于画布页时可用，不在画布页调用会返回“当前不在画布页，请先用 site_navigate 打开画布”，需验证 Agent 会先导航到画布再执行画布操作。
- 全站 Agent：Codex 会话改为单一站点级连续线程（不再按 canvasId 分），跨页面/跨画布保持同一条对话上下文，历史记录即这条线程；本地 Agent workspace 从按画布分改为固定 `site` workspace（`~/.infinite-canvas/codex-workspaces/site`），已装 `@basketikun/canvas-agent` 的用户需更新到新版本才生效。
- 全站 Agent：移除仅前端调用 OpenAI responses 接口的在线画布助手死代码（含 `requestToolResponse`），Agent 统一走 MCP + 本地 Codex 链路。
- 画布节点名称：每个节点保留 `title` 名称字段，默认名称显示在节点上方，双击名称可直接编辑，节点信息弹窗和 JSON 可查看该字段。
- 画布节点工具条：节点顶部工具条改为点击选中节点后显示，单纯鼠标移入 / 移出节点不应再频繁弹出。
- 画布组节点：组内子节点优先响应点击和拖拽；当鼠标位于组内节点上时，应移动 / 编辑该节点，而不是移动整个组。
- 画布组节点：工具栏新增“组”节点，普通节点拖入组区域会高亮目标组，松手后自动吸附进组；拖出组区域会解除归属，拖动组节点会一起移动组内子节点。
- GitHub Pages：新增版本 tag 触发的前端静态站点自动发布 workflow，需在仓库 Pages 设置中选择 GitHub Actions 并验证路由刷新回退。
- 画布图片切图：行数 / 列数会生成可直接拖拽的等分切图线，并支持新增横向 / 纵向线、删除单条线、重置切图线和切片数量预览。
- Codex App 插件：精简插件 README 安装步骤，更新插件网站和作者信息，并将 `open-canvas` 调整为默认打开在线画布、仅按需启动本地前端；需重新安装后确认详情页和两种打开流程正确。
- 本地 Codex 连接画布文档：新增 Canvas Agent、MCP、SSE 与浏览器画布交互原理说明，需确认文档导航和描述是否清晰。
- 顶部导航：缩小桌面顶部导航栏高度，导航项下划线和内容垂直对齐需确认。
- 配置与用户偏好：新增独立顶部导航页面，并在页面和弹窗中复用同一套配置面板；新增 Codex Tab，展示插件安装和本地 Agent 启动步骤，可配置本地 Agent 地址、Connect token 和工具执行确认开关。
- Codex 全局连接：配置页可直接连接本地 Canvas Agent，连接状态同步到画布和顶部 OpenAI 状态图标，刷新后会按本地保存的地址和 token 自动尝试重连；需验证已连接、连接中、连接失败、断开和刷新自动重连状态。
- 画布 Agent：Codex 旧 thread 在重启后不可用时会自动新建会话并重试，需验证进入画布直接发送消息不会再出现 `thread not loaded` 或 `no rollout found`。
- 画布 Agent：切换不同画布时会清空并重新加载当前 canvasId 对应的 Codex 会话，需验证不会继续显示上一个画布的对话。
- 画布 Agent：右侧 Agent 面板移除网站 / 本机模式切换，固定使用本机 Agent。
- 配置与用户偏好：每个模型渠道新增 OpenAI / Gemini 调用格式选择，默认 OpenAI，切换默认格式时同步更新默认 Base URL；渠道 Tab 增加紧凑醒目的提醒，说明模型是否可选需要到“模型”Tab 选择。
- Gemini 调用格式：支持拉取 Gemini 模型列表，并用于文本问答、在线 Agent 工具调用、基础生图和图生图请求。
- Gemini 生图：生图工作台和画布生图会把尺寸配置转换为 Gemini `responseFormat.image.aspectRatio` 传入，需验证 1:1、9:16、16:9 及自定义像素尺寸的输出比例。
- 音频和视频生成：选择 Gemini 调用格式时先给出不支持提示，仍需使用 OpenAI 兼容渠道。
- WebDAV 同步：移除 Next.js 转发代理和连接方式选择，改为浏览器前端直接连接 WebDAV 服务。
- 提示词库：移除 Next.js route 抓取和服务端内存缓存，改为浏览器前端直连 GitHub 原始文件并缓存到 IndexedDB。
- 提示词库：移除已 404 的 `EvoLinkAI/awesome-gpt-image-2-API-and-Prompts` 来源。
- 前端构建：移除 Next.js，改为 Vite + React Router，并将前端目录调整为 `pages` / `components` / `stores` / `lib` / `layouts` / `styles`，需验证首页、图片/视频工作台、素材、提示词库和画布路由跳转。
- 前端构建：修复 TypeScript 严格检查下的构建报错。
- Vercel 部署：新增 `web` 和 `docs` 两个子项目的 Vercel 配置，需分别验证静态前端和文档站部署。
- Docker 部署：运行镜像从 Node serve 改为 nginx 静态托管，需验证前端路由刷新回退。
- 环境变量：移除过期的后端 `.env.example` 示例文件。
- 生图工作台：修复失败图片点击重试后只保存在页面状态、刷新或跳转后丢失的问题，重试成功结果会写入本地图片存储和生成记录。
- 视频生成：任务查询接口直接返回 `url` / `result_url` / `video_url` 时会跳过 `/content` 下载，并优先保存到浏览器本地媒体存储。
- 视频生成：任务创建或查询失败时会解析接口返回的 `msg` / `message` / 嵌套 JSON 错误，并在生成结果失败卡片里展示真实原因。
- 画布生成配置：修复切换文本/视频/音频模式时模型选择仍显示为生图模型（gpt-image-2）的问题，切换模式后应自动匹配对应能力的默认模型。
+- 提示词来源：6 个内置来源应从 Image Prompts 统一仓库读取，更新后数量依次为 323、494、53、76、126、129；提示词仍按 6 个来源分组并可独立启用，来源内可继续按 `tags` 筛选。添加标准 JSON URL 后应能查看内容，填写非数组 JSON 或不可访问地址时应显示失败，并继续保留该来源上一次成功缓存的内容。
+- 提示词来源界面：来源应以卡片列表展示，启用开关位于左侧，数量、同步状态和上次成功时间作为次级信息显示，查看、拉取及自定义来源编辑/删除操作使用带文字按钮；底部定时拉取区域应保持独立边框布局。
+- 我的提示词：在提示词中心切换到「我的提示词」，验证新增、编辑、删除和搜索；从提示词库保存后应出现在个人列表、画布左侧提示词面板和提示词选择弹窗中，刷新页面后数据仍保留在本地，Agent 搜索提示词时也应能查到。
+- 画布提示词库：不展开任何公共来源直接搜索其中的提示词，匹配项应自动显示；点击「插入画布」后应创建正文正确且标题保持为提示词标题的文本节点。
+- 全站 Agent：新增 `generation_get_status` 工具，画布生成节点可按 `nodeIds` 查询，生图和视频工作台提交后会返回 `taskId` 并可查询排队、运行、成功或失败状态；需验证查询只由当前活动标签页返回。
+- 本地 Agent 多标签页隔离：同时打开两个不同画布并连接同一个 Agent，分别聚焦标签页后通过 MCP 读取和修改画布，操作应只落在当前聚焦页面；网页面板发起的整个 Codex turn 应固定操作发起页面，即使中途聚焦另一标签页也不能切换目标；关闭当前页面后应回退到最近聚焦且仍连接的页面，其他页面回传同一请求结果应被拒绝。
+- 本地 Agent 多标签页会话同步：所有标签页共享同一个站点级 Codex 活跃线程；任一页面发送消息、新建、恢复或删除会话后，其他页面应同步活跃线程和聊天记录；Agent 输出仅显示在事件所属线程，运行中不能新建、恢复、删除或再次发送任务。
+- 本地 Agent 运行状态同步：在一个标签页运行较长 Codex 任务，等待某张工具卡显示「工具完成」后再打开或刷新第二个标签页；第二个标签页应立即显示 Codex 正在运行并禁用发送，整轮结束后两个标签页同时恢复；工具卡只显示「工具完成」，整轮结束由「本轮完成」表示。
+- 本地 Agent 图片附件落画布：在右侧 Agent 上传参考图并要求基于商品信息创建生图流程，附件应创建为保持原比例的真实图片节点，分析提示词应创建为文本节点，二者都应连接到生成配置节点；刷新页面后参考图仍可显示并参与生成。任务中途切换到其他标签页时，附件只能写入发起任务的标签页；若发起标签页关闭，附件读取应失败且不能落入其他画布。
+- Agent 对话滚动：从历史或日志切回对话、恢复其他会话时应自动定位到最新消息；手动向上浏览后应显示向下箭头且新消息不强制打断阅读，点击箭头后平滑回到底部并继续跟随新消息。
+- Agent 消息区分：用户消息应在右侧以主题浅底气泡显示，AI 回复应在左侧保留 Agent 图标并使用开放式 Markdown 排版；长文本、多张附件、错误消息及浅色/深色主题下均应清晰且不溢出。
@@ -1,25 +0,0 @@
---
-title: 打赏支持
-description: 支持无限画布项目继续维护
---
-
-# 打赏支持
-
-如果本项目对你有帮助，欢迎通过打赏、Star、提供AI订阅账号等方式支持项目继续维护。
-
-项目开发大量依赖 Codex、Claude 等 AI 编程工具辅助写代码、排查问题和整理文档，这些工具需要持续付费。你的打赏会优先用于购买 AI 开发工具、模型服务和项目维护相关资源，帮助项目继续迭代。
-
-## 支持方式
-
-支持方式包括但不限于：
-
- 给 GitHub 仓库点 Star，帮助项目被更多人看到。
- 金额打赏，用于支持 AI 工具订阅、模型服务和项目维护成本。
- Codex、Claude 等 AI 编程工具订阅账号支持，帮助维护者持续使用 AI 辅助开发。
-
-<div className="not-prose mt-6 flex flex-wrap items-center gap-3">
-  <span className="text-lg font-semibold text-fd-foreground">赞助地址：</span>
-  <a href="https://ifdian.net/a/basketikun" target="_blank" rel="noreferrer" className="inline-flex">
-    <img src="https://img.shields.io/badge/%E7%88%B1%E5%8F%91%E7%94%B5-%E8%B5%9E%E5%8A%A9%E4%BD%9C%E8%80%85-946ce6?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0id2hpdGUiPjxwYXRoIGQ9Ik0xMiAyMS4zNWwtMS40NS0xLjMyQzUuNCAxNS4zNiAyIDEyLjI4IDIgOC41IDIgNS40MiA0LjQyIDMgNy41IDNjMS43NCAwIDMuNDEuODEgNC41IDIuMDlDMTMuMDkgMy44MSAxNC43NiAzIDE2LjUgMyAxOS41OCAzIDIyIDUuNDIgMjIgOC41YzAgMy43OC0zLjQgNi44Ni04LjU1IDExLjU0TDEyIDIxLjM1eiIvPjwvc3ZnPg==&logoColor=white" alt="爱发电赞助" />
-  </a>
-</div>
@@ -4,7 +4,6 @@
  "defaultOpen": true,
  "pages": [
    "security",
-    "donate",
    "sponsor"
  ]
 }
@@ -1,19 +1,33 @@
 ---
-title: 广告赞助
-description: 广告赞助、项目露出和社区推广说明
+title: 赞助支持
+description: 赞助支持、广告合作、项目露出和社区推广说明
 ---

-# 广告赞助
+# 赞助支持
+
+如果本项目对你有帮助，欢迎通过 Star、广告赞助合作、提供 AI 订阅账号等方式支持项目继续维护。
+
+项目开发大量依赖 Codex、Claude 等 AI 编程工具辅助写代码、排查问题和整理文档，这些工具需要持续付费。相关支持会优先用于购买 AI 开发工具、模型服务和项目维护相关资源，帮助项目继续迭代。
+
+## 支持方式
+
+支持方式包括但不限于：
+
+- 给 GitHub 仓库点 Star，帮助项目被更多人看到。
+- 通过广告赞助合作支持项目维护成本。
+- Codex、Claude 等 AI 编程工具订阅账号支持，帮助维护者持续使用 AI 辅助开发。
+
+## 广告赞助

 如果你希望在项目文档、README 或相关页面获得赞助露出，可以直接通过邮箱联系项目维护者沟通位置、周期和展示形式。

-## 适合的赞助内容
+### 适合的赞助内容

 - AI 工具、模型服务、API 服务或开发者工具。
 - 与图片、视频、文本生成工作流相关的产品。
 - 适合开源项目用户和 AI 创作者使用的服务。

-## 建议提供的信息
+### 建议提供的信息

 - 品牌或产品名称。
 - 希望展示的位置和周期。
@@ -27,8 +27,7 @@
 ## 支持与安全

 - [漏洞提交](/docs/support/security)
- [打赏支持](/docs/support/donate)
- [广告赞助](/docs/support/sponsor)
+- [赞助支持](/docs/support/sponsor)

 ## 项目进度

@@ -43,4 +42,4 @@

 ## 原理说明

- [本地 Codex 连接画布原理](/docs/overview/local-codex-canvas)
+- [本地 Codex 连接画布原理](/docs/development/local-codex-canvas)
@@ -10,7 +10,7 @@ const tabs = [
  { title: '开发文档', href: '/docs/development/local-development', prefix: '/docs/development' },
  { title: '项目进度', href: '/docs/progress/changelog', prefix: '/docs/progress' },
  { title: '商务合作', href: '/docs/business/business', prefix: '/docs/business' },
-  { title: '赞助支持', href: '/docs/support/donate', prefix: '/docs/support' },
+  { title: '赞助支持', href: '/docs/support/sponsor', prefix: '/docs/support' },
 ];

 export function DocsTopTabs() {
@@ -7,4 +7,9 @@ server {
    location / {
        try_files $uri $uri/ /index.html;
    }
+
+    # 运行期配置由容器启动时生成，禁止缓存，确保改环境变量后即时生效。
+    location = /config.js {
+        add_header Cache-Control "no-store";
+    }
 }
@@ -32,7 +32,6 @@
        "streamdown": "^2.5.0",
        "tailwind-merge": "^3.6.0",
        "tailwindcss": "^4",
-        "three": "^0.180.0",
        "tw-animate-css": "^1.4.0",
        "zustand": "^5.0.12",
      },
@@ -42,7 +41,6 @@
        "@types/node": "^20",
        "@types/react": "19.1.12",
        "@types/react-dom": "19.1.9",
-        "@types/three": "^0.180.0",
        "@vitejs/plugin-react": "^5.2.0",
        "prettier": "^3.8.3",
        "typescript": "^5",
@@ -159,8 +157,6 @@

    "@ctrl/tinycolor": ["@ctrl/tinycolor@4.2.0", "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-4.2.0.tgz", {}, "sha512-kzyuwOAQnXJNLS9PSyrk0CWk35nWJW/zl/6KvnTBMFK65gm7U1/Z5BqjxeapjZCIhQcM/DsrEmcbRwDyXyXK4A=="],

-    "@dimforge/rapier3d-compat": ["@dimforge/rapier3d-compat@0.12.0", "", {}, "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow=="],
-
    "@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "https://registry.npmmirror.com/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="],

    "@dnd-kit/core": ["@dnd-kit/core@6.3.1", "https://registry.npmmirror.com/@dnd-kit/core/-/core-6.3.1.tgz", { "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
@@ -613,8 +609,6 @@

    "@ts-morph/common": ["@ts-morph/common@0.27.0", "https://registry.npmmirror.com/@ts-morph/common/-/common-0.27.0.tgz", { "dependencies": { "fast-glob": "^3.3.3", "minimatch": "^10.0.1", "path-browserify": "^1.0.1" } }, "sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ=="],

-    "@tweenjs/tween.js": ["@tweenjs/tween.js@23.1.3", "", {}, "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA=="],
-
    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],

    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
@@ -713,20 +707,14 @@

    "@types/set-cookie-parser": ["@types/set-cookie-parser@2.4.10", "https://registry.npmmirror.com/@types/set-cookie-parser/-/set-cookie-parser-2.4.10.tgz", { "dependencies": { "@types/node": "*" } }, "sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw=="],

-    "@types/stats.js": ["@types/stats.js@0.17.4", "", {}, "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA=="],
-
    "@types/statuses": ["@types/statuses@2.0.6", "https://registry.npmmirror.com/@types/statuses/-/statuses-2.0.6.tgz", {}, "sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA=="],

-    "@types/three": ["@types/three@0.180.0", "", { "dependencies": { "@dimforge/rapier3d-compat": "~0.12.0", "@tweenjs/tween.js": "~23.1.3", "@types/stats.js": "*", "@types/webxr": "*", "@webgpu/types": "*", "fflate": "~0.8.2", "meshoptimizer": "~0.22.0" } }, "sha512-ykFtgCqNnY0IPvDro7h+9ZeLY+qjgUWv+qEvUt84grhenO60Hqd4hScHE7VTB9nOQ/3QM8lkbNE+4vKjEpUxKg=="],
-
    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],

    "@types/unist": ["@types/unist@2.0.11", "https://registry.npmmirror.com/@types/unist/-/unist-2.0.11.tgz", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],

    "@types/validate-npm-package-name": ["@types/validate-npm-package-name@4.0.2", "https://registry.npmmirror.com/@types/validate-npm-package-name/-/validate-npm-package-name-4.0.2.tgz", {}, "sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw=="],

-    "@types/webxr": ["@types/webxr@0.5.24", "", {}, "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg=="],
-
    "@uiw/codemirror-extensions-basic-setup": ["@uiw/codemirror-extensions-basic-setup@4.25.9", "", { "dependencies": { "@codemirror/autocomplete": "^6.0.0", "@codemirror/commands": "^6.0.0", "@codemirror/language": "^6.0.0", "@codemirror/lint": "^6.0.0", "@codemirror/search": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0" } }, "sha512-QFAqr+pu6lDmNpAlecODcF49TlsrZ0bj15zPzfhiqSDl+Um3EsDLFLppixC7kFLn+rdDM2LTvVjn5CPvefpRgw=="],

    "@uiw/react-codemirror": ["@uiw/react-codemirror@4.25.9", "", { "dependencies": { "@babel/runtime": "^7.18.6", "@codemirror/commands": "^6.1.0", "@codemirror/state": "^6.1.1", "@codemirror/theme-one-dark": "^6.0.0", "@uiw/codemirror-extensions-basic-setup": "4.25.9", "codemirror": "^6.0.0" }, "peerDependencies": { "@codemirror/view": ">=6.0.0", "react": ">=17.0.0", "react-dom": ">=17.0.0" } }, "sha512-HftqCBUYShAOH0pGi1CHP8vfm5L8fQ3+0j0VI6lQD6QpK+UBu3J7nxfEN5O/BXMilMNf9ZyFJRvRcuMMOLHMng=="],
@@ -741,8 +729,6 @@

    "@vitejs/plugin-react": ["@vitejs/plugin-react@5.2.0", "", { "dependencies": { "@babel/core": "^7.29.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-rc.3", "@types/babel__core": "^7.20.5", "react-refresh": "^0.18.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw=="],

-    "@webgpu/types": ["@webgpu/types@0.1.71", "", {}, "sha512-mMy8/ODcKhab808co15eW+yN+HgXoQxRQHTiBV9Mrvl1r0ufnid7YOcI+gi4eUWSWl9ezD6TW2KXccrL8HCh2A=="],
-
    "accepts": ["accepts@2.0.0", "https://registry.npmmirror.com/accepts/-/accepts-2.0.0.tgz", { "dependencies": { "mime-types": "^3.0.0", "negotiator": "^1.0.0" } }, "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng=="],

    "agent-base": ["agent-base@7.1.4", "https://registry.npmmirror.com/agent-base/-/agent-base-7.1.4.tgz", {}, "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ=="],
@@ -1343,8 +1329,6 @@

    "mermaid": ["mermaid@11.16.0", "", { "dependencies": { "@braintree/sanitize-url": "^7.1.2", "@iconify/utils": "^3.0.2", "@mermaid-js/parser": "^1.2.0", "@types/d3": "^7.4.3", "@upsetjs/venn.js": "^2.0.0", "cytoscape": "^3.33.3", "cytoscape-cose-bilkent": "^4.1.0", "cytoscape-fcose": "^2.2.0", "d3": "^7.9.0", "d3-sankey": "^0.12.3", "dagre-d3-es": "7.0.14", "dayjs": "^1.11.20", "dompurify": "^3.3.3", "es-toolkit": "^1.45.1", "katex": "^0.16.45", "khroma": "^2.1.0", "marked": "^16.3.0", "roughjs": "^4.6.6", "stylis": "^4.3.6", "ts-dedent": "^2.2.0", "uuid": "^11.1.0 || ^12 || ^13 || ^14.0.0" } }, "sha512-Zvm3kbstgdpvIJPPItlL7fppIZ3kibvc1oZIGxdvk9t6UFz6flv+Jw7FtRGKwfcI8OckmH04LqG6LlS6X4B1pA=="],

-    "meshoptimizer": ["meshoptimizer@0.22.0", "", {}, "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg=="],
-
    "micromark": ["micromark@4.0.2", "", { "dependencies": { "@types/debug": "^4.0.0", "debug": "^4.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA=="],

    "micromark-core-commonmark": ["micromark-core-commonmark@2.0.3", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-destination": "^2.0.0", "micromark-factory-label": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-factory-title": "^2.0.0", "micromark-factory-whitespace": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-html-tag-name": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg=="],
@@ -1707,8 +1691,6 @@

    "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],

-    "three": ["three@0.180.0", "", {}, "sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w=="],
-
    "throttle-debounce": ["throttle-debounce@5.0.2", "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.2.tgz", {}, "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A=="],

    "tiny-invariant": ["tiny-invariant@1.3.3", "https://registry.npmmirror.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
@@ -0,0 +1,22 @@
+#!/bin/sh
+set -e
+
+# 由 nginx 官方镜像的入口在启动前自动执行（/docker-entrypoint.d/*.sh），随后 nginx 正常拉起。
+# 从环境变量生成运行期配置 config.js；每家统计一个独立变量，未设置的留空，
+# 前端据此判定该家「关闭」，不加载对应脚本、不发外部请求。可同时启用多家。
+
+# GA4 / 百度 ID 只含字母、数字和连字符；过滤掉其它字符，
+# 避免值里的引号等破坏 config.js 的 JS 字符串（纵深防御）。
+sanitize_id() {
+    printf '%s' "$1" | tr -cd 'A-Za-z0-9-'
+}
+
+GA4_ID=$(sanitize_id "${ANALYTICS_GA4_ID:-}")
+BAIDU_ID=$(sanitize_id "${ANALYTICS_BAIDU_ID:-}")
+
+cat > /usr/share/nginx/html/config.js <<EOF
+window.__RUNTIME_CONFIG__ = {
+  ANALYTICS_GA4_ID: "${GA4_ID}",
+  ANALYTICS_BAIDU_ID: "${BAIDU_ID}"
+};
+EOF
@@ -17,6 +17,7 @@
    </head>
    <body class="bg-background text-foreground antialiased">
        <div id="root"></div>
+        <script src="/config.js"></script>
        <script type="module" src="/src/main.tsx"></script>
    </body>
 </html>
@@ -0,0 +1,3 @@
+// 运行期配置。容器启动时由 docker-entrypoint.sh 从环境变量重新生成此文件；
+// 本地开发与未经 entrypoint 处理时使用这份默认空配置（统计默认关闭）。
+window.__RUNTIME_CONFIG__ = window.__RUNTIME_CONFIG__ || {};
@@ -48,14 +48,25 @@ export function AgentChatMessage({ item, theme, user, onRejectTool, onApproveToo
    return (
        <div className={`flex items-start gap-3 ${isUser ? "justify-end" : "justify-start"}`}>
            {!isUser ? <AgentAvatar theme={theme} /> : null}
-            <div className={`min-w-0 max-w-[82%] text-sm leading-6 ${isUser ? "text-right" : "text-left"}`} style={{ color }}>
+            <div
+                className={isUser ? "min-w-0 max-w-[82%] rounded-xl rounded-br-sm border px-3.5 py-2.5 text-left text-sm leading-6" : "min-w-0 flex-1 text-left text-sm leading-6"}
+                style={
+                    isUser
+                        ? {
+                              color,
+                              background: `color-mix(in srgb, ${theme.node.text} 7%, ${theme.toolbar.panel})`,
+                              borderColor: `color-mix(in srgb, ${theme.node.text} 14%, transparent)`,
+                          }
+                        : { color }
+                }
+            >
                {isUser ? (
-                    <div className="whitespace-pre-wrap break-words text-left">{item.text}</div>
+                    <div className="whitespace-pre-wrap break-words">{item.text}</div>
                ) : (
                    <Streamdown animated isAnimating={!!item.streamId}>{item.text}</Streamdown>
                )}
                {item.attachments?.length ? <AgentMessageAttachments attachments={item.attachments} /> : null}
-                {item.meta ? <div className="mt-1 text-[11px] opacity-45">{item.meta}</div> : null}
+                {item.meta ? <div className={`mt-1 text-[11px] opacity-45 ${isUser ? "text-right" : ""}`}>{item.meta}</div> : null}
            </div>
            {isUser ? <AgentUserAvatar user={user} theme={theme} /> : null}
        </div>
@@ -303,7 +314,7 @@ function toolCardState(title: string, text: string, detail?: unknown) {
    if (objectField(detail, "status") === "noop" || /未生效|无需|没有找到|没有.*可|已存在/.test(raw)) return { label: "未生效", color: "#d97706", softBorder: "rgba(217,119,6,.22)", softBg: "rgba(217,119,6,.04)", icon: <CircleAlert className="size-4" />, isError: false };
    if (/拒绝|取消/.test(raw) || lower.includes("rejected")) return { label: "拒绝执行", color: "#dc2626", softBorder: "rgba(220,38,38,.20)", softBg: "rgba(220,38,38,.04)", icon: <XCircle className="size-4" />, isError: true };
    if (/失败|错误/.test(raw) || lower.includes("failed") || lower.includes("error")) return { label: "执行失败", color: "#dc2626", softBorder: "rgba(220,38,38,.20)", softBg: "rgba(220,38,38,.04)", icon: <XCircle className="size-4" />, isError: true };
-    if (/完成|成功/.test(raw) || lower.includes("completed") || lower.includes("succeeded")) return { label: tool === "canvas_apply_ops" || /画布操作/.test(title) ? "已批准执行" : "执行完成", color: "#16a34a", softBorder: "rgba(22,163,74,.20)", softBg: "rgba(22,163,74,.04)", icon: <CheckCircle2 className="size-4" />, isError: false };
+    if (/完成|成功/.test(raw) || lower.includes("completed") || lower.includes("succeeded")) return { label: tool === "canvas_apply_ops" || /画布操作/.test(title) ? "已批准执行" : "工具完成", color: "#16a34a", softBorder: "rgba(22,163,74,.20)", softBg: "rgba(22,163,74,.04)", icon: <CheckCircle2 className="size-4" />, isError: false };
    return { label: "工具调用", color: "#2563eb", softBorder: "rgba(37,99,235,.20)", softBg: "rgba(37,99,235,.04)", icon: <Wrench className="size-4" />, isError: false };
 }

@@ -0,0 +1,112 @@
+import { useEffect, useRef } from "react";
+import { ImageIcon, List, Music2, Settings2, Video, X } from "lucide-react";
+
+import { canvasThemes } from "@/lib/canvas-theme";
+import { useThemeStore } from "@/stores/use-theme-store";
+import { listNodeDefinitions, useNodeRegistryVersion } from "@/lib/canvas/node-registry";
+import { CanvasNodeType, type ConnectionHandle, type Position } from "@/types/canvas";
+
+export type PendingConnectionCreate = {
+    connection: ConnectionHandle;
+    position: Position;
+};
+
+export function ConnectionCreateMenu({
+    pending,
+    onCreate,
+    onClose,
+}: {
+    pending: PendingConnectionCreate;
+    onCreate: (type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Config | CanvasNodeType.Video | CanvasNodeType.Audio) => void;
+    onClose: () => void;
+}) {
+    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    return (
+        <div
+            className="absolute z-[120] w-[300px] rounded-[18px] border p-3 shadow-2xl backdrop-blur"
+            data-connection-create-menu
+            style={{ left: pending.position.x, top: pending.position.y, background: theme.node.panel, borderColor: theme.node.stroke, color: theme.node.text }}
+            onMouseDown={(event) => event.stopPropagation()}
+            onPointerDown={(event) => event.stopPropagation()}
+        >
+            <div className="mb-2 flex items-center justify-between px-1">
+                <span className="text-sm font-medium" style={{ color: theme.node.muted }}>
+                    引用该节点生成
+                </span>
+                <button type="button" className="grid size-7 place-items-center rounded-lg text-base opacity-55 transition hover:bg-white/10 hover:opacity-100" onClick={onClose} aria-label="关闭">
+                    ×
+                </button>
+            </div>
+            <div className="grid gap-1">
+                <ConnectionCreateOption theme={theme} icon={<List className="size-5" />} title="文本生成" description="脚本、广告词、品牌文案" onClick={() => onCreate(CanvasNodeType.Text)} />
+                <ConnectionCreateOption theme={theme} icon={<ImageIcon className="size-5" />} title="图片生成" onClick={() => onCreate(CanvasNodeType.Image)} />
+                <ConnectionCreateOption theme={theme} icon={<Video className="size-5" />} title="视频生成" onClick={() => onCreate(CanvasNodeType.Video)} />
+                <ConnectionCreateOption theme={theme} icon={<Music2 className="size-5" />} title="音频参考" onClick={() => onCreate(CanvasNodeType.Audio)} />
+                <ConnectionCreateOption theme={theme} icon={<Settings2 className="size-5" />} title="配置节点" description="模型、尺寸、数量和输入顺序" onClick={() => onCreate(CanvasNodeType.Config)} />
+            </div>
+        </div>
+    );
+}
+
+export function ConnectionCreateOption({ theme, icon, title, description, onClick }: { theme: (typeof canvasThemes)[keyof typeof canvasThemes]; icon: React.ReactNode; title: string; description?: string; onClick?: () => void }) {
+    return (
+        <button
+            type="button"
+            className="flex h-16 w-full cursor-pointer items-center gap-3 rounded-2xl px-3 text-left transition"
+            style={{ color: theme.node.text }}
+            onClick={onClick}
+            onMouseEnter={(event) => (event.currentTarget.style.background = theme.node.fill)}
+            onMouseLeave={(event) => (event.currentTarget.style.background = "transparent")}
+        >
+            <span className="grid size-11 shrink-0 place-items-center rounded-xl" style={{ background: theme.node.fill, color: theme.node.muted }}>
+                {icon}
+            </span>
+            <span className="min-w-0 flex-1">
+                <span className="flex items-center gap-2 text-base font-semibold leading-5">{title}</span>
+                {description ? (
+                    <span className="mt-1 block truncate text-sm" style={{ color: theme.node.muted }}>
+                        {description}
+                    </span>
+                ) : null}
+            </span>
+        </button>
+    );
+}
+
+export function NodeCreateMenu({ position, onCreate, onClose }: { position: Position; onCreate: (type: string) => void; onClose: () => void }) {
+    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    useNodeRegistryVersion();
+    const menuRef = useRef<HTMLDivElement>(null);
+    const definitions = listNodeDefinitions().filter((def) => def.showInCreateMenu !== false);
+    // 点击菜单外的空白处自动关闭
+    useEffect(() => {
+        const handlePointerDown = (event: PointerEvent) => {
+            if (menuRef.current && !menuRef.current.contains(event.target as Node)) onClose();
+        };
+        document.addEventListener("pointerdown", handlePointerDown, true);
+        return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+    }, [onClose]);
+    return (
+        <div
+            ref={menuRef}
+            className="absolute z-[120] max-h-[70vh] w-[300px] overflow-y-auto rounded-[18px] border p-3 shadow-2xl backdrop-blur thin-scrollbar"
+            data-canvas-no-zoom
+            style={{ left: position.x, top: position.y, background: theme.node.panel, borderColor: theme.node.stroke, color: theme.node.text }}
+            onPointerDown={(event) => event.stopPropagation()}
+        >
+            <div className="mb-2 flex items-center justify-between px-1">
+                <span className="text-sm font-medium" style={{ color: theme.node.muted }}>
+                    选择节点
+                </span>
+                <button type="button" className="grid size-7 place-items-center rounded-lg opacity-55 transition hover:opacity-100" onClick={onClose} aria-label="关闭">
+                    <X className="size-4" />
+                </button>
+            </div>
+            <div className="grid gap-1">
+                {definitions.map((def) => (
+                    <ConnectionCreateOption key={def.type} theme={theme} icon={def.icon} title={def.title} description={def.description} onClick={() => onCreate(def.type)} />
+                ))}
+            </div>
+        </div>
+    );
+}
@@ -2,19 +2,25 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "rea
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { App, Button, Input, Segmented, Tooltip } from "antd";
 import copyToClipboard from "copy-to-clipboard";
-import { Copy, FolderOpen, History, KeyRound, Link2, LoaderCircle, PlugZap, Plus, RefreshCw, Square, Terminal, Trash2 } from "lucide-react";
+import { ChevronDown, Copy, FolderOpen, History, KeyRound, Link2, LoaderCircle, MessageSquare, PlugZap, Plus, RefreshCw, Square, Terminal, Trash2 } from "lucide-react";

 import { canvasThemes } from "@/lib/canvas-theme";
+import { imageMetadata } from "@/lib/canvas/canvas-node-factory";
+import { fitNodeSize } from "@/lib/canvas/canvas-node-size";
+import { readImageMeta } from "@/lib/image-utils";
 import { randomId } from "@/lib/utils";
+import { uploadImage } from "@/services/image-storage";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { useUserStore } from "@/stores/use-user-store";
-import { useAgentStore, type AgentAttachment, type AgentChatItem, type AgentEventLog, type AgentPanelTab, type AgentPendingToolCall, type AgentThreadSummary } from "@/stores/use-agent-store";
+import { useShallow } from "zustand/react/shallow";
+import { useAgentStore, type AgentAttachment, type AgentCanvasContext, type AgentChatItem, type AgentEventLog, type AgentPanelTab, type AgentPendingToolCall, type AgentThreadSummary } from "@/stores/use-agent-store";
 import { summarizeCanvasAgentOps, type CanvasAgentOp, type CanvasAgentSnapshot } from "@/lib/canvas/canvas-agent-ops";
 import { isSiteTool, runSiteTool, SITE_TOOL_LABELS } from "@/lib/agent/agent-site-tools";
 import { AgentChatComposer, AgentChatMessage, AgentPanelTabs, AgentPendingToolCard, AgentWorkingMessage, type CanvasAgentChatAttachment } from "./canvas-agent-chat-ui";

 const MAX_ATTACHMENTS = 6;
 const MAX_ATTACHMENT_PAYLOAD_BYTES = 28 * 1024 * 1024;
+const SCROLL_BOTTOM_THRESHOLD = 48;
 const DEFAULT_AGENT_URL = "http://127.0.0.1:17371";
 const AGENT_CONNECT_STEPS = [
    { title: "方式一：在 Codex 中使用插件", text: "在 Codex app 安装 Infinite Canvas 插件后，通过插件启动画布，插件会自动启动本地 Agent 并带上连接信息。" },
@@ -26,7 +32,9 @@ const AGENT_MCP_REMOVE_COMMAND = "codex mcp remove infinite-canvas";
 type AgentEventPayload = {
    agent?: string;
    type?: string;
+    threadId?: string;
    thread_id?: string;
+    turn_id?: string;
    item?: AgentEventItem;
    error?: { message?: string };
    message?: string;
@@ -39,6 +47,10 @@ type AgentWorkspace = { workspacePath: string; activeThreadId?: string };
 type AgentThreadsResponse = { ok?: boolean; workspace?: AgentWorkspace; data?: AgentThreadSummary[] };
 type AgentThreadResponse = { ok?: boolean; workspace?: AgentWorkspace; thread?: AgentThreadSummary; messages?: AgentChatItem[] };
 type AgentConfigResponse = { ok?: boolean; url?: string; token?: string; hasToken?: boolean };
+type AgentCodexState = { busy?: boolean; threadId?: string; turnId?: string };
+type AgentHelloEvent = { ok?: boolean; clientId?: string; codex?: AgentCodexState };
+type AgentWorkspaceEvent = { activeThreadId?: string; threadId?: string; emptyThread?: boolean };
+type AgentChatEvent = { threadId?: string; sourceClientId?: string; message?: AgentChatItem };

 export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { embedded?: boolean; headless?: boolean; autoConnect?: boolean }) {
    const theme = canvasThemes[useThemeStore((state) => state.theme)];
@@ -46,9 +58,42 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
    const { message, modal } = App.useApp();
    const [searchParams] = useSearchParams();
    const navigate = useNavigate();
-    const { width, url, token, connected, enabled, prompt, attachments, sending, waiting, messages, eventLogs, threads, activeThreadId, workspacePath, loadingThreads, activeTab, confirmTools, activity, connectError, pendingTool, canvasContext, setAgentState, addMessage: pushMessage, addEventLog: pushEventLog, clearEventLogs } = useAgentStore();
+    // 逐字段 selector + useShallow：只有这些字段变化时才重渲染。
+    // 注意：canvasContext 不在此订阅内 —— 它在拖拽/resize 时会被 project 每帧写入，
+    // 但面板只在 ref 同步与防抖 postState 中用到它、渲染层从不读它。若把它放进订阅，
+    // 面板会随画布每帧重渲染（性能问题，也是 #185 崩溃的放大器）。改为下方 subscribe 命令式监听。
+    const { width, url, token, connected, enabled, prompt, attachments, sending, waiting, messages, eventLogs, threads, activeThreadId, workspacePath, loadingThreads, activeTab, confirmTools, activity, connectError, pendingTool } = useAgentStore(
+        useShallow((state) => ({
+            width: state.width,
+            url: state.url,
+            token: state.token,
+            connected: state.connected,
+            enabled: state.enabled,
+            prompt: state.prompt,
+            attachments: state.attachments,
+            sending: state.sending,
+            waiting: state.waiting,
+            messages: state.messages,
+            eventLogs: state.eventLogs,
+            threads: state.threads,
+            activeThreadId: state.activeThreadId,
+            workspacePath: state.workspacePath,
+            loadingThreads: state.loadingThreads,
+            activeTab: state.activeTab,
+            confirmTools: state.confirmTools,
+            activity: state.activity,
+            connectError: state.connectError,
+            pendingTool: state.pendingTool,
+        })),
+    );
+    const setAgentState = useAgentStore((state) => state.setAgentState);
+    const pushMessage = useAgentStore((state) => state.addMessage);
+    const pushEventLog = useAgentStore((state) => state.addEventLog);
+    const clearEventLogs = useAgentStore((state) => state.clearEventLogs);
    const listRef = useRef<HTMLDivElement>(null);
-    const canvasContextRef = useRef(canvasContext);
+    const followMessagesRef = useRef(true);
+    const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+    const canvasContextRef = useRef<AgentCanvasContext | null>(useAgentStore.getState().canvasContext);
    const confirmToolsRef = useRef(confirmTools);
    const pendingToolRef = useRef<AgentPendingToolCall | null>(null);
    const autoConnectRef = useRef(false);
@@ -56,43 +101,75 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
    const errorLoggedRef = useRef(false);
    const attachmentUrlsRef = useRef(new Set<string>());
    const clientIdRef = useRef(randomId());
+    const loadThreadsSequenceRef = useRef(0);
    const endpoint = useMemo(() => url.trim().replace(/\/$/, ""), [url]);
    const urlAgentAutoConnect = searchParams.has("agentUrl") && searchParams.has("agentToken");
-    const loadThreads = useCallback(async () => {
+    const loadThreads = useCallback(async (skipHistory = false) => {
        if (!connectedRef.current && !useAgentStore.getState().connected) return;
+        const sequence = ++loadThreadsSequenceRef.current;
        setAgentState({ loadingThreads: true });
        try {
            const data = await fetchAgentJson<AgentThreadsResponse>(endpoint, token, `/agent/codex/threads`);
            const nextThreadId = data.workspace?.activeThreadId || "";
-            setAgentState({
-                threads: data.data || [],
-                workspacePath: data.workspace?.workspacePath || "",
-                activeThreadId: nextThreadId,
-                messages: [],
-            });
-            if (nextThreadId) {
+            let nextMessages: AgentChatItem[] = [];
+            if (nextThreadId && !skipHistory) {
                const thread = await fetchAgentJson<AgentThreadResponse>(endpoint, token, `/agent/codex/threads/${encodeURIComponent(nextThreadId)}`);
-                setAgentState({ messages: normalizeHistoryMessages(thread.messages || []) });
+                nextMessages = normalizeHistoryMessages(thread.messages || []);
            }
+            if (sequence !== loadThreadsSequenceRef.current) return;
+            setAgentState({ threads: data.data || [], workspacePath: data.workspace?.workspacePath || "", activeThreadId: nextThreadId, messages: nextMessages });
        } catch (error) {
            addEventLog("读取历史失败", error);
        } finally {
-            setAgentState({ loadingThreads: false });
+            if (sequence === loadThreadsSequenceRef.current) setAgentState({ loadingThreads: false });
        }
    }, [endpoint, setAgentState, token]);

+    // canvasContext 命令式订阅：保持 ref 最新，并在快照变化时防抖上报，全程不触发面板重渲染。
    useEffect(() => {
-        canvasContextRef.current = canvasContext;
-    }, [canvasContext]);
+        let timer: ReturnType<typeof setTimeout> | null = null;
+        const unsubscribe = useAgentStore.subscribe((state) => {
+            if (state.canvasContext === canvasContextRef.current) return;
+            canvasContextRef.current = state.canvasContext;
+            if (!useAgentStore.getState().connected) return;
+            if (timer) clearTimeout(timer);
+            timer = setTimeout(() => void postState(endpoint, token, clientIdRef.current, canvasContextRef.current?.snapshot || null), 300);
+        });
+        return () => {
+            unsubscribe();
+            if (timer) clearTimeout(timer);
+        };
+    }, [endpoint, token]);
    useEffect(() => {
        confirmToolsRef.current = confirmTools;
    }, [confirmTools]);
    useEffect(() => {
        pendingToolRef.current = pendingTool;
    }, [pendingTool]);
+    const updateScrollState = useCallback(() => {
+        const list = listRef.current;
+        if (!list) return;
+        const atBottom = list.scrollHeight - list.scrollTop - list.clientHeight <= SCROLL_BOTTOM_THRESHOLD;
+        followMessagesRef.current = atBottom;
+        setShowScrollToBottom(!atBottom);
+    }, []);
+    const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
+        const list = listRef.current;
+        if (!list) return;
+        followMessagesRef.current = true;
+        list.scrollTo({ top: list.scrollHeight, behavior });
+        setShowScrollToBottom(false);
+    }, []);
    useEffect(() => {
-        listRef.current?.scrollTo({ top: listRef.current.scrollHeight });
-    }, [messages, pendingTool, waiting]);
+        if (activeTab !== "chat") return;
+        const frame = requestAnimationFrame(() => scrollToBottom("auto"));
+        return () => cancelAnimationFrame(frame);
+    }, [activeTab, activeThreadId, scrollToBottom]);
+    useEffect(() => {
+        if (activeTab !== "chat") return;
+        const frame = requestAnimationFrame(() => (followMessagesRef.current ? scrollToBottom("auto") : updateScrollState()));
+        return () => cancelAnimationFrame(frame);
+    }, [activeTab, messages, pendingTool, scrollToBottom, updateScrollState, waiting]);
    useEffect(() => () => attachmentUrlsRef.current.forEach((url) => URL.revokeObjectURL(url)), []);

    useEffect(() => {
@@ -100,13 +177,28 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
        localStorage.setItem("canvas-agent-url", endpoint);
        localStorage.setItem("canvas-agent-token", token);
        const clientId = clientIdRef.current;
+        let eventQueue = Promise.resolve();
+        const enqueueEvent = (task: () => void | Promise<void>) => {
+            eventQueue = eventQueue.then(task).catch((error) => addEventLog("同步会话失败", error));
+        };
        const source = new EventSource(`${endpoint}/events?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(clientId)}`);
-        source.addEventListener("hello", () => {
+        source.addEventListener("hello", (event) => {
+            const busy = Boolean(parseEventData<AgentHelloEvent>(event)?.codex?.busy);
            errorLoggedRef.current = false;
            connectedRef.current = true;
-            setAgentState({ connected: true, activity: "已连接", connectError: "", silentConnect: false, messages: useAgentStore.getState().messages.filter((item) => !isConnectionErrorMessage(item)) });
+            setAgentState({ connected: true, activity: busy ? "Codex 正在运行" : "已连接", waiting: busy, sending: false, connectError: "", silentConnect: false, messages: useAgentStore.getState().messages.filter((item) => !isConnectionErrorMessage(item)) });
            if (!headless) message.success("本地 Agent 已连接");
            void postState(endpoint, token, clientId, canvasContextRef.current?.snapshot || null);
+            if (document.visibilityState === "visible" && document.hasFocus()) void activateAgentClient(endpoint, token, clientId);
+        });
+        source.addEventListener("codex_state", (event) => {
+            const data = parseEventData<AgentCodexState>(event);
+            if (!data) return;
+            enqueueEvent(async () => {
+                const busy = Boolean(data.busy);
+                setAgentState({ activity: busy ? "Codex 正在运行" : "完成", waiting: busy, ...(busy ? {} : { sending: false }) });
+                if (!busy) await loadThreads();
+            });
        });
        source.addEventListener("tool_call", (event) => {
            const data = parseEventData<AgentPendingToolCall>(event);
@@ -114,21 +206,40 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
        });
        source.addEventListener("agent_event", (event) => {
            const data = parseEventData<AgentEventPayload>(event);
-            if (data) handleAgentEvent(data);
+            if (data) enqueueEvent(() => {
+                if (isCurrentThreadEvent(data)) handleAgentEvent(data);
+            });
+        });
+        source.addEventListener("workspace_changed", (event) => {
+            const data = parseEventData<AgentWorkspaceEvent>(event);
+            if (!data) return;
+            enqueueEvent(async () => {
+                const nextThreadId = data.activeThreadId ?? data.threadId ?? "";
+                pendingToolRef.current = null;
+                setAgentState({ activeThreadId: nextThreadId, messages: [], pendingTool: null });
+                await loadThreads(data.emptyThread);
+            });
+        });
+        source.addEventListener("chat_message", (event) => {
+            const data = parseEventData<AgentChatEvent>(event);
+            if (!data?.message) return;
+            enqueueEvent(() => {
+                if (!isCurrentThreadEvent(data)) return;
+                addMessage(data.message!);
+            });
        });
        source.addEventListener("agent_log", (event) => {
            const text = parseEventData<{ text?: unknown }>(event)?.text;
            addEventLog("日志", text, text);
        });
        source.addEventListener("agent_error", (event) => {
-            const message = parseEventData<{ message?: unknown }>(event)?.message;
-            setAgentState({ activity: "出错", waiting: false });
-            addMessage({ role: "error", title: "错误", text: normalizeText(message) });
-            addEventLog("错误", message, message);
-        });
-        source.addEventListener("agent_done", () => {
-            setAgentState({ activity: "完成", waiting: false, sending: false });
-            void loadThreads();
+            const data = parseEventData<AgentEventPayload>(event);
+            if (!data) return;
+            enqueueEvent(() => {
+                if (!isCurrentThreadEvent(data)) return;
+                addMessage({ role: "error", title: "错误", text: normalizeText(data.message) });
+                addEventLog("错误", data.message, data.message);
+            });
        });
        source.onerror = () => {
            const wasConnected = connectedRef.current;
@@ -149,6 +260,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
        return () => {
            source.close();
            connectedRef.current = false;
+            loadThreadsSequenceRef.current += 1;
        };
    }, [enabled, endpoint, loadThreads, message, setAgentState, token]);

@@ -158,10 +270,17 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb

    useEffect(() => {
        if (!connected) return;
-        const timer = setTimeout(() => void postState(endpoint, token, clientIdRef.current, canvasContext?.snapshot || null), 300);
-        return () => clearTimeout(timer);
-    }, [canvasContext?.snapshot, connected, endpoint, token]);
-
+        const activate = () => void activateAgentClient(endpoint, token, clientIdRef.current);
+        const activateVisible = () => {
+            if (document.visibilityState === "visible") activate();
+        };
+        window.addEventListener("focus", activate);
+        document.addEventListener("visibilitychange", activateVisible);
+        return () => {
+            window.removeEventListener("focus", activate);
+            document.removeEventListener("visibilitychange", activateVisible);
+        };
+    }, [connected, endpoint, token]);
    const sendPrompt = async () => {
        const text = prompt.trim();
        const files = attachments;
@@ -171,23 +290,35 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
            addMessage({ role: "error", title: "图片过大", text: "图片附件超过 30MB，请删减后再发送。" });
            return;
        }
-        setAgentState({ activity: "发送中", sending: true, waiting: true });
-        addMessage({ role: "user", text: text || "发送了图片", attachments: files });
+        setAgentState({ activity: "发送中", sending: true });
+        const messageId = createId();
+        addMessage({ id: messageId, role: "user", text: text || "发送了图片", attachments: files });
        addEventLog("用户发送", { text, attachments: files.map(({ name, type, size }) => ({ name, type, size })) });
        try {
-            const res = await fetch(`${endpoint}/agent/codex/turn?token=${encodeURIComponent(token)}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ prompt: requestPrompt, threadId: useAgentStore.getState().activeThreadId || undefined, attachments: files.map(({ name, type, dataUrl }) => ({ name, type, dataUrl })) }) });
-            if (!res.ok) throw new Error("本地 Agent 拒绝了请求");
-            const data = (await res.json()) as { threadId?: string };
+            const data = await fetchAgentJson<{ threadId?: string }>(endpoint, token, "/agent/codex/turn", {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({
+                    prompt: requestPrompt,
+                    messageText: text || `发送了 ${files.length} 张图片`,
+                    messageId,
+                    clientId: clientIdRef.current,
+                    threadId: useAgentStore.getState().activeThreadId || undefined,
+                    attachments: files.map(({ id, name, type, size, width, height, dataUrl }) => ({ id, name, type, size, width, height, dataUrl })),
+                }),
+            });
            if (data.threadId) setAgentState({ activeThreadId: data.threadId });
-            addEventLog("本地 Agent 已接收", { status: res.status });
+            addEventLog("本地 Agent 已接收", { threadId: data.threadId });
            files.forEach((item) => {
                URL.revokeObjectURL(item.url);
                attachmentUrlsRef.current.delete(item.url);
            });
            setAgentState({ prompt: "", attachments: [] });
        } catch (error) {
-            setAgentState({ activity: "发送失败", waiting: false });
-            addMessage({ role: "error", title: "发送失败", text: error instanceof Error ? error.message : "发送失败" });
+            const text = error instanceof Error ? error.message : "发送失败";
+            const busy = text.includes("Codex 正在运行");
+            setAgentState({ activity: busy ? "Codex 正在运行" : "发送失败" });
+            addMessage({ role: "error", title: busy ? "任务仍在运行" : "发送失败", text });
            addEventLog("发送失败", error);
        } finally {
            setAgentState({ sending: false });
@@ -198,11 +329,10 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
        if (!connected || (!sending && !waiting)) return;
        setAgentState({ activity: "停止中" });
        try {
-            await fetch(`${endpoint}/agent/codex/interrupt?token=${encodeURIComponent(token)}`, { method: "POST", headers: { "content-type": "application/json" } });
-            setAgentState({ activity: "已停止", sending: false, waiting: false });
+            await fetch(`${endpoint}/agent/codex/interrupt?token=${encodeURIComponent(token)}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ threadId: useAgentStore.getState().activeThreadId || undefined }) });
            addEventLog("用户停止", {});
        } catch {
-            setAgentState({ activity: "就绪", sending: false, waiting: false });
+            setAgentState({ activity: "停止失败" });
        }
    };

@@ -211,12 +341,15 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
        const images = Array.from(files).filter((file) => file.type.startsWith("image/"));
        const prev = useAgentStore.getState().attachments;
        try {
-            const next = await Promise.all(images.slice(0, Math.max(0, MAX_ATTACHMENTS - prev.length)).map(async (file) => {
-                const dataUrl = await readDataUrl(file);
-                const url = URL.createObjectURL(file);
-                attachmentUrlsRef.current.add(url);
-                return { id: createId(), name: file.name, type: file.type, size: file.size, url, dataUrl };
-            }));
+            const next = await Promise.all(
+                images.slice(0, Math.max(0, MAX_ATTACHMENTS - prev.length)).map(async (file) => {
+                    const dataUrl = await readDataUrl(file);
+                    const meta = await readImageMeta(dataUrl);
+                    const url = URL.createObjectURL(file);
+                    attachmentUrlsRef.current.add(url);
+                    return { id: createId(), name: file.name, type: file.type, size: file.size, width: meta.width, height: meta.height, url, dataUrl };
+                }),
+            );
            const merged = [...prev, ...next];
            if (attachmentPayloadBytes(merged) > MAX_ATTACHMENT_PAYLOAD_BYTES) {
                next.forEach((item) => {
@@ -242,13 +375,13 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
    };

    const handleToolCall = async (endpoint: string, token: string, payload: AgentPendingToolCall) => {
-        if (confirmToolsRef.current && payload.name === "canvas_apply_ops") {
+        if (confirmToolsRef.current && isCanvasWriteTool(payload.name)) {
            if (pendingToolRef.current) {
                await postToolResult(endpoint, token, clientIdRef.current, { requestId: payload.requestId, error: "仍有待确认的画布工具调用" });
                return;
            }
            pendingToolRef.current = payload;
-            setAgentState({ pendingTool: payload, activity: "等待确认", waiting: false });
+            setAgentState({ pendingTool: payload });
            addEventLog("等待确认", payload, payload);
            return;
        }
@@ -258,16 +391,13 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
    const runToolCall = async (endpoint: string, token: string, payload: AgentPendingToolCall) => {
        if (isSiteTool(payload.name)) {
            try {
-                setAgentState({ activity: SITE_TOOL_LABELS[payload.name], waiting: true });
                addEventLog(toolName(payload.name), payload, payload);
-                const result = await runSiteTool(payload.name, payload.input || {}, navigate);
+                const result = await runSiteTool(payload.name, payload.input || {}, navigate, { canvasSnapshot: canvasContextRef.current?.snapshot || null });
                await postToolResult(endpoint, token, clientIdRef.current, { requestId: payload.requestId, result });
-                setAgentState({ activity: "工具完成", waiting: true });
                addEventLog(`${toolName(payload.name)}完成`, result, result);
                addMessage({ role: "tool", title: `${toolName(payload.name)}完成`, text: siteToolSummary(payload.name, result), detail: { requestId: payload.requestId, name: payload.name, input: payload.input, result } });
            } catch (error) {
                const message = error instanceof Error ? error.message : "工具执行失败";
-                setAgentState({ activity: "工具失败", waiting: false });
                addMessage({ role: "tool", title: "工具失败", text: message, detail: payload });
                await postToolResult(endpoint, token, clientIdRef.current, { requestId: payload.requestId, error: message });
            }
@@ -275,9 +405,9 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
        }
        try {
            const input: { ops?: CanvasAgentOp[]; path?: string } = payload.input || {};
-            setAgentState({ activity: payload.name === "canvas_apply_ops" ? "执行画布操作" : payload.name === "site_navigate" ? "跳转页面" : "读取画布", waiting: true });
            addEventLog(toolName(payload.name), payload, payload);
            let result: unknown;
+            let appliedOps = input.ops || [];
            if (payload.name === "site_navigate") {
                const path = input.path || "/";
                navigate(path);
@@ -285,20 +415,29 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
            } else if (payload.name === "canvas_apply_ops") {
                const context = canvasContextRef.current;
                if (!context) throw new Error("当前不在画布页，请先用 site_navigate 打开画布");
-                result = context.applyOps(input.ops || []);
+                result = context.applyOps(appliedOps);
                void postState(endpoint, token, clientIdRef.current, result as CanvasAgentSnapshot);
+            } else if (payload.name === "canvas_create_attachment_nodes") {
+                const context = canvasContextRef.current;
+                if (!context) throw new Error("当前不在画布页，请先用 site_navigate 打开画布");
+                appliedOps = await attachmentNodeOps(endpoint, token, clientIdRef.current, payload.input?.nodes);
+                result = context.applyOps(appliedOps);
+                await postState(endpoint, token, clientIdRef.current, result as CanvasAgentSnapshot);
            } else {
                const snapshot = canvasContextRef.current?.snapshot;
                if (!snapshot) throw new Error("当前不在画布页，请先用 site_navigate 打开画布");
                result = snapshot;
            }
            await postToolResult(endpoint, token, clientIdRef.current, { requestId: payload.requestId, result });
-            setAgentState({ activity: "工具完成", waiting: true });
            addEventLog(`${toolName(payload.name)}完成`, result, result);
-            addMessage({ role: "tool", title: `${toolName(payload.name)}完成`, text: payload.name === "canvas_apply_ops" ? summarizeCanvasAgentOps(input.ops || []) || "画布操作" : payload.name === "site_navigate" ? `已跳转到 ${input.path || "/"}` : "已完成", detail: { requestId: payload.requestId, name: payload.name, input, result } });
+            addMessage({
+                role: "tool",
+                title: `${toolName(payload.name)}完成`,
+                text: appliedOps.length ? summarizeCanvasAgentOps(appliedOps) || "画布操作" : payload.name === "site_navigate" ? `已跳转到 ${input.path || "/"}` : "已完成",
+                detail: { requestId: payload.requestId, name: payload.name, input, result },
+            });
        } catch (error) {
            const message = error instanceof Error ? error.message : "画布操作失败";
-            setAgentState({ activity: "工具失败", waiting: false });
            addMessage({ role: "tool", title: "工具失败", text: message, detail: payload });
            await postToolResult(endpoint, token, clientIdRef.current, { requestId: payload.requestId, error: message });
        }
@@ -307,7 +446,6 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
    const rejectPendingTool = async () => {
        if (!pendingTool) return;
        await postToolResult(endpoint, token, clientIdRef.current, { requestId: pendingTool.requestId, error: "用户取消了画布工具调用" });
-        setAgentState({ activity: "已取消", waiting: false });
        addMessage({ role: "tool", title: "拒绝执行", text: toolName(pendingTool.name), detail: { requestId: pendingTool.requestId, name: pendingTool.name, input: pendingTool.input } });
        pendingToolRef.current = null;
        setAgentState({ pendingTool: null });
@@ -373,6 +511,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
    }, [autoConnect, connected, enabled]);

    function clearAgentSession(patch: Parameters<typeof setAgentState>[0] = {}) {
+        loadThreadsSequenceRef.current += 1;
        setAgentState({
            messages: [],
            threads: [],
@@ -388,12 +527,11 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
    }

    const startNewThread = async () => {
-        if (!connected) return;
+        if (!connected || sending || waiting) return;
        setAgentState({ loadingThreads: true });
        try {
            const data = await fetchAgentJson<AgentThreadResponse>(endpoint, token, "/agent/codex/threads/new", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({}) });
            setAgentState({ activeThreadId: data.thread?.id || data.workspace?.activeThreadId || "", messages: [], activeTab: "chat", activity: "新对话" });
-            await loadThreads();
        } catch (error) {
            addEventLog("新建对话失败", error);
            message.error(error instanceof Error ? error.message : "新建对话失败");
@@ -403,12 +541,11 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
    };

    const resumeThread = async (threadId: string) => {
-        if (!connected || !threadId) return;
+        if (!connected || !threadId || sending || waiting) return;
        setAgentState({ loadingThreads: true });
        try {
            const data = await fetchAgentJson<AgentThreadResponse>(endpoint, token, `/agent/codex/threads/${encodeURIComponent(threadId)}/resume`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({}) });
            setAgentState({ activeThreadId: data.thread?.id || threadId, messages: normalizeHistoryMessages(data.messages || []), activeTab: "chat", activity: "已恢复会话" });
-            await loadThreads();
        } catch (error) {
            addEventLog("恢复对话失败", error);
            message.error(error instanceof Error ? error.message : "恢复对话失败");
@@ -418,7 +555,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
    };

    const deleteThread = async (threadId: string) => {
-        if (!connected || !threadId) return;
+        if (!connected || !threadId || sending || waiting) return;
        setAgentState({ loadingThreads: true });
        try {
            await fetchAgentJson(endpoint, token, `/agent/codex/threads/${encodeURIComponent(threadId)}/delete`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({}) });
@@ -449,15 +586,16 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
        });
    };

-    const addMessage = (item: Omit<AgentChatItem, "id">) => {
+    const addMessage = (item: Omit<AgentChatItem, "id"> & { id?: string }) => {
        const text = normalizeText(item.text);
        if (!text && !item.attachments?.length) return;
-        const next = { ...item, id: `${Date.now()}-${Math.random()}`, text };
+        const next = { ...item, id: item.id || `${Date.now()}-${Math.random()}`, text } as AgentChatItem;
        const currentMessages = useAgentStore.getState().messages;
+        if (currentMessages.some((message) => message.id === next.id)) return;
        if (next.streamId) {
            const index = currentMessages.findIndex((message) => message.streamId === next.streamId);
            if (index >= 0) {
-                setAgentState({ messages: currentMessages.map((message, i) => i === index ? { ...message, ...next, id: message.id, text: next.text || message.text } : message) });
+                setAgentState({ messages: currentMessages.map((message, i) => (i === index ? { ...message, ...next, id: message.id, text: next.text || message.text } : message)) });
                return;
            }
        }
@@ -478,15 +616,8 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
    const handleAgentEvent = (event: AgentEventPayload) => {
        if (shouldLogAgentEvent(event)) addEventLog(eventTitle(event), event, event);
        if (event.type === "thread.started" && event.thread_id) setAgentState({ activeThreadId: event.thread_id });
-        const nextActivity = activityText(event);
-        if (nextActivity) setAgentState({ activity: nextActivity });
-        if (event.type === "turn.started") setAgentState({ waiting: true });
-        if (event.type === "turn.completed" || event.type === "turn.failed" || event.type === "error") setAgentState({ waiting: false, sending: false });
        const item = formatAgentEvent(event);
-        if (item) {
-            if (item.role === "error") setAgentState({ waiting: false, sending: false });
-            addMessage(item);
-        }
+        if (item) addMessage(item);
    };

    const content = (
@@ -496,7 +627,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
                theme={theme}
                items={[
                    { value: "setup", label: "连接", icon: <PlugZap className="size-3.5" /> },
-                    { value: "chat", label: "对话" },
+                    { value: "chat", label: "对话", icon: <MessageSquare className="size-3.5" /> },
                    { value: "history", label: "历史", icon: <History className="size-3.5" />, count: threads.length },
                    { value: "log", label: "日志", icon: <Terminal className="size-3.5" />, count: eventLogs.length },
                ]}
@@ -506,7 +637,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
                }}
                right={
                    <>
-                        <Button size="small" type="text" disabled={!connected || loadingThreads} icon={<Plus className="size-3.5" />} onClick={startNewThread}>
+                        <Button size="small" type="text" disabled={!connected || loadingThreads || sending || waiting} icon={<Plus className="size-3.5" />} onClick={startNewThread}>
                            新对话
                        </Button>
                    </>
@@ -533,6 +664,7 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
                    activeThreadId={activeThreadId}
                    workspacePath={workspacePath}
                    loading={loadingThreads}
+                    busy={sending || waiting}
                    connected={connected}
                    onRefresh={() => void loadThreads()}
                    onNewThread={() => void startNewThread()}
@@ -550,12 +682,35 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
                />
            ) : (
                <>
-                    <div ref={listRef} className="thin-scrollbar min-h-0 flex-1 space-y-4 overflow-y-auto p-4">
-                        {messages.map((item) => (
-                            <AgentChatMessage key={item.id} item={agentMessageToChatMessage(item)} theme={theme} user={user} />
-                        ))}
-                        {pendingTool ? <AgentPendingToolCard summary={summarizeCanvasAgentOps(pendingTool.input?.ops || []) || toolName(pendingTool.name)} detail={{ requestId: pendingTool.requestId, name: pendingTool.name, input: pendingTool.input }} theme={theme} onReject={rejectPendingTool} onApprove={approvePendingTool} /> : null}
-                        {waiting && !pendingTool ? <AgentWorkingMessage theme={theme} /> : null}
+                    <div className="relative min-h-0 flex-1">
+                        <div ref={listRef} className="thin-scrollbar h-full space-y-4 overflow-y-auto px-4 pb-12 pt-4" onScroll={updateScrollState}>
+                            {messages.map((item) => (
+                                <AgentChatMessage key={item.id} item={agentMessageToChatMessage(item)} theme={theme} user={user} />
+                            ))}
+                            {pendingTool ? (
+                                <AgentPendingToolCard
+                                    summary={summarizeCanvasAgentOps(pendingTool.input?.ops || []) || toolName(pendingTool.name)}
+                                    detail={{ requestId: pendingTool.requestId, name: pendingTool.name, input: pendingTool.input }}
+                                    theme={theme}
+                                    onReject={rejectPendingTool}
+                                    onApprove={approvePendingTool}
+                                />
+                            ) : null}
+                            {waiting && !pendingTool ? <AgentWorkingMessage theme={theme} /> : null}
+                        </div>
+                        {showScrollToBottom ? (
+                            <Tooltip title="滚动到底部" placement="left">
+                                <Button
+                                    type="text"
+                                    shape="circle"
+                                    aria-label="滚动到底部"
+                                    className="!absolute bottom-3 left-1/2 z-10 !h-8 !w-8 !min-w-8 -translate-x-1/2 backdrop-blur transition hover:-translate-y-0.5"
+                                    style={{ background: theme.toolbar.panel, border: `1px solid ${theme.node.stroke}`, color: theme.node.text }}
+                                    icon={<ChevronDown className="size-4" />}
+                                    onClick={() => scrollToBottom()}
+                                />
+                            </Tooltip>
+                        ) : null}
                    </div>
                    <AgentChatComposer
                        prompt={prompt}
@@ -569,7 +724,13 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
                        onStop={stopTurn}
                        onAddFiles={addAttachments}
                        onRemoveAttachment={removeAttachment}
-                        left={attachments.length ? <span className="text-[11px]" style={{ color: theme.node.muted }}>{formatBytes(attachmentPayloadBytes(attachments))} / 30MB</span> : null}
+                        left={
+                            attachments.length ? (
+                                <span className="text-[11px]" style={{ color: theme.node.muted }}>
+                                    {formatBytes(attachmentPayloadBytes(attachments))} / 30MB
+                                </span>
+                            ) : null
+                        }
                    />
                </>
            )}
@@ -580,7 +741,21 @@ export function CanvasLocalAgentPanel({ embedded, headless, autoConnect }: { emb
    return embedded ? content : null;
 }

-function AgentLogView({ logs, theme, context, onClear, onCopied, onCopyBlocked }: { logs: AgentEventLog[]; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; context: AgentLogContext; onClear: () => void; onCopied: (text: string) => void; onCopyBlocked: (text: string) => void }) {
+function AgentLogView({
+    logs,
+    theme,
+    context,
+    onClear,
+    onCopied,
+    onCopyBlocked,
+}: {
+    logs: AgentEventLog[];
+    theme: (typeof canvasThemes)[keyof typeof canvasThemes];
+    context: AgentLogContext;
+    onClear: () => void;
+    onCopied: (text: string) => void;
+    onCopyBlocked: (text: string) => void;
+}) {
    const [mode, setMode] = useState<"text" | "json">("text");
    const textareaRef = useRef<HTMLTextAreaElement>(null);
    const content = mode === "text" ? formatLogText(logs, context) : formatLogJson(logs, context);
@@ -601,12 +776,28 @@ function AgentLogView({ logs, theme, context, onClear, onCopied, onCopyBlocked }
                    <div className="text-base font-semibold leading-6">运行日志</div>
                </div>
                <div className="flex flex-wrap items-center justify-between gap-2">
-                    <Segmented size="small" value={mode} onChange={(value) => setMode(value as "text" | "json")} options={[{ label: "排查日志", value: "text" }, { label: "原始 JSON", value: "json" }]} />
+                    <Segmented
+                        size="small"
+                        value={mode}
+                        onChange={(value) => setMode(value as "text" | "json")}
+                        options={[
+                            { label: "排查日志", value: "text" },
+                            { label: "原始 JSON", value: "json" },
+                        ]}
+                    />
                    <div className="flex items-center gap-2">
-                        <span className="text-xs" style={{ color: theme.node.muted }}>{logs.length} 条</span>
-                        <Button size="small" icon={<Copy className="size-3.5" />} onClick={() => void copy()}>复制</Button>
-                        <Button size="small" disabled={!lastError} onClick={() => lastError && void copy(formatLogText([lastError], context), "最近错误已复制")}>最近错误</Button>
-                        <Button size="small" danger type="text" icon={<Trash2 className="size-3.5" />} disabled={!logs.length} onClick={onClear}>清空</Button>
+                        <span className="text-xs" style={{ color: theme.node.muted }}>
+                            {logs.length} 条
+                        </span>
+                        <Button size="small" icon={<Copy className="size-3.5" />} onClick={() => void copy()}>
+                            复制
+                        </Button>
+                        <Button size="small" disabled={!lastError} onClick={() => lastError && void copy(formatLogText([lastError], context), "最近错误已复制")}>
+                            最近错误
+                        </Button>
+                        <Button size="small" danger type="text" icon={<Trash2 className="size-3.5" />} disabled={!logs.length} onClick={onClear}>
+                            清空
+                        </Button>
                    </div>
                </div>
                <textarea
@@ -622,7 +813,29 @@ function AgentLogView({ logs, theme, context, onClear, onCopied, onCopyBlocked }
    );
 }

-function AgentConnectView({ theme, url, token, enabled, connected, activity, connectError, onUrlChange, onTokenChange, onToggleEnabled }: { theme: (typeof canvasThemes)[keyof typeof canvasThemes]; url: string; token: string; enabled: boolean; connected: boolean; activity: string; connectError: string; onUrlChange: (value: string) => void; onTokenChange: (value: string) => void; onToggleEnabled: () => void }) {
+function AgentConnectView({
+    theme,
+    url,
+    token,
+    enabled,
+    connected,
+    activity,
+    connectError,
+    onUrlChange,
+    onTokenChange,
+    onToggleEnabled,
+}: {
+    theme: (typeof canvasThemes)[keyof typeof canvasThemes];
+    url: string;
+    token: string;
+    enabled: boolean;
+    connected: boolean;
+    activity: string;
+    connectError: string;
+    onUrlChange: (value: string) => void;
+    onTokenChange: (value: string) => void;
+    onToggleEnabled: () => void;
+}) {
    const { message } = App.useApp();
    const statusText = connectError ? "连接失败" : connected ? activity : enabled ? "连接中" : "未连接";
    const statusColor = connectError ? "#dc2626" : connected ? "#16a34a" : enabled ? "#d97706" : theme.node.muted;
@@ -632,7 +845,9 @@ function AgentConnectView({ theme, url, token, enabled, connected, activity, con
    };
    const codexPluginReminder = (
        <div className="rounded-lg border px-3 py-2.5 text-xs leading-5" style={{ borderColor: theme.node.stroke, color: theme.node.muted }}>
-            <div className="font-medium" style={{ color: theme.node.text }}>Codex 插件提醒</div>
+            <div className="font-medium" style={{ color: theme.node.text }}>
+                Codex 插件提醒
+            </div>
            <div className="mt-1">只有安装 Codex 插件或手动添加 MCP 后，工具列表才会进入 Codex 上下文并增加 token 消耗；仅运行 `npx -y @basketikun/canvas-agent` 启动本地 Agent 不会安装 MCP。</div>
            <div className="mt-2 grid gap-1.5">
                {[
@@ -640,7 +855,9 @@ function AgentConnectView({ theme, url, token, enabled, connected, activity, con
                    ["移除手动 MCP", AGENT_MCP_REMOVE_COMMAND],
                ].map(([label, command]) => (
                    <div key={command} className="flex items-center gap-2 rounded-md border bg-transparent px-2 py-1.5" style={{ borderColor: theme.node.stroke, color: theme.node.text }}>
-                        <span className="shrink-0 text-[11px]" style={{ color: theme.node.muted }}>{label}</span>
+                        <span className="shrink-0 text-[11px]" style={{ color: theme.node.muted }}>
+                            {label}
+                        </span>
                        <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap text-[11px] leading-5">{command}</code>
                        <Tooltip title="复制命令">
                            <Button size="small" type="text" className="!h-6 !w-6 !min-w-6" icon={<Copy className="size-3.5" />} onClick={() => copyCommand(command)} />
@@ -666,7 +883,9 @@ function AgentConnectView({ theme, url, token, enabled, connected, activity, con
                            <Fragment key={step.title}>
                                <div className="rounded-lg px-3 py-2.5">
                                    <div className="text-sm font-medium leading-5">{step.title}</div>
-                                    <div className="mt-1 text-xs leading-5" style={{ color: theme.node.muted }}>{step.text}</div>
+                                    <div className="mt-1 text-xs leading-5" style={{ color: theme.node.muted }}>
+                                        {step.text}
+                                    </div>
                                    {command ? (
                                        <div className="mt-2 flex items-center gap-2 rounded-md border bg-transparent px-2 py-1.5" style={{ borderColor: theme.node.stroke, color: theme.node.text }}>
                                            <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap text-[11px] leading-5">{command}</code>
@@ -686,7 +905,10 @@ function AgentConnectView({ theme, url, token, enabled, connected, activity, con
                        <div className="min-w-0 flex-1">
                            <div className="flex min-w-0 items-center gap-2">
                                <span className="shrink-0 text-sm font-medium leading-5">网页连接</span>
-                                <span className="inline-flex min-w-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] leading-4" style={{ borderColor: connected || enabled || connectError ? statusColor : theme.node.stroke, color: statusColor }}>
+                                <span
+                                    className="inline-flex min-w-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] leading-4"
+                                    style={{ borderColor: connected || enabled || connectError ? statusColor : theme.node.stroke, color: statusColor }}
+                                >
                                    <span className="size-1.5 shrink-0 rounded-full" style={{ background: statusColor }} />
                                    <span className="truncate">{statusText}</span>
                                </span>
@@ -714,7 +936,13 @@ function AgentConnectView({ theme, url, token, enabled, connected, activity, con
                                连接 Token
                                <span className="font-normal opacity-70">Connect token</span>
                            </span>
-                            <Input.Password size="large" prefix={<KeyRound className="mr-1 size-4" style={{ color: theme.node.faint }} />} value={token} onChange={(event) => onTokenChange(event.target.value)} placeholder="自动发现，或手动填入 Connect token" />
+                            <Input.Password
+                                size="large"
+                                prefix={<KeyRound className="mr-1 size-4" style={{ color: theme.node.faint }} />}
+                                value={token}
+                                onChange={(event) => onTokenChange(event.target.value)}
+                                placeholder="自动发现，或手动填入 Connect token"
+                            />
                        </label>
                        {connectError ? (
                            <div className="rounded-md border px-2.5 py-2 text-xs leading-5" style={{ borderColor: "rgba(220,38,38,.35)", color: "#dc2626" }}>
@@ -728,14 +956,40 @@ function AgentConnectView({ theme, url, token, enabled, connected, activity, con
    );
 }

-function AgentHistoryView({ theme, threads, activeThreadId, workspacePath, loading, connected, onRefresh, onNewThread, onResumeThread, onDeleteThread }: { theme: (typeof canvasThemes)[keyof typeof canvasThemes]; threads: AgentThreadSummary[]; activeThreadId: string; workspacePath: string; loading: boolean; connected: boolean; onRefresh: () => void; onNewThread: () => void; onResumeThread: (threadId: string) => void; onDeleteThread: (thread: AgentThreadSummary) => void }) {
+function AgentHistoryView({
+    theme,
+    threads,
+    activeThreadId,
+    workspacePath,
+    loading,
+    busy,
+    connected,
+    onRefresh,
+    onNewThread,
+    onResumeThread,
+    onDeleteThread,
+}: {
+    theme: (typeof canvasThemes)[keyof typeof canvasThemes];
+    threads: AgentThreadSummary[];
+    activeThreadId: string;
+    workspacePath: string;
+    loading: boolean;
+    busy: boolean;
+    connected: boolean;
+    onRefresh: () => void;
+    onNewThread: () => void;
+    onResumeThread: (threadId: string) => void;
+    onDeleteThread: (thread: AgentThreadSummary) => void;
+}) {
    return (
        <div className="thin-scrollbar min-h-0 flex-1 overflow-y-auto p-3">
            <div className="space-y-3">
                <div className="flex min-w-0 items-center gap-2 text-xs" style={{ color: theme.node.muted }}>
                    <FolderOpen className="size-3.5 shrink-0" />
                    <span className="shrink-0">工作空间</span>
-                    <span className="min-w-0 truncate" title={workspacePath}>{workspacePath || "默认画布目录"}</span>
+                    <span className="min-w-0 truncate" title={workspacePath}>
+                        {workspacePath || "默认画布目录"}
+                    </span>
                </div>
                <div className="flex flex-wrap items-center justify-between gap-2">
                    <div className="text-sm" style={{ color: theme.node.muted }}>
@@ -745,7 +999,7 @@ function AgentHistoryView({ theme, threads, activeThreadId, workspacePath, loadi
                        <Button size="small" icon={<RefreshCw className={`size-3.5 ${loading ? "animate-spin" : ""}`} />} disabled={!connected || loading} onClick={onRefresh}>
                            刷新
                        </Button>
-                        <Button size="small" type="primary" icon={<Plus className="size-3.5" />} disabled={!connected || loading} onClick={onNewThread}>
+                        <Button size="small" type="primary" icon={<Plus className="size-3.5" />} disabled={!connected || loading || busy} onClick={onNewThread}>
                            新对话
                        </Button>
                    </div>
@@ -758,18 +1012,22 @@ function AgentHistoryView({ theme, threads, activeThreadId, workspacePath, loadi
                                <div className="flex items-center gap-2">
                                    <div className="min-w-0 flex-1">
                                        <div className="flex min-w-0 items-center gap-1.5">
-                                            {active ? <span className="shrink-0 text-[10px] font-medium" style={{ color: theme.node.text }}>当前</span> : null}
+                                            {active ? (
+                                                <span className="shrink-0 text-[10px] font-medium" style={{ color: theme.node.text }}>
+                                                    当前
+                                                </span>
+                                            ) : null}
                                            <div className="truncate text-sm font-medium leading-5">{thread.name || thread.preview || "未命名对话"}</div>
                                        </div>
                                        <div className="truncate text-[11px] leading-4 opacity-65">{thread.preview || thread.id}</div>
                                    </div>
                                    <div className="flex shrink-0 items-center gap-1">
                                        <span className="text-[10px] opacity-55">{formatThreadTime(thread.updatedAt || thread.createdAt)}</span>
-                                        <Button size="small" className="!h-6 !px-2" disabled={loading} onClick={() => onResumeThread(thread.id)}>
+                                        <Button size="small" className="!h-6 !px-2" disabled={loading || busy} onClick={() => onResumeThread(thread.id)}>
                                            进入
                                        </Button>
                                        <Tooltip title="删除记录">
-                                            <Button size="small" danger type="text" className="!h-6 !w-6 !min-w-6" disabled={loading} icon={<Trash2 className="size-3.5" />} onClick={() => onDeleteThread(thread)} />
+                                            <Button size="small" danger type="text" className="!h-6 !w-6 !min-w-6" disabled={loading || busy} icon={<Trash2 className="size-3.5" />} onClick={() => onDeleteThread(thread)} />
                                        </Tooltip>
                                    </div>
                                </div>
@@ -789,7 +1047,17 @@ function AgentHistoryView({ theme, threads, activeThreadId, workspacePath, loadi

 async function postState(endpoint: string, token: string, clientId: string, snapshot: CanvasAgentSnapshot | null) {
    try {
-        await fetch(`${endpoint}/canvas/state?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(clientId)}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(snapshot ? { ...snapshot, hasCanvas: true } : { hasCanvas: false }) });
+        await fetch(`${endpoint}/canvas/state?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(clientId)}`, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify(snapshot ? { ...snapshot, hasCanvas: true } : { hasCanvas: false }),
+        });
+    } catch {}
+}
+
+async function activateAgentClient(endpoint: string, token: string, clientId: string) {
+    try {
+        await fetch(`${endpoint}/canvas/activate?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(clientId)}`, { method: "POST" });
    } catch {}
 }

@@ -823,6 +1091,11 @@ function parseEventData<T>(event: Event) {
    }
 }

+function isCurrentThreadEvent(event: { threadId?: string; thread_id?: string }) {
+    const threadId = event.threadId || event.thread_id || "";
+    return Boolean(threadId) && threadId === useAgentStore.getState().activeThreadId;
+}
+
 function formatLogText(logs: AgentEventLog[], context: AgentLogContext) {
    const head = [
        "Infinite Canvas Agent 诊断日志",
@@ -835,10 +1108,12 @@ function formatLogText(logs: AgentEventLog[], context: AgentLogContext) {
        `pendingTool: ${context.pendingTool ? toolName(context.pendingTool) : "none"}`,
        `logs: ${logs.length}`,
    ].join("\n");
-    const body = logs.map((item, index) => {
-        const detail = item.raw == null ? item.text : JSON.stringify(item.raw, null, 2);
-        return [`#${index + 1} ${item.time} ${item.title}`, detail].filter(Boolean).join("\n");
-    }).join("\n\n---\n\n");
+    const body = logs
+        .map((item, index) => {
+            const detail = item.raw == null ? item.text : JSON.stringify(item.raw, null, 2);
+            return [`#${index + 1} ${item.time} ${item.title}`, detail].filter(Boolean).join("\n");
+        })
+        .join("\n\n---\n\n");
    return [head, body || "暂无事件日志"].join("\n\n");
 }

@@ -861,17 +1136,6 @@ function usageText(event: AgentEventPayload) {
    return undefined;
 }

-function activityText(event: AgentEventPayload) {
-    const name = event.type || "";
-    if (name === "thread.started") return "已创建会话";
-    if (name === "turn.started") return "思考中";
-    if (name === "turn.completed") return "完成";
-    if (name === "turn.failed" || name === "error") return "出错";
-    if (name === "item.started") return isMcpToolItem(event.item) ? `调用${toolName(String(event.item?.tool || ""))}` : "执行步骤";
-    if (name === "item.completed") return isMcpToolItem(event.item) ? "工具完成" : "更新消息";
-    return "";
-}
-
 function eventTitle(event: AgentEventPayload) {
    const item = event.item;
    if (event.type === "thread.started") return "已创建 Codex 会话";
@@ -900,6 +1164,7 @@ function toolName(name: string) {
    if (name === "canvas_get_selection") return "读取选区";
    if (name === "canvas_export_snapshot") return "导出快照";
    if (name === "canvas_create_node") return "创建节点";
+    if (name === "canvas_create_attachment_nodes") return "添加附件图片";
    if (name === "canvas_create_text_node") return "创建文本";
    if (name === "canvas_create_text_nodes") return "批量创建文本";
    if (name === "canvas_create_config_node") return "创建生成配置";
@@ -929,6 +1194,10 @@ function siteToolSummary(name: string, result: unknown) {
    if (name === "prompts_search") return `找到 ${numberField(data, "total")} 条提示词`;
    if (name === "assets_list") return `共 ${numberField(data, "total")} 个资产`;
    if (name === "assets_add") return "已加入我的资产";
+    if (name === "generation_get_status") {
+        const summary = data.summary && typeof data.summary === "object" ? (data.summary as Record<string, unknown>) : {};
+        return `共 ${numberField(data, "total")} 个任务，排队 ${numberField(summary, "queued")}，运行中 ${numberField(summary, "running")}，成功 ${numberField(summary, "succeeded")}，失败 ${numberField(summary, "failed")}`;
+    }
    if (name === "workbench_image_generate" || name === "workbench_video_generate") return typeof data.note === "string" ? data.note : "已在工作台执行";
    if (name === "workbench_image_get_config" || name === "workbench_video_get_config") return "已读取工作台配置";
    return "已完成";
@@ -958,7 +1227,12 @@ function toolSummary(item?: AgentEventItem) {

 function parseToolResult(result: unknown) {
    const content = objectField(result, "content");
-    const text = Array.isArray(content) ? content.map((item) => objectField(item, "text")).filter((item): item is string => typeof item === "string").join("\n") : "";
+    const text = Array.isArray(content)
+        ? content
+              .map((item) => objectField(item, "text"))
+              .filter((item): item is string => typeof item === "string")
+              .join("\n")
+        : "";
    try {
        return text ? JSON.parse(text) : result;
    } catch {
@@ -998,9 +1272,7 @@ function mergeAgentText(prev: string, next: string) {
 }

 function promptWithAttachments(text: string, attachments: AgentAttachment[]) {
-    if (!attachments.length) return text;
-    const names = attachments.map((item) => item.name).join("、");
-    return [text, `用户上传了 ${attachments.length} 张图片附件：${names}。`].filter(Boolean).join("\n\n");
+    return text || (attachments.length ? "请处理上传的图片附件。" : "");
 }

 function attachmentPayloadBytes(attachments: AgentAttachment[]) {
@@ -1011,6 +1283,41 @@ function formatBytes(bytes: number) {
    return bytes > 1024 * 1024 ? `${(bytes / 1024 / 1024).toFixed(1)}MB` : `${Math.ceil(bytes / 1024)}KB`;
 }

+function isCanvasWriteTool(name: string) {
+    return name === "canvas_apply_ops" || name === "canvas_create_attachment_nodes";
+}
+
+async function attachmentNodeOps(endpoint: string, token: string, clientId: string, value: unknown): Promise<CanvasAgentOp[]> {
+    const nodes = Array.isArray(value) ? value : [];
+    if (!nodes.length) throw new Error("没有可添加的图片附件");
+    return await Promise.all(
+        nodes.map(async (value) => {
+            const item = value as { id?: unknown; attachmentId?: unknown; title?: unknown; position?: unknown };
+            const id = String(item.id || "");
+            const attachmentId = String(item.attachmentId || "");
+            if (!id || !attachmentId) throw new Error("图片附件节点参数无效");
+            const res = await fetch(`${endpoint}/agent/attachments/${encodeURIComponent(attachmentId)}?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(clientId)}`);
+            if (!res.ok) {
+                const body = (await res.json().catch(() => null)) as { error?: string } | null;
+                throw new Error(body?.error || "读取图片附件失败");
+            }
+            const image = await uploadImage(await res.blob());
+            const size = fitNodeSize(image.width, image.height);
+            const position = item.position && typeof item.position === "object" ? (item.position as { x?: unknown; y?: unknown }) : {};
+            return {
+                type: "add_node" as const,
+                id,
+                nodeType: "image" as const,
+                title: String(item.title || "参考图"),
+                position: { x: Number(position.x) || 0, y: Number(position.y) || 0 },
+                width: size.width,
+                height: size.height,
+                metadata: imageMetadata(image),
+            };
+        }),
+    );
+}
+
 async function fetchAgentJson<T>(endpoint: string, token: string, path: string, init?: RequestInit) {
    const url = `${endpoint}${path}${path.includes("?") ? "&" : "?"}token=${encodeURIComponent(token)}`;
    const res = await fetch(url, init);
@@ -9,7 +9,7 @@ import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
 import { CanvasPromptLibrary } from "./canvas-prompt-library";
 import { CanvasAudioSettingsPopover, type CanvasAudioSettingKey } from "./canvas-audio-settings-popover";
-import { CanvasResourceMentionTextarea } from "./canvas-resource-mention-textarea";
+import { CanvasPromptChipInput } from "./canvas-prompt-chip-input";
 import { CanvasVideoSettingsPopover } from "./canvas-video-settings-popover";
 import { CanvasNodeType, type CanvasGenerationMode, type CanvasNodeData } from "@/types/canvas";
 import type { CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
@@ -39,9 +39,11 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
    const isEditingExistingContent = hasTextContent || hasImageContent;
    const [prompt, setPrompt] = useState(isEditingExistingContent ? "" : node.metadata?.prompt || "");

+    // 仅在切换到其它节点时重置输入框;同一节点生成完成后(内容写回自身导致 isEditingExistingContent 变化)保留用户输入
    useEffect(() => {
        setPrompt(isEditingExistingContent ? "" : node.metadata?.prompt || "");
-    }, [isEditingExistingContent, node.id]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [node.id]);

    const updatePrompt = (value: string) => {
        setPrompt(value);
@@ -52,7 +54,6 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
        const text = prompt.trim();
        if (!text || isRunning) return;
        onGenerate(node.id, mode, text);
-        setPrompt("");
    };

    return (
@@ -63,7 +64,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
            onPointerDown={(event) => event.stopPropagation()}
            onWheel={(event) => event.stopPropagation()}
        >
-            <CanvasResourceMentionTextarea
+            <CanvasPromptChipInput
                value={prompt}
                references={mentionReferences}
                onChange={updatePrompt}
@@ -26,7 +26,6 @@ type CanvasNodeProps = {
    editRequestNonce?: number;
    showPanel: boolean;
    showImageInfo: boolean;
-    resourceLabel?: CanvasResourceReference;
    mentionReferences?: CanvasResourceReference[];
    pluginHost?: CanvasPluginHost;
    registryVersion?: number;
@@ -89,7 +88,6 @@ export const CanvasNode = React.memo(function CanvasNode({
    editRequestNonce = 0,
    showPanel,
    showImageInfo,
-    resourceLabel,
    mentionReferences = [],
    pluginHost,
    renderPanel,
@@ -313,39 +311,41 @@ export const CanvasNode = React.memo(function CanvasNode({
            onMouseDownCapture={(event) => onSelectCapture?.(event, data.id)}
            onContextMenu={(event) => onContextMenu(event, data.id)}
        >
-            <div className="absolute left-3 top-[-28px] z-[65] max-w-[calc(100%-24px)]" onMouseDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()}>
-                {isEditingTitle ? (
-                    <input
-                        ref={titleInputRef}
-                        value={titleDraft}
-                        maxLength={64}
-                        className="h-6 max-w-full border-0 border-b border-dashed bg-transparent px-0 text-left text-xs font-medium outline-none"
-                        style={{ borderColor: theme.node.muted, color: theme.node.text }}
-                        onChange={(event) => setTitleDraft(event.target.value)}
-                        onBlur={finishTitleEditing}
-                        onKeyDown={(event) => {
-                            if (event.key === "Enter") finishTitleEditing();
-                            if (event.key === "Escape") {
-                                setTitleDraft(data.title || "");
-                                setIsEditingTitle(false);
-                            }
-                        }}
-                    />
-                ) : (
-                    <button
-                        type="button"
-                        className="block max-w-full truncate border-b border-dashed border-transparent px-0 py-0.5 text-left text-xs font-medium opacity-75 transition hover:border-current hover:opacity-100"
-                        style={{ color: theme.node.text }}
-                        title="双击修改节点名称"
-                        onDoubleClick={(event) => {
-                            event.stopPropagation();
-                            setIsEditingTitle(true);
-                        }}
-                    >
-                        {data.title || "未命名节点"}
-                    </button>
-                )}
-            </div>
+            {(isSelected || hovered || isEditingTitle) && (
+                <div className="absolute left-3 top-[-28px] z-[65] max-w-[calc(100%-24px)]" onMouseDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()}>
+                    {isEditingTitle ? (
+                        <input
+                            ref={titleInputRef}
+                            value={titleDraft}
+                            maxLength={64}
+                            className="h-6 max-w-full border-0 border-b border-dashed bg-transparent px-0 text-left text-xs font-medium outline-none"
+                            style={{ borderColor: theme.node.muted, color: theme.node.text }}
+                            onChange={(event) => setTitleDraft(event.target.value)}
+                            onBlur={finishTitleEditing}
+                            onKeyDown={(event) => {
+                                if (event.key === "Enter") finishTitleEditing();
+                                if (event.key === "Escape") {
+                                    setTitleDraft(data.title || "");
+                                    setIsEditingTitle(false);
+                                }
+                            }}
+                        />
+                    ) : (
+                        <button
+                            type="button"
+                            className="block max-w-full truncate border-b border-dashed border-transparent px-0 py-0.5 text-left text-xs font-medium opacity-75 transition hover:border-current hover:opacity-100"
+                            style={{ color: theme.node.text }}
+                            title="双击修改节点名称"
+                            onDoubleClick={(event) => {
+                                event.stopPropagation();
+                                setIsEditingTitle(true);
+                            }}
+                        >
+                            {data.title || "未命名节点"}
+                        </button>
+                    )}
+                </div>
+            )}

            <div
                className="relative h-full w-full overflow-visible rounded-3xl border-2"
@@ -414,7 +414,6 @@ export const CanvasNode = React.memo(function CanvasNode({
                </div>

                {showImageInfo && hasImageContent ? <ImageInfoBar node={data} /> : null}
-                {resourceLabel ? <ResourceLabelBadge reference={resourceLabel} /> : null}

                {!isGroup && !hasImageContent && !hasVideoContent && !hasAudioContent ? <div className="pointer-events-none absolute inset-x-0 bottom-0 h-12" style={{ background: `linear-gradient(to top, ${theme.canvas.background}66, transparent)` }} /> : null}

@@ -568,14 +567,6 @@ function TextContent({ node, theme, isEditingContent, textareaRef, mentionRefere
    );
 }

-function ResourceLabelBadge({ reference }: { reference: CanvasResourceReference }) {
-    return (
-        <span className={`pointer-events-none absolute right-2 top-2 z-30 rounded-md px-1.5 py-0.5 text-[10px] font-medium ${reference.active ? "bg-[#2f80ff] text-white shadow-sm" : "bg-black/35 text-white/75"}`}>
-            {reference.label}
-        </span>
-    );
-}
-
 function ImageNodeContent(props: NodeContentRendererProps) {
    if (!props.node.metadata?.content && props.isBatchRoot) {
        const content =
@@ -0,0 +1,425 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { CSSProperties, KeyboardEvent, MouseEvent, PointerEvent } from "react";
+import { createPortal } from "react-dom";
+import { Image } from "antd";
+import { FileText, Image as ImageIcon, Music2, Video } from "lucide-react";
+
+import { canvasThemes } from "@/lib/canvas-theme";
+import { isImeComposing, isPlainEnterKey } from "@/lib/keyboard-event";
+import { useThemeStore } from "@/stores/use-theme-store";
+import type { CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
+
+type Props = {
+    value: string;
+    references: CanvasResourceReference[];
+    onChange: (value: string) => void;
+    onSubmit?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    placeholder?: string;
+};
+
+type MentionState = {
+    query: string;
+    rect: DOMRect | null;
+};
+
+type Token =
+    | { type: "text"; value: string }
+    | { type: "reference"; label: string };
+
+// 提示词面板专用的 contentEditable 输入框:@ 引用图片时直接内嵌真实缩略图 chip,而不是「图片1」文字。
+// 序列化时 chip → 引用 label 文本(如「图片1」),保证发给生成的 value 语义与旧 textarea 版一致。
+export function CanvasPromptChipInput({ value, references, onChange, onSubmit, className, style, placeholder }: Props) {
+    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const editorRef = useRef<HTMLDivElement>(null);
+    const composingRef = useRef(false);
+    // 记录我们最近一次向父级 emit 的 value。聚焦时若 value 与它一致,说明是本组件输入的回声,
+    // 跳过重建以免打断光标 / IME;若不一致(如发送后父级把 prompt 清空、或从提示词库插入),即使聚焦也要重建。
+    const lastEmittedRef = useRef(value);
+    const [mention, setMention] = useState<MentionState | null>(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [imagePreview, setImagePreview] = useState<string | null>(null);
+
+    const activeReferences = useMemo(() => references.filter((item) => item.active), [references]);
+    const referenceByLabel = useMemo(() => new Map(activeReferences.map((item) => [item.label, item])), [activeReferences]);
+    // 长 label 优先匹配,避免「图片1」把「图片10」切坏。
+    const activeLabels = useMemo(() => Array.from(new Set(activeReferences.map((item) => item.label))).sort((a, b) => b.length - a.length), [activeReferences]);
+    const tokens = useMemo(() => parseTokens(value, activeLabels), [value, activeLabels]);
+
+    const candidates = useMemo(() => {
+        if (!mention) return [];
+        const query = mention.query.trim().toLowerCase();
+        if (!query) return activeReferences;
+        return activeReferences.filter((item) => `${item.label} ${item.title} ${item.kind} ${item.text || ""}`.toLowerCase().includes(query));
+    }, [mention, activeReferences]);
+
+    // DOM ← value:未聚焦时按 value 重建;聚焦时仅当 value 是外部改动(非本组件回声)才重建。
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (!editor) return;
+        if (document.activeElement === editor && value === lastEmittedRef.current) return;
+        editor.textContent = "";
+        tokens.forEach((token) => {
+            if (token.type === "text") {
+                editor.append(document.createTextNode(token.value));
+                return;
+            }
+            const reference = referenceByLabel.get(token.label);
+            if (reference) editor.append(createReferenceChip(reference, theme, setImagePreview));
+            else editor.append(document.createTextNode(token.label));
+        });
+        lastEmittedRef.current = value;
+    }, [tokens, referenceByLabel, theme, value]);
+
+    const emit = (next: string) => {
+        lastEmittedRef.current = next;
+        onChange(next);
+    };
+
+    const syncFromEditor = () => {
+        const editor = editorRef.current;
+        if (!editor) return;
+        emit(serializeEditor(editor));
+        syncMention();
+    };
+
+    const syncMention = () => {
+        const text = textBeforeCaret();
+        const match = /@([^\s@]*)$/.exec(text);
+        if (!match || !activeReferences.length) {
+            closeMention();
+            return;
+        }
+        setMention({ query: match[1] || "", rect: caretRect() });
+        setActiveIndex(0);
+    };
+
+    const closeMention = () => {
+        setMention(null);
+        setActiveIndex(0);
+    };
+
+    const insertReference = (reference: CanvasResourceReference) => {
+        const editor = editorRef.current;
+        if (!editor) return;
+        removeActiveMention();
+        const chip = createReferenceChip(reference, theme, setImagePreview);
+        const space = document.createTextNode(" ");
+        const selection = window.getSelection();
+        const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+        if (range) {
+            range.insertNode(space);
+            range.insertNode(chip);
+            range.setStartAfter(space);
+            range.collapse(true);
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+        } else {
+            editor.append(chip, space);
+            placeCaretAtEnd(editor);
+        }
+        closeMention();
+        emit(serializeEditor(editor));
+    };
+
+    const showPlaceholder = !value.trim();
+
+    return (
+        <div className="relative w-full">
+            {showPlaceholder && placeholder ? (
+                <div className="pointer-events-none absolute left-3 top-2 text-sm leading-5" style={{ color: theme.node.placeholder }}>
+                    {placeholder}
+                </div>
+            ) : null}
+            <div
+                ref={editorRef}
+                contentEditable
+                suppressContentEditableWarning
+                role="textbox"
+                aria-multiline="true"
+                className={`${className || ""} overflow-y-auto whitespace-pre-wrap break-words outline-none`}
+                style={{ ...style, cursor: "text" }}
+                onInput={() => {
+                    if (!composingRef.current) syncFromEditor();
+                }}
+                onCompositionStart={() => {
+                    composingRef.current = true;
+                }}
+                onCompositionEnd={() => {
+                    composingRef.current = false;
+                    syncFromEditor();
+                }}
+                onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {
+                    event.stopPropagation();
+                    if (isImeComposing(event)) return;
+                    if (mention && candidates.length) {
+                        if (event.key === "ArrowDown") {
+                            event.preventDefault();
+                            setActiveIndex((index) => (index + 1) % candidates.length);
+                            return;
+                        }
+                        if (event.key === "ArrowUp") {
+                            event.preventDefault();
+                            setActiveIndex((index) => (index - 1 + candidates.length) % candidates.length);
+                            return;
+                        }
+                        if (event.key === "Enter") {
+                            event.preventDefault();
+                            insertReference(candidates[Math.min(activeIndex, candidates.length - 1)]);
+                            return;
+                        }
+                        if (event.key === "Escape") {
+                            event.preventDefault();
+                            closeMention();
+                            return;
+                        }
+                    }
+                    if ((event.key === "Backspace" || event.key === "Delete") && deleteAdjacentReference(event.key)) {
+                        event.preventDefault();
+                        requestAnimationFrame(syncFromEditor);
+                        return;
+                    }
+                    if (isPlainEnterKey(event) && onSubmit) {
+                        event.preventDefault();
+                        onSubmit();
+                        return;
+                    }
+                    requestAnimationFrame(syncMention);
+                }}
+                onBlur={() => window.setTimeout(closeMention, 120)}
+            />
+            {mention && candidates.length ? (
+                <MentionMenu rect={mention.rect} references={candidates} activeIndex={Math.min(activeIndex, candidates.length - 1)} theme={theme} onSelect={insertReference} />
+            ) : null}
+            {imagePreview ? <Image src={imagePreview} alt="引用图片预览" style={{ display: "none" }} preview={{ visible: true, src: imagePreview, onVisibleChange: (visible) => !visible && setImagePreview(null) }} /> : null}
+        </div>
+    );
+}
+
+function MentionMenu({ rect, references, activeIndex, theme, onSelect }: { rect: DOMRect | null; references: CanvasResourceReference[]; activeIndex: number; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onSelect: (reference: CanvasResourceReference) => void }) {
+    const selectedRef = useRef(false);
+    const activeItemRef = useRef<HTMLButtonElement | null>(null);
+
+    useEffect(() => {
+        activeItemRef.current?.scrollIntoView({ block: "nearest" });
+    }, [activeIndex, references]);
+
+    const selectReference = (reference: CanvasResourceReference) => {
+        if (selectedRef.current) return;
+        selectedRef.current = true;
+        onSelect(reference);
+    };
+
+    const stopCanvasInteraction = (event: PointerEvent | MouseEvent) => event.stopPropagation();
+
+    const menuWidth = 256;
+    const maxMenuHeight = 224;
+    const gap = 6;
+    const anchor = rect || new DOMRect(16, 16, 0, 0);
+    const left = clamp(anchor.left, 8, window.innerWidth - menuWidth - 8);
+    const showAbove = anchor.bottom + gap + maxMenuHeight > window.innerHeight && anchor.top - gap - maxMenuHeight >= 0;
+    const top = showAbove ? anchor.top - gap - maxMenuHeight : anchor.bottom + gap;
+
+    return createPortal(
+        <div
+            data-canvas-resource-mention-menu="true"
+            className="fixed z-[120] max-h-56 w-64 overflow-y-auto rounded-xl border p-1 shadow-2xl backdrop-blur-md"
+            style={{ left, top, background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.node.text }}
+            onPointerDown={stopCanvasInteraction}
+            onMouseDown={stopCanvasInteraction}
+            onClick={(event) => event.stopPropagation()}
+        >
+            {references.map((reference, index) => (
+                <button
+                    key={reference.id}
+                    ref={index === activeIndex ? activeItemRef : undefined}
+                    type="button"
+                    className="flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition"
+                    style={{ background: index === activeIndex ? theme.toolbar.activeBg : "transparent", color: index === activeIndex ? theme.toolbar.activeText : theme.node.text }}
+                    onPointerDown={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        selectReference(reference);
+                    }}
+                    onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        selectReference(reference);
+                    }}
+                >
+                    <ReferencePreview reference={reference} />
+                    <span className="min-w-0 flex-1">
+                        <span className="block font-medium">{reference.label}</span>
+                        <span className="block truncate opacity-65">{reference.text || reference.title}</span>
+                    </span>
+                </button>
+            ))}
+        </div>,
+        document.body,
+    );
+}
+
+function ReferencePreview({ reference }: { reference: CanvasResourceReference }) {
+    if (reference.kind === "image" && reference.previewUrl) return <img src={reference.previewUrl} alt="" className="size-9 rounded-md object-cover" />;
+    if (reference.kind === "video" && reference.previewUrl) return <video src={reference.previewUrl} className="size-9 rounded-md bg-black object-cover" muted preload="metadata" />;
+    const Icon = reference.kind === "audio" ? Music2 : reference.kind === "video" ? Video : reference.kind === "image" ? ImageIcon : FileText;
+    return (
+        <span className="grid size-9 shrink-0 place-items-center rounded-md bg-black/10">
+            <Icon className="size-4" />
+        </span>
+    );
+}
+
+function createReferenceChip(reference: CanvasResourceReference, theme: (typeof canvasThemes)[keyof typeof canvasThemes], onImagePreview: (url: string) => void) {
+    const wrapper = document.createElement("span");
+    wrapper.contentEditable = "false";
+    wrapper.dataset.refLabel = reference.label;
+    if (reference.kind === "image" && reference.previewUrl) {
+        const image = document.createElement("img");
+        image.src = reference.previewUrl;
+        image.alt = reference.title;
+        image.className = "size-6 rounded object-cover";
+        wrapper.className = "mx-px inline-flex size-6 items-center justify-center overflow-hidden rounded align-middle";
+        wrapper.appendChild(image);
+        wrapper.addEventListener("click", (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onImagePreview(reference.previewUrl || "");
+        });
+    } else {
+        wrapper.className = "mx-px inline-flex h-6 max-w-40 items-center justify-center overflow-hidden rounded-md border px-1 text-xs leading-none align-middle";
+        Object.assign(wrapper.style, { background: theme.toolbar.panel, borderColor: theme.node.stroke, color: theme.node.text } as CSSProperties);
+        wrapper.title = reference.text || reference.title;
+        const text = document.createElement("span");
+        text.className = "block truncate";
+        text.textContent = reference.kind === "text" ? reference.text || reference.title : reference.label;
+        wrapper.appendChild(text);
+    }
+    return wrapper;
+}
+
+function serializeEditor(editor: HTMLElement) {
+    return serializeNodes(editor.childNodes).replace(//g, "");
+}
+
+function serializeNodes(nodes: NodeListOf<ChildNode>) {
+    let result = "";
+    nodes.forEach((node) => {
+        if (node.nodeType === Node.TEXT_NODE) result += node.textContent || "";
+        if (!(node instanceof HTMLElement)) return;
+        const label = node.dataset.refLabel;
+        if (label) result += label;
+        else if (node.tagName === "BR") result += "\n";
+        else result += serializeNodes(node.childNodes);
+    });
+    return result;
+}
+
+function removeActiveMention() {
+    const selection = window.getSelection();
+    if (!selection?.rangeCount) return;
+    const range = selection.getRangeAt(0);
+    const text = textBeforeCaret();
+    const match = /@([^\s@]*)$/.exec(text);
+    if (!match) return;
+    range.setStart(range.startContainer, Math.max(0, range.startOffset - (match[1] || "").length - 1));
+    range.deleteContents();
+}
+
+// chip 是 contentEditable="false" 的原子块,光标紧邻它按 Backspace/Delete 时整块删除。
+function deleteAdjacentReference(key: string) {
+    const selection = window.getSelection();
+    if (!selection?.rangeCount || !selection.isCollapsed) return false;
+    const range = selection.getRangeAt(0);
+    const target = adjacentReferenceNode(range, key);
+    if (!target) return false;
+    const nextCaretNode = document.createTextNode("");
+    target.replaceWith(nextCaretNode);
+    range.setStart(nextCaretNode, 0);
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    return true;
+}
+
+function adjacentReferenceNode(range: Range, key: string) {
+    const container = range.startContainer;
+    const offset = range.startOffset;
+    const previous = key === "Backspace";
+    if (container.nodeType === Node.TEXT_NODE) {
+        const text = container.textContent || "";
+        if ((previous && offset > 0) || (!previous && offset < text.length)) return null;
+        return findReferenceSibling(container, previous);
+    }
+    const children = Array.from(container.childNodes);
+    return findReferenceSibling(children[previous ? offset - 1 : offset] || container, previous, true);
+}
+
+function findReferenceSibling(node: Node, previous: boolean, includeSelf = false): HTMLElement | null {
+    let current: Node | null = includeSelf ? node : previous ? node.previousSibling : node.nextSibling;
+    while (current && current.nodeType === Node.TEXT_NODE && !(current.textContent || "").trim()) current = previous ? current.previousSibling : current.nextSibling;
+    return current instanceof HTMLElement && current.dataset.refLabel ? current : null;
+}
+
+function textBeforeCaret() {
+    const selection = window.getSelection();
+    if (!selection?.rangeCount) return "";
+    const range = selection.getRangeAt(0).cloneRange();
+    const editor = closestEditor(range.startContainer);
+    if (!editor) return "";
+    range.setStart(editor, 0);
+    return range.toString();
+}
+
+function caretRect(): DOMRect | null {
+    const selection = window.getSelection();
+    if (!selection?.rangeCount) return null;
+    const range = selection.getRangeAt(0).cloneRange();
+    range.collapse(true);
+    const rect = range.getBoundingClientRect();
+    if (rect.width || rect.height || rect.left || rect.top) return rect;
+    // 空行/空编辑器时 range 无尺寸,退回到编辑器盒子。
+    const editor = closestEditor(range.startContainer);
+    return editor ? editor.getBoundingClientRect() : null;
+}
+
+function closestEditor(node: Node) {
+    const element = node instanceof Element ? node : node.parentElement;
+    return element?.closest("[contenteditable='true']") || null;
+}
+
+function placeCaretAtEnd(element: HTMLElement) {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+}
+
+// 按 active label(已按长度降序)把 value 文本切成「文本片段 + 命中的引用 label」。
+function parseTokens(value: string, labels: string[]): Token[] {
+    if (!labels.length) return value ? [{ type: "text", value }] : [];
+    const escaped = labels.map(escapeRegExp).join("|");
+    const pattern = new RegExp(`(${escaped})`, "g");
+    const tokens: Token[] = [];
+    let lastIndex = 0;
+    for (const match of value.matchAll(pattern)) {
+        if (match.index === undefined) continue;
+        if (match.index > lastIndex) tokens.push({ type: "text", value: value.slice(lastIndex, match.index) });
+        tokens.push({ type: "reference", label: match[0] });
+        lastIndex = match.index + match[0].length;
+    }
+    if (lastIndex < value.length) tokens.push({ type: "text", value: value.slice(lastIndex) });
+    return tokens;
+}
+
+function escapeRegExp(value: string) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function clamp(value: number, min: number, max: number) {
+    if (max < min) return min;
+    return Math.min(Math.max(value, min), max);
+}
@@ -0,0 +1,34 @@
+export function CanvasRefreshShell() {
+    return (
+        <main className="relative h-full min-h-0 overflow-hidden bg-background text-foreground">
+            <div
+                className="absolute inset-0 opacity-60"
+                style={{
+                    backgroundImage: "radial-gradient(circle, var(--border) 1px, transparent 1px)",
+                    backgroundSize: "28px 28px",
+                }}
+            />
+
+            <div className="absolute bottom-5 left-1/2 z-50 flex h-14 -translate-x-1/2 items-center gap-1 rounded-xl border px-2 shadow-lg backdrop-blur" style={{ background: "var(--background)", borderColor: "var(--border)" }} aria-hidden="true">
+                {Array.from({ length: 7 }).map((_, index) => (
+                    <div key={index} className="size-8 rounded-md bg-current opacity-10" />
+                ))}
+            </div>
+
+            <div className="absolute bottom-24 left-6 z-50 h-40 w-[240px] rounded-lg border shadow-2xl backdrop-blur-sm" style={{ background: "var(--background)", borderColor: "var(--border)" }} aria-hidden="true">
+                <div className="absolute left-7 top-7 h-5 w-12 rounded-sm bg-current opacity-10" />
+                <div className="absolute left-28 top-16 h-6 w-16 rounded-sm bg-current opacity-10" />
+                <div className="absolute bottom-7 left-16 h-8 w-20 rounded-sm bg-current opacity-10" />
+                <div className="absolute inset-5 rounded border border-current opacity-15" />
+            </div>
+
+            <div className="absolute bottom-5 left-5 z-50 flex h-14 w-[260px] items-center gap-2 rounded-xl border px-2 shadow-lg backdrop-blur" style={{ background: "var(--background)", borderColor: "var(--border)" }} aria-hidden="true">
+                <div className="size-8 rounded-md bg-current opacity-10" />
+                <div className="size-8 rounded-md bg-current opacity-10" />
+                <div className="h-1 flex-1 rounded-full bg-current opacity-10" />
+                <div className="h-4 w-10 rounded bg-current opacity-10" />
+                <div className="size-8 rounded-md bg-current opacity-10" />
+            </div>
+        </main>
+    );
+}
@@ -1,17 +1,30 @@
-import { useMemo, useState } from "react";
-import { Empty, Input, Select, Tag } from "antd";
-import { ChevronRight, FileText, Image as ImageIcon, Music2, Search, Settings2, Square, Type, Video } from "lucide-react";
+import { memo, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { App, Empty, Input, Popconfirm, Select, Spin, Tag } from "antd";
+import { useQuery } from "@tanstack/react-query";
+import { BookOpen, Check, ChevronRight, Download, Eye, FileText, Image as ImageIcon, ListChecks, Music2, Plus, Search, Settings2, Square, Trash2, Type, Video } from "lucide-react";
+import { motion } from "motion/react";

 import { canvasThemes, type CanvasTheme } from "@/lib/canvas-theme";
+import { exportCanvasNodes } from "@/lib/canvas/canvas-export";
 import { getNodeDefinition } from "@/lib/canvas/node-registry";
 import { cn } from "@/lib/utils";
+import { PromptDetailDialog } from "@/pages/prompts/components/prompt-detail-dialog";
+import { fetchSourcePrompts, personalPromptToPrompt, type Prompt } from "@/services/api/prompts";
+import { uploadMediaFile } from "@/services/file-storage";
+import { uploadImage } from "@/services/image-storage";
 import { useAssetStore, type Asset, type AssetKind } from "@/stores/use-asset-store";
+import { usePromptSourceStore } from "@/stores/use-prompt-source-store";
+import { usePromptStore } from "@/stores/use-prompt-store";
+import { CANVAS_SIDE_PANEL_MAX_WIDTH, CANVAS_SIDE_PANEL_MIN_WIDTH, CANVAS_SIDE_PANEL_MOTION_MS, useCanvasSidePanelStore } from "@/stores/use-canvas-side-panel-store";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";

 import type { InsertAssetPayload } from "./asset-picker-modal";

-type PanelTab = "canvas" | "assets";
+const PANEL_MOTION_SECONDS = CANVAS_SIDE_PANEL_MOTION_MS / 1000;
+const PANEL_EASE = [0.22, 1, 0.36, 1] as const;
+
+type PanelTab = "canvas" | "assets" | "prompts";

 type Props = {
    nodes: CanvasNodeData[];
@@ -39,22 +52,76 @@ const STATUS_COLOR: Record<string, string> = {
 export function CanvasSidePanel({ nodes, selectedNodeIds, onFocusNode, onInsertAsset }: Props) {
    const theme = canvasThemes[useThemeStore((state) => state.theme)];
    const [tab, setTab] = useState<PanelTab>("canvas");
+    const width = useCanvasSidePanelStore((state) => state.width);
+    const panelOpen = useCanvasSidePanelStore((state) => state.panelOpen);
+    const panelMounted = useCanvasSidePanelStore((state) => state.panelMounted);
+    const panelClosing = useCanvasSidePanelStore((state) => state.panelClosing);
+    const setWidth = useCanvasSidePanelStore((state) => state.setWidth);
+    const [resizing, setResizing] = useState(false);
+
+    const startResize = (event: ReactPointerEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const startX = event.clientX;
+        const startWidth = width;
+        let nextWidth = startWidth;
+        const onMove = (moveEvent: PointerEvent) => {
+            nextWidth = Math.min(CANVAS_SIDE_PANEL_MAX_WIDTH, Math.max(CANVAS_SIDE_PANEL_MIN_WIDTH, startWidth + moveEvent.clientX - startX));
+            setWidth(nextWidth);
+        };
+        const onUp = () => {
+            localStorage.setItem("canvas-side-panel-width", String(nextWidth));
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            setResizing(false);
+        };
+        setResizing(true);
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+    };
+
+    if (!panelMounted) return null;

    return (
-        <aside className="flex h-full w-[280px] shrink-0 flex-col overflow-hidden border-r" style={{ background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.node.text }} data-canvas-no-zoom>
-            <div className="flex items-center gap-1 px-3 pt-3">
-                <TabButton label="画布" active={tab === "canvas"} theme={theme} onClick={() => setTab("canvas")} />
-                <TabButton label="资产" active={tab === "assets"} theme={theme} onClick={() => setTab("assets")} />
-            </div>
-            <div className="mt-2 min-h-0 flex-1 overflow-hidden">{tab === "canvas" ? <CanvasNodesTab nodes={nodes} selectedNodeIds={selectedNodeIds} onFocusNode={onFocusNode} theme={theme} /> : <CanvasAssetsTab onInsert={onInsertAsset} theme={theme} />}</div>
-        </aside>
+        <motion.div
+            className="relative z-[60] flex h-full shrink-0"
+            initial={{ width: 0, opacity: 0 }}
+            animate={{ width: panelOpen ? width + 1 : 0, opacity: panelOpen ? 1 : 0 }}
+            transition={{ duration: resizing ? 0 : PANEL_MOTION_SECONDS, ease: PANEL_EASE }}
+            style={{ overflow: "clip", pointerEvents: panelClosing ? "none" : undefined }}
+        >
+            <motion.aside
+                className="relative flex h-full shrink-0 flex-col overflow-hidden border-r"
+                initial={{ x: -48 }}
+                animate={{ x: panelClosing ? -28 : 0 }}
+                transition={{ duration: resizing ? 0 : PANEL_MOTION_SECONDS, ease: PANEL_EASE }}
+                style={{ width, background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.node.text }}
+                data-canvas-no-zoom
+            >
+                <div className="flex items-center gap-5 px-4 pt-3.5">
+                    <TabButton label="画布" active={tab === "canvas"} theme={theme} onClick={() => setTab("canvas")} />
+                    <TabButton label="资产" active={tab === "assets"} theme={theme} onClick={() => setTab("assets")} />
+                    <TabButton label="提示词库" active={tab === "prompts"} theme={theme} onClick={() => setTab("prompts")} />
+                </div>
+                <div className="mt-2 min-h-0 flex-1 overflow-hidden">
+                    {tab === "canvas" ? (
+                        <CanvasNodesTab nodes={nodes} selectedNodeIds={selectedNodeIds} onFocusNode={onFocusNode} theme={theme} />
+                    ) : tab === "assets" ? (
+                        <CanvasAssetsTab onInsert={onInsertAsset} theme={theme} />
+                    ) : (
+                        <CanvasPromptsTab onInsert={onInsertAsset} theme={theme} />
+                    )}
+                </div>
+                <button type="button" className="absolute inset-y-0 right-0 z-40 w-4 translate-x-1/2 cursor-col-resize" onPointerDown={startResize} aria-label="调整左侧面板宽度" />
+            </motion.aside>
+        </motion.div>
    );
 }

 function TabButton({ label, active, theme, onClick }: { label: string; active: boolean; theme: CanvasTheme; onClick: () => void }) {
    return (
-        <button type="button" onClick={onClick} className={cn("rounded-lg px-3 py-1.5 text-sm font-semibold transition", active ? "" : "opacity-55 hover:opacity-90")} style={active ? { background: theme.toolbar.activeBg, color: theme.toolbar.activeText } : { color: theme.node.text }}>
+        <button type="button" onClick={onClick} className="relative pb-1.5 text-sm font-semibold transition-opacity" style={{ color: theme.node.text, opacity: active ? 1 : 0.45 }}>
            {label}
+            {active ? <motion.span layoutId="sidePanelTabIndicator" className="absolute inset-x-0 -bottom-px h-0.5 rounded-full" style={{ background: theme.toolbar.activeText }} transition={{ type: "spring", stiffness: 500, damping: 34 }} /> : null}
        </button>
    );
 }
@@ -79,20 +146,64 @@ function nodePreviewText(node: CanvasNodeData) {
 }

 function CanvasNodesTab({ nodes, selectedNodeIds, onFocusNode, theme }: { nodes: CanvasNodeData[]; selectedNodeIds: Set<string>; onFocusNode: (nodeId: string) => void; theme: CanvasTheme }) {
+    const { message } = App.useApp();
    const [keyword, setKeyword] = useState("");
    const [typeFilter, setTypeFilter] = useState<string>("all");
+    const [selectMode, setSelectMode] = useState(false);
+    const [checked, setChecked] = useState<Set<string>>(new Set());
+    const [exporting, setExporting] = useState(false);

    const filtered = useMemo(() => {
        const query = keyword.trim().toLowerCase();
        return nodes.filter((node) => (typeFilter === "all" || node.type === typeFilter) && (!query || [node.title, node.metadata?.content, node.metadata?.prompt].filter(Boolean).join(" ").toLowerCase().includes(query)));
    }, [nodes, keyword, typeFilter]);

+    const exitSelect = () => {
+        setSelectMode(false);
+        setChecked(new Set());
+    };
+    const toggleChecked = (id: string) =>
+        setChecked((prev) => {
+            const next = new Set(prev);
+            next.has(id) ? next.delete(id) : next.add(id);
+            return next;
+        });
+    const allChecked = filtered.length > 0 && filtered.every((node) => checked.has(node.id));
+    const toggleAll = () => setChecked(allChecked ? new Set() : new Set(filtered.map((node) => node.id)));
+
+    const handleExport = async () => {
+        const targets = nodes.filter((node) => checked.has(node.id));
+        if (!targets.length) return;
+        setExporting(true);
+        const hide = message.loading("正在导出选中元素…", 0);
+        try {
+            await exportCanvasNodes(targets, `画布元素-${targets.length}个`);
+            message.success(`已导出 ${targets.length} 个元素`);
+            exitSelect();
+        } catch (error) {
+            console.error(error);
+            message.error("导出失败，请重试");
+        } finally {
+            hide();
+            setExporting(false);
+        }
+    };
+
    return (
        <div className="flex h-full flex-col">
            <div className="flex items-center gap-2 px-3 pb-2.5 pt-1">
                <span className="text-xs font-medium opacity-60">画布元素</span>
                {filtered.length ? <span className="text-xs opacity-35">{filtered.length}</span> : null}
-                <Select size="small" variant="borderless" className="ml-auto w-20" value={typeFilter} onChange={setTypeFilter} options={NODE_FILTER_OPTIONS} />
+                <button
+                    type="button"
+                    onClick={() => (selectMode ? exitSelect() : setSelectMode(true))}
+                    className="ml-auto flex items-center gap-1 rounded-md px-1.5 py-1 text-xs font-medium opacity-70 transition hover:bg-black/5 hover:opacity-100 dark:hover:bg-white/10"
+                    style={selectMode ? { color: theme.toolbar.activeText, opacity: 1 } : undefined}
+                >
+                    <ListChecks className="size-3.5" />
+                    {selectMode ? "取消" : "选择"}
+                </button>
+                {selectMode ? null : <Select size="small" variant="borderless" className="w-20" value={typeFilter} onChange={setTypeFilter} options={NODE_FILTER_OPTIONS} />}
            </div>
            <div className="px-3 pb-2.5">
                <Input size="small" allowClear prefix={<Search className="size-3.5 text-stone-400" />} placeholder="搜索节点" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
@@ -103,17 +214,19 @@ function CanvasNodesTab({ nodes, selectedNodeIds, onFocusNode, theme }: { nodes:
                        {filtered.map((node) => {
                            const Icon = NODE_TYPE_ICON[node.type] || FileText;
                            const isImage = node.type === CanvasNodeType.Image && node.metadata?.content;
-                            const active = selectedNodeIds.has(node.id);
+                            const isChecked = checked.has(node.id);
+                            const active = selectMode ? isChecked : selectedNodeIds.has(node.id);
                            return (
                                <button
                                    key={node.id}
                                    type="button"
-                                    onClick={() => onFocusNode(node.id)}
+                                    onClick={() => (selectMode ? toggleChecked(node.id) : onFocusNode(node.id))}
                                    className={cn("flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition", active ? "" : "hover:bg-black/5 dark:hover:bg-white/5")}
                                    style={active ? { background: theme.toolbar.activeBg } : undefined}
                                >
-                                    <span className="grid size-10 shrink-0 place-items-center overflow-hidden rounded-md" style={{ background: theme.node.fill }}>
-                                        {isImage ? <img src={node.metadata!.content} alt={node.title} className="size-full object-cover" /> : <Icon className="size-4.5 opacity-70" />}
+                                    {selectMode ? <CheckMark checked={isChecked} theme={theme} /> : null}
+                                    <span className="grid size-10 shrink-0 place-items-center overflow-hidden rounded-md">
+                                        {isImage ? <img src={node.metadata!.content} alt={node.title} className="size-full object-cover" /> : <Icon className="size-5 opacity-60" />}
                                    </span>
                                    <span className="min-w-0 flex-1 space-y-0.5">
                                        <span className="block truncate text-sm font-medium leading-snug">{node.title || getNodeDefinition(node.type)?.title || "未命名节点"}</span>
@@ -128,10 +241,36 @@ function CanvasNodesTab({ nodes, selectedNodeIds, onFocusNode, theme }: { nodes:
                    <div className="pt-16 text-center text-sm opacity-40">画布暂无节点</div>
                )}
            </div>
+            {selectMode ? (
+                <div className="flex items-center gap-2 border-t px-3 py-2.5" style={{ borderColor: theme.toolbar.border }}>
+                    <button type="button" onClick={toggleAll} className="rounded-md px-2 py-1 text-xs font-medium opacity-70 transition hover:bg-black/5 hover:opacity-100 dark:hover:bg-white/10">
+                        {allChecked ? "取消全选" : "全选"}
+                    </button>
+                    <span className="text-xs opacity-45">已选 {checked.size}</span>
+                    <button
+                        type="button"
+                        onClick={() => void handleExport()}
+                        disabled={!checked.size || exporting}
+                        className="ml-auto flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-40 dark:hover:bg-white/10"
+                        style={{ color: theme.node.text }}
+                    >
+                        <Download className="size-3.5" />
+                        导出选中
+                    </button>
+                </div>
+            ) : null}
        </div>
    );
 }

+function CheckMark({ checked, theme }: { checked: boolean; theme: CanvasTheme }) {
+    return (
+        <span className="grid size-4 shrink-0 place-items-center rounded border transition" style={{ borderColor: checked ? theme.toolbar.activeText : theme.node.stroke, background: checked ? theme.toolbar.activeText : "transparent" }}>
+            {checked ? <Check className="size-3 text-white" /> : null}
+        </span>
+    );
+}
+
 // ---------------------------------------------------------------------------
 // 资产 Tab —— 按类型折叠分组 + 标签筛选,点击插入画布
 // ---------------------------------------------------------------------------
@@ -148,11 +287,16 @@ function buildInsertPayload(asset: Asset): InsertAssetPayload {
    return { kind: "image", dataUrl: asset.data.dataUrl, storageKey: asset.data.storageKey, title: asset.title };
 }

-function CanvasAssetsTab({ onInsert, theme }: { onInsert: (payload: InsertAssetPayload) => void; theme: CanvasTheme }) {
+const CanvasAssetsTab = memo(function CanvasAssetsTab({ onInsert, theme }: { onInsert: (payload: InsertAssetPayload) => void; theme: CanvasTheme }) {
+    const { message } = App.useApp();
    const assets = useAssetStore((state) => state.assets);
+    const addAsset = useAssetStore((state) => state.addAsset);
+    const removeAsset = useAssetStore((state) => state.removeAsset);
    const [keyword, setKeyword] = useState("");
    const [tagFilter, setTagFilter] = useState<string>("all");
    const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+    const [uploading, setUploading] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);

    const allTags = useMemo(() => Array.from(new Set(assets.flatMap((asset) => asset.tags || []))).slice(0, 20), [assets]);

@@ -163,10 +307,51 @@ function CanvasAssetsTab({ onInsert, theme }: { onInsert: (payload: InsertAssetP

    const groups = useMemo(() => ASSET_GROUPS.map((group) => ({ ...group, items: filtered.filter((asset) => asset.kind === group.kind) })).filter((group) => group.items.length > 0), [filtered]);

+    const handleFiles = async (fileList: FileList | null) => {
+        const files = Array.from(fileList || []);
+        if (!files.length) return;
+        setUploading(true);
+        const hide = message.loading("正在添加资产…", 0);
+        let added = 0;
+        try {
+            for (const file of files) {
+                if (file.type.startsWith("image/")) {
+                    const image = await uploadImage(file);
+                    addAsset({ kind: "image", title: file.name || "图片", coverUrl: image.url, tags: [], data: { dataUrl: image.url, storageKey: image.storageKey, width: image.width, height: image.height, bytes: image.bytes, mimeType: image.mimeType } });
+                    added += 1;
+                } else if (file.type.startsWith("video/")) {
+                    const media = await uploadMediaFile(file, "video");
+                    addAsset({ kind: "video", title: file.name || "视频", coverUrl: "", tags: [], data: { url: media.url, storageKey: media.storageKey, width: media.width || 0, height: media.height || 0, bytes: media.bytes, mimeType: media.mimeType } });
+                    added += 1;
+                }
+            }
+            if (added) message.success(`已添加 ${added} 个资产`);
+            else message.warning("仅支持图片或视频文件");
+        } catch (error) {
+            console.error(error);
+            message.error("添加失败，请重试");
+        } finally {
+            hide();
+            setUploading(false);
+            if (fileInputRef.current) fileInputRef.current.value = "";
+        }
+    };
+
    return (
        <div className="flex h-full flex-col">
-            <div className="px-3 pb-2">
+            <div className="flex items-center gap-2 px-3 pb-2 pt-1">
                <Input size="small" allowClear prefix={<Search className="size-3.5 text-stone-400" />} placeholder="搜索资产" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
+                <button
+                    type="button"
+                    disabled={uploading}
+                    onClick={() => fileInputRef.current?.click()}
+                    className="flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs font-semibold transition hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+                    style={{ color: theme.node.text }}
+                >
+                    <Plus className="size-3.5" />
+                    添加
+                </button>
+                <input ref={fileInputRef} type="file" accept="image/*,video/*" multiple className="hidden" onChange={(e) => void handleFiles(e.target.files)} />
            </div>
            {allTags.length ? (
                <div className="flex flex-wrap gap-1.5 px-3 pb-2">
@@ -187,7 +372,11 @@ function CanvasAssetsTab({ onInsert, theme }: { onInsert: (payload: InsertAssetP
                            const isCollapsed = collapsed[group.kind];
                            return (
                                <div key={group.kind}>
-                                    <button type="button" onClick={() => setCollapsed((prev) => ({ ...prev, [group.kind]: !prev[group.kind] }))} className="flex w-full items-center gap-1.5 rounded-md px-1.5 py-1.5 text-left text-xs font-semibold opacity-75 transition hover:opacity-100">
+                                    <button
+                                        type="button"
+                                        onClick={() => setCollapsed((prev) => ({ ...prev, [group.kind]: !prev[group.kind] }))}
+                                        className="flex w-full items-center gap-1.5 rounded-md px-1.5 py-1.5 text-left text-xs font-semibold opacity-75 transition hover:opacity-100"
+                                    >
                                        <ChevronRight className={cn("size-3.5 transition-transform", !isCollapsed && "rotate-90")} />
                                        <group.icon className="size-3.5" />
                                        <span>{group.label}</span>
@@ -196,7 +385,7 @@ function CanvasAssetsTab({ onInsert, theme }: { onInsert: (payload: InsertAssetP
                                    {isCollapsed ? null : (
                                        <div className="grid grid-cols-2 gap-2 px-1 pb-2 pt-1">
                                            {group.items.map((asset) => (
-                                                <AssetCard key={asset.id} asset={asset} theme={theme} onClick={() => onInsert(buildInsertPayload(asset))} />
+                                                <AssetCard key={asset.id} asset={asset} theme={theme} onInsert={() => onInsert(buildInsertPayload(asset))} onRemove={() => (removeAsset(asset.id), message.success("资产已移除"))} />
                                            ))}
                                        </div>
                                    )}
@@ -210,15 +399,225 @@ function CanvasAssetsTab({ onInsert, theme }: { onInsert: (payload: InsertAssetP
            </div>
        </div>
    );
-}
+});

-function AssetCard({ asset, theme, onClick }: { asset: Asset; theme: CanvasTheme; onClick: () => void }) {
-    const cover = asset.coverUrl || (asset.kind === "image" ? asset.data.dataUrl : "");
+function AssetCard({ asset, theme, onInsert, onRemove }: { asset: Asset; theme: CanvasTheme; onInsert: () => void; onRemove: () => void }) {
    return (
-        <button type="button" onClick={onClick} className="group relative overflow-hidden rounded-lg border text-left transition hover:shadow-md" style={{ borderColor: theme.node.stroke, background: theme.node.panel }}>
-            {cover ? <img src={cover} alt={asset.title} className="aspect-square w-full object-cover" /> : <div className="flex aspect-square items-center justify-center p-2 text-center text-[11px] leading-4 opacity-60">{asset.title}</div>}
-            <div className="truncate px-2 py-1.5 text-[11px] font-medium">{asset.title}</div>
-            <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-stone-950/0 text-xs font-medium text-white opacity-0 transition group-hover:bg-stone-950/55 group-hover:opacity-100">插入</div>
-        </button>
+        <div className="group relative aspect-square overflow-hidden rounded-xl border transition duration-200 hover:-translate-y-0.5 hover:shadow-lg" style={{ borderColor: theme.node.stroke, background: theme.node.panel }}>
+            <AssetCover asset={asset} />
+            <div className="absolute inset-0 flex items-center justify-center gap-2.5 opacity-0 transition duration-200 group-hover:opacity-100">
+                <button
+                    type="button"
+                    onClick={onInsert}
+                    className="grid size-8 place-items-center rounded-full bg-white/90 text-stone-700 shadow-sm backdrop-blur transition hover:bg-white hover:text-stone-900 dark:bg-black/60 dark:text-stone-100 dark:hover:bg-black/80"
+                    aria-label="插入画布"
+                >
+                    <Plus className="size-4" />
+                </button>
+                <Popconfirm title="移除该资产?" okText="移除" cancelText="取消" okButtonProps={{ danger: true }} onConfirm={onRemove}>
+                    <button
+                        type="button"
+                        className="grid size-8 place-items-center rounded-full bg-white/90 text-stone-700 shadow-sm backdrop-blur transition hover:bg-white hover:text-red-500 dark:bg-black/60 dark:text-stone-100 dark:hover:bg-black/80 dark:hover:text-red-400"
+                        aria-label="移除资产"
+                    >
+                        <Trash2 className="size-4" />
+                    </button>
+                </Popconfirm>
+            </div>
+        </div>
+    );
+}
+
+function AssetCover({ asset }: { asset: Asset }) {
+    if (asset.kind === "text") return <div className="size-full overflow-hidden whitespace-pre-wrap break-words p-2.5 text-[11px] leading-snug opacity-80">{asset.data.content}</div>;
+    if (asset.kind === "video") {
+        if (asset.coverUrl) return <img src={asset.coverUrl} alt="" className="size-full object-cover transition duration-300 group-hover:scale-[1.04]" />;
+        return <video src={`${asset.data.url}#t=0.1`} muted playsInline preload="metadata" className="size-full object-cover transition duration-300 group-hover:scale-[1.04]" />;
+    }
+    return <img src={asset.coverUrl || asset.data.dataUrl} alt="" className="size-full object-cover transition duration-300 group-hover:scale-[1.04]" />;
+}
+
+// ---------------------------------------------------------------------------
+// 提示词库 Tab —— 按来源折叠分组,展开时按需加载,点击复制 / 插入文本节点
+// ---------------------------------------------------------------------------
+
+const CanvasPromptsTab = memo(function CanvasPromptsTab({ onInsert, theme }: { onInsert: (payload: InsertAssetPayload) => void; theme: CanvasTheme }) {
+    const { message } = App.useApp();
+    const sources = usePromptSourceStore((state) => state.sources);
+    const personalPrompts = usePromptStore((state) => state.prompts);
+    const enabledSources = useMemo(() => sources.filter((source) => source.enabled), [sources]);
+    const [keyword, setKeyword] = useState("");
+    const [expanded, setExpanded] = useState<Record<string, boolean>>({ personal: true });
+    const [detail, setDetail] = useState<Prompt | null>(null);
+
+    const copyPrompt = async (prompt: string) => {
+        try {
+            await navigator.clipboard.writeText(prompt);
+            message.success("已复制提示词");
+        } catch {
+            message.error("复制失败");
+        }
+    };
+
+    return (
+        <div className="flex h-full flex-col">
+            <div className="px-3 pb-2.5 pt-1">
+                <Input size="small" allowClear prefix={<Search className="size-3.5 text-stone-400" />} placeholder="搜索提示词" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
+            </div>
+            <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-3">
+                <div className="space-y-1">
+                    <PersonalPromptGroup
+                        items={personalPrompts.map(personalPromptToPrompt)}
+                        keyword={keyword}
+                        open={!!expanded.personal}
+                        theme={theme}
+                        onToggle={() => setExpanded((prev) => ({ ...prev, personal: !prev.personal }))}
+                        onInsert={onInsert}
+                        onView={setDetail}
+                    />
+                    {enabledSources.length ? (
+                        <>
+                        {enabledSources.map((source) => (
+                            <PromptSourceGroup
+                                key={source.id}
+                                sourceId={source.id}
+                                sourceName={source.name}
+                                keyword={keyword}
+                                open={!!expanded[source.id]}
+                                theme={theme}
+                                onToggle={() => setExpanded((prev) => ({ ...prev, [source.id]: !prev[source.id] }))}
+                                onInsert={onInsert}
+                                onView={setDetail}
+                            />
+                        ))}
+                        </>
+                    ) : personalPrompts.length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无提示词" className="pt-12" /> : null}
+                </div>
+            </div>
+            <PromptDetailDialog prompt={detail} onClose={() => setDetail(null)} onCopy={(prompt) => void copyPrompt(prompt)} />
+        </div>
+    );
+});
+
+function PersonalPromptGroup({ items, keyword, open, theme, onToggle, onInsert, onView }: { items: Prompt[]; keyword: string; open: boolean; theme: CanvasTheme; onToggle: () => void; onInsert: (payload: InsertAssetPayload) => void; onView: (prompt: Prompt) => void }) {
+    const showResults = open || !!keyword.trim();
+    const filtered = useMemo(() => {
+        const query = keyword.trim().toLowerCase();
+        return query ? items.filter((item) => [item.title, item.prompt, item.description, ...item.tags].join(" ").toLowerCase().includes(query)) : items;
+    }, [items, keyword]);
+
+    return (
+        <div>
+            <button type="button" onClick={onToggle} className="flex w-full items-center gap-1.5 rounded-md px-1.5 py-1.5 text-left text-xs font-semibold opacity-75 transition hover:opacity-100">
+                <ChevronRight className={cn("size-3.5 transition-transform", showResults && "rotate-90")} />
+                <BookOpen className="size-3.5" />
+                <span className="min-w-0 flex-1 truncate">我的提示词</span>
+                <span className="opacity-50">{filtered.length}</span>
+            </button>
+            {showResults ? (
+                <div className="space-y-1.5 px-1 pb-2 pt-1">
+                    {filtered.map((item) => <PromptRow key={item.id} item={item} theme={theme} onInsert={() => onInsert({ kind: "text", content: item.prompt, title: item.title })} onView={() => onView(item)} />)}
+                    {!filtered.length ? <div className="py-4 text-center text-xs opacity-40">{keyword.trim() ? "无匹配提示词" : "还没有保存提示词"}</div> : null}
+                </div>
+            ) : null}
+        </div>
+    );
+}
+
+function PromptSourceGroup({
+    sourceId,
+    sourceName,
+    keyword,
+    open,
+    theme,
+    onToggle,
+    onInsert,
+    onView,
+}: {
+    sourceId: string;
+    sourceName: string;
+    keyword: string;
+    open: boolean;
+    theme: CanvasTheme;
+    onToggle: () => void;
+    onInsert: (payload: InsertAssetPayload) => void;
+    onView: (prompt: Prompt) => void;
+}) {
+    // 展开过一次即缓存,避免收起后重复请求;搜索命中时也需要拿到数据来计数。
+    const showResults = open || !!keyword.trim();
+    const query = useQuery({ queryKey: ["side-panel-prompts", sourceId], queryFn: () => fetchSourcePrompts(sourceId), enabled: showResults, staleTime: 1000 * 60 * 60 });
+
+    const filtered = useMemo(() => {
+        const items = query.data || [];
+        const q = keyword.trim().toLowerCase();
+        if (!q) return items;
+        return items.filter((item) => [item.title, item.prompt, ...item.tags].join(" ").toLowerCase().includes(q));
+    }, [query.data, keyword]);
+
+    const insertPrompt = (item: Prompt) => onInsert({ kind: "text", content: item.prompt, title: item.title });
+
+    return (
+        <div>
+            <button type="button" onClick={onToggle} className="flex w-full items-center gap-1.5 rounded-md px-1.5 py-1.5 text-left text-xs font-semibold opacity-75 transition hover:opacity-100">
+                <ChevronRight className={cn("size-3.5 transition-transform", showResults && "rotate-90")} />
+                <BookOpen className="size-3.5" />
+                <span className="min-w-0 flex-1 truncate">{sourceName}</span>
+                {showResults && query.isSuccess ? <span className="opacity-50">{filtered.length}</span> : null}
+            </button>
+            {showResults ? (
+                <div className="px-1 pb-2 pt-1">
+                    {query.isLoading ? (
+                        <div className="flex justify-center py-6">
+                            <Spin size="small" />
+                        </div>
+                    ) : query.isError ? (
+                        <button type="button" onClick={() => void query.refetch()} className="block w-full py-4 text-center text-xs text-red-500 opacity-80 transition hover:opacity-100">
+                            加载失败,点击重试
+                        </button>
+                    ) : filtered.length ? (
+                        <div className="space-y-1.5">
+                            {filtered.map((item) => (
+                                <PromptRow key={item.id} item={item} theme={theme} onInsert={() => insertPrompt(item)} onView={() => onView(item)} />
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="py-4 text-center text-xs opacity-40">{keyword.trim() ? "无匹配提示词" : "该来源暂无提示词"}</div>
+                    )}
+                </div>
+            ) : null}
+        </div>
+    );
+}
+
+function PromptRow({ item, theme, onInsert, onView }: { item: Prompt; theme: CanvasTheme; onInsert: () => void; onView: () => void }) {
+    return (
+        <div className="group relative flex items-center gap-2.5 rounded-lg px-2 py-2 transition hover:bg-black/5 dark:hover:bg-white/5">
+            {item.coverUrl ? (
+                <img src={item.coverUrl} alt="" className="size-10 shrink-0 rounded-md object-cover" loading="lazy" />
+            ) : (
+                <span className="grid size-10 shrink-0 place-items-center rounded-md" style={{ background: theme.node.panel }}>
+                    <FileText className="size-4 opacity-50" />
+                </span>
+            )}
+            <button type="button" onClick={onView} className="min-w-0 flex-1 text-left">
+                <div className="truncate text-sm font-medium leading-snug">{item.title}</div>
+                <div className="mt-0.5 truncate text-xs leading-snug opacity-50">{item.prompt}</div>
+            </button>
+            <div className="flex shrink-0 flex-col items-center gap-0.5">
+                <button type="button" onClick={onView} className="grid size-6 place-items-center rounded-md opacity-60 transition hover:bg-black/10 hover:opacity-100 dark:hover:bg-white/10" aria-label="查看详情" title="查看详情">
+                    <Eye className="size-3.5" />
+                </button>
+                <button
+                    type="button"
+                    onClick={onInsert}
+                    className="grid size-6 place-items-center rounded-md opacity-60 transition hover:bg-black/10 hover:opacity-100 dark:hover:bg-white/10"
+                    style={{ color: theme.toolbar.activeText }}
+                    aria-label="插入画布"
+                    title="插入画布"
+                >
+                    <Plus className="size-3.5" />
+                </button>
+            </div>
+        </div>
    );
 }
@@ -0,0 +1,215 @@
+import { useEffect, useRef, useState } from "react";
+import { BookOpen, Bot, Download, Home, Images, Menu, PanelLeftClose, PanelLeftOpen, Plus, Redo2, Trash2, Undo2, Upload } from "lucide-react";
+import { Button, Dropdown, Modal, Tooltip } from "antd";
+
+import { UserStatusActions } from "@/components/layout/user-status-actions";
+import { canvasThemes } from "@/lib/canvas-theme";
+import { useCanvasSidePanelStore } from "@/stores/use-canvas-side-panel-store";
+import { useThemeStore } from "@/stores/use-theme-store";
+import { DOCS_URL } from "@/constant/env";
+
+export function CanvasTopBar({
+    title,
+    titleDraft,
+    isTitleEditing,
+    onTitleDraftChange,
+    onStartTitleEditing,
+    onFinishTitleEditing,
+    onCancelTitleEditing,
+    canUndo,
+    canRedo,
+    onHome,
+    onProjects,
+    onCreateProject,
+    onDeleteProject,
+    onExportProject,
+    onImportImage,
+    onOpenPlugins,
+    onUndo,
+    onRedo,
+    agentOpen,
+    compactAgentStatus,
+    onToggleAgent,
+}: {
+    title: string;
+    titleDraft: string;
+    isTitleEditing: boolean;
+    onTitleDraftChange: (value: string) => void;
+    onStartTitleEditing: () => void;
+    onFinishTitleEditing: () => void;
+    onCancelTitleEditing: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    onHome: () => void;
+    onProjects: () => void;
+    onCreateProject: () => void;
+    onDeleteProject: () => void;
+    onExportProject: () => void;
+    onImportImage: () => void;
+    onOpenPlugins: () => void;
+    onUndo: () => void;
+    onRedo: () => void;
+    agentOpen: boolean;
+    compactAgentStatus: { connected: boolean; enabled: boolean; activity: string };
+    onToggleAgent: () => void;
+}) {
+    const colorTheme = useThemeStore((state) => state.theme);
+    const theme = canvasThemes[colorTheme];
+    const titleRef = useRef<HTMLDivElement>(null);
+    const [shortcutsOpen, setShortcutsOpen] = useState(false);
+    const sidePanelOpen = useCanvasSidePanelStore((state) => state.panelOpen);
+    const toggleSidePanel = useCanvasSidePanelStore((state) => state.togglePanel);
+
+    useEffect(() => {
+        if (!isTitleEditing) return;
+        const close = (event: PointerEvent) => {
+            if (!titleRef.current?.contains(event.target as Node)) onFinishTitleEditing();
+        };
+        document.addEventListener("pointerdown", close, true);
+        return () => document.removeEventListener("pointerdown", close, true);
+    }, [isTitleEditing, onFinishTitleEditing]);
+
+    return (
+        <>
+            <div className="pointer-events-none absolute left-0 right-0 top-0 z-50 flex h-16 items-center justify-between pl-1 pr-4">
+                <div className="pointer-events-auto flex min-w-0 items-center gap-2">
+                    <Tooltip title={sidePanelOpen ? "收起面板" : "展开面板"}>
+                        <button
+                            type="button"
+                            onClick={toggleSidePanel}
+                            aria-label={sidePanelOpen ? "收起面板" : "展开面板"}
+                            className="grid size-7 place-items-center rounded-full transition hover:bg-black/5 dark:hover:bg-white/10"
+                            style={{ color: theme.node.text }}
+                        >
+                            {sidePanelOpen ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
+                        </button>
+                    </Tooltip>
+                    <Dropdown
+                        trigger={["click"]}
+                        menu={{
+                            items: [
+                                { key: "home", icon: <Home className="size-4" />, label: "主页", onClick: onHome },
+                                { key: "docs", icon: <BookOpen className="size-4" />, label: "文档", onClick: () => window.open(DOCS_URL, "_blank", "noopener,noreferrer") },
+                                { key: "projects", icon: <Images className="size-4" />, label: "我的画布", onClick: onProjects },
+                                { type: "divider" },
+                                { key: "new", icon: <Plus className="size-4" />, label: "新建画布", onClick: onCreateProject },
+                                { key: "delete", danger: true, icon: <Trash2 className="size-4" />, label: "删除当前画布", onClick: onDeleteProject },
+                                { type: "divider" },
+                                { key: "import", icon: <Upload className="size-4" />, label: "导入资产", onClick: onImportImage },
+                                { key: "export", icon: <Download className="size-4" />, label: "导出当前画布", onClick: onExportProject },
+                                { type: "divider" },
+                                { key: "undo", disabled: !canUndo, icon: <Undo2 className="size-4" />, label: <MenuLabel text="撤销" shortcut="⌘ Z" />, onClick: onUndo },
+                                { key: "redo", disabled: !canRedo, icon: <Redo2 className="size-4" />, label: <MenuLabel text="重做" shortcut="⌘ ⇧ Z / ⌘ Y" />, onClick: onRedo },
+                            ],
+                        }}
+                    >
+                        <button type="button" className="grid size-7 place-items-center rounded-full transition hover:bg-black/5 dark:hover:bg-white/10" style={{ color: theme.node.text }} aria-label="打开画布菜单">
+                            <Menu className="size-4" />
+                        </button>
+                    </Dropdown>
+
+                    <div ref={titleRef} className="flex min-w-0 items-center gap-2">
+                        {isTitleEditing ? (
+                            <input
+                                autoFocus
+                                value={titleDraft}
+                                onChange={(event) => onTitleDraftChange(event.target.value)}
+                                onBlur={onFinishTitleEditing}
+                                onKeyDown={(event) => {
+                                    if (event.key === "Enter") onFinishTitleEditing();
+                                    if (event.key === "Escape") onCancelTitleEditing();
+                                }}
+                                className="max-w-[280px] bg-transparent p-0 text-left text-lg font-semibold tracking-normal outline-none"
+                                style={{ color: theme.node.text }}
+                            />
+                        ) : (
+                            <button
+                                type="button"
+                                className="max-w-[280px] truncate border-b border-dashed border-transparent text-left text-lg font-semibold tracking-normal transition hover:border-current"
+                                onDoubleClick={onStartTitleEditing}
+                                title="双击修改画布名称"
+                            >
+                                {title}
+                            </button>
+                        )}
+                    </div>
+                    <CompactAgentStatus status={compactAgentStatus} onClick={onToggleAgent} />
+                </div>
+
+                <div className="pointer-events-auto flex items-center gap-1.5">
+                    <UserStatusActions variant="canvas" onOpenShortcuts={() => setShortcutsOpen(true)} onOpenPlugins={onOpenPlugins} />
+                    <span className="h-6 w-px" style={{ background: theme.toolbar.border }} />
+                    <Button
+                        type="text"
+                        className="!h-10 !rounded-xl !px-3 !font-medium"
+                        style={{ background: agentOpen ? theme.toolbar.activeBg : theme.toolbar.panel, color: theme.node.text, boxShadow: "0 10px 30px rgba(28,25,23,.10)" }}
+                        icon={<Bot className="size-4" />}
+                        onClick={onToggleAgent}
+                    >
+                        Agent
+                    </Button>
+                </div>
+            </div>
+            <Modal title="快捷键" open={shortcutsOpen} onCancel={() => setShortcutsOpen(false)} footer={null} centered>
+                <div className="space-y-2 border-t pt-4 text-sm" style={{ borderColor: theme.node.stroke }}>
+                    <Shortcut keys={["拖动画布"]} value="平移视图" />
+                    <Shortcut keys={["滚轮"]} value="缩放画布" />
+                    <Shortcut keys={["缩放滑杆"]} value="精确调整缩放" />
+                    <Shortcut keys={["Ctrl / Cmd", "拖动"]} value="框选多个节点" />
+                    <Shortcut keys={["Shift / Ctrl / Cmd", "点击"]} value="追加选择节点" />
+                    <Shortcut keys={["Ctrl / Cmd", "A"]} value="全选节点" />
+                    <Shortcut keys={["Ctrl / Cmd", "C / V"]} value="复制 / 粘贴节点，或粘贴剪切板文本/图片" />
+                    <Shortcut keys={["Ctrl / Cmd", "Z"]} value="撤销" />
+                    <Shortcut keys={["Ctrl / Cmd", "Shift", "Z"]} value="重做" />
+                    <Shortcut keys={["Ctrl / Cmd", "Y"]} value="重做" />
+                    <Shortcut keys={["Delete / Backspace"]} value="删除选中" />
+                    <Shortcut keys={["Esc"]} value="取消选择并关闭浮层" />
+                    <Shortcut keys={["拖入图片/视频/音频"]} value="上传到画布" />
+                </div>
+            </Modal>
+        </>
+    );
+}
+
+function MenuLabel({ text, shortcut }: { text: string; shortcut: string }) {
+    return (
+        <span className="flex min-w-36 items-center justify-between gap-8">
+            <span>{text}</span>
+            <span className="text-xs opacity-45">{shortcut}</span>
+        </span>
+    );
+}
+
+function CompactAgentStatus({ status, onClick }: { status: { connected: boolean; enabled: boolean; activity: string }; onClick: () => void }) {
+    const colorTheme = useThemeStore((state) => state.theme);
+    const theme = canvasThemes[colorTheme];
+    const label = status.connected ? "Codex 已连接" : status.enabled ? `Codex ${status.activity || "连接中"}` : "Codex 未连接";
+    const dotColor = status.connected ? "#22c55e" : status.enabled ? "#f59e0b" : theme.node.muted;
+    return (
+        <button type="button" className="flex h-8 items-center gap-1.5 text-xs transition hover:opacity-75" style={{ color: status.connected ? "#16a34a" : status.enabled ? "#d97706" : theme.node.muted }} onClick={onClick} title="打开本地 Codex 面板">
+            <span className="size-2 rounded-full" style={{ background: dotColor }} />
+            <span className="max-w-[140px] truncate">{label}</span>
+        </button>
+    );
+}
+
+function Shortcut({ keys, value }: { keys: string[]; value: string }) {
+    return (
+        <div className="grid grid-cols-[minmax(0,1fr)_120px] items-center gap-6 rounded-lg px-1 py-1.5">
+            <span className="flex min-w-0 flex-wrap items-center gap-1.5">
+                {keys.map((key, index) => (
+                    <span key={`${key}-${index}`} className="flex items-center gap-1.5">
+                        {index ? <span className="text-xs opacity-35">+</span> : null}
+                        <kbd
+                            className="min-w-9 rounded-md border px-2.5 py-1.5 text-center text-xs font-medium leading-none shadow-[inset_0_-1px_0_rgba(0,0,0,.08),0_1px_2px_rgba(0,0,0,.06)]"
+                            style={{ borderColor: "rgba(120,113,108,.28)", background: "linear-gradient(#fff, rgba(245,245,244,.92))", color: "rgb(68,64,60)" }}
+                        >
+                            {key}
+                        </kbd>
+                    </span>
+                ))}
+            </span>
+            <span className="text-right text-sm opacity-55">{value}</span>
+        </div>
+    );
+}
@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+import { trackPageview } from "@/lib/analytics";
+
+// 监听 SPA 路由变化并上报 pageview。无统计配置时 trackPageview 为空操作。
+export function AnalyticsTracker() {
+    const location = useLocation();
+
+    useEffect(() => {
+        trackPageview(`${location.pathname}${location.search}`);
+    }, [location.pathname, location.search]);
+
+    return null;
+}
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";

 import { ModelPicker } from "@/components/model-picker";
 import { ChannelEditorDrawer } from "@/components/layout/channel-editor-drawer";
+import { ConfigPromptSources } from "@/components/layout/config-prompt-sources";
 import { syncAppDataToWebdav, type AppSyncDomainKey, type AppSyncProgressEvent } from "@/services/app-sync";
 import { testWebdavConnection, WEBDAV_MANIFEST_FILE_NAME } from "@/services/webdav-sync";
 import { audioFormatOptions, audioVoiceOptions, normalizeAudioSpeedValue } from "@/lib/audio-generation";
@@ -240,6 +241,11 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
                            </Form>
                        ),
                    },
+                    {
+                        key: "prompt-sources",
+                        label: "提示词来源",
+                        children: <ConfigPromptSources />,
+                    },
                    {
                        key: "webdav",
                        label: "WebDAV",
@@ -3,6 +3,7 @@ import { useEffect, useRef } from "react";
 import { App } from "antd";

 import { createModelChannel, useConfigStore } from "@/stores/use-config-store";
+import { usePromptSourceScheduler } from "@/hooks/use-prompt-source-scheduler";

 export function ClientRootInit({ children }: { children: ReactNode }) {
    const { message } = App.useApp();
@@ -11,6 +12,8 @@ export function ClientRootInit({ children }: { children: ReactNode }) {
    const config = useConfigStore((state) => state.config);
    const openConfigDialog = useConfigStore((state) => state.openConfigDialog);

+    usePromptSourceScheduler();
+
    useEffect(() => {
        if (handledConfigParams.current) return;
        const searchParams = new URLSearchParams(window.location.search);
@@ -0,0 +1,155 @@
+import { App, Button, Select, Switch, Tag } from "antd";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Eye, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { useState } from "react";
+
+import { PromptSourceEditorDrawer } from "./prompt-source-editor-drawer";
+import { PromptSourceContentModal } from "./prompt-source-content-modal";
+import { fetchPromptSourceStatuses, refreshAllSources, refreshSource } from "@/services/api/prompts";
+import { PROMPT_SOURCE_INTERVAL_OPTIONS, usePromptSourceStore } from "@/stores/use-prompt-source-store";
+import type { PromptSource } from "@/services/api/prompt-source-presets";
+
+const STATUS_QUERY_KEY = ["prompt-source-statuses"];
+
+export function ConfigPromptSources() {
+    const { message, modal } = App.useApp();
+    const queryClient = useQueryClient();
+    const sources = usePromptSourceStore((state) => state.sources);
+    const schedule = usePromptSourceStore((state) => state.schedule);
+    const addSource = usePromptSourceStore((state) => state.addSource);
+    const saveSource = usePromptSourceStore((state) => state.saveSource);
+    const removeSource = usePromptSourceStore((state) => state.removeSource);
+    const toggleSource = usePromptSourceStore((state) => state.toggleSource);
+    const updateSchedule = usePromptSourceStore((state) => state.updateSchedule);
+    const statusQuery = useQuery({ queryKey: STATUS_QUERY_KEY, queryFn: fetchPromptSourceStatuses });
+
+    const [editingSource, setEditingSource] = useState<PromptSource | null>(null);
+    const [viewingId, setViewingId] = useState("");
+    const [refreshingId, setRefreshingId] = useState("");
+    const [refreshingAll, setRefreshingAll] = useState(false);
+    const viewingSource = sources.find((item) => item.id === viewingId) || null;
+
+    const invalidatePrompts = async () => {
+        await Promise.all([
+            queryClient.invalidateQueries({ queryKey: ["prompts"] }),
+            queryClient.invalidateQueries({ queryKey: ["side-panel-prompts"] }),
+            queryClient.invalidateQueries({ queryKey: STATUS_QUERY_KEY }),
+        ]);
+    };
+
+    const handleSave = (source: PromptSource) => {
+        saveSource(source);
+        void invalidatePrompts();
+    };
+
+    const handleDelete = (source: PromptSource) => {
+        modal.confirm({
+            title: `删除「${source.name}」？`,
+            content: "来源配置会被移除，已经保存到我的提示词的内容不受影响。",
+            okText: "删除",
+            okButtonProps: { danger: true },
+            cancelText: "取消",
+            onOk: async () => {
+                removeSource(source.id);
+                await invalidatePrompts();
+            },
+        });
+    };
+
+    const handleRefreshOne = async (source: PromptSource) => {
+        setRefreshingId(source.id);
+        try {
+            const result = await refreshSource(source.id);
+            await invalidatePrompts();
+            message.success(`「${source.name}」已更新 ${result.count} 条`);
+        } catch (error) {
+            await queryClient.invalidateQueries({ queryKey: STATUS_QUERY_KEY });
+            message.error(error instanceof Error ? error.message : "更新失败，已保留旧缓存");
+        } finally {
+            setRefreshingId("");
+        }
+    };
+
+    const handleRefreshAll = async () => {
+        setRefreshingAll(true);
+        try {
+            const result = await refreshAllSources();
+            updateSchedule("lastFetchedAt", new Date().toISOString());
+            await invalidatePrompts();
+            if (result.failureCount) message.warning(`更新完成：${result.successCount} 个成功，${result.failureCount} 个失败，失败来源已保留旧缓存`);
+            else message.success(`已更新 ${result.successCount} 个来源，共 ${result.total} 条`);
+        } catch (error) {
+            message.error(error instanceof Error ? error.message : "更新失败");
+        } finally {
+            setRefreshingAll(false);
+        }
+    };
+
+    return (
+        <div>
+            <div className="mb-4 flex flex-wrap items-center justify-end gap-3">
+                <Button type="primary" icon={<Plus className="size-4" />} onClick={() => setEditingSource(addSource())}>
+                    新增来源
+                </Button>
+            </div>
+
+            <div className="space-y-2">
+                {sources.map((source) => {
+                    const status = statusQuery.data?.[source.id];
+                    return (
+                        <div key={source.id} className="flex flex-wrap items-center gap-3 rounded-lg border border-stone-200 px-4 py-3 dark:border-stone-800">
+                            <Switch size="small" checked={source.enabled} onChange={(checked) => { toggleSource(source.id, checked); void invalidatePrompts(); }} />
+                            <div className="min-w-[220px] flex-1">
+                                <div className="flex min-w-0 items-center gap-2">
+                                    <span className="truncate text-sm font-semibold">{source.name}</span>
+                                    {source.builtIn ? <Tag className="m-0 shrink-0 text-[10px]">内置</Tag> : null}
+                                </div>
+                                <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs text-stone-500">
+                                    <a className="max-w-full truncate hover:text-stone-800 hover:underline dark:hover:text-stone-200" href={source.homepage || source.url} target="_blank" rel="noreferrer">
+                                        {source.homepage || source.url}
+                                    </a>
+                                    <span className="tabular-nums">{status?.count ?? 0} 条</span>
+                                    {status?.lastError ? <Tag color="error" className="m-0 text-[10px]" title={status.lastError}>失败</Tag> : status?.lastSuccessAt ? <Tag color="success" className="m-0 text-[10px]">正常</Tag> : <Tag className="m-0 text-[10px]">未同步</Tag>}
+                                    <span>{status?.lastSuccessAt ? `上次成功 ${formatTime(status.lastSuccessAt)}` : "尚未拉取"}</span>
+                                </div>
+                            </div>
+                            <div className="ml-auto flex flex-wrap justify-end gap-2">
+                                <Button size="small" icon={<Eye className="size-3.5" />} onClick={() => setViewingId(source.id)}>
+                                    查看内容
+                                </Button>
+                                <Button size="small" icon={<RefreshCw className="size-3.5" />} loading={refreshingId === source.id} onClick={() => void handleRefreshOne(source)}>
+                                    立即拉取
+                                </Button>
+                                {!source.builtIn ? <Button size="small" icon={<Pencil className="size-3.5" />} onClick={() => setEditingSource(source)}>编辑来源</Button> : null}
+                                {!source.builtIn ? <Button size="small" danger icon={<Trash2 className="size-3.5" />} onClick={() => handleDelete(source)}>删除</Button> : null}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+
+            <section className="mt-5 rounded-lg border border-stone-200 p-4 dark:border-stone-800">
+                <div className="mb-3 text-sm font-semibold">定时拉取</div>
+                <div className="flex flex-wrap items-center gap-3">
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs text-stone-500">拉取周期</span>
+                        <Select size="small" className="w-36" value={schedule.intervalMinutes} options={PROMPT_SOURCE_INTERVAL_OPTIONS} onChange={(value) => updateSchedule("intervalMinutes", value)} />
+                    </div>
+                    <Button size="small" type="primary" icon={<RefreshCw className="size-3.5" />} loading={refreshingAll} onClick={() => void handleRefreshAll()}>
+                        全部立即拉取
+                    </Button>
+                    <span className="text-xs text-stone-500">{schedule.lastFetchedAt ? `上次拉取 ${formatTime(schedule.lastFetchedAt)}` : "尚未定时拉取"}</span>
+                </div>
+                <div className="mt-2 text-xs text-stone-400">开启周期后，页面打开期间会按周期自动拉取所有启用的来源。</div>
+            </section>
+
+            <PromptSourceEditorDrawer open={Boolean(editingSource)} source={editingSource} onSave={handleSave} onClose={() => setEditingSource(null)} />
+            <PromptSourceContentModal source={viewingSource} onClose={() => setViewingId("")} />
+        </div>
+    );
+}
+
+function formatTime(value: string) {
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? "-" : date.toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
+}
@@ -0,0 +1,130 @@
+import { App, Button, Empty, Modal, Space, Table, Tag } from "antd";
+import { Copy, FolderPlus, RefreshCw } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { PromptDetailDialog } from "@/pages/prompts/components/prompt-detail-dialog";
+import { useCopyText } from "@/hooks/use-copy-text";
+import { useAssetStore } from "@/stores/use-asset-store";
+import { fetchSourcePrompts, refreshSource, type Prompt } from "@/services/api/prompts";
+import type { PromptSource } from "@/services/api/prompt-source-presets";
+
+export function PromptSourceContentModal({ source, onClose }: { source: PromptSource | null; onClose: () => void }) {
+    const { message } = App.useApp();
+    const [items, setItems] = useState<Prompt[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [detail, setDetail] = useState<Prompt | null>(null);
+    const copyText = useCopyText();
+    const addAsset = useAssetStore((state) => state.addAsset);
+
+    const load = useCallback(
+        async (force: boolean) => {
+            if (!source) return;
+            setLoading(true);
+            try {
+                setItems(force ? await refreshSourceItems(source.id) : await fetchSourcePrompts(source.id));
+            } catch (error) {
+                message.error(error instanceof Error ? error.message : "拉取提示词失败");
+            } finally {
+                setLoading(false);
+            }
+        },
+        [source, message],
+    );
+
+    useEffect(() => {
+        if (source) void load(false);
+        else setItems([]);
+    }, [source, load]);
+
+    const saveAsset = (item: Prompt) => {
+        addAsset({ kind: "text", title: item.title, coverUrl: item.coverUrl, tags: item.tags, source: item.category, data: { content: item.prompt }, metadata: { source: "prompt-library", promptId: item.id, githubUrl: item.githubUrl } });
+        message.success("已加入我的资产");
+    };
+
+    return (
+        <>
+            <Modal
+                open={Boolean(source)}
+                onCancel={onClose}
+                width={980}
+                footer={null}
+                title={
+                    <div className="flex flex-wrap items-center justify-between gap-2 pr-6">
+                        <div>
+                            <div className="text-base font-semibold">{source?.name || ""} · 提示词内容</div>
+                            <div className="mt-0.5 text-xs font-normal text-stone-500">共 {items.length} 条</div>
+                        </div>
+                        <Button size="small" icon={<RefreshCw className="size-3.5" />} loading={loading} onClick={() => void load(true)}>
+                            立即更新
+                        </Button>
+                    </div>
+                }
+            >
+                <Table<Prompt>
+                    rowKey="id"
+                    size="small"
+                    loading={loading}
+                    dataSource={items}
+                    pagination={{ pageSize: 10, showSizeChanger: false, size: "small" }}
+                    scroll={{ y: "56vh" }}
+                    locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无提示词" /> }}
+                    columns={[
+                        {
+                            title: "封面",
+                            dataIndex: "coverUrl",
+                            width: 72,
+                            render: (coverUrl: string) => (coverUrl ? <img src={coverUrl} alt="" className="size-12 rounded object-cover" /> : <div className="size-12 rounded bg-stone-100 dark:bg-stone-800" />),
+                        },
+                        {
+                            title: "标题",
+                            dataIndex: "title",
+                            render: (title: string, item) => (
+                                <div className="min-w-0">
+                                    <div className="truncate font-medium">{title}</div>
+                                    <div className="mt-0.5 line-clamp-2 text-xs text-stone-500">{item.prompt}</div>
+                                </div>
+                            ),
+                        },
+                        {
+                            title: "标签",
+                            dataIndex: "tags",
+                            width: 200,
+                            render: (tags: string[]) => (
+                                <div className="flex flex-wrap gap-1">
+                                    {tags.slice(0, 4).map((tag) => (
+                                        <Tag key={tag} className="m-0">
+                                            {tag}
+                                        </Tag>
+                                    ))}
+                                </div>
+                            ),
+                        },
+                        {
+                            title: "操作",
+                            width: 210,
+                            render: (_, item) => (
+                                <Space size={4} wrap>
+                                    <Button size="small" type="text" icon={<Copy className="size-3.5" />} onClick={() => copyText(item.prompt, "提示词已复制")}>
+                                        复制
+                                    </Button>
+                                    <Button size="small" type="text" onClick={() => setDetail(item)}>
+                                        详情
+                                    </Button>
+                                    <Button size="small" type="text" icon={<FolderPlus className="size-3.5" />} onClick={() => saveAsset(item)}>
+                                        加入资产
+                                    </Button>
+                                </Space>
+                            ),
+                        },
+                    ]}
+                />
+            </Modal>
+            <PromptDetailDialog prompt={detail} onClose={() => setDetail(null)} onCopy={(prompt) => copyText(prompt, "提示词已复制")} onSaveAsset={saveAsset} />
+        </>
+    );
+}
+
+async function refreshSourceItems(sourceId: string) {
+    await refreshSource(sourceId);
+    return fetchSourcePrompts(sourceId);
+}
@@ -0,0 +1,86 @@
+import { App, Button, Drawer, Input, Space, Switch } from "antd";
+import { useEffect, useState } from "react";
+
+import type { PromptSource } from "@/services/api/prompt-source-presets";
+
+export function PromptSourceEditorDrawer({ open, source, onSave, onClose }: { open: boolean; source: PromptSource | null; onSave: (source: PromptSource) => void; onClose: () => void }) {
+    const { message } = App.useApp();
+    const [draft, setDraft] = useState<PromptSource | null>(source);
+
+    useEffect(() => {
+        if (open && source) setDraft(source);
+    }, [open, source]);
+
+    if (!draft) return null;
+
+    const patch = (value: Partial<PromptSource>) => setDraft((current) => (current ? { ...current, ...value } : current));
+
+    const save = () => {
+        const name = draft.name.trim();
+        const url = draft.url.trim();
+        if (!name) return message.warning("请输入来源名称");
+        if (!isHttpUrl(url)) return message.warning("请输入有效的 JSON URL");
+        if (draft.homepage.trim() && !isHttpUrl(draft.homepage.trim())) return message.warning("请输入有效的主页地址");
+        onSave({ ...draft, name, url, homepage: draft.homepage.trim(), builtIn: false });
+        onClose();
+    };
+
+    return (
+        <Drawer
+            open={open}
+            width={560}
+            title={source?.name === "新来源" ? "新增提示词来源" : "编辑提示词来源"}
+            onClose={onClose}
+            styles={{ body: { paddingTop: 16 } }}
+            extra={
+                <Space>
+                    <Button onClick={onClose}>取消</Button>
+                    <Button type="primary" onClick={save}>
+                        保存
+                    </Button>
+                </Space>
+            }
+        >
+            <div className="space-y-5">
+                <label className="block">
+                    <span className="mb-1.5 block text-sm font-medium">来源名称</span>
+                    <Input value={draft.name} onChange={(event) => patch({ name: event.target.value })} placeholder="用于分类展示" />
+                </label>
+                <label className="block">
+                    <span className="mb-1.5 block text-sm font-medium">JSON URL</span>
+                    <Input value={draft.url} onChange={(event) => patch({ url: event.target.value })} placeholder="https://example.com/prompts.json" />
+                </label>
+                <label className="block">
+                    <span className="mb-1.5 block text-sm font-medium">来源主页（可选）</span>
+                    <Input value={draft.homepage} onChange={(event) => patch({ homepage: event.target.value })} placeholder="https://example.com" />
+                </label>
+                <div className="flex items-center justify-between border-y border-stone-200 py-3 dark:border-stone-800">
+                    <span className="text-sm font-medium">启用来源</span>
+                    <Switch checked={draft.enabled} onChange={(enabled) => patch({ enabled })} />
+                </div>
+                <div>
+                    <div className="mb-2 text-sm font-medium">JSON 格式</div>
+                    <pre className="overflow-x-auto rounded-md bg-stone-100 p-3 text-xs leading-5 text-stone-600 dark:bg-stone-900 dark:text-stone-300">{`[
+  {
+    "id": "product-photo-1",
+    "title": "白底商品图",
+    "prompt": "生成专业白底商品摄影图",
+    "description": "",
+    "coverUrl": "",
+    "referenceImageUrls": [],
+    "tags": ["商品", "摄影"]
+  }
+]`}</pre>
+                </div>
+            </div>
+        </Drawer>
+    );
+}
+
+function isHttpUrl(value: string) {
+    try {
+        return ["http:", "https:"].includes(new URL(value).protocol);
+    } catch {
+        return false;
+    }
+}
@@ -1,4 +1,4 @@
-import { Copy } from "lucide-react";
+import { Copy, FileText } from "lucide-react";
 import type { ReactNode } from "react";
 import { Button, Card, Tag } from "antd";

@@ -28,7 +28,7 @@ export function PromptCard({
            styles={{ body: { padding: 0 } }}
            cover={
                <button type="button" className="block w-full text-left" onClick={onOpen}>
-                    <img src={item.coverUrl} alt={item.title} className="aspect-[4/3] w-full object-cover" />
+                    {item.coverUrl ? <img src={item.coverUrl} alt={item.title} className="aspect-[4/3] w-full object-cover" loading="lazy" /> : <span className="grid aspect-[4/3] w-full place-items-center bg-stone-100 text-stone-400 dark:bg-stone-900 dark:text-stone-600"><FileText className="size-8" /></span>}
                </button>
            }
        >
@@ -38,7 +38,7 @@ export function PromptCard({
                        <h2 className="line-clamp-1 text-sm font-semibold text-stone-950 dark:text-stone-100">{item.title}</h2>
                        <span className="shrink-0 text-xs text-stone-400 dark:text-stone-500">{formatPromptDate(item.updatedAt)}</span>
                    </div>
-                    <p className="mt-2 line-clamp-3 text-xs leading-5 text-stone-600 dark:text-stone-400">{item.prompt}</p>
+                    <p className="mt-2 line-clamp-3 text-xs leading-5 text-stone-600 dark:text-stone-400">{item.description || item.prompt}</p>
                    <div className="mt-3 flex flex-wrap gap-1.5">
                        {item.tags.map((tag) => (
                            <Tag key={tag} className="m-0 text-[11px]">
@@ -12,7 +12,7 @@ export function PromptSelectDialog({ open, onOpenChange, onSelect }: { open: boo
    const [keyword, setKeyword] = useState("");
    const [selectedTags, setSelectedTags] = useState<string[]>([]);
    const [selectedCategory, setSelectedCategory] = useState(ALL_PROMPTS_OPTION);
-    const { query, items, tags: promptTags, categories: promptCategories } = usePromptList({ keyword, tags: selectedTags, category: selectedCategory, enabled: open });
+    const { query, items, tags: promptTags, categories: promptCategories } = usePromptList({ keyword, tags: selectedTags, category: selectedCategory, enabled: open, includePersonal: true });
    const toggleTag = (tag: string) => {
        if (tag === ALL_PROMPTS_OPTION) return setSelectedTags([]);
        setSelectedTags((items) => (items.includes(tag) ? items.filter((item) => item !== tag) : [...items, tag]));
@@ -5,10 +5,10 @@ import { ALL_PROMPTS_OPTION, fetchPrompts } from "@/services/api/prompts";

 export const PROMPT_PAGE_SIZE = 20;

-export function usePromptList({ keyword, tags, category, enabled = true }: { keyword: string; tags: string[]; category: string; enabled?: boolean }) {
+export function usePromptList({ keyword, tags, category, enabled = true, includePersonal = false }: { keyword: string; tags: string[]; category: string; enabled?: boolean; includePersonal?: boolean }) {
    const query = useInfiniteQuery({
-        queryKey: ["prompts", keyword, tags, category],
-        queryFn: ({ pageParam }) => fetchPrompts({ keyword, tag: tags, category, page: pageParam, pageSize: PROMPT_PAGE_SIZE }),
+        queryKey: ["prompts", keyword, tags, category, includePersonal],
+        queryFn: ({ pageParam }) => fetchPrompts({ keyword, tag: tags, category, page: pageParam, pageSize: PROMPT_PAGE_SIZE, includePersonal }),
        initialPageParam: 1,
        getNextPageParam: (lastPage, pages) => (pages.reduce((total, page) => total + page.items.length, 0) < lastPage.total ? pages.length + 1 : undefined),
        enabled,
@@ -0,0 +1,30 @@
+// 运行期配置读取层。
+// 优先级：window.__RUNTIME_CONFIG__（容器启动时由 entrypoint 注入）> 构建期 VITE_ 变量 > 默认值。
+// 这样既支持「同一镜像 docker run -e 配置」，也兼容自行 build 时的构建期注入。
+//
+// 统计按「每家一个独立变量」配置：填了谁就启用谁，可同时启用多家，默认全空即关闭。
+// 仅支持 GA4 与百度：两者都只接受 ID，脚本地址由代码固定拼接，不接受任意脚本/内联 JS。
+
+type RuntimeConfig = {
+    ANALYTICS_GA4_ID?: string; // GA4 衡量 ID（G-XXXX）
+    ANALYTICS_BAIDU_ID?: string; // 百度统计站点 ID
+};
+
+declare global {
+    interface Window {
+        __RUNTIME_CONFIG__?: RuntimeConfig;
+    }
+}
+
+const runtime: RuntimeConfig = (typeof window !== "undefined" && window.__RUNTIME_CONFIG__) || {};
+
+function read(key: keyof RuntimeConfig, buildTime: string | undefined, fallback = ""): string {
+    const value = runtime[key];
+    if (typeof value === "string" && value.trim()) return value.trim();
+    if (typeof buildTime === "string" && buildTime.trim()) return buildTime.trim();
+    return fallback;
+}
+
+export const ANALYTICS_GA4_ID = read("ANALYTICS_GA4_ID", import.meta.env.VITE_ANALYTICS_GA4_ID);
+export const ANALYTICS_BAIDU_ID = read("ANALYTICS_BAIDU_ID", import.meta.env.VITE_ANALYTICS_BAIDU_ID);
+
@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { refreshDueSources } from "@/services/api/prompts";
+import { usePromptSourceStore } from "@/stores/use-prompt-source-store";
+
+const CHECK_INTERVAL_MS = 60_000;
+
+/** Periodically update only the sources whose last successful refresh is due. */
+export function usePromptSourceScheduler() {
+    const queryClient = useQueryClient();
+    const intervalMinutes = usePromptSourceStore((state) => state.schedule.intervalMinutes);
+
+    useEffect(() => {
+        if (!intervalMinutes) return;
+        let running = false;
+        const tick = async () => {
+            if (running) return;
+            const { updateSchedule } = usePromptSourceStore.getState();
+            running = true;
+            try {
+                const result = await refreshDueSources(intervalMinutes * 60_000);
+                if (!result.results.length) return;
+                updateSchedule("lastFetchedAt", new Date().toISOString());
+                await Promise.all([
+                    queryClient.invalidateQueries({ queryKey: ["prompts"] }),
+                    queryClient.invalidateQueries({ queryKey: ["side-panel-prompts"] }),
+                    queryClient.invalidateQueries({ queryKey: ["prompt-source-statuses"] }),
+                ]);
+            } catch {
+                // 单个来源的错误已写入来源状态，下一个检查周期会继续尝试。
+            } finally {
+                running = false;
+            }
+        };
+        void tick();
+        const timer = window.setInterval(() => void tick(), CHECK_INTERVAL_MS);
+        return () => window.clearInterval(timer);
+    }, [intervalMinutes, queryClient]);
+}
@@ -4,6 +4,7 @@ import { fetchPrompts } from "@/services/api/prompts";
 import { uploadImage } from "@/services/image-storage";
 import { imageAspectOptions, imageQualityOptions } from "@/components/image-settings-panel";
 import { videoResolutionOptions, videoSecondOptions, videoSizeOptions } from "@/components/video-settings-panel";
+import type { CanvasAgentSnapshot } from "@/lib/canvas/canvas-agent-ops";
 import { useCanvasStore } from "@/stores/canvas/use-canvas-store";
 import { useAssetStore } from "@/stores/use-asset-store";
 import { modelOptionLabel, modelOptionName, normalizeModelOptionValue, selectableModelsByCapability, useConfigStore } from "@/stores/use-config-store";
@@ -14,6 +15,7 @@ import { useWorkbenchAgentStore } from "@/stores/use-workbench-agent-store";

 export const SITE_TOOL_NAMES = [
    "canvas_list_projects",
+    "generation_get_status",
    "workbench_image_get_config",
    "workbench_image_generate",
    "workbench_video_get_config",
@@ -31,6 +33,7 @@ export function isSiteTool(name: string): name is SiteToolName {

 export const SITE_TOOL_LABELS: Record<SiteToolName, string> = {
    canvas_list_projects: "画布列表",
+    generation_get_status: "生成任务状态",
    workbench_image_get_config: "生图配置",
    workbench_image_generate: "生图工作台生成",
    workbench_video_get_config: "视频配置",
@@ -41,11 +44,16 @@ export const SITE_TOOL_LABELS: Record<SiteToolName, string> = {
 };

 type SiteToolInput = Record<string, unknown>;
+type SiteToolContext = { canvasSnapshot?: CanvasAgentSnapshot | null };
+type GenerationStatus = "idle" | "queued" | "running" | "succeeded" | "failed";
+type GenerationStatusItem = { id: string; source: "canvas" | "image" | "video"; status: GenerationStatus; kind?: string; title?: string; prompt?: string; projectId?: string; createdAt?: string; updatedAt?: string; successCount?: number; failCount?: number; error?: string };

-export async function runSiteTool(name: SiteToolName, input: SiteToolInput, navigate: NavigateFunction): Promise<unknown> {
+export async function runSiteTool(name: SiteToolName, input: SiteToolInput, navigate: NavigateFunction, context: SiteToolContext = {}): Promise<unknown> {
    switch (name) {
        case "canvas_list_projects":
            return listCanvasProjects(input);
+        case "generation_get_status":
+            return getGenerationStatus(input, context.canvasSnapshot);
        case "workbench_image_get_config":
            return getImageConfig();
        case "workbench_image_generate":
@@ -65,6 +73,56 @@ export async function runSiteTool(name: SiteToolName, input: SiteToolInput, navi
    }
 }

+function getGenerationStatus(input: SiteToolInput, canvasSnapshot?: CanvasAgentSnapshot | null) {
+    const scope = input.scope === "canvas" || input.scope === "image" || input.scope === "video" ? input.scope : "all";
+    const taskId = typeof input.taskId === "string" ? input.taskId : "";
+    const nodeIds = new Set(Array.isArray(input.nodeIds) ? input.nodeIds.filter((id): id is string => typeof id === "string") : []);
+    const limit = Math.max(1, Math.min(100, Math.floor(Number(input.limit)) || 20));
+    const tasks: GenerationStatusItem[] = [];
+    const includeCanvas = (scope === "all" || scope === "canvas") && (!taskId || nodeIds.size > 0);
+    const includeWorkbench = !nodeIds.size || Boolean(taskId);
+
+    if (includeCanvas && canvasSnapshot) {
+        canvasSnapshot.nodes.forEach((node) => {
+            const status = normalizeCanvasGenerationStatus(node.metadata?.status);
+            if (!status || (nodeIds.size && !nodeIds.has(node.id))) return;
+            const metadata = node.metadata || {};
+            if (!nodeIds.size && node.type !== "config" && status !== "running" && status !== "failed" && !metadata.generationMode && !metadata.generationType && !metadata.model) return;
+            tasks.push({ id: node.id, source: "canvas", status, kind: metadata.generationMode || node.type, title: node.title, prompt: compactPrompt(metadata.prompt || metadata.composerContent), projectId: canvasSnapshot.projectId, error: metadata.errorDetails });
+        });
+    }
+
+    if (includeWorkbench) {
+        useWorkbenchAgentStore.getState().tasks.forEach((task) => {
+            if ((scope === "image" || scope === "video") && task.kind !== scope) return;
+            if (scope === "canvas" || (taskId && task.id !== taskId)) return;
+            tasks.push({ ...task, source: task.kind, prompt: compactPrompt(task.prompt) });
+        });
+    }
+
+    tasks.sort((a, b) => generationStatusOrder(a.status) - generationStatusOrder(b.status) || (b.updatedAt || "").localeCompare(a.updatedAt || ""));
+    const summary: Record<GenerationStatus, number> = { idle: 0, queued: 0, running: 0, succeeded: 0, failed: 0 };
+    tasks.forEach((task) => (summary[task.status] += 1));
+    return { total: tasks.length, summary, tasks: tasks.slice(0, limit) };
+}
+
+function generationStatusOrder(status: GenerationStatus) {
+    return status === "running" ? 0 : status === "queued" ? 1 : 2;
+}
+
+function normalizeCanvasGenerationStatus(status: unknown): GenerationStatus | null {
+    if (status === "idle") return "idle";
+    if (status === "loading") return "running";
+    if (status === "success") return "succeeded";
+    if (status === "error") return "failed";
+    return null;
+}
+
+function compactPrompt(prompt: unknown) {
+    const value = typeof prompt === "string" ? prompt.trim() : "";
+    return value ? `${value.slice(0, 200)}${value.length > 200 ? "..." : ""}` : undefined;
+}
+
 function listCanvasProjects(input: SiteToolInput) {
    const { projects, hydrated } = useCanvasStore.getState();
    if (!hydrated) throw new Error("画布还在加载中，请稍后重试");
@@ -118,8 +176,8 @@ function runImageWorkbench(input: SiteToolInput, navigate: NavigateFunction) {
    const prompt = typeof input.prompt === "string" ? input.prompt : undefined;
    const run = input.run !== false;
    navigate("/image");
-    useWorkbenchAgentStore.getState().dispatchImage({ prompt, run });
-    return { ok: true, navigated: "/image", prompt, run, applied, note: run ? "已跳转生图工作台并触发生成，结果请稍后在工作台查看" : "已跳转生图工作台并填入参数，未触发生成" };
+    const taskId = useWorkbenchAgentStore.getState().dispatchImage({ prompt, run });
+    return { ok: true, navigated: "/image", prompt, run, taskId, applied, note: run ? "已跳转生图工作台并触发生成，可用 generation_get_status 查询任务" : "已跳转生图工作台并填入参数，未触发生成" };
 }

 function getVideoConfig() {
@@ -173,8 +231,8 @@ function runVideoWorkbench(input: SiteToolInput, navigate: NavigateFunction) {
    const prompt = typeof input.prompt === "string" ? input.prompt : undefined;
    const run = input.run !== false;
    navigate("/video");
-    useWorkbenchAgentStore.getState().dispatchVideo({ prompt, run });
-    return { ok: true, navigated: "/video", prompt, run, applied, note: run ? "已跳转视频创作台并触发生成，结果请稍后在工作台查看" : "已跳转视频创作台并填入参数，未触发生成" };
+    const taskId = useWorkbenchAgentStore.getState().dispatchVideo({ prompt, run });
+    return { ok: true, navigated: "/video", prompt, run, taskId, applied, note: run ? "已跳转视频创作台并触发生成，可用 generation_get_status 查询任务" : "已跳转视频创作台并填入参数，未触发生成" };
 }

 async function searchPrompts(input: SiteToolInput) {
@@ -0,0 +1,85 @@
+// 统计分析加载器：默认关闭，可同时启用多家。
+// 仅支持 GA4 与百度：两者都只接受 ID，脚本地址由代码固定拼接——
+// 不接受任意脚本 URL / 内联 JS，避免「配置项被用来在访客浏览器执行任意代码」。
+// 全空时不注入任何脚本、不发任何外部请求。这是开源项目的硬要求：
+// fork/自托管者默认零统计，官方站点仅通过环境变量注入自己的 ID（ID 不入库）。
+
+import { ANALYTICS_BAIDU_ID, ANALYTICS_GA4_ID } from "@/constant/runtime-config";
+
+type GtagFn = (...args: unknown[]) => void;
+
+declare global {
+    interface Window {
+        dataLayer?: unknown[];
+        gtag?: GtagFn;
+        _hmt?: unknown[][];
+    }
+}
+
+let initialized = false;
+// 记录实际启用了哪些统计，供路由上报时按需分发。
+const active = { ga4: false, baidu: false };
+
+function appendScript(src: string, attrs: Record<string, string> = {}) {
+    const el = document.createElement("script");
+    el.async = true;
+    el.src = src;
+    for (const [key, value] of Object.entries(attrs)) el.setAttribute(key, value);
+    document.head.appendChild(el);
+    return el;
+}
+
+function initGa4(id: string) {
+    window.dataLayer = window.dataLayer || [];
+    const gtag: GtagFn = (...args) => {
+        window.dataLayer!.push(args);
+    };
+    window.gtag = gtag;
+    appendScript(`https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(id)}`);
+    gtag("js", new Date());
+    // SPA 路由上报交给 trackPageview，这里关闭默认的自动 page_view，避免重复。
+    gtag("config", id, { send_page_view: false });
+    active.ga4 = true;
+}
+
+function initBaidu(id: string) {
+    window._hmt = window._hmt || [];
+    appendScript(`https://hm.baidu.com/hm.js?${encodeURIComponent(id)}`);
+    active.baidu = true;
+}
+
+export function initAnalytics() {
+    if (initialized || typeof window === "undefined") return;
+    initialized = true;
+
+    // 各家相互独立，逐个判断并启用；任一家出错都不影响其它家与主应用。
+    if (ANALYTICS_GA4_ID) {
+        try {
+            initGa4(ANALYTICS_GA4_ID);
+        } catch {
+            /* 忽略 */
+        }
+    }
+    if (ANALYTICS_BAIDU_ID) {
+        try {
+            initBaidu(ANALYTICS_BAIDU_ID);
+        } catch {
+            /* 忽略 */
+        }
+    }
+}
+
+// SPA 路由切换时上报页面浏览，分发给所有已启用的统计。
+export function trackPageview(path: string) {
+    try {
+        if (active.ga4 && window.gtag) {
+            window.gtag("event", "page_view", { page_path: path, page_location: window.location.href });
+        }
+        if (active.baidu && window._hmt) {
+            window._hmt.push(["_trackPageview", path]);
+        }
+    } catch {
+        /* 忽略 */
+    }
+}
+
@@ -5,6 +5,7 @@ import { getMediaBlob } from "@/services/file-storage";
 import { getImageBlob } from "@/services/image-storage";
 import type { CanvasExportAsset, CanvasExportFile } from "@/types/canvas-export";
 import type { CanvasProject } from "@/stores/canvas/use-canvas-store";
+import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";

 export async function exportCanvasProjects(projects: CanvasProject[], fileName = "无限画布") {
    const zipFiles: { name: string; data: BlobPart }[] = [];
@@ -29,6 +30,39 @@ export async function exportCanvasProjects(projects: CanvasProject[], fileName =
    saveAs(zip, `${safeFileName(fileName)}.zip`);
 }

+export async function exportCanvasNodes(nodes: CanvasNodeData[], fileName = "画布元素") {
+    const zipFiles: { name: string; data: BlobPart }[] = [];
+    const used = new Set<string>();
+    const uniqueName = (base: string, ext: string) => {
+        const safe = safeFileName(base) || "元素";
+        let name = `${safe}.${ext}`;
+        for (let i = 1; used.has(name); i += 1) name = `${safe}-${i}.${ext}`;
+        used.add(name);
+        return name;
+    };
+
+    await Promise.all(
+        nodes.map(async (node) => {
+            const title = node.title || node.type;
+            const storageKey = node.metadata?.storageKey || "";
+            if (storageKey) {
+                const blob = storageKey.startsWith("image:") ? await getImageBlob(storageKey) : await getMediaBlob(storageKey);
+                if (blob) return void zipFiles.push({ name: uniqueName(title, fileExtension(blob.type, storageKey)), data: blob });
+            }
+            if (node.type === CanvasNodeType.Text) return void zipFiles.push({ name: uniqueName(title, "txt"), data: node.metadata?.content || node.metadata?.prompt || "" });
+            const content = node.metadata?.content;
+            if (content && content.startsWith("data:")) {
+                const blob = await (await fetch(content)).blob();
+                return void zipFiles.push({ name: uniqueName(title, fileExtension(blob.type, storageKey)), data: blob });
+            }
+            zipFiles.push({ name: uniqueName(title, "json"), data: JSON.stringify(node, null, 2) });
+        }),
+    );
+
+    const zip = await createZip(zipFiles);
+    saveAs(zip, `${safeFileName(fileName)}.zip`);
+}
+
 function collectStorageKeys(value: unknown, keys = new Set<string>()) {
    if (!value || typeof value !== "object") return [...keys];
    if ("storageKey" in value && typeof value.storageKey === "string" && value.storageKey.includes(":")) keys.add(value.storageKey);
@@ -47,5 +81,8 @@ function fileExtension(mimeType: string, storageKey: string) {
    if (mimeType.includes("gif")) return "gif";
    if (mimeType.includes("mp4")) return "mp4";
    if (mimeType.includes("webm")) return "webm";
+    if (mimeType.includes("mpeg") || mimeType.includes("mp3")) return "mp3";
+    if (mimeType.includes("wav")) return "wav";
+    if (mimeType.includes("ogg")) return "ogg";
    return storageKey.startsWith("image:") ? "png" : "bin";
 }
@@ -0,0 +1,159 @@
+import { defaultConfig, type AiConfig } from "@/stores/use-config-store";
+import { resolveImageUrl, uploadImage } from "@/services/image-storage";
+import { resolveMediaUrl } from "@/services/file-storage";
+import { imageMetadata, referenceUrl } from "@/lib/canvas/canvas-node-factory";
+import type { NodeGenerationInput } from "@/components/canvas/canvas-node-generation";
+import type { CanvasNodeGenerationMode } from "@/components/canvas/canvas-node-prompt-panel";
+import type { CanvasImageAngleParams } from "@/components/canvas/canvas-node-angle-dialog";
+import type { ReferenceImage } from "@/types/image";
+import { CanvasNodeType, type CanvasAssistantSession, type CanvasConnection, type CanvasNodeData, type CanvasNodeMetadata } from "@/types/canvas";
+
+export function imageExtension(dataUrl: string) {
+    return dataUrl.match(/^data:image[/]([^;]+)/)?.[1] || dataUrl.match(/image[/]([^;]+)/)?.[1] || "png";
+}
+
+export function audioExtension(mimeType?: string) {
+    if (mimeType?.includes("wav")) return "wav";
+    if (mimeType?.includes("opus")) return "opus";
+    if (mimeType?.includes("aac")) return "aac";
+    if (mimeType?.includes("flac")) return "flac";
+    if (mimeType?.includes("pcm")) return "pcm";
+    return "mp3";
+}
+
+export function generationReferenceUrls(context: { referenceImages: ReferenceImage[]; referenceVideos: Array<{ storageKey?: string; url?: string }>; referenceAudios?: Array<{ storageKey?: string; url?: string }> }) {
+    return [
+        ...context.referenceImages.map(referenceUrl).filter((url): url is string => Boolean(url)),
+        ...context.referenceVideos.map((video) => video.storageKey || video.url).filter((url): url is string => Boolean(url)),
+        ...(context.referenceAudios || []).map((audio) => audio.storageKey || audio.url).filter((url): url is string => Boolean(url)),
+    ];
+}
+
+export async function resolveMetadataReferences(metadata: CanvasNodeMetadata) {
+    if (metadata.generationType !== "edit") return [];
+    if (!metadata.references?.length) return null;
+    const references = await Promise.all(
+        metadata.references.map(async (url, index) => {
+            const dataUrl = url.startsWith("image:") ? await resolveImageUrl(url, "") : url;
+            return dataUrl ? { id: `${index}`, name: `reference-${index}.png`, type: "image/png", dataUrl, storageKey: url.startsWith("image:") ? url : undefined } : null;
+        }),
+    );
+    return references.every(Boolean) ? (references as ReferenceImage[]) : null;
+}
+
+export async function hydrateCanvasImages(nodes: CanvasNodeData[]) {
+    return Promise.all(
+        nodes.map(async (node) => {
+            const content = node.metadata?.content;
+            if ((node.type === CanvasNodeType.Video || node.type === CanvasNodeType.Audio) && node.metadata?.storageKey) return { ...node, metadata: { ...node.metadata, content: await resolveMediaUrl(node.metadata.storageKey, content) } };
+            if (node.type !== CanvasNodeType.Image || !content) return node;
+            if (node.metadata?.storageKey) return { ...node, metadata: { ...node.metadata, content: await resolveImageUrl(node.metadata.storageKey, content) } };
+            if (!content.startsWith("data:image/")) return node;
+            return { ...node, metadata: { ...node.metadata, ...imageMetadata(await uploadImage(content)) } };
+        }),
+    );
+}
+
+export async function hydrateAssistantImages(sessions: CanvasAssistantSession[]) {
+    const hydrateItem = async <T extends { dataUrl?: string; storageKey?: string }>(item: T) => {
+        if (item.storageKey) return { ...item, dataUrl: await resolveImageUrl(item.storageKey, item.dataUrl) };
+        if (item.dataUrl?.startsWith("data:image/")) {
+            const image = await uploadImage(item.dataUrl);
+            return { ...item, dataUrl: image.url, storageKey: image.storageKey };
+        }
+        return item;
+    };
+    return Promise.all(
+        sessions.map(async (session) => ({
+            ...session,
+            messages: await Promise.all(
+                session.messages.map(async (message) => ({
+                    ...message,
+                    references: await Promise.all((message.references || []).map(hydrateItem)),
+                })),
+            ),
+        })),
+    );
+}
+
+export function getGenerationCount(count: string) {
+    return Math.max(1, Math.min(15, Math.floor(Math.abs(Number(count)) || 1)));
+}
+
+export function getInputSummary(inputs: NodeGenerationInput[]) {
+    return {
+        textCount: inputs.filter((input) => input.type === "text").length,
+        imageCount: inputs.filter((input) => input.type === "image").length,
+        videoCount: inputs.filter((input) => input.type === "video").length,
+        audioCount: inputs.filter((input) => input.type === "audio").length,
+    };
+}
+
+export function buildGenerationConfig(config: AiConfig, node: CanvasNodeData | undefined, mode: CanvasNodeGenerationMode): AiConfig {
+    const defaultModel = mode === "image" ? config.imageModel : mode === "video" ? config.videoModel : mode === "audio" ? config.audioModel : config.textModel;
+    return {
+        ...config,
+        model: node?.metadata?.model || defaultModel || (mode === "audio" ? defaultConfig.audioModel : config.model || defaultConfig.model),
+        quality: node?.metadata?.quality || config.quality || defaultConfig.quality,
+        size: node?.metadata?.size || config.size || defaultConfig.size,
+        background: node?.metadata?.background ?? config.background ?? defaultConfig.background,
+        videoSeconds: node?.metadata?.seconds || config.videoSeconds || defaultConfig.videoSeconds,
+        vquality: node?.metadata?.vquality || config.vquality || defaultConfig.vquality,
+        videoGenerateAudio: node?.metadata?.generateAudio || config.videoGenerateAudio || defaultConfig.videoGenerateAudio,
+        videoWatermark: node?.metadata?.watermark || config.videoWatermark || defaultConfig.videoWatermark,
+        audioVoice: node?.metadata?.audioVoice || config.audioVoice || defaultConfig.audioVoice,
+        audioFormat: node?.metadata?.audioFormat || config.audioFormat || defaultConfig.audioFormat,
+        audioSpeed: node?.metadata?.audioSpeed || config.audioSpeed || defaultConfig.audioSpeed,
+        audioInstructions: node?.metadata?.audioInstructions || config.audioInstructions || defaultConfig.audioInstructions,
+        count: String(node?.metadata?.count || (mode === "image" ? config.canvasImageCount || config.count : config.count) || defaultConfig.count),
+    };
+}
+
+export function resetInterruptedGeneration(nodes: CanvasNodeData[]) {
+    return nodes.map((node) => (node.metadata?.status === "loading" ? { ...node, metadata: { ...node.metadata, status: "error" as const, errorDetails: "页面刷新后生成已中断，请重新生成。" } } : node));
+}
+
+export function isGenerationCanceled(error: unknown) {
+    return error instanceof Error && (error.message === "请求已取消" || error.name === "AbortError");
+}
+
+export function findRetrySourceNode(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[]) {
+    const queue = connections.filter((connection) => connection.toNodeId === nodeId).map((connection) => connection.fromNodeId);
+    const visited = new Set<string>();
+    while (queue.length) {
+        const id = queue.shift()!;
+        if (visited.has(id)) continue;
+        visited.add(id);
+        const node = nodes.find((item) => item.id === id);
+        if (node?.type === CanvasNodeType.Config) return node;
+        connections.filter((connection) => connection.toNodeId === id).forEach((connection) => queue.push(connection.fromNodeId));
+    }
+    return null;
+}
+
+export function sourceNodeReferenceImages(node: CanvasNodeData | null) {
+    if (!node || node.type !== CanvasNodeType.Image || !node.metadata?.content) return [];
+    return [
+        {
+            id: node.id,
+            name: `${node.title || node.id}.png`,
+            type: node.metadata.mimeType || "image/png",
+            dataUrl: node.metadata.content,
+            storageKey: node.metadata.storageKey,
+        },
+    ];
+}
+
+export function isAudioFile(file: File) {
+    return file.type.startsWith("audio/") || /\.(mp3|wav)$/i.test(file.name);
+}
+
+export function buildAngleLabel(params: CanvasImageAngleParams) {
+    const horizontal = params.horizontalAngle === 0 ? "正面视角" : params.horizontalAngle > 0 ? `向右旋转 ${params.horizontalAngle} 度` : `向左旋转 ${Math.abs(params.horizontalAngle)} 度`;
+    const pitch = params.pitchAngle === 0 ? "水平视角" : params.pitchAngle > 0 ? `俯视 ${params.pitchAngle} 度` : `仰视 ${Math.abs(params.pitchAngle)} 度`;
+    return `AI 多角度：${horizontal}，${pitch}，镜头距离 ${params.cameraDistance.toFixed(1)}，${params.wideAngle ? "广角" : "标准"}镜头`;
+}
+
+export function buildAnglePrompt(params: CanvasImageAngleParams) {
+    return `基于参考图重新生成同一主体的新视角，保持主体、颜色、材质和画面风格一致，不要只做透视变形。${buildAngleLabel(params)}。`;
+}
@@ -0,0 +1,71 @@
+import { getNodeSpec, NODE_DEFAULT_SIZE } from "@/constant/canvas";
+import { nodeSizeFromRatio } from "@/lib/canvas/canvas-node-size";
+import type { AiConfig } from "@/stores/use-config-store";
+import type { UploadedImage } from "@/services/image-storage";
+import type { UploadedFile } from "@/services/file-storage";
+import type { ReferenceImage } from "@/types/image";
+import { CanvasNodeType, type CanvasImageGenerationType, type CanvasNodeData, type CanvasNodeMetadata, type CanvasNodeTypeId, type Position } from "@/types/canvas";
+
+export function createCanvasNode(type: CanvasNodeTypeId, position: Position, metadata?: CanvasNodeMetadata): CanvasNodeData {
+    const spec = getNodeSpec(type);
+    const id = `${type}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+
+    return {
+        id,
+        type,
+        title: spec.title,
+        position: {
+            x: position.x - spec.width / 2,
+            y: position.y - spec.height / 2,
+        },
+        width: spec.width,
+        height: spec.height,
+        metadata: { ...spec.metadata, ...metadata },
+    };
+}
+
+export function imageMetadata(image: UploadedImage): CanvasNodeMetadata {
+    return { content: image.url, storageKey: image.storageKey, status: "success", naturalWidth: image.width, naturalHeight: image.height, bytes: image.bytes, mimeType: image.mimeType };
+}
+
+export function videoMetadata(video: UploadedFile): CanvasNodeMetadata {
+    return { content: video.url, storageKey: video.storageKey, status: "success", naturalWidth: video.width, naturalHeight: video.height, bytes: video.bytes, mimeType: video.mimeType || "video/mp4", durationMs: video.durationMs };
+}
+
+export function audioMetadata(audio: UploadedFile): CanvasNodeMetadata {
+    return { content: audio.url, storageKey: audio.storageKey, status: "success", bytes: audio.bytes, mimeType: audio.mimeType || "audio/mpeg", durationMs: audio.durationMs };
+}
+
+export function referenceUrl(image: ReferenceImage) {
+    return image.storageKey || image.url || (!image.dataUrl.startsWith("data:") ? image.dataUrl : undefined);
+}
+
+export function buildImageGenerationMetadata(type: CanvasImageGenerationType, config: AiConfig, count: number, references: ReferenceImage[]): CanvasNodeMetadata {
+    return {
+        generationType: type,
+        model: config.model,
+        size: config.size,
+        quality: config.quality,
+        ...(config.background ? { background: config.background } : {}),
+        count,
+        references: references.map(referenceUrl).filter((url): url is string => Boolean(url)),
+    };
+}
+
+export function buildAudioGenerationMetadata(config: AiConfig): CanvasNodeMetadata {
+    return {
+        model: config.model,
+        audioVoice: config.audioVoice,
+        audioFormat: config.audioFormat,
+        audioSpeed: config.audioSpeed,
+        audioInstructions: config.audioInstructions,
+    };
+}
+
+export function applyNodeConfigPatch(node: CanvasNodeData, patch: Partial<CanvasNodeData["metadata"]>) {
+    const safePatch = patch || {};
+    const next = { ...node, metadata: { ...node.metadata, ...safePatch } };
+    const spec = node.type === CanvasNodeType.Video ? NODE_DEFAULT_SIZE[CanvasNodeType.Video] : NODE_DEFAULT_SIZE[CanvasNodeType.Image];
+    const size = typeof safePatch.size === "string" && !node.metadata?.content ? nodeSizeFromRatio(safePatch.size, spec.width, spec.height) : null;
+    return size && (node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Video) ? { ...next, ...size, position: { x: node.position.x + node.width / 2 - size.width / 2, y: node.position.y + node.height / 2 - size.height / 2 } } : next;
+}
@@ -0,0 +1,91 @@
+import { CanvasNodeType, type CanvasNodeData, type ConnectionHandle } from "@/types/canvas";
+
+export function nodeBounds(nodes: CanvasNodeData[]) {
+    return nodes.reduce(
+        (acc, node) => ({
+            left: Math.min(acc.left, node.position.x),
+            top: Math.min(acc.top, node.position.y),
+            right: Math.max(acc.right, node.position.x + node.width),
+            bottom: Math.max(acc.bottom, node.position.y + node.height),
+        }),
+        { left: Infinity, top: Infinity, right: -Infinity, bottom: -Infinity },
+    );
+}
+
+export function findGroupDropTarget(movedIds: Set<string>, nodes: CanvasNodeData[]) {
+    if (nodes.some((node) => movedIds.has(node.id) && node.type === CanvasNodeType.Group)) return null;
+    const movingNodes = nodes.filter((node) => movedIds.has(node.id) && node.type !== CanvasNodeType.Group);
+    if (!movingNodes.length) return null;
+    return (
+        [...nodes].reverse().find((group) => {
+            if (group.type !== CanvasNodeType.Group || movedIds.has(group.id)) return false;
+            return movingNodes.some((node) => {
+                const centerX = node.position.x + node.width / 2;
+                const centerY = node.position.y + node.height / 2;
+                return centerX >= group.position.x && centerX <= group.position.x + group.width && centerY >= group.position.y && centerY <= group.position.y + group.height;
+            });
+        }) || null
+    );
+}
+
+export function snapNodesIntoGroup(movedIds: Set<string>, nodes: CanvasNodeData[], group: CanvasNodeData) {
+    const movingNodes = nodes.filter((node) => movedIds.has(node.id) && node.type !== CanvasNodeType.Group);
+    if (!movingNodes.length) return nodes;
+    const pad = 24;
+    const bounds = nodeBounds(movingNodes);
+    const left = group.position.x + pad;
+    const top = group.position.y + pad;
+    const right = group.position.x + group.width - pad;
+    const bottom = group.position.y + group.height - pad;
+    const dx = bounds.right - bounds.left > right - left ? left - bounds.left : bounds.left < left ? left - bounds.left : bounds.right > right ? right - bounds.right : 0;
+    const dy = bounds.bottom - bounds.top > bottom - top ? top - bounds.top : bounds.top < top ? top - bounds.top : bounds.bottom > bottom ? bottom - bounds.bottom : 0;
+    return nodes.map((node) => {
+        if (!movedIds.has(node.id) || node.type === CanvasNodeType.Group) return node;
+        return { ...node, position: { x: node.position.x + dx, y: node.position.y + dy }, metadata: { ...node.metadata, groupId: group.id } };
+    });
+}
+
+export function findContainingGroupId(node: CanvasNodeData, nodes: CanvasNodeData[]) {
+    const centerX = node.position.x + node.width / 2;
+    const centerY = node.position.y + node.height / 2;
+    return (
+        [...nodes]
+            .reverse()
+            .find((group) => group.type === CanvasNodeType.Group && group.id !== node.id && centerX >= group.position.x && centerX <= group.position.x + group.width && centerY >= group.position.y && centerY <= group.position.y + group.height)?.id ||
+        undefined
+    );
+}
+
+export function getConnectionTargetAnchor(node: CanvasNodeData, current: ConnectionHandle) {
+    return {
+        x: current.handleType === "source" ? node.position.x : node.position.x + node.width,
+        y: node.position.y + node.height / 2,
+    };
+}
+
+export function normalizeConnection(firstNodeId: string, secondNodeId: string, nodes: CanvasNodeData[], firstHandleType: "source" | "target") {
+    const first = nodes.find((node) => node.id === firstNodeId);
+    const second = nodes.find((node) => node.id === secondNodeId);
+    if (!first || !second || first.id === second.id) return null;
+    if (first.type === CanvasNodeType.Group || second.type === CanvasNodeType.Group) return null;
+    if (first.type === CanvasNodeType.Config && second.type === CanvasNodeType.Config) return null;
+    if (second.type === CanvasNodeType.Config) return { fromNodeId: first.id, toNodeId: second.id };
+    if (first.type === CanvasNodeType.Config && firstHandleType === "target") return { fromNodeId: second.id, toNodeId: first.id };
+    if (first.type === CanvasNodeType.Config) return { fromNodeId: first.id, toNodeId: second.id };
+    return { fromNodeId: first.id, toNodeId: second.id };
+}
+
+export function isHiddenBatchChild(node: CanvasNodeData, nodes: CanvasNodeData[], collapsingBatchIds?: Set<string>) {
+    const rootId = node.metadata?.batchRootId;
+    if (!rootId) return false;
+    const root = nodes.find((item) => item.id === rootId);
+    if (root && collapsingBatchIds?.has(rootId)) return false;
+    return Boolean(root && !root.metadata?.imageBatchExpanded);
+}
+
+export function isHiddenBatchConnectionEndpoint(node: CanvasNodeData, nodes: CanvasNodeData[]) {
+    const rootId = node.metadata?.batchRootId;
+    if (!rootId) return false;
+    const root = nodes.find((item) => item.id === rootId);
+    return Boolean(root && !root.metadata?.imageBatchExpanded);
+}
@@ -16,13 +16,6 @@ export type CanvasResourceReference = {
    active: boolean;
 };

-export function buildCanvasResourceReferences(nodes: CanvasNodeData[], connections: CanvasConnection[], contextNodeId?: string | null) {
-    const contextNodes = contextNodeId ? getMentionResourceNodes(contextNodeId, nodes, connections) : [];
-    const globalReferences = labelResourceNodes(nodes.filter(isResourceNode), false);
-    const activeByNodeId = new Map(labelResourceNodes(contextNodes, true).map((reference) => [reference.nodeId, reference]));
-    return globalReferences.map((reference) => activeByNodeId.get(reference.nodeId) || reference);
-}
-
 export function buildNodeMentionReferences(node: CanvasNodeData, nodes: CanvasNodeData[], connections: CanvasConnection[]) {
    return labelResourceNodes(getMentionResourceNodes(node.id, nodes, connections), true);
 }
@@ -6,8 +6,11 @@ import "./styles/globals.css";
 import { RouterProvider } from "react-router-dom";

 import { AppProviders } from "@/components/layout/app-providers";
+import { initAnalytics } from "@/lib/analytics";
 import { router } from "@/router";

+initAnalytics();
+
 document.body.style.fontFamily = '"SF Pro Display","SF Pro Text","PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif';

 createRoot(document.getElementById("root")!).render(
@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useMemo, useState, type Dispatch, type MutableRefObject, type SetStateAction } from "react";
+
+import { useAgentStore } from "@/stores/use-agent-store";
+import { applyCanvasAgentOps, type CanvasAgentOp, type CanvasAgentSnapshot } from "@/lib/canvas/canvas-agent-ops";
+import type { CanvasNodeGenerationMode } from "@/components/canvas/canvas-node-prompt-panel";
+import type { CanvasConnection, CanvasNodeData, ContextMenuState, ViewportTransform } from "@/types/canvas";
+
+type GenerateNodeRef = MutableRefObject<((nodeId: string, mode: CanvasNodeGenerationMode, prompt: string) => Promise<void>) | null>;
+
+type AgentBridgeParams = {
+    projectId: string;
+    title: string | undefined;
+    nodes: CanvasNodeData[];
+    connections: CanvasConnection[];
+    selectedNodeIds: Set<string>;
+    viewport: ViewportTransform;
+    nodesRef: MutableRefObject<CanvasNodeData[]>;
+    connectionsRef: MutableRefObject<CanvasConnection[]>;
+    selectedNodeIdsRef: MutableRefObject<Set<string>>;
+    viewportRef: MutableRefObject<ViewportTransform>;
+    generateNodeRef: GenerateNodeRef;
+    setNodes: Dispatch<SetStateAction<CanvasNodeData[]>>;
+    setConnections: Dispatch<SetStateAction<CanvasConnection[]>>;
+    setSelectedNodeIds: Dispatch<SetStateAction<Set<string>>>;
+    setSelectedConnectionId: Dispatch<SetStateAction<string | null>>;
+    setViewport: Dispatch<SetStateAction<ViewportTransform>>;
+    setContextMenu: Dispatch<SetStateAction<ContextMenuState | null>>;
+};
+
+/**
+ * 画布与本地 Agent 的桥接：把当前画布快照与 apply/undo 能力发布到 agent store，
+ * 供本地 Codex 面板读取。除 applyAgentOps（配置节点插件宿主会用到）外均为内部实现。
+ */
+export function useAgentBridge(params: AgentBridgeParams) {
+    const { projectId, title, nodes, connections, selectedNodeIds, viewport, nodesRef, connectionsRef, selectedNodeIdsRef, viewportRef, generateNodeRef, setNodes, setConnections, setSelectedNodeIds, setSelectedConnectionId, setViewport, setContextMenu } =
+        params;
+    const setAgentCanvasContext = useAgentStore((state) => state.setCanvasContext);
+    const [agentUndoSnapshot, setAgentUndoSnapshot] = useState<CanvasAgentSnapshot | null>(null);
+    const projectTitle = title || "未命名画布";
+
+    const agentSnapshot = useMemo<CanvasAgentSnapshot>(() => ({ projectId, title: projectTitle, nodes, connections, selectedNodeIds: Array.from(selectedNodeIds), viewport }), [connections, projectTitle, nodes, projectId, selectedNodeIds, viewport]);
+    const applyAgentOps = useCallback(
+        (ops?: CanvasAgentOp[]) => {
+            const safeOps = Array.isArray(ops) ? ops.filter((op) => op?.type) : [];
+            const before = { projectId, title: projectTitle, nodes: nodesRef.current, connections: connectionsRef.current, selectedNodeIds: Array.from(selectedNodeIdsRef.current), viewport: viewportRef.current };
+            const generationOps = safeOps.filter((op): op is Extract<CanvasAgentOp, { type: "run_generation" }> => op.type === "run_generation" && Boolean(op.nodeId));
+            const next = applyCanvasAgentOps(
+                before,
+                safeOps.filter((op) => op.type !== "run_generation"),
+            );
+            nodesRef.current = next.nodes;
+            connectionsRef.current = next.connections;
+            selectedNodeIdsRef.current = new Set(next.selectedNodeIds);
+            viewportRef.current = next.viewport;
+            setAgentUndoSnapshot(before);
+            setNodes(next.nodes);
+            setConnections(next.connections);
+            setSelectedNodeIds(new Set(next.selectedNodeIds));
+            setSelectedConnectionId(null);
+            setViewport(next.viewport);
+            setContextMenu(null);
+            if (generationOps.length) {
+                queueMicrotask(() =>
+                    generationOps.forEach((op) => {
+                        const target = nodesRef.current.find((node) => node.id === op.nodeId);
+                        const prompt = op.prompt?.trim() ? op.prompt : (target?.metadata?.composerContent ?? target?.metadata?.prompt ?? "");
+                        void generateNodeRef.current?.(op.nodeId, op.mode || target?.metadata?.generationMode || "image", prompt);
+                    }),
+                );
+            }
+            return { ...next, projectId, title: projectTitle };
+        },
+        [projectTitle, projectId],
+    );
+    const undoAgentOps = useCallback(() => {
+        if (!agentUndoSnapshot) return null;
+        nodesRef.current = agentUndoSnapshot.nodes;
+        connectionsRef.current = agentUndoSnapshot.connections;
+        selectedNodeIdsRef.current = new Set(agentUndoSnapshot.selectedNodeIds);
+        viewportRef.current = agentUndoSnapshot.viewport;
+        setNodes(agentUndoSnapshot.nodes);
+        setConnections(agentUndoSnapshot.connections);
+        setSelectedNodeIds(new Set(agentUndoSnapshot.selectedNodeIds));
+        setSelectedConnectionId(null);
+        setViewport(agentUndoSnapshot.viewport);
+        setContextMenu(null);
+        setAgentUndoSnapshot(null);
+        return { ...agentUndoSnapshot, projectId, title: projectTitle };
+    }, [agentUndoSnapshot, projectTitle, projectId]);
+
+    useEffect(() => {
+        setAgentCanvasContext({ snapshot: agentSnapshot, applyOps: applyAgentOps, undoOps: undoAgentOps, canUndo: Boolean(agentUndoSnapshot) });
+        return () => setAgentCanvasContext(null);
+    }, [agentSnapshot, applyAgentOps, agentUndoSnapshot, setAgentCanvasContext, undoAgentOps]);
+
+    return { applyAgentOps };
+}
@@ -0,0 +1,144 @@
+import { useCallback, useEffect, useMemo, type Dispatch, type MutableRefObject, type SetStateAction } from "react";
+
+import { requestEdit, requestGeneration, requestImageQuestion, type AiTextMessage } from "@/services/api/image";
+import { requestVideoGeneration, storeGeneratedVideo } from "@/services/api/video";
+import { decodeChannelModel, selectableModelsByCapability, type AiConfig, type ModelCapability } from "@/stores/use-config-store";
+import { buildGenerationConfig } from "@/lib/canvas/canvas-generation-helpers";
+import { buildNodeContext } from "@/lib/canvas/plugin-node-context";
+import { getNodeDefinition } from "@/lib/canvas/node-registry";
+import { ensurePluginsLoaded } from "@/lib/canvas/plugin-loader";
+import { canvasThemes } from "@/lib/canvas-theme";
+import type { CanvasNodeToolbarItem, CanvasPluginAi, CanvasPluginHost } from "@/types/canvas-plugin";
+import type { ReferenceImage } from "@/types/image";
+import type { CanvasAgentOp } from "@/lib/canvas/canvas-agent-ops";
+import type { CanvasConnection, CanvasNodeData, ViewportTransform } from "@/types/canvas";
+
+type CanvasTheme = (typeof canvasThemes)[keyof typeof canvasThemes];
+
+type PluginHostParams = {
+    effectiveConfig: AiConfig;
+    isAiConfigReady: (config: AiConfig, model: string) => boolean;
+    openConfigDialog: (open: boolean) => void;
+    theme: CanvasTheme;
+    nodesRef: MutableRefObject<CanvasNodeData[]>;
+    connectionsRef: MutableRefObject<CanvasConnection[]>;
+    viewportRef: MutableRefObject<ViewportTransform>;
+    setNodes: Dispatch<SetStateAction<CanvasNodeData[]>>;
+    setDialogNodeId: Dispatch<SetStateAction<string | null>>;
+    applyAgentOps: (ops?: CanvasAgentOp[]) => unknown;
+};
+
+/**
+ * 插件节点宿主能力：把宿主侧的 AI 生成、画布读写、面板开关等封装成插件可调用的 host/ai 对象，
+ * 并在挂载时加载已安装的远程插件。返回给画布用于渲染插件面板与工具条。
+ */
+export function usePluginHost(params: PluginHostParams) {
+    const { effectiveConfig, isAiConfigReady, openConfigDialog, theme, nodesRef, connectionsRef, viewportRef, setNodes, setDialogNodeId, applyAgentOps } = params;
+
+    // 提供给插件节点的宿主能力(节点无关,方法接收 nodeId)
+    const pluginAi = useMemo<CanvasPluginAi>(() => {
+        // 把插件传入的参考图(dataURL 或 URL)整理成宿主生成 API 需要的 ReferenceImage[]
+        const toReferences = (refs?: string[]): ReferenceImage[] => (refs || []).filter(Boolean).map((src, index) => ({ id: `plugin-ref-${index}`, name: `ref-${index}.png`, type: "image/png", dataUrl: src }));
+        // AI 配置未就绪:弹出配置弹窗并抛错,交由插件 catch 处理
+        const ensureReady = (config: AiConfig) => {
+            if (!isAiConfigReady(config, config.model)) {
+                openConfigDialog(true);
+                throw new Error("AI 配置未就绪,请先在设置里配置模型与密钥");
+            }
+        };
+        return {
+            generateImage: async (prompt, options) => {
+                const config = { ...buildGenerationConfig(effectiveConfig, undefined, "image"), count: String(options?.count || 1), ...(options?.model ? { model: options.model } : {}), ...(options?.size ? { size: options.size } : {}) };
+                ensureReady(config);
+                const references = toReferences(options?.references);
+                const items = references.length ? await requestEdit(config, prompt, references, undefined, { signal: options?.signal }) : await requestGeneration(config, prompt, { signal: options?.signal });
+                return { images: items.map((item) => item.dataUrl) };
+            },
+            generateVideo: async (prompt, options) => {
+                const config = {
+                    ...buildGenerationConfig(effectiveConfig, undefined, "video"),
+                    ...(options?.model ? { model: options.model } : {}),
+                    ...(options?.size ? { size: options.size } : {}),
+                    ...(options?.seconds ? { videoSeconds: options.seconds } : {}),
+                };
+                ensureReady(config);
+                const file = await storeGeneratedVideo(await requestVideoGeneration(config, prompt, toReferences(options?.references), [], [], { signal: options?.signal }));
+                return { url: file.url, mimeType: file.mimeType, width: file.width, height: file.height, durationMs: file.durationMs };
+            },
+            generateText: async (prompt, options) => {
+                const config = { ...buildGenerationConfig(effectiveConfig, undefined, "text"), ...(options?.model ? { model: options.model } : {}) };
+                ensureReady(config);
+                const messages: AiTextMessage[] = [...(options?.system ? [{ role: "system" as const, content: options.system }] : []), { role: "user" as const, content: prompt }];
+                const text = await requestImageQuestion(config, messages, (delta) => options?.onDelta?.(delta), { signal: options?.signal });
+                return { text };
+            },
+            // 列出某能力下用户已配置的模型;label 取编码值中的模型名(去掉 channel 前缀)
+            listModels: (capability) => selectableModelsByCapability(effectiveConfig, capability as ModelCapability | undefined).map((value) => ({ value, label: decodeChannelModel(value)?.model || value })),
+            defaultModel: (capability) => buildGenerationConfig(effectiveConfig, undefined, capability).model,
+        };
+    }, [effectiveConfig, isAiConfigReady, openConfigDialog]);
+
+    const pluginHost = useMemo<CanvasPluginHost>(
+        () => ({
+            getNode: (id) => nodesRef.current.find((node) => node.id === id) || null,
+            getNodes: () => nodesRef.current,
+            getConnections: () => connectionsRef.current,
+            getUpstream: (nodeId) =>
+                connectionsRef.current
+                    .filter((conn) => conn.toNodeId === nodeId)
+                    .map((conn) => nodesRef.current.find((node) => node.id === conn.fromNodeId))
+                    .filter((node): node is CanvasNodeData => Boolean(node)),
+            getDownstream: (nodeId) =>
+                connectionsRef.current
+                    .filter((conn) => conn.fromNodeId === nodeId)
+                    .map((conn) => nodesRef.current.find((node) => node.id === conn.toNodeId))
+                    .filter((node): node is CanvasNodeData => Boolean(node)),
+            updateNode: (nodeId, patch) => setNodes((prev) => prev.map((node) => (node.id === nodeId ? { ...node, ...patch } : node))),
+            updateMetadata: (nodeId, patch) => setNodes((prev) => prev.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, ...patch } } : node))),
+            applyOps: (ops) => applyAgentOps(ops),
+            ai: pluginAi,
+            openPanel: (nodeId) => setDialogNodeId(nodeId),
+            closePanel: () => setDialogNodeId(null),
+        }),
+        [applyAgentOps, pluginAi],
+    );
+
+    const renderPluginPanel = useCallback(
+        (panelNode: CanvasNodeData) => {
+            const Panel = getNodeDefinition(panelNode.type)?.Panel;
+            if (!Panel) return null;
+            const ctx = buildNodeContext(pluginHost, panelNode, theme, viewportRef.current.k);
+            return <Panel ctx={ctx} onClose={() => setDialogNodeId(null)} />;
+        },
+        [pluginHost, theme],
+    );
+
+    // 组装节点悬浮工具条按钮:插件自定义 toolbar +(声明 interactionToggle 时)宿主自动注入的「交互 ⇄ 移动」开关
+    const buildNodeToolbarItems = useCallback(
+        (node: CanvasNodeData): CanvasNodeToolbarItem[] => {
+            const definition = getNodeDefinition(node.type);
+            const ctx = buildNodeContext(pluginHost, node, theme, viewportRef.current.k);
+            const custom = definition?.toolbar?.(ctx) || [];
+            // 仅在节点有内容(展示态)且非强制交互态(如编辑态)时提供「交互/移动」开关
+            if (!definition?.interactionToggle || !node.metadata?.content || definition.forceInteractive?.(node)) return custom;
+            const interactive = Boolean(node.metadata?.interactive);
+            const toggle: CanvasNodeToolbarItem = {
+                id: "node-interaction-toggle",
+                title: interactive ? "当前:交互中。点击切回「移动」——拖动可移动节点" : "当前:可移动。点击切到「交互」——可操作节点内容(如转动全景)",
+                label: interactive ? "移动" : "交互",
+                icon: interactive ? "✋" : "🖐",
+                active: interactive,
+                onClick: () => pluginHost.updateMetadata(node.id, { interactive: !interactive }),
+            };
+            return [toggle, ...custom];
+        },
+        [pluginHost, theme],
+    );
+
+    // 启动时加载已安装的远程插件
+    useEffect(() => {
+        void ensurePluginsLoaded();
+    }, []);
+
+    return { pluginHost, renderPluginPanel, buildNodeToolbarItems };
+}
@@ -92,7 +92,9 @@ export default function ImagePage() {
    const [autoRunToken, setAutoRunToken] = useState(0);
    const imageCommand = useWorkbenchAgentStore((state) => state.imageCommand);
    const clearImageCommand = useWorkbenchAgentStore((state) => state.clearImageCommand);
+    const updateAgentTask = useWorkbenchAgentStore((state) => state.updateTask);
    const processedCommandRef = useRef(0);
+    const agentTaskIdRef = useRef<string | undefined>(undefined);

    const model = effectiveConfig.imageModel || effectiveConfig.model;
    const canGenerate = Boolean(prompt.trim());
@@ -141,22 +143,30 @@ export default function ImagePage() {
    };

    const generate = async () => {
+        const agentTaskId = agentTaskIdRef.current;
+        agentTaskIdRef.current = undefined;
        const text = prompt.trim();
        if (!text) {
            message.error("请输入生图提示词");
+            if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", error: "请输入生图提示词" });
            return;
        }
        if (!isAiConfigReady(effectiveConfig, model)) {
            message.warning("请先完成配置");
            openConfigDialog(true);
+            if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", error: "生图配置不完整" });
            return;
        }

        const snapshot = buildRequestSnapshot();
-        if (!snapshot) return;
+        if (!snapshot) {
+            if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", error: "生图参数无效" });
+            return;
+        }

        setElapsedMs(0);
        setRunning(true);
+        if (agentTaskId) updateAgentTask(agentTaskId, { status: "running", error: undefined });
        setPreviewLog(null);
        setResults(Array.from({ length: generationCount }, () => ({ id: nanoid(), status: "pending" })));
        const batchStartedAt = performance.now();
@@ -169,6 +179,8 @@ export default function ImagePage() {
        const successCount = successImages.length;
        const failCount = generationCount - successCount;
        const failed = result.find((item): item is PromiseRejectedResult => item.status === "rejected");
+        const error = failed?.reason instanceof Error ? failed.reason.message : failCount ? "生成失败" : undefined;
+        if (agentTaskId) updateAgentTask(agentTaskId, { status: successCount ? "succeeded" : "failed", successCount, failCount, error: successCount ? undefined : error });

        try {
            const logImages = await Promise.all(
@@ -202,8 +214,15 @@ export default function ImagePage() {
        processedCommandRef.current = imageCommand.nonce;
        clearImageCommand();
        if (typeof imageCommand.prompt === "string") setPrompt(imageCommand.prompt);
-        if (imageCommand.run && !running) setAutoRunToken((value) => value + 1);
-    }, [imageCommand, clearImageCommand, running]);
+        if (imageCommand.run && running) {
+            if (imageCommand.taskId) updateAgentTask(imageCommand.taskId, { status: "failed", error: "生图工作台已有任务正在运行" });
+            return;
+        }
+        if (imageCommand.run) {
+            agentTaskIdRef.current = imageCommand.taskId;
+            setAutoRunToken((value) => value + 1);
+        }
+    }, [imageCommand, clearImageCommand, running, updateAgentTask]);

    useEffect(() => {
        if (!autoRunToken) return;
@@ -0,0 +1,108 @@
+import { App, Button, Input, Modal, Space } from "antd";
+import { useEffect, useState } from "react";
+
+import type { PersonalPrompt, PersonalPromptInput } from "@/stores/use-prompt-store";
+
+const EMPTY_PROMPT: PersonalPromptInput = {
+    title: "",
+    prompt: "",
+    description: "",
+    coverUrl: "",
+    referenceImageUrls: [],
+    tags: [],
+};
+
+export function MyPromptEditorDialog({ open, prompt, onSave, onClose }: { open: boolean; prompt: PersonalPrompt | null; onSave: (value: PersonalPromptInput) => void; onClose: () => void }) {
+    const { message } = App.useApp();
+    const [draft, setDraft] = useState<PersonalPromptInput>(EMPTY_PROMPT);
+    const [tags, setTags] = useState("");
+    const [referenceImages, setReferenceImages] = useState("");
+
+    useEffect(() => {
+        if (!open) return;
+        setDraft(prompt ? toInput(prompt) : EMPTY_PROMPT);
+        setTags(prompt?.tags.join(", ") || "");
+        setReferenceImages(prompt?.referenceImageUrls.join("\n") || "");
+    }, [open, prompt]);
+
+    const patch = (value: Partial<PersonalPromptInput>) => setDraft((current) => ({ ...current, ...value }));
+    const save = () => {
+        if (!draft.title.trim()) return message.warning("请输入标题");
+        if (!draft.prompt.trim()) return message.warning("请输入提示词");
+        onSave({
+            ...draft,
+            title: draft.title.trim(),
+            prompt: draft.prompt.trim(),
+            description: draft.description.trim(),
+            coverUrl: draft.coverUrl.trim(),
+            tags: splitValues(tags, /[,，\n]/),
+            referenceImageUrls: splitValues(referenceImages, /\n/),
+        });
+        onClose();
+    };
+
+    return (
+        <Modal
+            title={prompt ? "编辑提示词" : "新增提示词"}
+            open={open}
+            onCancel={onClose}
+            width={680}
+            footer={
+                <Space>
+                    <Button onClick={onClose}>取消</Button>
+                    <Button type="primary" onClick={save}>
+                        保存
+                    </Button>
+                </Space>
+            }
+        >
+            <div className="grid gap-4 pt-2">
+                <label>
+                    <span className="mb-1.5 block text-sm font-medium">标题</span>
+                    <Input value={draft.title} onChange={(event) => patch({ title: event.target.value })} placeholder="例如：白底商品图" />
+                </label>
+                <label>
+                    <span className="mb-1.5 block text-sm font-medium">提示词</span>
+                    <Input.TextArea rows={7} value={draft.prompt} onChange={(event) => patch({ prompt: event.target.value })} placeholder="输入可直接使用的提示词" />
+                </label>
+                <label>
+                    <span className="mb-1.5 block text-sm font-medium">说明（可选）</span>
+                    <Input.TextArea rows={2} value={draft.description} onChange={(event) => patch({ description: event.target.value })} />
+                </label>
+                <div className="grid gap-4 sm:grid-cols-2">
+                    <label>
+                        <span className="mb-1.5 block text-sm font-medium">封面 URL（可选）</span>
+                        <Input value={draft.coverUrl} onChange={(event) => patch({ coverUrl: event.target.value })} placeholder="https://..." />
+                    </label>
+                    <label>
+                        <span className="mb-1.5 block text-sm font-medium">标签（可选）</span>
+                        <Input value={tags} onChange={(event) => setTags(event.target.value)} placeholder="商品, 摄影" />
+                    </label>
+                </div>
+                <label>
+                    <span className="mb-1.5 block text-sm font-medium">参考图 URL（可选，每行一个）</span>
+                    <Input.TextArea rows={3} value={referenceImages} onChange={(event) => setReferenceImages(event.target.value)} placeholder={"https://...\nhttps://..."} />
+                </label>
+            </div>
+        </Modal>
+    );
+}
+
+function toInput(prompt: PersonalPrompt): PersonalPromptInput {
+    return {
+        title: prompt.title,
+        prompt: prompt.prompt,
+        description: prompt.description,
+        coverUrl: prompt.coverUrl,
+        referenceImageUrls: prompt.referenceImageUrls,
+        tags: prompt.tags,
+        imageMode: prompt.imageMode,
+        imageModel: prompt.imageModel,
+        imageSize: prompt.imageSize,
+        imageCount: prompt.imageCount,
+    };
+}
+
+function splitValues(value: string, separator: RegExp) {
+    return Array.from(new Set(value.split(separator).map((item) => item.trim()).filter(Boolean)));
+}
@@ -1,9 +1,9 @@
-import { Copy, FolderPlus } from "lucide-react";
+import { BookmarkPlus, Copy, FileText, FolderPlus } from "lucide-react";
 import { Button, Modal, Space, Tag } from "antd";

 import { formatPromptDate, type Prompt } from "@/services/api/prompts";

-export function PromptDetailDialog({ prompt, onClose, onCopy, onSaveAsset }: { prompt: Prompt | null; onClose: () => void; onCopy: (prompt: string) => void; onSaveAsset?: (prompt: Prompt) => void }) {
+export function PromptDetailDialog({ prompt, onClose, onCopy, onSaveAsset, onSavePrompt }: { prompt: Prompt | null; onClose: () => void; onCopy: (prompt: string) => void; onSaveAsset?: (prompt: Prompt) => void; onSavePrompt?: (prompt: Prompt) => void }) {
    return (
        <>
            <Modal title={prompt?.title} open={Boolean(prompt)} onCancel={onClose} footer={null} width={860}>
@@ -11,7 +11,8 @@ export function PromptDetailDialog({ prompt, onClose, onCopy, onSaveAsset }: { p
                    <>
                        <div className="grid gap-5 md:grid-cols-[300px_minmax(0,1fr)]">
                            <div className="space-y-3">
-                                <img src={prompt.coverUrl} alt={prompt.title} className="aspect-[4/3] w-full rounded-lg object-cover" />
+                                {prompt.coverUrl ? <img src={prompt.coverUrl} alt={prompt.title} className="aspect-[4/3] w-full rounded-lg object-cover" /> : <div className="grid aspect-[4/3] w-full place-items-center rounded-lg bg-stone-100 text-stone-400 dark:bg-stone-900 dark:text-stone-600"><FileText className="size-9" /></div>}
+                                {prompt.referenceImageUrls.length > 1 ? <div className="grid grid-cols-3 gap-2">{prompt.referenceImageUrls.filter((url) => url !== prompt.coverUrl).slice(0, 6).map((url) => <img key={url} src={url} alt="" className="aspect-square w-full rounded-md object-cover" loading="lazy" />)}</div> : null}
                                {prompt.preview ? <pre className="max-h-60 overflow-auto whitespace-pre-wrap rounded-lg bg-stone-100 p-3 text-xs leading-5 text-stone-600 dark:bg-stone-900 dark:text-stone-300">{prompt.preview}</pre> : null}
                            </div>
                            <div className="min-w-0">
@@ -22,10 +23,9 @@ export function PromptDetailDialog({ prompt, onClose, onCopy, onSaveAsset }: { p
                                        </Tag>
                                    ))}
                                </div>
+                                {prompt.description ? <p className="mt-4 text-sm leading-6 text-stone-500 dark:text-stone-400">{prompt.description}</p> : null}
                                <p className="mt-4 whitespace-pre-wrap text-sm leading-7 text-stone-800 dark:text-stone-300">{prompt.prompt}</p>
-                                <div className="mt-4 text-xs text-stone-500 dark:text-stone-400">
-                                    创建：{formatPromptDate(prompt.createdAt)} · 更新：{formatPromptDate(prompt.updatedAt)}
-                                </div>
+                                {prompt.createdAt || prompt.updatedAt ? <div className="mt-4 text-xs text-stone-500 dark:text-stone-400">{prompt.createdAt ? `创建：${formatPromptDate(prompt.createdAt)}` : null}{prompt.createdAt && prompt.updatedAt ? " · " : null}{prompt.updatedAt ? `更新：${formatPromptDate(prompt.updatedAt)}` : null}</div> : null}
                                <Space wrap className="mt-5">
                                    <Button type="primary" icon={<Copy className="size-4" />} onClick={() => onCopy(prompt.prompt)}>
                                        复制提示词
@@ -35,6 +35,11 @@ export function PromptDetailDialog({ prompt, onClose, onCopy, onSaveAsset }: { p
                                            加入我的资产
                                        </Button>
                                    ) : null}
+                                    {onSavePrompt ? (
+                                        <Button icon={<BookmarkPlus className="size-4" />} onClick={() => onSavePrompt(prompt)}>
+                                            保存到我的提示词
+                                        </Button>
+                                    ) : null}
                                </Space>
                            </div>
                        </div>
@@ -1,29 +1,41 @@
-import { FolderPlus, Search } from "lucide-react";
-import { type UIEvent, useEffect, useState } from "react";
-import { App, Button, Empty, Input, Spin, Tag } from "antd";
+import { BookmarkPlus, FolderPlus, Pencil, Plus, Search, Trash2 } from "lucide-react";
+import { type ReactNode, type UIEvent, useEffect, useMemo, useState } from "react";
+import { App, Button, Empty, Input, Popconfirm, Space, Spin, Tabs, Tag, Tooltip } from "antd";

 import { PromptCard } from "@/components/prompts/prompt-card";
 import { usePromptList } from "@/components/prompts/use-prompt-list";
+import { MyPromptEditorDialog } from "./components/my-prompt-editor-dialog";
 import { PromptDetailDialog } from "./components/prompt-detail-dialog";
 import { useCopyText } from "@/hooks/use-copy-text";
 import { cn } from "@/lib/utils";
 import { useAssetStore } from "@/stores/use-asset-store";
-import { ALL_PROMPTS_OPTION, type Prompt } from "@/services/api/prompts";
+import { usePromptStore, type PersonalPrompt, type PersonalPromptInput } from "@/stores/use-prompt-store";
+import { ALL_PROMPTS_OPTION, personalPromptToPrompt, type Prompt } from "@/services/api/prompts";

 export default function PromptsPage() {
    const { message } = App.useApp();
+    const [activeTab, setActiveTab] = useState("library");
    const [titleKeyword, setTitleKeyword] = useState("");
    const [selectedTags, setSelectedTags] = useState<string[]>([]);
    const [selectedCategory, setSelectedCategory] = useState(ALL_PROMPTS_OPTION);
    const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
+    const [editorOpen, setEditorOpen] = useState(false);
+    const [editingPrompt, setEditingPrompt] = useState<PersonalPrompt | null>(null);
    const addAsset = useAssetStore((state) => state.addAsset);
+    const personalPrompts = usePromptStore((state) => state.prompts);
+    const addPrompt = usePromptStore((state) => state.addPrompt);
+    const updatePrompt = usePromptStore((state) => state.updatePrompt);
+    const removePrompt = usePromptStore((state) => state.removePrompt);
    const copyText = useCopyText();
-    const { query, items: promptItems, tags: promptTags, categories: promptCategoryOptions, total: totalPrompts } = usePromptList({ keyword: titleKeyword, tags: selectedTags, category: selectedCategory });
+    const { query, items: promptItems, tags: promptTags, categories: promptCategoryOptions, total: totalPrompts } = usePromptList({ keyword: titleKeyword, tags: selectedTags, category: selectedCategory, enabled: activeTab === "library" });
+    const filteredPersonalPrompts = useMemo(() => {
+        const keyword = titleKeyword.trim().toLowerCase();
+        if (!keyword) return personalPrompts;
+        return personalPrompts.filter((item) => [item.title, item.prompt, item.description, ...item.tags].join(" ").toLowerCase().includes(keyword));
+    }, [personalPrompts, titleKeyword]);

    useEffect(() => {
-        if (query.isError) {
-            message.error(query.error instanceof Error ? query.error.message : "获取提示词失败");
-        }
+        if (query.isError) message.error(query.error instanceof Error ? query.error.message : "获取提示词失败");
    }, [message, query.error, query.isError]);

    const toggleTag = (tag: string) => {
@@ -36,91 +48,104 @@ export default function PromptsPage() {
        message.success("已加入我的资产");
    };

-    const handleListScroll = (event: UIEvent<HTMLDivElement>) => {
-        const target = event.currentTarget;
-        if (query.hasNextPage && !query.isFetchingNextPage && target.scrollTop + target.clientHeight >= target.scrollHeight - 160) {
-            void query.fetchNextPage();
-        }
+    const saveToMyPrompts = (item: Prompt) => {
+        addPrompt(toPersonalInput(item));
+        message.success("已保存到我的提示词");
    };

+    const openNewPrompt = () => {
+        setEditingPrompt(null);
+        setEditorOpen(true);
+    };
+
+    const openEditPrompt = (item: PersonalPrompt) => {
+        setEditingPrompt(item);
+        setEditorOpen(true);
+    };
+
+    const savePersonalPrompt = (input: PersonalPromptInput) => {
+        if (editingPrompt) updatePrompt(editingPrompt.id, input);
+        else addPrompt(input);
+        message.success(editingPrompt ? "提示词已更新" : "提示词已添加");
+    };
+
+    const handleListScroll = (event: UIEvent<HTMLDivElement>) => {
+        if (activeTab !== "library") return;
+        const target = event.currentTarget;
+        if (query.hasNextPage && !query.isFetchingNextPage && target.scrollTop + target.clientHeight >= target.scrollHeight - 160) void query.fetchNextPage();
+    };
+
+    const personalItems = filteredPersonalPrompts.map(personalPromptToPrompt);
+    const visibleCount = activeTab === "library" ? totalPrompts : filteredPersonalPrompts.length;
+
    return (
        <div className="flex h-full flex-col overflow-hidden bg-background text-stone-800 dark:text-stone-100">
-            <main
-                className="min-h-0 flex-1 overflow-y-auto bg-background bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] px-6 py-8 [background-size:16px_16px] dark:bg-[radial-gradient(rgba(245,245,244,.16)_1px,transparent_1px)]"
-                onScroll={handleListScroll}
-            >
-                <div className="pb-8">
-                    <div className="mx-auto max-w-5xl text-center">
-                        <h1 className="text-4xl font-semibold tracking-tight text-stone-950 dark:text-stone-100">提示词中心</h1>
-                        <p className="mt-3 text-sm text-stone-500 dark:text-stone-400">共 {totalPrompts} 条提示词，按标题、标签与分类快速查找灵感。</p>
-                    </div>
-                    {query.isLoading ? (
-                        <div className="flex h-60 items-center justify-center">
-                            <Spin />
+            <main className="min-h-0 flex-1 overflow-y-auto bg-background bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] px-6 py-8 [background-size:16px_16px] dark:bg-[radial-gradient(rgba(245,245,244,.16)_1px,transparent_1px)]" onScroll={handleListScroll}>
+                <div className="mx-auto max-w-7xl pb-8">
+                    <div className="flex flex-wrap items-end justify-between gap-4">
+                        <div>
+                            <h1 className="text-3xl font-semibold text-stone-950 dark:text-stone-100">提示词中心</h1>
+                            <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">当前共 {visibleCount} 条提示词</p>
                        </div>
-                    ) : null}
-                    {!query.isLoading ? (
-                        <>
-                            <div className="mx-auto mt-8 w-full max-w-2xl">
-                                <Input size="large" className="w-full" prefix={<Search className="size-4 text-stone-400" />} value={titleKeyword} placeholder="按标题查询" onChange={(event) => setTitleKeyword(event.target.value)} />
-                            </div>
-                            <div className="mx-auto mt-6 grid max-w-6xl gap-3 text-left">
-                                <div className="grid gap-2 sm:grid-cols-[56px_minmax(0,1fr)] sm:items-start">
-                                    <div className="pt-2 text-xs font-medium text-stone-500 dark:text-stone-400">分类</div>
-                                    <div className="flex flex-wrap gap-2">
-                                        {promptCategoryOptions.map((category) => (
-                                            <Tag.CheckableTag key={category} checked={selectedCategory === category} className={cn("prompt-filter-tag", selectedCategory === category && "is-active")} onChange={() => setSelectedCategory(category)}>
-                                                {category}
-                                            </Tag.CheckableTag>
-                                        ))}
-                                    </div>
-                                </div>
-                                <div className="grid gap-2 sm:grid-cols-[56px_minmax(0,1fr)] sm:items-start">
-                                    <div className="pt-2 text-xs font-medium text-stone-500 dark:text-stone-400">标签</div>
-                                    <div className="flex flex-wrap gap-2">
-                                        {promptTags.map((tag) => (
-                                            <Tag.CheckableTag
-                                                key={tag}
-                                                checked={tag === ALL_PROMPTS_OPTION ? selectedTags.length === 0 : selectedTags.includes(tag)}
-                                                className={cn("prompt-filter-tag", (tag === ALL_PROMPTS_OPTION ? selectedTags.length === 0 : selectedTags.includes(tag)) && "is-active")}
-                                                onChange={() => toggleTag(tag)}
-                                            >
-                                                {tag}
-                                            </Tag.CheckableTag>
-                                        ))}
-                                    </div>
+                        {activeTab === "personal" ? (
+                            <Button type="primary" icon={<Plus className="size-4" />} onClick={openNewPrompt}>
+                                新增提示词
+                            </Button>
+                        ) : null}
+                    </div>
+                    <Tabs className="mt-5" activeKey={activeTab} onChange={setActiveTab} items={[{ key: "library", label: "提示词库" }, { key: "personal", label: `我的提示词 (${personalPrompts.length})` }]} />
+                    <div className="mx-auto mt-2 w-full max-w-2xl">
+                        <Input size="large" prefix={<Search className="size-4 text-stone-400" />} value={titleKeyword} placeholder="搜索标题、内容或标签" onChange={(event) => setTitleKeyword(event.target.value)} />
+                    </div>
+                    {activeTab === "library" ? (
+                        <div className="mx-auto mt-6 grid max-w-6xl gap-3 text-left">
+                            <PromptFilter label="分类" options={promptCategoryOptions} selected={selectedCategory} onChange={setSelectedCategory} />
+                            <div className="grid gap-2 sm:grid-cols-[56px_minmax(0,1fr)] sm:items-start">
+                                <div className="pt-2 text-xs font-medium text-stone-500 dark:text-stone-400">标签</div>
+                                <div className="flex flex-wrap gap-2">
+                                    {promptTags.map((tag) => {
+                                        const active = tag === ALL_PROMPTS_OPTION ? selectedTags.length === 0 : selectedTags.includes(tag);
+                                        return <Tag.CheckableTag key={tag} checked={active} className={cn("prompt-filter-tag", active && "is-active")} onChange={() => toggleTag(tag)}>{tag}</Tag.CheckableTag>;
+                                    })}
                                </div>
                            </div>
-                        </>
+                        </div>
                    ) : null}
                </div>

-                {!query.isLoading ? (
-                    <div>
-                        <div className="mx-auto grid max-w-7xl gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-                            {promptItems.map((item) => (
-                                <PromptCard
-                                    key={item.id}
-                                    item={item}
-                                    onOpen={() => setSelectedPrompt(item)}
-                                    onCopy={() => copyText(item.prompt, "提示词已复制")}
-                                    extraAction={
-                                        <Button size="small" icon={<FolderPlus className="size-3.5" />} onClick={() => savePromptAsset(item)}>
-                                            加入我的资产
-                                        </Button>
-                                    }
-                                />
-                            ))}
-                        </div>
-                        {promptItems.length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="没有找到匹配的提示词" className="py-16" /> : null}
-                        <div className="mx-auto mt-6 max-w-7xl text-center text-xs text-stone-500 dark:text-stone-400">
-                            {query.isFetchingNextPage ? "加载中..." : query.hasNextPage ? "继续向下滚动加载更多" : promptItems.length > 0 ? "已经到底了" : null}
-                        </div>
-                    </div>
+                {activeTab === "library" && query.isLoading ? <div className="flex h-60 items-center justify-center"><Spin /></div> : null}
+                {activeTab === "library" && !query.isLoading ? (
+                    <PromptGrid items={promptItems} onOpen={setSelectedPrompt} renderActions={(item) => <><Button size="small" icon={<BookmarkPlus className="size-3.5" />} onClick={() => saveToMyPrompts(item)}>保存</Button><Tooltip title="加入我的资产"><Button type="text" size="small" icon={<FolderPlus className="size-3.5" />} onClick={() => savePromptAsset(item)} /></Tooltip></>} onCopy={(item) => copyText(item.prompt, "提示词已复制")} emptyText="没有找到匹配的提示词" />
                ) : null}
+                {activeTab === "personal" ? (
+                    <PromptGrid
+                        items={personalItems}
+                        onOpen={setSelectedPrompt}
+                        onCopy={(item) => copyText(item.prompt, "提示词已复制")}
+                        renderActions={(item) => {
+                            const personal = personalPrompts.find((prompt) => prompt.id === item.id)!;
+                            return <Space size={0}><Tooltip title="编辑"><Button type="text" size="small" icon={<Pencil className="size-3.5" />} onClick={() => openEditPrompt(personal)} /></Tooltip><Popconfirm title="删除这条提示词？" okText="删除" cancelText="取消" onConfirm={() => removePrompt(item.id)}><Tooltip title="删除"><Button type="text" danger size="small" icon={<Trash2 className="size-3.5" />} /></Tooltip></Popconfirm></Space>;
+                        }}
+                        emptyText="还没有保存提示词"
+                    />
+                ) : null}
+                {activeTab === "library" ? <div className="mx-auto mt-6 max-w-7xl text-center text-xs text-stone-500 dark:text-stone-400">{query.isFetchingNextPage ? "加载中..." : query.hasNextPage ? "继续向下滚动加载更多" : promptItems.length > 0 ? "已经到底了" : null}</div> : null}
            </main>

-            <PromptDetailDialog prompt={selectedPrompt} onClose={() => setSelectedPrompt(null)} onCopy={(prompt) => copyText(prompt, "提示词已复制")} onSaveAsset={savePromptAsset} />
+            <PromptDetailDialog prompt={selectedPrompt} onClose={() => setSelectedPrompt(null)} onCopy={(prompt) => copyText(prompt, "提示词已复制")} onSaveAsset={selectedPrompt?.sourceId === "personal" ? undefined : savePromptAsset} onSavePrompt={selectedPrompt?.sourceId === "personal" ? undefined : saveToMyPrompts} />
+            <MyPromptEditorDialog open={editorOpen} prompt={editingPrompt} onSave={savePersonalPrompt} onClose={() => setEditorOpen(false)} />
        </div>
    );
 }
+
+function PromptFilter({ label, options, selected, onChange }: { label: string; options: string[]; selected: string; onChange: (value: string) => void }) {
+    return <div className="grid gap-2 sm:grid-cols-[56px_minmax(0,1fr)] sm:items-start"><div className="pt-2 text-xs font-medium text-stone-500 dark:text-stone-400">{label}</div><div className="flex flex-wrap gap-2">{options.map((option) => <Tag.CheckableTag key={option} checked={selected === option} className={cn("prompt-filter-tag", selected === option && "is-active")} onChange={() => onChange(option)}>{option}</Tag.CheckableTag>)}</div></div>;
+}
+
+function PromptGrid({ items, onOpen, onCopy, renderActions, emptyText }: { items: Prompt[]; onOpen: (item: Prompt) => void; onCopy: (item: Prompt) => void; renderActions: (item: Prompt) => ReactNode; emptyText: string }) {
+    return <div><div className="mx-auto grid max-w-7xl gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">{items.map((item) => <PromptCard key={`${item.sourceId}:${item.id}`} item={item} onOpen={() => onOpen(item)} onCopy={() => onCopy(item)} extraAction={renderActions(item)} />)}</div>{items.length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={emptyText} className="py-16" /> : null}</div>;
+}
+
+function toPersonalInput(item: Prompt): PersonalPromptInput {
+    return { title: item.title, prompt: item.prompt, description: item.description, coverUrl: item.coverUrl, referenceImageUrls: item.referenceImageUrls, tags: item.tags, imageMode: item.imageMode, imageModel: item.imageModel, imageSize: item.imageSize, imageCount: item.imageCount };
+}
@@ -97,7 +97,9 @@ export default function VideoPage() {
    const [autoRunToken, setAutoRunToken] = useState(0);
    const videoCommand = useWorkbenchAgentStore((state) => state.videoCommand);
    const clearVideoCommand = useWorkbenchAgentStore((state) => state.clearVideoCommand);
+    const updateAgentTask = useWorkbenchAgentStore((state) => state.updateTask);
    const processedCommandRef = useRef(0);
+    const agentTaskIdRef = useRef<string | undefined>(undefined);

    const model = effectiveConfig.videoModel || effectiveConfig.model;
    const canGenerate = Boolean(prompt.trim());
@@ -170,10 +172,16 @@ export default function VideoPage() {
        }
    };
    const generate = async () => {
+        const agentTaskId = agentTaskIdRef.current;
+        agentTaskIdRef.current = undefined;
        const snapshot = buildRequestSnapshot();
-        if (!snapshot) return;
+        if (!snapshot) {
+            if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", error: "视频生成参数无效" });
+            return;
+        }
        setElapsedMs(0);
        setRunning(true);
+        if (agentTaskId) updateAgentTask(agentTaskId, { status: "running", error: undefined });
        setPreviewLog(null);
        setResults([{ id: nanoid(), status: "pending" }]);
        const batchStartedAt = performance.now();
@@ -181,11 +189,12 @@ export default function VideoPage() {
        try {
            const task = await createVideoGenerationTask(snapshot.config, snapshot.text, snapshot.references, snapshot.videoReferences, snapshot.audioReferences);
            const log = buildLog({ prompt: snapshot.text, model, config: snapshot.config, references: snapshot.references, videoReferences: snapshot.videoReferences, audioReferences: snapshot.audioReferences, durationMs: 0, status: "生成中", task });
-            await saveLog(log);
-            void pollGenerationLog(log, snapshot.config);
+            await saveLog(log, false);
+            void pollGenerationLog(log, snapshot.config, agentTaskId);
        } catch (error) {
            const errorMessage = error instanceof Error ? error.message : "生成失败";
            setResults([{ id: nanoid(), status: "failed", error: errorMessage }]);
+            if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", successCount: 0, failCount: 1, error: errorMessage });
            await saveLog(buildLog({ prompt: snapshot.text, model, config: snapshot.config, references: snapshot.references, videoReferences: snapshot.videoReferences, audioReferences: snapshot.audioReferences, durationMs: performance.now() - batchStartedAt, status: "失败", error: errorMessage }));
            message.error(errorMessage);
            setRunning(false);
@@ -198,8 +207,15 @@ export default function VideoPage() {
        processedCommandRef.current = videoCommand.nonce;
        clearVideoCommand();
        if (typeof videoCommand.prompt === "string") setPrompt(videoCommand.prompt);
-        if (videoCommand.run && !running) setAutoRunToken((value) => value + 1);
-    }, [videoCommand, clearVideoCommand, running]);
+        if (videoCommand.run && running) {
+            if (videoCommand.taskId) updateAgentTask(videoCommand.taskId, { status: "failed", error: "视频工作台已有任务正在运行" });
+            return;
+        }
+        if (videoCommand.run) {
+            agentTaskIdRef.current = videoCommand.taskId;
+            setAutoRunToken((value) => value + 1);
+        }
+    }, [videoCommand, clearVideoCommand, running, updateAgentTask]);

    useEffect(() => {
        if (!autoRunToken) return;
@@ -276,7 +292,7 @@ export default function VideoPage() {
            .filter((log) => selectedLogIds.includes(log.id))
            .map((log) => log.video?.storageKey)
            .filter((key): key is string => Boolean(key));
-        void Promise.all([deleteStoredMedia(mediaKeys), ...selectedLogIds.map((id) => logStore.removeItem(id))]).then(refreshLogs);
+        void Promise.all([deleteStoredMedia(mediaKeys), ...selectedLogIds.map((id) => logStore.removeItem(id))]).then(() => refreshLogs());
        if (previewLog && selectedLogIds.includes(previewLog.id)) {
            setPreviewLog(null);
            setResults([]);
@@ -285,15 +301,15 @@ export default function VideoPage() {
        setDeleteConfirmOpen(false);
    };

-    const saveLog = async (log: GenerationLog) => {
+    const saveLog = async (log: GenerationLog, resumePending = true) => {
        await logStore.setItem(log.id, serializeLog(log));
-        await refreshLogs();
+        await refreshLogs(resumePending);
    };

-    const refreshLogs = async () => {
+    const refreshLogs = async (resumePending = true) => {
        const nextLogs = await readStoredLogs();
        setLogs(nextLogs);
-        resumePendingLogs(nextLogs);
+        if (resumePending) resumePendingLogs(nextLogs);
        return nextLogs;
    };

@@ -303,7 +319,7 @@ export default function VideoPage() {
        }
    };

-    const pollGenerationLog = async (log: GenerationLog, configOverride?: AiConfig) => {
+    const pollGenerationLog = async (log: GenerationLog, configOverride?: AiConfig, agentTaskId?: string) => {
        if (!log.task || activeLogIdsRef.current.has(log.id)) return;
        activeLogIdsRef.current.add(log.id);
        setRunning(true);
@@ -326,6 +342,7 @@ export default function VideoPage() {
                        mimeType: stored.mimeType,
                    };
                    setResults([{ id: nextVideo.id, status: "success", video: nextVideo }]);
+                    if (agentTaskId) updateAgentTask(agentTaskId, { status: "succeeded", successCount: 1, failCount: 0, error: undefined });
                    await saveLog({ ...log, status: "成功", durationMs: nextVideo.durationMs, video: nextVideo, error: undefined });
                    message.success("视频已生成");
                    return;
@@ -337,6 +354,7 @@ export default function VideoPage() {
        } catch (error) {
            const errorMessage = error instanceof Error ? error.message : "生成失败";
            setResults([{ id: log.id, status: "failed", error: errorMessage }]);
+            if (agentTaskId) updateAgentTask(agentTaskId, { status: "failed", successCount: 0, failCount: 1, error: errorMessage });
            await saveLog({ ...log, status: "失败", durationMs: Date.now() - log.createdAt, error: errorMessage });
            message.error(errorMessage);
        } finally {
@@ -1,5 +1,6 @@
 import { createBrowserRouter, Outlet } from "react-router-dom";

+import { AnalyticsTracker } from "@/components/layout/analytics-tracker";
 import UserLayout from "@/layouts/user-layout";
 import AssetsPage from "@/pages/assets";
 import CanvasPage from "@/pages/canvas";
@@ -15,6 +16,7 @@ export const router = createBrowserRouter([
    {
        element: (
            <UserLayout>
+                <AnalyticsTracker />
                <Outlet />
            </UserLayout>
        ),
@@ -0,0 +1,37 @@
+import { nanoid } from "nanoid";
+
+export type PromptSource = {
+    id: string;
+    name: string;
+    url: string;
+    homepage: string;
+    enabled: boolean;
+    builtIn: boolean;
+};
+
+export const PROMPT_REGISTRY_HOMEPAGE = "https://github.com/yukkcat/image-prompts";
+const PROMPT_REGISTRY_SOURCE_BASE = "https://raw.githubusercontent.com/yukkcat/image-prompts/main/dist/sources";
+
+export function createPromptSource(source?: Partial<PromptSource>): PromptSource {
+    return {
+        id: source?.id?.trim() || nanoid(),
+        name: source?.name?.trim() || "新来源",
+        url: source?.url?.trim() || "",
+        homepage: source?.homepage?.trim() || "",
+        enabled: source?.enabled ?? true,
+        builtIn: source?.builtIn ?? false,
+    };
+}
+
+export const DEFAULT_PROMPT_SOURCES: PromptSource[] = [
+    registrySource("banana-prompt-quicker", "Banana Prompt Quicker", "https://glidea.github.io/banana-prompt-quicker/"),
+    registrySource("davidwu-gpt-image2-prompts", "DavidWu GPT Image 2", "https://github.com/davidwuw0811-boop/awesome-gpt-image2-prompts"),
+    registrySource("awesome-gpt-image", "Awesome GPT Image", "https://github.com/ZeroLu/awesome-gpt-image"),
+    registrySource("awesome-gpt4o-image-prompts", "Awesome GPT-4o", "https://github.com/ImgEdify/Awesome-GPT4o-Image-Prompts"),
+    registrySource("youmind-gpt-image-2", "YouMind GPT Image 2", "https://github.com/YouMind-OpenLab/awesome-gpt-image-2"),
+    registrySource("youmind-nano-banana-pro", "YouMind Nano Banana Pro", "https://github.com/YouMind-OpenLab/awesome-nano-banana-pro-prompts"),
+];
+
+function registrySource(id: string, name: string, homepage: string): PromptSource {
+    return { id, name, url: `${PROMPT_REGISTRY_SOURCE_BASE}/${id}.json`, homepage, enabled: true, builtIn: true };
+}
@@ -0,0 +1,118 @@
+import type { PromptSource } from "./prompt-source-presets";
+
+export type RawPrompt = {
+    id: string;
+    title: string;
+    prompt: string;
+    description: string;
+    coverUrl: string;
+    referenceImageUrls: string[];
+    tags: string[];
+    preview: string;
+    createdAt: string;
+    updatedAt: string;
+    author?: string;
+    sourceUrl?: string;
+    imageMode?: string;
+    imageModel?: string;
+    imageSize?: string;
+    imageCount?: number;
+};
+
+type RunOptions = { signal?: AbortSignal };
+
+async function fetchSource(source: PromptSource, options?: RunOptions) {
+    const response = await fetch(source.url, { cache: "no-store", signal: options?.signal });
+    if (!response.ok) throw new Error(`请求失败（${response.status}）`);
+    return response.json();
+}
+
+export async function runPromptSource(source: PromptSource, options?: RunOptions): Promise<RawPrompt[]> {
+    if (!source.url.trim()) throw new Error("JSON URL 不能为空");
+    let data: unknown;
+    try {
+        data = await fetchSource(source, options);
+    } catch (error) {
+        if (error instanceof DOMException && error.name === "AbortError") throw error;
+        throw new Error(`「${source.name}」拉取失败：${error instanceof Error ? error.message : String(error)}`);
+    }
+
+    const items = parseJsonSource(data, source);
+    if (source.builtIn && !items.length) throw new Error(`「${source.name}」未解析到有效提示词`);
+    return items;
+}
+
+function parseJsonSource(data: unknown, source: PromptSource) {
+    if (!Array.isArray(data)) throw new Error(`「${source.name}」格式错误：根节点必须是数组`);
+    return normalizeItems(data, source);
+}
+
+function normalizeItems(values: unknown[], source: PromptSource) {
+    const seen = new Set<string>();
+    const items: RawPrompt[] = [];
+    values.forEach((value, index) => {
+        const record = asRecord(value);
+        const title = stringValue(record.title).trim();
+        const prompt = stringValue(record.prompt).trim();
+        if (!title || !prompt) return;
+        const id = stringValue(record.id).trim() || `${source.id}-${leftPad(index + 1)}`;
+        if (seen.has(id)) return;
+        seen.add(id);
+        const referenceImageUrls = stringArray(record.referenceImageUrls).map((url) => absoluteUrl(source.url, url));
+        const coverUrl = absoluteUrl(source.url, stringValue(record.coverUrl)) || referenceImageUrls[0] || "";
+        items.push({
+            id,
+            title,
+            prompt,
+            description: stringValue(record.description),
+            coverUrl,
+            referenceImageUrls,
+            tags: stringArray(record.tags),
+            preview: stringValue(record.preview),
+            createdAt: stringValue(record.createdAt),
+            updatedAt: stringValue(record.updatedAt),
+            author: stringValue(record.author),
+            sourceUrl: absoluteUrl(source.url, stringValue(record.sourceUrl)),
+            imageMode: optionalString(record.imageMode),
+            imageModel: optionalString(record.imageModel),
+            imageSize: optionalString(record.imageSize),
+            imageCount: optionalNumber(record.imageCount),
+        });
+    });
+    return items;
+}
+
+function asRecord(value: unknown): Record<string, unknown> {
+    return value && typeof value === "object" ? (value as Record<string, unknown>) : {};
+}
+
+function stringValue(value: unknown) {
+    return typeof value === "string" || typeof value === "number" ? String(value) : "";
+}
+
+function stringArray(value: unknown) {
+    return Array.isArray(value) ? value.map(stringValue).map((item) => item.trim()).filter(Boolean) : [];
+}
+
+function optionalString(value: unknown) {
+    const result = stringValue(value).trim();
+    return result || undefined;
+}
+
+function optionalNumber(value: unknown) {
+    const result = Number(value);
+    return Number.isFinite(result) && result > 0 ? result : undefined;
+}
+
+function absoluteUrl(baseUrl: string, path: string) {
+    if (!path) return "";
+    try {
+        return new URL(path, baseUrl).toString();
+    } catch {
+        return path;
+    }
+}
+
+function leftPad(value: number) {
+    return String(value).padStart(4, "0");
+}
@@ -1,25 +1,18 @@
 import localforage from "localforage";

-export type Prompt = {
-    id: string;
-    title: string;
-    coverUrl: string;
-    prompt: string;
-    tags: string[];
-    category: string;
-    githubUrl: string;
-    preview: string;
-    createdAt: string;
-    updatedAt: string;
-};
+import { runPromptSource, type RawPrompt } from "./prompt-source-runtime";
+import { usePromptSourceStore } from "@/stores/use-prompt-source-store";
+import { usePromptStore, type PersonalPrompt } from "@/stores/use-prompt-store";
+import type { PromptSource } from "./prompt-source-presets";

-type PromptCategory = {
+export type Prompt = RawPrompt & {
+    sourceId: string;
    category: string;
    githubUrl: string;
-    build: () => Promise<Omit<Prompt, "category" | "githubUrl">[]>;
 };

 export const ALL_PROMPTS_OPTION = "全部";
+export const PERSONAL_PROMPTS_CATEGORY = "我的提示词";

 export type PromptListResponse = {
    items: Prompt[];
@@ -28,65 +21,200 @@ export type PromptListResponse = {
    total: number;
 };

-const awesomeGptImageRawBase = "https://raw.githubusercontent.com/ZeroLu/awesome-gpt-image/main";
-const awesomeGpt4oImagePromptsBase = "https://raw.githubusercontent.com/ImgEdify/Awesome-GPT4o-Image-Prompts/main";
-const youMindGptImage2RawBase = "https://raw.githubusercontent.com/YouMind-OpenLab/awesome-gpt-image-2/main";
-const youMindNanoBananaProRawBase = "https://raw.githubusercontent.com/YouMind-OpenLab/awesome-nano-banana-pro-prompts/main";
-const davidWuGptImage2RawBase = "https://raw.githubusercontent.com/davidwuw0811-boop/awesome-gpt-image2-prompts/main";
+export type PromptSourceStatus = {
+    sourceId: string;
+    count: number;
+    lastSuccessAt: string;
+    lastError: string;
+};
+
+export type PromptSourceRefreshResult = PromptSourceStatus & {
+    sourceName: string;
+    success: boolean;
+};
+
+export type PromptSourceRefreshSummary = {
+    results: PromptSourceRefreshResult[];
+    total: number;
+    successCount: number;
+    failureCount: number;
+};
+
+type SourceCache = PromptSourceStatus & {
+    items: Prompt[];
+    fetchedAt: number;
+    signature: string;
+};
+
 const cacheTtlMs = 1000 * 60 * 60;
-const promptCacheKey = "third-party-prompts";
 const promptCacheStore = localforage.createInstance({ name: "infinite-canvas", storeName: "prompt_cache" });
+const loadingSources = new Map<string, Promise<PromptSourceRefreshResult>>();

-const categories: PromptCategory[] = [
-    { category: "awesome-gpt-image", githubUrl: "https://github.com/ZeroLu/awesome-gpt-image", build: buildAwesomeGptImagePrompts },
-    { category: "awesome-gpt4o-image-prompts", githubUrl: "https://github.com/ImgEdify/Awesome-GPT4o-Image-Prompts", build: buildAwesomeGpt4oImagePrompts },
-    { category: "youmind-gpt-image-2", githubUrl: "https://github.com/YouMind-OpenLab/awesome-gpt-image-2", build: () => buildYouMindPrompts(youMindGptImage2RawBase, "youmind-gpt-image-2", "gpt-image-2") },
-    { category: "youmind-nano-banana-pro", githubUrl: "https://github.com/YouMind-OpenLab/awesome-nano-banana-pro-prompts", build: () => buildYouMindPrompts(youMindNanoBananaProRawBase, "youmind-nano-banana-pro", "nano-banana-pro") },
-    { category: "davidwu-gpt-image2-prompts", githubUrl: "https://github.com/davidwuw0811-boop/awesome-gpt-image2-prompts", build: buildDavidWuGptImage2Prompts },
-];
+function enabledSources() {
+    return usePromptSourceStore.getState().sources.filter((source) => source.enabled);
+}

-let loadingPrompts: Promise<Prompt[]> | null = null;
+function cacheKey(sourceId: string) {
+    return `prompt-source:${sourceId}`;
+}

-export async function fetchPrompts({ keyword = "", tag = [], category = ALL_PROMPTS_OPTION, page = 1, pageSize = 20 }: { keyword?: string; tag?: string[]; category?: string; page?: number; pageSize?: number } = {}) {
-    const items = await getPrompts();
-    const normalizedKeyword = keyword.trim().toLowerCase();
-    const normalizedPage = Math.max(1, page);
-    const normalizedPageSize = Math.max(1, Math.min(100, pageSize));
-    const withoutTagFilter = filterPrompts(items, { keyword: normalizedKeyword, category, tags: [] });
-    const filtered = filterPrompts(items, { keyword: normalizedKeyword, category, tags: tag });
+function sourceSignature(source: PromptSource) {
+    const value = `${source.name}\n${source.url}\n${source.homepage}`;
+    let hash = 0;
+    for (let i = 0; i < value.length; i += 1) hash = (hash * 31 + value.charCodeAt(i)) | 0;
+    return `${value.length}:${hash}`;
+}

+function withSourceMeta(source: PromptSource, items: RawPrompt[]): Prompt[] {
+    return items.map((item) => ({
+        ...item,
+        description: item.description || "",
+        referenceImageUrls: Array.isArray(item.referenceImageUrls) ? item.referenceImageUrls : [],
+        sourceId: source.id,
+        category: source.name,
+        githubUrl: item.sourceUrl || source.homepage,
+    }));
+}
+
+export function personalPromptToPrompt(item: PersonalPrompt): Prompt {
    return {
-        items: filtered.slice((normalizedPage - 1) * normalizedPageSize, normalizedPage * normalizedPageSize),
-        tags: collectTags(withoutTagFilter),
-        categories: categories.map((item) => item.category),
-        total: filtered.length,
+        ...item,
+        coverUrl: item.coverUrl || item.referenceImageUrls[0] || "",
+        sourceId: "personal",
+        category: PERSONAL_PROMPTS_CATEGORY,
+        githubUrl: "",
+        preview: "",
    };
 }

-async function getPrompts() {
-    const cached = await promptCacheStore.getItem<{ items?: Prompt[]; fetchedAt?: number }>(promptCacheKey);
-    if (cached?.items?.length && cached.fetchedAt && Date.now() - cached.fetchedAt < cacheTtlMs) return cached.items;
-    if (loadingPrompts) return loadingPrompts;
-    loadingPrompts = loadPrompts().finally(() => {
-        loadingPrompts = null;
-    });
-    return loadingPrompts;
+async function readSourceCache(sourceId: string) {
+    return promptCacheStore.getItem<SourceCache>(cacheKey(sourceId));
 }

-async function loadPrompts() {
+async function refreshSourceRecord(source: PromptSource): Promise<PromptSourceRefreshResult> {
+    const previous = await readSourceCache(source.id);
+    try {
+        const items = withSourceMeta(source, await runPromptSource(source));
+        const lastSuccessAt = new Date().toISOString();
+        const cache: SourceCache = { sourceId: source.id, items, count: items.length, fetchedAt: Date.now(), lastSuccessAt, lastError: "", signature: sourceSignature(source) };
+        await promptCacheStore.setItem(cacheKey(source.id), cache);
+        return { sourceId: source.id, sourceName: source.name, count: items.length, lastSuccessAt, lastError: "", success: true };
+    } catch (error) {
+        const lastError = error instanceof Error ? error.message : String(error);
+        const cache: SourceCache = {
+            sourceId: source.id,
+            items: previous?.items || [],
+            count: previous?.items?.length || 0,
+            fetchedAt: previous?.fetchedAt || 0,
+            lastSuccessAt: previous?.lastSuccessAt || "",
+            lastError,
+            signature: previous?.signature || sourceSignature(source),
+        };
+        await promptCacheStore.setItem(cacheKey(source.id), cache);
+        return { sourceId: source.id, sourceName: source.name, count: cache.count, lastSuccessAt: cache.lastSuccessAt, lastError, success: false };
+    }
+}
+
+function getOrStartRefresh(source: PromptSource) {
+    const current = loadingSources.get(source.id);
+    if (current) return current;
+    const loading = refreshSourceRecord(source).finally(() => loadingSources.delete(source.id));
+    loadingSources.set(source.id, loading);
+    return loading;
+}
+
+async function getSourcePrompts(source: PromptSource): Promise<Prompt[]> {
+    const cached = await readSourceCache(source.id);
+    if (cached) {
+        const stale = cached.signature !== sourceSignature(source) || Date.now() - cached.fetchedAt >= cacheTtlMs;
+        if (stale) void getOrStartRefresh(source).catch(() => undefined);
+        return withSourceMeta(source, cached.items);
+    }
+    const result = await getOrStartRefresh(source);
+    if (!result.success) throw new Error(result.lastError);
+    return (await readSourceCache(source.id))?.items || [];
+}
+
+async function getAllPrompts(includePersonal: boolean): Promise<Prompt[]> {
    const settled = await Promise.all(
-        categories.map(async (category) => {
+        enabledSources().map(async (source) => {
            try {
-                const items = await category.build();
-                return items.map((item) => ({ ...item, category: category.category, githubUrl: category.githubUrl }));
+                return await getSourcePrompts(source);
            } catch {
                return [];
            }
        }),
    );
-    const items = settled.flat();
-    await promptCacheStore.setItem(promptCacheKey, { items, fetchedAt: Date.now() });
-    return items;
+    const personal = includePersonal ? usePromptStore.getState().prompts.map(personalPromptToPrompt) : [];
+    return [...personal, ...settled.flat()];
+}
+
+export async function fetchPrompts({ keyword = "", tag = [], category = ALL_PROMPTS_OPTION, page = 1, pageSize = 20, includePersonal = true }: { keyword?: string; tag?: string[]; category?: string; page?: number; pageSize?: number; includePersonal?: boolean } = {}) {
+    const items = await getAllPrompts(includePersonal);
+    const normalizedKeyword = keyword.trim().toLowerCase();
+    const normalizedPage = Math.max(1, page);
+    const normalizedPageSize = Math.max(1, Math.min(100, pageSize));
+    const withoutTagFilter = filterPrompts(items, { keyword: normalizedKeyword, category, tags: [] });
+    const filtered = filterPrompts(items, { keyword: normalizedKeyword, category, tags: tag });
+    const categories = enabledSources().map((source) => source.name);
+    if (includePersonal && usePromptStore.getState().prompts.length) categories.unshift(PERSONAL_PROMPTS_CATEGORY);
+
+    return {
+        items: filtered.slice((normalizedPage - 1) * normalizedPageSize, normalizedPage * normalizedPageSize),
+        tags: collectTags(withoutTagFilter),
+        categories,
+        total: filtered.length,
+    };
+}
+
+export async function fetchSourcePrompts(sourceId: string): Promise<Prompt[]> {
+    const source = usePromptSourceStore.getState().sources.find((item) => item.id === sourceId);
+    if (!source) throw new Error("提示词来源不存在");
+    return getSourcePrompts(source);
+}
+
+export async function refreshSource(sourceId: string): Promise<PromptSourceRefreshResult> {
+    const source = usePromptSourceStore.getState().sources.find((item) => item.id === sourceId);
+    if (!source) throw new Error("提示词来源不存在");
+    const result = await getOrStartRefresh(source);
+    if (!result.success) throw new Error(result.lastError);
+    return result;
+}
+
+export async function refreshAllSources(): Promise<PromptSourceRefreshSummary> {
+    const results = await Promise.all(enabledSources().map(getOrStartRefresh));
+    return summarizeRefresh(results);
+}
+
+export async function refreshDueSources(maxAgeMs: number): Promise<PromptSourceRefreshSummary> {
+    const sources = await Promise.all(
+        enabledSources().map(async (source) => {
+            const cached = await readSourceCache(source.id);
+            const lastSuccess = cached?.lastSuccessAt ? new Date(cached.lastSuccessAt).getTime() : 0;
+            return !lastSuccess || Boolean(cached?.lastError) || Date.now() - lastSuccess >= maxAgeMs || cached?.signature !== sourceSignature(source) ? source : null;
+        }),
+    );
+    const results = await Promise.all(sources.filter((source): source is PromptSource => Boolean(source)).map(getOrStartRefresh));
+    return summarizeRefresh(results);
+}
+
+export async function fetchPromptSourceStatuses(): Promise<Record<string, PromptSourceStatus>> {
+    const entries = await Promise.all(
+        usePromptSourceStore.getState().sources.map(async (source) => {
+            const cache = await readSourceCache(source.id);
+            return [source.id, { sourceId: source.id, count: cache?.items?.length || 0, lastSuccessAt: cache?.lastSuccessAt || "", lastError: cache?.lastError || "" }] as const;
+        }),
+    );
+    return Object.fromEntries(entries);
+}
+
+function summarizeRefresh(results: PromptSourceRefreshResult[]): PromptSourceRefreshSummary {
+    return {
+        results,
+        total: results.reduce((total, item) => total + item.count, 0),
+        successCount: results.filter((item) => item.success).length,
+        failureCount: results.filter((item) => !item.success).length,
+    };
 }

 function filterPrompts(items: Prompt[], options: { keyword: string; category: string; tags: string[] }) {
@@ -94,148 +222,16 @@ function filterPrompts(items: Prompt[], options: { keyword: string; category: st
        if (isActiveOption(options.category) && item.category !== options.category) return false;
        if (options.tags.length && !options.tags.some((tag) => item.tags.includes(tag))) return false;
        if (!options.keyword) return true;
-        return [item.title, item.prompt, item.category, ...item.tags].join(" ").toLowerCase().includes(options.keyword);
+        return [item.title, item.prompt, item.description, item.category, ...item.tags].join(" ").toLowerCase().includes(options.keyword);
    });
 }

-async function buildAwesomeGptImagePrompts() {
-    const markdown = await fetchText(awesomeGptImageRawBase, "README.zh-CN.md");
-    const items: Omit<Prompt, "category" | "githubUrl">[] = [];
-    for (const section of splitBeforeHeading(markdown, "## ")) {
-        const tags = tagsFromHeading(firstMatch(section, /^##\s+(.+)$/m));
-        for (const block of splitBeforeHeading(section, "### ")) {
-            const title = firstMatch(block, /^###\s+(.+)$/m).replace(/\[([^\]]+)]\([^)]+\)/g, "$1").trim();
-            const prompt = firstMatch(block, /\*\*提示词:\*\*\s*\r?\n\s*```[\w-]*\r?\n(.*?)\r?\n```/s).trim();
-            if (!title || !prompt) continue;
-            const images = extractMarkdownImages(awesomeGptImageRawBase, block);
-            items.push(defaultPrompt(`awesome-gpt-image-${leftPad(items.length + 1)}`, title, prompt, images[0] || "", tags, markdownPreview(images)));
-        }
-    }
-    return items;
-}
-
-async function buildAwesomeGpt4oImagePrompts() {
-    const markdown = await fetchText(awesomeGpt4oImagePromptsBase, "README.zh-CN.md");
-    const items: Omit<Prompt, "category" | "githubUrl">[] = [];
-    for (const block of splitBeforeHeading(markdown, "### ")) {
-        const title = firstMatch(block, /^###\s+(.+)$/m).trim();
-        const prompt = firstMatch(block, /- \*\*提示词文本：\*\*\s*`(.*?)`/s).trim();
-        if (!title || !prompt) continue;
-        const images = extractMarkdownImages(awesomeGpt4oImagePromptsBase, block);
-        items.push(defaultPrompt(`awesome-gpt4o-image-prompts-${leftPad(items.length + 1)}`, title, prompt, images[0] || "", ["gpt4o"], markdownPreview(images)));
-    }
-    return items;
-}
-
-async function buildYouMindPrompts(baseUrl: string, idPrefix: string, modelTag: string) {
-    const markdown = await fetchText(baseUrl, "README_zh.md");
-    const items: Omit<Prompt, "category" | "githubUrl">[] = [];
-    for (const block of splitBeforeHeading(markdown, "### ")) {
-        const title = firstMatch(block, /^###\s+No\.\s*\d+:\s*(.+)$/m).trim();
-        const prompt = firstMatch(block, /#### .*?提示词\s*\r?\n\s*```[\w-]*\r?\n(.*?)\r?\n```/s).trim();
-        if (!title || !prompt) continue;
-        const images = extractMarkdownImages(baseUrl, block);
-        items.push(defaultPrompt(`${idPrefix}-${leftPad(items.length + 1)}`, title, prompt, images[0] || "", youMindTags(title, modelTag), markdownPreview(images)));
-    }
-    return items;
-}
-
-async function buildDavidWuGptImage2Prompts() {
-    const data = await fetchJson<Array<{ id?: number; title_en?: string; title_cn?: string; category?: string; category_cn?: string; prompt?: string; note?: string; author?: string; source?: string; needs_ref?: boolean; image?: string }>>(davidWuGptImage2RawBase, "prompts.json");
-    return data
-        .map((item, index) => {
-            const title = (item.title_cn || item.title_en || "").trim();
-            const prompt = (item.prompt || "").trim();
-            if (!title || !prompt) return null;
-            const image = absoluteImage(davidWuGptImage2RawBase, item.image || "");
-            const preview = [item.title_en, item.note, image ? `![](${image})` : ""].filter(Boolean).join("\n\n");
-            return defaultPrompt(`davidwu-gpt-image2-prompts-${leftPad(item.id || index + 1)}`, title, prompt, image, davidWuTags(item), preview);
-        })
-        .filter((item): item is Omit<Prompt, "category" | "githubUrl"> => Boolean(item));
-}
-
-function defaultPrompt(id: string, title: string, prompt: string, coverUrl: string, tags: string[], preview: string): Omit<Prompt, "category" | "githubUrl"> {
-    return { id, title, coverUrl, prompt, tags, preview, createdAt: "", updatedAt: "" };
-}
-
-async function fetchText(baseUrl: string, file: string) {
-    const response = await fetch(`${baseUrl}/${file}`, { cache: "no-store" });
-    if (!response.ok) throw new Error(`${file} 拉取失败`);
-    return response.text();
-}
-
-async function fetchJson<T>(baseUrl: string, file: string) {
-    return JSON.parse(await fetchText(baseUrl, file)) as T;
-}
-
-function splitBeforeHeading(markdown: string, prefix: string) {
-    const blocks: string[] = [];
-    let current: string[] = [];
-    for (const line of markdown.split("\n")) {
-        if (line.startsWith(prefix) && current.length) {
-            blocks.push(current.join("\n"));
-            current = [];
-        }
-        current.push(line);
-    }
-    blocks.push(current.join("\n"));
-    return blocks;
-}
-
-function firstMatch(value: string, pattern: RegExp) {
-    return pattern.exec(value)?.[1] || "";
-}
-
-function extractMarkdownImages(baseUrl: string, markdown: string) {
-    return Array.from(markdown.matchAll(/!\[[^\]]*]\(([^)]+)\)/g), (match) => absoluteImage(baseUrl, match[1])).filter(Boolean);
-}
-
-function absoluteImage(baseUrl: string, image: string) {
-    if (!image) return "";
-    if (/^https?:\/\//i.test(image)) return image;
-    return `${baseUrl}/${image.replace(/^\.?\//, "")}`;
-}
-
-function tagsFromCategory(category: string) {
-    return splitTags(category.replace(/\s+Cases$/i, ""), /\s*(?:&|and)\s*/);
-}
-
-function tagsFromHeading(heading: string) {
-    return splitTags(heading.replace(/[^\p{L}\p{N}/&、与 ]/gu, ""), /\s*(?:\/|&|、|与)\s*/);
-}
-
-function youMindTags(title: string, modelTag: string) {
-    const [, prefix] = title.match(/^(.+?) - /) || [];
-    return [modelTag, ...tagsFromHeading(prefix || "")];
-}
-
-function davidWuTags(item: { category_cn?: string; category?: string; author?: string; source?: string; needs_ref?: boolean }) {
-    const tags = splitTags([item.category_cn, item.category, item.author, item.source].filter(Boolean).join("/"), /\//);
-    if (item.needs_ref) tags.push("需要参考图");
-    return tags;
-}
-
-function splitTags(value: string, pattern: RegExp) {
-    return value
-        .split(pattern)
-        .map((tag) => tag.trim().toLowerCase())
-        .filter(Boolean);
-}
-
-function markdownPreview(images: string[]) {
-    return images.filter(Boolean).map((image) => `![](${image})`).join("\n\n");
-}
-
 function collectTags(items: Prompt[]) {
    return Array.from(new Set(items.flatMap((item) => item.tags).filter(Boolean)));
 }

-function leftPad(value: number) {
-    return String(value).padStart(4, "0");
-}
-
 function isActiveOption(value: string) {
-    return value && value !== "全部" && value !== "all";
+    return value && value !== ALL_PROMPTS_OPTION && value !== "all";
 }

 export function formatPromptDate(value: string) {
@@ -3,7 +3,7 @@ import { create } from "zustand";
 import type { CanvasAgentOp, CanvasAgentSnapshot } from "@/lib/canvas/canvas-agent-ops";

 export type AgentChatRole = "user" | "assistant" | "system" | "tool" | "error";
-export type AgentAttachment = { id: string; name: string; type: string; size: number; url: string; dataUrl: string };
+export type AgentAttachment = { id: string; name: string; type: string; size: number; width: number; height: number; url: string; dataUrl: string };
 export type AgentChatItem = { id: string; role: AgentChatRole; title?: string; text: string; meta?: string; detail?: unknown; attachments?: AgentAttachment[]; streamId?: string };
 export type AgentEventLog = { id: string; time: string; title: string; text: string; raw?: unknown };
 export type AgentPendingToolCall = { requestId: string; name: string; input?: { ops?: CanvasAgentOp[]; path?: string } & Record<string, unknown> };
@@ -0,0 +1,53 @@
+import { create } from "zustand";
+
+export const CANVAS_SIDE_PANEL_MOTION_MS = 500;
+export const CANVAS_SIDE_PANEL_MIN_WIDTH = 220;
+export const CANVAS_SIDE_PANEL_MAX_WIDTH = 480;
+export const CANVAS_SIDE_PANEL_DEFAULT_WIDTH = 280;
+
+const WIDTH_KEY = "canvas-side-panel-width";
+const OPEN_KEY = "canvas-side-panel-open";
+
+function initialWidth() {
+    if (typeof window === "undefined") return CANVAS_SIDE_PANEL_DEFAULT_WIDTH;
+    const stored = Number(localStorage.getItem(WIDTH_KEY));
+    if (!stored) return CANVAS_SIDE_PANEL_DEFAULT_WIDTH;
+    return Math.min(CANVAS_SIDE_PANEL_MAX_WIDTH, Math.max(CANVAS_SIDE_PANEL_MIN_WIDTH, stored));
+}
+
+function initialOpen() {
+    if (typeof window === "undefined") return true;
+    return localStorage.getItem(OPEN_KEY) !== "0";
+}
+
+type CanvasSidePanelStore = {
+    width: number;
+    panelOpen: boolean;
+    panelMounted: boolean;
+    panelClosing: boolean;
+    setWidth: (width: number) => void;
+    openPanel: () => void;
+    closePanel: () => void;
+    togglePanel: () => void;
+};
+
+export const useCanvasSidePanelStore = create<CanvasSidePanelStore>((set, get) => ({
+    width: initialWidth(),
+    panelOpen: initialOpen(),
+    panelMounted: initialOpen(),
+    panelClosing: false,
+    setWidth: (width) => set({ width }),
+    openPanel: () => {
+        if (typeof window !== "undefined") localStorage.setItem(OPEN_KEY, "1");
+        set({ panelOpen: true, panelMounted: true, panelClosing: false });
+    },
+    closePanel: () => {
+        if (!get().panelMounted || get().panelClosing) return;
+        if (typeof window !== "undefined") localStorage.setItem(OPEN_KEY, "0");
+        set({ panelOpen: false, panelClosing: true });
+        setTimeout(() => {
+            if (get().panelClosing) set({ panelMounted: false, panelClosing: false });
+        }, CANVAS_SIDE_PANEL_MOTION_MS);
+    },
+    togglePanel: () => (get().panelOpen ? get().closePanel() : get().openPanel()),
+}));
@@ -56,7 +56,7 @@ export type WebdavSyncConfig = {
    directory: string;
    lastSyncedAt: string;
 };
-export type ConfigTabKey = "channels" | "preferences" | "webdav";
+export type ConfigTabKey = "channels" | "preferences" | "prompt-sources" | "webdav";

 export const CONFIG_STORE_KEY = "infinite-canvas:ai_config_store";
 const CHANNEL_MODEL_SEPARATOR = "::";
@@ -0,0 +1,65 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+import { DEFAULT_PROMPT_SOURCES, createPromptSource, type PromptSource } from "@/services/api/prompt-source-presets";
+
+export type PromptSourceSchedule = {
+    intervalMinutes: number;
+    lastFetchedAt: string;
+};
+
+const PROMPT_SOURCE_STORE_KEY = "infinite-canvas:prompt_source_store_v2";
+
+const defaultSchedule: PromptSourceSchedule = {
+    intervalMinutes: 30,
+    lastFetchedAt: "",
+};
+
+export const PROMPT_SOURCE_INTERVAL_OPTIONS = [
+    { label: "关闭定时", value: 0 },
+    { label: "每 30 分钟", value: 30 },
+    { label: "每 1 小时", value: 60 },
+    { label: "每 6 小时", value: 360 },
+    { label: "每 24 小时", value: 1440 },
+];
+
+type PromptSourceStore = {
+    sources: PromptSource[];
+    schedule: PromptSourceSchedule;
+    addSource: () => PromptSource;
+    saveSource: (source: PromptSource) => void;
+    removeSource: (id: string) => void;
+    toggleSource: (id: string, enabled: boolean) => void;
+    updateSchedule: <K extends keyof PromptSourceSchedule>(key: K, value: PromptSourceSchedule[K]) => void;
+};
+
+export const usePromptSourceStore = create<PromptSourceStore>()(
+    persist(
+        (set) => ({
+            sources: DEFAULT_PROMPT_SOURCES,
+            schedule: defaultSchedule,
+            addSource: () => createPromptSource(),
+            saveSource: (source) =>
+                set((state) => ({
+                    sources: state.sources.some((item) => item.id === source.id)
+                        ? state.sources.map((item) => (item.id === source.id && !item.builtIn ? createPromptSource(source) : item))
+                        : [...state.sources, createPromptSource(source)],
+                })),
+            removeSource: (id) => set((state) => ({ sources: state.sources.filter((item) => item.id !== id || item.builtIn) })),
+            toggleSource: (id, enabled) => set((state) => ({ sources: state.sources.map((item) => (item.id === id ? { ...item, enabled } : item)) })),
+            updateSchedule: (key, value) => set((state) => ({ schedule: { ...state.schedule, [key]: value } })),
+        }),
+        {
+            name: PROMPT_SOURCE_STORE_KEY,
+            partialize: (state) => ({ sources: state.sources, schedule: state.schedule }),
+            merge: (persisted, current) => {
+                const persistedState = (persisted || {}) as Partial<PromptSourceStore>;
+                const savedSources = Array.isArray(persistedState.sources) ? persistedState.sources : [];
+                const enabledById = new Map(savedSources.map((source) => [source.id, source.enabled]));
+                const builtIn = DEFAULT_PROMPT_SOURCES.map((source) => ({ ...source, enabled: enabledById.get(source.id) ?? source.enabled }));
+                const custom = savedSources.filter((source) => !source.builtIn).map((source) => createPromptSource(source));
+                return { ...current, sources: [...builtIn, ...custom], schedule: { ...defaultSchedule, ...(persistedState.schedule || {}) } };
+            },
+        },
+    ),
+);
@@ -0,0 +1,53 @@
+import { nanoid } from "nanoid";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import { localForageStorage } from "@/lib/localforage-storage";
+
+export type PersonalPrompt = {
+    id: string;
+    title: string;
+    prompt: string;
+    description: string;
+    coverUrl: string;
+    referenceImageUrls: string[];
+    tags: string[];
+    createdAt: string;
+    updatedAt: string;
+    imageMode?: string;
+    imageModel?: string;
+    imageSize?: string;
+    imageCount?: number;
+};
+
+export type PersonalPromptInput = Omit<PersonalPrompt, "id" | "createdAt" | "updatedAt">;
+
+type PromptStore = {
+    hydrated: boolean;
+    prompts: PersonalPrompt[];
+    addPrompt: (prompt: PersonalPromptInput) => string;
+    updatePrompt: (id: string, prompt: PersonalPromptInput) => void;
+    removePrompt: (id: string) => void;
+};
+
+export const usePromptStore = create<PromptStore>()(
+    persist(
+        (set) => ({
+            hydrated: false,
+            prompts: [],
+            addPrompt: (prompt) => {
+                const id = nanoid();
+                const now = new Date().toISOString();
+                set((state) => ({ prompts: [{ ...prompt, id, createdAt: now, updatedAt: now }, ...state.prompts] }));
+                return id;
+            },
+            updatePrompt: (id, prompt) => set((state) => ({ prompts: state.prompts.map((item) => (item.id === id ? { ...item, ...prompt, updatedAt: new Date().toISOString() } : item)) })),
+            removePrompt: (id) => set((state) => ({ prompts: state.prompts.filter((item) => item.id !== id) })),
+        }),
+        {
+            name: "infinite-canvas:prompt_store",
+            storage: createJSONStorage(() => localForageStorage),
+            onRehydrateStorage: () => () => usePromptStore.setState({ hydrated: true }),
+        },
+    ),
+);
@@ -6,15 +6,30 @@ import { create } from "zustand";

 export type WorkbenchCommand = {
    nonce: number;
+    taskId?: string;
    prompt?: string;
    run: boolean;
 };

+export type WorkbenchGenerationTask = {
+    id: string;
+    kind: "image" | "video";
+    status: "queued" | "running" | "succeeded" | "failed";
+    prompt?: string;
+    createdAt: string;
+    updatedAt: string;
+    successCount?: number;
+    failCount?: number;
+    error?: string;
+};
+
 type WorkbenchAgentStore = {
    imageCommand: WorkbenchCommand | null;
    videoCommand: WorkbenchCommand | null;
-    dispatchImage: (command: Omit<WorkbenchCommand, "nonce">) => void;
-    dispatchVideo: (command: Omit<WorkbenchCommand, "nonce">) => void;
+    tasks: WorkbenchGenerationTask[];
+    dispatchImage: (command: Omit<WorkbenchCommand, "nonce" | "taskId">) => string | undefined;
+    dispatchVideo: (command: Omit<WorkbenchCommand, "nonce" | "taskId">) => string | undefined;
+    updateTask: (id: string, patch: Partial<Pick<WorkbenchGenerationTask, "status" | "successCount" | "failCount" | "error">>) => void;
    clearImageCommand: () => void;
    clearVideoCommand: () => void;
 };
@@ -25,8 +40,25 @@ const nextNonce = () => (nonce += 1);
 export const useWorkbenchAgentStore = create<WorkbenchAgentStore>((set) => ({
    imageCommand: null,
    videoCommand: null,
-    dispatchImage: (command) => set({ imageCommand: { ...command, nonce: nextNonce() } }),
-    dispatchVideo: (command) => set({ videoCommand: { ...command, nonce: nextNonce() } }),
+    tasks: [],
+    dispatchImage: (command) => {
+        const commandNonce = nextNonce();
+        const task = command.run ? createTask("image", commandNonce, command.prompt) : undefined;
+        set((state) => ({ imageCommand: { ...command, nonce: commandNonce, taskId: task?.id }, tasks: task ? [task, ...state.tasks].slice(0, 30) : state.tasks }));
+        return task?.id;
+    },
+    dispatchVideo: (command) => {
+        const commandNonce = nextNonce();
+        const task = command.run ? createTask("video", commandNonce, command.prompt) : undefined;
+        set((state) => ({ videoCommand: { ...command, nonce: commandNonce, taskId: task?.id }, tasks: task ? [task, ...state.tasks].slice(0, 30) : state.tasks }));
+        return task?.id;
+    },
+    updateTask: (id, patch) => set((state) => ({ tasks: state.tasks.map((task) => (task.id === id ? { ...task, ...patch, updatedAt: new Date().toISOString() } : task)) })),
    clearImageCommand: () => set({ imageCommand: null }),
    clearVideoCommand: () => set({ videoCommand: null }),
 }));
+
+function createTask(kind: "image" | "video", commandNonce: number, prompt?: string): WorkbenchGenerationTask {
+    const now = new Date().toISOString();
+    return { id: `${kind}-${commandNonce}`, kind, status: "queued", prompt, createdAt: now, updatedAt: now };
+}
@@ -6,4 +6,9 @@ declare const __APP_RELEASES__: import("@/lib/release").ReleaseInfo[];
 interface ImportMetaEnv {
    // 逗号分隔的本地开发插件 URL,每次启动重新拉取(不缓存、不落库)
    readonly VITE_DEV_PLUGINS?: string;
+    // 统计分析（可选，构建期注入）：每家一个独立变量，填了谁就启用谁，可同时启用多家
+    // GA4 衡量 ID（G-XXXX）
+    readonly VITE_ANALYTICS_GA4_ID?: string;
+    // 百度统计站点 ID
+    readonly VITE_ANALYTICS_BAIDU_ID?: string;
 }
Author	SHA1	Message	Date
yu	49851f2b5f	feat(prompts): unify sources and add personal library	2026-07-21 01:08:11 +08:00
yu	c81bb8b651	style(agent): distinguish chat participants	2026-07-20 12:14:36 +08:00
yu	b7d0fe10bc	fix(agent): improve chat navigation	2026-07-20 12:13:33 +08:00
HouYunFei	d91e67a5ad	feat(canvas): retain prompt input after node generation completion	2026-07-20 11:34:46 +08:00
HouYunFei	d566d5cc46	Merge remote-tracking branch 'origin/main' # Conflicts: # CHANGELOG.md	2026-07-20 07:55:56 +08:00
yu	8fb8d0b224	fix(agent): add uploaded images to canvas flows	2026-07-19 18:17:57 +08:00
yu	5e1fd7a825	fix(agent): synchronize shared Codex sessions	2026-07-18 15:29:58 +08:00
yu	062e4569aa	feat(agent): add task status and client-scoped operations	2026-07-18 15:29:58 +08:00
HouYunFei	b5dc9c8a87	feat(canvas): optimize CanvasAssetsTab and CanvasPromptsTab with memoization to improve performance	2026-07-18 08:27:20 +08:00
HouYunFei	75c22c2f9f	feat(canvas): add "prompts" tab to the left panel with collapsible prompt sources	2026-07-18 08:19:59 +08:00
HouYunFei	bdca6b0a5c	feat(prompt-sources): add davidwu-gpt-image2-prompts to default prompt sources	2026-07-17 17:45:50 +08:00
HouYunFei	d4130bbb79	feat(prompt-sources): add custom script fetching functionality for prompt sources	2026-07-17 17:36:42 +08:00
HouYunFei	0e1edd1484	chore(release): bump version to v0.9.0 and update changelog	2026-07-17 16:43:01 +08:00
HouYunFei	5107be0acf	feat(canvas): 资产卡增删改重做 + 节点名称默认隐藏 - 资产 Tab 卡片重做:视频取首帧封面、文本铺内容、去标题成矩形,hover 居中显示插入/删除两个 icon 按钮 - 修复删除确认框「取消」经 React Portal 事件冒泡误触插入 - 资产 Tab 支持上传添加图片/视频、卡片移除资产 - 画布节点名称默认不再显示,仅在选中/悬停/编辑时出现 - 操作按钮改用扁平无灰底样式,并写入 AGENTS.md 规范 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-17 16:42:08 +08:00
HouYunFei	219b3e84db	feat(canvas): 左侧面板可调宽收起 + 元素多选导出与跳转动画 - 左侧画布面板支持拖拽调整宽度、展开/收起(带动画),状态与宽度持久化 - 顶栏菜单左侧新增面板开关按钮,并缩小菜单/开关按钮 - 顶栏菜单新增「导出当前画布」为压缩包 - 画布元素列表支持多选并批量导出:图片/视频/音频为文件、文本为 txt、其余各自为 json - 画布/资产切换改为滑动下划线动画,点击元素跳转带缓动动画 - 移除文本/配置/视频等非图片元素图标的灰色底色,并写入 AGENTS.md 规范 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-17 16:21:26 +08:00
HouYunFei	a3411cf9d9	docs(changelog): note the drag-resize React #185 crash fix Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-17 15:17:57 +08:00
HouYunFei	430d1bd956	refactor(canvas-project): extract plugin host into usePluginHost hook Move the plugin node host capabilities (pluginAi generation bridge, pluginHost canvas accessors, renderPluginPanel, buildNodeToolbarItems) and the plugin-load effect out of InfiniteCanvasPage into usePluginHost. The hook receives the shared config/refs/setters explicitly and keeps identical dependency arrays. This also relocates the AI-service and plugin imports (requestVideoGeneration, selectableModelsByCapability, buildNodeContext, ensurePluginsLoaded, the canvas-plugin types, etc.) that were only used by this cluster. project.tsx is now ~2950 lines, down from 3536 at the start of the refactor. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-17 14:19:00 +08:00
HouYunFei	cf0561d12a	refactor(canvas-project): extract agent bridge into useAgentBridge hook Move the canvas<->local-Agent bridge (agentSnapshot memo, applyAgentOps / undoAgentOps, agentUndoSnapshot state, and the publish-to-agent-store effect) out of InfiniteCanvasPage into a useAgentBridge hook. Only applyAgentOps is consumed outside (by the plugin host); the rest is fully encapsulated. The hook receives the shared canvas state/refs/setters explicitly and keeps the exact same dependency arrays, so behavior is unchanged. project.tsx drops the now-unused agent-ops imports and the setCanvasContext selector. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-17 14:14:10 +08:00
HouYunFei	e6dcd7a832	refactor(canvas-project): extract CanvasTopBar into its own component Move CanvasTopBar and its private helpers (MenuLabel, CompactAgentStatus, Shortcut) out of project.tsx into canvas-top-bar.tsx. The component already took all data via explicit props, so the move is mechanical with no behavior change. Drop the imports (DOCS_URL, UserStatusActions, Dropdown, several icons) that were only used by the top bar. project.tsx is now ~3080 lines, down from 3536 at the start of the refactor. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-17 14:04:25 +08:00
HouYunFei	187c499ef9	refactor(canvas-project): extract refresh shell and create menus into components Move the module-scope presentational subcomponents out of project.tsx: - canvas-refresh-shell.tsx: CanvasRefreshShell (pre-load placeholder). - canvas-create-menus.tsx: ConnectionCreateMenu, ConnectionCreateOption, NodeCreateMenu, plus the PendingConnectionCreate type they define. They already communicated via explicit props, so the move is mechanical. No behavior change; project.tsx imports them back and drops now-unused icon and node-registry imports. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-17 14:00:53 +08:00
HouYunFei	cf1ea2646f	refactor(canvas-project): extract pure helpers into @/lib/canvas modules Move the ~30 module-scope pure functions out of the 3.5k-line project.tsx into three focused lib modules, with identical names and signatures. No behavior change; project.tsx imports them back. - canvas-node-factory.ts: createCanvasNode, *Metadata builders, referenceUrl, applyNodeConfigPatch. - canvas-node-geometry.ts: nodeBounds, group drop/snap, connection anchors, normalizeConnection, hidden-batch checks. - canvas-generation-helpers.ts: generation config/inputs, reference hydration, retry-source lookup, angle prompt builders, misc pure helpers. project.tsx drops from 3536 to ~3230 lines. Also removes imports that were only used by the moved helpers. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-17 13:46:07 +08:00
HouYunFei	57db0fe752	feat(canvas-local-agent-panel): optimize state management and rendering performance	2026-07-17 13:38:55 +08:00
HouYunFei	c5f53454aa	feat(changelog): add support for Google Analytics 4 and Baidu statistics	2026-07-17 11:32:11 +08:00
HouYunFei	ca6efdf0c3	feat(analytics): implement runtime configuration and analytics tracking for GA4 and Baidu	2026-07-17 11:24:22 +08:00
HouYunFei	a2586ffe34	feat(canvas-node-manual): enhance input box to support resource references with thumbnail display	2026-07-17 11:19:34 +08:00
HouYunFei	5a27aae99e	feat(changelog): update entries for canvas node enhancements and image reference display	2026-07-17 10:15:16 +08:00
HouYunFei	66961ce10f	feat(canvas-prompt-chip-input): implement new component for enhanced prompt input with reference chips	2026-07-17 10:06:57 +08:00