foxclaw 0.1.2 → 0.1.3

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

@@ -1,9 +1,10 @@
 <script setup>
+import { t } from '../../lib/i18n.js'
+
 const props = defineProps({
   title: { type: String, default: '' },
   tag: { type: String, default: '' },
   state: { type: String, default: 'idle' },
-  /* 已有旧数据时,刷新不要整块闪成「加载中」 */
   ready: { type: Boolean, default: false },
 })
 defineEmits(['refresh'])
@@ -16,21 +17,19 @@ defineEmits(['refresh'])
         <h2>{{ props.title }}</h2>
         <span v-if="props.tag" class="pn-tag">{{ props.tag }}</span>
       </div>
-      <button class="rf" :class="{ spin: props.state === 'loading' }" title="重新拉取" @click="$emit('refresh')">
-        刷新
+      <button class="rf" :class="{ spin: props.state === 'loading' }" :title="t('common.refresh')" @click="$emit('refresh')">
+        {{ t('common.refresh') }}
       </button>
     </header>
     <div class="pb scroll">
-      <div v-if="props.state === 'loading' && !props.ready" class="pn-st">加载中…</div>
-      <div v-else-if="props.state === 'error'" class="pn-st err">后端未连接,这个面板暂时拉不到数据</div>
+      <div v-if="props.state === 'loading' && !props.ready" class="pn-st">{{ t('common.loading') }}</div>
+      <div v-else-if="props.state === 'error'" class="pn-st err">{{ t('common.offlinePanel') }}</div>
       <slot v-else />
     </div>
   </section>
 </template>
 
 <style scoped>
-/* min-width: 0 让面板能被父级 flex 压窄 —— 否则 flex item 的 min-width:auto 会把它按
-   min-content 撑开,窗口拉到 420px 时面板比中栏还宽,右侧内容直接落到视口外。 */
 .panel { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
 .ph {
   display: flex; align-items: center; gap: 10px; flex-shrink: 0;

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

@@ -1,6 +1,4 @@
 <script setup>
-/* 复习面板 = SM-2 账本 + 今日队列 + 遗忘曲线。
-   卡片就是知识库里的 KU(复习状态在 KU.extra.review 里),不另存一份。 */
 import { computed, onMounted, ref } from 'vue'
 import PanelBox from './PanelBox.vue'
 import {
@@ -20,10 +18,6 @@ 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
@@ -32,8 +26,6 @@ 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 = []
@@ -50,13 +42,10 @@ const curve = computed(() => {
     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 '新卡:曲线是「不复习就忘」的示意'
@@ -210,13 +199,10 @@ async function grade(g) {
   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);
@@ -269,7 +255,6 @@ async function grade(g) {
 .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;
@@ -292,7 +277,6 @@ async function grade(g) {
   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;

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

@@ -5,17 +5,18 @@ 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'
 
-/* __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 age = computed(() => {
   const ts = info?.git?.ts || 0
-  if (!ts) return '本地构建'
+  if (!ts) return t('settings.buildLocal')
   const d = Math.floor((Date.now() - ts) / 86400000)
-  return d <= 0 ? '今天' : `${d} 天前`
-})()
+  return d <= 0 ? t('settings.buildToday') : t('settings.buildDays', { n: d })
+})
 
 const open = ref('') // '' | 'model' | 'keys' —— 一次只展开一组,行数不会失控
 const up = ref(null) // null=探测中 | true | false
@@ -24,23 +25,59 @@ const err = ref('')
 const cur = computed(() => currentLabel())
 const options = computed(() => modelOptions())
 
-/* 只列真正存在的键位。ChatDock.onKey 里没有 Ctrl+Enter 收录、没有 / 之外的快捷键,
-   这里就不写 —— 设置里写一条按不出来的键,比不写更糟。 */
-const KEYS = [
-  ['Enter', '发送'],
-  ['Shift + Enter', '换行'],
-  ['/', '命令补全(如 /搜索)'],
-  ['@', '技能补全'],
-  ['↑ ↓', '在补全列表里选'],
-  ['Esc', '关闭补全 / 浮层'],
-  ['Ctrl + ,', '打开设置'],
-]
+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 {
@@ -53,6 +90,7 @@ async function probe() {
 
 async function refresh() {
   await loadModels(true).catch(() => {})
+  loadSystemInfo(true)      // 更新状态也刷一次(后端 24h 缓存内不会真的外呼)
   probe()
 }
 
@@ -64,16 +102,16 @@ async function pick(o) {
       name: o.source === 'custom' ? o.key : null,
     })
     open.value = ''
-    say(`模型已切到 ${o.label}`)
+    say(t('settings.saidSwitched', { label: o.label }))
   } catch (e) {
     err.value = e.message
-    say(`切换失败:${e.message}`, 4000)
+    say(t('settings.errSwitch', { msg: e.message }), 4000)
   }
 }
 
 function mode(m) {
   setMode(m)
-  say(m === 'stream' ? '流式:逐字输出' : '编排:先出计划再逐步执行')
+  say(m === 'stream' ? t('settings.saidStream') : t('settings.saidOrchestrate'))
 }
 
 const ICONS = {
@@ -82,19 +120,20 @@ const ICONS = {
   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="设置" tag="Settings" state="idle" :ready="true" @refresh="refresh">
+  <PanelBox :title="t('settings.title')" tag="Settings" state="idle" :ready="true" @refresh="refresh">
     <div class="card">
-      <div class="grp">模型</div>
+      <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>模型与供应商</b><span>切换后服务端立即生效,不用重启</span></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>
@@ -109,38 +148,59 @@ const icon = (n) => ICONS[n] || ICONS.gear
         >
           <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>
+          <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">
-          「未配置」= 后端缺该厂商的 Key。自定义模型的 Key / Base URL 在输入框左侧的模型胶囊里加。
+          {{ 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>使用情况</b><span>token、调用次数、余额</span></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">对话</div>
+      <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>模式</b><span>逐字流式 / 先出计划再逐步执行</span></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')">流式</button>
-          <button :class="{ on: chat.mode === 'orchestrate' }" @click="mode('orchestrate')">编排</button>
+          <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>快捷键</b><span>输入框里的键位</span></span>
-        <span class="hint">{{ KEYS.length }} 条</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>
 
@@ -153,20 +213,48 @@ const icon = (n) => ICONS[n] || ICONS.gear
     </div>
 
     <div class="card">
-      <div class="grp">系统</div>
+      <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 ? '再探一次' : '重试'" @click="probe">
+      <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>后端连接</b><span>/api · {{ up === null ? '探测中…' : up ? '在线' : '离线' }}</span></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 ? '正常' : '重试' }}
+          {{ 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="本地构建">▭</span>
+      <span class="dev" :title="t('settings.buildLocal')">▭</span>
     </div>
   </PanelBox>
 </template>
@@ -235,6 +323,22 @@ const icon = (n) => ICONS[n] || ICONS.gear
 .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;

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

@@ -10,7 +10,6 @@ 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' : ''
 }

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

@@ -44,9 +44,6 @@ async function flip(s) {
   busy.value = ''
 }
 
-/* ── 单技能测试:POST /ahs/skills/{id}/test ──
-   走真管线(权限/断路器/SSRF),所以界面要能填参数,也要把 needs_confirmation /
-   blocked / circuit_open 这些非成功态原样显示,不能只画个绿勾。 */
 const tId = ref('')
 const tArgs = ref({})
 const tBusy = ref(false)
@@ -74,7 +71,6 @@ function beginTest(s) {
   err.value = ''
 }
 
-/* params 是 {名: 类型} 的朴素 schema,类型只是提示;这里按声明做最小转换,其余原样送字符串 */
 function coerce(params, args) {
   const out = {}
   for (const [k, ty] of Object.entries(params || {})) {
@@ -133,7 +129,6 @@ async function dropSkill(s) {
 
 const splitList = (t) => String(t || '').split(/[,，\s]+/).map((s) => s.trim()).filter(Boolean)
 
-/* "city:str, days:int" → {city:"str", days:"int"} */
 function parseParams(txt) {
   const out = {}
   for (const part of String(txt || '').split(/[,，;\n]/)) {
@@ -145,7 +140,6 @@ function parseParams(txt) {
   return out
 }
 
-/* "Authorization: Bearer x" 每行一条 → dict(空行 / 无冒号行忽略) */
 function parseHeaders(txt) {
   const out = {}
   for (const line of String(txt || '').split('\n')) {
@@ -155,8 +149,6 @@ function parseHeaders(txt) {
   return out
 }
 
-/* ── 安装技能:POST /ahs/skills ──
-   后端只收 web_api / mcp;审核门 deny → 403, warn → 409 needs_ack(要再点一次「已知风险」) */
 const SIDE = { read: 'read · 只读', write: 'write · 写入', send: 'send · 代发', pay: 'pay · 付款' }
 const showIns = ref(false)
 const insBusy = ref(false)
@@ -220,8 +212,93 @@ async function doInstall(ack = false) {
   }
 }
 
-/* ── 连接器:POST|DELETE /ahs/mcp/servers ──
-   接入会真连一次 server 拉工具清单(可能几十秒);连不上是 502,原样显示 */
+const MI_MAX = 4 * 1024 * 1024
+const miOpen = ref(false)
+const miBusy = ref(false)
+const miErr = ref('')
+const miOk = ref('')
+const miAck = ref(false)
+const miText = ref('')
+const miFile = ref('')
+const miB64 = ref('')          // zip 的 base64;非空时优先于 miText
+const miRef = ref(null)
+
+function toggleMi() {
+  miOpen.value = !miOpen.value
+  miErr.value = ''
+  miOk.value = ''
+  miAck.value = false
+}
+
+function resetMi() {
+  miText.value = ''
+  miFile.value = ''
+  miB64.value = ''
+  miAck.value = false
+  if (miRef.value) miRef.value.value = ''
+}
+
+function toB64(file) {
+  return new Promise((resolve, reject) => {
+    const fr = new FileReader()
+    fr.onload = () => {
+      const s = String(fr.result || '')
+      resolve(s.slice(s.indexOf(',') + 1))     // 去掉 data:...;base64, 前缀
+    }
+    fr.onerror = () => reject(new Error('读取文件失败'))
+    fr.readAsDataURL(file)
+  })
+}
+
+async function onMiFile(ev) {
+  const f = ev.target.files && ev.target.files[0]
+  miFile.value = ''
+  miB64.value = ''
+  miErr.value = ''
+  miOk.value = ''
+  miAck.value = false
+  if (!f) return
+  miFile.value = `${f.name} · ${(f.size / 1024).toFixed(0)} KB`
+  if (f.size > MI_MAX) { miErr.value = '文件超过 4MB,拒绝上传'; return }
+  try {
+    if (/\.zip$/i.test(f.name)) {
+      miB64.value = await toB64(f)
+      miText.value = ''
+    } else {
+      miText.value = await f.text()
+    }
+  } catch (e) {
+    miErr.value = String(e.message || e)
+  }
+}
+
+async function doMdInstall(ack = false) {
+  if (miBusy.value) return
+  const content = miText.value.trim()
+  if (!ack && !content && !miB64.value) {
+    miErr.value = '粘贴 SKILL.md 正文,或选一个 .md / .zip 文件'
+    return
+  }
+  miBusy.value = true
+  miErr.value = ''
+  miOk.value = ''
+  const body = { acknowledged: ack }
+  if (miB64.value) body.package_b64 = miB64.value
+  else body.content = content
+  try {
+    const d = await postJSON('/ahs/md-skills', body)
+    const name = (d.skill && (d.skill.name || d.skill.id)) || '指令技能'
+    miOk.value = `${d.created ? '已安装' : '已更新'}「${name}」`
+    resetMi()
+    await refreshPanel('tools')
+  } catch (e) {
+    miErr.value = String(e.message || e)
+    miAck.value = !!(e.detail && e.detail.needs_ack)
+  } finally {
+    miBusy.value = false
+  }
+}
+
 const showMcpAdd = ref(false)
 const mcpBusy = ref(false)
 const mcpErr = ref('')
@@ -265,7 +342,6 @@ async function addMcp(ack = false) {
   }
 }
 
-/* 重连:server 那边的工具会变,POST .../refresh 增量对齐注册表 */
 async function refreshMcp(s) {
   if (mcpBusy.value) return
   mcpBusy.value = true
@@ -392,6 +468,43 @@ async function delMcp(s) {
       </div>
     </div>
 
+    <div class="pn-sec">
+      <div class="pn-h">
+        安装指令技能
+        <button class="mbtn" @click="toggleMi">{{ miOpen ? '收起' : '+ 上传' }}</button>
+      </div>
+      <div v-if="miOpen" class="tk-form">
+        <label class="f"><span>SKILL.md 或 OpenClaw 包(.md / .zip)</span>
+          <input ref="miRef" type="file" accept=".md,.markdown,.zip" @change="onMiFile" />
+        </label>
+        <div v-if="miFile" class="pn-note">{{ miFile }}</div>
+        <label class="f"><span>或粘贴正文(frontmatter + 指示)</span>
+          <textarea
+            v-model="miText"
+            rows="8"
+            spellcheck="false"
+            :disabled="!!miB64"
+            placeholder="--- name: my-skill / description: 什么时候用它 --- 然后写正文"
+          />
+        </label>
+        <div class="fbar">
+          <button class="go" :disabled="miBusy" @click="doMdInstall(false)">
+            {{ miBusy ? '安装中…' : '安装' }}
+          </button>
+          <button v-if="miAck" class="go warn" :disabled="miBusy" @click="doMdInstall(true)">
+            已知风险,继续安装
+          </button>
+          <span v-if="miErr" class="tip bad">{{ miErr }}</span>
+          <span v-else-if="miOk" class="tip ok">{{ miOk }}</span>
+          <span v-else class="tip dim">只取 SKILL.md 与 _meta.json;包内 scripts/ 不落地、不执行</span>
+        </div>
+      </div>
+      <div v-else class="pn-note">
+        指令技能是注入提示词的 markdown,不是可执行工具。命令行也能装:
+        <code>foxclaw skills install @owner/slug</code>、<code>github:owner/repo</code>、<code>./pkg.zip</code>。
+      </div>
+    </div>
+
     <div class="pn-sec">
       <div class="pn-h">
         安装技能
@@ -532,11 +645,6 @@ async function delMcp(s) {
         <button class="mbtn danger" @click="delMcp(s)">移除</button>
       </div>
     </div>
-
-    <div class="pn-note">
-      指令技能正文 <code>/api/ahs/md-skills/{id}</code>,执行技能运行 <code>POST /api/ahs/skills/{id}/test</code>;
-      连接器与技能面板是同一份数据(<code>/api/ahs/mcp/servers</code>)。
-    </div>
   </PanelBox>
 </template>
 
@@ -550,7 +658,6 @@ async function delMcp(s) {
 .sw.on { background: rgba(26, 157, 95, 0.12); color: var(--green); }
 .sw:disabled { opacity: 0.5; }
 
-/* 行内小按钮:测试 / 删除 / 新增 —— 原来「执行技能」整行是死的,点了没反应 */
 .mbtn {
   flex-shrink: 0; padding: 4px 10px; border-radius: var(--r-pill);
   font-size: 11px; font-family: var(--mono); color: var(--dim);
@@ -562,7 +669,6 @@ async function delMcp(s) {
 .mbtn.danger:hover { color: var(--red); border-color: rgba(229, 72, 77, 0.35); }
 .mbtn:disabled { opacity: 0.5; }
 
-/* ── 表单(安装技能 / 接入连接器 / 技能测试)── */
 .tk-form, .tk-test {
   margin: 4px 0 6px;
   padding: 11px 12px;
@@ -595,6 +701,7 @@ async function delMcp(s) {
 .f textarea { resize: vertical; line-height: 1.6; }
 .f input:focus, .f select:focus, .f textarea:focus { border-color: var(--line); background: #fff; }
 .f input::placeholder, .f textarea::placeholder { color: var(--dim); }
+.f input[type='file'] { padding: 4px 6px; font-size: 11.5px; color: var(--dim); }
 
 .chk {
   display: flex; align-items: center; gap: 6px;
@@ -622,7 +729,6 @@ async function delMcp(s) {
 .tip.ok { color: var(--green); }
 .tip.bad { color: var(--red); white-space: normal; }
 
-/* 测试结果:成功/失败都原文展示,失败(needs_confirmation/blocked)不涂成成功色 */
 .tk-res {
   margin-top: 4px; padding: 8px 10px; border-radius: var(--r-sm);
   background: rgba(23, 32, 26, 0.03); border: 1px solid var(--line-soft);

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

@@ -1,7 +1,4 @@
-/* 7 个面板共用的时间/数字格式化。集中一份,避免每个组件各写一遍还写得不一样。 */
 
-/* 后端时间戳三种形态都有:秒 float(事件总线)、毫秒 int、ISO 字符串(记忆 created_at)。
-   字符串交给 Date 自己解析,数字按量级判断。 */
 function toDate(ts) {
   if (!ts) return null
   if (typeof ts === 'string') {
@@ -41,7 +38,6 @@ export function fmtMs(ms) {
   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