初始化

Initial commit
2026-09-07 18:24:55 +08:00 · 2026-09-07 17:37:11 +08:00
1529 changed files with 291488 additions and 110628 deletions
@@ -0,0 +1,20 @@
 import os
 import paramiko
 client = paramiko.SSHClient()
 client.set_missing_host_key_policy(paramiko.AutoAddPolicy())
 client.connect(
    "119.254.86.251",
    port=22322,
    username="root",
    password=os.environ["TARGET_SSH_PASSWORD"],
    timeout=15,
    auth_timeout=15,
    banner_timeout=15,
 )
 _, stdout, stderr = client.exec_command(os.environ["TARGET_SSH_COMMAND"], timeout=30)
 print(stdout.read().decode(errors="replace"), end="")
 print(stderr.read().decode(errors="replace"), end="")
 client.close()
@@ -1,116 +0,0 @@
 # Workspace/editor
 .vscode/
 frontend-web/.vscode/
 node_modules/
 # Claude Code local-only settings (per-user permissions, not shared)
 .claude/settings.local.json
 # Local runtime logs and pid files
 .runtime/
 logs/
 offline-backend-20260512/backend/logs/
 # Frontend local/runtime artifacts
 frontend-web/.env
 frontend-web/.env.local
 frontend-web/.env.*.local
 frontend-web/node_modules/
 frontend-web/.pnpm-store/
 frontend-web/tsconfig.tsbuildinfo
 frontend-web/vite-dev.log
 frontend-web/vite-dev.err.log
 # Frontend local packages/archives/docs (non-source)
 frontend-web/pnpm-lock.yaml
 frontend-web/README.md
 frontend-web/doc.md
 frontend-web/src.zip
 frontend-web/src9.zip
 frontend-web/src-v1.zip
 frontend-web/src-*.rar
 frontend-web/dist
 # Frontend build artifacts
 frontend-web/dist/
 frontend-web/dist-scheduled-check/
 # Offline backend bundles and local deployment artifacts
 offline-backend-20260505.zip
 offline-backend-20260505/output/
 offline-backend-20260505/bundle/.env
 offline-backend-20260505/bundle/.env.example
 offline-backend-20260505/bundle/DEPLOY_BACKEND_OFFLINE_ZH.md
 offline-backend-20260505/bundle/SHA256SUMS
 offline-backend-20260505/bundle/config.yaml
 offline-backend-20260505/bundle/config.yaml.example
 offline-backend-20260505/bundle/data/
 offline-backend-20260505/bundle/deerflow-backend-offline-image-20260505.tar
 offline-backend-20260505/bundle/extensions_config.json
 offline-backend-20260505/bundle/frontend-vite.zip
 offline-backend-20260505/bundle/skills/
 offline-backend-20260505/bundle/start_backend.0509.sh
 offline-backend-20260505/bundle/start_backend.sh
 offline-backend-20260505/bundle/stop_backend.sh
 # offline-backend-20260512 runtime artifacts (large files, local config, data)
 offline-backend-20260512/.env.example
 offline-backend-20260512/DEPLOY_BACKEND_OFFLINE_ZH.md
 offline-backend-20260512/SHA256SUMS
 offline-backend-20260512/config.yaml.example
 offline-backend-20260512/data/
 offline-backend-20260512/deerflow-backend-offline-image-20260505.tar
 offline-backend-20260512/extensions_config.json
 offline-backend-20260512/skills/
 offline-backend-20260512/wheelhouse/
 offline-backend-20260512/backend/.deer-flow/data/*.db
 offline-backend-20260512/backend/.deer-flow/data/*.db-*
 offline-backend-20260512/backend/.deer-flow/*
 offline-backend-20260512/start_backend.sh
 offline-backend-20260512/stop_backend.sh
 offline-backend-20260512/check_backend.sh
 hermes-agent-main/
 skills/*
 offline-backend-20260512/backend/.deer-flow/*
 # Per-user skill_evolution overrides — runtime data written by the API
 offline-backend-20260512/backend/skill_evolution.json
 skills/
 hermes-agent-main/
 .gitignore
 offline-backend-20260512/backend/tests/*
 deploy
 .history
 # Cloned third-party repos (local only)
 git-clone/
 # Repo-root offline dependency pack (local only)
 /dist/
 # Frontend offline pack working directories
 frontend-web/.offline-pack-build/
 frontend-web/.offline-extract-test/
 frontend-web-node_modules-offline-*.tar.gz
 .codegraph
 codegraph.mdc
 docs/aidev-docs
 docs/backups
 # Frontend skills components must be tracked (excluded from the broad skills/ ignore above)
 !frontend-web/src/components/workspace/skills/
 # uv lockfile (not tracked per project preference)
 offline-backend-20260512/backend/uv.lock
 # Local-only scratch directory (not committed)
 0622/
 # Python bytecode cache
 __pycache__/
 # misc
 .DS_Store
@@ -0,0 +1,6 @@
 {
  "recommendations": [
    "ms-python.python",
    "ms-python.debugpy"
  ]
 }
@@ -0,0 +1,66 @@
 {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "DeerFlow: Backend FastAPI (8001)",
      "type": "debugpy",
      "request": "launch",
      "module": "uvicorn",
      "args": [
        "app.gateway.app:app",
        "--host",
        "0.0.0.0",
        "--port",
        "8001"
      ],
      "cwd": "${workspaceFolder}/offline-backend-20260512/backend",
      "python": "${workspaceFolder}/offline-backend-20260512/backend/.venv/Scripts/python.exe",
      "envFile": "${workspaceFolder}/offline-backend-20260512/.env",
      "env": {
        "PYTHONPATH": "${workspaceFolder}/offline-backend-20260512/backend;${workspaceFolder}/offline-backend-20260512/backend/.deer-flow/python-vendor",
        "GATEWAY_CORS_ORIGINS": "http://localhost:5174,http://127.0.0.1:5174,http://localhost:8080,http://127.0.0.1:8080",
        "UV_LINK_MODE": "copy",
        "WEKNORA_ADMIN_PASSWORD": "1qaz@WSX"
      },
      "console": "integratedTerminal",
      "redirectOutput": true,
      "justMyCode": false,
      "subProcess": true
    },
    {
      "name": "DeerFlow: Frontend Vite (5174)",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm.cmd run dev -- --host 0.0.0.0 --port 5174",
      "cwd": "${workspaceFolder}/frontend-web",
      "env": {
        "VITE_BACKEND_BASE_URL": "http://127.0.0.1:8001",
        "VITE_LANGGRAPH_BASE_URL": "http://127.0.0.1:8001/api"
      },
      "serverReadyAction": {
        "pattern": "Local:\\s+(https?://[^\\s]+)",
        "uriFormat": "%s",
        "action": "openExternally"
      }
    },
    {
      "name": "DeerFlow: Open Frontend in Chrome",
      "type": "node-terminal",
      "request": "launch",
      "preLaunchTask": "DeerFlow: VS Code Start",
      "command": "powershell.exe -NoProfile -ExecutionPolicy Bypass -Command \"Start-Process 'http://127.0.0.1:5174/'\"",
      "cwd": "${workspaceFolder}"
    }
  ],
  "compounds": [
    {
      "name": "DeerFlow: Full Stack (Backend + Frontend)",
      "preLaunchTask": "DeerFlow: Stop Full Stack",
      "configurations": [
        "DeerFlow: Backend FastAPI (8001)",
        "DeerFlow: Frontend Vite (5174)"
      ],
      "stopAll": true
    }
  ]
 }
@@ -0,0 +1,6 @@
 {
  "python.defaultInterpreterPath": "${workspaceFolder}/offline-backend-20260512/backend/.venv/Scripts/python.exe",
  "python.terminal.activateEnvironment": true,
  "typescript.tsdk": "frontend-web/node_modules/typescript/lib",
  "npm.packageManager": "npm"
 }
@@ -0,0 +1,175 @@
 {
  "version": "2.0.0",
  "tasks": [
    {
      "label": "DeerFlow: VS Code Start",
      "type": "process",
      "command": "powershell.exe",
      "args": [
        "-NoProfile",
        "-ExecutionPolicy",
        "Bypass",
        "-File",
        "${workspaceFolder}/scripts/vscode-start.ps1",
        "-OpenBrowser"
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "dedicated",
        "clear": true
      },
      "problemMatcher": []
    },
    {
      "label": "DeerFlow: Start Full Stack and Wait",
      "type": "process",
      "command": "powershell.exe",
      "args": [
        "-NoProfile",
        "-ExecutionPolicy",
        "Bypass",
        "-File",
        "${workspaceFolder}/scripts/start-all-and-wait-frontend.ps1"
      ],
      "problemMatcher": []
    },
    {
      "label": "DeerFlow: Start Full Stack",
      "type": "process",
      "command": "powershell.exe",
      "args": [
        "-NoProfile",
        "-ExecutionPolicy",
        "Bypass",
        "-File",
        "${workspaceFolder}/scripts/start-all.ps1"
      ],
      "problemMatcher": []
    },
    {
      "label": "DeerFlow: Stop Full Stack",
      "type": "process",
      "command": "powershell.exe",
      "args": [
        "-NoProfile",
        "-ExecutionPolicy",
        "Bypass",
        "-File",
        "${workspaceFolder}/scripts/stop-all.ps1"
      ],
      "problemMatcher": []
    },
    {
      "label": "DeerFlow: Status",
      "type": "process",
      "command": "powershell.exe",
      "args": [
        "-NoProfile",
        "-ExecutionPolicy",
        "Bypass",
        "-File",
        "${workspaceFolder}/scripts/status.ps1"
      ],
      "problemMatcher": []
    },
    {
      "label": "DeerFlow: Check Local Dev Environment",
      "type": "shell",
      "command": "$backendPython = '${workspaceFolder}\\offline-backend-20260512\\backend\\.venv\\Scripts\\python.exe'; if (-not (Test-Path -LiteralPath $backendPython)) { throw 'Backend virtual environment is missing. Run uv sync in offline-backend-20260512/backend first.' }; & $backendPython -c \"import uvicorn; print('Backend Python OK')\"; npm --prefix '${workspaceFolder}\\frontend-web' exec vite -- --version",
      "options": {
        "shell": {
          "executable": "powershell.exe",
          "args": [
            "-NoProfile",
            "-ExecutionPolicy",
            "Bypass",
            "-Command"
          ]
        }
      },
      "problemMatcher": []
    },
    {
      "label": "DeerFlow: Install Frontend Dependencies",
      "type": "process",
      "command": "npm",
      "args": [
        "ci",
        "--no-audit",
        "--no-fund"
      ],
      "options": {
        "cwd": "${workspaceFolder}/frontend-web"
      },
      "problemMatcher": []
    },
    {
      "label": "DeerFlow: Frontend Typecheck",
      "type": "process",
      "command": "npm",
      "args": [
        "run",
        "typecheck"
      ],
      "options": {
        "cwd": "${workspaceFolder}/frontend-web"
      },
      "problemMatcher": "$tsc"
    },
    {
      "label": "DeerFlow: Frontend Build",
      "type": "process",
      "command": "npm",
      "args": [
        "run",
        "build"
      ],
      "options": {
        "cwd": "${workspaceFolder}/frontend-web"
      },
      "problemMatcher": []
    },
    {
      "label": "DeerFlow: Backend Tests",
      "type": "process",
      "command": "${workspaceFolder}/offline-backend-20260512/backend/.venv/Scripts/python.exe",
      "args": [
        "-m",
        "pytest",
        "tests/",
        "-v"
      ],
      "options": {
        "cwd": "${workspaceFolder}/offline-backend-20260512/backend",
        "env": {
          "PYTHONPATH": ".",
          "WEKNORA_ADMIN_PASSWORD": "1qaz@WSX"
        }
      },
      "problemMatcher": []
    },
    {
      "label": "DeerFlow: WeKnora Backend Tests",
      "type": "process",
      "command": "${workspaceFolder}/offline-backend-20260512/backend/.venv/Scripts/python.exe",
      "args": [
        "-m",
        "pytest",
        "tests/test_llmwiki_weknora.py",
        "-v"
      ],
      "options": {
        "cwd": "${workspaceFolder}/offline-backend-20260512/backend",
        "env": {
          "PYTHONPATH": ".",
          "WEKNORA_ADMIN_PASSWORD": "1qaz@WSX"
        }
      },
      "problemMatcher": []
    }
  ]
 }
@@ -0,0 +1,61 @@
 # 深度研究第三轮：检索稳定性修复 + 参考文献确定性 + 页面对齐 AI 写作改造
 ## A. 两个 bug 的排查结论与修复
 ### A1. 第二次检索「网络波动」——确认是真问题（DDG 限流 + 错误语义混淆 + 零重试）
 **排查结论**（用户判断"确实是网络波动"基本正确，但代码层面放大了它）：
 - 「网络波动」文案不存在于任何代码中——是收集员 LLM 看到 `{"error": "No results found"}` 信封后自己编的解释
 - 真实根因：DDG html 端点对同 IP 快速连续请求限流（403/429 挑战页）→ `DDGSException` → `ddg_search/tools.py::_search_text` 把异常吞成 `[]` → 上层把「被限流」和「真没结果」混成同一个错误信封；工具层完全没有重试
 **修复**（`packages/harness/deerflow/community/ddg_search/tools.py`）：
 1. `_search_text` 对异常加 2 次重试 + 指数退避（约 1.5s / 3s + 抖动）
 2. 错误信封区分场景：真无结果 → `no results`；多次尝试仍失败 → `web search failed after N attempts (rate limited or network), 换一组检索词稍后重试`——让模型不再瞎猜「网络波动」
 3. 收集员 SOUL.md 行为准则加一条（同步改种子资产 + 已安装副本 `.deer-flow/agents/deep-research-collector/`）：搜索返回 error 信封时先换检索词重试一轮，而不是直接告知用户网络异常
 ### A2. 参考文献缺失——代码确有隐患（当前是模型自发行为，时有时无）
 **排查结论**：后端没有任何「参考来源」追加逻辑；四个 runner 的报告 prompt 只要求内联 `[N]` 引用。出现过的参考列表是模型看到上下文头 `[N] 标题（URL）` 后**自发**补写的——弱模型下不可靠，与"信息够不够"无必然关系。
 **修复**（prompt 指示 + 确定性兜底双保险）：
 1. 四个 runner（basic / detailed / deep / multi_agent）的报告 prompt 各加一条：报告最后附「## 参考来源」，按 `[N] 标题. URL` 列出正文实际引用过的来源
 2. `basic.py` 新增共享函数 `ensure_reference_section(report, context_list, materials)`：报告缺少参考小节时，解析正文引用的 `[N]` 编号，按压缩上下文顺序生成编号列表追加（无编号时列全部来源，封顶 20 条；已有参考小节则不重复追加）。在各 runner 最终 `write_text("report.md", ...)` 前调用（约 7 个调用点，跳过零材料 fallback）
 3. 新增测试 `tests/test_deep_research_references.py`：helper 单测（正常追加/编号映射/不重复追加/无 URL 来源）+ runner 集成断言
 ## B. 页面改造（核心需求）：左列复用 AI 写作对话形态，右列改真沙箱
 ### B1. 左列 = AI 写作式对话收集面板（仿 WritingSetupChat）
 - **空状态欢迎屏**（无消息时隐藏头部，展示欢迎卡片，WritingWelcome 式）+ 有消息后 `MessageList`（沿用现有绑 collector 线程的接线）+ 首 token 前「正在整理…」占位条
 - **输入框换成白卡片 PromptInput 套件**（与 AI 写作完全同款组件）：卡片内一行「当前对话模型」Select（沿用 ModelNameSelect）+ 高级配置入口；下方 PromptInputTextarea + PromptInputFooter + PromptInputSubmit（`status` ready/streaming，流式中变停止按钮）。经典模式入口保留在高级配置对话框
 - **配置卡片进对话流**（对标 AI 写作「识别出意图后出现表单」）：
  - `message-list.tsx` 最小扩展（约 15 行）：新增分组 `assistant:research-approval`（识别 `additional_kwargs.setup_research_approval`）+ 可选 prop `researchApprovalSlot?: ReactNode`；不传 slot 或无该载荷时零行为变化——普通对话/AI 写作完全不受影响
  - workbench：收集回合结束（awaiting_report，即"意图识别完成"）时向 `displayThread` 尾部注入一条虚拟 ai 消息（WritingSetupChat 的 displayThread 同款手法），slot 传现有 `ReportConfigCard` → 卡片作为助手下一轮出现在对话流里
 - 写作进度卡、完成卡、摘要气泡、追问列表保留在列表下方卡片区（报告正文移到右侧沙箱）
 ### B2. 右列 = 工作区真沙箱（Step2SandboxLayout 的 stub 线程模式）
 - 新建 `deep-research/ResearchSandboxPanel.tsx`（约 100 行，含关闭/重开）+ `useReportSandbox.ts` hook（仿 `useStep3Report` 的 stub 机制）：
  - threadStub：`messages = [{type:'ai', tool_calls:[{name:'write_file', args:{path:'/mnt/user-data/outputs/report.md', content: <流式报告>}}]}]`，`isLoading = job 运行中 && phase !== 'summarizing'`
  - `report_delta` 首帧 → `openArtifact(write-file: 虚拟URL)` 自动展开右栏；`run.report` 每帧 upsert stub（带防抹空守卫）；刷新/切换会话用 `session.reportMarkdown` 重建
  - `ArtifactFileDetail` 自带能力全部免费获得：**流式期 code 视图自动滚底 → 报告写完 isLoading 翻 false 自动切 preview + 脉冲提示**（正是「生成完直接切预览」）、Streamdown 渲染的 Markdown（比现在的好看）、另存 Word/复制/下载、默认走展示层脱敏
 - 布局：ResizablePanelGroup chat 60 / sandbox 40（对齐 ChatBox/圆桌），沙箱可关闭、头部按钮重开
 - **删除自定义 `ResearchSandbox` 组件**；legacy 会话与经典模式共用同一右栏（`run.report` 数据源相同，行为一致）
 - 已知小限制（可接受）：报告配图模式下沙箱内图片可能无法经 artifacts API 解析（配图默认关闭；真需要时后续把产物落 thread artifacts）
 ### B3. 验证
 - 后端：`PYTHONPATH=. uv run --no-sync pytest tests/ -k deep_research -q --ignore=tests/test_notification_templates.py` 全绿 + ruff；改完配置/SOUL 后 touch 触发 dev 服务重载
 - 前端：`pnpm typecheck` 零新增错误（基线 51）
 - 手动走查：连续两次检索不再误报、弱模型报告末尾必带参考来源、页面全流程（欢迎屏 → 对话收集 → 流内配置卡 → 沙箱流式 → 自动预览 → 摘要/追问）
 ## 涉及文件
 **后端**：`community/ddg_search/tools.py`、`deep_research/runners/{basic,detailed,deep,multi_agent}.py`、收集员 SOUL.md（种子 + 已安装副本）、`tests/test_deep_research_references.py`（新）
 **前端**：`components/workspace/messages/message-list.tsx`（可选 slot 分组）、`pages/deep-research/DeepResearchWorkbench.tsx`（大改）、`pages/deep-research/ResearchSandboxPanel.tsx`（新）、`pages/deep-research/useReportSandbox.ts`（新）
 ## 明确不动
 - AI 写作 / 普通对话现有组件行为（message-list.tsx 仅加可选分组，缺省零变化）
 - 报告写作管线的写作逻辑本身（prompt 加一条要求 + 末尾确定性追加参考小节，均为附加式）
 - 深度研究后端会话/任务/事件模型（本轮不动）
@@ -11,6 +11,13 @@ This is a customized offline deployment of **DeerFlow** — a LangGraph-based AI
 Managed together via shell scripts in `scripts/`.
 ## Offline Release Repository
 Linux AMD64 离线发版脚本、wheelhouse、`deploy.env` 模板和部署文档统一维护在
 `knowledge-base-bj/deerflow-offline-deployment`，不要把离线镜像或发版资产提交到
 本业务源码仓库。正式发版从该仓库执行 `scripts/build-latest-master.sh`，脚本会读取
 本仓库最新 `master` 的干净源码快照。
 ## Commands
 ### Full Application (from repo root)
@@ -73,6 +80,8 @@ The **Lead Agent** (`deerflow/agents/lead_agent/`) is the single LangGraph graph
 **Harness → App import firewall** is enforced by `tests/test_harness_boundary.py` (runs in CI).
 **Workflow Studio** (`deerflow/workflows/` + `/api/workflows*`) is a second, independent execution path beside the lead agent: a persisted DAG scheduler that runs published workflow graphs, streams a durable event log over SSE, and supports human-input pauses, cancellation, and crash recovery via lease reclaim. Coze Studio supplies the canvas UI only; LangGraph is used only *inside* an `agent`/`skill` node. Master switch and all limits live in `config.yaml` → `workflows`. See the backend `AGENTS.md`/`CLAUDE.md`「Workflow Studio」and `docs/WORKFLOW_STUDIO_BACKEND_DEV_ZH.md`.
 ### Frontend
 The frontend (`frontend-web/`) is a React 19 + Vite SPA:
@@ -81,15 +90,19 @@ The frontend (`frontend-web/`) is a React 19 + Vite SPA:
 - **Pages**: `ChatPage` (thread chat), `AgentChatPage` (custom agent chat), `AgentsPage`/`NewAgentPage` (agent management), `ScheduledTasksPage`/`ScheduledTaskRunDetailPage` (scheduled tasks), `LightAppManagementPage`/`LightAppListPage`/`LightAppIframeView` (轻应用中心 — register/list/embed mini-apps)
 - **AI 写作·对话版（对话驱动写作台）**: a **parallel new entry** beside the classic AI-writing page (classic page/routes untouched) — route `/page/canvas/ai-writing-chat`, sidebar 「问答管理 → 课题研究(对话版)」. Page `open-canvas/pages/AIWritingChatPage.tsx` reuses the engine (`AIWritingContext` + `useStream` + `AIWritingDraftPanel`); **idle keeps the classic setup layout** (`WritingSetupChat` + collapsible form) and switches to the chat workbench once writing starts; left panel `components/ai-writing-chat/WritingChatPanel.tsx` = **unified chronological feed** (`ChatFlowTimeline.tsx`, chat bubbles anchor-interleaved into the progress timeline so triggered events render below the user's message) + button-only intervention cards (`ChatInterventionCards.tsx`, inline textareas removed) + bottom unified smart composer. Intent resolution: frontend fast path + `POST /api/ai-writing/sessions/{id}/intent` → `deerflow/agents/ai_writing/intent_router.py` (per-pause action whitelist, high-cost confidence gates, payload cleaning); supports QA bypass, clarify follow-ups, control intents, and material-stage auto re-search + pending-intent resume. Tests `tests/test_ai_writing_intent.py`; plan doc `frontend-web/docs/ai-writing-对话驱动写作台-实现方案.md`.
 - **轻应用中心 (Light App Center)**: a sibling of 任务管理 in the sidebar with two pages — 应用管理 (admin registers `window_open` or `iframe` mini-apps with a route-param builder: login params resolved from `localStorage.userInfo`, theme params literal) and 应用列表 (card grid of `window_open` apps, `window.open` launch). `iframe` apps are mounted under a chosen parent menu (XK/PG/TY/综合管理) and **dynamically injected into the sidebar** by `core/page-layout/use-sidebar-menu.ts` (`useSidebarMenuItems`), opening in the `LightAppIframeView` host. Client + React Query hooks in `strategy-components/api/light-apps.ts`; URL builder/constants in `strategy-components/lib/light-app.ts`. Backend: `/api/light-apps` (global/shared, admin-gated writes).
- **菜单管理 (Menu Management, admin-only)**: an **overlay** over the static sidebar menu — `MenuManagementPage` (`pages/MenuManagementPage.tsx`, route `/page/strategy/admin/menu-management`, opened from the admin-only 「菜单管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`). Admins rename / 停用·启用 / reorder (↑↓ or @dnd-kit drag) / re-parent (horizontal drag **or** the edit dialog's 「移动到」parent selector) any node across 一级/二级/三级, **including injected iframe light-app nodes** (`light-app-<appId>`). The static tree (`core/page-layout/sidebar-menu.ts`) stays the source of icons/routes; only per-node deltas (`label`/`disabled`/`parentId`/`sortOrder`) persist to the backend. Merge logic in `core/page-layout/menu-overrides.ts` (`applyMenuOverrides`, applied in `use-sidebar-menu.ts` after light-app injection, before role filter; disabling a node hides its whole subtree) — strict **3-level cap** (`wouldExceedDepth`). Client `strategy-components/api/menu-overrides.ts`. Backend: `/api/menu-overrides` (global/shared; open read, admin atomic replace-all).
+- **菜单管理 (Menu Management, admin-only)**: an **overlay** over the static sidebar menu — `MenuManagementPage` (`pages/MenuManagementPage.tsx`, route `/page/strategy/admin/menu-management`, opened from the admin-only 「菜单管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`). Admins rename / 停用·启用 / reorder (↑↓ or @dnd-kit drag) / re-parent (horizontal drag **or** the edit dialog's 「移动到」parent selector) any node across 一级/二级/三级, **including injected iframe light-app nodes** (`light-app-<appId>`). The static tree (`core/page-layout/sidebar-menu.ts`) stays the source of icons/routes; only per-node deltas (`label`/`disabled`/`parentId`/`sortOrder`) persist to the backend. Merge logic in `core/page-layout/menu-overrides.ts` (`applyMenuOverrides`, applied in `use-sidebar-menu.ts` after light-app injection, before role filter; disabling a node hides its whole subtree) — strict **3-level cap** (`wouldExceedDepth`). Client `strategy-components/api/menu-overrides.ts`. Backend: `/api/menu-overrides` (global/shared; open read, admin atomic replace-all). **简介模式** uses a separate overlay: every compact workspace menu item can be placed in `sidebar`（左侧菜单）、`settings`（设置和更多）or `toolbox`（右侧工具箱）; `CompactToolbox` (`components/workspace/compact-toolbox.tsx`, mounted by `PageRoutes.tsx`) opens only when the square right-edge trigger is clicked, then slides a compact, content-height right-side drawer over a backdrop above global dropdowns; configured items render top-to-bottom as centered square cards with a large icon above the label while the effective layout is compact. `/api/compact-menu-overrides` stores two independent sets (type `A` / `B`); each website picks one via `runtime-config.js` `VITE_COMPACT_MENU_TYPE`.
 - **舆情分析智能体（前端虚拟智能体）**: 智能体管理页新增「舆情分析」类型 tab，固定一张虚拟智能体卡片（名称/简介可编辑，存 localStorage）。对话页 `pages/SentimentAgentChatPage.tsx`（路由 `agents/sentiment-analysis/chats/:thread_id`）复用普通问答布局 + `MessageList`，**输入框只有发送按钮**；问答经 Gateway `POST /api/sentiment-agent/stream` 转发外部 AG-UI 网关（不经过 LangGraph），会话仅存 sessionStorage。接口地址 + Basic Auth 在 `runtime-config.js` 配置（`VITE_SENTIMENT_AGENT_API_URL` / `_AUTH_USERNAME` / `_AUTH_PASSWORD`）并随请求传给后台；后台按传入地址转发、关闭 TLS 校验，失败时把完整错误回传。核心模块 `src/core/sentiment-agent/`。
 - **简洁模式用户引导 (Compact-mode onboarding tour)**: 简洁模式（外观设置的「全量/简洁」= compact，无全局导航栏 + 页面侧边栏）新增 TDesign React `Guide` 组件驱动的分步引导。组件 `components/workspace/compact-mode-guide.tsx`（挂在 `ChatPage`）：9 步 —— 欢迎弹窗（dialog 模式）→ 左侧功能导航 → 聊天记录 → 设置和更多 → 换肤 → 界面模式（切回全量）→ 常用提示词栏 → 提示词管理弹窗 → 输入框；高亮目标由各组件上的 `data-compact-guide` 标记定位（`workspace-nav-chat-list` / `recent-chat-list` / `workspace-nav-menu` / `appearance-controls` / `custom-prompt-menu.tsx` 的 `CustomPromptBar`（提示词栏，仅新对话落地态渲染）与其 `ManagePromptsDialog`（`prompt-dialog` 锚点）/ ChatPage 输入框容器），**启动时按目标是否存在过滤步骤**（如新用户无聊天记录、侧栏收起时自动剔除该步 —— Guide 对缺失元素会抛错，不能盲传）。**提示词管理弹窗步骤是动态目标**：弹窗平时不渲染，引导切到该步前先广播 `PROMPT_DIALOG_GUIDE_EVENT`（`custom-prompt-menu.tsx` 导出）让 `CustomPromptBar` 打开 `ManagePromptsDialog` 并**接管**（`owner: true` 期间 ESC/点遮罩不关闭，防止高亮目标消失导致 Guide 报错），轮询锚点真正挂载后才切步；离开该步 / 跳过 / 完成 / 中途卸载时以 `owner: false` 收回弹窗，4 秒打不开则跳过该步防卡死。**TDesign Guide × Radix 模态互操作**：Radix 模态弹窗打开时会把 `body` 置 `pointer-events:none`（滚动锁定），Guide 直接挂在 body 下的遮罩/高亮/弹层会一并继承失活（引导按钮点不动），`styles/tdesign-theme.css` 末尾对 `.t-guide__overlay/__highlight/__popup/__wrapper` 显式 `pointer-events:auto` 兜底。触发：① 自动 —— 简洁模式新对话落地页自动演示，直到用户显式点「完成」或「跳过」才写 localStorage `deerflow.compact-guide-finished` 记忆（浏览器级）；**中途刷新/离开不记忆，下次进入还会再演示**。② 手动 —— 「设置和更多」下拉新增「界面使用引导」（该下拉仅存在于简洁模式工作区侧栏 footer）：已在问答页时广播 `compact-guide:start` 窗口事件直接启动，否则写 sessionStorage 请求并导航 `/chats/new` 由挂载的引导消费（消费在定时器真正启动时才执行，规避 StrictMode effect 双跑吞请求）。`eligible` 排除 embed=1 / hideChrome=1 / chats_iframe / FORCE_COLLAPSED_SIDEBAR（无界）等同样无全局 chrome 的特殊环境；启动延迟 800ms 等侧栏宽度过渡稳定后再测量高亮框。
 - **智能体使用引导 (Agent onboarding tour, 三段式)**: 智能体「浏览管理 → 创建与配置 → 发起问答」全流程分步引导，组件 `components/workspace/agents/agent-guide.tsx`（同一 TDesign `Guide` 封装模式，与简洁模式引导共享记忆语义：**仅显式点「完成/跳过」才写 localStorage** `deerflow.agent-guide.<stage>.finished`，中途刷新/离开不记忆）。**自动演示仅 create / chat 两段**（进智能体列表页不弹引导，点「创建智能体」进入新建页时才自动演示；list 段的 `AgentGuide` 传 `autoStart={false}`，只能由头部「使用引导」按钮手动触发）。三段各自挂载、各自记忆：① `list`（`agent-gallery.tsx`，/page/workspace/agents）——分区 Tabs、搜索排序、智能体卡片操作、右上「创建智能体」按钮；**完成/跳过就地结束（不跳转创建页，与 create 段无联动）**，最后一步仅提示进入创建页后会有配置引导；② `create`（`NewAgentPage.tsx`，/page/workspace/agents/new）——左侧对话式创建输入区、基本信息、运行模型+入库模板名、知识空间、SOUL.md、技能穿梭框、保存按钮（9 步）；③ `chat`（`AgentChatPage.tsx`，agents/:id/chats）——左栏切换与历史、常用问题 chips、输入框（落地态/会话态两个挂点同一 `chat-input` 标记）、右侧详情面板；`eligible` 限定普通智能体对话页（`showAgentList && !isEmbedded && !taskCtxOn`，即排除通用问答原地嵌入与任务深链工作区），三段共用 `isAgentGuideEnvironment()` 排除 embed/hideChrome/无界环境。高亮锚点 `data-agent-guide`：列表页 `tabs`/`search`/`agent-card`（卡片+列表两种布局的根元素）/`new-agent-btn`，创建页 `create-chat-input`/`create-basic`/`create-model`/`create-knowledge`/`create-soul`/`create-skills`/`create-save-btn`，对话页 `chat-sidebar`/`chat-questions`/`chat-input`/`chat-detail`；同样**启动时按目标存在性过滤步骤**（新用户无卡片/无预设问题时自动剔除）。手动重放：三个页面头部各有「使用引导」按钮（列表页创建按钮左侧、创建页 header 右侧、对话页 header），广播 `agent-guide:start:<stage>` 窗口事件强制重放（忽略已看过记忆）。
 - **敏感词管理 (Sensitive Word Management)**: configures the **展示层脱敏映射** (原始词 → 替换词). **Gated on the username `lqq`** (not the admin role) — `getAccountDisplayName().toLowerCase() === "lqq"` (username = email `@` prefix, else `user_id`, same as the profile page); the dropdown entry, the route guard, and the page-level guard all use this check. `src/lib/desensitize.ts` ships a frozen seed map `SEED_DESENSITIZE_MAP` (the deployment seed) plus a live mutable `DESENSITIZE_MAP` (initialized from the seed so `desensitize()` works before any fetch). `DesensitizeWordsLoader` (mounted in `App.tsx` `AppProviders`) fetches `/api/sensitive-words` on startup and, if non-empty, calls `replaceDesensitizeMap(...)` to make the backend config the source of truth (empty/failed → keep seed). Page `SensitiveWordsPage.tsx` (route `/page/strategy/admin/sensitive-words`, opened from the 「敏感词管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`, present in **both** full + collapsed sidebar modes) lists/adds/edits/启停/deletes words and saves the **whole set atomically** (replace-all); a 「导入种子词」 button merges any missing `SEED_DESENSITIZE_MAP` entries into the editor. Client + hooks in `strategy-components/api/sensitive-words.ts` (`wordsToMap` folds enabled rows into the runtime map). Backend: `/api/sensitive-words` (global/shared; open read, write allowed for admin **or** the `lqq` account), mirroring 菜单管理's store shape. **侧边栏 + 导航栏 menu labels are desensitized** at the data source: `useSidebarMenuItems`/`useActiveThirdLevel` (`core/page-layout/use-sidebar-menu.ts`) map every node's `label` through a desensitizer built **directly from the `/api/sensitive-words` query** (`makeDesensitizer(wordsToMap(words))`, falling back to the global seed `desensitize` while empty) — this sidesteps the `replaceDesensitizeMap` effect-timing race. Only `label` is rewritten; `path`/`id`/`icon` are untouched so routing/highlight are unaffected. All nav surfaces (`page-sidebar.tsx`, `page-sidebar-dark.tsx`, `page-sidebar-v1.tsx`, `strategy-components/Header.tsx`, `PageRoutes.tsx`) consume this hook and are covered; `MenuManagementPage` uses the raw tree so admins still edit real labels.
 - **技能地址管理 (Skill Address Management, admin-only)**: 扫描运行中的技能（`skills/{public,custom}` 下所有 `.md`/`.py`）里的 **http(s) URL 与 IP/IP:端口**，按唯一地址聚合全部出现位置（跨 .md/.py），支持**批量替换**（如把 UAT 地址一次性改成生产）。主体抽成可复用组件 `SkillAddressesPanel`（`pages/SkillAddressesPage.tsx` 导出，默认导出 `SkillAddressesPage` 仍保留旧路由 `/page/strategy/admin/skill-addresses` 作直链回退），**作为「技能地址管理」标签页嵌入管理员「技能管理」页 `pages/AdminSkillsPage.tsx`**（该页加 Tabs：「技能列表」+「技能地址管理」；入口在「设置和更多」下拉的「技能管理」`workspace-nav-menu.tsx` → `/page/workspace/admin/skills`，不再单列于 `components/page-sidebar.tsx` 左下角设置下拉）：打开自动扫描并带**进度条**（扫描逐技能 / 应用逐文件 X/N，应对 150+ 技能），URL/IP 类型过滤 + 搜索 + 「片段批量套用」（如所有 `uat.4.cn` → `prod.4.cn`）、每地址「替换为」输入框（可展开看 `file:line` 片段）、内联**预览**、**应用**、**多关键词检索**（空格分隔全部命中），以及**修改记录**面板——每次应用生成一条记录（显示时间/改了哪些地址 from→to/文件数/处数），可**针对单次记录回退**（二次确认）。client + NDJSON 流式解析在 `strategy-components/api/skill-addresses.ts`。后端 `/api/skill-addresses`（**仅管理员**）：所有文件 IO 走 `asyncio.to_thread` 不阻塞事件循环；`GET /scan`(+`/scan/stream`)、`POST /preview`、`POST /apply`(+`/apply/stream`)、`GET /backups`、`POST /rollback/{id}`；**子串安全替换**（基于 token span，不会误伤子串）、`expected_total` 乐观锁（409）、写前自动磁盘备份到 `{skills_root}/.address-edits/`（同时写一份 `{id}.manifest.json` 记录本次替换明细，供修改记录展示）、应用后刷新技能系统提示缓存。纯引擎 `deerflow/skills/address_scan.py`，router `app/gateway/routers/skill_addresses.py`，tests `tests/test_skill_addresses.py`。范围仅运行中技能，不动 `deploy/minimal/skills/`。
- **按钮管理 (Task Button Management, admin-only)**: configures the **可配置跳转按钮** rendered in the left task panel of the task deep-link workspaces (rwfx / 3qfx / xdfx, see `TaskFxWorkspace`). Each button = `{business, label, linkType, target, appendTaskId, idParam, idKind, enabled, sortOrder}`; `linkType` is `url` (外链 `window.open`, optional append of `?{idParam}={id}` — **`idParam` is the editable query-param name**, e.g. `id`/`task_id`), `business` (内部切换到另一业务, reuses `resolveTaskDeeplinkTarget`, always task id), or `purpose` (弹出当前任务的「任务目的」表格 via the shared `TaskPurposeDialog`, no target — configurable for any page incl. xdfx). **`idKind` (`task`/`action`) only matters for xdfx**: its deep-link `?taskId=` is an 行动id and the 任务id is resolved at login (`fetchTaskIdFromAction`) — `TaskContext` now also stashes the raw `actionId`, so a url button can append either (default `task`). Page `TaskButtonsPage.tsx` (route `/page/strategy/admin/task-buttons`, **admin-gated**, entry「按钮管理」in the bottom-left settings dropdown of `components/page-sidebar.tsx`, both full + collapsed modes) has per-business tabs, edits name/type/target/启停/排序/增删, saves the **whole set atomically** (replace-all), plus 「导入默认」 to merge code-seed defaults. **Seed/fallback** (like 敏感词管理): only when the whole table is empty (fresh deploy, never saved) do the workspace + page fall back to `defaultTaskButtons(cfg)` — rwfx's url buttons (编辑/下一步/3q详情) built from the **live** `/api/public/config/task-deeplink` plus cross-business switch buttons for **all three** businesses (each switches to the other two — rwfx→三情/行动, 3qfx→任务/行动, xdfx→任务/三情). Once saved, the store is the sole source of truth. The old hardcoded jump buttons were migrated out: `TaskFxWorkspace` no longer hardcodes 切换到三情分析, `TaskActionsPanel` keeps only the non-jump 清除记录, and `TaskPurposePanel` dropped its 3q详情 button (now configurable) **and defaults the 目的树 table to collapsed** (chevron toggle). Helpers `core/auth/task-buttons.ts` (`TaskButton`, `defaultTaskButtons`, `resolveTaskButtons`, `buttonsForBusiness`, `runTaskButton`), client+hooks `strategy-components/api/task-buttons.ts`. Backend: `/api/task-buttons` (global/shared; open read, admin replace-all), store `deerflow.persistence.task_buttons` (table `task_buttons`, auto-created by `create_all`), wired `app.state.task_button_store`. Tests: `tests/test_task_buttons.py`.
+- **按钮管理 (Task Button Management, admin-only)**: configures the **可配置跳转按钮** rendered in the left task panel of the task deep-link workspaces (rwfx / 3qfx / xdfx, see `TaskFxWorkspace`). Each button = `{business, label, linkType, target, appendTaskId, idParam, idKind, enabled, sortOrder}`; `linkType` is `url` (外链 `window.open`, optional append of `?{idParam}={id}` — **`idParam` is the editable query-param name**, e.g. `id`/`task_id`), `business` (内部切换到另一业务, reuses `resolveTaskDeeplinkTarget`, always task id), or `purpose` (弹出当前任务的「任务目的」表格 via the shared `TaskPurposeDialog`, no target — configurable for any page incl. xdfx). **`host`（宿主路由）** asks the embedding parent to navigate: `runTaskButton` sends `window.parent.postMessage({ type:'HOST_NAVIGATE', path, queryParams:{ [idParam]: Number(taskId) } }, hostOrigin)` — `target` is the host route, `appendTaskId`/`idParam` become numeric `queryParams` (task id only), origin from `runtime-config.js` `VITE_HOST_NAVIGATE_ORIGIN` (else ancestorOrigins/referrer; never `*`). **`idKind` (`task`/`action`) only matters for xdfx**: its deep-link `?taskId=` is an 行动id and the 任务id is resolved at login (`fetchTaskIdFromAction`) — `TaskContext` now also stashes the raw `actionId`, so a url button can append either (default `task`). Page `TaskButtonsPage.tsx` (route `/page/strategy/admin/task-buttons`, **admin-gated**, entry「按钮管理」in the bottom-left settings dropdown of `components/page-sidebar.tsx`, both full + collapsed modes) has per-business tabs, edits name/type/target/启停/排序/增删, saves the **whole set atomically** (replace-all), plus 「导入默认」 to merge code-seed defaults. **Seed/fallback** (like 敏感词管理): only when the whole table is empty (fresh deploy, never saved) do the workspace + page fall back to `defaultTaskButtons(cfg)` — rwfx's url buttons (编辑/下一步/3q详情) built from the **live** `/api/public/config/task-deeplink` plus cross-business switch buttons for **all three** businesses (each switches to the other two — rwfx→三情/行动, 3qfx→任务/行动, xdfx→任务/三情). Once saved, the store is the sole source of truth. The old hardcoded jump buttons were migrated out: `TaskFxWorkspace` no longer hardcodes 切换到三情分析, `TaskActionsPanel` keeps only the non-jump 清除记录, and `TaskPurposePanel` dropped its 3q详情 button (now configurable) **and defaults the 目的树 table to collapsed** (chevron toggle). Helpers `core/auth/task-buttons.ts` (`TaskButton`, `defaultTaskButtons`, `resolveTaskButtons`, `buttonsForBusiness`, `runTaskButton`), client+hooks `strategy-components/api/task-buttons.ts`. Backend: `/api/task-buttons` (global/shared; open read, admin replace-all), store `deerflow.persistence.task_buttons` (table `task_buttons`, auto-created by `create_all`), wired `app.state.task_button_store`. Tests: `tests/test_task_buttons.py`.
 - **State**: TanStack Query for server state, context providers (`SubtasksProvider`, `ArtifactsProvider`, `PromptInputProvider`) scoped to `WorkspaceRoutes`
 - **LLM streaming**: `@langchain/langgraph-sdk` streams messages from the backend via SSE
 - **UI**: Radix UI primitives + TailwindCSS v4 + shadcn-style components in `src/components/ui/`
 - **Shims**: `src/shims/` provides `next/link` and `next/navigation` polyfills (original code was Next.js)
 - **Login URL params** (`LoginPage.tsx`, frontend-only — the backend never sees these): besides the auth params (`ticket`/`userId`/`env`/`theme`/`yUserId`/`token`/`access_token`/`authToken`/`password`), the page supports a **task deep-link** via `?taskId=&goPath=`. After login it calls the consumer API `GET {VITE_AIPI_CONSUMER_URL}/taskAnalyseSearch/cop-task-detail?taskId=` (header `Authorization: Bearer admin`, auto-injected by `utils/request.ts`), stashes the full `data` (`id/overview/taskDirection/taskName/taskContent`) into `sessionStorage["login.copTaskDetail"]`, then routes by `goPath`: base codes `3qfx`/`rwfx`/`xdfx` → that business's configured **single agent** Q&A inside a **任务工作区** (resolved via `/api/business-mapping`; `resolveTaskDeeplinkTarget` calls `persistTaskContext({taskId, agentId, openingText})` and navigates to the `…/chats` **index**, which opens the latest task conversation or 新建 — a 1:N task↔对话 workspace, NOT `pendingAgentMessage`); the `-A` suffix (`3qfx-A`/…) → **multi-agent roundtable** with `roundtablePrefill.businessCode` so the page auto-selects the configured 业务链条. **xdfx's deep-link `?taskId=` is actually an 行动id, not a 任务id** — `resolveDeeplinkTaskId(goPath, rawId)` (called in `LoginPage` before everything) detects `xdfx`/`xdfx-A` and resolves it via `GET {action_detail_url}/{actionId}` → `data.taskId` (`fetchTaskIdFromAction`; `action_test`+`mock.action_detail` for offline testing); the resolved 任务id then drives `cop-task-detail`, the purpose tree, and the 1:N binding (other businesses pass the id through unchanged). **xdfx additionally partitions its chat records by 行动id (action_id), NOT by task_id**: `resolveTaskDeeplinkTarget` sets `partitionByAction:true` + keeps the raw action_id as `TaskContext.actionId`, so new threads are tagged `metadata.{taskId,actionId}` (taskId kept only to preserve the backend「任务深链对话全局共享」semantics, which keys off `metadata.taskId`) and the conversation list filters by `actionId` (+`agent_id`) — different actions of the same task get separate lists. xdfx's first-question opening text also appends `行动id（action_id）为…` (see `buildOpeningText` / `taskThreadMetadata`). goPath→businessCode: `3qfx`→`3Q`, `rwfx`→`6BF`, `xdfx`→`7BF`. The roundtable target also threads the URL `taskId` into `roundtablePrefill.taskId` (`resolveTaskDeeplinkTarget(goPath, detail, taskId)`), which turns on two taskId-scoped behaviors: (1) **separate, unpartitioned per-task storage** — taskId 会商聊天记录 live in their **own** store/table (`roundtable_task_drafts`), keyed **only by `task_id`** (one taskId = many records, shared across users, **no user 分权** at all; `created_by` is audit-only), kept entirely out of the per-user personal store (`roundtable_drafts`, now strictly per-user) so the two never mix. Backend router `/api/roundtable-task-drafts` (`GET /by-task/{id}` + `/by-task/{id}/latest`, `POST`, `GET/PUT/DELETE /{id}` — all user-agnostic); frontend client `roundtable-planning/api/task-drafts.ts`, and `useDraftPersistence`/`useRoundtableDrafts` route **all** CRUD to it when a `taskId` is present (else the personal `drafts.ts`). The matching **background jobs** are shared by task too: `roundtable_jobs.task_id` marks a task job; reads/dedup/stream/resume/cancel pass `?task_id=` so any user opening the task sees the same running 研讨 (progress/flowchart), and the executor writes the final report back to the task-draft store. Existing rows are moved over by `scripts/migrate_roundtable_task_drafts.py` (migration `20260618_01`). The history dropdown filters to the task and 新建 keeps the binding; (2) **Step-3 auto structured output** — after the `roundtable-summary` agent writes the Markdown report it automatically runs a second round emitting a `flow-json` flowchart (`useStep3Summary` `autoFlow`+`chainLevels`), whose hierarchy follows the business chain's stage goals (任务 → 目的 → 行为体 → …; coordinatorPrompt-specified hierarchy wins) and whose nodes never carry 阶段编号/阶段名 (the prior bug). **Both targets render embedded under the 任务管理 layout** — nested routes under `task-management/<business-path>/{roundtable,agent/:agent_id/chats}` in `StrategyRoutes.tsx` (`<business-path>` = `plan-task-sentiment` / `plan-task/plan-task-fx` / `plan-task/plan-task-action`, matching the COH中任务 menu paths in `sidebar-menu.ts`) so the global sidebar keeps 任务管理 → COH中任务 → the matching business highlighted. **All three single-agent businesses share `TaskFxWorkspace`** (`task-components/TaskFxWorkspace.tsx`): left = a「当前任务」card (`readCopTaskDetail()` 任务名称 + 简介, desensitized, 留存 above 新建对话) + per-task 1:N conversation list (`useTaskThreads(taskId, agentId, actionId?)` — filtered by **both** `metadata.taskId` AND `metadata.agent_id` so the three businesses' conversations staLine truncated
 - **agentfx 任务深链（新系统 iframe 嵌入的智能体问答，3qfx 单智能体 lite 模式的独立复制）**: goPath=`agentfx`（`${loginBase}?password=…&taskId=…&goPath=agentfx&embed=1&hideJump=1&theme=dark-blue`）。与 3qfx 的差异：①任务详情不走外部 consumer，改调**本系统 Gateway** `GET {backend}/taskAnalyseSearch/cop-task-detail?taskId=`（`apiFetch` 带刚登录的 DeerFlow 态；任务数据来自 TaskCOP 任务表，与任务列表/报告导入同一份）；②**固定使用内置智能体** `agentfx-analyst`（不走业务映射）；③路由 `task-management/plan-task-agentfx/agent/:agent_id/chats`，页面为独立复制的 `AgentFxWorkspace.tsx`（`AgentFxWorkspace`/`AgentFxIndexResolver`/`AgentFxChat` —— 左「当前任务」卡 + 1:N 对话列表 + 新建对话，`AgentChatPage taskBind` 自动发开场白；无 TaskJumpBar/清除记录/闸门/xdfx 行动卡）。模块 `core/auth/agentfx-deeplink.ts`（`isAgentfxGoPath`/`fetchAgentfxTaskDetail`/`resolveAgentfxDeeplinkTarget`）；任务详情整包仍存共享键 `login.copTaskDetail`（按标签页隔离），`AgentChatPage` 的 taskBind 自恢复对 agentfx 生效。`LoginPage` 在既有深链分支前用 `isAgentfxGoPath` 分流。**内置「任务研判报告助手」**：后端 seeder `app/gateway/routers/_agentfx_seed.py` + `_agentfx_seed_assets/`（config.yaml + SOUL.md，目录存在不覆盖；app.py lifespan 在 `_sync_legacy_agents` 之前调用，自动进 agents 表 user_id IS NULL）——SOUL 规定工作流「搜集信息（`web_search`，**首步不可跳过**）→ 每次检索 JSON 原样落盘 `/mnt/user-data/workspace/hits/qN.json` → **一条命令** `task-report-build`（group `all`）技能函数转换成 14 类 `task-reports.json`（模型禁止手写该 JSON；分页技能 `task-report-{enemy,our,env,judge}` 仅用于事后补跑单页；五者都是共享引擎 `task-report-lib/convert_lib.py` 的瘦 CLI，`resolve_hit_files` 对虚拟绝对路径读空的情况自动回退到相对写法并在 `warnings` 里列出尝试过的路径，免得智能体自己写脚本排查）→ `write_file` 生成 `/mnt/user-data/outputs/report.md` → 聊天总结 → 引导入库」，硬性约束：categoryType 逐字用 14 个全称（禁缩写自造如「DQ关键事件」）、JSON 直接写汉字禁 `\uXXXX` 转义、每类必须有实质内容不许空数组/纯占位、文件一律用 `/mnt/user-data/...` 虚拟路径（防宿主路径泄漏进 tool args）。**检索依赖 `config.yaml tools.web_search`（DDG，enabled 已开；内网需换 configurable_search 时改回并填 endpoint）**。任务工作区输入框在 `taskCtxOn` 时隐藏「写作/记忆/参考文献」（InputBox `hideContextTools` prop）与「知识空间」（不传 knowledgeSelector）；消息流里 write_file 文件卡片只显示文件名（`artifactDisplayName` 收敛宿主/虚拟路径）。**入库两条路径**：(a) **前端协助卡** —— `AgentChatPage`（taskBind 且非 taskGate）检测线程 artifacts 出现 `task-reports.json`（按文件名后缀匹配，兼容本地沙箱记录的宿主路径）且流式结束时，向 displayThread 尾部注入 `additional_kwargs.task_report_import_approval` 虚拟 ai 消息（`core/messages/utils.ts` 分组 `assistant:task-report-import` + `MessageList` 的 `taskReportImportSlot` 插槽渲染 `TaskReportImportCard`），点「开始入库」前端校验（`strategy-components/lib/agentfx-report-schema.ts`，14 类 + contentJson 合法 JSON + **\u 转义归一化还原为汉字**，与技能脚本同规则）后 `importTaskReport`（`strategy-components/api/task-reports.ts`）POST 导入接口整体替换；任务已有详情**不抑制**卡片（入库即整体替换，卡片文案说明覆盖语义），导入成功按 thread 记 sessionStorage（刷新不重复询问）、「暂不入库」为会话内记忆；(b) **入库技能** `task-report-import`（seeder 一并复制到 `skills/public/`，public 类技能 extensions_config 缺省即启用）—— 用户聊天里说「入库」时智能体按 SKILL.md 用 bash 跑 `scripts/task_report_import.py`（纯标准库：同样的校验规则 + 转义归一化；**默认关闭 SSL 证书校验** `ssl._create_unverified_context` + 忽略代理，适配内网自签证书；鉴权 `--token`/env `AGENTFX_IMPORT_TOKEN`→`DEERFLOW_AUTH_TOKEN`→`TOOLS_TOKEN` 优先，缺省经公共端点 `POST /api/parallel-agents/auth/token` 以 `agentfx-import` 用户现签 token——内网既有鉴权旁路；gateway 地址 env `AGENTFX_GATEWAY_URL` 或 `http://127.0.0.1:{DEER_FLOW_GATEWAY_PORT}`）；`--strict` 可要求 14 类齐全，默认允许部分导入并在 stdout JSON 的 `missing_categories` 里列缺。入库成功后任务 TaskCOP 状态自动置 25（已完成分析）。**入库成功通知宿主**（iframe 嵌入场景）：两条路径成功后都会 `window.top.postMessage({source: "magent-web", type: "Line truncated
 - **iframe 嵌入模式 (外部系统用 iframe 套用深链问答/会商)** — 三个**按标签页**开关，全部由深链 URL 参数开启、存进同一份 `sessionStorage` 会话（`embed.session`，键名常量在 `core/embed/embed-session.ts`），跨登录跳转/刷新/页内导航存活，**绝不跨标签污染**同浏览器另开的正常系统页。核心隔离手法：用 `sessionStorage`（按标签页/浏览上下文隔离，iframe 即便同源也有独立一份）而非 `localStorage`（跨标签共享）。开关：(1) **`?embed=1`（可带 `&theme=`）** — 去全局 chrome（`PageLayout` 的 `pageSidebarAllowed && !isEmbedActive()` → 隐藏 Header + PageSidebar）+ 按外部主题色**强制**明/暗：走 next-themes 的 `forcedTheme`（`App.tsx` `AppProviders` 调 `resolveForcedEmbedTheme`，**不写** localStorage `strategy-theme`），离散映射 `dark-blue`/`dark`→深、其余→浅；嵌入侧**绝不**调 `setTheme`/`persistSidebarEnabled`（那俩落 localStorage 跨标签污染，`LoginPage` 据 `readEmbedParam` 跳过）。(2) **`?hideJump=1`** — 隐藏深链底部「快捷跳转」栏 `TaskJumpBar` 的两部分（底部「下一步」等按钮 + 右侧垂直居中悬浮菜单），单智能体问答 + 会商共用该栏，`isJumpBarHidden()` 为真时整条 `return null`。(3) **登录用户隔离** — 嵌入态下鉴权/身份键（`deerflow.auth` token、`userInfo`、`login.*`、`tools_token`、maxkey/userDetail token）全部经 `core/auth/scoped-storage.ts` 的 `authStorage()`（嵌入→sessionStorage / 正常→localStorage）读写，使 iframe 里登录的用户与正常登录用户**完全隔离**、互不覆盖；所有 token 读取都过 `getStoredAuth()`/`getAuthorizationHeaderValue()`（API 客户端 `core/api/*` 全走这俩），改中心函数即让全体调用方自动隔离；跨标签账号变更监听 `AuthSyncWatcher`（`core/auth/sync.tsx`）在嵌入态禁用。嵌入会话在 `main.tsx` 渲染前 `syncEmbedSessionFromCurrentUrl()` 同步启用（早于任何鉴权写入，避免首帧 effect 顺序漏写 localStorage）；`AppProviders` 的 effect 再按 SPA 导航同步。`embed=0`/`hideJump=0` 可显式关闭。正常（非嵌入）标签页所有 `isXxx()` 恒 false，行为**零变化**。第三个开关 `?isolate=1`（**独立登录会话**）把同一套**登录用户隔离**单独提供给**普通（带 chrome）标签页**——只切换鉴权存储、不去 chrome / 不强制主题 / 不动跳转栏：`authStorage()` 的条件从「仅嵌入」放宽为 `isEmbedActive() || isIsolatedSession()`，`AuthSyncWatcher` 的跨标签监听对嵌入态**或**独立态都即时忽略（handler 内实时判，运行时开关也即刻生效）。除 URL 参数外，**设置 → 外观 →「登录会话」** 有一个 Switch「独立登录会话（本标签页）」运行时切换（`setIsolatedSession`，`appearance-settings-page.tsx`）：**开启时先 `migrateAuthToSession()`**（`scoped-storage.ts`，把 localStorage 的受保护键 `deerflow.auth`/`userInfo`/`userId`/`tools_token` + `login.*` 前缀快照搬进 sessionStorage）再翻标志，故无感不登出；此后本标签页登录态独立——别处登录/换号影响不到它，它换号也影响不到别人，但关掉该标签即结束（需重登）。开启给 toast 提示。
 ### Configuration
@@ -73,6 +73,8 @@ The **Lead Agent** (`deerflow/agents/lead_agent/`) is the single LangGraph graph
 **Harness → App import firewall** is enforced by `tests/test_harness_boundary.py` (runs in CI).
 **Workflow Studio** (`deerflow/workflows/` + `/api/workflows*`) is a second, independent execution path beside the lead agent: a persisted DAG scheduler that runs published workflow graphs, streams a durable event log over SSE, and supports human-input pauses, cancellation, and crash recovery via lease reclaim. Coze Studio supplies the canvas UI only; LangGraph is used only *inside* an `agent`/`skill` node. Master switch and all limits live in `config.yaml` → `workflows`. See the backend `CLAUDE.md`「Workflow Studio」and `docs/WORKFLOW_STUDIO_BACKEND_DEV_ZH.md`.
 ### Frontend
 The frontend (`frontend-web/`) is a React 19 + Vite SPA:
@@ -82,13 +84,13 @@ The frontend (`frontend-web/`) is a React 19 + Vite SPA:
 - **定时任务「JSON → HTML 模板填充」(模板数据转换器)**: a third scheduled-task execution mode. In the create/edit dialog (`ScheduledTasksPage.tsx`), selecting the built-in agent **「模板数据转换器」** (`execution_agent_name === "template-json-builder"`, `TEMPLATE_BUILDER_AGENT_ID`) reveals a 「HTML模板」 select (`useHtmlTemplates` → `GET /api/scheduled-tasks/html-templates`) + a **.json 上传** button (reads the file's text into the prompt box) and **hides** the 必须生成 HTML/Markdown switches (this mode always outputs HTML). The chosen template persists as `execution_context.template_config.template_id` (`TemplateFillConfig` in `core/scheduled-tasks/types.ts`). At run time the backend converts the source JSON (the task prompt) into that template's `DATA` structure, validates (retry-on-fail), fills the template, and stores an HTML page previewable via the existing run-detail HTML preview. The source can be **pure JSON, plain text, or text-with-embedded-JSON** — the backend pre-extracts any embedded JSON and the agent's `SOUL.md` maps it (or the plain text's semantics) to the template's schema skeleton. **Chat-page debug entry (only this agent's `AgentChatPage`)**: when `agent_id === "template-json-builder"`, the chat header shows a 「页面模板」 select + a 「渲染预览」 button — after a normal Q&A run, the button takes the **latest AI reply**, POSTs it to `POST /api/scheduled-tasks/template-fill/render` (`renderTemplateFill`), and pops a dialog rendering the filled HTML in a `sandbox="allow-scripts"` iframe plus the structure-validation status/errors/gaps — for debugging the agent's conversion effect without creating a scheduled task. Gated strictly on the agent id, so other agents' chat pages are untouched. See the backend CLAUDE.md「Template-fill mode」for the engine (`deerflow/runtime/scheduler/template_fill.py`), agent seed, dispatch, and the render API.
 - **AI 写作·对话版（对话驱动写作台）**: a **parallel new entry** beside the classic AI-writing page (classic page/routes untouched) — route `/page/canvas/ai-writing-chat` (`OpenCanvasRoutes.tsx`), sidebar 「问答管理 → 课题研究(对话版)」. Page `open-canvas/pages/AIWritingChatPage.tsx` fully **reuses the engine** (`AIWritingContext` state machine + LangGraph `useStream`, `AIWritingHistoryProvider`, right-side `AIWritingDraftPanel`) but replaces the presentation: left = `components/ai-writing-chat/WritingChatPanel.tsx` (timeline + **button-only intervention cards** `ChatInterventionCards.tsx` — the five pause cards copied from `InterventionCard.tsx` with all inline textareas removed, confirm/action buttons kept — plus a bottom **unified smart composer**). Free text goes through two-level intent resolution (`open-canvas/api/ai-writing-intent.ts`): deterministic short-phrase fast path (确认/继续/重新搜索/重写大纲…; high-cost actions never fast-pathed) then `POST /api/ai-writing/sessions/{id}/intent` — the backend reads the graph checkpoint (authoritative pause point from the pending interrupt) and routes via `deerflow/agents/ai_writing/intent_router.py` (LLM + strict per-pause action whitelist aligned to the graph's real resume actions, confidence gates: finalize/force_finalize/覆盖式 re_search need ≥0.85 else clarify, payload key-whitelist cleaning). Results map to `submitIntervention`/control (暂停/继续/后台挂起)/QA bypass (`answer` rendered as a chat bubble, never touches graph state)/clarify (amber follow-up bubble with multi-turn context). **Two-state layout**: idle (未开始写作) renders the **classic setup experience unchanged** — `WritingSetupChat` + collapsible `AIWritingPanel` form under `WritingFormProvider` (same as `AIWritingPage`'s idle branch); once writing starts (or history view opens) it switches to the chat workbench. **Unified chronological feed** (`ChatFlowTimeline.tsx`): intent-layer chat bubbles are interleaved INTO the progress-event timeline by anchor (= `progressEvents.length` at message creation), so events triggered by a user message render **below** it (Google-AI-Studio-style single stream, not timeline-above/chat-below); composer-driven interventions suppress the duplicate 「我的要求」card (`suppressedRequirementIndices`). **素材不足自动续跑** only at `material_confirm` (the only pause the graph supports re-search from): needResearch caches the payload as a pending intent, submits `re_search + userQuery`, and auto-submits the pending intent when the new material-confirm pause arrives (cancellable pill). Stage chips + per-stage placeholder + 「当前交互对象」status badge. Backend tests `tests/test_ai_writing_intent.py`. Plan doc: `frontend-web/docs/ai-writing-对话驱动写作台-实现方案.md`.
 - **轻应用中心 (Light App Center)**: a sibling of 任务管理 in the sidebar with two pages — 应用管理 (admin registers `window_open` or `iframe` mini-apps with a route-param builder: login params resolved from `localStorage.userInfo`, theme params literal) and 应用列表 (card grid of `window_open` apps, `window.open` launch). `iframe` apps are mounted under a chosen parent menu (XK/PG/TY/综合管理) and **dynamically injected into the sidebar** by `core/page-layout/use-sidebar-menu.ts` (`useSidebarMenuItems`), opening in the `LightAppIframeView` host. Client + React Query hooks in `strategy-components/api/light-apps.ts`; URL builder/constants in `strategy-components/lib/light-app.ts`. Backend: `/api/light-apps` (global/shared, admin-gated writes).
- **菜单管理 (Menu Management, admin-only)**: an **overlay** over the static sidebar menu — `MenuManagementPage` (`pages/MenuManagementPage.tsx`, route `/page/strategy/admin/menu-management`, opened from the admin-only 「菜单管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`). Admins rename / 停用·启用 / reorder (↑↓ or @dnd-kit drag) / re-parent (horizontal drag **or** the edit dialog's 「移动到」parent selector) any node across 一级/二级/三级, **including injected iframe light-app nodes** (`light-app-<appId>`). The static tree (`core/page-layout/sidebar-menu.ts`) stays the source of icons/routes; only per-node deltas (`label`/`disabled`/`parentId`/`sortOrder`) persist to the backend. Merge logic in `core/page-layout/menu-overrides.ts` (`applyMenuOverrides`, applied in `use-sidebar-menu.ts` after light-app injection, before role filter; disabling a node hides its whole subtree) — strict **3-level cap** (`wouldExceedDepth`). Client `strategy-components/api/menu-overrides.ts`. Backend: `/api/menu-overrides` (global/shared; open read, admin atomic replace-all).
+- **菜单管理 (Menu Management, admin-only)**: an **overlay** over the static sidebar menu — `MenuManagementPage` (`pages/MenuManagementPage.tsx`, route `/page/strategy/admin/menu-management`, opened from the admin-only 「菜单管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`). Admins rename / 停用·启用 / reorder (↑↓ or @dnd-kit drag) / re-parent (horizontal drag **or** the edit dialog's 「移动到」parent selector) any node across 一级/二级/三级, **including injected iframe light-app nodes** (`light-app-<appId>`). The static tree (`core/page-layout/sidebar-menu.ts`) stays the source of icons/routes; only per-node deltas (`label`/`disabled`/`parentId`/`sortOrder`) persist to the backend. Merge logic in `core/page-layout/menu-overrides.ts` (`applyMenuOverrides`, applied in `use-sidebar-menu.ts` after light-app injection, before role filter; disabling a node hides its whole subtree) — strict **3-level cap** (`wouldExceedDepth`). Client `strategy-components/api/menu-overrides.ts`. Backend: `/api/menu-overrides` (global/shared; open read, admin atomic replace-all). **简介模式** left-nav is a separate overlay: `/api/compact-menu-overrides` stores two independent sets (type `A` / `B`); each website picks one via `runtime-config.js` `VITE_COMPACT_MENU_TYPE`.
 - **白名单管理 (Login Whitelist, admin-only)**: gates **who may log in**, run as a **blocklist (黑名单模式)**. Two pieces: a global master switch (`system_settings.json → login_whitelist.enabled`, surfaced by **admin-only** `GET|PUT /api/system-settings/login-whitelist`) + a per-user **放行** flag (`users.approved` column, migration `20260625_02`). Users **self-register** as usual and **every new account defaults to `approved=True`** — so a user who has never logged into this system before is allowed straight through; the switch only blocks users an admin has explicitly **取消放行** (`approved=False`). (`create_user`/`User`/`UserRow` all default `approved=True`; admins are always approved; existing rows are backfilled `True`.) Login interception is the single helper `enforce_user_approved(user)` in `app/gateway/routers/auth.py`, called in all three login endpoints (`/login/{local,username,token}`) **after** the account is resolved/created and **before** the JWT is issued: switch off → everyone passes; `system_role=="admin"` → always passes (anti-lockout); else `approved=False` (admin-revoked) → 403 `{code:"PENDING_APPROVAL"}` (the frontend's `extractErrorMessage` surfaces the message and login throws before writing any auth state, so no half-login). Admin approves on `pages/LoginWhitelistPage.tsx` (route `/page/strategy/admin/login-whitelist`, entry「白名单管理」in the bottom-left settings dropdown of `components/page-sidebar.tsx`, both sidebar modes): a top master-switch + a list of all registered users (`GET /api/v1/auth/users`, now carrying `approved`) with a per-row 放行 Switch (`PUT /api/v1/auth/users/{id}/approval`, admin-only; revoking only blocks the **next** login — `token_version` is left untouched, existing sessions are not force-killed). Client/hooks: switch in `strategy-components/api/login-whitelist.ts`, user list + approval in `core/auth/{api,hooks}.ts` (`useSetUserApproval`). Backend tests: `tests/test_login_approval.py`. **账号级「登录口令」(per-account password — 临时开通)**: the same page also lets an admin assign one specific account an individual **plaintext** password (`users.login_password` column, migration `20260625_04`, nullable; auto-added on startup by `_ensure_orm_columns_sync`). Once set, **that account's** username login (`POST /api/v1/auth/login/username`) **requires** `?password=` to exactly match it and that personal password **takes precedence over** the global shared-password gate (`username_login.require_password`); accounts without one keep today's shared-gate / passwordless behavior. The user then logs in via the **existing** frontend URL `#/login/<用户名>?password=xxxx` (LoginPage already forwards `?password=`; `<用户名>` = the account's email `@`-prefix). **Plaintext is intentional** — the password rides in the URL query anyway, so storing it readably lets the admin re-copy the full login link from the page; it is exposed only on the **admin-only** `GET /api/v1/auth/users` (`UserListItem.login_password`) and the new admin-only `PUT /api/v1/auth/users/{id}/login-password` (set non-empty / clear with null·empty; doesn't touch `token_version`). The whitelist page renders a per-user 「登录口令」 column with a set/修改 editor + a live 「复制登录链接」 button (`useSetUserLoginPassword` in `core/auth/hooks.ts`, `setUserLoginPassword` in `core/auth/api.ts`). Backend gate helper `_lookup_user_by_username` (lookup-only, no auto-register) in `routers/auth.py`; tests `tests/test_login_personal_password.py`.
 - **敏感词管理 (Sensitive Word Management)**: configures the **展示层脱敏映射** (原始词 → 替换词). **Gated on the username `lqq`** (not the admin role) — `getAccountDisplayName().toLowerCase() === "lqq"` (username = email `@` prefix, else `user_id`, same as the profile page); the dropdown entry, the route guard, and the page-level guard all use this check. `src/lib/desensitize.ts` ships a frozen seed map `SEED_DESENSITIZE_MAP` (the deployment seed) plus a live mutable `DESENSITIZE_MAP` (initialized from the seed so `desensitize()` works before any fetch). `DesensitizeWordsLoader` (mounted in `App.tsx` `AppProviders`) fetches `/api/sensitive-words` on startup and, if non-empty, calls `replaceDesensitizeMap(...)` to make the backend config the source of truth (empty/failed → keep seed). Page `SensitiveWordsPage.tsx` (route `/page/strategy/admin/sensitive-words`, opened from the 「敏感词管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`, present in **both** full + collapsed sidebar modes) lists/adds/edits/启停/deletes words and saves the **whole set atomically** (replace-all); a 「导入种子词」 button merges any missing `SEED_DESENSITIZE_MAP` entries into the editor. Client + hooks in `strategy-components/api/sensitive-words.ts` (`wordsToMap` folds enabled rows into the runtime map). Backend: `/api/sensitive-words` (global/shared; open read, write allowed for admin **or** the `lqq` account), mirroring 菜单管理's store shape. **侧边栏 + 导航栏 menu labels are desensitized** at the data source: `useSidebarMenuItems`/`useActiveThirdLevel` (`core/page-layout/use-sidebar-menu.ts`) map every node's `label` through a desensitizer built **directly from the `/api/sensitive-words` query** (`makeDesensitizer(wordsToMap(words))`, falling back to the global seed `desensitize` while empty) — this sidesteps the `replaceDesensitizeMap` effect-timing race. Only `label` is rewritten; `path`/`id`/`icon` are untouched so routing/highlight are unaffected. All nav surfaces (`page-sidebar.tsx`, `page-sidebar-dark.tsx`, `page-sidebar-v1.tsx`, `strategy-components/Header.tsx`, `PageRoutes.tsx`) consume this hook and are covered; `MenuManagementPage` uses the raw tree so admins still edit real labels.
 - **技能地址管理 (Skill Address Management, admin-only)**: 扫描运行中的技能（`skills/{public,custom}` 下所有 `.md`/`.py`）里的 **http(s) URL 与 IP/IP:端口**，按唯一地址聚合全部出现位置（跨 .md/.py），支持**批量替换**（如把 UAT 地址一次性改成生产）。主体抽成可复用组件 `SkillAddressesPanel`（`pages/SkillAddressesPage.tsx` 导出，默认导出 `SkillAddressesPage` 仍保留旧路由 `/page/strategy/admin/skill-addresses` 作直链回退），**作为「技能地址管理」标签页嵌入管理员「技能管理」页 `pages/AdminSkillsPage.tsx`**（该页加 Tabs：「技能列表」+「技能地址管理」；入口在「设置和更多」下拉的「技能管理」`workspace-nav-menu.tsx` → `/page/workspace/admin/skills`，不再单列于 `components/page-sidebar.tsx` 左下角设置下拉）：打开自动扫描并带**进度条**（扫描逐技能 / 应用逐文件 X/N，应对 150+ 技能），URL/IP 类型过滤 + 搜索 + 「片段批量套用」（如所有 `uat.4.cn` → `prod.4.cn`）、每地址「替换为」输入框（可展开看 `file:line` 片段）、内联**预览**、**应用**、**多关键词检索**（空格分隔全部命中），以及**修改记录**面板——每次应用生成一条记录（显示时间/改了哪些地址 from→to/文件数/处数），可**针对单次记录回退**（二次确认）。client + NDJSON 流式解析在 `strategy-components/api/skill-addresses.ts`。后端 `/api/skill-addresses`（**仅管理员**）：所有文件 IO 走 `asyncio.to_thread` 不阻塞事件循环；`GET /scan`(+`/scan/stream`)、`POST /preview`、`POST /apply`(+`/apply/stream`)、`GET /backups`、`POST /rollback/{id}`；**子串安全替换**（基于 token span，不会误伤子串）、`expected_total` 乐观锁（409）、写前自动磁盘备份到 `{skills_root}/.address-edits/`（同时写一份 `{id}.manifest.json` 记录本次替换明细，供修改记录展示）、应用后刷新技能系统提示缓存。纯引擎 `deerflow/skills/address_scan.py`，router `app/gateway/routers/skill_addresses.py`，tests `tests/test_skill_addresses.py`。范围仅运行中技能，不动 `deploy/minimal/skills/`。
- **按钮管理 (Task Button Management, admin-only)**: configures the **可配置跳转按钮** rendered in the left task panel of the task deep-link workspaces (rwfx / 3qfx / xdfx, see `TaskFxWorkspace`). Each button = `{business, label, linkType, target, appendTaskId, idParam, idKind, openMode, loginParams, appendAuth, authTokenParam, authNameParam, enabled, sortOrder}`; `linkType` is `url` (外链 `window.open`, optional append of `?{idParam}={id}` — **`idParam` is the editable query-param name**, e.g. `id`/`task_id`), `business` (内部切换到另一业务, reuses `resolveTaskDeeplinkTarget`, always task id), or `purpose` (弹出当前任务的「任务目的」表格 via the shared `TaskPurposeDialog`, no target — configurable for any page incl. xdfx). **`url` buttons support two independent, coexisting login-append mechanisms**: (1) **`loginParams` (追加登录参数, like 应用管理/Light App Center)** — a list of `{key, source, customValue}` resolved at click time: `runTaskButton` reads `userInfo` (via `readUserInfo` from `strategy-components/lib/light-app`, embed-isolated through `authStorage`) and appends `?{key}={value}` for each (`source` = a userInfo field such as `accessToken`/`yUserId`, or `other` → literal `customValue`); empty list = nothing appended. Reuses `LOGIN_SOURCE_OPTIONS` from light-app; stored as JSON column `task_buttons.login_params_json` (`PortableJSON`, migration `20260625_01`). (2) **`appendAuth` (追加登录态)** — appends `?{authTokenParam}={token1}&{authNameParam}={username}` (default param names `token`/`username`) so the跳转目标外部系统 can identify the current user — e.g. `…/action/sentiment?token=<JWT>&username=lizhaoxing`. **Gated on token login**: `token1` = the `?authToken=` used by token-exchange login; `username` = the raw login name the backend resolved from `getTokenInfo`. Both are stashed at login by `persistLoginCredentials` into `login.token1`/`login.username` (`core/auth/login-credentials.ts`, scoped via [[scoped-storage]] so嵌入/独立会话隔离 + 随独立会话迁移). Only token login writes them → a non-token-login session has no `token1`, so `runTaskButton` silently skips the auth append (the jump still works, just without those two params). The frontend reads `username` straight from the new `UsernameLoginResponse.username` field (the stored email local-part is lossy — lowercased/normalized — so not used), **not** by decoding the JWT. Stored as columns `task_buttons.{append_auth, auth_token_param, auth_name_param}` (migration `20260625_02`). The admin page renders both editors for `url` buttons (loginParams 虚线框 + 追加登录态 switch). **`idKind` (`task`/`action`) only matters for xdfx**: its deep-link `?taskId=` is an 行动id and the 任务id is resolved at login (`fetchTaskIdFromAction`) — `TaskContext` now also stashes the raw `actionId`, so a url button can append either (default `task`). Page `TaskButtonsPage.tsx` (route `/page/strategy/admin/task-buttons`, **admin-gated**, entry「按钮管理」in the bottom-left settings dropdown of `components/page-sidebar.tsx`, both full + collapsed modes) has per-business tabs, edits name/type/target/启停/排序/增删, saves the **whole set atomically** (replace-all), plus 「导入默认」 to merge code-seed defaults. **Seed/fallback** (like 敏感词管理): only when the whole table is empty (fresh deploy, never saved) do the workspace + page fall back to `defaultTaskButtons(cfg)` — rwfx's url buttons (编辑/上一步/下一步/3q详情) built from the **live** `/api/public/config/task-deeplink` plus cross-business switch buttons for **all three** businesses (each switches to the other two — rwfx→三情/行动, 3qfx→任务/行动, xdfx→任务/三情). Once saved, the store is the sole source of truth. **Bottom 快捷跳转 bar groups by prev/next**: `TaskJumpBar` renders only「上一步/下一步」-type buttons in the bottom bar — a `prev` group (id 含 `prev` 或文案「上一步」, 描边次要样式 + ←图标) rendered **左侧**, then a `next` group (id 含 `next` 或文案「下一步」, 实心主色) on the **右侧** (container `justify-end`); everything else goes to the right-edge floating menu. The default 上一步 button (`rwfx-prev`, `url`, target = `DASHBOARD_AGENT_ROUTE` `/page/strategy/dashboard-agent`, `appendTaskId` + `idParam=taskId` → `?taskId=任务id`, `openMode=self`) 默认指向**应用内**「大屏绘制」页，在 **both** 单智能体 (`TaskFxWorkspace`) 与 多智能体会商 (`RoundtablePlanningPage` 深链 rwfx-A) 都显示（共用 `TaskJumpBar`）。**`runTaskButton` 的 `url` 类型支持应用内路由**：target 以单个 `/` 开头时按内部路由处理——`self` 走 react-router 同窗导航（不刷新），`blank` 拼成当前源的 hash 路由新标签打开；外链行为不变。 The old hardcoded jump buttons were migrated out: `TaskFxWorkspace` no longer hardcodes 切换到三Line truncated
+- **按钮管理 (Task Button Management, admin-only)**: configures the **可配置跳转按钮** rendered in the left task panel of the task deep-link workspaces (rwfx / 3qfx / xdfx, see `TaskFxWorkspace`). Each button = `{business, label, linkType, target, appendTaskId, idParam, idKind, openMode, loginParams, appendAuth, authTokenParam, authNameParam, enabled, sortOrder}`; `linkType` is `url` (外链 `window.open`, optional append of `?{idParam}={id}` — **`idParam` is the editable query-param name**, e.g. `id`/`task_id`), `business` (内部切换到另一业务, reuses `resolveTaskDeeplinkTarget`, always task id), or `purpose` (弹出当前任务的「任务目的」表格 via the shared `TaskPurposeDialog`, no target — configurable for any page incl. xdfx). **`host`（宿主路由）** asks the embedding parent to navigate: `runTaskButton` sends `window.parent.postMessage({ type:'HOST_NAVIGATE', path, queryParams:{ [idParam]: Number(taskId) } }, hostOrigin)` — `target` is the host route (e.g. `/task/item-aiceh/step-analysis-audience`), `appendTaskId`/`idParam` become numeric `queryParams` (task id only), origin from `runtime-config.js` `VITE_HOST_NAVIGATE_ORIGIN` (else ancestorOrigins/referrer; never `*`). Independent-tab clicks toast and do nothing. **`url` buttons support two independent, coexisting login-append mechanisms**: (1) **`loginParams` (追加登录参数, like 应用管理/Light App Center)** — a list of `{key, source, customValue}` resolved at click time: `runTaskButton` reads `userInfo` (via `readUserInfo` from `strategy-components/lib/light-app`, embed-isolated through `authStorage`) and appends `?{key}={value}` for each (`source` = a userInfo field such as `accessToken`/`yUserId`, or `other` → literal `customValue`); empty list = nothing appended. Reuses `LOGIN_SOURCE_OPTIONS` from light-app; stored as JSON column `task_buttons.login_params_json` (`PortableJSON`, migration `20260625_01`). (2) **`appendAuth` (追加登录态)** — appends `?{authTokenParam}={token1}&{authNameParam}={username}` (default param names `token`/`username`) so the跳转目标外部系统 can identify the current user — e.g. `…/action/sentiment?token=<JWT>&username=lizhaoxing`. **Gated on token login**: `token1` = the `?authToken=` used by token-exchange login; `username` = the raw login name the backend resolved from `getTokenInfo`. Both are stashed at login by `persistLoginCredentials` into `login.token1`/`login.username` (`core/auth/login-credentials.ts`, scoped via [[scoped-storage]] so嵌入/独立会话隔离 + 随独立会话迁移). Only token login writes them → a non-token-login session has no `token1`, so `runTaskButton` silently skips the auth append (the jump still works, just without those two params). The frontend reads `username` straight from the new `UsernameLoginResponse.username` field (the stored email local-part is lossy — lowercased/normalized — so not used), **not** by decoding the JWT. Stored as columns `task_buttons.{append_auth, auth_token_param, auth_name_param}` (migration `20260625_02`). The admin page renders both editors for `url` buttons (loginParams 虚线框 + 追加登录态 switch). **`idKind` (`task`/`action`) only matters for xdfx**: its deep-link `?taskId=` is an 行动id and the 任务id is resolved at login (`fetchTaskIdFromAction`) — `TaskContext` now also stashes the raw `actionId`, so a url button can append either (default `task`). Page `TaskButtonsPage.tsx` (route `/page/strategy/admin/task-buttons`, **admin-gated**, entry「按钮管理」in the bottom-left settings dropdown of `components/page-sidebar.tsx`, both full + collapsed modes) has per-business tabs, edits name/type/target/启停/排序/增删, saves the **whole set atomically** (replace-all), plus 「导入默认」 to merge code-seed defaults. **Seed/fallback** (like 敏感词管理): only when the whole table is empty (fresh deploy, never saved) do the workspace + page fall back to `defaultTaskButtons(cfg)` — rwfx's url buttons (编辑/上一步/下一步/3q详情) built from the **live** `/api/public/config/task-deeplink` plus cross-business switch buttons for **all three** businesses (each switches to the other two — rwfx→三情/行动, 3qfx→任务/行动, xdfx→任务/三情). Once saved, the store is the sole source of truth. **Bottom 快捷跳转 bar groups by prev/next**: `TaskJumpBar` renders only「上一步/下一步」-type buttons in the bottom bar — a `prev` group (id 含 `prev` 或文案「上一步」, 描边次要样式 + ←图标) rendered **左侧**, then a `next` group (id 含 `next` 或文案「下一步」, 实心主色) on the **右侧** (container `justify-end`); everything else goes to the right-edge floating menu. The default 上一步 button (`rwfx-prev`, `url`, target = `DASHBOARD_AGENT_ROUTE` `/page/strategy/dashboard-agent`, `appendTaskId` + `idParam=taskId` → `?taskId=任务id`, `openMode=self`) 默认指向**应用内**「大屏绘制」Line truncated
 - **实时并发监控 (Concurrency / System-Pressure Monitor, admin-only)**: a live panel mounted at the **top of the admin 排行榜 page** (`components/workspace/admin/concurrency-monitor.tsx` `ConcurrencyMonitorPanel`, rendered in `pages/AdminUserLeaderboardPage.tsx`) showing **当前并发的大模型调用数 + 列表（用户/智能体/类型/已运行时长）**, each row with a 「停止」button (and a 「全部停止」) that **truly aborts** that run's in-flight model stream via `RunManager.cancel` (`POST /api/admin/active-runs/{run_id}/cancel`) — to relieve pressure when 使用人数过多. Two line charts (minute/hour toggle): **并发量折线图** (peak/avg, `GET /api/admin/active-runs/concurrency`, fed by a lightweight background sampler into `concurrency_samples`) and **大模型出字速度折线图** (tokens/sec, `GET /api/admin/active-runs/token-speed`, aggregated from `llm_call_metrics`) so a dip pinpoints where the bottleneck is. A **「后台采样」Switch** (`system_settings.json → concurrency_monitor.enabled`, **default off / opt-in**, `GET|PUT /api/admin/active-runs/settings`) turns the background sampling on/off **at runtime, no restart** (the live concurrency count + 「停止」 work even while sampling is off — only the 并发量 history chart needs it on); everything is designed to **never impact production** (one tiny INSERT/15s, retention-purged, best-effort). Client/hooks: `core/admin/active-runs.ts` + `core/admin/hooks.ts` (`useActiveRuns`/`useConcurrencySeries`/`useTokenSpeedSeries`/`useCancel*`/`useMonitorSettings`). See the backend CLAUDE.md「Admin Concurrency Monitor」.
- **会话冲突 409 中文化**: when a user submits a new question while the previous turn is still streaming, the backend's `RunManager.create_or_reject` rejects with HTTP 409 (`services.py` now returns a **Chinese** detail「当前对话还在生成回答…」). `core/threads/hooks.ts` `onError` detects the conflict (`isActiveRunConflictError`: 409 / "already has an active run" / the Chinese text) and shows a friendly `toast.info` instead of a raw error.
+- **会话冲突 409 中文化**: when a user submits a new question while the previous turn is still streaming, the backend's `RunManager.create_or_reject` rejects with HTTP 409 (`services.py` now returns a **Chinese** detail「当前对话还在生成回答…」). `core/threads/hooks.ts` `onError` detects the conflict (`isActiveRunConflictError`: 409 / "already has an active run" / the Chinese text). A premature SSE close (SDK treats it as success and restores the send button while the backend run is still occupying the thread) is recovered by `confirmOrRejoin`: hold the stop button, `joinStream` the live run, and on 409 auto-reconnect instead of a fake AI bubble. `sse_consumer` no longer ends a resumable (`on_disconnect=continue`) stream on a false-positive `is_disconnected()`.
 - **State**: TanStack Query for server state, context providers (`SubtasksProvider`, `ArtifactsProvider`, `PromptInputProvider`) scoped to `WorkspaceRoutes`
 - **LLM streaming**: `@langchain/langgraph-sdk` streams messages from the backend via SSE
 - **UI**: Radix UI primitives + TailwindCSS v4 + shadcn-style components in `src/components/ui/`
@@ -0,0 +1,3 @@
 # deerflow-code
 deerflow-code
@@ -5,6 +5,9 @@ const LEGACY_LOCAL_API_BASE_URL = "http://localhost:8001";
 const LEGACY_LOCAL_WEB_BASE_URL = "http://localhost:5174";
 let pollTimer = null;
 let isPolling = false;
 let startupPromise = null;
 const POLLING_SCHEDULE_SETTING_KEYS = new Set(["taskPollingEnabled", "taskPollIntervalSeconds"]);
 function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
@@ -12,6 +15,14 @@ function delay(ms) {
 async function getSettings() {
  const settings = await chrome.storage.sync.get(DEER_CLIPPER_DEFAULTS);
  const discovered = await chrome.storage.local.get({
    discoveredApiBaseUrl: "",
    discoveredWebBaseUrl: "",
  });
  if (settings.autoDiscoverServiceUrl) {
    settings.apiBaseUrl = discovered.discoveredApiBaseUrl || settings.apiBaseUrl;
    settings.webBaseUrl = discovered.discoveredWebBaseUrl || settings.webBaseUrl;
  }
  const updates = {};
  if (!settings.apiBaseUrl || settings.apiBaseUrl === LEGACY_LOCAL_API_BASE_URL) {
    updates.apiBaseUrl = DEER_CLIPPER_DEFAULTS.apiBaseUrl;
@@ -69,10 +80,7 @@ function apiCandidatesForWebBase(webBase, currentApiBase) {
    }
  };
  add(currentApiBase);
  add(webBase);
  add(DEER_CLIPPER_DEFAULTS.apiBaseUrl);
  add(LEGACY_LOCAL_API_BASE_URL);
  try {
    const url = new URL(normalizeServiceBase(webBase));
@@ -85,6 +93,10 @@ function apiCandidatesForWebBase(webBase, currentApiBase) {
    // Ignore invalid candidates.
  }
  add(currentApiBase);
  add(DEER_CLIPPER_DEFAULTS.apiBaseUrl);
  add(LEGACY_LOCAL_API_BASE_URL);
  return candidates;
 }
@@ -93,6 +105,12 @@ async function browserContextStatus(apiBaseUrl) {
    const response = await fetch(`${apiBaseUrl}/api/browser-context/status`, {
      credentials: "include",
    });
    // The gateway may enforce authentication globally before this otherwise
    // public discovery endpoint is reached. A 401/403 still proves that this
    // candidate is the zncm API paired with the open frontend tab.
    if (response.status === 401 || response.status === 403) {
      return { enabled: true, authenticationRequired: true };
    }
    if (!response.ok) {
      return null;
    }
@@ -201,9 +219,12 @@ async function discoverServiceBases(settings, force = false) {
    settings.webBaseUrl !== next.webBaseUrl ||
    settings.lastServiceSyncSource !== next.lastServiceSyncSource
  ) {
-    await chrome.storage.sync.set({
+    // Discovered endpoints are runtime state, not user-authored preferences.
-      apiBaseUrl: next.apiBaseUrl,
+    // Keep them in storage.local so Chrome sync write quotas cannot break task
-      webBaseUrl: next.webBaseUrl,
+    // polling. The options page may still persist explicit user choices.
    await chrome.storage.local.set({
      discoveredApiBaseUrl: next.apiBaseUrl,
      discoveredWebBaseUrl: next.webBaseUrl,
      lastServiceSyncAt: next.lastServiceSyncAt,
      lastServiceSyncSource: next.lastServiceSyncSource,
    });
@@ -826,19 +847,50 @@ async function pollOnce() {
  }
 }
-async function startup() {
+async function initializePolling() {
  let settings = await getSettings();
-  settings = await discoverServiceBases(settings);
+  try {
-  settings = await syncAuthToken(settings);
+    settings = await discoverServiceBases(settings);
  } catch (error) {
    // Service discovery persists diagnostic metadata in storage.sync. Chrome can
    // temporarily reject those writes after its quota is reached; polling must
    // still start with the last known settings.
    console.warn("zncm service discovery failed during startup", error);
  }
  try {
    settings = await syncAuthToken(settings);
  } catch (error) {
    // A failed status/token write must not prevent alarms from being installed.
    // pollOnce() will retry token synchronization before claiming each task.
    console.warn("zncm token sync failed during startup", error);
  }
  await refreshAlarm(settings);
  await scheduleNextPoll(1000);
 }
-chrome.runtime.onInstalled.addListener(() => void startup());
+function startup() {
-chrome.runtime.onStartup.addListener(() => void startup());
+  if (!startupPromise) {
    startupPromise = initializePolling().finally(() => {
      startupPromise = null;
    });
  }
  return startupPromise;
 }
 async function restartPollingSchedule() {
  const settings = await getSettings();
  await refreshAlarm(settings);
  await scheduleNextPoll(0);
 }
 chrome.runtime.onInstalled.addListener(() => void startup().catch((error) => console.warn("zncm startup failed", error)));
 chrome.runtime.onStartup.addListener(() => void startup().catch((error) => console.warn("zncm startup failed", error)));
 chrome.storage.onChanged.addListener((changes, areaName) => {
-  if (areaName === "sync") {
+  if (
-    void startup();
+    areaName === "sync" &&
    Object.keys(changes || {}).some((key) => POLLING_SCHEDULE_SETTING_KEYS.has(key))
  ) {
    void restartPollingSchedule().catch((error) => console.warn("zncm polling reschedule failed", error));
  }
 });
 chrome.alarms.onAlarm.addListener((alarm) => {
@@ -902,4 +954,4 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  return true;
 });
-void startup();
+void startup().catch((error) => console.warn("zncm startup failed", error));
@@ -0,0 +1,130 @@
 const assert = require("node:assert/strict");
 const fs = require("node:fs");
 const path = require("node:path");
 const test = require("node:test");
 const vm = require("node:vm");
 const BACKGROUND_PATH = path.join(__dirname, "background.js");
 function createHarness() {
  let storageChangedListener;
  let alarmCreateCount = 0;
  const settings = {
    apiBaseUrl: "http://localhost:8001",
    webBaseUrl: "http://localhost:5174",
    autoDiscoverServiceUrl: false,
    accessToken: "",
    tokenSyncEnabled: false,
    taskPollingEnabled: true,
    workerId: "test-worker",
    taskPollIntervalSeconds: 5,
  };
  const chrome = {
    alarms: {
      clear: async () => {},
      create: async () => {
        alarmCreateCount += 1;
      },
      onAlarm: { addListener: () => {} },
    },
    cookies: { get: async () => null },
    runtime: {
      onInstalled: { addListener: () => {} },
      onMessage: { addListener: () => {} },
      onStartup: { addListener: () => {} },
    },
    storage: {
      local: {
        get: async (defaults) => ({ ...defaults }),
        set: async () => {},
      },
      session: { get: async () => ({ actSessions: {} }), set: async () => {} },
      sync: {
        get: async () => ({ ...settings }),
        set: async (updates) => Object.assign(settings, updates),
      },
      onChanged: {
        addListener: (listener) => {
          storageChangedListener = listener;
        },
      },
    },
    tabs: { query: async () => [] },
  };
  const context = {
    chrome,
    console,
    fetch: async () => {
      throw new Error("offline test");
    },
    importScripts: () => {},
    setTimeout: () => 1,
    clearTimeout: () => {},
    URL,
    DEER_CLIPPER_DEFAULTS: settings,
    deerNormalizeBaseUrl: (value) => String(value || "").replace(/\/+$/, ""),
    deerMakeWorkerId: () => "test-worker",
    deerAuthHeaders: () => ({}),
    deerExtractAuthTokenFromPage: () => ({ token: "" }),
  };
  context.globalThis = context;
  vm.runInNewContext(fs.readFileSync(BACKGROUND_PATH, "utf8"), context, {
    filename: BACKGROUND_PATH,
  });
  return {
    emitStorageChange(changes) {
      storageChangedListener(changes, "sync");
    },
    getAlarmCreateCount: () => alarmCreateCount,
    resetAlarmCreateCount: () => {
      alarmCreateCount = 0;
    },
    getApiCandidates: (webBase, currentApiBase) =>
      vm.runInContext(`apiCandidatesForWebBase(${JSON.stringify(webBase)}, ${JSON.stringify(currentApiBase)})`, context),
  };
 }
 const settle = () => new Promise((resolve) => setImmediate(resolve));
 test("self-written sync metadata does not restart browser task polling", async () => {
  const harness = createHarness();
  await settle();
  harness.resetAlarmCreateCount();
  harness.emitStorageChange({
    lastTokenSyncAt: { oldValue: "before", newValue: "after" },
  });
  await settle();
  assert.equal(harness.getAlarmCreateCount(), 0);
 });
 test("polling configuration changes restart browser task polling", async () => {
  const harness = createHarness();
  await settle();
  harness.resetAlarmCreateCount();
  harness.emitStorageChange({
    taskPollingEnabled: { oldValue: false, newValue: true },
  });
  await settle();
  assert.equal(harness.getAlarmCreateCount(), 1);
 });
 test("service discovery prefers the API paired with the open zncm tab", async () => {
  const harness = createHarness();
  assert.deepEqual(
    Array.from(harness.getApiCandidates("http://localhost:5174", "http://47.94.209.59:2026")),
    [
      "http://localhost:5174",
      "http://localhost:8001",
      "http://47.94.209.59:2026",
      "http://localhost:8001",
    ].filter((value, index, values) => values.indexOf(value) === index),
  );
 });
@@ -7,6 +7,8 @@
  const HOST_ID = "zncm-page-assistant-host";
  const state = {
    enabled: true,
    taskPollingEnabled: true,
    webBaseUrl: "",
    open: false,
    busy: false,
    threadId: "",
@@ -709,20 +711,58 @@
  async function loadSettings() {
    const settings = await chrome.storage.sync.get(DEER_CLIPPER_DEFAULTS);
    state.enabled = Boolean(settings.pageAssistantEnabled);
    state.taskPollingEnabled = Boolean(settings.taskPollingEnabled);
    state.webBaseUrl = deerNormalizeBaseUrl(settings.webBaseUrl || DEER_CLIPPER_DEFAULTS.webBaseUrl);
    ensureWidget();
  }
  chrome.storage.onChanged.addListener((changes, areaName) => {
-    if (areaName !== "sync" || !changes.pageAssistantEnabled) {
+    if (areaName !== "sync") {
      return;
    }
-    state.enabled = Boolean(changes.pageAssistantEnabled.newValue);
+    if (changes.pageAssistantEnabled) {
-    ensureWidget();
+      state.enabled = Boolean(changes.pageAssistantEnabled.newValue);
-    if (state.enabled) {
+      ensureWidget();
-      setStatus("页面问答框已开启。");
+      if (state.enabled) {
        setStatus("页面问答框已开启。");
      }
    }
    if (changes.taskPollingEnabled) {
      state.taskPollingEnabled = Boolean(changes.taskPollingEnabled.newValue);
    }
    if (changes.webBaseUrl) {
      state.webBaseUrl = deerNormalizeBaseUrl(changes.webBaseUrl.newValue || DEER_CLIPPER_DEFAULTS.webBaseUrl);
    }
  });
  function isZncmPage() {
    const appPath = `${location.pathname}${location.hash}`.toLowerCase();
    if (
      appPath.includes("/page/workspace") ||
      appPath.includes("/chats/") ||
      appPath.includes("#/login")
    ) {
      return true;
    }
    try {
      const configured = new URL(state.webBaseUrl);
      return configured.origin === location.origin;
    } catch {
      return false;
    }
  }
  // MV3 service workers may be suspended between their short polling timers,
  // while chrome.alarms cannot reliably run more often than every 30 seconds.
  // A visible zncm tab provides a cheap wake-up signal so browser_act requests
  // are normally claimed within the backend/model timeout window.
  setInterval(() => {
    if (!state.taskPollingEnabled || !isZncmPage()) {
      return;
    }
    chrome.runtime.sendMessage({ type: "zncm-poll-now" }).catch(() => {});
  }, 3000);
  setInterval(() => {
    if (!state.enabled || !ui.pageTitle) {
      return;
@@ -0,0 +1,117 @@
 # Wiki 数据流转与本地编码验收（2026-09-03）
 ## 结论
 本地 BGE-M3 小批量编码已安装、配置并实际运行。已有 Wiki 的向量化、自动沉淀、
 普通库文件导出、助手库异步导入、助手库文件导出、空普通库回流及两端向量检索已实测通过。
 **技能自动生成 Wiki 尚未完成验收**：WeKnora 的两个生成模型都返回 HTTP 402
 `Insufficient Balance`。不能把后半段通过等同于全链路通过。
 本次修改运行在本地 DeerFlow 开发服务（前端 5175、后端 8001），连接用户提供的远端
 WeKnora；没有把业务代码发布到服务器，没有提交 Git，也没有直接写 WeKnora 图数据库。
 ## 本地编码配置
 - 实现：FastEmbed / ONNX Runtime CPU，官方 `BAAI/bge-m3` 权重。
 - 配置名：`bge-embedding-m3`，1024 维，每批 2 条，2 个 CPU 推理线程。
 - 运行依赖：FastEmbed 随标准后端依赖安装；模型必须提前放在离线目录中，仍按需加载，不影响主服务启动。
 - 权重：约 2.3 GB，持久缓存 `C:\Users\ji\.cache\deerflow\embeddings`，不进入业务仓库。
 - 配置：`llmwiki.local_wiki_index.embedding.provider: local`；可用
  `local_model_path` 指定离线权重目录，详见后端 README。
 - 查询向量在本地实时编码。已有 Wiki 在内容哈希、模型指纹匹配且向量非空时直接复用。
  不同模型或维度不能混用；导入不静默重新编码。
 - 原始文档分段向量与模型生成后的 Wiki 文本不同，不能相互冒用。本次新建的是 Wiki
  正文的 BGE-M3 索引，不是把既有 512 维文档向量改名为 1024 维。
 ## 实际数据验收
 来源是已有普通知识库“图片测试111”，没有改写其 Wiki 内容。
 | 阶段 | Wiki | Wiki 向量 | 实体 | 引用关系 |
 | --- | ---: | ---: | ---: | ---: |
 | 普通知识库导出 | 19 | 101 | 19 | 108 |
 | 助手知识库导入后导出 | 19 | 101 | 19 | 108 |
 | 新建普通知识库回流后导出 | 19 | 101 | 19 | 108 |
 | 知识梳理总库导出（7 个来源记录） | 19 | 101 | 19 | 108 |
 逐项断言通过：
 1. 三份包的 Wiki slug、标题、正文、摘要、页面类型、别名、分类路径、出链一致。
 2. 101 条向量的原始 float32 字节、分段编号、维度和模型指纹完全一致。
 3. 将导入前后实体 ID 映射回原 Wiki slug 后，108 条关系的端点及谓词集合完全一致。
 4. 总库导出没有因多个来源重复同步而重复导出同一当前页面的分段向量。
 5. 元数据回归测试另覆盖 tags、目录恢复、原始文档片段不计入 Wiki 数量、原生技能无
   ownership 记录时可被选中、短 Wiki 不漏向量、模型指纹不兼容时不假装向量检索。
 普通包约 1.01 MB，助手包约 0.79 MB，回流包约 0.83 MB。普通包还带 2 个原始文档及
 108 个原始片段；助手导出提供 Wiki、Wiki 向量和关系，不重新上传原始文档触发二次生成。
 ### 检索
 实际查询：“军方用什么工具评估极端天气带来的风险？”
 - 回流普通库 `/api/llmwiki/search` 返回 `mode=vector`，首条“国防气候评估工具”。
 - 助手库 `/api/assistant-knowledge/search` 返回 `retrieval_mode=vector`，首条同上；
  首个命中分段余弦相似度约 0.6343。
 - 浏览器实际提交总库检索，显示“向量检索 · 余弦相似度”和相同命中；不是只检查返回字段。
 - 普通库采用已有页面级聚合评分，因此页面最终分数与单分段余弦值不必相等。
 - 回流的向量写入 **DeerFlow 管理的本地 Wiki 索引**。未写入 WeKnora 原生向量数据库，
  本次结论适用于本系统问答检索，不能声称原生 WeKnora 自身的检索也已完成该向量导入。
 ### 页面
 普通与助手库复用同一 Wiki 阅读组件：目录树、类型/标签筛选、分类面包屑、别名标签、
 正文内链、出链、反向链接及邻接关系视图。窄窗口可收起目录。
 浏览器验证了“索引 → 国防气候评估工具”、展开关系视图、助手 Wiki 跳回普通库来源，
 以及普通 Wiki 的“在知识梳理中查看”反向跳转。
 ### 验收数据位置
 - 原有普通库：`48f669dc-433e-4aab-b5ea-897b6f7a3d2f`
 - 知识梳理总库：`c3fd9841-0718-44dc-860e-aae3020fd485`
 - 最终助手测试库：`489be905-08c8-40fe-8d60-42ac21dd945a`
 - 最终普通回流测试库：`428162aa-03f6-4c61-8994-360f2f39e0c9`
 新建测试库名称均以“Wiki链路验收-0903-1826”开头，保留用于复核；未删除用户已有库。
 本地 `.runtime/wiki-live-result.json` 保存验收结果，`.runtime/wiki_live_acceptance.py`
 保存本次验收流程，均为忽略的运行产物，不包含认证口令。
 ## 这次实际修复的问题
 - 内置技能只有磁盘目录、没有归属记录时，被错误判定为不存在。
 - 技能应上传去代码后的知识正文，让 WeKnora 生成 Wiki，而不是伪造一个 `skill` 类型页面。
 - Wiki 生成等待使用实际 stats 接口；零页结果明确失败，不无期限等待。
 - 向量化完成后自动导出沉淀到总库，并阻断导出回调重复触发全量同步。
 - 短摘要和短正文同时存在时，旧分段阈值会将整页过滤为零向量。
 - 分类路径必须先创建 WeKnora folder 并绑定 folder_id；只传 category_path 会被服务端清空。
 - Wiki 的标签/分类/别名/原始引用保留；图节点绑定真实 Wiki，避免生成重复的空实体页面。
 - 保留归一化 float32 原始字节；导入中不能用 `section_index or index`，因为合法编号 0 会被改写。
 - 总库多个来源保留审计，但检索与导出只使用当前 Wiki 版本对应的向量，避免旧贡献污染检索。
 - 包解析改为同盘临时 SQLite，上传先落盘再异步导入，导出完成后才提供文件下载。
 ## 阻塞与未通过的范围
 1. 技能 `knowledge-base-ingest` 已送入专门创建的普通测试库，但远端
   `deepseek-v4-flash` 和 `qwen3.6-flash` 均因余额不足失败。WeKnora 即使失败也可能把
   文档 parse_status 标为 completed。需恢复可用生成模型后重新运行技能全链路验收。
 2. 已采用磁盘暂存和有界批处理，但本次只有约 1 MB 实测，**未做数 GB 压测、断点续传、
   进程中断恢复验收**。大包部署仍需磁盘容量、代理 body size 和超时配置。
 3. 当前实体去重主要按类型及规范化名称；这次没有完成跨别名、歧义实体的模型对齐及
   多来源事实冲突合并验收，不能视为这一历史需求已全面完成。
 4. 重复上传仍会保留独立来源记录。向量导出已消除旧版本重复，但上传身份幂等、部分远端
   写入失败后的无损重试、跨实例图片资源打包仍需独立验证。
 5. 当前版本已补充自动增量链路：服务启动立即补扫，之后默认每 30 秒扫描全部普通
   知识库；Wiki 抽取完成后无需手工点击向量化，并自动以来源快照覆盖同步到知识梳理总库。
 6. 回流当前只允许新建空 Wiki 普通库，避免覆盖已有页面。普通库现有页面列表的超大规模
   分页与助手问答的最终生成回答不属于这轮通过结论。
 ## 自动化检查
 - 后端相关测试：118 passed（assistant repository、Wiki sync、package roundtrip、
  WeKnora 接口、向量检索与知识库管理）。
 - 修改的 Python 功能文件 Ruff 检查通过；app.py 既有启动顺序导致的 E402 不在此次改动中处理。
 - `git diff --check` 通过（只有仓库换行提示）。
 - 前端完整 `pnpm typecheck` 未通过：57 个既有/本轮范围外错误，涉及 nextra 缺失、Markdown
  插件类型及其他模块；本轮新建/修改的 Wiki 组件、助手 API、技能面板没有出现在错误清单中。
  浏览器实际页面与跳转已验证，但不能声称全项目构建通过。
@@ -0,0 +1,719 @@
 # AgentScope 2.0 多智能体报告协作工作台——前端实施计划
 > 文档状态：前端代码已落地、契约冻结；联调等待后端运行中干预与报告改写
 > 编写日期：2026-09-02；进度更新日期：2026-09-06
 > 目标项目：`F:\react01\deeflow-code\deerflow-server\frontend-web`
 > 视觉与交互参考：`F:\react01\coze-frontend\frontend\apps\coze-studio`
 > 参考页面：`http://localhost:3000/work_flow?space_id=1&workflow_id=wf_88cb9f4c6642`
 > 配套后端计划：`docs/agentscope-多智能体报告协作工作台-后端实施计划.md`
 > 本文只规划新增页面，不修改现有多智能体会商页面，不复用旧 Workflow Studio 执行状态。
 ## 0. 当前进度
 `frontend-web/src/report-collaboration/` 已实现两栏工作台、会话/方案/run API 客户端、mock driver、SSE reducer、`MessageList` 适配、方案卡、画布、节点抽屉、Composer、报告预览与历史。`RC-FE-001`～`013` 的页面骨架与契约层视为完成。
 后端已通规划前路径（澄清 → 出方案 → 选定 → `queued` run），见后端计划 §0。前端真实执行体验仍受阻：
 - `GET /runs/{id}/stream` 已挂载（`RC-BE-011`）；dispatcher/租约已落地（`RC-BE-012`），默认 `worker_enabled=false` 仍不自动领取 queued run。
 - 报告改写 / 恢复接口已由后端 `RC-BE-015` 挂载。
 - 质量角色已由 `QualityRoleKernel` 跑通（`RC-BE-013`）；真实 AgentScope 模型/`web_search` 仍待后续票。
 联调顺序：先打开 `report_collaboration.enabled` 验证规划前 REST 与 `GET /runs/{id}/stream` 重放；画布自动执行需同时打开 `worker_enabled`（默认关）。
 ## 1. 前端目标
 新增独立的「报告协作」工作台。用户可以通过对话提出任意报告需求，查看系统生成的多个协作方案，点击方案卡片在流程图中预览协作结构，确认后观察多智能体执行，并在全过程通过统一对话框提出修改意见。
 前端必须满足：
 1. 页面采用“左侧对话、右侧流程画布”的固定两栏布局，画布、工具栏、弹窗和抽屉参考 Coze Studio 页面风格。
 2. 消息列表必须复用 DeerFlow 现有 `MessageList`，不复制 Coze 的会话消息实现。
 3. 所有执行过程、AgentScope 团队消息、智能体回复、工具调用及其原始返回、错误、协助卡、返工和最终报告入口都通过现有消息协议按时间顺序显示在左侧对话区，不设置独立执行结果面板，也不另做“阶段摘要”替代实时消息。
 4. 候选方案、流程节点、对话进度和报告使用同一份后端事实，不各自推断状态。
 5. 用户可在规划中、运行中、等待输入和报告完成后继续对话。
 6. 用户协助卡的出现和提交都不能在前端被解释为“节点已经完成”。
 7. 页面刷新、SSE 断线重连、历史会话切换后能恢复到一致状态。
 暂定：
 - 页面名称：`报告协作`。
 - 路由：`/page/workspace/report-collaboration`。
 - 会话路由：`/page/workspace/report-collaboration/:sessionId`。
 - 默认候选方案数量：3。
 - 点击画布节点时打开覆盖式节点说明抽屉；抽屉只展示节点职责和合同，不展示节点执行结果。
 ---
 ## 2. 范围与非目标
 ### 2.1 本期范围
 - 新建、查看、重命名、删除协作报告会话。
 - 使用对话澄清报告需求。
 - 显示 2～3 个候选方案卡片。
 - 卡片与右侧流程图预览联动。
 - 节点说明抽屉：职责、所依据的信息类型、预期产出、工具、资料要求和验收条件。
 - 实时展示节点排队、运行、校验、等待用户、完成、返工、失败和取消。
 - 在左侧对话时间线中直接展示每个智能体的流式文本、团队对话、工具调用和工具返回，并展示审稿意见、报告文件和报告版本。
 - 并行阶段用横向的智能体选择器切换当前查看对象；选择器只控制同一份消息流的聚焦范围，不创建另一套执行结果视图。
 - 运行期间发送补充要求、重新检索、重新分析、节点重跑等指令。
 - 完成后进行报告问答、章节重写、全文润色和版本恢复。
 - 报告模板选择、Markdown 预览、Markdown/Word 下载。
 - 响应式布局、键盘操作、加载反馈和错误恢复。
 ### 2.2 明确不做
 - 不引入 `@coze-workflow/playground` 或 `@coze-arch/coze-design`。
 - 不加载 Coze workflow definition、run 或 node run。
 - 不允许前端拖拽连线后直接改变执行逻辑。
 - 不新增第二套消息气泡、Markdown、引用和文件卡渲染器。
 - 不展示模型原始 chain-of-thought、系统/内部 prompt、密钥和被标记为内部控制信息的字段。
 - 不把用户有权查看的 AgentScope TeamSay、智能体文本、工具调用或工具返回压缩成“正在检索”等摘要卡；这些原始业务消息必须进入复用的 `MessageList`。敏感字段只能按统一脱敏策略替换，不能以摘要替代。
 - 不增加第三栏、常驻详情栏、节点执行结果栏或独立执行时间线。
 - 节点抽屉不展示节点生成正文、工具返回、证据列表、错误堆栈或 attempt 历史；这些过程统一在左侧 `MessageList` 的原生消息/工具步骤中查看。
 - 不改造现有圆桌、多智能体会商、深度研究和 AI 写作页面。
 - 不把浏览器状态作为业务事实源。
 ---
 ## 3. 参考页面行为映射
 | 目标行为 | Coze 参考文件 | DeerFlow 目标组件 | 说明 |
 |---|---|---|---|
 | 两栏骨架 | `workflow-studio-layout.tsx` 的面板比例与分隔条 | `ReportCollaborationLayout.tsx` | 左对话、右画布；只保留一条可调整分隔线 |
 | 顶栏 | `workflow-studio-header.tsx` | `ReportCollaborationHeader.tsx` | 替换为会话、模板、报告、停止等操作 |
 | 候选卡片 | `workflow-proposal-cards.tsx` | `ReportPlanCards.tsx` | 点击预览，明确确认后才执行 |
 | 右侧画布 | `workflow-canvas.tsx` | `ReportFlowCanvas.tsx` | 使用 `@xyflow/react` 重建，不引入 Coze Playground |
 | 左侧消息区 | `run-conversation-panel.tsx` | `ReportConversationPanel.tsx` | 外层风格参考 Coze，内部复用 DeerFlow `MessageList` |
 | 节点说明抽屉 | Coze 节点配置面板的视觉与抽屉行为 | `NodeInspectorDrawer.tsx` | 点击画布节点打开，只展示职责与输入输出合同 |
 | 全程执行反馈 | 参考其进度和状态表达 | `AgentStageSelector` + DeerFlow `MessageList` | 选择智能体后直接显示其流式消息、TeamSay、工具调用与返回；不再合成为阶段摘要 |
 | 状态栏 | `connection-status.tsx` | `ConnectionStatusBar.tsx` | 展示连接、重连和事件游标 |
 | 对话历史 | `left-panel-tabs.tsx` | `ConversationSidebarTabs.tsx` | 对话与历史，不增加“节点资源”Tab |
 | 异步反馈 | 规划进度、运行状态 | MessageList 步骤条 + 画布状态 | 操作超过 300ms 必须有反馈 |
 主要参考源：
 - `F:\react01\coze-frontend\frontend\apps\coze-studio\src\workflow-standalone\components\workflow-studio-layout.tsx`
 - `F:\react01\coze-frontend\frontend\apps\coze-studio\src\workflow-standalone\components\workflow-studio-composition.tsx`
 - `F:\react01\coze-frontend\frontend\apps\coze-studio\src\workflow-standalone\components\workflow-studio-header.tsx`
 - `F:\react01\coze-frontend\frontend\apps\coze-studio\src\workflow-standalone\components\run-conversation\workflow-proposal-cards.tsx`
 - `F:\react01\coze-frontend\frontend\apps\coze-studio\src\workflow-standalone\styles.module.less`
 若直接复制 Apache-2.0 源码片段或样式，必须保留版权头并维护来源说明；默认做行为映射和视觉重建。
 ---
 ## 4. 页面结构
 ```text
 ┌──────────────────────────────────────────────────────────────────────────┐
 │ 返回  报告协作 / 会话标题        保存状态  模板  报告  停止/继续  更多 │
 ├────────────────────────────────┬─────────────────────────────────────────┤
 │ 对话 / 历史                    │ 协作流程图                              │
 │                                │                                         │
 │ DeerFlow MessageList           │ @xyflow/react                           │
 │ · 并行时：[协调者][市场][政策] │ · 节点状态与活动连线                    │
 │ · 用户与协调者/成员消息        │ · 缩放、适配视图、小地图                │
 │ · 原生 ToolCall / ToolMessage  │ · 点击节点打开覆盖式说明抽屉            │
 │ · 协助卡、报告文件和版本       │                                         │
 │                                │                                         │
 │ 统一输入框                     │                                         │
 ├────────────────────────────────┴─────────────────────────────────────────┤
 │ 已连接 · run_xxx · 事件 128                                              │
 └──────────────────────────────────────────────────────────────────────────┘
 ```
 节点抽屉覆盖在右侧画布之上，不占用第三栏：
 ```text
 ┌─────────────────────────────────────────┐
 │ 节点名称                         关闭 × │
 │ 角色 / 当前状态                         │
 ├─────────────────────────────────────────┤
 │ 节点职责                                │
 │ 要根据什么：所需输入、上游类型、资料要求 │
 │ 要产出什么：成果类型、格式、验收条件     │
 │ 可用工具与边界                          │
 │ 上下游关系                              │
 ├─────────────────────────────────────────┤
 │ 在对话中对此节点提出意见                │
 └─────────────────────────────────────────┘
 ```
 抽屉明确不展示实际执行结果、生成正文、工具返回、来源明细、错误堆栈或 attempt 时间线；这些信息只在左侧原生消息流中展示。
 布局默认值：
 - 顶栏高度：56px。
 - 左侧面板：默认 480px，最小 360px，最大 720px。
 - 右侧画布：最小 480px，使用剩余空间。
 - 节点说明抽屉：覆盖画布右侧，建议宽度 420px；关闭后完整归还画布空间。
 - 状态栏：24～28px。
 - 低于 960px：左侧对话和右侧画布改为顶部按钮切换的单面板模式；节点说明仍使用覆盖式 Drawer。
 - 两栏分隔条：支持 pointer 拖动、方向键、Home、End。
 ### 4.1 原生消息流与并行智能体切换
 “复用 `MessageList`”在本页面的含义是复用它现有的 assistant 文本、`tool_calls`、`tool` 消息、引用、文件和协助卡渲染语义；不把 AgentScope 的运行过程先解析成专用步骤条、进度摘要或阶段结果卡。
 单个智能体：
 - `agent.reply.started` 立即创建一条稳定的 assistant 消息；`message.delta` 持续更新同一 `messageId`，所以用户会先看到流式状态、再看到逐字回复，而不是等待节点结束。
 - 工具调用创建/更新该 assistant 消息的 `tool_calls`；工具返回创建匹配 `tool_call_id` 的原生 `tool` 消息。现有 `MessageGroup` 负责把两者配对显示，不再另写工具过程渲染器。
 - AgentScope TeamSay 作为带 `agentRunId` 的普通 assistant 消息进入同一流，按到达顺序显示。它不是节点完成的证据，节点状态仍由右侧画布和后端状态机决定。
 并行智能体：
 ```text
 多角度并行研究  3/4 进行中
 [ 协调者 ] [ 市场规模 ✓ ] [ 品牌竞争 ● ] [ 海外市场 ● ] [ 政策风险 ! ]
 └──────────────────── 当前选中智能体的原生 MessageList ────────────────────┘
 ```
 - `AgentStageSelector` 只在并行阶段出现，横向放置在左侧对话区顶部；使用现有图标体系的头像/角色图标、名称、状态文字和非纯颜色状态标识。默认选中第一位已开始运行的成员；用户手动切换后保持选择，不因其他成员返回而抢走阅读焦点。
 - 所有成员的事件都持续接收、按每个 `agentRunId` 持久化和更新，即使当前未选中；切回即可看到完整历史与正在更新的同一条消息，不丢 token、不重新请求、不把结果拼成摘要。
 - 当前选择只将共享用户消息、协调者广播消息和目标成员消息组成一个 `BaseStream<AgentThreadState>` 交给同一个 `MessageList`。切换标签仅切换该视图的消息范围，不改变 run、节点或消息的后端事实。
 - 某成员请求用户协助时，其标签显示“待回复”徽标，选择器显示待处理数；点击徽标切到该成员，原生协助工具消息仍由现有 `MessageList` 协助卡渲染。其他成员可继续运行。
 - 节点抽屉打开某并行成员时，同步聚焦对应标签；抽屉仍只展示合同。用户从抽屉或输入框发送反馈时带 `targetNodeId`/`agentRunId`，后端在安全点生效。
 这不是把完整日志另做成调试面板：对话区展示的是模型和工具的真实业务消息；只有 chain-of-thought、内部提示词及按权限必须脱敏的字段不进入该消息流。
 ### 4.2 页面主要状态
 | 状态 | 左侧对话区 | 右侧流程画布 | 主要操作 |
 |---|---|---|---|
 | `empty` | 欢迎语和输入框 | 空态 | 输入需求、选模板 |
 | `clarifying` | 澄清问题和协助卡 | 需求理解节点 | 回答或补充 |
 | `planning` | 用户消息和规划进度 | 骨架或需求图 | 继续补充，等待安全点生效 |
 | `proposal_ready` | 2～3 张方案卡 | 点击卡片预览对应图 | 切换、修改、采用 |
 | `running` | 协调者与成员原生消息、工具过程和用户反馈 | 实时节点状态 | 干预、停止、在对话中要求重跑 |
 | `awaiting_input` | 等待用户卡片、原因和影响 | 对应节点显示等待 | 回答、取消 |
 | `reviewing` | 审稿意见和返工过程 | 评审/返工节点状态 | 接受或补充要求 |
 | `completed` | 总结、报告文件卡、版本和后续对话 | 完整执行图 | 问答、改写、导出 |
 | `failed` | 错误说明和恢复建议 | 失败节点 | 通过对话重试或取消 |
 | `cancelled` | 已保留成果说明 | 未完成节点取消 | 从已有成果继续或新建方案 |
 ---
 ## 5. 前端目录与组件边界
 建议新增：
 ```text
 frontend-web/src/report-collaboration/
  api/
    client.ts
    sessions.ts
    plans.ts
    runs.ts
    reports.ts
    types.ts
  components/
    ReportCollaborationLayout.tsx
    ReportCollaborationHeader.tsx
    ConversationSidebarTabs.tsx
    ReportConversationPanel.tsx
    AgentStageSelector.tsx
    ReportComposer.tsx
    ReportPlanCards.tsx
    ReportFlowCanvas.tsx
    ReportFlowNode.tsx
    NodeInspectorDrawer.tsx
    ReportPreviewDialog.tsx
    InterventionCard.tsx
    SessionHistoryPanel.tsx
    ConnectionStatusBar.tsx
  hooks/
    useReportCollaborationSession.ts
    useReportCollaborationStream.ts
    useReportCollaborationMessages.ts
    useReportPlanSelection.ts
    useReportPanelLayout.ts
  state/
    event-normalizer.ts
    event-reducer.ts
    selectors.ts
    message-adapter.ts
  pages/
    ReportCollaborationPage.tsx
  styles/
    report-collaboration.css
  tests/
 ```
 修改范围：
 - `frontend-web/src/pages/WorkspaceRoutes.tsx`：增加页面和会话路由。
 - `frontend-web/src/components/workspace/workspace-nav-chat-list.tsx`：增加导航入口。
 - `frontend-web/src/components/workspace/messages/message-list.tsx`：仅允许增加一个向后兼容的通用业务卡片插槽。
 - `frontend-web/src/core/messages/utils.ts`：如确需识别通用业务卡类型，只做集中式扩展。
 不得把新功能放进：
 - `frontend-web/src/roundtable-planning/`
 - `frontend-web/src/open-canvas/`
 - Coze 项目的 `workflow-standalone/`
 ---
 ## 6. 数据来源与前端状态
 ### 6.1 三层状态
 前端状态分为：
 1. 服务器快照：session、原生 messages、plans、run、nodes、artifacts、report versions；每条消息带稳定的 `agentRunId`、`nodeRunId`、`phaseId` 和可见性标记，其中 artifacts 只用于生成左侧消息卡和报告文件，不形成独立结果面板。
 2. durable SSE reducer：从 `seq` 连续应用事件，更新服务器快照投影。
 3. 纯展示状态：预览中的方案、选中的节点、聚焦的并行 `agentRunId`、两栏宽度、节点抽屉开关、窄屏当前视图和画布位置。
 纯展示状态不能改变执行结果。点击卡片只改变 `previewPlanId`；只有点击“采用方案”才改变服务器 `selectedPlanId`。
 ### 6.2 前端事件包
 ```ts
 interface CollaborationEvent<T = unknown> {
  eventId: string;
  sessionId: string;
  runId?: string;
  seq: number;
  type: string;
  timestamp: string;
  data: T;
 }
 ```
 必须处理：
 - 快照先到、事件后到。
 - 事件重复。
 - 事件短暂乱序。
 - SSE 断线后从 `after_seq` 重放。
 - 页面切换时旧连接晚到事件。
 - token delta 多次更新同一消息。
 - TeamSay、assistant 文本、tool-call 参数 delta、tool 返回 delta 分别更新各自稳定消息，不得等节点完成后批量生成摘要。
 - 并行成员的消息可交错到达；Reducer 必须按 `agentRunId + messageId` 更新，而不是按当前被选中的标签丢弃未聚焦成员的事件。
 - 节点重新打开后出现新 attempt。
 Reducer 以 `sessionId + runId + seq` 去重；消息行以 `messageId`、工具结果以 `toolCallId`、标签以 `agentRunId` 使用后端稳定 ID，禁止使用数组下标。
 ---
 ## 7. 分步实施计划
 ### FE-0：冻结参考视觉与行为基线
 任务：
 1. 在 1440×900、1280×800、1024×768 打开参考页面。
 2. 保存初始态、方案态、运行态和节点说明抽屉四组截图。
 3. 记录顶栏、两栏比例、间距、圆角、边框、阴影、画布工具栏和状态色。
 4. 形成“参考组件—目标组件—允许差异”表。
 5. 明确消息列表保持 DeerFlow 原样，不纳入像素对齐。
 交付物：
 - 视觉基线截图。
 - 视觉 token 表。
 - 页面行为清单。
 验收：参考的每个用户可见状态都有截图或明确说明不存在。
 ### FE-1：路由、菜单和静态页面骨架
 任务：
 1. 增加两个路由和菜单项。
 2. 创建 `ReportCollaborationPage`。
 3. 创建顶栏、左侧对话栏、右侧画布和底部连接栏。
 4. 实现可调整宽度的两栏布局，以及“专注对话/专注画布”切换。
 5. 实现窄屏单面板切换与覆盖式节点 Drawer。
 验收：
 - 不连接后端也能呈现完整空态。
 - 375～1440px 不出现页面级横向滚动。
 - 对话/画布切换不会卸载会话状态或清空输入内容。
 - 键盘可以调整两栏分隔条。
 ### FE-2：页面设计系统与 Coze 风格重建
 建立页面专用语义变量：
 ```text
 --rc-bg-page
 --rc-bg-panel
 --rc-bg-canvas
 --rc-border
 --rc-text-primary
 --rc-text-secondary
 --rc-accent
 --rc-running
 --rc-waiting
 --rc-success
 --rc-danger
 --rc-panel-shadow
 --rc-card-radius
 ```
 规则：
 - 从 DeerFlow 主题 token 派生，不在组件中散落十六进制颜色。
 - 使用 Lucide SVG 图标，不使用 emoji。
 - hover/focus/展开动画控制在 150～300ms。
 - 支持 `prefers-reduced-motion`。
 - 交互状态不能只靠颜色表达。
 - 正文对比度达到 4.5:1。
 - 操作超过 300ms 显示 spinner、骨架或流式状态。
 验收：除 MessageList 内部外，两栏布局、密度、卡片、画布工具栏、弹窗和节点抽屉达到参考基线。
 ### FE-3：API 类型和 TanStack Query 层
 实现：
 - session CRUD。
 - messages 查询与发送。
 - plan request、plans 查询、select。
 - run 创建、查询、停止、重试。
 - command 创建、确认、取消。
 - artifacts、sources、reports、versions 查询。
 每个写请求携带：
 - `idempotencyKey`
 - `expectedRevision`
 冲突行为：
 - `409`：刷新当前快照并提示用户重新确认。
 - `422`：在对应操作附近显示具体错误。
 - `429`：显示预算/并发限制，不自动重试。
 - `5xx`：保留用户输入，允许使用同一幂等键重试。
 验收：API 层不包含页面展示逻辑，类型与后端 OpenAPI 一致。
 ### FE-4：SSE、快照和事件 Reducer
 实现 `useReportCollaborationStream`：
 1. 先拉 session snapshot。
 2. 使用 snapshot 的 `lastSeq` 建立 SSE。
 3. 校验每个事件 session/run 身份。
 4. 按 seq 应用事件并去重。
 5. 出现序号缺口时暂停 live apply，补拉缺失事件。
 6. 断线指数退避并支持 `Last-Event-ID`。
 7. 终态后完成最后一次事件补拉再关闭连接。
 Reducer 必须覆盖：
 - 消息流增量。
 - 计划候选和 revision。
 - node/node attempt 状态。
 - artifact 创建和校验。
 - command 分类和执行。
 - report delta 和正式版本。
 - 错误、取消、接管恢复。
 - AgentScope 原始可见消息和工具事件：`message.created/delta/completed`、`tool_call.created/delta/completed`、`tool_result.created/delta/completed`、`team_message.created/delta/completed`。
 验收：重复事件、乱序事件和重连都不产生重复消息、重复节点或状态倒退。
 ### FE-5：复用 DeerFlow `MessageList`
 复用：
 - `frontend-web/src/components/workspace/messages/message-list.tsx`
 - `frontend-web/src/components/workspace/messages/message-list-item.tsx`
 - `frontend-web/src/components/workspace/messages/message-group.tsx`
 - `frontend-web/src/components/workspace/messages/context.ts`
 实现无损协议适配 `message-adapter.ts`：
 1. 将已持久化的 `CollaborationMessage` 一对一映射为 LangGraph SDK `Message[]`，不将文本或工具结果二次概括。
 2. 构造最小 `BaseStream<AgentThreadState>` 外观：`messages`、`isLoading`、`isThreadLoading`、`values`。
 3. 协调者、成员 AgentScope TeamSay 和成员回复都映射为普通 assistant 消息；保留 `messageId`、文本 chunk、角色/成员名称、`agentRunId`、`nodeRunId`、`phaseId`、来源事件 ID 和完成态。
 4. AgentScope 工具调用映射为该 assistant 消息的标准 `tool_calls`；调用结果映射为标准 `tool` 消息，并严格复用原有 `tool_call_id` 配对。工具参数、返回正文及增量保持原文，只有后端明确标注的脱敏字段被替换。
 5. 将来源、文件、报告 Markdown delta 和正式版本继续映射为既有引用、文件卡和普通 assistant 消息；规划卡、用户确认卡和报告替换卡仍通过一个通用业务卡片插槽渲染。
 6. 错误、恢复建议、命令影响范围和报告版本变化也必须进入同一时间线；错误堆栈以可读错误消息替代，但不能吞掉已发生的工具/成员消息。
 7. `selectMessagesForAgentRun(allMessages, focusedAgentRunId)` 只在客户端从已同步消息中选出共享消息与目标成员消息；并行选择器不得重新拉取、重新排序或改写消息。
 约束：
 - 不使用 LangGraph `useThreadStream` 发送消息。
 - 新页面输入框调用报告协作 API。
 - 不增加多个页面专用 MessageList props。
 - 普通聊天、AI 写作、深度研究等未传插槽时必须零变化。
 - 不另建执行结果列表、节点结果面板或成果时间线。
 - 不用“运行中”“已检索 N 条”等专用摘要替代真实消息。`MessageList` 本身的流式状态和原生工具步骤是唯一过程视图。
 验收：
 - 历史和流式消息使用同一行稳定更新。
 - 单成员首次开始回复、每次工具启动和工具返回均在 300ms 内出现可见的原生消息行或原生工具步骤；不允许持续数秒只有静态加载圈。
 - 并行标签切换后显示目标成员的完整已持久化消息和实时 delta；未选中成员持续接收，标签上的运行/待回复状态及时更新。
 - 用户上翻阅读时不强制滚底。
 - 用户发送新消息后滚到最新位置。
 - 卡片显示成功不改变后端节点状态。
 ### FE-6：需求澄清和候选方案卡片
 `ReportPlanCards` 展示：
 - 推荐标签、策略、标题、摘要和推荐理由。
 - 分析角度和参与角色。
 - 关键步骤与质量门。
 - 预计时间、成本等级和资料范围。
 - 方案验证错误。
 交互：
 - 点击卡片或“查看流程”只切换预览。
 - “采用此方案”调用 select API。
 - “开始协作”再次校验并创建 run。
 - 方案调整后显示新 revision；旧 revision 只读。
 - 过期 revision 返回 409 后不静默覆盖。
 验收：连续快速切换三张卡时，画布最终显示最后一次选择，不闪回旧图。
 ### FE-7：协作流程画布
 技术：`@xyflow/react`。可以借鉴但不直接耦合：
 - `frontend-web/src/components/ai-elements/canvas.tsx`
 - `frontend-web/src/roundtable-planning/components/FlowGraphPanel.tsx`
 节点显示：
 - 节点名、角色名和分析角度。
 - 状态文字、图标和颜色。
 - 等待用户、返工、失败和 superseded 标记。
 画布能力：
 - 自动布局。
 - 拖动节点只保存浏览器展示位置。
 - 缩放、适配视图、方向切换、小地图。
 - 活动边低强度流动动画。
 - 点击节点打开覆盖在画布上的节点说明抽屉。
 - 节点重跑、补充或纠偏一律通过左侧对话完成；抽屉只提供“在对话中对此节点提出意见”入口。
 - 方案切换后清理不属于新方案的本地坐标。
 验收：
 - 30 个节点内流畅操作。
 - 单个 node event 不导致整个 React Flow 重挂。
 - `awaiting_input`、`reopened`、`superseded` 不与 `completed` 混淆。
 ### FE-8：节点说明抽屉与对话定位
 点击画布节点打开 `NodeInspectorDrawer`。抽屉只展示计划合同：
 1. 节点名称、角色、分析角度和当前状态标签。
 2. 节点职责：负责解决什么问题。
 3. 要根据什么：所需输入类型、上游节点类型、资料范围和时效要求。
 4. 要产出什么：成果类型、结构要求和验收条件。
 5. 可用工具、禁止事项、预算上限。
 6. 上游与下游关系。
 抽屉不展示：
 - 节点实际生成内容。
 - 工具调用返回值。
 - EvidenceBundle 或其他成果物正文。
 - attempt 执行时间线。
 - 错误堆栈和调试信息。
 - 报告正文。
 交互：
 - “在对话中对此节点提出意见”关闭抽屉、聚焦左侧 Composer，并绑定 `targetNodeId` 上下文。
 - 若该节点对应正在并行运行的成员，同时绑定该成员的 `agentRunId` 并切换左侧选择器，使用户发送前能先看到该成员的真实对话与工具过程。
 - 用户仍需在对话区输入“重新检索”“重新分析”等要求；抽屉不直接发起业务变更。
 - 状态标签来自后端节点状态，但不加载节点结果接口。
 - 关闭抽屉不清空 selected node；再次点击同一节点可恢复说明。
 报告预览不使用常驻第三栏。最终报告、章节候选和版本先作为左侧 MessageList 中的普通消息/文件卡出现；点击文件卡时复用 `ArtifactFileDetail` 或现有 Markdown 能力打开大尺寸 Dialog，关闭后回到两栏工作台。
 验收：
 - 抽屉宽度不改变两栏布局，不挤压左侧对话区。
 - 抽屉只读取节点合同和图结构，不请求节点执行结果。
 - 所有原生成员消息、工具过程、错误和报告入口都能在左侧对话时间线找到。
 ### FE-9：全过程对话干预
 `ReportComposer` 根据状态显示不同提示：
 - 空闲：输入报告需求。
 - 规划中：补充要求将在规划安全点应用。
 - 运行中：协调者正在判断影响范围。
 - 等待用户：优先回答等待问题。
 - 完成后：可问答、重写、润色或重新研究。
 发送流程：
 1. 生成 idempotency key。
 2. 插入 pending 用户消息；带 `targetNodeId`/`agentRunId` 时在相关成员消息流和共享上下文中引用同一条用户消息，不重复持久化。
 3. 显示“正在识别修改范围”。
 4. `command.classified` 后展示意图和影响节点。
 5. 高成本或低置信度命令显示确认卡。
 6. `command.accepted` 后显示排队或等待安全点。
 7. 完成后关联新 node attempt 或 report version。
 8. 失败时保留原消息和重试入口。
 典型映射：
 | 用户输入 | 预期操作 |
 |---|---|
 | “增加政策风险角度” | 新增角度节点和受影响下游 |
 | “资料太旧，重新找” | 重新检索指定证据包 |
 | “竞争格局分析不到位” | 复用证据，重新分析 |
 | “重写第二章” | 只生成章节替换候选 |
 | “语气更正式” | 新报告版本，不重新研究 |
 | “为什么得出这个结论” | 只读问答，不修改报告 |
 验收：
 - 双击发送不创建重复命令。
 - 选中“品牌竞争分析师”后发送补充要求，只影响该成员及依赖分析，其他并行成员仍保持消息流和运行状态。
 - 运行中反馈不会让 run 或 node 误变 completed。
 - “重写第二章”不会触发全量检索。
 - “资料太旧”不会只做文字润色。
 ### FE-10：会话历史、报告版本与导出
 - History Tab 显示标题、状态、更新时间、当前版本。
 - 新建会话不删除旧会话。
 - 会话切换时先关闭旧 SSE，再加载新快照。
 - 报告修改先生成候选，确认后创建新版本。
 - 版本恢复创建新的头版本，不删除历史。
 - 下载复用现有 Markdown/Word 能力。
 - 文件名来自报告标题，不暴露宿主机或沙箱路径。
 验收：历史会话可完整恢复左侧消息流程、右侧节点状态和报告版本；不额外恢复节点结果面板。
 ### FE-11：测试、视觉回归和性能
 单元测试：
 - event normalizer/reducer。
 - message adapter。
 - plan revision 和选择状态。
 - node status 和 available actions。
 - command pending/idempotency。
 组件测试：
 - 空态、澄清、规划、候选、运行、等待、完成、失败、取消。
 - 卡片选择、节点点击、只读说明 Drawer、确认弹窗和报告预览 Dialog。
 - MessageList 通用业务卡插槽零回归。
 - 单成员流式文本、TeamSay、工具调用与工具返回的原样重放；并行成员交错到达、切换标签、切回后不中断 delta。
 - 非当前标签成员发起协助时显示待回复徽标，点击后使用原生协助卡回复到正确节点。
 E2E：
 1. 新建会话并输入新能源汽车报告要求。
 2. 选择候选并开始。
 3. 运行中增加风险角度。
 4. 重新检索海外最新资料。
 5. 完成后重写第二章。
 6. 刷新、断网重连、切换会话。
 7. 停止和重试失败节点。
 性能门：
 - 30 节点画布不卡顿。
 - 长消息列表使用现有优化策略。
 - SSE 高频 delta 合帧后再 setState。
 - 画布和消息区使用独立 selector，避免互相触发整树重渲染。
 - 节点抽屉只订阅节点合同和状态，不能因阶段产出更新而反复重渲染。
 - 只渲染当前聚焦成员和共享消息的可视窗口；非当前成员的消息仍写入 store，但不因 token delta 重渲染当前 `MessageList`。
 ---
 ## 8. 后端接口依赖
 前端开发前，后端必须冻结以下接口：
 ```text
 POST   /api/report-collaboration/sessions
 GET    /api/report-collaboration/sessions
 GET    /api/report-collaboration/sessions/{session_id}
 PATCH  /api/report-collaboration/sessions/{session_id}
 DELETE /api/report-collaboration/sessions/{session_id}
 POST   /api/report-collaboration/sessions/{session_id}/messages
 GET    /api/report-collaboration/sessions/{session_id}/messages
 POST   /api/report-collaboration/sessions/{session_id}/plan-requests
 GET    /api/report-collaboration/sessions/{session_id}/plans
 POST   /api/report-collaboration/sessions/{session_id}/plans/{plan_id}/select
 POST   /api/report-collaboration/sessions/{session_id}/runs
 GET    /api/report-collaboration/runs/{run_id}
 GET    /api/report-collaboration/runs/{run_id}/events
 GET    /api/report-collaboration/runs/{run_id}/stream
 POST   /api/report-collaboration/runs/{run_id}/commands
 POST   /api/report-collaboration/runs/{run_id}/cancel
 GET    /api/report-collaboration/runs/{run_id}/nodes/{node_id}/contract
 GET    /api/report-collaboration/sessions/{session_id}/reports
 POST   /api/report-collaboration/sessions/{session_id}/report-rewrites
 POST   /api/report-collaboration/sessions/{session_id}/report-rewrites/{id}/apply
 ```
 前后端共享枚举：
 - session status。
 - run status。
 - node/node attempt status。
 - command intent/status。
 - event type/version。
 - artifact type/schema version。
 - report version/change type。
 ---
 ## 9. 前端开发顺序
 页面与契约层已完成（代码在 `frontend-web/src/report-collaboration/`）：
 1. `RC-FE-001`：视觉截图与行为基线。
 2. `RC-FE-002`：路由、菜单和左对话/右画布两栏空壳。
 3. `RC-FE-003`：页面 token、弹窗、抽屉和响应式。
 4. `RC-FE-004`：API 类型和 mock server。
 5. `RC-FE-005`：SSE reducer 与快照恢复。
 6. `RC-FE-006`：MessageList adapter 和通用卡片插槽。
 7. `RC-FE-007`：需求澄清与候选方案卡。
 8. `RC-FE-008`：流程画布和自定义节点。
 9. `RC-FE-009`：只读节点说明抽屉与对话目标定位。
 10. `RC-FE-010`：统一 Composer 和命令确认。
 11. `RC-FE-011`：报告预览、版本和导出。
 12. `RC-FE-012`：历史、重连和异常恢复。
 13. `RC-FE-013`：组件/E2E/视觉/性能验收。
 依赖规则：
 - 契约已冻结为 `src/report-collaboration/api/types.ts`；后端 `RC-BE-001` 已对齐。
 - 真实 SSE 联调：后端 `RC-BE-011` 已挂载 `GET /runs/{id}/stream`；默认无后台循环时流只会重放已入库事件。
 - 报告版本操作已接后端 `RC-BE-015`（改写候选 / apply / restore）。
 - 执行画布实时状态依赖打开 `worker_enabled`；质量角色内核已在 `RC-BE-013` 落地，真实成员见 `RC-BE-017`。
 ---
 ## 10. 前端完成定义
 页面与 mock 联调路径已落地。真实后端可联调 `GET /runs/{id}/stream`、领取/恢复（`RC-BE-012`，默认不挂 worker）、质量角色（`RC-BE-013`）以及报告改写/恢复（`RC-BE-015`）。此前以 mock driver 覆盖交互，不以「前端未编码」计未完成。
 前端只有同时满足以下条件才算完成：
 1. 页面结构与 Coze 参考页面逐状态验收通过。
 2. 消息区复用 DeerFlow `MessageList`，其他聊天页面无回归。
 3. 候选卡、左侧对话流程、右侧流程图和报告来自同一 session/run/event 状态。
 4. 点击候选只预览，明确确认后才执行。
 5. 用户可以在规划、运行、完成后三个阶段继续对话。
 6. 协助卡显示或提交不会导致前端误标完成。
 7. 节点点击只打开说明抽屉，可查看职责、所需输入、预期输出、工具和验收条件，不展示执行结果。
 8. 节点重开、返工和 superseded 状态表达正确。
 9. SSE 重连、刷新和历史切换无重复消息和状态倒退。
 10. 报告修改以候选和版本形式完成，不直接覆盖正式报告。
 11. 页面始终只有对话与画布两个常驻区域，所有执行过程和产出入口都能在对话时间线中找到。
 12. 响应式、键盘、对比度、加载反馈和错误恢复通过验收。
@@ -0,0 +1,481 @@
 # 报告协作工作台 — 前端对接指南
 > **适用版本：** RC-BE-000～018 已落地（2026-09-06）  
 > **配套文档：**  
 > - [前端实施计划](./agentscope-多智能体报告协作工作台-前端实施计划.md)  
 > - [后端实施计划](./agentscope-多智能体报告协作工作台-后端实施计划.md)  
 > - 模块 README：`frontend-web/src/report-collaboration/README.md`
 本文说明**前端如何对接真实后端**：环境配置、API 契约、用户流程、状态机、错误处理与联调验收。前端 API 客户端与页面已实现，通常**无需再写一套 HTTP 层**。
 ---
 ## 1. 结论速览
 | 问题 | 答案 |
 |------|------|
 | 前端还要写接口吗？ | **不用**。`src/report-collaboration/api/` 已封装 REST + SSE，页面通过 `getReportCollaborationDriver()` 调用。 |
 | 为什么调不通？ | 最常见：`config.yaml` 里 `report_collaboration.enabled: false` → 全部 **503**；或 `worker_enabled: false` → run 不入队执行。 |
 | Mock 和真后端怎么切？ | **Mock 已移除**。前端永远请求真实后端（`deerflow.rc-mock` / `VITE_RC_MOCK` 开关已删除）；联调需 `enabled: true`。 |
 | 字段会和 MySQL 对不上吗？ | 前端只认 JSON 契约（`api/types.ts`），不直连表。缺列表现为后端 500/SQL 错误，部署后需**重启 Gateway** 跑 `create_all` + 列同步。 |
 | 从哪进页面？ | `/page/workspace/report-collaboration`（新会话）或 `/page/workspace/report-collaboration/:sessionId`。侧边栏入口默认注释，可直接 URL 访问。 |
 ---
 ## 2. 架构：前端已有什么
 ```
 ReportCollaborationPage
  └─ useReportCollaborationSession（唯一数据入口）
       ├─ driver.getSnapshot()           ← REST 冷启动
       ├─ driver.openRunStream()          ← SSE 实时事件
       ├─ driver.sendMessage / createCommand / startRun …
       └─ event-reducer                   ← 事件 → UI 状态
 ReportConversationPanel
  └─ MessageList（message-adapter 映射 CollaborationMessage → LangGraph Message）
 ```
 ### 2.1 目录结构
 ```text
 frontend-web/src/report-collaboration/
  api/
    types.ts          # 冻结契约（snake_case，与后端 Pydantic 一致）
    client.ts         # rcFetch：鉴权、幂等键、乐观锁、错误映射
    sessions.ts       # 会话 CRUD、消息
    plans.ts          # 方案请求 / 列表 / 选定
    runs.ts           # Run、SSE、命令、节点合同
    reports.ts        # 报告版本、改写、恢复
    driver.ts         # 真实后端统一门面（Mock 驱动已移除）
  state/
    event-normalizer.ts
    event-reducer.ts
    selectors.ts
    message-adapter.ts
  hooks/
    useReportCollaborationSession.ts   # 快照 → SSE → reducer → 动作
    useReportCollaborationStream.ts    # 断线重连、after_seq 续接
    useReportCollaborationMessages.ts
  components/ …
  pages/ReportCollaborationPage.tsx
 ```
 ### 2.2 事实源原则
 - **冷启动：** `GET /sessions/{id}` 返回 `SessionSnapshot`（session、messages、plans、run、nodes、agent_runs、commands、report_versions、last_seq）。
 - **运行中：** `GET /runs/{id}/stream?after_seq=N` 订阅 durable SSE。
 - **断线 / 序号缺口：** `GET /runs/{id}/events?after_seq=N` REST 补拉。
 - **澄清 / 规划阶段（尚无 run）：** 每 2.5s 轮询快照（后端事件主要在 run 流上）。
 纯展示状态（预览方案、聚焦成员、面板宽度）**不**写入服务器，仅存前端。
 ---
 ## 3. 后端启用与部署
 ### 3.1 必改配置
 文件：`offline-backend-20260512/backend/config.yaml`
 ```yaml
 report_collaboration:
  enabled: false          # 联调必须改为 true
  worker_enabled: false   # 要看成员执行必须 true
  planner_model: null     # 建议填可用模型名
  coordinator_model: null
  research_model: null
  writer_model: null
  reviewer_model: null
  # … token_budget、max_concurrent_runs_per_user 等见同文件
 ```
 | 配置 | 现象 |
 |------|------|
 | `enabled: false` | 所有路由 **503**，`code: REPORT_COLLABORATION_DISABLED` |
 | `enabled: true`，`worker_enabled: false` | REST/SSE 可用，run 入队但不自动执行（测 API 可用，无成员流式输出） |
 | 两者 `true` + 模型配置完整 | 完整联调 |
 ### 3.2 MySQL / 表结构
 生产环境 Alembic 自动升级默认关闭，启动时走 `create_all` + `_ensure_orm_columns_sync`。
 - 迁移脚本（可选手动跑）：`20260905_01`、`20260906_01`、`20260907_01`
 - ORM：`packages/harness/deerflow/persistence/report_collaboration/model.py`（13 张表）
 - **部署后务必重启 Gateway**，观察日志是否有 `Failed to auto-add column report_collaboration_*`
 已有 RC-003 时代旧表会通过列同步补上 `template_snapshot_json`、`budget_snapshot_json`、`usage_json`、`budget_exhausted_reason` 等可空列，并创建 `rewrite_proposals`、`audits`。
 ### 3.3 前端环境变量
 | 变量 | 说明 |
 |------|------|
 | `VITE_BACKEND_BASE_URL` | Gateway 地址，默认 `http://127.0.0.1:8001` |
 请求经 `apiFetch`，自动携带登录 JWT（`credentials: "include"`）。**必须先登录 DeerFlow**。
 ---
 ## 4. API 基址与请求约定
 ### 4.1 Base URL
 ```text
 {VITE_BACKEND_BASE_URL}/api/report-collaboration
 ```
 代码常量：`REPORT_COLLABORATION_BASE()`（`api/client.ts`）。
 ### 4.2 请求头
 | Header | 何时携带 | 说明 |
 |--------|----------|------|
 | `Authorization` | 全部 | 由 `apiFetch` 注入 |
 | `X-Idempotency-Key` | 写操作 | 格式 `rc-{uuid}`；重复提交返回首次结果 |
 | `X-Expected-Revision` | 选方案、开 run、改会话等 | 会话 `requirement_revision` 或方案 `revision` |
 | `Accept: text/event-stream` | SSE | `openRunStream` |
 ### 4.3 错误响应格式
 ```json
 {
  "code": "REPORT_COLLABORATION_DISABLED",
  "message": "报告协作工作台未启用",
  "detail": { }
 }
 ```
 前端映射（`api/client.ts`）：
 | HTTP | 异常类 | 典型场景 |
 |------|--------|----------|
 | 409 | `ConflictError` | revision 过期、active run 冲突 |
 | 422 | `ValidationError` | 参数/语义错误、缺幂等键 |
 | 429 | `RateLimitError` | 预算耗尽、每用户并发 run 上限 |
 | 5xx | `ServerError` | 可带同一幂等键重试 |
 | 0 | `NetworkError` | fetch 失败 |
 ### 4.4 完整路由清单（与前端 client 对齐）
 | 方法 | 路径 | 前端模块 |
 |------|------|----------|
 | POST | `/sessions` | `sessions.createSession` |
 | GET | `/sessions` | `sessions.listSessions` |
 | GET | `/sessions/{id}` | `sessions.getSessionSnapshot` |
 | PATCH | `/sessions/{id}` | `sessions.updateSession` |
 | DELETE | `/sessions/{id}` | `sessions.deleteSession` |
 | GET | `/sessions/{id}/messages` | `sessions.listMessages` |
 | POST | `/sessions/{id}/messages` | `sessions.sendMessage` |
 | POST | `/sessions/{id}/plan-requests` | `plans.requestPlans` |
 | GET | `/sessions/{id}/plans` | `plans.listPlans` |
 | POST | `/sessions/{id}/plans/{planId}/select` | `plans.selectPlan` |
 | POST | `/sessions/{id}/runs` | `runs.startRun` |
 | GET | `/sessions/{id}/reports` | `reports.listReportVersions` |
 | POST | `/sessions/{id}/report-rewrites` | `reports.createRewrite` |
 | POST | `/sessions/{id}/report-rewrites/{id}/apply` | `reports.applyRewrite` |
 | POST | `/sessions/{id}/report-versions/{id}/restore` | `reports.restoreReportVersion` |
 | GET | `/runs/{id}` | `runs.getRun` |
 | GET | `/runs/{id}/events` | `runs.listRunEvents` |
 | GET | `/runs/{id}/stream` | `runs.openRunStream` |
 | POST | `/runs/{id}/cancel` | `runs.cancelRun` |
 | POST | `/runs/{id}/commands` | `runs.createCommand` |
 | POST | `/runs/{id}/commands/{id}/confirm` | `runs.confirmCommand` |
 | POST | `/runs/{id}/commands/{id}/cancel` | `runs.cancelCommand` |
 | GET | `/runs/{id}/nodes/{nodeId}/contract` | `runs.getNodeContract` |
 | GET | `/runs/{id}/artifacts` | （后端已暴露，前端按需接） |
 | GET | `/runs/{id}/sources` | （后端已暴露，前端按需接） |
 ---
 ## 5. 用户流程与 API 时序
 ```mermaid
 sequenceDiagram
  participant U as 用户
  participant FE as 前端 RC
  participant API as Gateway
  participant W as Worker
  U->>FE: 输入需求
  FE->>API: POST /sessions
  FE->>API: POST /sessions/{id}/messages
  API-->>FE: 澄清（快照 messages）
  U->>FE: 回答澄清
  FE->>API: POST /messages
  FE->>API: POST /plan-requests
  API-->>FE: 候选方案（快照 plans）
  U->>FE: 采用方案
  FE->>API: POST /plans/{id}/select
  U->>FE: 开始协作
  FE->>API: POST /runs
  FE->>API: GET /runs/{id}/stream
  W-->>API: 持久化事件
  API-->>FE: SSE
  U->>FE: 运行中干预
  FE->>API: POST /commands → confirm
 ```
 ### 5.1 阶段 0：进入页面
 | 路由 | 行为 |
 |------|------|
 | `/page/workspace/report-collaboration` | 空态；`POST /sessions` 后跳转带 `sessionId` |
 | `/page/workspace/report-collaboration/:sessionId` | 加载快照；有 `location.state.rcInitialMessage` 时自动发首条消息 |
 路由注册：`frontend-web/src/pages/WorkspaceRoutes.tsx`。  
 侧边栏入口已在 `workspace-nav-chat-list.tsx` 中放开（「报告协作」项），也可直接访问 URL。
 ### 5.2 阶段 1：需求澄清（无 run）
 ```http
 POST /api/report-collaboration/sessions
 POST /api/report-collaboration/sessions/{sessionId}/messages
 Content-Type: application/json
 { "text": "请写一份…", "target_node_id": null, "agent_run_id": null }
 ```
 - `useReportCollaborationSession.send()`：当 `session.status` 不是 `running` / `awaiting_input` / `reviewing` 时走 `sendMessage`。
 - 会话状态：`empty` → `clarifying` → `planning` → `proposal_ready`。
 - 澄清问题以 `CollaborationMessage` 进入时间线；业务卡通过 `MessageList` 的 `businessCardSlot` 渲染（`additional_kwargs.report_collaboration_card`）。
 ### 5.3 阶段 2：候选方案
 ```http
 POST /api/report-collaboration/sessions/{sessionId}/plan-requests
 POST /api/report-collaboration/sessions/{sessionId}/plans/{planId}/select
 ```
 - **预览方案**（`previewPlanId`）：纯前端，不调 API。
 - **采用方案**：`select` 写 `selected_plan_id`，**不**创建 run。
 - 409：方案 revision 过期 → 前端 `refreshSnapshot`，提示用户重选。
 - 右栏 `ReportFlowCanvas` 使用 `PlanNode` / `PlanEdge` 渲染 DAG。
 ### 5.4 阶段 3：开始执行与 SSE
 ```http
 POST /api/report-collaboration/sessions/{sessionId}/runs
 { "plan_id": "plan-xxx" }
 GET /api/report-collaboration/runs/{runId}/stream?after_seq=0
 Accept: text/event-stream
 ```
 SSE 每条 `data:` 为 JSON：
 ```typescript
 interface CollaborationEvent {
  eventId: string;
  sessionId: string;
  runId?: string | null;
  seq: number;
  type: CollaborationEventType;
  timestamp: string;
  data: unknown;
 }
 ```
 常用 `type`（完整列表见 `api/types.ts`）：
 | 类型 | 含义 |
 |------|------|
 | `message.created` / `message.delta` / `message.completed` | 对话镜像流式 |
 | `tool_call.*` / `tool_result.*` | 工具调用与返回 |
 | `team_message.*` | 成员 / 协调者广播 |
 | `plan.proposed` / `plan.selected` | 方案生命周期 |
 | `run.status.changed` | Run 状态 |
 | `node.status.changed` / `node.progress` | 节点执行 |
 | `command.confirmation.required` | 需用户确认的干预 |
 | `report.version.created` | 报告版本落盘 |
 | `heartbeat` | 保活 |
 ### 5.5 阶段 4：运行中干预
 ```http
 POST /api/report-collaboration/runs/{runId}/commands
 POST /api/report-collaboration/runs/{runId}/commands/{commandId}/confirm
 POST /api/report-collaboration/runs/{runId}/commands/{commandId}/cancel
 POST /api/report-collaboration/runs/{runId}/cancel
 ```
 - Run 活跃时 `send()` 自动走 `createCommand`（而非 `sendMessage`）。
 - 可从节点抽屉 / `AgentStageSelector` 传入 `target_node_id`、`agent_run_id`。
 - `InterventionCard` 展示 `confirmation_required` 命令；确认后调 `confirmCommand`。
 `CommandIntent` 枚举（后端分类，前端展示 reason/impact）：`answer_question`、`update_requirements`、`research_again`、`rewrite_section`、`rerun_node`、`replan`、`cancel` 等。
 ### 5.6 阶段 5：报告版本与改写
 ```http
 GET  /api/report-collaboration/sessions/{sessionId}/reports
 POST /api/report-collaboration/sessions/{sessionId}/report-rewrites
 POST /api/report-collaboration/sessions/{sessionId}/report-rewrites/{rewriteId}/apply
 POST /api/report-collaboration/sessions/{sessionId}/report-versions/{versionId}/restore
 ```
 - `createRewrite` 只生成候选，不直接覆盖正式版本。
 - `applyRewrite` / `restoreReportVersion` 产生新的 head 版本，历史保留。
 - `ReportPreviewDialog` 展示 `ReportVersion.markdown`。
 ---
 ## 6. 前端状态机（接入方须知）
 **不要**在页面里用零散 REST 字段拼 UI 状态。统一路径：
 ```text
 SessionSnapshot → applySessionSnapshot()
 CollaborationEvent[] → normalizeCollaborationEvent() → applyCollaborationEvents()
 → selectors（derivePagePhase、selectPlanForCanvas、…）
 ```
 ### 6.1 核心 Selector
 | Selector | 用途 |
 |----------|------|
 | `derivePagePhase` | Composer 占位、方案卡、空态 |
 | `selectPlanForCanvas` | 画布 DAG（含预览方案） |
 | `selectAgentTabs` | 并行成员 Tab |
 | `selectNodeStatusMap` | 节点颜色 / 状态 |
 | `selectPendingConfirmationCommands` | 干预确认卡 |
 | `selectHeadReportVersion` | 报告预览入口 |
 | `selectStreamingAgentRunIds` | 流式成员指示 |
 ### 6.2 SSE 连接策略（`useReportCollaborationStream`）
 - Run 非终态时连接；`completed` / `failed` / `cancelled` 后关流并 REST 最终补拉。
 - 断线：指数退避重连（1s～30s），`after_seq` 取 reducer 内 `lastSeq`。
 - `hasSeqGap`：暂停 live 应用，先 `listRunEvents` 回填。
 ### 6.3 乐观消息
 用户发送时插入 `metadata.optimistic: true` 的 pending 消息；服务端镜像带相同 `idempotency_key` 时 reducer 原地替换。
 ---
 ## 7. 消息与 MessageList 复用
 `useReportCollaborationMessages` 将 `CollaborationMessage[]` 转为 `@langchain/langgraph-sdk` 的 `Message[]`，并构造合成 `BaseStream` 供 `MessageList` 消费。
 | 来源 | 渲染 |
 |------|------|
 | `human` / `ai` 文本 | 普通气泡 |
 | `tool_calls` + `tool` | 现有工具卡 |
 | `team_message` 事件 | 带 `name` 的成员发言 |
 | 业务卡 | `businessCardSlot`（方案组、命令确认、报告可用） |
 分组键：`core/messages/utils.ts` 中 `assistant:task-report-import` 同级扩展 `assistant:business-card`，判据 `additional_kwargs.report_collaboration_card`。
 ### 7.1 在其他页面嵌入 RC（最小集）
 1. `useReportCollaborationSession(sessionId)`
 2. `ThreadContext.Provider` + `MessageList` + `businessCardSlot`
 3. 引入 `report-collaboration/styles/report-collaboration.css`
 ---
 ## 8. 单测
 Mock 驱动（原 `api/mock.ts`）与 `deerflow.rc-mock` / `VITE_RC_MOCK` 开关已移除，前端只请求真实后端；本地演示请直接联调后端。
 单测：
 ```bash
 cd frontend-web
 pnpm test:report-collaboration
 ```
 ---
 ## 9. 联调验收清单
 ### 9.1 准备
 - [ ] `report_collaboration.enabled: true`
 - [ ] `report_collaboration.worker_enabled: true`
 - [ ] 五个 `*_model` 已配置且可用
 - [ ] Gateway 已重启（MySQL 表/列就绪）
 - [ ] 前端已登录（JWT 有效）
 ### 9.2 探活
 ```bash
 curl -s -H "Authorization: Bearer <token>" \
  http://127.0.0.1:8001/api/report-collaboration/sessions
 ```
 期望：**200** + `{ "sessions": [...] }`，而非 503。
 ### 9.3 页面流程（浏览器 Network）
 1. 打开 `/#/page/workspace/report-collaboration`
 2. 输入需求 → `POST .../sessions` **200**
 3. 跳转 → `GET .../sessions/{id}` **200**，响应含 `SessionSnapshot`
 4. 首条消息 → `POST .../messages` **200**
 5. 请求方案 → `POST .../plan-requests` **200**
 6. 采用方案 → `POST .../plans/{id}/select` **200**
 7. 开始协作 → `POST .../runs` **200**
 8. `GET .../runs/{id}/stream` 持续收到 SSE（`message.delta`、`node.status.changed` 等）
 9. 刷新页面 → 消息与 `last_seq` 续接正确
 10. 运行中输入「重新检索」→ `POST .../commands` → 确认卡 → `confirm` **200**
 ### 9.4 常见失败
 | 现象 | 原因 | 处理 |
 |------|------|------|
 | 全部 503 | `enabled: false` | 改配置并重启 |
 | run 一直 queued | `worker_enabled: false` | 改为 true |
 | 409 选方案 | revision 过期 | 刷新后重选（前端已自动 refresh） |
 | 429 | 预算/并发上限 | 调大配置或取消其他 run |
 | 500 + SQL | 表缺列 | 重启 Gateway，查列同步日志 |
 ---
 ## 10. 契约与类型维护
 - **单一事实源：** `frontend-web/src/report-collaboration/api/types.ts`
 - **后端镜像：** `offline-backend-20260512/backend/app/report_collaboration/contracts/`
 - 修改字段须同步两份实施计划与本指南，并跑前后端相关测试。
 `SessionSnapshot` 形状（摘要）：
 ```typescript
 interface SessionSnapshot {
  session: ReportSession;
  messages: CollaborationMessage[];
  plans: ReportPlanCandidate[];
  run: ReportRun | null;
  nodes: CollaborationNodeState[];
  agent_runs: AgentRun[];
  commands: CollaborationCommand[];
  report_versions: ReportVersion[];
  last_seq: number;
 }
 ```
 `ReportRun` 可选字段（RC-BE-016）：`usage`、`budget_exhausted_reason`。
 ---
 ## 11. 后续工作（非对接阻塞）
 | 项 | 说明 |
 |----|------|
 | RC-BE-019 | 灰度发布与离线部署文档 |
 | 侧边栏入口 | 已放开（`workspace-nav-chat-list.tsx` 的「报告协作」项） |
 | iframe 嵌入 | RC 页尚未专门适配 `embed=1`，可参考现有深链模式扩展 |
 | 真人盲评 | RC-BE-018 为确定性评测集，上线前仍需计划 §11.4 人工评审 |
 ---
 ## 12. 相关代码索引
 | 用途 | 路径 |
 |------|------|
 | API 客户端 | `frontend-web/src/report-collaboration/api/` |
 | 会话 Hook | `frontend-web/src/report-collaboration/hooks/useReportCollaborationSession.ts` |
 | 页面 | `frontend-web/src/report-collaboration/pages/ReportCollaborationPage.tsx` |
 | 路由 | `frontend-web/src/pages/WorkspaceRoutes.tsx` |
 | 后端路由 | `offline-backend-20260512/backend/app/gateway/routers/report_collaboration.py` |
 | 配置 | `offline-backend-20260512/backend/config.yaml` → `report_collaboration` |
 | 持久化 | `offline-backend-20260512/backend/packages/harness/deerflow/persistence/report_collaboration/` |
@@ -0,0 +1,304 @@
 # OpenVibeCoding 内网可视化应用生成平台：分步开发方案
 > 文档状态：待实施
 >
 > 目标环境：现有 Ubuntu 22.04 Docker 服务器；对外可用端口限定为 `8020-8030`。
 >
 > 本文基于 2026-08-31 的只读巡检编写。未在目标服务器上安装、停止或修改任何服务。
 ## 1. 目标与范围
 将 OpenVibeCoding 改造成一个使用公司内网模型、在公司服务器 Docker 沙箱中生成并运行可视化应用的工作台。用户通过对话生成项目，查看并修改文件，在浏览器中预览运行结果。
 第一期只服务以下项目类型：
 - 数据大屏、数据看板、海报和展示型页面；
 - React + Vite + TypeScript 前端；
 - ECharts 图表、流程图；
 - 可选的轻量 Python FastAPI 接口；
 - 项目文件浏览、编辑、运行日志和实时预览。
 第一期明确不做：
 - 腾讯云 CloudBase、SCF、TCR、CodeBuddy、云端一键部署；
 - 任意语言、任意 npm/PyPI 包的无限制安装；
 - 用户自定义 Dockerfile、Docker Socket 挂载、宿主机命令执行；
 - 直接将沙箱暴露为独立公网端口；
 - 对不可信代码提供“绝对安全”的隔离承诺。
 ## 2. 已确认的服务器基线
 目标服务器当前具备：
 | 项目 | 巡检结果 | 判断 |
 |---|---:|---|
 | 操作系统 | Ubuntu 22.04.5 LTS | 支持 Docker 方案 |
 | CPU | 32 vCPU | 足够第一期 |
 | 内存 | 125 GiB；巡检时可用约 106 GiB | 足够第一期 |
 | 根磁盘 | 2 TB；巡检时可用约 1.6 TB | 足够 Harbor、镜像与工作区 |
 | Docker | 29.1.3，Docker Compose 2.40.3 | 已满足 |
 | 负载 | 约 0.5 | 当前有余量 |
 | `8020-8030` | 巡检时无监听、无 Docker 端口映射 | 可规划使用 |
 该服务器已承载 DeerFlow、Coze、LiteLLM、数据库和其他容器；`80`、`8000`、`8005`、`8006`、`3306`、`5432` 等端口已经被使用。因此，本项目不能占用现有端口、网络、数据库或容器名称。
 该服务器有公网 IP，且已有多项服务绑定在 `0.0.0.0`。本方案将它视作“公网可达的共享主机”处理；云安全组和宿主机防火墙必须额外核验，不能仅凭端口监听结果假设安全。
 ## 3. 总体架构
 ```mermaid
 flowchart LR
    U[用户浏览器] -->|:8020| G[App Builder Gateway]
    U -->|:8022 /preview/<sandboxId>/| P[Preview Router]
    G --> O[OpenVibe Web / Agent Server]
    O --> M[现有内网模型网关]
    O --> DB[(独立 PostgreSQL)]
    O --> R[(独立 Redis)]
    O --> SM[Local Sandbox Manager]
    SM --> D[Docker Engine]
    D --> S1[visual-ui Sandbox]
    D --> S2[visual-fullstack Sandbox]
    P --> S1
    P --> S2
    D --> H[Harbor :8023]
    S1 --> N[内网 pnpm/npm 源或预置离线依赖]
    S2 --> N
 ```
 设计原则：
 1. 保留 OpenVibe 的对话、任务、文件树、工具卡片和 OpenCode ACP 代码代理体验。
 2. 模型请求仅由 OpenVibe 服务端发往既有内网模型网关；API Key 不进入沙箱。
 3. 每个项目运行于独立 Docker 容器和独立工作区；沙箱只运行项目代码，不承担平台控制逻辑。
 4. 浏览器预览只经过统一预览路由，不为每个项目映射新的公网端口。
 5. 先用固定模板和固定依赖清单保证稳定，后续再按白名单增加依赖。
 ## 4. 端口规划
 端口虽然可用，但应尽量少暴露。除 8020、8022 和按需开放的 8023 外，其余服务只加入 Docker 内部网络。
 | 端口 | 服务 | 绑定范围 | 用途 |
 |---:|---|---|---|
 | 8020 | `appbuilder-gateway` | 公网访问面或 VPN 白名单 | 控制台页面、`/api`、SSE/WebSocket |
 | 8021 | 预留 | 仅 `127.0.0.1` | 平台调试；第一期不对外开放 |
 | 8022 | `preview-router` | 公网访问面或 VPN 白名单 | 统一预览入口：`/preview/<sandboxId>/` |
 | 8023 | Harbor | 仅沙箱节点、构建节点和管理员网段 | 私有镜像仓库 HTTPS Registry |
 | 8024 | 预留 | 不对外开放 | 后续 npm 私服或运维服务 |
 | 8025-8030 | 预留 | 不对外开放 | 扩展、迁移或故障切换 |
 ### 4.1 预览路由规则
 暂时没有可用泛域名时，使用路径型预览：
 ```text
 http(s)://<服务器地址>:8022/preview/<sandboxId>/
 ```
 项目模板的 Vite `base` 和 HMR 路径必须由启动脚本注入为该前缀，确保图片、JS/CSS 资源及热更新不会错误请求到根路径。后续若获得 `*.preview.company.local` 内网泛域名，可切换为子域名预览，用户体验更好。
 ## 5. 镜像、模板与离线依赖策略
 ### 5.1 标准镜像
 第一期维护两种版本化镜像，不允许用户自行构建 Dockerfile：
 | 镜像 | 用途 | 预置内容 |
 |---|---|---|
 | `appbuilder/visual-ui:<version>` | 大屏、海报、纯前端 | Node.js 20、pnpm、React、Vite、TypeScript、ECharts、流程图库、统一 UI 库、Tailwind、图标与中文字体 |
 | `appbuilder/visual-fullstack:<version>` | 前端加接口 | 上述前端依赖 + Python 3.12、FastAPI、Uvicorn、Pydantic |
 流程图库第一期统一选择一种（建议 React Flow），避免同时生成多种流程图语法和样式。地图、背景图、字体等资源也应作为受版本控制的本地资产打包，不能依赖 Google Fonts 或公网 CDN。
 ### 5.2 项目模板
 每次创建项目时从镜像中的模板初始化到 `/workspace`：
 ```text
 templates/
  visual-screen/          # React + ECharts + React Flow + Mock 数据
  visual-screen-api/      # visual-screen + FastAPI + /api 反向代理
  poster-page/            # 海报、营销展示、静态动效
 ```
 `visual-screen-api` 约定：前端只请求相对路径 `/api/*`；预览网关将其转发到同一沙箱的 FastAPI `8000` 端口。没有后端时保留 Mock 数据模块，生成的页面仍可运行。
 ### 5.3 依赖预置方式
 不能仅把安装命令写进 Dockerfile 后在用户创建项目时再联网执行。正确做法是：
 1. 在受控构建环境中锁定 `package.json`、`pnpm-lock.yaml`、`requirements.lock`。
 2. 构建镜像时执行 `pnpm fetch`，在镜像保存只读 pnpm store；Python 包保存到 `/opt/wheelhouse`。
 3. 沙箱初始化使用 `pnpm install --offline --frozen-lockfile` 和 `pip install --no-index --find-links=/opt/wheelhouse`。
 4. 第一期开启“固定依赖白名单”：AI 只能使用镜像已安装的依赖；新依赖先由管理员审核、加入锁文件和下一版基础镜像。
 5. 第二期部署 Verdaccio/Nexus 等内部制品源，作为受控补充而非允许访问公网 npm/PyPI。
 ## 6. OpenVibe 改造边界
 ### 6.1 保留
 - 前端交互：对话、任务状态、文件浏览与修改、预览、日志；
 - OpenCode ACP 代码代理；
 - 项目与会话领域模型；
 - 代码代理的流式事件协议。
 ### 6.2 替换或关闭
 | OpenVibe 当前能力 | 第一期开源/内网实现 |
 |---|---|
 | CodeBuddy | 只启用 OpenCode，配置内网 OpenAI 兼容模型网关 |
 | CloudBase、SCF 沙箱 | 新增 `LocalDockerSandboxManager` |
 | TCR | Harbor |
 | CloudBase 环境、用户环境池 | Docker 容器、工作区卷、沙箱记录 |
 | CloudBase 消息与事件持久化 | 独立 PostgreSQL；Redis 用于临时队列与状态 |
 | CloudBase 存储、函数、MCP、资源管理后台 | 第一期开关关闭或移除入口 |
 | CloudBase 项目模板和系统提示词 | 替换为大屏/海报/FastAPI 模板与受控依赖提示词 |
 重点改造点是将 OpenVibe 的 `scf-sandbox-manager` 和 CloudBase 生命周期调用替换为本地 Docker 生命周期。为降低前端和 OpenCode 工具改动范围，新管理器应适配现有的文件、命令、日志、健康检查与工作区信息契约，而不是改写所有 Agent 工具。
 ## 7. 沙箱安全基线
 每个沙箱容器必须满足：
 - 非 root 用户运行；禁止 `privileged`，禁止 Docker Socket，禁止宿主机目录挂载；
 - `--cap-drop=ALL`、`no-new-privileges`、`pids-limit`；
 - 首期默认限制：`1 vCPU`、`3 GB 内存`、`10 GB 工作区`、60 分钟空闲回收；
 - 使用独立 Docker network；默认无公网出口，只允许访问预置依赖、必要的内网 DNS 和平台回调；
 - 数据库、Redis、Harbor 管理接口、宿主机管理端口不在沙箱网络可访问范围；
 - 运行命令、容器生命周期、文件变更和预览访问写入审计日志；
 - 平台服务由受限服务账号调用 Docker API；用户代码永远不直接获得 Docker 权限。
 第一期为“内部可信用户的容器隔离”。若后续允许大量非可信代码或文件上传，应迁移为 Kubernetes 节点，并评估 gVisor/Kata 等更强运行时隔离。
 ## 8. 分步实施计划
 ### 阶段 0：部署前隔离与基线确认
 **工作项**
 1. 为本项目建立独立目录、Docker Compose Project、卷和网络，命名统一为 `appbuilder-*`。
 2. 确认云安全组、iptables/nftables 规则：仅允许管理员 SSH；8020、8022、8023 仅向 VPN 或指定办公出口开放。
 3. 不复用当前服务器上已有的 MySQL、PostgreSQL、Redis、Nginx 配置；建立独立实例或独立命名空间。
 4. 创建内部 CA 证书或确定可信 HTTPS 证书方案；Docker 构建/运行节点信任 Harbor 证书。
 5. 轮换目标服务器 root 密码，改用 SSH 密钥和受限运维账号；关闭 root 密码远程登录。
 **验收**
 - `8020-8030` 无端口冲突；
 - 新容器、网络和数据卷均不影响既有 DeerFlow 等服务；
 - 业务数据库和沙箱端口无法从非授权公网地址访问。
 ### 阶段 1：内网基础设施与镜像供应链
 **工作项**
 1. 在独立 Compose 项目中部署 Harbor，主入口为 `8023`，镜像数据使用独立持久化目录。
 2. 构建并推送 `visual-ui`、`visual-fullstack` 两种基础镜像；记录镜像版本、SBOM 和依赖锁文件。
 3. 完成三个模板及离线依赖初始化脚本。
 4. 先不启动漏洞扫描；严格断网环境下后续通过离线包维护漏洞库。
 5. 预留内部 npm/PyPI 源接入方式；第一期仅使用预置依赖。
 **验收**
 - Docker daemon 能从 Harbor 拉取指定版本镜像；
 - 在禁止公网访问的测试网络中，三个模板均能启动并构建；
 - 一个 ECharts 页面、一个流程图页面和一个 FastAPI `/api/health` 均可运行。
 ### 阶段 2：OpenVibe 去 CloudBase 化与内网模型接入
 **工作项**
 1. Fork 固定版本的 OpenVibeCoding，建立 `local-platform` 改造分支，记录上游 commit 与许可证。
 2. 只保留 OpenCode Agent；将 provider 指向现有内网模型网关，模型凭证只保存在服务端环境变量或密钥服务。
 3. 将基础实体、任务、消息、流式事件的持久化迁移为独立 PostgreSQL；不再调用 CloudBase 集合。
 4. 关闭 CloudBase 环境、函数、存储、数据库、资源仪表盘和相关 MCP 入口。
 5. 将系统提示词和项目创建默认项改为“可视化页面 + 受控模板/依赖”。
 **验收**
 - 不设置任何腾讯云、CloudBase、CodeBuddy、TCR 环境变量时，平台可启动；
 - 用户发起“生成 ECharts 大屏”后，OpenCode 能调用内网模型并生成项目文件；
 - 服务端日志和沙箱环境中均没有模型 API Key。
 ### 阶段 3：本地沙箱管理器与预览路由
 **工作项**
 1. 实现 `LocalDockerSandboxManager`：创建、启动、停止、超时回收、查询状态和删除容器。
 2. 每个沙箱分配工作区卷、随机内部容器地址、模板类型和资源限制；在数据库记录 `sandbox_id`、项目、用户、镜像版本、过期时间和状态。
 3. 实现或适配沙箱内 runner：文件读写、受限命令执行、日志流、健康检查、前端端口和 FastAPI 端口发现。
 4. 实现 `preview-router`：由平台根据 `sandboxId` 维护路由，将 `/preview/<sandboxId>/` 代理到对应内部容器；支持 WebSocket/HMR。
 5. 增加容器异常退出、端口未就绪、构建失败、超时与手动重启的可见状态。
 **验收**
 - 两个用户创建的项目存在于不同容器和不同工作区；
 - 修改 ECharts 配置文件后，预览地址显示修改结果；
 - FastAPI 模板的 `/api/health` 可通过前端相对路径访问；
 - 沙箱不能访问 Docker Socket、宿主机数据库和非白名单网络；
 - 空闲超时后容器被回收，项目文件仍可恢复。
 ### 阶段 4：产品能力收口
 **工作项**
 1. 在文件面板支持安全的文件查看、编辑、保存、目录树刷新与下载；限制文件大小和可编辑扩展名。
 2. 在对话中增加模板选择和能力提示：大屏、流程图、海报、可选 FastAPI。
 3. 为 Agent 增加依赖白名单、图表主题、中文字体、Mock 数据、接口契约等明确提示词。
 4. 增加“运行/停止/重启/删除沙箱”和日志面板；仅项目所有者或管理员有相应权限。
 5. 增加项目快照、模板版本记录和基础审计日志。
 **验收**
 - 从一句自然语言需求到可预览项目的完整链路可完成；
 - 用户可查看并手动修改文件，刷新后改动保留；
 - 页面覆盖 ECharts、流程图、响应式大屏和可选 FastAPI 接口；
 - 非拥有者不能读取、修改或预览另一用户的项目。
 ### 阶段 5：上线前安全与运行验收
 **工作项**
 1. 压测 6 个并发沙箱，并记录 CPU、内存、磁盘、容器启动时间、首屏预览时间和模型等待时间。
 2. 验证镜像保留策略、工作区配额、容器回收、数据库备份和 Harbor 备份恢复。
 3. 执行越权、路径穿越、命令注入、网络探测、资源耗尽和模型密钥泄露测试。
 4. 建立日常运维操作：新增基础依赖、构建镜像、发布模板、回滚镜像、清理工作区和审计查询。
 **验收**
 - 并发运行时既有 DeerFlow 等服务不受明显影响；
 - 任一沙箱异常退出不会影响其他项目或平台控制服务；
 - 备份可恢复项目元数据、工作区和 Harbor 镜像；
 - 仅开放计划中的入口端口，内部组件无不必要公网监听。
 ## 9. 首期资源与并发建议
 由于该主机已有多项业务，首期不应按理论最大值分配：
 | 组件 | 首期限制 |
 |---|---|
 | Harbor | 8 vCPU、16 GB 内存、500 GB 数据盘配额 |
 | OpenVibe 控制服务 | 4 vCPU、8-16 GB 内存 |
 | 单个 UI 沙箱 | 1 vCPU、3 GB 内存、10 GB 工作区 |
 | 单个 Fullstack 沙箱 | 1.5 vCPU、4 GB 内存、12 GB 工作区 |
 | 沙箱并发 | 先限制为 6；稳定后再逐步上调 |
 当并发超过 10 个，或要面向更广泛用户开放时，应优先增加独立沙箱节点，而不是继续在本共享主机上加容器。
 ## 10. 实施顺序与交付物
 建议按以下提交/交付顺序推进，每一步都可独立验收和回退：
 1. `docs: confirm appbuilder network, ports and security baseline`
 2. `infra: add Harbor and versioned visual sandbox images`
 3. `infra: add offline templates and dependency locks`
 4. `feat: replace OpenVibe CloudBase persistence and model provider`
 5. `feat: add local Docker sandbox manager`
 6. `feat: add sandbox runner and path-based preview router`
 7. `feat: add visual-screen and FastAPI project workflows`
 8. `test: add sandbox isolation, preview and recovery coverage`
 9. `ops: add backup, cleanup, monitoring and rollout runbook`
 达到阶段 3 即可交付“内网模型驱动、生成并预览大屏/海报页面”的 PoC；达到阶段 5 后再作为受控的内部多人平台发布。
@@ -8,7 +8,7 @@ VITE_USE_REAL_DATA=true
 VITE_MOCK_COP_TASK_DETAIL=true
 # 研判情报报告（大屏绘制智能体深链 selectSqReport）数据源：true 走本地样例假数据（真实接口未就绪时调试用）；联调通过后置 false。
-VITE_MOCK_SQ_REPORT=true
+VITE_MOCK_SQ_REPORT=false
 # 深链任务详情（cop-task-detail：任务名称/描述）数据源：true 走本地假数据（真实接口未就绪时调试用）；联调通过后置 false。
 VITE_MOCK_COP_TASK_DETAIL=true
@@ -17,6 +17,9 @@ VITE_MOCK_COP_TASK_DETAIL=true
 VITE_BACKEND_BASE_URL=http://127.0.0.1:8001
 VITE_LANGGRAPH_BASE_URL=http://127.0.0.1:8001/api
 # 开发环境普通登录后进入 Vite 内隔离的官方风格页面；/page/* 仍访问当前定制版。
 VITE_USE_OFFICIAL_DEERFLOW_ENTRY=true
 # 轻应用「新建笔记」系列接口
 VITE_NOTE_API_BASE_URL=http://47.88.25.99:8000
 # CMZS后端接口
@@ -56,4 +56,13 @@
 # VITE_STATIC_WEBSITE_ONLY=
 # 部署级紧凑导航：true 时固定收起工作台左侧栏，并隐藏换肤与全量/简洁模式切换。
 # VITE_FORCE_COLLAPSED_SIDEBAR=false
 # 简介模式左侧菜单类型：与菜单管理页「简介模式」的类型 A / B 对应。两套网页分别填 A 或 B。
 # 不填或留空时按类型 A，继续使用原来的简介菜单数据。
 # VITE_COMPACT_MENU_TYPE=A
 # VITE_GITHUB_OAUTH_TOKEN=
 # --- 官方 DeerFlow 风格页面入口（仅 Vite，不引入 Next.js）---
 # true 时，普通登录后进入同一 Vite 应用中隔离的 /official/*。
 # 已指定 redirect 或 taskId/goPath 的登录仍保持原来的优先级。
 # 仅 .env.development 默认 true；其余环境保持 false。
 # VITE_USE_OFFICIAL_DEERFLOW_ENTRY=false
@@ -17,6 +17,9 @@ VITE_MOCK_COP_TASK_DETAIL=false
 VITE_BACKEND_BASE_URL=http://10.19.200.5:2026
 VITE_LANGGRAPH_BASE_URL=http://10.19.200.5:2026/api
 # 内网环境保持当前定制版默认入口。
 VITE_USE_OFFICIAL_DEERFLOW_ENTRY=false
 # 轻应用「新建笔记」系列接口
 VITE_NOTE_API_BASE_URL=http://47.88.25.99:8000
 # CMZS后端接口
@@ -14,6 +14,9 @@ VITE_MOCK_SQ_REPORT=false
 VITE_BACKEND_BASE_URL=https://ch1.b.uat.4.cn/deerflow
 VITE_LANGGRAPH_BASE_URL=https://ch1.b.uat.4.cn/deerflow/api
 # 线上保持当前定制版默认入口。
 VITE_USE_OFFICIAL_DEERFLOW_ENTRY=false
 # 轻应用「新建笔记」系列接口
 VITE_NOTE_API_BASE_URL=https://your-intranet-host/note-api
 # CMZS后端接口
@@ -17,6 +17,9 @@ VITE_MOCK_COP_TASK_DETAIL=false
 VITE_BACKEND_BASE_URL=https://ch1.b.sit.4.cn/deerflow
 VITE_LANGGRAPH_BASE_URL=https://ch1.b.sit.4.cn/deerflow/api
 # SIT 环境保持当前定制版默认入口。
 VITE_USE_OFFICIAL_DEERFLOW_ENTRY=false
 # 轻应用「新建笔记」系列接口
 VITE_NOTE_API_BASE_URL=https://your-intranet-host/note-api
 # CMZS后端接口
@@ -0,0 +1,15 @@
 # 岗位会商沙箱文档
 本目录存放**岗位会商文件预览沙箱**的对接与排障说明，独立于 `src/position-roundtable/docs/`，避免与模块内其它文档互相覆盖。
 | 文档 | 说明 |
 | --- | --- |
 | [沙箱打开关闭与步骤条.md](./沙箱打开关闭与步骤条.md) | **详细版**：打开/关闭完整时序、步骤条关系、对接接口字段说明、必守规则、历史 bug 根因、排障手册、自测清单、接线示例与代码索引 |
 模块总览仍见：`frontend-web/src/position-roundtable/README.md`。
 建议读法：
 - **从零对接新页面**：正文第 3、5、6、7、8、12、15、16 节  
 - **线上排障**：第 13、14 节  
 - **只要一页纸**：文末「附录 A」
@@ -0,0 +1,988 @@
 # 岗位会商 · 沙箱打开 / 关闭与步骤条（详细对接与排障指南）
 > **文档位置**：`frontend-web/docs/position-roundtable-sandbox/`  
 > **读者**：下次重做或对接岗位会商页面的同事；线上「沙箱不实时 / 卡死 / 第二次不刷新」时的排障同学。  
 > **最后依据**：当前仓库 `PositionRoundtablePage` + `PositionNodeChat` 实现（含临时名打开、外部 store、前沿节流、按 tool-call 重挂）。
 ---
 ## 目录
 1. [文档用途与读法](#1-文档用途与读法)
 2. [背景：为什么岗位会商要单独做沙箱](#2-背景为什么岗位会商要单独做沙箱)
 3. [用户可见的正确行为（验收标准）](#3-用户可见的正确行为验收标准)
 4. [整体架构与数据流](#4-整体架构与数据流)
 5. [职责划分：谁拥有什么状态](#5-职责划分谁拥有什么状态)
 6. [对接接口详解](#6-对接接口详解)
 7. [打开沙箱的完整步骤](#7-打开沙箱的完整步骤)
 8. [关闭沙箱的完整步骤](#8-关闭沙箱的完整步骤)
 9. [步骤条与沙箱的关系](#9-步骤条与沙箱的关系)
 10. [流式内容如何进入沙箱（性能关键）](#10-流式内容如何进入沙箱性能关键)
 11. [与普通对话页的对照](#11-与普通对话页的对照)
 12. [重做页面时的必守规则](#12-重做页面时的必守规则)
 13. [历史问题与根因（务必读）](#13-历史问题与根因务必读)
 14. [排障手册（按症状）](#14-排障手册按症状)
 15. [对接自测清单](#15-对接自测清单)
 16. [最小接线示例](#16-最小接线示例)
 17. [关键代码索引](#17-关键代码索引)
 18. [术语表](#18-术语表)
 ---
 ## 1. 文档用途与读法
 ### 1.1 这份文档解决什么问题
 岗位会商右侧「文件预览沙箱」看起来像普通对话页的产物预览，但实现路径完全不同。历史上这块反复出过：
 - 沙箱不实时打开，要等全文写完才弹；
 - 打开了但内容冻住，生成完才一口气灌进去；
 - 整页卡顿，连消息列表文字都不实时；
 - 同轮「重新生成」第二次写入时，步骤条变了，沙箱却不动；
 - 第一次正常，关掉后再问就不实时。
 这些 bug **特别容易在「重做页面 / 换布局 / 自己重写开沙箱逻辑」时复现**。本文把正确对接方式、时序、接口、禁区和排障步骤写全，方便下一位同事直接按文档接线，而不是再靠猜。
 ### 1.2 建议读法
 | 你的目标 | 先读哪些章节 |
 | --- | --- |
 | 从零接一个新页面壳 | 第 3、5、6、7、8、12、15、16 节 |
 | 只改对话子组件探测逻辑 | 第 7、9、12、13 节 |
 | 线上排障 | 第 13、14 节，必要时回看第 10 节 |
 | 理解为什么不能用页面 state | 第 2、10、13 节 |
 ### 1.3 对照代码（以仓库为准）
 | 角色 | 路径 |
 | --- | --- |
 | 页面壳（唯一沙箱宿主） | `frontend-web/src/position-roundtable/pages/PositionRoundtablePage.tsx` |
 | 节点对话（探测 write_file、上报预览） | `frontend-web/src/position-roundtable/components/PositionNodeChat.tsx` |
 | 收口对话 | `frontend-web/src/position-roundtable/components/PositionBuiltinAgentChat.tsx` |
 | 预览 UI（共享组件，勿分叉逻辑） | `frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx` |
 | 流式正文读取 | `frontend-web/src/core/artifacts/loader.ts` → `loadArtifactContentFromToolCall` |
 | 普通对话页对照（步骤条自动开） | `frontend-web/src/components/workspace/messages/message-group.tsx` |
 | 模块总览 | `frontend-web/src/position-roundtable/README.md` |
 ---
 ## 2. 背景：为什么岗位会商要单独做沙箱
 ### 2.1 普通对话页怎么开沙箱
 普通对话页（`ChatPage`）大致是：
 ```text
 ArtifactsProvider（页面级）
  └─ ChatBox / MessageList
       └─ message-group 渲染 write_file 步骤
            └─ 发现 path 且 autoOpen → artifacts.select + setOpen(true)
  └─ 右侧 ArtifactFileDetail 读同一套 ThreadContext
 ```
 要点：
 - 对话和预览共享同一套 `ThreadContext`（同一个 `useThreadStream`）。
 - 步骤条组件自己就能触发打开。
 - 流式 `content` 本来就在当前 React 树的 thread 里，不需要「把 thread 镜像到别的地方」。
 ### 2.2 岗位会商为什么不能照搬
 岗位会商页面同时有：
 - 左侧任务 / 意图 / 流程图；
 - 中间某个节点的对话（`PositionNodeChat`）；
 - 右侧配置抽屉；
 - **以及一个页面级单例沙箱**，它是对话区的**兄弟节点**，不在 `PositionNodeChat` 的 ThreadContext 里面。
 因此：
 1. 沙箱拿不到节点对话内部的 `thread`，除非节点主动上报；
 2. 若把每次流式 thread 写进**页面级 `useState`**，整页（任务卡、意图、流程图、对话）都会按流式频率重渲染，主线程会被打爆；
 3. 页面必须自己决定「开 / 关 / 抑制自动再开 / 切节点时清理」，不能让多个子组件各自 `setOpen`。
 所以岗位会商采用：
 ```text
 对话子组件探测 + 上报
  → 页面壳统一打开唯一 ArtifactFileDetail
  → 流式 thread 走外部 store，只让沙箱子树订阅
 ```
 ### 2.3 和「多智能体会商 Step2 沙箱」的区别
 仓库里还有 `frontend-web/docs/roundtable-step2-sandbox-progress.md`，那是另一套圆桌 Step2 沙箱进度文档，**不是**岗位会商这条链路。对接岗位会商时以本文为准。
 ---
 ## 3. 用户可见的正确行为（验收标准）
 重做或对接完成后，下列行为必须全部成立（用户感知对齐普通对话页）：
 | # | 行为 | 说明 |
 | --- | --- | --- |
 | A | 步骤条刚出现「写入文件」时，沙箱应已打开 | **不必等**步骤条上出现文件名 |
 | B | 沙箱源码边写边滚；消息列表也实时出字 | 不能整页卡死、不能「生成完一口气刷」 |
 | C | content 先于 path 时：先临时名打开，path 到了再改名 | 不闪屏、不重挂 |
 | D | 同轮第二次同路径 `write_file`（重新生成） | 沙箱清空并重新流式 |
 | E | 整轮结束后自动切 Markdown 预览 | 「正在生成，完成后自动预览」消失 |
 | F | 用户手动关闭后，同一次写入不再自动弹 | 下一轮新写入仍可自动开 |
 | G | 切岗位 / 切节点 / 新会话 / 切历史 | 沙箱关掉且不串内容 |
 **不要误判的正常现象：**
 - 流式期间沙箱停在「源码 / 编辑」视图，结束后才切「预览」——这是 `ArtifactFileDetail` 对 markdown/html 的既定行为，与普通对话页相同，**不是**打开时机 bug。
 - 步骤条长时间显示「写入文件」、没有路径，但沙箱已经打开并在滚动——content-first 模型下这是**预期**。
 ---
 ## 4. 整体架构与数据流
 ```text
 ┌──────────────────────────────────────────────────────────────────────────┐
 │ PositionRoundtablePage（页面壳）                                           │
 │                                                                          │
 │  state: sandboxArtifact | null                                           │
 │  ref:   sandboxArtifactRef / closedSandboxKeyRef / latestSnapshotRef     │
 │  store: createSandboxThreadStore()   ←── 禁止改成 useState               │
 │                                                                          │
 │  handlePreviewArtifact(artifact)  ←──────────────────────────────────┐   │
 │  handleNodeThreadSnapshot(...)    ←───────────────────────────────┐  │   │
 │  closeSandbox()                                                   │  │   │
 │                                                                   │  │   │
 │  {sandboxOpen && (                                                │  │   │
 │     SandboxThreadProvider(store)                                  │  │   │
 │       └─ ArtifactFileDetail key=sandboxCloseKey(...)              │  │   │
 │  )}                                                               │  │   │
 └───────────────────────────────────────────────────────────────────│──│───┘
                                                                    │  │
 ┌───────────────────────────────────────────────────────────────────│──│───┐
 │ PositionNodeChat / PositionBuiltinAgentChat                         │  │   │
 │                                                                   │  │   │
 │  useThreadStream → thread.messages / thread.isLoading             │  │   │
 │       │                                                           │  │   │
 │       ├─ MessageList → 步骤条（只展示 tool call）                   │  │   │
 │       │                                                           │  │   │
 │       ├─ latestStreamingWriteFile(messages)                       │  │   │
 │       │     → onPreviewArtifact({..., auto:true}) ───────────────────┘   │
 │       │                                                                  │
 │       └─ useEffect → onThreadSnapshot({threadId, thread}) ───────────────┘
 └──────────────────────────────────────────────────────────────────────────┘
 ```
 一句话：
 - **谁打开**：对话子组件决定「该不该开、开哪次交付」；  
 - **谁真正开面板**：页面壳；  
 - **内容怎么更新**：子组件持续上报 thread 快照 → 页面壳 store → 只有沙箱子树重渲染。
 ---
 ## 5. 职责划分：谁拥有什么状态
 ### 5.1 页面壳必须拥有
 | 状态 / 能力 | 为什么必须在页面壳 |
 | --- | --- |
 | `sandboxArtifact` | 唯一预览目标；切节点时要清 |
 | `closedSandboxKeyRef` | 用户关过后的抑制；跨子组件生命周期 |
 | `sandboxThreadStore` | 流式内容通道；不能进大页面 state |
 | `closeSandbox()` | 切岗位 / 切节点 / 新会话统一入口 |
 | 唯一 `ArtifactFileDetail` | 避免双实例、关闭失效、深度异常 |
 ### 5.2 对话子组件必须拥有
 | 状态 / 能力 | 作用 |
 | --- | --- |
 | `autoPreviewRunArmedRef`（armed） | 只有本轮用户发送后才允许自动开 |
 | `autoPreviewBaselineCallKeysRef`（baseline） | 忽略发送前已有的历史 write_file |
 | `activeWriteFilePreviewRef` | 记录当前打开的 previewKey / path / toolCallId |
 | `autoPreviewedArtifactKeyRef` | 同一次 identity 去重，避免每 chunk 重复上报 |
 | `latestStreamingWriteFile` | 从 streaming messages 探测可预览的 write |
 | `onThreadSnapshot` 上报 | 把 thread 喂给页面壳 |
 ### 5.3 明确禁止
 1. 在 `PositionNodeChat` 内再挂一套 `ArtifactFileDetail`。  
 2. 让步骤条组件直接 `setOpen(true)` 作为岗位会商主路径（对照普通页可以，岗位会商不行）。  
 3. 把 `onThreadSnapshot` 落到 `PositionRoundtablePage` 的 `useState`。  
 4. 用「整个 threadId」做关闭抑制。  
 5. 用「path 相同」复用 `previewKey`。
 ---
 ## 6. 对接接口详解
 ### 6.1 `PositionArtifactPreview`
 ```ts
 type PositionArtifactPreview = {
  threadId: string;          // 必填：LangGraph thread id
  path: string;              // 必填：真实路径，或 write-file: 虚拟 URL，或临时文件名路径
  name: string;              // 展示名（文件名）
  mimeType: string | null;   // 如 text/markdown；帮助预览语言判断
  previewKey?: string;       // 强烈建议：一次交付身份，推荐 `${messageId}:${toolCallId}`
  auto?: boolean;            // true = 流式自动打开；缺省/false = 用户点击打开
 };
 ```
 字段说明：
 | 字段 | 详细含义 |
 | --- | --- |
 | `threadId` | 沙箱用来匹配 `onThreadSnapshot` 的线程；也对关闭抑制键有贡献 |
 | `path` | 传给 `ArtifactFileDetail.filepath`。流式阶段通常是 `write-file:...` 虚拟 URL；落盘后的手动打开可以是真实 artifacts 路径 |
 | `name` | UI 展示用；临时名阶段可能是 `未命名文件.md` |
 | `mimeType` | 当 path 还不稳定时，帮助把语言判成 markdown/html，避免落成 TEXT |
 | `previewKey` | **一次交付的身份**。同一次 tool call 的 path 升级要保持不变；新的 tool call 必须变 |
 | `auto` | 自动打开才走关闭抑制；手动打开应清抑制 |
 ### 6.2 `onPreviewArtifact(artifact)` —— 对话 → 页面
 页面壳 `handlePreviewArtifact` 当前逻辑顺序：
 1. 校验 `threadId`、`path`，缺则 toast 并 return。  
 2. 计算 `artifactKey = sandboxCloseKey(artifact)`。  
 3. 若 `artifact.auto === true` 且 `closedSandboxKeyRef.current === artifactKey` → **抑制，直接 return**。  
 4. 清 `closedSandboxKeyRef`（手动打开或新的自动打开）。  
 5. `ArtifactsContext.select(path, true)` + `setOpen(true)`。  
 6. 判断是否同一预览 / 是否仅 path upgrade：  
   - `isSamePreview`：threadId + path + previewKey 全同 → 不重复 setState。  
   - `isPathUpgrade`：previewKey 相同、path 不同 → 更新 artifact，**不要**再折叠右侧抽屉。  
 7. 若不是 same preview：  
   - `setSandboxArtifact(artifact)`；  
   - **同步** `sandboxArtifactRef.current = artifact`（关键！flush 会立刻读 ref）；  
   - `sandboxSnapshotAppliedAtRef.current = 0`（允许立刻推首帧内容）。  
 8. 若 store 里已有别的 thread 快照，先 `publish(null)`。  
 9. 若 `latestNodeThreadSnapshotRef` 的 threadId 匹配，立刻 `queueSandboxThreadSnapshot`。  
 10. 非 path upgrade 时 `setRightPanelOpen(false)`。
 `sandboxCloseKey`：
 ```ts
 if (artifact.previewKey) {
  return `${artifact.threadId}:write:${artifact.previewKey}`;
 }
 return `${artifact.threadId}:${normalizePreviewArtifactPath(artifact.path)}`;
 ```
 `ArtifactFileDetail` 的 React `key` 必须用这个 key：  
 **新 previewKey → 组件重挂 → 视觉上「清空再生成」。**
 ### 6.3 `onThreadSnapshot({ threadId, thread })` —— 对话 → 页面
 每次 `thread` 引用变化（消息 chunk 到达）子组件都会调：
 ```ts
 onThreadSnapshot?.({ threadId: activeThreadId, thread });
 ```
 页面壳应：
 1. 计算 `signature = sandboxThreadSignature(thread)`（用 isLoading、messages 长度、最近 write_file 的 path/content 长度/尾部等拼签名，用于去重）。  
 2. 写入 `latestNodeThreadSnapshotRef`（即使沙箱还没开，打开瞬间也要用）。  
 3. 若当前没有打开的沙箱，或打开的沙箱 threadId 不一致 → **只更新 ref，不 publish**。  
 4. 若一致 → `queueSandboxThreadSnapshot`（前沿节流后 `store.publish`）。
 ### 6.4 虚拟 URL 与正文读取
 流式阶段 path 形如：
 ```text
 write-file:${sourcePath}?message_id=${messageId}&tool_call_id=${toolCallId}&language=markdown
 ```
 `loadArtifactContentFromToolCall`：
 1. 解析 URL 的 `message_id`、`tool_call_id`；  
 2. 在 `thread.messages` 里找对应 AI message 的 tool call；  
 3. 返回 `toolCall.args.content`。
 结论：
 - 沙箱跟的是 **tool call 身份**，不是磁盘文件是否已经写完；  
 - 没有真实 path 也能显示正文；  
 - 临时文件名只影响展示名和语言猜测。
 ### 6.5 对话子组件 → 页面壳的其它相关回调
 | 回调 | 用途 |
 | --- | --- |
 | `onPreviewArtifact` | 打开 / 更新沙箱 |
 | `onThreadSnapshot` | 推送流式 thread |
 | 页面壳 `closeSandbox` 传给 `ArtifactFileDetail.onClose` | 用户点关闭 |
 手动从流程图 / 产物列表打开时，也可以直接调 `handlePreviewArtifact`（通常不带 `auto`，或不带 previewKey）。
 ---
 ## 7. 打开沙箱的完整步骤
 ### 7.1 武装（arm）：只有「本轮用户提交」才允许自动开
 在 `PositionNodeChat.handleSubmit` 真正 `sendMessage` 之前：
 ```text
 activeWriteFilePreviewRef = null
 autoPreviewBaselineCallKeysRef = writeFileCallKeys(thread.messages)  // 历史 write 的 messageId:toolCallId
 autoPreviewRunArmedRef = true
 → sendMessage(...)
 ```
 发送失败要把 `armed` 设回 `false`。
 为什么要 baseline？
 线程里往往已经有上几次问答写过的 `write_file`。如果只看「messages 里有没有 write_file」，一提问就会把旧文件再打开一次。baseline 的含义是：**只有这次提交之后新出现的 tool call 才能自动开沙箱**。
 ### 7.2 探测 `write_file`：不要等完整 path
 `write_file` 参数是一整段 JSON 流，**键顺序由模型决定**。
 | 模型吐参顺序 | 步骤条表现 | 错误做法的后果 |
 | --- | --- | --- |
 | path / description 先到，再 content | 很快显示描述和文件名 | 普通对话页常见；等 path 也能开 |
 | **content 先到，最后才 path** | 长时间只有「写入文件」，文件名很晚才出现 | 若硬等完整 path，沙箱会晚几十秒甚至一分钟 |
 岗位会商报告类 agent **经常是第二种**。
 `latestStreamingWriteFile` 规则：
 1. 倒序扫描 AI messages 的 `tool_calls`；  
 2. 工具名是 `write_file` 或 `str_replace`；  
 3. **有完整扩展名的 path**（`hasCompleteArtifactExtension`）→ 用真实路径；  
 4. **尚无可用 path，但 `write_file` 的 content 已有非空字符** → 临时文件名：  
   - 正文头像 HTML → `未命名文件.html`  
   - 否则 → `未命名文件.md`  
 5. `str_replace` 必须等真实 path（它改已有文件）；  
 6. 组装：  
   - `key = messageId:toolCallId`  
   - `path = write-file:虚拟URL`（write_file）或真实 path（str_replace）  
   - `mimeType`：markdown 则 `text/markdown`
 为什么扩展名必须完整？
 流式 path 会经历 `/a/b/report.m` → `/a/b/report.md`。若在 `.m` 时就当真实文件打开，预览语言可能被永久判成 TEXT。
 ### 7.3 上报 effect 的四个门闩
 自动上报 `onPreviewArtifact` 前必须同时满足：
 1. `thread.isLoading === true`  
 2. 探测到 streaming artifact，且其 key **不在** baseline  
 3. 已有 `previewThreadId`  
 4. `autoPreviewRunArmedRef === true`
 然后处理 previewKey：
 ```text
 若与 activePreview 是同一次 tool call（含 tool-start 前缀兼容）
  → 复用旧 previewKey   // 用于临时名 → 真实 path
 否则
  → previewKey = 新的 messageId:toolCallId
 ```
 去重键：
 ```text
 `${previewThreadId}:${previewKey}:${sourcePath}`
 ```
 把 `sourcePath` 算进去，是为了：**同 previewKey 下临时名变成真实 path 时，还要再报一次**（path upgrade），但不会每来一个 content chunk 都报。
 ### 7.4 线程绑定竞态（不要误 disarm）
 首轮对话常出现：
 1. 用户发送（本地 draft threadId / 稍后 SDK 创建真实 id）；  
 2. 流已经开始、armed=true；  
 3. 会话 API 把 `node.threadId` 从 `null` 写成真实 id。
 这是「本节点绑定自己的新线程」，**不是**切节点。若绑定 effect 无脑清空 armed / baseline，首轮会永远开不了沙箱。
 正确：识别 `isOwnThreadBinding`（同 nodeKey、旧 threadId 为空、新 threadId 等于当前 boundThreadId）时 **直接 return，不清 armed**。
 ### 7.5 path upgrade（改名）≠ 第二次交付
 同一次 tool call：
 ```text
 T1  content 到达 → path=未命名文件.md, previewKey=msg:tc1 → 打开
 T2  真实 path 到达 → path=/mnt/.../报告.md, previewKey=msg:tc1 → 只改名
 ```
 页面壳看到相同 previewKey、不同 path → `isPathUpgrade`：
 - 更新 `sandboxArtifact`；  
 - **不**重挂（React key 仍基于 previewKey）；  
 - **不**再折叠右侧抽屉。
 ### 7.6 同路径二次写入（重新生成）
 同一次问答里模型可能：
 ```text
 1) write_file → 步骤条「写入文件」→ 打开沙箱
 2) 再 write_file 同 path，description=「重新生成优化版…」
 ```
 这是**两次 tool call**，必须两个 previewKey。  
 若错误地「path 相同就复用 previewKey」：
 - 步骤条出现第二条；  
 - 沙箱 React key 不变；  
 - 用户看到「重新生成了，但沙箱没变化」。
 正确：身份只看 tool call。
 ### 7.7 时序总图（content-first）
 ```text
 T0    用户发送 → armed=true，拍 baseline
 T1    步骤条出现「写入文件」（尚无 path）
 T1+   args.content 首字符到达 → 临时名打开沙箱，源码开始滚动
      … store 约每 160ms 推一次 thread 快照 …
 T2    args.path 拼完整（含 .md）→ path upgrade，标题改真实文件名（不重挂）
 T3    write 结束 / isLoading=false → 自动切 Markdown 预览
 ```
 ### 7.8 时序总图（同轮二次写入）
 ```text
 T1  write_file#1 → previewKey=msg:tc1 → 打开沙箱 A
 T2  #1 结束（可能短暂切预览）
 T3  write_file#2（同 path，新 description）→ previewKey=msg:tc2
    → key 变 → 组件重挂清空 → 跟 #2 重新流式
 ```
 ---
 ## 8. 关闭沙箱的完整步骤
 ### 8.1 用户手动关闭
 `closeSandbox()` 应做：
 1. `closedSandboxKeyRef = sandboxCloseKey(current)` —— 抑制**这一次**自动再开；  
 2. 关闭 `ArtifactsContext.open`（若开着）；  
 3. 清节流定时器、pending 快照；  
 4. `sandboxSnapshotAppliedAtRef = 0`；  
 5. `sandboxArtifactRef = null` + `setSandboxArtifact(null)`；  
 6. `sandboxThreadStore.publish(null)`。
 抑制与 path upgrade 的关系：
 - 关掉临时名面板后，同一次 tool call 升级真实 path **仍被抑制**（同一 previewKey）——符合「用户不要看这次」；  
 - 下一次新的 `write_file`（新 previewKey）**可以**再自动开。
 ### 8.2 场景切换时强制关闭
 以下操作应先调用 `closeSandbox()`，避免串台：
 - 切岗位；  
 - 切节点；  
 - 切收口阶段；  
 - 新建会话；  
 - 切换历史会话。
 是否写入 `closedSandboxKeyRef` 可按产品决定；至少必须清面板和 store。
 ### 8.3 错误的抑制粒度（历史坑）
 若做成「关过一次就整个 thread 不再自动开」：
 - 第一次实时开正常；  
 - 用户关掉；  
 - 再问一次 → 同 thread 被永久抑制 → 看起来像「第二次不实时 / 要等生成完」。
 正确粒度：**单次交付的 `sandboxCloseKey`（含 previewKey）**。
 ---
 ## 9. 步骤条与沙箱的关系
 ### 9.1 步骤条从哪来
 步骤条由 `MessageList` → `message-group.tsx` 渲染 tool call：
 - 标题：优先 `args.description`；没有则 i18n 兜底「写入文件」；  
 - 子行：有 `args.path` 才显示路径；  
 - 普通对话页还会在「有 path + autoOpen」时自己 `select/setOpen`。
 岗位会商里，步骤条**仍然只负责展示**；打开沙箱走 `onPreviewArtifact`，不要让两套逻辑抢。
 ### 9.2 对照表
 | 你看到的步骤条 | 含义 | 沙箱应处于 |
 | --- | --- | --- |
 | 仅「写入文件」，无路径 | tool call 已开始；path/description 可能还没流到 | **应已打开**（临时名），源码在滚 |
 | 「写入文件」+ 路径 | path 已可用 | 已打开；若刚从临时名升级则只改名 |
 | 带自定义 description 的标题 + 路径 | 模型给了 description | 同上 |
 | 第二条「重新生成…」+ 同路径 | 新的 write_file（新 toolCallId） | **应重挂**并重新流式 |
 | 顶部「正在生成，完成后自动预览」 | 仍在 code 视图 | 正常，等 isLoading 结束切预览 |
 | 生成结束，出现文件卡片 / present_files | 工具结果已落 | 通常已是预览模式；可手动再点开 |
 ### 9.3 常见误解
 **误解 1：**「步骤条出现文件名 = 打开沙箱的正确时机」  
 → 错。那是 path 到达的时机。content-first 时正确打开时机更早：content 首字节 / 工具调用已开始。
 **误解 2：**「步骤条还在写『写入文件』，沙箱却开了，是 bug」  
 → 通常不是。两边数据源相同，但沙箱允许无 path 打开，步骤条标题可能还没 description。
 **误解 3：**「等生成完从编辑切预览 = 沙箱打开晚了」  
 → 错。那是 `ArtifactFileDetail` 的 viewMode 策略。
 ---
 ## 10. 流式内容如何进入沙箱（性能关键）
 ### 10.1 为什么不能用页面 `useState` 存线程快照
 错误写法：
 ```ts
 setSandboxThreadSnapshot(snapshot) // 页面级 useState
 ```
 后果：
 - 消息 chunk 约每 30ms 一次，节流后仍约 6 次/秒；  
 - 每次都重渲染整页：任务卡、意图结果、流程图、节点对话……；  
 - 主线程占满 → 消息列表停绘、沙箱冻住；  
 - 纯尾随 `setTimeout(160)` 会被饿死，十几秒不 flush。
 这同时解释了两个历史现象：
 1. 「沙箱打开了但内容不更新」；  
 2. 「修完节流后整页更卡、消息也不实时」——因为节流终于开始真正 setState 了。
 ### 10.2 正确做法：外部 store + 子树订阅
 ```ts
 createSandboxThreadStore()
  subscribe / getSnapshot / publish
 SandboxThreadProvider
  useSyncExternalStore(store.subscribe, store.getSnapshot)
  → ThreadContext.Provider value={{ thread, isMock:false }}
  → ArtifactFileDetail
 ```
 页面壳本身**不**因 snapshot 变化而重渲染；只有 Provider 及其子树重渲染。
 ### 10.3 节流必须是前沿（leading-edge）
 `SANDBOX_SNAPSHOT_MIN_INTERVAL_MS = 160`：
 ```text
 queue(snapshot):
  pending = snapshot
  if 距上次 publish >= 160ms:
      立刻 flush（同步 publish）
  else:
      若没有在途 timer，则 setTimeout(剩余时间) 做补尾
 flush:
  清 timer
  校验 pending.threadId === sandboxArtifactRef.threadId
  publish(pending)
 ```
 **不要**改回：
 ```ts
 if (timer != null) return;
 timer = setTimeout(flush, 160);
 ```
 那是纯尾随；忙主线程下会假死。
 ### 10.4 signature 去重
 `sandboxThreadSignature` 用最近 write_file 的 path、content 长度、content 尾 32 字等拼签名。  
 store.publish 时若 threadId+signature 未变，则不通知订阅者，减少无效渲染。
 ### 10.5 打开瞬间的首帧
 `handlePreviewArtifact` 里往往会立刻 `queueSandboxThreadSnapshot(latestSnapshot)`。  
 此时 React 的 `setSandboxArtifact` 可能还没提交，若 flush 只读旧的 `sandboxArtifactRef`，会因 threadId 不匹配把首帧丢掉。
 所以打开新预览时必须：
 ```ts
 sandboxArtifactRef.current = artifact; // 同步
 sandboxSnapshotAppliedAtRef.current = 0;
 ```
 ---
 ## 11. 与普通对话页的对照
 | 点 | 普通对话页 | 岗位会商 |
 | --- | --- | --- |
 | 谁触发打开 | `message-group` 内 `artifacts.select` | 子组件 `onPreviewArtifact` → 页面壳 |
 | 是否要求 path | 是（有 path 才自动开） | 否（write_file + content 可临时名开） |
 | thread 从哪来 | 同树 ThreadContext | `onThreadSnapshot` + 外部 store |
 | 关闭抑制 | 主要靠 ArtifactsContext / 用户操作 | `closedSandboxKeyRef` 按 previewKey |
 | 同 path 重写 | 依赖新的 tool call / 选择逻辑 | **必须**新 previewKey 以重挂 |
 | 结束后切预览 | ArtifactFileDetail 同一套 | 同一套 |
 对齐目标是**用户感知一致**，不是代码路径完全相同。
 普通对话页自动开的核心条件（对照用）：
 ```ts
 artifacts && isLoading && isLast && autoOpen && autoSelect && path && !result
 ```
 它也要求 path，所以 content-first 时普通页同样会偏晚——只是很多主聊天示例 agent 先吐 path，观感更好。岗位会商报告 agent 更常 content-first，所以必须做临时名提前开。
 ---
 ## 12. 重做页面时的必守规则
 按优先级：
 1. **流式 thread 快照禁止进页面级 `useState`** → 用 store + `useSyncExternalStore`。  
 2. **节流用前沿 + 补尾**，不要纯尾随 timer。  
 3. **不要等完整 path 才开**；`write_file` + content 即可临时名打开。  
 4. **扩展名完整前不要把 path 当最终 path**。  
 5. **previewKey 按 tool call，不按 path**。  
 6. **打开时同步写 `sandboxArtifactRef`，并重置节流时间戳**。  
 7. **主路径扫描 `thread.messages`，不要只靠 `onToolStart`**。  
 8. **path upgrade 保持 previewKey，不要当第二次交付**。  
 9. **关闭抑制按 sandboxCloseKey，不要按整 thread**。  
 10. **沙箱单例在页面壳；子组件只上报**。  
 11. **本节点 threadId 回写不要 disarm**。  
 12. **「结束后才切预览」不要当打开 bug 去「修」掉共享组件**，除非产品明确要求边生成边渲染 Markdown（需单独评估性能）。
 ---
 ## 13. 历史问题与根因（务必读）
 下面每个都在真实联调里出现过。重做时若踩中，优先回来对照。
 ### 13.1 沙箱要等文件名出来才开（晚几十秒）
 **现象：** 步骤条早就「写入文件」，沙箱很晚才开；普通对话页对比显得「实时」。  
 **根因：** 探测逻辑硬等完整 `path`；而该 agent 先流 `content`、最后才流 `path`。  
 **修复：** content 首批字符即可用临时名打开；path 到了再 upgrade。
 ### 13.2 沙箱打开了，内容冻住，生成完才灌满
 **现象：** 面板开了，但里面一直是空/旧内容；日志里 queue 很多，flush 很少。  
 **根因：** 纯尾随 160ms 定时器在忙主线程下被饿死。  
 **修复：** 前沿节流——到期就在流回调里同步 flush。
 ### 13.3 修完「内容更新」后，整页卡顿、消息也不实时
 **现象：** 沙箱开始更新了，但页面更卡，消息列表也「攒到最后刷」。  
 **根因：** flush 走的是页面 `useState`，每 160ms 整页重渲染。以前 timer 饿死时反而「不卡」。  
 **修复：** 快照改外部 store，只让沙箱子树订阅。
 ### 13.4 第二次「重新生成」步骤有了，沙箱不变
 **现象：** 同轮第二条二条 write 步骤，沙箱仍显示第一次完整结果。  
 **根因：** 用「path 相同」复用了第一次 previewKey，React key 不变，组件不重挂。  
 **修复：** previewKey 只按 tool call；同 path 新 call 必须新 key。
 ### 13.5 第一次实时，关掉后再问就不实时
 **现象：** 关过沙箱后，下一轮要等生成完才开，或不开。  
 **根因：** 抑制绑在整个 threadId，或把 path upgrade / 新 call 误判成同一次。  
 **修复：** 抑制键 = `sandboxCloseKey(previewKey)`；仅抑制那一次交付。
 ### 13.6 首轮永远不开
 **现象：** 新建节点第一次提问，armed 后很快又不满足条件。  
 **根因：** `node.threadId` 从 null 回写真实 id 时，绑定 effect 误 disarm。  
 **修复：** `isOwnThreadBinding` 时不清 armed。
 ### 13.7 预览变成纯文本
 **现象：** 明明是 md，却按 TEXT 打开。  
 **根因：** 在 `.m` 阶段就当完整 path；或临时名没有 `.md` / 没传 language、mimeType；或 path 带空格。  
 **修复：** `hasCompleteArtifactExtension`；临时名带扩展名；URL 加 `language=markdown`；path trim。
 ### 13.8 依赖 onToolStart，线上偶发不开
 **现象：** 本地偶发正常，联调经常不开。  
 **根因：** 后端 StreamBridge / worker 可能过滤 tools/events 类 stream mode。  
 **修复：** 主路径必须是 messages 里渐进出现的 `tool_calls`；onToolStart 只能当补充。
 ---
 ## 14. 排障手册（按症状）
 排障时建议先看 Chrome Performance / React 重渲染是否整页抖，再看消息里 tool_calls 的 args 是 path-first 还是 content-first。
 ### 14.1 沙箱开得很晚
 检查顺序：
 1. `latestStreamingWriteFile` 是否仍要求完整 path？  
 2. armed 是否被 threadId 回写清掉？  
 3. 是否命中 `closedSandboxKey`？  
 4. 新 call 是否被 baseline 当成历史？  
 5. `previewThreadId` 是否为空（线程还没绑上）？
 ### 14.2 打开了但内容空白 / 冻住
 1. 快照是否进了页面 useState？  
 2. 节流是否纯尾随？  
 3. `SandboxThreadProvider` 是否拿到带 messages 的 thread？  
 4. 虚拟 URL 的 message_id / tool_call_id 是否对得上？  
 5. 打开时 `sandboxArtifactRef` 是否同步？（首帧是否被 drop）  
 6. signature 是否因实现错误一直不变，导致 publish 被去重？
 ### 14.3 整页卡、消息列表也不实时
 1. 搜页面壳是否还有 `setSandboxThreadSnapshot` / 类似大对象 state。  
 2. 是否在每 chunk `console.debug` 打大对象（DevTools 打开时更卡）。  
 3. 是否错误地让页面壳订阅了 store（页面壳不应 `useSyncExternalStore` 这份 store；只有 Provider 订）。
 ### 14.4 重新生成不刷新
 1. 第二次 write 的 toolCallId 是否变了？  
 2. previewKey 是否仍用 path 复用？  
 3. `ArtifactFileDetail` 的 `key=` 是否基于 sandboxCloseKey/previewKey？
 ### 14.5 关后再问异常
 1. 打印 `closedSandboxKeyRef` 与新 artifact 的 sandboxCloseKey。  
 2. 确认新一轮 send 时 armed/baseline 已重置。  
 3. 确认抑制不是整 thread。
 ### 14.6 语言 / 预览模式不对
 1. 看打开时的 path / mimeType / language 查询参数。  
 2. 确认不是在扩展名不完整时打开。  
 3. 确认「源码→预览」发生在 isLoading false 之后（属正常）。
 ---
 ## 15. 对接自测清单
 重做页面后至少跑完：
 ### 功能
 - [ ] 首轮：步骤条「写入文件」出现时，沙箱是否已开并开始出字？  
 - [ ] content-first agent：无文件名阶段是否也能开？  
 - [ ] path 到达后：是否只改名、不整页闪、不重挂？  
 - [ ] 同轮第二次同路径 write：是否清空并重新流式？  
 - [ ] 结束后是否自动切 Markdown 预览？  
 - [ ] 手动点步骤条路径 / 产物卡片：能否打开正确文件？  
 ### 关闭与抑制
 - [ ] 流式中手动关闭：本次是否不再自动弹？  
 - [ ] 关闭后再发一轮新问题：是否仍可自动开？  
 - [ ] path upgrade 是否不会绕过「用户刚关闭」的抑制？  
 ### 场景切换
 - [ ] 切节点：沙箱关闭，旧内容不残留。  
 - [ ] 切岗位：同上。  
 - [ ] 新建会话 / 切历史：同上。  
 ### 性能
 - [ ] 流式中消息列表是否实时出字？  
 - [ ] 页面是否明显掉帧 / 卡死？  
 - [ ] React DevTools 中，大页面壳是否在每 160ms 整页 update？（不应）
 ---
 ## 16. 最小接线示例
 ### 16.1 页面壳（示意）
 ```tsx
 const [sandboxArtifact, setSandboxArtifact] = useState<PositionArtifactPreview | null>(null);
 const sandboxArtifactRef = useRef<PositionArtifactPreview | null>(null);
 const closedSandboxKeyRef = useRef<string | null>(null);
 const latestNodeThreadSnapshotRef = useRef<SandboxThreadSnapshot | null>(null);
 const store = useMemo(createSandboxThreadStore, []);
 // pending + timer + appliedAt 用于前沿节流（见 PositionRoundtablePage）
 function handlePreviewArtifact(artifact: PositionArtifactPreview) {
  if (!artifact.threadId || !artifact.path) return;
  const key = sandboxCloseKey(artifact);
  if (artifact.auto && closedSandboxKeyRef.current === key) return;
  closedSandboxKeyRef.current = null;
  artifactsCtx?.select(artifact.path, true);
  artifactsCtx?.setOpen(true);
  const prev = sandboxArtifactRef.current;
  const isSame =
    prev?.threadId === artifact.threadId &&
    prev.path === artifact.path &&
    prev.previewKey === artifact.previewKey;
  const isPathUpgrade =
    !isSame &&
    Boolean(artifact.previewKey) &&
    prev?.threadId === artifact.threadId &&
    prev.previewKey === artifact.previewKey;
  if (!isSame) {
    sandboxArtifactRef.current = artifact; // 必须同步
    setSandboxArtifact(artifact);
    sandboxSnapshotAppliedAtRef.current = 0;
  }
  if (store.getSnapshot()?.threadId !== artifact.threadId) {
    store.publish(null);
  }
  const latest = latestNodeThreadSnapshotRef.current;
  if (latest?.threadId === artifact.threadId) {
    queueSandboxThreadSnapshot(latest);
  }
  if (!isPathUpgrade) setRightPanelOpen(false);
 }
 function handleNodeThreadSnapshot(snapshot: { threadId: string; thread: BaseStream<AgentThreadState> }) {
  const next = { ...snapshot, signature: sandboxThreadSignature(snapshot.thread) };
  latestNodeThreadSnapshotRef.current = next;
  if (sandboxArtifactRef.current?.threadId !== snapshot.threadId) return;
  queueSandboxThreadSnapshot(next);
 }
 function closeSandbox() {
  if (sandboxArtifactRef.current) {
    closedSandboxKeyRef.current = sandboxCloseKey(sandboxArtifactRef.current);
  }
  // clear timer / pending / appliedAt
  sandboxArtifactRef.current = null;
  setSandboxArtifact(null);
  store.publish(null);
  artifactsCtx?.setOpen(false);
 }
 // 渲染
 {sandboxArtifact && (
  <SandboxThreadProvider
    store={store}
    threadId={sandboxArtifact.threadId}
    fallbackThread={stub}
  >
    <ArtifactFileDetail
      key={sandboxCloseKey(sandboxArtifact)}
      filepath={sandboxArtifact.path}
      threadId={sandboxArtifact.threadId}
      mimeType={sandboxArtifact.mimeType}
      onClose={closeSandbox}
      allowVirtualMarkdownEdit
    />
  </SandboxThreadProvider>
 )}
 ```
 ### 16.2 对话子组件（示意）
 ```tsx
 // send 前
 activeWriteFilePreviewRef.current = null;
 autoPreviewBaselineCallKeysRef.current = writeFileCallKeys(thread.messages);
 autoPreviewRunArmedRef.current = true;
 await sendMessage(...);
 // 探测
 const streaming = thread.isLoading ? latestStreamingWriteFile(thread.messages) : null;
 const next =
  streaming && !autoPreviewBaselineCallKeysRef.current.has(streaming.key)
    ? streaming
    : null;
 useEffect(() => {
  if (!thread.isLoading || !next || !previewThreadId || !autoPreviewRunArmedRef.current) return;
  // previewKey：同 tool call 复用，否则用 next.key
  // artifactKey = threadId:previewKey:sourcePath 去重
  onPreviewArtifact?.({
    threadId: previewThreadId,
    path: next.path,
    name: next.name,
    mimeType: next.mimeType,
    previewKey,
    auto: true,
  });
 }, [next, previewThreadId, thread.isLoading, onPreviewArtifact]);
 useEffect(() => {
  onThreadSnapshot?.({ threadId: activeThreadId, thread });
 }, [activeThreadId, thread, onThreadSnapshot]);
 ```
 **强烈建议：** 探测 / armed / baseline / 临时名逻辑直接复用或抽取自 `PositionNodeChat`，不要从零重写。
 ---
 ## 17. 关键代码索引
 | 主题 | 位置 |
 | --- | --- |
 | 临时名 / 完整扩展名 / latestStreamingWriteFile | `PositionNodeChat.tsx` 中 `provisionalWriteFilePath`、`hasCompleteArtifactExtension`、`latestStreamingWriteFile` |
 | armed / baseline / 上报 effect | `PositionNodeChat.tsx` `handleSubmit` + streaming preview `useEffect` |
 | 同 tool call 判断 / 二次写入重挂 | 同上，`isSameToolCall` / `previewKey` |
 | 线程绑定保护 | `PositionNodeChat.tsx` node binding `useEffect` 中 `isOwnThreadBinding` |
 | sandboxCloseKey / store / 前沿节流 | `PositionRoundtablePage.tsx` `sandboxCloseKey`、`createSandboxThreadStore`、`queueSandboxThreadSnapshot` |
 | 打开 / path upgrade / 抑制 | `PositionRoundtablePage.tsx` `handlePreviewArtifact` |
 | 关闭 | `PositionRoundtablePage.tsx` `closeSandbox` |
 | 虚拟 URL 读 content | `core/artifacts/loader.ts` `loadArtifactContentFromToolCall` |
 | 源码/预览切换 | `artifact-file-detail.tsx` 中 `viewMode` + `thread.isLoading` |
 | 普通页步骤条自动开 | `message-group.tsx` `write_file` 分支 |
 相关提交（背景）：
 - `fix(frontend): 岗位会商沙箱在 write_file 流式阶段实时打开并刷新`  
  — 临时名打开、外部 store、前沿节流  
 - `fix(frontend): 同路径二次 write_file 时重挂岗位会商沙箱`  
  — previewKey 按 tool call，禁止按 path 复用  
 ---
 ## 18. 术语表
 | 术语 | 含义 |
 | --- | --- |
 | armed | 本轮用户发送后，允许自动打开沙箱的开关 |
 | baseline | send 前已有的 write tool call 集合，用于忽略历史产物 |
 | previewKey | 一次交付的稳定身份，推荐 `messageId:toolCallId` |
 | sandboxCloseKey | 关闭抑制键，同时用作 `ArtifactFileDetail` 的 React key |
 | provisional path / 临时名 | 尚无真实 path 时的 `未命名文件.md` / `.html` |
 | path upgrade | 同 previewKey 下临时名升级为真实 path |
 | sandboxThreadStore | 流式线程外部 store，避免整页重渲染 |
 | write-file: URL | 用 message_id + tool_call_id 定位流式 content 的虚拟路径 |
 | leading-edge throttle / 前沿节流 | 到期立即在回调里 publish，而不是只挂尾随 timer |
 | content-first / path-first | 模型流式 JSON 参数时 content 与 path 哪个先到 |
 | isOwnThreadBinding | 本节点把自己的新 threadId 写回 props，不是切节点 |
 ---
 ## 附录 A：给对接同学的一页纸摘要
 1. 页面壳只挂一个沙箱；子组件只调用 `onPreviewArtifact` / `onThreadSnapshot`。  
 2. 自动打开时机 ≈ 步骤条出现「写入文件」时，而不是出现文件名时。  
 3. `write_file` 可以没有 path：临时名打开，path 到了再改名。  
 4. 流式 thread 进外部 store，进页面 state 会卡死。  
 5. 节流要前沿；previewKey 看 tool call；关闭抑制看 sandboxCloseKey。  
 6. 同路径重新生成 = 新 previewKey = 沙箱重挂。  
 7. 出问题先对照第 13、14 节，再看代码索引第 17 节。
@@ -0,0 +1,7 @@
 # 技能知识归纳与“知识梳理”助手知识库
 管理员在「技能管理 → 技能知识归纳」中选择一个或多个技能、一个或多个目标，系统按“技能 × 目标”创建后台任务。界面提供总体进度、单项失败重试、实体/关系审核、绑定重归纳、自动同步和两种解绑动作。技能列表通过一次 bindings 查询展示归纳目标，避免逐技能请求。
 扫描仅处理知识资料。代码、脚本、锁文件、密钥文件以及 Markdown 代码块不会进入上传、摘要、提示词或知识指纹；ZIP 只读取逐项验证通过的知识成员。自动监听只比较该知识指纹，所以纯代码改动不会产生 stale 状态。
 知识库页面新增「普通知识库 / 助手知识库」并行入口。管理员可将系统默认入口设为 v1（普通 WeKnora）或 v2（全局“知识梳理”）。助手库无需 WeKnora 即可初始化，所有用户可只读查看和搜索 Wiki；管理员可上传本地文件、从普通库导入、重新导入或删除来源、查看版本并回滚。来源删除只移除对应贡献，共享实体与关系继续保留。
@@ -0,0 +1,822 @@
 # 沙箱统一写作管线：可实现开发方案
 > 状态：设计稿；本文件只定义实施方案，不包含本轮业务代码改动。  
 > 覆盖范围：普通沙箱 Markdown、深度研究 `report.md`、现有 Markdown 编辑器的选区/段落改写。
 ## 1. 目标与结论
 目标不是再增加一个“AI 写作页面”，而是将现有的四类能力统一为一个安全、可流式、可追溯的**文档改写管线**：
 1. Markdown 编辑器选区改写；
 2. Markdown 编辑器段落改写；
 3. 深度研究报告的局部候选改写；
 4. 沙箱中 Markdown 文件的全文改写。
 该管线负责固定原文版本、构造上下文、逐 token 输出、校验 Markdown、生成可核验 diff、按策略提交，以及在全文覆盖时保存可撤销版本。
 结论：需求可行，现有工程已有足够的复用基础：
 - `frontend-web/src/open-canvas/components/artifact/MarkdownAiEditor.tsx` 已具备局部改写弹窗与人工“替换/插入/重试/追问”交互。
 - `frontend-web/src/open-canvas/hooks/useWritingRewrite.ts` 与 `frontend-web/src/open-canvas/api/rewrite.ts` 已具备 SSE 文本流消费。
 - `offline-backend-20260512/backend/app/gateway/routers/writing.py` 已具备模型流式读取实现。
 - `offline-backend-20260512/backend/app/gateway/routers/deep_research.py` 已具备报告哈希、候选内容和用户确认应用机制。
 - `frontend-web/src/components/workspace/messages/message-list.tsx`、`MessageGroup.tsx` 已可承载普通对话的工具步骤条、流式消息和文件卡片。
 - `frontend-web/src/pages/deep-research/DeepResearchWorkbench.tsx` 已经通过虚拟消息把研究进度接入普通 `MessageList`。
 因此应该复用这些基础，建设一个执行内核；不能为全文改写另建独立聊天列表或独立写作流。
 ## 2. 产品边界与交互策略
 ### 2.1 支持范围
 第一版仅对 `.md`、`.markdown` 文件显示“AI 全文改写”按钮。
 不支持 PDF、DOCX、HTML、图片和二进制文件；不在改写过程中发起新的联网搜索；超大文件不静默截断后覆盖，而是提示用户选择章节改写。
 ### 2.2 范围、模式和提交策略
 | 入口 | 文本范围 | 管线模式 | 提交策略 | 展示位置 |
 | --- | --- | --- | --- | --- |
 | 编辑器气泡菜单 | 当前选区 | `selection` | `preview_only` | 现有改写预览弹窗 |
 | 编辑器段落菜单 | 当前段落 | `paragraph` | `preview_only` | 现有改写预览弹窗 |
 | 深度研究“改写第一段/章节” | 被解析出的报告片段 | `report_section` | `manual_apply` | 普通消息列表候选稿 + 确认卡 |
 | 文件右上角“AI 全文改写” | 当前完整 Markdown | `document` | `auto_commit_after_validation` | 普通消息列表步骤条 + 右侧沙箱 |
 统一内核中的枚举：
 ~~~python
 class RewriteMode(str, Enum):
    SELECTION = "selection"
    PARAGRAPH = "paragraph"
    REPORT_SECTION = "report_section"
    DOCUMENT = "document"
 class CommitPolicy(str, Enum):
    PREVIEW_ONLY = "preview_only"
    MANUAL_APPLY = "manual_apply"
    AUTO_COMMIT_AFTER_VALIDATION = "auto_commit_after_validation"
 ~~~
 这三类策略必须严格区分：
 - `preview_only`：只生成候选，前端编辑器确认后才改本地 TipTap 文档；不写真实沙箱文件。
 - `manual_apply`：后端保留基准哈希和候选片段，用户点确认后才将该片段应用进研究报告。
 - `auto_commit_after_validation`：全文生成完成并校验通过后，后端进行一次带哈希校验的原子覆盖；同时保存可撤销版本。
 ### 2.3 局部编辑器：保持当前体验
 现有文件：
 - `frontend-web/src/open-canvas/components/artifact/MarkdownAiEditor.tsx`
 - `frontend-web/src/open-canvas/hooks/useWritingRewrite.ts`
 - `frontend-web/src/open-canvas/api/rewrite.ts`
 - `offline-backend-20260512/backend/app/gateway/routers/writing.py`
 局部改写仍然是：
 1. 选中文字或打开段落菜单；
 2. 选择润色、扩写、缩写、改写等动作；
 3. 在现有弹窗中流式出现候选；
 4. 用户手动选择替换、插入、重试或继续追问。
 不要让局部改写每次都往普通消息列表插完整步骤条，否则频繁编辑会淹没聊天历史。它只共享底层管线，不共享全文改写的消息展示方式。
 需要补充本地版本保护：发起请求时保存当前完整编辑器文本哈希、选区 `from/to` 和选区文本；用户点击“替换原文”前再次检查该范围仍匹配。若用户已修改原文，提示“原文已变化，请重新生成候选稿”，禁止将过期候选替换到错误位置。
 ### 2.4 右上角“AI 全文改写”
 宿主文件：
 - `frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx`
 新增独立图标按钮，位置在右上角文件操作区，靠近保存、复制、下载一类操作。它**不能**替代页面中间当前 Sparkles 编辑模式：
 | 控件 | 职责 |
 | --- | --- |
 | 中部 Sparkles/编辑模式 | 打开 `MarkdownAiEditor`，处理选区和段落 |
 | 新增右上角 AI 全文改写 | 对整个 Markdown 发起后台全文重写任务 |
 建议显示条件：
 ~~~ts
 const canUseFullDocumentRewrite =
  isMarkdownFile &&
  canEditArtifact &&
  !isSkillFile &&
  !isMock &&
  !useWriteFileStreaming &&
  !hasLocalEdits;
 ~~~
 若 `hasLocalEdits` 为真，按钮置灰并提示“请先保存当前修改后再进行全文改写”。后端全文任务从真实文件读取快照，不能在用户本地还有未保存修改时读取旧版本并最终覆盖新修改。
 用户体验：
 1. 点击按钮，打开简洁配置弹窗。
 2. 弹窗显示文件名、原文字数；用户填写改写要求、选择模型、选择风格。
 3. 点击开始，左侧普通消息列表创建一组步骤条。
 4. 右侧沙箱自动切到源码视图，先显示“正在准备临时草稿，原文件尚未修改”。
 5. 新 Markdown 从空临时草稿开始逐 token 写入右侧代码区域。
 6. 校验通过后，后端原子替换真实内容；前端再同步真实 Artifact 缓存。
 7. 左侧保留最终对比总结、查看 diff 按钮和撤销按钮。
 任务进行中，同一个文件的保存、直接编辑、局部编辑和再次全文改写必须禁用；其他文件不受影响。
 ### 2.5 深度研究报告的约束
 普通 Markdown 和深度研究报告使用同一管线，但不能使用同一上下文策略：
 | 能力 | 普通沙箱 Markdown | 深度研究 report.md |
 | --- | --- | --- |
 | 输入上下文 | 原文 + 用户指令 | 原文 + 当前会话已选资料 |
 | 联网 | 不联网 | 不联网 |
 | 事实约束 | 不新增无依据事实 | 只能引用已选资料，禁止编造 |
 | 引用校验 | 可选 | 必须校验来源 ID 白名单 |
 | 最终存储 | Artifact 文件 | 研究 session 的 `report_markdown` |
 | 局部改写 | 编辑器确认 | 现有确认卡片 |
 深度研究右侧的 `report.md` 是由 `ResearchSandboxPanel.tsx` 以虚拟 `write_file` 方式展示的；它不能当作普通磁盘 Artifact 直接写入。全文任务必须通过研究 session 更新 `report_markdown`，并使 `report_html` 缓存失效。
 ## 3. 总体架构
 ~~~mermaid
 flowchart LR
  A["MarkdownAiEditor<br/>选区 / 段落"] --> P
  B["ArtifactFileDetail<br/>AI 全文改写"] --> P
  C["DeepResearch<br/>局部 / 全文"] --> P
  P["Document Rewrite Pipeline<br/>冻结版本 → 构造上下文 → 流式生成<br/>校验 → 差异总结 → 按策略提交"]
  P --> I["InlineDocumentSource"]
  P --> F["ArtifactDocumentSource"]
  P --> R["DeepResearchReportSource"]
  P --> E["可恢复 SSE 事件 / Job"]
  E --> L["普通 MessageList"]
  E --> S["右侧沙箱临时草稿"]
  P --> V["内容哈希、版本快照、原子提交"]
 ~~~
 设计原则：
 1. 纯执行内核不依赖 FastAPI、路由、用户身份或操作系统路径。
 2. 鉴权、线程路径解析、研究 session 获取只在 `app` 层的来源适配器中完成。
 3. 完整文档任务使用持久化后台 Job；局部弹窗可维持单次 SSE，避免过度持久化。
 4. 全文流式过程中只写临时草稿；真实内容只在最终 compare-and-swap 成功时改变。
 不要直接把现有完整“AI 写作 Agent”塞进改写按钮。那个流程适合从主题写新文章，可能包含大纲、资料和章节生命周期；本需求是严格以当前文档为基准改写。第一版复用它的流式视觉表达和消息列表能力，但使用专门的文档改写执行内核。
 ## 4. 后端模块设计
 ### 4.1 目录与职责
 建议新增：
 ~~~text
 offline-backend-20260512/backend/
 ├─ packages/harness/deerflow/
 │  ├─ document_rewrite/
 │  │  ├─ __init__.py
 │  │  ├─ models.py                 # 请求、事件、校验、差异领域模型
 │  │  ├─ ports.py                  # Source / Model / Store 协议
 │  │  ├─ pipeline.py               # 统一编排，不导入 app.*
 │  │  ├─ prompt_builder.py          # 普通与深度研究提示词
 │  │  ├─ validation.py              # Markdown / 引用 / 截断检查
 │  │  └─ diff_summary.py            # 字数、标题、块、引用差异
 │  └─ persistence/
 │     └─ document_rewrites/
 │        ├─ base.py
 │        ├─ model.py
 │        └─ sql.py
 ├─ app/gateway/
 │  ├─ routers/document_rewrites.py
 │  ├─ document_rewrite_sources.py
 │  └─ document_rewrite_executor.py
 └─ packages/harness/deerflow/persistence/migrations/versions/
   └─ <next_revision>_document_rewrites.py
 ~~~
 `packages/harness/deerflow/document_rewrite` 不能导入 `app.*`，以符合项目 harness→app import firewall。`app/gateway/document_rewrite_sources.py` 负责把已鉴权的 Artifact/研究会话包装成内核端口。
 ### 4.2 来源端口
 ~~~python
 class DocumentSource(Protocol):
    async def read_snapshot(self) -> DocumentSnapshot: ...
    async def read_current_hash(self) -> str: ...
    async def commit_if_unchanged(
        self,
        *,
        expected_hash: str,
        content: str,
        metadata: CommitMetadata,
    ) -> CommitResult: ...
    async def restore_if_unchanged(
        self,
        *,
        expected_hash: str,
        content: str,
    ) -> CommitResult: ...
 ~~~
 三种实现：
 | 适配器 | 使用场景 | 读取方式 | 提交方式 |
 | --- | --- | --- | --- |
 | `InlineDocumentSource` | 选区/段落候选 | 前端编辑器快照 | 不提交 |
 | `ArtifactDocumentSource` | 普通 Markdown | 复用 Artifact 权限与虚拟路径解析 | 同目录临时文件 + `os.replace` |
 | `DeepResearchReportSource` | 研究报告 | session `report_markdown` + 已选来源 | 数据库哈希条件更新 |
 `ArtifactDocumentSource` 必须复用 `app/gateway/routers/artifacts.py` 中已有的线程访问校验、虚拟路径解析逻辑，绝不允许请求体传入任意本机绝对路径。
 ### 4.3 持久化 Job、事件和版本
 全文改写使用持久化 Job，参考 `app/gateway/deep_research_job_executor.py` 的后台任务、租约、取消监听和事件重放模式。
 #### document_rewrite_jobs
 | 字段 | 作用 |
 | --- | --- |
 | `id` | `drw_xxx` Job ID |
 | `user_id` | 发起人 |
 | `source_kind` | `artifact` / `deep_research_report` |
 | `thread_id`、`artifact_path` | 普通文件来源 |
 | `research_session_id` | 研究报告来源 |
 | `presentation_thread_id` | 普通消息列表归属 |
 | `mode`、`commit_policy` | 范围和提交语义 |
 | `instruction`、`style`、`model_name` | 用户配置 |
 | `base_sha256` | 原文冻结哈希 |
 | `draft_content`、`draft_sha256` | 临时流式草稿 |
 | `status`、`stage` | 生命周期 |
 | `validation_json`、`diff_summary_json` | 可展示结果 |
 | `committed_sha256` | 成功提交后的哈希 |
 | `error_message`、时间字段 | 错误、审计、取消 |
 #### document_rewrite_events
 至少包含 `job_id`、`seq`、`event_type`、`stage`、`payload_json`、`created_at`。`seq` 用于断线重连时通过 `after_seq` 重放。
 不必将每个 token 单独入库：每 250ms 或每积累 4KB 持久化一次 `draft_content`；状态转换、警告、完成、冲突、取消必须立即写事件。重连时先发送最新草稿快照，再发送快照序号后的增量事件。
 #### document_rewrite_versions
 保存真实全文覆盖前的原文版本，字段包含 `job_id`、`source_identity`、`version_no`、`content`、`sha256`、`reason`、`created_at`。初版每个文档保留最近 20 个版本即可。
 索引要求：
 - `(user_id, presentation_thread_id, created_at DESC)`：恢复历史消息。
 - 真实来源标识 + 活跃状态：防止同一文档并行两个全文改写。
 ### 4.4 Job 状态机
 ~~~mermaid
 stateDiagram-v2
  [*] --> queued
  queued --> snapshotting
  snapshotting --> generating
  generating --> validating
  validating --> comparing
  comparing --> committing
  committing --> completed
  completed --> reverted
  queued --> cancelled
  generating --> cancelled
  snapshotting --> failed
  generating --> failed
  validating --> failed
  committing --> conflict
  committing --> failed
 ~~~
 状态约束：
 - 同一真实文档只允许一个活跃 Job。
 - 生成期间取消、异常、断线，真实文档绝不能变化。
 - 提交前重新读取当前哈希；与 `base_sha256` 不一致时进入 `conflict`，草稿保留但不覆盖。
 ### 4.5 API 与 SSE 契约
 创建全文任务：
 ~~~http
 POST /api/document-rewrites
 Content-Type: application/json
 ~~~
 普通 Artifact 请求：
 ~~~json
 {
  "source": {
    "kind": "artifact",
    "thread_id": "thread_xxx",
    "path": "/mnt/user-data/outputs/report.md"
  },
  "presentation_thread_id": "thread_xxx",
  "mode": "document",
  "instruction": "统一为正式行业分析语气，减少重复，不新增外部事实",
  "style": "formal_analysis",
  "model_name": "system_default"
 }
 ~~~
 深度研究请求：
 ~~~json
 {
  "source": {
    "kind": "deep_research_report",
    "session_id": "drs_xxx"
  },
  "presentation_thread_id": "collector_thread_xxx",
  "mode": "document",
  "instruction": "重新组织全文逻辑，保留全部可用引用",
  "style": "formal_analysis",
  "model_name": "system_default"
 }
 ~~~
 其他接口：
 ~~~text
 GET  /api/document-rewrites/{job_id}
 GET  /api/document-rewrites/{job_id}/stream?after_seq=42
 POST /api/document-rewrites/{job_id}/cancel
 POST /api/document-rewrites/{job_id}/undo
 GET  /api/document-rewrites?presentation_thread_id={thread_id}
 ~~~
 SSE 事件：
 | 事件 | 关键数据 | 前端动作 |
 | --- | --- | --- |
 | `job_started` | 文件名、模式 | 建立步骤条 |
 | `snapshot_fixed` | 原文字数、哈希 | 完成“固定原文版本” |
 | `requirements_resolved` | 模型、风格、要求 | 完成“理解改写要求” |
 | `rewrite_delta` | `delta`、累计字符数 | 追加右侧临时草稿 |
 | `validation_started` | 校验项 | 进入校验步骤 |
 | `validation_completed` | passed、warnings | 显示校验结果 |
 | `comparison_ready` | `DiffSummary` | 渲染总结数据 |
 | `commit_started` | 无 | 显示安全替换中 |
 | `committed` | 最终哈希、版本 ID | 刷新真实文件缓存 |
 | `completed` | 完整结果 | 固化历史步骤条 |
 | `conflict` / `error` / `cancelled` | 原因 | 恢复原文显示，不保存草稿 |
 局部改写兼容方案：
 - `POST /api/writing/rewrite` 的请求和 SSE 格式先不变。
 - `writing.py` 内部逐步把 prompt、模型流、基础 Markdown 校验下沉给统一管线的 `preview_only` 分支。
 - 深度研究 `/sessions/{id}/rewrite/stream` 和确认候选接口也先保持 URL、前端行为不变，再内部复用 `manual_apply` 分支。
 这样可以先交付全文改写，不会一次性破坏已有编辑器和深度研究流程。
 ### 4.6 模型、提示词与校验
 管线只依赖一个流式模型端口：
 ~~~python
 class StreamingRewriteModel(Protocol):
    async def stream_text(
        self,
        *,
        messages: list[BaseMessage],
        model_name: str | None,
    ) -> AsyncIterator[TextChunk]: ...
 ~~~
 第一版可以有两个 adapter：
 - 普通文档复用 `writing.py` 的 chat model `astream`；
 - 深度研究复用 `deep_research.py` 使用的 `DeerFlowCompletionBackend.stream_complete`。
 先统一编排，不强制立即统一所有模型配置实现。
 普通 Markdown 系统约束：
 ~~~text
 仅根据原文与用户要求改写，不联网，不补充未给出的事实。
 保留有效链接、代码块、表格、标题语义和用户明确要求保留的内容。
 只输出完整 Markdown 正文；不得输出解释、前缀或“改写如下”。
 ~~~
 深度研究额外约束：
 ~~~text
 不得联网。事实、数字、结论和引用只能来自当前 session 已选资料。
 只允许使用给出的 source_id；资料不足时保持谨慎表述，禁止自行补全。
 ~~~
 校验规则：
 | 类别 | 硬失败 | 告警但允许完成 |
 | --- | --- | --- |
 | 正文 | 空文档、仅空白、无可见内容 | 改写后与原文完全一致 |
 | Markdown | 未闭合围栏、明确截断 | 标题层级跳级、章节数明显减少 |
 | 深度研究来源 | 未选来源 ID、非法引用 | 引用数量下降、可能需核验的数字断言 |
 ## 5. 安全提交、对比与撤销
 ### 5.1 临时草稿不等于真实文件
 用户视觉上看到“先清空再逐 token 写入”，但真实文件的处理必须是：
 1. 读取原文并保存内容哈希、版本快照。
 2. 右侧只展示内存/Job 中的 `draft_content`。
 3. 生成完成后做校验和 diff。
 4. 提交前再次读取真实来源，并比较 `SHA-256`。
 5. 哈希一致才原子替换；否则进入冲突，不覆盖。
 普通 Artifact 使用同目录临时文件、刷盘和 `os.replace`；深度研究通过数据库事务内的“旧哈希条件更新”提交。任何失败、取消或断流都保留真实原文。
 ### 5.2 撤销
 撤销流程：
 1. 读取该 Job 的 `before_full_rewrite` 快照。
 2. 确认当前真实内容哈希仍等于该 Job 的 `committed_sha256`。
 3. 若用户在改写后又手工编辑，返回冲突，不盲目覆盖。
 4. 先保存当前内容为 `before_undo` 版本。
 5. 原子恢复旧版本，Job 状态改为 `reverted`，消息列表卡片同步显示“已撤销”。
 ### 5.3 结构化 DiffSummary
 后端产出结构化差异，前端仅渲染，避免生成空泛结论：
 ~~~ts
 type DiffSummary = {
  sourceDisplayName: string;
  instruction: string;
  modelName: string;
  originalCharCount: number;
  rewrittenCharCount: number;
  charChangeRatio: number;
  changedBlockCount: number;
  headings: {
    added: string[];
    removed: string[];
    reordered: string[];
    levelWarnings: string[];
  };
  citations?: {
    beforeCount: number;
    afterCount: number;
    retainedCount: number;
    removedIds: string[];
    invalidIds: string[];
  };
  requestedOptimizations: string[];
  validationWarnings: string[];
 };
 ~~~
 推荐总结展示：
 ~~~text
 已完成《新能源汽车市场分析报告》的整体改写。
 - 改写范围：全文；要求为“统一正式分析语气、减少重复”；模型：默认模型。
 - 数量变化：原文 8,260 字，改写后 8,110 字，减少 1.8%；调整 14 个内容块。
 - 结构变化：标题层级保持不变；未新增或删除一级标题。
 - 已执行的优化：按要求合并重复表述、统一语气、调整段落衔接。
 - 保留情况：保留 35 条已选来源引用，未新增外部来源。
 - 风险提示：无。
 [查看前后对比] [撤销到改写前版本]
 ~~~
 “已执行的优化”仅来自用户要求和可计算的结构差异；不能无依据宣称“文章更专业、更严谨”。
 ## 6. 前端实现设计
 ### 6.1 新增模块
 ~~~text
 frontend-web/src/core/document-rewrite/
 ├─ types.ts
 ├─ api.ts
 ├─ sse.ts
 ├─ use-document-rewrite-job.ts
 ├─ document-rewrite-provider.tsx
 └─ document-rewrite-presentation.ts
 frontend-web/src/components/workspace/document-rewrite/
 ├─ DocumentRewriteDialog.tsx
 ├─ DocumentRewriteProgressStep.tsx
 ├─ DocumentRewriteSummaryCard.tsx
 └─ DocumentDiffDialog.tsx
 ~~~
 职责：
 | 模块 | 职责 |
 | --- | --- |
 | `api.ts` | 创建、查询、取消、撤销 Job |
 | `sse.ts` | SSE 解析、`after_seq` 重连 |
 | `use-document-rewrite-job.ts` | Job 状态、草稿、rAF 合并 token |
 | Provider | 同时向文件面板与消息列表提供同一任务状态 |
 | `DocumentRewriteDialog` | 改写要求、模型、风格配置 |
 | ProgressStep | 普通消息列表内的五步步骤条 |
 | SummaryCard | 结构化总结、diff、撤销动作 |
 | DiffDialog | 原文与改写后双栏/行级对比 |
 模型选择使用项目已有的 `tdesign-react` 选择组件，放在全文改写配置弹窗中；局部编辑器保留当前模型传递方式，后续再统一选择器。
 ### 6.2 流式平滑：每帧合并 delta
 不能因为 SSE 是 token 流就每 token 调一次 `setState`。应当网络层完整读取、渲染层按动画帧合并：
 ~~~ts
 const pendingDeltaRef = useRef("");
 const frameRef = useRef<number | null>(null);
 function onRewriteDelta(delta: string) {
  pendingDeltaRef.current += delta;
  if (frameRef.current !== null) return;
  frameRef.current = requestAnimationFrame(() => {
    const pending = pendingDeltaRef.current;
    pendingDeltaRef.current = "";
    frameRef.current = null;
    setDraftContent((previous) => previous + pending);
  });
 }
 ~~~
 完成、失败、取消前必须 flush 最后一段缓存。右侧代码编辑器只消费 `draftContent`；真实 Artifact 查询缓存直到 `committed` 事件才更新。
 ### 6.3 ArtifactFileDetail 改造
 在 `artifact-file-detail.tsx` 增加：
 ~~~ts
 type DocumentRewriteTarget =
  | {
      kind: "artifact";
      threadId: string;
      path: string;
      presentationThreadId: string;
    }
  | {
      kind: "deep_research_report";
      sessionId: string;
      presentationThreadId: string;
    };
 ~~~
 改造步骤：
 1. 加入右上角全文改写图标按钮和 `DocumentRewriteDialog`。
 2. 有活跃任务时强制 `viewMode = "code"`。
 3. 内容优先级为：`activeRewrite.draftContent ?? draftContent ?? artifactContent`。
 4. 活跃任务中代码只读，禁用保存、局部编辑和重复全文改写。
 5. 收到 `committed` 后用现有 `useUpdateArtifactContent` 或等价 Query cache 更新，使真实文件立即同步。
 6. 收到 `conflict/error/cancelled` 时废弃临时草稿显示，回到真实文件内容。
 ### 6.4 ResearchSandboxPanel 接入
 相关文件：
 - `frontend-web/src/pages/deep-research/ResearchSandboxPanel.tsx`
 - `frontend-web/src/pages/deep-research/useReportSandbox.ts`
 - `frontend-web/src/pages/deep-research/DeepResearchWorkbench.tsx`
 改造：
 1. `ResearchSandboxPanel` 为虚拟 `report.md` 传入 `kind: "deep_research_report"` target。
 2. `useReportSandbox` 接受 `externalDraftOverride`：
 ~~~ts
 const visibleReport = activeDocumentRewrite?.isActive
  ? activeDocumentRewrite.draftContent
  : reportMarkdown;
 ~~~
 3. 流式期间只显示临时草稿，不提前写 session 报告。
 4. `committed` 后刷新/替换 session 的 `report_markdown`；失败后恢复旧报告。
 5. 当前“改写第一段 → 候选消息 → 确认应用”逻辑继续保留，不因全文改写而改变。
 ### 6.5 普通消息列表接入
 复用：
 - `frontend-web/src/components/workspace/messages/message-list.tsx`
 - `frontend-web/src/components/workspace/messages/MessageGroup.tsx`
 - `DeepResearchWorkbench.tsx` 中的虚拟消息注入模式。
 `DocumentRewritePresentationProvider` 按 `presentation_thread_id` 读取 Job 历史并投影为：
 1. 用户消息：“AI 全文改写《xxx.md》”；
 2. AI 工具调用：`document_rewrite_progress`；
 3. AI 富消息：`document_rewrite_summary`。
 `MessageGroup.tsx` 增加 `document_rewrite_progress` 分支，渲染 `DocumentRewriteProgressStep`。最终摘要渲染 `DocumentRewriteSummaryCard`，其内含“查看前后对比”和“撤销”。
 全文步骤固定为：
 | 步骤 | 展示内容 |
 | --- | --- |
 | 固定原文版本 | 文件名、原文字数、快照已保存 |
 | 理解改写要求 | 改写目标、模型、风格 |
 | 流式重写 Markdown | 正在写入右侧 xxx.md、累计字数 |
 | 校验文档 | 非空、标题、围栏、截断；报告还含来源检查 |
 | 对比原文并生成说明 | 差异、风险、撤销入口 |
 步骤条必须在完成后保留，不能因为流结束被隐藏。
 ## 7. 核心执行伪代码
 ~~~python
 async def run_document_rewrite(job_id: str) -> None:
    job = await jobs.acquire_lease(job_id)
    source = source_factory.create(job)  # 已完成鉴权的来源适配器
    await emit("snapshotting")
    snapshot = await source.read_snapshot()
    base_hash = sha256(snapshot.content)
    await jobs.freeze_snapshot(job_id, snapshot, base_hash)
    await emit("snapshot_fixed", char_count=count_chars(snapshot.content))
    messages = prompt_builder.build(
        mode=job.mode,
        source_kind=job.source_kind,
        original=snapshot.content,
        instruction=job.instruction,
        style=job.style,
        research_sources=snapshot.allowed_sources,
    )
    await emit("requirements_resolved", ...)
    draft = ""
    async for chunk in model.stream_text(messages=messages, model_name=job.model_name):
        if await jobs.cancel_requested(job_id):
            await jobs.mark_cancelled(job_id)
            await emit("cancelled")
            return
        draft += chunk.text
        await jobs.append_draft_periodically(job_id, draft)
        await emit("rewrite_delta", delta=chunk.text)
    await emit("validation_started")
    validation = validate_markdown(
        draft,
        source_kind=job.source_kind,
        allowed_citations=snapshot.allowed_citation_ids,
    )
    if validation.has_fatal_error:
        await jobs.mark_failed(job_id, validation.message)
        await emit("error", ...)
        return
    await emit("validation_completed", ...)
    diff = build_diff_summary(snapshot.content, draft, validation)
    await jobs.save_diff(job_id, diff)
    await emit("comparison_ready", diff)
    if job.commit_policy != AUTO_COMMIT_AFTER_VALIDATION:
        await jobs.mark_candidate_ready(job_id)
        return
    await emit("commit_started")
    await versions.save_before_rewrite(job, snapshot)
    result = await source.commit_if_unchanged(
        expected_hash=base_hash,
        content=draft,
        metadata=CommitMetadata(job_id=job_id),
    )
    if not result.ok:
        await jobs.mark_conflict(job_id)
        await emit("conflict", ...)
        return
    await jobs.mark_completed(job_id, result.sha256)
    await emit("committed", ...)
    await emit("completed", diff)
 ~~~
 ## 8. 实施顺序
 ### 阶段 A：后端内核与安全基础
 1. 新增领域模型、来源端口、校验、确定性 diff。
 2. 新增 Job、事件、版本数据表与 migration。
 3. 参考深度研究 executor 完成后台任务、取消、SSE 重放。
 4. 实现普通 Artifact 读取、哈希比较、原子提交和撤销 API。
 5. 编写接口测试。
 验收：可以通过 API 对普通 Markdown 创建全文任务；取消、失败、冲突均不改原文件；成功后可撤销。
 ### 阶段 B：普通沙箱全文 UI
 1. 新增 `core/document-rewrite` 前端状态、SSE、rAF hook。
 2. 改 `ArtifactFileDetail`：右上角按钮、配置弹窗、临时草稿、禁用态。
 3. 接入普通 `MessageList` 的步骤条、总结卡、diff 和撤销。
 4. 支持刷新后恢复 Job 状态与已完成历史。
 验收：右侧可平滑逐 token 写入；完成后替换真实 Markdown；左侧步骤和总结保留；撤销成功恢复。
 ### 阶段 C：深度研究接入
 1. 实现 `DeepResearchReportSource`。
 2. 由 `ResearchSandboxPanel` 传入报告 target。
 3. `useReportSandbox` 支持外部临时草稿。
 4. 对深度研究添加引用白名单校验。
 5. 保持现有报告局部候选确认卡不变，再逐步下沉公共 prompt/校验逻辑。
 验收：报告全文改写不触发联网搜索，不允许新来源；局部报告改写依然先确认再应用。
 ### 阶段 D：局部改写内核迁移
 1. 保持 `/api/writing/rewrite` 契约不变。
 2. 将 `writing.py` 转为 `InlineDocumentSource + preview_only` 的兼容 facade。
 3. 给 `useWritingRewrite` 增加原文快照失效检查。
 4. 回归替换、插入、重试、继续追问。
 ## 9. 测试与验收
 建议新增后端测试：
 ~~~text
 offline-backend-20260512/backend/tests/
 ├─ test_document_rewrite_pipeline.py
 ├─ test_document_rewrite_api.py
 ├─ test_document_rewrite_versions.py
 └─ test_document_rewrite_deep_research.py
 ~~~
 必须覆盖：
 - Job 状态、SSE 顺序和断线恢复；
 - 空输出、围栏不闭合、截断、非法深度研究引用；
 - 同一文件并发任务；
 - 提交前手工修改导致的冲突；
 - 取消/异常不改真实文件；
 - 正常撤销、撤销前手工编辑导致的冲突；
 - 旧 `/api/writing/rewrite`、深度研究 `/rewrite/stream` 兼容回归。
 前端必须覆盖：
 - 多个 delta 在一帧合并，最终内容不丢失；
 - `committed` 前 Artifact 缓存不被临时草稿污染；
 - 失败/取消/冲突后右侧恢复原文；
 - 活跃任务禁用同文件编辑、保存、重复改写；
 - 刷新后历史步骤条与总结仍存在；
 - 深度研究虚拟 `report.md` 可用全文改写；
 - 局部编辑器原文变化后不能应用过期候选。
 执行基线：
 ~~~powershell
 cd offline-backend-20260512/backend
 $env:PYTHONPATH = "."
 uv run --no-sync pytest tests/test_document_rewrite_pipeline.py -v
 uv run --no-sync pytest tests/test_document_rewrite_api.py -v
 uv run --no-sync ruff check app packages/harness
 cd ../../frontend-web
 pnpm typecheck
 pnpm build
 ~~~
 ## 10. 风险控制
 | 风险 | 控制措施 |
 | --- | --- |
 | 用户误以为真实文件已经清空 | 明确显示“临时草稿，原文件尚未修改” |
 | 流式显示仍然卡顿 | 网络完整读取 + `requestAnimationFrame` 合并渲染 |
 | 改写中用户手动编辑 | `SHA-256` compare-and-swap，冲突即拒绝覆盖 |
 | 输出 Markdown 不完整 | 非空、围栏、截断和标题检查 |
 | 深度研究幻觉 | 来源白名单、禁止联网、引用 ID 校验 |
 | 文档过大 | 第一版拒绝并提示按章节改写，不隐式截断 |
 | 局部编辑污染聊天历史 | 局部只在编辑器弹窗展示，不创建完整步骤条 |
 | 历史记录只存在浏览器内存 | 全文 Job/Event/Diff 持久化，按展示线程恢复 |
 ## 11. 复用点清单
 | 现有实现 | 在新方案中的用途 |
 | --- | --- |
 | `MarkdownAiEditor.tsx` | 保留局部编辑菜单、预览弹窗、确认动作 |
 | `useWritingRewrite.ts` | 保留局部流控制，增加快照失效保护 |
 | `open-canvas/api/rewrite.ts` | 保持兼容，逐步接入统一内核 |
 | `routers/writing.py` | 复用当前模型流式读取，抽取 prompt/流逻辑 |
 | `routers/deep_research.py` | 复用报告来源、哈希候选、来源约束 |
 | `deep_research_job_executor.py` | 复用后台 Job、取消、事件重放模式 |
 | `artifact-file-detail.tsx` | 复用沙箱文件操作、代码/预览、缓存同步 |
 | `useUpdateArtifactContent` | 完成后更新普通 Artifact 缓存 |
 | `ResearchSandboxPanel.tsx` | 复用研究报告的右侧沙箱宿主 |
 | `useReportSandbox.ts` | 加入临时草稿覆盖显示 |
 | `MessageList.tsx / MessageGroup.tsx` | 复用普通消息步骤条、总结消息、文件卡片能力 |
 | `DeepResearchWorkbench.tsx` | 复用向普通消息列表投影过程事件的模式 |
 ## 12. 完成定义
 完成后应满足：
 1. 局部编辑依旧是编辑器弹窗中的人工确认操作。
 2. 全文改写在普通消息列表展示完整且不隐藏的步骤条。
 3. 右侧沙箱可平滑地逐 token 展示临时 Markdown 草稿。
 4. 任何中断、取消、校验失败和冲突都不损坏真实文件。
 5. 完成后用户可以看到量化差异、结构变化、来源保留和风险提示。
 6. 普通 Markdown 与深度研究报告都可全文改写，但研究报告绝不绕过已选来源约束。
 7. 每一次真实全文覆盖都有版本快照，并且能够安全撤销。
@@ -1,25 +1,25 @@
-<!doctype html>
+<!doctype html>
-<html lang="en-US" suppressHydrationWarning>
+<html lang="en-US" suppressHydrationWarning>
-  <head>
+  <head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8" />
-    <script>
+    <script>
-      (function () {
+      (function () {
-        try {
+        try {
-          var t = localStorage.getItem("strategy-theme");
+          var t = localStorage.getItem("strategy-theme");
-          var root = document.documentElement;
+          var root = document.documentElement;
-          root.classList.remove("dark", "light");
+          root.classList.remove("dark", "light");
-          if (t === "light") return;
+          if (t === "light") return;
-          root.classList.add("dark");
+          root.classList.add("dark");
-        } catch (e) {}
+        } catch (e) {}
-      })();
+      })();
-    </script>
+    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>CM 助手</title>
    <script src="/runtime-config.js" data-runtime-config></script>
  </head>
-  <body>
+  <body>
-    <div id="root"></div>
+    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
-  </body>
+  </body>
-  </html>
+  </html>
@@ -11,6 +11,7 @@
    "build:network": "node --max-old-space-size=8192 ./node_modules/vite/bin/vite.js build --mode network",
    "preview": "vite preview",
    "typecheck": "tsc --noEmit",
    "test:report-collaboration": "npx esbuild src/report-collaboration/tests/event-reducer.test.ts --bundle --platform=node --format=esm --outfile=.runtime/unit-tests/event-reducer.test.mjs && npx esbuild src/report-collaboration/tests/message-adapter.test.ts --bundle --platform=node --format=esm --outfile=.runtime/unit-tests/message-adapter.test.mjs && node --test .runtime/unit-tests/event-reducer.test.mjs .runtime/unit-tests/message-adapter.test.mjs",
    "check:chrome109-css": "node scripts/check-chrome109-css.mjs",
    "check:legacy-chrome-css": "node scripts/check-chrome109-css.mjs"
  },
@@ -32,10 +32,10 @@ window.__CM_RUNTIME_CONFIG__ = {
  VITE_BRAND_WELCOME_DARK_URL: "",
  // DeerFlow Gateway 地址：前端自有后端接口，例如 /api/agents、/api/auth、/api/threads 等。
-  // VITE_BACKEND_BASE_URL: "http://10.19.200.5:2026",
+  // VITE_BACKEND_BASE_URL: "https://ch1.b.uat.4.cn/deerflow",
  // LangGraph 流式对话接口地址：普通问答、智能体对话等流式能力使用。
-  // VITE_LANGGRAPH_BASE_URL: "http://10.19.200.5:2026/api",
+  // VITE_LANGGRAPH_BASE_URL: "https://ch1.b.uat.4.cn/deerflow/api",
  // Canvas/AI 写作独立 LangGraph 地址：为空时前端会回退使用 VITE_LANGGRAPH_BASE_URL。
  VITE_CANVAS_LANGGRAPH_BASE_URL: "",
@@ -50,6 +50,19 @@ window.__CM_RUNTIME_CONFIG__ = {
  // CMZS 后端接口：任务管理、任务分析、三情分析、行动分析等业务接口。
  VITE_API_BASE_URL: "https://ch1.b.uat.4.cn/zncm",
  // 8BF 嵌入页专用任务系统接口。部署到其他系统时只需修改这一项，
  // 不影响原多智能体会商使用的任务详情接口。
  VITE_8BF_TASK_API_BASE_URL: "https://ch1.b.uat.4.cn/zl_consumer",
  // 8BF 会商页右上角「返回」按钮的跳转地址（当前窗口 window.location.href）。
  // 部署后直接改 dist/runtime-config.js 即可，无需重新打包。留空则点击时提示未配置。
  VITE_8BF_ROUNDTABLE_BACK_URL: "",
  // 任务深链「宿主路由」按钮的 postMessage targetOrigin（HOST_NAVIGATE）。
  // 填宿主系统 origin，例如 https://localhost:4912；生产改成他们线上地址。
  // 留空时尝试用 iframe 的 ancestorOrigins / referrer 自动探测，探测失败则不发送。
  VITE_HOST_NAVIGATE_ORIGIN: "",
  // 佳来模型对话接口。
  VITE_AIPI_CHAT_URL: "https://ch1.b.uat.4.cn/gpt",
@@ -90,7 +103,7 @@ window.__CM_RUNTIME_CONFIG__ = {
  VITE_AIPI_FRONTEND_URL: "http://47.88.25.99:3000",
  // Consumer 接口：深链任务详情 cop-task-detail、研判情报报告 selectSqReport 等使用。
-  VITE_AIPI_CONSUMER_URL: "http://10.19.200.5:8002/consumer",
+  VITE_AIPI_CONSUMER_URL: "https://ch1.b.uat.4.cn/consumer",
  // A 系统跳转地址：人物、组织、事件等列表项打开链接使用。
  VITE_AIPI_PRESENT_URL: "http://present.a.uat.4.cn/present/domain",
@@ -130,6 +143,25 @@ window.__CM_RUNTIME_CONFIG__ = {
  // 隐藏系统 Logo、换肤按钮以及“全量/简洁模式”切换。修改后刷新页面即可生效。
  VITE_FORCE_COLLAPSED_SIDEBAR: "false",
  // 简介模式左侧菜单类型：与菜单管理页「简介模式」里的类型 A / B 对应。
  // 两套网页部署时分别填 "A" 或 "B"。不填、留空、或旧配置没有这一项，都按类型 A，
  // 继续读取原来的简介菜单数据，无需改旧页面。
  VITE_COMPACT_MENU_TYPE: "A",
  // GitHub OAuth Token；不使用 GitHub 相关能力时留空。
  VITE_GITHUB_OAUTH_TOKEN: "",
  // 是否在智能体管理页显示「舆情分析」类型："true" 显示，"false" 隐藏。
  // 关闭后，该智能体的专用对话地址也会自动跳回智能体管理页。
  VITE_SENTIMENT_AGENT_VISIBLE: "true",
  // 舆情分析智能体：外部流式问答接口地址（POST，SSE 流式返回）。
  // 前端会把该地址随请求传给后台转发。留空时该智能体对话页会提示未配置。
  VITE_SENTIMENT_AGENT_API_URL: "http://alg.gw.y.uat.cn/a6_report_agent/alg/stream/report-agent",
  // 舆情分析智能体：请求头 Authorization Basic Auth 用户名。
  VITE_SENTIMENT_AGENT_AUTH_USERNAME: "1054841959975223296",
  // 舆情分析智能体：请求头 Authorization Basic Auth 密码。
  VITE_SENTIMENT_AGENT_AUTH_PASSWORD: "LzqqMTUxMTIwMjQxNjQ2MjY5MDUduC",
 };
@@ -31,6 +31,16 @@ const requiredLegacyFallbacks = [
    pattern: /<InputGroup className="h-auto min-h-16">/,
    description: "Prompt textarea must not rely on :has() for its parent height",
  },
  {
    file: "src/core/utils/mermaid.ts",
    pattern: /htmlLabels:\s*false[\s\S]*secure:\s*\[[\s\S]*"htmlLabels"/,
    description: "Sandbox flowcharts must use native SVG labels in legacy browsers",
  },
  {
    file: "src/core/utils/legacy-html-preview.ts",
    pattern: /export function downlevelModernColors[\s\S]*function injectLegacyChartShim/,
    description: "Generated HTML charts must downlevel modern CSS colors for Chrome 109",
  },
 ];
 for (const file of cssFiles) {
@@ -38,14 +38,21 @@ import EmbedChatPage from "./pages/EmbedChatPage";
 import EmbedRoundtablePage from "./pages/EmbedRoundtablePage";
 import DashboardStandalonePage from "@/roundtable-planning/pages/DashboardStandalonePage";
 import PositionRoundtablePage from "@/position-roundtable/pages/PositionRoundtablePage";
 import WeKnoraWikiPageView from "@/strategy-components/components/resource-management/llmwiki/WeKnoraWikiPageView";
 import {
  isPositionRoundtableStandaloneMode,
  POSITION_ROUNDTABLE_ROUTE,
 } from "@/position-roundtable/demo/position-roundtable-demo-config";
 import { ChatRuntime } from "./pages/WorkspaceRoutes";
 import { NotFoundPage } from "./pages/NotFoundPage";
 import OfficialDeerFlowEntry from "./pages/OfficialDeerFlowEntry";
-const PUBLIC_EMBED_PREFIXES = ["/share/", "/public/", "/roundtable-share/"];
+const PUBLIC_EMBED_PREFIXES = [
  "/share/",
  "/public/",
  "/roundtable-share/",
  "/embed/knowledge/",
 ];
 function AppProviders({ children }: { children: React.ReactNode }) {
  const locale = useMemo(() => detectLocale(), []);
@@ -102,16 +109,17 @@ function AppProviders({ children }: { children: React.ReactNode }) {
      forcedTheme={forcedTheme}
    >
      <QueryClientProvider>
-        <I18nProvider initialLocale={locale}>
+        <AuthSyncWatcher disabled={positionStandaloneMode}>
-          <ThemeProvider>
+          <I18nProvider initialLocale={locale}>
-            <ChatProvider>
+            <ThemeProvider>
-              {!positionStandaloneMode && <AuthSyncWatcher />}
+              <ChatProvider>
-              {!positionStandaloneMode && <DesensitizeWordsLoader />}
+                {!positionStandaloneMode && <DesensitizeWordsLoader />}
-              <FontScaleApplier />
+                <FontScaleApplier />
-              {children}
+                {children}
-            </ChatProvider>
+              </ChatProvider>
-          </ThemeProvider>
+            </ThemeProvider>
-        </I18nProvider>
+          </I18nProvider>
        </AuthSyncWatcher>
      </QueryClientProvider>
    </NextThemesProvider>
  );
@@ -188,10 +196,15 @@ export function App() {
            }
          />
          <Route path="/embed/roundtable" element={<EmbedRoundtablePage />} />
          <Route
            path="/embed/knowledge/:noteId"
            element={<WeKnoraWikiPageView publicEmbed />}
          />
          <Route
            path="/roundtable-dashboard"
            element={<DashboardStandalonePage />}
          />
          <Route path="/official/*" element={<OfficialDeerFlowEntry />} />
          <Route path="/page/*" element={pageElement} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
@@ -0,0 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2064"
  height="2591" viewBox="0 0 2064 2591">
  <path fill-rule="nonzero"
    d="M 68.582031 0 C 66.890625 0 65.300781 1 64.617188 2.640625 C 49.46875 38.800781 33.71875 76.199219 33.628906 106.539062 C 33.550781 134.230469 46.445312 155.730469 59.949219 175.71875 L 59.949219 175.730469 C 52.414062 175.671875 44.992188 175.371094 37.472656 174.171875 C 27.210938 172.53125 16.585938 169.199219 5.585938 165.738281 C 5.15625 165.609375 4.722656 165.539062 4.296875 165.539062 C 2.824219 165.539062 1.417969 166.300781 0.625 167.609375 C -0.402344 169.300781 -0.140625 171.46875 1.257812 172.871094 L 1.261719 172.878906 C 11.230469 182.871094 21.8125 193.53125 36.980469 200.050781 C 51.5625 206.320312 70.167969 208.628906 88.085938 210.78125 L 88.027344 210.78125 C 127.152344 253.410156 166.617188 296.300781 215.761719 334.941406 C 230.558594 346.578125 246.292969 357.878906 261.785156 369 C 277.171875 380.050781 292.441406 391.011719 306.660156 402.191406 C 326.132812 417.511719 343.5625 433.179688 356.773438 450.019531 C 377.808594 476.828125 388.449219 506.960938 395.4375 538.628906 L 395.4375 538.640625 C 372.683594 510.710938 349.328125 483.929688 324.855469 469.339844 C 295.957031 452.121094 265.800781 452 236.960938 451.808594 L 236.933594 451.820312 C 235.792969 451.808594 234.707031 452.261719 233.898438 453.070312 C 233.085938 453.871094 232.632812 454.96875 232.636719 456.121094 C 232.722656 494.011719 232.699219 533.539062 256.304688 567.480469 C 279.351562 600.621094 324.738281 628.019531 369.191406 654.679688 L 369.132812 654.691406 C 371.476562 683.539062 373.40625 710.691406 367.109375 728.03125 C 365.828125 731.558594 364.191406 734.71875 362.058594 738.820312 C 358.910156 744.871094 354.964844 752.441406 350.417969 764.960938 C 342.890625 785.699219 333.769531 819.839844 323.648438 883.109375 C 303.347656 1010.019531 278.722656 1255.949219 308.882812 1409.269531 C 326.265625 1497.660156 361.828125 1555.210938 393.511719 1606.519531 C 417.042969 1644.632812 438.207031 1678.960938 448.835938 1720.09375 C 466.921875 1790.089844 454.648438 1880.246094 444.5 1954.386719 C 440.613281 1982.78125 437.042969 2008.839844 435.726562 2030.261719 C 433.410156 2067.929688 438.066406 2091.179688 442.304688 2112.347656 L 442.304688 2112.355469 C 445.910156 2130.347656 449.152344 2146.589844 447.757812 2169.28125 C 447.429688 2174.613281 446.835938 2180.359375 445.933594 2186.535156 L 445.933594 2186.542969 C 436.582031 2250.328125 393.613281 2362.808594 362.105469 2416.636719 C 339.761719 2454.804688 323.546875 2462.851562 309.597656 2469.925781 C 303.980469 2472.777344 298.261719 2475.660156 292.691406 2480.238281 C 273.378906 2496.113281 256.457031 2532.078125 240.183594 2566.417969 C 239.578125 2567.703125 239.640625 2569.203125 240.363281 2570.429688 C 241.082031 2571.65625 242.359375 2572.449219 243.777344 2572.542969 L 243.789062 2572.542969 L 243.882812 2572.550781 L 243.882812 2572.554688 C 261.582031 2573.746094 279.460938 2574.957031 296.386719 2574.957031 C 323.671875 2574.957031 349.332031 2571.84375 368.355469 2559.785156 C 392.640625 2544.394531 405.109375 2514.960938 414.488281 2493.074219 C 417.011719 2487.183594 419.289062 2481.871094 421.546875 2477.308594 C 432.054688 2456.039062 441.753906 2451.664062 451.855469 2446.960938 C 453.054688 2446.402344 453.929688 2445.320312 454.226562 2444.042969 L 454.238281 2443.996094 L 454.238281 2443.988281 C 476.210938 2348.800781 498.035156 2254.347656 524.300781 2196.363281 L 524.300781 2196.367188 C 536.363281 2169.730469 549.363281 2150.796875 562.695312 2131.402344 C 576.28125 2111.625 590.1875 2091.402344 603.300781 2062.445312 L 603.304688 2062.453125 C 605.183594 2058.292969 607.054688 2053.949219 608.894531 2049.421875 C 625.066406 2009.675781 639.746094 1954.289062 653.585938 1902.101562 C 663.0625 1866.367188 672.15625 1832.09375 681.085938 1805.085938 C 699.308594 1749.992188 716.863281 1725.09375 734.371094 1705.144531 L 734.421875 1705.148438 C 727.285156 1740.746094 721.597656 1776.628906 729.320312 1807.472656 C 733.351562 1823.570312 740.996094 1838.160156 749.066406 1853.613281 C 758.828125 1872.296875 769.433594 1892.636719 776.359375 1919.675781 C 783.289062 1946.71875 786.574219 1980.605469 789.527344 2011.140625 L 789.527344 2011.148438 C 791.875 2035.402344 794.023438 2057.78125 797.746094 2072.316406 L 797.746094 2072.320312 C 797.929688 2073.023438 798.128906 2073.769531 798.316406 2074.441406 L 798.320312 2074.441406 C 802.132812 2087.941406 807.617188 2093.914062 813.515625 2100.324219 C 821.132812 2108.597656 830.351562 2118.441406 839.742188 2151.671875 L 839.738281 2151.675781 C 840.105469 2152.96875 840.402344 2154.039062 840.765625 2155.398438 C 857.484375 2217.601562 874.097656 2354.589844 872.078125 2423.390625 C 870.472656 2478.15625 857.140625 2488.390625 845.339844 2498.136719 C 842.320312 2500.632812 839.085938 2503.296875 836.09375 2506.566406 C 820.847656 2523.230469 812.652344 2554.886719 804.800781 2584.753906 C 804.457031 2586.0625 804.75 2587.453125 805.589844 2588.515625 C 806.40625 Line truncated
 </svg>
@@ -0,0 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none" aria-hidden="true">
  <path d="M13 6H1.5M1.5 6L6.2 1.4M1.5 6L6.2 10.6" stroke="#A2E1F9" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M24.036,10l-.012,9.333" transform="translate(-16.016 -6.667)"/><path class="b" d="M10,24h9.333" transform="translate(-6.667 -16)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36"><defs><style>.a,.d{fill:#fff;}.a{opacity:0;}.b{fill:#da2331;}.c{fill:#0a54cf;}.e{fill:#1677ff;}.f{fill:#1e2433;}.g{fill:#10d6ff;}.h{fill:#ff8181;}.i{fill:none;stroke:#10d6ff;stroke-linecap:round;stroke-linejoin:round;}.j{filter:url(#d);}.k{filter:url(#a);}</style><filter id="a"><feOffset dx="4" input="SourceAlpha"/><feGaussianBlur stdDeviation="1" result="b"/><feFlood flood-opacity="0.161" result="c"/><feComposite operator="out" in="SourceGraphic" in2="b"/><feComposite operator="in" in="c"/><feComposite operator="in" in2="SourceGraphic"/></filter><filter id="d"><feOffset dx="-4" input="SourceAlpha"/><feGaussianBlur stdDeviation="1" result="e"/><feFlood flood-opacity="0.161" result="f"/><feComposite operator="out" in="SourceGraphic" in2="e"/><feComposite operator="in" in="f"/><feComposite operator="in" in2="SourceGraphic"/></filter></defs><g transform="translate(0 -1)"><rect class="a" width="36" height="36" transform="translate(0 1)"/><path class="b" d="M23.5,14.75a1.5,1.5,0,0,1-1.5-1.5V9.5a1.5,1.5,0,1,1,3,0v3.75A1.5,1.5,0,0,1,23.5,14.75Z" transform="translate(-5.5 -1)"/><g data-type="innerShadowGroup"><path class="c" d="M-2-2H1C3.206-2,5-.532,5,1.273V3.727C5,5.532,3.206,7,1,7H-2Z" transform="translate(28.66 19.541)"/><g class="k" transform="matrix(1, 0, 0, 1, 0, 1)"><path class="d" d="M-2-2H1C3.206-2,5-.532,5,1.273V3.727C5,5.532,3.206,7,1,7H-2Z" transform="translate(28.66 18.54)"/></g></g><g data-type="innerShadowGroup"><path class="c" d="M5-2H2C-.206-2-2-.532-2,1.273V3.727C-2,5.532-.206,7,2,7H5Z" transform="translate(4.34 19.541)"/><g class="j" transform="matrix(1, 0, 0, 1, 0, 1)"><path class="d" d="M5-2H2C-.206-2-2-.532-2,1.273V3.727C-2,5.532-.206,7,2,7H5Z" transform="translate(4.34 18.54)"/></g></g><path class="e" d="M5.5-2H16a7.508,7.508,0,0,1,7.5,7.5V13A7.508,7.508,0,0,1,16,20.5H5.5A7.508,7.508,0,0,1-2,13V5.5A7.508,7.508,0,0,1,5.5-2Z" transform="translate(7.25 13.5)"/><path class="f" d="M5.25,0h9A5.25,5.25,0,0,1,19.5,5.25V7.5a5.25,5.25,0,0,1-5.25,5.25h-9A5.25,5.25,0,0,1,0,7.5V5.25A5.25,5.25,0,0,1,5.25,0Z" transform="translate(8.25 15.25)"/><circle class="g" cx="1.5" cy="1.5" r="1.5" transform="translate(21 19)"/><circle class="g" cx="1.5" cy="1.5" r="1.5" transform="translate(12 19)"/><path class="d" d="M24,10v3.75" transform="translate(-6 -1.5)"/><circle class="h" cx="3" cy="3" r="3" transform="translate(15 4)"/><path class="i" d="M44,28.667a3.367,3.367,0,0,0,1.922.412,2.841,2.841,0,0,0,1.828-.412" transform="translate(-27.875 -5.017)"/></g></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><defs><style>.a{fill:#fff;opacity:0;}.b,.c{fill:none;stroke:#006efe;stroke-width:6px;}.b{stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(0 1)"><rect class="a" width="96" height="96" transform="translate(0 -1)"/><path class="b" d="M47,67H38L18,77V67H4V7H84V29" transform="translate(4 8)"/><circle class="c" cx="12" cy="12" r="12" transform="translate(56 45)"/><path class="b" d="M39,32l10,8" transform="translate(39 33)"/><path class="b" d="M12,15H24" transform="translate(12 16)"/><path class="b" d="M12,21H36" transform="translate(12 22)"/></g></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="11" viewBox="0 0 13 11"><defs><style>.a{stroke:rgba(0,0,0,0);stroke-miterlimit:10;fill:url(#a);}</style><linearGradient id="a" x1="0.277" y1="0.03" x2="0.725" y2="1.083" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff"/><stop offset="1" stop-color="#00c7ff"/></linearGradient></defs><path class="a" d="M1,10A1,1,0,1,1,1,8H6a1,1,0,0,1,0,2Zm9.8-.482L7.848,7.361A.445.445,0,0,1,7.661,7a.46.46,0,0,1,.187-.366L10.8,4.481a.45.45,0,0,1,.716.365V9.152a.44.44,0,0,1-.131.317.445.445,0,0,1-.322.136A.454.454,0,0,1,10.8,9.518ZM1,6A1,1,0,1,1,1,4H6A1,1,0,0,1,6,6ZM1,2A1,1,0,1,1,1,0H11a1,1,0,1,1,0,2Z" transform="translate(0.5 0.5)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="11" viewBox="0 0 13 11"><defs><style>.a{fill:url(#a);}.b{fill:url(#b);}</style><linearGradient id="a" x1="0.023" x2="1" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff" stop-opacity="0.302"/><stop offset="1" stop-color="#00c7ff" stop-opacity="0.302"/></linearGradient><linearGradient id="b" x1="0.023" x2="1" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff"/><stop offset="1" stop-color="#00c7ff"/></linearGradient></defs><path class="a" d="M5.5,0,11,8H0Z" transform="translate(13) rotate(90)"/><path class="b" d="M5.5,0,11,8H0Z" transform="translate(8) rotate(90)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:rgba(255,255,255,0.8);}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M10,1.5A1.5,1.5,0,1,1,11.5,3,1.5,1.5,0,0,1,10,1.5Zm-5,0A1.5,1.5,0,1,1,6.5,3,1.5,1.5,0,0,1,5,1.5Zm-5,0A1.5,1.5,0,1,1,1.5,3,1.5,1.5,0,0,1,0,1.5Z" transform="translate(1.498 6.5)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:rgba(85,166,254,0.6);}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M12.715,13.421,9.588,10.294a5.841,5.841,0,1,1,.707-.707l3.128,3.128a.5.5,0,0,1-.708.706ZM1,5.833A4.833,4.833,0,1,0,5.834,1,4.838,4.838,0,0,0,1,5.833Z" transform="translate(1.334 1.216)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M14.488.053.824,4.256a1.167,1.167,0,0,0-.285,2.1L4.576,8.936a1.167,1.167,0,0,0,1.382-.092L11,4.593A.292.292,0,0,1,11.408,5L7.156,10.043a1.167,1.167,0,0,0-.091,1.382l2.58,4.036a1.168,1.168,0,0,0,2.1-.286l4.2-13.663A1.167,1.167,0,0,0,14.488.053Z" transform="translate(0)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16.131" height="16" viewBox="0 0 16.131 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#97edff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M6,30V34.12H18.361V30" transform="translate(-2.73 -19.994)"/><path class="b" d="M21.181,9.09,18.09,6,15,9.09" transform="translate(-8.64 -4.235)"/><path class="b" d="M23.992,14.241V6" transform="translate(-14.544 -4.235)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b,.c{fill:none;stroke:#346fb1;stroke-linejoin:round;}.c{stroke-linecap:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M10.667,17.333A6.667,6.667,0,1,0,4,10.667,6.667,6.667,0,0,0,10.667,17.333Z" transform="translate(-2.667 -2.667)"/><path class="c" d="M24.008,12v4l2.826,2.826" transform="translate(-16.005 -8)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(212,120,0,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(207,19,34,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(29,171,123,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(132,85,230,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(201,181,0,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(69,195,243,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#346fb1;stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(0 -2)"><rect class="a" width="16" height="16" transform="translate(0 2)"/><path class="b" d="M17.333,8H4V18H9l1.667,1.667L12.333,18h5Z" transform="translate(-2.667 -3.667)"/><circle class="b" cx="1.667" cy="1.667" r="1.667" transform="translate(6.333 6.333)"/><path class="b" d="M21,26.667A2.848,2.848,0,0,0,18,24a2.848,2.848,0,0,0-3,2.667" transform="translate(-10 -14.333)"/></g></svg>
@@ -1,158 +1,158 @@
-"use client";
+"use client";
-
+
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import {
+import {
-  Tooltip,
+  Tooltip,
-  TooltipContent,
+  TooltipContent,
-  TooltipProvider,
+  TooltipProvider,
-  TooltipTrigger,
+  TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { type LucideIcon, XIcon } from "lucide-react";
+import { type LucideIcon, XIcon } from "lucide-react";
-import { forwardRef, type ComponentProps, type HTMLAttributes } from "react";
+import { forwardRef, type ComponentProps, type HTMLAttributes } from "react";
-
+
-export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
+export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
-
+
-export const Artifact = ({ className, ...props }: ArtifactProps) => (
+export const Artifact = ({ className, ...props }: ArtifactProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "flex flex-col overflow-hidden rounded-[1.35rem] border border-border bg-background shadow-[0_24px_60px_-28px_rgba(15,23,42,0.16)] ring-1 ring-black/3",
+      "flex flex-col overflow-hidden rounded-[1.35rem] border border-border bg-background shadow-[0_24px_60px_-28px_rgba(15,23,42,0.16)] ring-1 ring-black/3",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
+export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
-
+
-export const ArtifactHeader = ({
+export const ArtifactHeader = ({
-  className,
+  className,
-  ...props
+  ...props
-}: ArtifactHeaderProps) => (
+}: ArtifactHeaderProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "flex items-center justify-between border-b border-border bg-background px-4 py-3",
+      "flex items-center justify-between border-b border-border bg-background px-4 py-3",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type ArtifactCloseProps = ComponentProps<typeof Button>;
+export type ArtifactCloseProps = ComponentProps<typeof Button>;
-
+
-export const ArtifactClose = ({
+export const ArtifactClose = ({
-  className,
+  className,
-  children,
+  children,
-  size = "sm",
+  size = "sm",
-  variant = "ghost",
+  variant = "ghost",
-  ...props
+  ...props
-}: ArtifactCloseProps) => (
+}: ArtifactCloseProps) => (
-  <Button
+  <Button
-    className={cn(
+    className={cn(
-      "text-muted-foreground hover:text-foreground size-8 p-0",
+      "text-muted-foreground hover:text-foreground size-8 p-0",
-      className,
+      className,
-    )}
+    )}
-    size={size}
+    size={size}
-    type="button"
+    type="button"
-    variant={variant}
+    variant={variant}
-    {...props}
+    {...props}
-  >
+  >
-    {children ?? <XIcon className="size-4" />}
+    {children ?? <XIcon className="size-4" />}
-    <span className="sr-only">Close</span>
+    <span className="sr-only">Close</span>
-  </Button>
+  </Button>
-);
+);
-
+
-export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
+export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
-
+
-export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
+export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "text-foreground text-sm font-semibold tracking-tight",
+      "text-foreground text-sm font-semibold tracking-tight",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
-
+
-export const ArtifactDescription = ({
+export const ArtifactDescription = ({
-  className,
+  className,
-  ...props
+  ...props
-}: ArtifactDescriptionProps) => (
+}: ArtifactDescriptionProps) => (
-  <p className={cn("text-muted-foreground text-sm", className)} {...props} />
+  <p className={cn("text-muted-foreground text-sm", className)} {...props} />
-);
+);
-
+
-export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
+export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
-
+
-export const ArtifactActions = ({
+export const ArtifactActions = ({
-  className,
+  className,
-  ...props
+  ...props
-}: ArtifactActionsProps) => (
+}: ArtifactActionsProps) => (
-  <div className={cn("flex items-center gap-1.5", className)} {...props} />
+  <div className={cn("flex items-center gap-1.5", className)} {...props} />
-);
+);
-
+
-export type ArtifactActionProps = ComponentProps<typeof Button> & {
+export type ArtifactActionProps = ComponentProps<typeof Button> & {
-  tooltip?: string;
+  tooltip?: string;
-  label?: string;
+  label?: string;
-  icon?: LucideIcon;
+  icon?: LucideIcon;
-};
+};
-
+
-export const ArtifactAction = ({
+export const ArtifactAction = ({
-  tooltip,
+  tooltip,
-  label,
+  label,
-  icon: Icon,
+  icon: Icon,
-  children,
+  children,
-  className,
+  className,
-  size = "sm",
+  size = "sm",
-  variant = "ghost",
+  variant = "ghost",
-  ...props
+  ...props
-}: ArtifactActionProps) => {
+}: ArtifactActionProps) => {
-  const button = (
+  const button = (
-    <Button
+    <Button
-      className={cn(
+      className={cn(
-        "text-muted-foreground hover:text-foreground hover:bg-accent/70 size-8 rounded-full p-0 transition-all duration-200 hover:scale-[1.03]",
+        "text-muted-foreground hover:text-foreground hover:bg-accent/70 size-8 rounded-full p-0 transition-all duration-200 hover:scale-[1.03]",
-        className,
+        className,
-      )}
+      )}
-      size={size}
+      size={size}
-      type="button"
+      type="button"
-      variant={variant}
+      variant={variant}
-      {...props}
+      {...props}
-    >
+    >
-      {Icon ? <Icon className="size-4" /> : children}
+      {Icon ? <Icon className="size-4" /> : children}
-      <span className="sr-only">{label || tooltip}</span>
+      <span className="sr-only">{label || tooltip}</span>
-    </Button>
+    </Button>
-  );
+  );
-
+
-  if (tooltip) {
+  if (tooltip) {
-    return (
+    return (
-      <TooltipProvider>
+      <TooltipProvider>
-        <Tooltip>
+        <Tooltip>
-          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
-          <TooltipContent>
+          <TooltipContent>
-            <p>{tooltip}</p>
+            <p>{tooltip}</p>
-          </TooltipContent>
+          </TooltipContent>
-        </Tooltip>
+        </Tooltip>
-      </TooltipProvider>
+      </TooltipProvider>
-    );
+    );
-  }
+  }
-
+
-  return button;
+  return button;
-};
+};
-
+
-export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
+export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
-
+
-export const ArtifactContent = forwardRef<HTMLDivElement, ArtifactContentProps>(
+export const ArtifactContent = forwardRef<HTMLDivElement, ArtifactContentProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, ...props }, ref) => (
-    <div
+    <div
-      ref={ref}
+      ref={ref}
-      className={cn(
+      className={cn(
-        "min-h-0 flex-1 overflow-auto bg-background p-4",
+        "min-h-0 flex-1 overflow-auto bg-background p-4",
-        className,
+        className,
-      )}
+      )}
-      {...props}
+      {...props}
-    />
+    />
-  ),
+  ),
-);
+);
-
+
-ArtifactContent.displayName = "ArtifactContent";
+ArtifactContent.displayName = "ArtifactContent";
@@ -1,22 +1,22 @@
-import { Background, ReactFlow, type ReactFlowProps } from "@xyflow/react";
+import { Background, ReactFlow, type ReactFlowProps } from "@xyflow/react";
-import type { ReactNode } from "react";
+import type { ReactNode } from "react";
-import "@xyflow/react/dist/style.css";
+import "@xyflow/react/dist/style.css";
-
+
-type CanvasProps = ReactFlowProps & {
+type CanvasProps = ReactFlowProps & {
-  children?: ReactNode;
+  children?: ReactNode;
-};
+};
-
+
-export const Canvas = ({ children, ...props }: CanvasProps) => (
+export const Canvas = ({ children, ...props }: CanvasProps) => (
-  <ReactFlow
+  <ReactFlow
-    deleteKeyCode={["Backspace", "Delete"]}
+    deleteKeyCode={["Backspace", "Delete"]}
-    fitView
+    fitView
-    panOnDrag={false}
+    panOnDrag={false}
-    panOnScroll
+    panOnScroll
-    selectionOnDrag={true}
+    selectionOnDrag={true}
-    zoomOnDoubleClick={false}
+    zoomOnDoubleClick={false}
-    {...props}
+    {...props}
-  >
+  >
-    <Background bgColor="var(--sidebar)" />
+    <Background bgColor="var(--sidebar)" />
-    {children}
+    {children}
-  </ReactFlow>
+  </ReactFlow>
-);
+);
@@ -1,239 +1,239 @@
-"use client";
+"use client";
-
+
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { Badge } from "@/components/ui/badge";
+import { Badge } from "@/components/ui/badge";
-import {
+import {
-  Collapsible,
+  Collapsible,
-  CollapsibleContent,
+  CollapsibleContent,
-  CollapsibleTrigger,
+  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+} from "@/components/ui/collapsible";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import {
+import {
-  BrainIcon,
+  BrainIcon,
-  ChevronDownIcon,
+  ChevronDownIcon,
-  DotIcon,
+  DotIcon,
-  type LucideIcon,
+  type LucideIcon,
-} from "lucide-react";
+} from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
-import {
+import {
-  createContext,
+  createContext,
-  isValidElement,
+  isValidElement,
-  memo,
+  memo,
-  useContext,
+  useContext,
-  useMemo,
+  useMemo,
-} from "react";
+} from "react";
-
+
-type ChainOfThoughtContextValue = {
+type ChainOfThoughtContextValue = {
-  isOpen: boolean;
+  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
+  setIsOpen: (open: boolean) => void;
-};
+};
-
+
-const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(
+const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(
-  null,
+  null,
-);
+);
-
+
-const useChainOfThought = () => {
+const useChainOfThought = () => {
-  const context = useContext(ChainOfThoughtContext);
+  const context = useContext(ChainOfThoughtContext);
-  if (!context) {
+  if (!context) {
-    throw new Error(
+    throw new Error(
-      "ChainOfThought components must be used within ChainOfThought",
+      "ChainOfThought components must be used within ChainOfThought",
-    );
+    );
-  }
+  }
-  return context;
+  return context;
-};
+};
-
+
-export type ChainOfThoughtProps = ComponentProps<"div"> & {
+export type ChainOfThoughtProps = ComponentProps<"div"> & {
-  open?: boolean;
+  open?: boolean;
-  defaultOpen?: boolean;
+  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
-};
+};
-
+
-export const ChainOfThought = memo(
+export const ChainOfThought = memo(
-  ({
+  ({
-    className,
+    className,
-    open,
+    open,
-    defaultOpen = false,
+    defaultOpen = false,
-    onOpenChange,
+    onOpenChange,
-    children,
+    children,
-    ...props
+    ...props
-  }: ChainOfThoughtProps) => {
+  }: ChainOfThoughtProps) => {
-    const [isOpen, setIsOpen] = useControllableState({
+    const [isOpen, setIsOpen] = useControllableState({
-      prop: open,
+      prop: open,
-      defaultProp: defaultOpen,
+      defaultProp: defaultOpen,
-      onChange: onOpenChange,
+      onChange: onOpenChange,
-    });
+    });
-
+
-    const chainOfThoughtContext = useMemo(
+    const chainOfThoughtContext = useMemo(
-      () => ({ isOpen, setIsOpen }),
+      () => ({ isOpen, setIsOpen }),
-      [isOpen, setIsOpen],
+      [isOpen, setIsOpen],
-    );
+    );
-
+
-    return (
+    return (
-      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
+      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
-        <div className={cn("not-prose", className)} {...props}>
+        <div className={cn("not-prose", className)} {...props}>
-          {children}
+          {children}
-        </div>
+        </div>
-      </ChainOfThoughtContext.Provider>
+      </ChainOfThoughtContext.Provider>
-    );
+    );
-  },
+  },
-);
+);
-
+
-export type ChainOfThoughtHeaderProps = ComponentProps<
+export type ChainOfThoughtHeaderProps = ComponentProps<
-  typeof CollapsibleTrigger
+  typeof CollapsibleTrigger
-> & {
+> & {
-  icon?: React.ReactElement;
+  icon?: React.ReactElement;
-};
+};
-
+
-export const ChainOfThoughtHeader = memo(
+export const ChainOfThoughtHeader = memo(
-  ({ className, children, icon, ...props }: ChainOfThoughtHeaderProps) => {
+  ({ className, children, icon, ...props }: ChainOfThoughtHeaderProps) => {
-    const { isOpen, setIsOpen } = useChainOfThought();
+    const { isOpen, setIsOpen } = useChainOfThought();
-
+
-    return (
+    return (
-      <Collapsible onOpenChange={setIsOpen} open={isOpen}>
+      <Collapsible onOpenChange={setIsOpen} open={isOpen}>
-        <CollapsibleTrigger
+        <CollapsibleTrigger
-          className={cn(
+          className={cn(
-            "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors",
+            "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors",
-            className,
+            className,
-          )}
+          )}
-          {...props}
+          {...props}
-        >
+        >
-          {icon ?? <BrainIcon className="size-4" />}
+          {icon ?? <BrainIcon className="size-4" />}
-          <span className="flex-1 text-left">
+          <span className="flex-1 text-left">
-            {children ?? "Chain of Thought"}
+            {children ?? "Chain of Thought"}
-          </span>
+          </span>
-          <ChevronDownIcon
+          <ChevronDownIcon
-            className={cn(
+            className={cn(
-              "size-4 transition-transform",
+              "size-4 transition-transform",
-              isOpen ? "rotate-180" : "rotate-0",
+              isOpen ? "rotate-180" : "rotate-0",
-            )}
+            )}
-          />
+          />
-        </CollapsibleTrigger>
+        </CollapsibleTrigger>
-      </Collapsible>
+      </Collapsible>
-    );
+    );
-  },
+  },
-);
+);
-
+
-export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
+export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
-  icon?: LucideIcon | React.ReactElement;
+  icon?: LucideIcon | React.ReactElement;
-  label: ReactNode;
+  label: ReactNode;
-  description?: ReactNode;
+  description?: ReactNode;
-  status?: "complete" | "active" | "pending";
+  status?: "complete" | "active" | "pending";
-};
+};
-
+
-export const ChainOfThoughtStep = memo(
+export const ChainOfThoughtStep = memo(
-  ({
+  ({
-    className,
+    className,
-    icon: Icon = DotIcon,
+    icon: Icon = DotIcon,
-    label,
+    label,
-    description,
+    description,
-    status = "complete",
+    status = "complete",
-    children,
+    children,
-    ...props
+    ...props
-  }: ChainOfThoughtStepProps) => {
+  }: ChainOfThoughtStepProps) => {
-    const statusStyles = {
+    const statusStyles = {
-      complete: "text-muted-foreground",
+      complete: "text-muted-foreground",
-      active: "text-foreground",
+      active: "text-foreground",
-      pending: "text-muted-foreground/50",
+      pending: "text-muted-foreground/50",
-    };
+    };
-
+
-    return (
+    return (
-      <div
+      <div
-        className={cn(
+        className={cn(
-          "flex gap-2 text-sm",
+          "flex gap-2 text-sm",
-          statusStyles[status],
+          statusStyles[status],
-          "fade-in-0 slide-in-from-top-2 animate-in",
+          "fade-in-0 slide-in-from-top-2 animate-in",
-          className,
+          className,
-        )}
+        )}
-        {...props}
+        {...props}
-      >
+      >
-        <div className="relative mt-0.5">
+        <div className="relative mt-0.5">
-          {isValidElement(Icon) ? Icon : <Icon className="size-4" />}
+          {isValidElement(Icon) ? Icon : <Icon className="size-4" />}
-          <div className="bg-border absolute top-7 bottom-0 left-1/2 -mx-px w-px" />
+          <div className="bg-border absolute top-7 bottom-0 left-1/2 -mx-px w-px" />
-        </div>
+        </div>
-        <div className="flex-1 space-y-2 overflow-hidden">
+        <div className="flex-1 space-y-2 overflow-hidden">
-          <div>{label}</div>
+          <div>{label}</div>
-          {description && (
+          {description && (
-            <div className="text-muted-foreground text-xs">{description}</div>
+            <div className="text-muted-foreground text-xs">{description}</div>
-          )}
+          )}
-          {children}
+          {children}
-        </div>
+        </div>
-      </div>
+      </div>
-    );
+    );
-  },
+  },
-);
+);
-
+
-export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
-
+
-export const ChainOfThoughtSearchResults = memo(
+export const ChainOfThoughtSearchResults = memo(
-  ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
+  ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
-    <div
+    <div
-      className={cn(
+      className={cn(
-        "flex flex-wrap items-center gap-2 overflow-x-hidden",
+        "flex flex-wrap items-center gap-2 overflow-x-hidden",
-        className,
+        className,
-      )}
+      )}
-      {...props}
+      {...props}
-    />
+    />
-  ),
+  ),
-);
+);
-
+
-export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
+export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
-
+
-export const ChainOfThoughtSearchResult = memo(
+export const ChainOfThoughtSearchResult = memo(
-  ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (
+  ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (
-    <Badge
+    <Badge
-      className={cn("gap-1 px-2 py-0.5 text-xs font-normal", className)}
+      className={cn("gap-1 px-2 py-0.5 text-xs font-normal", className)}
-      variant="secondary"
+      variant="secondary"
-      {...props}
+      {...props}
-    >
+    >
-      {children}
+      {children}
-    </Badge>
+    </Badge>
-  ),
+  ),
-);
+);
-
+
-export type ChainOfThoughtContentProps = ComponentProps<
+export type ChainOfThoughtContentProps = ComponentProps<
-  typeof CollapsibleContent
+  typeof CollapsibleContent
->;
+>;
-
+
-export const ChainOfThoughtContent = memo(
+export const ChainOfThoughtContent = memo(
-  ({ className, children, ...props }: ChainOfThoughtContentProps) => {
+  ({ className, children, ...props }: ChainOfThoughtContentProps) => {
-    const { isOpen } = useChainOfThought();
+    const { isOpen } = useChainOfThought();
-
+
-    return (
+    return (
-      <Collapsible open={isOpen}>
+      <Collapsible open={isOpen}>
-        <CollapsibleContent
+        <CollapsibleContent
-          className={cn(
+          className={cn(
-            "mt-2 space-y-3",
+            "mt-2 space-y-3",
-            "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+            "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
-            className,
+            className,
-          )}
+          )}
-          {...props}
+          {...props}
-        >
+        >
-          {children}
+          {children}
-        </CollapsibleContent>
+        </CollapsibleContent>
-      </Collapsible>
+      </Collapsible>
-    );
+    );
-  },
+  },
-);
+);
-
+
-export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
+export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
-  caption?: string;
+  caption?: string;
-};
+};
-
+
-export const ChainOfThoughtImage = memo(
+export const ChainOfThoughtImage = memo(
-  ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (
+  ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (
-    <div className={cn("mt-2 space-y-2", className)} {...props}>
+    <div className={cn("mt-2 space-y-2", className)} {...props}>
-      <div className="bg-muted relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg p-3">
+      <div className="bg-muted relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg p-3">
-        {children}
+        {children}
-      </div>
+      </div>
-      {caption && <p className="text-muted-foreground text-xs">{caption}</p>}
+      {caption && <p className="text-muted-foreground text-xs">{caption}</p>}
-    </div>
+    </div>
-  ),
+  ),
-);
+);
-
+
-ChainOfThought.displayName = "ChainOfThought";
+ChainOfThought.displayName = "ChainOfThought";
-ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
-ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
-ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
-ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
-ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
-ChainOfThoughtImage.displayName = "ChainOfThoughtImage";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";
@@ -1,71 +1,71 @@
-"use client";
+"use client";
-
+
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
+import { Separator } from "@/components/ui/separator";
-import {
+import {
-  Tooltip,
+  Tooltip,
-  TooltipContent,
+  TooltipContent,
-  TooltipTrigger,
+  TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { BookmarkIcon, type LucideProps } from "lucide-react";
+import { BookmarkIcon, type LucideProps } from "lucide-react";
-import type { ComponentProps, HTMLAttributes } from "react";
+import type { ComponentProps, HTMLAttributes } from "react";
-
+
-export type CheckpointProps = HTMLAttributes<HTMLDivElement>;
+export type CheckpointProps = HTMLAttributes<HTMLDivElement>;
-
+
-export const Checkpoint = ({
+export const Checkpoint = ({
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: CheckpointProps) => (
+}: CheckpointProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "text-muted-foreground flex items-center gap-0.5 overflow-hidden",
+      "text-muted-foreground flex items-center gap-0.5 overflow-hidden",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  >
+  >
-    {children}
+    {children}
-    <Separator />
+    <Separator />
-  </div>
+  </div>
-);
+);
-
+
-export type CheckpointIconProps = LucideProps;
+export type CheckpointIconProps = LucideProps;
-
+
-export const CheckpointIcon = ({
+export const CheckpointIcon = ({
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: CheckpointIconProps) =>
+}: CheckpointIconProps) =>
-  children ?? (
+  children ?? (
-    <BookmarkIcon className={cn("size-4 shrink-0", className)} {...props} />
+    <BookmarkIcon className={cn("size-4 shrink-0", className)} {...props} />
-  );
+  );
-
+
-export type CheckpointTriggerProps = ComponentProps<typeof Button> & {
+export type CheckpointTriggerProps = ComponentProps<typeof Button> & {
-  tooltip?: string;
+  tooltip?: string;
-};
+};
-
+
-export const CheckpointTrigger = ({
+export const CheckpointTrigger = ({
-  children,
+  children,
-  className,
+  className,
-  variant = "ghost",
+  variant = "ghost",
-  size = "sm",
+  size = "sm",
-  tooltip,
+  tooltip,
-  ...props
+  ...props
-}: CheckpointTriggerProps) =>
+}: CheckpointTriggerProps) =>
-  tooltip ? (
+  tooltip ? (
-    <Tooltip>
+    <Tooltip>
-      <TooltipTrigger asChild>
+      <TooltipTrigger asChild>
-        <Button size={size} type="button" variant={variant} {...props}>
+        <Button size={size} type="button" variant={variant} {...props}>
-          {children}
+          {children}
-        </Button>
+        </Button>
-      </TooltipTrigger>
+      </TooltipTrigger>
-      <TooltipContent align="start" side="bottom">
+      <TooltipContent align="start" side="bottom">
-        {tooltip}
+        {tooltip}
-      </TooltipContent>
+      </TooltipContent>
-    </Tooltip>
+    </Tooltip>
-  ) : (
+  ) : (
-    <Button size={size} type="button" variant={variant} {...props}>
+    <Button size={size} type="button" variant={variant} {...props}>
-      {children}
+      {children}
-    </Button>
+    </Button>
-  );
+  );
@@ -1,150 +1,150 @@
-"use client";
+"use client";
-
+
 import { Button } from "@/components/ui/button";
 import { copyTextToClipboard } from "@/core/clipboard";
 import { cn } from "@/lib/utils";
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { CheckIcon, CopyIcon } from "lucide-react";
-import {
+import {
-  type ComponentProps,
+  type ComponentProps,
-  createContext,
+  createContext,
-  type HTMLAttributes,
+  type HTMLAttributes,
-  useContext,
+  useContext,
-  useEffect,
+  useEffect,
-  useRef,
+  useRef,
-  useState,
+  useState,
-} from "react";
+} from "react";
-import { type BundledLanguage, codeToHtml, type ShikiTransformer } from "shiki";
+import { type BundledLanguage, codeToHtml, type ShikiTransformer } from "shiki";
-
+
-type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
-  code: string;
+  code: string;
-  language: BundledLanguage;
+  language: BundledLanguage;
-  showLineNumbers?: boolean;
+  showLineNumbers?: boolean;
-};
+};
-
+
-type CodeBlockContextType = {
+type CodeBlockContextType = {
-  code: string;
+  code: string;
-};
+};
-
+
-const CodeBlockContext = createContext<CodeBlockContextType>({
+const CodeBlockContext = createContext<CodeBlockContextType>({
-  code: "",
+  code: "",
-});
+});
-
+
-const lineNumberTransformer: ShikiTransformer = {
+const lineNumberTransformer: ShikiTransformer = {
-  name: "line-numbers",
+  name: "line-numbers",
-  line(node, line) {
+  line(node, line) {
-    node.children.unshift({
+    node.children.unshift({
-      type: "element",
+      type: "element",
-      tagName: "span",
+      tagName: "span",
-      properties: {
+      properties: {
-        className: [
+        className: [
-          "inline-block",
+          "inline-block",
-          "min-w-10",
+          "min-w-10",
-          "mr-4",
+          "mr-4",
-          "text-right",
+          "text-right",
-          "select-none",
+          "select-none",
-          "text-muted-foreground",
+          "text-muted-foreground",
-        ],
+        ],
-      },
+      },
-      children: [{ type: "text", value: String(line) }],
+      children: [{ type: "text", value: String(line) }],
-    });
+    });
-  },
+  },
-};
+};
-
+
-export async function highlightCode(
+export async function highlightCode(
-  code: string,
+  code: string,
-  language: BundledLanguage,
+  language: BundledLanguage,
-  showLineNumbers = false,
+  showLineNumbers = false,
-) {
+) {
-  const transformers: ShikiTransformer[] = showLineNumbers
+  const transformers: ShikiTransformer[] = showLineNumbers
-    ? [lineNumberTransformer]
+    ? [lineNumberTransformer]
-    : [];
+    : [];
-
+
-  return await Promise.all([
+  return await Promise.all([
-    codeToHtml(code, {
+    codeToHtml(code, {
-      lang: language,
+      lang: language,
-      theme: "one-light",
+      theme: "one-light",
-      transformers,
+      transformers,
-    }),
+    }),
-    codeToHtml(code, {
+    codeToHtml(code, {
-      lang: language,
+      lang: language,
-      theme: "one-dark-pro",
+      theme: "one-dark-pro",
-      transformers,
+      transformers,
-    }),
+    }),
-  ]);
+  ]);
-}
+}
-
+
-export const CodeBlock = ({
+export const CodeBlock = ({
-  code,
+  code,
-  language,
+  language,
-  showLineNumbers = false,
+  showLineNumbers = false,
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: CodeBlockProps) => {
+}: CodeBlockProps) => {
-  const [html, setHtml] = useState<string>("");
+  const [html, setHtml] = useState<string>("");
-  const [darkHtml, setDarkHtml] = useState<string>("");
+  const [darkHtml, setDarkHtml] = useState<string>("");
-  const mounted = useRef(false);
+  const mounted = useRef(false);
-
+
-  useEffect(() => {
+  useEffect(() => {
-    highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
+    highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
-      if (!mounted.current) {
+      if (!mounted.current) {
-        setHtml(light);
+        setHtml(light);
-        setDarkHtml(dark);
+        setDarkHtml(dark);
-        mounted.current = true;
+        mounted.current = true;
-      }
+      }
-    });
+    });
-
+
-    return () => {
+    return () => {
-      mounted.current = false;
+      mounted.current = false;
-    };
+    };
-  }, [code, language, showLineNumbers]);
+  }, [code, language, showLineNumbers]);
-
+
-  return (
+  return (
-    <CodeBlockContext.Provider value={{ code }}>
+    <CodeBlockContext.Provider value={{ code }}>
-      <div
+      <div
-        className={cn(
+        className={cn(
-          "group bg-background text-foreground relative size-full overflow-hidden rounded-md border",
+          "group bg-background text-foreground relative size-full overflow-hidden rounded-md border",
-          className,
+          className,
-        )}
+        )}
-        {...props}
+        {...props}
-      >
+      >
-        <div className="relative size-full">
+        <div className="relative size-full">
-          <div
+          <div
-            className="[&>pre]:bg-background! [&>pre]:text-foreground! size-full overflow-auto dark:hidden [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
+            className="[&>pre]:bg-background! [&>pre]:text-foreground! size-full overflow-auto dark:hidden [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
-            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
-            dangerouslySetInnerHTML={{ __html: html }}
+            dangerouslySetInnerHTML={{ __html: html }}
-          />
+          />
-          <div
+          <div
-            className="[&>pre]:bg-background! [&>pre]:text-foreground! hidden size-full overflow-auto dark:block [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
+            className="[&>pre]:bg-background! [&>pre]:text-foreground! hidden size-full overflow-auto dark:block [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
-            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
-            dangerouslySetInnerHTML={{ __html: darkHtml }}
+            dangerouslySetInnerHTML={{ __html: darkHtml }}
-          />
+          />
-          {children && (
+          {children && (
-            <div className="absolute top-2 right-2 flex items-center gap-2">
+            <div className="absolute top-2 right-2 flex items-center gap-2">
-              {children}
+              {children}
-            </div>
+            </div>
-          )}
+          )}
-        </div>
+        </div>
-      </div>
+      </div>
-    </CodeBlockContext.Provider>
+    </CodeBlockContext.Provider>
-  );
+  );
-};
+};
-
+
-export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
-  onCopy?: () => void;
+  onCopy?: () => void;
-  onError?: (error: Error) => void;
+  onError?: (error: Error) => void;
-  timeout?: number;
+  timeout?: number;
-};
+};
-
+
-export const CodeBlockCopyButton = ({
+export const CodeBlockCopyButton = ({
-  onCopy,
+  onCopy,
-  onError,
+  onError,
-  timeout = 2000,
+  timeout = 2000,
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: CodeBlockCopyButtonProps) => {
+}: CodeBlockCopyButtonProps) => {
-  const [isCopied, setIsCopied] = useState(false);
+  const [isCopied, setIsCopied] = useState(false);
  const { code } = useContext(CodeBlockContext);
  const copyToClipboard = async () => {
@@ -152,23 +152,23 @@ export const CodeBlockCopyButton = ({
      await copyTextToClipboard(code);
      setIsCopied(true);
      onCopy?.();
-      setTimeout(() => setIsCopied(false), timeout);
+      setTimeout(() => setIsCopied(false), timeout);
-    } catch (error) {
+    } catch (error) {
-      onError?.(error as Error);
+      onError?.(error as Error);
-    }
+    }
-  };
+  };
-
+
-  const Icon = isCopied ? CheckIcon : CopyIcon;
+  const Icon = isCopied ? CheckIcon : CopyIcon;
-
+
-  return (
+  return (
-    <Button
+    <Button
-      className={cn("shrink-0", className)}
+      className={cn("shrink-0", className)}
-      onClick={copyToClipboard}
+      onClick={copyToClipboard}
-      size="icon"
+      size="icon"
-      variant="ghost"
+      variant="ghost"
-      {...props}
+      {...props}
-    >
+    >
-      {children ?? <Icon size={14} />}
+      {children ?? <Icon size={14} />}
-    </Button>
+    </Button>
-  );
+  );
-};
+};
@@ -1,28 +1,28 @@
-import type { ConnectionLineComponent } from "@xyflow/react";
+import type { ConnectionLineComponent } from "@xyflow/react";
-
+
-const HALF = 0.5;
+const HALF = 0.5;
-
+
-export const Connection: ConnectionLineComponent = ({
+export const Connection: ConnectionLineComponent = ({
-  fromX,
+  fromX,
-  fromY,
+  fromY,
-  toX,
+  toX,
-  toY,
+  toY,
-}) => (
+}) => (
-  <g>
+  <g>
-    <path
+    <path
-      className="animated"
+      className="animated"
-      d={`M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`}
+      d={`M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`}
-      fill="none"
+      fill="none"
-      stroke="var(--color-ring)"
+      stroke="var(--color-ring)"
-      strokeWidth={1}
+      strokeWidth={1}
-    />
+    />
-    <circle
+    <circle
-      cx={toX}
+      cx={toX}
-      cy={toY}
+      cy={toY}
-      fill="#fff"
+      fill="#fff"
-      r={3}
+      r={3}
-      stroke="var(--color-ring)"
+      stroke="var(--color-ring)"
-      strokeWidth={1}
+      strokeWidth={1}
-    />
+    />
-  </g>
+  </g>
-);
+);
@@ -1,408 +1,408 @@
-"use client";
+"use client";
-
+
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import {
+import {
-  HoverCard,
+  HoverCard,
-  HoverCardContent,
+  HoverCardContent,
-  HoverCardTrigger,
+  HoverCardTrigger,
-} from "@/components/ui/hover-card";
+} from "@/components/ui/hover-card";
-import { Progress } from "@/components/ui/progress";
+import { Progress } from "@/components/ui/progress";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import type { LanguageModelUsage } from "ai";
+import type { LanguageModelUsage } from "ai";
-import { type ComponentProps, createContext, useContext } from "react";
+import { type ComponentProps, createContext, useContext } from "react";
-import { getUsage } from "tokenlens";
+import { getUsage } from "tokenlens";
-
+
-const PERCENT_MAX = 100;
+const PERCENT_MAX = 100;
-const ICON_RADIUS = 10;
+const ICON_RADIUS = 10;
-const ICON_VIEWBOX = 24;
+const ICON_VIEWBOX = 24;
-const ICON_CENTER = 12;
+const ICON_CENTER = 12;
-const ICON_STROKE_WIDTH = 2;
+const ICON_STROKE_WIDTH = 2;
-
+
-type ModelId = string;
+type ModelId = string;
-
+
-type ContextSchema = {
+type ContextSchema = {
-  usedTokens: number;
+  usedTokens: number;
-  maxTokens: number;
+  maxTokens: number;
-  usage?: LanguageModelUsage;
+  usage?: LanguageModelUsage;
-  modelId?: ModelId;
+  modelId?: ModelId;
-};
+};
-
+
-const ContextContext = createContext<ContextSchema | null>(null);
+const ContextContext = createContext<ContextSchema | null>(null);
-
+
-const useContextValue = () => {
+const useContextValue = () => {
-  const context = useContext(ContextContext);
+  const context = useContext(ContextContext);
-
+
-  if (!context) {
+  if (!context) {
-    throw new Error("Context components must be used within Context");
+    throw new Error("Context components must be used within Context");
-  }
+  }
-
+
-  return context;
+  return context;
-};
+};
-
+
-export type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;
+export type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;
-
+
-export const Context = ({
+export const Context = ({
-  usedTokens,
+  usedTokens,
-  maxTokens,
+  maxTokens,
-  usage,
+  usage,
-  modelId,
+  modelId,
-  ...props
+  ...props
-}: ContextProps) => (
+}: ContextProps) => (
-  <ContextContext.Provider
+  <ContextContext.Provider
-    value={{
+    value={{
-      usedTokens,
+      usedTokens,
-      maxTokens,
+      maxTokens,
-      usage,
+      usage,
-      modelId,
+      modelId,
-    }}
+    }}
-  >
+  >
-    <HoverCard closeDelay={0} openDelay={0} {...props} />
+    <HoverCard closeDelay={0} openDelay={0} {...props} />
-  </ContextContext.Provider>
+  </ContextContext.Provider>
-);
+);
-
+
-const ContextIcon = () => {
+const ContextIcon = () => {
-  const { usedTokens, maxTokens } = useContextValue();
+  const { usedTokens, maxTokens } = useContextValue();
-  const circumference = 2 * Math.PI * ICON_RADIUS;
+  const circumference = 2 * Math.PI * ICON_RADIUS;
-  const usedPercent = usedTokens / maxTokens;
+  const usedPercent = usedTokens / maxTokens;
-  const dashOffset = circumference * (1 - usedPercent);
+  const dashOffset = circumference * (1 - usedPercent);
-
+
-  return (
+  return (
-    <svg
+    <svg
-      aria-label="Model context usage"
+      aria-label="Model context usage"
-      height="20"
+      height="20"
-      role="img"
+      role="img"
-      style={{ color: "currentcolor" }}
+      style={{ color: "currentcolor" }}
-      viewBox={`0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`}
+      viewBox={`0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`}
-      width="20"
+      width="20"
-    >
+    >
-      <circle
+      <circle
-        cx={ICON_CENTER}
+        cx={ICON_CENTER}
-        cy={ICON_CENTER}
+        cy={ICON_CENTER}
-        fill="none"
+        fill="none"
-        opacity="0.25"
+        opacity="0.25"
-        r={ICON_RADIUS}
+        r={ICON_RADIUS}
-        stroke="currentColor"
+        stroke="currentColor"
-        strokeWidth={ICON_STROKE_WIDTH}
+        strokeWidth={ICON_STROKE_WIDTH}
-      />
+      />
-      <circle
+      <circle
-        cx={ICON_CENTER}
+        cx={ICON_CENTER}
-        cy={ICON_CENTER}
+        cy={ICON_CENTER}
-        fill="none"
+        fill="none"
-        opacity="0.7"
+        opacity="0.7"
-        r={ICON_RADIUS}
+        r={ICON_RADIUS}
-        stroke="currentColor"
+        stroke="currentColor"
-        strokeDasharray={`${circumference} ${circumference}`}
+        strokeDasharray={`${circumference} ${circumference}`}
-        strokeDashoffset={dashOffset}
+        strokeDashoffset={dashOffset}
-        strokeLinecap="round"
+        strokeLinecap="round"
-        strokeWidth={ICON_STROKE_WIDTH}
+        strokeWidth={ICON_STROKE_WIDTH}
-        style={{ transformOrigin: "center", transform: "rotate(-90deg)" }}
+        style={{ transformOrigin: "center", transform: "rotate(-90deg)" }}
-      />
+      />
-    </svg>
+    </svg>
-  );
+  );
-};
+};
-
+
-export type ContextTriggerProps = ComponentProps<typeof Button>;
+export type ContextTriggerProps = ComponentProps<typeof Button>;
-
+
-export const ContextTrigger = ({ children, ...props }: ContextTriggerProps) => {
+export const ContextTrigger = ({ children, ...props }: ContextTriggerProps) => {
-  const { usedTokens, maxTokens } = useContextValue();
+  const { usedTokens, maxTokens } = useContextValue();
-  const usedPercent = usedTokens / maxTokens;
+  const usedPercent = usedTokens / maxTokens;
-  const renderedPercent = new Intl.NumberFormat("en-US", {
+  const renderedPercent = new Intl.NumberFormat("en-US", {
-    style: "percent",
+    style: "percent",
-    maximumFractionDigits: 1,
+    maximumFractionDigits: 1,
-  }).format(usedPercent);
+  }).format(usedPercent);
-
+
-  return (
+  return (
-    <HoverCardTrigger asChild>
+    <HoverCardTrigger asChild>
-      {children ?? (
+      {children ?? (
-        <Button type="button" variant="ghost" {...props}>
+        <Button type="button" variant="ghost" {...props}>
-          <span className="text-muted-foreground font-medium">
+          <span className="text-muted-foreground font-medium">
-            {renderedPercent}
+            {renderedPercent}
-          </span>
+          </span>
-          <ContextIcon />
+          <ContextIcon />
-        </Button>
+        </Button>
-      )}
+      )}
-    </HoverCardTrigger>
+    </HoverCardTrigger>
-  );
+  );
-};
+};
-
+
-export type ContextContentProps = ComponentProps<typeof HoverCardContent>;
+export type ContextContentProps = ComponentProps<typeof HoverCardContent>;
-
+
-export const ContextContent = ({
+export const ContextContent = ({
-  className,
+  className,
-  ...props
+  ...props
-}: ContextContentProps) => (
+}: ContextContentProps) => (
-  <HoverCardContent
+  <HoverCardContent
-    className={cn("min-w-60 divide-y overflow-hidden p-0", className)}
+    className={cn("min-w-60 divide-y overflow-hidden p-0", className)}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type ContextContentHeaderProps = ComponentProps<"div">;
+export type ContextContentHeaderProps = ComponentProps<"div">;
-
+
-export const ContextContentHeader = ({
+export const ContextContentHeader = ({
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: ContextContentHeaderProps) => {
+}: ContextContentHeaderProps) => {
-  const { usedTokens, maxTokens } = useContextValue();
+  const { usedTokens, maxTokens } = useContextValue();
-  const usedPercent = usedTokens / maxTokens;
+  const usedPercent = usedTokens / maxTokens;
-  const displayPct = new Intl.NumberFormat("en-US", {
+  const displayPct = new Intl.NumberFormat("en-US", {
-    style: "percent",
+    style: "percent",
-    maximumFractionDigits: 1,
+    maximumFractionDigits: 1,
-  }).format(usedPercent);
+  }).format(usedPercent);
-  const used = new Intl.NumberFormat("en-US", {
+  const used = new Intl.NumberFormat("en-US", {
-    notation: "compact",
+    notation: "compact",
-  }).format(usedTokens);
+  }).format(usedTokens);
-  const total = new Intl.NumberFormat("en-US", {
+  const total = new Intl.NumberFormat("en-US", {
-    notation: "compact",
+    notation: "compact",
-  }).format(maxTokens);
+  }).format(maxTokens);
-
+
-  return (
+  return (
-    <div className={cn("w-full space-y-2 p-3", className)} {...props}>
+    <div className={cn("w-full space-y-2 p-3", className)} {...props}>
-      {children ?? (
+      {children ?? (
-        <>
+        <>
-          <div className="flex items-center justify-between gap-3 text-xs">
+          <div className="flex items-center justify-between gap-3 text-xs">
-            <p>{displayPct}</p>
+            <p>{displayPct}</p>
-            <p className="text-muted-foreground font-mono">
+            <p className="text-muted-foreground font-mono">
-              {used} / {total}
+              {used} / {total}
-            </p>
+            </p>
-          </div>
+          </div>
-          <div className="space-y-2">
+          <div className="space-y-2">
-            <Progress className="bg-muted" value={usedPercent * PERCENT_MAX} />
+            <Progress className="bg-muted" value={usedPercent * PERCENT_MAX} />
-          </div>
+          </div>
-        </>
+        </>
-      )}
+      )}
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
-export type ContextContentBodyProps = ComponentProps<"div">;
+export type ContextContentBodyProps = ComponentProps<"div">;
-
+
-export const ContextContentBody = ({
+export const ContextContentBody = ({
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: ContextContentBodyProps) => (
+}: ContextContentBodyProps) => (
-  <div className={cn("w-full p-3", className)} {...props}>
+  <div className={cn("w-full p-3", className)} {...props}>
-    {children}
+    {children}
-  </div>
+  </div>
-);
+);
-
+
-export type ContextContentFooterProps = ComponentProps<"div">;
+export type ContextContentFooterProps = ComponentProps<"div">;
-
+
-export const ContextContentFooter = ({
+export const ContextContentFooter = ({
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: ContextContentFooterProps) => {
+}: ContextContentFooterProps) => {
-  const { modelId, usage } = useContextValue();
+  const { modelId, usage } = useContextValue();
-  const costUSD = modelId
+  const costUSD = modelId
-    ? getUsage({
+    ? getUsage({
-        modelId,
+        modelId,
-        usage: {
+        usage: {
-          input: usage?.inputTokens ?? 0,
+          input: usage?.inputTokens ?? 0,
-          output: usage?.outputTokens ?? 0,
+          output: usage?.outputTokens ?? 0,
-        },
+        },
-      }).costUSD?.totalUSD
+      }).costUSD?.totalUSD
-    : undefined;
+    : undefined;
-  const totalCost = new Intl.NumberFormat("en-US", {
+  const totalCost = new Intl.NumberFormat("en-US", {
-    style: "currency",
+    style: "currency",
-    currency: "USD",
+    currency: "USD",
-  }).format(costUSD ?? 0);
+  }).format(costUSD ?? 0);
-
+
-  return (
+  return (
-    <div
+    <div
-      className={cn(
+      className={cn(
-        "bg-secondary flex w-full items-center justify-between gap-3 p-3 text-xs",
+        "bg-secondary flex w-full items-center justify-between gap-3 p-3 text-xs",
-        className,
+        className,
-      )}
+      )}
-      {...props}
+      {...props}
-    >
+    >
-      {children ?? (
+      {children ?? (
-        <>
+        <>
-          <span className="text-muted-foreground">Total cost</span>
+          <span className="text-muted-foreground">Total cost</span>
-          <span>{totalCost}</span>
+          <span>{totalCost}</span>
-        </>
+        </>
-      )}
+      )}
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
-export type ContextInputUsageProps = ComponentProps<"div">;
+export type ContextInputUsageProps = ComponentProps<"div">;
-
+
-export const ContextInputUsage = ({
+export const ContextInputUsage = ({
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: ContextInputUsageProps) => {
+}: ContextInputUsageProps) => {
-  const { usage, modelId } = useContextValue();
+  const { usage, modelId } = useContextValue();
-  const inputTokens = usage?.inputTokens ?? 0;
+  const inputTokens = usage?.inputTokens ?? 0;
-
+
-  if (children) {
+  if (children) {
-    return children;
+    return children;
-  }
+  }
-
+
-  if (!inputTokens) {
+  if (!inputTokens) {
-    return null;
+    return null;
-  }
+  }
-
+
-  const inputCost = modelId
+  const inputCost = modelId
-    ? getUsage({
+    ? getUsage({
-        modelId,
+        modelId,
-        usage: { input: inputTokens, output: 0 },
+        usage: { input: inputTokens, output: 0 },
-      }).costUSD?.totalUSD
+      }).costUSD?.totalUSD
-    : undefined;
+    : undefined;
-  const inputCostText = new Intl.NumberFormat("en-US", {
+  const inputCostText = new Intl.NumberFormat("en-US", {
-    style: "currency",
+    style: "currency",
-    currency: "USD",
+    currency: "USD",
-  }).format(inputCost ?? 0);
+  }).format(inputCost ?? 0);
-
+
-  return (
+  return (
-    <div
+    <div
-      className={cn("flex items-center justify-between text-xs", className)}
+      className={cn("flex items-center justify-between text-xs", className)}
-      {...props}
+      {...props}
-    >
+    >
-      <span className="text-muted-foreground">Input</span>
+      <span className="text-muted-foreground">Input</span>
-      <TokensWithCost costText={inputCostText} tokens={inputTokens} />
+      <TokensWithCost costText={inputCostText} tokens={inputTokens} />
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
-export type ContextOutputUsageProps = ComponentProps<"div">;
+export type ContextOutputUsageProps = ComponentProps<"div">;
-
+
-export const ContextOutputUsage = ({
+export const ContextOutputUsage = ({
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: ContextOutputUsageProps) => {
+}: ContextOutputUsageProps) => {
-  const { usage, modelId } = useContextValue();
+  const { usage, modelId } = useContextValue();
-  const outputTokens = usage?.outputTokens ?? 0;
+  const outputTokens = usage?.outputTokens ?? 0;
-
+
-  if (children) {
+  if (children) {
-    return children;
+    return children;
-  }
+  }
-
+
-  if (!outputTokens) {
+  if (!outputTokens) {
-    return null;
+    return null;
-  }
+  }
-
+
-  const outputCost = modelId
+  const outputCost = modelId
-    ? getUsage({
+    ? getUsage({
-        modelId,
+        modelId,
-        usage: { input: 0, output: outputTokens },
+        usage: { input: 0, output: outputTokens },
-      }).costUSD?.totalUSD
+      }).costUSD?.totalUSD
-    : undefined;
+    : undefined;
-  const outputCostText = new Intl.NumberFormat("en-US", {
+  const outputCostText = new Intl.NumberFormat("en-US", {
-    style: "currency",
+    style: "currency",
-    currency: "USD",
+    currency: "USD",
-  }).format(outputCost ?? 0);
+  }).format(outputCost ?? 0);
-
+
-  return (
+  return (
-    <div
+    <div
-      className={cn("flex items-center justify-between text-xs", className)}
+      className={cn("flex items-center justify-between text-xs", className)}
-      {...props}
+      {...props}
-    >
+    >
-      <span className="text-muted-foreground">Output</span>
+      <span className="text-muted-foreground">Output</span>
-      <TokensWithCost costText={outputCostText} tokens={outputTokens} />
+      <TokensWithCost costText={outputCostText} tokens={outputTokens} />
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
-export type ContextReasoningUsageProps = ComponentProps<"div">;
+export type ContextReasoningUsageProps = ComponentProps<"div">;
-
+
-export const ContextReasoningUsage = ({
+export const ContextReasoningUsage = ({
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: ContextReasoningUsageProps) => {
+}: ContextReasoningUsageProps) => {
-  const { usage, modelId } = useContextValue();
+  const { usage, modelId } = useContextValue();
-  const reasoningTokens = usage?.reasoningTokens ?? 0;
+  const reasoningTokens = usage?.reasoningTokens ?? 0;
-
+
-  if (children) {
+  if (children) {
-    return children;
+    return children;
-  }
+  }
-
+
-  if (!reasoningTokens) {
+  if (!reasoningTokens) {
-    return null;
+    return null;
-  }
+  }
-
+
-  const reasoningCost = modelId
+  const reasoningCost = modelId
-    ? getUsage({
+    ? getUsage({
-        modelId,
+        modelId,
-        usage: { reasoningTokens },
+        usage: { reasoningTokens },
-      }).costUSD?.totalUSD
+      }).costUSD?.totalUSD
-    : undefined;
+    : undefined;
-  const reasoningCostText = new Intl.NumberFormat("en-US", {
+  const reasoningCostText = new Intl.NumberFormat("en-US", {
-    style: "currency",
+    style: "currency",
-    currency: "USD",
+    currency: "USD",
-  }).format(reasoningCost ?? 0);
+  }).format(reasoningCost ?? 0);
-
+
-  return (
+  return (
-    <div
+    <div
-      className={cn("flex items-center justify-between text-xs", className)}
+      className={cn("flex items-center justify-between text-xs", className)}
-      {...props}
+      {...props}
-    >
+    >
-      <span className="text-muted-foreground">Reasoning</span>
+      <span className="text-muted-foreground">Reasoning</span>
-      <TokensWithCost costText={reasoningCostText} tokens={reasoningTokens} />
+      <TokensWithCost costText={reasoningCostText} tokens={reasoningTokens} />
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
-export type ContextCacheUsageProps = ComponentProps<"div">;
+export type ContextCacheUsageProps = ComponentProps<"div">;
-
+
-export const ContextCacheUsage = ({
+export const ContextCacheUsage = ({
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: ContextCacheUsageProps) => {
+}: ContextCacheUsageProps) => {
-  const { usage, modelId } = useContextValue();
+  const { usage, modelId } = useContextValue();
-  const cacheTokens = usage?.cachedInputTokens ?? 0;
+  const cacheTokens = usage?.cachedInputTokens ?? 0;
-
+
-  if (children) {
+  if (children) {
-    return children;
+    return children;
-  }
+  }
-
+
-  if (!cacheTokens) {
+  if (!cacheTokens) {
-    return null;
+    return null;
-  }
+  }
-
+
-  const cacheCost = modelId
+  const cacheCost = modelId
-    ? getUsage({
+    ? getUsage({
-        modelId,
+        modelId,
-        usage: { cacheReads: cacheTokens, input: 0, output: 0 },
+        usage: { cacheReads: cacheTokens, input: 0, output: 0 },
-      }).costUSD?.totalUSD
+      }).costUSD?.totalUSD
-    : undefined;
+    : undefined;
-  const cacheCostText = new Intl.NumberFormat("en-US", {
+  const cacheCostText = new Intl.NumberFormat("en-US", {
-    style: "currency",
+    style: "currency",
-    currency: "USD",
+    currency: "USD",
-  }).format(cacheCost ?? 0);
+  }).format(cacheCost ?? 0);
-
+
-  return (
+  return (
-    <div
+    <div
-      className={cn("flex items-center justify-between text-xs", className)}
+      className={cn("flex items-center justify-between text-xs", className)}
-      {...props}
+      {...props}
-    >
+    >
-      <span className="text-muted-foreground">Cache</span>
+      <span className="text-muted-foreground">Cache</span>
-      <TokensWithCost costText={cacheCostText} tokens={cacheTokens} />
+      <TokensWithCost costText={cacheCostText} tokens={cacheTokens} />
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
-const TokensWithCost = ({
+const TokensWithCost = ({
-  tokens,
+  tokens,
-  costText,
+  costText,
-}: {
+}: {
-  tokens?: number;
+  tokens?: number;
-  costText?: string;
+  costText?: string;
-}) => (
+}) => (
-  <span>
+  <span>
-    {tokens === undefined
+    {tokens === undefined
-      ? "—"
+      ? "—"
-      : new Intl.NumberFormat("en-US", {
+      : new Intl.NumberFormat("en-US", {
-          notation: "compact",
+          notation: "compact",
-        }).format(tokens)}
+        }).format(tokens)}
-    {costText ? (
+    {costText ? (
-      <span className="text-muted-foreground ml-2">• {costText}</span>
+      <span className="text-muted-foreground ml-2">• {costText}</span>
-    ) : null}
+    ) : null}
-  </span>
+  </span>
-);
+);
@@ -1,18 +1,18 @@
-"use client";
+"use client";
-
+
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { Controls as ControlsPrimitive } from "@xyflow/react";
+import { Controls as ControlsPrimitive } from "@xyflow/react";
-import type { ComponentProps } from "react";
+import type { ComponentProps } from "react";
-
+
-export type ControlsProps = ComponentProps<typeof ControlsPrimitive>;
+export type ControlsProps = ComponentProps<typeof ControlsPrimitive>;
-
+
-export const Controls = ({ className, ...props }: ControlsProps) => (
+export const Controls = ({ className, ...props }: ControlsProps) => (
-  <ControlsPrimitive
+  <ControlsPrimitive
-    className={cn(
+    className={cn(
-      "bg-card gap-px overflow-hidden rounded-md border p-1 shadow-none!",
+      "bg-card gap-px overflow-hidden rounded-md border p-1 shadow-none!",
-      "[&>button]:hover:bg-secondary! [&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent!",
+      "[&>button]:hover:bg-secondary! [&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent!",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
@@ -1,100 +1,100 @@
-"use client";
+"use client";
-
+
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { ArrowDownIcon } from "lucide-react";
+import { ArrowDownIcon } from "lucide-react";
-import type { ComponentProps } from "react";
+import type { ComponentProps } from "react";
-import { useCallback } from "react";
+import { useCallback } from "react";
-import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
-
+
-export type ConversationProps = ComponentProps<typeof StickToBottom>;
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
-
+
-export const Conversation = ({ className, ...props }: ConversationProps) => (
+export const Conversation = ({ className, ...props }: ConversationProps) => (
-  <StickToBottom
+  <StickToBottom
-    className={cn("relative flex-1 overflow-y-hidden", className)}
+    className={cn("relative flex-1 overflow-y-hidden", className)}
-    initial="smooth"
+    initial="smooth"
-    resize="smooth"
+    resize="smooth"
-    role="log"
+    role="log"
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type ConversationContentProps = ComponentProps<
+export type ConversationContentProps = ComponentProps<
-  typeof StickToBottom.Content
+  typeof StickToBottom.Content
->;
+>;
-
+
-export const ConversationContent = ({
+export const ConversationContent = ({
-  className,
+  className,
-  ...props
+  ...props
-}: ConversationContentProps) => (
+}: ConversationContentProps) => (
-  <StickToBottom.Content
+  <StickToBottom.Content
-    className={cn("flex flex-col gap-8 p-4", className)}
+    className={cn("flex flex-col gap-8 p-4", className)}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type ConversationEmptyStateProps = ComponentProps<"div"> & {
+export type ConversationEmptyStateProps = ComponentProps<"div"> & {
-  title?: string;
+  title?: string;
-  description?: string;
+  description?: string;
-  icon?: React.ReactNode;
+  icon?: React.ReactNode;
-};
+};
-
+
-export const ConversationEmptyState = ({
+export const ConversationEmptyState = ({
-  className,
+  className,
-  title = "No messages yet",
+  title = "No messages yet",
-  description = "Start a conversation to see messages here",
+  description = "Start a conversation to see messages here",
-  icon,
+  icon,
-  children,
+  children,
-  ...props
+  ...props
-}: ConversationEmptyStateProps) => (
+}: ConversationEmptyStateProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  >
+  >
-    {children ?? (
+    {children ?? (
-      <>
+      <>
-        {icon && <div className="text-muted-foreground">{icon}</div>}
+        {icon && <div className="text-muted-foreground">{icon}</div>}
-        <div className="space-y-1">
+        <div className="space-y-1">
-          <h3 className="text-sm font-medium">{title}</h3>
+          <h3 className="text-sm font-medium">{title}</h3>
-          {description && (
+          {description && (
-            <p className="text-muted-foreground text-sm">{description}</p>
+            <p className="text-muted-foreground text-sm">{description}</p>
-          )}
+          )}
-        </div>
+        </div>
-      </>
+      </>
-    )}
+    )}
-  </div>
+  </div>
-);
+);
-
+
-export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
-
+
-export const ConversationScrollButton = ({
+export const ConversationScrollButton = ({
-  className,
+  className,
-  ...props
+  ...props
-}: ConversationScrollButtonProps) => {
+}: ConversationScrollButtonProps) => {
-  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
-
+
-  const handleScrollToBottom = useCallback(() => {
+  const handleScrollToBottom = useCallback(() => {
-    scrollToBottom();
+    scrollToBottom();
-  }, [scrollToBottom]);
+  }, [scrollToBottom]);
-
+
-  return (
+  return (
-    !isAtBottom && (
+    !isAtBottom && (
-      <Button
+      <Button
-        className={cn(
+        className={cn(
-          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
+          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
-          className,
+          className,
-        )}
+        )}
-        onClick={handleScrollToBottom}
+        onClick={handleScrollToBottom}
-        size="icon"
+        size="icon"
-        type="button"
+        type="button"
-        variant="outline"
+        variant="outline"
-        {...props}
+        {...props}
-      >
+      >
-        <ArrowDownIcon className="size-4" />
+        <ArrowDownIcon className="size-4" />
-      </Button>
+      </Button>
-    )
+    )
-  );
+  );
-};
+};
@@ -1,140 +1,140 @@
-import {
+import {
-  BaseEdge,
+  BaseEdge,
-  type EdgeProps,
+  type EdgeProps,
-  getBezierPath,
+  getBezierPath,
-  getSimpleBezierPath,
+  getSimpleBezierPath,
-  type InternalNode,
+  type InternalNode,
-  type Node,
+  type Node,
-  Position,
+  Position,
-  useInternalNode,
+  useInternalNode,
-} from "@xyflow/react";
+} from "@xyflow/react";
-
+
-const Temporary = ({
+const Temporary = ({
-  id,
+  id,
-  sourceX,
+  sourceX,
-  sourceY,
+  sourceY,
-  targetX,
+  targetX,
-  targetY,
+  targetY,
-  sourcePosition,
+  sourcePosition,
-  targetPosition,
+  targetPosition,
-}: EdgeProps) => {
+}: EdgeProps) => {
-  const [edgePath] = getSimpleBezierPath({
+  const [edgePath] = getSimpleBezierPath({
-    sourceX,
+    sourceX,
-    sourceY,
+    sourceY,
-    sourcePosition,
+    sourcePosition,
-    targetX,
+    targetX,
-    targetY,
+    targetY,
-    targetPosition,
+    targetPosition,
-  });
+  });
-
+
-  return (
+  return (
-    <BaseEdge
+    <BaseEdge
-      className="stroke-ring stroke-1"
+      className="stroke-ring stroke-1"
-      id={id}
+      id={id}
-      path={edgePath}
+      path={edgePath}
-      style={{
+      style={{
-        strokeDasharray: "5, 5",
+        strokeDasharray: "5, 5",
-      }}
+      }}
-    />
+    />
-  );
+  );
-};
+};
-
+
-const getHandleCoordsByPosition = (
+const getHandleCoordsByPosition = (
-  node: InternalNode<Node>,
+  node: InternalNode<Node>,
-  handlePosition: Position,
+  handlePosition: Position,
-) => {
+) => {
-  // Choose the handle type based on position - Left is for target, Right is for source
+  // Choose the handle type based on position - Left is for target, Right is for source
-  const handleType = handlePosition === Position.Left ? "target" : "source";
+  const handleType = handlePosition === Position.Left ? "target" : "source";
-
+
-  const handle = node.internals.handleBounds?.[handleType]?.find(
+  const handle = node.internals.handleBounds?.[handleType]?.find(
-    (h) => h.position === handlePosition,
+    (h) => h.position === handlePosition,
-  );
+  );
-
+
-  if (!handle) {
+  if (!handle) {
-    return [0, 0] as const;
+    return [0, 0] as const;
-  }
+  }
-
+
-  let offsetX = handle.width / 2;
+  let offsetX = handle.width / 2;
-  let offsetY = handle.height / 2;
+  let offsetY = handle.height / 2;
-
+
-  // this is a tiny detail to make the markerEnd of an edge visible.
+  // this is a tiny detail to make the markerEnd of an edge visible.
-  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
+  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
-  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
+  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
-  switch (handlePosition) {
+  switch (handlePosition) {
-    case Position.Left:
+    case Position.Left:
-      offsetX = 0;
+      offsetX = 0;
-      break;
+      break;
-    case Position.Right:
+    case Position.Right:
-      offsetX = handle.width;
+      offsetX = handle.width;
-      break;
+      break;
-    case Position.Top:
+    case Position.Top:
-      offsetY = 0;
+      offsetY = 0;
-      break;
+      break;
-    case Position.Bottom:
+    case Position.Bottom:
-      offsetY = handle.height;
+      offsetY = handle.height;
-      break;
+      break;
-    default:
+    default:
-      throw new Error(`Invalid handle position: ${handlePosition}`);
+      throw new Error(`Invalid handle position: ${handlePosition}`);
-  }
+  }
-
+
-  const x = node.internals.positionAbsolute.x + handle.x + offsetX;
+  const x = node.internals.positionAbsolute.x + handle.x + offsetX;
-  const y = node.internals.positionAbsolute.y + handle.y + offsetY;
+  const y = node.internals.positionAbsolute.y + handle.y + offsetY;
-
+
-  return [x, y] as const;
+  return [x, y] as const;
-};
+};
-
+
-const getEdgeParams = (
+const getEdgeParams = (
-  source: InternalNode<Node>,
+  source: InternalNode<Node>,
-  target: InternalNode<Node>,
+  target: InternalNode<Node>,
-) => {
+) => {
-  const sourcePos = Position.Right;
+  const sourcePos = Position.Right;
-  const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
+  const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
-  const targetPos = Position.Left;
+  const targetPos = Position.Left;
-  const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
+  const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
-
+
-  return {
+  return {
-    sx,
+    sx,
-    sy,
+    sy,
-    tx,
+    tx,
-    ty,
+    ty,
-    sourcePos,
+    sourcePos,
-    targetPos,
+    targetPos,
-  };
+  };
-};
+};
-
+
-const Animated = ({ id, source, target, markerEnd, style }: EdgeProps) => {
+const Animated = ({ id, source, target, markerEnd, style }: EdgeProps) => {
-  const sourceNode = useInternalNode(source);
+  const sourceNode = useInternalNode(source);
-  const targetNode = useInternalNode(target);
+  const targetNode = useInternalNode(target);
-
+
-  if (!(sourceNode && targetNode)) {
+  if (!(sourceNode && targetNode)) {
-    return null;
+    return null;
-  }
+  }
-
+
-  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
-    sourceNode,
+    sourceNode,
-    targetNode,
+    targetNode,
-  );
+  );
-
+
-  const [edgePath] = getBezierPath({
+  const [edgePath] = getBezierPath({
-    sourceX: sx,
+    sourceX: sx,
-    sourceY: sy,
+    sourceY: sy,
-    sourcePosition: sourcePos,
+    sourcePosition: sourcePos,
-    targetX: tx,
+    targetX: tx,
-    targetY: ty,
+    targetY: ty,
-    targetPosition: targetPos,
+    targetPosition: targetPos,
-  });
+  });
-
+
-  return (
+  return (
-    <>
+    <>
-      <BaseEdge id={id} markerEnd={markerEnd} path={edgePath} style={style} />
+      <BaseEdge id={id} markerEnd={markerEnd} path={edgePath} style={style} />
-      <circle fill="var(--primary)" r="4">
+      <circle fill="var(--primary)" r="4">
-        <animateMotion dur="2s" path={edgePath} repeatCount="indefinite" />
+        <animateMotion dur="2s" path={edgePath} repeatCount="indefinite" />
-      </circle>
+      </circle>
-    </>
+    </>
-  );
+  );
-};
+};
-
+
-export const Edge = {
+export const Edge = {
-  Temporary,
+  Temporary,
-  Animated,
+  Animated,
-};
+};
@@ -1,24 +1,24 @@
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import type { Experimental_GeneratedImage } from "ai";
+import type { Experimental_GeneratedImage } from "ai";
-
+
-export type ImageProps = Experimental_GeneratedImage & {
+export type ImageProps = Experimental_GeneratedImage & {
-  className?: string;
+  className?: string;
-  alt?: string;
+  alt?: string;
-};
+};
-
+
-export const Image = ({
+export const Image = ({
-  base64,
+  base64,
-  uint8Array,
+  uint8Array,
-  mediaType,
+  mediaType,
-  ...props
+  ...props
-}: ImageProps) => (
+}: ImageProps) => (
-  <img
+  <img
-    {...props}
+    {...props}
-    alt={props.alt}
+    alt={props.alt}
-    className={cn(
+    className={cn(
-      "h-auto max-w-full overflow-hidden rounded-md",
+      "h-auto max-w-full overflow-hidden rounded-md",
-      props.className,
+      props.className,
-    )}
+    )}
-    src={`data:${mediaType};base64,${base64}`}
+    src={`data:${mediaType};base64,${base64}`}
-  />
+  />
-);
+);
@@ -1,96 +1,96 @@
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import type { HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
-
+
-type LoaderIconProps = {
+type LoaderIconProps = {
-  size?: number;
+  size?: number;
-};
+};
-
+
-const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
+const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
-  <svg
+  <svg
-    height={size}
+    height={size}
-    strokeLinejoin="round"
+    strokeLinejoin="round"
-    style={{ color: "currentcolor" }}
+    style={{ color: "currentcolor" }}
-    viewBox="0 0 16 16"
+    viewBox="0 0 16 16"
-    width={size}
+    width={size}
-  >
+  >
-    <title>Loader</title>
+    <title>Loader</title>
-    <g clipPath="url(#clip0_2393_1490)">
+    <g clipPath="url(#clip0_2393_1490)">
-      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
-      <path
+      <path
-        d="M8 16V12"
+        d="M8 16V12"
-        opacity="0.5"
+        opacity="0.5"
-        stroke="currentColor"
+        stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth="1.5"
-      />
+      />
-      <path
+      <path
-        d="M3.29773 1.52783L5.64887 4.7639"
+        d="M3.29773 1.52783L5.64887 4.7639"
-        opacity="0.9"
+        opacity="0.9"
-        stroke="currentColor"
+        stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth="1.5"
-      />
+      />
-      <path
+      <path
-        d="M12.7023 1.52783L10.3511 4.7639"
+        d="M12.7023 1.52783L10.3511 4.7639"
-        opacity="0.1"
+        opacity="0.1"
-        stroke="currentColor"
+        stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth="1.5"
-      />
+      />
-      <path
+      <path
-        d="M12.7023 14.472L10.3511 11.236"
+        d="M12.7023 14.472L10.3511 11.236"
-        opacity="0.4"
+        opacity="0.4"
-        stroke="currentColor"
+        stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth="1.5"
-      />
+      />
-      <path
+      <path
-        d="M3.29773 14.472L5.64887 11.236"
+        d="M3.29773 14.472L5.64887 11.236"
-        opacity="0.6"
+        opacity="0.6"
-        stroke="currentColor"
+        stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth="1.5"
-      />
+      />
-      <path
+      <path
-        d="M15.6085 5.52783L11.8043 6.7639"
+        d="M15.6085 5.52783L11.8043 6.7639"
-        opacity="0.2"
+        opacity="0.2"
-        stroke="currentColor"
+        stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth="1.5"
-      />
+      />
-      <path
+      <path
-        d="M0.391602 10.472L4.19583 9.23598"
+        d="M0.391602 10.472L4.19583 9.23598"
-        opacity="0.7"
+        opacity="0.7"
-        stroke="currentColor"
+        stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth="1.5"
-      />
+      />
-      <path
+      <path
-        d="M15.6085 10.4722L11.8043 9.2361"
+        d="M15.6085 10.4722L11.8043 9.2361"
-        opacity="0.3"
+        opacity="0.3"
-        stroke="currentColor"
+        stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth="1.5"
-      />
+      />
-      <path
+      <path
-        d="M0.391602 5.52783L4.19583 6.7639"
+        d="M0.391602 5.52783L4.19583 6.7639"
-        opacity="0.8"
+        opacity="0.8"
-        stroke="currentColor"
+        stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth="1.5"
-      />
+      />
-    </g>
+    </g>
-    <defs>
+    <defs>
-      <clipPath id="clip0_2393_1490">
+      <clipPath id="clip0_2393_1490">
-        <rect fill="white" height="16" width="16" />
+        <rect fill="white" height="16" width="16" />
-      </clipPath>
+      </clipPath>
-    </defs>
+    </defs>
-  </svg>
+  </svg>
-);
+);
-
+
-export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
-  size?: number;
+  size?: number;
-};
+};
-
+
-export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "inline-flex animate-spin items-center justify-center",
+      "inline-flex animate-spin items-center justify-center",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  >
+  >
-    <LoaderIcon size={size} />
+    <LoaderIcon size={size} />
-  </div>
+  </div>
-);
+);
@@ -1,446 +1,446 @@
-"use client";
+"use client";
-
+
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group";
+import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group";
-import {
+import {
-  Tooltip,
+  Tooltip,
-  TooltipContent,
+  TooltipContent,
-  TooltipProvider,
+  TooltipProvider,
-  TooltipTrigger,
+  TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import type { FileUIPart, UIMessage } from "ai";
+import type { FileUIPart, UIMessage } from "ai";
-import {
+import {
-  ChevronLeftIcon,
+  ChevronLeftIcon,
-  ChevronRightIcon,
+  ChevronRightIcon,
-  PaperclipIcon,
+  PaperclipIcon,
-  XIcon,
+  XIcon,
-} from "lucide-react";
+} from "lucide-react";
-import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
+import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
-import { createContext, memo, useContext, useEffect, useState } from "react";
+import { createContext, memo, useContext, useEffect, useState } from "react";
-import { Streamdown } from "streamdown";
+import { Streamdown } from "streamdown";
-
+
-export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
-  from: UIMessage["role"];
+  from: UIMessage["role"];
-};
+};
-
+
-export const Message = ({ className, from, ...props }: MessageProps) => (
+export const Message = ({ className, from, ...props }: MessageProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "group flex w-full flex-col gap-2",
+      "group flex w-full flex-col gap-2",
-      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
+      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
-
+
-export const MessageContent = ({
+export const MessageContent = ({
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: MessageContentProps) => (
+}: MessageContentProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-visible",
+      "is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-visible",
-      "group-[.is-user]:overflow-hidden",
+      "group-[.is-user]:overflow-hidden",
-      "group-[.is-user]:bg-secondary group-[.is-user]:text-foreground group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:px-4 group-[.is-user]:py-3",
+      "group-[.is-user]:bg-secondary group-[.is-user]:text-foreground group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:px-4 group-[.is-user]:py-3",
-      "group-[.is-assistant]:text-foreground",
+      "group-[.is-assistant]:text-foreground",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  >
+  >
-    {children}
+    {children}
-  </div>
+  </div>
-);
+);
-
+
-export type MessageActionsProps = ComponentProps<"div">;
+export type MessageActionsProps = ComponentProps<"div">;
-
+
-export const MessageActions = ({
+export const MessageActions = ({
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: MessageActionsProps) => (
+}: MessageActionsProps) => (
-  <div className={cn("flex items-center gap-1", className)} {...props}>
+  <div className={cn("flex items-center gap-1", className)} {...props}>
-    {children}
+    {children}
-  </div>
+  </div>
-);
+);
-
+
-export type MessageActionProps = ComponentProps<typeof Button> & {
+export type MessageActionProps = ComponentProps<typeof Button> & {
-  tooltip?: string;
+  tooltip?: string;
-  label?: string;
+  label?: string;
-};
+};
-
+
-export const MessageAction = ({
+export const MessageAction = ({
-  tooltip,
+  tooltip,
-  children,
+  children,
-  label,
+  label,
-  variant = "ghost",
+  variant = "ghost",
-  size = "icon-sm",
+  size = "icon-sm",
-  ...props
+  ...props
-}: MessageActionProps) => {
+}: MessageActionProps) => {
-  const button = (
+  const button = (
-    <Button size={size} type="button" variant={variant} {...props}>
+    <Button size={size} type="button" variant={variant} {...props}>
-      {children}
+      {children}
-      <span className="sr-only">{label || tooltip}</span>
+      <span className="sr-only">{label || tooltip}</span>
-    </Button>
+    </Button>
-  );
+  );
-
+
-  if (tooltip) {
+  if (tooltip) {
-    return (
+    return (
-      <TooltipProvider>
+      <TooltipProvider>
-        <Tooltip>
+        <Tooltip>
-          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
-          <TooltipContent>
+          <TooltipContent>
-            <p>{tooltip}</p>
+            <p>{tooltip}</p>
-          </TooltipContent>
+          </TooltipContent>
-        </Tooltip>
+        </Tooltip>
-      </TooltipProvider>
+      </TooltipProvider>
-    );
+    );
-  }
+  }
-
+
-  return button;
+  return button;
-};
+};
-
+
-type MessageBranchContextType = {
+type MessageBranchContextType = {
-  currentBranch: number;
+  currentBranch: number;
-  totalBranches: number;
+  totalBranches: number;
-  goToPrevious: () => void;
+  goToPrevious: () => void;
-  goToNext: () => void;
+  goToNext: () => void;
-  branches: ReactElement[];
+  branches: ReactElement[];
-  setBranches: (branches: ReactElement[]) => void;
+  setBranches: (branches: ReactElement[]) => void;
-};
+};
-
+
-const MessageBranchContext = createContext<MessageBranchContextType | null>(
+const MessageBranchContext = createContext<MessageBranchContextType | null>(
-  null,
+  null,
-);
+);
-
+
-const useMessageBranch = () => {
+const useMessageBranch = () => {
-  const context = useContext(MessageBranchContext);
+  const context = useContext(MessageBranchContext);
-
+
-  if (!context) {
+  if (!context) {
-    throw new Error(
+    throw new Error(
-      "MessageBranch components must be used within MessageBranch",
+      "MessageBranch components must be used within MessageBranch",
-    );
+    );
-  }
+  }
-
+
-  return context;
+  return context;
-};
+};
-
+
-export type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+export type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
-  defaultBranch?: number;
+  defaultBranch?: number;
-  onBranchChange?: (branchIndex: number) => void;
+  onBranchChange?: (branchIndex: number) => void;
-};
+};
-
+
-export const MessageBranch = ({
+export const MessageBranch = ({
-  defaultBranch = 0,
+  defaultBranch = 0,
-  onBranchChange,
+  onBranchChange,
-  className,
+  className,
-  ...props
+  ...props
-}: MessageBranchProps) => {
+}: MessageBranchProps) => {
-  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
-  const [branches, setBranches] = useState<ReactElement[]>([]);
+  const [branches, setBranches] = useState<ReactElement[]>([]);
-
+
-  const handleBranchChange = (newBranch: number) => {
+  const handleBranchChange = (newBranch: number) => {
-    setCurrentBranch(newBranch);
+    setCurrentBranch(newBranch);
-    onBranchChange?.(newBranch);
+    onBranchChange?.(newBranch);
-  };
+  };
-
+
-  const goToPrevious = () => {
+  const goToPrevious = () => {
-    const newBranch =
+    const newBranch =
-      currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+      currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
-    handleBranchChange(newBranch);
+    handleBranchChange(newBranch);
-  };
+  };
-
+
-  const goToNext = () => {
+  const goToNext = () => {
-    const newBranch =
+    const newBranch =
-      currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+      currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
-    handleBranchChange(newBranch);
+    handleBranchChange(newBranch);
-  };
+  };
-
+
-  const contextValue: MessageBranchContextType = {
+  const contextValue: MessageBranchContextType = {
-    currentBranch,
+    currentBranch,
-    totalBranches: branches.length,
+    totalBranches: branches.length,
-    goToPrevious,
+    goToPrevious,
-    goToNext,
+    goToNext,
-    branches,
+    branches,
-    setBranches,
+    setBranches,
-  };
+  };
-
+
-  return (
+  return (
-    <MessageBranchContext.Provider value={contextValue}>
+    <MessageBranchContext.Provider value={contextValue}>
-      <div
+      <div
-        className={cn("grid w-full gap-2 [&>div]:pb-0", className)}
+        className={cn("grid w-full gap-2 [&>div]:pb-0", className)}
-        {...props}
+        {...props}
-      />
+      />
-    </MessageBranchContext.Provider>
+    </MessageBranchContext.Provider>
-  );
+  );
-};
+};
-
+
-export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
-
+
-export const MessageBranchContent = ({
+export const MessageBranchContent = ({
-  children,
+  children,
-  ...props
+  ...props
-}: MessageBranchContentProps) => {
+}: MessageBranchContentProps) => {
-  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const { currentBranch, setBranches, branches } = useMessageBranch();
-  const childrenArray = Array.isArray(children) ? children : [children];
+  const childrenArray = Array.isArray(children) ? children : [children];
-
+
-  // Use useEffect to update branches when they change
+  // Use useEffect to update branches when they change
-  useEffect(() => {
+  useEffect(() => {
-    if (branches.length !== childrenArray.length) {
+    if (branches.length !== childrenArray.length) {
-      setBranches(childrenArray);
+      setBranches(childrenArray);
-    }
+    }
-  }, [childrenArray, branches, setBranches]);
+  }, [childrenArray, branches, setBranches]);
-
+
-  return childrenArray.map((branch, index) => (
+  return childrenArray.map((branch, index) => (
-    <div
+    <div
-      className={cn(
+      className={cn(
-        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
-        index === currentBranch ? "block" : "hidden",
+        index === currentBranch ? "block" : "hidden",
-      )}
+      )}
-      key={branch.key}
+      key={branch.key}
-      {...props}
+      {...props}
-    >
+    >
-      {branch}
+      {branch}
-    </div>
+    </div>
-  ));
+  ));
-};
+};
-
+
-export type MessageBranchSelectorProps = HTMLAttributes<HTMLDivElement> & {
+export type MessageBranchSelectorProps = HTMLAttributes<HTMLDivElement> & {
-  from: UIMessage["role"];
+  from: UIMessage["role"];
-};
+};
-
+
-export const MessageBranchSelector = ({
+export const MessageBranchSelector = ({
-  className,
+  className,
-  from,
+  from,
-  ...props
+  ...props
-}: MessageBranchSelectorProps) => {
+}: MessageBranchSelectorProps) => {
-  const { totalBranches } = useMessageBranch();
+  const { totalBranches } = useMessageBranch();
-
+
-  // Don't render if there's only one branch
+  // Don't render if there's only one branch
-  if (totalBranches <= 1) {
+  if (totalBranches <= 1) {
-    return null;
+    return null;
-  }
+  }
-
+
-  return (
+  return (
-    <ButtonGroup
+    <ButtonGroup
-      className="[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md"
+      className="[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md"
-      orientation="horizontal"
+      orientation="horizontal"
-      {...props}
+      {...props}
-    />
+    />
-  );
+  );
-};
+};
-
+
-export type MessageBranchPreviousProps = ComponentProps<typeof Button>;
+export type MessageBranchPreviousProps = ComponentProps<typeof Button>;
-
+
-export const MessageBranchPrevious = ({
+export const MessageBranchPrevious = ({
-  children,
+  children,
-  ...props
+  ...props
-}: MessageBranchPreviousProps) => {
+}: MessageBranchPreviousProps) => {
-  const { goToPrevious, totalBranches } = useMessageBranch();
+  const { goToPrevious, totalBranches } = useMessageBranch();
-
+
-  return (
+  return (
-    <Button
+    <Button
-      aria-label="Previous branch"
+      aria-label="Previous branch"
-      disabled={totalBranches <= 1}
+      disabled={totalBranches <= 1}
-      onClick={goToPrevious}
+      onClick={goToPrevious}
-      size="icon-sm"
+      size="icon-sm"
-      type="button"
+      type="button"
-      variant="ghost"
+      variant="ghost"
-      {...props}
+      {...props}
-    >
+    >
-      {children ?? <ChevronLeftIcon size={14} />}
+      {children ?? <ChevronLeftIcon size={14} />}
-    </Button>
+    </Button>
-  );
+  );
-};
+};
-
+
-export type MessageBranchNextProps = ComponentProps<typeof Button>;
+export type MessageBranchNextProps = ComponentProps<typeof Button>;
-
+
-export const MessageBranchNext = ({
+export const MessageBranchNext = ({
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: MessageBranchNextProps) => {
+}: MessageBranchNextProps) => {
-  const { goToNext, totalBranches } = useMessageBranch();
+  const { goToNext, totalBranches } = useMessageBranch();
-
+
-  return (
+  return (
-    <Button
+    <Button
-      aria-label="Next branch"
+      aria-label="Next branch"
-      disabled={totalBranches <= 1}
+      disabled={totalBranches <= 1}
-      onClick={goToNext}
+      onClick={goToNext}
-      size="icon-sm"
+      size="icon-sm"
-      type="button"
+      type="button"
-      variant="ghost"
+      variant="ghost"
-      {...props}
+      {...props}
-    >
+    >
-      {children ?? <ChevronRightIcon size={14} />}
+      {children ?? <ChevronRightIcon size={14} />}
-    </Button>
+    </Button>
-  );
+  );
-};
+};
-
+
-export type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+export type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
-
+
-export const MessageBranchPage = ({
+export const MessageBranchPage = ({
-  className,
+  className,
-  ...props
+  ...props
-}: MessageBranchPageProps) => {
+}: MessageBranchPageProps) => {
-  const { currentBranch, totalBranches } = useMessageBranch();
+  const { currentBranch, totalBranches } = useMessageBranch();
-
+
-  return (
+  return (
-    <ButtonGroupText
+    <ButtonGroupText
-      className={cn(
+      className={cn(
-        "text-muted-foreground border-none bg-transparent shadow-none",
+        "text-muted-foreground border-none bg-transparent shadow-none",
-        className,
+        className,
-      )}
+      )}
-      {...props}
+      {...props}
-    >
+    >
-      {currentBranch + 1} of {totalBranches}
+      {currentBranch + 1} of {totalBranches}
-    </ButtonGroupText>
+    </ButtonGroupText>
-  );
+  );
-};
+};
-
+
-export type MessageResponseProps = ComponentProps<typeof Streamdown>;
+export type MessageResponseProps = ComponentProps<typeof Streamdown>;
-
+
-export const MessageResponse = memo(
+export const MessageResponse = memo(
-  ({ className, ...props }: MessageResponseProps) => (
+  ({ className, ...props }: MessageResponseProps) => (
-    <Streamdown
+    <Streamdown
-      className={cn(
+      className={cn(
-        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
-        className,
+        className,
-      )}
+      )}
-      {...props}
+      {...props}
-    />
+    />
-  ),
+  ),
-  (prevProps, nextProps) => prevProps.children === nextProps.children,
+  (prevProps, nextProps) => prevProps.children === nextProps.children,
-);
+);
-
+
-MessageResponse.displayName = "MessageResponse";
+MessageResponse.displayName = "MessageResponse";
-
+
-export type MessageAttachmentProps = HTMLAttributes<HTMLDivElement> & {
+export type MessageAttachmentProps = HTMLAttributes<HTMLDivElement> & {
-  data: FileUIPart;
+  data: FileUIPart;
-  className?: string;
+  className?: string;
-  onRemove?: () => void;
+  onRemove?: () => void;
-};
+};
-
+
-export function MessageAttachment({
+export function MessageAttachment({
-  data,
+  data,
-  className,
+  className,
-  onRemove,
+  onRemove,
-  ...props
+  ...props
-}: MessageAttachmentProps) {
+}: MessageAttachmentProps) {
-  const filename = data.filename || "";
+  const filename = data.filename || "";
-  const mediaType =
+  const mediaType =
-    data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+    data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
-  const isImage = mediaType === "image";
+  const isImage = mediaType === "image";
-  const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+  const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
-
+
-  return (
+  return (
-    <div
+    <div
-      className={cn(
+      className={cn(
-        "group relative size-24 overflow-hidden rounded-lg",
+        "group relative size-24 overflow-hidden rounded-lg",
-        className,
+        className,
-      )}
+      )}
-      {...props}
+      {...props}
-    >
+    >
-      {isImage ? (
+      {isImage ? (
-        <>
+        <>
-          <img
+          <img
-            alt={filename || "attachment"}
+            alt={filename || "attachment"}
-            className="size-full object-cover"
+            className="size-full object-cover"
-            height={100}
+            height={100}
-            src={data.url}
+            src={data.url}
-            width={100}
+            width={100}
-          />
+          />
-          {onRemove && (
+          {onRemove && (
-            <Button
+            <Button
-              aria-label="Remove attachment"
+              aria-label="Remove attachment"
-              className="bg-background/80 hover:bg-background absolute top-2 right-2 size-6 rounded-full p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 [&>svg]:size-3"
+              className="bg-background/80 hover:bg-background absolute top-2 right-2 size-6 rounded-full p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 [&>svg]:size-3"
-              onClick={(e) => {
+              onClick={(e) => {
-                e.stopPropagation();
+                e.stopPropagation();
-                onRemove();
+                onRemove();
-              }}
+              }}
-              type="button"
+              type="button"
-              variant="ghost"
+              variant="ghost"
-            >
+            >
-              <XIcon />
+              <XIcon />
-              <span className="sr-only">Remove</span>
+              <span className="sr-only">Remove</span>
-            </Button>
+            </Button>
-          )}
+          )}
-        </>
+        </>
-      ) : (
+      ) : (
-        <>
+        <>
-          <Tooltip>
+          <Tooltip>
-            <TooltipTrigger asChild>
+            <TooltipTrigger asChild>
-              <div className="bg-muted text-muted-foreground flex size-full shrink-0 items-center justify-center rounded-lg">
+              <div className="bg-muted text-muted-foreground flex size-full shrink-0 items-center justify-center rounded-lg">
-                <PaperclipIcon className="size-4" />
+                <PaperclipIcon className="size-4" />
-              </div>
+              </div>
-            </TooltipTrigger>
+            </TooltipTrigger>
-            <TooltipContent>
+            <TooltipContent>
-              <p>{attachmentLabel}</p>
+              <p>{attachmentLabel}</p>
-            </TooltipContent>
+            </TooltipContent>
-          </Tooltip>
+          </Tooltip>
-          {onRemove && (
+          {onRemove && (
-            <Button
+            <Button
-              aria-label="Remove attachment"
+              aria-label="Remove attachment"
-              className="hover:bg-accent size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity group-hover:opacity-100 [&>svg]:size-3"
+              className="hover:bg-accent size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity group-hover:opacity-100 [&>svg]:size-3"
-              onClick={(e) => {
+              onClick={(e) => {
-                e.stopPropagation();
+                e.stopPropagation();
-                onRemove();
+                onRemove();
-              }}
+              }}
-              type="button"
+              type="button"
-              variant="ghost"
+              variant="ghost"
-            >
+            >
-              <XIcon />
+              <XIcon />
-              <span className="sr-only">Remove</span>
+              <span className="sr-only">Remove</span>
-            </Button>
+            </Button>
-          )}
+          )}
-        </>
+        </>
-      )}
+      )}
-    </div>
+    </div>
-  );
+  );
-}
+}
-
+
-export type MessageAttachmentsProps = ComponentProps<"div">;
+export type MessageAttachmentsProps = ComponentProps<"div">;
-
+
-export function MessageAttachments({
+export function MessageAttachments({
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: MessageAttachmentsProps) {
+}: MessageAttachmentsProps) {
-  if (!children) {
+  if (!children) {
-    return null;
+    return null;
-  }
+  }
-
+
-  return (
+  return (
-    <div
+    <div
-      className={cn(
+      className={cn(
-        "ml-auto flex w-fit flex-wrap items-start gap-2",
+        "ml-auto flex w-fit flex-wrap items-start gap-2",
-        className,
+        className,
-      )}
+      )}
-      {...props}
+      {...props}
-    >
+    >
-      {children}
+      {children}
-    </div>
+    </div>
-  );
+  );
-}
+}
-
+
-export type MessageToolbarProps = ComponentProps<"div">;
+export type MessageToolbarProps = ComponentProps<"div">;
-
+
-export const MessageToolbar = ({
+export const MessageToolbar = ({
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: MessageToolbarProps) => (
+}: MessageToolbarProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "mt-4 flex w-full items-center justify-between gap-4",
+      "mt-4 flex w-full items-center justify-between gap-4",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  >
+  >
-    {children}
+    {children}
-  </div>
+  </div>
-);
+);
@@ -1,208 +1,208 @@
-import {
+import {
-  Command,
+  Command,
-  CommandDialog,
+  CommandDialog,
-  CommandEmpty,
+  CommandEmpty,
-  CommandGroup,
+  CommandGroup,
-  CommandInput,
+  CommandInput,
-  CommandItem,
+  CommandItem,
-  CommandList,
+  CommandList,
-  CommandSeparator,
+  CommandSeparator,
-  CommandShortcut,
+  CommandShortcut,
-} from "@/components/ui/command";
+} from "@/components/ui/command";
-import {
+import {
-  Dialog,
+  Dialog,
-  DialogContent,
+  DialogContent,
-  DialogTitle,
+  DialogTitle,
-  DialogTrigger,
+  DialogTrigger,
-} from "@/components/ui/dialog";
+} from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import type { ComponentProps, ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
-
+
-export type ModelSelectorProps = ComponentProps<typeof Dialog>;
+export type ModelSelectorProps = ComponentProps<typeof Dialog>;
-
+
-export const ModelSelector = (props: ModelSelectorProps) => (
+export const ModelSelector = (props: ModelSelectorProps) => (
-  <Dialog {...props} />
+  <Dialog {...props} />
-);
+);
-
+
-export type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
+export type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
-
+
-export const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (
+export const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (
-  <DialogTrigger {...props} />
+  <DialogTrigger {...props} />
-);
+);
-
+
-export type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
+export type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
-  title?: ReactNode;
+  title?: ReactNode;
-};
+};
-
+
-export const ModelSelectorContent = ({
+export const ModelSelectorContent = ({
-  className,
+  className,
-  children,
+  children,
-  title = "Model Selector",
+  title = "Model Selector",
-  ...props
+  ...props
-}: ModelSelectorContentProps) => (
+}: ModelSelectorContentProps) => (
-  <DialogContent className={cn("p-0", className)} {...props}>
+  <DialogContent className={cn("p-0", className)} {...props}>
-    <DialogTitle className="sr-only">{title}</DialogTitle>
+    <DialogTitle className="sr-only">{title}</DialogTitle>
-    <Command className="**:data-[slot=command-input-wrapper]:h-auto">
+    <Command className="**:data-[slot=command-input-wrapper]:h-auto">
-      {children}
+      {children}
-    </Command>
+    </Command>
-  </DialogContent>
+  </DialogContent>
-);
+);
-
+
-export type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>;
+export type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>;
-
+
-export const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (
+export const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (
-  <CommandDialog {...props} />
+  <CommandDialog {...props} />
-);
+);
-
+
-export type ModelSelectorInputProps = ComponentProps<typeof CommandInput>;
+export type ModelSelectorInputProps = ComponentProps<typeof CommandInput>;
-
+
-export const ModelSelectorInput = ({
+export const ModelSelectorInput = ({
-  className,
+  className,
-  ...props
+  ...props
-}: ModelSelectorInputProps) => (
+}: ModelSelectorInputProps) => (
-  <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
+  <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
-);
+);
-
+
-export type ModelSelectorListProps = ComponentProps<typeof CommandList>;
+export type ModelSelectorListProps = ComponentProps<typeof CommandList>;
-
+
-export const ModelSelectorList = (props: ModelSelectorListProps) => (
+export const ModelSelectorList = (props: ModelSelectorListProps) => (
-  <CommandList {...props} />
+  <CommandList {...props} />
-);
+);
-
+
-export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
-
+
-export const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => (
+export const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => (
-  <CommandEmpty {...props} />
+  <CommandEmpty {...props} />
-);
+);
-
+
-export type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>;
+export type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>;
-
+
-export const ModelSelectorGroup = (props: ModelSelectorGroupProps) => (
+export const ModelSelectorGroup = (props: ModelSelectorGroupProps) => (
-  <CommandGroup {...props} />
+  <CommandGroup {...props} />
-);
+);
-
+
-export type ModelSelectorItemProps = ComponentProps<typeof CommandItem>;
+export type ModelSelectorItemProps = ComponentProps<typeof CommandItem>;
-
+
-export const ModelSelectorItem = (props: ModelSelectorItemProps) => (
+export const ModelSelectorItem = (props: ModelSelectorItemProps) => (
-  <CommandItem {...props} />
+  <CommandItem {...props} />
-);
+);
-
+
-export type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
+export type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
-
+
-export const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (
+export const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (
-  <CommandShortcut {...props} />
+  <CommandShortcut {...props} />
-);
+);
-
+
-export type ModelSelectorSeparatorProps = ComponentProps<
+export type ModelSelectorSeparatorProps = ComponentProps<
-  typeof CommandSeparator
+  typeof CommandSeparator
->;
+>;
-
+
-export const ModelSelectorSeparator = (props: ModelSelectorSeparatorProps) => (
+export const ModelSelectorSeparator = (props: ModelSelectorSeparatorProps) => (
-  <CommandSeparator {...props} />
+  <CommandSeparator {...props} />
-);
+);
-
+
-export type ModelSelectorLogoProps = Omit<
+export type ModelSelectorLogoProps = Omit<
-  ComponentProps<"img">,
+  ComponentProps<"img">,
-  "src" | "alt"
+  "src" | "alt"
-> & {
+> & {
-  provider:
+  provider:
-    | "moonshotai-cn"
+    | "moonshotai-cn"
-    | "lucidquery"
+    | "lucidquery"
-    | "moonshotai"
+    | "moonshotai"
-    | "zai-coding-plan"
+    | "zai-coding-plan"
-    | "alibaba"
+    | "alibaba"
-    | "xai"
+    | "xai"
-    | "vultr"
+    | "vultr"
-    | "nvidia"
+    | "nvidia"
-    | "upstage"
+    | "upstage"
-    | "groq"
+    | "groq"
-    | "github-copilot"
+    | "github-copilot"
-    | "mistral"
+    | "mistral"
-    | "vercel"
+    | "vercel"
-    | "nebius"
+    | "nebius"
-    | "deepseek"
+    | "deepseek"
-    | "alibaba-cn"
+    | "alibaba-cn"
-    | "google-vertex-anthropic"
+    | "google-vertex-anthropic"
-    | "venice"
+    | "venice"
-    | "chutes"
+    | "chutes"
-    | "cortecs"
+    | "cortecs"
-    | "github-models"
+    | "github-models"
-    | "togetherai"
+    | "togetherai"
-    | "azure"
+    | "azure"
-    | "baseten"
+    | "baseten"
-    | "huggingface"
+    | "huggingface"
-    | "opencode"
+    | "opencode"
-    | "fastrouter"
+    | "fastrouter"
-    | "google"
+    | "google"
-    | "google-vertex"
+    | "google-vertex"
-    | "cloudflare-workers-ai"
+    | "cloudflare-workers-ai"
-    | "inception"
+    | "inception"
-    | "wandb"
+    | "wandb"
-    | "openai"
+    | "openai"
-    | "zhipuai-coding-plan"
+    | "zhipuai-coding-plan"
-    | "perplexity"
+    | "perplexity"
-    | "openrouter"
+    | "openrouter"
-    | "zenmux"
+    | "zenmux"
-    | "v0"
+    | "v0"
-    | "iflowcn"
+    | "iflowcn"
-    | "synthetic"
+    | "synthetic"
-    | "deepinfra"
+    | "deepinfra"
-    | "zhipuai"
+    | "zhipuai"
-    | "submodel"
+    | "submodel"
-    | "zai"
+    | "zai"
-    | "inference"
+    | "inference"
-    | "requesty"
+    | "requesty"
-    | "morph"
+    | "morph"
-    | "lmstudio"
+    | "lmstudio"
-    | "anthropic"
+    | "anthropic"
-    | "aihubmix"
+    | "aihubmix"
-    | "fireworks-ai"
+    | "fireworks-ai"
-    | "modelscope"
+    | "modelscope"
-    | "llama"
+    | "llama"
-    | "scaleway"
+    | "scaleway"
-    | "amazon-bedrock"
+    | "amazon-bedrock"
-    | "cerebras"
+    | "cerebras"
-    | (string & {});
+    | (string & {});
-};
+};
-
+
-export const ModelSelectorLogo = ({
+export const ModelSelectorLogo = ({
-  provider,
+  provider,
-  className,
+  className,
-  ...props
+  ...props
-}: ModelSelectorLogoProps) => (
+}: ModelSelectorLogoProps) => (
-  <img
+  <img
-    {...props}
+    {...props}
-    alt={`${provider} logo`}
+    alt={`${provider} logo`}
-    className={cn("size-3 dark:invert", className)}
+    className={cn("size-3 dark:invert", className)}
-    height={12}
+    height={12}
-    src={`https://models.dev/logos/${provider}.svg`}
+    src={`https://models.dev/logos/${provider}.svg`}
-    width={12}
+    width={12}
-  />
+  />
-);
+);
-
+
-export type ModelSelectorLogoGroupProps = ComponentProps<"div">;
+export type ModelSelectorLogoGroupProps = ComponentProps<"div">;
-
+
-export const ModelSelectorLogoGroup = ({
+export const ModelSelectorLogoGroup = ({
-  className,
+  className,
-  ...props
+  ...props
-}: ModelSelectorLogoGroupProps) => (
+}: ModelSelectorLogoGroupProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "[&>img]:bg-background dark:[&>img]:bg-foreground flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:p-px [&>img]:ring-1",
+      "[&>img]:bg-background dark:[&>img]:bg-foreground flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:p-px [&>img]:ring-1",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type ModelSelectorNameProps = ComponentProps<"span">;
+export type ModelSelectorNameProps = ComponentProps<"span">;
-
+
-export const ModelSelectorName = ({
+export const ModelSelectorName = ({
-  className,
+  className,
-  ...props
+  ...props
-}: ModelSelectorNameProps) => (
+}: ModelSelectorNameProps) => (
-  <span
+  <span
-    className={cn("flex-1 truncate text-left text-xs", className)}
+    className={cn("flex-1 truncate text-left text-xs", className)}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
@@ -1,71 +1,71 @@
-import {
+import {
-  Card,
+  Card,
-  CardAction,
+  CardAction,
-  CardContent,
+  CardContent,
-  CardDescription,
+  CardDescription,
-  CardFooter,
+  CardFooter,
-  CardHeader,
+  CardHeader,
-  CardTitle,
+  CardTitle,
-} from "@/components/ui/card";
+} from "@/components/ui/card";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { Handle, Position } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
-import type { ComponentProps } from "react";
+import type { ComponentProps } from "react";
-
+
-export type NodeProps = ComponentProps<typeof Card> & {
+export type NodeProps = ComponentProps<typeof Card> & {
-  handles: {
+  handles: {
-    target: boolean;
+    target: boolean;
-    source: boolean;
+    source: boolean;
-  };
+  };
-};
+};
-
+
-export const Node = ({ handles, className, ...props }: NodeProps) => (
+export const Node = ({ handles, className, ...props }: NodeProps) => (
-  <Card
+  <Card
-    className={cn(
+    className={cn(
-      "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",
+      "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  >
+  >
-    {handles.target && <Handle position={Position.Left} type="target" />}
+    {handles.target && <Handle position={Position.Left} type="target" />}
-    {handles.source && <Handle position={Position.Right} type="source" />}
+    {handles.source && <Handle position={Position.Right} type="source" />}
-    {props.children}
+    {props.children}
-  </Card>
+  </Card>
-);
+);
-
+
-export type NodeHeaderProps = ComponentProps<typeof CardHeader>;
+export type NodeHeaderProps = ComponentProps<typeof CardHeader>;
-
+
-export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (
+export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (
-  <CardHeader
+  <CardHeader
-    className={cn("bg-secondary gap-0.5 rounded-t-md border-b p-3!", className)}
+    className={cn("bg-secondary gap-0.5 rounded-t-md border-b p-3!", className)}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type NodeTitleProps = ComponentProps<typeof CardTitle>;
+export type NodeTitleProps = ComponentProps<typeof CardTitle>;
-
+
-export const NodeTitle = (props: NodeTitleProps) => <CardTitle {...props} />;
+export const NodeTitle = (props: NodeTitleProps) => <CardTitle {...props} />;
-
+
-export type NodeDescriptionProps = ComponentProps<typeof CardDescription>;
+export type NodeDescriptionProps = ComponentProps<typeof CardDescription>;
-
+
-export const NodeDescription = (props: NodeDescriptionProps) => (
+export const NodeDescription = (props: NodeDescriptionProps) => (
-  <CardDescription {...props} />
+  <CardDescription {...props} />
-);
+);
-
+
-export type NodeActionProps = ComponentProps<typeof CardAction>;
+export type NodeActionProps = ComponentProps<typeof CardAction>;
-
+
-export const NodeAction = (props: NodeActionProps) => <CardAction {...props} />;
+export const NodeAction = (props: NodeActionProps) => <CardAction {...props} />;
-
+
-export type NodeContentProps = ComponentProps<typeof CardContent>;
+export type NodeContentProps = ComponentProps<typeof CardContent>;
-
+
-export const NodeContent = ({ className, ...props }: NodeContentProps) => (
+export const NodeContent = ({ className, ...props }: NodeContentProps) => (
-  <CardContent className={cn("p-3", className)} {...props} />
+  <CardContent className={cn("p-3", className)} {...props} />
-);
+);
-
+
-export type NodeFooterProps = ComponentProps<typeof CardFooter>;
+export type NodeFooterProps = ComponentProps<typeof CardFooter>;
-
+
-export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
+export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
-  <CardFooter
+  <CardFooter
-    className={cn("bg-secondary rounded-b-md border-t p-3!", className)}
+    className={cn("bg-secondary rounded-b-md border-t p-3!", className)}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
@@ -1,365 +1,365 @@
-"use client";
+"use client";
-
+
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import {
+import {
-  DropdownMenu,
+  DropdownMenu,
-  DropdownMenuContent,
+  DropdownMenuContent,
-  DropdownMenuItem,
+  DropdownMenuItem,
-  DropdownMenuLabel,
+  DropdownMenuLabel,
-  DropdownMenuSeparator,
+  DropdownMenuSeparator,
-  DropdownMenuTrigger,
+  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import {
+import {
-  ChevronDownIcon,
+  ChevronDownIcon,
-  ExternalLinkIcon,
+  ExternalLinkIcon,
-  MessageCircleIcon,
+  MessageCircleIcon,
-} from "lucide-react";
+} from "lucide-react";
-import { type ComponentProps, createContext, useContext } from "react";
+import { type ComponentProps, createContext, useContext } from "react";
-
+
-const providers = {
+const providers = {
-  github: {
+  github: {
-    title: "Open in GitHub",
+    title: "Open in GitHub",
-    createUrl: (url: string) => url,
+    createUrl: (url: string) => url,
-    icon: (
+    icon: (
-      <svg fill="currentColor" role="img" viewBox="0 0 24 24">
+      <svg fill="currentColor" role="img" viewBox="0 0 24 24">
-        <title>GitHub</title>
+        <title>GitHub</title>
-        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-      </svg>
+      </svg>
-    ),
+    ),
-  },
+  },
-  scira: {
+  scira: {
-    title: "Open in Scira",
+    title: "Open in Scira",
-    createUrl: (q: string) =>
+    createUrl: (q: string) =>
-      `https://scira.ai/?${new URLSearchParams({
+      `https://scira.ai/?${new URLSearchParams({
-        q,
+        q,
-      })}`,
+      })}`,
-    icon: (
+    icon: (
-      <svg
+      <svg
-        fill="none"
+        fill="none"
-        height="934"
+        height="934"
-        viewBox="0 0 910 934"
+        viewBox="0 0 910 934"
-        width="910"
+        width="910"
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
-      >
+      >
-        <title>Scira AI</title>
+        <title>Scira AI</title>
-        <path
+        <path
-          d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
+          d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
-          fill="currentColor"
+          fill="currentColor"
-          stroke="currentColor"
+          stroke="currentColor"
-          strokeLinejoin="round"
+          strokeLinejoin="round"
-          strokeWidth="8"
+          strokeWidth="8"
-        />
+        />
-        <path
+        <path
-          d="M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z"
+          d="M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z"
-          fill="currentColor"
+          fill="currentColor"
-          stroke="currentColor"
+          stroke="currentColor"
-          strokeLinejoin="round"
+          strokeLinejoin="round"
-          strokeWidth="8"
+          strokeWidth="8"
-        />
+        />
-        <path
+        <path
-          d="M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z"
+          d="M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z"
-          stroke="currentColor"
+          stroke="currentColor"
-          strokeLinejoin="round"
+          strokeLinejoin="round"
-          strokeWidth="20"
+          strokeWidth="20"
-        />
+        />
-        <path
+        <path
-          d="M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z"
+          d="M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z"
-          stroke="currentColor"
+          stroke="currentColor"
-          strokeLinejoin="round"
+          strokeLinejoin="round"
-          strokeWidth="20"
+          strokeWidth="20"
-        />
+        />
-        <path
+        <path
-          d="M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z"
+          d="M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z"
-          fill="currentColor"
+          fill="currentColor"
-          stroke="currentColor"
+          stroke="currentColor"
-          strokeLinejoin="round"
+          strokeLinejoin="round"
-          strokeWidth="8"
+          strokeWidth="8"
-        />
+        />
-        <path
+        <path
-          d="M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z"
+          d="M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z"
-          fill="currentColor"
+          fill="currentColor"
-          stroke="currentColor"
+          stroke="currentColor"
-          strokeLinejoin="round"
+          strokeLinejoin="round"
-          strokeWidth="8"
+          strokeWidth="8"
-        />
+        />
-        <path
+        <path
-          d="M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442"
+          d="M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442"
-          stroke="currentColor"
+          stroke="currentColor"
-          strokeLinecap="round"
+          strokeLinecap="round"
-          strokeLinejoin="round"
+          strokeLinejoin="round"
-          strokeWidth="30"
+          strokeWidth="30"
-        />
+        />
-      </svg>
+      </svg>
-    ),
+    ),
-  },
+  },
-  chatgpt: {
+  chatgpt: {
-    title: "Open in ChatGPT",
+    title: "Open in ChatGPT",
-    createUrl: (prompt: string) =>
+    createUrl: (prompt: string) =>
-      `https://chatgpt.com/?${new URLSearchParams({
+      `https://chatgpt.com/?${new URLSearchParams({
-        hints: "search",
+        hints: "search",
-        prompt,
+        prompt,
-      })}`,
+      })}`,
-    icon: (
+    icon: (
-      <svg
+      <svg
-        fill="currentColor"
+        fill="currentColor"
-        role="img"
+        role="img"
-        viewBox="0 0 24 24"
+        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
-      >
+      >
-        <title>OpenAI</title>
+        <title>OpenAI</title>
-        <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+        <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-      </svg>
+      </svg>
-    ),
+    ),
-  },
+  },
-  claude: {
+  claude: {
-    title: "Open in Claude",
+    title: "Open in Claude",
-    createUrl: (q: string) =>
+    createUrl: (q: string) =>
-      `https://claude.ai/new?${new URLSearchParams({
+      `https://claude.ai/new?${new URLSearchParams({
-        q,
+        q,
-      })}`,
+      })}`,
-    icon: (
+    icon: (
-      <svg
+      <svg
-        fill="currentColor"
+        fill="currentColor"
-        role="img"
+        role="img"
-        viewBox="0 0 12 12"
+        viewBox="0 0 12 12"
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
-      >
+      >
-        <title>Claude</title>
+        <title>Claude</title>
-        <path
+        <path
-          clipRule="evenodd"
+          clipRule="evenodd"
-          d="M2.3545 7.9775L4.7145 6.654L4.7545 6.539L4.7145 6.475H4.6L4.205 6.451L2.856 6.4145L1.6865 6.366L0.5535 6.305L0.268 6.2445L0 5.892L0.0275 5.716L0.2675 5.5555L0.6105 5.5855L1.3705 5.637L2.5095 5.716L3.3355 5.7645L4.56 5.892H4.7545L4.782 5.8135L4.715 5.7645L4.6635 5.716L3.4845 4.918L2.2085 4.074L1.5405 3.588L1.1785 3.3425L0.9965 3.1115L0.9175 2.6075L1.2455 2.2465L1.686 2.2765L1.7985 2.307L2.245 2.65L3.199 3.388L4.4445 4.3045L4.627 4.4565L4.6995 4.405L4.709 4.3685L4.627 4.2315L3.9495 3.0085L3.2265 1.7635L2.9045 1.2475L2.8195 0.938C2.78711 0.819128 2.76965 0.696687 2.7675 0.5735L3.1415 0.067L3.348 0L3.846 0.067L4.056 0.249L4.366 0.956L4.867 2.0705L5.6445 3.5855L5.8725 4.0345L5.994 4.4505L6.0395 4.578H6.1185V4.505L6.1825 3.652L6.301 2.6045L6.416 1.257L6.456 0.877L6.644 0.422L7.0175 0.176L7.3095 0.316L7.5495 0.6585L7.516 0.8805L7.373 1.806L7.0935 3.2575L6.9115 4.2285H7.0175L7.139 4.1075L7.6315 3.4545L8.4575 2.4225L8.8225 2.0125L9.2475 1.5605L9.521 1.345H10.0375L10.4175 1.9095L10.2475 2.4925L9.7155 3.166L9.275 3.737L8.643 4.587L8.248 5.267L8.2845 5.322L8.3785 5.312L9.8065 5.009L10.578 4.869L11.4985 4.7115L11.915 4.9055L11.9605 5.103L11.7965 5.5065L10.812 5.7495L9.6575 5.9805L7.938 6.387L7.917 6.402L7.9415 6.4325L8.716 6.5055L9.047 6.5235H9.858L11.368 6.636L11.763 6.897L12 7.216L11.9605 7.4585L11.353 7.7685L10.533 7.574L8.6185 7.119L7.9625 6.9545H7.8715V7.0095L8.418 7.5435L9.421 8.4485L10.6755 9.6135L10.739 9.9025L10.578 10.13L10.408 10.1055L9.3055 9.277L8.88 8.9035L7.917 8.0935H7.853V8.1785L8.075 8.503L9.2475 10.2635L9.3085 10.8035L9.2235 10.98L8.9195 11.0865L8.5855 11.0255L7.8985 10.063L7.191 8.9795L6.6195 8.008L6.5495 8.048L6.2125 11.675L6.0545 11.86L5.69 12L5.3865 11.7695L5.2255 11.396L5.3865 10.658L5.581 9.696L5.7385 8.931L5.8815 7.981L5.9665 7.665L5.9605 7.644L5.8905 7.653L5.1735 8.6365L4.0835 10.109L3.2205 11.0315L3.0135 11.1135L2.655 10.9285L2.6885 10.5975L2.889 10.303L4.083 8.785L4.803 7.844L5.268 7.301L5.265 7.222H5.2375L2.066 9.28L1.501 9.353L1.2575 9.125L1.288 8.752L1.4035 8.6305L2.3575 7.9745L2.3545 7.9775Z"
+          d="M2.3545 7.9775L4.7145 6.654L4.7545 6.539L4.7145 6.475H4.6L4.205 6.451L2.856 6.4145L1.6865 6.366L0.5535 6.305L0.268 6.2445L0 5.892L0.0275 5.716L0.2675 5.5555L0.6105 5.5855L1.3705 5.637L2.5095 5.716L3.3355 5.7645L4.56 5.892H4.7545L4.782 5.8135L4.715 5.7645L4.6635 5.716L3.4845 4.918L2.2085 4.074L1.5405 3.588L1.1785 3.3425L0.9965 3.1115L0.9175 2.6075L1.2455 2.2465L1.686 2.2765L1.7985 2.307L2.245 2.65L3.199 3.388L4.4445 4.3045L4.627 4.4565L4.6995 4.405L4.709 4.3685L4.627 4.2315L3.9495 3.0085L3.2265 1.7635L2.9045 1.2475L2.8195 0.938C2.78711 0.819128 2.76965 0.696687 2.7675 0.5735L3.1415 0.067L3.348 0L3.846 0.067L4.056 0.249L4.366 0.956L4.867 2.0705L5.6445 3.5855L5.8725 4.0345L5.994 4.4505L6.0395 4.578H6.1185V4.505L6.1825 3.652L6.301 2.6045L6.416 1.257L6.456 0.877L6.644 0.422L7.0175 0.176L7.3095 0.316L7.5495 0.6585L7.516 0.8805L7.373 1.806L7.0935 3.2575L6.9115 4.2285H7.0175L7.139 4.1075L7.6315 3.4545L8.4575 2.4225L8.8225 2.0125L9.2475 1.5605L9.521 1.345H10.0375L10.4175 1.9095L10.2475 2.4925L9.7155 3.166L9.275 3.737L8.643 4.587L8.248 5.267L8.2845 5.322L8.3785 5.312L9.8065 5.009L10.578 4.869L11.4985 4.7115L11.915 4.9055L11.9605 5.103L11.7965 5.5065L10.812 5.7495L9.6575 5.9805L7.938 6.387L7.917 6.402L7.9415 6.4325L8.716 6.5055L9.047 6.5235H9.858L11.368 6.636L11.763 6.897L12 7.216L11.9605 7.4585L11.353 7.7685L10.533 7.574L8.6185 7.119L7.9625 6.9545H7.8715V7.0095L8.418 7.5435L9.421 8.4485L10.6755 9.6135L10.739 9.9025L10.578 10.13L10.408 10.1055L9.3055 9.277L8.88 8.9035L7.917 8.0935H7.853V8.1785L8.075 8.503L9.2475 10.2635L9.3085 10.8035L9.2235 10.98L8.9195 11.0865L8.5855 11.0255L7.8985 10.063L7.191 8.9795L6.6195 8.008L6.5495 8.048L6.2125 11.675L6.0545 11.86L5.69 12L5.3865 11.7695L5.2255 11.396L5.3865 10.658L5.581 9.696L5.7385 8.931L5.8815 7.981L5.9665 7.665L5.9605 7.644L5.8905 7.653L5.1735 8.6365L4.0835 10.109L3.2205 11.0315L3.0135 11.1135L2.655 10.9285L2.6885 10.5975L2.889 10.303L4.083 8.785L4.803 7.844L5.268 7.301L5.265 7.222H5.2375L2.066 9.28L1.501 9.353L1.2575 9.125L1.288 8.752L1.4035 8.6305L2.3575 7.9745L2.3545 7.9775Z"
-          fillRule="evenodd"
+          fillRule="evenodd"
-        />
+        />
-      </svg>
+      </svg>
-    ),
+    ),
-  },
+  },
-  t3: {
+  t3: {
-    title: "Open in T3 Chat",
+    title: "Open in T3 Chat",
-    createUrl: (q: string) =>
+    createUrl: (q: string) =>
-      `https://t3.chat/new?${new URLSearchParams({
+      `https://t3.chat/new?${new URLSearchParams({
-        q,
+        q,
-      })}`,
+      })}`,
-    icon: <MessageCircleIcon />,
+    icon: <MessageCircleIcon />,
-  },
+  },
-  v0: {
+  v0: {
-    title: "Open in v0",
+    title: "Open in v0",
-    createUrl: (q: string) =>
+    createUrl: (q: string) =>
-      `https://v0.app?${new URLSearchParams({
+      `https://v0.app?${new URLSearchParams({
-        q,
+        q,
-      })}`,
+      })}`,
-    icon: (
+    icon: (
-      <svg
+      <svg
-        fill="currentColor"
+        fill="currentColor"
-        viewBox="0 0 147 70"
+        viewBox="0 0 147 70"
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
-      >
+      >
-        <title>v0</title>
+        <title>v0</title>
-        <path d="M56 50.2031V14H70V60.1562C70 65.5928 65.5928 70 60.1562 70C57.5605 70 54.9982 68.9992 53.1562 67.1573L0 14H19.7969L56 50.2031Z" />
+        <path d="M56 50.2031V14H70V60.1562C70 65.5928 65.5928 70 60.1562 70C57.5605 70 54.9982 68.9992 53.1562 67.1573L0 14H19.7969L56 50.2031Z" />
-        <path d="M147 56H133V23.9531L100.953 56H133V70H96.6875C85.8144 70 77 61.1856 77 50.3125V14H91V46.1562L123.156 14H91V0H127.312C138.186 0 147 8.81439 147 19.6875V56Z" />
+        <path d="M147 56H133V23.9531L100.953 56H133V70H96.6875C85.8144 70 77 61.1856 77 50.3125V14H91V46.1562L123.156 14H91V0H127.312C138.186 0 147 8.81439 147 19.6875V56Z" />
-      </svg>
+      </svg>
-    ),
+    ),
-  },
+  },
-  cursor: {
+  cursor: {
-    title: "Open in Cursor",
+    title: "Open in Cursor",
-    createUrl: (text: string) => {
+    createUrl: (text: string) => {
-      const url = new URL("https://cursor.com/link/prompt");
+      const url = new URL("https://cursor.com/link/prompt");
-      url.searchParams.set("text", text);
+      url.searchParams.set("text", text);
-      return url.toString();
+      return url.toString();
-    },
+    },
-    icon: (
+    icon: (
-      <svg
+      <svg
-        version="1.1"
+        version="1.1"
-        viewBox="0 0 466.73 532.09"
+        viewBox="0 0 466.73 532.09"
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
-      >
+      >
-        <title>Cursor</title>
+        <title>Cursor</title>
-        <path
+        <path
-          d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"
+          d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"
-          fill="currentColor"
+          fill="currentColor"
-        />
+        />
-      </svg>
+      </svg>
-    ),
+    ),
-  },
+  },
-};
+};
-
+
-const OpenInContext = createContext<{ query: string } | undefined>(undefined);
+const OpenInContext = createContext<{ query: string } | undefined>(undefined);
-
+
-const useOpenInContext = () => {
+const useOpenInContext = () => {
-  const context = useContext(OpenInContext);
+  const context = useContext(OpenInContext);
-  if (!context) {
+  if (!context) {
-    throw new Error("OpenIn components must be used within an OpenIn provider");
+    throw new Error("OpenIn components must be used within an OpenIn provider");
-  }
+  }
-  return context;
+  return context;
-};
+};
-
+
-export type OpenInProps = ComponentProps<typeof DropdownMenu> & {
+export type OpenInProps = ComponentProps<typeof DropdownMenu> & {
-  query: string;
+  query: string;
-};
+};
-
+
-export const OpenIn = ({ query, ...props }: OpenInProps) => (
+export const OpenIn = ({ query, ...props }: OpenInProps) => (
-  <OpenInContext.Provider value={{ query }}>
+  <OpenInContext.Provider value={{ query }}>
-    <DropdownMenu {...props} />
+    <DropdownMenu {...props} />
-  </OpenInContext.Provider>
+  </OpenInContext.Provider>
-);
+);
-
+
-export type OpenInContentProps = ComponentProps<typeof DropdownMenuContent>;
+export type OpenInContentProps = ComponentProps<typeof DropdownMenuContent>;
-
+
-export const OpenInContent = ({ className, ...props }: OpenInContentProps) => (
+export const OpenInContent = ({ className, ...props }: OpenInContentProps) => (
-  <DropdownMenuContent
+  <DropdownMenuContent
-    align="start"
+    align="start"
-    className={cn("w-[240px]", className)}
+    className={cn("w-[240px]", className)}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type OpenInItemProps = ComponentProps<typeof DropdownMenuItem>;
+export type OpenInItemProps = ComponentProps<typeof DropdownMenuItem>;
-
+
-export const OpenInItem = (props: OpenInItemProps) => (
+export const OpenInItem = (props: OpenInItemProps) => (
-  <DropdownMenuItem {...props} />
+  <DropdownMenuItem {...props} />
-);
+);
-
+
-export type OpenInLabelProps = ComponentProps<typeof DropdownMenuLabel>;
+export type OpenInLabelProps = ComponentProps<typeof DropdownMenuLabel>;
-
+
-export const OpenInLabel = (props: OpenInLabelProps) => (
+export const OpenInLabel = (props: OpenInLabelProps) => (
-  <DropdownMenuLabel {...props} />
+  <DropdownMenuLabel {...props} />
-);
+);
-
+
-export type OpenInSeparatorProps = ComponentProps<typeof DropdownMenuSeparator>;
+export type OpenInSeparatorProps = ComponentProps<typeof DropdownMenuSeparator>;
-
+
-export const OpenInSeparator = (props: OpenInSeparatorProps) => (
+export const OpenInSeparator = (props: OpenInSeparatorProps) => (
-  <DropdownMenuSeparator {...props} />
+  <DropdownMenuSeparator {...props} />
-);
+);
-
+
-export type OpenInTriggerProps = ComponentProps<typeof DropdownMenuTrigger>;
+export type OpenInTriggerProps = ComponentProps<typeof DropdownMenuTrigger>;
-
+
-export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => (
+export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => (
-  <DropdownMenuTrigger {...props} asChild>
+  <DropdownMenuTrigger {...props} asChild>
-    {children ?? (
+    {children ?? (
-      <Button type="button" variant="outline">
+      <Button type="button" variant="outline">
-        Open in chat
+        Open in chat
-        <ChevronDownIcon className="size-4" />
+        <ChevronDownIcon className="size-4" />
-      </Button>
+      </Button>
-    )}
+    )}
-  </DropdownMenuTrigger>
+  </DropdownMenuTrigger>
-);
+);
-
+
-export type OpenInChatGPTProps = ComponentProps<typeof DropdownMenuItem>;
+export type OpenInChatGPTProps = ComponentProps<typeof DropdownMenuItem>;
-
+
-export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
+export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
-  const { query } = useOpenInContext();
+  const { query } = useOpenInContext();
-  return (
+  return (
-    <DropdownMenuItem asChild {...props}>
+    <DropdownMenuItem asChild {...props}>
-      <a
+      <a
-        className="flex items-center gap-2"
+        className="flex items-center gap-2"
-        href={providers.chatgpt.createUrl(query)}
+        href={providers.chatgpt.createUrl(query)}
-        rel="noopener noreferrer"
+        rel="noopener noreferrer"
-        target="_blank"
+        target="_blank"
-      >
+      >
-        <span className="shrink-0">{providers.chatgpt.icon}</span>
+        <span className="shrink-0">{providers.chatgpt.icon}</span>
-        <span className="flex-1">{providers.chatgpt.title}</span>
+        <span className="flex-1">{providers.chatgpt.title}</span>
-        <ExternalLinkIcon className="size-4 shrink-0" />
+        <ExternalLinkIcon className="size-4 shrink-0" />
-      </a>
+      </a>
-    </DropdownMenuItem>
+    </DropdownMenuItem>
-  );
+  );
-};
+};
-
+
-export type OpenInClaudeProps = ComponentProps<typeof DropdownMenuItem>;
+export type OpenInClaudeProps = ComponentProps<typeof DropdownMenuItem>;
-
+
-export const OpenInClaude = (props: OpenInClaudeProps) => {
+export const OpenInClaude = (props: OpenInClaudeProps) => {
-  const { query } = useOpenInContext();
+  const { query } = useOpenInContext();
-  return (
+  return (
-    <DropdownMenuItem asChild {...props}>
+    <DropdownMenuItem asChild {...props}>
-      <a
+      <a
-        className="flex items-center gap-2"
+        className="flex items-center gap-2"
-        href={providers.claude.createUrl(query)}
+        href={providers.claude.createUrl(query)}
-        rel="noopener noreferrer"
+        rel="noopener noreferrer"
-        target="_blank"
+        target="_blank"
-      >
+      >
-        <span className="shrink-0">{providers.claude.icon}</span>
+        <span className="shrink-0">{providers.claude.icon}</span>
-        <span className="flex-1">{providers.claude.title}</span>
+        <span className="flex-1">{providers.claude.title}</span>
-        <ExternalLinkIcon className="size-4 shrink-0" />
+        <ExternalLinkIcon className="size-4 shrink-0" />
-      </a>
+      </a>
-    </DropdownMenuItem>
+    </DropdownMenuItem>
-  );
+  );
-};
+};
-
+
-export type OpenInT3Props = ComponentProps<typeof DropdownMenuItem>;
+export type OpenInT3Props = ComponentProps<typeof DropdownMenuItem>;
-
+
-export const OpenInT3 = (props: OpenInT3Props) => {
+export const OpenInT3 = (props: OpenInT3Props) => {
-  const { query } = useOpenInContext();
+  const { query } = useOpenInContext();
-  return (
+  return (
-    <DropdownMenuItem asChild {...props}>
+    <DropdownMenuItem asChild {...props}>
-      <a
+      <a
-        className="flex items-center gap-2"
+        className="flex items-center gap-2"
-        href={providers.t3.createUrl(query)}
+        href={providers.t3.createUrl(query)}
-        rel="noopener noreferrer"
+        rel="noopener noreferrer"
-        target="_blank"
+        target="_blank"
-      >
+      >
-        <span className="shrink-0">{providers.t3.icon}</span>
+        <span className="shrink-0">{providers.t3.icon}</span>
-        <span className="flex-1">{providers.t3.title}</span>
+        <span className="flex-1">{providers.t3.title}</span>
-        <ExternalLinkIcon className="size-4 shrink-0" />
+        <ExternalLinkIcon className="size-4 shrink-0" />
-      </a>
+      </a>
-    </DropdownMenuItem>
+    </DropdownMenuItem>
-  );
+  );
-};
+};
-
+
-export type OpenInSciraProps = ComponentProps<typeof DropdownMenuItem>;
+export type OpenInSciraProps = ComponentProps<typeof DropdownMenuItem>;
-
+
-export const OpenInScira = (props: OpenInSciraProps) => {
+export const OpenInScira = (props: OpenInSciraProps) => {
-  const { query } = useOpenInContext();
+  const { query } = useOpenInContext();
-  return (
+  return (
-    <DropdownMenuItem asChild {...props}>
+    <DropdownMenuItem asChild {...props}>
-      <a
+      <a
-        className="flex items-center gap-2"
+        className="flex items-center gap-2"
-        href={providers.scira.createUrl(query)}
+        href={providers.scira.createUrl(query)}
-        rel="noopener noreferrer"
+        rel="noopener noreferrer"
-        target="_blank"
+        target="_blank"
-      >
+      >
-        <span className="shrink-0">{providers.scira.icon}</span>
+        <span className="shrink-0">{providers.scira.icon}</span>
-        <span className="flex-1">{providers.scira.title}</span>
+        <span className="flex-1">{providers.scira.title}</span>
-        <ExternalLinkIcon className="size-4 shrink-0" />
+        <ExternalLinkIcon className="size-4 shrink-0" />
-      </a>
+      </a>
-    </DropdownMenuItem>
+    </DropdownMenuItem>
-  );
+  );
-};
+};
-
+
-export type OpenInv0Props = ComponentProps<typeof DropdownMenuItem>;
+export type OpenInv0Props = ComponentProps<typeof DropdownMenuItem>;
-
+
-export const OpenInv0 = (props: OpenInv0Props) => {
+export const OpenInv0 = (props: OpenInv0Props) => {
-  const { query } = useOpenInContext();
+  const { query } = useOpenInContext();
-  return (
+  return (
-    <DropdownMenuItem asChild {...props}>
+    <DropdownMenuItem asChild {...props}>
-      <a
+      <a
-        className="flex items-center gap-2"
+        className="flex items-center gap-2"
-        href={providers.v0.createUrl(query)}
+        href={providers.v0.createUrl(query)}
-        rel="noopener noreferrer"
+        rel="noopener noreferrer"
-        target="_blank"
+        target="_blank"
-      >
+      >
-        <span className="shrink-0">{providers.v0.icon}</span>
+        <span className="shrink-0">{providers.v0.icon}</span>
-        <span className="flex-1">{providers.v0.title}</span>
+        <span className="flex-1">{providers.v0.title}</span>
-        <ExternalLinkIcon className="size-4 shrink-0" />
+        <ExternalLinkIcon className="size-4 shrink-0" />
-      </a>
+      </a>
-    </DropdownMenuItem>
+    </DropdownMenuItem>
-  );
+  );
-};
+};
-
+
-export type OpenInCursorProps = ComponentProps<typeof DropdownMenuItem>;
+export type OpenInCursorProps = ComponentProps<typeof DropdownMenuItem>;
-
+
-export const OpenInCursor = (props: OpenInCursorProps) => {
+export const OpenInCursor = (props: OpenInCursorProps) => {
-  const { query } = useOpenInContext();
+  const { query } = useOpenInContext();
-  return (
+  return (
-    <DropdownMenuItem asChild {...props}>
+    <DropdownMenuItem asChild {...props}>
-      <a
+      <a
-        className="flex items-center gap-2"
+        className="flex items-center gap-2"
-        href={providers.cursor.createUrl(query)}
+        href={providers.cursor.createUrl(query)}
-        rel="noopener noreferrer"
+        rel="noopener noreferrer"
-        target="_blank"
+        target="_blank"
-      >
+      >
-        <span className="shrink-0">{providers.cursor.icon}</span>
+        <span className="shrink-0">{providers.cursor.icon}</span>
-        <span className="flex-1">{providers.cursor.title}</span>
+        <span className="flex-1">{providers.cursor.title}</span>
-        <ExternalLinkIcon className="size-4 shrink-0" />
+        <ExternalLinkIcon className="size-4 shrink-0" />
-      </a>
+      </a>
-    </DropdownMenuItem>
+    </DropdownMenuItem>
-  );
+  );
-};
+};
@@ -1,15 +1,15 @@
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { Panel as PanelPrimitive } from "@xyflow/react";
+import { Panel as PanelPrimitive } from "@xyflow/react";
-import type { ComponentProps } from "react";
+import type { ComponentProps } from "react";
-
+
-type PanelProps = ComponentProps<typeof PanelPrimitive>;
+type PanelProps = ComponentProps<typeof PanelPrimitive>;
-
+
-export const Panel = ({ className, ...props }: PanelProps) => (
+export const Panel = ({ className, ...props }: PanelProps) => (
-  <PanelPrimitive
+  <PanelPrimitive
-    className={cn(
+    className={cn(
-      "bg-card m-4 overflow-hidden rounded-md border p-1",
+      "bg-card m-4 overflow-hidden rounded-md border p-1",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
@@ -1,142 +1,142 @@
-"use client";
+"use client";
-
+
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import {
+import {
-  Card,
+  Card,
-  CardAction,
+  CardAction,
-  CardContent,
+  CardContent,
-  CardDescription,
+  CardDescription,
-  CardFooter,
+  CardFooter,
-  CardHeader,
+  CardHeader,
-  CardTitle,
+  CardTitle,
-} from "@/components/ui/card";
+} from "@/components/ui/card";
-import {
+import {
-  Collapsible,
+  Collapsible,
-  CollapsibleContent,
+  CollapsibleContent,
-  CollapsibleTrigger,
+  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+} from "@/components/ui/collapsible";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { ChevronsUpDownIcon } from "lucide-react";
+import { ChevronsUpDownIcon } from "lucide-react";
-import type { ComponentProps } from "react";
+import type { ComponentProps } from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext } from "react";
-import { Shimmer } from "./shimmer";
+import { Shimmer } from "./shimmer";
-
+
-type PlanContextValue = {
+type PlanContextValue = {
-  isStreaming: boolean;
+  isStreaming: boolean;
-};
+};
-
+
-const PlanContext = createContext<PlanContextValue | null>(null);
+const PlanContext = createContext<PlanContextValue | null>(null);
-
+
-const usePlan = () => {
+const usePlan = () => {
-  const context = useContext(PlanContext);
+  const context = useContext(PlanContext);
-  if (!context) {
+  if (!context) {
-    throw new Error("Plan components must be used within Plan");
+    throw new Error("Plan components must be used within Plan");
-  }
+  }
-  return context;
+  return context;
-};
+};
-
+
-export type PlanProps = ComponentProps<typeof Collapsible> & {
+export type PlanProps = ComponentProps<typeof Collapsible> & {
-  isStreaming?: boolean;
+  isStreaming?: boolean;
-};
+};
-
+
-export const Plan = ({
+export const Plan = ({
-  className,
+  className,
-  isStreaming = false,
+  isStreaming = false,
-  children,
+  children,
-  ...props
+  ...props
-}: PlanProps) => (
+}: PlanProps) => (
-  <PlanContext.Provider value={{ isStreaming }}>
+  <PlanContext.Provider value={{ isStreaming }}>
-    <Collapsible asChild data-slot="plan" {...props}>
+    <Collapsible asChild data-slot="plan" {...props}>
-      <Card className={cn("shadow-none", className)}>{children}</Card>
+      <Card className={cn("shadow-none", className)}>{children}</Card>
-    </Collapsible>
+    </Collapsible>
-  </PlanContext.Provider>
+  </PlanContext.Provider>
-);
+);
-
+
-export type PlanHeaderProps = ComponentProps<typeof CardHeader>;
+export type PlanHeaderProps = ComponentProps<typeof CardHeader>;
-
+
-export const PlanHeader = ({ className, ...props }: PlanHeaderProps) => (
+export const PlanHeader = ({ className, ...props }: PlanHeaderProps) => (
-  <CardHeader
+  <CardHeader
-    className={cn("flex items-start justify-between", className)}
+    className={cn("flex items-start justify-between", className)}
-    data-slot="plan-header"
+    data-slot="plan-header"
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type PlanTitleProps = Omit<
+export type PlanTitleProps = Omit<
-  ComponentProps<typeof CardTitle>,
+  ComponentProps<typeof CardTitle>,
-  "children"
+  "children"
-> & {
+> & {
-  children: string;
+  children: string;
-};
+};
-
+
-export const PlanTitle = ({ children, ...props }: PlanTitleProps) => {
+export const PlanTitle = ({ children, ...props }: PlanTitleProps) => {
-  const { isStreaming } = usePlan();
+  const { isStreaming } = usePlan();
-
+
-  return (
+  return (
-    <CardTitle data-slot="plan-title" {...props}>
+    <CardTitle data-slot="plan-title" {...props}>
-      {isStreaming ? <Shimmer>{children}</Shimmer> : children}
+      {isStreaming ? <Shimmer>{children}</Shimmer> : children}
-    </CardTitle>
+    </CardTitle>
-  );
+  );
-};
+};
-
+
-export type PlanDescriptionProps = Omit<
+export type PlanDescriptionProps = Omit<
-  ComponentProps<typeof CardDescription>,
+  ComponentProps<typeof CardDescription>,
-  "children"
+  "children"
-> & {
+> & {
-  children: string;
+  children: string;
-};
+};
-
+
-export const PlanDescription = ({
+export const PlanDescription = ({
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: PlanDescriptionProps) => {
+}: PlanDescriptionProps) => {
-  const { isStreaming } = usePlan();
+  const { isStreaming } = usePlan();
-
+
-  return (
+  return (
-    <CardDescription
+    <CardDescription
-      className={cn("text-balance", className)}
+      className={cn("text-balance", className)}
-      data-slot="plan-description"
+      data-slot="plan-description"
-      {...props}
+      {...props}
-    >
+    >
-      {isStreaming ? <Shimmer>{children}</Shimmer> : children}
+      {isStreaming ? <Shimmer>{children}</Shimmer> : children}
-    </CardDescription>
+    </CardDescription>
-  );
+  );
-};
+};
-
+
-export type PlanActionProps = ComponentProps<typeof CardAction>;
+export type PlanActionProps = ComponentProps<typeof CardAction>;
-
+
-export const PlanAction = (props: PlanActionProps) => (
+export const PlanAction = (props: PlanActionProps) => (
-  <CardAction data-slot="plan-action" {...props} />
+  <CardAction data-slot="plan-action" {...props} />
-);
+);
-
+
-export type PlanContentProps = ComponentProps<typeof CardContent>;
+export type PlanContentProps = ComponentProps<typeof CardContent>;
-
+
-export const PlanContent = (props: PlanContentProps) => (
+export const PlanContent = (props: PlanContentProps) => (
-  <CollapsibleContent asChild>
+  <CollapsibleContent asChild>
-    <CardContent data-slot="plan-content" {...props} />
+    <CardContent data-slot="plan-content" {...props} />
-  </CollapsibleContent>
+  </CollapsibleContent>
-);
+);
-
+
-export type PlanFooterProps = ComponentProps<"div">;
+export type PlanFooterProps = ComponentProps<"div">;
-
+
-export const PlanFooter = (props: PlanFooterProps) => (
+export const PlanFooter = (props: PlanFooterProps) => (
-  <CardFooter data-slot="plan-footer" {...props} />
+  <CardFooter data-slot="plan-footer" {...props} />
-);
+);
-
+
-export type PlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+export type PlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
-
+
-export const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => (
+export const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => (
-  <CollapsibleTrigger asChild>
+  <CollapsibleTrigger asChild>
-    <Button
+    <Button
-      className={cn("size-8", className)}
+      className={cn("size-8", className)}
-      data-slot="plan-trigger"
+      data-slot="plan-trigger"
-      size="icon"
+      size="icon"
-      variant="ghost"
+      variant="ghost"
-      {...props}
+      {...props}
-    >
+    >
-      <ChevronsUpDownIcon className="size-4" />
+      <ChevronsUpDownIcon className="size-4" />
-      <span className="sr-only">Toggle plan</span>
+      <span className="sr-only">Toggle plan</span>
-    </Button>
+    </Button>
-  </CollapsibleTrigger>
+  </CollapsibleTrigger>
-);
+);
@@ -1,274 +1,274 @@
-"use client";
+"use client";
-
+
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import {
+import {
-  Collapsible,
+  Collapsible,
-  CollapsibleContent,
+  CollapsibleContent,
-  CollapsibleTrigger,
+  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+} from "@/components/ui/collapsible";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { ScrollArea } from "@/components/ui/scroll-area";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { ChevronDownIcon, PaperclipIcon } from "lucide-react";
+import { ChevronDownIcon, PaperclipIcon } from "lucide-react";
-import type { ComponentProps } from "react";
+import type { ComponentProps } from "react";
-
+
-export type QueueMessagePart = {
+export type QueueMessagePart = {
-  type: string;
+  type: string;
-  text?: string;
+  text?: string;
-  url?: string;
+  url?: string;
-  filename?: string;
+  filename?: string;
-  mediaType?: string;
+  mediaType?: string;
-};
+};
-
+
-export type QueueMessage = {
+export type QueueMessage = {
-  id: string;
+  id: string;
-  parts: QueueMessagePart[];
+  parts: QueueMessagePart[];
-};
+};
-
+
-export type QueueTodo = {
+export type QueueTodo = {
-  id: string;
+  id: string;
-  title: string;
+  title: string;
-  description?: string;
+  description?: string;
-  status?: "pending" | "completed";
+  status?: "pending" | "completed";
-};
+};
-
+
-export type QueueItemProps = ComponentProps<"li">;
+export type QueueItemProps = ComponentProps<"li">;
-
+
-export const QueueItem = ({ className, ...props }: QueueItemProps) => (
+export const QueueItem = ({ className, ...props }: QueueItemProps) => (
-  <li
+  <li
-    className={cn(
+    className={cn(
-      "group hover:bg-muted flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors",
+      "group hover:bg-muted flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type QueueItemIndicatorProps = ComponentProps<"span"> & {
+export type QueueItemIndicatorProps = ComponentProps<"span"> & {
-  completed?: boolean;
+  completed?: boolean;
-};
+};
-
+
-export const QueueItemIndicator = ({
+export const QueueItemIndicator = ({
-  completed = false,
+  completed = false,
-  className,
+  className,
-  ...props
+  ...props
-}: QueueItemIndicatorProps) => (
+}: QueueItemIndicatorProps) => (
-  <span
+  <span
-    className={cn(
+    className={cn(
-      "mt-0.5 inline-block size-2.5 rounded-full border",
+      "mt-0.5 inline-block size-2.5 rounded-full border",
-      completed
+      completed
-        ? "border-muted-foreground/20 bg-muted-foreground/10"
+        ? "border-muted-foreground/20 bg-muted-foreground/10"
-        : "border-muted-foreground/50",
+        : "border-muted-foreground/50",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type QueueItemContentProps = ComponentProps<"span"> & {
+export type QueueItemContentProps = ComponentProps<"span"> & {
-  completed?: boolean;
+  completed?: boolean;
-};
+};
-
+
-export const QueueItemContent = ({
+export const QueueItemContent = ({
-  completed = false,
+  completed = false,
-  className,
+  className,
-  ...props
+  ...props
-}: QueueItemContentProps) => (
+}: QueueItemContentProps) => (
-  <span
+  <span
-    className={cn(
+    className={cn(
-      "line-clamp-1 grow break-words",
+      "line-clamp-1 grow break-words",
-      completed
+      completed
-        ? "text-muted-foreground/50 line-through"
+        ? "text-muted-foreground/50 line-through"
-        : "text-muted-foreground",
+        : "text-muted-foreground",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type QueueItemDescriptionProps = ComponentProps<"div"> & {
+export type QueueItemDescriptionProps = ComponentProps<"div"> & {
-  completed?: boolean;
+  completed?: boolean;
-};
+};
-
+
-export const QueueItemDescription = ({
+export const QueueItemDescription = ({
-  completed = false,
+  completed = false,
-  className,
+  className,
-  ...props
+  ...props
-}: QueueItemDescriptionProps) => (
+}: QueueItemDescriptionProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "ml-6 text-xs",
+      "ml-6 text-xs",
-      completed
+      completed
-        ? "text-muted-foreground/40 line-through"
+        ? "text-muted-foreground/40 line-through"
-        : "text-muted-foreground",
+        : "text-muted-foreground",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type QueueItemActionsProps = ComponentProps<"div">;
+export type QueueItemActionsProps = ComponentProps<"div">;
-
+
-export const QueueItemActions = ({
+export const QueueItemActions = ({
-  className,
+  className,
-  ...props
+  ...props
-}: QueueItemActionsProps) => (
+}: QueueItemActionsProps) => (
-  <div className={cn("flex gap-1", className)} {...props} />
+  <div className={cn("flex gap-1", className)} {...props} />
-);
+);
-
+
-export type QueueItemActionProps = Omit<
+export type QueueItemActionProps = Omit<
-  ComponentProps<typeof Button>,
+  ComponentProps<typeof Button>,
-  "variant" | "size"
+  "variant" | "size"
->;
+>;
-
+
-export const QueueItemAction = ({
+export const QueueItemAction = ({
-  className,
+  className,
-  ...props
+  ...props
-}: QueueItemActionProps) => (
+}: QueueItemActionProps) => (
-  <Button
+  <Button
-    className={cn(
+    className={cn(
-      "text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground size-auto rounded p-1 opacity-0 transition-opacity group-hover:opacity-100",
+      "text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground size-auto rounded p-1 opacity-0 transition-opacity group-hover:opacity-100",
-      className,
+      className,
-    )}
+    )}
-    size="icon"
+    size="icon"
-    type="button"
+    type="button"
-    variant="ghost"
+    variant="ghost"
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type QueueItemAttachmentProps = ComponentProps<"div">;
+export type QueueItemAttachmentProps = ComponentProps<"div">;
-
+
-export const QueueItemAttachment = ({
+export const QueueItemAttachment = ({
-  className,
+  className,
-  ...props
+  ...props
-}: QueueItemAttachmentProps) => (
+}: QueueItemAttachmentProps) => (
-  <div className={cn("mt-1 flex flex-wrap gap-2", className)} {...props} />
+  <div className={cn("mt-1 flex flex-wrap gap-2", className)} {...props} />
-);
+);
-
+
-export type QueueItemImageProps = ComponentProps<"img">;
+export type QueueItemImageProps = ComponentProps<"img">;
-
+
-export const QueueItemImage = ({
+export const QueueItemImage = ({
-  className,
+  className,
-  ...props
+  ...props
-}: QueueItemImageProps) => (
+}: QueueItemImageProps) => (
-  <img
+  <img
-    alt=""
+    alt=""
-    className={cn("h-8 w-8 rounded border object-cover", className)}
+    className={cn("h-8 w-8 rounded border object-cover", className)}
-    height={32}
+    height={32}
-    width={32}
+    width={32}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type QueueItemFileProps = ComponentProps<"span">;
+export type QueueItemFileProps = ComponentProps<"span">;
-
+
-export const QueueItemFile = ({
+export const QueueItemFile = ({
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: QueueItemFileProps) => (
+}: QueueItemFileProps) => (
-  <span
+  <span
-    className={cn(
+    className={cn(
-      "bg-muted flex items-center gap-1 rounded border px-2 py-1 text-xs",
+      "bg-muted flex items-center gap-1 rounded border px-2 py-1 text-xs",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  >
+  >
-    <PaperclipIcon size={12} />
+    <PaperclipIcon size={12} />
-    <span className="max-w-[100px] truncate">{children}</span>
+    <span className="max-w-[100px] truncate">{children}</span>
-  </span>
+  </span>
-);
+);
-
+
-export type QueueListProps = ComponentProps<typeof ScrollArea>;
+export type QueueListProps = ComponentProps<typeof ScrollArea>;
-
+
-export const QueueList = ({
+export const QueueList = ({
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: QueueListProps) => (
+}: QueueListProps) => (
-  <ScrollArea className={cn("mt-2 -mb-1", className)} {...props}>
+  <ScrollArea className={cn("mt-2 -mb-1", className)} {...props}>
-    <div className="max-h-40 pr-4">
+    <div className="max-h-40 pr-4">
-      <ul>{children}</ul>
+      <ul>{children}</ul>
-    </div>
+    </div>
-  </ScrollArea>
+  </ScrollArea>
-);
+);
-
+
-// QueueSection - collapsible section container
+// QueueSection - collapsible section container
-export type QueueSectionProps = ComponentProps<typeof Collapsible>;
+export type QueueSectionProps = ComponentProps<typeof Collapsible>;
-
+
-export const QueueSection = ({
+export const QueueSection = ({
-  className,
+  className,
-  defaultOpen = true,
+  defaultOpen = true,
-  ...props
+  ...props
-}: QueueSectionProps) => (
+}: QueueSectionProps) => (
-  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
+  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
-);
+);
-
+
-// QueueSectionTrigger - section header/trigger
+// QueueSectionTrigger - section header/trigger
-export type QueueSectionTriggerProps = ComponentProps<"button">;
+export type QueueSectionTriggerProps = ComponentProps<"button">;
-
+
-export const QueueSectionTrigger = ({
+export const QueueSectionTrigger = ({
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: QueueSectionTriggerProps) => (
+}: QueueSectionTriggerProps) => (
-  <CollapsibleTrigger asChild>
+  <CollapsibleTrigger asChild>
-    <button
+    <button
-      className={cn(
+      className={cn(
-        "group bg-muted/40 text-muted-foreground hover:bg-muted flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm font-medium transition-colors",
+        "group bg-muted/40 text-muted-foreground hover:bg-muted flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm font-medium transition-colors",
-        className,
+        className,
-      )}
+      )}
-      type="button"
+      type="button"
-      {...props}
+      {...props}
-    >
+    >
-      {children}
+      {children}
-    </button>
+    </button>
-  </CollapsibleTrigger>
+  </CollapsibleTrigger>
-);
+);
-
+
-// QueueSectionLabel - label content with icon and count
+// QueueSectionLabel - label content with icon and count
-export type QueueSectionLabelProps = ComponentProps<"span"> & {
+export type QueueSectionLabelProps = ComponentProps<"span"> & {
-  count?: number;
+  count?: number;
-  label: string;
+  label: string;
-  icon?: React.ReactNode;
+  icon?: React.ReactNode;
-};
+};
-
+
-export const QueueSectionLabel = ({
+export const QueueSectionLabel = ({
-  count,
+  count,
-  label,
+  label,
-  icon,
+  icon,
-  className,
+  className,
-  ...props
+  ...props
-}: QueueSectionLabelProps) => (
+}: QueueSectionLabelProps) => (
-  <span className={cn("flex items-center gap-2", className)} {...props}>
+  <span className={cn("flex items-center gap-2", className)} {...props}>
-    <ChevronDownIcon className="size-4 transition-transform group-data-[state=closed]:-rotate-90" />
+    <ChevronDownIcon className="size-4 transition-transform group-data-[state=closed]:-rotate-90" />
-    {icon}
+    {icon}
-    <span>
+    <span>
-      {count} {label}
+      {count} {label}
-    </span>
+    </span>
-  </span>
+  </span>
-);
+);
-
+
-// QueueSectionContent - collapsible content area
+// QueueSectionContent - collapsible content area
-export type QueueSectionContentProps = ComponentProps<
+export type QueueSectionContentProps = ComponentProps<
-  typeof CollapsibleContent
+  typeof CollapsibleContent
->;
+>;
-
+
-export const QueueSectionContent = ({
+export const QueueSectionContent = ({
-  className,
+  className,
-  ...props
+  ...props
-}: QueueSectionContentProps) => (
+}: QueueSectionContentProps) => (
-  <CollapsibleContent className={cn(className)} {...props} />
+  <CollapsibleContent className={cn(className)} {...props} />
-);
+);
-
+
-export type QueueProps = ComponentProps<"div">;
+export type QueueProps = ComponentProps<"div">;
-
+
-export const Queue = ({ className, ...props }: QueueProps) => (
+export const Queue = ({ className, ...props }: QueueProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "border-border bg-background flex flex-col gap-2 rounded-xl border px-3 pt-2 pb-2 shadow-xs",
+      "border-border bg-background flex flex-col gap-2 rounded-xl border px-3 pt-2 pb-2 shadow-xs",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
@@ -1,188 +1,192 @@
-"use client";
+"use client";
-
+
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import {
+import {
-  Collapsible,
+  Collapsible,
-  CollapsibleContent,
+  CollapsibleContent,
-  CollapsibleTrigger,
+  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+} from "@/components/ui/collapsible";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
-import { createContext, memo, useContext, useEffect, useState } from "react";
+import { createContext, memo, useContext, useEffect, useState } from "react";
-import { Streamdown } from "streamdown";
+import { Streamdown } from "streamdown";
-import { reasoningPlugins } from "@/core/streamdown/plugins";
+import { reasoningPlugins } from "@/core/streamdown/plugins";
-import { Shimmer } from "./shimmer";
+import { Shimmer } from "./shimmer";
-
+
-type ReasoningContextValue = {
+type ReasoningContextValue = {
-  isStreaming: boolean;
+  isStreaming: boolean;
-  isOpen: boolean;
+  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
+  setIsOpen: (open: boolean) => void;
-  duration: number | undefined;
+  duration: number | undefined;
-};
+};
-
+
-const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
-
+
-export const useReasoning = () => {
+export const useReasoning = () => {
-  const context = useContext(ReasoningContext);
+  const context = useContext(ReasoningContext);
-  if (!context) {
+  if (!context) {
-    throw new Error("Reasoning components must be used within Reasoning");
+    throw new Error("Reasoning components must be used within Reasoning");
-  }
+  }
-  return context;
+  return context;
-};
+};
-
+
-export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
-  isStreaming?: boolean;
+  isStreaming?: boolean;
-  open?: boolean;
+  open?: boolean;
-  defaultOpen?: boolean;
+  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
-  duration?: number;
+  duration?: number;
-};
+};
-
+
-const AUTO_CLOSE_DELAY = 1000;
+const AUTO_CLOSE_DELAY = 1000;
-const MS_IN_S = 1000;
+const MS_IN_S = 1000;
-
+
-export const Reasoning = memo(
+export const Reasoning = memo(
-  ({
+  ({
-    className,
+    className,
-    isStreaming = false,
+    isStreaming = false,
-    open,
+    open,
-    defaultOpen = true,
+    defaultOpen = true,
-    onOpenChange,
+    onOpenChange,
-    duration: durationProp,
+    duration: durationProp,
-    children,
+    children,
-    ...props
+    ...props
-  }: ReasoningProps) => {
+  }: ReasoningProps) => {
-    const [isOpen, setIsOpen] = useControllableState({
+    const [isOpen, setIsOpen] = useControllableState({
-      prop: open,
+      prop: open,
-      defaultProp: defaultOpen,
+      defaultProp: defaultOpen,
-      onChange: onOpenChange,
+      onChange: onOpenChange,
-    });
+    });
-    const [duration, setDuration] = useControllableState({
+    const [duration, setDuration] = useControllableState({
-      prop: durationProp,
+      prop: durationProp,
-      defaultProp: undefined,
+      defaultProp: undefined,
-    });
+    });
-
+
-    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
-    const [startTime, setStartTime] = useState<number | null>(null);
+    const [startTime, setStartTime] = useState<number | null>(null);
-
+
-    // Track duration when streaming starts and ends
+    // Track duration when streaming starts and ends
-    useEffect(() => {
+    useEffect(() => {
-      if (isStreaming) {
+      if (isStreaming) {
-        if (startTime === null) {
+        if (startTime === null) {
-          setStartTime(Date.now());
+          setStartTime(Date.now());
-        }
+        }
-      } else if (startTime !== null) {
+      } else if (startTime !== null) {
-        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
-        setStartTime(null);
+        setStartTime(null);
-      }
+      }
-    }, [isStreaming, startTime, setDuration]);
+    }, [isStreaming, startTime, setDuration]);
-
+
-    // Auto-open when streaming starts, auto-close when streaming ends (once only)
+    // Auto-open when streaming starts, auto-close when streaming ends (once only)
-    useEffect(() => {
+    useEffect(() => {
-      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
-        // Add a small delay before closing to allow user to see the content
+        // Add a small delay before closing to allow user to see the content
-        const timer = setTimeout(() => {
+        const timer = setTimeout(() => {
-          setIsOpen(false);
+          setIsOpen(false);
-          setHasAutoClosed(true);
+          setHasAutoClosed(true);
-        }, AUTO_CLOSE_DELAY);
+        }, AUTO_CLOSE_DELAY);
-
+
-        return () => clearTimeout(timer);
+        return () => clearTimeout(timer);
-      }
+      }
-    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
+    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
-
+
-    const handleOpenChange = (newOpen: boolean) => {
+    const handleOpenChange = (newOpen: boolean) => {
-      setIsOpen(newOpen);
+      setIsOpen(newOpen);
-    };
+    };
-
+
-    return (
+    return (
-      <ReasoningContext.Provider
+      <ReasoningContext.Provider
-        value={{ isStreaming, isOpen, setIsOpen, duration }}
+        value={{ isStreaming, isOpen, setIsOpen, duration }}
-      >
+      >
-        <Collapsible
+        <Collapsible
-          className={cn("not-prose mb-4", className)}
+          className={cn("not-prose mb-4", className)}
-          onOpenChange={handleOpenChange}
+          onOpenChange={handleOpenChange}
-          open={isOpen}
+          open={isOpen}
-          {...props}
+          {...props}
-        >
+        >
-          {children}
+          {children}
-        </Collapsible>
+        </Collapsible>
-      </ReasoningContext.Provider>
+      </ReasoningContext.Provider>
-    );
+    );
-  },
+  },
-);
+);
-
+
-export type ReasoningTriggerProps = ComponentProps<
+export type ReasoningTriggerProps = ComponentProps<
-  typeof CollapsibleTrigger
+  typeof CollapsibleTrigger
-> & {
+> & {
-  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
-};
+};
-
+
-const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
-  if (isStreaming || duration === 0) {
+  if (isStreaming || duration === 0) {
-    return <Shimmer duration={1}>Thinking...</Shimmer>;
+    return <Shimmer duration={1}>Thinking...</Shimmer>;
-  }
+  }
-  if (duration === undefined) {
+  if (duration === undefined) {
-    return <span>Thought for a few seconds</span>;
+    return <span>Thought for a few seconds</span>;
-  }
+  }
-  return <span>Thought for {duration} seconds</span>;
+  return <span>Thought for {duration} seconds</span>;
-};
+};
-
+
-export const ReasoningTrigger = memo(
+export const ReasoningTrigger = memo(
-  ({
+  ({
-    className,
+    className,
-    children,
+    children,
-    getThinkingMessage = defaultGetThinkingMessage,
+    getThinkingMessage = defaultGetThinkingMessage,
-    ...props
+    ...props
-  }: ReasoningTriggerProps) => {
+  }: ReasoningTriggerProps) => {
-    const { isStreaming, isOpen, duration } = useReasoning();
+    const { isStreaming, isOpen, duration } = useReasoning();
-
+
-    return (
+    return (
-      <CollapsibleTrigger
+      <CollapsibleTrigger
-        className={cn(
+        className={cn(
-          "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors",
+          "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors",
-          className,
+          className,
-        )}
+        )}
-        {...props}
+        {...props}
-      >
+      >
-        {children ?? (
+        {children ?? (
-          <>
+          <>
-            <BrainIcon className="size-4" />
+            <BrainIcon className="size-4" />
-            {getThinkingMessage(isStreaming, duration)}
+            {getThinkingMessage(isStreaming, duration)}
-            <ChevronDownIcon
+            <ChevronDownIcon
-              className={cn(
+              className={cn(
-                "size-4 transition-transform",
+                "size-4 transition-transform",
-                isOpen ? "rotate-180" : "rotate-0",
+                isOpen ? "rotate-180" : "rotate-0",
-              )}
+              )}
-            />
+            />
-          </>
+          </>
-        )}
+        )}
-      </CollapsibleTrigger>
+      </CollapsibleTrigger>
-    );
+    );
-  },
+  },
-);
+);
-
+
-export type ReasoningContentProps = ComponentProps<
+export type ReasoningContentProps = ComponentProps<
-  typeof CollapsibleContent
+  typeof CollapsibleContent
-> & {
+> & {
-  children: string;
+  children: ReactNode;
-};
+};
-
+
-export const ReasoningContent = memo(
+export const ReasoningContent = memo(
-  ({ className, children, ...props }: ReasoningContentProps) => (
+  ({ className, children, ...props }: ReasoningContentProps) => (
-    <CollapsibleContent
+    <CollapsibleContent
-      className={cn(
+      className={cn(
-        "mt-4 text-sm",
+        "mt-4 text-sm",
-        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
-        className,
+        className,
-      )}
+      )}
-      {...props}
+      {...props}
-    >
+    >
-      <Streamdown {...reasoningPlugins}>{children}</Streamdown>
+      {typeof children === "string" ? (
-    </CollapsibleContent>
+        <Streamdown {...reasoningPlugins}>{children}</Streamdown>
-  ),
+      ) : (
-);
+        children
-
+      )}
-Reasoning.displayName = "Reasoning";
+    </CollapsibleContent>
-ReasoningTrigger.displayName = "ReasoningTrigger";
+  ),
-ReasoningContent.displayName = "ReasoningContent";
+);
 Reasoning.displayName = "Reasoning";
 ReasoningTrigger.displayName = "ReasoningTrigger";
 ReasoningContent.displayName = "ReasoningContent";
@@ -1,64 +1,64 @@
-"use client";
+"use client";
-
+
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { motion } from "motion/react";
+import { motion } from "motion/react";
-import {
+import {
-  type CSSProperties,
+  type CSSProperties,
-  type ElementType,
+  type ElementType,
-  type JSX,
+  type JSX,
-  memo,
+  memo,
-  useMemo,
+  useMemo,
-} from "react";
+} from "react";
-
+
-export type TextShimmerProps = {
+export type TextShimmerProps = {
-  children: string;
+  children: string;
-  as?: ElementType;
+  as?: ElementType;
-  className?: string;
+  className?: string;
-  duration?: number;
+  duration?: number;
-  spread?: number;
+  spread?: number;
-};
+};
-
+
-const ShimmerComponent = ({
+const ShimmerComponent = ({
-  children,
+  children,
-  as: Component = "p",
+  as: Component = "p",
-  className,
+  className,
-  duration = 2,
+  duration = 2,
-  spread = 2,
+  spread = 2,
-}: TextShimmerProps) => {
+}: TextShimmerProps) => {
-  const MotionComponent = motion.create(
+  const MotionComponent = motion.create(
-    Component as keyof JSX.IntrinsicElements,
+    Component as keyof JSX.IntrinsicElements,
-  );
+  );
-
+
-  const dynamicSpread = useMemo(
+  const dynamicSpread = useMemo(
-    () => (children?.length ?? 0) * spread,
+    () => (children?.length ?? 0) * spread,
-    [children, spread],
+    [children, spread],
-  );
+  );
-
+
-  return (
+  return (
-    <MotionComponent
+    <MotionComponent
-      animate={{ backgroundPosition: "0% center" }}
+      animate={{ backgroundPosition: "0% center" }}
-      className={cn(
+      className={cn(
-        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
-        "[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))]",
+        "[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))]",
-        className,
+        className,
-      )}
+      )}
-      initial={{ backgroundPosition: "100% center" }}
+      initial={{ backgroundPosition: "100% center" }}
-      style={
+      style={
-        {
+        {
-          "--spread": `${dynamicSpread}px`,
+          "--spread": `${dynamicSpread}px`,
-          backgroundImage:
+          backgroundImage:
-            "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
+            "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
-        } as CSSProperties
+        } as CSSProperties
-      }
+      }
-      transition={{
+      transition={{
-        repeat: Number.POSITIVE_INFINITY,
+        repeat: Number.POSITIVE_INFINITY,
-        duration,
+        duration,
-        ease: "linear",
+        ease: "linear",
-      }}
+      }}
-    >
+    >
-      {children}
+      {children}
-    </MotionComponent>
+    </MotionComponent>
-  );
+  );
-};
+};
-
+
-export const Shimmer = memo(ShimmerComponent);
+export const Shimmer = memo(ShimmerComponent);
@@ -1,77 +1,77 @@
-"use client";
+"use client";
-
+
-import {
+import {
-  Collapsible,
+  Collapsible,
-  CollapsibleContent,
+  CollapsibleContent,
-  CollapsibleTrigger,
+  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+} from "@/components/ui/collapsible";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { BookIcon, ChevronDownIcon } from "lucide-react";
+import { BookIcon, ChevronDownIcon } from "lucide-react";
-import type { ComponentProps } from "react";
+import type { ComponentProps } from "react";
-
+
-export type SourcesProps = ComponentProps<"div">;
+export type SourcesProps = ComponentProps<"div">;
-
+
-export const Sources = ({ className, ...props }: SourcesProps) => (
+export const Sources = ({ className, ...props }: SourcesProps) => (
-  <Collapsible
+  <Collapsible
-    className={cn("not-prose text-primary mb-4 text-xs", className)}
+    className={cn("not-prose text-primary mb-4 text-xs", className)}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
-  count: number;
+  count: number;
-};
+};
-
+
-export const SourcesTrigger = ({
+export const SourcesTrigger = ({
-  className,
+  className,
-  count,
+  count,
-  children,
+  children,
-  ...props
+  ...props
-}: SourcesTriggerProps) => (
+}: SourcesTriggerProps) => (
-  <CollapsibleTrigger
+  <CollapsibleTrigger
-    className={cn("flex items-center gap-2", className)}
+    className={cn("flex items-center gap-2", className)}
-    {...props}
+    {...props}
-  >
+  >
-    {children ?? (
+    {children ?? (
-      <>
+      <>
-        <p className="font-medium">Used {count} sources</p>
+        <p className="font-medium">Used {count} sources</p>
-        <ChevronDownIcon className="h-4 w-4" />
+        <ChevronDownIcon className="h-4 w-4" />
-      </>
+      </>
-    )}
+    )}
-  </CollapsibleTrigger>
+  </CollapsibleTrigger>
-);
+);
-
+
-export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
-
+
-export const SourcesContent = ({
+export const SourcesContent = ({
-  className,
+  className,
-  ...props
+  ...props
-}: SourcesContentProps) => (
+}: SourcesContentProps) => (
-  <CollapsibleContent
+  <CollapsibleContent
-    className={cn(
+    className={cn(
-      "mt-3 flex w-fit flex-col gap-2",
+      "mt-3 flex w-fit flex-col gap-2",
-      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
-
+
-export type SourceProps = ComponentProps<"a">;
+export type SourceProps = ComponentProps<"a">;
-
+
-export const Source = ({ href, title, children, ...props }: SourceProps) => (
+export const Source = ({ href, title, children, ...props }: SourceProps) => (
-  <a
+  <a
-    className="flex items-center gap-2"
+    className="flex items-center gap-2"
-    href={href}
+    href={href}
-    rel="noopener noreferrer"
+    rel="noopener noreferrer"
-    target="_blank"
+    target="_blank"
-    {...props}
+    {...props}
-  >
+  >
-    {children ?? (
+    {children ?? (
-      <>
+      <>
-        <BookIcon className="h-4 w-4" />
+        <BookIcon className="h-4 w-4" />
-        <span className="block font-medium">{title}</span>
+        <span className="block font-medium">{title}</span>
-      </>
+      </>
-    )}
+    )}
-  </a>
+  </a>
-);
+);
@@ -1,80 +1,80 @@
-"use client";
+"use client";
-
+
-import type { LucideIcon } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
-import { Children, type ComponentProps } from "react";
+import { Children, type ComponentProps } from "react";
-
+
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-
+
-const STAGGER_DELAY_MS = 60;
+const STAGGER_DELAY_MS = 60;
-const STAGGER_DELAY_MS_OFFSET = 250;
+const STAGGER_DELAY_MS_OFFSET = 250;
-
+
-export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
+export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
-
+
-export const Suggestions = ({
+export const Suggestions = ({
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: SuggestionsProps) => (
+}: SuggestionsProps) => (
-  <ScrollArea className="overflow-x-auto whitespace-normal" {...props}>
+  <ScrollArea className="overflow-x-auto whitespace-normal" {...props}>
-    <div
+    <div
-      className={cn("flex w-full flex-wrap items-center gap-2", className)}
+      className={cn("flex w-full flex-wrap items-center gap-2", className)}
-      data-slot="suggestions-list"
+      data-slot="suggestions-list"
-    >
+    >
-      {Children.map(children, (child, index) =>
+      {Children.map(children, (child, index) =>
-        child != null ? (
+        child != null ? (
-          <span
+          <span
-            className="animate-fade-in-up max-w-full opacity-0"
+            className="animate-fade-in-up max-w-full opacity-0"
-            style={{
+            style={{
-              animationDelay: `${STAGGER_DELAY_MS_OFFSET + index * STAGGER_DELAY_MS}ms`,
+              animationDelay: `${STAGGER_DELAY_MS_OFFSET + index * STAGGER_DELAY_MS}ms`,
-            }}
+            }}
-          >
+          >
-            {child}
+            {child}
-          </span>
+          </span>
-        ) : (
+        ) : (
-          child
+          child
-        ),
+        ),
-      )}
+      )}
-    </div>
+    </div>
-    <ScrollBar className="hidden" orientation="horizontal" />
+    <ScrollBar className="hidden" orientation="horizontal" />
-  </ScrollArea>
+  </ScrollArea>
-);
+);
-
+
-export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
-  suggestion: React.ReactNode;
+  suggestion: React.ReactNode;
-  icon?: LucideIcon;
+  icon?: LucideIcon;
-  onClick?: () => void;
+  onClick?: () => void;
-};
+};
-
+
-export const Suggestion = ({
+export const Suggestion = ({
-  suggestion,
+  suggestion,
-  onClick,
+  onClick,
-  className,
+  className,
-  icon: Icon,
+  icon: Icon,
-  variant = "outline",
+  variant = "outline",
-  size = "sm",
+  size = "sm",
-  children,
+  children,
-  ...props
+  ...props
-}: SuggestionProps) => {
+}: SuggestionProps) => {
-  const handleClick = () => {
+  const handleClick = () => {
-    onClick?.();
+    onClick?.();
-  };
+  };
-
+
-  return (
+  return (
-    <Button
+    <Button
-      className={cn(
+      className={cn(
-        "text-muted-foreground dark:bg-background h-auto max-w-full cursor-pointer rounded-full px-4 py-2 text-center text-xs font-normal whitespace-normal",
+        "text-muted-foreground dark:bg-background h-auto max-w-full cursor-pointer rounded-full px-4 py-2 text-center text-xs font-normal whitespace-normal",
-        className,
+        className,
-      )}
+      )}
-      onClick={handleClick}
+      onClick={handleClick}
-      size={size}
+      size={size}
-      type="button"
+      type="button"
-      variant={variant}
+      variant={variant}
-      {...props}
+      {...props}
-    >
+    >
-      {Icon && <Icon className="size-4" />}
+      {Icon && <Icon className="size-4" />}
-      {children ?? suggestion}
+      {children ?? suggestion}
-    </Button>
+    </Button>
-  );
+  );
-};
+};
@@ -1,87 +1,87 @@
-"use client";
+"use client";
-
+
-import {
+import {
-  Collapsible,
+  Collapsible,
-  CollapsibleContent,
+  CollapsibleContent,
-  CollapsibleTrigger,
+  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+} from "@/components/ui/collapsible";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { ChevronDownIcon, SearchIcon } from "lucide-react";
+import { ChevronDownIcon, SearchIcon } from "lucide-react";
-import type { ComponentProps } from "react";
+import type { ComponentProps } from "react";
-
+
-export type TaskItemFileProps = ComponentProps<"div">;
+export type TaskItemFileProps = ComponentProps<"div">;
-
+
-export const TaskItemFile = ({
+export const TaskItemFile = ({
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: TaskItemFileProps) => (
+}: TaskItemFileProps) => (
-  <div
+  <div
-    className={cn(
+    className={cn(
-      "bg-secondary text-foreground inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs",
+      "bg-secondary text-foreground inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  >
+  >
-    {children}
+    {children}
-  </div>
+  </div>
-);
+);
-
+
-export type TaskItemProps = ComponentProps<"div">;
+export type TaskItemProps = ComponentProps<"div">;
-
+
-export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (
+export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (
-  <div className={cn("text-muted-foreground text-sm", className)} {...props}>
+  <div className={cn("text-muted-foreground text-sm", className)} {...props}>
-    {children}
+    {children}
-  </div>
+  </div>
-);
+);
-
+
-export type TaskProps = ComponentProps<typeof Collapsible>;
+export type TaskProps = ComponentProps<typeof Collapsible>;
-
+
-export const Task = ({
+export const Task = ({
-  defaultOpen = true,
+  defaultOpen = true,
-  className,
+  className,
-  ...props
+  ...props
-}: TaskProps) => (
+}: TaskProps) => (
-  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
+  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
-);
+);
-
+
-export type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+export type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
-  title: string;
+  title: string;
-};
+};
-
+
-export const TaskTrigger = ({
+export const TaskTrigger = ({
-  children,
+  children,
-  className,
+  className,
-  title,
+  title,
-  ...props
+  ...props
-}: TaskTriggerProps) => (
+}: TaskTriggerProps) => (
-  <CollapsibleTrigger asChild className={cn("group", className)} {...props}>
+  <CollapsibleTrigger asChild className={cn("group", className)} {...props}>
-    {children ?? (
+    {children ?? (
-      <div className="text-muted-foreground hover:text-foreground flex w-full cursor-pointer items-center gap-2 text-sm transition-colors">
+      <div className="text-muted-foreground hover:text-foreground flex w-full cursor-pointer items-center gap-2 text-sm transition-colors">
-        <SearchIcon className="size-4" />
+        <SearchIcon className="size-4" />
-        <p className="text-sm">{title}</p>
+        <p className="text-sm">{title}</p>
-        <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
+        <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
-      </div>
+      </div>
-    )}
+    )}
-  </CollapsibleTrigger>
+  </CollapsibleTrigger>
-);
+);
-
+
-export type TaskContentProps = ComponentProps<typeof CollapsibleContent>;
+export type TaskContentProps = ComponentProps<typeof CollapsibleContent>;
-
+
-export const TaskContent = ({
+export const TaskContent = ({
-  children,
+  children,
-  className,
+  className,
-  ...props
+  ...props
-}: TaskContentProps) => (
+}: TaskContentProps) => (
-  <CollapsibleContent
+  <CollapsibleContent
-    className={cn(
+    className={cn(
-      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
-      className,
+      className,
-    )}
+    )}
-    {...props}
+    {...props}
-  >
+  >
-    <div className="border-muted mt-4 space-y-2 border-l-2 pl-4">
+    <div className="border-muted mt-4 space-y-2 border-l-2 pl-4">
-      {children}
+      {children}
-    </div>
+    </div>
-  </CollapsibleContent>
+  </CollapsibleContent>
-);
+);
@@ -1,16 +1,16 @@
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { NodeToolbar, Position } from "@xyflow/react";
+import { NodeToolbar, Position } from "@xyflow/react";
-import type { ComponentProps } from "react";
+import type { ComponentProps } from "react";
-
+
-type ToolbarProps = ComponentProps<typeof NodeToolbar>;
+type ToolbarProps = ComponentProps<typeof NodeToolbar>;
-
+
-export const Toolbar = ({ className, ...props }: ToolbarProps) => (
+export const Toolbar = ({ className, ...props }: ToolbarProps) => (
-  <NodeToolbar
+  <NodeToolbar
-    className={cn(
+    className={cn(
-      "bg-background flex items-center gap-1 rounded-sm border p-1.5",
+      "bg-background flex items-center gap-1 rounded-sm border p-1.5",
-      className,
+      className,
-    )}
+    )}
-    position={Position.Bottom}
+    position={Position.Bottom}
-    {...props}
+    {...props}
-  />
+  />
-);
+);
@@ -1,263 +1,263 @@
-"use client";
+"use client";
-
+
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import {
+import {
-  Collapsible,
+  Collapsible,
-  CollapsibleContent,
+  CollapsibleContent,
-  CollapsibleTrigger,
+  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+} from "@/components/ui/collapsible";
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/ui/input";
-import {
+import {
-  Tooltip,
+  Tooltip,
-  TooltipContent,
+  TooltipContent,
-  TooltipProvider,
+  TooltipProvider,
-  TooltipTrigger,
+  TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-import { ChevronDownIcon } from "lucide-react";
+import { ChevronDownIcon } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
-
+
-export type WebPreviewContextValue = {
+export type WebPreviewContextValue = {
-  url: string;
+  url: string;
-  setUrl: (url: string) => void;
+  setUrl: (url: string) => void;
-  consoleOpen: boolean;
+  consoleOpen: boolean;
-  setConsoleOpen: (open: boolean) => void;
+  setConsoleOpen: (open: boolean) => void;
-};
+};
-
+
-const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
+const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
-
+
-const useWebPreview = () => {
+const useWebPreview = () => {
-  const context = useContext(WebPreviewContext);
+  const context = useContext(WebPreviewContext);
-  if (!context) {
+  if (!context) {
-    throw new Error("WebPreview components must be used within a WebPreview");
+    throw new Error("WebPreview components must be used within a WebPreview");
-  }
+  }
-  return context;
+  return context;
-};
+};
-
+
-export type WebPreviewProps = ComponentProps<"div"> & {
+export type WebPreviewProps = ComponentProps<"div"> & {
-  defaultUrl?: string;
+  defaultUrl?: string;
-  onUrlChange?: (url: string) => void;
+  onUrlChange?: (url: string) => void;
-};
+};
-
+
-export const WebPreview = ({
+export const WebPreview = ({
-  className,
+  className,
-  children,
+  children,
-  defaultUrl = "",
+  defaultUrl = "",
-  onUrlChange,
+  onUrlChange,
-  ...props
+  ...props
-}: WebPreviewProps) => {
+}: WebPreviewProps) => {
-  const [url, setUrl] = useState(defaultUrl);
+  const [url, setUrl] = useState(defaultUrl);
-  const [consoleOpen, setConsoleOpen] = useState(false);
+  const [consoleOpen, setConsoleOpen] = useState(false);
-
+
-  const handleUrlChange = (newUrl: string) => {
+  const handleUrlChange = (newUrl: string) => {
-    setUrl(newUrl);
+    setUrl(newUrl);
-    onUrlChange?.(newUrl);
+    onUrlChange?.(newUrl);
-  };
+  };
-
+
-  const contextValue: WebPreviewContextValue = {
+  const contextValue: WebPreviewContextValue = {
-    url,
+    url,
-    setUrl: handleUrlChange,
+    setUrl: handleUrlChange,
-    consoleOpen,
+    consoleOpen,
-    setConsoleOpen,
+    setConsoleOpen,
-  };
+  };
-
+
-  return (
+  return (
-    <WebPreviewContext.Provider value={contextValue}>
+    <WebPreviewContext.Provider value={contextValue}>
-      <div
+      <div
-        className={cn(
+        className={cn(
-          "bg-card flex size-full flex-col rounded-lg border",
+          "bg-card flex size-full flex-col rounded-lg border",
-          className,
+          className,
-        )}
+        )}
-        {...props}
+        {...props}
-      >
+      >
-        {children}
+        {children}
-      </div>
+      </div>
-    </WebPreviewContext.Provider>
+    </WebPreviewContext.Provider>
-  );
+  );
-};
+};
-
+
-export type WebPreviewNavigationProps = ComponentProps<"div">;
+export type WebPreviewNavigationProps = ComponentProps<"div">;
-
+
-export const WebPreviewNavigation = ({
+export const WebPreviewNavigation = ({
-  className,
+  className,
-  children,
+  children,
-  ...props
+  ...props
-}: WebPreviewNavigationProps) => (
+}: WebPreviewNavigationProps) => (
-  <div
+  <div
-    className={cn("flex items-center gap-1 border-b p-2", className)}
+    className={cn("flex items-center gap-1 border-b p-2", className)}
-    {...props}
+    {...props}
-  >
+  >
-    {children}
+    {children}
-  </div>
+  </div>
-);
+);
-
+
-export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
+export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
-  tooltip?: string;
+  tooltip?: string;
-};
+};
-
+
-export const WebPreviewNavigationButton = ({
+export const WebPreviewNavigationButton = ({
-  onClick,
+  onClick,
-  disabled,
+  disabled,
-  tooltip,
+  tooltip,
-  children,
+  children,
-  ...props
+  ...props
-}: WebPreviewNavigationButtonProps) => (
+}: WebPreviewNavigationButtonProps) => (
-  <TooltipProvider>
+  <TooltipProvider>
-    <Tooltip>
+    <Tooltip>
-      <TooltipTrigger asChild>
+      <TooltipTrigger asChild>
-        <Button
+        <Button
-          className="hover:text-foreground h-8 w-8 p-0"
+          className="hover:text-foreground h-8 w-8 p-0"
-          disabled={disabled}
+          disabled={disabled}
-          onClick={onClick}
+          onClick={onClick}
-          size="sm"
+          size="sm"
-          variant="ghost"
+          variant="ghost"
-          {...props}
+          {...props}
-        >
+        >
-          {children}
+          {children}
-        </Button>
+        </Button>
-      </TooltipTrigger>
+      </TooltipTrigger>
-      <TooltipContent>
+      <TooltipContent>
-        <p>{tooltip}</p>
+        <p>{tooltip}</p>
-      </TooltipContent>
+      </TooltipContent>
-    </Tooltip>
+    </Tooltip>
-  </TooltipProvider>
+  </TooltipProvider>
-);
+);
-
+
-export type WebPreviewUrlProps = ComponentProps<typeof Input>;
+export type WebPreviewUrlProps = ComponentProps<typeof Input>;
-
+
-export const WebPreviewUrl = ({
+export const WebPreviewUrl = ({
-  value,
+  value,
-  onChange,
+  onChange,
-  onKeyDown,
+  onKeyDown,
-  ...props
+  ...props
-}: WebPreviewUrlProps) => {
+}: WebPreviewUrlProps) => {
-  const { url, setUrl } = useWebPreview();
+  const { url, setUrl } = useWebPreview();
-  const [inputValue, setInputValue] = useState(url);
+  const [inputValue, setInputValue] = useState(url);
-
+
-  // Sync input value with context URL when it changes externally
+  // Sync input value with context URL when it changes externally
-  useEffect(() => {
+  useEffect(() => {
-    setInputValue(url);
+    setInputValue(url);
-  }, [url]);
+  }, [url]);
-
+
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(event.target.value);
+    setInputValue(event.target.value);
-    onChange?.(event);
+    onChange?.(event);
-  };
+  };
-
+
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "Enter") {
+    if (event.key === "Enter") {
-      const target = event.target as HTMLInputElement;
+      const target = event.target as HTMLInputElement;
-      setUrl(target.value);
+      setUrl(target.value);
-    }
+    }
-    onKeyDown?.(event);
+    onKeyDown?.(event);
-  };
+  };
-
+
-  return (
+  return (
-    <Input
+    <Input
-      className="h-8 flex-1 text-sm"
+      className="h-8 flex-1 text-sm"
-      onChange={onChange ?? handleChange}
+      onChange={onChange ?? handleChange}
-      onKeyDown={handleKeyDown}
+      onKeyDown={handleKeyDown}
-      placeholder="Enter URL..."
+      placeholder="Enter URL..."
-      value={value ?? inputValue}
+      value={value ?? inputValue}
-      {...props}
+      {...props}
-    />
+    />
-  );
+  );
-};
+};
-
+
-export type WebPreviewBodyProps = ComponentProps<"iframe"> & {
+export type WebPreviewBodyProps = ComponentProps<"iframe"> & {
-  loading?: ReactNode;
+  loading?: ReactNode;
-};
+};
-
+
-export const WebPreviewBody = ({
+export const WebPreviewBody = ({
-  className,
+  className,
-  loading,
+  loading,
-  src,
+  src,
-  ...props
+  ...props
-}: WebPreviewBodyProps) => {
+}: WebPreviewBodyProps) => {
-  const { url } = useWebPreview();
+  const { url } = useWebPreview();
-
+
-  return (
+  return (
-    <div className="flex-1">
+    <div className="flex-1">
-      <iframe
+      <iframe
-        className={cn("size-full", className)}
+        className={cn("size-full", className)}
-        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
-        src={(src ?? url) || undefined}
+        src={(src ?? url) || undefined}
-        title="Preview"
+        title="Preview"
-        {...props}
+        {...props}
-      />
+      />
-      {loading}
+      {loading}
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
-export type WebPreviewConsoleProps = ComponentProps<"div"> & {
+export type WebPreviewConsoleProps = ComponentProps<"div"> & {
-  logs?: Array<{
+  logs?: Array<{
-    level: "log" | "warn" | "error";
+    level: "log" | "warn" | "error";
-    message: string;
+    message: string;
-    timestamp: Date;
+    timestamp: Date;
-  }>;
+  }>;
-};
+};
-
+
-export const WebPreviewConsole = ({
+export const WebPreviewConsole = ({
-  className,
+  className,
-  logs = [],
+  logs = [],
-  children,
+  children,
-  ...props
+  ...props
-}: WebPreviewConsoleProps) => {
+}: WebPreviewConsoleProps) => {
-  const { consoleOpen, setConsoleOpen } = useWebPreview();
+  const { consoleOpen, setConsoleOpen } = useWebPreview();
-
+
-  return (
+  return (
-    <Collapsible
+    <Collapsible
-      className={cn("bg-muted/50 border-t font-mono text-sm", className)}
+      className={cn("bg-muted/50 border-t font-mono text-sm", className)}
-      onOpenChange={setConsoleOpen}
+      onOpenChange={setConsoleOpen}
-      open={consoleOpen}
+      open={consoleOpen}
-      {...props}
+      {...props}
-    >
+    >
-      <CollapsibleTrigger asChild>
+      <CollapsibleTrigger asChild>
-        <Button
+        <Button
-          className="hover:bg-muted/50 flex w-full items-center justify-between p-4 text-left font-medium"
+          className="hover:bg-muted/50 flex w-full items-center justify-between p-4 text-left font-medium"
-          variant="ghost"
+          variant="ghost"
-        >
+        >
-          Console
+          Console
-          <ChevronDownIcon
+          <ChevronDownIcon
-            className={cn(
+            className={cn(
-              "h-4 w-4 transition-transform duration-200",
+              "h-4 w-4 transition-transform duration-200",
-              consoleOpen && "rotate-180",
+              consoleOpen && "rotate-180",
-            )}
+            )}
-          />
+          />
-        </Button>
+        </Button>
-      </CollapsibleTrigger>
+      </CollapsibleTrigger>
-      <CollapsibleContent
+      <CollapsibleContent
-        className={cn(
+        className={cn(
-          "px-4 pb-4",
+          "px-4 pb-4",
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
-        )}
+        )}
-      >
+      >
-        <div className="max-h-48 space-y-1 overflow-y-auto">
+        <div className="max-h-48 space-y-1 overflow-y-auto">
-          {logs.length === 0 ? (
+          {logs.length === 0 ? (
-            <p className="text-muted-foreground">No console output</p>
+            <p className="text-muted-foreground">No console output</p>
-          ) : (
+          ) : (
-            logs.map((log, index) => (
+            logs.map((log, index) => (
-              <div
+              <div
-                className={cn(
+                className={cn(
-                  "text-xs",
+                  "text-xs",
-                  log.level === "error" && "text-destructive",
+                  log.level === "error" && "text-destructive",
-                  log.level === "warn" && "text-yellow-600",
+                  log.level === "warn" && "text-yellow-600",
-                  log.level === "log" && "text-foreground",
+                  log.level === "log" && "text-foreground",
-                )}
+                )}
-                key={`${log.timestamp.getTime()}-${index}`}
+                key={`${log.timestamp.getTime()}-${index}`}
-              >
+              >
-                <span className="text-muted-foreground">
+                <span className="text-muted-foreground">
-                  {log.timestamp.toLocaleTimeString()}
+                  {log.timestamp.toLocaleTimeString()}
-                </span>{" "}
+                </span>{" "}
-                {log.message}
+                {log.message}
-              </div>
+              </div>
-            ))
+            ))
-          )}
+          )}
-          {children}
+          {children}
-        </div>
+        </div>
-      </CollapsibleContent>
+      </CollapsibleContent>
-    </Collapsible>
+    </Collapsible>
-  );
+  );
-};
+};
@@ -0,0 +1,104 @@
 import { FileOutput } from "lucide-react";
 import { toast } from "sonner";
 import responsibilityIcon from "@/assets/position-roundtable/责任岗位.svg";
 import resultTimeIcon from "@/assets/position-roundtable/时间.svg";
 import { desensitize } from "@/lib/desensitize";
 import { cn } from "@/lib/utils";
 import "./analysis-results.css";
 import type { AnalysisResultCardItem } from "./types";
 function formatResultTime(value: string | undefined, fallback: string): string {
  if (!value) return fallback;
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return new Intl.DateTimeFormat("zh-CN", {
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
  }).format(date);
 }
 export function AnalysisResultCardList({
  items,
  emptyTitle = "暂无交付产物",
  emptyDescription = "第二步研讨与第三步总结生成 Markdown 后，产物会显示在这里。",
  padded = true,
  onOpen,
 }: {
  items: AnalysisResultCardItem[];
  emptyTitle?: string;
  emptyDescription?: string;
  padded?: boolean;
  onOpen: (item: AnalysisResultCardItem) => void;
 }) {
  if (items.length === 0) {
    return (
      <div className="position-roundtable-analysis-results-empty flex h-full min-h-[260px] flex-col items-center justify-center p-6 text-center">
        <FileOutput className="mb-3 size-8 text-muted-foreground/50" />
        <p className="text-sm font-semibold">{emptyTitle}</p>
        <p className="mt-1 max-w-[240px] text-xs leading-5 text-muted-foreground">
          {emptyDescription}
        </p>
      </div>
    );
  }
  return (
    <div className={cn("analysis-result-card-list", padded && "p-[15px]")}>
      {items.map((item, index) => {
        const displayedTime = formatResultTime(
          item.updatedAt,
          item.fallbackTime || "刚刚",
        );
        const displayedProductName = item.delivered ? item.productName : "未交付";
        return (
          <button
            key={item.id}
            type="button"
            className="position-roundtable-analysis-result-card"
            onClick={() => {
              if (!item.delivered) {
                toast.info(
                  item.unavailableMessage ||
                    `「${desensitize(item.agentName)}」尚未交付可预览的 Markdown 文件。`,
                );
                return;
              }
              onOpen(item);
            }}
          >
            <div className="position-roundtable-analysis-result-card-body">
              <div
                className={cn(
                  "position-roundtable-analysis-result-tag",
                  `position-roundtable-analysis-result-tag--${(index % 6) + 1}`,
                )}
                aria-label={desensitize(item.agentName)}
              >
                <span>{desensitize(item.agentName)}</span>
              </div>
              <p className="position-roundtable-analysis-result-product">
                {desensitize(displayedProductName)}
              </p>
              <footer className="position-roundtable-analysis-result-meta">
                <span>
                  <img src={responsibilityIcon} alt="" aria-hidden="true" />
                  {desensitize(item.positionName)}
                </span>
                <i aria-hidden="true" />
                <span>
                  <img src={resultTimeIcon} alt="" aria-hidden="true" />
                  {displayedTime}
                </span>
              </footer>
            </div>
          </button>
        );
      })}
    </div>
  );
 }
@@ -0,0 +1,141 @@
 import { useQuery } from "@tanstack/react-query";
 import { FileOutput, Loader2 } from "lucide-react";
 import type { ReactNode } from "react";
 import { ArtifactFilePreview } from "@/components/workspace/artifacts";
 import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
 import { loadArtifactContent } from "@/core/artifacts/loader";
 import { desensitize } from "@/lib/desensitize";
 import { Button as TButton } from "tdesign-react";
 import type { AnalysisResultCardItem } from "./types";
 function isArtifactErrorContent(content: string | null | undefined): boolean {
  const trimmed = content?.trim();
  if (!trimmed || !trimmed.startsWith("{") || !trimmed.endsWith("}")) {
    return false;
  }
  try {
    const parsed = JSON.parse(trimmed) as Record<string, unknown>;
    const detail = parsed.detail ?? parsed.message ?? parsed.error;
    return typeof detail === "string" && detail.trim().length > 0;
  } catch {
    return false;
  }
 }
 function fallbackContent(item: AnalysisResultCardItem | null): string {
  return (
    item?.artifactContent?.trim() ||
    item?.summary?.trim() ||
    "暂无产物正文"
  );
 }
 export function AnalysisResultDetailDialog({
  item,
  onOpenChange,
  extraBody,
  footerStart,
 }: {
  item: AnalysisResultCardItem | null;
  onOpenChange: (open: boolean) => void;
  extraBody?: ReactNode;
  footerStart?: ReactNode;
 }) {
  const artifactThreadId = item?.artifactThreadId || null;
  const artifactPathValue = item?.artifactPath || "";
  const artifactContentQuery = useQuery({
    queryKey: [
      "analysis-results",
      "deliverable-artifact-content",
      artifactThreadId,
      artifactPathValue,
    ],
    queryFn: async () => {
      if (!artifactThreadId || !artifactPathValue) return "";
      const result = await loadArtifactContent({
        filepath: artifactPathValue,
        threadId: artifactThreadId,
        isMock: false,
      });
      return result.content;
    },
    enabled: Boolean(item && artifactThreadId && artifactPathValue),
    staleTime: 30_000,
  });
  const loadedArtifactContent =
    typeof artifactContentQuery.data === "string" ? artifactContentQuery.data : "";
  const loadedArtifactIsError = isArtifactErrorContent(loadedArtifactContent);
  const artifactContent =
    loadedArtifactContent.trim() && !loadedArtifactIsError ? loadedArtifactContent : null;
  const displayedContent = artifactContent || fallbackContent(item);
  const artifactLoadFailed =
    (artifactContentQuery.isError || loadedArtifactIsError) &&
    !item?.artifactContent?.trim();
  return (
    <Dialog open={Boolean(item)} onOpenChange={onOpenChange}>
      <DialogContent
        overlayClassName="!z-[6000]"
        className="!z-[6001] flex max-h-[86vh] w-[900px] !max-w-[calc(100vw-2rem)] flex-col gap-0 overflow-hidden p-0"
      >
        <DialogHeader className="shrink-0 border-b px-5 py-4 dark:border-[#2b8ffe]/25">
          <DialogTitle className="flex items-center gap-2 text-base">
            <FileOutput className="size-4 text-primary" />
            交付产物详情
          </DialogTitle>
        </DialogHeader>
        {!item ? null : (
          <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto px-5 py-4">
            <div className="min-w-0">
              <p className="text-sm font-extrabold text-slate-900 dark:text-[#e8edf5]">
                {desensitize(item.productName)}
              </p>
              <p className="mt-1 truncate text-xs text-muted-foreground">
                {desensitize(item.agentName)} · {desensitize(item.positionName)}
              </p>
            </div>
            {extraBody}
            <div className="mt-4 rounded-xl border border-slate-200 bg-white p-3 dark:border-[#2b8ffe]/30 dark:bg-[#042b59]/65">
              <div className="mb-2 flex items-center justify-between gap-2">
                <p className="text-xs font-bold text-slate-700 dark:text-[#e8edf5]">产物内容</p>
              </div>
              <div className="h-[52vh] min-h-[320px] overflow-hidden rounded-lg border border-slate-100 bg-slate-50/60 dark:border-[#2b8ffe]/20 dark:bg-[#021d3d]/70">
                {artifactContentQuery.isLoading ? (
                  <div className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground dark:text-[#8aa0c4]">
                    <Loader2 className="size-4 animate-spin" />
                    正在加载 Markdown 文件内容…
                  </div>
                ) : (
                  <ArtifactFilePreview
                    content={displayedContent}
                    language="markdown"
                    threadId={artifactThreadId ?? ""}
                  />
                )}
              </div>
              {artifactLoadFailed && (
                <p className="mt-2 text-[11px] text-amber-600 dark:text-amber-300">
                  Markdown 文件内容加载失败，当前展示的是已保存正文。
                </p>
              )}
            </div>
          </div>
        )}
        <DialogFooter className="shrink-0 border-t px-5 py-3 dark:border-[#2b8ffe]/25">
          {footerStart}
          <TButton variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </TButton>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
 }
@@ -0,0 +1,130 @@
 .analysis-result-card-list {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
 }
 .position-roundtable-analysis-result-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 102px;
  box-sizing: border-box;
  padding: 40px 12px 12px;
  border: 1px solid rgba(85, 166, 254, 0.1);
  border-radius: 4px;
  background: rgba(0, 98, 217, 0.1);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
 }
 .position-roundtable-analysis-result-card:hover,
 .position-roundtable-analysis-result-card:focus-visible {
  border-color: #0062d9;
  background: rgba(0, 98, 217, 0.3);
  box-shadow: 0 4px 14px rgba(0, 44, 110, 0.18);
  outline: none;
 }
 .position-roundtable-analysis-result-card-body {
  position: relative;
  min-width: 0;
  max-width: 100%;
 }
 .position-roundtable-analysis-result-tag {
  position: absolute;
  top: -40px;
  left: -12px;
  display: inline-flex;
  width: fit-content;
  max-width: calc(100% + 12px);
  height: 26px;
  align-items: center;
  box-sizing: border-box;
  padding: 0 22px 0 12px;
  overflow: hidden;
  border-radius: 4px 0 0 0;
  background: rgba(212, 120, 0, 0.5);
  color: #ffffff;
  font-family: "Noto Sans S Chinese", "Noto Sans SC", sans-serif;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
 }
 .position-roundtable-analysis-result-tag--1 { background: rgba(212, 120, 0, 0.5); }
 .position-roundtable-analysis-result-tag--2 { background: rgba(207, 19, 34, 0.5); }
 .position-roundtable-analysis-result-tag--3 { background: rgba(29, 171, 123, 0.5); }
 .position-roundtable-analysis-result-tag--4 { background: rgba(132, 85, 230, 0.5); }
 .position-roundtable-analysis-result-tag--5 { background: rgba(201, 181, 0, 0.5); }
 .position-roundtable-analysis-result-tag--6 { background: rgba(69, 195, 243, 0.5); }
 .position-roundtable-analysis-result-tag span {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
 }
 .position-roundtable-analysis-result-product {
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  font-family: "Noto Sans S Chinese", "Noto Sans SC", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .position-roundtable-analysis-result-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: #80b7ff;
  font-family: "Noto Sans S Chinese", "Noto Sans SC", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
 }
 .position-roundtable-analysis-result-meta span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .position-roundtable-analysis-result-meta img {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
 }
 .position-roundtable-analysis-result-meta i {
  width: 1px;
  height: 14px;
  flex: 0 0 auto;
  background: rgba(128, 183, 255, 0.45);
 }
 .position-roundtable-analysis-results-empty {
  color: #80b7ff;
 }
@@ -0,0 +1,3 @@
 export { AnalysisResultCardList } from "./AnalysisResultCardList";
 export { AnalysisResultDetailDialog } from "./AnalysisResultDetailDialog";
 export type { AnalysisResultCardItem } from "./types";
@@ -0,0 +1,17 @@
 export interface AnalysisResultCardItem {
  id: string;
  agentName: string;
  productName: string;
  positionName: string;
  updatedAt?: string;
  /** Shown when `updatedAt` is missing. */
  fallbackTime?: string;
  /** Clickable preview is available. */
  delivered: boolean;
  artifactPath?: string;
  artifactMimeType?: string | null;
  artifactThreadId?: string | null;
  artifactContent?: string | null;
  summary?: string;
  unavailableMessage?: string;
 }
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { injectInPageAnchorHandler } from "@/core/utils/markdown";
+import { prepareGeneratedHtml } from "@/core/utils/legacy-html-preview";
 /**
 * Sandboxed preview of a generated HTML document.
@@ -26,7 +26,7 @@ export function HtmlPreviewFrame({
  const [url, setUrl] = useState<string>();
  useEffect(() => {
-    const blob = new Blob([injectInPageAnchorHandler(html ?? "")], {
+    const blob = new Blob([prepareGeneratedHtml(html ?? "")], {
      type: "text/html;charset=utf-8",
    });
    const objectUrl = URL.createObjectURL(blob);
@@ -1,19 +1,19 @@
-import { useMemo } from "react";
+import { useMemo } from "react";
-
+
-export function Footer() {
+export function Footer() {
-  const year = useMemo(() => new Date().getFullYear(), []);
+  const year = useMemo(() => new Date().getFullYear(), []);
-  return (
+  return (
-    <footer className="container-md mx-auto mt-32 flex flex-col items-center justify-center">
+    <footer className="container-md mx-auto mt-32 flex flex-col items-center justify-center">
-      <hr className="from-border/0 to-border/0 m-0 h-px w-full border-none bg-linear-to-r via-white/20" />
+      <hr className="from-border/0 to-border/0 m-0 h-px w-full border-none bg-linear-to-r via-white/20" />
-      <div className="text-muted-foreground container flex h-20 flex-col items-center justify-center text-sm">
+      <div className="text-muted-foreground container flex h-20 flex-col items-center justify-center text-sm">
-        <p className="text-center font-serif text-lg md:text-xl">
+        <p className="text-center font-serif text-lg md:text-xl">
-          &quot;Originated from Open Source, give back to Open Source.&quot;
+          &quot;Originated from Open Source, give back to Open Source.&quot;
-        </p>
+        </p>
-      </div>
+      </div>
-      <div className="text-muted-foreground container mb-8 flex flex-col items-center justify-center text-xs">
+      <div className="text-muted-foreground container mb-8 flex flex-col items-center justify-center text-xs">
-        <p>Licensed under MIT License</p>
+        <p>Licensed under MIT License</p>
-        <p>&copy; {year} CM 助手</p>
+        <p>&copy; {year} CM 助手</p>
-      </div>
+      </div>
-    </footer>
+    </footer>
-  );
+  );
-}
+}
@@ -1,52 +1,52 @@
-"use client";
+"use client";
-
+
-import Link from "next/link";
+import Link from "next/link";
-
+
-import type { Locale } from "@/core/i18n/locale";
+import type { Locale } from "@/core/i18n/locale";
-import { useI18n } from "@/core/i18n/hooks";
+import { useI18n } from "@/core/i18n/hooks";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-
+
-export type HeaderProps = {
+export type HeaderProps = {
-  className?: string;
+  className?: string;
-  homeURL?: string;
+  homeURL?: string;
-  locale?: Locale;
+  locale?: Locale;
-};
+};
-
+
-export function Header({ className, homeURL }: HeaderProps) {
+export function Header({ className, homeURL }: HeaderProps) {
-  const isExternalHome = !homeURL;
+  const isExternalHome = !homeURL;
-  const { locale: resolvedLocale, t } = useI18n();
+  const { locale: resolvedLocale, t } = useI18n();
-  const lang = resolvedLocale.substring(0, 2);
+  const lang = resolvedLocale.substring(0, 2);
-  return (
+  return (
-    <header
+    <header
-      className={cn(
+      className={cn(
-        "container-md fixed top-0 right-0 left-0 z-20 mx-auto flex h-16 items-center justify-between backdrop-blur-xs",
+        "container-md fixed top-0 right-0 left-0 z-20 mx-auto flex h-16 items-center justify-between backdrop-blur-xs",
-        className,
+        className,
-      )}
+      )}
-    >
+    >
-      <div className="flex items-center gap-6">
+      <div className="flex items-center gap-6">
-        <a
+        <a
-          href={homeURL ?? "/"}
+          href={homeURL ?? "/"}
-          target={isExternalHome ? "_blank" : "_self"}
+          target={isExternalHome ? "_blank" : "_self"}
-          rel={isExternalHome ? "noopener noreferrer" : undefined}
+          rel={isExternalHome ? "noopener noreferrer" : undefined}
-        >
+        >
-          <h1 className="font-serif text-xl">CM 助手</h1>
+          <h1 className="font-serif text-xl">CM 助手</h1>
-        </a>
+        </a>
-      </div>
+      </div>
-      <nav className="mr-8 ml-auto flex items-center gap-8 text-sm font-medium">
+      <nav className="mr-8 ml-auto flex items-center gap-8 text-sm font-medium">
-        <Link
+        <Link
-          href={`/${lang}/docs`}
+          href={`/${lang}/docs`}
-          className="text-secondary-foreground hover:text-foreground transition-colors"
+          className="text-secondary-foreground hover:text-foreground transition-colors"
-        >
+        >
-          {t.home.docs}
+          {t.home.docs}
-        </Link>
+        </Link>
-        <Link
+        <Link
-          href="/blog/posts"
+          href="/blog/posts"
-          className="text-secondary-foreground hover:text-foreground transition-colors"
+          className="text-secondary-foreground hover:text-foreground transition-colors"
-        >
+        >
-          {t.home.blog}
+          {t.home.blog}
-        </Link>
+        </Link>
-      </nav>
+      </nav>
-      <hr className="from-border/0 via-border/70 to-border/0 absolute top-16 right-0 left-0 z-10 m-0 h-px w-full border-none bg-linear-to-r" />
+      <hr className="from-border/0 via-border/70 to-border/0 absolute top-16 right-0 left-0 z-10 m-0 h-px w-full border-none bg-linear-to-r" />
-    </header>
+    </header>
-  );
+  );
-}
+}
@@ -1,136 +1,141 @@
-"use client";
+"use client";
-
+
-import { ChevronRightIcon } from "lucide-react";
+import { ChevronRightIcon } from "lucide-react";
-import Link from "next/link";
+import Link from "next/link";
-
+
-import { Button } from "@/components/ui/button";
+import deerMaskUrl from "@/assets/deer.svg";
-import { FlickeringGrid } from "@/components/ui/flickering-grid";
+import { Button } from "@/components/ui/button";
-import Galaxy from "@/components/ui/galaxy";
+import { FlickeringGrid } from "@/components/ui/flickering-grid";
-import { WordRotate } from "@/components/ui/word-rotate";
+import Galaxy from "@/components/ui/galaxy";
-import { env } from "@/env";
+import { WordRotate } from "@/components/ui/word-rotate";
-import { cn } from "@/lib/utils";
+import { env } from "@/env";
-
+import { cn } from "@/lib/utils";
-export function Hero({ className }: { className?: string }) {
+
-  return (
+export function Hero({ className }: { className?: string }) {
-    <div
+  return (
-      className={cn(
+    <div
-        "flex size-full flex-col items-center justify-center",
+      className={cn(
-        className,
+        "flex size-full flex-col items-center justify-center",
-      )}
+        className,
-    >
+      )}
-      <div className="absolute inset-0 z-0 bg-black/40">
+    >
-        <Galaxy
+      <div className="absolute inset-0 z-0 bg-black/40">
-          mouseRepulsion={false}
+        <Galaxy
-          starSpeed={0.2}
+          mouseRepulsion={false}
-          density={0.6}
+          starSpeed={0.2}
-          glowIntensity={0.35}
+          density={0.6}
-          twinkleIntensity={0.3}
+          glowIntensity={0.35}
-          speed={0.5}
+          twinkleIntensity={0.3}
-        />
+          speed={0.5}
-      </div>
+        />
-      <FlickeringGrid
+      </div>
-        className="absolute inset-0 z-0 translate-y-8 mask-[url(/images/deer.svg)] mask-size-[100vw] mask-center mask-no-repeat md:mask-size-[72vh]"
+      <FlickeringGrid
-        squareSize={4}
+        className="absolute inset-0 z-0 translate-y-8 mask-size-[100vw] mask-center mask-no-repeat md:mask-size-[72vh]"
-        gridGap={4}
+        style={{
-        color={"white"}
+          WebkitMaskImage: `url("${deerMaskUrl}")`,
-        maxOpacity={0.3}
+          maskImage: `url("${deerMaskUrl}")`,
-        flickerChance={0.25}
+        }}
-      />
+        squareSize={4}
-      <div className="container-md relative z-10 mx-auto flex h-screen flex-col items-center justify-center">
+        gridGap={4}
-        <h1 className="flex items-center gap-2 text-4xl font-bold md:text-6xl">
+        color={"white"}
-          <WordRotate
+        maxOpacity={0.3}
-            words={[
+        flickerChance={0.25}
-              "Deep Research",
+      />
-              "Collect Data",
+      <div className="container-md relative z-10 mx-auto flex h-screen flex-col items-center justify-center">
-              "Analyze Data",
+        <h1 className="flex items-center gap-2 text-4xl font-bold md:text-6xl">
-              "Generate Webpages",
+          <WordRotate
-              "Vibe Coding",
+            words={[
-              "Generate Slides",
+              "Deep Research",
-              "Generate Images",
+              "Collect Data",
-              "Generate Podcasts",
+              "Analyze Data",
-              "Generate Videos",
+              "Generate Webpages",
-              "Generate Songs",
+              "Vibe Coding",
-              "Organize Emails",
+              "Generate Slides",
-              "Do Anything",
+              "Generate Images",
-              "Learn Anything",
+              "Generate Podcasts",
-            ]}
+              "Generate Videos",
-          />{" "}
+              "Generate Songs",
-          <div>CM 助手</div>
+              "Organize Emails",
-        </h1>
+              "Do Anything",
-        {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY && (
+              "Learn Anything",
-          <a
+            ]}
-            href="https://byteplus.com"
+          />{" "}
-            target="_blank"
+          <div>CM 助手</div>
-            rel="noopener noreferrer"
+        </h1>
-          >
+        {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY && (
-            <div className="mt-4 flex size-fit items-center rounded-lg border border-white px-3 text-center text-shadow-sm">
+          <a
-              <span>In partnership with</span>&nbsp;
+            href="https://byteplus.com"
-              <BytePlusIcon className="h-4" />
+            target="_blank"
-            </div>
+            rel="noopener noreferrer"
-          </a>
+          >
-        )}
+            <div className="mt-4 flex size-fit items-center rounded-lg border border-white px-3 text-center text-shadow-sm">
-        <p className="text-muted-foreground mt-8 scale-105 text-center text-2xl text-shadow-sm">
+              <span>In partnership with</span>&nbsp;
-          An open-source SuperAgent harness that researches, codes, and creates.
+              <BytePlusIcon className="h-4" />
-          With
+            </div>
-          <br />
+          </a>
-          the help of sandboxes, memories, tools, skills and subagents, it
+        )}
-          handles
+        <p className="text-muted-foreground mt-8 scale-105 text-center text-2xl text-shadow-sm">
-          <br />
+          An open-source SuperAgent harness that researches, codes, and creates.
-          different levels of tasks that could take minutes to hours.
+          With
-        </p>
+          <br />
-        <Link href="/workspace">
+          the help of sandboxes, memories, tools, skills and subagents, it
-          <Button className="size-lg mt-8 scale-108" size="lg">
+          handles
-            <span className="text-md">Get Started with 2.0</span>
+          <br />
-            <ChevronRightIcon className="size-4" />
+          different levels of tasks that could take minutes to hours.
-          </Button>
+        </p>
-        </Link>
+        <Link href="/workspace">
-      </div>
+          <Button className="size-lg mt-8 scale-108" size="lg">
-    </div>
+            <span className="text-md">Get Started with 2.0</span>
-  );
+            <ChevronRightIcon className="size-4" />
-}
+          </Button>
-
+        </Link>
-function BytePlusIcon(props: React.SVGProps<SVGSVGElement>) {
+      </div>
-  return (
+    </div>
-    <svg
+  );
-      width={80}
+}
-      height={24}
+
-      viewBox="0 0 120 24"
+function BytePlusIcon(props: React.SVGProps<SVGSVGElement>) {
-      fill="none"
+  return (
-      xmlns="http://www.w3.org/2000/svg"
+    <svg
-      {...props}
+      width={80}
-    >
+      height={24}
-      <path
+      viewBox="0 0 120 24"
-        d="M30.8027 3.64648H37.9333C38.8894 3.64648 39.7259 3.81911 40.4297 4.16435C41.1334 4.50959 41.6911 4.98761 42.0762 5.59843C42.4613 6.20924 42.6472 6.88644 42.6472 7.6566C42.6472 8.34708 42.4746 8.99773 42.1426 9.58198C41.7973 10.1795 41.3326 10.631 40.7483 10.9629C41.5583 11.3082 42.1691 11.8128 42.5808 12.49C42.9924 13.1672 43.1916 13.9108 43.1916 14.734C43.1916 15.5175 42.9924 16.208 42.5941 16.8188C42.1957 17.4296 41.638 17.9209 40.921 18.2661C40.2039 18.6246 39.3408 18.7973 38.3449 18.7973H30.8027V3.64648ZM37.8005 9.99361C38.4113 9.99361 38.9026 9.82099 39.2877 9.47575C39.6728 9.13051 39.8587 8.69232 39.8587 8.1479C39.8587 7.5902 39.6728 7.12546 39.301 6.76694C38.9292 6.40842 38.4379 6.22252 37.8138 6.22252H33.5248V9.99361H37.8005ZM38.1458 16.2345C38.7831 16.2345 39.301 16.0619 39.6993 15.7034C40.0977 15.3449 40.2969 14.8934 40.2969 14.349C40.2969 13.9772 40.2039 13.6319 40.018 13.3398C39.8321 13.0477 39.5798 12.8087 39.2479 12.636C38.9292 12.4634 38.5574 12.3705 38.1325 12.3705H33.5381V16.2212H38.1458V16.2345Z"
+      fill="none"
-        fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
-      />
+      {...props}
-      <path
+    >
-        d="M49.2392 18.2385L44.127 7.3236H46.7295L50.567 15.4899L54.0062 7.3236H57.6445V5.09281L60.2073 4.33594V7.3236H63.0887V9.75357H60.2073V15.304C60.2073 15.7023 60.3135 16.021 60.5259 16.2202C60.7384 16.4327 61.0438 16.5655 61.4422 16.6318C61.8405 16.6982 62.3982 16.7115 63.0887 16.6584V18.9556C61.7741 19.1016 60.7251 19.0618 59.9417 18.8626C59.1582 18.6502 58.574 18.2518 58.2022 17.6676C57.8304 17.0833 57.6445 16.2866 57.6445 15.2907V9.75357H55.5863L49.4782 24.0014H46.7959L49.2392 18.2385Z"
+      <path
-        fill="currentColor"
+        d="M30.8027 3.64648H37.9333C38.8894 3.64648 39.7259 3.81911 40.4297 4.16435C41.1334 4.50959 41.6911 4.98761 42.0762 5.59843C42.4613 6.20924 42.6472 6.88644 42.6472 7.6566C42.6472 8.34708 42.4746 8.99773 42.1426 9.58198C41.7973 10.1795 41.3326 10.631 40.7483 10.9629C41.5583 11.3082 42.1691 11.8128 42.5808 12.49C42.9924 13.1672 43.1916 13.9108 43.1916 14.734C43.1916 15.5175 42.9924 16.208 42.5941 16.8188C42.1957 17.4296 41.638 17.9209 40.921 18.2661C40.2039 18.6246 39.3408 18.7973 38.3449 18.7973H30.8027V3.64648ZM37.8005 9.99361C38.4113 9.99361 38.9026 9.82099 39.2877 9.47575C39.6728 9.13051 39.8587 8.69232 39.8587 8.1479C39.8587 7.5902 39.6728 7.12546 39.301 6.76694C38.9292 6.40842 38.4379 6.22252 37.8138 6.22252H33.5248V9.99361H37.8005ZM38.1458 16.2345C38.7831 16.2345 39.301 16.0619 39.6993 15.7034C40.0977 15.3449 40.2969 14.8934 40.2969 14.349C40.2969 13.9772 40.2039 13.6319 40.018 13.3398C39.8321 13.0477 39.5798 12.8087 39.2479 12.636C38.9292 12.4634 38.5574 12.3705 38.1325 12.3705H33.5381V16.2212H38.1458V16.2345Z"
-      />
+        fill="currentColor"
-      <path
+      />
-        d="M70.2461 19.1147C69.1572 19.1147 68.1746 18.8491 67.2849 18.318C66.3953 17.7869 65.6782 17.0565 65.1604 16.1138C64.6425 15.1843 64.377 14.1485 64.377 13.0066C64.377 11.8912 64.6425 10.882 65.1737 9.97908C65.7048 9.06286 66.4218 8.34582 67.3248 7.82796C68.2277 7.29682 69.2236 7.03125 70.2992 7.03125C71.6536 7.03125 72.7822 7.33666 73.6719 7.93419C74.5616 8.53172 75.2122 9.36827 75.584 10.4438C75.9691 11.5194 76.0753 12.7676 75.916 14.1751L67.0061 14.1884C67.1389 14.7062 67.3779 15.1577 67.7364 15.5295C68.0949 15.9013 68.5066 16.1802 68.958 16.366C69.4095 16.5519 69.8477 16.6316 70.2461 16.6316C70.6975 16.6316 71.1092 16.5918 71.5075 16.4988C71.8926 16.4059 72.2378 16.2731 72.5432 16.0739C72.8486 15.8747 73.1142 15.649 73.3665 15.3967L73.4727 15.2639L75.5043 16.6051C74.9998 17.4416 74.296 18.0657 73.4063 18.4773C72.5167 18.9022 71.4677 19.1147 70.2461 19.1147ZM73.486 11.9576C73.3665 11.4663 73.1673 11.0281 72.8619 10.6563C72.5565 10.2845 72.1847 9.99236 71.7332 9.79318C71.2818 9.594 70.8037 9.48778 70.2992 9.48778C69.8211 9.48778 69.3564 9.594 68.8916 9.79318C68.4269 9.99236 68.0285 10.2845 67.6833 10.6563C67.3381 11.0281 67.1256 11.4663 67.0459 11.9576H73.486Z"
+      <path
-        fill="currentColor"
+        d="M49.2392 18.2385L44.127 7.3236H46.7295L50.567 15.4899L54.0062 7.3236H57.6445V5.09281L60.2073 4.33594V7.3236H63.0887V9.75357H60.2073V15.304C60.2073 15.7023 60.3135 16.021 60.5259 16.2202C60.7384 16.4327 61.0438 16.5655 61.4422 16.6318C61.8405 16.6982 62.3982 16.7115 63.0887 16.6584V18.9556C61.7741 19.1016 60.7251 19.0618 59.9417 18.8626C59.1582 18.6502 58.574 18.2518 58.2022 17.6676C57.8304 17.0833 57.6445 16.2866 57.6445 15.2907V9.75357H55.5863L49.4782 24.0014H46.7959L49.2392 18.2385Z"
-      />
+        fill="currentColor"
-      <path
+      />
-        d="M78 3.64648H84.3206C86.0733 3.64648 87.4278 4.0714 88.3838 4.92122C89.3399 5.77105 89.8179 6.93956 89.8179 8.42675C89.8179 9.39608 89.6054 10.2459 89.1805 10.9762C88.7556 11.7065 88.1315 12.2642 87.3215 12.6493C86.5115 13.0344 85.5156 13.2336 84.3471 13.2336H80.7354V18.7973H78V3.64648ZM84.3737 10.7505C84.9314 10.7505 85.4227 10.6575 85.8078 10.4849C86.2061 10.3123 86.5115 10.0467 86.724 9.70149C86.9364 9.35625 87.0427 8.93133 87.0427 8.42675C87.0427 7.6566 86.8169 7.08562 86.3655 6.71382C85.914 6.34202 85.2501 6.15612 84.387 6.15612H80.7487V10.7505H84.3737Z"
+      <path
-        fill="currentColor"
+        d="M70.2461 19.1147C69.1572 19.1147 68.1746 18.8491 67.2849 18.318C66.3953 17.7869 65.6782 17.0565 65.1604 16.1138C64.6425 15.1843 64.377 14.1485 64.377 13.0066C64.377 11.8912 64.6425 10.882 65.1737 9.97908C65.7048 9.06286 66.4218 8.34582 67.3248 7.82796C68.2277 7.29682 69.2236 7.03125 70.2992 7.03125C71.6536 7.03125 72.7822 7.33666 73.6719 7.93419C74.5616 8.53172 75.2122 9.36827 75.584 10.4438C75.9691 11.5194 76.0753 12.7676 75.916 14.1751L67.0061 14.1884C67.1389 14.7062 67.3779 15.1577 67.7364 15.5295C68.0949 15.9013 68.5066 16.1802 68.958 16.366C69.4095 16.5519 69.8477 16.6316 70.2461 16.6316C70.6975 16.6316 71.1092 16.5918 71.5075 16.4988C71.8926 16.4059 72.2378 16.2731 72.5432 16.0739C72.8486 15.8747 73.1142 15.649 73.3665 15.3967L73.4727 15.2639L75.5043 16.6051C74.9998 17.4416 74.296 18.0657 73.4063 18.4773C72.5167 18.9022 71.4677 19.1147 70.2461 19.1147ZM73.486 11.9576C73.3665 11.4663 73.1673 11.0281 72.8619 10.6563C72.5565 10.2845 72.1847 9.99236 71.7332 9.79318C71.2818 9.594 70.8037 9.48778 70.2992 9.48778C69.8211 9.48778 69.3564 9.594 68.8916 9.79318C68.4269 9.99236 68.0285 10.2845 67.6833 10.6563C67.3381 11.0281 67.1256 11.4663 67.0459 11.9576H73.486Z"
-      />
+        fill="currentColor"
-      <path
+      />
-        d="M92.168 3.36719H94.8104V18.8101H92.168V3.36719Z"
+      <path
-        fill="currentColor"
+        d="M78 3.64648H84.3206C86.0733 3.64648 87.4278 4.0714 88.3838 4.92122C89.3399 5.77105 89.8179 6.93956 89.8179 8.42675C89.8179 9.39608 89.6054 10.2459 89.1805 10.9762C88.7556 11.7065 88.1315 12.2642 87.3215 12.6493C86.5115 13.0344 85.5156 13.2336 84.3471 13.2336H80.7354V18.7973H78V3.64648ZM84.3737 10.7505C84.9314 10.7505 85.4227 10.6575 85.8078 10.4849C86.2061 10.3123 86.5115 10.0467 86.724 9.70149C86.9364 9.35625 87.0427 8.93133 87.0427 8.42675C87.0427 7.6566 86.8169 7.08562 86.3655 6.71382C85.914 6.34202 85.2501 6.15612 84.387 6.15612H80.7487V10.7505H84.3737Z"
-      />
+        fill="currentColor"
-      <path
+      />
-        d="M101.982 19.1155C101.158 19.1155 100.415 18.9164 99.764 18.5313C99.1134 18.1462 98.5955 17.6018 98.2237 16.9113C97.8519 16.2208 97.666 15.4507 97.666 14.6008V7.32422H100.282V13.6979C100.282 14.2822 100.375 14.7735 100.574 15.1984C100.773 15.6233 101.052 15.9553 101.424 16.1943C101.796 16.4333 102.247 16.5528 102.765 16.5528C103.256 16.5528 103.708 16.4333 104.106 16.181C104.504 15.942 104.836 15.5835 105.075 15.1187C105.314 14.654 105.434 14.1228 105.434 13.512V7.32422H108.076V18.8101H105.527V17.3628C105.155 17.947 104.651 18.3719 104.04 18.6774C103.442 18.9562 102.752 19.1155 101.982 19.1155Z"
+      <path
-        fill="currentColor"
+        d="M92.168 3.36719H94.8104V18.8101H92.168V3.36719Z"
-      />
+        fill="currentColor"
-      <path
+      />
-        d="M115.287 19.1163C114.424 19.1163 113.535 18.9304 112.645 18.5586C111.755 18.1868 111.012 17.6424 110.414 16.9386L112.1 15.5045C112.525 15.8763 112.95 16.1817 113.375 16.4075C113.813 16.6332 114.358 16.766 115.048 16.8058C115.752 16.8457 116.35 16.766 116.828 16.5535C117.306 16.3411 117.558 16.0357 117.584 15.6107C117.598 15.3186 117.518 15.0929 117.345 14.9335C117.173 14.7742 116.907 14.6281 116.535 14.5219C116.164 14.4157 115.593 14.2962 114.809 14.1634L114.265 14.0572C113.123 13.8713 112.246 13.5127 111.622 12.9949C110.998 12.477 110.693 11.7334 110.693 10.7906C110.693 10.0072 110.905 9.34329 111.317 8.77231C111.742 8.21461 112.286 7.7897 112.99 7.51085C113.681 7.232 114.451 7.08594 115.314 7.08594C116.19 7.08594 117.053 7.24528 117.863 7.56396C118.687 7.88265 119.364 8.40051 119.882 9.10427L118.209 10.5118C117.903 10.1267 117.505 9.83459 117 9.63541C116.496 9.43624 115.951 9.34329 115.354 9.34329C114.969 9.34329 114.597 9.38312 114.252 9.47607C113.906 9.56902 113.614 9.70181 113.388 9.90098C113.163 10.1002 113.043 10.3392 113.043 10.6446C113.043 10.9102 113.123 11.1093 113.269 11.2554C113.415 11.4015 113.694 11.5342 114.079 11.6405C114.464 11.7467 115.128 11.8928 116.044 12.0654H116.084C117.226 12.2778 118.169 12.6762 118.899 13.2339C119.629 13.7916 120.001 14.5617 120.001 15.5045C120.001 16.2348 119.775 16.8855 119.324 17.4299C118.872 17.9743 118.288 18.3992 117.558 18.6914C116.841 18.9702 116.084 19.1163 115.287 19.1163Z"
+      <path
-        fill="currentColor"
+        d="M101.982 19.1155C101.158 19.1155 100.415 18.9164 99.764 18.5313C99.1134 18.1462 98.5955 17.6018 98.2237 16.9113C97.8519 16.2208 97.666 15.4507 97.666 14.6008V7.32422H100.282V13.6979C100.282 14.2822 100.375 14.7735 100.574 15.1984C100.773 15.6233 101.052 15.9553 101.424 16.1943C101.796 16.4333 102.247 16.5528 102.765 16.5528C103.256 16.5528 103.708 16.4333 104.106 16.181C104.504 15.942 104.836 15.5835 105.075 15.1187C105.314 14.654 105.434 14.1228 105.434 13.512V7.32422H108.076V18.8101H105.527V17.3628C105.155 17.947 104.651 18.3719 104.04 18.6774C103.442 18.9562 102.752 19.1155 101.982 19.1155Z"
-      />
+        fill="currentColor"
-      <path
+      />
-        d="M14.7392 9.80759C14.5931 9.92709 14.3806 9.83414 14.3806 9.63497V8.58596V2.23883C14.3806 2.05293 14.1549 1.9467 14.0221 2.06621L5.17862 9.56857C5.03256 9.68808 4.8201 9.59513 4.8201 9.39595V4.27044C4.8201 4.12438 4.70059 4.00487 4.55453 4.00487H0.26557C0.119507 4.00487 0 4.12438 0 4.27044V20.3242C0 20.5101 0.225735 20.6163 0.35852 20.4968L9.18873 12.9944C9.33479 12.8749 9.54725 12.9679 9.54725 13.1671V20.5765C9.54725 20.7624 9.77299 20.8686 9.90577 20.7491L18.736 13.2467C18.882 13.1272 19.0945 13.2202 19.0945 13.4193V18.5449C19.0945 18.6909 19.214 18.8104 19.3601 18.8104H23.649C23.7951 18.8104 23.9146 18.6909 23.9146 18.5449V2.47784C23.9146 2.29194 23.6889 2.18572 23.5561 2.30522L14.7392 9.80759Z"
+      <path
-        fill="currentColor"
+        d="M115.287 19.1163C114.424 19.1163 113.535 18.9304 112.645 18.5586C111.755 18.1868 111.012 17.6424 110.414 16.9386L112.1 15.5045C112.525 15.8763 112.95 16.1817 113.375 16.4075C113.813 16.6332 114.358 16.766 115.048 16.8058C115.752 16.8457 116.35 16.766 116.828 16.5535C117.306 16.3411 117.558 16.0357 117.584 15.6107C117.598 15.3186 117.518 15.0929 117.345 14.9335C117.173 14.7742 116.907 14.6281 116.535 14.5219C116.164 14.4157 115.593 14.2962 114.809 14.1634L114.265 14.0572C113.123 13.8713 112.246 13.5127 111.622 12.9949C110.998 12.477 110.693 11.7334 110.693 10.7906C110.693 10.0072 110.905 9.34329 111.317 8.77231C111.742 8.21461 112.286 7.7897 112.99 7.51085C113.681 7.232 114.451 7.08594 115.314 7.08594C116.19 7.08594 117.053 7.24528 117.863 7.56396C118.687 7.88265 119.364 8.40051 119.882 9.10427L118.209 10.5118C117.903 10.1267 117.505 9.83459 117 9.63541C116.496 9.43624 115.951 9.34329 115.354 9.34329C114.969 9.34329 114.597 9.38312 114.252 9.47607C113.906 9.56902 113.614 9.70181 113.388 9.90098C113.163 10.1002 113.043 10.3392 113.043 10.6446C113.043 10.9102 113.123 11.1093 113.269 11.2554C113.415 11.4015 113.694 11.5342 114.079 11.6405C114.464 11.7467 115.128 11.8928 116.044 12.0654H116.084C117.226 12.2778 118.169 12.6762 118.899 13.2339C119.629 13.7916 120.001 14.5617 120.001 15.5045C120.001 16.2348 119.775 16.8855 119.324 17.4299C118.872 17.9743 118.288 18.3992 117.558 18.6914C116.841 18.9702 116.084 19.1163 115.287 19.1163Z"
-      />
+        fill="currentColor"
-    </svg>
+      />
-  );
+      <path
-}
+        d="M14.7392 9.80759C14.5931 9.92709 14.3806 9.83414 14.3806 9.63497V8.58596V2.23883C14.3806 2.05293 14.1549 1.9467 14.0221 2.06621L5.17862 9.56857C5.03256 9.68808 4.8201 9.59513 4.8201 9.39595V4.27044C4.8201 4.12438 4.70059 4.00487 4.55453 4.00487H0.26557C0.119507 4.00487 0 4.12438 0 4.27044V20.3242C0 20.5101 0.225735 20.6163 0.35852 20.4968L9.18873 12.9944C9.33479 12.8749 9.54725 12.9679 9.54725 13.1671V20.5765C9.54725 20.7624 9.77299 20.8686 9.90577 20.7491L18.736 13.2467C18.882 13.1272 19.0945 13.2202 19.0945 13.4193V18.5449C19.0945 18.6909 19.214 18.8104 19.3601 18.8104H23.649C23.7951 18.8104 23.9146 18.6909 23.9146 18.5449V2.47784C23.9146 2.29194 23.6889 2.18572 23.5561 2.30522L14.7392 9.80759Z"
        fill="currentColor"
      />
    </svg>
  );
 }
@@ -1,163 +1,163 @@
-import Link from "next/link";
+import Link from "next/link";
-
+
-import { getBlogRoute, normalizeTagSlug, type BlogPost } from "@/core/blog";
+import { getBlogRoute, normalizeTagSlug, type BlogPost } from "@/core/blog";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-
+
-type PostListProps = {
+type PostListProps = {
-  description?: string;
+  description?: string;
-  posts: BlogPost[];
+  posts: BlogPost[];
-  title: string;
+  title: string;
-};
+};
-
+
-type PostMetaProps = {
+type PostMetaProps = {
-  currentLang?: string;
+  currentLang?: string;
-  date?: string | null;
+  date?: string | null;
-  languages?: string[];
+  languages?: string[];
-  pathname?: string;
+  pathname?: string;
-};
+};
-
+
-function formatDate(date?: string): string | null {
+function formatDate(date?: string): string | null {
-  if (!date) {
+  if (!date) {
-    return null;
+    return null;
-  }
+  }
-
+
-  const value = new Date(date);
+  const value = new Date(date);
-  if (Number.isNaN(value.getTime())) {
+  if (Number.isNaN(value.getTime())) {
-    return date;
+    return date;
-  }
+  }
-
+
-  return new Intl.DateTimeFormat("en-US", {
+  return new Intl.DateTimeFormat("en-US", {
-    day: "numeric",
+    day: "numeric",
-    month: "short",
+    month: "short",
-    year: "numeric",
+    year: "numeric",
-  }).format(value);
+  }).format(value);
-}
+}
-
+
-export function PostMeta({
+export function PostMeta({
-  currentLang,
+  currentLang,
-  date,
+  date,
-  languages,
+  languages,
-  pathname,
+  pathname,
-}: PostMetaProps) {
+}: PostMetaProps) {
-  const formattedDate = formatDate(date ?? undefined);
+  const formattedDate = formatDate(date ?? undefined);
-  const availableLanguages = Array.isArray(languages)
+  const availableLanguages = Array.isArray(languages)
-    ? languages.filter((lang): lang is string => typeof lang === "string")
+    ? languages.filter((lang): lang is string => typeof lang === "string")
-    : [];
+    : [];
-
+
-  if (!formattedDate && availableLanguages.length <= 1) {
+  if (!formattedDate && availableLanguages.length <= 1) {
-    return null;
+    return null;
-  }
+  }
-
+
-  return (
+  return (
-    <div className="flex flex-wrap items-center gap-8 text-sm">
+    <div className="flex flex-wrap items-center gap-8 text-sm">
-      {formattedDate ? (
+      {formattedDate ? (
-        <p className="text-muted-foreground">{formattedDate}</p>
+        <p className="text-muted-foreground">{formattedDate}</p>
-      ) : null}
+      ) : null}
-
+
-      {pathname && availableLanguages.length > 1 ? (
+      {pathname && availableLanguages.length > 1 ? (
-        <div className="flex flex-wrap items-center gap-3">
+        <div className="flex flex-wrap items-center gap-3">
-          <span className="text-secondary-foreground text-sm">Language:</span>
+          <span className="text-secondary-foreground text-sm">Language:</span>
-          {availableLanguages.map((lang) => {
+          {availableLanguages.map((lang) => {
-            const isActive = lang === currentLang;
+            const isActive = lang === currentLang;
-            return (
+            return (
-              <Link
+              <Link
-                key={lang}
+                key={lang}
-                href={`${pathname}?lang=${lang}`}
+                href={`${pathname}?lang=${lang}`}
-                className={
+                className={
-                  isActive
+                  isActive
-                    ? "text-foreground text-sm font-medium"
+                    ? "text-foreground text-sm font-medium"
-                    : "text-muted-foreground hover:text-foreground text-sm transition-colors"
+                    : "text-muted-foreground hover:text-foreground text-sm transition-colors"
-                }
+                }
-              >
+              >
-                {lang.toUpperCase()}
+                {lang.toUpperCase()}
-              </Link>
+              </Link>
-            );
+            );
-          })}
+          })}
-        </div>
+        </div>
-      ) : null}
+      ) : null}
-    </div>
+    </div>
-  );
+  );
-}
+}
-
+
-export function PostTags({
+export function PostTags({
-  tags,
+  tags,
-  className,
+  className,
-}: {
+}: {
-  tags?: unknown;
+  tags?: unknown;
-  className?: string;
+  className?: string;
-}) {
+}) {
-  if (!Array.isArray(tags)) {
+  if (!Array.isArray(tags)) {
-    return null;
+    return null;
-  }
+  }
-
+
-  const validTags = tags.filter(
+  const validTags = tags.filter(
-    (tag): tag is string => typeof tag === "string" && tag.length > 0,
+    (tag): tag is string => typeof tag === "string" && tag.length > 0,
-  );
+  );
-
+
-  if (validTags.length === 0) {
+  if (validTags.length === 0) {
-    return null;
+    return null;
-  }
+  }
-
+
-  return (
+  return (
-    <div className={cn("flex flex-wrap items-center gap-3", className)}>
+    <div className={cn("flex flex-wrap items-center gap-3", className)}>
-      <span className="text-secondary-foreground text-sm">Tags:</span>
+      <span className="text-secondary-foreground text-sm">Tags:</span>
-      {validTags.map((tag) => (
+      {validTags.map((tag) => (
-        <Link
+        <Link
-          key={tag}
+          key={tag}
-          href={`/blog/tags/${normalizeTagSlug(tag)}`}
+          href={`/blog/tags/${normalizeTagSlug(tag)}`}
-          className="border-border text-secondary-foreground hover:text-foreground rounded-xl border px-2 py-1 text-sm transition-colors"
+          className="border-border text-secondary-foreground hover:text-foreground rounded-xl border px-2 py-1 text-sm transition-colors"
-        >
+        >
-          {tag}
+          {tag}
-        </Link>
+        </Link>
-      ))}
+      ))}
-    </div>
+    </div>
-  );
+  );
-}
+}
-
+
-export function PostList({ description, posts, title }: PostListProps) {
+export function PostList({ description, posts, title }: PostListProps) {
-  return (
+  return (
-    <div className="mx-auto flex w-full max-w-5xl flex-col gap-12 px-6">
+    <div className="mx-auto flex w-full max-w-5xl flex-col gap-12 px-6">
-      <header className="space-y-4">
+      <header className="space-y-4">
-        <h2 className="text-foreground text-4xl font-semibold tracking-tight">
+        <h2 className="text-foreground text-4xl font-semibold tracking-tight">
-          {title}
+          {title}
-        </h2>
+        </h2>
-        {description ? (
+        {description ? (
-          <p className="text-secondary-foreground">{description}</p>
+          <p className="text-secondary-foreground">{description}</p>
-        ) : null}
+        ) : null}
-      </header>
+      </header>
-
+
-      <div className="space-y-12">
+      <div className="space-y-12">
-        {posts.map((post) => {
+        {posts.map((post) => {
-          return (
+          return (
-            <article
+            <article
-              key={post.slug.join("/")}
+              key={post.slug.join("/")}
-              className="border-border space-y-5 border-b pb-12 last:border-b-0 last:pb-0"
+              className="border-border space-y-5 border-b pb-12 last:border-b-0 last:pb-0"
-            >
+            >
-              <div className="space-y-3">
+              <div className="space-y-3">
-                <PostMeta
+                <PostMeta
-                  currentLang={post.lang}
+                  currentLang={post.lang}
-                  date={post.metadata.date}
+                  date={post.metadata.date}
-                  languages={post.languages}
+                  languages={post.languages}
-                  pathname={getBlogRoute(post.slug)}
+                  pathname={getBlogRoute(post.slug)}
-                />
+                />
-                <Link
+                <Link
-                  href={getBlogRoute(post.slug)}
+                  href={getBlogRoute(post.slug)}
-                  className="text-foreground hover:text-primary block text-2xl font-semibold tracking-tight transition-colors"
+                  className="text-foreground hover:text-primary block text-2xl font-semibold tracking-tight transition-colors"
-                >
+                >
-                  {post.title}
+                  {post.title}
-                </Link>
+                </Link>
-              </div>
+              </div>
-
+
-              {post.metadata.description ? (
+              {post.metadata.description ? (
-                <p className="text-secondary-foreground leading-10">
+                <p className="text-secondary-foreground leading-10">
-                  {post.metadata.description}
+                  {post.metadata.description}
-                </p>
+                </p>
-              ) : null}
+              ) : null}
-              <PostTags tags={post.metadata.tags} />
+              <PostTags tags={post.metadata.tags} />
-            </article>
+            </article>
-          );
+          );
-        })}
+        })}
-      </div>
+      </div>
-    </div>
+    </div>
-  );
+  );
-}
+}
@@ -1,29 +1,29 @@
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils";
-
+
-export function Section({
+export function Section({
-  className,
+  className,
-  title,
+  title,
-  subtitle,
+  subtitle,
-  children,
+  children,
-}: {
+}: {
-  className?: string;
+  className?: string;
-  title: React.ReactNode;
+  title: React.ReactNode;
-  subtitle?: React.ReactNode;
+  subtitle?: React.ReactNode;
-  children: React.ReactNode;
+  children: React.ReactNode;
-}) {
+}) {
-  return (
+  return (
-    <section className={cn("mx-auto flex flex-col py-16", className)}>
+    <section className={cn("mx-auto flex flex-col py-16", className)}>
-      <header className="flex flex-col items-center justify-between">
+      <header className="flex flex-col items-center justify-between">
-        <div className="mb-4 bg-linear-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-center text-5xl font-bold text-transparent">
+        <div className="mb-4 bg-linear-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-center text-5xl font-bold text-transparent">
-          {title}
+          {title}
-        </div>
+        </div>
-        {subtitle && (
+        {subtitle && (
-          <div className="text-muted-foreground text-center text-xl">
+          <div className="text-muted-foreground text-center text-xl">
-            {subtitle}
+            {subtitle}
-          </div>
+          </div>
-        )}
+        )}
-      </header>
+      </header>
-      <main className="mt-4">{children}</main>
+      <main className="mt-4">{children}</main>
-    </section>
+    </section>
-  );
+  );
-}
+}
Author	SHA1	Message	Date
gozeros	b638b541d0	初始化	2026-09-07 18:24:55 +08:00
wsk	34474bd5fc	Initial commit	2026-09-07 17:37:11 +08:00
		`@@ -0,0 +1 @@`
							`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M24.036,10l-.012,9.333" transform="translate(-16.016 -6.667)"/><path class="b" d="M10,24h9.333" transform="translate(-6.667 -16)"/></svg>`
		`@@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36"><defs><style>.a,.d{fill:#fff;}.a{opacity:0;}.b{fill:#da2331;}.c{fill:#0a54cf;}.e{fill:#1677ff;}.f{fill:#1e2433;}.g{fill:#10d6ff;}.h{fill:#ff8181;}.i{fill:none;stroke:#10d6ff;stroke-linecap:round;stroke-linejoin:round;}.j{filter:url(#d);}.k{filter:url(#a);}</style><filter id="a"><feOffset dx="4" input="SourceAlpha"/><feGaussianBlur stdDeviation="1" result="b"/><feFlood flood-opacity="0.161" result="c"/><feComposite operator="out" in="SourceGraphic" in2="b"/><feComposite operator="in" in="c"/><feComposite operator="in" in2="SourceGraphic"/></filter><filter id="d"><feOffset dx="-4" input="SourceAlpha"/><feGaussianBlur stdDeviation="1" result="e"/><feFlood flood-opacity="0.161" result="f"/><feComposite operator="out" in="SourceGraphic" in2="e"/><feComposite operator="in" in="f"/><feComposite operator="in" in2="SourceGraphic"/></filter></defs><g transform="translate(0 -1)"><rect class="a" width="36" height="36" transform="translate(0 1)"/><path class="b" d="M23.5,14.75a1.5,1.5,0,0,1-1.5-1.5V9.5a1.5,1.5,0,1,1,3,0v3.75A1.5,1.5,0,0,1,23.5,14.75Z" transform="translate(-5.5 -1)"/><g data-type="innerShadowGroup"><path class="c" d="M-2-2H1C3.206-2,5-.532,5,1.273V3.727C5,5.532,3.206,7,1,7H-2Z" transform="translate(28.66 19.541)"/><g class="k" transform="matrix(1, 0, 0, 1, 0, 1)"><path class="d" d="M-2-2H1C3.206-2,5-.532,5,1.273V3.727C5,5.532,3.206,7,1,7H-2Z" transform="translate(28.66 18.54)"/></g></g><g data-type="innerShadowGroup"><path class="c" d="M5-2H2C-.206-2-2-.532-2,1.273V3.727C-2,5.532-.206,7,2,7H5Z" transform="translate(4.34 19.541)"/><g class="j" transform="matrix(1, 0, 0, 1, 0, 1)"><path class="d" d="M5-2H2C-.206-2-2-.532-2,1.273V3.727C-2,5.532-.206,7,2,7H5Z" transform="translate(4.34 18.54)"/></g></g><path class="e" d="M5.5-2H16a7.508,7.508,0,0,1,7.5,7.5V13A7.508,7.508,0,0,1,16,20.5H5.5A7.508,7.508,0,0,1-2,13V5.5A7.508,7.508,0,0,1,5.5-2Z" transform="translate(7.25 13.5)"/><path class="f" d="M5.25,0h9A5.25,5.25,0,0,1,19.5,5.25V7.5a5.25,5.25,0,0,1-5.25,5.25h-9A5.25,5.25,0,0,1,0,7.5V5.25A5.25,5.25,0,0,1,5.25,0Z" transform="translate(8.25 15.25)"/><circle class="g" cx="1.5" cy="1.5" r="1.5" transform="translate(21 19)"/><circle class="g" cx="1.5" cy="1.5" r="1.5" transform="translate(12 19)"/><path class="d" d="M24,10v3.75" transform="translate(-6 -1.5)"/><circle class="h" cx="3" cy="3" r="3" transform="translate(15 4)"/><path class="i" d="M44,28.667a3.367,3.367,0,0,0,1.922.412,2.841,2.841,0,0,0,1.828-.412" transform="translate(-27.875 -5.017)"/></g></svg>