foxclaw 0.1.0 → 0.1.3

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

@@ -0,0 +1,292 @@
+<script setup>
+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))
+
+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
+  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,
+    now: { x: 0, y: 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;
+}
+@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;
+}
+
+.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,358 @@
+<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'
+import { profile, loadProfile, saveNickname } from '../../stores/profile.js'
+import { loadSystemInfo, system } from '../../stores/system.js'
+import { i18n, LOCALES, setLocale, t } from '../../lib/i18n.js'
+
+const info = typeof __APP_INFO__ === 'undefined' ? null : __APP_INFO__
+const sha = info?.git?.sha || 'dev'
+const age = computed(() => {
+  const ts = info?.git?.ts || 0
+  if (!ts) return t('settings.buildLocal')
+  const d = Math.floor((Date.now() - ts) / 86400000)
+  return d <= 0 ? t('settings.buildToday') : t('settings.buildDays', { n: d })
+})
+
+const open = ref('') // '' | 'model' | 'keys' —— 一次只展开一组,行数不会失控
+const up = ref(null) // null=探测中 | true | false
+const err = ref('')
+
+const cur = computed(() => currentLabel())
+const options = computed(() => modelOptions())
+
+const KEYS = computed(() => [
+  ['Enter', t('key.enter')],
+  ['Shift + Enter', t('key.shiftEnter')],
+  ['/', t('key.slash')],
+  ['@', t('key.at')],
+  ['↑ ↓', t('key.arrows')],
+  ['Esc', t('key.esc')],
+  ['Ctrl + ,', t('key.ctrlComma')],
+])
+
+const nickDraft = ref('')
+
+onMounted(() => {
+  loadModels()
+  loadSystemInfo()
+  loadProfile().then(() => { nickDraft.value = profile.nickname })
+  probe()
+})
+
+async function saveNick() {
+  try {
+    await saveNickname(nickDraft.value)
+    say(profile.nickname ? t('settings.saidNick', { name: profile.nickname }) : t('settings.saidNickCleared'))
+    open.value = ''
+  } catch (e) {
+    say(t('settings.errSaveNick', { msg: e.message }), 4000)
+  }
+}
+
+function pickLang(id) {
+  setLocale(id)
+  const name = LOCALES.find((l) => l.id === id)?.label || id
+  say(t('settings.saidLang', { name }))
+}
+
+const upd = computed(() => system.update || null)
+const updLabel = computed(() => {
+  const u = upd.value
+  if (!u) return '…'
+  if (!u.enabled) return t('settings.updNotEnabled')
+  if (u.update_available) return t('settings.updAvailable', { v: u.latest })
+  if (u.latest) return t('settings.updLatest')
+  return u.error ? t('settings.updFailed') : t('settings.updPending')
+})
+const updHint = computed(() => {
+  const u = upd.value
+  if (!u) return t('common.loading')
+  if (!u.enabled) return t('settings.updHintOff')
+  if (u.error) return t('settings.updHintError', { msg: u.error })
+  if (u.update_available) return t('settings.updHintNew', { cur: u.current, latest: u.latest })
+  return t('settings.updHintOk', { cur: u.current })
+})
+
+async function probe() {
+  up.value = null
+  try {
+    await getJSON('/status')
+    up.value = true
+  } catch {
+    up.value = false
+  }
+}
+
+async function refresh() {
+  await loadModels(true).catch(() => {})
+  loadSystemInfo(true)      // 更新状态也刷一次(后端 24h 缓存内不会真的外呼)
+  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(t('settings.saidSwitched', { label: o.label }))
+  } catch (e) {
+    err.value = e.message
+    say(t('settings.errSwitch', { msg: e.message }), 4000)
+  }
+}
+
+function mode(m) {
+  setMode(m)
+  say(m === 'stream' ? t('settings.saidStream') : t('settings.saidOrchestrate'))
+}
+
+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'],
+  globe: ['M12 3.4a8.6 8.6 0 1 0 0 17.2 8.6 8.6 0 0 0 0-17.2z', 'M3.6 12h16.8', 'M12 3.4c2.2 2.4 3.4 5.4 3.4 8.6s-1.2 6.2-3.4 8.6c-2.2-2.4-3.4-5.4-3.4-8.6s1.2-6.2 3.4-8.6z'],
+}
+
+const icon = (n) => ICONS[n] || ICONS.gear
+</script>
+
+<template>
+  <PanelBox :title="t('settings.title')" tag="Settings" state="idle" :ready="true" @refresh="refresh">
+    <div class="card">
+      <div class="grp">{{ t('settings.groupModel') }}</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>{{ t('settings.modelProvider') }}</b><span>{{ t('settings.modelProviderSub') }}</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">{{ t('settings.current') }}</span>
+          <span v-else-if="o.configured === false" class="pn-tag amber">{{ t('settings.unconfigured') }}</span>
+        </button>
+        <p class="tip">
+          {{ t('settings.providerNote') }}
+        </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>{{ t('settings.usage') }}</b><span>{{ t('settings.usageSub') }}</span></span>
+        <span class="chev">›</span>
+      </button>
+    </div>
+
+    <div class="card">
+      <div class="grp">{{ t('settings.groupChat') }}</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>{{ t('settings.mode') }}</b><span>{{ t('settings.modeSub') }}</span></span>
+        <span class="seg">
+          <button :class="{ on: chat.mode === 'stream' }" @click="mode('stream')">{{ t('settings.stream') }}</button>
+          <button :class="{ on: chat.mode === 'orchestrate' }" @click="mode('orchestrate')">{{ t('settings.orchestrate') }}</button>
+        </span>
+      </div>
+
+      <button class="row" :aria-expanded="open === 'nick'" @click="open = open === 'nick' ? '' : 'nick'">
+        <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>{{ t('settings.nickname') }}</b><span>{{ t('settings.nicknameSub') }}</span></span>
+        <span class="hint">{{ profile.nickname || t('common.notSet') }}</span>
+        <span class="chev" :class="{ open: open === 'nick' }">›</span>
+      </button>
+
+      <div v-if="open === 'nick'" class="sub">
+        <div class="nick-edit">
+          <input
+            v-model="nickDraft"
+            class="nick-in"
+            maxlength="24"
+            :placeholder="t('settings.nicknamePh')"
+            @keydown.enter.prevent="saveNick"
+          />
+          <button class="nick-save" :disabled="profile.saving" @click="saveNick">{{ t('common.save') }}</button>
+        </div>
+        <p class="tip">{{ t('settings.nicknameNote') }}</p>
+      </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>{{ t('settings.shortcuts') }}</b><span>{{ t('settings.shortcutsSub') }}</span></span>
+        <span class="hint">{{ t('common.count', { n: 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">{{ t('settings.groupUi') }}</div>
+
+      <div class="row static">
+        <span class="ic"><svg viewBox="0 0 24 24"><path v-for="(d, i) in icon('globe')" :key="i" :d="d" /></svg></span>
+        <span class="m"><b>{{ t('settings.language') }}</b><span>{{ t('settings.languageSub') }}</span></span>
+        <span class="seg">
+          <button
+            v-for="l in LOCALES"
+            :key="l.id"
+            :class="{ on: i18n.locale === l.id }"
+            @click="pickLang(l.id)"
+          >{{ l.label }}</button>
+        </span>
+      </div>
+
+      <p class="tip">{{ t('settings.languageNote') }}</p>
+    </div>
+
+    <div class="card">
+      <div class="grp">{{ t('settings.groupSystem') }}</div>
+
+      <button class="row" :title="up ? t('settings.reprobe') : t('settings.retry')" @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>{{ t('settings.backend') }}</b>
+          <span>/api · {{ up === null ? t('settings.probing') : up ? t('common.online') : t('common.offlineShort') }}</span>
+        </span>
+        <span class="pn-tag" :class="up ? 'green' : up === false ? 'amber' : ''">
+          {{ up === null ? '…' : up ? t('settings.ok') : t('settings.retry') }}
+        </span>
+      </button>
+
+      <div class="row static">
+        <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>{{ t('settings.updates') }}</b><span>{{ updHint }}</span></span>
+        <span class="pn-tag" :class="upd?.update_available ? 'amber' : ''">{{ updLabel }}</span>
+      </div>
+    </div>
+
+    <div class="foot">
+      <span class="mono">git@{{ sha }} · {{ age }}</span>
+      <span class="dev" :title="t('settings.buildLocal')">▭</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); }
+
+.nick-edit { display: flex; align-items: center; gap: 6px; padding: 4px 8px 2px; }
+.nick-in {
+  flex: 1; min-width: 0;
+  padding: 5px 8px; border-radius: 7px;
+  font-size: 12.5px; color: var(--ink);
+  background: #fff; border: 1px solid var(--line);
+}
+.nick-in:focus { outline: none; border-color: rgba(26, 157, 95, 0.5); }
+.nick-save {
+  flex-shrink: 0;
+  padding: 5px 11px; border-radius: 7px;
+  font-size: 12px; font-weight: 600; color: #fff;
+  background: var(--green);
+}
+.nick-save:disabled { opacity: 0.45; }
+
+.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>