foxclaw 0.1.0 → 0.1.3

package/python/frontend_src/src/components/Stage.vue

@@ -0,0 +1,272 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import DocViewer from './DocViewer.vue'
+import MessageStream from './MessageStream.vue'
+import ActivityPanel from './panels/ActivityPanel.vue'
+import TasksPanel from './panels/TasksPanel.vue'
+import AgentsPanel from './panels/AgentsPanel.vue'
+import ToolsPanel from './panels/ToolsPanel.vue'
+import UsagePanel from './panels/UsagePanel.vue'
+import KnowledgePanel from './panels/KnowledgePanel.vue'
+import ReviewPanel from './panels/ReviewPanel.vue'
+import MemoryPanel from './panels/MemoryPanel.vue'
+import SettingsPanel from './panels/SettingsPanel.vue'
+import { chat, loadSession, say, send } from '../stores/chat.js'
+import { state, moduleLabel, closeDoc, loadSessions, openSession } from '../stores/app.js'
+import { profile, loadProfile, saveNickname } from '../stores/profile.js'
+import { openKu } from '../stores/panels.js'
+import { getJSON } from '../api.js'
+import { clip } from '../lib/fmt.js'
+import { t } from '../lib/i18n.js'
+
+const PANELS = {
+  activity: ActivityPanel,
+  tasks: TasksPanel,
+  agents: AgentsPanel,
+  tools: ToolsPanel,
+  usage: UsagePanel,
+  knowledge: KnowledgePanel,
+  review: ReviewPanel,
+  memory: MemoryPanel,
+  settings: SettingsPanel,
+}
+const panel = computed(() => PANELS[state.module] || null)
+
+const hasTabs = computed(() => !!state.doc)
+
+const EXAMPLES = computed(() => [t('hero.q1'), t('hero.q2'), t('hero.q3')])
+
+const recent = ref([])
+
+const nick = ref('')
+const nickSkipped = ref(localStorage.getItem('sfx.nick.skip') === '1')
+const askNick = computed(() => profile.loaded && !profile.nickname && !nickSkipped.value)
+
+onMounted(async () => {
+  loadProfile().then(() => { nick.value = profile.nickname })
+  if (!state.sessions.length) loadSessions().catch(() => {})
+  const d = await getJSON('/knowledge/recent?limit=5').catch(() => null)
+  recent.value = d?.kus || []
+})
+
+async function saveNick() {
+  const n = nick.value.trim()
+  if (!n) return
+  try {
+    await saveNickname(n)
+    say(t('hero.saidNick', { name: n }))
+  } catch (e) {
+    say(t('hero.errSave', { msg: e.message }), 4000)
+  }
+}
+
+function skipNick() {
+  nickSkipped.value = true
+  localStorage.setItem('sfx.nick.skip', '1')
+}
+
+const lastSession = computed(() => {
+  const cur = chat.messages.length ? state.sessionId : ''
+  return state.sessions.find((s) => s.id !== cur && (s.message_count || 0) > 0) || null
+})
+
+function resume() {
+  const s = lastSession.value
+  if (!s) return
+  openSession(s)
+  loadSession(s.id)
+}
+</script>
+
+<template>
+  <section class="stage">
+    <div v-if="hasTabs" class="tabs">
+      <button
+        v-if="state.module !== 'overview'"
+        class="tab"
+        :class="{ on: !state.doc }"
+        @click="closeDoc()"
+      >
+        {{ moduleLabel(state.module) }}
+      </button>
+      <button v-if="state.doc" class="tab on doc" @click="closeDoc()">
+        <span class="t">{{ state.doc.title }}</span>
+        <span class="x" :title="t('hero.close')">✕</span>
+      </button>
+    </div>
+
+    <div class="stage-body" :class="{ bare: !hasTabs }">
+      <DocViewer v-if="state.doc" :doc="state.doc" />
+
+      <component :is="panel" v-else-if="panel" :key="state.module" />
+
+      <div v-else class="core">
+        <MessageStream v-if="chat.messages.length" />
+        <div v-else class="core-empty">
+          <div class="hero">
+            <div class="hero-t">{{ t('hero.title') }}</div>
+            <div class="core-cap">{{ t('hero.cap') }}</div>
+          </div>
+
+          <div v-if="askNick" class="ask-nick">
+            <span class="an-q">{{ t('hero.askName') }}</span>
+            <input
+              v-model="nick"
+              class="an-in"
+              maxlength="24"
+              :placeholder="t('hero.namePh')"
+              @keydown.enter.prevent="saveNick"
+            />
+            <button class="an-ok" :disabled="profile.saving || !nick.trim()" @click="saveNick">{{ t('hero.confirm') }}</button>
+            <button class="an-skip" :title="t('hero.skipTip')" @click="skipNick">{{ t('hero.skip') }}</button>
+          </div>
+
+          <div class="tries">
+            <button v-for="q in EXAMPLES" :key="q" class="try" @click="send(q)">
+              <span class="arrow">→</span>{{ q }}
+            </button>
+          </div>
+
+          <button v-if="lastSession" class="resume" @click="resume">
+            <span class="rl">{{ t('hero.resume') }}</span>
+            <b>{{ clip(lastSession.title || t('hero.untitled'), 28) }}</b>
+            <span class="rm">{{ t('hero.msgs', { n: lastSession.message_count }) }}</span>
+          </button>
+
+          <div v-if="recent.length" class="recent">
+            <div class="rh">{{ t('hero.recentKnowledge') }}</div>
+            <div class="rk-list">
+              <button v-for="k in recent" :key="k.ku_id" class="rk" :title="k.summary || k.name" @click="openKu(k.ku_id)">
+                {{ clip(k.name || k.ku_id, 30) }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.stage { display: flex; flex-direction: column; min-height: 0; }
+
+.tabs {
+  display: flex; align-items: center; gap: 4px;
+  padding: 8px 10px 0; flex-shrink: 0;
+  overflow-x: auto;
+}
+.tab {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 11px; border-radius: var(--r-sm) var(--r-sm) 0 0;
+  font-size: 12px; color: var(--dim);
+  border: 1px solid transparent; border-bottom: 0;
+  white-space: nowrap;
+}
+.tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.5); }
+.tab.on {
+  color: var(--ink); font-weight: 600;
+  background: rgba(255, 255, 255, 0.86);
+  border-color: var(--line-soft);
+}
+.tab.doc { max-width: 260px; }
+.tab.doc .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tab.doc .x { font-size: 11px; color: var(--dim); }
+.tab.doc .x:hover { color: var(--red); }
+
+.stage-body {
+  flex: 1; min-height: 0;
+  margin: 0 8px 8px;
+  border-radius: 0 var(--r-mid) var(--r-mid) var(--r-mid);
+  background: var(--mid-panel);
+  border: 1px solid rgba(26, 157, 95, 0.1);
+  overflow: hidden;
+  display: flex;
+}
+.stage-body.bare { margin-top: 8px; border-radius: var(--r-mid); }
+
+.core { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.core-empty {
+  flex: 1; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 18px;
+  position: relative;
+  padding: 24px 18px;
+  overflow-y: auto;
+}
+.core-cap { font-size: 12.5px; color: var(--dim); line-height: 1.7; text-align: center; }
+
+.hero { text-align: center; }
+.hero-t {
+  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
+  color: var(--ink); margin-bottom: 6px;
+}
+
+.ask-nick {
+  display: flex; align-items: center; gap: 8px;
+  width: 100%; max-width: 420px;
+  padding: 9px 11px; border-radius: var(--r-sm);
+  background: rgba(26, 157, 95, 0.06);
+  border: 1px solid rgba(26, 157, 95, 0.22);
+}
+.an-q { font-size: 12.5px; font-weight: 600; color: var(--ink); flex-shrink: 0; }
+.an-in {
+  flex: 1; min-width: 56px;
+  padding: 5px 8px; border-radius: 7px;
+  font-size: 12.5px; color: var(--ink);
+  background: #fff; border: 1px solid var(--line);
+}
+.an-in:focus { outline: none; border-color: rgba(26, 157, 95, 0.5); }
+.an-ok {
+  flex-shrink: 0;
+  padding: 5px 10px; border-radius: 7px;
+  font-size: 12px; font-weight: 600; color: #fff;
+  background: var(--green);
+}
+.an-ok:disabled { opacity: 0.45; cursor: default; }
+.an-skip { flex-shrink: 0; padding: 4px 2px; font-size: 11.5px; color: var(--dim); }
+.an-skip:hover { color: var(--ink); }
+
+.tries { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 420px; }
+.try {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 10px 13px; border-radius: var(--r-sm);
+  font-size: 12.5px; color: var(--ink); text-align: left;
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid var(--line);
+  transition: color 0.14s, border-color 0.14s, background 0.14s, transform 0.12s;
+}
+.try:hover { color: var(--ink); background: #fff; border-color: rgba(26, 157, 95, 0.42); }
+.try:active { transform: scale(0.99); }
+.try .arrow { font-size: 12px; color: var(--green); flex-shrink: 0; }
+
+.resume {
+  display: flex; align-items: center; gap: 7px;
+  max-width: 420px; padding: 7px 13px;
+  border-radius: var(--r-pill);
+  background: var(--surface-2); color: var(--dim);
+  transition: background 0.14s, color 0.14s;
+}
+.resume:hover { background: var(--surface-3); color: var(--ink); }
+.resume .rl { font-size: 11px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.07em; }
+.resume b {
+  font-size: 12px; font-weight: 600;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.resume .rm { font-size: 11px; color: var(--dim); flex-shrink: 0; }
+
+.recent { width: 100%; max-width: 420px; }
+.recent .rh {
+  margin-bottom: 5px;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
+  color: var(--dim); text-transform: uppercase;
+}
+.rk-list { display: flex; flex-wrap: wrap; gap: 5px; }
+.rk {
+  max-width: 190px; padding: 5px 10px; border-radius: var(--r-pill);
+  font-size: 11.5px; color: var(--ink);
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid var(--line);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  transition: color 0.13s, border-color 0.13s, background 0.13s;
+}
+.rk:hover { color: var(--green); background: #fff; border-color: rgba(26, 157, 95, 0.4); }
+</style>

package/python/frontend_src/src/components/ToolMenu.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { attachFile, attachImage, chat, ingestFile, ingestFolder, say, setMode, ui } from '../stores/chat.js'
+import { setModule } from '../stores/app.js'
+
+const open = ref(false)
+const root = ref(null)
+const inFile = ref(null)
+const inFolder = ref(null)
+const inImg = ref(null)
+const inAttach = ref(null)
+
+const rows = computed(() => [
+  {
+    ic: chat.mode === 'stream' ? '⚡' : '🔧',
+    b: chat.mode === 'stream' ? '流式对话' : '编排任务',
+    s: '点击切换模式',
+    act: () => setMode(chat.mode === 'stream' ? 'orchestrate' : 'stream'),
+  },
+  { ic: '📎', b: '上传文件', s: '摄入知识库', act: () => { close(); inFile.value?.click() } },
+  { ic: '📁', b: '导入文件夹', s: '逐个摄入', act: () => { close(); inFolder.value?.click() } },
+  { ic: '🖼', b: '附加图片', s: '发给视觉模型', act: () => { close(); inImg.value?.click() } },
+  { ic: '📄', b: '附件文件', s: '随问题发给 AI', act: () => { close(); inAttach.value?.click() } },
+  { ic: '🔌', b: '技能 · 连接器', s: '到技能面板看全部', act: () => { close(); setModule('tools') } },
+])
+
+function toggle() {
+  open.value = !open.value
+}
+function close() {
+  open.value = false
+}
+watch(() => ui.ingestTick, () => inFile.value?.click())
+
+function onDocDown(e) {
+  if (root.value && !root.value.contains(e.target)) close()
+}
+onMounted(() => document.addEventListener('mousedown', onDocDown, true))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocDown, true))
+
+async function onIngest(e) {
+  const f = e.target.files && e.target.files[0]
+  e.target.value = ''
+  if (f) await ingestFile(f)
+}
+async function onFolder(e) {
+  const fs = [...(e.target.files || [])]
+  e.target.value = ''
+  if (fs.length) await ingestFolder(fs)
+}
+function onImage(e) {
+  const fs = [...(e.target.files || [])]
+  e.target.value = ''
+  fs.forEach(attachImage)
+  if (fs.length) say(`已附加 ${fs.length} 张图片`)
+}
+async function onAttach(e) {
+  const fs = [...(e.target.files || [])]
+  e.target.value = ''
+  for (const f of fs) await attachFile(f)
+}
+</script>
+
+<template>
+  <div ref="root" class="tm">
+    <button class="plus" :class="{ on: open }" title="工具:模式 / 上传 / 文件夹 / 图片 / 附件 / 连接器" @click="toggle">
+      ＋
+    </button>
+
+    <div v-if="open" class="pop">
+      <div class="sec">工具</div>
+      <button v-for="(r, i) in rows" :key="i" class="it" @click="r.act()">
+        <span class="ic">{{ r.ic }}</span>
+        <span class="tx"><b>{{ r.b }}</b><span>{{ r.s }}</span></span>
+      </button>
+      <div class="foot">
+        附件 {{ chat.attachments.length }} · 图片 {{ chat.images.length }} ·
+        {{ chat.mode === 'stream' ? '流式' : '编排' }}
+      </div>
+    </div>
+
+    <input ref="inFile" type="file" hidden accept=".pdf,.md,.txt,.epub,.mobi,.azw3,.docx,.xlsx" @change="onIngest" />
+    <input ref="inFolder" type="file" hidden webkitdirectory directory multiple @change="onFolder" />
+    <input ref="inImg" type="file" hidden accept="image/*" multiple @change="onImage" />
+    <input ref="inAttach" type="file" hidden multiple @change="onAttach" />
+  </div>
+</template>
+
+<style scoped>
+.tm { position: relative; flex-shrink: 0; }
+
+.plus {
+  width: 28px; height: 28px; border-radius: 50%;
+  display: grid; place-items: center;
+  font-size: 15px; color: var(--dim);
+  background: var(--surface-2);
+  transition: color 0.15s, background 0.15s;
+}
+.plus:hover, .plus.on { color: var(--ink); background: var(--surface-3); }
+
+.pop {
+  position: absolute; left: 0; bottom: calc(100% + 8px);
+  z-index: var(--z-menu);
+  width: 250px; max-height: 54vh;
+  display: flex; flex-direction: column;
+  padding: 6px;
+  border-radius: var(--r-mid);
+  background: rgba(255, 255, 255, 0.92);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  backdrop-filter: blur(24px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow: var(--sh-pop);
+  overflow-y: auto;
+  animation: tm-in 0.15s ease;
+}
+@keyframes tm-in { from { opacity: 0; transform: translateY(5px); } }
+
+.sec {
+  padding: 6px 7px 4px;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
+  color: var(--dim); text-transform: uppercase;
+}
+.it {
+  width: 100%;
+  display: flex; align-items: center; gap: 9px;
+  padding: 8px; border-radius: var(--r-sm);
+  text-align: left;
+  transition: background 0.13s;
+}
+.it:hover { background: var(--surface-2); }
+.it .ic { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
+.it .tx { display: flex; flex-direction: column; gap: 2px; }
+.it .tx b { font-size: 13px; font-weight: 600; }
+.it .tx span { font-size: 11px; color: var(--dim); }
+
+.foot {
+  margin-top: 4px; padding: 7px 7px 3px;
+  border-top: 1px solid var(--line-soft);
+  font-size: 11px; color: var(--dim); font-family: var(--mono);
+}
+</style>

package/python/frontend_src/src/components/TopBar.vue

@@ -0,0 +1,118 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { getJSON } from '../api.js'
+import { state, setModule } from '../stores/app.js'
+import { system, loadSystemInfo } from '../stores/system.js'
+import { t } from '../lib/i18n.js'
+
+const uplink = ref('···') // '···' | 'online' | 'offline'
+const tone = ref('dim')
+
+const ver = computed(() => system.version)
+
+const upd = computed(() => (system.update?.update_available ? system.update : null))
+
+const uplinkText = computed(() => {
+  if (uplink.value === 'online') return t('common.online')
+  if (uplink.value === 'offline') return t('common.offlineShort')
+  return '···'
+})
+
+onMounted(async () => {
+  loadSystemInfo()
+  try {
+    await getJSON('/status')
+    uplink.value = 'online'
+    tone.value = 'ok'
+  } catch {
+    uplink.value = 'offline'
+    tone.value = 'bad'
+  }
+})
+
+function openPlanet() {
+  window.open('/planet/', '_blank', 'noopener')
+}
+
+function openSettings() {
+  setModule(state.module === 'settings' ? 'overview' : 'settings')
+}
+</script>
+
+<template>
+  <header class="topbar">
+    <div class="brand">
+      <div class="logo">F</div>
+      <h1>Foxclaw</h1>
+      <span v-if="ver" class="ver">v{{ ver }}</span>
+      <button
+        v-if="upd"
+        class="upd"
+        :title="t('topbar.newVersion', { latest: upd.latest, current: upd.current })"
+        @click="openSettings"
+      >↑</button>
+    </div>
+    <div class="spacer" />
+    <div class="stat">
+      <span class="lbl">{{ t('topbar.systemStatus') }}</span>
+      <span class="val" :class="tone">{{ uplinkText }}</span>
+    </div>
+    <button class="tbtn" :title="t('topbar.planet')" @click="openPlanet">{{ t('topbar.planetBtn') }}</button>
+    <button
+      class="tbtn"
+      :class="{ on: state.module === 'settings' }"
+      :title="t('topbar.settings')"
+      @click="openSettings"
+    >⚙</button>
+  </header>
+</template>
+
+<style scoped>
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 16px;
+  background: rgba(255, 255, 255, 0.5);
+  -webkit-backdrop-filter: blur(18px) saturate(160%);
+  backdrop-filter: blur(18px) saturate(160%);
+  border-bottom: 1px solid var(--line-soft);
+}
+.brand { display: flex; align-items: center; gap: 9px; }
+.logo {
+  width: 28px; height: 28px; border-radius: 9px;
+  display: grid; place-items: center;
+  background: var(--green); color: #fff; font-weight: 800; font-size: 15px;
+  box-shadow: 0 4px 12px rgba(26, 157, 95, 0.32);
+}
+.brand h1 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
+.ver {
+  font-size: 11px; font-weight: 600; color: var(--dim);
+  padding: 2px 7px; border-radius: var(--r-pill);
+  background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line);
+}
+.upd {
+  display: grid; place-items: center;
+  width: 18px; height: 18px; margin-left: -3px;
+  border-radius: 50%;
+  font-size: 11px; font-weight: 700; line-height: 1;
+  color: var(--amber);
+  background: rgba(214, 158, 46, 0.12);
+  border: 1px solid rgba(214, 158, 46, 0.35);
+}
+.upd:hover { background: rgba(214, 158, 46, 0.2); }
+.spacer { flex: 1; }
+.stat { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); }
+.stat .val { font-weight: 700; color: var(--ink); }
+.stat .val.ok { color: var(--green); }
+.stat .val.bad { color: var(--amber); }
+.stat .val.dim { color: var(--dim); }
+.tbtn {
+  font-size: 12.5px; font-weight: 600; color: var(--ink);
+  padding: 6px 11px; border-radius: var(--r-sm);
+  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.7);
+  transition: color 0.15s, background 0.15s;
+}
+.tbtn:hover { color: var(--ink); background: #fff; }
+.tbtn.on { color: var(--green); background: #fff; border-color: rgba(26, 157, 95, 0.32); }
+</style>

package/python/frontend_src/src/components/panels/ActivityPanel.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { computed, onMounted } from 'vue'
+import PanelBox from './PanelBox.vue'
+import { panels, loadPanel, refreshPanel } from '../../stores/panels.js'
+import { fmtAgo, fmtMs, clip } from '../../lib/fmt.js'
+
+const p = panels.activity
+onMounted(() => loadPanel('activity'))
+
+const ready = computed(() => p.events.length > 0 || p.traces.length > 0 || !!p.thought)
+const events = computed(() => p.events.slice(0, 14))
+const slow = computed(() => p.traces.slice(0, 8))
+
+function evText(e) {
+  const pl = e.payload || {}
+  return pl.task || pl.reason || pl.phase || pl.agent_id || e.topic || e.channel || '(空事件)'
+}
+function evSub(e) {
+  const src = e.source ? `来源 ${e.source}` : ''
+  return [e.channel, src].filter(Boolean).join(' · ')
+}
+</script>
+
+<template>
+  <PanelBox
+    title="活动"
+    tag="Activity"
+    :state="p.state"
+    :ready="ready"
+    @refresh="refreshPanel('activity')"
+  >
+    <div class="pn-kpi">
+      <div><b>{{ events.length }}</b><span>事件</span></div>
+      <div><b>{{ p.traces.length }}</b><span>请求链路</span></div>
+      <div><b>{{ p.thought?.total_nodes ?? 0 }}</b><span>思考节点</span></div>
+      <div><b>{{ p.thought ? Math.round((p.thought.avg_confidence ?? 0) * 100) + '%' : '—' }}</b><span>平均置信度</span></div>
+    </div>
+
+    <div class="pn-cols">
+      <div class="pn-sec">
+        <div class="pn-h">事件总线 <em>{{ p.events.length }}</em></div>
+        <div v-if="!events.length" class="pn-empty">
+          还没有事件。发一条消息、让 Agent 跑一步,执行 → 审计 → 记忆的流转会记在这里。
+        </div>
+        <div v-for="(e, i) in events" :key="i" class="pn-row static" :title="evText(e)">
+          <span class="m">
+            <b>{{ clip(evText(e), 40) }}</b>
+            <span class="s">{{ evSub(e) }}</span>
+          </span>
+          <span class="r">{{ fmtAgo(e.ts) }}</span>
+        </div>
+      </div>
+
+      <div class="pn-sec">
+        <div class="pn-h">最慢请求链路 <em>{{ p.traces.length }}</em></div>
+        <div v-if="!slow.length" class="pn-empty">
+          还没有链路记录。任何一次 API 调用都会留下 trace。
+        </div>
+        <div v-for="(t, i) in slow" :key="t.trace_id || i" class="pn-row" :title="t.trace_id">
+          <span class="m">
+            <b>{{ clip(t.name, 34) }}</b>
+            <span class="s">{{ t.span_count || 0 }} span</span>
+          </span>
+          <span class="r">{{ fmtMs(t.duration_ms) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="pn-sec">
+      <div class="pn-note">
+        思考链健康度：共 {{ p.thought?.total_nodes ?? 0 }} 个节点,阻塞 {{ p.thought?.blocked_nodes ?? 0 }} 个,
+        警告 {{ p.thought?.warned_nodes ?? 0 }} 个,阻塞率
+        {{ p.thought ? Math.round((p.thought.block_rate ?? 0) * 100) + '%' : '—' }}。
+        数据来自 <code>/api/bus/history</code>、<code>/api/traces</code>、<code>/api/thoughtchain/{agent}/summary</code>。
+      </div>
+    </div>
+  </PanelBox>
+</template>
+
+<style scoped>
+.pn-row.static:hover { background: transparent; }
+</style>