foxclaw 0.1.0 → 0.1.2

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

@@ -0,0 +1,144 @@
+<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() } },
+  /* 连接器只有一份实现,在技能面板里。这里不再内嵌一份只读副本(信任档位还是另一套词),
+     点进来直接去那个面板,要管 MCP 也只在一个地方管。 */
+  { ic: '🔌', b: '技能 · 连接器', s: '到技能面板看全部', act: () => { close(); setModule('tools') } },
+])
+
+function toggle() {
+  open.value = !open.value
+}
+function close() {
+  open.value = false
+}
+/* 斜杠命令 /摄入 通过 store 信号打到这里,避免把 input 引用抬到全局 */
+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,90 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { getJSON } from '../api.js'
+import { state, setModule } from '../stores/app.js'
+
+const uplink = ref('···')
+const tone = ref('dim')
+
+onMounted(async () => {
+  try {
+    await getJSON('/status')
+    uplink.value = '在线'
+    tone.value = 'ok'
+  } catch {
+    uplink.value = '离线'
+    tone.value = 'bad'
+  }
+})
+
+function openPlanet() {
+  window.open('/planet/', '_blank', 'noopener')
+}
+
+/* 这个 ⚙ 一直是死按钮(title 写着「P3 接入」)。设置面板补齐后接上去。 */
+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 class="ver">v3.0</span>
+    </div>
+    <div class="spacer" />
+    <div class="stat">
+      <span class="lbl">系统状态</span>
+      <span class="val" :class="tone">{{ uplink }}</span>
+    </div>
+    <button class="tbtn" title="打开 HKC 知识星球" @click="openPlanet">🌐 知识星球</button>
+    <button
+      class="tbtn"
+      :class="{ on: state.module === 'settings' }"
+      title="设置 (Ctrl+,)"
+      @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);
+}
+.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,84 @@
+<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>
+/* 事件行是只读快照,没有可点的动作 —— hover 高亮会让人以为点了能看详情。
+   之前这里是 <button> 但没绑事件,视觉上"能点"、实际不动。 */
+.pn-row.static:hover { background: transparent; }
+</style>

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

@@ -0,0 +1,86 @@
+<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 class="pn-note">
+      <template v-if="p.info">
+        版本 <code>{{ p.info.version }}</code> · 数据目录 <code>{{ p.info.data_dir }}</code>
+      </template>
+      数据来自 <code>/api/status</code> 与 <code>/api/system/info</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>