foxclaw 0.1.0 → 0.1.2

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

@@ -0,0 +1,105 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import PanelBox from './PanelBox.vue'
+import { panels, loadPanel, refreshPanel, openTokenReport } from '../../stores/panels.js'
+import { fmtNum, fmtMs, clip } from '../../lib/fmt.js'
+
+const p = panels.usage
+const err = ref('')
+onMounted(() => loadPanel('usage'))
+
+const ready = computed(() => !!p.tokens || Object.keys(p.gateway || {}).length > 0)
+const sum = computed(() => p.tokens?.summary || {})
+const agents = computed(() => Object.entries(p.tokens?.by_agent || {}))
+const provs = computed(() => Object.entries(p.tokens?.by_provider || {}))
+const llm = computed(() => Object.entries(p.metrics?.llm || {}))
+const uptimeH = computed(() => Math.round((p.metrics?.uptime_s || 0) / 3600))
+
+async function report() {
+  err.value = ''
+  try { await openTokenReport() } catch (e) { err.value = String(e.message || e) }
+}
+</script>
+
+<template>
+  <PanelBox
+    title="使用情况"
+    tag="Usage"
+    :state="p.state"
+    :ready="ready"
+    @refresh="refreshPanel('usage')"
+  >
+    <div class="pn-kpi">
+      <div><b>{{ fmtNum(sum.total_tokens ?? 0) }}</b><span>总 token</span></div>
+      <div><b>{{ fmtNum(sum.calls ?? 0) }}</b><span>调用次数</span></div>
+      <div><b>{{ fmtNum(Math.round(sum.avg_tokens_per_call ?? 0)) }}</b><span>平均 / 次</span></div>
+      <div><b>{{ fmtNum(p.gateway.rejected_total ?? 0) }}</b><span>网关拒绝</span></div>
+      <div><b>{{ uptimeH }}h</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">按 Agent <em>{{ agents.length }}</em></div>
+        <div v-if="!agents.length" class="pn-empty">还没有 token 消耗记录。</div>
+        <div v-for="[name, v] in agents" :key="name" class="pn-row">
+          <span class="m">
+            <b>{{ name }}</b>
+            <span class="s">输入 {{ fmtNum(v.input_tokens) }} · 输出 {{ fmtNum(v.output_tokens) }}</span>
+          </span>
+          <span class="r">{{ fmtNum(v.total_tokens) }}</span>
+        </div>
+      </div>
+
+      <div class="pn-sec">
+        <div class="pn-h">按 provider <em>{{ provs.length }}</em></div>
+        <div v-if="!provs.length" class="pn-empty">还没有 provider 记录。</div>
+        <div v-for="[name, v] in provs" :key="name" class="pn-row">
+          <span class="m">
+            <b>{{ name }}</b>
+            <span class="s">{{ v.calls }} 次调用</span>
+          </span>
+          <span class="r">{{ fmtNum(v.total_tokens) }}</span>
+        </div>
+        <div v-for="[name, v] in llm" :key="'llm-' + name" class="pn-row">
+          <span class="m">
+            <b>{{ name }} 延迟</b>
+            <span class="s">p50 {{ fmtMs(v.p50_ms) }} · p95 {{ fmtMs(v.p95_ms) }} · 错误率 {{ Math.round((v.error_rate || 0) * 100) }}%</span>
+          </span>
+          <span class="r">{{ v.count }} 次</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="pn-sec">
+      <div class="pn-h">最慢端点 p95 <em>{{ p.slow.length }}</em></div>
+      <div v-if="!p.slow.length" class="pn-empty">还没有端点耗时统计。</div>
+      <div v-for="e in p.slow" :key="e.name" class="pn-row" :title="e.name">
+        <span class="m">
+          <b>{{ clip(e.name, 46) }}</b>
+          <span class="s">{{ e.count }} 次 · 错误 {{ e.errors }} · 平均 {{ fmtMs(e.avg_ms) }}</span>
+        </span>
+        <span class="r">{{ fmtMs(e.p95_ms) }}</span>
+      </div>
+    </div>
+
+    <div class="pn-sec acts">
+      <button class="btn" @click="report">在中间舞台打开完整报告</button>
+      <span class="hint">网关 {{ p.gateway.enabled ? '已启用' : '未启用' }} ·
+        {{ p.gateway.rate_per_min ?? '—' }}/分 · 配额 {{ fmtNum(p.gateway.quota_per_hour ?? 0) }}/时
+      </span>
+    </div>
+  </PanelBox>
+</template>
+
+<style scoped>
+.acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.btn {
+  padding: 7px 13px; border-radius: var(--r-sm);
+  font-size: 11.5px; color: var(--green); font-weight: 600;
+  background: rgba(26, 157, 95, 0.1); border: 1px solid rgba(26, 157, 95, 0.16);
+}
+.btn:hover { background: rgba(26, 157, 95, 0.16); }
+.hint { font-size: 11.5px; color: var(--dim); }
+</style>

package/python/frontend_src/src/lib/fmt.js

@@ -0,0 +1,48 @@
+/* 7 个面板共用的时间/数字格式化。集中一份,避免每个组件各写一遍还写得不一样。 */
+
+/* 后端时间戳三种形态都有:秒 float(事件总线)、毫秒 int、ISO 字符串(记忆 created_at)。
+   字符串交给 Date 自己解析,数字按量级判断。 */
+function toDate(ts) {
+  if (!ts) return null
+  if (typeof ts === 'string') {
+    const d = new Date(ts)
+    return Number.isNaN(d.getTime()) ? null : d
+  }
+  const ms = ts > 1e12 ? ts : ts * 1000
+  const d = new Date(ms)
+  return Number.isNaN(d.getTime()) ? null : d
+}
+
+export function fmtTime(ts) {
+  const d = toDate(ts)
+  if (!d) return ''
+  return d.toLocaleString('zh-CN', {
+    month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false,
+  })
+}
+
+export function fmtAgo(ts) {
+  const d = toDate(ts)
+  if (!d) return ''
+  const s = Math.max(0, (Date.now() - d.getTime()) / 1000)
+  if (s < 60) return '刚刚'
+  if (s < 3600) return `${Math.floor(s / 60)} 分钟前`
+  if (s < 86400) return `${Math.floor(s / 3600)} 小时前`
+  return `${Math.floor(s / 86400)} 天前`
+}
+
+export function fmtNum(n) {
+  if (n === null || n === undefined || Number.isNaN(n)) return '0'
+  return Number(n).toLocaleString('zh-CN')
+}
+
+export function fmtMs(ms) {
+  if (ms === null || ms === undefined) return '—'
+  return ms >= 1000 ? `${(ms / 1000).toFixed(1)}s` : `${Math.round(ms)}ms`
+}
+
+/* 截断到 n 个字符(中文按 1 计),用于行内摘要 */
+export function clip(s, n = 46) {
+  const t = String(s ?? '').replace(/\s+/g, ' ').trim()
+  return t.length > n ? t.slice(0, n) + '…' : t
+}

package/python/frontend_src/src/lib/md.js

@@ -0,0 +1,204 @@
+/* 极简 Markdown → HTML。对话气泡与文档阅读共用这一份渲染器。
+ *
+ * 之前是两套:DocViewer 自带 readHTML/inl(支持标题、列表、行内代码、粗体、链接,
+ * 但**不支持 ``` 代码块**),而 MessageStream 直接 {{ m.content }} 原样输出 ——
+ * 于是模型的 `## 标题`、`**粗体**`、`- 列表`、反引号代码块在对话里全是原文。
+ *
+ * 安全边界:先全量转义 & < > ",之后只把识别到的标记换成标签;
+ * 所有标签都由本文件产出,链接只放行 http(s)。
+ */
+
+const esc = (s) =>
+  String(s ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+
+const RE_FENCE = /^\s*(`{3,}|~{3,})\s*([\w+#.-]*)\s*$/
+const RE_HEADING = /^(#{1,6})\s+(.*)$/
+const RE_HR = /^\s*([-*_])\1{2,}\s*$/
+const RE_LI = /^\s*(?:[-*+]|\d+[.)])\s+(.*)$/
+const RE_OL = /^\s*\d+[.)]\s+/
+const RE_QUOTE = /^>\s?(.*)$/
+const RE_TABLE_ROW = /^\s*\|.*\|\s*$/
+const RE_TABLE_SEP = /^\s*\|?\s*:?-{1,}:?\s*(\|\s*:?-{1,}:?\s*)*\|?\s*$/
+
+/* 行内标记。先把 `code` 抽成占位符,免得代码里的 ** 被当成粗体。 */
+function inline(src) {
+  const codes = []
+  let out = esc(src).replace(/`([^`]+)`/g, (_, c) => {
+    codes.push(c)
+    return `\u0000${codes.length - 1}\u0000`
+  })
+
+  out = out
+    .replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/(^|[^\w*])\*([^*\n]+)\*(?!\*)/g, '$1<em>$2</em>')
+    .replace(/~~([^~\n]+)~~/g, '<del>$1</del>')
+    .replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, (m, text, href) =>
+      /^https?:\/\//i.test(href)
+        ? `<a href="${href}" target="_blank" rel="noreferrer">${text}</a>`
+        : m
+    )
+
+  return out.replace(/\u0000(\d+)\u0000/g, (_, i) => `<code>${codes[Number(i)]}</code>`)
+}
+
+function codeBlock(lang, body, open) {
+  const cls = open ? 'md-code md-open' : 'md-code'
+  const attr = lang ? ` data-lang="${esc(lang)}"` : ''
+  return `<pre class="${cls}"${attr}><code>${esc(body)}</code></pre>`
+}
+
+function splitRow(line) {
+  return line
+    .trim()
+    .replace(/^\|/, '')
+    .replace(/\|$/, '')
+    .split('|')
+    .map((c) => c.trim())
+}
+
+function renderTable(rows) {
+  if (!rows.length) return ''
+  const head = rows[0]
+  const body = rows.slice(1)
+  const th = head.map((c) => `<th>${inline(c)}</th>`).join('')
+  const trs = body
+    .map((r) => `<tr>${r.map((c) => `<td>${inline(c)}</td>`).join('')}</tr>`)
+    .join('')
+  return `<table><thead><tr>${th}</tr></thead>${body.length ? `<tbody>${trs}</tbody>` : ''}</table>`
+}
+
+/* src 为空 → 空串。流式时最后一段代码块可能还没闭合,
+ * 这里把它当"开着"的代码块渲染,而不是把三个反引号当正文甩出来。 */
+export function mdToHTML(src) {
+  const text = String(src ?? '').replace(/\r\n?/g, '\n').replace(/\n$/, '')
+  if (!text.trim()) return ''
+
+  const lines = text.split('\n')
+  const out = []
+  let para = []
+  let list = null // { tag, items }
+  let quote = []
+
+  const flushPara = () => {
+    if (!para.length) return
+    out.push(`<p>${para.map(inline).join('<br>')}</p>`)
+    para = []
+  }
+  const flushList = () => {
+    if (!list) return
+    out.push(`<${list.tag}>${list.items.map((t) => `<li>${t}</li>`).join('')}</${list.tag}>`)
+    list = null
+  }
+  const flushQuote = () => {
+    if (!quote.length) return
+    out.push(`<blockquote>${quote.map(inline).join('<br>')}</blockquote>`)
+    quote = []
+  }
+  const flush = () => {
+    flushPara()
+    flushList()
+    flushQuote()
+  }
+
+  let i = 0
+  while (i < lines.length) {
+    const line = lines[i].replace(/\s+$/, '')
+
+    if (!line.trim()) {
+      flush()
+      i += 1
+      continue
+    }
+
+    /* 围栏代码块 —— 对话里最常出现,优先级最高 */
+    const fence = RE_FENCE.exec(line)
+    if (fence) {
+      flush()
+      const mark = fence[1][0]
+      const lang = fence[2] || ''
+      const body = []
+      let closed = false
+      let j = i + 1
+      for (; j < lines.length; j += 1) {
+        const cur = lines[j]
+        const end = RE_FENCE.exec(cur)
+        if (end && end[1][0] === mark) {
+          closed = true
+          break
+        }
+        body.push(cur)
+      }
+      out.push(codeBlock(lang, body.join('\n'), !closed))
+      i = closed ? j + 1 : j
+      continue
+    }
+
+    /* 表格:当前行是 | ... | 且下一行是分隔行 */
+    if (RE_TABLE_ROW.test(line) && i + 1 < lines.length && RE_TABLE_SEP.test(lines[i + 1]) && lines[i + 1].includes('-')) {
+      flush()
+      const rows = [splitRow(line)]
+      let j = i + 2
+      while (j < lines.length && RE_TABLE_ROW.test(lines[j])) {
+        rows.push(splitRow(lines[j]))
+        j += 1
+      }
+      out.push(renderTable(rows))
+      i = j
+      continue
+    }
+
+    const h = RE_HEADING.exec(line)
+    if (h) {
+      flush()
+      /* # → h2, #### 及以下 → h5,不再往下掉(对话里 h6 太小) */
+      const lv = Math.min(h[1].length + 1, 5)
+      out.push(`<h${lv}>${inline(h[2])}</h${lv}>`)
+      i += 1
+      continue
+    }
+
+    if (RE_HR.test(line)) {
+      flush()
+      out.push('<hr />')
+      i += 1
+      continue
+    }
+
+    const li = RE_LI.exec(line)
+    if (li) {
+      flushPara()
+      flushQuote()
+      const tag = RE_OL.test(line) ? 'ol' : 'ul'
+      if (!list || list.tag !== tag) {
+        flushList()
+        list = { tag, items: [] }
+      }
+      list.items.push(inline(li[1]))
+      i += 1
+      continue
+    }
+
+    const q = RE_QUOTE.exec(line)
+    if (q) {
+      flushPara()
+      flushList()
+      quote.push(q[1])
+      i += 1
+      continue
+    }
+
+    flushList()
+    flushQuote()
+    para.push(line.trim())
+    i += 1
+  }
+
+  flush()
+  return out.join('')
+}
+
+export { esc }

package/python/frontend_src/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './styles/tokens.css'
+import './styles/base.css'
+import './styles/panel.css'
+
+createApp(App).mount('#app')

package/python/frontend_src/src/stores/app.js

@@ -0,0 +1,106 @@
+import { reactive } from 'vue'
+import { getJSON } from '../api.js'
+
+/* 单一状态源:所有栏只读这一份,不再有 _syncNav 那类「三个入口各改一遍」的补丁。 */
+export const state = reactive({
+  /* 左栏 */
+  sessions: [],
+  sessionsState: 'idle', // idle | loading | error
+  sessionId: null,
+
+  /* 中间舞台 */
+  module: 'overview',
+  doc: null, // { id, title, kind:'text'|'code', lang, path, content, meta }
+
+  /* 右栏 Inspector:双内容态,同一栏 */
+  railOpen: true,
+  railMode: 'progress', // 'progress' | 'context'
+
+  /* 办公进度(OfficeAgent 的态势与进程);学习账本在 panels.review 里 */
+  officeStats: { waypoints: 0, conflicts: 0, alerts: 0, active: 0, total: 0 },
+})
+
+export const MODULES = [
+  { id: 'overview', label: '概览', tag: 'Overview', group: '' },
+  { id: 'activity', label: '活动', tag: 'Activity', group: '工作台' },
+  { id: 'tasks', label: '定时任务', tag: 'Tasks', group: '工作台', icon: 'clock' },
+  { id: 'agents', label: '代理', tag: 'Agents', group: '工作台', icon: 'bot', beta: true },
+  { id: 'tools', label: '技能·连接器', tag: 'Tools', group: '能力', icon: 'plug' },
+  { id: 'usage', label: '使用情况', tag: 'Usage', group: '能力' },
+  /* 学习库 = 办公/学习的汇总表:知识库里有什么、哪些到期该复习、记了什么,一份数据的三个视图。
+     所以它只有一个入口,hover 出「复习 / 记忆」两个快捷 —— 平级摆三行会让同一份数据看着像三份。 */
+  { id: 'knowledge', label: '学习库', tag: 'Knowledge', group: '知识', icon: 'book', quick: ['review', 'memory'] },
+  { id: 'review', label: '复习', tag: 'Review', group: '知识', icon: 'review' },
+  { id: 'memory', label: '记忆中心', tag: 'Memory', group: '知识', icon: 'memory' },
+  /* 设置不是"干活的地方",所以不进常驻栏;顶栏 ⚙ 与「更多」都能到,
+     顶栏那个 ⚙ 之前是死按钮(title 写着 P3 接入)。 */
+  /* 设置落在「更多」里,那里不画图标;之前挂的 icon:'gear' 在 LeftRail 的 ICONS 里
+     并不存在(只有 book/clock/plug/bot/more/review/memory/dot),是个死字段。 */
+  { id: 'settings', label: '设置', tag: 'Settings', group: '系统' },
+]
+
+/* 左栏常驻的功能入口(顺序即渲染顺序)。不进这个数组的模块全部落进底部「更多」浮层。
+   常驻项恒可见 = 不用先点开菜单才知道有什么功能;代价是列高固定,所以只放四个。 */
+export const RAIL = ['knowledge', 'tasks', 'tools', 'agents']
+
+export const railItems = () => RAIL.map((id) => MODULES.find((m) => m.id === id)).filter(Boolean)
+export const moreItems = () => MODULES.filter((m) => !RAIL.includes(m.id))
+
+export const moduleLabel = (id) => MODULES.find((m) => m.id === id)?.label ?? id
+export const moduleIcon = (id) => MODULES.find((m) => m.id === id)?.icon ?? 'dot'
+
+export async function loadSessions() {
+  state.sessionsState = 'loading'
+  try {
+    const d = await getJSON('/sessions?limit=50')
+    state.sessions = d.sessions || []
+    state.sessionsState = 'ok'
+  } catch {
+    state.sessions = []
+    state.sessionsState = 'error'
+  }
+}
+
+export function openSession(s) {
+  state.sessionId = s.id
+  state.doc = null
+  state.railMode = 'progress'
+}
+
+export async function loadProgress() {
+  /* 学习账本已改由 panels.review(/api/review/*)提供 —— SM-2 状态写在 KU.extra 里,
+     和知识库是同一份数据;/learning/analysis 只统计 learning_note 一类条目,
+     两套口径并存会让右栏数字和复习面板对不上。 */
+
+  /* 办公 = OfficeAgent(行政职责已并入它)的全局态势 + 进程。
+     「已摄入资料」已挪到右栏的「最近知识」(读 /api/knowledge/recent),
+     书籍级列表留在知识库面板,这里不再重复拉 /knowledge/sources。 */
+  const [sit, proc] = await Promise.all([
+    getJSON('/orchestration/situation').catch(() => null),
+    getJSON('/processes?limit=5').catch(() => null),
+  ])
+  state.officeStats = {
+    waypoints: sit?.itinerary?.waypoints ?? 0,
+    conflicts: sit?.itinerary?.conflicts ?? 0,
+    alerts: (sit?.alerts || []).length,
+    active: proc?.stats?.active ?? 0,
+    total: proc?.stats?.total ?? 0,
+  }
+}
+
+export function setModule(id) {
+  state.module = id
+  state.doc = null
+}
+
+/* 打开一份文件 → 正文进中间舞台(宽度够读代码),右栏同步切到检视态并自动展开 */
+export function openDoc(doc) {
+  state.doc = doc
+  state.railMode = 'context'
+  state.railOpen = true
+}
+
+export function closeDoc() {
+  state.doc = null
+  state.railMode = 'progress'
+}