foxclaw 0.1.0 → 0.1.2

package/python/frontend_src/src/components/ModelPicker.vue

@@ -0,0 +1,355 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import {
+  addCustom, currentLabel, getCustom, loadModels, model, removeCustom, selectModel,
+  testModel, updateCustom,
+} from '../stores/model.js'
+import { say } from '../stores/chat.js'
+
+const open = ref(false)
+const root = ref(null)
+const form = ref(null)
+const busy = ref(false)
+const cur = computed(currentLabel)
+
+onMounted(loadModels)
+
+function toggle() {
+  open.value = !open.value
+  if (open.value) {
+    form.value = null
+    loadModels(true)
+  }
+}
+
+function onDocDown(e) {
+  if (root.value && !root.value.contains(e.target)) open.value = false
+}
+onMounted(() => document.addEventListener('mousedown', onDocDown, true))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocDown, true))
+
+async function pick(payload) {
+  if (busy.value) return
+  busy.value = true
+  try {
+    await selectModel(payload)
+    open.value = false
+    say(`已切换到 ${currentLabel().name}`)
+  } catch (e) {
+    say(`切换失败:${e.message}`)
+  } finally {
+    busy.value = false
+  }
+}
+
+function startAdd() {
+  form.value = { edit: false, name: '', base_url: '', api_key: '', model: '', note: '' }
+}
+
+/* 编辑:先 GET 详情预填(key 只回 has_key,输入框留空 = 保留原值,后端语义一致) */
+async function startEdit(m) {
+  busy.value = true
+  try {
+    const d = await getCustom(m.name)
+    form.value = {
+      edit: true, original: d.name || m.name, name: d.name || m.name,
+      base_url: d.base_url || '', api_key: '', model: d.model || '', note: d.note || '',
+      has_key: !!d.has_key,
+    }
+  } catch (e) {
+    say(`读取失败:${e.message}`)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function submit() {
+  const f = form.value
+  if (!f.name.trim() || !f.base_url.trim() || !f.model.trim()) {
+    return say('名称 / Base URL / 模型 ID 都必填')
+  }
+  if (!f.edit && !f.api_key.trim()) return say('Key 必填')
+  busy.value = true
+  try {
+    if (f.edit) {
+      const payload = { base_url: f.base_url.trim(), model: f.model.trim(), note: f.note || '' }
+      if (f.api_key.trim()) payload.api_key = f.api_key.trim()
+      await updateCustom(f.original, payload)
+      say('已保存修改')
+    } else {
+      await addCustom({
+        name: f.name.trim(), base_url: f.base_url.trim(),
+        api_key: f.api_key.trim(), model: f.model.trim(), note: f.note || '',
+      })
+      say('已添加自定义模型')
+    }
+    form.value = null
+  } catch (e) {
+    say(`${f.edit ? '保存' : '添加'}失败:${e.message}`)
+  } finally {
+    busy.value = false
+  }
+}
+
+/* 连通性测试:POST /llm/test,后端失败也返回 200 + {ok:false,error},原样显示原因 */
+const tState = ref('idle')   // idle | busy | ok | err
+const tKey = ref('')
+const tMsg = ref('')
+
+async function test(source, key) {
+  if (tState.value === 'busy') return
+  tState.value = 'busy'
+  tKey.value = `${source}:${key || ''}`
+  tMsg.value = ''
+  try {
+    const d = source === 'custom'
+      ? await testModel({ source: 'custom', name: key })
+      : await testModel({ source: 'preset', provider: key })
+    if (d.ok) {
+      tState.value = 'ok'
+      tMsg.value = `${d.latency_ms ?? '?'}ms · ${d.model || key}${d.reply ? ` · ${String(d.reply).slice(0, 40)}` : ''}`
+    } else {
+      tState.value = 'err'
+      tMsg.value = d.error || '测试失败'
+    }
+  } catch (e) {
+    tState.value = 'err'
+    tMsg.value = String(e.message || e)
+  }
+}
+
+async function del(m) {
+  if (!confirm(`删除自定义模型「${m.name}」?`)) return
+  try {
+    await removeCustom(m.name)
+    say('已删除')
+  } catch (e) {
+    say(`删除失败:${e.message}`)
+  }
+}
+
+function isCur(source, key) {
+  const c = model.current
+  if (!c) return source === 'auto'
+  if (c.source !== source) return false
+  return source === 'preset' ? c.provider === key : c.name === key
+}
+</script>
+
+<template>
+  <div ref="root" class="mp">
+    <button class="pill" :class="{ on: open }" :title="`当前模型:${cur.sub}`" @click="toggle">
+      <span class="dot" :style="{ background: cur.color, boxShadow: `0 0 6px ${cur.color}` }" />
+      <span class="nm">{{ cur.name }}</span>
+      <span class="caret">▾</span>
+    </button>
+
+    <div v-if="open" class="pop">
+      <template v-if="!form">
+        <button class="it" :class="{ on: isCur('auto') }" @click="pick({ source: 'auto' })">
+          <span class="dot" style="background: #7e93b8" />
+          <span class="tx"><b>Auto</b><span>跟随 .env 默认</span></span>
+          <span v-if="isCur('auto')" class="tg">当前</span>
+        </button>
+
+        <div class="sep">预置</div>
+        <div v-if="model.state === 'loading'" class="empty">加载中…</div>
+        <div v-else-if="model.state === 'error'" class="empty">读取失败:{{ model.err }}</div>
+        <div
+          v-for="p in model.providers"
+          v-else
+          :key="p.provider"
+          class="it"
+          :class="{ on: isCur('preset', p.provider), dis: !p.configured }"
+        >
+          <span class="dot" :style="{ background: p.color, boxShadow: `0 0 6px ${p.color}` }" />
+          <button
+            class="tx plain"
+            @click="p.configured ? pick({ source: 'preset', provider: p.provider }) : say(`${p.provider} 未在 .env 配置 Key`)"
+          >
+            <b>{{ p.label }}</b><span>{{ p.provider }}</span>
+          </button>
+          <span v-if="isCur('preset', p.provider)" class="tg">当前</span>
+          <span v-else-if="!p.configured" class="tg warn">未配置</span>
+          <button
+            class="x"
+            :disabled="!p.configured || tState === 'busy'"
+            title="连通性测试"
+            @click.stop="test('preset', p.provider)"
+          >
+            {{ tState === 'busy' && tKey === `preset:${p.provider}` ? '…' : '测' }}
+          </button>
+        </div>
+
+        <template v-if="model.custom.length">
+          <div class="sep">自定义</div>
+          <div v-for="m in model.custom" :key="m.name" class="it" :class="{ on: isCur('custom', m.name) }">
+            <span class="dot" style="background: #a78bfa; box-shadow: 0 0 6px #a78bfa" />
+            <button class="tx plain" @click="pick({ source: 'custom', name: m.name })">
+              <b>{{ m.name }}</b>
+              <span>{{ m.model }}<template v-if="m.note"> · {{ m.note }}</template></span>
+            </button>
+            <span v-if="isCur('custom', m.name)" class="tg">当前</span>
+            <button
+              class="x"
+              :disabled="tState === 'busy'"
+              title="连通性测试"
+              @click.stop="test('custom', m.name)"
+            >
+              {{ tState === 'busy' && tKey === `custom:${m.name}` ? '…' : '测' }}
+            </button>
+            <button class="x" title="编辑" @click.stop="startEdit(m)">编</button>
+            <span class="x" title="删除" @click="del(m)">✕</span>
+          </div>
+        </template>
+
+        <div v-if="tState === 'busy'" class="tres">测试中…</div>
+        <div v-else-if="tMsg" class="tres" :class="tState">
+          {{ tState === 'ok' ? '✓' : '✕' }} {{ tMsg }}
+        </div>
+
+        <div class="foot">
+          <button class="fbtn" @click="startAdd">＋ 添加自定义模型</button>
+          <button class="fbtn" title="重新读取" @click="loadModels(true)">⟳</button>
+        </div>
+      </template>
+
+      <form v-else class="form" @submit.prevent="submit">
+        <div class="fhead">
+          {{ form.edit ? '编辑自定义模型' : '添加自定义模型' }}
+          <span class="x" @click="form = null">✕</span>
+        </div>
+        <label>名称
+          <input v-model="form.name" :disabled="form.edit" placeholder="我的 DeepSeek" />
+        </label>
+        <label>Base URL<input v-model="form.base_url" placeholder="https://api.deepseek.com/v1" /></label>
+        <label>API Key
+          <input
+            v-model="form.api_key"
+            type="password"
+            :placeholder="form.edit ? (form.has_key ? '留空 = 保留原 Key' : '尚未设置,请填写') : 'sk-…'"
+          />
+        </label>
+        <label>模型 ID<input v-model="form.model" placeholder="deepseek-chat" /></label>
+        <label>备注<input v-model="form.note" placeholder="可选:这个模型用在哪 / 限速多少" /></label>
+        <button class="submit" :disabled="busy">
+          {{ busy ? '保存中…' : (form.edit ? '保存修改' : '保存并保持未选中') }}
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mp { position: relative; flex-shrink: 0; }
+
+.pill {
+  display: flex; align-items: center; gap: 5px;
+  padding: 5px 9px; border-radius: var(--r-pill);
+  font-size: 12px; font-weight: 600; color: var(--ink);
+  background: var(--surface-2);
+  max-width: 150px;
+  transition: background 0.15s, color 0.15s;
+}
+.pill:hover, .pill.on { background: var(--surface-3); color: var(--ink); }
+.pill .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
+.pill .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pill .caret { font-size: 10px; color: var(--dim); }
+
+.pop {
+  position: absolute; left: 0; bottom: calc(100% + 8px);
+  z-index: var(--z-menu);
+  width: 272px; max-height: 54vh;
+  display: flex; flex-direction: column;
+  padding: 6px;
+  border-radius: var(--r-mid);
+  background: rgba(255, 255, 255, 0.92);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  backdrop-filter: blur(24px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow: var(--sh-pop);
+  overflow-y: auto;
+  animation: mp-in 0.15s ease;
+}
+@keyframes mp-in { from { opacity: 0; transform: translateY(5px); } }
+
+.it {
+  width: 100%;
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 7px; border-radius: var(--r-sm);
+  text-align: left;
+  transition: background 0.13s;
+}
+.it:hover { background: var(--surface-2); }
+.it.on { background: var(--accent-soft); }
+.it.dis { opacity: 0.55; }
+.it .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.it .tx { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
+.it .tx b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.it .tx span { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.it .tx.plain { background: none; padding: 0; }
+.tg {
+  flex-shrink: 0; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: var(--r-pill);
+  color: var(--accent); background: rgba(26, 157, 95, 0.13);
+}
+.tg.warn { color: var(--amber); background: rgba(200, 140, 40, 0.13); }
+.it .x { flex-shrink: 0; font-size: 11px; color: var(--dim); padding: 2px 4px; }
+.it .x:hover { color: var(--red); }
+/* 测 / 编 是 button,去掉按钮底框,和 ✕ 同一个观感 */
+button.x { background: none; border: 0; font-family: inherit; cursor: pointer; }
+button.x:hover:not(:disabled) { color: var(--accent); }
+button.x:disabled { opacity: 0.4; cursor: default; }
+
+/* 连通性测试结果条:失败原因原样显示(常见是 key 错 / base_url 多一层 /v1) */
+.tres {
+  margin-top: 5px; padding: 7px 9px; border-radius: var(--r-sm);
+  font-size: 11.5px; line-height: 1.55; color: var(--dim);
+  background: var(--surface-2);
+  overflow-wrap: anywhere;
+}
+.tres.ok { color: var(--green); background: rgba(26, 157, 95, 0.08); }
+.tres.err { color: var(--red); background: rgba(229, 72, 77, 0.07); }
+
+.sep {
+  padding: 9px 7px 4px;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
+  color: var(--dim); text-transform: uppercase;
+}
+.empty { padding: 10px 7px; font-size: 12px; color: var(--dim); }
+
+/* 列表可能长到滚出视口,底部两个按钮必须常驻可点 */
+.foot {
+  position: sticky; bottom: -6px;
+  display: flex; gap: 5px;
+  padding: 6px 4px 4px; margin-top: 5px;
+  border-top: 1px solid var(--line-soft);
+  background: rgba(255, 255, 255, 0.96);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+.fbtn {
+  flex: 1; padding: 7px; border-radius: var(--r-sm);
+  font-size: 12px; font-weight: 600; color: var(--dim);
+  background: var(--surface-2);
+}
+.fbtn:hover { color: var(--ink); background: var(--surface-3); }
+
+.form { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
+.fhead {
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: 12.5px; font-weight: 700; padding: 2px 3px 4px;
+}
+.fhead .x { cursor: pointer; color: var(--dim); font-size: 12px; }
+.form label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--dim); }
+.form input {
+  padding: 6px 8px; border-radius: 7px; font-size: 12px;
+  background: #fff; border: 1px solid var(--line);
+}
+.form input:focus { border-color: rgba(26, 157, 95, 0.45); }
+.form input:disabled { color: var(--faint); background: var(--surface-2); }
+.submit {
+  margin-top: 3px; padding: 7px; border-radius: var(--r-sm);
+  font-size: 12px; font-weight: 600; color: #fff; background: var(--green);
+}
+.submit:disabled { opacity: 0.6; }
+</style>

package/python/frontend_src/src/components/QuickIngest.vue

@@ -0,0 +1,118 @@
+<script setup>
+/* 右栏上部的紧凑录入口。
+   和知识库面板里那个是同一个 store 写操作(ingestKnowledge),
+   区别只是这里只留「写一句 + 收录」,标题可填可不填 —— 右栏宽度放不下
+   标题/领域两行输入,而随手记的时候本来也不需要它们。 */
+import { computed, ref, onUnmounted } from 'vue'
+import { panels, ingestKnowledge } from '../stores/panels.js'
+
+const kp = panels.knowledge
+const draft = ref('')
+const title = ref('')
+let timer = null
+
+const busy = computed(() => kp.ingest === 'busy')
+const msg = computed(() =>
+  busy.value ? '抽取中,可能要几十秒…' : (kp.ingestErr || kp.ingestMsg)
+)
+const kind = computed(() => (busy.value ? 'busy' : kp.ingestErr ? 'err' : 'ok'))
+
+function clearLater() {
+  clearTimeout(timer)
+  timer = setTimeout(() => { kp.ingest = 'idle'; kp.ingestMsg = ''; kp.ingestErr = '' }, 8000)
+}
+
+async function go() {
+  const text = draft.value.trim()
+  if (busy.value || !text) return
+  draft.value = ''
+  try {
+    await ingestKnowledge({ text, title: title.value })
+    title.value = ''
+  } catch {
+    /* 失败原因已经在 kp.ingestErr 里,这里不用再抛 */
+  }
+  clearLater()
+}
+
+onUnmounted(() => clearTimeout(timer))
+</script>
+
+<template>
+  <section class="qi">
+    <div class="qi-h">
+      收录知识 <em>短知识 · 长文档走知识星球</em>
+    </div>
+    <textarea
+      v-model="draft"
+      class="qi-ta"
+      rows="2"
+      placeholder="写一句就算一条,Ctrl+Enter 收录"
+      @keydown.ctrl.enter.prevent="go"
+    />
+    <div class="qi-b">
+      <input v-model="title" class="qi-title" placeholder="标题(可选)" />
+      <button class="qi-go" :disabled="busy || !draft.trim()" @click="go">
+        {{ busy ? '抽取中…' : '收录' }}
+      </button>
+    </div>
+    <div v-if="msg" class="qi-msg" :class="kind">{{ msg }}</div>
+  </section>
+</template>
+
+<style scoped>
+/* 挂在右栏 .body 里(body 已有 12px 内边距),这里只管垂直节奏 */
+.qi {
+  padding: 0 0 10px;
+  margin-bottom: 14px;
+  border-bottom: 1px solid var(--line-soft);
+}
+.qi-h {
+  display: flex; align-items: baseline; gap: 6px;
+  margin-bottom: 7px;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
+  text-transform: uppercase; color: var(--dim);
+}
+.qi-h em {
+  font-style: normal; font-weight: 500; letter-spacing: 0;
+  text-transform: none; font-size: 11px; color: var(--dim);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.qi-ta {
+  display: block; width: 100%; box-sizing: border-box;
+  resize: vertical; min-height: 46px; max-height: 140px;
+  padding: 7px 9px; border-radius: var(--r-sm);
+  font-family: var(--sans); font-size: 12.5px; line-height: 1.6;
+  color: var(--ink); background: #fff;
+  border: 1px solid var(--line);
+  transition: border-color 0.15s;
+}
+.qi-ta::placeholder { color: var(--dim); }
+.qi-ta:focus { outline: none; border-color: rgba(26, 157, 95, 0.42); }
+.qi-b { display: flex; gap: 6px; margin-top: 6px; }
+.qi-title {
+  flex: 1 1 auto; min-width: 0;
+  padding: 5px 8px; border-radius: var(--r-pill);
+  font-size: 11.5px; color: var(--ink);
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid var(--line);
+}
+.qi-title::placeholder { color: var(--dim); }
+.qi-title:focus { outline: none; border-color: rgba(26, 157, 95, 0.35); }
+.qi-go {
+  flex-shrink: 0;
+  padding: 6px 13px; border-radius: var(--r-pill);
+  font-size: 11.5px; font-weight: 600; color: #fff;
+  background: var(--green);
+  border: 1px solid var(--green);
+  transition: opacity 0.15s;
+}
+.qi-go:disabled {
+  background: rgba(23, 32, 26, 0.07); color: var(--dim);
+  border-color: var(--line);
+}
+.qi-msg { margin-top: 6px; font-size: 11px; line-height: 1.5; }
+.qi-msg.ok { color: var(--green); }
+.qi-msg.busy { color: var(--dim); }
+.qi-msg.err { color: #b4453c; }
+</style>

package/python/frontend_src/src/components/Stage.vue

@@ -0,0 +1,226 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import DocViewer from './DocViewer.vue'
+import MessageStream from './MessageStream.vue'
+import ActivityPanel from './panels/ActivityPanel.vue'
+import TasksPanel from './panels/TasksPanel.vue'
+import AgentsPanel from './panels/AgentsPanel.vue'
+import ToolsPanel from './panels/ToolsPanel.vue'
+import UsagePanel from './panels/UsagePanel.vue'
+import KnowledgePanel from './panels/KnowledgePanel.vue'
+import ReviewPanel from './panels/ReviewPanel.vue'
+import MemoryPanel from './panels/MemoryPanel.vue'
+import SettingsPanel from './panels/SettingsPanel.vue'
+import { chat, loadSession, send } from '../stores/chat.js'
+import { state, moduleLabel, closeDoc, loadSessions, openSession } from '../stores/app.js'
+import { openKu } from '../stores/panels.js'
+import { getJSON } from '../api.js'
+import { clip } from '../lib/fmt.js'
+
+/* 菜单 8 项 → 真实面板。overview 是核心对话视图,不在这里。 */
+const PANELS = {
+  activity: ActivityPanel,
+  tasks: TasksPanel,
+  agents: AgentsPanel,
+  tools: ToolsPanel,
+  usage: UsagePanel,
+  knowledge: KnowledgePanel,
+  review: ReviewPanel,
+  memory: MemoryPanel,
+  settings: SettingsPanel,
+}
+const panel = computed(() => PANELS[state.module] || null)
+
+/* 标签条只在打开文档时需要(文档 + 回到面板)。
+   没文档时面板头部已经写着模块名,再挂一条同名 tab 就是重复。 */
+const hasTabs = computed(() => !!state.doc)
+
+/* ── 空态引导 ──
+   一块空白 + 一句「问我任何事」等于让用户自己想问题。给三条真实可用的起点:
+   示例提问(点了直接发)、继续上次会话、最近知识(点了开正文)。
+   数据各自 .catch:任何一条挂了都只是少一块引导,不该让空态变成报错页。 */
+const EXAMPLES = [
+  '现在系统里有哪些技能可以用?',
+  '帮我把今天要做的事排个优先级',
+  '用一句话说清你能帮我做什么',
+]
+
+const recent = ref([])
+onMounted(async () => {
+  if (!state.sessions.length) loadSessions().catch(() => {})
+  const d = await getJSON('/knowledge/recent?limit=5').catch(() => null)
+  recent.value = d?.kus || []
+})
+
+/* 「继续上次」:取列表里最新一条**真的有消息**的会话。
+   不能只看 sessions[0] —— 那个常常是刚建的空会话(count=0),跳过它才能拿到上次聊的。 */
+const lastSession = computed(() => {
+  const cur = chat.messages.length ? state.sessionId : ''
+  return state.sessions.find((s) => s.id !== cur && (s.message_count || 0) > 0) || null
+})
+
+function resume() {
+  const s = lastSession.value
+  if (!s) return
+  openSession(s)
+  loadSession(s.id)
+}
+</script>
+
+<template>
+  <section class="stage">
+    <div v-if="hasTabs" class="tabs">
+      <button
+        v-if="state.module !== 'overview'"
+        class="tab"
+        :class="{ on: !state.doc }"
+        @click="closeDoc()"
+      >
+        {{ moduleLabel(state.module) }}
+      </button>
+      <button v-if="state.doc" class="tab on doc" @click="closeDoc()">
+        <span class="t">{{ state.doc.title }}</span>
+        <span class="x" title="关闭">✕</span>
+      </button>
+    </div>
+
+    <div class="stage-body" :class="{ bare: !hasTabs }">
+      <DocViewer v-if="state.doc" :doc="state.doc" />
+
+      <component :is="panel" v-else-if="panel" :key="state.module" />
+
+      <div v-else class="core">
+        <MessageStream v-if="chat.messages.length" />
+        <div v-else class="core-empty">
+          <div class="hero">
+            <div class="hero-t">问我任何事</div>
+            <div class="core-cap">主管 Agent 会按需调度子 Agent;想让它读你的知识库,直接问就行</div>
+          </div>
+
+          <div class="tries">
+            <button v-for="q in EXAMPLES" :key="q" class="try" @click="send(q)">
+              <span class="arrow">→</span>{{ q }}
+            </button>
+          </div>
+
+          <button v-if="lastSession" class="resume" @click="resume">
+            <span class="rl">继续上次</span>
+            <b>{{ clip(lastSession.title || '未命名会话', 28) }}</b>
+            <span class="rm">{{ lastSession.message_count }} 条消息</span>
+          </button>
+
+          <div v-if="recent.length" class="recent">
+            <div class="rh">最近知识</div>
+            <div class="rk-list">
+              <button v-for="k in recent" :key="k.ku_id" class="rk" :title="k.summary || k.name" @click="openKu(k.ku_id)">
+                {{ clip(k.name || k.ku_id, 30) }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.stage { display: flex; flex-direction: column; min-height: 0; }
+
+.tabs {
+  display: flex; align-items: center; gap: 4px;
+  padding: 8px 10px 0; flex-shrink: 0;
+  overflow-x: auto;
+}
+.tab {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 11px; border-radius: var(--r-sm) var(--r-sm) 0 0;
+  font-size: 12px; color: var(--dim);
+  border: 1px solid transparent; border-bottom: 0;
+  white-space: nowrap;
+}
+.tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.5); }
+.tab.on {
+  color: var(--ink); font-weight: 600;
+  background: rgba(255, 255, 255, 0.86);
+  border-color: var(--line-soft);
+}
+.tab.doc { max-width: 260px; }
+.tab.doc .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tab.doc .x { font-size: 11px; color: var(--dim); }
+.tab.doc .x:hover { color: var(--red); }
+
+.stage-body {
+  flex: 1; min-height: 0;
+  margin: 0 8px 8px;
+  border-radius: 0 var(--r-mid) var(--r-mid) var(--r-mid);
+  background: var(--mid-panel);
+  border: 1px solid rgba(26, 157, 95, 0.1);
+  overflow: hidden;
+  display: flex;
+}
+/* 没有标签条时不留缺口,四角全圆 */
+.stage-body.bare { margin-top: 8px; border-radius: var(--r-mid); }
+
+/* ── 核心:空态居中,有消息时整块交给消息流 ── */
+.core { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.core-empty {
+  flex: 1; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 18px;
+  position: relative;
+  padding: 24px 18px;
+  overflow-y: auto;
+}
+.core-cap { font-size: 12.5px; color: var(--dim); line-height: 1.7; text-align: center; }
+
+.hero { text-align: center; }
+.hero-t {
+  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
+  color: var(--ink); margin-bottom: 6px;
+}
+
+/* 示例提问:原来空态只有一句提示,用户不知道从哪开口 */
+.tries { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 420px; }
+.try {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 10px 13px; border-radius: var(--r-sm);
+  font-size: 12.5px; color: var(--ink); text-align: left;
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid var(--line);
+  transition: color 0.14s, border-color 0.14s, background 0.14s, transform 0.12s;
+}
+.try:hover { color: var(--ink); background: #fff; border-color: rgba(26, 157, 95, 0.42); }
+.try:active { transform: scale(0.99); }
+.try .arrow { font-size: 12px; color: var(--green); flex-shrink: 0; }
+
+.resume {
+  display: flex; align-items: center; gap: 7px;
+  max-width: 420px; padding: 7px 13px;
+  border-radius: var(--r-pill);
+  background: var(--surface-2); color: var(--dim);
+  transition: background 0.14s, color 0.14s;
+}
+.resume:hover { background: var(--surface-3); color: var(--ink); }
+.resume .rl { font-size: 11px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.07em; }
+.resume b {
+  font-size: 12px; font-weight: 600;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.resume .rm { font-size: 11px; color: var(--dim); flex-shrink: 0; }
+
+.recent { width: 100%; max-width: 420px; }
+.recent .rh {
+  margin-bottom: 5px;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
+  color: var(--dim); text-transform: uppercase;
+}
+.rk-list { display: flex; flex-wrap: wrap; gap: 5px; }
+.rk {
+  max-width: 190px; padding: 5px 10px; border-radius: var(--r-pill);
+  font-size: 11.5px; color: var(--ink);
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid var(--line);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  transition: color 0.13s, border-color 0.13s, background 0.13s;
+}
+.rk:hover { color: var(--green); background: #fff; border-color: rgba(26, 157, 95, 0.4); }
+</style>