From 228ca29c823823261915a5523a9bcd611867f42b Mon Sep 17 00:00:00 2001
From: HouYunFei <1844025705@qq.com>
Date: Mon, 13 Jul 2026 17:23:36 +0800
Subject: [PATCH] feat(docs): update Infinite Canvas usage instructions and
 streamline local Agent connection process

---
 .../skills/open-canvas/SKILL.md               | 84 ++++++++++++++-----
 web/src/styles/globals.css                    |  2 +-
 2 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/plugins/infinite-canvas/skills/open-canvas/SKILL.md b/plugins/infinite-canvas/skills/open-canvas/SKILL.md
index 0769242..2623866 100644
--- a/plugins/infinite-canvas/skills/open-canvas/SKILL.md
+++ b/plugins/infinite-canvas/skills/open-canvas/SKILL.md
@@ -1,36 +1,76 @@
 ---
 name: open-canvas
-description: 打开 Infinite Canvas 网页画布并自动连接本地 Canvas Agent。用户要求打开、启动、进入、使用 Infinite Canvas 或画布时使用。
+description: 下载、安装并打开 Infinite Canvas，自动连接本地 Canvas Agent。用户要求打开、启动、进入或使用 Infinite Canvas 画布时使用。
 ---
 
 # Open Infinite Canvas
 
-当用户要求打开、启动、进入或使用 Infinite Canvas 时，不要把 URL 交给用户手动复制，不要通过浏览器点击“新建画布”。优先快速拉起本地画布和本地 Canvas Agent，然后直接打开带 `mode`、`agentUrl`、`agentToken` 的 URL，让网页自动创建或选择画布并连接 Agent。
+用户要求打开 Infinite Canvas 时直接执行，不要先搜索目录、扫描端口、检查进程归属、读取配置文件或让用户手动复制 URL 和 token。
 
-## 默认打开方式
+## 选择项目目录
 
-- 新建画布：`<画布网页地址>/canvas?mode=new&agentUrl=<Local URL>&agentToken=<Connect token>`
-- 最近画布：`<画布网页地址>/canvas?mode=recent&agentUrl=<Local URL>&agentToken=<Connect token>`
-- 自己选择：`<画布网页地址>/canvas?mode=choose&agentUrl=<Local URL>&agentToken=<Connect token>`
+只分两种情况：
 
-默认打开新建本地画布；只有用户明确要求线上地址、最近画布或自己选择时，才改用对应模式。
+### 当前就在 Infinite Canvas 项目中
 
-## 工作流
+当前目录存在 `web/package.json` 和 `plugins/infinite-canvas/.codex-plugin/plugin.json` 时，直接把当前目录作为项目目录。
 
-1. 如果当前仓库是 Infinite Canvas 项目，优先使用当前仓库的 `web/` 前端。
-2. 先检查本地端口归属：如果 `3000`、`3001` 等端口已被占用，必须用 `lsof`/`ps` 或服务输出确认监听进程的工作目录属于当前仓库的 `web/`，不能只因为端口存在就当成本地画布。
-3. 如果已有当前仓库的 Next dev 服务，复用它并记录真实画布地址，例如 `http://localhost:3001`。
-4. 如果没有当前仓库的服务，启动本地画布开发服务，默认在 `web/` 下运行 `bun run dev`；若默认端口被其他项目占用，改用空闲端口启动，例如 `bunx next dev --webpack -H 0.0.0.0 -p <空闲端口>`。不要执行构建或测试。
-5. 启动本地 Canvas Agent，必须带上第 3/4 步得到的真实画布地址：`CANVAS_URL=<真实画布地址> npx -y @basketikun/canvas-agent`。如果 Agent 已经在运行，则读取 `~/.infinite-canvas/canvas-agent.json` 或 `/config` 获取 `Local URL` 和 token。
-6. 读取 Agent 输出或配置中的 `Local URL` 和 `Connect token`，不要让用户手动复制。
-7. 不走本地 Agent 的 `/open` 跳转；直接构造并打开最终 URL：`<真实画布地址>/canvas?mode=new&agentUrl=<Local URL>&agentToken=<Connect token>`。
-8. 画布网页会自动新建具体画布、打开本机 Agent 面板并连接本地 Agent；不要用浏览器点击新建画布。
-9. 打开后再使用 `canvas_get_state` 检查画布是否已经连接；如果尚未连接，等待片刻再检查，不要改用线上站点，除非用户明确要求。
+### 当前不在 Infinite Canvas 项目中
 
-## 用户只安装插件时
+固定使用 `~/plugins/infinite-canvas`：
 
-- 如果当前工作区不是 Infinite Canvas 源码仓库，优先提示用户先打开或启动 Infinite Canvas 网页，再连接本地 Agent。
-- 可以使用线上画布地址或用户给出的本地地址作为 `<画布网页地址>`，但仍要通过本地 Canvas Agent 获取 token 后再打开最终 URL。
-- 不要假设用户已经安装本仓库依赖；插件的 MCP 会通过 `npx -y @basketikun/canvas-agent mcp` 使用已发布的 Canvas Agent。
+```bash
+mkdir -p ~/plugins
+git clone https://github.com/basketikun/infinite-canvas.git ~/plugins/infinite-canvas
+cd ~/plugins/infinite-canvas
+```
 
-不要要求用户手动填写 URL、token 或复制 JSON。
+如果该目录已经存在就直接进入，不要再查找其他副本。
+
+## 一步启动
+
+进入项目目录后依次执行：
+
+1. 安装当前项目内的 Codex 插件：
+
+```bash
+codex plugin marketplace add "$(pwd)"
+codex plugin add infinite-canvas@infinite-canvas-local
+```
+
+2. 安装前端依赖并启动开发服务：
+
+```bash
+cd web
+bun install
+bun run dev
+```
+
+保持开发服务运行，直接采用 Vite 输出的 `Local` 地址作为画布地址，不要另外探测端口。
+
+3. 在项目根目录启动网页连接所需的本地 Agent，并把 Vite 输出的地址传给它：
+
+```bash
+CANVAS_URL=<Vite Local 地址> npx -y @basketikun/canvas-agent
+```
+
+安装插件后，插件会自动启动 `npx -y @basketikun/canvas-agent mcp`；上面的命令只负责启动网页要连接的 HTTP Agent，两者都需要，不要再手动添加 MCP。
+
+4. 从 Agent 启动输出中直接取得 `Local URL` 和 `Connect token`，立即在浏览器打开：
+
+```text
+<Vite Local 地址>/canvas?mode=new&agentUrl=<Local URL>&agentToken=<Connect token>
+```
+
+网页会自动新建画布并连接 Agent，不要再点击“新建画布”，也不要在打开后追加连接检查。
+
+如果插件是本轮对话中刚安装的，完成安装和服务启动后告知用户新开一个 Codex 对话即可加载 MCP；不要因此重复安装或重启前端。
+
+## 打开模式
+
+默认使用 `mode=new`。只有用户明确要求时才替换为：
+
+- 最近画布：`mode=recent`
+- 自己选择：`mode=choose`
+
+某条启动命令直接报错时，报告该错误并处理明确原因；不要提前执行额外诊断流程。
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 4f2fb82..dc5d5dc 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@source "../../../node_modules/streamdown/dist/*.js";
 @import "shadcn/tailwind.css";
+@source "../../../node_modules/streamdown/dist/*.js";
 
 @custom-variant dark (&:is(.dark *));