foxclaw 0.1.0 → 0.1.2

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

@@ -0,0 +1,330 @@
+/* 左栏菜单 8 项的数据层。
+   一项一个 loader,内部每个端点单独 .catch —— 某个子系统挂了只让对应区块空着,
+   不让整个面板变「后端未连接」。组件只负责渲染,不各自写 fetch。 */
+import { reactive } from 'vue'
+import { getJSON, getRaw, delJSON, patchJSON, postJSON } from '../api.js'
+import { openDoc } from './app.js'
+
+const safe = (p) => p.then((v) => v, () => null)
+
+export const panels = reactive({
+  activity: { state: 'idle', events: [], traces: [], thought: null },
+  tasks: { state: 'idle', sched: {}, processes: [], procStats: {} },
+  agents: { state: 'idle', list: [], info: null },
+  tools: { state: 'idle', skills: [], md: [], breakers: {} },
+  usage: { state: 'idle', tokens: null, gateway: {}, metrics: null, slow: [] },
+  knowledge: {
+    state: 'idle', stats: {}, index: {}, sources: [], abilities: [],
+    /* 最近录入的知识单元:右栏只读前 10 条,面板看全量 */
+    recent: [], recentTotal: 0,
+    /* 录入是同步 LLM 抽取,可能几十秒 —— 状态提到 store 里,
+       切到别的面板再回来时不会以为「没提交过」 */
+    ingest: 'idle', ingestMsg: '', ingestErr: '',
+  },
+  memory: { state: 'idle', stats: {}, recent: [], prefs: [] },
+  /* SM-2 复习:stats 是全局账本,queue 是「今天这一轮要过的卡」。
+     session 放 store 是因为复习到一半点开文档再回来,不能让进度归零。 */
+  review: {
+    state: 'idle',
+    stats: { cards: 0, learned: 0, fresh: 0, due: 0, avg_mastery: 0, load7: {}, risk: [] },
+    queue: [],
+    index: 0,
+    revealed: false,
+    session: 'idle',
+    lastMsg: '',
+  },
+})
+
+const LOADERS = {
+  /* 活动 = 事件总线(系统发生了什么) + 请求链路(哪次调用慢) + 思考链健康度 */
+  async activity(p) {
+    const [bus, traces, thought] = await Promise.all([
+      safe(getJSON('/bus/history?limit=40')),
+      safe(getJSON('/traces?limit=25')),
+      safe(getJSON('/thoughtchain/supervisor/summary')),
+    ])
+    p.events = bus?.events || []
+    p.traces = (traces?.traces || []).slice().sort((a, b) => (b.duration_ms || 0) - (a.duration_ms || 0))
+    p.thought = thought
+    return !!(bus || traces || thought)
+  },
+
+  /* 任务 = 调度器记账 + 进程生命周期(后端把每个任务建模成进程) */
+  async tasks(p) {
+    const [sched, proc] = await Promise.all([
+      safe(getJSON('/scheduler/stats')),
+      safe(getJSON('/processes?limit=30')),
+    ])
+    p.sched = sched || {}
+    p.processes = proc?.processes || []
+    p.procStats = proc?.stats || {}
+    return !!(sched || proc)
+  },
+
+  /* 代理 = /api/status(全部 Agent 的 harness + 思考链) + 系统信息 */
+  async agents(p) {
+    const [all, info] = await Promise.all([
+      safe(getJSON('/status')),
+      safe(getJSON('/system/info')),
+    ])
+    p.list = all ? Object.values(all) : []
+    p.info = info
+    return !!(all || info)
+  },
+
+  /* 技能 = 内置/HTTP/MCP 技能表 + 指令技能(SKILL.md) + 熔断器 */
+  async tools(p) {
+    const [sk, md, br] = await Promise.all([
+      safe(getJSON('/ahs/skills')),
+      safe(getJSON('/ahs/md-skills')),
+      safe(getJSON('/ahs/breaker')),
+    ])
+    p.skills = sk?.skills || []
+    p.md = md?.skills || []
+    p.breakers = br?.breakers || {}
+    return !!(sk || md || br)
+  },
+
+  /* 使用情况 = token 计量 + 网关配额 + 端点延迟(p95 最慢的几条) */
+  async usage(p) {
+    const [tk, gw, mt] = await Promise.all([
+      safe(getJSON('/tokens')),
+      safe(getJSON('/gateway/stats')),
+      safe(getJSON('/metrics')),
+    ])
+    p.tokens = tk && !tk.error ? tk : null
+    p.gateway = gw || {}
+    p.metrics = mt
+    p.slow = Object.entries(mt?.endpoints || {})
+      .map(([name, v]) => ({ name, ...v }))
+      .sort((a, b) => (b.p95_ms || 0) - (a.p95_ms || 0))
+      .slice(0, 6)
+    return !!(tk || gw || mt)
+  },
+
+  /* 知识库 = HKC 根路径 /stats 与 /knowledge/sources,加 Foxclaw 侧能力清单
+     与最近录入的 KU(右栏和面板共用这一份) */
+  async knowledge(p) {
+    const [st, src, ab, rc] = await Promise.all([
+      safe(getRaw('/stats')),
+      safe(getRaw('/knowledge/sources')),
+      safe(getJSON('/knowledge/abilities')),
+      safe(getJSON('/knowledge/recent?limit=50')),
+    ])
+    p.stats = st || {}
+    p.index = st?.index_build || {}
+    p.sources = src?.sources || []
+    p.abilities = ab?.abilities || []
+    p.recent = rc?.kus || []
+    p.recentTotal = rc?.total ?? p.recent.length
+    return !!(st || src || ab || rc)
+  },
+
+  /* 复习 = SM-2 账本 + 今日队列。会话进行中只更新账本,不动队列 ——
+     否则右栏刷新一次就把当前卡片换掉了。 */
+  async review(p) {
+    const [st, q] = await Promise.all([
+      safe(getJSON('/review/stats')),
+      safe(getJSON('/review/queue?limit=20&fresh_limit=10')),
+    ])
+    if (st) p.stats = { ...p.stats, ...st }
+    if (q?.cards && p.session !== 'running') {
+      p.queue = q.cards
+      p.index = 0
+      p.revealed = false
+      if (p.session === 'done') p.session = 'idle'
+    }
+    return !!(st || q)
+  },
+
+  /* 记忆中心 = HMR 统计 + 最近记忆 + 用户偏好 */
+  async memory(p) {
+    const [st, rc, pf] = await Promise.all([
+      safe(getJSON('/memory/stats')),
+      safe(getJSON('/memory/recent?limit=12')),
+      safe(getJSON('/preferences')),
+    ])
+    p.stats = st || {}
+    p.recent = rc?.memories || []
+    p.prefs = pf?.preferences || []
+    return !!(st || rc || pf)
+  },
+}
+
+export async function loadPanel(id, force = false) {
+  const p = panels[id]
+  if (!p || !LOADERS[id]) return
+  /* 已有数据就不重拉:切换菜单来回点不重复打后端;要新数据显式刷新 */
+  if (!force && p.state !== 'idle' && p.state !== 'error') return
+  p.state = 'loading'
+  let ok = false
+  try { ok = await LOADERS[id](p) } catch { ok = false }
+  p.state = ok ? 'ok' : 'error'
+}
+
+export const refreshPanel = (id) => loadPanel(id, true)
+
+/* ── 面板内的写操作(都是真实端点,不是本地假删除) ── */
+
+/* 指令技能启停:PATCH /ahs/md-skills/{id} → 全量重拉一次保证和服务端一致 */
+export async function toggleMdSkill(id, enabled) {
+  await patchJSON(`/ahs/md-skills/${encodeURIComponent(id)}`, { enabled })
+  await refreshPanel('tools')
+}
+
+/* 录入一段短知识:POST /knowledge/ingest → KDE 抽取成 KU → KEE 演化。
+   同步 LLM 抽取,可能几十秒,所以状态挂在 store 上而不是组件里。
+   成功后**静默重拉**:走 refreshPanel 会把 state 置回 loading,整面板闪骨架,
+   而这里只想要新数据。 */
+export async function ingestKnowledge({ text, title = '', domain = '' }) {
+  const p = panels.knowledge
+  const body = (text || '').trim()
+  if (!body) throw new Error('先写点内容再收录')
+
+  p.ingest = 'busy'
+  p.ingestMsg = ''
+  p.ingestErr = ''
+  try {
+    const d = await postJSON('/knowledge/ingest', {
+      text: body,
+      source_title: (title || '').trim(),
+      domain: (domain || '').trim(),
+    })
+    const counts = Object.entries(d?.counts || {})
+      .map(([k, v]) => `${k} ${v}`)
+      .join(' · ')
+    p.ingest = 'ok'
+    const n = d?.ku_count ?? 0
+    p.ingestMsg = n
+      ? `已抽取 ${n} 条知识单元${counts ? ` · ${counts}` : ''}`
+      /* 走到这里说明 LLM 调用是成功的(全失败会 502 进 catch),只是这段文字里
+         没抽出 Concept/Fact/Claim/Entity。别提示"没配模型"误导用户去改 key。 */
+      : '模型没从这段文字里抽出知识条目 —— 试试写得更具体(谁 / 是什么 / 为什么)'
+    try { await LOADERS.knowledge(p); p.state = 'ok' } catch {}
+    return d
+  } catch (e) {
+    p.ingest = 'error'
+    p.ingestErr = String(e?.message || e)
+    throw e
+  }
+}
+
+/* ── SM-2 复习会话 ── */
+
+/* 开一轮:队列空了就先拉一次。会话状态在 store 里,点开文档再回来不丢进度。 */
+export async function startReview() {
+  const p = panels.review
+  if (!p.queue.length) await loadPanel('review', true)
+  if (!p.queue.length) return
+  p.session = 'running'
+  p.index = 0
+  p.revealed = false
+  p.lastMsg = ''
+}
+
+export function revealCard() {
+  panels.review.revealed = true
+}
+
+/* 评分 → 服务端按 SM-2 算下一次间隔 → 翻到下一张。
+   四档对应 SM-2 的 0/3/4/5:0 完全忘记(重置)、3 勉强、4 记住、5 轻松。
+   只更新账本不动队列 —— 队列是这一轮的现场。 */
+export async function gradeCard(grade) {
+  const p = panels.review
+  const card = p.queue[p.index]
+  if (!card) return null
+  const d = await postJSON('/review/grade', { ku_id: card.ku_id, grade })
+  const nd = d?.next_in_days ?? 1
+  p.lastMsg = `${card.name} → ${nd > 1 ? `${nd} 天后` : '明天'}再复习`
+  p.index += 1
+  p.revealed = false
+  if (p.index >= p.queue.length) p.session = 'done'
+  const st = await getJSON('/review/stats').catch(() => null)
+  if (st) p.stats = { ...p.stats, ...st }
+  return d
+}
+
+/* 删除一条误存的偏好:DELETE /preferences/{id} */
+export async function dropPreference(id) {
+  await delJSON(`/preferences/${encodeURIComponent(id)}`)
+  await refreshPanel('memory')
+}
+
+/* 技能 / KU 正文 → 中间舞台。kind 决定皮肤:code 走 CLI 黑底,text 走排版正文 */
+export async function openMdSkill(id) {
+  const d = await getJSON(`/ahs/md-skills/${encodeURIComponent(id)}`)
+  openDoc({
+    id: `skill:${d.id}`,
+    kind: 'text',
+    lang: 'markdown',
+    title: d.name || d.id,
+    path: `skills/${d.id}/SKILL.md`,
+    meta: `指令技能 · v${d.version || '—'} · trust ${d.trust || '—'}`,
+    content: d.body || d.description || '(正文为空)',
+  })
+}
+
+/* extra 里的业务字段逐类型不同(Fact 有 statement、Evidence 有 source、Entity 有 aliases),
+   按类型硬编码会漏;这里统一按「有值就列出来」处理,任何 KU 打开都有内容可读。 */
+const KU_FIELDS = [
+  ['statement', '陈述'],
+  ['definition', '定义'],
+  ['summary', '摘要'],
+  ['description', '描述'],
+  ['aliases', '别名'],
+  ['verifiable', '可验证'],
+  ['source', '来源'],
+  ['source_type', '来源类型'],
+  ['author', '作者'],
+  ['year', '年份'],
+  ['page', '页码'],
+  ['quote', '原文引用'],
+  ['supports', '支持'],
+  ['contradicts', '矛盾'],
+]
+
+const kuVal = (v) => {
+  if (Array.isArray(v)) return v.length ? v.join('、') : ''
+  if (typeof v === 'boolean') return v ? '是' : '否'
+  return v === 0 || v === '' || v == null ? '' : String(v)
+}
+
+/* 单个 KU 的正文 → 中间舞台。走 HKC 根路径 /knowledge/ku/{id}
+   (那条路径带 source_text,列表/图谱的响应为了瘦身把它剔掉了) */
+export async function openKu(id) {
+  const d = await getRaw(`/knowledge/ku/${encodeURIComponent(id)}`)
+  const extra = d.extra || {}
+
+  const rows = KU_FIELDS
+    .map(([k, label]) => [label, kuVal(extra[k])])
+    .filter(([, v]) => v)
+  /* statement 已经在标题下一行重复过一次,正文里不再复读 */
+  const body = rows.filter(([, v]) => v !== d.summary && v !== d.name)
+
+  const parts = []
+  if (body.length) parts.push(body.map(([k, v]) => `- **${k}**: ${v}`).join('\n'))
+  if (extra.source_text) parts.push(`### 出处原文\n\n${extra.source_text}`)
+
+  openDoc({
+    id: `ku:${d.ku_id}`,
+    kind: 'text',
+    lang: 'markdown',
+    title: d.name || d.ku_id,
+    path: `knowledge/${d.ku_type}/${d.ku_id}`,
+    meta: `${d.ku_type} · ${d.domain || '未分域'} · 置信度 ${Math.round((d.confidence || 0) * 100)}%`,
+    content: parts.join('\n\n') || '这条知识单元没有附带正文,只有一个名称。',
+  })
+}
+
+export async function openTokenReport() {
+  const d = await getJSON('/tokens/report')
+  openDoc({
+    id: 'token-report',
+    kind: 'code',
+    lang: 'text',
+    title: 'token-report',
+    path: 'foxclaw/api/routes/system.py',
+    meta: 'Token 消耗报告 · 实时生成',
+    content: d.report || '(暂无报告)',
+  })
+}

package/python/frontend_src/src/styles/base.css

@@ -0,0 +1,138 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body, #app { height: 100%; }
+body {
+  font-family: var(--font);
+  color: var(--ink);
+  background: var(--g-right);
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+button { font-family: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
+input, textarea { font-family: inherit; border: 0; background: none; color: inherit; outline: none; }
+em { font-style: normal; }
+
+.app { height: 100vh; display: grid; grid-template-rows: 56px 1fr; min-height: 0; }
+
+/* ═══ 三栏:一条色带 + 三片玻璃膜 ═══ */
+.workspace {
+  --rail-w: 344px;
+  display: grid;
+  grid-template-columns: 296px minmax(0, 1fr) var(--rail-w);
+  gap: var(--gap);
+  padding: var(--pad);
+  min-height: 0;
+  background: var(--band);
+  transition: grid-template-columns 0.24s ease;
+}
+.workspace.is-collapsed { --rail-w: 0px; }
+
+.col {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  border-radius: var(--r-card);
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  background: var(--veil-left);
+  -webkit-backdrop-filter: blur(16px) saturate(150%);
+  backdrop-filter: blur(16px) saturate(150%);
+  box-shadow: var(--sh-card);
+  overflow: hidden;
+}
+.col--mid { background: var(--veil-mid); }
+.col--right {
+  /* 右栏是纸的那一块,和中间的淡绿形成对比 */
+  background: var(--right-panel);
+  /* 暖纸面上换一套墨色:同一条 --ink/--dim/--faint 变量,右栏内部所有组件
+     (Inspector / QuickIngest / 文档大纲)自动跟着变,不用逐个改色值。 */
+  --ink: var(--w-ink);
+  --dim: var(--w-dim);
+  --faint: var(--w-faint);
+  --line: var(--w-line);
+  --line-soft: var(--w-line-soft);
+  --surface-2: var(--w-surface-2);
+  --surface-3: var(--w-surface-3);
+  transition: opacity 0.18s ease;
+}
+/* 滚动条也换暖灰,否则绿灰的滑块压在纸面上像贴错了一张 */
+.col--right .scroll::-webkit-scrollbar-thumb { background: rgba(64, 50, 32, 0.16); }
+.workspace.is-collapsed .col--right { opacity: 0; pointer-events: none; }
+
+/* 中间栏:上方舞台 + 底部指令条
+   columns 必须显式 minmax(0,1fr):grid 默认列宽是 auto,子项的 min-content(面板里
+   不换行的行内标签/按钮)会把列撑到比栏还宽 —— 420px 窗口实测栏 128px、内容 372px,
+   右侧整块被视口裁掉(技能行的「测试」「删除」根本点不到)。 */
+.mid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+/* 滚动区 */
+.scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
+.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
+.scroll::-webkit-scrollbar-thumb { background: rgba(23, 32, 26, 0.14); border-radius: 99px; }
+.scroll::-webkit-scrollbar-track { background: transparent; }
+
+.empty {
+  padding: 28px 12px;
+  text-align: center;
+  font-size: 12.5px;
+  color: var(--faint);
+  line-height: 1.7;
+}
+
+.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
+
+/* 右栏收合后的拉手 */
+.rail-handle {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: var(--z-menu);
+  padding: 16px 6px;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--dim);
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid var(--line);
+  border-right: 0;
+  border-radius: 12px 0 0 12px;
+  box-shadow: var(--sh-card);
+  writing-mode: vertical-rl;
+}
+.rail-handle:hover { color: var(--ink); }
+
+@media (prefers-reduced-motion: reduce) {
+  .workspace, .col--right { transition: none; }
+}
+
+/* 窄窗(<1180):右栏从「第三列」改成覆盖式抽屉。
+   三栏时中栏被压到 252px(900px 窗口实测),扣掉 ＋ 与模型胶囊,textarea 只剩 115px,
+   基本没法打字。抽屉默认收起(App.vue 里按同一断点自动设 railOpen=false),
+   点右侧「检视」拉手展开,盖在中栏上而不是把正文列切走。 */
+@media (max-width: 1180px) {
+  .workspace { grid-template-columns: 248px minmax(0, 1fr); }
+
+  .col--right {
+    position: fixed;
+    top: calc(56px + var(--pad));
+    right: var(--pad);
+    bottom: var(--pad);
+    width: 344px;
+    z-index: 60;
+    box-shadow: var(--sh-pop);
+    transition: transform 0.2s ease, opacity 0.18s ease;
+  }
+  .workspace.is-collapsed .col--right { transform: translateX(calc(100% + var(--pad))); }
+}
+
+/* 抽屉展开时的遮罩:点空白处收起 */
+.rail-scrim {
+  position: fixed;
+  inset: 56px 0 0;
+  z-index: 59;
+  background: rgba(23, 32, 26, 0.16);
+}

package/python/frontend_src/src/styles/panel.css

@@ -0,0 +1,117 @@
+/* ── 菜单面板通用样式 ─────────────────────────────────────────
+   7 个模块面板共用一套「KPI 卡 + 行列表 + 区块标题」的骨架,
+   避免每个组件复制一遍同样的 CSS 又各偏几个像素。 */
+
+.pn-sec { margin-bottom: 18px; }
+.pn-sec:last-child { margin-bottom: 0; }
+
+.pn-h {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em;
+  color: var(--dim); text-transform: uppercase;
+}
+/* 标签本身大写,但 em 里的值是状态名/版本,不能被 uppercase 改样 */
+.pn-h em {
+  font-style: normal; font-family: var(--mono);
+  font-size: 11.5px; font-weight: 700; color: var(--ink); text-transform: none;
+}
+
+/* 用 flex 而不是 grid:换行后的最后一行也会等分铺满,
+   grid 的 auto-fit 会让落单的那个卡停在窄宽度上 */
+.pn-kpi {
+  display: flex; flex-wrap: wrap;
+  gap: 8px; margin-bottom: 16px;
+}
+.pn-kpi > div {
+  flex: 1 1 104px;
+  padding: 10px 11px; border-radius: var(--r-sm);
+  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid var(--line-soft);
+}
+.pn-kpi b {
+  display: block; font-size: 18px; font-weight: 650;
+  letter-spacing: -0.02em; line-height: 1.25;
+}
+.pn-kpi span { font-size: 11.5px; font-weight: 500; color: var(--dim); }
+
+.pn-row {
+  width: 100%; text-align: left;
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 10px; border-radius: var(--r-sm);
+  border: 1px solid transparent;
+  transition: background 0.14s, border-color 0.14s;
+}
+.pn-row + .pn-row { margin-top: 2px; }
+.pn-row:hover { background: rgba(255, 255, 255, 0.72); }
+.pn-row.clickable:hover { border-color: var(--line); background: #fff; }
+.pn-row .m { flex: 1; min-width: 0; }
+.pn-row b {
+  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.pn-row span.s { display: block; margin-top: 2px; font-size: 11.5px; color: var(--dim); }
+.pn-row .r { flex-shrink: 0; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
+
+.pn-tag {
+  display: inline-block; flex-shrink: 0;
+  padding: 3px 8px; border-radius: var(--r-pill);
+  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
+  background: var(--surface-2); color: var(--dim);
+}
+.pn-tag.green { background: rgba(26, 157, 95, 0.12); color: var(--green); }
+.pn-tag.amber { background: rgba(199, 116, 0, 0.13); color: var(--amber); }
+.pn-tag.red { background: rgba(229, 72, 77, 0.12); color: var(--red); }
+
+.pn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.pn-chip {
+  padding: 5px 10px; border-radius: var(--r-pill);
+  font-family: var(--mono); font-size: 11.5px; color: var(--dim);
+  background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line-soft);
+  transition: color 0.13s, border-color 0.13s, background 0.13s;
+}
+/* 可点的 chip(能力清单):原来全是 <span>,点了没反应 */
+button.pn-chip:hover {
+  color: var(--green); background: #fff;
+  border-color: rgba(26, 157, 95, 0.35);
+}
+button.pn-chip.on {
+  color: var(--green); background: rgba(26, 157, 95, 0.1);
+  border-color: rgba(26, 157, 95, 0.4);
+}
+.pn-chip.warn {
+  color: var(--amber); background: rgba(199, 116, 0, 0.09);
+  border-color: rgba(199, 116, 0, 0.24);
+}
+
+.pn-empty {
+  padding: 16px 12px; border-radius: var(--r-sm);
+  font-size: 12px; line-height: 1.7; color: var(--dim);
+  background: rgba(255, 255, 255, 0.6); border: 1px dashed var(--line);
+}
+.pn-st { padding: 14px 4px; font-size: 12px; color: var(--dim); }
+.pn-st.err { color: var(--amber); }
+
+/* 两列布局:宽屏时让列表不拉成一条长带。
+   断点必须看「面板容器宽度」而不是视口 —— 中栏只占视口一半宽,
+   1440 的窗口里中栏也只有 ~560px,按视口判断会永远两列挤成两条窄条。 */
+.pn-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
+.panel > .pb { container-type: inline-size; }
+@container (max-width: 660px) {
+  .pn-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
+}
+/* 极窄(窗口拉到四五百像素、中栏只剩一百多):行内「名字 + 信任标签 + 按钮」横向放不下,
+   flex-shrink:0 的标签会把名字挤成几个字。改成名字独占一行、标签与按钮折到第二行。 */
+@container (max-width: 300px) {
+  .pn-row { flex-wrap: wrap; row-gap: 6px; }
+  .pn-row .m { flex: 1 1 100%; }
+  .pn-h { flex-wrap: wrap; gap: 6px; }
+  .pn-kpi > div { flex: 1 1 76px; }
+}
+
+.pn-note {
+  font-size: 11.5px; line-height: 1.65; color: var(--dim);
+  padding: 8px 10px; border-radius: var(--r-sm);
+  background: rgba(255, 255, 255, 0.6); border: 1px solid var(--line-soft);
+}
+.pn-note code { font-family: var(--mono); font-size: 11px; color: var(--ink); word-break: break-all; }

package/python/frontend_src/src/styles/tokens.css

@@ -0,0 +1,78 @@
+:root {
+  /* ── 三栏相邻色带:左淡绿(深) → 中淡绿(浅) → 右暖纸 ──
+     只在 .workspace 上铺「一条」渐变,三栏底色透明。
+     若每栏各写一个渐变,接缝处必然断层 —— 一条色带切三段才是真正的"相邻色"。
+     色带右端跟右栏取同一个暖纸色,否则右栏卡片与它周围 14px 的缝会两种白。 */
+  --g-left: #d7e8d0;
+  --g-mid: #eef7e8;
+  --g-right: #f8f3e9;
+  --band: linear-gradient(100deg, var(--g-left) 0%, var(--g-mid) 46%, var(--g-right) 100%);
+
+  /* 栏面玻璃膜:左最薄 → 右最厚,强化「浅 → 更浅」的层次感 */
+  --veil-left: rgba(255, 255, 255, 0.28);
+  --veil-mid: rgba(236, 246, 228, 0.9);
+  --veil-right: rgba(251, 247, 239, 0.92);
+
+  /* 中间主舞台:淡绿;右栏:暖纸 —— 主体是绿的那一块 */
+  --mid-panel: rgba(238, 247, 232, 0.95);
+  --right-panel: #fbf7ef;
+
+  /* 文字 / 分隔线(带一点绿调的墨色,避免暖灰与淡绿打架)
+     三档都过 WCAG AA 4.5:1(底色 #eef7e8 / #fbf7ef 上实测):
+     ink 13:1、dim 8.4:1、faint 4.7:1。
+     原来的 faint #9aa79b 只有 2.4:1 —— 提示文字、计数、二次说明在
+     淡绿底上几乎要凑近看,用户反馈「看不清」。别再往浅了调。 */
+  --ink: #17201a;
+  --dim: #3f4c42;
+  --faint: #65716a;
+  --line: rgba(23, 32, 26, 0.1);
+  --line-soft: rgba(23, 32, 26, 0.06);
+
+  /* ── 右栏的暖墨色(取自 OpenClaw 右栏:纸面底 + 炭墨字 + 极淡暖线) ──
+     只由 .col--right 覆写进去,左/中的绿调墨色不受影响 —— 两个色系各自成套,
+     不要混着用,否则绿灰的浅字压在暖纸上会发脏。 */
+  --w-ink: #211d17;
+  --w-dim: #4a4237;
+  --w-faint: #776d5c;
+  --w-line: rgba(64, 50, 32, 0.12);
+  --w-line-soft: rgba(64, 50, 32, 0.06);
+  --w-surface-2: #f3ede1;
+  --w-surface-3: #e9e1d2;
+
+  /* 强调与状态 */
+  --accent: #0a84ff;
+  --accent-soft: rgba(10, 132, 255, 0.1);
+  --green: #1a9d5f;
+  --amber: #c77400;
+  --red: #e5484d;
+
+  /* 栏内白卡 */
+  --surface: #ffffff;
+  --surface-2: #f1f4ef;
+  --surface-3: #e4eae2;
+  --r-card: 20px;
+  --r-mid: 14px;
+  --r-sm: 10px;
+  --r-pill: 999px;
+  --sh-card: 0 1px 2px rgba(23, 32, 26, 0.04), 0 10px 26px rgba(23, 32, 26, 0.07);
+  --sh-pop: 0 14px 40px rgba(23, 32, 26, 0.18), 0 2px 10px rgba(23, 32, 26, 0.08);
+  --gap: 14px;
+  --pad: 14px;
+
+  /* ── CLI 皮肤:只给「代码正文块」用,不给整栏用 ──
+     整栏反黑会跟三栏渐变链断裂,而且常在的进度面板也得跟着暗,得不偿失。 */
+  --cli-bg: #11160f;
+  --cli-bg-2: #0b0f0a;
+  --cli-ink: #d9e6d2;
+  --cli-dim: #849480;
+  --cli-line: rgba(255, 255, 255, 0.07);
+  --cli-acc: #7fe08c;
+  --cli-warn: #e2c07a;
+
+  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Cascadia Code", Consolas, monospace;
+  --serif: "Songti SC", "Noto Serif SC", Georgia, serif;
+
+  --z-menu: 100;
+  --z-top: 500;
+}