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

package/apps/integration-client/web-panel-page.jsx

@@ -0,0 +1,221 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { UiIcon } from './ui-icons.jsx'
+import {
+  MAX_WEB_PANELS, WEB_PANEL_LOAD_TIMEOUT_MS, WEB_PANEL_REFERRER_POLICY, WEB_PANEL_SANDBOX,
+  actionError, clientOrigin, framingMessage, isSelfOrigin, movedOrder, openExternally, panelsOf, validateWebPanelDraft,
+} from './web-panel-model.mjs'
+
+// A pinned page shown inside the workspace instead of the chat. The list is the
+// Host's own directory (never this browser's), the frame is a real cross-origin
+// iframe, and a page that refuses framing — or never loads — is answered with the
+// reason plus a way to open it in the browser.
+//
+// Every async result is checked against the Host it was asked of: a replaced Host
+// remounts this board, so a late answer from the previous one cannot name a page
+// the new Host never served.
+
+let scopeKey = 0
+export function WebPanelsPanel(props) {
+  // One board per Host. A replaced product API gets a fresh board instead of a
+  // component that has to remember which answers are still allowed to land.
+  const key = useMemo(() => ++scopeKey, [props.productApi])
+  return <WebPanelBoard key={key} {...props} />
+}
+
+/** The sidebar's compact pin list: the same Host directory, one click to a page. */
+export function WebPanelPins({ panels = [], activeId, onSelect, busy = false }) {
+  if (!panels.length) return null
+  return <nav className="bp-webpanel-pins" aria-label="固定网页面板">
+    <p className="bp-webpanel-pins-label">常用网页</p>
+    <ul>{panels.map(panel => <li key={panel.id}>
+      <button type="button" className="bp-webpanel-pin" aria-current={activeId === panel.id ? 'page' : undefined}
+        disabled={busy} title={`${panel.name} · ${panel.host}`} onClick={() => onSelect?.(panel.id)}>
+        <UiIcon name="board" size={15} />
+        <span className="bp-webpanel-pin-name">{panel.name}</span>
+        <span className="bp-webpanel-pin-host">{panel.host}</span>
+      </button>
+    </li>)}</ul>
+  </nav>
+}
+
+function WebPanelBoard({ productApi, dispatch, busy = false, snapshot, available = true, onLeave, selectedId: drivenId, onSelect }) {
+  const { status, items, revision, limits, reason, nextAction } = panelsOf(snapshot)
+  const [ownId, setOwnId] = useState(null)
+  const [reloads, setReloads] = useState(0)
+  const [probes, setProbes] = useState({})
+  const [draft, setDraft] = useState(null)
+  const [draftError, setDraftError] = useState('')
+  const [notice, setNotice] = useState('')
+  const [error, setError] = useState('')
+  const [frame, setFrame] = useState('loading')
+  const origin = clientOrigin()
+  const leave = useRef(onLeave)
+  leave.current = onLeave
+  // The selection is the board's own unless a parent drives it, so the sidebar pin
+  // list and the board can never disagree about which page is on screen.
+  const selectedId = typeof drivenId === 'string' && drivenId ? drivenId : ownId
+  const select = useCallback(id => { setOwnId(id); setReloads(0); setFrame('loading'); if (typeof onSelect === 'function') onSelect(id) }, [onSelect])
+
+  const panel = items.find(entry => entry.id === selectedId) ?? null
+  const full = limits ? items.length >= limits.maxPanels : false
+  // The board reads the panel it is showing through a ref, so an effect keyed on
+  // the panel's identity does not restart because the list was re-projected.
+  const shown = useRef(null)
+  shown.current = panel
+
+  useEffect(() => { if (!selectedId && items.length) setOwnId(items[0].id) }, [items, selectedId])
+
+  // The selected panel is gone: it was removed here, or this is a different
+  // Host's list. Either way nothing of the old page stays on screen.
+  useEffect(() => {
+    if (selectedId === null || items.some(entry => entry.id === selectedId)) return
+    setOwnId(null); setProbes({}); setReloads(0)
+    leave.current?.()
+  }, [items, selectedId])
+
+  // A page may also change under us (the list was edited elsewhere), so a reload
+  // key covers both an explicit refresh and a new URL.
+  useEffect(() => {
+    if (!selectedId) return
+    setFrame('loading')
+    const timer = setTimeout(() => setFrame(current => (current === 'loading' ? 'failed' : current)), WEB_PANEL_LOAD_TIMEOUT_MS)
+    return () => clearTimeout(timer)
+  }, [selectedId, panel?.url, reloads])
+
+  useEffect(() => {
+    if (!available || !selectedId || typeof productApi?.dispatch !== 'function') return
+    const entry = shown.current
+    if (!entry) return
+    const controller = new AbortController()
+    setProbes(previous => ({ ...previous, [entry.id]: { state: 'checking' } }))
+    productApi.dispatch('webPanels.probe', { id: entry.id }, controller.signal)
+      .then(result => { if (!controller.signal.aborted) setProbes(previous => ({ ...previous, [entry.id]: { state: 'done', ...result } })) })
+      .catch(() => { if (!controller.signal.aborted) setProbes(previous => ({ ...previous, [entry.id]: { state: 'error' } })) })
+    return () => controller.abort()
+  }, [available, selectedId, panel?.url, reloads, productApi])
+
+  const run = useCallback(async (action, payload) => {
+    setError(''); setNotice('')
+    if (typeof dispatch !== 'function') { setError('当前连接暂不能修改固定页面。'); return null }
+    let result
+    try {
+      // The workspace's own dispatch answers a failure as `{ok:false}`; a host that
+      // throws instead is answered the same way rather than losing the message.
+      result = await dispatch(action, payload, { errorResult: true })
+    } catch (cause) { setError(actionError(cause).text); return null }
+    if (result?.ok === false) { setError(actionError(result.error).text); return null }
+    return result
+  }, [dispatch])
+
+  const startAdd = () => { setDraft({ id: null, name: '', url: '' }); setDraftError('') }
+  const startEdit = () => { if (panel) { setDraft({ id: panel.id, name: panel.name, url: panel.url }); setDraftError('') } }
+
+  const save = async () => {
+    if (!draft) return
+    // The draft is checked here only to answer while the person is still typing;
+    // the Host re-validates with the real embedding origin and its own limits.
+    const check = validateWebPanelDraft(draft, origin)
+    if (!check.ok) { setDraftError(actionError({ code: check.error === 'self' ? 'WEB_PANEL_SELF_URL' : check.error === 'name' ? 'WEB_PANEL_NAME' : 'WEB_PANEL_URL' }).text); return }
+    const saved = await run('webPanels.save', { ...(draft.id ? { id: draft.id } : {}), name: check.name, url: check.url, expectedRevision: revision })
+    if (saved) { setDraft(null); setNotice(draft.id ? '已保存修改。' : '已固定该页面。'); if (draft.id) setReloads(value => value + 1); else select(saved.panel.id) }
+  }
+
+  const remove = async panelId => {
+    const removed = await run('webPanels.remove', { id: panelId, expectedRevision: revision })
+    if (removed) setNotice(panelId === selectedId ? '已取消固定，返回工作空间。' : '已取消固定。')
+  }
+
+  const move = async (panelId, delta) => {
+    const ids = movedOrder(items, panelId, delta)
+    if (!ids) return
+    const result = await run('webPanels.order', { ids, expectedRevision: revision })
+    if (result) setNotice('顺序已保存。')
+  }
+
+  const probe = probes[panel?.id] ?? null
+  const verdict = available ? framingMessage(probe) : { tone: 'idle', text: '' }
+  const refused = probe?.state === 'done' && probe.framing === 'blocked'
+  const selfFramed = Boolean(panel && isSelfOrigin(panel.url, origin))
+
+  if (status !== 'available') {
+    return <section className="bp-webpanel" aria-label="固定网页面板">
+      <header className="bp-webpanel-bar"><h2>固定网页面板</h2></header>
+      <p className="bp-webpanel-note" role="status">{status === 'blocked' ? (reason || '宿主尚未提供固定网页面板目录。') : '当前连接暂时无法读取固定网页面板。恢复连接后会在这里显示。'}</p>
+      {status === 'blocked' && nextAction && <p className="bp-webpanel-note bp-webpanel-note-quiet">下一步：{nextAction}</p>}
+    </section>
+  }
+
+  return <section className="bp-webpanel" aria-label="固定网页面板">
+    <header className="bp-webpanel-bar">
+      <h2>固定网页面板</h2>
+      <span className="bp-webpanel-count" aria-label={`已固定 ${items.length} 个，上限 ${limits?.maxPanels ?? MAX_WEB_PANELS} 个`}>{items.length} / {limits?.maxPanels ?? MAX_WEB_PANELS}</span>
+      <button type="button" className="bp-webpanel-button" disabled={busy || !available || full} onClick={startAdd}>
+        <UiIcon name="plus" size={15} /><span>新增固定页面</span>
+      </button>
+    </header>
+    {notice && <p className="bp-webpanel-note bp-webpanel-note-ok" role="status">{notice}</p>}
+    {error && <p className="bp-webpanel-note bp-webpanel-note-bad" role="alert">{error}</p>}
+    {!available && <p className="bp-webpanel-note">当前连接暂不能修改固定页面。</p>}
+    {!items.length && <p className="bp-webpanel-note">还没有固定页面。把常用的本地仪表盘或看板固定在这里，之后在侧栏一键打开。</p>}
+    <div className="bp-webpanel-body">
+      {items.length > 0 && <aside className="bp-webpanel-list" aria-label="已固定的页面">
+        <ul>{items.map((entry, index) => <li key={entry.id} className={entry.id === selectedId ? 'is-active' : ''}>
+          <button type="button" className="bp-webpanel-pin" aria-current={entry.id === selectedId ? 'page' : undefined}
+            disabled={busy} title={`${entry.name} · ${entry.url}`} onClick={() => select(entry.id)}>
+            <UiIcon name="board" size={15} />
+            <span className="bp-webpanel-pin-text"><span className="bp-webpanel-pin-name">{entry.name}</span>
+              <span className="bp-webpanel-pin-host">{entry.host}</span></span>
+          </button>
+          <span className="bp-webpanel-pin-tools">
+            <button type="button" title="上移" aria-label={`把 ${entry.name} 上移`} disabled={busy || !available || index === 0} onClick={() => move(entry.id, -1)}><UiIcon name="chevron" size={14} className="bp-webpanel-chevron-up" /></button>
+            <button type="button" title="下移" aria-label={`把 ${entry.name} 下移`} disabled={busy || !available || index === items.length - 1} onClick={() => move(entry.id, 1)}><UiIcon name="chevron" size={14} className="bp-webpanel-chevron-down" /></button>
+          </span>
+        </li>)}</ul>
+      </aside>}
+      <div className="bp-webpanel-stage">
+        {!panel && <p className="bp-webpanel-note">从左侧选择一个固定页面。</p>}
+        {panel && <>
+          <header className="bp-webpanel-stage-bar">
+            <strong className="bp-webpanel-stage-name" title={panel.url}>{panel.name}</strong>
+            <span className="bp-webpanel-stage-host" title={panel.url}>{panel.host}</span>
+            <span className="bp-webpanel-stage-tools">
+              <button type="button" title="重新加载" aria-label="重新加载该页面" disabled={busy} onClick={() => setReloads(value => value + 1)}><UiIcon name="refresh" size={15} /></button>
+              <button type="button" title="修改名称或网址" disabled={busy || !available} onClick={startEdit}><UiIcon name="settings" size={15} /><span>修改</span></button>
+              <button type="button" className="bp-webpanel-button-danger" title="取消固定该页面" disabled={busy || !available} onClick={() => remove(panel.id)}><UiIcon name="close" size={15} /><span>取消固定</span></button>
+              <button type="button" className="bp-webpanel-button-primary" onClick={() => { if (!openExternally(panel.url)) setError('浏览器没有打开新窗口，请检查弹出窗口设置。') }}><UiIcon name="arrow" size={15} /><span>在浏览器中打开</span></button>
+            </span>
+          </header>
+          {verdict.text && <p className="bp-webpanel-verdict" data-tone={verdict.tone} role="status">{verdict.text}</p>}
+          {refused || selfFramed ? <div className="bp-webpanel-refused">
+            <p className="bp-webpanel-refused-title">{selfFramed ? '不能显示应用自身的页面' : '该网站不允许在这里显示'}</p>
+            <p className="bp-webpanel-refused-body">{selfFramed ? '固定应用自身的页面会让它获得应用的访问权限，因此从不嵌入显示。' : '网站在自己的响应头里拒绝了被其他应用嵌入。可以在浏览器中打开，或换一个允许嵌入的页面。'}</p>
+            <button type="button" className="bp-webpanel-button-primary" onClick={() => openExternally(panel.url)}><UiIcon name="arrow" size={15} /><span>在浏览器中打开</span></button>
+          </div> : <>
+            {frame === 'failed' && <p className="bp-webpanel-note bp-webpanel-note-bad" role="status">页面迟迟没有加载完成。可以在浏览器中打开，或点“重新加载”再试。</p>}
+            <iframe key={`${panel.id}:${panel.url}:${reloads}`} className="bp-webpanel-frame" src={panel.url} title={panel.name}
+              sandbox={WEB_PANEL_SANDBOX} referrerPolicy={WEB_PANEL_REFERRER_POLICY}
+              onLoad={() => setFrame('loaded')} onError={() => setFrame('failed')} />
+          </>}
+        </>}
+      </div>
+    </div>
+    {draft && <div className="bp-webpanel-editor" role="group" aria-label={draft.id ? '修改固定页面' : '新增固定页面'}>
+      <h3>{draft.id ? '修改固定页面' : '新增固定页面'}</h3>
+      <label htmlFor="bp-webpanel-draft-name">名称</label>
+      <input id="bp-webpanel-draft-name" value={draft.name} maxLength={limits?.maxNameChars ?? 40} autoComplete="off"
+        onChange={event => { setDraft({ ...draft, name: event.target.value }); setDraftError('') }} />
+      <label htmlFor="bp-webpanel-draft-url">网址</label>
+      <input id="bp-webpanel-draft-url" value={draft.url} type="url" inputMode="url" autoComplete="off" spellCheck={false}
+        placeholder="http://127.0.0.1:7841/ 或 https://…"
+        onChange={event => { setDraft({ ...draft, url: event.target.value }); setDraftError('') }}
+        onKeyDown={event => { if (event.key === 'Enter') { event.preventDefault(); void save() } }} />
+      {draftError && <p className="bp-webpanel-note bp-webpanel-note-bad" role="alert">{draftError}</p>}
+      <p className="bp-webpanel-note bp-webpanel-note-quiet">只支持 http/https 地址；保存后才会向宿主确认该页面是否允许嵌入，输入过程中不会发送任何请求。</p>
+      <div className="bp-webpanel-editor-tools">
+        <button type="button" className="bp-webpanel-button-primary" disabled={busy || !available} onClick={() => void save()}><span>保存</span></button>
+        <button type="button" className="bp-webpanel-button" onClick={() => { setDraft(null); setDraftError('') }}><span>取消</span></button>
+      </div>
+    </div>}
+  </section>
+}
+

package/apps/integration-client/web-panel-pins-live.jsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react'
+import { WebPanelPins } from './web-panel-page.jsx'
+
+/** The sidebar needs only the pin directory, never the entire usage/task snapshot. */
+export function WebPanelPinsLive({ productApi, onSelect }) {
+  const [state, setState] = useState({ api: null, panels: [] })
+  useEffect(() => {
+    let live = true, generation = 0, controller, timer
+    const read = async () => {
+      const mine = ++generation
+      controller?.abort(); clearTimeout(timer)
+      const request = new AbortController(); controller = request
+      timer = setTimeout(() => request.abort(), 8000)
+      try {
+        const value = await productApi.dispatch('webPanels.list', {}, request.signal)
+        if (live && mine === generation && !request.signal.aborted) setState({ api: productApi, panels: Array.isArray(value?.panels) ? value.panels : [] })
+      } catch {
+        if (live && mine === generation && !request.signal.aborted) setState({ api: productApi, panels: [] })
+      } finally { if (mine === generation) clearTimeout(timer) }
+    }
+    const changed = action => { if (['webPanels.save', 'webPanels.remove', 'webPanels.order'].includes(action)) void read() }
+    const off = productApi.subscribeActions?.(changed)
+    globalThis.window?.addEventListener('focus', read)
+    void read()
+    return () => { live = false; generation++; clearTimeout(timer); controller?.abort(); off?.(); globalThis.window?.removeEventListener('focus', read) }
+  }, [productApi])
+  return <WebPanelPins panels={state.api === productApi ? state.panels : []} onSelect={onSelect}/>
+}

package/apps/integration-client/web-panel.css

@@ -0,0 +1,139 @@
+/*
+ * Pinned web panel styles. Colour lives in the --bp-wp-* tokens below and follows
+ * one appearance: light is the default, the dark block only names what changes.
+ *
+ * The frame itself is deliberately left to the page it shows: this file lays out
+ * the pins, the stage bar and the refusal state, and never paints inside the
+ * iframe, which is a cross-origin document the app has no reach into.
+ */
+html body[data-bot-product-ui] .bp-webpanel {
+  --bp-wp-canvas: #f4f5f7;
+  --bp-wp-surface: #ffffff;
+  --bp-wp-inset: #eef0f3;
+  --bp-wp-hover: #e6e9ee;
+  --bp-wp-line: #dde1e8;
+  --bp-wp-ink: #252a33;
+  --bp-wp-muted: #5f6875;
+  --bp-wp-accent: #4a6484;
+  --bp-wp-accent-ink: #ffffff;
+  --bp-wp-ok: #2e7d32;
+  --bp-wp-bad: #b3261e;
+  --bp-wp-urgent: #8a5a12;
+  display: flex; flex-direction: column; gap: 10px; min-height: 0; color: var(--bp-wp-ink);
+  background: var(--bp-wp-canvas);
+}
+html body[data-bot-product-ui][data-bp-appearance="dark"] .bp-webpanel,
+html body[data-bot-product-ui][data-ds-dark-theme]:not([data-bp-appearance="light"]) .bp-webpanel {
+  --bp-wp-canvas: #131519;
+  --bp-wp-surface: #1c1f24;
+  --bp-wp-inset: #232730;
+  --bp-wp-hover: #2a2f39;
+  --bp-wp-line: #333a45;
+  --bp-wp-ink: #e8eaee;
+  --bp-wp-muted: #aab2bd;
+  --bp-wp-accent: #a9c4e0;
+  --bp-wp-accent-ink: #131519;
+  --bp-wp-ok: #7bd48a;
+  --bp-wp-bad: #f2b8b5;
+  --bp-wp-urgent: #f6c76b;
+}
+
+html body[data-bot-product-ui] .bp-webpanel-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
+html body[data-bot-product-ui] .bp-webpanel-bar h2 { margin: 0; font-size: 14px; font-weight: 600 }
+html body[data-bot-product-ui] .bp-webpanel-count { font-size: 12px; color: var(--bp-wp-muted); font-variant-numeric: tabular-nums }
+html body[data-bot-product-ui] .bp-webpanel-bar .bp-webpanel-button { margin-left: auto }
+
+html body[data-bot-product-ui] .bp-webpanel-button,
+html body[data-bot-product-ui] .bp-webpanel-button-primary,
+html body[data-bot-product-ui] .bp-webpanel-button-danger {
+  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
+  border: 1px solid var(--bp-wp-line); border-radius: 8px; background: var(--bp-wp-surface);
+  color: var(--bp-wp-ink); font: inherit; font-size: 13px; cursor: pointer;
+}
+html body[data-bot-product-ui] .bp-webpanel-button-primary { border-color: transparent; background: var(--bp-wp-accent); color: var(--bp-wp-accent-ink) }
+html body[data-bot-product-ui] .bp-webpanel-button-danger { color: var(--bp-wp-bad) }
+html body[data-bot-product-ui] .bp-webpanel-button:hover:not(:disabled),
+html body[data-bot-product-ui] .bp-webpanel-button-primary:hover:not(:disabled),
+html body[data-bot-product-ui] .bp-webpanel-button-danger:hover:not(:disabled) { background: var(--bp-wp-hover) }
+html body[data-bot-product-ui] .bp-webpanel-button:disabled,
+html body[data-bot-product-ui] .bp-webpanel-button-primary:disabled,
+html body[data-bot-product-ui] .bp-webpanel-button-danger:disabled { opacity: .5; cursor: not-allowed }
+html body[data-bot-product-ui] .bp-webpanel :focus-visible { outline: 2px solid var(--bp-wp-accent); outline-offset: 2px }
+
+html body[data-bot-product-ui] .bp-webpanel-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--bp-wp-muted) }
+html body[data-bot-product-ui] .bp-webpanel-note-quiet { color: var(--bp-wp-muted); opacity: .85 }
+html body[data-bot-product-ui] .bp-webpanel-note-ok { color: var(--bp-wp-ok) }
+html body[data-bot-product-ui] .bp-webpanel-note-bad { color: var(--bp-wp-bad) }
+
+html body[data-bot-product-ui] .bp-webpanel-body { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 10px; align-items: start; min-height: 0 }
+html body[data-bot-product-ui] .bp-webpanel-list { background: var(--bp-wp-surface); border: 1px solid var(--bp-wp-line); border-radius: 10px; overflow: hidden }
+html body[data-bot-product-ui] .bp-webpanel-list ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none }
+html body[data-bot-product-ui] .bp-webpanel-list li { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 0; border-bottom: 1px solid var(--bp-wp-line) }
+html body[data-bot-product-ui] .bp-webpanel-list li:last-child { border-bottom: 0 }
+html body[data-bot-product-ui] .bp-webpanel-list li.is-active { background: var(--bp-wp-inset) }
+html body[data-bot-product-ui] .bp-webpanel-pin {
+  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 44px; padding: 6px 10px;
+  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
+}
+html body[data-bot-product-ui] .bp-webpanel-pin:hover { background: var(--bp-wp-hover) }
+html body[data-bot-product-ui] .bp-webpanel-pin[aria-current="page"] { font-weight: 600 }
+html body[data-bot-product-ui] .bp-webpanel-pin:disabled { opacity: .55; cursor: not-allowed }
+html body[data-bot-product-ui] .bp-webpanel-pin-text { display: flex; flex-direction: column; min-width: 0 }
+html body[data-bot-product-ui] .bp-webpanel-pin-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
+html body[data-bot-product-ui] .bp-webpanel-pin-host { font-size: 11px; color: var(--bp-wp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
+html body[data-bot-product-ui] .bp-webpanel-pin-tools { display: flex; gap: 2px }
+html body[data-bot-product-ui] .bp-webpanel-pin-tools button {
+  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
+  border: 0; border-radius: 6px; background: none; color: var(--bp-wp-muted); cursor: pointer;
+}
+html body[data-bot-product-ui] .bp-webpanel-pin-tools button:hover:not(:disabled) { background: var(--bp-wp-hover); color: var(--bp-wp-ink) }
+html body[data-bot-product-ui] .bp-webpanel-pin-tools button:disabled { opacity: .35; cursor: not-allowed }
+html body[data-bot-product-ui] .bp-webpanel-chevron-up { transform: rotate(180deg) }
+html body[data-bot-product-ui] .bp-webpanel-chevron-down { transform: rotate(90deg) }
+
+html body[data-bot-product-ui] .bp-webpanel-stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0 }
+html body[data-bot-product-ui] .bp-webpanel-stage-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--bp-wp-surface); border: 1px solid var(--bp-wp-line); border-radius: 10px }
+html body[data-bot-product-ui] .bp-webpanel-stage-name { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+html body[data-bot-product-ui] .bp-webpanel-stage-host { font-size: 11px; color: var(--bp-wp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+html body[data-bot-product-ui] .bp-webpanel-stage-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap }
+html body[data-bot-product-ui] .bp-webpanel-stage-tools button { min-height: 30px; padding: 0 8px; font-size: 12px }
+html body[data-bot-product-ui] .bp-webpanel-stage-tools button:first-child { width: 30px; padding: 0; justify-content: center }
+
+html body[data-bot-product-ui] .bp-webpanel-verdict { margin: 0; font-size: 12px; line-height: 1.5; color: var(--bp-wp-muted) }
+html body[data-bot-product-ui] .bp-webpanel-verdict[data-tone="blocked"] { color: var(--bp-wp-urgent) }
+html body[data-bot-product-ui] .bp-webpanel-verdict[data-tone="ok"] { color: var(--bp-wp-ok) }
+html body[data-bot-product-ui] .bp-webpanel-verdict[data-tone="unknown"] { color: var(--bp-wp-muted) }
+
+html body[data-bot-product-ui] .bp-webpanel-refused,
+html body[data-bot-product-ui] .bp-webpanel-editor {
+  display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--bp-wp-surface);
+  border: 1px solid var(--bp-wp-line); border-radius: 10px;
+}
+html body[data-bot-product-ui] .bp-webpanel-refused { align-items: flex-start }
+html body[data-bot-product-ui] .bp-webpanel-refused-title { margin: 0; font-size: 14px; font-weight: 600 }
+html body[data-bot-product-ui] .bp-webpanel-refused-body { margin: 0; font-size: 12px; line-height: 1.6; color: var(--bp-wp-muted); max-width: 46em }
+
+html body[data-bot-product-ui] .bp-webpanel-frame { width: 100%; min-height: 60vh; flex: 1; border: 1px solid var(--bp-wp-line); border-radius: 10px; background: var(--bp-wp-surface) }
+
+html body[data-bot-product-ui] .bp-webpanel-editor h3 { margin: 0; font-size: 13px; font-weight: 600 }
+html body[data-bot-product-ui] .bp-webpanel-editor label { font-size: 12px; color: var(--bp-wp-muted) }
+html body[data-bot-product-ui] .bp-webpanel-editor input {
+  min-height: 34px; padding: 0 10px; border: 1px solid var(--bp-wp-line); border-radius: 8px;
+  background: var(--bp-wp-inset); color: var(--bp-wp-ink); font: inherit; font-size: 13px;
+}
+html body[data-bot-product-ui] .bp-webpanel-editor-tools { display: flex; gap: 8px }
+
+/* The sidebar's compact pin list: one row per page, no tools, nothing to mis-tap. */
+html body[data-bot-product-ui] .bp-webpanel-pins { display: flex; flex-direction: column; gap: 2px; margin-top: auto }
+html body[data-bot-product-ui] .bp-webpanel-pins-label { margin: 0 0 2px; padding: 0 12px; font-size: 11px; color: var(--bp-muted, #76767e) }
+html body[data-bot-product-ui] .bp-webpanel-pins ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none }
+html body[data-bot-product-ui] .bp-webpanel-pins .bp-webpanel-pin { min-height: 34px; padding: 4px 12px; border-radius: 8px }
+html body[data-bot-product-ui] .bp-webpanel-pins .bp-webpanel-pin[aria-current="page"] { background: var(--bp-hover, #ededf0) }
+
+@media (max-width: 900px) {
+  html body[data-bot-product-ui] .bp-webpanel-body { grid-template-columns: minmax(0, 1fr) }
+  html body[data-bot-product-ui] .bp-webpanel-list ul { flex-direction: row; overflow-x: auto }
+  html body[data-bot-product-ui] .bp-webpanel-list li { border-bottom: 0; border-right: 1px solid var(--bp-wp-line) }
+  html body[data-bot-product-ui] .bp-webpanel-list li:last-child { border-right: 0 }
+  html body[data-bot-product-ui] .bp-webpanel-frame { min-height: 70vh }
+}

package/apps/integration-client/workspace-model.mjs

@@ -0,0 +1,67 @@
+import { modelName, TASK_STATES } from './api.mjs'
+import { taskProgress, taskIdOf, taskKey, taskTitle } from './task-progress.mjs'
+import { WORKSPACE_SECTIONS } from './workspace-navigation.mjs'
+
+const timestamp = value => value !== null && value !== undefined && value !== '' && Number.isFinite(new Date(value).getTime()) ? new Date(value).getTime() : null
+const summary = (value, length = 140) => String(value ?? '').replace(/\s+/g, ' ').trim().slice(0, length)
+
+export function workspaceOverview(snapshot) {
+  const progress = taskProgress(snapshot)
+  const bots = (snapshot?.bots ?? []).map(bot => {
+    const work = progress.bots.find(row => row.botId === bot.id)
+    return { ...bot, work, state: work?.attention ? 'attention' : work?.active ? 'active' : 'idle' }
+  })
+  const machines = snapshot?.machines?.status === 'available' ? (snapshot.machines.items ?? []).filter(row => row.status !== 'revoked') : []
+  const recent = [...progress.items].sort((a, b) => (timestamp(b.updatedAt ?? b.createdAt) ?? -1) - (timestamp(a.updatedAt ?? a.createdAt) ?? -1)).slice(0, 6)
+  return { progress, bots, machines, recent, onlineMachines: machines.filter(row => row.status === 'online').length,
+    workingBots: bots.filter(bot => bot.state === 'active').length,
+    tasksAvailable: snapshot?.tasks?.status === 'available', tasksTruncated: snapshot?.tasks?.truncated === true,
+  }
+}
+
+export function taskBoard(progress, rows = progress.items) {
+  const lanes = [
+    { id: 'queued', title: '待开始', icon: 'clock', items: [] },
+    { id: 'running', title: '进行中', icon: 'activity', items: [] },
+    { id: 'attention', title: '需要处理', icon: 'inbox', items: [] },
+    { id: 'finished', title: '已结束', icon: 'check', items: [] },
+    { id: 'other', title: '其他状态', icon: 'tasks', items: [] },
+  ]
+  const byId = new Map(lanes.map(lane => [lane.id, lane]))
+  for (const row of rows) {
+    const category = progress.category(row)
+    const id = category === 'attention' ? 'attention' : category === 'finished' ? 'finished'
+      : ['running', 'cancelling'].includes(row.state) ? 'running' : ['queued', 'ready', 'admitting'].includes(row.state) ? 'queued' : 'other'
+    byId.get(id).items.push(row)
+  }
+  return lanes.filter(lane => lane.id !== 'other' || lane.items.length > 0)
+}
+
+/** Search only the current committed projection; no transcripts or credentials enter this index. */
+export function workspaceSearch(snapshot, query = '', limit = 60) {
+  const terms = query.trim().toLocaleLowerCase().split(/\s+/u).filter(Boolean)
+  const rows = WORKSPACE_SECTIONS.map(row => ({ id: `page:${row.section}`, kind: 'page', label: row.label, detail: row.description,
+    icon: row.icon, target: { section: row.section }, keywords: row.title }))
+  for (const bot of snapshot?.bots ?? []) {
+    rows.push({ id: `bot:${bot.id}`, kind: 'bot', label: summary(bot.name), detail: summary(bot.role || modelName(bot.model)), icon: 'bot',
+      target: { section: 'bindings', botId: bot.id }, sessionId: bot.sessionId, keywords: `${bot.id} ${modelName(bot.model)}` })
+  }
+  for (const task of taskProgress(snapshot).items) {
+    const bot = snapshot?.bots?.find(row => row.id === task.botId)
+    rows.push({ id: `task:${taskKey(task)}`, kind: 'task', label: summary(taskTitle(task)), detail: `${bot?.name ?? task.botId ?? '未取得归属'} · ${TASK_STATES[task.state] ?? task.state}`,
+      icon: 'tasks', target: { section: 'tasks', botId: task.botId, taskId: taskIdOf(task) },
+      keywords: [taskIdOf(task), task.operationId, task.attemptId, task.planId].filter(Boolean).join(' ') })
+  }
+  if (snapshot?.machines?.status === 'available') for (const machine of snapshot.machines.items ?? []) {
+    if (machine.status === 'revoked') continue
+    rows.push({ id: `machine:${machine.id}`, kind: 'machine', label: summary(machine.name || machine.id), detail: '电脑', icon: 'computer',
+      target: { section: 'machines', machineId: machine.id }, keywords: machine.id })
+  }
+  const matches = rows.map((row, index) => {
+    const label = row.label.toLocaleLowerCase(), haystack = `${label} ${row.detail} ${row.keywords ?? ''}`.toLocaleLowerCase()
+    if (!terms.every(term => haystack.includes(term))) return null
+    return { row, rank: terms.length ? terms.every(term => label.startsWith(term)) ? 0 : terms.every(term => label.includes(term)) ? 1 : 2 : 0, index }
+  }).filter(Boolean).sort((a, b) => a.rank - b.rank || a.index - b.index)
+  const count = Math.max(1, Math.min(120, Number.isFinite(limit) ? Math.floor(limit) : 60))
+  return { items: matches.slice(0, count).map(match => match.row), total: matches.length, truncated: matches.length > count }
+}

package/apps/integration-client/workspace-navigation.mjs

@@ -0,0 +1,56 @@
+export const WORKSPACE_SECTIONS = Object.freeze([
+  { section: 'home', title: '工作空间', label: '总览', icon: 'home', group: '工作', description: '从一个目标开始，和你的 Bot 团队一起把事情做好。' },
+  { section: 'inbox', title: '需要你处理', label: '任务待办', icon: 'inbox', group: '工作', description: '集中查看需要确认、补充条件或核对结果的任务。' },
+  { section: 'notifications', title: '通知中心', label: '通知', icon: 'bell', group: '工作', description: '查看 Bot 的任务进展，回到对应的执行记录。' },
+  { section: 'threads', title: '会话线程', label: '线程', icon: 'list', group: '工作', description: '在同一个 Bot 下建立多条独立会话，命名、切换与归档互不串上下文。' },
+  { section: 'tasks', title: '团队任务', label: '任务', icon: 'tasks', group: '工作', description: '从目标到结果，用列表或看板跟进每一项工作。' },
+  { section: 'bindings', title: '我的团队', label: '团队', icon: 'team', group: '资源', description: '认识每位伙伴的职责，配置模型、工具和工作空间。' },
+  { section: 'machines', title: '电脑', label: '远程电脑', icon: 'computer', group: '资源', description: '连接你的电脑，查看工作现场，或随时接过控制权。' },
+  { section: 'library', title: '资料库', label: '资料库', icon: 'folder', group: '资源', description: '把文件和知识交给合适的 Bot，让协作有据可循。' },
+  { section: 'data', title: '数据', label: '数据与图表', icon: 'chart', group: '资源', description: '把资料变成可查询的数据，制作图表并导出结果。' },
+  { section: 'routine', title: '例行工作', label: '例行任务', icon: 'repeat', group: '资源', description: '演示、保存、再次运行，让重复的工作少一点。' },
+  { section: 'usage', title: '费用与用量', label: '费用与用量', icon: 'chart', group: '管理', description: '用真实收据了解团队使用情况和每笔费用。' },
+  { section: 'webPanel', title: '常用网页', label: '网页面板', icon: 'board', group: '工作', description: '把常用的本地仪表盘或看板固定在这里，一键打开；列表保存在宿主，重启后仍在。' },
+])
+
+export const PRODUCT_PANELS = Object.freeze(Object.fromEntries(WORKSPACE_SECTIONS.map(({ section }) => [section, `bot-product-${section}`])))
+export const ADVANCED_PANEL = 'model-router-galgame'
+const scopes = new WeakMap()
+const fallbackScope = {}
+const identity = value => typeof value === 'string' && value.length > 0 && value.length <= 512 ? value : undefined
+
+/** UI focus belongs to one Host API. These addresses confer no execution authority. */
+export function workspaceNavigation(scope) {
+  const key = scope && ['object', 'function'].includes(typeof scope) ? scope : fallbackScope
+  if (scopes.has(key)) return scopes.get(key)
+  const listeners = new Set()
+  let snapshot = null, version = 0, claimedDraft = 0, goalDraft = ''
+  const navigation = Object.freeze({
+    subscribe(listener) { listeners.add(listener); return () => listeners.delete(listener) },
+    getSnapshot: () => snapshot,
+    getGoalDraft: () => goalDraft,
+    saveGoalDraft(text) { goalDraft = typeof text === 'string' ? text.slice(0, 20_000) : '' },
+    navigate(destination) {
+      if (!Object.hasOwn(PRODUCT_PANELS, destination?.section)) throw new TypeError('Unknown workspace section')
+      snapshot = Object.freeze({
+        version: ++version, section: destination.section,
+        botId: identity(destination.botId), taskId: identity(destination.taskId), machineId: identity(destination.machineId),
+        panelId: identity(destination.panelId),
+        attemptId: identity(destination.attemptId),
+        filter: ['all', 'active', 'attention', 'finished'].includes(destination.filter) ? destination.filter : undefined,
+        compose: destination.compose === true,
+        search: destination.search === true,
+        draft: typeof destination.draft === 'string' ? destination.draft.slice(0, 20_000) : undefined,
+      })
+      for (const listener of listeners) listener()
+      return snapshot
+    },
+    claimDraft(requestVersion) {
+      if (!snapshot || snapshot.version !== requestVersion || claimedDraft === requestVersion || typeof snapshot.draft !== 'string') return null
+      claimedDraft = requestVersion
+      return snapshot.draft
+    },
+  })
+  scopes.set(key, navigation)
+  return navigation
+}