cardbuddy 0.10.0 → 0.11.0

package/dist/vendored/components/ChatPanel.vue

@@ -0,0 +1,937 @@
+<template>
+  <aside
+    class="aichat"
+    :class="{ 'is-open': visible }"
+    :style="{ width: panelWidth + 'px' }"
+    role="complementary"
+    aria-label="AI 开发助手"
+    @keydown.esc="onEscape"
+  >
+    <!-- 左缘拖拽把手：调宽（双击恢复默认 33%） -->
+    <div
+      class="aichat__grip"
+      :class="{ 'is-dragging': resizing }"
+      title="拖拽调整宽度（双击恢复默认）"
+      @pointerdown.prevent="startResize"
+      @dblclick.prevent="resetWidth"
+    ></div>
+
+    <!-- 头部：标题 + 当前卡片 / 模型 + 清空 / 设置 / 关闭 -->
+    <header class="aichat__head">
+      <span class="aichat__logo">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-sparkles" /></svg>
+      </span>
+      <span class="aichat__titles">
+        <span class="aichat__title">AI 开发助手</span>
+        <span class="aichat__sub">
+          <template v-if="cardId">{{ cardName || cardId }}</template>
+          <template v-else>未选择卡片</template>
+          <template v-if="config.model"> · {{ config.model }}</template>
+        </span>
+      </span>
+      <span class="aichat__acts">
+        <button type="button" class="aichat__iconbtn" title="清空本卡片对话记录" :disabled="!messages.length || busy" @click="askClear">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-trash" /></svg>
+        </button>
+        <button type="button" class="aichat__iconbtn" title="模型设置" @click="openSettings">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-settings" /></svg>
+        </button>
+        <button type="button" class="aichat__iconbtn" title="关闭（Esc）" @click="$emit('close')">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-x" /></svg>
+        </button>
+      </span>
+    </header>
+
+    <!-- 未配置模型：常驻提示条，一键打开设置 -->
+    <div v-if="!configReady" class="aichat__banner">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-alert-triangle" /></svg>
+      <span>尚未配置模型，无法对话。</span>
+      <button type="button" class="aichat__banner-btn" @click="openSettings">去设置</button>
+    </div>
+
+    <!-- 消息区：滚动容器与悬浮「回到底部」共处一个定位上下文，按钮只贴消息区底缘，
+         输入区拖高 / 反馈条出现都不会把它盖住或悬空 -->
+    <div class="aichat__scroll">
+      <div ref="listEl" class="aichat__list" @scroll="onScroll">
+        <div v-if="loadingHistory" class="aichat__loading">正在加载对话记录…</div>
+
+        <div v-else-if="!messages.length" class="aichat__empty">
+          <span class="aichat__empty-logo">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-sparkles" /></svg>
+          </span>
+          <p class="aichat__empty-title">让 AI 直接改这张卡</p>
+          <p class="aichat__empty-desc">
+            描述需求即可，AI 会调用卡片工具读改校验并截图自检；也可以把设计稿标注目录、参考图拖进来，只传本机路径不上传。
+          </p>
+          <div class="aichat__suggests">
+            <button v-for="s in suggestions" :key="s.text" type="button" class="aichat__suggest" @click="useSuggestion(s)">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use :href="s.icon" /></svg>
+              <span>{{ s.label }}</span>
+            </button>
+          </div>
+        </div>
+
+        <template v-else>
+          <ChatMessage
+            v-for="(msg, idx) in messages"
+            :key="msg.id"
+            :msg="msg"
+            :streaming="busy && idx === messages.length - 1"
+            :can-regenerate="msg.role === 'assistant' && idx === messages.length - 1"
+            @regenerate="regenerate"
+            @approval="onApproval"
+            @continue="onContinue"
+          />
+          <div v-if="busy" class="aichat__live">生成中… 可随时终止</div>
+        </template>
+      </div>
+
+      <!-- 回到底部：脱离底部吸附时出现 -->
+      <button v-show="!pinned && messages.length" type="button" class="aichat__jump" title="回到底部" @click="scrollToBottom(true)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-arrow-down" /></svg>
+      </button>
+    </div>
+
+    <!-- 操作反馈（附件解析失败 / 历史保存失败等） -->
+    <div v-if="notice" class="aichat__notice" :class="`aichat__notice--${notice.type}`">
+      <span>{{ notice.text }}</span>
+      <button type="button" class="aichat__notice-x" title="关闭" @click="notice = null">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-x" /></svg>
+      </button>
+    </div>
+
+    <ChatComposer
+      ref="composerEl"
+      :busy="busy"
+      :model="config.model"
+      :attachments="draftAttachments"
+      :placeholder="configReady ? '描述你要改的卡片，Enter 发送 / Shift+Enter 换行' : '请先在设置中配置模型…'"
+      :context="contextUsage"
+      @send="onSend"
+      @stop="stop"
+      @pick="onPick"
+      @add-path="onAddPath"
+      @remove-attachment="removeAttachment"
+      @drop-files="onDropFiles"
+      @paste-image="onPasteImage"
+      @escape="onEscape"
+    />
+
+    <!-- 模型设置（面板内浮层，不额外抬 z-index） -->
+    <AiSettings v-if="settingsOpen" :config="config" @close="settingsOpen = false" @saved="onConfigSaved" />
+
+    <ConfirmDialog
+      :visible="confirmClear"
+      title="清空对话记录"
+      :message="`将删除卡片「${cardName || cardId || '当前卡片'}」的全部对话记录，此操作不可撤销。`"
+      confirm-text="清空"
+      severity="danger"
+      @confirm="doClear"
+      @cancel="confirmClear = false"
+    />
+  </aside>
+</template>
+
+<script>
+import ChatMessage from './ChatMessage.vue'
+import ChatComposer from './ChatComposer.vue'
+import AiSettings from './AiSettings.vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+import {
+  fetchAiConfig,
+  loadChatHistory,
+  saveChatHistory,
+  clearChatHistory,
+  approveToolCall,
+  pickLocalPaths,
+  statLocalPath,
+  locateDroppedFile,
+  stashPastedImage,
+  streamChat,
+} from '../runtime/ai-api.js'
+
+const WIDTH_KEY = 'cardbuddy:ai-panel-width'
+/** 宽度约束：不小于 320px、不大于视口 50%，默认 33% */
+const MIN_WIDTH = 320
+const MAX_RATIO = 0.5
+const DEFAULT_RATIO = 0.33
+
+let _seq = 0
+function uid(prefix = 'm') {
+  _seq += 1
+  return `${prefix}${Date.now().toString(36)}-${_seq}`
+}
+
+/** 建议问法：点一下即填入输入框（不自动发送，留给用户改写） */
+const SUGGESTIONS = [
+  { label: '解释这张卡的结构与数据来源', icon: '#icon-search', text: '读取当前卡片 schema，用中文解释它的结构、关键绑定与数据来源，指出可能的问题。' },
+  { label: '校验并修复当前卡片', icon: '#icon-check', text: '对当前卡片执行校验，列出全部错误并按规则修复，修完再校验一次确认清零。' },
+  { label: '截图自检还原度', icon: '#icon-image', text: '给当前卡片截图，检查布局、字号、间距与配色是否协调，指出需要调整的地方。' },
+  { label: '按标注目录建卡', icon: '#icon-folder-plus', text: '我会挂载一份 Sketch MeaXure 标注导出目录，请按标注生成卡片 schema 并自检。' },
+]
+
+export default {
+  name: 'ChatPanel',
+  components: { ChatMessage, ChatComposer, AiSettings, ConfirmDialog },
+  props: {
+    visible: { type: Boolean, default: false },
+    /** 当前卡片 id：对话记录按它分档保存 */
+    cardId: { type: String, default: '' },
+    /** 当前卡片名（头部展示） */
+    cardName: { type: String, default: '' },
+  },
+  emits: ['close'],
+  data() {
+    return {
+      messages: [],
+      draftAttachments: [],
+      busy: false,
+      loadingHistory: false,
+      settingsOpen: false,
+      confirmClear: false,
+      notice: null,
+      config: { baseUrl: '', model: '', hasKey: false, apiKeyMasked: '' },
+      widthPx: 0,
+      winW: typeof window !== 'undefined' ? window.innerWidth : 1280,
+      resizing: false,
+      pinned: true,
+      /** 上下文占用（后端每轮 context-usage 回传）：{ used, total, window }，输入框圆环的数据源 */
+      contextUsage: null,
+      suggestions: SUGGESTIONS,
+      _abort: null,
+      _saveTimer: 0,
+      _loadedCard: '',
+    }
+  },
+  computed: {
+    configReady() {
+      return Boolean(this.config.baseUrl && this.config.model && this.config.hasKey)
+    },
+    /** 面板宽度：夹取到 [320, 视口 50%]，未设置时取视口 33% */
+    panelWidth() {
+      const vw = this.winW || 1280
+      const max = Math.max(MIN_WIDTH, Math.floor(vw * MAX_RATIO))
+      const fallback = Math.round(vw * DEFAULT_RATIO)
+      const w = this.widthPx || fallback
+      return Math.max(MIN_WIDTH, Math.min(max, w))
+    },
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.refreshConfig()
+        this.ensureHistory()
+        this.$nextTick(() => {
+          this.scrollToBottom(true)
+          this.$refs.composerEl?.focus()
+        })
+      } else if (this.busy) {
+        // 关面板不打断生成：继续跑完并落盘，重开可见结果
+        this.flushHistory()
+      }
+    },
+    cardId(newId, oldId) {
+      // 切卡：先把「旧卡」未落盘的消息按旧卡 ID 落盘（此刻 this.cardId 已是新卡，
+      // 直接 flush 会把旧卡消息写进新卡的历史文件），再清空视图加载新卡记录
+      if (this._saveTimer) {
+        clearTimeout(this._saveTimer)
+        this._saveTimer = 0
+      }
+      const pending = this._dirtyFor === oldId ? this.serialize() : null
+      this._dirtyFor = null
+      this.draftAttachments = []
+      this.messages = []
+      if (pending && oldId) this.flushHistory(oldId, pending)
+      this.ensureHistory()
+    },
+  },
+  mounted() {
+    this.loadWidth()
+    window.addEventListener('resize', this.onWinResize)
+    this.refreshConfig()
+    this.ensureHistory()
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.onWinResize)
+    this.stopTickers()
+    this.flushHistory()
+    if (this._abort) this._abort.abort()
+  },
+  methods: {
+    // ---------- 宽度 ----------
+    onWinResize() {
+      this.winW = window.innerWidth
+    },
+    loadWidth() {
+      try {
+        const v = localStorage.getItem(WIDTH_KEY)
+        if (v != null) {
+          const px = parseInt(v, 10)
+          if (!Number.isNaN(px) && px >= MIN_WIDTH) this.widthPx = px
+        }
+      } catch {
+        /* localStorage 不可用时用默认比例 */
+      }
+    },
+    saveWidth() {
+      try {
+        if (this.widthPx) localStorage.setItem(WIDTH_KEY, String(Math.round(this.panelWidth)))
+        else localStorage.removeItem(WIDTH_KEY)
+      } catch {
+        /* 忽略 */
+      }
+    },
+    startResize(ev) {
+      const el = ev && ev.currentTarget
+      if (!el) return
+      this.resizing = true
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+      const pointerId = ev.pointerId
+      try {
+        el.setPointerCapture(pointerId)
+      } catch {
+        /* 不支持捕获时退化为元素级监听 */
+      }
+      const move = (e) => {
+        const max = Math.max(MIN_WIDTH, Math.floor(window.innerWidth * MAX_RATIO))
+        this.widthPx = Math.max(MIN_WIDTH, Math.min(max, Math.round(window.innerWidth - e.clientX)))
+      }
+      const finish = () => {
+        el.removeEventListener('pointermove', move)
+        el.removeEventListener('pointerup', finish)
+        el.removeEventListener('pointercancel', finish)
+        window.removeEventListener('blur', finish)
+        try {
+          if (el.hasPointerCapture?.(pointerId)) el.releasePointerCapture(pointerId)
+        } catch {
+          /* 已释放 */
+        }
+        this.resizing = false
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+        this.saveWidth()
+      }
+      el.addEventListener('pointermove', move)
+      el.addEventListener('pointerup', finish)
+      el.addEventListener('pointercancel', finish)
+      window.addEventListener('blur', finish) // 失焦兜底，避免拖拽态卡死
+    },
+    resetWidth() {
+      this.widthPx = 0
+      this.saveWidth()
+    },
+
+    // ---------- 配置 ----------
+    async refreshConfig() {
+      try {
+        const cfg = await fetchAiConfig()
+        // 兼容旧版后端：无 hasKey 字段、直接回明文 apiKey，按「有 key」归一，避免误报「尚未配置」
+        this.config = { ...cfg, hasKey: Boolean(cfg.hasKey || cfg.apiKey) }
+      } catch {
+        this.config = { baseUrl: '', model: '', hasKey: false, apiKeyMasked: '' }
+      }
+    },
+    onConfigSaved(cfg) {
+      if (cfg) this.config = cfg
+      this.settingsOpen = false
+      this.refreshConfig()
+    },
+
+    // ---------- 历史 ----------
+    async ensureHistory() {
+      const cardId = this.cardId
+      if (!cardId || this._loadedCard === cardId) return
+      this._loadedCard = cardId
+      this.loadingHistory = true
+      try {
+        const data = await loadChatHistory(cardId)
+        // 期间可能已切卡：只有仍是同一张卡才落地
+        if (this.cardId !== cardId) return
+        const loaded = (data.messages || []).map((m) => this.revive(m))
+        // 历史是异步落地的，而面板一打开就能发消息：若这期间用户已经发过（甚至正在生成），
+        // 整体替换会把这轮对话从视图里抹掉（请求还在跑，界面却像凭空消失）。
+        // 故按 id 去重后把「已加载的历史」拼在当前会话消息之前。
+        const seen = new Set(loaded.map((m) => m.id))
+        const live = this.messages.filter((m) => !seen.has(m.id))
+        this.messages = [...loaded, ...live]
+        this.contextUsage = null // 换卡后旧卡的占用数字没有意义，等新一轮回传
+        this._dirtyFor = null // 视图与落盘一致，切卡时不必再回写
+        this.$nextTick(() => this.scrollToBottom(true))
+      } catch {
+        if (this.cardId === cardId) this.messages = []
+        this._dirtyFor = null
+      } finally {
+        if (this.cardId === cardId) this.loadingHistory = false
+      }
+    },
+    /** 落盘前剥离易失字段（流式态 / 计时器 / base64 截图） */
+    serialize() {
+      return this.messages.map((m) => {
+        const out = {
+          id: m.id,
+          role: m.role,
+          content: m.content || '',
+          ts: m.ts,
+        }
+        if (m.role === 'assistant') {
+          out.reasoning = m.reasoning || ''
+          out.reasoningMs = m.reasoningMs || 0
+          out.error = m.error || ''
+          out.status = m.status === 'streaming' ? 'aborted' : m.status || 'done'
+          // 收尾原因一并落盘（死循环熔断 / 墙钟 / 用户自设硬顶）
+          if (m.budget?.message) out.budget = { reason: m.budget.reason || '', message: m.budget.message }
+          if (m.toolCalls?.length) {
+            out.toolCalls = m.toolCalls.map((tc) => ({
+              toolCallId: tc.toolCallId,
+              toolName: tc.toolName,
+              args: tc.args || {},
+              result: tc.result,
+              error: tc.error || '',
+              ms: tc.ms || 0,
+              // 审批 / 免确认痕迹一并落盘：重开面板后仍看得见「当时跑了什么命令、是谁批的」
+              command: tc.command || '',
+              approvalNote: tc.approvalNote || '',
+              autoApproved: Boolean(tc.autoApproved),
+            }))
+          }
+        } else if (m.attachments?.length) {
+          out.attachments = m.attachments.map((a) => ({
+            path: a.path,
+            name: a.name,
+            isDir: Boolean(a.isDir),
+            isImage: Boolean(a.isImage),
+            size: a.size || 0,
+            entryCount: a.entryCount || 0,
+            exists: a.exists !== false,
+          }))
+        }
+        return out
+      })
+    },
+    /** 读回时补默认值，保证旧记录也能渲染 */
+    revive(m) {
+      return {
+        id: m.id || uid(),
+        role: m.role === 'user' ? 'user' : 'assistant',
+        content: m.content || '',
+        reasoning: m.reasoning || '',
+        reasoningMs: m.reasoningMs || 0,
+        toolCalls: Array.isArray(m.toolCalls)
+          ? m.toolCalls.map((tc) =>
+              // 被终止的轮次可能留下「参数 / 结果没等到」的悬空调用：读回时钉成终止态，
+              // 否则前端会永远转圈显示「参数生成中…」
+              (m.status === 'aborted' || m.status === 'streaming') && tc && !tc.error && tc.result == null
+                ? { ...tc, error: '已终止：该调用未拿到结果（轮次被中断）' }
+                : tc,
+            )
+          : [],
+        attachments: Array.isArray(m.attachments) ? m.attachments : [],
+        error: m.error || '',
+        status: m.status || 'done',
+        // 收尾原因（死循环 / 墙钟 / 步数硬顶）：重开面板仍要看得见这轮为什么停
+        budget: m.budget?.message ? { reason: m.budget.reason || '', message: m.budget.message } : undefined,
+        ts: m.ts || 0,
+      }
+    },
+    persist() {
+      if (!this.cardId) return
+      this._dirtyFor = this.cardId
+      if (this._saveTimer) clearTimeout(this._saveTimer)
+      this._saveTimer = setTimeout(() => this.flushHistory(), 500)
+    },
+    async flushHistory(cardId = this.cardId, snapshot = null) {
+      if (this._saveTimer) {
+        clearTimeout(this._saveTimer)
+        this._saveTimer = 0
+      }
+      if (!cardId) return
+      try {
+        await saveChatHistory(cardId, snapshot || this.serialize())
+        if (this._dirtyFor === cardId) this._dirtyFor = null
+      } catch (e) {
+        this.notify('warn', `对话记录保存失败：${e.message || e}`)
+      }
+    },
+    askClear() {
+      if (!this.messages.length) return
+      this.confirmClear = true
+    },
+    async doClear() {
+      this.confirmClear = false
+      const cardId = this.cardId
+      this.messages = []
+      this.contextUsage = null
+      this._loadedCard = cardId
+      this._dirtyFor = null
+      if (this._saveTimer) {
+        clearTimeout(this._saveTimer)
+        this._saveTimer = 0
+      }
+      try {
+        await clearChatHistory(cardId)
+        this.notify('ok', '已清空本卡片的对话记录')
+      } catch (e) {
+        this.notify('warn', `清空失败：${e.message || e}`)
+      }
+    },
+
+    // ---------- 附件 ----------
+    async onPick(kind) {
+      try {
+        const res = await pickLocalPaths(kind)
+        if (res.cancelled) return
+        for (const item of res.items || []) this.pushAttachment(item)
+        if (!res.items?.length) this.notify('warn', '未选到可用文件')
+      } catch (e) {
+        this.notify('warn', e.message || '无法调起系统选择器，可改用拖拽或粘贴路径')
+      }
+    },
+    async onAddPath(rawPath) {
+      try {
+        const info = await statLocalPath(rawPath)
+        this.pushAttachment(info)
+      } catch (e) {
+        this.notify('warn', `路径不可用：${rawPath}（${e.message || e}）`)
+      }
+    },
+    async onPasteImage(dataUrl) {
+      try {
+        const info = await stashPastedImage(dataUrl)
+        this.pushAttachment(info, '粘贴的截图已存到本机 .cache/ai-attachments/')
+      } catch (e) {
+        this.notify('warn', `截图保存失败：${e.message || e}`)
+      }
+    },
+    /**
+     * 拖入文件 / 文件夹：浏览器不给绝对路径，先按「名字 + 大小」请后端反查；
+     * 文件夹则递归收集一层清单交给 AI（仍只传路径，不上传内容）。
+     */
+    async onDropFiles(dataTransfer) {
+      const items = Array.from(dataTransfer.items || [])
+      const entries = items.map((it) => (it.webkitGetAsEntry ? it.webkitGetAsEntry() : null)).filter(Boolean)
+      const files = Array.from(dataTransfer.files || [])
+      const jobs = []
+
+      if (entries.length) {
+        for (const entry of entries) {
+          jobs.push(this.resolveEntry(entry))
+        }
+      } else {
+        for (const file of files) {
+          jobs.push(this.resolveFile(file))
+        }
+      }
+      if (!jobs.length) {
+        this.notify('warn', '没有识别到可挂载的文件')
+        return
+      }
+      const results = await Promise.all(jobs)
+      const missed = results.filter((r) => !r).length
+      if (missed) {
+        this.notify('warn', `${missed} 项未能定位本机路径，可改用「粘贴路径」添加`)
+      }
+    },
+    async resolveEntry(entry) {
+      if (entry.isDirectory) {
+        const file = await this.firstFileInDir(entry)
+        return this.resolveByName(entry.name, entry.fullPath || entry.name, file?.size ?? -1)
+      }
+      const file = await this.entryToFile(entry)
+      if (file) return this.resolveFile(file)
+      return this.resolveByName(entry.name, entry.fullPath || entry.name, -1)
+    },
+    async resolveFile(file) {
+      return this.resolveByName(file.name, file.webkitRelativePath || file.name, file.size)
+    },
+    async resolveByName(name, relPath, size) {
+      const chip = { path: '', name, isDir: false, isImage: false, pending: true }
+      this.draftAttachments = [...this.draftAttachments, chip]
+      try {
+        const info = await locateDroppedFile({ name, relPath, size })
+        this.draftAttachments = this.draftAttachments.filter((a) => a !== chip)
+        this.pushAttachment(info)
+        return info
+      } catch {
+        this.draftAttachments = this.draftAttachments.filter((a) => a !== chip)
+        return null
+      }
+    },
+    entryToFile(entry) {
+      return new Promise((resolve) => {
+        try {
+          entry.file((f) => resolve(f), () => resolve(null))
+        } catch {
+          resolve(null)
+        }
+      })
+    },
+    /** 文件夹拖入：取第一个文件的大小做匹配特征（目录本身没有 size） */
+    firstFileInDir(entry) {
+      return new Promise((resolve) => {
+        try {
+          const reader = entry.createReader()
+          reader.readEntries(async (list) => {
+            for (const ent of list || []) {
+              if (!ent.isDirectory) {
+                const f = await this.entryToFile(ent)
+                if (f) return resolve(f)
+              }
+            }
+            resolve(null)
+          }, () => resolve(null))
+        } catch {
+          resolve(null)
+        }
+      })
+    },
+    pushAttachment(info, note) {
+      if (!info?.path) return
+      if (this.draftAttachments.some((a) => a.path === info.path)) return
+      this.draftAttachments = [...this.draftAttachments, { ...info, note }]
+      if (note) this.notify('ok', note)
+    },
+    removeAttachment(pathToRemove) {
+      this.draftAttachments = this.draftAttachments.filter((a) => a.path !== pathToRemove || a.pending)
+    },
+
+    // ---------- 对话 ----------
+    useSuggestion(s) {
+      this.$refs.composerEl?.setText(s.text)
+    },
+    async onSend({ text, attachments }) {
+      if (this.busy) return
+      if (!(await this.ensureConfig())) return
+      this.notice = null
+      this.messages.push({
+        id: uid('u'),
+        role: 'user',
+        content: text,
+        attachments: attachments.map((a) => ({ ...a })),
+        ts: Date.now(),
+      })
+      this.draftAttachments = []
+      this.pinned = true
+      await this.runTurn()
+    },
+    /** 打开设置面板前刷新一次：窗口探测缓存等「服务端认知」可能已被对话或探测按钮更新 */
+    openSettings() {
+      this.settingsOpen = true
+      this.refreshConfig()
+    },
+    async ensureConfig() {
+      await this.refreshConfig()
+      if (!this.configReady) {
+        this.settingsOpen = true
+        this.notify('warn', '请先配置 Base URL / API Key / 模型名')
+        return false
+      }
+      return true
+    },
+    /** 熔断收尾后一键续跑：等价于用户手打「继续」，上下文（含工具结果）都还在 */
+    onContinue() {
+      if (this.busy) return
+      this.onSend({ text: '继续', attachments: [] })
+    },
+    /** 重新生成：丢掉最后一条助手回答，按同样的上下文再跑一轮 */
+    async regenerate(msg) {
+      if (this.busy) return
+      const idx = this.messages.findIndex((m) => m.id === msg.id)
+      if (idx > 0) this.messages = this.messages.slice(0, idx)
+      await this.runTurn()
+    },
+    async runTurn() {
+      this.messages.push({
+        id: uid('a'),
+        role: 'assistant',
+        content: '',
+        reasoning: '',
+        reasoningMs: 0,
+        toolCalls: [],
+        error: '',
+        status: 'streaming',
+        ts: Date.now(),
+      })
+      // 关键：改的必须是「reactive 数组里的代理对象」。若沿用 push 前的原始对象，
+      // 写入不会触发任何依赖 —— 流式期间界面会一直停在「正在思考」，直到回合结束
+      // 父组件因 busy 变化重渲染，才把累积的全文一次性刷出来（看着像卡死后吐一大坨）。
+      const asst = this.messages[this.messages.length - 1]
+      const asstId = asst.id
+      this.busy = true
+      this.pinned = true
+      const ctl = new AbortController()
+      this._abort = ctl
+      const thinkStartedAt = Date.now()
+      const freezeThinking = () => {
+        if (asst.reasoning && !asst.reasoningMs) asst.reasoningMs = Date.now() - thinkStartedAt
+      }
+
+      try {
+        await streamChat({
+          messages: this.toWire(this.messages.filter((m) => m.id !== asstId)),
+          cardContext: this.cardId ? { id: this.cardId } : undefined,
+          attachments: this.lastAttachments(),
+          signal: ctl.signal,
+          onEvent: (evt) => this.onEvent(evt, asst, freezeThinking),
+        })
+        if (asst.status === 'streaming') asst.status = 'done'
+      } catch (e) {
+        const aborted = ctl.signal.aborted || /abort/i.test(String(e?.message || e))
+        freezeThinking()
+        if (aborted) {
+          asst.status = 'aborted'
+        } else {
+          asst.error = String(e?.message || e)
+          asst.status = 'error'
+        }
+      } finally {
+        freezeThinking()
+        if (asst.status === 'streaming') asst.status = 'done'
+        this.busy = false
+        this._abort = null
+        this.persist()
+        this.$nextTick(() => this.scrollToBottom())
+      }
+    },
+    onEvent(evt, asst, freezeThinking) {
+      switch (evt.type) {
+        case 'reasoning-delta':
+          asst.reasoning += evt.text || ''
+          break
+        case 'text-delta':
+          freezeThinking()
+          asst.content += evt.text || ''
+          break
+        // 工具名先到、参数还在流式拼装：先占一行「调用中」，参数齐了由 tool-call 补齐
+        case 'tool-call-start':
+          freezeThinking()
+          if (!this.findToolRow(asst, evt)) {
+            asst.toolCalls.push({
+              toolCallId: evt.toolCallId || uid('tc'),
+              toolName: evt.toolName,
+              args: {},
+              pending: true,
+              result: undefined,
+              error: '',
+              startedAt: Date.now(),
+              ms: 0,
+            })
+          }
+          break
+        case 'tool-call': {
+          freezeThinking()
+          const row = this.findToolRow(asst, evt)
+          if (row) {
+            if (evt.toolCallId) row.toolCallId = evt.toolCallId
+            if (evt.toolName) row.toolName = evt.toolName
+            row.args = evt.args || {}
+            row.pending = false
+          } else {
+            asst.toolCalls.push({
+              toolCallId: evt.toolCallId || uid('tc'),
+              toolName: evt.toolName,
+              args: evt.args || {},
+              result: undefined,
+              error: '',
+              startedAt: Date.now(),
+              ms: 0,
+            })
+          }
+          break
+        }
+        case 'tool-result': {
+          const tc = asst.toolCalls.find((t) => t.toolCallId === evt.toolCallId || (!evt.toolCallId && t.toolName === evt.toolName && t.result === undefined))
+          if (tc) {
+            tc.result = evt.result ?? ''
+            tc.truncated = Boolean(evt.truncated)
+            if (evt.error) tc.error = String(evt.error)
+            if (evt.image) tc.image = evt.image
+            tc.ms = Date.now() - (tc.startedAt || Date.now())
+          }
+          break
+        }
+        case 'approval-request': {
+          // skill_exec / shell_exec：先占行再等用户点确认，后端流在此期间挂起
+          const row = this.findToolRow(asst, evt) || asst.toolCalls[asst.toolCalls.length - 1]
+          if (row && row.toolName === evt.toolName && row.result === undefined) {
+            row.approvalId = evt.approvalId
+            // 只补 command（命令原文），不覆盖真实参数：evt.args 是审批用的 {command} 精简体
+            if (evt.command) row.command = evt.command
+            row.needsApproval = true
+          } else {
+            asst.toolCalls.push({
+              toolCallId: evt.toolCallId || uid('tc'),
+              toolName: evt.toolName,
+              args: evt.args || {},
+              command: evt.command || '',
+              approvalId: evt.approvalId,
+              needsApproval: true,
+              result: undefined,
+              error: '',
+              startedAt: Date.now(),
+              ms: 0,
+            })
+          }
+          break
+        }
+        case 'approval-decided': {
+          const row = (asst.toolCalls || []).find((t) => t.approvalId === evt.approvalId)
+          if (row) {
+            row.needsApproval = false
+            row.approvalNote = evt.ok
+              ? evt.scope === 'turn'
+                ? '已允许，本回合后续同类执行不再询问…'
+                : '已允许，执行中…'
+              : '已拒绝执行'
+          }
+          break
+        }
+        case 'approval-auto': {
+          // 免确认策略命中：后端没弹审批就直接执行了，这里把命令原文与说明补到对应工具行，
+          // 用户照样看得见「跑了什么」——免确认不等于无痕迹（后端另写 .cache/ai-audit.log）
+          const row =
+            this.findToolRow(asst, evt) ||
+            [...(asst.toolCalls || [])].reverse().find((t) => t.toolName === evt.toolName && t.result === undefined)
+          if (row) {
+            if (evt.command) row.command = evt.command
+            row.autoApproved = true
+            row.approvalNote = '按设置免确认执行'
+          }
+          break
+        }
+        case 'notice':
+          this.notify('warn', evt.message || '')
+          break
+        case 'context-usage':
+          // 输入框圆环：本轮实际送进网关的上下文 token / 预算（有网关窗口认知时环按窗口算）
+          this.contextUsage = { used: Number(evt.used) || 0, total: Number(evt.total) || 0, window: Number(evt.window) || 0 }
+          break
+        case 'turn-ended':
+          // 熔断 / 硬顶收尾：横幅 6 秒就没了，这里落进消息本体，重开面板仍看得见「这轮为什么停」
+          asst.budget = { reason: String(evt.reason || ''), message: String(evt.message || '') }
+          break
+        case 'error':
+          asst.error = asst.error ? `${asst.error}\n${evt.message}` : String(evt.message || '')
+          asst.status = 'error'
+          break
+        case 'aborted':
+          asst.status = 'aborted'
+          break
+        case 'done':
+          break
+        default:
+          break
+      }
+      this.$nextTick(() => this.scrollToBottom())
+    },
+    /** 审批回落：把用户的允许（一次 / 本回合）或拒绝交给挂起中的后端流 */
+    async onApproval({ tc, ok, scope = 'once' }) {
+      if (!tc?.approvalId) return
+      tc.needsApproval = false
+      tc.approvalNote = ok ? (scope === 'turn' ? '已允许，本回合后续同类执行不再询问…' : '已允许，执行中…') : '已拒绝执行'
+      try {
+        await approveToolCall({ approvalId: tc.approvalId, ok, scope })
+      } catch (e) {
+        this.notify('warn', `审批提交失败：${e.message}`)
+      }
+    },
+    /**
+     * 工具行定位：优先按 toolCallId，其次认「同名且仍在等参数」的占位行。
+     * 占位行的 id 是本地生成的，参数齐了会被真实 id 覆盖，故两条路径都能对上。
+     */
+    findToolRow(asst, evt) {
+      const list = asst.toolCalls || []
+      if (evt.toolCallId) {
+        const byId = list.find((t) => t.toolCallId === evt.toolCallId)
+        if (byId) return byId
+      }
+      return list.find((t) => t.pending && t.toolName === evt.toolName) || null
+    },
+    stop() {
+      if (!this._abort) return
+      this._abort.abort()
+      this.notify('ok', '已终止本次生成')
+    },
+    onEscape() {
+      if (this.settingsOpen) {
+        this.settingsOpen = false
+        return
+      }
+      if (this.busy) {
+        this.stop()
+        return
+      }
+      this.$emit('close')
+    },
+    /** 最近一条用户消息挂载的附件（后端会写进 system prompt 的「本地文件」段） */
+    lastAttachments() {
+      for (let i = this.messages.length - 1; i >= 0; i--) {
+        const m = this.messages[i]
+        if (m.role === 'user') return (m.attachments || []).map((a) => ({ path: a.path, name: a.name, isDir: a.isDir, isImage: a.isImage }))
+      }
+      return []
+    },
+    /**
+     * 组装上行 messages：用户消息把附件路径写成清单（路径即上下文，不上传文件），
+     * 助手消息保留 toolCalls 供后端还原 tool_calls / tool 结果，续聊上下文才合法。
+     */
+    toWire(list) {
+      return list.map((m) => {
+        if (m.role === 'user') {
+          const atts = m.attachments || []
+          let content = m.content || ''
+          if (atts.length) {
+            const lines = atts.map((a) => `- ${a.isDir ? '文件夹' : a.isImage ? '图片' : '文件'}：${a.path}`)
+            content = `${content}${content ? '\n\n' : ''}[已挂载本地文件（仅本机路径，未上传；需要内容请用工具读取）]\n${lines.join('\n')}`
+          }
+          return { role: 'user', content }
+        }
+        // 被中止的轮次：只回传「真正执行过」的工具调用（有结果或报错），
+        // 参数还没流完就被中止的调用从未执行，回传会骗模型说它拿到了空结果。
+        const calls = (m.toolCalls || [])
+          .filter((tc) => tc.result !== undefined || tc.error)
+          .map((tc) => ({
+            toolCallId: tc.toolCallId,
+            toolName: tc.toolName,
+            args: tc.args || {},
+            result: typeof tc.result === 'string' ? tc.result.slice(0, 4000) : tc.result,
+            error: tc.error || '',
+          }))
+        // 中止标记只进上下文、不进界面：让模型知道上一轮被打断、做到哪了，
+        // 用户说「继续」时能接着干而不是从零重来（空 assistant 消息对模型等于没有信息）。
+        let content = m.content || ''
+        if (m.status === 'aborted') {
+          content = content
+            ? `${content}\n\n[本轮生成被用户手动中止，以上为已完成部分；未完成的步骤没有执行，请从中断处继续。]`
+            : '[上一轮被用户手动中止于思考/工具阶段，没有产出可用内容；请重新规划并继续完成用户的目标。]'
+        }
+        return { role: 'assistant', content, toolCalls: calls }
+      })
+    },
+
+    // ---------- 滚动 ----------
+    onScroll() {
+      const el = this.$refs.listEl
+      if (!el) return
+      this.pinned = el.scrollHeight - el.scrollTop - el.clientHeight < 48
+    },
+    scrollToBottom(force = false) {
+      const el = this.$refs.listEl
+      if (!el) return
+      if (!force && !this.pinned) return
+      el.scrollTop = el.scrollHeight
+    },
+    stopTickers() {
+      if (this._saveTimer) clearTimeout(this._saveTimer)
+      this._saveTimer = 0
+    },
+    notify(type, text) {
+      this.notice = { type, text }
+      if (this._noticeTimer) clearTimeout(this._noticeTimer)
+      this._noticeTimer = setTimeout(() => {
+        this.notice = null
+      }, 6000)
+    },
+  },
+}
+</script>