foxclaw 0.1.0 → 0.1.2

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

@@ -0,0 +1,308 @@
+<script setup>
+/* 复习面板 = SM-2 账本 + 今日队列 + 遗忘曲线。
+   卡片就是知识库里的 KU(复习状态在 KU.extra.review 里),不另存一份。 */
+import { computed, onMounted, ref } from 'vue'
+import PanelBox from './PanelBox.vue'
+import {
+  panels, loadPanel, refreshPanel, startReview, revealCard, gradeCard, openKu,
+} from '../../stores/panels.js'
+
+const rv = panels.review
+const err = ref('')
+
+onMounted(() => loadPanel('review'))
+
+const st = computed(() => rv.stats || {})
+const card = computed(() => rv.queue[rv.index] || null)
+const total = computed(() => rv.queue.length)
+const pos = computed(() => Math.min(rv.index + 1, total.value))
+
+const masteryPct = computed(() => Math.round((st.value.avg_mastery || 0) * 100))
+const todo = computed(() => (st.value.due || 0) + (st.value.fresh || 0))
+
+/* 遗忘曲线:Ebbinghaus R = e^(-t/S)。
+   SM-2 的语义是「复习时保留率约 90%」,由 R=0.9 反推稳定度
+   S ≈ interval / ln(1/0.9) ≈ 9.49 × interval;EF 越高衰减越慢。
+   新卡没有 interval,给一个很小的 S,曲线会陡降 —— 这正是「不复习就忘」的直观样子。 */
+const W = 620
+const H = 130
+const DAYS = 30
+
+const curve = computed(() => {
+  const c = card.value
+  const interval = c?.interval || 0
+  const ef = c?.ease_factor || 2.5
+  /* 新卡没有 interval,S 给 1.2 让曲线在 30 天窗口里真能看出衰减;
+     取 0 会让整条曲线贴死底边,看上去像渲染坏了。 */
+  const S = interval > 0 ? 9.49 * interval * (ef / 2.5) : 1.2
+
+  const pts = []
+  for (let d = 0; d <= DAYS; d += 0.5) {
+    const r = Math.exp(-d / S)
+    pts.push(`${((d / DAYS) * W).toFixed(1)},${(H - r * H).toFixed(1)}`)
+  }
+
+  const dueDay = c?.days_until_due ?? 0
+  const showDot = interval > 0 && dueDay <= DAYS
+  return {
+    path: `M${pts.join(' L')}`,
+    s: S,
+    due: showDot
+      ? { x: (dueDay / DAYS) * W, y: H - Math.exp(-dueDay / S) * H }
+      : null,
+    /* 今天的位置(曲线起点)保留率恒为 1 */
+    now: { x: 0, y: 0 },
+  }
+})
+
+/* by_day 是稀疏字典,补齐 7 天才能画成等距柱 */
+/* 不到一天时说「几小时后」比说「0 天后」有用得多 */
+const dueText = computed(() => {
+  const c = card.value
+  if (!c || !c.interval) return '新卡:曲线是「不复习就忘」的示意'
+  const h = c.due_in_hours || 0
+  const when = h <= 0 ? '已到期' : h < 24 ? `${Math.round(h)} 小时后` : `${c.days_until_due} 天后`
+  return `S≈${curve.value.s.toFixed(1)} 天 · 下次 ${when}`
+})
+
+const load = computed(() => {
+  const by = st.value.load7?.by_day || {}
+  return Array.from({ length: 7 }, (_, d) => ({ d, n: by[d] ?? by[String(d)] ?? 0 }))
+})
+const loadMax = computed(() => Math.max(1, ...load.value.map((x) => x.n)))
+
+async function grade(g) {
+  err.value = ''
+  try {
+    await gradeCard(g)
+  } catch (e) {
+    err.value = String(e?.message || e)
+  }
+}
+</script>
+
+<template>
+  <PanelBox
+    title="复习"
+    tag="SM-2"
+    :state="rv.state"
+    :ready="rv.state === 'ok'"
+    @refresh="refreshPanel('review')"
+  >
+    <div class="pn-kpi">
+      <div><b>{{ st.cards }}</b><span>复习卡</span></div>
+      <div><b>{{ st.due }}</b><span>今日到期</span></div>
+      <div><b>{{ st.fresh }}</b><span>新卡</span></div>
+      <div><b>{{ masteryPct }}%</b><span>平均掌握</span></div>
+    </div>
+
+    <div class="rv-grid">
+      <section>
+        <div class="pn-h">
+          学习卡
+          <em v-if="rv.session === 'running'">{{ pos }} / {{ total }}</em>
+          <em v-else>队列 {{ total }} 张</em>
+        </div>
+
+        <div v-if="rv.session === 'running' && card" class="card">
+          <div class="ct">
+            <span class="pn-tag">{{ card.ku_type }}</span>
+            <span class="dim">{{ card.domain || '未分域' }}</span>
+            <span v-if="card.is_new" class="pn-tag new">新卡</span>
+            <span v-else class="dim">第 {{ (card.repetitions || 0) + 1 }} 次</span>
+          </div>
+
+          <h3>{{ card.name }}</h3>
+
+          <template v-if="rv.revealed">
+            <p v-if="card.summary && card.summary !== card.name" class="sum">{{ card.summary }}</p>
+            <p v-if="card.text" class="src">{{ card.text }}</p>
+            <div class="grades">
+              <button class="g g0" @click="grade(0)">忘记<span>重新开始</span></button>
+              <button class="g g3" @click="grade(3)">模糊<span>间隔不涨</span></button>
+              <button class="g g4" @click="grade(4)">记得<span>正常推进</span></button>
+              <button class="g g5" @click="grade(5)">轻松<span>EF +0.1</span></button>
+            </div>
+          </template>
+          <template v-else>
+            <p class="hint">先在心里回想一遍,再显示答案。凭印象评分,不要凭「刚才看过」。</p>
+            <button class="act" @click="revealCard()">显示答案</button>
+          </template>
+          <p v-if="err" class="err">{{ err }}</p>
+        </div>
+
+        <div v-else-if="rv.session === 'done'" class="done">
+          <b>这一轮过完了</b>
+          <p v-if="rv.lastMsg">{{ rv.lastMsg }}</p>
+          <p class="dim">下一轮按 SM-2 排期,到期的会重新出现在这里。</p>
+          <button class="act" @click="startReview()">再来一轮</button>
+        </div>
+
+        <div v-else class="idle">
+          <p v-if="todo">
+            今日待办:<b>{{ st.due }}</b> 张到期 + <b>{{ st.fresh }}</b> 张新卡
+          </p>
+          <p v-else-if="!st.cards" class="dim">
+            还没有复习卡。在右栏上部或学习库录一句知识,抽取出的知识单元会自动变成卡。
+          </p>
+          <p v-else class="dim">今天的卡都过完了。明天再来,间隔会按 SM-2 自然拉长。</p>
+          <button v-if="todo" class="act" @click="startReview()">
+            开始复习 {{ Math.min(todo, 20) }} 张
+          </button>
+        </div>
+      </section>
+
+      <aside class="side">
+        <div class="pn-h">遗忘曲线 <em>R = e^(−t/S)</em></div>
+        <svg class="curve" :viewBox="`0 0 ${W} ${H}`" preserveAspectRatio="none">
+          <line class="ref" x1="0" :y1="H * 0.1" :x2="W" :y2="H * 0.1" />
+          <path class="line" :d="curve.path" />
+          <circle v-if="curve.due" class="dot" :cx="curve.due.x" :cy="curve.due.y" r="4" />
+        </svg>
+        <div class="axis">
+          <span>今天</span>
+          <span class="dim">{{ dueText }}</span>
+          <span>+{{ DAYS }} 天</span>
+        </div>
+        <p class="note">
+          排期规则:答「忘记」重置为 1 天;答「记得 / 轻松」按 1 → 6 → 16 天递进,
+          EF 每次 ±0.1 微调,间隔随熟练度拉长。
+        </p>
+        <p class="note warn">
+          进度存在知识单元自身,和知识星球共用同一个库。所以在星球里「按来源删除」删掉的
+          卡片,进度会一起消失;清库接口会清空全部知识与进度。
+        </p>
+
+        <div class="pn-h" style="margin-top: 16px">
+          未来 7 天 <em>{{ st.load7?.total_due || 0 }} 张</em>
+        </div>
+        <div class="load">
+          <div v-for="x in load" :key="x.d" class="bar">
+            <i :style="{ height: `${Math.max(2, (x.n / loadMax) * 34)}px` }" :class="{ zero: !x.n }" />
+            <span>{{ x.d === 0 ? '今' : `+${x.d}` }}</span>
+            <em>{{ x.n }}</em>
+          </div>
+        </div>
+
+        <template v-if="st.risk?.length">
+          <div class="pn-h" style="margin-top: 16px">遗忘风险</div>
+          <button
+            v-for="r in st.risk"
+            :key="r.item_id"
+            class="pn-row clickable"
+            @click="openKu(r.item_id)"
+          >
+            <span class="m">
+              <b>{{ r.name || r.item_id }}</b>
+              <span class="s">{{ r.reason }}</span>
+            </span>
+          </button>
+        </template>
+      </aside>
+    </div>
+  </PanelBox>
+</template>
+
+<style scoped>
+.rv-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+  gap: 22px;
+  align-items: start;
+}
+/* 断点看面板容器宽度,不是视口 —— 中栏只占窗口一半,
+   1600 的窗口里也只有 ~580px,按视口判断会永远两列挤成两条窄条。 */
+@container (max-width: 820px) {
+  .rv-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
+}
+
+/* ── 卡片 ── */
+.card {
+  padding: 16px 18px 18px;
+  border-radius: var(--r-md);
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid var(--line-soft);
+  box-shadow: 0 1px 3px rgba(23, 32, 26, 0.04);
+}
+.ct { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+.ct .dim { font-size: 11.5px; color: var(--dim); }
+.pn-tag.new { background: rgba(26, 157, 95, 0.12); color: var(--green); }
+.card h3 {
+  font-family: var(--serif);
+  font-size: 17px; line-height: 1.62; font-weight: 600;
+  color: var(--ink); margin-bottom: 12px;
+}
+.sum { font-size: 13px; line-height: 1.8; color: var(--dim); margin-bottom: 10px; }
+.src {
+  font-size: 12px; line-height: 1.85; color: var(--dim);
+  padding: 9px 12px; border-left: 2px solid var(--line);
+  background: rgba(23, 32, 26, 0.025);
+  margin-bottom: 14px; white-space: pre-wrap;
+}
+.hint { font-size: 12px; color: var(--dim); margin: 4px 0 14px; line-height: 1.7; }
+.err { margin-top: 10px; font-size: 11px; color: #b4453c; }
+
+.act {
+  display: inline-block;
+  padding: 8px 18px; border-radius: var(--r-pill);
+  font-size: 12px; font-weight: 600; color: #fff;
+  background: var(--green);
+  transition: opacity 0.15s;
+}
+.act:hover { opacity: 0.9; }
+
+.grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
+.g {
+  display: flex; flex-direction: column; align-items: center; gap: 2px;
+  padding: 9px 4px 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-soft);
+  transition: border-color 0.14s, background 0.14s, color 0.14s;
+}
+.g span { font-size: 11px; font-weight: 500; color: var(--dim); }
+.g:hover { border-color: rgba(26, 157, 95, 0.42); background: rgba(26, 157, 95, 0.06); }
+.g0:hover { border-color: rgba(180, 69, 60, 0.42); background: rgba(180, 69, 60, 0.06); }
+
+.done, .idle { padding: 14px 2px; }
+.done b { font-size: 13px; }
+.done p, .idle p { font-size: 12px; line-height: 1.8; color: var(--dim); margin: 6px 0 14px; }
+.idle b { color: var(--ink); }
+
+/* ── 曲线 ── */
+.curve {
+  display: block; width: 100%; height: 130px;
+  overflow: visible;
+}
+.curve .ref { stroke: rgba(23, 32, 26, 0.12); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
+.curve .line { fill: none; stroke: var(--green); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
+.curve .dot { fill: var(--green); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
+.axis {
+  display: flex; justify-content: space-between; align-items: baseline;
+  margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--dim);
+}
+.axis .dim { font-family: var(--mono); font-size: 11px; }
+.note {
+  margin-top: 8px; font-size: 11.5px; line-height: 1.75; color: var(--dim);
+}
+.note.warn {
+  padding: 7px 9px; border-radius: var(--r-sm);
+  background: rgba(196, 138, 26, 0.07);
+  border-left: 2px solid rgba(196, 138, 26, 0.45);
+  color: #8a6a24;
+}
+
+/* ── 7 天负荷 ── */
+.load { display: flex; align-items: flex-end; gap: 6px; padding: 8px 2px 0; }
+.load .bar {
+  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
+  min-width: 0;
+}
+.load i {
+  display: block; width: 100%; max-width: 26px; border-radius: 2px 2px 0 0;
+  background: rgba(26, 157, 95, 0.55);
+}
+.load i.zero { background: rgba(23, 32, 26, 0.14); }
+.load span { font-size: 10.5px; color: var(--dim); }
+.load em { font-style: normal; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink); }
+</style>

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

@@ -0,0 +1,254 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import PanelBox from './PanelBox.vue'
+import { getJSON } from '../../api.js'
+import { currentLabel, loadModels, modelOptions, selectModel } from '../../stores/model.js'
+import { setModule } from '../../stores/app.js'
+import { setMode, chat, say } from '../../stores/chat.js'
+
+/* __APP_INFO__ 由 vite define 在构建时注入 { git:{sha,ts}, built };没有 git 时是 dev。
+   用 typeof 兜一层:万一在没走过 vite 的环境里被单独加载,不要抛 ReferenceError。 */
+const info = typeof __APP_INFO__ === 'undefined' ? null : __APP_INFO__
+const sha = info?.git?.sha || 'dev'
+const age = (() => {
+  const ts = info?.git?.ts || 0
+  if (!ts) return '本地构建'
+  const d = Math.floor((Date.now() - ts) / 86400000)
+  return d <= 0 ? '今天' : `${d} 天前`
+})()
+
+const open = ref('') // '' | 'model' | 'keys' —— 一次只展开一组,行数不会失控
+const up = ref(null) // null=探测中 | true | false
+const err = ref('')
+
+const cur = computed(() => currentLabel())
+const options = computed(() => modelOptions())
+
+/* 只列真正存在的键位。ChatDock.onKey 里没有 Ctrl+Enter 收录、没有 / 之外的快捷键,
+   这里就不写 —— 设置里写一条按不出来的键,比不写更糟。 */
+const KEYS = [
+  ['Enter', '发送'],
+  ['Shift + Enter', '换行'],
+  ['/', '命令补全(如 /搜索)'],
+  ['@', '技能补全'],
+  ['↑ ↓', '在补全列表里选'],
+  ['Esc', '关闭补全 / 浮层'],
+  ['Ctrl + ,', '打开设置'],
+]
+
+onMounted(() => {
+  loadModels()
+  probe()
+})
+
+async function probe() {
+  up.value = null
+  try {
+    await getJSON('/status')
+    up.value = true
+  } catch {
+    up.value = false
+  }
+}
+
+async function refresh() {
+  await loadModels(true).catch(() => {})
+  probe()
+}
+
+async function pick(o) {
+  try {
+    await selectModel({
+      source: o.source,
+      provider: o.source === 'preset' ? o.key : null,
+      name: o.source === 'custom' ? o.key : null,
+    })
+    open.value = ''
+    say(`模型已切到 ${o.label}`)
+  } catch (e) {
+    err.value = e.message
+    say(`切换失败:${e.message}`, 4000)
+  }
+}
+
+function mode(m) {
+  setMode(m)
+  say(m === 'stream' ? '流式:逐字输出' : '编排:先出计划再逐步执行')
+}
+
+const ICONS = {
+  gear: ['M12 9.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6z', 'M12 3.2v2.2', 'M12 18.6v2.2', 'M3.2 12h2.2', 'M18.6 12h2.2', 'M5.8 5.8l1.6 1.6', 'M16.6 16.6l1.6 1.6', 'M18.2 5.8l-1.6 1.6', 'M7.4 16.6l-1.6 1.6'],
+  gauge: ['M3.6 15.6a8.4 8.4 0 1 1 16.8 0', 'M12 15.6l4.2-4.8'],
+  chat: ['M19.6 14.8a1.8 1.8 0 0 1-1.8 1.8H8.6L5 20v-3.4H6.2A1.8 1.8 0 0 1 4.4 14.8V6.4A1.8 1.8 0 0 1 6.2 4.6h11.6a1.8 1.8 0 0 1 1.8 1.8z'],
+  keys: ['M3.8 8.2h16.4v7.6H3.8z', 'M7 11h.01', 'M11 11h.01', 'M15 11h.01', 'M9 13.8h6'],
+  server: ['M4.4 5.4h15.2v4.8H4.4z', 'M4.4 13.8h15.2v4.8H4.4z', 'M7.4 7.8h.01', 'M7.4 16.2h.01'],
+}
+
+const icon = (n) => ICONS[n] || ICONS.gear
+</script>
+
+<template>
+  <PanelBox title="设置" tag="Settings" state="idle" :ready="true" @refresh="refresh">
+    <div class="card">
+      <div class="grp">模型</div>
+
+      <button class="row" :aria-expanded="open === 'model'" @click="open = open === 'model' ? '' : 'model'">
+        <span class="ic"><svg viewBox="0 0 24 24"><path v-for="(d, i) in icon('gear')" :key="i" :d="d" /></svg></span>
+        <span class="m"><b>模型与供应商</b><span>切换后服务端立即生效,不用重启</span></span>
+        <span class="hint"><i class="dot" :style="{ background: cur.color }" />{{ cur.name }}</span>
+        <span class="chev" :class="{ open: open === 'model' }">›</span>
+      </button>
+
+      <div v-if="open === 'model'" class="sub">
+        <button
+          v-for="o in options"
+          :key="`${o.source}-${o.key}`"
+          class="opt"
+          :class="{ on: o.active }"
+          @click="pick(o)"
+        >
+          <span class="dot" :style="{ background: o.color }" />
+          <span class="m"><b>{{ o.label }}</b><span>{{ o.sub }}</span></span>
+          <span v-if="o.active" class="pn-tag green">当前</span>
+          <span v-else-if="o.configured === false" class="pn-tag amber">未配置</span>
+        </button>
+        <p class="tip">
+          「未配置」= 后端缺该厂商的 Key。自定义模型的 Key / Base URL 在输入框左侧的模型胶囊里加。
+        </p>
+        <p v-if="err" class="tip err">{{ err }}</p>
+      </div>
+
+      <button class="row" @click="setModule('usage')">
+        <span class="ic"><svg viewBox="0 0 24 24"><path v-for="(d, i) in icon('gauge')" :key="i" :d="d" /></svg></span>
+        <span class="m"><b>使用情况</b><span>token、调用次数、余额</span></span>
+        <span class="chev">›</span>
+      </button>
+    </div>
+
+    <div class="card">
+      <div class="grp">对话</div>
+
+      <div class="row static">
+        <span class="ic"><svg viewBox="0 0 24 24"><path v-for="(d, i) in icon('chat')" :key="i" :d="d" /></svg></span>
+        <span class="m"><b>模式</b><span>逐字流式 / 先出计划再逐步执行</span></span>
+        <span class="seg">
+          <button :class="{ on: chat.mode === 'stream' }" @click="mode('stream')">流式</button>
+          <button :class="{ on: chat.mode === 'orchestrate' }" @click="mode('orchestrate')">编排</button>
+        </span>
+      </div>
+
+      <button class="row" :aria-expanded="open === 'keys'" @click="open = open === 'keys' ? '' : 'keys'">
+        <span class="ic"><svg viewBox="0 0 24 24"><path v-for="(d, i) in icon('keys')" :key="i" :d="d" /></svg></span>
+        <span class="m"><b>快捷键</b><span>输入框里的键位</span></span>
+        <span class="hint">{{ KEYS.length }} 条</span>
+        <span class="chev" :class="{ open: open === 'keys' }">›</span>
+      </button>
+
+      <div v-if="open === 'keys'" class="sub">
+        <div v-for="k in KEYS" :key="k[0]" class="kv">
+          <kbd>{{ k[0] }}</kbd>
+          <span>{{ k[1] }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="grp">系统</div>
+
+      <button class="row" :title="up ? '再探一次' : '重试'" @click="probe">
+        <span class="ic"><svg viewBox="0 0 24 24"><path v-for="(d, i) in icon('server')" :key="i" :d="d" /></svg></span>
+        <span class="m"><b>后端连接</b><span>/api · {{ up === null ? '探测中…' : up ? '在线' : '离线' }}</span></span>
+        <span class="pn-tag" :class="up ? 'green' : up === false ? 'amber' : ''">
+          {{ up === null ? '…' : up ? '正常' : '重试' }}
+        </span>
+      </button>
+    </div>
+
+    <div class="foot">
+      <span class="mono">git@{{ sha }} · {{ age }}</span>
+      <span class="dev" title="本地构建">▭</span>
+    </div>
+  </PanelBox>
+</template>
+
+<style scoped>
+.card {
+  border-radius: var(--r-mid);
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid var(--line-soft);
+  box-shadow: 0 1px 2px rgba(23, 32, 26, 0.04);
+  padding: 4px 6px 6px;
+  margin-bottom: 12px;
+}
+.grp {
+  padding: 8px 8px 6px;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
+  color: var(--dim); text-transform: uppercase;
+}
+
+.row {
+  width: 100%;
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px; border-radius: var(--r-sm);
+  text-align: left;
+  transition: background 0.14s;
+}
+.row:hover { background: rgba(255, 255, 255, 0.9); }
+.row.static:hover { background: transparent; }
+.row .ic { width: 22px; height: 22px; display: grid; place-items: center; color: var(--dim); flex-shrink: 0; }
+.row .ic svg {
+  width: 16px; height: 16px;
+  fill: none; stroke: currentColor; stroke-width: 1.6;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+.row .m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.row .m b { font-size: 13px; font-weight: 600; color: var(--ink); }
+.row .m span { font-size: 11.5px; color: var(--dim); }
+.hint { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--dim); flex-shrink: 0; }
+.hint .dot { width: 7px; height: 7px; border-radius: 50%; }
+.chev { color: var(--dim); font-size: 13px; flex-shrink: 0; transition: transform 0.16s; }
+.chev.open { transform: rotate(90deg); }
+
+.seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--r-sm); background: rgba(23, 32, 26, 0.05); flex-shrink: 0; }
+.seg button { padding: 4px 10px; border-radius: 7px; font-size: 11.5px; color: var(--dim); transition: background 0.15s, color 0.15s; }
+.seg button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 32, 26, 0.07); }
+
+.sub {
+  margin: 2px 8px 6px 40px;
+  padding: 4px;
+  border-left: 1px solid var(--line-soft);
+}
+.opt {
+  width: 100%;
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 8px; border-radius: 7px;
+  text-align: left;
+  transition: background 0.13s;
+}
+.opt:hover { background: rgba(255, 255, 255, 0.9); }
+.opt.on { background: rgba(26, 157, 95, 0.09); }
+.opt .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.opt .m { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; }
+.opt .m b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
+.opt .m span { font-size: 11.5px; color: var(--dim); font-family: var(--mono); }
+
+.tip { padding: 4px 8px 2px; font-size: 11.5px; line-height: 1.6; color: var(--dim); }
+.tip.err { color: var(--red); }
+
+.kv { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
+.kv kbd {
+  min-width: 92px; flex-shrink: 0;
+  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink);
+  padding: 2px 6px; border-radius: 5px;
+  background: rgba(23, 32, 26, 0.05);
+}
+.kv span { font-size: 11.5px; color: var(--dim); }
+
+.foot {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-top: 2px; padding: 10px 4px 2px;
+  border-top: 1px solid var(--line-soft);
+}
+.foot .mono { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
+.foot .dev { font-size: 12px; color: var(--faint); }
+</style>

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

@@ -0,0 +1,74 @@
+<script setup>
+import { computed, onMounted } from 'vue'
+import PanelBox from './PanelBox.vue'
+import { panels, loadPanel, refreshPanel } from '../../stores/panels.js'
+import { fmtAgo, clip } from '../../lib/fmt.js'
+
+const p = panels.tasks
+onMounted(() => loadPanel('tasks'))
+
+const ready = computed(() => p.state === 'ok' && Object.keys(p.sched).length > 0)
+const byState = computed(() => p.procStats?.by_state || {})
+
+/* 后端把每个任务建模成「进程」,状态机 created→queued→scheduled→running→completed/failed */
+function stateTag(s) {
+  return s === 'completed' ? 'green' : s === 'failed' ? 'red' : s === 'running' ? 'amber' : ''
+}
+const STATE_CN = {
+  created: '已创建', queued: '排队中', scheduled: '已调度',
+  running: '执行中', completed: '已完成', failed: '失败',
+}
+const cn = (s) => STATE_CN[s] || s
+</script>
+
+<template>
+  <PanelBox
+    title="任务"
+    tag="Tasks"
+    :state="p.state"
+    :ready="ready"
+    @refresh="refreshPanel('tasks')"
+  >
+    <div class="pn-kpi">
+      <div><b>{{ p.sched.submitted ?? 0 }}</b><span>已提交</span></div>
+      <div><b>{{ p.sched.running ?? 0 }}</b><span>执行中</span></div>
+      <div><b>{{ p.sched.completed ?? 0 }}</b><span>已完成</span></div>
+      <div><b>{{ p.sched.failed ?? 0 }}</b><span>失败</span></div>
+      <div><b>{{ p.procStats?.active ?? 0 }}</b><span>活跃进程</span></div>
+    </div>
+
+    <div class="pn-sec">
+      <div class="pn-h">进程生命周期 <em>{{ p.processes.length }}</em></div>
+      <div v-if="!p.processes.length" class="pn-empty">
+        还没有任务进程。任务是按「进程」记录的：提交后排入调度,执行完进入终态,
+        每一步的 <code>state_history</code> 都能追溯。
+      </div>
+      <div v-for="r in p.processes" :key="r.process_id" class="pn-row">
+        <span class="m">
+          <b>{{ clip(r.task, 52) }}</b>
+          <span class="s">
+            {{ r.agent_id || '未分配' }}
+            <template v-if="r.route_hint"> · {{ r.route_hint }}</template>
+            · {{ (r.state_history || []).join(' → ') }}
+          </span>
+        </span>
+        <span class="pn-tag" :class="stateTag(r.state)">{{ cn(r.state) }}</span>
+        <span class="r">{{ fmtAgo(r.created_at) }}</span>
+      </div>
+    </div>
+
+    <div class="pn-sec">
+      <div class="pn-h">按状态分布</div>
+      <div v-if="!Object.keys(byState).length" class="pn-empty">暂时没有进程状态。</div>
+      <div v-else class="pn-chips">
+        <span v-for="(n, s) in byState" :key="s" class="pn-chip">{{ cn(s) }} {{ n }}</span>
+      </div>
+    </div>
+
+    <div class="pn-note">
+      并发峰值 {{ p.sched.peak_running ?? 0 }} / 上限
+      {{ p.sched.max_concurrency ?? '未设' }}。
+      数据来自 <code>/api/scheduler/stats</code> 与 <code>/api/processes</code>。
+    </div>
+  </PanelBox>
+</template>