foxclaw 0.1.0 → 0.1.2

package/python/frontend_src/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "foxclaw-deck-next",
+  "private": true,
+  "version": "3.0.0",
+  "type": "module",
+  "description": "Foxclaw Deck v3 - Vue 3 rendering layer (builds into frontend/v3)",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.7"
+  }
+}

package/python/frontend_src/src/App.vue

@@ -0,0 +1,62 @@
+<script setup>
+import TopBar from './components/TopBar.vue'
+import LeftRail from './components/LeftRail.vue'
+import Stage from './components/Stage.vue'
+import ChatDock from './components/ChatDock.vue'
+import Inspector from './components/Inspector.vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { state, setModule } from './stores/app.js'
+import { bootChat } from './stores/chat.js'
+
+/* 窄窗断点与 base.css 的 @media (max-width: 1180px) 是同一个数:
+   到这条线以下右栏变成抽屉(见 base.css),这里负责「变窄时自动收起」。
+   否则 900px 窗口里三栏并存,中栏只剩 252px,输入框被 ＋ / 模型胶囊挤到 115px。 */
+const NARROW = 1180
+const narrow = ref(false)
+
+function syncNarrow() {
+  const n = window.innerWidth < NARROW
+  if (n === narrow.value) return
+  narrow.value = n
+  if (n) state.railOpen = false
+}
+
+/* 恢复上次会话历史(后端落盘) */
+onMounted(() => {
+  bootChat()
+  narrow.value = window.innerWidth < NARROW
+  if (narrow.value) state.railOpen = false
+  window.addEventListener('keydown', onKey)
+  window.addEventListener('resize', syncNarrow)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKey)
+  window.removeEventListener('resize', syncNarrow)
+})
+
+/* Ctrl+, 打开设置(顶栏 ⚙ 旁边写的那个键位)。输入框里也生效 —— 它是全局入口 */
+function onKey(e) {
+  if (e.ctrlKey && (e.key === ',' || e.code === 'Comma')) {
+    e.preventDefault()
+    setModule('settings')
+  }
+}
+</script>
+
+<template>
+  <div class="app">
+    <TopBar />
+    <div class="workspace" :class="{ 'is-collapsed': !state.railOpen }">
+      <LeftRail />
+      <main class="col col--mid mid">
+        <Stage />
+        <ChatDock />
+      </main>
+      <Inspector />
+    </div>
+    <div v-if="narrow && state.railOpen" class="rail-scrim" @click="state.railOpen = false" />
+    <button v-if="!state.railOpen" class="rail-handle" title="展开检视栏" @click="state.railOpen = true">
+      检视
+    </button>
+  </div>
+</template>

package/python/frontend_src/src/api.js

@@ -0,0 +1,89 @@
+/* 所有请求走相对路径:dev 由 vite proxy 透到 8000,prod 与后端同源 —— 无需区分环境。 */
+export const API = '/api'
+
+/* FastAPI 错误统一带 {detail},直接抛出来比 "xxx -> 400" 有用得多。
+   detail 可能是字符串,也可能是结构化对象({error:"install_denied",reasons:[...]} /
+   {needs_ack:true,warnings:[...]})—— 直接 String() 会得到 "[object Object]",
+   所以拆一层;原始 detail / status 挂到 err 上,调用方要区分「要确认」才有据可依。 */
+function detailMsg(d) {
+  if (typeof d === 'string') return d
+  if (d && typeof d === 'object') {
+    const list = d.reasons || d.warnings || []
+    const head = d.error || d.message || ''
+    if (head || list.length) {
+      return [head, ...(Array.isArray(list) ? list : [list])].filter(Boolean).join(' · ')
+    }
+    return JSON.stringify(d)
+  }
+  return ''
+}
+
+async function toError(r, path) {
+  let msg = `${path} -> ${r.status}`
+  let detail = null
+  try {
+    const j = await r.json()
+    if (j && j.detail !== undefined) {
+      detail = j.detail
+      msg = detailMsg(j.detail) || msg
+    }
+  } catch {}
+  const e = new Error(msg)
+  e.status = r.status
+  e.detail = detail
+  return e
+}
+
+export async function getJSON(path, init) {
+  const r = await fetch(API + path, init)
+  if (!r.ok) throw await toError(r, path)
+  return r.json()
+}
+
+export async function postJSON(path, body) {
+  return getJSON(path, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function delJSON(path) {
+  return getJSON(path, { method: 'DELETE' })
+}
+
+export async function patchJSON(path, body) {
+  return getJSON(path, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function putJSON(path, body) {
+  return getJSON(path, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+}
+
+export async function postForm(path, form) {
+  const r = await fetch(API + path, { method: 'POST', body: form })
+  if (!r.ok) throw await toError(r, path)
+  return r.json()
+}
+
+/* 少数端点在根路径、不带 /api 前缀 —— vendor/hkc 的 knowledge router 是直接
+   include_router(knowledge.router) 挂上去的,实测 /api/knowledge/* 是 404。 */
+export async function getRaw(path, init) {
+  const r = await fetch(path, init)
+  if (!r.ok) throw await toError(r, path)
+  return r.json()
+}
+
+export async function postFormRaw(path, form) {
+  const r = await fetch(path, { method: 'POST', body: form })
+  if (!r.ok) throw await toError(r, path)
+  return r.json()
+}

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

@@ -0,0 +1,377 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import ComposerMenu from './ComposerMenu.vue'
+import ModelPicker from './ModelPicker.vue'
+import ToolMenu from './ToolMenu.vue'
+import { getJSON } from '../api.js'
+import {
+  chat, dropAttachment, dropImage, newSession, pushLocal, requestIngest,
+  runSearch, say, send, setMode, stop,
+} from '../stores/chat.js'
+import { setModule } from '../stores/app.js'
+
+const text = ref('')
+const ta = ref(null)
+const menu = ref(null) // 'slash' | 'at' | null
+const mq = ref('')
+const hover = ref(0)
+const skills = ref([])
+
+const CMD = [
+  { key: '/新建', desc: '开一个新会话', run: () => newSession() },
+  { key: '/流式', desc: '切到流式对话', run: () => { setMode('stream'); say('已切到流式对话') } },
+  { key: '/任务', desc: '切到编排任务', run: () => { setMode('orchestrate'); say('已切到编排任务') } },
+  { key: '/搜索', desc: '检索记忆/知识/联网:/搜索 关键词', arg: true },
+  { key: '/摄入', desc: '选文件摄入知识库', run: () => requestIngest() },
+  { key: '/设置', desc: '打开设置面板', run: () => setModule('settings') },
+  { key: '/停止', desc: '停止当前生成', run: () => stop() },
+  { key: '/清屏', desc: '只清空当前显示,不动后端', run: () => { chat.messages = [] } },
+  {
+    key: '/帮助',
+    desc: '列出全部命令',
+    run: () => pushLocal(CMD.map((c) => `${c.key.padEnd(6)}  ${c.desc}`).join('\n')),
+  },
+]
+
+const busy = () => chat.streamState === 'streaming'
+
+const items = computed(() => {
+  const q = mq.value.toLowerCase()
+  if (menu.value === 'slash') {
+    return CMD.filter((c) => c.key.slice(1).toLowerCase().includes(q) || c.desc.includes(mq.value))
+      .map((c) => ({ label: c.key, desc: c.desc, tag: c.arg ? '带参数' : '' }))
+  }
+  if (menu.value === 'at') {
+    return skills.value
+      .filter((s) => s.label.toLowerCase().includes(q) || (s.desc || '').includes(mq.value))
+      .slice(0, 8)
+  }
+  return []
+})
+
+const hint = computed(() => (menu.value === 'slash' ? '命令' : '提及技能'))
+
+onMounted(async () => {
+  grow()
+  window.addEventListener('resize', onResize)
+  try {
+    const [a, b] = await Promise.all([
+      getJSON('/ahs/md-skills').catch(() => ({})),
+      getJSON('/ahs/skills').catch(() => ({})),
+    ])
+    skills.value = [
+      ...(a.skills || [])
+        .filter((s) => s.enabled !== false)
+        .map((s) => ({ label: s.name, desc: s.description || '', tag: '技能' })),
+      ...(b.skills || []).map((s) => ({
+        label: s.name || s.id, desc: s.description || '', tag: s.kind || '工具',
+      })),
+    ]
+  } catch {
+    /* 拿不到就只留命令面板 */
+  }
+})
+
+onBeforeUnmount(() => window.removeEventListener('resize', onResize))
+
+/* 只看光标左侧的 token:用户在中间补字时也能正确触发 */
+function syncMenu() {
+  const el = ta.value
+  if (!el) return
+  const pos = el.selectionStart ?? text.value.length
+  const before = text.value.slice(0, pos)
+  const mSlash = /(^|\s)\/([^\s/]*)$/.exec(before)
+  if (mSlash) {
+    if (menu.value !== 'slash') hover.value = 0
+    menu.value = 'slash'
+    mq.value = mSlash[2]
+    return
+  }
+  const mAt = /(^|\s)@([^\s@]*)$/.exec(before)
+  if (mAt) {
+    if (menu.value !== 'at') hover.value = 0
+    menu.value = 'at'
+    mq.value = mAt[2]
+    return
+  }
+  menu.value = null
+}
+
+watch(text, () => nextTick(syncMenu))
+
+function closeMenu() {
+  menu.value = null
+}
+
+function choose(i) {
+  const it = items.value[i]
+  if (!it) return
+  const el = ta.value
+  const pos = el ? el.selectionStart : text.value.length
+  const before = text.value.slice(0, pos)
+
+  if (menu.value === 'slash') {
+    const cmd = CMD.find((c) => c.key === it.label)
+    if (cmd && cmd.arg) {
+      /* 带参数的命令:把命令留在输入框,让用户接着写关键词 */
+      text.value = `${cmd.key} `
+      closeMenu()
+      nextTick(() => { el && el.focus(); grow() })
+      return
+    }
+    text.value = ''
+    closeMenu()
+    nextTick(grow)
+    if (cmd && cmd.run) cmd.run()
+    return
+  }
+
+  /* @ 技能:把当前 @token 替换成完整技能名 */
+  const idx = before.lastIndexOf('@')
+  const after = text.value.slice(pos)
+  text.value = `${before.slice(0, idx)}@${it.label} ${after}`
+  closeMenu()
+  nextTick(() => { el && el.focus(); grow() })
+}
+
+/* 纯命令(不带面板)也要能执行 */
+function tryCommand(t) {
+  if (!t.startsWith('/')) return false
+  const [head, ...rest] = t.split(/\s+/)
+  const cmd = CMD.find((c) => c.key === head)
+  if (!cmd) {
+    say(`未知命令:${head}`)
+    return true
+  }
+  const arg = rest.join(' ').trim()
+  if (cmd.key === '/搜索') runSearch(arg)
+  else if (cmd.run) cmd.run()
+  return true
+}
+
+function submit() {
+  if (busy()) return stop()
+  const t = text.value.trim()
+  if (!t && !chat.attachments.length && !chat.images.length) return
+  text.value = ''
+  closeMenu()
+  nextTick(grow) /* 清空后回缩到聚焦高度 */
+  if (tryCommand(t)) return
+  send(t)
+}
+
+/* textarea 高度:聚焦即撑开(约 3 行),内容变多继续长高,到上限才转内部滚动。
+   上限跟视口走,窄屏/高分屏都不会把消息流挤没。 */
+const FOCUS_MIN = 84
+const focused = ref(false)
+function capH() {
+  return Math.max(180, Math.min(340, Math.round(window.innerHeight * 0.42)))
+}
+function grow() {
+  const el = ta.value
+  if (!el) return
+  el.style.height = 'auto'
+  const need = el.scrollHeight
+  const min = focused.value ? FOCUS_MIN : 0
+  el.style.height = `${Math.min(Math.max(need, min), capH())}px`
+}
+/* blur 时 document.activeElement 已变,不能用它判断,单独跟一个标志 */
+function onFocus() {
+  focused.value = true
+  grow()
+}
+function onBlur() {
+  focused.value = false
+  grow()
+}
+function onResize() {
+  grow()
+}
+
+function onKey(e) {
+  if (menu.value && items.value.length) {
+    const n = items.value.length
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      hover.value = (hover.value + 1) % n
+      return
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      hover.value = (hover.value - 1 + n) % n
+      return
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      choose(hover.value)
+      return
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      closeMenu()
+      return
+    }
+  }
+  if (e.key !== 'Enter' || e.shiftKey || e.isComposing) return
+  e.preventDefault()
+  submit()
+}
+
+function kb(n) {
+  return n >= 1048576 ? `${(n / 1048576).toFixed(1)}M` : `${Math.max(1, Math.round(n / 1024))}K`
+}
+</script>
+
+<template>
+  <div class="dock">
+    <div class="dock-in">
+      <div v-if="chat.attachments.length || chat.images.length || chat.ingest" class="chips">
+        <div v-for="(a, i) in chat.attachments" :key="a.id || i" class="chip" :title="`${a.name} · ${a.url}`">
+          <span class="cn">{{ a.name }}</span>
+          <span class="cs">{{ kb(a.size) }}</span>
+          <span class="cx" @click="dropAttachment(i)">✕</span>
+        </div>
+
+        <div v-for="(im, i) in chat.images" :key="`img${i}`" class="chip img" :title="im.name">
+          <img :src="im.url" :alt="im.name" />
+          <span class="cx" @click="dropImage(i)">✕</span>
+        </div>
+
+        <div v-if="chat.ingest" class="chip ing" :class="chat.ingest.status">
+          <span class="cn">{{ chat.ingest.name }}</span>
+          <span class="cs">
+            {{ chat.ingest.status === 'done' ? `${chat.ingest.ku} 条`
+               : chat.ingest.status === 'error' ? '失败'
+               : `${chat.ingest.pct}%` }}
+          </span>
+          <span class="bar"><i :style="{ width: `${chat.ingest.status === 'done' ? 100 : chat.ingest.pct}%` }" /></span>
+          <span v-if="chat.ingest.status === 'done' || chat.ingest.status === 'error'" class="cx" @click="chat.ingest = null">✕</span>
+        </div>
+      </div>
+
+      <ComposerMenu
+        v-if="menu && items.length"
+        :items="items"
+        :index="hover"
+        :hint="hint"
+        @pick="choose"
+        @hover="hover = $event"
+      />
+
+      <div class="wrap">
+        <ToolMenu />
+        <ModelPicker />
+        <textarea
+          ref="ta"
+          v-model="text"
+          rows="1"
+          placeholder="告诉我你想做什么…  / 命令 · @ 技能 · Enter 发送"
+          @keydown="onKey"
+          @input="grow"
+          @focus="onFocus"
+          @blur="onBlur"
+          @click="syncMenu"
+          @keyup="syncMenu"
+        />
+        <button class="send" :class="{ stop: busy() }" :title="busy() ? '停止生成' : '发送'" @click="submit">
+          {{ busy() ? '■' : '➤' }}
+        </button>
+      </div>
+    </div>
+
+    <Transition name="fade">
+      <div v-if="chat.toast" class="toast">{{ chat.toast }}</div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.dock { padding: 0 8px 8px; position: relative; }
+
+/* 输入框宽度 = 正文列宽。正文列是 .ms-in(max-width 780,左右 padding 22)居中于
+   .stage-body(margin 0 8px),这里用同一个算式 100% - 44:
+   宽屏时同为 736,窄屏时同为 列宽-60,任何宽度下左右边都压在正文的文字边上。
+   菜单 / 提示条挂在这层里,才会跟着一起变窄。 */
+.dock-in {
+  position: relative;
+  width: min(736px, calc(100% - 44px));
+  margin: 0 auto;
+}
+
+.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 2px 7px; }
+.chip {
+  display: flex; align-items: center; gap: 6px;
+  padding: 5px 9px; border-radius: var(--r-pill);
+  font-size: 11.5px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--line);
+  box-shadow: 0 1px 2px rgba(23, 32, 26, 0.04);
+  max-width: 220px;
+}
+.chip .cn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
+.chip .cs { font-family: var(--mono); font-size: 10.5px; color: var(--dim); flex-shrink: 0; }
+.chip .cx { cursor: pointer; font-size: 11px; color: var(--dim); padding: 0 2px; flex-shrink: 0; }
+.chip .cx:hover { color: var(--red); }
+.chip.img { padding: 3px 5px; }
+.chip.img img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
+
+.chip.ing { border-color: rgba(26, 157, 95, 0.3); }
+.chip.ing.error { border-color: rgba(200, 60, 60, 0.34); }
+.chip.ing .bar {
+  width: 44px; height: 3px; border-radius: 2px; overflow: hidden;
+  background: rgba(23, 32, 26, 0.1); flex-shrink: 0;
+}
+.chip.ing .bar i { display: block; height: 100%; background: var(--green); transition: width 0.3s; }
+.chip.ing.error .bar i { background: var(--red); }
+
+.wrap {
+  display: flex; align-items: flex-end; gap: 8px;
+  padding: 7px 9px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r-mid);
+  box-shadow: var(--sh-card);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.wrap:focus-within {
+  border-color: rgba(26, 157, 95, 0.4);
+  box-shadow: 0 0 0 3px rgba(26, 157, 95, 0.08), var(--sh-card);
+}
+textarea {
+  flex: 1; min-width: 0;
+  font-size: 13.5px; line-height: 1.6;
+  padding: 5px 2px; border: 0; background: none;
+  resize: none; overflow-y: auto;
+  /* 高度由 grow() 写死具体 px;max-height 只作兜底,避免 JS 失效时无限长高 */
+  max-height: 340px;
+  transition: height 0.14s ease;
+}
+textarea:focus { outline: none; }
+/* placeholder 是「第一次进来唯一能读的提示」,用 dim 而不是 faint:
+   输入框是视觉焦点,提示跟着提亮一档才不会被当成禁用态。 */
+textarea::placeholder { color: var(--dim); opacity: 1; }
+
+.send {
+  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
+  display: grid; place-items: center;
+  font-size: 12px; color: #fff;
+  background: var(--green);
+  box-shadow: 0 4px 12px rgba(26, 157, 95, 0.3);
+  transition: transform 0.1s, filter 0.15s, background 0.15s;
+}
+.send:hover { filter: brightness(1.06); }
+.send:active { transform: scale(0.94); }
+.send.stop { background: var(--red); box-shadow: 0 4px 12px rgba(229, 72, 77, 0.28); font-size: 10px; }
+
+.toast {
+  position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%);
+  padding: 7px 13px; border-radius: var(--r-pill);
+  font-size: 11.5px; color: var(--cli-ink);
+  background: rgba(17, 22, 15, 0.92);
+  box-shadow: var(--sh-pop); white-space: nowrap;
+  max-width: 82vw; overflow: hidden; text-overflow: ellipsis;
+  z-index: 30;
+}
+.fade-enter-active, .fade-leave-active { transition: opacity 0.18s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+</style>

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

@@ -0,0 +1,75 @@
+<script setup>
+defineProps({
+  items: { type: Array, default: () => [] },
+  index: { type: Number, default: 0 },
+  hint: { type: String, default: '' },
+})
+defineEmits(['pick', 'hover'])
+</script>
+
+<template>
+  <div class="cm">
+    <div class="cm-h">{{ hint }}</div>
+    <button
+      v-for="(it, i) in items"
+      :key="`${it.label}-${i}`"
+      class="cm-it"
+      :class="{ on: i === index }"
+      @mouseenter="$emit('hover', i)"
+      @mousedown.prevent="$emit('pick', i)"
+    >
+      <b>{{ it.label }}</b>
+      <span>{{ it.desc }}</span>
+      <em v-if="it.tag">{{ it.tag }}</em>
+    </button>
+    <div v-if="!items.length" class="cm-empty">没有匹配项</div>
+    <div class="cm-f">↑↓ 选择 · Enter 确认 · Esc 关闭</div>
+  </div>
+</template>
+
+<style scoped>
+.cm {
+  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px);
+  z-index: 40;
+  max-height: 264px; overflow-y: auto;
+  padding: 5px;
+  border-radius: var(--r-mid);
+  background: rgba(255, 255, 255, 0.94);
+  -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);
+  animation: cm-in 0.13s ease;
+}
+@keyframes cm-in { from { opacity: 0; transform: translateY(4px); } }
+
+.cm-h {
+  padding: 4px 7px 5px;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
+  color: var(--dim); text-transform: uppercase;
+}
+
+.cm-it {
+  width: 100%;
+  display: flex; align-items: baseline; gap: 8px;
+  padding: 7px 9px; border-radius: var(--r-sm);
+  text-align: left;
+}
+.cm-it.on { background: var(--surface-2); }
+.cm-it b { font-size: 12.5px; font-weight: 700; font-family: var(--mono); flex-shrink: 0; color: var(--ink); }
+.cm-it span {
+  flex: 1; min-width: 0;
+  font-size: 12px; color: var(--ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.cm-it em {
+  font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--dim);
+  padding: 2px 6px; border-radius: var(--r-pill); background: var(--surface-2);
+}
+.cm-empty { padding: 10px 8px; font-size: 12px; color: var(--dim); }
+.cm-f {
+  padding: 7px 8px 3px; margin-top: 3px;
+  border-top: 1px solid var(--line-soft);
+  font-size: 11px; color: var(--dim); font-family: var(--mono);
+}
+</style>