cardbuddy 0.8.0 → 0.9.0

package/dist/vendored/api.js

@@ -127,6 +127,49 @@ export async function apiFetch(path, opts = {}) {
  * @param {(state:'connecting'|'open'|'closed')=>void} [onState] 连接态变化回调，
  *   用于驱动顶栏「连接」图标实时反映服务端运行态（SSE readyState / Vite HMR ws 生命周期）。
  */
+/**
+ * 共享 SSE 连接池：浏览器对同一 origin 的 HTTP/1.1 并发连接约 6 条，而 /__events 是长连接，
+ * 每条订阅各开一个 EventSource 会常驻占位（cards-changed + code-bridge 已占 2 条，服务日志
+ * 面板再占 1 条后，普通 API 请求只剩 3 条并发余量，截图 / 校验这类慢请求易排队）。
+ * 三类事件本就同源同端点，故按 base 复用一条连接、按事件名分发，引用计数归零才真正 close。
+ * @type {Map<string, { es: EventSource, states: Set<(s:string)=>void>, refs: number }>}
+ */
+const ssePool = new Map()
+
+function acquireSse(base) {
+  let entry = ssePool.get(base)
+  if (!entry) {
+    // EventSource 不能自定义请求头，配置了 token 时改经查询参数携带（服务端 tokenMiddleware 已支持）
+    const token = devServiceToken()
+    const es = new EventSource(base + '/__events' + (token ? '?token=' + encodeURIComponent(token) : ''))
+    entry = { es, states: new Set(), refs: 0 }
+    ssePool.set(base, entry)
+    es.onopen = () => {
+      for (const cb of entry.states) cb('open')
+    }
+    es.onerror = () => {
+      // 断链时 onerror 触发，浏览器会自动重连：
+      // readyState===0(CONNECTING) 表示正在重连；===2(CLOSED) 表示已彻底关闭（如显式 close）。
+      const state = es.readyState === 2 ? 'closed' : 'connecting'
+      for (const cb of entry.states) cb(state)
+    }
+  }
+  entry.refs++
+  return entry
+}
+
+function releaseSse(base, entry) {
+  entry.refs = Math.max(0, entry.refs - 1)
+  if (entry.refs === 0 && ssePool.get(base) === entry) {
+    ssePool.delete(base)
+    try {
+      entry.es.close()
+    } catch (_) {
+      /* ignore */
+    }
+  }
+}
+
 /**
  * 通用 SSE 订阅工厂：监听 /__events 上的一组事件名，返回取消订阅函数。
  * base === ''（开发期同源代理）同样走 SSE：请求相对当前页面 host，由 Vite 转发到 8787，
@@ -140,8 +183,8 @@ function makeSseSubscriber(events, { hmrEvents = [] } = {}) {
     const base = resolveApiBase()
     const emit = (s) => { if (typeof onState === 'function') onState(s) }
     if (base !== null) {
-      // 本地服务 / 同源代理：SSE（浏览器原生自动重连）
-      const es = new EventSource(base + '/__events')
+      // 本地服务 / 同源代理：SSE（浏览器原生自动重连），同 base 复用一条连接
+      const entry = acquireSse(base)
       const handler = (e) => {
         try {
           cb(e.data ? JSON.parse(e.data) : {})
@@ -149,15 +192,15 @@ function makeSseSubscriber(events, { hmrEvents = [] } = {}) {
           cb({})
         }
       }
-      for (const name of events) es.addEventListener(name, handler)
-      es.onopen = () => emit('open')
-      es.onerror = () => {
-        // 断链时 onerror 触发，浏览器会自动重连：
-        // readyState===0(CONNECTING) 表示正在重连；===2(CLOSED) 表示已彻底关闭（如显式 close）。
-        emit(es.readyState === 2 ? 'closed' : 'connecting')
+      for (const name of events) entry.es.addEventListener(name, handler)
+      entry.states.add(emit)
+      // 复用已建立的连接时立即回写真实态，避免顶栏「连接」图标无谓闪「连接中」
+      emit(entry.es.readyState === 1 ? 'open' : entry.es.readyState === 2 ? 'closed' : 'connecting')
+      return () => {
+        for (const name of events) entry.es.removeEventListener(name, handler)
+        entry.states.delete(emit)
+        releaseSse(base, entry)
       }
-      emit('connecting') // 刚创建即处于 CONNECTING，先置为「连接中」
-      return () => es.close()
     }
     // 同源 dev server：沿用 Vite HMR（底层 WebSocket，同样具备连接态）
     if (import.meta.hot && hmrEvents.length) {
@@ -180,6 +223,29 @@ export const subscribeCardsChanged = makeSseSubscriber(['cards-changed'], { hmrE
 /** 订阅外部编辑器代码桥事件（code-bridge-changed / code-bridge-closed）。 */
 export const subscribeCodeBridge = makeSseSubscriber(['code-bridge-changed', 'code-bridge-closed'])
 
+/**
+ * 订阅本地服务日志流（event: service-log）。
+ * 载荷 { lines: [{ seq, t, text }] }，text 为含 ANSI 的原始终端行，由 preview/ansi.js 还原配色。
+ *
+ * 连接开销说明：每条订阅各占一个 EventSource（浏览器对同源的并发连接有限），
+ * 因此服务日志采用「面板打开才订阅、关闭即退订」的懒连接策略（见 DebugPanel），
+ * 不与常驻的 cards-changed / code-bridge 抢连接。
+ */
+export const subscribeServiceLog = makeSseSubscriber(['service-log'])
+
+/**
+ * 取服务日志历史 / 断线补漏（GET /__logs）。
+ * @param {{ limit?: number, since?: number }} [opts] since：只取 seq 大于该值的行
+ * @returns {Promise<{ ok:boolean, enabled:boolean, seq:number, dropped:number, buffered:number, startedAt:number, pid:number, lines:{seq:number,t:number,text:string}[] }>}
+ */
+export async function fetchServiceLogs({ limit = 300, since = 0 } = {}) {
+  const q = new URLSearchParams({ limit: String(limit) })
+  if (since) q.set('since', String(since))
+  const res = await apiFetch('/__logs?' + q.toString())
+  if (!res.ok) throw new Error('HTTP ' + res.status)
+  return res.json()
+}
+
 /**
  * 代码桥 REST 封装（端点见 server/core/codeBridge.js）：
  * open 建立会话并拉起编辑器；fetch 拉取外部保存后的最新代码；

package/dist/vendored/components/CardGallery.vue

@@ -10,9 +10,9 @@
   搜索框按 id / 名称过滤；Esc 或点遮罩关闭；当前选中卡高亮。
 -->
 <template>
-  <transition name="cg-fade">
+  <transition name="modal">
     <div v-if="visible" class="cg-mask" @click.self="close">
-      <div class="cg-modal" role="dialog" aria-modal="true" aria-label="卡片网格预览">
+      <div class="cg-modal modal-card" role="dialog" aria-modal="true" aria-label="卡片网格预览">
         <header class="cg-modal__head">
           <div class="cg-modal__title">
             <svg class="app__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-grid" /></svg>

package/dist/vendored/components/ComponentPalette.vue

@@ -5,7 +5,7 @@
 -->
 <template>
   <div class="cp__mask" @click.self="$emit('close')">
-    <div class="cp" role="dialog" aria-label="选择组件类型">
+    <div class="cp modal-card" role="dialog" aria-label="选择组件类型">
       <div class="cp__head">
         <span class="cp__title">添加组件</span>
         <span class="cp__hint">选择要插入的组件类型</span>

package/dist/vendored/components/ConfirmDialog.vue

@@ -1,7 +1,7 @@
 <template>
-  <transition name="confirm-fade">
+  <transition name="modal">
     <div v-if="visible" class="confirm-mask" @click.self="$emit('cancel')">
-      <div class="confirm-modal" role="alertdialog" aria-modal="true" :aria-label="title">
+      <div class="confirm-modal modal-card" role="alertdialog" aria-modal="true" :aria-label="title">
         <div class="confirm-modal__title" :class="{ 'is-danger': severity === 'danger', 'is-warn': severity === 'warn' }">
           <svg v-if="severity === 'danger'" class="confirm-modal__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-no-entry" /></svg>
           <svg v-else-if="severity === 'warn'" class="confirm-modal__icon" 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>

package/dist/vendored/components/DebugPanel.vue

@@ -13,8 +13,8 @@
   RadioButton·CheckGroup 选择 / globalSet 等只写这里），不污染 rootScope、不触发保存
   高亮，事件代码里 `this.data.xxx` 也读这里，调试变更永不落盘。
 
-  注：「绑定错误」已移至底部状态栏（类 VSCode 面板），点击状态栏问题指示器在
-  底部弹出错误面板查看，不再作为此处的标签页。
+  注：「变量绑定」已移至底部状态栏（类 VSCode 面板），点击状态栏指示器在
+  底部弹出面板查看，不再作为此处的标签页。
 -->
 <template>
   <aside class="debug">
@@ -147,16 +147,18 @@
       节点属性面板：组件结构 tab 双击节点弹出（可编辑写回）。
       事件编辑已并入本面板的「事件」页签（meta 驱动），不再有独立弹层。
     -->
-    <NodeInspector
-      v-if="inspectingComp"
-      :key="inspectKey"
-      :comp="inspectingComp"
-      :comp-names="compNames"
-      :rt="rt"
-      @apply="onApply"
-      @commit="onCommit"
-      @close="inspectingComp = null"
-    />
+    <Transition name="modal">
+      <NodeInspector
+        v-if="inspectingComp"
+        :key="inspectKey"
+        :comp="inspectingComp"
+        :comp-names="compNames"
+        :rt="rt"
+        @apply="onApply"
+        @commit="onCommit"
+        @close="inspectingComp = null"
+      />
+    </Transition>
 
    <!--
      事件编辑弹框：点击结构树「事件」徽标时单独弹出，与属性面板解耦。
@@ -182,7 +184,7 @@
       不触发保存高亮、调试变更永不落盘。
     -->
     <!--
-      底部弹出面板（运行态 / 事件 / 绑定错误）：Teleport 到 App 的 #app-workside-panels，
+      底部弹出面板（运行态 / 事件 / 变量绑定）：Teleport 到 App 的 #app-workside-panels，
       宽度贯穿中右两栏、紧贴右缘（与共同底栏同一容器机制，贴近 VSCode 底部面板）。
       defer：目标与 Teleport 同属本应用组件树，挂载时目标尚未插入 document，须等整个
       应用挂载完成后再解析（Vue 3.5+）。chrome-off 截图模式下禁用 Teleport，回落本面板内。
@@ -212,7 +214,7 @@
       中右两栏共同的底栏（贴近 VSCode 布局）。defer：目标与 Teleport 同属本应用组件树，
       挂载时目标尚未插入 document，须等整个应用挂载完成后再解析（Vue 3.5+）。
       chrome-off 截图模式下禁用 Teleport，回落到本面板内渲染（随面板一起隐藏）。
-      左侧「问题」指示器展示绑定错误数，点击弹出/收起错误面板；右侧展示当前卡片与卡片总数。
+      左侧三枚指示器（运行态 / 变量绑定 / 事件）点击弹出或收起对应底部面板；右侧展示当前卡片与卡片总数。
     -->
     <Teleport defer to="#app-workside-bar" :disabled="chromeOff">
       <section class="statusbar">
@@ -244,17 +246,20 @@
         :title="eventStatusTitle"
       >
         <span class="statusbar__icon">{{ eventCount ? (eventErrors.length ? '⚠' : '☰') : '✓' }}</span>
-        <span>{{ eventCount ? eventCount + ' 条事件' : '无事件' }}</span>
+        <span>{{ eventCount ? eventCount + ' 条事件记录' : '无事件记录' }}</span>
       </button>
-      <!-- 本地开发服务连接状态：连接图标 + 状态文案，颜色与右上角「连接」按钮实时同步（复用 devSvcClass / devSvcTitle / devSvcLabel） -->
-      <span
+      <!-- 本地开发服务连接状态：连接图标 + 状态文案，颜色与右上角「连接」按钮实时同步（复用 devSvcClass / devSvcTitle / devSvcLabel）。
+           可点击：弹出 / 收起底部「服务日志」面板（实时镜像所连 cardbuddy 终端输出），展开态用 is-open 底线标识。 -->
+      <button
         class="statusbar__item statusbar__conn"
-        :class="devSvcClass"
-        :title="devSvcTitle"
+        :class="[devSvcClass, { 'is-open': errorPanel === 'svclog' }]"
+        type="button"
+        :title="devSvcTitle + '（点击查看服务日志）'"
+        @click="toggleErrorPanel('svclog')"
       >
         <svg class="statusbar__conn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-link" /></svg>
         <span>{{ devSvcLabel }}</span>
-      </span>
+      </button>
         <span class="statusbar__spacer"></span>
         <span class="statusbar__item statusbar__item--right">{{ cardId }}</span>
         <span class="statusbar__item statusbar__item--right">{{ cardCount }} 张卡片</span>
@@ -266,8 +271,13 @@
       <!-- 顶缘拖拽条：与竖向分隔条同规格（命中 6px / 高亮 3px），仅分割边缘触发 -->
       <div class="panelhead__edge" :class="{ 'is-dragging': panelDragging }" title="拖拽调整面板高度" @mousedown.prevent="startResize"></div>
       <div class="errpanel__head">
-        <span class="errpanel__title">{{ errorPanel === 'event' ? '事件面板' : '绑定错误' }}</span>
-        <!-- 事件面板：日志 / 错误 tab 并入头部单行（一次只看一类）；绑定错误面板无 tab -->
+        <span class="errpanel__title">{{ errorPanel === 'svclog' ? '服务日志' : errorPanel === 'event' ? '事件记录' : '绑定错误记录' }}</span>
+        <!-- 服务日志：标题后给一枚读数（行数 + 实时态），与事件面板 tab 同一位置语言 -->
+        <span v-if="errorPanel === 'svclog'" class="svclog__meta">
+          {{ svcLogs.length }} 行<span v-if="svcLogDropped"> · 已滚动淘汰 {{ svcLogDropped }}</span>
+          <i class="svclog__dot" :class="svcLogLive ? 'is-live' : 'is-off'"></i>{{ svcLogLive ? '实时' : '未连接' }}
+        </span>
+        <!-- 事件面板：日志 / 错误 tab 并入头部单行（一次只看一类）；变量绑定面板无 tab -->
         <div v-if="errorPanel === 'event'" class="errpanel__tabs">
           <button
             type="button"
@@ -299,14 +309,75 @@
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-trash" /></svg>
           </button>
+          <button
+            v-if="errorPanel === 'svclog'"
+            class="errpanel__iconbtn"
+            :class="{ 'is-done': svcCopied }"
+            type="button"
+            :disabled="!svcLogs.length"
+            :title="svcCopied ? '已复制' : '复制全部日志（纯文本，去 ANSI）'"
+            @click="copySvcLogs"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
+          </button>
+          <button
+            v-if="errorPanel === 'svclog'"
+            class="errpanel__iconbtn svclog__follow"
+            :class="{ 'is-on': svcLogFollow }"
+            type="button"
+            :title="svcLogFollow ? '跟随最新输出（点击暂停）' : '已暂停跟随（点击回到最新）'"
+            @click="toggleSvcFollow"
+          >
+            <!-- 下箭头图标：跟随最新输出 -->
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19" /><polyline points="19 12 12 19 5 12" /></svg>
+          </button>
+          <button
+            v-if="errorPanel === 'svclog'"
+            class="errpanel__iconbtn errpanel__clear"
+            type="button"
+            :disabled="!svcLogs.length"
+            title="清空面板（不影响服务端缓冲）"
+            @click="clearSvcLogs"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-trash" /></svg>
+          </button>
           <button class="errpanel__iconbtn errpanel__close" type="button" title="关闭" @click="errorPanel = ''">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" /></svg>
           </button>
         </span>
       </div>
-      <div class="errpanel__body">
+      <div
+        class="errpanel__body"
+        :class="{ 'errpanel__body--term': errorPanel === 'svclog' && svcLogs.length }"
+        ref="errBody"
+        @scroll.passive="onErrBodyScroll"
+      >
+        <!-- 服务日志面板：本地服务（cardbuddy）终端输出的实时镜像。
+             服务端按行镜像 stdout/stderr 并保留原始 ANSI，这里经 preview/ansi.js 还原配色，
+             因此面板固定深色终端底（chalk 调色板取自深色令牌，浅底不可读）。 -->
+        <template v-if="errorPanel === 'svclog'">
+          <div v-if="!svcLogs.length" class="empty-state">
+            <span class="empty-state__badge" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="4 17 10 11 4 5" />
+                <line x1="12" y1="19" x2="20" y2="19" />
+              </svg>
+            </span>
+            <p class="debug__empty">{{ svcEmptyText }}</p>
+            <p class="empty-state__hint">{{ svcEmptyHint }}</p>
+          </div>
+          <div v-else class="svclog">
+            <div
+              v-for="row in svcLogs"
+              :key="row.seq || row.t"
+              class="svclog__line"
+              :class="'svclog__line--' + row.level"
+            ><span class="svclog__text" v-html="row.html"></span></div>
+          </div>
+        </template>
         <!-- 事件面板：按当前 tab 只渲染日志或错误一类 -->
-        <template v-if="errorPanel === 'event'">
+        <template v-else-if="errorPanel === 'event'">
           <template v-if="eventTab === 'log'">
             <!-- 空状态占位：与 API 调用面板同款（虚线徽章 + 线性图标 + 文案 + 弱提示） -->
             <div v-if="!logs.length" class="empty-state">
@@ -353,7 +424,7 @@
             </ul>
           </template>
         </template>
-        <!-- 绑定错误面板：仅错误列表 -->
+        <!-- 变量绑定面板：仅错误列表 -->
         <template v-else>
           <div v-if="!panelErrors.length" class="empty-state">
             <span class="empty-state__badge" aria-hidden="true">
@@ -394,7 +465,38 @@ import { nodeClipboard } from '@/runtime/clipboard-node.js'
 import { CodeJar } from 'codejar'
 import Prism from 'prismjs'
 import 'prismjs/components/prism-json'
-import { apiFetch } from '@/api.js'
+import { apiFetch, subscribeServiceLog, fetchServiceLogs } from '@/api.js'
+// 服务日志面板：终端 ANSI（SGR）→ HTML，1:1 还原 cardbuddy 的 chalk 配色
+import { ansiToHtml, stripAnsi } from '@/ansi.js'
+
+/** 服务日志在前端保留的最大行数（与服务端环形缓冲同量级，超出裁剪最旧的）。 */
+const SVC_MAX_LINES = 800
+
+/**
+ * 行级别判定：只认 logger.js 的行首标签（HH:MM:SS.mmm INFO/OK/WARN/ERR），
+ * 其余输出（console.* / 第三方 / vite）统一 info，避免把卡片内容里的「错误」字样误判。
+ */
+function svcLevelOf(plain) {
+  const m = /^\d{2}:\d{2}:\d{2}\.\d{3}\s+(INFO|OK\s|WARN|ERR)\b/.exec(plain)
+  if (m) {
+    const tag = m[1].trim()
+    return tag === 'ERR' ? 'error' : tag === 'WARN' ? 'warn' : tag === 'OK' ? 'ok' : 'info'
+  }
+  return 'info'
+}
+
+/** 服务端日志行 { seq, t, text } → 面板行（ANSI 转 HTML 只做一次，避免每次重渲染重复解析）。 */
+function toSvcRow(line) {
+  const text = String(line && line.text != null ? line.text : '')
+  const plain = stripAnsi(text)
+  return {
+    seq: Number(line && line.seq) || 0,
+    t: Number(line && line.t) || 0,
+    level: svcLevelOf(plain),
+    plain,
+    html: ansiToHtml(text),
+  }
+}
 
 // copyText 已抽到 @/runtime/clipboard.js，供 DebugPanel 与 NodeInspector 共用
 
@@ -437,6 +539,9 @@ export default {
     devSvcClass: { type: String, default: 'app__btn--warn' },
     devSvcTitle: { type: String, default: '' },
     devSvcLabel: { type: String, default: '' },
+    // 本地服务连接态（'' | unconfigured | connecting | open | closed）：
+    // 服务日志面板据此给出空态文案（未配置 / 连接中 / 已断开）。
+    devSvcConn: { type: String, default: '' },
     // 纯净截图模式（?chrome=off）：禁用状态栏 Teleport，使其留在本面板内随面板隐藏
     chromeOff: { type: Boolean, default: false },
   },
@@ -444,13 +549,26 @@ export default {
     return {
       copied: false,
       copyTimer: null,
-      // 底部错误面板模式：''（收起） | 'binding'（绑定错误） | 'event'（事件执行错误）
+      // 底部面板模式：''（收起） | 'binding'（变量绑定错误） | 'event'（事件日志 / 执行错误）
       errorPanel: '',
       // 事件面板内部 tab：'log'（主动日志） | 'err'（执行错误），打开面板时按是否有错误自动定位
       eventTab: 'log',
+      // 服务日志面板（errorPanel === 'svclog'）：本地服务终端输出的实时镜像
+      svcLogs: [],
+      // 已收到的最大 seq：断线重连后用 GET /__logs?since= 精确补齐缺口
+      svcLogSeq: 0,
+      // 清空面板时记录的水位线：此后取历史不会把已清掉的行再拉回来
+      svcLogFloor: 0,
+      svcLogLive: false,
+      // 自动跟随最新输出；用户向上翻阅即暂停，回到底部自动恢复
+      svcLogFollow: true,
+      svcLogDropped: 0,
+      svcLogLoading: false,
+      svcLogErr: '',
+      svcCopied: false,
       // 运行态面板：默认收起；点击状态栏「运行态」指示器切换
       statePanelOpen: false,
-      // 运行态 / 绑定错误 / 事件 三个底部面板互斥，共用同一高度变量（px）；
+      // 运行态 / 变量绑定 / 事件 三个底部面板互斥，共用同一高度变量（px）；
       // 可被顶部抓手拖拽调整，并持久化到 localStorage（cardbuddy:debug-panel-height）
       panelH: this.loadPanelH(),
       // 底部面板头部拖拽进行中：头部高亮与竖向分隔条 .is-dragging 同一语言
@@ -476,6 +594,24 @@ export default {
     }
   },
   computed: {
+    /** 服务日志空态标题：按连接态区分「没配 / 没连上 / 连上了但还没输出」 */
+    svcEmptyText() {
+      if (this.devSvcConn === 'unconfigured') return '未配置本地开发服务'
+      if (this.devSvcConn === 'open') return '暂无服务日志'
+      return '本地服务未连接'
+    },
+    svcEmptyHint() {
+      if (this.svcLogErr) {
+        return '取历史失败：' + this.svcLogErr + '（本地服务需升级到支持 /__logs 的 cardbuddy 版本）'
+      }
+      if (this.devSvcConn === 'unconfigured') {
+        return '在顶栏「连接」中配置本地开发服务地址后，这里会实时镜像该服务终端的彩色输出'
+      }
+      if (this.devSvcConn === 'open') {
+        return 'cardbuddy 终端的输出（含配色）会实时镜像到这里；试试同步、保存、校验或截图'
+      }
+      return '连接恢复后自动继续；服务端保留最近 ' + SVC_MAX_LINES + ' 行历史，重连不丢'
+    },
     // 依赖 revision，使 setData 后数据绑定实时刷新
     scopeText() {
       void this.rt.revision
@@ -513,8 +649,8 @@ export default {
       return 'is-ok'
     },
     eventStatusTitle() {
-      if (this.eventErrors.length) return '查看事件面板（含错误）'
-      if (this.logs.length) return '查看事件面板（含日志）'
+      if (this.eventErrors.length) return '查看事件（含错误）'
+      if (this.logs.length) return '查看事件（含日志）'
       return '无事件记录'
     },
     panelErrors() {
@@ -544,6 +680,12 @@ export default {
     },
   },
   watch: {
+    // 服务日志采用懒订阅：面板打开才建 SSE（浏览器对同源并发连接有限，不与
+    // cards-changed / code-bridge 常驻连接抢位），关闭即退订，历史由服务端缓冲补。
+    errorPanel(mode) {
+      if (mode === 'svclog') this.startSvcLog()
+      else this.stopSvcLog()
+    },
     // 切换卡片时退出 Raw 模式，避免编辑内容与新卡片数据不一致；
     // 同时关闭属性面板，避免展示旧卡片节点；并拉取导入来源元数据。
     cardId: {
@@ -587,9 +729,10 @@ export default {
     // DebugPanel 一般常驻，但保险起见卸载时销毁 CodeJar、清理可能残留的拖拽监听
     this.destroyJar()
     this.cancelResize()
+    this.stopSvcLog()
   },
   methods: {
-    // 三个底部面板互斥：运行态 / 绑定错误 / 事件 不会同时出现。
+    // 三个底部面板互斥：运行态 / 变量绑定 / 事件 不会同时出现。
     // 点开运行态即关闭错误/事件面板。
     toggleStatePanel() {
       this.statePanelOpen = !this.statePanelOpen
@@ -606,7 +749,7 @@ export default {
       }
     },
     /**
-     * 拖拽调整底部面板（运行态 / 绑定错误 / 事件）高度：挂在面板头部（已有 .statepanel__head /
+     * 拖拽调整底部面板（运行态 / 变量绑定 / 事件）高度：挂在面板头部（已有 .statepanel__head /
      * .errpanel__head，无专门拖拽节点），与预览区宽度调节同一套 mousedown 机制。
      * 在头部按下后监听 document 的 mousemove / mouseup；向上拖（clientY 减小）增大面板高度，
      * 向下拖减小，符合底部停靠面板的直觉。高度夹在 [120px, 视窗 60%]，并实时同步到两个面板
@@ -804,6 +947,107 @@ export default {
     clearEventLogs() {
       this.rt.clearEventLogs()
     },
+    /** 打开服务日志：先补历史（含上次清空后的水位线），再建立 SSE 实时订阅。 */
+    async startSvcLog() {
+      this.svcLogFollow = true
+      await this.pullSvcLogHistory(0)
+      if (this._svcUnsub) return
+      this._svcUnsub = subscribeServiceLog(
+        (payload) => this.appendSvcLogs(payload && payload.lines),
+        (state) => {
+          this.svcLogLive = state === 'open'
+          // 断线重连成功后按 seq 补漏：缓冲仍在服务端，不会丢行也不会重复
+          if (state === 'open' && this.svcLogSeq) this.pullSvcLogHistory(this.svcLogSeq)
+        }
+      )
+    },
+    /** 关闭服务日志：退订 SSE（面板数据保留，下次打开按水位线增量补齐）。 */
+    stopSvcLog() {
+      if (this._svcUnsub) {
+        this._svcUnsub()
+        this._svcUnsub = null
+      }
+      this.svcLogLive = false
+    },
+    /**
+     * 拉取服务日志历史。
+     * @param {number} since 0 = 全量（取最新 SVC_MAX_LINES 行）；>0 = 只取 seq 大于它的行
+     */
+    async pullSvcLogHistory(since) {
+      if (this.svcLogLoading) return
+      this.svcLogLoading = true
+      const from = Math.max(Number(since) || 0, this.svcLogFloor)
+      try {
+        const snap = await fetchServiceLogs({ limit: SVC_MAX_LINES, since: from })
+        this.svcLogErr = ''
+        if (snap && snap.enabled === false) {
+          this.svcLogErr = '服务端已关闭日志流（CARDBUDDY_STREAM_LOGS=0）'
+        } else {
+          this.svcLogDropped = (snap && snap.dropped) || 0
+          if (snap && snap.seq) this.svcLogSeq = Math.max(this.svcLogSeq, snap.seq)
+          const rows = ((snap && snap.lines) || []).map(toSvcRow)
+          // from > 0 是断线补漏：走同一条去重/裁剪/跟随逻辑，避免与实时流重叠
+          if (from) this.appendSvcLogs(rows)
+          else this.svcLogs = rows
+          this.scrollSvcToBottom(true)
+        }
+      } catch (e) {
+        this.svcLogErr = (e && e.message) || String(e)
+      } finally {
+        this.svcLogLoading = false
+      }
+    },
+    /** 追加实时行：按 seq 去重（历史与实时流可能重叠）、裁剪上限、按需跟随滚动。 */
+    appendSvcLogs(lines) {
+      const list = Array.isArray(lines) ? lines : []
+      if (!list.length) return
+      const rows = []
+      for (const l of list) {
+        // 既接受服务端原始行 { seq, t, text }，也接受已转换好的面板行（含 html）
+        const row = l && l.html != null ? l : toSvcRow(l)
+        const seq = Number(row.seq) || 0
+        if (seq && seq <= this.svcLogSeq) continue
+        if (seq) this.svcLogSeq = seq
+        rows.push(row)
+      }
+      if (!rows.length) return
+      const next = this.svcLogs.concat(rows)
+      this.svcLogs = next.length > SVC_MAX_LINES ? next.slice(next.length - SVC_MAX_LINES) : next
+      if (this.svcLogFollow) this.scrollSvcToBottom()
+    },
+    clearSvcLogs() {
+      this.svcLogFloor = this.svcLogSeq
+      this.svcLogs = []
+      this.svcLogDropped = 0
+    },
+    /** 复制全部日志为纯文本（去掉 ANSI），便于贴到工单 / IM 里排障。 */
+    async copySvcLogs() {
+      const ok = await copyText(this.svcLogs.map((r) => r.plain).join('\n'))
+      if (!ok) return
+      this.svcCopied = true
+      if (this._svcCopiedTimer) clearTimeout(this._svcCopiedTimer)
+      this._svcCopiedTimer = setTimeout(() => {
+        this.svcCopied = false
+      }, 1200)
+    },
+    toggleSvcFollow() {
+      this.svcLogFollow = !this.svcLogFollow
+      if (this.svcLogFollow) this.scrollSvcToBottom(true)
+    },
+    scrollSvcToBottom(force) {
+      if (!force && !this.svcLogFollow) return
+      this.$nextTick(() => {
+        const el = this.$refs.errBody
+        if (el) el.scrollTop = el.scrollHeight
+      })
+    },
+    /** 面板体滚动：距底 24px 内视为「在底部」并恢复跟随，否则暂停（用户正在往上翻）。 */
+    onErrBodyScroll() {
+      if (this.errorPanel !== 'svclog') return
+      const el = this.$refs.errBody
+      if (!el) return
+      this.svcLogFollow = el.scrollHeight - el.scrollTop - el.clientHeight < 24
+    },
     /** 日志 / 错误行首时间戳：HH:MM:SS 等宽对齐，单行多带一份定位信息 */
     fmtTime(t) {
       if (!t) return '--:--:--'

package/dist/vendored/components/EventEditor.vue

@@ -58,9 +58,11 @@
             </svg>
           </button>
           <div v-if="helpOpen" class="ee-help__mask" @click="helpOpen = false"></div>
+          <Transition name="pop">
           <div v-if="helpOpen" class="ee-help__pop" @click.stop>
             <p class="ee-help__text">{{ helpText }}</p>
           </div>
+          </Transition>
         </aside>
 
         <section class="ee-detail">

package/dist/vendored/components/NodeInspector.vue

@@ -16,7 +16,7 @@
 -->
 <template>
   <div class="ni-overlay">
-    <div class="ni-panel">
+    <div class="ni-panel modal-card">
       <div class="ni-head">
         <span class="ni-title">
           节点属性 · {{ compName }}

package/dist/vendored/components/RemotePreview.vue

@@ -1,6 +1,7 @@
 <template>
+  <transition name="modal">
   <div v-if="visible" class="rp-mask" @click.self="$emit('close')">
-    <div class="rp-card" role="dialog" aria-label="远端预览二维码">
+    <div class="rp-card modal-card" role="dialog" aria-label="远端预览二维码">
       <div class="rp-head">
         <span class="rp-title">远端预览（真机扫码）</span>
         <button class="rp-x" type="button" @click="$emit('close')" aria-label="关闭">×</button>
@@ -26,6 +27,7 @@
       </div>
     </div>
   </div>
+  </transition>
 </template>
 
 <script>

package/dist/vendored/components/StructureTree.vue

@@ -172,6 +172,7 @@
           <line x1="12" y1="17" x2="12" y2="17.01" />
         </svg>
       </button>
+      <Transition name="pop">
       <div v-if="helpOpen" class="st__help-pop" @click.stop>
         <div class="st__help-pop-head">
           <span class="st__help-pop-title">快捷键</span>
@@ -189,6 +190,7 @@
           </li>
         </ul>
       </div>
+      </Transition>
     </div>
   </div>
 </template>