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

package/apps/integration-client/model-picker.jsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { UiIcon } from './ui-icons.jsx'
+import css from './model-picker.css'
+
+const routeOf = value => `${value.provider}/${value.model}`
+const labelOf = value => value?.label && value.label !== routeOf(value) ? value.label : value?.model ?? ''
+
+/** OpenMausBot-style compact picker: provider rail, searchable models, explicit choice. */
+export function BotModelPicker({ models = [], value = '', onSelect, disabled = false, label = '默认模型', note = '此选择用于当前 Bot，保存配置后生效。' }) {
+  const selected = models.find(model => routeOf(model) === value)
+  const providers = useMemo(() => [...new Set(models.map(model => model.provider))], [models])
+  const [open, setOpen] = useState(false), [provider, setProvider] = useState(''), [query, setQuery] = useState('')
+  const [placement, setPlacement] = useState(null)
+  const trigger = useRef(null), panel = useRef(null), search = useRef(null)
+  const close = (restore = true) => { setOpen(false); if (restore) trigger.current?.focus() }
+  const filtered = models.filter(model => (!provider || model.provider === provider) && `${model.provider} ${model.model} ${model.label ?? ''}`.toLowerCase().includes(query.trim().toLowerCase()))
+  useEffect(() => {
+    const style = document.createElement('style'); style.dataset.botModelPicker = '1'; style.textContent = css; document.head.append(style)
+    return () => style.remove()
+  }, [])
+  useEffect(() => { if (disabled) setOpen(false) }, [disabled])
+  useLayoutEffect(() => {
+    if (!open) return undefined
+    const position = () => {
+      const rect = trigger.current?.getBoundingClientRect()
+      if (!rect) return
+      const width = Math.min(560, window.innerWidth - 24), height = Math.min(430, window.innerHeight - 24)
+      const below = window.innerHeight - rect.bottom - 12
+      const top = below >= Math.min(height, 290) ? rect.bottom + 8 : Math.max(12, Math.min(rect.top - height - 8, window.innerHeight - height - 12))
+      setPlacement({ left: Math.max(12, Math.min(rect.left, window.innerWidth - width - 12)), top, width, maxHeight: Math.max(160, Math.min(height, window.innerHeight - top - 12)) })
+    }
+    position()
+    const outside = event => { if (!panel.current?.contains(event.target) && !trigger.current?.contains(event.target)) close(false) }
+    document.addEventListener('pointerdown', outside)
+    window.addEventListener('resize', position); window.addEventListener('scroll', position, true)
+    return () => { document.removeEventListener('pointerdown', outside); window.removeEventListener('resize', position); window.removeEventListener('scroll', position, true) }
+  }, [open])
+  // The first portal paint is hidden until placement is known. Focus it only
+  // after that visible paint; focusing a hidden input is ignored by browsers.
+  useLayoutEffect(() => { if (open && placement) search.current?.focus() }, [open, Boolean(placement)])
+  const choose = model => { if (!disabled && typeof onSelect === 'function') { onSelect(model); close() } }
+  const onKey = event => {
+    if (event.isComposing || event.nativeEvent?.isComposing || event.keyCode === 229) return
+    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); close(); return }
+    const rows = [...panel.current.querySelectorAll('[data-model-choice]')]
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && (event.target === search.current || event.target.hasAttribute('data-model-choice'))) {
+      event.preventDefault()
+      const index = rows.indexOf(document.activeElement)
+      const next = event.key === 'Home' ? 0 : event.key === 'End' ? rows.length - 1 : index < 0 ? event.key === 'ArrowUp' ? rows.length - 1 : 0 : (index + (event.key === 'ArrowDown' ? 1 : -1) + rows.length) % rows.length
+      rows[next]?.focus(); return
+    }
+    if (event.key === 'Tab') {
+      const controls = [...panel.current.querySelectorAll('*')].filter(node => ['BUTTON', 'INPUT'].includes(node.tagName) && !node.disabled)
+      if (event.shiftKey && document.activeElement === controls[0]) { event.preventDefault(); controls.at(-1)?.focus() }
+      else if (!event.shiftKey && document.activeElement === controls.at(-1)) { event.preventDefault(); controls[0]?.focus() }
+    }
+  }
+  return <div className="bp-model-picker">
+    <span className="bp-model-picker-label">{label}</span>
+    <button ref={trigger} className="bp-model-picker-trigger" type="button" disabled={disabled || !models.length} aria-label={`选择${label}：${selected ? labelOf(selected) : value || '未选择'}`} aria-haspopup="dialog" aria-expanded={open} onClick={() => {
+      if (open) { close(); return }
+      setProvider(selected?.provider ?? ''); setQuery(''); setOpen(true)
+    }}>
+      <span className="bp-model-provider-mark" aria-hidden="true">{(selected?.provider ?? '?').slice(0, 2).toUpperCase()}</span>
+      <span className="bp-model-current"><strong>{selected ? labelOf(selected) : value || '选择模型'}</strong><small>{selected?.provider ?? (value ? '当前模型暂不可用' : '选择提供商和模型')}</small></span>
+      <UiIcon name="chevron" size={15}/>
+    </button>
+    {!models.length && <p className="bp-model-picker-note">还没有可用模型，请先在模型设置中连接提供商。</p>}
+    {value && !selected && <p className="bp-model-picker-note" role="status">已保存的模型暂不在可用目录中，请重新选择或恢复连接。</p>}
+    {open && createPortal(<div ref={panel} className="bp-model-popover" role="dialog" aria-modal="true" aria-label="选择 Bot 模型" style={placement ?? { visibility: 'hidden' }} onKeyDown={onKey}>
+      <header className="bp-model-search"><UiIcon name="search" size={17}/><input ref={search} aria-label="搜索可用模型" placeholder="搜索模型或提供商…" value={query} onChange={event => setQuery(event.target.value)}/><button type="button" aria-label="关闭模型选择" onClick={() => close()}><UiIcon name="close" size={16}/></button></header>
+      <div className="bp-model-options">
+        <nav className="bp-model-provider-rail" aria-label="模型提供商"><button type="button" aria-pressed={!provider} onClick={() => setProvider('')}>全部提供商</button>{providers.map(id => <button type="button" data-provider={id} aria-pressed={provider === id} key={id} onClick={() => setProvider(id)}><span aria-hidden="true">{id.slice(0, 2).toUpperCase()}</span>{id}</button>)}</nav>
+        <div className="bp-model-results" role="group" aria-label="可用模型"><p className="bp-model-results-caption">{provider || '全部模型'}<span>{filtered.length}</span></p>{filtered.length ? filtered.map(model => {
+          const route = routeOf(model)
+          return <button key={route} data-model-choice={route} data-route={route} className="bp-model-option" type="button" aria-pressed={route === value} onClick={() => choose(model)}><span><strong>{labelOf(model)}</strong><small>{model.provider} · {model.model}</small></span>{route === value && <UiIcon name="check" size={16}/>}</button>
+        }) : <p className="bp-model-empty">没有匹配的模型，试试其他关键词或提供商。</p>}</div>
+      </div>
+      <footer>{note}</footer>
+    </div>, document.body)}
+  </div>
+}

package/apps/integration-client/native-activity.css

@@ -0,0 +1,141 @@
+/* Native tool activity surface.
+ *
+ * One calm, compact surface for what a native engine actually did. It shares the
+ * chat tokens (--bp-chat-*) and the body[data-bot-product-ui] scope, so light,
+ * dark and 375px come from the same palette and rules as the rest of the chat.
+ *
+ * Scope. Every rule hangs off body[data-bot-product-ui], so the Harness
+ * workbench, other Sessions and the plain Agent view keep their own styling.
+ * Nothing here overrides layout, the composer or any native control: this is an
+ * observation, not a second toolbar.
+ *
+ * Colour lives in the chat tokens. The browser verifier checks state-label
+ * contrast on the rendered surface. The four states use shape and word as well
+ * as colour, so a colour-blind owner still reads 进行中 / 已返回 / 返回错误 /
+ * 待核对, and a late CLI return never borrows the success colour.
+ */
+
+html body[data-bot-product-ui] .bp-na-chip,
+html body[data-bot-product-ui] .bp-na-card-toggle {
+  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; max-width: 100%;
+  padding: 3px 9px 3px 7px; border: 1px solid var(--bp-chat-line); border-radius: 999px;
+  background: var(--bp-chat-surface); color: var(--bp-chat-muted); font-size: 11px; line-height: 1.4;
+  text-align: left; white-space: nowrap; cursor: pointer;
+}
+html body[data-bot-product-ui] .bp-na-chip:hover,
+html body[data-bot-product-ui] .bp-na-card-toggle:hover { color: var(--bp-chat-ink); background: var(--bp-chat-hover); }
+html body[data-bot-product-ui] .bp-na-chip > svg,
+html body[data-bot-product-ui] .bp-na-card-toggle > svg { flex: none; }
+html body[data-bot-product-ui] .bp-na-chip-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+html body[data-bot-product-ui] .bp-na-chip-count {
+  flex: none; padding: 0 5px; border-radius: 999px; background: var(--bp-chat-inset);
+  color: var(--bp-chat-muted); font-size: 10px; font-variant-numeric: tabular-nums;
+}
+/* A state is carried by its word first and its colour second, so the four states
+   stay apart without depending on hue alone. */
+html body[data-bot-product-ui] .bp-na-chip[data-state=running],
+html body[data-bot-product-ui] .bp-na-card[data-state=running] { color: var(--bp-chat-accent); border-color: var(--bp-chat-accent); }
+html body[data-bot-product-ui] .bp-na-chip[data-state=running] > svg:first-child { animation: bp-na-pulse 1.6s ease-in-out infinite; }
+@keyframes bp-na-pulse { 50% { opacity: .4; } }
+html body[data-bot-product-ui] .bp-na-chip[data-state=cli-error],
+html body[data-bot-product-ui] .bp-na-card[data-state=cli-error] { color: var(--bp-chat-danger); border-color: var(--bp-chat-danger); }
+html body[data-bot-product-ui] .bp-na-chip[data-state=turn-unconfirmed],
+html body[data-bot-product-ui] .bp-na-card[data-state=turn-unconfirmed] { color: var(--bp-chat-warning); border-color: var(--bp-chat-warning); }
+
+html body[data-bot-product-ui] .bp-na-dialog {
+  position: fixed; z-index: 60; width: min(360px, calc(100vw - 24px)); max-height: min(420px, calc(100vh - 32px));
+  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bp-chat-line-strong);
+  border-radius: 14px; background: var(--bp-chat-surface); color: var(--bp-chat-ink); box-shadow: var(--bp-chat-shadow-float);
+}
+html body[data-bot-product-ui] .bp-na-dialog > header {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none;
+  padding: 9px 10px 9px 13px; border-bottom: 1px solid var(--bp-chat-line); font-size: 12px;
+}
+html body[data-bot-product-ui] .bp-na-dialog > header button {
+  display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px;
+  background: transparent; color: var(--bp-chat-muted); cursor: pointer;
+}
+html body[data-bot-product-ui] .bp-na-dialog > header button:hover { color: var(--bp-chat-ink); background: var(--bp-chat-inset); }
+html body[data-bot-product-ui] .bp-na-dialog-body { min-height: 0; overflow: auto; padding: 8px 10px 11px; }
+html body[data-bot-product-ui] .bp-na-scope {
+  margin: 0 3px 8px; color: var(--bp-chat-muted); font-size: 10px; line-height: 1.5;
+}
+html body[data-bot-product-ui] .bp-na-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+html body[data-bot-product-ui] .bp-na-row {
+  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-auto-rows: auto;
+  align-items: start; gap: 3px 8px; padding: 7px 3px; border-radius: 9px;
+}
+html body[data-bot-product-ui] .bp-na-row:hover { background: var(--bp-chat-inset); }
+html body[data-bot-product-ui] .bp-na-row-icon {
+  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
+  background: var(--bp-chat-inset); color: var(--bp-chat-muted);
+}
+html body[data-bot-product-ui] .bp-na-row[data-state=running] .bp-na-row-icon { color: var(--bp-chat-accent); }
+html body[data-bot-product-ui] .bp-na-row[data-state=cli-error] .bp-na-row-icon { color: var(--bp-chat-danger); }
+html body[data-bot-product-ui] .bp-na-row[data-state=turn-unconfirmed] .bp-na-row-icon { color: var(--bp-chat-warning); }
+html body[data-bot-product-ui] .bp-na-row[data-state=cli-ok] .bp-na-row-icon { color: var(--bp-chat-accent); }
+html body[data-bot-product-ui] .bp-na-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+html body[data-bot-product-ui] .bp-na-row-title { font-size: 12px; color: var(--bp-chat-ink); overflow-wrap: anywhere; }
+html body[data-bot-product-ui] .bp-na-row-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10px; color: var(--bp-chat-muted); }
+html body[data-bot-product-ui] .bp-na-state {
+  display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 999px;
+  border: 1px solid var(--bp-chat-line); background: var(--bp-chat-canvas); font-size: 10px; color: var(--bp-chat-muted);
+}
+html body[data-bot-product-ui] .bp-na-state[data-state=running] { color: var(--bp-chat-accent); border-color: var(--bp-chat-accent); }
+html body[data-bot-product-ui] .bp-na-state[data-state=cli-error] { color: var(--bp-chat-danger); border-color: var(--bp-chat-danger); }
+html body[data-bot-product-ui] .bp-na-state[data-state=turn-unconfirmed] { color: var(--bp-chat-warning); border-color: var(--bp-chat-warning); }
+html body[data-bot-product-ui] .bp-na-row-note { font-size: 10px; color: var(--bp-chat-warning); }
+html body[data-bot-product-ui] .bp-na-row-more {
+  align-self: center; min-height: 24px; padding: 2px 7px; border: 1px solid var(--bp-chat-line); border-radius: 8px;
+  background: var(--bp-chat-canvas); color: var(--bp-chat-muted); font-size: 10px; cursor: pointer; white-space: nowrap;
+}
+html body[data-bot-product-ui] .bp-na-row-more:hover { color: var(--bp-chat-ink); background: var(--bp-chat-hover); }
+html body[data-bot-product-ui] .bp-na-detail {
+  grid-column: 2 / -1; margin: 3px 0 2px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px;
+  padding: 8px 10px; border-radius: 9px; background: var(--bp-chat-canvas); font-size: 10px; color: var(--bp-chat-muted);
+}
+html body[data-bot-product-ui] .bp-na-detail dt { color: var(--bp-chat-muted); }
+html body[data-bot-product-ui] .bp-na-detail dd { margin: 0; color: var(--bp-chat-ink); overflow-wrap: anywhere; }
+html body[data-bot-product-ui] .bp-na-detail-limit { grid-column: 1 / -1; margin: 5px 0 0; color: var(--bp-chat-muted); }
+html body[data-bot-product-ui] .bp-na-note {
+  display: block; margin: 6px 3px 0; padding: 7px 9px; border-radius: 9px; font-size: 10px; line-height: 1.5;
+  color: var(--bp-chat-warning); background: var(--bp-chat-warning-bg); overflow-wrap: anywhere;
+}
+/* In the header the note stays a quiet pill beside the chip: it never wraps the toolbar. */
+html body[data-bot-product-ui] .bp-na-header { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
+html body[data-bot-product-ui] .bp-na-header > .bp-na-note { margin: 0; max-width: 216px; padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+html body[data-bot-product-ui] .bp-na-note[data-kind=failed] { color: var(--bp-chat-danger); background: var(--bp-chat-danger-bg); }
+html body[data-bot-product-ui] .bp-na-actions { margin: 8px 3px 0; }
+html body[data-bot-product-ui] .bp-na-actions button {
+  min-height: 28px; padding: 4px 10px; border: 1px solid var(--bp-chat-line-strong); border-radius: 9px;
+  background: var(--bp-chat-surface); color: var(--bp-chat-ink); font-size: 11px; cursor: pointer;
+}
+html body[data-bot-product-ui] .bp-na-actions button:disabled { opacity: .55; cursor: default; }
+html body[data-bot-product-ui] .bp-na-sr-only { position: absolute; display: block; margin: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
+/* Every control keeps a visible ring on keyboard focus, at the chat's own focus token. */
+html body[data-bot-product-ui] .bp-na-chip:focus-visible,
+html body[data-bot-product-ui] .bp-na-card-toggle:focus-visible,
+html body[data-bot-product-ui] .bp-na-row-more:focus-visible,
+html body[data-bot-product-ui] .bp-na-actions button:focus-visible,
+html body[data-bot-product-ui] .bp-na-dialog > header button:focus-visible,
+html body[data-bot-product-ui] .bp-na-dialog:focus-visible { outline: 2px solid var(--bp-chat-focus); outline-offset: 2px; }
+
+/* The transcript card: the same records, quieter, inside the independent chat. */
+html body[data-bot-product-ui] .bp-na-card {
+  align-self: stretch; min-width: 0; border: 1px solid var(--bp-chat-line); border-radius: 13px;
+  background: var(--bp-chat-surface); padding: 3px 9px; margin: 2px 0;
+}
+html body[data-bot-product-ui] .bp-na-card-toggle { border: 0; background: transparent; width: 100%; padding: 6px 2px; }
+html body[data-bot-product-ui] .bp-na-card-toggle:hover { background: var(--bp-chat-inset); }
+html body[data-bot-product-ui] .bp-na-card-count { margin-left: auto; flex: none; font-size: 10px; color: var(--bp-chat-muted); }
+html body[data-bot-product-ui] .bp-na-card-body { padding: 0 0 7px; }
+html body[data-bot-product-ui] .bp-na-card .bp-na-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
+
+/* 375px: the chip keeps its word and its dot, the dialog takes the width it can. */
+@media (max-width: 480px) {
+  html body[data-bot-product-ui] .bp-na-chip { max-width: 168px; }
+  html body[data-bot-product-ui] .bp-na-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
+  html body[data-bot-product-ui] .bp-na-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
+  html body[data-bot-product-ui] .bp-na-row-more { grid-column: 3; justify-self: end; margin-top: 0; min-height: 32px; }
+  html body[data-bot-product-ui] .bp-na-detail { grid-column: 1 / -1; }
+}

package/apps/integration-client/native-activity.jsx

@@ -0,0 +1,276 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+import { UiIcon } from './ui-icons.jsx'
+import nativeActivityCss from './native-activity.css'
+import {
+  NATIVE_ACTIVITY_LABELS, NATIVE_ACTIVITY_STATES,
+  NATIVE_ACTIVITY_ACTION,
+  createNativeActivityController, formatActivityAt, nativeActivityLatest, nativeActivityOutcomeWord,
+  nativeActivityRecordingNote, nativeActivityScopeKey, nativeActivityState, nativeActivitySummary, nativeActivityTool,
+} from './native-activity.mjs'
+export { NATIVE_ACTIVITY_LABELS, NATIVE_ACTIVITY_STATES }
+
+// The shared activity surface.
+//
+// One React surface serves both entry modes: the integrated chat header shows a
+// compact chip with an anchored detail dialog, the independent transcript shows a
+// compact card that expands in place. Both read the same owner action
+// `nativeActivity.list`, through the same controller, and both show the same four
+// honest states.
+//
+// What this surface cannot do is deliberate. There is no send, no stop, no
+// retry, no approval and no task mutation anywhere in it: a cancel request and a
+// confirmed stop are displayed as the two separate facts they are, and nothing
+// here executes a tool. A tool's parameters and its result are not part of the
+// observation, so the expanded detail shows provenance — record, turn, times,
+// reported name — and says plainly that the command body is not available.
+
+/** The stylesheet rides with the surface, so no other file has to import it. Two
+ * mounted surfaces share one tag: the last one out removes it. */
+function useNativeActivityStyles() {
+  useEffect(() => {
+    if (typeof document === 'undefined') return undefined
+    const release = style => {
+      const users = Math.max(0, Number(style.dataset.botNativeActivityUsers ?? '1') - 1)
+      style.dataset.botNativeActivityUsers = String(users)
+      if (users === 0) style.remove()
+    }
+    const existing = document.head.querySelector('style[data-bot-native-activity]')
+    if (existing) {
+      const users = Number(existing.dataset.botNativeActivityUsers ?? '1') + 1
+      existing.dataset.botNativeActivityUsers = String(users)
+      return () => release(existing)
+    }
+    const style = document.createElement('style')
+    style.dataset.botNativeActivity = '1'
+    style.dataset.botNativeActivityUsers = '1'
+    style.textContent = nativeActivityCss
+    document.head.append(style)
+    return () => release(style)
+  }, [])
+}
+
+const noopSubscribe = () => () => {}
+const emptySnapshot = () => null
+
+// Independent chat already owns a directory snapshot and supplies the flag.
+// The integrated header has no directory state: read availability once per API,
+// never start an activity poll against an older Host that did not advertise it.
+function useAdvertisedActivity(productApi, enabled) {
+  const [known, setKnown] = useState({ api: null, available: false })
+  useEffect(() => {
+    if (enabled !== undefined || typeof productApi?.snapshot !== 'function') return undefined
+    let live = true
+    const controller = new AbortController()
+    const timer = setTimeout(() => controller.abort(), 8000)
+    void Promise.resolve().then(() => productApi.snapshot(controller.signal)).then(value => {
+      if (live && !controller.signal.aborted) setKnown({ api: productApi,
+        available: value?.schemaVersion === 1 && Array.isArray(value.availableActions) && value.availableActions.includes(NATIVE_ACTIVITY_ACTION) })
+    }, () => { if (live) setKnown({ api: productApi, available: false }) }).finally(() => clearTimeout(timer))
+    return () => { live = false; clearTimeout(timer); controller.abort() }
+  }, [productApi, enabled])
+  return enabled === undefined ? known.api === productApi && known.available : enabled === true
+}
+
+/**
+ * One controller for one mounted scope. A different API instance, Bot, mode,
+ * session or context is a new scope: the previous controller is disposed (timer
+ * cleared, in-flight read aborted) before the next one starts, so a retired
+ * answer can never land in a new conversation.
+ */
+export function useNativeActivity({ productApi, botId, mode, sessionId, contextId, pollMs, limit, enabled } = {}) {
+  const scopeKey = useMemo(() => {
+    try { return nativeActivityScopeKey({ botId, mode, sessionId, contextId }) } catch { return null }
+  }, [botId, mode, sessionId, contextId])
+  const available = useAdvertisedActivity(productApi, scopeKey === null ? false : enabled)
+  const controller = useMemo(() => {
+    if (scopeKey === null || !available) return null
+    try { return createNativeActivityController({ api: productApi, botId, mode, sessionId, contextId, pollMs, limit }) } catch { return null }
+  }, [scopeKey, productApi, pollMs, limit, available])
+  useEffect(() => {
+    if (!controller) return undefined
+    controller.start()
+    return () => controller.dispose()
+  }, [controller])
+  const activity = useSyncExternalStore(controller ? controller.subscribe : noopSubscribe,
+    controller ? controller.getSnapshot : emptySnapshot, emptySnapshot)
+  return { activity, controller }
+}
+
+/** Only a real observation is a surface: an unrecorded session shows nothing at all. */
+const surfaceVisible = activity => activity !== null
+  && (activity.items.length > 0 || activity.recording.status === 'degraded' || activity.error !== '')
+
+function NativeActivityRow({ record, open, onToggle }) {
+  const tool = nativeActivityTool(record), state = nativeActivityState(record), toggle = useRef(null)
+  const close = useCallback(() => { onToggle(null); toggle.current?.focus() }, [onToggle])
+  return <li className="bp-na-row" data-state={state} data-call-key={record.callKey}
+    onKeyDown={event => {
+      if (event.key !== 'Escape' || !open || event.nativeEvent?.isComposing === true) return
+      event.preventDefault(); event.stopPropagation(); close()
+    }}>
+    <span className="bp-na-row-icon"><UiIcon name={tool.icon} size={14} /></span>
+    <span className="bp-na-row-body">
+      <span className="bp-na-row-title">{tool.label}</span>
+      <span className="bp-na-row-meta">
+        <span className="bp-na-state" data-state={state}>{NATIVE_ACTIVITY_LABELS[state]}</span>
+        <span>{formatActivityAt(record.startedAt)}</span>
+      </span>
+      {record.cancelRequested && !record.stopConfirmed && <span className="bp-na-row-note">已请求停止会话，进程停止尚未确认</span>}
+      {record.stopConfirmed && <span className="bp-na-row-note">会话进程已停止</span>}
+      {state === 'turn-unconfirmed' && record.lateCliReturn && <span className="bp-na-row-note">命令返回较晚，结果仍待核对</span>}
+    </span>
+    <button ref={toggle} type="button" className="bp-na-row-more" aria-expanded={open}
+      aria-label={`${tool.label} 的记录详情`} onClick={() => onToggle(open ? null : record.callKey)}>{open ? '收起' : '详情'}</button>
+    {open && <dl className="bp-na-detail">
+      <dt>记录编号</dt><dd>{record.callKey}</dd>
+      {record.turnId && <><dt>回合编号</dt><dd>{record.turnId}</dd></>}
+      {record.callId && <><dt>调用编号</dt><dd>{record.callId}</dd></>}
+      {record.toolName && <><dt>宿主报告的名称</dt><dd>{record.toolName}</dd></>}
+      <dt>开始时间</dt><dd>{formatActivityAt(record.startedAt)}</dd>
+      <dt>结束时间</dt><dd>{record.endedAt === null ? '尚未记录' : formatActivityAt(record.endedAt)}</dd>
+      <dt>工具返回</dt><dd>{record.cliOk === true ? '已返回' : record.cliOk === false ? '返回错误' : '尚未记录'}</dd>
+      <dt>回合结果</dt><dd>{record.turnOutcome === null ? '宿主未记录结果' : nativeActivityOutcomeWord(record.turnOutcome)}</dd>
+      <dt>停止请求</dt><dd>{record.cancelRequested ? '已请求' : '未请求'}</dd>
+      <dt>进程停止确认</dt><dd>{record.stopConfirmed ? '已确认' : '尚未确认'}</dd>
+      <dd className="bp-na-detail-limit">这里不显示命令内容与返回内容；工具已返回或会话进程已停止，都不能证明远程操作已完成或停止。</dd>
+    </dl>}
+  </li>
+}
+
+/** The loaded records: latest4 as a view crop, older pages on an explicit read. */
+function NativeActivityList({ activity, controller, shown = 4 }) {
+  const [openKey, setOpenKey] = useState(null), [showAll, setShowAll] = useState(false)
+  useEffect(() => { setOpenKey(null); setShowAll(false) }, [controller])
+  const rows = showAll ? activity.items : nativeActivityLatest(activity.items, shown)
+  const older = activity.items.length - rows.length
+  return <>
+    <p className="bp-na-scope">只显示当前已经读到的 {activity.items.length} 条记录，不是全部历史。</p>
+    <ul className="bp-na-list">
+      {rows.map(record => <NativeActivityRow key={record.callKey} record={record} open={openKey === record.callKey} onToggle={setOpenKey} />)}
+    </ul>
+    {activity.items.length > shown && <p className="bp-na-actions"><button type="button" onClick={() => setShowAll(value => !value)}>{showAll ? `只看最近 ${shown} 条` : `查看已读取的 ${activity.items.length} 条`}</button></p>}
+    {older > 0 && <p className="bp-na-scope">还有 {older} 条更早的记录已经读到，可展开查看。</p>}
+    {activity.truncated && <p className="bp-na-note">更早的记录没有全部载入，已停止继续读取。</p>}
+    {activity.nextCursor !== null && <p className="bp-na-actions"><button type="button" disabled={activity.loadingOlder || activity.loading} onClick={() => { setShowAll(true); void controller?.older() }}>{activity.loadingOlder ? '正在读取…' : '读取更早的记录'}</button></p>}
+    {activity.loadingOlder && <p className="bp-na-scope" role="status">正在读取更早的记录…</p>}
+  </>
+}
+
+/** A read failure or a degraded recorder is always visible: it must never look like no work. */
+function NativeActivityFlags({ activity }) {
+  const error = activity.error !== '' ? activity.error : ''
+  const degraded = nativeActivityRecordingNote(activity.recording)
+  if (error === '' && degraded === '') return null
+  return <>
+    {error !== '' && <span className="bp-na-note" data-kind="failed" title={error}>{error}</span>}
+    {degraded !== '' && <span className="bp-na-note" title={degraded}>{degraded}</span>}
+  </>
+}
+
+/** The integrated header: a compact chip plus an anchored, dismissible detail dialog. */
+export function NativeActivityHeader({ productApi, botId, sessionId, pollMs, limit, className, enabled }) {
+  const { activity, controller } = useNativeActivity({ productApi, botId, mode: 'integration', sessionId, pollMs, limit, enabled })
+  useNativeActivityStyles()
+  const [open, setOpen] = useState(false), [place, setPlace] = useState(null)
+  const root = useRef(null), chip = useRef(null), dialog = useRef(null)
+  const close = useCallback(() => {
+    setOpen(false)
+    if (dialog.current?.contains(document.activeElement)) chip.current?.focus()
+  }, [])
+  useEffect(() => { setOpen(false) }, [controller])
+  useEffect(() => {
+    if (!open) { setPlace(null); return undefined }
+    const measure = () => {
+      const box = chip.current?.getBoundingClientRect()
+      if (box === undefined) return
+      const width = Math.min(360, Math.max(240, 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
+      const room = Math.min(420, window.innerHeight - 32)
+      setPlace({ left, ...(below + room < window.innerHeight || above < room ? { top: below } : { bottom: window.innerHeight - above }) })
+    }
+    measure()
+    window.addEventListener('resize', measure)
+    window.addEventListener('scroll', measure, true)
+    return () => { window.removeEventListener('resize', measure); window.removeEventListener('scroll', measure, true) }
+  }, [open])
+  useEffect(() => {
+    if (!open) return undefined
+    dialog.current?.focus()
+    const away = event => { if (!dialog.current?.contains(event.target) && !root.current?.contains(event.target)) setOpen(false) }
+    const key = event => {
+      if (event.key === 'Escape' && event.nativeEvent?.isComposing !== true) { event.preventDefault(); close(); return }
+      if (event.key !== 'Tab' || !dialog.current) return
+      const focusable = [...dialog.current.querySelectorAll('button:not([disabled]),[href],summary,[tabindex]:not([tabindex="-1"])')]
+      if (!focusable.length) return
+      const first = focusable[0], last = focusable[focusable.length - 1]
+      if (!event.shiftKey && (document.activeElement === last || document.activeElement === dialog.current)) { event.preventDefault(); first.focus() }
+      else if (event.shiftKey && (document.activeElement === first || document.activeElement === dialog.current)) { event.preventDefault(); last.focus() }
+    }
+    document.addEventListener('mousedown', away)
+    document.addEventListener('keydown', key)
+    return () => { document.removeEventListener('mousedown', away); document.removeEventListener('keydown', key) }
+  }, [open, close])
+  if (!surfaceVisible(activity)) return null
+  const summary = nativeActivitySummary(activity.items)
+  const text = summary === null ? '工具记录读取异常' : summary.text
+  const state = summary === null ? 'turn-unconfirmed' : summary.state
+  const label = summary === null ? `${text}，打开工具记录详情` : `${text}，已读到 ${activity.items.length} 条，打开工具记录详情`
+  return <span className={`bp-na-header${className ? ` ${className}` : ''}`} ref={root}>
+    <button ref={chip} type="button" className="bp-na-chip" data-state={state} aria-haspopup="dialog" aria-expanded={open}
+      title={label} aria-label={label} onClick={() => setOpen(value => !value)}>
+      <UiIcon name={summary === null ? 'clock' : summary.icon} size={14} />
+      <span className="bp-na-chip-text">{text}</span>
+      {activity.items.length > 0 && <span className="bp-na-chip-count" aria-hidden="true">{activity.items.length}</span>}
+    </button>
+    <span className="bp-na-sr-only" role="status">{summary === null ? text : `${text}，共 ${activity.items.length} 条已读到`}</span>
+    <NativeActivityFlags activity={activity} />
+    {open && <div ref={dialog} className="bp-na-dialog" role="dialog" aria-modal="true" aria-label="工具记录" tabIndex={-1}
+      style={place === null ? undefined : { left: `${place.left}px`, top: place.top === undefined ? undefined : `${place.top}px`, bottom: place.bottom === undefined ? undefined : `${place.bottom}px` }}>
+      <header><strong>工具记录</strong><button type="button" aria-label="关闭工具记录" onClick={close}><UiIcon name="close" size={14} /></button></header>
+      <div className="bp-na-dialog-body">
+        <NativeActivityList activity={activity} controller={controller} />
+      </div>
+    </div>}
+  </span>
+}
+
+/** The independent transcript: a compact card that expands in place, never a modal.
+ *
+ * The transcript is already one polite live region, so the card inside it adds no
+ * second announcer: `announce` stays false there and true for a standalone card. */
+export function NativeActivityCardView({ activity, controller, className, announce = true }) {
+  useNativeActivityStyles()
+  const [open, setOpen] = useState(false)
+  const toggle = useRef(null)
+  useEffect(() => { setOpen(false) }, [controller])
+  if (!surfaceVisible(activity)) return null
+  const summary = nativeActivitySummary(activity.items)
+  const text = summary === null ? '工具记录读取异常' : summary.text
+  const state = summary === null ? 'turn-unconfirmed' : summary.state
+  const label = `${text}，${open ? '收起' : '展开'}工具记录`
+  return <section className={`bp-na-card${className ? ` ${className}` : ''}`} data-state={state} aria-label="工具记录">
+    <button ref={toggle} type="button" className="bp-na-card-toggle" aria-expanded={open} title={label} aria-label={label}
+      onKeyDown={event => {
+        if (event.key !== 'Escape' || !open || event.nativeEvent?.isComposing === true) return
+        event.preventDefault(); event.stopPropagation(); setOpen(false); toggle.current?.focus()
+      }}
+      onClick={() => setOpen(value => !value)}>
+      <UiIcon name={summary === null ? 'clock' : summary.icon} size={14} />
+      <span className="bp-na-chip-text">{text}</span>
+      {activity.items.length > 0 && <span className="bp-na-card-count">已读到 {activity.items.length} 条</span>}
+      <UiIcon name="chevron" size={13} style={{ transform: open ? 'rotate(90deg)' : 'none' }} />
+    </button>
+    {announce && <span className="bp-na-sr-only" role="status">{summary === null ? text : `${text}，共 ${activity.items.length} 条已读到`}</span>}
+    <NativeActivityFlags activity={activity} />
+    {open && <div className="bp-na-card-body">
+      <NativeActivityList activity={activity} controller={controller} />
+    </div>}
+  </section>
+}
+
+/** Self-contained card, for a caller that owns no controller of its own. */
+export function NativeActivityCard({ productApi, botId, contextId, pollMs, limit, className, enabled }) {
+  const owned = useNativeActivity({ productApi, botId, mode: 'independent', contextId, pollMs, limit, enabled })
+  return <NativeActivityCardView activity={owned.activity} controller={owned.controller} className={className} />
+}