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

package/apps/integration-client/bot-profile.css

@@ -0,0 +1,57 @@
+/* Identity and personality inside the Bot settings side window. The panel owns
+   no colour of its own: every surface, border, ink and focus ring is a product
+   token, so light, dark and the DS theme all follow the window around it. */
+html body[data-bot-product-ui] .bp-profile { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--bp-border); border-radius: 12px; background: var(--bp-surface); color: var(--bp-ink); font-family: var(--bp-font, system-ui); }
+html body[data-bot-product-ui] .bp-profile-head { display: flex; align-items: center; gap: 11px; }
+html body[data-bot-product-ui] .bp-profile-badge { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--bp-subtle); color: var(--bp-ink); }
+html body[data-bot-product-ui] .bp-profile-title { min-width: 0; }
+html body[data-bot-product-ui] .bp-profile-title h3 { margin: 0; font-size: 14px; font-weight: 600; }
+html body[data-bot-product-ui] .bp-profile-title p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--bp-muted); }
+html body[data-bot-product-ui] .bp-profile-revision { flex: none; margin-left: auto; padding: 4px 9px; border: 1px solid var(--bp-border); border-radius: 999px; font-size: 11px; color: var(--bp-muted); white-space: nowrap; }
+html body[data-bot-product-ui] .bp-profile-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--bp-border); border-radius: 9px; background: var(--bp-bg); color: var(--bp-muted); }
+html body[data-bot-product-ui] .bp-profile-search:focus-within { border-color: var(--bp-focus); }
+html body[data-bot-product-ui] .bp-profile-search input { flex: 1; min-width: 0; height: 34px; border: 0; outline: none; background: transparent; color: var(--bp-ink); font: inherit; font-size: 13px; }
+html body[data-bot-product-ui] .bp-profile-search input::placeholder { color: var(--bp-quiet); }
+html body[data-bot-product-ui] .bp-profile-search button { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--bp-muted); cursor: pointer; }
+html body[data-bot-product-ui] .bp-profile-search button:hover { background: var(--bp-hover); color: var(--bp-ink); }
+html body[data-bot-product-ui] .bp-profile-status { margin: 0; font-size: 12px; }
+html body[data-bot-product-ui] .bp-profile-error { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bp-border); border-radius: 9px; background: var(--bp-danger-bg); color: var(--bp-danger); font-size: 12px; }
+html body[data-bot-product-ui] .bp-profile-error p { margin: 0; flex: 1; min-width: 0; }
+html body[data-bot-product-ui] .bp-profile-error button { flex: none; padding: 5px 10px; border: 1px solid currentcolor; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
+html body[data-bot-product-ui] .bp-profile-group { border: 1px solid var(--bp-border); border-radius: 10px; background: var(--bp-bg); overflow: hidden; }
+html body[data-bot-product-ui] .bp-profile-group[data-open="false"] { background: var(--bp-surface); }
+html body[data-bot-product-ui] .bp-profile-group-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: var(--bp-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
+html body[data-bot-product-ui] .bp-profile-group-head:hover { background: var(--bp-hover); }
+html body[data-bot-product-ui] .bp-profile-group-head svg:first-child { flex: none; color: var(--bp-muted); }
+html body[data-bot-product-ui] .bp-profile-group-label { font-weight: 600; }
+html body[data-bot-product-ui] .bp-profile-group-hint { margin-left: auto; font-size: 11px; color: var(--bp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+html body[data-bot-product-ui] .bp-profile-group-head svg:last-child { flex: none; color: var(--bp-muted); transition: rotate .15s ease; }
+html body[data-bot-product-ui] .bp-profile-group[data-open="true"] .bp-profile-group-head svg:last-child { rotate: 180deg; }
+html body[data-bot-product-ui] .bp-profile-group-body { display: flex; flex-direction: column; gap: 12px; padding: 2px 12px 12px; }
+html body[data-bot-product-ui] .bp-profile-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+html body[data-bot-product-ui] .bp-profile-field-head { display: flex; align-items: baseline; gap: 8px; }
+html body[data-bot-product-ui] .bp-profile-field-label { font-size: 12px; font-weight: 600; color: var(--bp-ink); }
+html body[data-bot-product-ui] .bp-profile-field-count { margin-left: auto; font-size: 11px; color: var(--bp-quiet); font-variant-numeric: tabular-nums; }
+html body[data-bot-product-ui] .bp-profile-field input, html body[data-bot-product-ui] .bp-profile-field textarea { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--bp-border); border-radius: 8px; background: var(--bp-surface); color: var(--bp-ink); font: inherit; font-size: 13px; line-height: 1.55; resize: vertical; }
+html body[data-bot-product-ui] .bp-profile-field input::placeholder, html body[data-bot-product-ui] .bp-profile-field textarea::placeholder { color: var(--bp-quiet); }
+html body[data-bot-product-ui] .bp-profile-field input:focus-visible, html body[data-bot-product-ui] .bp-profile-field textarea:focus-visible { outline: 2px solid var(--bp-focus); outline-offset: -1px; border-color: var(--bp-focus); }
+html body[data-bot-product-ui] .bp-profile-field textarea { min-height: 92px; }
+html body[data-bot-product-ui] .bp-profile-field-help { font-size: 11px; line-height: 1.55; color: var(--bp-muted); }
+html body[data-bot-product-ui] .bp-profile-field-problem { font-size: 11px; line-height: 1.5; color: var(--bp-danger); }
+html body[data-bot-product-ui] .bp-profile-save { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
+html body[data-bot-product-ui] .bp-profile-pill { flex: none; padding: 4px 9px; border: 1px solid var(--bp-border); border-radius: 999px; background: var(--bp-subtle); font-size: 11px; color: var(--bp-muted); }
+html body[data-bot-product-ui] .bp-profile-pill[data-tone="warn"] { border-color: var(--bp-warning); background: var(--bp-warning-bg); color: var(--bp-warning); }
+html body[data-bot-product-ui] .bp-profile-save button { flex: none; margin-left: auto; }
+html body[data-bot-product-ui] .bp-profile-feedback { margin: 0; font-size: 12px; line-height: 1.55; color: var(--bp-muted); }
+html body[data-bot-product-ui] .bp-profile-feedback[data-kind="saved"] { color: var(--bp-solid); }
+html body[data-bot-product-ui] .bp-profile-feedback[data-kind="error"] { color: var(--bp-danger); }
+html body[data-bot-product-ui] .bp-profile-feedback[data-kind="notice"] { color: var(--bp-warning); }
+html body[data-bot-product-ui] .bp-profile button:focus-visible, html body[data-bot-product-ui] .bp-profile input:focus-visible, html body[data-bot-product-ui] .bp-profile textarea:focus-visible { outline: 2px solid var(--bp-focus); outline-offset: 1px; }
+/* A phone-width settings window keeps every control reachable without sideways scroll. */
+@media (max-width: 520px) {
+  html body[data-bot-product-ui] .bp-profile { padding: 12px; gap: 10px; }
+  html body[data-bot-product-ui] .bp-profile-revision { width: 100%; margin-left: 0; align-self: flex-start; text-align: left; }
+  html body[data-bot-product-ui] .bp-profile-head { flex-wrap: wrap; }
+  html body[data-bot-product-ui] .bp-profile-group-hint { display: none; }
+  html body[data-bot-product-ui] .bp-profile-save button { margin-left: 0; width: 100%; }
+}

package/apps/integration-client/bot-profile.mjs

@@ -0,0 +1,97 @@
+import { BOT_PROFILE_LIMITS, botProfileNameProblem } from '../../packages/orchestration/src/bot-profile.mjs'
+
+/**
+ * The identity slice's own model: which fields exist, what the Host persists,
+ * and the words the panel uses. The limits and the name rule come from the
+ * wiring service so the panel can never offer a value the Host would refuse;
+ * the Host still decides, this is only the pre-check that keeps a save from
+ * being sent to fail.
+ *
+ * What is deliberately absent: no soul column, no reply-style enum, no
+ * personality switch. The frozen roster persists name, role and instructions
+ * and nothing else about who a Bot is, so a control with no field behind it
+ * would be a lie the owner only discovers later.
+ */
+export const BOT_PROFILE_FIELDS = Object.freeze(['name', 'role', 'instructions'])
+
+export const BOT_PROFILE_GROUPS = Object.freeze([
+  { id: 'identity', label: '身份', icon: 'bot', hint: '名称与职责', fields: Object.freeze(['name', 'role']) },
+  { id: 'voice', label: '对话指令与性格', icon: 'spark', hint: '每次对话都会读', fields: Object.freeze(['instructions']) },
+])
+
+export const BOT_PROFILE_FIELD_META = Object.freeze({
+  name: { label: '名称', limit: BOT_PROFILE_LIMITS.name, control: 'input', placeholder: '例如：研究伙伴',
+    help: '群聊与名单里显示的名字，不能与其他 Bot 同名。',
+    terms: Object.freeze(['名称', '名字', '昵称', 'name']) },
+  role: { label: '职责 / 描述', limit: BOT_PROFILE_LIMITS.role, control: 'input', placeholder: '例如：整理可借鉴的设计资料',
+    help: '一句话说明这个 Bot 负责什么；名单与群聊成员里显示这一句。',
+    terms: Object.freeze(['职责', '描述', '一句话', '定位', 'role', 'title']) },
+  instructions: { label: '对话指令 / 性格', limit: BOT_PROFILE_LIMITS.instructions, control: 'textarea', placeholder: '例如：先给结论，再给依据；不确定时说明还缺什么。',
+    help: '这些指令每次对话都会进入上下文，决定这个 Bot 怎么说话、怎么做事。它不授予任何工具权限：模型、工具与执行权限请在“模型与官方工具”里设置。',
+    terms: Object.freeze(['指令', '性格', '对话', '人设', 'instructions', 'personality', 'persona']) },
+})
+
+/** The editable draft: exactly the three fields the Host persists, nothing more. */
+export function botProfileDraft(view) {
+  return { name: view?.bot?.name ?? '', role: view?.bot?.role ?? '', instructions: view?.bot?.instructions ?? '' }
+}
+
+/** Only changed fields travel, so an untouched field is never re-sent to the Host. */
+export function botProfilePatch(draft, view) {
+  const patch = {}
+  for (const field of BOT_PROFILE_FIELDS) if (draft[field] !== (view?.bot?.[field] ?? '')) patch[field] = draft[field]
+  return patch
+}
+
+export function botProfileDirty(draft, view) {
+  return Object.keys(botProfilePatch(draft, view)).length > 0
+}
+
+/** Live problems that make a save pointless before it reaches the Host. */
+export function botProfileProblems(draft) {
+  const problems = []
+  for (const field of BOT_PROFILE_FIELDS) {
+    const value = draft[field]
+    if (value.length > BOT_PROFILE_FIELD_META[field].limit) problems.push({ field, text: `${BOT_PROFILE_FIELD_META[field].label}不能超过 ${BOT_PROFILE_FIELD_META[field].limit} 个字符。` })
+  }
+  const name = botProfileNameProblem(draft.name.trim())
+  if (name !== undefined) problems.push({ field: 'name', text: name })
+  return problems
+}
+
+/** Group visibility for a search: a group matches its own words or any field's. */
+export function botProfileSearch(query) {
+  const needle = String(query ?? '').trim().toLowerCase()
+  if (needle === '') return null
+  const hit = text => String(text).toLowerCase().includes(needle)
+  const groups = {}
+  for (const group of BOT_PROFILE_GROUPS) {
+    groups[group.id] = hit(group.label) || hit(group.hint) || group.fields.some(field => {
+      const meta = BOT_PROFILE_FIELD_META[field]
+      return hit(meta.label) || hit(meta.help) || hit(meta.placeholder) || meta.terms.some(hit)
+    })
+  }
+  return { needle, groups, any: Object.values(groups).some(Boolean) }
+}
+
+export function botProfileSavedText(result) {
+  const fields = Object.freeze({ name: '名称', role: '职责', instructions: '对话指令' })
+  const saved = (result?.saved ?? []).map(field => fields[field] ?? field)
+  if (saved.length === 0) return '与宿主一致，没有需要保存的修改。'
+  return `已保存：${saved.join('、')}。`
+}
+
+/** One place that turns a Host refusal into words the owner can act on. */
+export function botProfileFailure(error) {
+  switch (error?.code) {
+    case 'BOT_PROFILE_CONFLICT': return '这个 Bot 的身份在别处已更新。请重新读取后再保存，你未保存的修改会保留。'
+    case 'BOT_PROFILE_UNKNOWN_BOT': return '这个 Bot 不在已提交的宿主目录中，无法修改它的身份。'
+    case 'BOT_PROFILE_UNCONFIRMED': return '宿主尚未确认这次保存，请重新读取后核对。'
+    case 'BOT_PROFILE_SEAM_UNAVAILABLE': return '当前宿主还不支持保存 Bot 身份，请更新完整插件。'
+    case 'BOT_PROFILE_NAME_INVALID': case 'BOT_PROFILE_NAME_TAKEN': case 'BOT_PROFILE_LIMIT': return error.message
+    case 'REMOTE_OWNER_REQUIRED': return '只有已认证的宿主拥有者可以修改 Bot 身份。'
+    case 'PRODUCT_ACTION_UNAVAILABLE': case 'INVALID_PRODUCT_ACTION': return '当前连接尚不支持身份与个性设置，请更新完整插件。'
+    case 'REQUEST_ABORTED': return '保存结果尚未确认，请重新读取后核对。'
+    default: return '暂时无法保存，请重新读取后核对。'
+  }
+}

package/apps/integration-client/bot-settings-dialog.css

@@ -0,0 +1,18 @@
+html body[data-bot-product-ui] .bp-bot-settings-backdrop { position: fixed; inset: 0; z-index: 9900; display: flex; justify-content: flex-end; background: #0005; color: var(--bp-ink); font-family: var(--bp-font, system-ui); }
+html body[data-bot-product-ui] .bp-bot-settings-dialog { display: flex; flex-direction: column; width: min(620px, 100vw); min-width: 0; height: 100%; background: var(--bp-bg); box-shadow: -12px 0 45px #0002; border-left: 1px solid var(--bp-border); }
+html body[data-bot-product-ui] .bp-bot-settings-header { display: flex; align-items: center; flex: none; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--bp-border); background: var(--bp-surface); }
+html body[data-bot-product-ui] .bp-bot-settings-header h2 { margin: 0; font-size: 17px; font-weight: 600; }
+html body[data-bot-product-ui] .bp-bot-settings-header p { margin: 4px 0 0; font-size: 12px; color: var(--bp-muted); }
+html body[data-bot-product-ui] .bp-bot-settings-header button { display: grid; place-items: center; flex: none; margin-left: auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--bp-ink); cursor: pointer; }
+html body[data-bot-product-ui] .bp-bot-settings-header button:hover { background: var(--bp-hover); }
+html body[data-bot-product-ui] .bp-bot-settings-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--bp-subtle); }
+html body[data-bot-product-ui] .bp-bot-settings-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 22px; }
+html body[data-bot-product-ui] .bp-bot-settings-tabs { display: flex; flex: none; gap: 4px; padding: 10px 18px 0; border-bottom: 1px solid var(--bp-border); background: var(--bp-surface); }
+html body[data-bot-product-ui] .bp-bot-settings-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 12px; margin-bottom: -1px; color: var(--bp-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font: inherit; font-size: 13px; cursor: pointer; }
+html body[data-bot-product-ui] .bp-bot-settings-tabs button[aria-selected=true] { color: var(--bp-ink); border-bottom-color: var(--bp-ink); font-weight: 600; }
+html body[data-bot-product-ui] .bp-bot-settings-body > [hidden] { display: none; }
+html body[data-bot-product-ui] .bp-bot-settings-error { padding: 12px; margin-bottom: 14px; border: 1px solid var(--bp-border); border-radius: 10px; color: var(--bp-ink); background: var(--bp-surface); font-size: 13px; }
+html body[data-bot-product-ui] .bp-bot-settings-error button { padding: 6px 12px; color: inherit; background: var(--bp-subtle); border: 1px solid var(--bp-border); border-radius: 7px; cursor: pointer; }
+html body[data-bot-product-ui] .bp-bot-settings-dialog button:focus-visible { outline: 2px solid var(--bp-focus); outline-offset: -2px; }
+@media (max-width: 520px) { html body[data-bot-product-ui] .bp-bot-settings-body { padding: 16px; } html body[data-bot-product-ui] .bp-bot-settings-header { padding: 14px 16px; } }
+html body[data-bot-product-ui]:has(.bp-bot-settings-backdrop) { overflow: hidden; }

package/apps/integration-client/bot-settings-dialog.jsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useId, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { BotBindingEditor } from './binding-editor.jsx'
+import { BotProfileIdentity } from './bot-profile-identity.jsx'
+import { UiIcon } from './ui-icons.jsx'
+import css from './bot-settings-dialog.css'
+
+let nextScope = 0
+export function BotSettingsDialog(props) {
+  const key = useMemo(() => ++nextScope, [props.productApi, props.botId])
+  return <SettingsDialog key={key} {...props}/>
+}
+
+function SettingsDialog({ productApi, botId, onClose, onOpenTools }) {
+  const [view, setView] = useState(null), [error, setError] = useState(''), [loading, setLoading] = useState(true), [busy, setBusy] = useState(false)
+  const [tab, setTab] = useState('binding'), [identityVisited, setIdentityVisited] = useState(false)
+  const tabId = useId()
+  const surface = useRef(null), closeButton = useRef(null)
+  const session = useRef({ live: false, epoch: 0, busy: false, requests: new Set() })
+  const call = async (action, payload) => {
+    const current = session.current, controller = new AbortController()
+    current.requests.add(controller)
+    let cancel
+    const deadline = new Promise((_resolve, reject) => { cancel = () => reject(new Error('REQUEST_ABORTED')); controller.signal.addEventListener('abort', cancel, { once: true }) })
+    const timer = setTimeout(() => controller.abort(), 10000)
+    try { return await Promise.race([Promise.resolve().then(() => productApi.dispatch(action, payload, controller.signal)), deadline]) }
+    finally { clearTimeout(timer); current.requests.delete(controller); controller.signal.removeEventListener('abort', cancel) }
+  }
+  const read = async () => {
+    const current = session.current, epoch = ++current.epoch
+    setLoading(true)
+    try {
+      const value = await call('binding.inspect', { botId })
+      if (!current.live || epoch !== current.epoch) return
+      if (value?.schemaVersion !== 1 || value.bot?.id !== botId || value.record?.botId !== botId) throw new Error('WRONG_BINDING_OWNER')
+      setView(value); setError('')
+    } catch (cause) {
+      if (current.live && epoch === current.epoch) setError(['PRODUCT_ACTION_UNAVAILABLE', 'INVALID_PRODUCT_ACTION'].includes(cause?.code) ? '当前连接尚不支持模型与工具设置，请更新完整插件。' : '暂时无法读取这个 Bot 的设置，请重试。')
+    } finally { if (current.live && epoch === current.epoch) setLoading(false) }
+  }
+  useEffect(() => {
+    const current = session.current; current.live = true
+    const restore = document.activeElement
+    const style = document.createElement('style'); style.dataset.botSettingsDialog = '1'; style.textContent = css; document.head.append(style)
+    closeButton.current?.focus()
+    void read()
+    return () => {
+      current.live = false; current.epoch++
+      for (const controller of current.requests) controller.abort()
+      style.remove()
+      if (restore?.isConnected && typeof restore.focus === 'function') restore.focus()
+    }
+  }, [productApi, botId])
+  useEffect(() => {
+    const keyboard = event => {
+      if (event.defaultPrevented || event.isComposing || event.keyCode === 229 || document.querySelector('.bp-model-popover')) return
+      const active = document.activeElement
+      if (!surface.current?.contains(active)) return
+      if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); onClose?.() }
+      if (event.key === 'Tab') {
+        const controls = [...surface.current.querySelectorAll('*')].filter(node => ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'SUMMARY'].includes(node.tagName) && !node.disabled && node.getClientRects().length)
+        if (event.shiftKey && active === controls[0]) { event.preventDefault(); controls.at(-1)?.focus() }
+        else if (!event.shiftKey && active === controls.at(-1)) { event.preventDefault(); controls[0]?.focus() }
+      }
+    }
+    document.addEventListener('keydown', keyboard)
+    return () => document.removeEventListener('keydown', keyboard)
+  }, [onClose])
+  const dispatch = async (action, payload) => {
+    const current = session.current
+    if (!current.live || current.busy || !['binding.save', 'funding.account.save'].includes(action) || (action === 'binding.save' && payload?.botId !== botId)) throw new Error('设置暂时无法保存，请重新读取。')
+    current.busy = true; setBusy(true)
+    try {
+      const result = await call(action, payload)
+      if (current.live) await read()
+      return result
+    } catch (cause) {
+      if (cause?.message === 'REQUEST_ABORTED') {
+        if (current.live) setError('保存结果尚未确认，请重新读取后核对。')
+        throw new Error('保存结果尚未确认，请重新读取后核对。')
+      }
+      throw cause
+    } finally { current.busy = false; if (current.live) setBusy(false) }
+  }
+  const chooseTab = next => { setTab(next); if (next === 'identity') setIdentityVisited(true) }
+  const tabKeys = event => {
+    if (event.isComposing || event.keyCode === 229 || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return
+    event.preventDefault()
+    const next = event.key === 'Home' ? 'binding' : event.key === 'End' ? 'identity' : tab === 'binding' ? 'identity' : 'binding'
+    chooseTab(next)
+    event.currentTarget.querySelector(`[data-settings-tab="${next}"]`)?.focus()
+  }
+  return createPortal(<div className="bp-bot-settings-backdrop" onMouseDown={event => { if (event.target === event.currentTarget) onClose?.() }}>
+    <section ref={surface} className="bp-bot-settings-dialog" role="dialog" aria-modal="true" aria-label={`${view?.bot?.name ?? 'Bot'} 的设置`}>
+      <header className="bp-bot-settings-header"><span className="bp-bot-settings-avatar"><UiIcon name="bot" size={23}/></span><div><h2>{view?.bot?.name ?? 'Bot 设置'}</h2><p>模型、工具与 Bot 个性</p></div><button ref={closeButton} type="button" aria-label="关闭 Bot 设置" onClick={onClose}><UiIcon name="close" size={19}/></button></header>
+      <div className="bp-bot-settings-tabs" role="tablist" aria-label="Bot 设置分类" onKeyDown={tabKeys}>
+        {[['binding', '模型与工具', 'spark'], ['identity', '身份与个性', 'bot']].map(([id, label, icon]) => <button key={id} type="button" role="tab" data-settings-tab={id} id={`${tabId}-${id}`} aria-controls={`${tabId}-${id}-panel`} aria-selected={tab === id} tabIndex={tab === id ? 0 : -1} onClick={() => chooseTab(id)}><UiIcon name={icon} size={15}/>{label}</button>)}
+      </div>
+      <div className="bp-page bp-bot-settings-body">
+        <div role="tabpanel" id={`${tabId}-binding-panel`} aria-labelledby={`${tabId}-binding`} hidden={tab !== 'binding'}>
+        {loading && !view && <p className="bp-muted" role="status">正在读取 Bot 设置…</p>}
+        {error && <div className="bp-bot-settings-error" role="alert"><p>{error}</p><button type="button" disabled={busy || loading} onClick={() => void read()}>重新读取</button></div>}
+        {view && <BotBindingEditor bot={view.bot} record={view.record} accounts={view.accounts} dispatch={dispatch} hostScope={productApi} busy={busy || loading || Boolean(error)} onOpenTools={onOpenTools}/>}
+        </div>
+        <div role="tabpanel" id={`${tabId}-identity-panel`} aria-labelledby={`${tabId}-identity`} hidden={tab !== 'identity'}>
+          {identityVisited && <BotProfileIdentity productApi={productApi} botId={botId} busy={busy} onSaved={bot => setView(current => current && bot.id === botId ? { ...current, bot: { ...current.bot, name: bot.name, role: bot.role } } : current)}/>}
+        </div>
+      </div>
+    </section>
+  </div>, document.body)
+}

package/apps/integration-client/bot-thread-header-bridge.css

@@ -0,0 +1,20 @@
+/* The directory palette is scoped to .bp-threads. The header lives in the
+   existing chat toolbar and inherits that conversation's appearance instead. */
+html body[data-bot-product-ui] .bp-threads-head-wrap {
+  --bp-thread-surface: var(--bp-chat-surface);
+  --bp-thread-inset: var(--bp-chat-inset);
+  --bp-thread-hover: var(--bp-chat-hover);
+  --bp-thread-line: var(--bp-chat-line);
+  --bp-thread-ink: var(--bp-chat-ink);
+  --bp-thread-muted: var(--bp-chat-muted);
+  --bp-thread-accent: var(--bp-chat-accent);
+  --bp-thread-accent-ink: var(--bp-chat-accent-ink);
+  --bp-thread-focus: var(--bp-chat-focus);
+  --bp-thread-wait: var(--bp-chat-warning);
+}
+html body[data-bot-product-ui] .bp-threads-head-wrap :is(button, input):focus-visible { outline: 2px solid var(--bp-chat-focus); outline-offset: 2px; }
+@media (max-width: 640px) {
+  html body[data-bot-product-ui] .bp-threads-head-wrap { position: static; }
+  html body[data-bot-product-ui] .bp-threads-head-wrap .bp-threads-head { max-width: 76px; padding: 0 6px; }
+  html body[data-bot-product-ui] .bp-threads-head-wrap .bp-threads-head-name { max-width: 38px; }
+}

package/apps/integration-client/bot-thread-header.jsx

@@ -0,0 +1,278 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { UiIcon } from './ui-icons.jsx'
+import { THREAD_ACTIONS, formatThreadAt, isArchivedThread, sortedThreads, threadLabel } from './bot-threads-panel.jsx'
+
+// The chat-header control for a Bot's threads.
+//
+// It answers two questions the native header cannot: which thread of this Bot
+// is open, and what the Bot's other threads are. Everything else about the
+// conversation — the Bot's model, its computer, its memory, its tasks — stays
+// where the product already puts it, so this is one control, not a second
+// toolbar.
+//
+// It owns no authority. Opening a thread asks the Host for that thread's real
+// Session and only then hands the id to `onOpenSession` (the native
+// `actions.openSession` by default); creating one is the same, after an
+// explicit create. Nothing here sends a greeting, a message, a model request
+// or a Task, and no thread parameter ever carries a model, a route, a folder
+// or a credential — the Bot's committed grant decides what a turn may do.
+//
+// The Host is read through the product API with an abort, a deadline and an
+// epoch per read: a late or withdrawn answer never rewrites the list, and the
+// list is read for one Bot on a change or while the menu is open, never as a
+// repeated full snapshot.
+
+const REQUEST_MS = 8000
+const MENU_MS = 2500
+const MAX_NAME = 80
+
+let headSeq = 0
+
+// An IME composition is not a submission: Enter that confirms a candidate must
+// never create a thread.
+const submits = event => event.key === 'Enter' && event.nativeEvent?.isComposing !== true && event.keyCode !== 229
+
+function abortable(work, signal) {
+  let cancel
+  const interrupted = new Promise((_resolve, reject) => {
+    cancel = () => reject(new Error('THREAD_REQUEST_ABORTED'))
+    signal.addEventListener('abort', cancel, { once: true })
+    if (signal.aborted) cancel()
+  })
+  return Promise.race([Promise.resolve().then(work), interrupted]).finally(() => signal.removeEventListener('abort', cancel))
+}
+
+/** The same Bot-scoped refusals the directory panel reports, in the owner's words. */
+export function headerThreadNote(error) {
+  switch (error?.code) {
+    case 'BOT_THREADS_STORAGE_FAILED': return '线程目录无法读取，已停止写入与发送。请修复存储后重启宿主。'
+    case 'THREAD_ARCHIVED': return '这个线程已归档，只能只读打开。'
+    case 'SESSION_UNKNOWN': return '这个线程的会话建立结果未知，请在线程目录中核对后恢复。'
+    case 'SESSION_NOT_OWNED': return '宿主没有确认这个线程会话的归属。'
+    case 'BOT_GRANT_EMPTY': return '这个 Bot 的授权已被撤销或停用。'
+    case 'BOT_NOT_COMMITTED': return '这个 Bot 已不在已提交状态。'
+    case 'RUNTIME_MODE_MISMATCH': return '这个 Bot 已由另一个运行时提供服务。'
+    case 'THREAD_REQUEST_ABORTED': return '宿主没有在约定时间内回答。'
+    default: return '操作未得到宿主确认。'
+  }
+}
+
+export function BotThreadHeader({ sessionId, roster, productApi, actions, onOpenSession, onOpenPanel, className }) {
+  // The thread that is open, and the Bot it belongs to. The roster indexes a
+  // thread Session under its Bot, so both identities are known here.
+  const thread = roster?.threadsById?.[sessionId] ?? null
+  const bot = roster?.byId?.[sessionId] ?? null
+  const botId = thread?.botId ?? bot?.id ?? null
+  const [open, setOpen] = useState(false)
+  const [rows, setRows] = useState(null)
+  const [pending, setPending] = useState(false)
+  const [note, setNote] = useState('')
+  const [draft, setDraft] = useState('')
+  const [place, setPlace] = useState(null)
+  const live = useRef({ mounted: false, requests: new Set(), queue: Promise.resolve(), loaded: false, inflight: null })
+  const root = useRef(null)
+  const chip = useRef(null)
+  // Two epochs, one per kind of read: only the newest open may navigate, and
+  // only the newest list may rewrite the rows.
+  const opening = useRef(0)
+  const reading = useRef(0)
+  // One create intent, one key, held until the Host answers (see createThread).
+  const createKey = useRef(null)
+  const navigate = id => (typeof onOpenSession === 'function' ? onOpenSession(id) : actions?.openSession?.(id))
+  // Closing gives the caret back to the chip that opened the menu, so a keyboard
+  // owner is never dropped on the page when the input disappears.
+  const closeMenu = () => {
+    setOpen(false)
+    if (root.current?.contains(document.activeElement)) chip.current?.focus()
+  }
+  // One guarded call at a time, in the order it was made; a reply counts only
+  // while this control is mounted and no newer call of the same kind began.
+  const call = (action, payload, epoch) => {
+    const mine = epoch === undefined ? 0 : epoch.current + 1
+    if (epoch !== undefined) epoch.current = mine
+    // The newest call retires the one before it, so a Host that never answers
+    // cannot hold the queue.
+    const idle = live.current.inflight === null
+    live.current.inflight?.abort()
+    const run = idle ? step(action, payload, epoch, mine) : live.current.queue.then(() => step(action, payload, epoch, mine))
+    live.current.queue = run.then(() => undefined, () => undefined)
+    return run
+  }
+  const step = async (action, payload, epoch, mine) => {
+    const current = live.current
+    if (!current.mounted || typeof productApi?.dispatch !== 'function') return { abandoned: true }
+    const controller = new AbortController()
+    current.inflight = controller
+    current.requests.add(controller)
+    let expired = false
+    const timeout = setTimeout(() => { expired = true; controller.abort() }, REQUEST_MS)
+    try {
+      const result = await abortable(() => productApi.dispatch(action, payload, controller.signal), controller.signal)
+      if (!current.mounted || controller.signal.aborted || (epoch !== undefined && epoch.current !== mine)) return { abandoned: true }
+      return { ok: true, result }
+    } catch (error) {
+      if (!current.mounted || (epoch !== undefined && epoch.current !== mine)) return { abandoned: true }
+      // A deadline the Host missed is reported; a call a newer one retired is not.
+      if (expired) return { ok: false, error: Object.assign(new Error('宿主没有在约定时间内回答。'), { code: 'THREAD_REQUEST_ABORTED' }) }
+      return controller.signal.aborted ? { abandoned: true } : { ok: false, error }
+    } finally { clearTimeout(timeout); current.requests.delete(controller); if (current.inflight === controller) current.inflight = null }
+  }
+
+  const read = useCallback(async () => {
+    const current = live.current
+    if (!current.mounted || !botId) return
+    const outcome = await call(THREAD_ACTIONS.list, { botId }, reading)
+    if (outcome.ok) { current.loaded = true; setRows(sortedThreads(outcome.result?.threads)) }
+    else if (outcome.error !== undefined && (!current.loaded || outcome.error.code === 'BOT_THREADS_STORAGE_FAILED')) setNote(headerThreadNote(outcome.error))
+  }, [botId, productApi])
+
+  // Read once per Bot, and again only while the menu is open: a closed control
+  // pulls nothing, and an open one follows the Host without a full snapshot.
+  useEffect(() => {
+    const current = live.current
+    current.mounted = true
+    void read()
+    return () => { current.mounted = false; reading.current += 1; opening.current += 1; for (const controller of current.requests) controller.abort(); current.requests.clear() }
+  }, [read])
+  useEffect(() => {
+    if (!open) return undefined
+    const timer = setInterval(() => void read(), MENU_MS)
+    return () => clearInterval(timer)
+  }, [open, read])
+  useEffect(() => {
+    if (!open) return undefined
+    const away = event => { if (!root.current?.contains(event.target)) setOpen(false) }
+    // Escape closes the menu and gives the caret back to the chip that opened it,
+    // so a keyboard owner is never dropped on the page.
+    const key = event => {
+      if (event.key !== 'Escape') return
+      closeMenu()
+    }
+    document.addEventListener('mousedown', away)
+    document.addEventListener('keydown', key)
+    return () => { document.removeEventListener('mousedown', away); document.removeEventListener('keydown', key) }
+  }, [open])
+  // The menu is placed against the control's own box, not against whatever
+  // ancestor happens to be positioned: it sits in the product's chat toolbar,
+  // whose layout the toolbar itself owns.
+  useEffect(() => {
+    if (!open) { setPlace(null); return undefined }
+    const measure = () => {
+      const box = root.current?.getBoundingClientRect()
+      if (box === undefined) return
+      const width = Math.min(300, Math.max(200, window.innerWidth - 24))
+      const left = Math.min(Math.max(8, box.right - width), Math.max(8, window.innerWidth - width - 8))
+      const below = box.bottom + 6, above = box.top - 6
+      setPlace({ left, top: below + 320 < window.innerHeight || above < 320 ? below : undefined, bottom: below + 320 < window.innerHeight || above < 320 ? undefined : window.innerHeight - above })
+    }
+    measure()
+    window.addEventListener('resize', measure)
+    window.addEventListener('scroll', measure, true)
+    return () => { window.removeEventListener('resize', measure); window.removeEventListener('scroll', measure, true) }
+  }, [open])
+
+  const openThread = async (threadId, { create = false } = {}) => {
+    setNote('')
+    setPending(true)
+    const outcome = await call(THREAD_ACTIONS.open, { botId, threadId, ...(create ? { create: true } : {}) }, opening)
+    setPending(false)
+    if (!outcome.ok) { if (outcome.error !== undefined) setNote(headerThreadNote(outcome.error)); return }
+    const id = outcome.result?.sessionId ?? null
+    // Only a Session the Host confirmed is navigated to.
+    if (typeof id === 'string' && id !== '') { closeMenu(); setDraft(''); navigate(id) }
+    else if (create) setNote('宿主没有返回这个线程的会话。')
+  }
+  const createThread = async () => {
+    // One intent, one key, held until the Host answers: a timeout or an unknown
+    // outcome followed by another click is the same intent, so the Host answers
+    // with the thread it already made instead of a second one. The key is
+    // retired only when the create is confirmed or the owner abandons it.
+    if (createKey.current === null) createKey.current = `head-${botId}-${++headSeq}`
+    const requestKey = createKey.current
+    const name = draft.trim().slice(0, MAX_NAME)
+    setNote('')
+    setPending(true)
+    const made = await call(THREAD_ACTIONS.create, { botId, name: name || undefined, requestKey })
+    setPending(false)
+    const threadId = made.result?.thread?.threadId
+    if (typeof threadId !== 'string') {
+      if (made.error !== undefined) setNote(headerThreadNote(made.error))
+      // Unconfirmed: the key stands, so the next attempt is the same intent.
+      return
+    }
+    createKey.current = null
+    setDraft('')
+    await openThread(threadId, { create: true })
+  }
+
+  const list = rows ?? []
+  const current = list.find(row => row.sessionId === sessionId || row.threadId === thread?.threadId) ?? null
+  // The Bot's own default chat is not a thread and is never given a substitute
+  // Session: it is listed so a thread can be left again, and opening it hands
+  // the shell the Bot id it already trusts.
+  const defaultChat = { threadId: null, name: `${bot?.name ?? botId} 的默认聊天`, sessionId: bot?.sessionId ?? bot?.id ?? botId, state: 'open', archivedAt: null, sessionState: 'owned', updatedAt: 0, active: current === null }
+  // The thread's own name comes from the freshest source that has it: the
+  // directory answer for a thread the Host has not recorded yet, the roster for
+  // one it has. The Bot beside it is the identity the roster confirms.
+  const label = current !== null ? threadLabel(current) : thread !== null ? threadLabel({ name: thread.name }) : (bot?.name ?? '')
+  const botName = bot?.name ?? null
+  const title = botName !== null ? `${label} · ${botName}` : label
+  // Without a Bot there is nothing to switch: the default chat is not a
+  // thread, and this control stays out of the way.
+  if (botId === null) return null
+  return (
+    <div className={`bp-threads-head-wrap${open ? ' is-open' : ''}${className ? ` ${className}` : ''}`} ref={root}>
+      <button type="button" className="bp-threads-head" ref={chip} aria-haspopup="menu" aria-expanded={open}
+        aria-label={botName !== null ? `当前线程 ${label}（${botName}），打开这个 Bot 的线程列表` : `打开这个 Bot 的线程列表`}
+        title={title} onClick={() => { setOpen(!open); if (!open) void read() }}>
+        <UiIcon name="list" size={14} />
+        <span className="bp-threads-head-name">{label}</span>
+        {list.length > 0 && <span className="bp-threads-head-count">{list.length + 1}</span>}
+      </button>
+      {open && (
+        <div className="bp-threads-menu" role="menu" aria-label={`${bot?.name ?? botId} 的会话线程`} style={place === null ? undefined : { position: 'fixed', left: `${place.left}px`, top: place.top === undefined ? undefined : `${place.top}px`, bottom: place.bottom === undefined ? undefined : `${place.bottom}px` }}>
+          <p className="bp-threads-menu-title">{bot?.name ?? botId} 的会话</p>
+          {note && <p className="bp-threads-note" role="alert">{note}</p>}
+          {rows === null && <p className="bp-threads-note" role="status">正在读取线程目录…</p>}
+          <ul className="bp-threads-menu-list">
+            <li key="default">
+              <button type="button" role="menuitem" data-state="default" className={`bp-threads-menu-row${current === null ? ' is-active' : ''}`}
+                disabled={pending} onClick={() => { if (current !== null) { closeMenu(); navigate(defaultChat.sessionId) } }}>
+                <span className="bp-threads-menu-name">{defaultChat.name}</span>
+                <span className="bp-threads-menu-meta">
+                  {current === null && <span className="bp-thread-badge">当前</span>}
+                  <span className="bp-thread-badge is-quiet">默认聊天</span>
+                </span>
+              </button>
+            </li>
+            {list.map(row => (
+              <li key={row.threadId}>
+                <button type="button" role="menuitem" data-state={isArchivedThread(row) ? 'archived' : 'open'} className={`bp-threads-menu-row${current?.threadId === row.threadId ? ' is-active' : ''}`}
+                  disabled={pending} onClick={() => { if (current?.threadId !== row.threadId) void openThread(row.threadId, { create: !isArchivedThread(row) }) }}>
+                  <span className="bp-threads-menu-name">{threadLabel(row)}</span>
+                  <span className="bp-threads-menu-meta">
+                    {current?.threadId === row.threadId && <span className="bp-thread-badge">当前</span>}
+                    {isArchivedThread(row) && <span className="bp-thread-badge is-quiet">归档 · 只读</span>}
+                    {row.sessionState === 'unbound' && <span className="bp-thread-badge is-wait">待宿主确认</span>}
+                    <span className="bp-thread-time">{formatThreadAt(row.updatedAt)}</span>
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+          <div className="bp-threads-menu-new">
+            <input className="bp-threads-input" value={draft} maxLength={MAX_NAME} placeholder="新线程名称（可留空）"
+              aria-label="新线程名称" onChange={event => setDraft(event.target.value)}
+              onKeyDown={event => { if (submits(event) && !pending) void createThread() }} />
+            <button type="button" className="bp-threads-button" disabled={pending} onClick={() => void createThread()}>
+              <UiIcon name="plus" size={16} /><span>新建线程</span>
+            </button>
+          </div>
+          {typeof onOpenPanel === 'function' && (
+            <button type="button" className="bp-threads-menu-more" onClick={() => { closeMenu(); onOpenPanel() }}>在线程目录中管理归档与名称</button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}