foxclaw 0.1.0 → 0.1.3

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

@@ -0,0 +1,83 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import PanelBox from './PanelBox.vue'
+import { panels, loadPanel, refreshPanel } from '../../stores/panels.js'
+
+const p = panels.agents
+const open = ref('')
+onMounted(() => loadPanel('agents'))
+
+const ready = computed(() => p.list.length > 0)
+const shadowCount = computed(() => p.list.filter((a) => a.harness?.shadow_mode).length)
+const nodes = computed(() => p.list.reduce((n, a) => n + (a.thought_chain?.total_nodes || 0), 0))
+const blocked = computed(() => p.list.reduce((n, a) => n + (a.thought_chain?.blocked_nodes || 0), 0))
+
+function toggle(id) { open.value = open.value === id ? '' : id }
+</script>
+
+<template>
+  <PanelBox
+    title="代理"
+    tag="Agents"
+    :state="p.state"
+    :ready="ready"
+    @refresh="refreshPanel('agents')"
+  >
+    <div class="pn-kpi">
+      <div><b>{{ p.list.length }}</b><span>代理</span></div>
+      <div><b>{{ shadowCount }}</b><span>影子模式</span></div>
+      <div><b>{{ nodes }}</b><span>思考节点</span></div>
+      <div><b>{{ blocked }}</b><span>被拦截</span></div>
+    </div>
+
+    <div class="pn-sec">
+      <div class="pn-h">代理清单 <em>{{ p.list.length }}</em></div>
+      <div v-if="!p.list.length" class="pn-empty">后端没有返回任何 Agent。</div>
+      <div v-for="a in p.list" :key="a.agent_id" class="ag">
+        <div class="pn-row clickable" @click="toggle(a.agent_id)">
+          <span class="m">
+            <b>{{ a.agent_name }} <em class="id">{{ a.agent_id }}</em></b>
+            <span class="s">
+              {{ a.thought_chain?.total_nodes ?? 0 }} 节点 ·
+              置信度 {{ Math.round((a.thought_chain?.avg_confidence ?? 0) * 100) }}% ·
+              规则 {{ a.harness?.policy?.total_rules ?? 0 }} 条
+            </span>
+          </span>
+          <span class="pn-tag" :class="a.harness?.shadow_mode ? 'amber' : 'green'">
+            {{ a.harness?.shadow_mode ? '影子' : '在线' }}
+          </span>
+        </div>
+
+        <div v-if="open === a.agent_id" class="det">
+          <div class="kv"><span>拦截阈值</span><b>
+            warn {{ a.harness?.thresholds?.warn ?? '—' }} / block {{ a.harness?.thresholds?.block ?? '—' }}
+          </b></div>
+          <div class="kv"><span>漂移检测</span><b>{{ a.harness?.thresholds?.embedding_mode || '—' }}</b></div>
+          <div class="kv"><span>语义维度</span><b>
+            {{ a.harness?.thresholds?.semantic_degraded ? '已降级(仅 tool/scope 两维)' : '正常' }}
+          </b></div>
+          <div class="kv"><span>阻塞 / 警告</span><b>
+            {{ a.thought_chain?.blocked_nodes ?? 0 }} / {{ a.thought_chain?.warned_nodes ?? 0 }}
+          </b></div>
+          <div class="kv"><span>影子轮次</span><b>
+            {{ a.harness?.thresholds?.run_count ?? 0 }} / {{ a.harness?.thresholds?.shadow_rounds ?? '—' }}
+          </b></div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="p.info" class="pn-note">
+      版本 <code>{{ p.info.version }}</code>
+    </div>
+  </PanelBox>
+</template>
+
+<style scoped>
+.id { font-family: var(--mono); font-size: 11px; font-style: normal; color: var(--dim); margin-left: 4px; }
+.det {
+  margin: 2px 0 8px 10px; padding: 8px 12px;
+  border-left: 2px solid var(--line);
+}
+.kv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12px; color: var(--dim); }
+.kv b { font-weight: 600; color: var(--ink); font-family: var(--mono); font-size: 11.5px; text-align: right; }
+</style>

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

@@ -0,0 +1,425 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import PanelBox from './PanelBox.vue'
+import { panels, loadPanel, refreshPanel, ingestKnowledge, openKu } from '../../stores/panels.js'
+import { getJSON, postJSON } from '../../api.js'
+import { fmtNum, fmtTime, clip } from '../../lib/fmt.js'
+
+const p = panels.knowledge
+onMounted(() => loadPanel('knowledge'))
+
+const draft = ref('')
+const title = ref('')
+const domain = ref('')
+
+const ready = computed(() => Object.keys(p.stats || {}).length > 0)
+const idx = computed(() => p.index || {})
+const kus = computed(() => Object.entries(p.stats?.ku_counts || {}))
+const busy = computed(() => p.ingest === 'busy')
+
+watch(draft, (v) => {
+  if (v && !busy.value) { p.ingest = 'idle'; p.ingestMsg = ''; p.ingestErr = '' }
+})
+
+async function submit() {
+  if (!draft.value.trim() || busy.value) return
+  try {
+    await ingestKnowledge({ text: draft.value, title: title.value, domain: domain.value })
+    draft.value = ''
+    title.value = ''
+  } catch {
+  }
+}
+
+const q = ref('')
+const mode = ref('hybrid')
+const MODES = [
+  { v: 'hybrid', label: '混合' },
+  { v: 'bm25', label: '关键词' },
+  { v: 'vector', label: '语义' },
+  { v: 'graph', label: '图谱' },
+]
+const sState = ref('idle') // idle | busy | ok | err
+const sErr = ref('')
+const hits = ref([])
+
+async function doSearch() {
+  const text = q.value.trim()
+  if (!text || sState.value === 'busy') return
+  sState.value = 'busy'
+  sErr.value = ''
+  try {
+    const d = await postJSON('/knowledge/search', {
+      query: text,
+      mode: mode.value,
+      top_k: 12,
+    })
+    hits.value = d.hits || []
+    if (d.available === false) {
+      sState.value = 'err'
+      sErr.value = 'HKC 未启用(未 vendor 或缺依赖)'
+    } else if (d.error) {
+      sState.value = 'err'
+      sErr.value = d.error
+    } else {
+      sState.value = 'ok'
+    }
+  } catch (e) {
+    hits.value = []
+    sState.value = 'err'
+    sErr.value = e.message
+  }
+}
+
+const abKey = ref('')
+const abState = ref('idle') // idle | busy | ok | err
+const abErr = ref('')
+const ab = ref(null)
+
+async function showAbility(k) {
+  if (abKey.value === k && ab.value) {
+    abKey.value = ''
+    ab.value = null
+    abState.value = 'idle'
+    return
+  }
+  abKey.value = k
+  abState.value = 'busy'
+  abErr.value = ''
+  ab.value = null
+  try {
+    ab.value = await getJSON(`/knowledge/ability/${encodeURIComponent(k)}`)
+    abState.value = 'ok'
+  } catch (e) {
+    abState.value = 'err'
+    abErr.value = e.message
+  }
+}
+
+function covText(c) {
+  if (c == null) return ''
+  if (typeof c === 'number') return `${Math.round(c * 100)}%`
+  if (typeof c === 'object') {
+    const n = c.overall ?? c.score ?? c.value ?? c.ratio
+    if (typeof n === 'number') return `${Math.round(n * 100)}%`
+  }
+  return ''
+}
+</script>
+
+<template>
+  <PanelBox
+    title="学习库"
+    tag="Knowledge"
+    :state="p.state"
+    :ready="ready"
+    @refresh="refreshPanel('knowledge')"
+  >
+    <div class="kb-in">
+      <textarea
+        v-model="draft"
+        rows="3"
+        spellcheck="false"
+        placeholder="写一句或一小段知识 —— 一句话也算。长文档、整本书走知识星球。"
+        @keydown.ctrl.enter.prevent="submit"
+      />
+      <div class="kb-bar">
+        <input v-model="title" class="f-title" placeholder="标题(可选)" />
+        <input v-model="domain" class="f-domain" placeholder="领域(可选)" />
+        <span v-if="busy" class="tip">抽取中,可能要几十秒…</span>
+        <span v-else-if="p.ingest === 'ok'" class="tip ok">{{ p.ingestMsg }}</span>
+        <span v-else-if="p.ingest === 'error'" class="tip bad">{{ p.ingestErr }}</span>
+        <span v-else class="tip dim">Ctrl + Enter 收录</span>
+        <button class="go" :disabled="!draft.trim() || busy" @click="submit">
+          {{ busy ? '收录中…' : '收录' }}
+        </button>
+      </div>
+    </div>
+
+    <div class="pn-kpi">
+      <div><b>{{ fmtNum(p.stats.total_kus ?? 0) }}</b><span>知识单元</span></div>
+      <div><b>{{ fmtNum(p.stats.total_relations ?? 0) }}</b><span>关系</span></div>
+      <div><b>{{ fmtNum(p.stats.graph_nodes ?? 0) }}</b><span>图谱节点</span></div>
+      <div><b>{{ fmtNum(p.stats.open_conflicts ?? 0) }}</b><span>待裁决冲突</span></div>
+      <div><b>{{ fmtNum(p.stats.vector_size ?? 0) }}</b><span>向量条目</span></div>
+    </div>
+
+    <div class="pn-sec">
+      <div class="pn-h">检索 <em>{{ hits.length }}</em></div>
+      <div class="kb-find">
+        <input
+          v-model="q"
+          placeholder="按关键词 / 语义检索整个知识库…"
+          @keydown.enter="doSearch"
+        />
+        <select v-model="mode" aria-label="检索模式">
+          <option v-for="m in MODES" :key="m.v" :value="m.v">{{ m.label }}</option>
+        </select>
+        <button class="go" :disabled="!q.trim() || sState === 'busy'" @click="doSearch">
+          {{ sState === 'busy' ? '检索中…' : '检索' }}
+        </button>
+      </div>
+      <div v-if="sState === 'err'" class="pn-note meta bad">{{ sErr }}</div>
+      <div v-else-if="hits.length" class="kb-hits">
+        <button
+          v-for="h in hits"
+          :key="h.ku_id"
+          class="kb-hit"
+          :title="h.summary || h.name"
+          @click="openKu(h.ku_id)"
+        >
+          <span class="m">
+            <b>{{ clip(h.name || h.ku_id, 52) }}</b>
+            <span class="s">{{ h.ku_type || 'KU' }} · {{ h.mode || mode }}</span>
+          </span>
+          <span class="r">{{ h.score != null ? Number(h.score).toFixed(2) : '' }}</span>
+        </button>
+      </div>
+      <div v-else-if="sState === 'ok'" class="pn-empty">没有命中,换个词或换模式试试。</div>
+    </div>
+
+    <div class="pn-sec">
+      <div class="pn-h">最近录入 <em>{{ p.recentTotal }}</em></div>
+      <div v-if="!p.recent.length" class="pn-empty">
+        还没有录入知识。上面写一句话就能收录 —— 长文档走知识星球。
+      </div>
+      <div
+        v-for="k in p.recent"
+        :key="k.ku_id"
+        class="pn-row clickable"
+        :title="k.summary || k.name"
+        @click="openKu(k.ku_id)"
+      >
+        <span class="m">
+          <b>{{ clip(k.name || k.ku_id, 46) }}</b>
+          <span class="s">{{ k.ku_type }} · {{ k.domain || '未分域' }}</span>
+        </span>
+        <span class="r">{{ fmtTime(k.created_at) }}</span>
+      </div>
+    </div>
+
+    <div class="pn-cols">
+      <div class="pn-sec">
+        <div class="pn-h">索引状态 <em>{{ idx.index_state || '—' }}</em></div>
+        <div class="pn-row">
+          <span class="m">
+            <b>{{ idx.index_state === 'ready' ? '索引就绪' : '索引' + (idx.index_state || '未知') }}</b>
+            <span class="s">
+              扫描 {{ fmtNum(idx.scanned ?? 0) }} · 就绪 {{ fmtNum(idx.ready ?? 0) }} ·
+              待处理 {{ fmtNum(idx.pending ?? 0) }} · 失败 {{ fmtNum(idx.failed ?? 0) }}
+            </span>
+          </span>
+          <span class="pn-tag" :class="idx.index_state === 'ready' ? 'green' : 'amber'">
+            {{ idx.index_version || 'v—' }}
+          </span>
+        </div>
+        <div class="pn-note meta">
+          向量模型 <code>{{ p.stats.embedding || '未知' }}</code><br />
+          BM25 {{ fmtNum(p.stats.bm25_size ?? 0) }} · 向量 {{ fmtNum(p.stats.vector_size ?? 0) }}<br />
+          数据目录 <code>{{ p.stats.data_dir || '—' }}</code>
+        </div>
+      </div>
+
+      <div class="pn-sec">
+        <div class="pn-h">按知识域 <em>{{ kus.length }}</em></div>
+        <div v-if="!kus.length" class="pn-empty">摄入资料后,这里按知识域统计条目数。</div>
+        <div v-for="[k, n] in kus" :key="k" class="pn-row">
+          <span class="m"><b>{{ k }}</b></span>
+          <span class="r">{{ n }}</span>
+        </div>
+
+        <div class="pn-h sec-gap">书籍来源 <em>{{ p.sources.length }}</em></div>
+        <div v-if="!p.sources.length" class="pn-empty">
+          还没有整本摄入的资料。PDF / EPUB 走知识星球导入。
+        </div>
+        <div v-for="(s, i) in p.sources.slice(0, 8)" :key="i" class="pn-row" :title="s.name || s.source">
+          <span class="m">
+            <b>{{ clip(s.name || s.source || '未命名资料', 34) }}</b>
+            <span class="s">{{ s.year || '年份未知' }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="pn-sec">
+      <div class="pn-h">能力清单 <em>{{ p.abilities.length }}</em></div>
+      <div v-if="!p.abilities.length" class="pn-empty">后端没有返回能力清单。</div>
+      <div v-else class="pn-chips">
+        <button
+          v-for="a in p.abilities"
+          :key="a"
+          class="pn-chip"
+          :class="{ on: abKey === a }"
+          @click="showAbility(a)"
+        >
+          {{ a }}
+        </button>
+      </div>
+
+      <div v-if="abState === 'busy'" class="pn-note meta">编译中…</div>
+      <div v-else-if="abState === 'err'" class="pn-note meta bad">编译失败:{{ abErr }}</div>
+      <div v-else-if="ab" class="kb-ab">
+        <template v-if="ab.available === false">
+          <div class="pn-note meta">HKC 未启用,无法编译能力。</div>
+        </template>
+
+        <template v-else-if="ab.sufficient === false">
+          <div class="kb-ab-h">{{ abKey }}<span class="v">知识不足</span></div>
+          <div class="pn-note meta">{{ ab.reason || '覆盖不足,暂不授予该能力。' }}</div>
+          <div v-if="(ab.missing_skills || []).length" class="pn-chips gap">
+            <span v-for="m in ab.missing_skills" :key="m" class="pn-chip warn">{{ m }}</span>
+          </div>
+        </template>
+
+        <template v-else-if="ab.ability">
+          <div class="kb-ab-h">
+            {{ ab.ability.display_name || abKey }}
+            <span class="v">{{ ab.ability.version || '' }}</span>
+          </div>
+          <div class="pn-note meta">
+            {{ ab.ability.domain || '未分域' }} · 覆盖 {{ covText(ab.ability.coverage) || '—' }}
+          </div>
+          <div v-for="s in ab.ability.skills || []" :key="s.skill_key" class="pn-row">
+            <span class="m">
+              <b>{{ s.display_name || s.skill_key }}</b>
+              <span class="s">{{ s.concept_hits ?? 0 }} 个概念命中</span>
+            </span>
+            <span class="r">{{ covText(s.coverage) }}</span>
+          </div>
+          <div v-for="(w, i) in ab.ability.workflows || []" :key="'w' + i" class="pn-row">
+            <span class="m"><b>{{ w }}</b></span>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <div class="pn-note">
+      录入走 <code>POST /api/knowledge/ingest</code>(KDE 抽取 → KEE 演化),
+      列表读 <code>/api/knowledge/recent</code>;书籍走知识星球。
+    </div>
+  </PanelBox>
+</template>
+
+<style scoped>
+.kb-in {
+  margin-bottom: 14px;
+  border-radius: var(--r-mid);
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(26, 157, 95, 0.16);
+  overflow: hidden;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.kb-in:focus-within {
+  border-color: rgba(26, 157, 95, 0.38);
+  box-shadow: 0 2px 12px rgba(26, 157, 95, 0.08);
+}
+.kb-in textarea {
+  display: block; width: 100%;
+  padding: 11px 12px 6px;
+  font-family: var(--sans);
+  font-size: 13px; line-height: 1.7; color: var(--ink);
+  background: transparent; border: 0; outline: none; resize: vertical;
+  min-height: 62px;
+}
+.kb-in textarea::placeholder { color: var(--dim); }
+
+.kb-bar {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 8px 8px 12px;
+  border-top: 1px solid var(--line-soft);
+}
+.kb-bar input {
+  padding: 4px 8px; border-radius: 6px;
+  font-size: 11.5px; color: var(--ink);
+  background: rgba(23, 32, 26, 0.04); border: 1px solid transparent;
+  outline: none;
+}
+.kb-bar input:focus { border-color: var(--line); background: #fff; }
+.kb-bar input::placeholder { color: var(--dim); }
+.f-title { flex: 1 1 110px; max-width: 190px; min-width: 0; }
+.f-domain { flex: 0 1 96px; min-width: 60px; }
+
+.tip {
+  flex: 1 1 auto; min-width: 0;
+  font-size: 11.5px; color: var(--dim);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.tip.dim { color: var(--faint); }
+.tip.ok { color: var(--green); }
+.tip.bad { color: var(--red); }
+
+.go {
+  flex-shrink: 0;
+  padding: 6px 15px; border-radius: var(--r-pill);
+  font-size: 11.5px; font-weight: 600; color: #fff;
+  background: var(--green);
+  transition: opacity 0.15s, transform 0.12s;
+}
+.go:hover:not(:disabled) { opacity: 0.9; }
+.go:active:not(:disabled) { transform: scale(0.97); }
+.go:disabled {
+  background: rgba(23, 32, 26, 0.07); color: var(--dim);
+  border: 1px solid var(--line-soft);
+}
+
+.meta { margin-top: 8px; }
+.sec-gap { margin-top: 14px; }
+.pn-note.meta.bad { color: var(--red); }
+
+.kb-find {
+  display: flex; align-items: center; gap: 6px;
+  margin-bottom: 8px;
+}
+.kb-find input {
+  flex: 1 1 auto; min-width: 0;
+  padding: 7px 10px; border-radius: var(--r-sm);
+  font-size: 12.5px; color: var(--ink);
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--line-soft);
+  outline: none;
+  transition: border-color 0.15s;
+}
+.kb-find input:focus { border-color: rgba(26, 157, 95, 0.45); }
+.kb-find input::placeholder { color: var(--dim); }
+.kb-find select {
+  padding: 6px 8px; border-radius: var(--r-sm);
+  font-size: 12px; font-weight: 600; color: var(--ink);
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--line);
+  outline: none;
+}
+.kb-find .go { padding: 6px 13px; }
+
+.kb-hits { display: flex; flex-direction: column; gap: 2px; }
+.kb-hit {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 7px 9px; border-radius: var(--r-sm);
+  text-align: left;
+  transition: background 0.13s;
+}
+.kb-hit:hover { background: rgba(255, 255, 255, 0.75); }
+.kb-hit .m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.kb-hit .m b {
+  font-size: 13px; font-weight: 600; color: var(--ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.kb-hit .m .s { font-size: 11.5px; color: var(--dim); }
+.kb-hit .r {
+  flex-shrink: 0; font-size: 11.5px; color: var(--dim);
+  font-variant-numeric: tabular-nums;
+}
+
+.pn-chips.gap { margin-top: 8px; }
+.kb-ab {
+  margin-top: 10px; padding: 10px 12px;
+  border-radius: var(--r-mid);
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid var(--line-soft);
+}
+.kb-ab-h {
+  display: flex; align-items: baseline; gap: 6px;
+  font-size: 13px; font-weight: 600; color: var(--ink);
+  margin-bottom: 5px;
+}
+.kb-ab-h .v { font-size: 11.5px; font-weight: 600; color: var(--dim); }
+</style>

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

@@ -0,0 +1,117 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import PanelBox from './PanelBox.vue'
+import { panels, loadPanel, refreshPanel, dropPreference } from '../../stores/panels.js'
+import { openDoc } from '../../stores/app.js'
+import { fmtTime, fmtNum, clip } from '../../lib/fmt.js'
+
+const p = panels.memory
+const err = ref('')
+const busy = ref('')
+onMounted(() => loadPanel('memory'))
+
+const ready = computed(() => !!p.stats.backend)
+const byAgent = computed(() => Object.entries(p.stats.by_agent || {}))
+
+function open(m) {
+  openDoc({
+    id: `mem:${m.id}`,
+    kind: 'text',
+    lang: 'markdown',
+    title: m.title || m.id,
+    path: `memory/${m.id}.md`,
+    meta: `${m.type || '记忆'} · ${m.agent || '—'} · ${fmtTime(m.created_at)}`,
+    content: m.summary || '(无摘要)',
+  })
+}
+
+async function drop(pref) {
+  busy.value = pref.id
+  err.value = ''
+  try { await dropPreference(pref.id) } catch (e) { err.value = String(e.message || e) }
+  busy.value = ''
+}
+</script>
+
+<template>
+  <PanelBox
+    title="记忆中心"
+    tag="Memory"
+    :state="p.state"
+    :ready="ready"
+    @refresh="refreshPanel('memory')"
+  >
+    <div class="pn-kpi">
+      <div><b>{{ fmtNum(p.stats.total_memories ?? 0) }}</b><span>记忆条目</span></div>
+      <div><b>{{ fmtNum(p.stats.relations ?? 0) }}</b><span>关联</span></div>
+      <div><b>{{ fmtNum(p.stats.shared ?? 0) }}</b><span>共享</span></div>
+      <div><b>{{ fmtNum(p.stats.private ?? 0) }}</b><span>私有</span></div>
+      <div><b>{{ fmtNum(p.prefs.length) }}</b><span>用户偏好</span></div>
+    </div>
+
+    <div v-if="err" class="pn-st err">{{ err }}</div>
+
+    <div class="pn-cols">
+      <div class="pn-sec">
+        <div class="pn-h">最近记忆 <em>{{ p.recent.length }}</em></div>
+        <div v-if="!p.recent.length" class="pn-empty">
+          还没有记忆。聊过的内容会被 HMR 提炼成记忆条目,这里能看到最新的几条。
+        </div>
+        <div
+          v-for="m in p.recent"
+          :key="m.id"
+          class="pn-row clickable"
+          :title="'点击看全文'"
+          @click="open(m)"
+        >
+          <span class="m">
+            <b>{{ clip(m.title || m.id, 40) }}</b>
+            <span class="s">{{ m.type || '记忆' }} · {{ m.agent || '—' }}</span>
+          </span>
+          <span v-if="m.shared" class="pn-tag">共享</span>
+          <span class="r">{{ fmtTime(m.created_at) }}</span>
+        </div>
+      </div>
+
+      <div class="pn-sec">
+        <div class="pn-h">按 Agent <em>{{ byAgent.length }}</em></div>
+        <div v-if="!byAgent.length" class="pn-empty">没有按 Agent 的分布数据。</div>
+        <div v-for="[a, n] in byAgent" :key="a" class="pn-row">
+          <span class="m"><b>{{ a }}</b></span>
+          <span class="r">{{ n }}</span>
+        </div>
+
+        <div class="pn-h sec-gap">用户偏好 <em>{{ p.prefs.length }}</em></div>
+        <div v-if="!p.prefs.length" class="pn-empty">
+          还没有记录偏好。你对 Agent 说过的长期设定会落在这里,误存的可以就地删掉。
+        </div>
+        <div v-for="pref in p.prefs" :key="pref.id" class="pn-row">
+          <span class="m">
+            <b>{{ clip(pref.content || pref.id, 40) }}</b>
+            <span class="s">{{ pref.id }}</span>
+          </span>
+          <button class="del" :disabled="busy === pref.id" title="删除这条偏好" @click.stop="drop(pref)">
+            删除
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="pn-note">
+      后端 <code>{{ p.stats.backend || '—' }}</code> v{{ p.stats.version || '—' }} ·
+      向量 <code>{{ p.stats.embedding || '—' }}</code>。
+      数据来自 <code>/api/memory/stats</code>、<code>/api/memory/recent</code>、<code>/api/preferences</code>。
+    </div>
+  </PanelBox>
+</template>
+
+<style scoped>
+.sec-gap { margin-top: 14px; }
+.del {
+  flex-shrink: 0; padding: 4px 10px; border-radius: var(--r-pill);
+  font-size: 11px; font-weight: 600; color: var(--dim);
+  background: var(--surface-2); border: 1px solid var(--line-soft);
+}
+.del:hover { color: var(--red); background: rgba(229, 72, 77, 0.1); }
+.del:disabled { opacity: 0.5; }
+</style>

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

@@ -0,0 +1,50 @@
+<script setup>
+import { t } from '../../lib/i18n.js'
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  tag: { type: String, default: '' },
+  state: { type: String, default: 'idle' },
+  ready: { type: Boolean, default: false },
+})
+defineEmits(['refresh'])
+</script>
+
+<template>
+  <section class="panel">
+    <header class="ph">
+      <div class="tt">
+        <h2>{{ props.title }}</h2>
+        <span v-if="props.tag" class="pn-tag">{{ props.tag }}</span>
+      </div>
+      <button class="rf" :class="{ spin: props.state === 'loading' }" :title="t('common.refresh')" @click="$emit('refresh')">
+        {{ t('common.refresh') }}
+      </button>
+    </header>
+    <div class="pb scroll">
+      <div v-if="props.state === 'loading' && !props.ready" class="pn-st">{{ t('common.loading') }}</div>
+      <div v-else-if="props.state === 'error'" class="pn-st err">{{ t('common.offlinePanel') }}</div>
+      <slot v-else />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.panel { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+.ph {
+  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
+  padding: 11px 16px 10px; border-bottom: 1px solid var(--line-soft);
+}
+.tt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.tt h2 { font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
+.rf {
+  margin-left: auto; flex-shrink: 0;
+  padding: 5px 11px; border-radius: var(--r-pill);
+  font-size: 11.5px; font-weight: 600; color: var(--ink);
+  background: rgba(255, 255, 255, 0.86); border: 1px solid var(--line);
+  transition: color 0.14s, background 0.14s, border-color 0.14s;
+}
+.rf:hover { color: var(--green); background: #fff; border-color: rgba(26, 157, 95, 0.35); }
+.rf.spin { color: var(--dim); }
+.pb { flex: 1; padding: 14px 16px 18px; }
+</style>