@ljwei-stak/dsh-model-route-bot 0.66.4 → 0.67.0

package/apps/integration-client/README.md

@@ -1,11 +1,28 @@
 # 统一 Bot 客户端
 
+## 工作空间重构（本地开发预览）
+
+`workspace-navigation.mjs` 定义工作空间页面和按产品 API 隔离的 UI 深链、一次性目标转交与内存草稿；不存权限或执行凭据。`workspace-model.mjs` 从已提交投影生成总览、搜索与看板；未加载的任务不计入统计，不推算节省时间。
+
+`workspace-ui.jsx` 提供首页、任务待办、成员目录、键盘搜索和外观控制。`workspace.css` 重排产品导航与信息层级，并在明暗主题、紧凑密度和窄屏下使用同一组语义颜色。产品页内 Ctrl/Cmd K 打开工作空间搜索；聊天中的原搜索继续由 Bot 界面处理。外观偏好保存在本机浏览器，目标文本仅在当前宿主 API 的内存里保留。
+
+新目标仍先检查候选与预览，再通过原始提交确认流程派发；看板不提供拖动改状态。任务链接由 Bot ID 与 Task ID 共同定位，电脑搜索只聚焦原电脑卡片，不自动连接或取得控制。
+
+```sh
+node --test tests/workspace-model.test.mjs tests/workspace-ui.integration.test.mjs
+node scripts/verify-workspace-browser.mjs
+node scripts/verify-workspace-browser.mjs --serve
+```
+
+浏览器脚本运行真实产品组件与离线 fixture，截图明确标注为本地验证数据；它不证明实际 Harness Desktop 的完整安装、Electron 或用户 profile 已验收。
+
 `index.jsx` 在同一 ModuleLoader factory 中安装完整冻结 DS 界面和现有 MR 高级工作台。
 默认沿用 DS 的 Main、Bot/工作群、记忆、侧聊、语音、设置、能力与计划任务。
-通过公共 sidebar.workspaces slot 包装原 TeamSidebar，在底部增加中文入口：
-Bot 绑定、任务、远程电脑、费用与用量、高级工作台。没有修改 vendor 或旧 MR 大面板。
+通过公共 sidebar.workspaces slot 包装原 TeamSidebar，联系人保留主区域，底部使用
+ContactNavigation 的待办、工作空间和资源菜单。HeaderPill 通过自有 product-overlay
+增加会话工具，原注册组件身份、工作目标、审批、输入和执行授权继续由 native 路径负责。
 
-四个产品页只读取宿主 `schemaVersion:1` 投影。缺后端、宿主读取错误、只读锁、未知费用、
+产品页读取宿主 `schemaVersion:1` 投影。缺后端、宿主读取错误、只读锁、未知费用、
 未在线/锁屏机器都有明确状态和下一步；列表不放示例 Bot、机器、任务或收据。
 Task 的核对/取消/重试只有宿主声明动作可用时显示，最终授权仍由宿主执行。
 
@@ -15,16 +32,23 @@ node scripts/integration-product-client.mjs --check
 node --test tests/bot-runtime-product.test.mjs tests/bot-runtime-ui.test.mjs
 ```
 
-默认生成 `apps/integration-client/client.js`；`--output <path>` 可写入主包统一的
-`.dsh-plugin/client.js`。构建 API `bundleProductClient()` 返回 `{code,inputs,bytes}`，
+默认生成主包统一的 `.dsh-plugin/client.js`，`--output <path>` 可显式指定其他位置。
+构建 API `bundleProductClient()` 返回 `{code,inputs,bytes}`，
 `generateProductClient({output,check})` 可供主构建脚本调用。生成物只有一个 loader id
 `@ljwei-stak/dsh-model-route-bot`，没有单独 `ds-bot` 的 loader。纯路由包 `@ljwei-stak/dsh-model-router` 使用独立工作台入口，不导入此集成客户端。
 React、ReactDOM 与 Harness UI primitives 继续由宿主提供。
 
-当前完整功能并集 bundle 约 2 MiB。旧 MR 的单独客户端保持原构建方式，是否切换默认
-产物由主插件接入与产品验收决定。发布还需在主包的客户端依赖声明中包含 DS 公开
+实际 bundle 大小以构建结果为准。旧 MR 的单独客户端保持原构建方式。
+发布还需在主包的客户端依赖声明中包含 DS 公开
 `inject` 所需的 sessions、uiWorkspace、uiConversation、slots、theme、layout 等服务。
 
 组件 DOM 检查覆盖未知 Operation 原依据、核对请求使用原 taskId、同模型不同 Bot、
 未接入权限、未知金额及 Windows 锁屏原因。实际浏览器/Electron 的整体布局、键盘/窄屏
 和默认 profile 升级仍需单独验收；本目录的 DOM 检查不宣称这些已通过。
+
+安全配对使用 `secure-pairing.jsx` 与 `pairing-qr.jsx`，支持短期邀请、独立确认码、摄像头
+和本地二维码图片解码。jsQR 1.4.0 的 Apache-2.0 许可证随
+`licenses/jsqr-1.4.0-LICENSE.txt` 分发；源码和作者见 https://github.com/cozmo/jsQR。
+二维码图像不会发送给模型或外部解码服务。摄像头仅在显式点击后开启。
+协议、Host 与 Agent 的实现及验证边界见
+`docs/implementation/20261107-secure-pairing.md`；尚不代表全功能迁移或真实用户桌面验收完成。

package/apps/integration-client/api.mjs

@@ -1,11 +1,15 @@
-export const PRODUCT_PANELS = Object.freeze({ bindings: 'bot-product-bindings', tasks: 'bot-product-tasks', machines: 'bot-product-machines', library: 'bot-product-library', routine: 'bot-product-routine', usage: 'bot-product-usage' })
+export { PRODUCT_PANELS } from './workspace-navigation.mjs'
 
 export function createProductApi(fetcher = globalThis.fetch, clientLocation = globalThis.location) {
+  const listeners = new Set()
   const call = async (action, payload, signal) => {
     // Desktop's protocol bridge removes Origin before forwarding to the HTTP
     // Host. Preserve only the known native viewer origin as a transport hint;
     // owner admission and Bot/machine authority still belong to the Host.
-    const nativeDesktop = ['machine.desktop.open', 'machine.desktop.renew'].includes(action)
+    // The desktop bridge strips Origin, so the native viewer supplies its own. A web panel probe
+    // needs the same hint: it evaluates frame-ancestors against the origin the page is really
+    // framed from, and an HTTP Host origin must never stand in for dsh-app://app.
+    const nativeDesktop = ['machine.desktop.open', 'machine.desktop.renew', 'machine.desktop.poll', 'machine.desktop.send', 'webPanels.probe'].includes(action)
       && clientLocation?.protocol === 'dsh-app:' && clientLocation?.host === 'app'
     const response = await fetcher('api/bot-product', { method: 'POST', credentials: 'same-origin',
       headers: { 'content-type': 'application/json', ...(nativeDesktop ? { 'x-dsh-desktop-origin': 'dsh-app://app' } : {}) },
@@ -15,7 +19,14 @@ export function createProductApi(fetcher = globalThis.fetch, clientLocation = gl
     if (!response.ok || body.ok !== true) throw Object.assign(new Error(body.error?.message ?? `宿主请求失败（HTTP ${response.status}）`), { code: body.error?.code })
     return body.value
   }
-  return Object.freeze({ snapshot: signal => call('snapshot', undefined, signal), dispatch: (action, payload, signal) => call(action, payload, signal) })
+  return Object.freeze({ snapshot: signal => call('snapshot', undefined, signal), attention: signal => call('task.attention', {}, signal),
+    async dispatch(action, payload, signal) {
+      const value = await call(action, payload, signal)
+      for (const listener of [...listeners]) { try { listener(action) } catch {} }
+      return value
+    },
+    subscribeActions(listener) { listeners.add(listener); return () => listeners.delete(listener) },
+  })
 }
 
 export const TASK_STATES = Object.freeze({ queued: '排队中', ready:'等待执行', running: '执行中', cancelling: '停止中', cancelled: '已停止', succeeded: '已完成', failed: '失败',

package/apps/integration-client/binding-editor.jsx

@@ -1,118 +1,317 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { Blocked } from './panels.jsx'
+import { UiIcon } from './ui-icons.jsx'
+import bindingCss from './binding.css'
+import { BotModelPicker } from './model-picker.jsx'
+import { botModelStatus } from './bot-model-status.mjs'
+import { MainRouteEditor } from './main-route-editor.jsx'
+import { mainDefaultFields, mainRoutePayload, mainRouteProblems, startMainRoutes } from './main-route-model.mjs'
+import {
+  accountFor, bindingProblems, buildBinding, defaultMode, EXECUTION_MODES, failureText, findModel, FUNDING_MODES,
+  MODE_HELP, MODE_LABEL, numberOrNull, routeOf, ROUTING_PRESETS, scopeAllows, seedForm,
+  toolCards, workspaceKey, workspaceLabel, workspaceOptions,
+} from './binding-model.mjs'
 
-const route = model => model ? `${model.provider}/${model.model}` : ''
-const workspace = ref => ref ? `${ref.machineId}/${ref.rootId}` : ''
-
-export function BotBindingEditor({ bot, record, accounts, dispatch, busy }) {
+/**
+ * Bot binding editor.
+ *
+ * The props contract is unchanged: `{ bot, record, accounts, dispatch, busy }`.
+ * `record` is the Host's committed read model (settings + trusted catalog); every
+ * choice offered here comes from that catalog, and a save always carries the
+ * revision it was read at, so the Host keeps authority over what is granted.
+ *
+ * Layout follows the Bot first: pick a provider, then an exact model, then the
+ * funding scope; workspace, capabilities and budgets stay available but folded.
+ * The official-tools module is a separate region because granting a CLI execution
+ * path is a different decision from choosing the model this Bot talks with.
+ */
+export function BotBindingEditor({ bot, record, accounts, dispatch, busy, hostScope, onOpenTools }) {
+  const connection = hostScope ?? dispatch
+  const draftConnection = useRef(connection)
+  const catalog = record?.catalog
   const [form, setForm] = useState(null)
+  const [dirty, setDirty] = useState(false)
+  const [feedback, setFeedback] = useState(null)
+  const [working, setWorking] = useState('')
+  const seedKey = useRef('')
+  const seedRevision = useRef(null)
+  const saveToken = useRef(0)
+  const workingRef = useRef('')
+
+  useEffect(() => {
+    // The stylesheet ships with this component so the editor needs no parent wiring;
+    // index.jsx may concatenate it instead, but not both at once.
+    const style = document.createElement('style')
+    style.dataset.botBindingEditor = '1'
+    style.textContent = bindingCss
+    document.head.append(style)
+    return () => { saveToken.current++; workingRef.current = ''; style.remove() }
+  }, [])
+
   useEffect(() => {
-    if (!record) { setForm(null); return }
-    const value = record.settings
-    const selectedWorkspace = value.workspaceRef ?? value.machineGrants[0] ?? null
-    setForm({
-      enabled: value.enabled, model: route(value.model), workspace: workspace(selectedWorkspace), workspaceMode: selectedWorkspace?.mode ?? 'read-only',
-      capabilities: value.capabilities.length ? value.capabilities : record.catalog.capabilities.map(item => item.id),
-      officialTools: value.officialTools, fundingMode: value.funding.mode,
-      input: value.funding.pricing?.input ?? 1, output: value.funding.pricing?.output ?? 2,
-      maxInputTokens: value.funding.request?.maxInputTokens ?? 100000, maxOutputTokens: value.funding.request?.maxOutputTokens ?? 4096,
-      daily: value.funding.dailyBudgetUsd ?? 5, monthly: value.funding.monthlyBudgetUsd ?? 50,
-      accountDaily: 10, accountMonthly: 100,
-      dailyCalls: value.funding.subscription?.dailyCalls ?? 20, monthlyCalls: value.funding.subscription?.monthlyCalls ?? 200,
-      maxConcurrentTasks: value.maxConcurrentTasks,
-      // Loaded from committed settings so the form shows what is actually stored, not a default.
-      routing: {
-        preset: value.routing?.preset ?? '',
-        dailyBudgetUsd: value.routing?.dailyBudgetUsd ?? '',
-        monthlyBudgetUsd: value.routing?.monthlyBudgetUsd ?? '',
-      },
-    })
-  }, [bot.id, record?.revision])
-  const model = useMemo(() => record?.catalog.models.find(item => route(item) === form?.model) ?? null, [record, form?.model])
-  const account = accounts.items.find(item => item.provider === model?.provider)
+    if (draftConnection.current !== connection) {
+      draftConnection.current = connection; seedKey.current = ''; saveToken.current++; workingRef.current = ''; setWorking(''); setFeedback(null)
+    }
+    if (!record) { saveToken.current++; seedKey.current = ''; seedRevision.current = null; setForm(null); return }
+    const botId = bot?.id ?? ''
+    const key = `${botId}#${record.revision ?? 0}`
+    if (seedKey.current === key) return
+    const sameBot = seedKey.current.split('#')[0] === botId
+    seedKey.current = key
+    // A late Host or Bot switch invalidates the in-flight save of the previous Bot.
+    if (!sameBot) { saveToken.current += 1; workingRef.current = ''; setWorking('') }
+    // A revision bump from another window must not silently drop unsaved work.
+    if (sameBot && dirty) {
+      setFeedback({ kind: 'notice', text: `宿主中的绑定已更新到修订号 ${record.revision ?? 0}；你在此处未保存的修改仍然保留，保存时会按旧修订号提交，宿主可能拒绝。` })
+      return
+    }
+    seedRevision.current = record.revision
+    setForm(seedForm(record, accounts))
+    setDirty(false)
+    setFeedback(current => (current?.kind === 'saved' ? current : null))
+  }, [bot?.id, record, dirty, accounts, connection])
+
+  const edit = patch => {
+    setForm(current => (current ? { ...current, ...patch } : current))
+    setFeedback(null)
+    setDirty(true)
+  }
+
+  const model = form ? findModel(catalog, form.model) : null
+  const savedRoute = form?.model ?? ''
+  const savedMissing = Boolean(savedRoute) && !model
+  const machineOptions = useMemo(() => workspaceOptions(catalog), [catalog])
+  const [machineId, rootId] = (form?.workspace ?? '').split('/')
+  const machine = machineOptions.find(item => item.machineId === machineId) ?? null
+  const root = machine?.roots.find(item => item.rootId === rootId) ?? null
+  const account = accountFor(accounts, model?.provider)
+  const mainRoutes = bot?.main ? form?.mainRoutes : undefined
+  const scope = (catalog?.fundingScopes ?? []).find(item => item.id === account?.id) ?? null
+  const tools = useMemo(() => toolCards({ catalog, model, grants: form?.officialTools }), [catalog, model, form?.officialTools])
+  const problems = form ? bindingProblems({ form, model, account, machine, root, catalog, scope, mainRoutes: Boolean(mainRoutes) }) : []
+  if (mainRoutes) problems.push(...mainRouteProblems(mainRoutes, { defaultRoute: form.model, enabled: form.enabled, catalog, accounts }))
+  const staleTools = tools.filter(tool => tool.stale)
+  const hostModel = botModelStatus(bot, catalog?.models)
+
   if (!record || !form) return <Blocked value={{ reason: '此 Bot 尚未取得绑定目录。' }} />
-  const change = (key, value) => setForm(current => ({ ...current, [key]: value }))
-  const selectedMachine = form.workspace.split('/')[0]
-  const selectedRoot = form.workspace.split('/').slice(1).join('/')
-  // This Bot's own routing policy: empty means it inherits the global preset.
-  const routing = form.routing ?? { preset: '', dailyBudgetUsd: '', monthlyBudgetUsd: '' }
-  const enableAccount = () => dispatch('funding.account.save', { scopeId: account.id, expectedRevision: account.revision, enabled: true,
-    dailyLimitUsd: Number(form.accountDaily), monthlyLimitUsd: Number(form.accountMonthly) })
-  const save = event => {
+
+  const accountLimitsReady = numberOrNull(form.accountDaily) !== null && numberOrNull(form.accountMonthly) !== null
+
+  const setToolGrant = (tool, cliModel, checked) => {
+    const others = form.officialTools.filter(item => item.toolId !== tool.toolId)
+    edit({ officialTools: checked
+      ? [...others, { toolId: tool.toolId, cliModel, mode: tool.grant?.mode ?? defaultMode(tool.modes) }]
+      : others })
+  }
+  const setToolMode = (toolId, mode) => edit({ officialTools: form.officialTools.map(item => (item.toolId === toolId ? { ...item, mode } : item)) })
+  const dropStaleTools = () => edit({ officialTools: form.officialTools.filter(item => !staleTools.some(tool => tool.toolId === item.toolId)) })
+
+  const enableAccount = async (target, dailyLimitUsd, monthlyLimitUsd) => {
+    if (!target || workingRef.current) return
+    const token = saveToken.current
+    workingRef.current = 'funding'
+    setWorking('funding')
+    setFeedback(null)
+    try {
+      await dispatch('funding.account.save', { scopeId: target.id, expectedRevision: target.revision, enabled: true,
+        dailyLimitUsd, monthlyLimitUsd })
+      if (saveToken.current !== token) return
+      setFeedback({ kind: 'saved', text: `已启用 ${target.provider} 资金范围。保存绑定后生效。` })
+    } catch (error) {
+      if (saveToken.current !== token) return
+      setFeedback({ kind: 'error', text: failureText(error) })
+    } finally { if (saveToken.current === token) { workingRef.current = ''; setWorking('') } }
+  }
+
+  const save = async event => {
     event.preventDefault()
-    const settings = {
-      schemaVersion: 1, enabled: form.enabled,
-      model: model ? { provider: model.provider, model: model.model } : null,
-      officialTools: form.officialTools,
-      machineGrants: selectedMachine && selectedRoot ? [{ machineId: selectedMachine, rootId: selectedRoot, mode: form.workspaceMode, capabilities: [] }] : [],
-      capabilities: form.capabilities,
-      workspaceRef: selectedMachine && selectedRoot ? { kind: record.catalog.machines.find(item => item.machineId === selectedMachine)?.location ?? 'local', machineId: selectedMachine, rootId: selectedRoot } : null,
-      funding: {
-        mode: form.fundingMode, scopeId: account?.enabled ? account.id : null,
-        pricing: form.fundingMode === 'api' ? { input: Number(form.input), output: Number(form.output) } : null,
-        request: form.fundingMode === 'api' ? { maxInputTokens: Number(form.maxInputTokens), maxOutputTokens: Number(form.maxOutputTokens) } : null,
-        dailyBudgetUsd: form.fundingMode === 'api' ? Number(form.daily) : null,
-        monthlyBudgetUsd: form.fundingMode === 'api' ? Number(form.monthly) : null,
-        subscription: form.fundingMode === 'subscription' ? { dailyCalls: Number(form.dailyCalls), monthlyCalls: Number(form.monthlyCalls) } : null,
-      },
-      maxConcurrentTasks: Number(form.maxConcurrentTasks),
-      // An empty preset inherits; a budget left blank means "no separate ceiling for this Bot".
-      routing: routing.preset === '' && routing.dailyBudgetUsd === '' && routing.monthlyBudgetUsd === ''
-        ? null
-        : {
-          preset: routing.preset === '' ? null : routing.preset,
-          dailyBudgetUsd: routing.dailyBudgetUsd === '' ? null : Number(routing.dailyBudgetUsd),
-          monthlyBudgetUsd: routing.monthlyBudgetUsd === '' ? null : Number(routing.monthlyBudgetUsd),
-        },
-    }
-    return dispatch('binding.save', { botId: bot.id, expectedRevision: record.revision, settings })
+    // A second click in the same batch must not submit twice against the same revision.
+    if (workingRef.current || problems.length) return
+    const token = saveToken.current
+    const defaultForm = mainRoutes ? { ...form, ...mainDefaultFields(mainRoutes, form.model) } : form
+    const settings = buildBinding({ form: defaultForm, model, account, machine, root })
+    if (mainRoutes !== undefined) settings.mainRoutes = mainRoutePayload(mainRoutes)
+    workingRef.current = 'binding'
+    setWorking('binding')
+    setFeedback({ kind: 'saving', text: '正在提交到宿主校验…' })
+    try {
+      const expectedRevision = seedRevision.current
+      const result = await dispatch('binding.save', { botId: bot.id, expectedRevision, settings })
+      if (saveToken.current !== token) return
+      if (!Number.isSafeInteger(result?.revision) || result.revision <= expectedRevision || (result.botId && result.botId !== bot.id)) throw new Error('尚未收到当前 Bot 的保存确认，请刷新配置后核对。')
+      seedRevision.current = result?.revision ?? seedRevision.current
+      setDirty(false)
+      setFeedback({ kind: 'saved', text: `设置已保存。` })
+    } catch (error) {
+      if (saveToken.current !== token) return
+      setFeedback({ kind: 'error', text: failureText(error) })
+    } finally { if (saveToken.current === token) { workingRef.current = ''; setWorking('') } }
   }
-  const cliMappings = (model?.cliModels ?? []).filter((item, index, items) => items.findIndex(other => other.toolId === item.toolId && other.model === item.model) === index)
-  return <details className="bp-card" open={record.status !== 'available'}>
-    <summary>配置并启用此 Bot</summary>
-    <form className="bp-form" onSubmit={save}>
-      <label>准确模型<select aria-label={`${bot.name} 的绑定模型`} value={form.model} onChange={event => { change('model', event.target.value); change('officialTools', []) }} required>
-        <option value="" disabled>请选择</option>{record.catalog.models.map(item => <option key={route(item)} value={route(item)}>{route(item)}</option>)}
-      </select></label>
-      {model && account && !account.enabled && <aside className="bp-blocked"><strong>资金范围尚未启用</strong><p>{account.provider} 需要本地预算上限；它不是厂商余额。</p>
-        <label>账户每日上限（USD）<input type="number" min="0" step="0.01" value={form.accountDaily} onChange={event => change('accountDaily', event.target.value)} /></label>
-        <label>账户每月上限（USD）<input type="number" min="0" step="0.01" value={form.accountMonthly} onChange={event => change('accountMonthly', event.target.value)} /></label>
-        <button type="button" disabled={busy} onClick={enableAccount}>启用 {account.provider} 资金范围</button></aside>}
-      <label>工作区<select aria-label={`${bot.name} 的绑定工作区`} value={form.workspace} onChange={event => change('workspace', event.target.value)} required>
-        <option value="" disabled>请选择</option>{record.catalog.machines.flatMap(machine => machine.roots.map(root => <option key={`${machine.machineId}/${root.rootId}`} value={`${machine.machineId}/${root.rootId}`}>{machine.label} / {root.label}</option>))}
-      </select></label>
-      <label>工作区权限<select value={form.workspaceMode} onChange={event => change('workspaceMode', event.target.value)}><option value="read-only">只读</option><option value="workspace-write">允许写入</option></select></label>
-      <fieldset><legend>Bot 路由策略</legend>
-        <p className="bp-muted">这个 Bot 派活给别人时用哪套取舍；留空表示沿用全局预设。</p>
-        <label>预设<select aria-label={`${bot.name} 的路由预设`} value={routing.preset} onChange={event => change('routing', { ...routing, preset: event.target.value })}>
-          <option value="">沿用全局</option><option value="economy">省钱优先</option><option value="balanced">均衡</option><option value="quality">效果优先</option>
-        </select></label>
-        <label>每日预算（USD）<input type="number" min="0" step="0.01" value={routing.dailyBudgetUsd} onChange={event => change('routing', { ...routing, dailyBudgetUsd: event.target.value })} placeholder="留空表示不单独限制" /></label>
-        <label>每月预算（USD）<input type="number" min="0" step="0.01" value={routing.monthlyBudgetUsd} onChange={event => change('routing', { ...routing, monthlyBudgetUsd: event.target.value })} placeholder="留空表示不单独限制" /></label>
-      </fieldset>
-      <fieldset><legend>路由与任务能力</legend>{record.catalog.capabilities.map(capability => <label key={capability.id}><input type="checkbox" checked={form.capabilities.includes(capability.id)} onChange={event => change('capabilities', event.target.checked ? [...form.capabilities, capability.id] : form.capabilities.filter(id => id !== capability.id))} />{capability.label}</label>)}</fieldset>
-      {cliMappings.length > 0 && <fieldset><legend>已核验官方 CLI</legend>{cliMappings.map(mapping => {
-        const selected = form.officialTools.some(tool => tool.toolId === mapping.toolId && tool.cliModel === mapping.model)
-        return <label key={`${mapping.toolId}/${mapping.model}`}><input type="checkbox" checked={selected} onChange={event => change('officialTools', event.target.checked
-          ? [...form.officialTools, { toolId: mapping.toolId, cliModel: mapping.model, mode: 'read-only' }]
-          : form.officialTools.filter(tool => !(tool.toolId === mapping.toolId && tool.cliModel === mapping.model)))} />{mapping.toolId} / {mapping.model}（只读）</label>
-      })}</fieldset>}
-      <label>资金渠道<select value={form.fundingMode} onChange={event => change('fundingMode', event.target.value)}><option value="api">API（金额）</option><option value="subscription">订阅（调用次数）</option></select></label>
-      {form.fundingMode === 'api' ? <>
-        <label>输入价格（USD / 百万 Token）<input type="number" min="0" step="0.000001" value={form.input} onChange={event => change('input', event.target.value)} required /></label>
-        <label>输出价格（USD / 百万 Token）<input type="number" min="0" step="0.000001" value={form.output} onChange={event => change('output', event.target.value)} required /></label>
-        <label>最大输入 Token<input type="number" min="1" step="1" value={form.maxInputTokens} onChange={event => change('maxInputTokens', event.target.value)} required /></label>
-        <label>最大输出 Token<input type="number" min="1" step="1" value={form.maxOutputTokens} onChange={event => change('maxOutputTokens', event.target.value)} required /></label>
-        <label>Bot 每日预算（USD）<input type="number" min="0" step="0.01" value={form.daily} onChange={event => change('daily', event.target.value)} required /></label>
-        <label>Bot 每月预算（USD）<input type="number" min="0" step="0.01" value={form.monthly} onChange={event => change('monthly', event.target.value)} required /></label>
-      </> : <>
-        <label>每日订阅调用次数<input type="number" min="0" step="1" value={form.dailyCalls} onChange={event => change('dailyCalls', event.target.value)} required /></label>
-        <label>每月订阅调用次数<input type="number" min="0" step="1" value={form.monthlyCalls} onChange={event => change('monthlyCalls', event.target.value)} required /></label>
-      </>}
-      <label>最大并发任务<input type="number" min="1" max="32" step="1" value={form.maxConcurrentTasks} onChange={event => change('maxConcurrentTasks', event.target.value)} required /></label>
-      <label><input type="checkbox" checked={form.enabled} onChange={event => change('enabled', event.target.checked)} />启用此绑定（模型、工作区和资金范围必须完整）</label>
-      <button type="submit" disabled={busy || form.enabled && (!model || !account?.enabled || !selectedMachine || !selectedRoot)}>保存绑定</button>
-      {record.blockedReason && <Blocked value={record} />}
+
+  const fundingMode = FUNDING_MODES.find(item => item.value === form.fundingMode) ?? FUNDING_MODES[0]
+  const summary = [
+    ['准确模型', savedRoute || '未选择'],
+    ['资金范围', mainRoutes ? `${mainRoutes.routes.filter(route => route.enabled).length} 条路线 · 共享限额` : account ? `${account.provider} · ${form.fundingMode === 'api' ? 'API' : '订阅'}${account.enabled ? '' : '（未启用）'}` : '未匹配'],
+    ['工作区', machine && root ? workspaceLabel(machine, root) : '未选择'],
+    ['官方工具', form.officialTools.length ? form.officialTools.map(tool => `${tool.toolId}/${tool.cliModel}·${MODE_LABEL[tool.mode] ?? tool.mode}`).join('，') : bot?.main ? 'Main 全权限 · 待配置默认执行方式' : '未授予'],
+    ['绑定状态', record.status === 'available' ? '已启用' : '未启用'],
+  ]
+
+  return <div className="bb-root">
+    <header className="bb-head">
+      <p className="bb-eyebrow">Bot 绑定 · {bot?.name ?? ''}</p>
+      <h3 className="bb-title">模型与工具</h3>
+      <p className="bb-sub">{bot?.main ? '配置 Main 的模型路线、默认模型与官方工具。' : '选择默认模型，为这个 Bot 添加官方工具。'}</p>
+      {bot?.main && <p className="bb-note" role="note"><strong>Main · 全权限主控</strong> 可使用宿主全部已接入模型路线与工具。下方配置默认模型、工作区和资金。</p>}
+      <details className="bb-overview"><summary>配置概览<span>{form.enabled ? '已启用' : '未启用'}</span></summary><dl className="bb-summary">{summary.map(([label, value]) => <div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}</dl></details>
+    </header>
+    {record.status !== 'available' && record.settings?.enabled && <Blocked value={{ reason: record.blockedReason ?? '此 Bot 的执行绑定尚未就绪。', nextAction: record.nextAction }} />}
+    <form className="bp-form bb-form" onSubmit={save}>
+      <section className="bb-model-card" aria-label="Bot 模型设置">
+        <BotModelPicker models={mainRoutes ? (catalog?.models ?? []).filter(item => mainRoutes.routes.some(route => route.enabled && routeOf(route) === routeOf(item))) : catalog?.models ?? []} value={form.model} disabled={Boolean(busy || working)}
+          note={form.enabled ? '保存后用于当前 Bot。' : '此 Bot 的绑定已停用。保存会保留选择，启用后用于对话。'}
+          onSelect={choice => {
+            const selected = findModel(catalog, routeOf(choice)), modes = selected?.fundingModes
+            edit({ provider: choice.provider, model: routeOf(choice), ...(modes && !modes.includes(form.fundingMode) ? { fundingMode: modes[0] } : {}) })
+          }}/>
+        <p className="bb-model-applied" data-model-different={hostModel.different ? '' : undefined} title={hostModel.title} role="status">{hostModel.appliedText}</p>
+        {bot?.main && !mainRoutes && <button type="button" className="bb-link" disabled={Boolean(busy || working)}
+          onClick={() => edit({ mainRoutes: startMainRoutes(form, model, account, record.settings?.funding) })}>配置多条模型路线</button>}
+      </section>
+      {mainRoutes ? <MainRouteEditor draft={mainRoutes} defaultRoute={form.model} catalog={catalog} accounts={accounts} busy={Boolean(busy || working)}
+        onChange={draft => edit({ mainRoutes: draft })}
+        onDefault={route => edit({ provider: route.provider, model: routeOf(route) })}
+        onEnableAccount={enableAccount}
+        onSingleRoute={() => edit({ ...mainDefaultFields(mainRoutes, form.model), mainRoutes: null })} /> :
+      <details className="bb-budget-config"><summary><UiIcon name="chart" size={16}/>费用与预算<span className="bb-pill">{account?.provider ?? '待配置'}</span></summary>
+      <ol className="bb-steps">
+        <li className="bb-step" data-state={model && account?.enabled ? 'done' : 'blocked'}>
+          <div className="bb-step-head"><UiIcon name="chart" size={17}/>
+            <div><strong>资金范围</strong><p>{fundingMode.help}</p></div>
+            <span className="bb-step-state"><span className="bb-pill" data-tone={account?.enabled ? 'current' : 'warn'}>{account ? `${account.provider}${account.enabled ? '' : ' · 未启用'}` : '无匹配范围'}</span></span></div>
+          <div className="bb-step-body">
+            <div className="bb-row">{FUNDING_MODES.map(item => <button key={item.value} type="button" className="bb-option bb-option-inline"
+              aria-pressed={form.fundingMode === item.value} disabled={Boolean(model?.fundingModes && !model.fundingModes.includes(item.value))} onClick={() => edit({ fundingMode: item.value })}>{item.label}</button>)}</div>
+            {!model && <p className="bb-note">先选择模型，宿主才能给出这个提供商的资金范围。</p>}
+            {model && !account && <p className="bb-warn">宿主目录里没有 {model.provider} 的资金范围。请刷新宿主或改选模型；未匹配范围时无法启用绑定。</p>}
+            {model && account && !account.enabled && <aside className="bp-blocked">
+              <strong>资金范围尚未启用</strong><p>{account.provider} 需要本地预算上限；它不是厂商余额。</p>
+              <div className="bb-fields">
+                <label className="bb-field"><span>账户每日上限（USD）</span><input type="number" min="0" step="0.01" value={form.accountDaily} onChange={event => edit({ accountDaily: event.target.value })} /></label>
+                <label className="bb-field"><span>账户每月上限（USD）</span><input type="number" min="0" step="0.01" value={form.accountMonthly} onChange={event => edit({ accountMonthly: event.target.value })} /></label>
+              </div>
+              <div className="bb-row"><button type="button" disabled={busy || Boolean(working) || !accountLimitsReady} onClick={() => enableAccount(account, numberOrNull(form.accountDaily), numberOrNull(form.accountMonthly))}>
+                {working === 'funding' ? '启用中…' : `启用 ${account.provider} 资金范围`}</button>
+                {!accountLimitsReady && <small className="bb-note">留空表示未配置，宿主会拒绝启用；0 表示禁止付费。</small>}</div>
+            </aside>}
+            {model && account?.enabled && scope && !scopeAllows(scope, form.fundingMode, routeOf(model)) && <p className="bb-warn">宿主发布该资金范围时不包含当前渠道或准确模型，保存会被拒绝。</p>}
+            {form.fundingMode === 'api' ? <>
+              <div className="bb-fields">
+                <label className="bb-field"><span>输入价格（USD / 百万 Token）</span><input type="number" min="0" step="0.000001" value={form.input} onChange={event => edit({ input: event.target.value })} /></label>
+                <label className="bb-field"><span>输出价格（USD / 百万 Token）</span><input type="number" min="0" step="0.000001" value={form.output} onChange={event => edit({ output: event.target.value })} /></label>
+                <label className="bb-field"><span>最大输入 Token</span><input type="number" min="1" step="1" value={form.maxInputTokens} onChange={event => edit({ maxInputTokens: event.target.value })} /></label>
+                <label className="bb-field"><span>最大输出 Token</span><input type="number" min="1" step="1" value={form.maxOutputTokens} onChange={event => edit({ maxOutputTokens: event.target.value })} /></label>
+                <label className="bb-field"><span>Bot 每日预算（USD）</span><input type="number" min="0" step="0.01" value={form.daily} onChange={event => edit({ daily: event.target.value })} /></label>
+                <label className="bb-field"><span>Bot 每月预算（USD）</span><input type="number" min="0" step="0.01" value={form.monthly} onChange={event => edit({ monthly: event.target.value })} /></label>
+              </div>
+              <p className="bb-note">价格与请求上界由 Bot 绑定自己承担，即使别的 Bot 用同一个模型。留空的字段会按“未配置”提交，不会变成 0。</p>
+            </> : <>
+              <div className="bb-fields">
+                <label className="bb-field"><span>每日订阅调用次数</span><input type="number" min="0" step="1" value={form.dailyCalls} onChange={event => edit({ dailyCalls: event.target.value })} /></label>
+                <label className="bb-field"><span>每月订阅调用次数</span><input type="number" min="0" step="1" value={form.monthlyCalls} onChange={event => edit({ monthlyCalls: event.target.value })} /></label>
+              </div>
+              <p className="bb-note">订阅按次数计数；不会自动回退到 API 计价。</p>
+            </>}
+          </div>
+        </li>
+      </ol>
+      </details>}
+
+      <details className="bb-fold">
+        <summary><UiIcon name="folder" size={16} />工作区与能力<small>{bot?.main ? 'Main 全权限' : machine && root ? `${workspaceLabel(machine, root)} · ${form.workspaceMode === 'read-only' ? '只读' : '可写'} · ${form.capabilities.length} 项能力` : '未选择'}</small></summary>
+        <div className="bb-fold-body">
+          <label className="bb-field bb-field-wide"><span>工作区（机器 / 根目录）</span>
+            <select aria-label={`${bot?.name ?? ''} 的绑定工作区`} value={form.workspace} onChange={event => edit({ workspace: event.target.value })}>
+              <option value="">请选择</option>
+              {machineOptions.flatMap(entry => entry.roots.map(entry2 => <option key={workspaceKey(entry.machineId, entry2.rootId)} value={workspaceKey(entry.machineId, entry2.rootId)}>{entry.label} / {entry2.label}</option>))}
+            </select></label>
+          {machine && root && <label className="bb-field bb-field-wide"><span>工作区权限</span>
+            <select aria-label={`${bot?.name ?? ''} 的工作区权限`} value={form.workspaceMode} onChange={event => edit({ workspaceMode: event.target.value })}>
+              {['read-only', 'workspace-write'].filter(mode => root.modes.includes(mode)).map(mode => <option key={mode} value={mode}>{mode === 'read-only' ? '只读' : '允许写入'}</option>)}
+            </select></label>}
+          {machine && root && !root.modes.includes(form.workspaceMode) && <p className="bb-warn">所选根目录已不支持当前权限模式，请重新选择。</p>}
+          {!bot?.main && <><div className="bb-row"><strong className="bb-note">路由与任务能力</strong>
+            <button type="button" className="bb-link" onClick={() => edit({ capabilities: (catalog?.capabilities ?? []).map(item => item.id) })}>全选</button>
+            <button type="button" className="bb-link" onClick={() => edit({ capabilities: [] })}>清空</button></div>
+          <p className="bb-note">留空表示不授予额外能力；此界面不会在打开时替你勾选。</p>
+          <div className="bb-list">{(catalog?.capabilities ?? []).map(item => <label key={item.id} className="bb-check">
+            <input type="checkbox" checked={form.capabilities.includes(item.id)} onChange={event => edit({ capabilities: event.target.checked ? [...form.capabilities, item.id] : form.capabilities.filter(id => id !== item.id) })} />
+            <span>{item.label}<small>{item.tools.join('、') || '无工具'}</small></span></label>)}</div></>}
+          <label className="bb-field bb-field-wide"><span>最大并发任务</span><input type="number" min="1" max="32" step="1" value={form.maxConcurrentTasks} onChange={event => edit({ maxConcurrentTasks: event.target.value })} /></label>
+          <fieldset className="bb-fieldset">
+            <legend className="bb-note">Bot 路由策略（这个 Bot 派活给别人时用哪套取舍）</legend>
+            <label className="bb-field bb-field-wide"><span>预设</span>
+              <select aria-label={`${bot?.name ?? ''} 的路由预设`} value={form.routing.preset} onChange={event => edit({ routing: { ...form.routing, preset: event.target.value } })}>
+                {ROUTING_PRESETS.map(item => <option key={item.value || 'global'} value={item.value}>{item.label}</option>)}</select></label>
+            <div className="bb-fields">
+              <label className="bb-field"><span>每日预算（USD）</span><input type="number" min="0" step="0.01" value={form.routing.dailyBudgetUsd} onChange={event => edit({ routing: { ...form.routing, dailyBudgetUsd: event.target.value } })} placeholder="留空表示不单独限制" /></label>
+              <label className="bb-field"><span>每月预算（USD）</span><input type="number" min="0" step="0.01" value={form.routing.monthlyBudgetUsd} onChange={event => edit({ routing: { ...form.routing, monthlyBudgetUsd: event.target.value } })} placeholder="留空表示不单独限制" /></label>
+            </div>
+          </fieldset>
+        </div>
+      </details>
+
+      <section className="bb-tools" aria-label={bot?.main ? '官方工具（默认执行配置）' : '官方工具（额外执行授权）'}>
+        <div className="bb-tools-head">
+          <strong><UiIcon name="settings" size={15} />官方工具</strong>
+          {typeof onOpenTools === 'function' && <button type="button" className="bb-link" onClick={() => {
+            const token = saveToken.current
+            Promise.resolve().then(onOpenTools).catch(() => { if (saveToken.current === token) setFeedback({ kind: 'error', text: '暂时无法打开官方工具设置，请重试。' }) })
+          }}>安装与登录<UiIcon name="arrow" size={13}/></button>}
+          <p>{bot?.main ? 'Main 已有全部工具权限；下方配置已核验的 CLI 模型与执行方式。' : '为这个 Bot 添加官方工具，选择允许使用的模型与执行方式。'}</p>
+        </div>
+        {tools.length === 0 ? <p className="bb-tool-empty">宿主目录里没有可授予的官方 CLI 工具。安装与登录状态在官方工具面板查看；未核验的身份不会在这里显示为可用。</p> : (
+          <ul className="bb-tool-list">{tools.map(tool => <li key={tool.toolId} className="bb-tool" data-granted={Boolean(tool.grant)} data-stale={tool.stale}>
+            <div className="bb-tool-head"><div className="bb-tool-title">
+              <strong>{tool.label}</strong>
+              <p>{tool.vendor ? `${tool.vendor} · ` : ''}{tool.source || '厂商官方 CLI'}</p></div>
+              <span className="bb-pill" data-tone={tool.grant ? (tool.stale ? 'warn' : 'ok') : 'muted'}>{bot?.main ? (tool.stale ? '配置待核验' : tool.grant ? '执行已配置' : '全权限 · 待配置') : tool.grant ? (tool.stale ? '授权已失效' : '已授予') : '未授予'}</span></div>
+            <div className="bb-tool-body">
+              {tool.grantTools.length > 0 && <details className="bb-tool-permissions"><summary>工具权限明细</summary><p className="bb-note">{tool.grantTools.join('、')}</p></details>}
+              {tool.identities.length === 0 ? <p className="bb-note">当前模型没有已核验的 {tool.toolId} CLI 身份，{bot?.main ? '需要先完成执行配置' : '宿主不会接受授予'}。请改选模型，或先在官方工具面板安装并核验该 CLI。</p> : (
+                <div className="bb-list">{tool.identities.map(identity => {
+                  const checked = tool.grant?.cliModel === identity.model
+                  return <label key={`${identity.toolId}/${identity.model}`} className="bb-check">
+                    <input type="checkbox" checked={checked} onChange={event => setToolGrant(tool, identity.model, event.target.checked)} />
+                    <span>{identity.toolId} / {identity.model}<small>宿主已核验的 CLI 模型名</small></span></label>
+                })}</div>)}
+              {tool.grant && <label className="bb-field bb-field-wide"><span>执行模式</span>
+                <select aria-label={`${tool.label} 的执行模式`} value={tool.grant.mode} onChange={event => setToolMode(tool.toolId, event.target.value)}>
+                  {EXECUTION_MODES.filter(mode => tool.modes.includes(mode)).map(mode => <option key={mode} value={mode}>{MODE_LABEL[mode]}</option>)}</select>
+                <small>{MODE_HELP[tool.grant.mode] ?? ''}</small></label>}
+              {tool.grant && tool.stale && <p className="bb-warn">这个授权指向的 CLI 模型与当前模型尚未核验，宿主会拒绝保存。请移除，或改选已核验的身份。</p>}
+            </div></li>)}</ul>)}
+        <p className="bb-tools-foot">{bot?.main ? 'Main 的全权限不受普通 Bot 能力勾选限制。工具仍需安装、登录并核验 CLI 身份；这里保存默认执行配置。' : '每个工具只能保留一个已核验 CLI 身份；换模型不会自动移除或改指向旧授权。写入与 CLI 自身权限会扩大这个 Bot 的执行范围，请按需要选择。'}</p>
+        {staleTools.length > 0 && <div className="bb-row"><button type="button" className="bb-link" onClick={dropStaleTools}>移除 {staleTools.length} 项未核验授权</button></div>}
+      </section>
+
+      <div className="bb-save">
+        <label className="bb-check"><input type="checkbox" checked={form.enabled} onChange={event => edit({ enabled: event.target.checked })} />
+          <span>启用此绑定<small>模型、工作区、资金范围与必要预算必须完整；未启用时保持停用，不授予执行权。</small></span></label>
+        {problems.length > 0 && <div className="bb-danger"><strong>还不能保存</strong>
+          <ul>{problems.map(item => <li key={item}>{item}</li>)}</ul></div>}
+        <div className="bb-save-row">
+          <span className="bb-pill" data-tone={dirty ? 'warn' : 'muted'}>{dirty ? '有未保存修改' : '与宿主一致'}</span>
+          <span className="bb-pill">修订号 {record.revision ?? 0}</span>
+          <button type="submit" className="bp-button-primary" disabled={busy || Boolean(working) || problems.length > 0}>
+            {working === 'binding' ? '保存中…' : '保存绑定'}</button>
+        </div>
+        {feedback && <p className="bb-feedback" data-kind={feedback.kind} role="status">{feedback.text}</p>}
+        {dirty && seedRevision.current !== record.revision && <button type="button" className="bb-link" onClick={() => {
+          saveToken.current++; workingRef.current = ''; setWorking(''); seedRevision.current = record.revision
+          setForm(seedForm(record, accounts)); setDirty(false); setFeedback(null)
+        }}>放弃草稿并载入最新设置</button>}
+      </div>
     </form>
-  </details>
+  </div>
 }