chore(changelog): add release notes for v0.6.0

fix(video): enhance video generation error handling and URL retrieval
2026-07-26 08:24:29 +08:00 · 2026-07-09 10:42:13 +08:00 · 2026-07-09 10:21:07 +08:00 · 2026-07-08 22:23:18 +08:00 · 2026-07-08 16:30:38 +08:00 · 2026-07-08 16:23:12 +08:00
36 changed files with 883 additions and 224 deletions
@@ -0,0 +1,52 @@
+name: GitHub Pages
+
+on:
+  push:
+    tags: ["v*"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v2
+
+      - name: Install dependencies
+        working-directory: web
+        run: bun install --frozen-lockfile
+
+      - name: Build
+        working-directory: web
+        env:
+          VITE_BASE: /${{ github.event.repository.name }}/
+        run: bun run build
+
+      - name: Add SPA fallback
+        run: cp web/dist/index.html web/dist/404.html
+
+      - uses: actions/configure-pages@v5
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: web/dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4
@@ -8,3 +8,4 @@ data/
 *.tsbuildinfo
 .DS_Store
 .idea
+web/dist
@@ -2,9 +2,19 @@

 ## Unreleased

+## v0.6.0 - 2026-07-09
+
 + [新增] 新增Codex App插件支持。
-+ [修复] 修复前端 TypeScript 构建报错。
+ [新增] 配置与用户偏好新增独立页面和 Codex 连接配置 Tab。
+ [新增] 新增GitHub Pages 前端静态站点发布 workflow。
+ [新增] 图片切图支持等分线直接拖拽调整，并可新增、删除和重置横向 / 纵向切图线。
 + [调整] Docker 运行镜像改为 nginx 静态托管。
+ [调整] 移除网站Agent模式，专注于连接Codex Agent操作画布
+ [修复] 修复生图工作台重试成功结果刷新后丢失的问题。
+ [修复] 修复 Gemini 调用格式生图未传递尺寸比例配置的问题。
+ [修复] 修复前端 TypeScript 构建报错。
+ [修复] 修复画布生成配置切换文本/视频/音频模式时模型仍显示为生图模型的问题。
+ [修复] 兼容中转站视频任务直接返回视频 URL 且没有 `/content` 接口的情况，并优化失败原因展示。

 ## v0.5.0 - 2026-07-05

@@ -8,12 +8,20 @@
  <a href="https://linux.do/"><img src="https://img.shields.io/badge/Linux.do-Community-2b6de8?style=flat-square" alt="Linux.do"></a>
  <a href="https://render.com/deploy?repo=https://github.com/basketikun/infinite-canvas"><img src="https://img.shields.io/badge/Render-Deploy-46e3b7?style=flat-square&logo=render&logoColor=111111" alt="Deploy to Render"></a>
  <a href="https://github.com/basketikun/infinite-canvas"><img src="https://img.shields.io/github/stars/basketikun/infinite-canvas?style=flat-square&logo=github" alt="GitHub stars"></a>
-  <a href="VERSION"><img src="https://img.shields.io/badge/version-v0.2.0-2563eb?style=flat-square" alt="Version"></a>
+  <a href="https://github.com/basketikun/infinite-canvas/tags"><img src="https://img.shields.io/github/v/tag/basketikun/infinite-canvas?style=flat-square&label=version" alt="Version"></a>
  <a href="LICENSE"><img src="https://img.shields.io/badge/license-AGPL--3.0-f97316?style=flat-square" alt="License"></a>
  <a href="https://vite.dev/"><img src="https://img.shields.io/badge/Vite-7-646cff?style=flat-square&logo=vite&logoColor=white" alt="Vite"></a>
  <a href="https://reactrouter.com/"><img src="https://img.shields.io/badge/React_Router-7-ca4245?style=flat-square&logo=reactrouter&logoColor=white" alt="React Router"></a>
 </p>

+<p align="center">
+  <a href="https://trendshift.io/repositories/50077?utm_source=trendshift-badge&amp;utm_medium=badge&amp;utm_campaign=badge-trendshift-50077" target="_blank" rel="noopener noreferrer"><img src="https://trendshift.io/api/badge/trendshift/repositories/50077/daily?language=TypeScript" alt="basketikun%2Finfinite-canvas | Trendshift" width="250" height="55"></a>
+</p>
+
+<p align="center">
+  <a href="docs/content/docs/overview/quick-start.mdx">快速开始</a> · <a href="docs/content/docs/overview/features.mdx">功能介绍</a> · <a href="docs/content/docs/overview/render.mdx">Render 部署</a> · <a href="docs/content/docs/overview/docker.mdx">Docker 部署</a> · <a href="docs/content/docs/canvas/canvas-node-manual.mdx">画布节点操作手册</a> · <a href="docs/content/docs/canvas/canvas-shortcuts.mdx">画布快捷键</a> · <a href="CLA.md">贡献者协议</a> · <a href="SECURITY.md">漏洞提交</a> · <a href="docs/content/docs/progress/todo.mdx">待办事项</a> · <a href="canvas-agent/README.md">本地 Canvas Agent</a> · <a href="plugins/infinite-canvas">Codex app 插件</a>
+</p>
+
 无限画布是一款面向图片创作的开源工作台。它把画布编排、AI 图片生成、参考图编辑、对话助手、提示词库和素材沉淀放在同一个界面里，适合用来探索视觉方案并连续迭代图片结果。

 > [!CAUTION]
@@ -34,16 +42,12 @@

 如果你在为担心没有合适的生图API来发愁，可以查看该免费生图项目：[chatgpt2api](https://github.com/basketikun/chatgpt2api)

-## 技术栈
-
- 前端：Vite、React、React Router、TypeScript、Tailwind CSS、Ant Design、Zustand、TanStack Query。
- 前端：提示词库、WebDAV 和 AI 接口都由浏览器前端直连。
- 部署：静态站点托管或 Docker。
-
 ## 快速开始

 AI API Key、Base URL、画布、素材和生成记录默认保存在浏览器本地。

+### 本地开发
+
 ```bash
 git clone git@github.com:basketikun/infinite-canvas.git
 cd infinite-canvas
@@ -52,11 +56,12 @@ bun install
 bun run dev
 ```

-Docker 运行：
+### Docker 运行

 ```bash
-docker build -t infinite-canvas .
-docker run --rm -p 3000:3000 infinite-canvas
+git clone git@github.com:basketikun/infinite-canvas.git
+cd infinite-canvas
+docker compose up -d
 ```

 运行后默认端口3000，可访问 `http://localhost:3000`。
@@ -95,19 +100,11 @@ https://canvas.best?apiKey={key}&baseUrl={address}
  </tr>
 </table>

-## 文档
+## 联系方式

- [快速开始](docs/content/docs/overview/quick-start.mdx)
- [功能介绍](docs/content/docs/overview/features.mdx)
- [Render 部署](docs/content/docs/overview/render.mdx)
- [Docker 部署](docs/content/docs/overview/docker.mdx)
- [画布节点操作手册](docs/content/docs/canvas/canvas-node-manual.mdx)
- [画布快捷键](docs/content/docs/canvas/canvas-shortcuts.mdx)
- [贡献者协议](CLA.md)
- [漏洞提交](SECURITY.md)
- [待办事项](docs/content/docs/progress/todo.mdx)
- [本地 Canvas Agent](canvas-agent/README.md)
- [Codex app 插件](plugins/infinite-canvas)
+项目定制二次开发需求 / 生图 API 需求可联系。
+
+邮箱：1844025705@qq.com · QQ：1844025705

 ## 赞助支持

@@ -1 +1 @@
-v0.5.0
+v0.6.0
@@ -35,8 +35,16 @@ async function runCodexTurnNow(prompt: string, emit: AgentEmit, attachments: Age
    try {
        files = await writeAttachmentFiles(attachments);
        codexApp ||= await CodexAppClient.start(emit);
-        const threadId = await ensureCodexThread(codexApp, options);
-        await codexApp.startTurn(threadId, prompt, files);
+        let threadId = await ensureCodexThread(codexApp, options, emit);
+        try {
+            await codexApp.startTurn(threadId, prompt, files);
+        } 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);
+        }
    } catch (error) {
        emit("agent_error", { message: errorMessage(error) });
    } finally {
@@ -96,14 +104,20 @@ export function runClaudeTurn(prompt: string, emit: AgentEmit) {
    pipeJsonLines(child, emit, "claude");
 }

-async function ensureCodexThread(app: CodexAppClient, options: CodexRunOptions) {
+async function ensureCodexThread(app: CodexAppClient, options: CodexRunOptions, emit: AgentEmit) {
    if (options.threadId) {
-        const result = await app.readThread(options.threadId, false);
-        assertThreadWorkspace(field(result, "thread") || {}, options.cwd);
-        const thread = await app.resumeThread(options.threadId, options.cwd);
-        assertThreadWorkspace(thread, options.cwd);
-        codexThreadId = String(field(thread, "id") || options.threadId);
-        return codexThreadId;
+        if (options.threadId === codexThreadId) return codexThreadId;
+        try {
+            const result = await app.readThread(options.threadId, false);
+            assertThreadWorkspace(field(result, "thread") || {}, options.cwd);
+            const thread = await app.resumeThread(options.threadId, options.cwd);
+            assertThreadWorkspace(thread, options.cwd);
+            codexThreadId = String(field(thread, "id") || options.threadId);
+            return codexThreadId;
+        } catch (error) {
+            if (!isRecoverableThreadError(error)) throw error;
+            emit("agent_log", { text: `Codex thread unavailable, starting a new thread: ${errorMessage(error)}` });
+        }
    }
    if (!codexThreadId) {
        const thread = await app.startThread(options.cwd);
@@ -112,6 +126,10 @@ async function ensureCodexThread(app: CodexAppClient, options: CodexRunOptions)
    return codexThreadId;
 }

+function isRecoverableThreadError(error: unknown) {
+    return /thread not loaded|no rollout found/i.test(errorMessage(error));
+}
+
 class CodexAppClient {
    private nextId = 1;
    private buffer = "";
@@ -18,13 +18,14 @@ export class CanvasSession {

    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" });
-        this.clients.set(clientId, res);
+        if (!statusOnly) this.clients.set(clientId, res);
        sendEvent(res, "hello", { ok: true, clientId });
        const timer = setInterval(() => sendEvent(res, "ping", { time: Date.now() }), 15000);
        res.on("close", () => {
            clearInterval(timer);
-            this.clients.delete(clientId);
+            if (!statusOnly) this.clients.delete(clientId);
            if (this.canvasState?.clientId === clientId) this.canvasState = null;
        });
    }
@@ -0,0 +1,173 @@
+---
+title: 本地 Codex 连接画布原理
+description: 说明 Canvas Agent、MCP、SSE 和浏览器画布之间如何交互
+---
+
+# 本地 Codex 连接画布原理
+
+本地 Codex 连接画布的核心不是让 Codex 直接控制浏览器，也不是模拟鼠标点击或操作 DOM，而是在用户电脑上运行一个 `Canvas Agent` 作为桥接服务。
+
+```txt
+Codex / 浏览器侧边栏
+        |
+        v
+本机 Canvas Agent
+        |
+        v
+浏览器画布 React 状态
+```
+
+真正的画布数据仍然在浏览器里，节点、连线、选区和视口都由前端 React 状态维护。Codex 只能通过 `Canvas Agent` 暴露的工具协议发出“读取画布”或“执行画布操作”的请求。
+
+## 两个使用方向
+
+### 1. 本地 Codex 主动连接画布
+
+这个方向的入口在 Codex。
+
+```txt
+本地 Codex
+  -> infinite-canvas MCP 工具
+  -> 本机 Canvas Agent
+  -> 浏览器画布
+```
+
+用户在本地 Codex 里发起请求，例如读取画布、创建文本节点、连接节点或触发生成。Codex 调用 `infinite-canvas` MCP 工具，MCP 工具再请求本机 `Canvas Agent` 的 `/api/tools` 接口。
+
+常见工具包括：
+
+- `canvas_get_state`：读取当前画布摘要。
+- `canvas_get_selection`：读取当前选区。
+- `canvas_apply_ops`：批量执行画布操作。
+- `canvas_create_text_node`：创建文本节点。
+- `canvas_generate_image` / `canvas_generate_text`：创建生成流程并触发生成。
+- `canvas_update_node` / `canvas_connect_nodes`：更新节点或连接节点。
+
+这条链路适合在 Codex 对话里直接让 Codex 操作当前打开的画布。
+
+### 2. 浏览器右侧面板主动打开 Codex
+
+这个方向的入口在浏览器。
+
+```txt
+浏览器右侧 Codex 面板
+  -> 本机 Canvas Agent
+  -> Codex app-server --stdio
+  -> infinite-canvas MCP 工具
+  -> 本机 Canvas Agent
+  -> 浏览器画布
+```
+
+用户在网页右侧面板输入提示词后，浏览器把请求发送到 `Canvas Agent` 的 `/agent/codex/turn` 接口。`Canvas Agent` 会在本机启动或复用 `codex app-server --stdio`，并给这个 Codex 会话注入同一套 `infinite-canvas` MCP 工具。
+
+所以即使入口在浏览器右侧面板，真正改动画布时仍然会回到同一条工具链路：
+
+```txt
+Codex -> MCP -> Canvas Agent -> 浏览器画布
+```
+
+右侧面板只是把“打开 Codex 会话、发送 prompt、展示流式事件”这件事搬到了网页里。
+
+## 浏览器和 Canvas Agent 如何连接
+
+`Canvas Agent` 默认监听本机地址：
+
+```txt
+http://127.0.0.1:17371
+```
+
+启动后会生成 `Connect token`，网页连接时必须携带 token。浏览器连接后会建立一条 SSE 长连接：
+
+```txt
+GET /events?token=xxx&clientId=xxx
+```
+
+连接成功后，`Canvas Agent` 会发送 `hello` 事件，浏览器把状态更新为已连接。
+
+## 画布状态如何同步给 Codex
+
+浏览器会把当前画布快照主动同步给 `Canvas Agent`：
+
+```txt
+POST /canvas/state?token=xxx&clientId=xxx
+```
+
+快照包含：
+
+- 当前画布 ID 和标题；
+- 节点列表；
+- 连线列表；
+- 当前选中的节点 ID；
+- 当前视口位置和缩放。
+
+`Canvas Agent` 把最近一次快照保存在内存里。Codex 调用 `canvas_get_state` 时，读取的是这份由浏览器同步过来的最新快照，而不是直接读取浏览器 DOM。
+
+## Codex 如何操作画布
+
+以创建文本节点为例，流程如下：
+
+```txt
+Codex 调 canvas_create_text_node
+  -> MCP POST /api/tools
+  -> Canvas Agent 转成 canvas_apply_ops
+  -> Canvas Agent 通过 SSE 发送 tool_call
+  -> 浏览器执行 add_node
+  -> 浏览器 POST /canvas/result
+  -> Canvas Agent 返回结果给 Codex
+```
+
+`Canvas Agent` 会把一些高级工具转换成统一的画布操作：
+
+```json
+{
+  "ops": [
+    {
+      "type": "add_node",
+      "nodeType": "text",
+      "metadata": {
+        "content": "文本内容",
+        "status": "success"
+      }
+    }
+  ]
+}
+```
+
+浏览器收到 `tool_call` 后，调用前端的 `applyCanvasAgentOps`，在 React 状态中执行 `add_node`、`update_node`、`delete_node`、`connect_nodes`、`set_viewport`、`select_nodes` 等操作。执行完成后再把结果通过 `/canvas/result` 回传给 `Canvas Agent`。
+
+## 工具确认和撤销
+
+为了避免 Codex 直接改动画布，浏览器侧对 `canvas_apply_ops` 默认有二次确认机制。收到写操作后，右侧面板会先展示待执行工具调用，用户确认后才真正应用到画布。
+
+执行后，前端会保存最近一次操作前的画布快照，用于撤销上一轮 Agent 工具操作。
+
+如果关闭工具确认，本地 Codex 可以直接执行画布工具调用，但仍然是通过同一套 `Canvas Agent -> SSE -> 浏览器执行` 的链路。
+
+## 安全边界
+
+- `Canvas Agent` 默认只监听 `127.0.0.1`。
+- 网页连接必须携带本机生成的 `Connect token`。
+- 第一次带正确 token 连接后，`Canvas Agent` 会记录网页 Origin，避免其他来源复用当前本机 Agent。
+- Codex 不直接访问浏览器 DOM，也不直接持有画布内部状态。
+- 线上网页不保存本机 Codex 登录态、API Key 或本地文件权限。
+- 画布写操作最终由浏览器前端执行，因此可以在前端做确认、撤销和权限控制。
+
+## 一句话总结
+
+本地 Codex 连接画布的本质是：
+
+```txt
+Codex 调 MCP 工具，Canvas Agent 做本机桥接，浏览器通过 SSE 接收工具调用并在 React 状态中真正修改画布。
+```
+
+读状态是：
+
+```txt
+浏览器快照 -> Canvas Agent 内存 -> MCP 工具 -> Codex
+```
+
+写操作是：
+
+```txt
+Codex -> MCP 工具 -> Canvas Agent -> SSE tool_call -> 浏览器 applyOps -> /canvas/result -> Codex
+```
@@ -9,6 +9,7 @@
    "render",
    "docker",
    "third-party-prompt-repositories",
-    "[在线体验](https://canvas.best/)"
+    "[在线体验](https://canvas.best/)",
+    "local-codex-canvas"
  ]
 }
@@ -5,9 +5,19 @@ description: 当前版本已实现但仍需人工验证的变更项

 # 待测试

+- GitHub Pages：新增版本 tag 触发的前端静态站点自动发布 workflow，需在仓库 Pages 设置中选择 GitHub Actions 并验证路由刷新回退。
+- 画布图片切图：行数 / 列数会生成可直接拖拽的等分切图线，并支持新增横向 / 纵向线、删除单条线、重置切图线和切片数量预览。
 - Codex App 插件文档：新增插件安装教程，区分 AI 自动安装、手动安装和本仓库开发调试安装；同步优化插件 README 与技能说明。
+- 本地 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。
@@ -17,3 +27,7 @@ description: 当前版本已实现但仍需人工验证的变更项
 - Vercel 部署：新增 `web` 和 `docs` 两个子项目的 Vercel 配置，需分别验证静态前端和文档站部署。
 - Docker 部署：运行镜像从 Node serve 改为 nginx 静态托管，需验证前端路由刷新回退。
 - 环境变量：移除过期的后端 `.env.example` 示例文件。
+- 生图工作台：修复失败图片点击重试后只保存在页面状态、刷新或跳转后丢失的问题，重试成功结果会写入本地图片存储和生成记录。
+- 视频生成：任务查询接口直接返回 `url` / `result_url` / `video_url` 时会跳过 `/content` 下载，并优先保存到浏览器本地媒体存储。
+- 视频生成：任务创建或查询失败时会解析接口返回的 `msg` / `message` / 嵌套 JSON 错误，并在生成结果失败卡片里展示真实原因。
+- 画布生成配置：修复切换文本/视频/音频模式时模型选择仍显示为生图模型（gpt-image-2）的问题，切换模式后应自动匹配对应能力的默认模型。
@@ -40,3 +40,7 @@

 - 当前画布项目和“我的素材”主要保存在浏览器本地，跨设备可自行配置 WebDAV 同步。
 - AI API Key 保存在浏览器本地，并由前端直接请求 OpenAI 兼容接口。
+
+## 原理说明
+
+- [本地 Codex 连接画布原理](/docs/overview/local-codex-canvas)
@@ -0,0 +1,7 @@
+{
+  "framework": "vite",
+  "installCommand": "cd web && bun install",
+  "buildCommand": "cd web && bun run build",
+  "outputDirectory": "web/dist",
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+}
@@ -5,7 +5,8 @@
    "type": "module",
    "scripts": {
        "dev": "vite --host 0.0.0.0 --port 3000",
-        "build": "tsc --noEmit && vite build",
+        "build": "vite build",
+        "typecheck": "tsc --noEmit",
        "start": "vite preview --host 0.0.0.0 --port 3000",
        "format": "prettier --write .",
        "format:check": "prettier --check ."
@@ -2,11 +2,11 @@ import { useEffect, useRef, useState, type ReactNode } from "react";
 import { Button, Tooltip } from "antd";
 import { ArrowUp, CheckCircle2, CircleAlert, ImagePlus, LoaderCircle, UserRound, Wrench, X, XCircle } from "lucide-react";

+import { isPlainEnterKey } from "@/lib/keyboard-event";
 import { canvasThemes } from "@/lib/canvas-theme";
 import type { LocalUser } from "@/stores/use-user-store";

 export type CanvasAgentChatAttachment = { id: string; name: string; url: string };
-export type CanvasAgentMode = "online" | "local";
 export type CanvasAgentChatMessage = {
    id: string;
    role: "user" | "assistant" | "system" | "tool" | "error";
@@ -198,7 +198,7 @@ export function AgentChatComposer({
                        void onAddFiles(images);
                    }}
                    onKeyDown={(event) => {
-                        if (event.key !== "Enter" || event.shiftKey || event.ctrlKey || event.metaKey) return;
+                        if (!isPlainEnterKey(event)) return;
                        event.preventDefault();
                        void onSubmit();
                    }}
@@ -228,18 +228,6 @@ export function AgentChatComposer({
    );
 }

-export function AgentModeSwitch({ value, theme, onChange }: { value: CanvasAgentMode; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; onChange: (value: CanvasAgentMode) => void }) {
-    return (
-        <div className="inline-flex shrink-0 rounded-lg border p-0.5 text-xs" style={{ borderColor: theme.node.stroke }}>
-            {(["online", "local"] as const).map((item) => (
-                <button key={item} type="button" className="rounded-md px-2 py-1 transition" style={{ background: value === item ? theme.node.fill : "transparent", color: value === item ? theme.node.text : theme.node.muted }} onClick={() => onChange(item)}>
-                    {item === "online" ? "网站" : "本机"}
-                </button>
-            ))}
-        </div>
-    );
-}
-
 export function AgentPanelTabs<T extends string>({ value, items, theme, right, onChange }: { value: T; items: { value: T; label: string; icon?: ReactNode; count?: number }[]; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; right?: ReactNode; onChange: (value: T) => void }) {
    return (
        <div className="border-b px-3" style={{ borderColor: theme.node.stroke }}>
@@ -16,7 +16,7 @@ import { imageReferenceLabel } from "@/lib/image-reference-prompt";
 import { DiaTextReveal } from "@/components/ui/dia-text-reveal";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
 import { CanvasPromptLibrary } from "./canvas-prompt-library";
-import { AgentChatComposer, AgentChatMessage, AgentModeSwitch, AgentPanelTabs, AgentWorkingMessage, type CanvasAgentChatMessage, type CanvasAgentMode } from "./canvas-agent-chat-ui";
+import { AgentChatComposer, AgentChatMessage, AgentPanelTabs, AgentWorkingMessage, type CanvasAgentChatMessage } from "./canvas-agent-chat-ui";
 import { CanvasLocalAgentPanel } from "./canvas-local-agent-panel";
 import { NODE_DEFAULT_SIZE } from "@/constant/canvas";
 import { CanvasNodeType, type CanvasAssistantMessage, type CanvasAssistantReference, type CanvasAssistantSession, type CanvasNodeData } from "@/types/canvas";
@@ -133,14 +133,12 @@ type CanvasAssistantPanelProps = {
    canUndoOps: boolean;
    onUndoOps: () => CanvasAgentSnapshot | null;
    onPasteImage: (file: File) => void;
-    agentMode: CanvasAgentMode;
-    onAgentModeChange: (mode: CanvasAgentMode) => void;
    autoConnectLocal?: boolean;
    closing: boolean;
    onCollapse: () => void;
 };

-export function CanvasAssistantPanel({ nodes, selectedNodeIds, snapshot, sessions, activeSessionId, onSelectNodeIds, onSessionsChange, onApplyOps, canUndoOps, onUndoOps, onPasteImage, agentMode, onAgentModeChange, autoConnectLocal, closing, onCollapse }: CanvasAssistantPanelProps) {
+export function CanvasAssistantPanel({ nodes, selectedNodeIds, snapshot, sessions, activeSessionId, onSelectNodeIds, onSessionsChange, onApplyOps, canUndoOps, onUndoOps, onPasteImage, autoConnectLocal, closing, onCollapse }: CanvasAssistantPanelProps) {
    const theme = canvasThemes[useThemeStore((state) => state.theme)];
    const user = useUserStore((state) => state.user);
    const effectiveConfig = useEffectiveConfig();
@@ -642,7 +640,6 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, snapshot, session
                        </div>
                    </div>
                    <div className="flex shrink-0 items-center gap-2">
-                        <AgentModeSwitch value={agentMode} theme={theme} onChange={onAgentModeChange} />
                        <label className="flex items-center gap-1.5 text-xs" style={{ color: theme.node.muted }}>
                            <Switch size="small" checked={confirmTools} onChange={(confirmTools) => setAgentState({ confirmTools })} />
                            工具确认
@@ -652,18 +649,14 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, snapshot, session
                        </Tooltip>
                    </div>
                </header>
-                {agentMode === "local" ? (
-                    <CanvasLocalAgentPanel
-                        embedded
-                        snapshot={snapshot}
-                        canUndoOps={canUndoOps}
-                        onApplyOps={onApplyOps}
-                        onUndoOps={onUndoOps}
-                        autoConnect={autoConnectLocal}
-                    />
-                ) : (
-                    onlineContent
-                )}
+                <CanvasLocalAgentPanel
+                    embedded
+                    snapshot={snapshot}
+                    canUndoOps={canUndoOps}
+                    onApplyOps={onApplyOps}
+                    onUndoOps={onUndoOps}
+                    autoConnect={autoConnectLocal}
+                />
            </motion.aside>
        </motion.div>
    );
@@ -3,8 +3,7 @@ import { Image as ImageIcon, LoaderCircle, MessageSquare, Music2, Play, Settings
 import { Button, Segmented } from "antd";

 import { ModelPicker } from "@/components/model-picker";
-import { defaultConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
-import { CreditSymbol, requestCreditCost } from "@/constant/credits";
+import { defaultConfig, modelMatchesCapability, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
 import { canvasThemes } from "@/lib/canvas-theme";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
@@ -28,8 +27,6 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, onConfigC
    const theme = canvasThemes[useThemeStore((state) => state.theme)];
    const mode = node.metadata?.generationMode || "image";
    const config = buildNodeConfig(globalConfig, node, mode);
-    const count = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(config.count)) || 1)));
-    const credits = requestCreditCost({ channelMode: config.channelMode, model: config.model, count: mode === "image" ? count : 1 });
    const chipStyle = { background: theme.node.fill, borderColor: theme.node.stroke, color: theme.node.text };
    const hasAnyInput = Boolean(inputSummary.textCount || inputSummary.imageCount || inputSummary.videoCount || inputSummary.audioCount);
    const hasComposerContent = Boolean((node.metadata?.composerContent ?? node.metadata?.prompt ?? "").trim());
@@ -126,10 +123,6 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, onConfigC
                        </>
                    ) : (
                        <>
-                            <span className="inline-flex items-center gap-1">
-                                <CreditSymbol />
-                                {credits.toLocaleString()}
-                            </span>
                            <Play className="size-4" />
                            <span>开始生成</span>
                        </>
@@ -151,9 +144,16 @@ function InputChip({ label, value, style }: { label: string; value: string; styl

 function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: CanvasGenerationMode): AiConfig {
    const defaultModel = mode === "image" ? globalConfig.imageModel : mode === "video" ? globalConfig.videoModel : mode === "audio" ? globalConfig.audioModel : globalConfig.textModel;
+    const fallbackModel = mode === "image" ? defaultConfig.imageModel : mode === "video" ? defaultConfig.videoModel : mode === "audio" ? defaultConfig.audioModel : defaultConfig.textModel;
+    const currentModel = node.metadata?.model;
+    const model = currentModel && modelMatchesCapability(currentModel, mode)
+        ? currentModel
+        : defaultModel && modelMatchesCapability(defaultModel, mode)
+            ? defaultModel
+            : fallbackModel;
    return {
        ...globalConfig,
-        model: node.metadata?.model || defaultModel || (mode === "audio" ? defaultConfig.audioModel : globalConfig.model || defaultConfig.model),
+        model,
        quality: node.metadata?.quality || globalConfig.quality || defaultConfig.quality,
        size: node.metadata?.size || globalConfig.size || defaultConfig.size,
        videoSeconds: node.metadata?.seconds || globalConfig.videoSeconds || defaultConfig.videoSeconds,
@@ -64,14 +64,14 @@ export function CanvasLocalAgentPanel({ snapshot, canUndoOps, collapsed, embedde
        setAgentState({ loadingThreads: true });
        try {
            const data = await fetchAgentJson<AgentThreadsResponse>(endpoint, token, `/agent/codex/threads?canvasId=${encodeURIComponent(projectId)}`);
-            const current = useCanvasAgentStore.getState();
+            const nextThreadId = data.workspace?.activeThreadId || "";
            setAgentState({
                threads: data.data || [],
-                workspacePath: data.workspace?.workspacePath || current.workspacePath,
-                activeThreadId: data.workspace?.activeThreadId || current.activeThreadId,
+                workspacePath: data.workspace?.workspacePath || "",
+                activeThreadId: nextThreadId,
+                messages: [],
            });
-            const nextThreadId = data.workspace?.activeThreadId || current.activeThreadId;
-            if (nextThreadId && !current.messages.length) {
+            if (nextThreadId) {
                const thread = await fetchAgentJson<AgentThreadResponse>(endpoint, token, `/agent/codex/threads/${encodeURIComponent(nextThreadId)}?canvasId=${encodeURIComponent(projectId)}`);
                setAgentState({ messages: normalizeHistoryMessages(thread.messages || []) });
            }
@@ -152,13 +152,17 @@ export function CanvasLocalAgentPanel({ snapshot, canUndoOps, collapsed, embedde
        return () => {
            source.close();
            connectedRef.current = false;
-            setAgentState({ connected: false });
        };
    }, [enabled, endpoint, loadThreads, message, setAgentState, token]);

    useEffect(() => {
        if (connected) void loadThreads();
-    }, [connected, loadThreads, snapshot.projectId]);
+    }, [connected, loadThreads]);
+
+    useEffect(() => {
+        clearAgentSession({ activity: connected ? "切换画布" : activity });
+        if (connected) void loadThreads();
+    }, [snapshot.projectId]);

    useEffect(() => {
        if (!connected) return;
@@ -3,8 +3,7 @@ import { ArrowUp, LoaderCircle, Square } from "lucide-react";
 import { Button } from "antd";

 import { ModelPicker } from "@/components/model-picker";
-import { defaultConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
-import { CreditSymbol, requestCreditCost } from "@/constant/credits";
+import { defaultConfig, modelMatchesCapability, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
 import { canvasThemes } from "@/lib/canvas-theme";
 import { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
@@ -38,7 +37,6 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
    const hasImageContent = node.type === CanvasNodeType.Image && Boolean(node.metadata?.content);
    const isEditingExistingContent = hasTextContent || hasImageContent;
    const [prompt, setPrompt] = useState(isEditingExistingContent ? "" : node.metadata?.prompt || "");
-    const credits = requestCreditCost({ channelMode: config.channelMode, model: config.model, count: mode === "image" ? config.count : 1 });

    useEffect(() => {
        setPrompt(isEditingExistingContent ? "" : node.metadata?.prompt || "");
@@ -119,13 +117,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
                                <span className="text-xs font-medium">停止</span>
                            </>
                        ) : (
-                            <>
-                                <span className="inline-flex items-center gap-1 text-xs font-medium tabular-nums">
-                                    <CreditSymbol />
-                                    {credits.toLocaleString()}
-                                </span>
-                                <ArrowUp className="size-4" />
-                            </>
+                            <ArrowUp className="size-4" />
                        )}
                    </span>
                </Button>
@@ -140,9 +132,16 @@ function defaultMode(type: CanvasNodeData["type"]): CanvasNodeGenerationMode {

 function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: CanvasNodeGenerationMode): AiConfig {
    const defaultModel = mode === "image" ? globalConfig.imageModel : mode === "video" ? globalConfig.videoModel : mode === "audio" ? globalConfig.audioModel : globalConfig.textModel;
+    const fallbackModel = mode === "image" ? defaultConfig.imageModel : mode === "video" ? defaultConfig.videoModel : mode === "audio" ? defaultConfig.audioModel : defaultConfig.textModel;
+    const currentModel = node.metadata?.model;
+    const model = currentModel && modelMatchesCapability(currentModel, mode)
+        ? currentModel
+        : defaultModel && modelMatchesCapability(defaultModel, mode)
+            ? defaultModel
+            : fallbackModel;
    return {
        ...globalConfig,
-        model: node.metadata?.model || defaultModel || (mode === "audio" ? defaultConfig.audioModel : globalConfig.model || defaultConfig.model),
+        model,
        quality: node.metadata?.quality || globalConfig.quality || defaultConfig.quality,
        size: node.metadata?.size || globalConfig.size || defaultConfig.size,
        videoSeconds: node.metadata?.seconds || globalConfig.videoSeconds || defaultConfig.videoSeconds,
@@ -1,24 +1,32 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
 import { Button, InputNumber, Modal } from "antd";
-import { Grid2x2 } from "lucide-react";
+import { Grid2x2, ListRestart, PanelTop, Rows3, Trash2 } from "lucide-react";

 import { readImageMeta } from "@/lib/image-utils";
 import type { ImageSplitParams } from "@/lib/canvas/canvas-image-data";

 export type CanvasImageSplitParams = ImageSplitParams;

-const defaultParams: CanvasImageSplitParams = { rows: 2, columns: 2 };
+const defaultParams: CanvasImageSplitParams = { rows: 2, columns: 2, horizontalLines: [0.5], verticalLines: [0.5] };
 const maxGridSize = 12;
+type ActiveLine = { axis: "horizontal" | "vertical"; index: number } | null;

 export function CanvasNodeSplitDialog({ dataUrl, open, onClose, onConfirm }: { dataUrl: string; open: boolean; onClose: () => void; onConfirm: (params: CanvasImageSplitParams) => void }) {
    const [params, setParams] = useState(defaultParams);
    const [image, setImage] = useState<{ width: number; height: number } | null>(null);
-    const total = params.rows * params.columns;
-    const pieceSize = image ? { width: Math.max(1, Math.floor(image.width / params.columns)), height: Math.max(1, Math.floor(image.height / params.rows)) } : null;
+    const [active, setActive] = useState<ActiveLine>(null);
+    const previewRef = useRef<HTMLDivElement>(null);
+    const horizontalLines = params.horizontalLines || [];
+    const verticalLines = params.verticalLines || [];
+    const rows = horizontalLines.length + 1;
+    const columns = verticalLines.length + 1;
+    const total = rows * columns;
+    const pieceSize = image ? { width: Math.max(1, Math.floor(image.width / columns)), height: Math.max(1, Math.floor(image.height / rows)) } : null;

    useEffect(() => {
        if (!open) return;
        setParams(defaultParams);
+        setActive(null);
        setImage(null);
    }, [dataUrl, open]);

@@ -27,9 +35,53 @@ export function CanvasNodeSplitDialog({ dataUrl, open, onClose, onConfirm }: { d
        void readImageMeta(dataUrl).then(setImage);
    }, [dataUrl, open]);

-    const update = (key: keyof CanvasImageSplitParams, value: string | number | null) => {
-        setParams((current) => ({ ...current, [key]: clampGrid(value ?? current[key]) }));
+    const update = (key: "rows" | "columns", value: string | number | null) => {
+        const count = clampGrid(value ?? params[key]);
+        setActive(null);
+        setParams((current) => ({ ...current, [key]: count, [key === "rows" ? "horizontalLines" : "verticalLines"]: buildGridLines(count) }));
    };
+    const addLine = (axis: "horizontal" | "vertical") => {
+        setParams((current) => {
+            const key = axis === "horizontal" ? "horizontalLines" : "verticalLines";
+            const lines = [...(current[key] || []), findLineSpot(current[key] || [])].sort((a, b) => a - b);
+            return { ...current, [key]: lines, rows: axis === "horizontal" ? lines.length + 1 : current.rows, columns: axis === "vertical" ? lines.length + 1 : current.columns };
+        });
+    };
+    const deleteLine = () => {
+        if (!active) return;
+        setParams((current) => {
+            const key = active.axis === "horizontal" ? "horizontalLines" : "verticalLines";
+            const lines = (current[key] || []).filter((_, index) => index !== active.index);
+            return { ...current, [key]: lines, rows: active.axis === "horizontal" ? lines.length + 1 : current.rows, columns: active.axis === "vertical" ? lines.length + 1 : current.columns };
+        });
+        setActive(null);
+    };
+    const startDrag = (axis: "horizontal" | "vertical", index: number, event: ReactPointerEvent) => {
+        event.preventDefault();
+        setActive({ axis, index });
+        const box = previewRef.current?.getBoundingClientRect();
+        if (!box) return;
+        const move = (moveEvent: PointerEvent) => setLine(axis, index, axis === "horizontal" ? (moveEvent.clientY - box.top) / box.height : (moveEvent.clientX - box.left) / box.width);
+        const up = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+    };
+    const setLine = (axis: "horizontal" | "vertical", index: number, value: number) => {
+        setParams((current) => {
+            const key = axis === "horizontal" ? "horizontalLines" : "verticalLines";
+            const lines = [...(current[key] || [])];
+            lines[index] = clampLine(value, lines[index - 1] ?? 0, lines[index + 1] ?? 1);
+            return { ...current, [key]: lines };
+        });
+    };
+    const resetLines = () => {
+        setActive(null);
+        setParams((current) => ({ ...current, horizontalLines: buildGridLines(current.rows), verticalLines: buildGridLines(current.columns) }));
+    };
+    const confirmParams = { ...params, horizontalLines, verticalLines, rows, columns };

    return (
        <Modal title={null} open={open && Boolean(dataUrl)} onCancel={onClose} footer={null} width={780} centered destroyOnHidden>
@@ -41,9 +93,9 @@ export function CanvasNodeSplitDialog({ dataUrl, open, onClose, onConfirm }: { d
                <div className="grid gap-6 md:grid-cols-[minmax(260px,1fr)_280px]">
                    <div className="rounded-xl border p-4">
                        <div className="grid min-h-[300px] place-items-center rounded-lg bg-black/5">
-                            <div className="relative inline-block max-w-full overflow-hidden rounded-lg bg-black shadow-xl">
+                            <div ref={previewRef} className="relative inline-block max-w-full overflow-hidden rounded-lg bg-black shadow-xl">
                                <img src={dataUrl} alt="" className="block max-h-[340px] max-w-full object-contain opacity-95" draggable={false} />
-                                <SplitGrid rows={params.rows} columns={params.columns} />
+                                <SplitGrid horizontalLines={horizontalLines} verticalLines={verticalLines} active={active} onPointerDown={startDrag} />
                            </div>
                        </div>
                        <div className="mt-3 flex items-center justify-between text-sm">
@@ -52,19 +104,25 @@ export function CanvasNodeSplitDialog({ dataUrl, open, onClose, onConfirm }: { d
                        </div>
                    </div>
                    <div className="space-y-5 py-2">
-                        <NumberField label="行数" value={params.rows} onChange={(value) => update("rows", value)} />
-                        <NumberField label="列数" value={params.columns} onChange={(value) => update("columns", value)} />
+                        <NumberField label="行数" value={rows} onChange={(value) => update("rows", value)} />
+                        <NumberField label="列数" value={columns} onChange={(value) => update("columns", value)} />
+                        <div className="grid grid-cols-2 gap-2">
+                            <Button icon={<Rows3 className="size-4" />} onClick={() => addLine("horizontal")}>横向线</Button>
+                            <Button icon={<PanelTop className="size-4 rotate-90" />} onClick={() => addLine("vertical")}>纵向线</Button>
+                            <Button icon={<Trash2 className="size-4" />} disabled={!active} onClick={deleteLine}>删除线</Button>
+                            <Button icon={<ListRestart className="size-4" />} onClick={resetLines}>重置线</Button>
+                        </div>
                        <div className="rounded-xl border px-4 py-3 text-sm">
                            <div className="flex items-center justify-between">
-                                <span className="opacity-60">子节点</span>
+                                <span className="opacity-60">切片数量</span>
                                <span className="font-semibold">{total} 个</span>
                            </div>
                            <div className="mt-2 flex items-center justify-between">
-                                <span className="opacity-60">单块约</span>
+                                <span className="opacity-60">平均约</span>
                                <span className="font-semibold">{pieceSize ? `${pieceSize.width} x ${pieceSize.height}` : "未知"}</span>
                            </div>
                        </div>
-                        <Button type="primary" size="large" className="w-full" icon={<Grid2x2 className="size-4" />} onClick={() => onConfirm(params)}>
+                        <Button type="primary" size="large" className="w-full" icon={<Grid2x2 className="size-4" />} onClick={() => onConfirm(confirmParams)}>
                            生成子节点
                        </Button>
                    </div>
@@ -83,19 +141,45 @@ function NumberField({ label, value, onChange }: { label: string; value: number;
    );
 }

-function SplitGrid({ rows, columns }: CanvasImageSplitParams) {
+function SplitGrid({ horizontalLines, verticalLines, active, onPointerDown }: { horizontalLines: number[]; verticalLines: number[]; active: ActiveLine; onPointerDown: (axis: "horizontal" | "vertical", index: number, event: ReactPointerEvent) => void }) {
    return (
        <div className="pointer-events-none absolute inset-0">
-            {Array.from({ length: columns - 1 }).map((_, index) => (
-                <div key={`column-${index}`} className="absolute inset-y-0 border-l border-white/90 shadow-[0_0_0_1px_rgba(0,0,0,.35)]" style={{ left: `${((index + 1) / columns) * 100}%` }} />
+            {verticalLines.map((line, index) => (
+                <div key={`column-${index}`} className="pointer-events-auto absolute inset-y-0 -ml-2 w-4 cursor-ew-resize" style={{ left: `${line * 100}%` }} onPointerDown={(event) => onPointerDown("vertical", index, event)}>
+                    <div className={`absolute left-1/2 top-0 h-full border-l shadow-[0_0_0_1px_rgba(0,0,0,.35)] ${active?.axis === "vertical" && active.index === index ? "border-amber-300" : "border-white/90"}`} />
+                </div>
            ))}
-            {Array.from({ length: rows - 1 }).map((_, index) => (
-                <div key={`row-${index}`} className="absolute inset-x-0 border-t border-white/90 shadow-[0_0_0_1px_rgba(0,0,0,.35)]" style={{ top: `${((index + 1) / rows) * 100}%` }} />
+            {horizontalLines.map((line, index) => (
+                <div key={`row-${index}`} className="pointer-events-auto absolute inset-x-0 -mt-2 h-4 cursor-ns-resize" style={{ top: `${line * 100}%` }} onPointerDown={(event) => onPointerDown("horizontal", index, event)}>
+                    <div className={`absolute left-0 top-1/2 w-full border-t shadow-[0_0_0_1px_rgba(0,0,0,.35)] ${active?.axis === "horizontal" && active.index === index ? "border-amber-300" : "border-white/90"}`} />
+                </div>
            ))}
        </div>
    );
 }

+function buildGridLines(count: number) {
+    return Array.from({ length: Math.max(1, count) - 1 }, (_, index) => (index + 1) / count);
+}
+
+function findLineSpot(lines: number[]) {
+    const cuts = [0, ...lines, 1].sort((a, b) => a - b);
+    let spot = 0.5;
+    let max = 0;
+    for (let index = 0; index < cuts.length - 1; index += 1) {
+        const gap = cuts[index + 1] - cuts[index];
+        if (gap > max) {
+            max = gap;
+            spot = cuts[index] + gap / 2;
+        }
+    }
+    return spot;
+}
+
+function clampLine(value: number, min: number, max: number) {
+    return Math.min(max - 0.01, Math.max(min + 0.01, value));
+}
+
 function clampGrid(value: string | number) {
    const numberValue = Number(value);
    return Math.min(maxGridSize, Math.max(1, Math.round(Number.isFinite(numberValue) ? numberValue : 1)));
@@ -4,6 +4,7 @@ import { createPortal } from "react-dom";
 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";

@@ -131,6 +132,10 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
                    props.onPointerUp?.(event);
                }}
                onKeyDown={(event) => {
+                    if (isImeComposing(event)) {
+                        onKeyDown?.(event);
+                        return;
+                    }
                    if (mention && candidates.length) {
                        if (event.key === "ArrowDown") {
                            event.preventDefault();
@@ -153,7 +158,7 @@ export const CanvasResourceMentionTextarea = forwardRef<HTMLTextAreaElement, Pro
                            return;
                        }
                    }
-                    if (event.key === "Enter" && onSubmit && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+                    if (isPlainEnterKey(event) && onSubmit) {
                        event.preventDefault();
                        onSubmit();
                        return;
@@ -1,13 +1,14 @@
-import { App, Button, Form, Input, Modal, Progress, Select, Tabs } from "antd";
-import { CircleAlert, Cloud, Plus, RefreshCw, Trash2, Wifi } from "lucide-react";
-import { useState } from "react";
+import { App, Button, Form, Input, Modal, Progress, Select, Switch, Tabs } from "antd";
+import { CircleAlert, Cloud, KeyRound, Link2, Plus, RefreshCw, ShieldCheck, Trash2, Wifi } from "lucide-react";
+import { useEffect, useState } from "react";

 import { ModelPicker } from "@/components/model-picker";
 import { fetchChannelModels } from "@/services/api/image";
 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";
-import { createModelChannel, defaultBaseUrlForApiFormat, filterModelsByCapability, modelOptionLabel, modelOptionsFromChannels, normalizeModelOptionValue, useConfigStore, type AiConfig, type ApiCallFormat, type ModelCapability, type ModelChannel } from "@/stores/use-config-store";
+import { useCanvasAgentStore } from "@/stores/canvas/use-canvas-agent-store";
+import { createModelChannel, defaultBaseUrlForApiFormat, filterModelsByCapability, modelOptionLabel, modelOptionsFromChannels, normalizeModelOptionValue, useConfigStore, type AiConfig, type ApiCallFormat, type ConfigTabKey, type ModelCapability, type ModelChannel } from "@/stores/use-config-store";

 type ModelGroup = {
    capability: ModelCapability;
@@ -44,6 +45,11 @@ const webdavDomainLabels: Record<AppSyncDomainKey, string> = {
    "image-workbench": "生图工作台",
    "video-workbench": "视频创作台",
 };
+const codexSetupSteps = [
+    { title: "安装 Codex 插件", text: "先在 Codex App 安装 Infinite Canvas 插件，插件会注册 MCP 并尝试启动本地 Canvas Agent。" },
+    { title: "连接本地 Agent", text: "在本页填入 Local URL 和 Connect token 后点击连接。" },
+    { title: "手动启动备用", text: "如果插件没有自动启动本地服务，在终端运行下面命令。", command: "npx -y @basketikun/canvas-agent" },
+];

 function createWebdavDomainProgress(): Record<AppSyncDomainKey, WebdavDomainProgress> {
    return webdavDomainKeys.reduce(
@@ -55,9 +61,9 @@ function createWebdavDomainProgress(): Record<AppSyncDomainKey, WebdavDomainProg
    );
 }

-export function AppConfigModal() {
+export function AppConfigPanel({ showDoneButton = false, initialTab = "channels" }: { showDoneButton?: boolean; initialTab?: ConfigTabKey }) {
    const { message } = App.useApp();
-    const [activeTab, setActiveTab] = useState("channels");
+    const [activeTab, setActiveTab] = useState<ConfigTabKey>(initialTab);
    const [loadingChannelId, setLoadingChannelId] = useState("");
    const [testingWebdav, setTestingWebdav] = useState(false);
    const [syncingWebdav, setSyncingWebdav] = useState(false);
@@ -67,12 +73,22 @@ export function AppConfigModal() {
    const webdav = useConfigStore((state) => state.webdav);
    const updateConfig = useConfigStore((state) => state.updateConfig);
    const updateWebdavConfig = useConfigStore((state) => state.updateWebdavConfig);
-    const isConfigOpen = useConfigStore((state) => state.isConfigOpen);
    const shouldPromptContinue = useConfigStore((state) => state.shouldPromptContinue);
    const setConfigDialogOpen = useConfigStore((state) => state.setConfigDialogOpen);
    const clearPromptContinue = useConfigStore((state) => state.clearPromptContinue);
+    const agentUrl = useCanvasAgentStore((state) => state.url);
+    const agentToken = useCanvasAgentStore((state) => state.token);
+    const agentConnected = useCanvasAgentStore((state) => state.connected);
+    const agentEnabled = useCanvasAgentStore((state) => state.enabled);
+    const agentActivity = useCanvasAgentStore((state) => state.activity);
+    const agentConnectError = useCanvasAgentStore((state) => state.connectError);
+    const agentConfirmTools = useCanvasAgentStore((state) => state.confirmTools);
+    const setAgentState = useCanvasAgentStore((state) => state.setAgentState);
+    const connectAgent = useCanvasAgentStore((state) => state.connectAgent);
+    const disconnectAgent = useCanvasAgentStore((state) => state.disconnectAgent);
    const modelOptions = config.models.map((model) => ({ label: modelOptionLabel(config, model), value: model }));
    const webdavReady = Boolean(webdav.url.trim());
+    useEffect(() => setActiveTab(initialTab), [initialTab]);

    const saveConfig = (nextConfig: AiConfig) => {
        (Object.keys(nextConfig) as Array<keyof AiConfig>).forEach((key) => updateConfig(key, nextConfig[key]));
@@ -205,28 +221,19 @@ export function AppConfigModal() {
        }
    };

+    const updateAgentConfig = (patch: { url?: string; token?: string }) => {
+        setAgentState({ ...patch, connectError: "" });
+        if (patch.url !== undefined) localStorage.setItem("canvas-agent-url", patch.url.trim().replace(/\/$/, ""));
+        if (patch.token !== undefined) localStorage.setItem("canvas-agent-token", patch.token);
+    };
+
+    const toggleAgentConnection = () => (agentEnabled ? disconnectAgent({ connectError: "" }) : connectAgent());
+
    return (
-        <Modal
-            title={
-                <div>
-                    <div className="text-lg font-semibold">配置与用户偏好</div>
-                    <div className="mt-1 text-xs font-normal text-stone-500">渠道聚合、模型选择和同步偏好</div>
-                </div>
-            }
-            open={isConfigOpen}
-            width={980}
-            centered
-            onCancel={() => setConfigDialogOpen(false)}
-            styles={{ body: { maxHeight: "72vh", overflowY: "auto", paddingRight: 12 } }}
-            footer={
-                <Button type="primary" onClick={finishConfig}>
-                    完成
-                </Button>
-            }
-        >
+        <>
            <Tabs
                activeKey={activeTab}
-                onChange={setActiveTab}
+                onChange={(key) => setActiveTab(key as ConfigTabKey)}
                items={[
                    {
                        key: "channels",
@@ -415,8 +422,93 @@ export function AppConfigModal() {
                            </Form>
                        ),
                    },
+                    {
+                        key: "codex",
+                        label: "Codex",
+                        children: (
+                            <Form layout="vertical" requiredMark={false}>
+                                <section className="rounded-lg border border-stone-200 p-3 dark:border-stone-800">
+                                    <div className="mb-3 flex flex-wrap items-start justify-between gap-3">
+                                        <div>
+                                            <div className="flex items-center gap-2 text-sm font-semibold">
+                                                <Link2 className="size-4" />
+                                                连接本地 Codex
+                                            </div>
+                                            <div className="mt-1 text-xs text-stone-500">用于画布 Agent 连接本机 Codex 插件启动的 Canvas Agent。</div>
+                                        </div>
+                                        <div className={agentConnectError ? "text-xs text-red-600" : "text-xs text-stone-500"}>{agentConnectError ? "连接失败" : agentConnected ? agentActivity || "已连接" : agentEnabled ? "连接中" : "未连接"}</div>
+                                    </div>
+                                    <div className="mb-4 grid gap-2 md:grid-cols-3">
+                                        {codexSetupSteps.map((step, index) => (
+                                            <div key={step.title} className="rounded-md border border-stone-200 p-3 dark:border-stone-800">
+                                                <div className="text-xs font-semibold text-stone-500">步骤 {index + 1}</div>
+                                                <div className="mt-1 text-sm font-medium">{step.title}</div>
+                                                <div className="mt-1 text-xs leading-5 text-stone-500">{step.text}</div>
+                                                {step.command ? <code className="mt-2 block overflow-x-auto rounded bg-stone-100 px-2 py-1.5 text-[11px] text-stone-700 dark:bg-stone-900 dark:text-stone-200">{step.command}</code> : null}
+                                            </div>
+                                        ))}
+                                    </div>
+                                    <div className="grid gap-4 md:grid-cols-2">
+                                        <Form.Item label="Local URL" className="mb-4">
+                                            <Input prefix={<Link2 className="mr-1 size-4 text-stone-400" />} value={agentUrl} placeholder="http://127.0.0.1:17371" onChange={(event) => updateAgentConfig({ url: event.target.value })} />
+                                        </Form.Item>
+                                        <Form.Item label="Connect token" className="mb-4">
+                                            <Input.Password prefix={<KeyRound className="mr-1 size-4 text-stone-400" />} value={agentToken} placeholder="自动发现，或手动填入 Connect token" onChange={(event) => updateAgentConfig({ token: event.target.value })} />
+                                        </Form.Item>
+                                    </div>
+                                    {agentConnectError ? <div className="mb-3 rounded-md border border-red-200 px-3 py-2 text-xs text-red-600 dark:border-red-900/60">{agentConnectError}</div> : null}
+                                    <div className="mb-3 flex justify-end">
+                                        <Button type={agentEnabled ? "default" : "primary"} icon={<Wifi className="size-4" />} onClick={toggleAgentConnection}>
+                                            {agentConnected ? "断开" : agentEnabled ? "取消连接" : "连接"}
+                                        </Button>
+                                    </div>
+                                    <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-stone-200 px-3 py-2 dark:border-stone-800">
+                                        <div className="flex min-w-0 items-center gap-2">
+                                            <ShieldCheck className="size-4 text-stone-500" />
+                                            <div>
+                                                <div className="text-sm font-medium">执行画布操作前确认</div>
+                                                <div className="mt-0.5 text-xs text-stone-500">关闭后，本地 Codex 可直接执行画布工具调用。不再需要人工确认</div>
+                                            </div>
+                                        </div>
+                                        <Switch checked={agentConfirmTools} onChange={(confirmTools) => setAgentState({ confirmTools })} />
+                                    </div>
+                                </section>
+                            </Form>
+                        ),
+                    },
                ]}
            />
+            {showDoneButton ? (
+                <div className="mt-4 flex justify-end">
+                    <Button type="primary" onClick={finishConfig}>
+                        完成
+                    </Button>
+                </div>
+            ) : null}
+        </>
+    );
+}
+
+export function AppConfigModal() {
+    const isConfigOpen = useConfigStore((state) => state.isConfigOpen);
+    const configTab = useConfigStore((state) => state.configTab);
+    const setConfigDialogOpen = useConfigStore((state) => state.setConfigDialogOpen);
+    return (
+        <Modal
+            title={
+                <div>
+                    <div className="text-lg font-semibold">配置与用户偏好</div>
+                    <div className="mt-1 text-xs font-normal text-stone-500">渠道聚合、模型选择和同步偏好</div>
+                </div>
+            }
+            open={isConfigOpen}
+            width={980}
+            centered
+            onCancel={() => setConfigDialogOpen(false)}
+            styles={{ body: { maxHeight: "72vh", overflowY: "auto", paddingRight: 12 } }}
+            footer={null}
+        >
+            <AppConfigPanel showDoneButton initialTab={configTab} />
        </Modal>
    );
 }
@@ -1,4 +1,5 @@
 import { Menu } from "lucide-react";
+import { Button, Tooltip } from "antd";
 import { Link, useLocation } from "react-router-dom";

 import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
@@ -6,19 +7,32 @@ import { AppConfigModal } from "@/components/layout/app-config-modal";
 import { MobileNavDrawer } from "@/components/layout/mobile-nav-drawer";
 import { UserStatusActions } from "@/components/layout/user-status-actions";
 import { cn } from "@/lib/utils";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useCanvasAgentStore } from "@/stores/canvas/use-canvas-agent-store";
+import { useConfigStore } from "@/stores/use-config-store";

 export function AppTopNav() {
    const { pathname } = useLocation();
    const [mobileNavOpen, setMobileNavOpen] = useState(false);
+    const autoConnectRef = useRef(false);
+    const agentToken = useCanvasAgentStore((state) => state.token);
+    const agentEnabled = useCanvasAgentStore((state) => state.enabled);
+    const agentConnected = useCanvasAgentStore((state) => state.connected);
+    const connectAgent = useCanvasAgentStore((state) => state.connectAgent);
    const hideHeader = /^\/canvas\/[^/]+/.test(pathname);
    const slug = pathname.split("/").filter(Boolean)[0];
    const activeToolSlug = navigationTools.some((tool) => tool.slug === slug) ? (slug as NavigationToolSlug) : undefined;

+    useEffect(() => {
+        if (autoConnectRef.current || agentEnabled || agentConnected || !agentToken.trim()) return;
+        autoConnectRef.current = true;
+        connectAgent();
+    }, [agentConnected, agentEnabled, agentToken, connectAgent]);
+
    return (
        <>
            {!hideHeader ? (
-                <header className="sticky top-0 z-20 h-16 shrink-0 border-b border-stone-200 bg-background/90 backdrop-blur-xl dark:border-stone-800">
+                <header className="sticky top-0 z-20 h-14 shrink-0 border-b border-stone-200 bg-background/90 backdrop-blur-xl dark:border-stone-800">
                    <div className="mx-auto flex h-full max-w-7xl items-stretch justify-between gap-5 px-6">
                        <div className="flex min-w-0 items-center">
                            <Link to="/" className="flex h-full shrink-0 items-center gap-2 text-sm font-semibold leading-none tracking-tight text-stone-950 transition hover:text-stone-600 dark:text-stone-100 dark:hover:text-stone-300">
@@ -42,7 +56,7 @@ export function AppTopNav() {
                                <Menu className="size-5" />
                            </button>

-                            <nav className="hide-scrollbar ml-8 hidden h-16 min-w-0 items-center gap-7 overflow-x-auto md:flex">
+                            <nav className="hide-scrollbar ml-8 hidden h-14 min-w-0 items-center gap-7 overflow-x-auto md:flex">
                                {navigationTools.map((tool) => {
                                    const Icon = tool.icon;
                                    const active = tool.slug === activeToolSlug;
@@ -51,7 +65,7 @@ export function AppTopNav() {
                                            key={tool.slug}
                                            to={`/${tool.slug}`}
                                            className={cn(
-                                                "relative flex h-16 shrink-0 items-center gap-2 text-sm leading-6 transition after:absolute after:inset-x-0 after:bottom-0 after:h-px",
+                                                "relative flex h-14 shrink-0 items-center gap-2 text-sm leading-6 transition after:absolute after:inset-x-0 after:bottom-0 after:h-px",
                                                active
                                                    ? "font-medium text-stone-950 after:bg-stone-950 dark:text-stone-100 dark:after:bg-stone-100"
                                                    : "text-stone-500 after:bg-transparent hover:text-stone-950 dark:text-stone-400 dark:hover:text-stone-100",
@@ -66,6 +80,7 @@ export function AppTopNav() {
                        </div>

                        <div className="my-auto flex h-9 min-w-0 items-center justify-end gap-2 justify-self-end whitespace-nowrap">
+                            <CodexStatusButton />
                            <UserStatusActions />
                        </div>
                    </div>
@@ -77,3 +92,21 @@ export function AppTopNav() {
        </>
    );
 }
+
+function CodexStatusButton() {
+    const connected = useCanvasAgentStore((state) => state.connected);
+    const enabled = useCanvasAgentStore((state) => state.enabled);
+    const activity = useCanvasAgentStore((state) => state.activity);
+    const connectError = useCanvasAgentStore((state) => state.connectError);
+    const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
+    const color = connectError ? "#dc2626" : connected ? "#16a34a" : enabled ? "#d97706" : "currentColor";
+    const title = connectError || (connected ? activity || "Codex 已连接" : enabled ? "Codex 连接中" : "Codex 未连接");
+    return (
+        <Tooltip title={title}>
+            <Button type="text" shape="circle" className="relative !h-8 !w-8 !min-w-8" onClick={() => openConfigDialog(false, "codex")} aria-label="Codex 连接状态">
+                <span className="mx-auto block size-4" style={{ background: color, WebkitMask: "url(/icons/openai.svg) center / contain no-repeat", mask: "url(/icons/openai.svg) center / contain no-repeat" }} />
+                <span className="absolute right-1 top-1 size-2 rounded-full border border-background" style={{ background: color }} />
+            </Button>
+        </Tooltip>
+    );
+}
@@ -1,25 +0,0 @@
-import type { ComponentProps } from "react";
-import { Zap } from "lucide-react";
-
-export function CreditSymbol({ className, ...props }: ComponentProps<"span">) {
-    return (
-        <span {...props} className={`inline-flex items-center justify-center ${className || ""}`}>
-            <Zap className="size-[1em] fill-current" strokeWidth={2.4} />
-        </span>
-    );
-}
-
-export type ModelCreditCost = {
-    model: string;
-    credits: number;
-};
-
-function modelCreditCost(modelCosts: ModelCreditCost[] | undefined, model: string) {
-    return modelCosts?.find((item) => item.model === model)?.credits || 0;
-}
-
-export function requestCreditCost(options: { channelMode: string; modelCosts?: ModelCreditCost[]; model: string; count?: string | number }) {
-    if (options.channelMode !== "remote") return 0;
-    const count = Math.max(1, Math.floor(Math.abs(Number(options.count)) || 1));
-    return modelCreditCost(options.modelCosts, options.model) * count;
-}
@@ -1,4 +1,4 @@
-import { FileText, ImagePlus, Images, Maximize2, Video } from "lucide-react";
+import { FileText, ImagePlus, Images, Maximize2, Settings2, Video } from "lucide-react";

 export const navigationTools = [
    {
@@ -26,6 +26,11 @@ export const navigationTools = [
        label: "我的素材",
        icon: Images,
    },
+    {
+        slug: "config",
+        label: "配置",
+        icon: Settings2,
+    },
 ] as const;

 export type NavigationToolSlug = (typeof navigationTools)[number]["slug"];
@@ -24,6 +24,8 @@ export type ImageUpscaleParams = {
 export type ImageSplitParams = {
    rows: number;
    columns: number;
+    horizontalLines?: number[];
+    verticalLines?: number[];
 };

 export type ImageSplitPiece = {
@@ -45,16 +47,16 @@ export async function cropDataUrl(dataUrl: string, crop?: ImageCropRect) {

 export async function splitDataUrl(dataUrl: string, params: ImageSplitParams): Promise<ImageSplitPiece[]> {
    const image = await loadImage(dataUrl);
-    const rows = Math.max(1, Math.floor(params.rows));
-    const columns = Math.max(1, Math.floor(params.columns));
+    const xCuts = buildSplitCuts(params.verticalLines, image.width, Math.max(1, Math.floor(params.columns)));
+    const yCuts = buildSplitCuts(params.horizontalLines, image.height, Math.max(1, Math.floor(params.rows)));
    const pieces: ImageSplitPiece[] = [];

-    for (let row = 0; row < rows; row += 1) {
-        const sy = Math.floor((row * image.height) / rows);
-        const sh = Math.floor(((row + 1) * image.height) / rows) - sy;
-        for (let column = 0; column < columns; column += 1) {
-            const sx = Math.floor((column * image.width) / columns);
-            const sw = Math.floor(((column + 1) * image.width) / columns) - sx;
+    for (let row = 0; row < yCuts.length - 1; row += 1) {
+        const sy = yCuts[row];
+        const sh = yCuts[row + 1] - sy;
+        for (let column = 0; column < xCuts.length - 1; column += 1) {
+            const sx = xCuts[column];
+            const sw = xCuts[column + 1] - sx;
            pieces.push({ row, column, dataUrl: drawCrop(image, sx, sy, sw, sh) });
        }
    }
@@ -62,6 +64,11 @@ export async function splitDataUrl(dataUrl: string, params: ImageSplitParams): P
    return pieces;
 }

+function buildSplitCuts(lines: number[] | undefined, size: number, count: number) {
+    if (!lines?.length) return Array.from({ length: count + 1 }, (_, index) => Math.floor((index * size) / count));
+    return [0, ...lines.map((line) => Math.round(line * size)).filter((line) => line > 0 && line < size).sort((a, b) => a - b), size];
+}
+
 export async function transformAngleDataUrl(dataUrl: string, params: ImageAngleTransform) {
    const image = await loadImage(dataUrl);
    const canvas = document.createElement("canvas");
@@ -0,0 +1,22 @@
+type NativeKeyboardEventLike = {
+    isComposing?: boolean;
+    keyCode?: number;
+    which?: number;
+};
+
+type KeyboardEventLike = NativeKeyboardEventLike & {
+    key?: string;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    nativeEvent?: NativeKeyboardEventLike;
+};
+
+export function isImeComposing(event: KeyboardEventLike) {
+    const nativeEvent = event.nativeEvent;
+    return Boolean(event.isComposing || nativeEvent?.isComposing || event.keyCode === 229 || event.which === 229 || nativeEvent?.keyCode === 229 || nativeEvent?.which === 229);
+}
+
+export function isPlainEnterKey(event: KeyboardEventLike) {
+    return event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey && !isImeComposing(event);
+}
@@ -45,7 +45,6 @@ import { useCanvasAgentStore } from "@/stores/canvas/use-canvas-agent-store";
 import { useCanvasStore } from "@/stores/canvas/use-canvas-store";
 import { applyCanvasAgentOps, type CanvasAgentOp, type CanvasAgentSnapshot } from "@/lib/canvas/canvas-agent-ops";
 import { buildCanvasResourceReferences, buildNodeMentionReferences } from "@/lib/canvas/canvas-resource-references";
-import type { CanvasAgentMode } from "@/components/canvas/canvas-agent-chat-ui";
 import {
    CanvasNodeType,
    type CanvasAssistantImage,
@@ -304,7 +303,6 @@ function InfiniteCanvasPage() {
    const [assistantCollapsed, setAssistantCollapsed] = useState(true);
    const [assistantMounted, setAssistantMounted] = useState(false);
    const [assistantClosing, setAssistantClosing] = useState(false);
-    const [agentMode, setAgentMode] = useState<CanvasAgentMode>("online");
    const [agentUndoSnapshot, setAgentUndoSnapshot] = useState<CanvasAgentSnapshot | null>(null);
    const codexAutoConnect = ["new", "recent", "choose"].includes(searchParams.get("mode") || "");
    const codexCompactAgent = codexAutoConnect && searchParams.has("agentUrl");
@@ -432,11 +430,7 @@ function InfiniteCanvasPage() {

    useEffect(() => {
        if (!projectLoaded || !["new", "recent", "choose"].includes(searchParams.get("mode") || "")) return;
-        if (searchParams.has("agentUrl")) {
-            setAgentMode("local");
-            return;
-        }
-        openAgent("local");
+        if (!searchParams.has("agentUrl")) openAgent();
    }, [projectLoaded, searchParams]);

    useEffect(() => {
@@ -2465,12 +2459,11 @@ function InfiniteCanvasPage() {
    );

    const assistantOpen = assistantMounted && !assistantCollapsed;
-    const openAgent = (mode: CanvasAgentMode = agentMode) => {
+    const openAgent = () => {
        if (agentCloseTimerRef.current) {
            clearTimeout(agentCloseTimerRef.current);
            agentCloseTimerRef.current = null;
        }
-        setAgentMode(mode);
        setAssistantMounted(true);
        setAssistantClosing(false);
        setAssistantCollapsed(false);
@@ -2509,7 +2502,7 @@ function InfiniteCanvasPage() {
                    onUndo={undoCanvas}
                    onRedo={redoCanvas}
                    agentOpen={assistantOpen}
-                    compactAgentStatus={codexCompactAgent ? { connected: localAgentConnected, enabled: localAgentEnabled, activity: localAgentActivity } : undefined}
+                    compactAgentStatus={{ connected: localAgentConnected, enabled: localAgentEnabled, activity: localAgentActivity }}
                    onToggleAgent={() => (assistantOpen ? closeAgent() : openAgent())}
                />

@@ -2806,8 +2799,6 @@ function InfiniteCanvasPage() {
                    canUndoOps={Boolean(agentUndoSnapshot)}
                    onUndoOps={undoAgentOps}
                    onPasteImage={pasteAssistantImage}
-                    agentMode={agentMode}
-                    onAgentModeChange={setAgentMode}
                    autoConnectLocal={codexAutoConnect}
                    closing={assistantClosing}
                    onCollapse={closeAgent}
@@ -2855,7 +2846,7 @@ function CanvasTopBar({
    onUndo: () => void;
    onRedo: () => void;
    agentOpen: boolean;
-    compactAgentStatus?: { connected: boolean; enabled: boolean; activity: string };
+    compactAgentStatus: { connected: boolean; enabled: boolean; activity: string };
    onToggleAgent: () => void;
 }) {
    const colorTheme = useThemeStore((state) => state.theme);
@@ -2924,10 +2915,10 @@ function CanvasTopBar({
                            </button>
                        )}
                    </div>
+                    <CompactAgentStatus status={compactAgentStatus} onClick={onToggleAgent} />
                </div>

                <div className="pointer-events-auto flex items-center gap-1.5">
-                    {compactAgentStatus ? <CompactAgentStatus status={compactAgentStatus} onClick={onToggleAgent} /> : null}
                    <UserStatusActions
                        variant="canvas"
                        onOpenShortcuts={() => setShortcutsOpen(true)}
@@ -2977,18 +2968,18 @@ function MenuLabel({ text, shortcut }: { text: string; shortcut: string }) {
 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 ? status.activity || "连接中" : "正在连接本地 Codex";
+    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-10 items-center gap-2 rounded-xl px-3 text-sm font-medium transition hover:opacity-85"
-            style={{ background: theme.toolbar.panel, color: theme.node.text, boxShadow: "0 10px 30px rgba(28,25,23,.10)" }}
+            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-[180px] truncate">{label}</span>
+            <span className="max-w-[140px] truncate">{label}</span>
        </button>
    );
 }
@@ -0,0 +1,15 @@
+import { AppConfigPanel } from "@/components/layout/app-config-modal";
+
+export default function ConfigPage() {
+    return (
+        <main className="h-full overflow-y-auto bg-background">
+            <div className="mx-auto max-w-6xl px-6 py-6">
+                <div className="mb-5">
+                    <h1 className="text-xl font-semibold text-stone-950 dark:text-stone-100">配置与用户偏好</h1>
+                    <p className="mt-1 text-sm text-stone-500">渠道聚合、模型选择、同步偏好和 Codex 连接配置</p>
+                </div>
+                <AppConfigPanel />
+            </div>
+        </main>
+    );
+}
@@ -296,12 +296,34 @@ export default function ImagePage() {
        }
    };

-    const retryResult = (index: number) => {
+    const retryResult = async (index: number) => {
        const snapshot = buildRequestSnapshot();
        if (!snapshot) return;
        setPreviewLog(null);
        setResults((value) => updateResultAt(value, index, { status: "pending", error: undefined, image: undefined }));
-        void runGenerationSlot(index, snapshot).catch(() => {});
+        const retryStartedAt = performance.now();
+        try {
+            const image = await runGenerationSlot(index, snapshot);
+            const stored = await uploadImage(image.dataUrl);
+            const logImage = { ...image, dataUrl: stored.url, storageKey: stored.storageKey, width: stored.width, height: stored.height, bytes: stored.bytes, mimeType: stored.mimeType };
+            setResults((value) => updateResultAt(value, index, { image: { ...image, dataUrl: stored.url, storageKey: stored.storageKey } }));
+            saveLog(
+                buildLog({
+                    prompt: snapshot.text,
+                    model,
+                    config: { ...snapshot.config, count: "1" },
+                    references: snapshot.references,
+                    durationMs: performance.now() - retryStartedAt,
+                    successCount: 1,
+                    failCount: 0,
+                    status: "成功",
+                    images: [logImage],
+                }),
+            );
+            message.success("重试成功");
+        } catch {
+            // runGenerationSlot 已经把结果状态更新为 failed
+        }
    };

    return (
@@ -4,6 +4,7 @@ import UserLayout from "@/layouts/user-layout";
 import AssetsPage from "@/pages/assets";
 import CanvasPage from "@/pages/canvas";
 import CanvasProjectPage from "@/pages/canvas/project";
+import ConfigPage from "@/pages/config";
 import HomePage from "@/pages/home";
 import ImagePage from "@/pages/image";
 import NotFound from "@/pages/not-found";
@@ -25,6 +26,7 @@ export const router = createBrowserRouter([
            { path: "/prompts", element: <PromptsPage /> },
            { path: "/canvas", element: <CanvasPage /> },
            { path: "/canvas/:id", element: <CanvasProjectPage /> },
+            { path: "/config", element: <ConfigPage /> },
        ],
    },
    { path: "*", element: <NotFound /> },
@@ -112,6 +112,9 @@ const IMAGE_MAX_EDGE = 3840;
 const IMAGE_MAX_RATIO = 3;
 const IMAGE_OUTPUT_FORMAT = "png";

+const GEMINI_SUPPORTED_RATIOS = ["1:1", "1:4", "1:8", "2:3", "3:2", "3:4", "4:1", "4:3", "4:5", "5:4", "8:1", "9:16", "16:9", "21:9"];
+const GEMINI_IMAGE_SIZE_BY_QUALITY: Record<string, string> = { low: "1K", medium: "2K", high: "4K", standard: "1K", hd: "2K" };
+
 function normalizeQuality(quality: string) {
    const value = quality.trim().toLowerCase();
    const normalized = QUALITY_ALIASES[value] || value;
@@ -180,6 +183,42 @@ function resolveRequestSize(quality: string | undefined, size: string) {
    throw new Error("图像尺寸格式不支持，请使用 auto、9:16 或 1024x1024");
 }

+function resolveGeminiImageConfig(config: AiConfig) {
+    const value = config.size.trim();
+    const dimensions = parseImageDimensions(value);
+    const ratio = dimensions ? `${dimensions.width}:${dimensions.height}` : value;
+    const aspectRatio = value && value.toLowerCase() !== "auto" ? closestGeminiAspectRatio(ratio) : undefined;
+    const imageSize = supportsGeminiImageSize(config.model) ? resolveGeminiImageSize(config.quality, dimensions) : undefined;
+    const image = { ...(aspectRatio ? { aspectRatio } : {}), ...(imageSize ? { imageSize } : {}) };
+    return Object.keys(image).length ? { responseFormat: { image } } : {};
+}
+
+function closestGeminiAspectRatio(value: string) {
+    const ratio = parseImageRatio(value);
+    const target = ratio.width / ratio.height;
+    return GEMINI_SUPPORTED_RATIOS.reduce((best, item) => {
+        const current = parseImageRatio(item);
+        const bestRatio = parseImageRatio(best);
+        return Math.abs(current.width / current.height - target) < Math.abs(bestRatio.width / bestRatio.height - target) ? item : best;
+    });
+}
+
+function resolveGeminiImageSize(quality: string, dimensions: { width: number; height: number } | null) {
+    const normalizedQuality = normalizeQuality(quality);
+    if (normalizedQuality) return GEMINI_IMAGE_SIZE_BY_QUALITY[normalizedQuality];
+    if (!dimensions) return undefined;
+    const edge = Math.max(dimensions.width, dimensions.height);
+    if (edge <= 768) return "512";
+    if (edge <= 1536) return "1K";
+    if (edge <= 3072) return "2K";
+    return "4K";
+}
+
+function supportsGeminiImageSize(model: string) {
+    const value = model.toLowerCase();
+    return value.includes("gemini-3") || value.includes("3.1") || value.includes("3-pro");
+}
+
 function resolveImageDataUrl(item: Record<string, unknown>) {
    if (typeof item.b64_json === "string" && item.b64_json) {
        return `data:image/png;base64,${item.b64_json}`;
@@ -585,7 +624,7 @@ async function requestGeminiImagesOnce(config: AiConfig, prompt: string, referen
    const response = await axios.post<GeminiPayload>(
        geminiApiUrl(config, "generateContent"),
        {
-            ...toGeminiBody(config, [{ role: "user", content: prompt }], { generationConfig: { responseModalities: ["TEXT", "IMAGE"] } }),
+            ...toGeminiBody(config, [{ role: "user", content: prompt }], { generationConfig: { responseModalities: ["TEXT", "IMAGE"], ...resolveGeminiImageConfig(config) } }),
            contents: [{ role: "user", parts }],
        },
        { headers: geminiHeaders(config), signal: options?.signal },
@@ -8,15 +8,18 @@ import { buildApiUrl, modelOptionName, resolveModelRequestConfig, type AiConfig
 import type { ReferenceImage } from "@/types/image";
 import type { ReferenceAudio, ReferenceVideo } from "@/types/media";

-type VideoResponse = { id: string; status?: string; error?: { message?: string } };
-type ApiVideoResponse = VideoResponse | { code?: number; data?: VideoResponse | null; msg?: string };
+type VideoResponse = { id: string; status?: string; error?: { message?: string }; url?: string; result_url?: string; video_url?: string; content?: { video_url?: string; url?: string } | null };
+type ApiVideoResponse = VideoResponse | { code?: number | string; data?: VideoResponse | null; msg?: string; message?: string; error?: { message?: string } };
 type SeedanceTask = {
    id: string;
-    status?: "queued" | "running" | "succeeded" | "failed" | "cancelled" | "expired";
+    status?: "queued" | "running" | "succeeded" | "completed" | "failed" | "cancelled" | "expired";
    error?: { code?: string; message?: string } | null;
-    content?: { video_url?: string; last_frame_url?: string } | null;
+    content?: { video_url?: string; url?: string; last_frame_url?: string } | null;
+    url?: string;
+    result_url?: string;
+    video_url?: string;
 };
-type ApiEnvelope<T> = T | { code?: number; data?: T | null; msg?: string };
+type ApiEnvelope<T> = T | { code?: number | string; data?: T | null; msg?: string; message?: string; error?: { message?: string } };
 type RequestOptions = { signal?: AbortSignal };

 export type VideoGenerationResult = { blob?: Blob; url?: string; mimeType?: string };
@@ -69,7 +72,13 @@ export async function pollVideoGenerationTask(config: AiConfig, task: VideoGener

 export async function storeGeneratedVideo(result: VideoGenerationResult): Promise<UploadedFile> {
    if (result.blob) return uploadMediaFile(result.blob, "video");
-    if (result.url) return { url: result.url, storageKey: "", bytes: 0, mimeType: result.mimeType || "video/mp4" };
+    if (result.url) {
+        try {
+            return await uploadMediaFile(result.url, "video");
+        } catch {
+            return { url: result.url, storageKey: "", bytes: 0, mimeType: result.mimeType || "video/mp4" };
+        }
+    }
    throw new Error("视频接口没有返回可播放的视频");
 }

@@ -95,12 +104,14 @@ async function createOpenAIVideoTask(config: AiConfig, model: string, prompt: st
 async function pollOpenAIVideoTask(config: AiConfig, task: VideoGenerationTask, options?: RequestOptions): Promise<VideoGenerationTaskState> {
    try {
        const video = unwrapVideoResponse((await axios.get<ApiVideoResponse>(aiApiUrl(config, `/videos/${task.id}`), { headers: aiHeaders(config), signal: options?.signal })).data);
+        const url = videoResultUrl(video);
+        if (url) return { status: "completed", result: await videoResultFromUrl(url, options) };
        if (video.status === "completed") {
            const content = await axios.get<Blob>(aiApiUrl(config, `/videos/${task.id}/content`), { headers: aiHeaders(config), responseType: "blob", signal: options?.signal });
            await assertVideoBlob(content.data);
            return { status: "completed", result: { blob: content.data } };
        }
-        if (video.status === "failed" || video.status === "cancelled") return { status: "failed", error: video.error?.message || "视频生成失败" };
+        if (video.status === "failed" || video.status === "cancelled") return { status: "failed", error: readApiErrorMessage(video.error?.message) || "视频生成失败" };
        return { status: "pending" };
    } catch (error) {
        throw new Error(readAxiosError(error, "视频任务查询失败"));
@@ -137,12 +148,10 @@ async function createSeedanceTask(config: AiConfig, model: string, prompt: strin
 async function pollSeedanceTask(config: AiConfig, task: VideoGenerationTask, options?: RequestOptions): Promise<VideoGenerationTaskState> {
    try {
        const state = unwrapSeedanceTask((await axios.get<ApiEnvelope<SeedanceTask>>(seedanceApiUrl(config, task.id), { headers: aiHeaders(config), signal: options?.signal })).data);
-        if (state.status === "succeeded") {
-            const url = state.content?.video_url;
-            if (!url) return { status: "failed", error: "Seedance 任务成功但没有返回视频 URL" };
-            return { status: "completed", result: await videoResultFromUrl(url, options) };
-        }
-        if (state.status === "failed" || state.status === "cancelled" || state.status === "expired") return { status: "failed", error: state.error?.message || `Seedance 视频生成${state.status === "expired" ? "超时" : "失败"}` };
+        const url = videoResultUrl(state);
+        if (url) return { status: "completed", result: await videoResultFromUrl(url, options) };
+        if (state.status === "succeeded" || state.status === "completed") return { status: "failed", error: "Seedance 任务成功但没有返回视频 URL" };
+        if (state.status === "failed" || state.status === "cancelled" || state.status === "expired") return { status: "failed", error: readApiErrorMessage(state.error?.message) || `Seedance 视频生成${state.status === "expired" ? "超时" : "失败"}` };
        return { status: "pending" };
    } catch (error) {
        throw new Error(readAxiosError(error, "Seedance 任务查询失败"));
@@ -264,22 +273,40 @@ function unwrapSeedanceTask(payload: ApiEnvelope<SeedanceTask>) {

 function unwrapEnvelope<T>(payload: ApiEnvelope<T>, emptyMessage: string): T {
    if (!payload) throw new Error(emptyMessage);
-    if (typeof payload === "object" && "code" in payload && typeof payload.code === "number") {
-        if (payload.code !== 0) throw new Error(payload.msg || "请求失败");
+    if (typeof payload === "object" && "code" in payload && payload.code !== undefined) {
+        if (payload.code !== 0 && payload.code !== "0") throw new Error(readApiErrorMessage(payload) || "请求失败");
        if (!payload.data) throw new Error(emptyMessage);
        return payload.data;
    }
    return payload as T;
 }

+function videoResultUrl(payload: VideoResponse | SeedanceTask) {
+    return [payload.video_url, payload.result_url, payload.url, payload.content?.video_url, payload.content?.url].find((url) => typeof url === "string" && (isPublicMediaUrl(url) || /\.mp4(\?|#|$)/i.test(url)));
+}
+
+function readApiErrorMessage(value: unknown): string {
+    if (!value) return "";
+    if (typeof value === "string") {
+        try {
+            return readApiErrorMessage(JSON.parse(value)) || value;
+        } catch {
+            return value;
+        }
+    }
+    if (typeof value !== "object") return "";
+    const payload = value as { msg?: unknown; message?: unknown; error?: { message?: unknown } };
+    return readApiErrorMessage(payload.msg) || readApiErrorMessage(payload.message) || readApiErrorMessage(payload.error?.message);
+}
+
 function readAxiosError(error: unknown, fallback: string) {
    if (axios.isCancel(error)) return "请求已取消";
-    if (axios.isAxiosError<{ error?: { message?: string }; msg?: string; code?: number }>(error)) {
+    if (axios.isAxiosError<{ error?: { message?: string }; msg?: string; message?: string; code?: number | string }>(error)) {
        const responseData = error.response?.data;
-        return responseData?.msg || responseData?.error?.message || statusMessage(error.response?.status, fallback);
+        return readApiErrorMessage(responseData) || statusMessage(error.response?.status, fallback);
    }
    if (error instanceof DOMException && error.name === "AbortError") return "请求已取消";
-    return error instanceof Error ? error.message : fallback;
+    return error instanceof Error ? readApiErrorMessage(error.message) || error.message : fallback;
 }

 function statusMessage(status: number | undefined, fallback: string) {
@@ -296,8 +323,8 @@ async function assertVideoBlob(blob: Blob) {
    } catch {
        return;
    }
-    if (typeof payload.code === "number" && payload.code !== 0) throw new Error(payload.msg || "视频下载失败");
-    if (payload.error?.message) throw new Error(payload.error.message);
+    if (typeof payload.code === "number" && payload.code !== 0) throw new Error(readApiErrorMessage(payload) || "视频下载失败");
+    if (payload.error?.message) throw new Error(readApiErrorMessage(payload.error.message) || payload.error.message);
 }

 function isPublicMediaUrl(value: string) {
@@ -10,6 +10,10 @@ export type AgentPendingToolCall = { requestId: string; name: string; input?: {
 export type AgentThreadSummary = { id: string; preview: string; name?: string | null; cwd?: string; status?: string; source?: unknown; createdAt?: number; updatedAt?: number };
 export type AgentPanelTab = "chat" | "setup" | "history" | "log";

+const CONNECT_TIMEOUT_MS = 6000;
+let agentSource: EventSource | null = null;
+let connectTimer: ReturnType<typeof setTimeout> | null = null;
+
 type CanvasAgentStore = {
    width: number;
    url: string;
@@ -31,13 +35,15 @@ type CanvasAgentStore = {
    activity: string;
    connectError: string;
    pendingTool: AgentPendingToolCall | null;
-    setAgentState: (patch: Partial<Omit<CanvasAgentStore, "setAgentState" | "addMessage" | "addEventLog" | "clearEventLogs">>) => void;
+    setAgentState: (patch: Partial<Omit<CanvasAgentStore, "setAgentState" | "connectAgent" | "disconnectAgent" | "addMessage" | "addEventLog" | "clearEventLogs">>) => void;
+    connectAgent: () => void;
+    disconnectAgent: (patch?: Partial<Omit<CanvasAgentStore, "setAgentState" | "connectAgent" | "disconnectAgent" | "addMessage" | "addEventLog" | "clearEventLogs">>) => void;
    addMessage: (item: AgentChatItem) => void;
    addEventLog: (item: AgentEventLog) => void;
    clearEventLogs: () => void;
 };

-export const useCanvasAgentStore = create<CanvasAgentStore>((set) => ({
+export const useCanvasAgentStore = create<CanvasAgentStore>((set, get) => ({
    width: typeof window === "undefined" ? 440 : Number(localStorage.getItem("canvas-agent-panel-width")) || 440,
    url: typeof window === "undefined" ? "http://127.0.0.1:17371" : localStorage.getItem("canvas-agent-url") || "http://127.0.0.1:17371",
    token: typeof window === "undefined" ? "" : localStorage.getItem("canvas-agent-token") || "",
@@ -59,6 +65,42 @@ export const useCanvasAgentStore = create<CanvasAgentStore>((set) => ({
    connectError: "",
    pendingTool: null,
    setAgentState: (patch) => set(patch),
+    connectAgent: () => {
+        const endpoint = get().url.trim().replace(/\/$/, "");
+        const token = get().token.trim();
+        if (!endpoint || !token) return set({ connectError: "请填写 Local URL 和 Connect token" });
+        try {
+            const parsed = new URL(endpoint);
+            if (!["http:", "https:"].includes(parsed.protocol)) throw new Error();
+        } catch {
+            return set({ connectError: "Local URL 格式不正确" });
+        }
+        get().disconnectAgent({ url: endpoint, token, enabled: true, activity: "连接中", connectError: "" });
+        localStorage.setItem("canvas-agent-url", endpoint);
+        localStorage.setItem("canvas-agent-token", token);
+        const clientId = typeof crypto === "undefined" ? `${Date.now()}` : crypto.randomUUID();
+        const source = new EventSource(`${endpoint}/events?token=${encodeURIComponent(token)}&clientId=${encodeURIComponent(clientId)}&role=status`);
+        agentSource = source;
+        connectTimer = setTimeout(() => {
+            if (agentSource !== source) return;
+            get().disconnectAgent({ activity: "连接超时", connectError: "连接超时：请确认 Canvas Agent 正在运行，并使用当前启动输出的 Connect token" });
+        }, CONNECT_TIMEOUT_MS);
+        source.addEventListener("hello", () => {
+            if (connectTimer) clearTimeout(connectTimer);
+            connectTimer = null;
+            set({ enabled: true, connected: true, activity: "已连接", connectError: "" });
+        });
+        source.onerror = () => {
+            if (agentSource === source) get().disconnectAgent({ activity: "连接失败", connectError: "连接失败：请检查 Local URL、Connect token 或已绑定的网页 Origin" });
+        };
+    },
+    disconnectAgent: (patch = {}) => {
+        agentSource?.close();
+        agentSource = null;
+        if (connectTimer) clearTimeout(connectTimer);
+        connectTimer = null;
+        set({ enabled: false, connected: false, activity: "离线", ...patch });
+    },
    addMessage: (item) => set((state) => ({ messages: [...state.messages.slice(-120), item] })),
    addEventLog: (item) => set((state) => ({ eventLogs: [...state.eventLogs.slice(-160), item] })),
    clearEventLogs: () => set({ eventLogs: [] }),
@@ -52,6 +52,7 @@ export type WebdavSyncConfig = {
    directory: string;
    lastSyncedAt: string;
 };
+export type ConfigTabKey = "channels" | "models" | "preferences" | "webdav" | "codex";

 export const CONFIG_STORE_KEY = "infinite-canvas:ai_config_store";
 export type ModelCapability = "image" | "video" | "text" | "audio";
@@ -111,11 +112,12 @@ type ConfigStore = {
    config: AiConfig;
    webdav: WebdavSyncConfig;
    isConfigOpen: boolean;
+    configTab: ConfigTabKey;
    shouldPromptContinue: boolean;
    updateConfig: <K extends keyof AiConfig>(key: K, value: AiConfig[K]) => void;
    updateWebdavConfig: <K extends keyof WebdavSyncConfig>(key: K, value: WebdavSyncConfig[K]) => void;
    isAiConfigReady: (config: AiConfig, model: string) => boolean;
-    openConfigDialog: (shouldPromptContinue?: boolean) => void;
+    openConfigDialog: (shouldPromptContinue?: boolean, tab?: ConfigTabKey) => void;
    setConfigDialogOpen: (isOpen: boolean) => void;
    clearPromptContinue: () => void;
 };
@@ -171,6 +173,7 @@ export const useConfigStore = create<ConfigStore>()(
            config: defaultConfig,
            webdav: defaultWebdavSyncConfig,
            isConfigOpen: false,
+            configTab: "channels",
            shouldPromptContinue: false,
            updateConfig: (key, value) =>
                set((state) => ({
@@ -187,7 +190,7 @@ export const useConfigStore = create<ConfigStore>()(
                    },
                })),
            isAiConfigReady: (config, model) => isAiConfigReady(config, model),
-            openConfigDialog: (shouldPromptContinue = false) => set({ isConfigOpen: true, shouldPromptContinue }),
+            openConfigDialog: (shouldPromptContinue = false, configTab = "channels") => set({ isConfigOpen: true, shouldPromptContinue, configTab }),
            setConfigDialogOpen: (isConfigOpen) => set({ isConfigOpen }),
            clearPromptContinue: () => set({ shouldPromptContinue: false }),
        }),
@@ -0,0 +1,31 @@
+import assert from "node:assert/strict";
+
+import { isImeComposing, isPlainEnterKey } from "../src/lib/keyboard-event";
+
+type KeyboardEventLike = Parameters<typeof isPlainEnterKey>[0];
+
+function enterEvent(overrides: Partial<KeyboardEventLike> = {}): KeyboardEventLike {
+    return {
+        key: "Enter",
+        shiftKey: false,
+        ctrlKey: false,
+        metaKey: false,
+        ...overrides,
+    };
+}
+
+assert.equal(isPlainEnterKey(enterEvent()), true, "plain Enter submits");
+assert.equal(isPlainEnterKey(enterEvent({ shiftKey: true })), false, "Shift+Enter does not submit");
+assert.equal(isPlainEnterKey(enterEvent({ ctrlKey: true })), false, "Ctrl+Enter does not submit");
+assert.equal(isPlainEnterKey(enterEvent({ metaKey: true })), false, "Meta+Enter does not submit");
+assert.equal(isPlainEnterKey(enterEvent({ nativeEvent: { isComposing: true } })), false, "IME composition Enter does not submit");
+assert.equal(isPlainEnterKey(enterEvent({ nativeEvent: { keyCode: 229 } })), false, "legacy IME Enter does not submit");
+assert.equal(isPlainEnterKey(enterEvent({ key: "a" })), false, "non-Enter keys do not submit");
+
+assert.equal(isImeComposing(enterEvent({ isComposing: true })), true, "direct composition flag is detected");
+assert.equal(isImeComposing(enterEvent({ nativeEvent: { isComposing: true } })), true, "native composition flag is detected");
+assert.equal(isImeComposing(enterEvent({ keyCode: 229 })), true, "direct legacy keyCode composition is detected");
+assert.equal(isImeComposing(enterEvent({ nativeEvent: { keyCode: 229 } })), true, "native legacy keyCode composition is detected");
+assert.equal(isImeComposing(enterEvent()), false, "plain Enter is not composition");
+
+console.log("ime keyboard tests passed");
@@ -11,6 +11,7 @@ const localVersion = readFileSync(resolve(webDir, "../VERSION"), "utf8").trim()
 const localChangelog = readFileSync(resolve(webDir, "../CHANGELOG.md"), "utf8");

 export default defineConfig({
+    base: process.env.VITE_BASE || "/",
    plugins: [react()],
    resolve: {
        alias: {
Author	SHA1	Message	Date
HouYunFei	050b36fad1	chore(changelog): add release notes for v0.6.0	2026-07-09 10:42:13 +08:00
HouYunFei	668c3adb52	chore(changelog): add release notes for v0.6.0	2026-07-09 10:21:07 +08:00
HouYunFei	f2a36e86b2	fix(video): enhance video generation error handling and URL retrieval	2026-07-08 22:23:18 +08:00
HouYunFei	d747527e2a	Merge branch 'fork/beetle0915/fix/ime-enter-composition' into dev	2026-07-08 16:30:38 +08:00
HouYunFei	798d06b662	Merge branch 'fork/1797127235/fix/canvas-mode-model-switch' into dev # Conflicts: # CHANGELOG.md # docs/content/docs/progress/pending-test.mdx # web/src/components/canvas/canvas-config-node-panel.tsx # web/src/components/canvas/canvas-node-prompt-panel.tsx	2026-07-08 16:23:12 +08:00
HouYunFei	257dab5bac	fix: resolve issue with Gemini image format not passing aspect ratio configuration	2026-07-08 16:18:12 +08:00
HouYunFei	81144ea009	fix: resolve issue with Gemini image format not passing aspect ratio configuration	2026-07-08 15:11:18 +08:00
beetle0915	bac571ef4e	Fix Enter handling during IME composition	2026-07-07 08:24:34 +08:00
1797127235	965d416aeb	fix(canvas): switch to correct default model when changing generation mode	2026-07-06 10:33:52 +08:00
HouYunFei	3080d6da10	feat: enhance Codex agent connection handling with automatic thread recovery and improved error logging	2026-07-05 23:40:54 +08:00
HouYunFei	6113986637	refactor: remove agent mode switch and streamline local agent usage in the canvas assistant panel	2026-07-05 17:04:02 +08:00
HouYunFei	ca5faa1f4e	feat: add GitHub Pages workflow for automatic deployment on version tag push	2026-07-05 16:51:27 +08:00
HouYunFei	0b69dfce46	feat: add support for draggable grid lines in image slicing, with options to add, delete, and reset horizontal/vertical lines	2026-07-05 16:08:23 +08:00
HouYunFei	65a91b22e1	feat: add Codex App plugin support with dedicated configuration page and connection settings	2026-07-05 15:12:42 +08:00
HouYunFei	9dd0dc28b2	refactor: remove credit cost calculations and related UI elements from canvas node panels	2026-07-05 13:44:42 +08:00
HouYunFei	522153b3e6	fix: resolve issue with image retry results not persisting after page refresh in the image workbench	2026-07-05 12:46:51 +08:00