agentworkshop 0.2.1

package/app/components/workshop/TranscriptTimeline.vue

@@ -0,0 +1,545 @@
+<script setup lang="ts">
+/**
+ * Transcript 时间线:过滤条(全部/消息/任务/错误)+ cluster 块流 + 自动吸底。
+ * 事件经 useClusteredBlocks 增量聚类(turn block,内容智能去重),
+ * 流式更新只命中变化的块组件;新帧到达保持吸底。
+ * 历史窗口:默认最近 200 帧(loadHistory);顶部"加载更早"按 beforeSeq 向上翻页。
+ */
+import { useEventsStore, type EventFilter } from '@/app/stores/workshop/events'
+import { useClusteredBlocks } from '@/app/composables/workshop/useClusteredBlocks'
+import { useWorkshopWs } from '@/app/composables/workshop/useWorkshopWs'
+import { useCodeCopy } from '@/app/composables/useCodeCopy'
+
+const { t } = useI18n()
+
+const props = defineProps<{ channelId: string }>()
+const events = useEventsStore()
+const { conn } = useWorkshopWs()
+// 代码块复制事件委托(文档级单例;时间线内所有 .code-copy 通用)
+useCodeCopy()
+const scroller = ref<HTMLElement | null>(null)
+const stickBottom = ref(true)
+
+/** 连接中骨架:WS 连接中且尚无块 → 按 block 行形态的 shimmer(open-tag skel 声部) */
+const connecting = computed(() =>
+  conn.state === 'connecting' && events.ring(props.channelId).items.length === 0)
+
+const filter = computed({
+  get: () => events.filters[props.channelId] ?? 'all',
+  set: (v: EventFilter) => events.setFilter(props.channelId, v),
+})
+
+const { blocks, totalEvents } = useClusteredBlocks(() => props.channelId)
+
+// ===== 向上翻页历史 =====
+const loadingEarlier = ref(false)
+const earlierExhausted = ref(false)
+/** 已加载事件数 vs 持久化总量 → 是否可能还有更早(粗判,点击时由 loadEarlier 探底) */
+const loadedCount = computed(() => events.ring(props.channelId).items.length)
+const maybeMore = computed(() => !earlierExhausted.value && loadedCount.value > 0)
+const loadEarlier = async (): Promise<void> => {
+  if (loadingEarlier.value || earlierExhausted.value) return
+  loadingEarlier.value = true
+  // 记住滚动位置:头部插入后保持视口锚定(不吸底跳变)
+  const el = scroller.value
+  const anchor = el ? { top: el.scrollTop, height: el.scrollHeight } : null
+  try {
+    const hasMore = await events.loadEarlier(props.channelId)
+    if (!hasMore) earlierExhausted.value = true
+    if (el && anchor) {
+      await nextTick()
+      el.scrollTop = el.scrollHeight - anchor.height + anchor.top
+    }
+  }
+  catch {
+    /* 历史拉取失败:保持按钮可重试,不打断时间线 */
+  }
+  finally {
+    loadingEarlier.value = false
+  }
+}
+
+const onScroll = (): void => {
+  const el = scroller.value
+  if (!el) return
+  stickBottom.value = el.scrollHeight - el.scrollTop - el.clientHeight < 120
+}
+
+// ===== 回底动画(open-tag jump-bottom:800ms ease-out,动画期抑制按钮闪烁) =====
+const scrollingDown = ref(false)
+/** 结构化滚动容器(绕开 vue-tsc 双 lib.dom 的 Element 类型不兼容) */
+type ScrollBox = { scrollTop: number, scrollHeight: number, clientHeight: number }
+const animateScroll = (el: ScrollBox, ms: number): Promise<void> =>
+  new Promise((resolve) => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      el.scrollTop = el.scrollHeight
+      resolve()
+      return
+    }
+    const from = el.scrollTop
+    const delta = el.scrollHeight - el.clientHeight - from
+    const t0 = performance.now()
+    const step = (t: number): void => {
+      const k = Math.min(1, (t - t0) / ms)
+      const eased = 1 - (1 - k) ** 3 // ease-out cubic
+      el.scrollTop = from + delta * eased
+      if (k < 1) requestAnimationFrame(step)
+      else resolve()
+    }
+    requestAnimationFrame(step)
+  })
+
+/** 跳回最新:滚底并恢复吸底(用户离开底部后新内容不再自动跟随) */
+const jumpToLatest = async (): Promise<void> => {
+  stickBottom.value = true
+  const el = scroller.value
+  if (!el) return
+  scrollingDown.value = true
+  try {
+    await animateScroll(el, 800)
+  }
+  finally {
+    scrollingDown.value = false
+  }
+}
+
+// ===== 新块进场编排(open-tag motion charter 移植) =====
+/**
+ * 只有实时新到的尾部块做进场动画(60ms stagger,600ms burst 窗口,上限 8 条);
+ * 整体重建(过滤切换/聚焦/历史回填——一次出现大量新 id)与组件首载直接显示,
+ * 不动画不延迟。映射:blockId → 进场延迟 ms;-1 = 不动画。
+ */
+type Stage = { enter: boolean, delay: number }
+const staged = ref(new Map<string, Stage>())
+let burstAt = 0
+let burstN = 0
+const mountedAt = Date.now()
+watch(blocks, (list, prev) => {
+  const prevIds = new Set((prev ?? []).map(b => b.id))
+  const fresh = list.filter(b => !prevIds.has(b.id))
+  const map = new Map<string, Stage>()
+  const wholesale = fresh.length === 0
+    || fresh.length > Math.max(8, Math.ceil(list.length * 0.4))
+    || Date.now() - mountedAt < 1500
+  if (!wholesale) {
+    const now = Date.now()
+    if (now - burstAt > 600) {
+      burstAt = now
+      burstN = 0
+    }
+  }
+  for (const b of list) {
+    const isFresh = !prevIds.has(b.id)
+    const delay = isFresh && !wholesale ? Math.min(burstN++, 7) * 60 : -1
+    map.set(b.id, { enter: delay >= 0, delay: Math.max(0, delay) })
+  }
+  staged.value = map
+}, { immediate: true })
+
+/** 吸底:新块出现 / seq 增长 / 块内容尺寸变化(可能高增)后滚到底 */
+const scrollToBottom = async (): Promise<void> => {
+  if (!stickBottom.value) return
+  await nextTick()
+  const el = scroller.value
+  if (el) el.scrollTop = el.scrollHeight
+}
+watch(() => blocks.value.length, () => {
+  void scrollToBottom()
+})
+watch(() => events.lastSeq(props.channelId), () => {
+  void scrollToBottom()
+})
+
+// 内容高度增长吸底:同一流块 delta 打字机让块变高(块数与 seq 不变或合并帧不推 seq),
+// ResizeObserver 观测内容列高度变化补一次滚底 —— 长输出不再"卡"在中途。
+// (观察器以结构化类型声明:绕开 vue-tsc 双 lib.dom 下 Element 类型不兼容问题)
+const columnEl = ref<HTMLElement | null>(null)
+let contentObserver: { disconnect(): void } | null = null
+onMounted(() => {
+  const el = scroller.value
+  const column = columnEl.value
+  if (!el || !column || typeof ResizeObserver === 'undefined') return
+  const Observer = ResizeObserver as unknown as
+    new (cb: () => void) => { observe(target: unknown): void, disconnect(): void }
+  const observer = new Observer(() => {
+    if (stickBottom.value) el.scrollTop = el.scrollHeight
+  })
+  observer.observe(column)
+  contentObserver = observer
+})
+onBeforeUnmount(() => {
+  contentObserver?.disconnect()
+  contentObserver = null
+})
+
+/** 断线待对齐(诚实连接态:open-tag 规范——不假装在线,提示同步中) */
+const syncing = computed(() => conn.pendingReplay || conn.state === 'connecting')
+/** 最后数据时间(x 秒前;无数据返回空) */
+const lastDataAgo = computed(() => {
+  if (!conn.lastDataAt) return ''
+  const s = Math.max(0, Math.round((Date.now() - conn.lastDataAt) / 1000))
+  return s < 5 ? t('transcriptTimeline.k3wwxl026') : t('transcriptTimeline.k2gyl6l027', { p0: s })
+})
+
+const filterOptions: Array<{ value: EventFilter, label: string }> = [
+  { value: 'all', label: t('transcriptTimeline.k3x4t1012') },
+  { value: 'key', label: t('transcriptTimeline.k3x5xi013') },
+  { value: 'messages', label: t('transcriptTimeline.k41ykc014') },
+  { value: 'tasks', label: t('transcriptTimeline.k3wcox015') },
+  { value: 'team', label: t('transcriptTimeline.k3y5ja016') },
+  { value: 'errors', label: t('transcriptTimeline.k49d2l017') },
+]
+
+// ===== 日期分隔线(open-tag date-divider 移植):块 firstAt 跨日 → 插入 hairline 分隔 =====
+const startOfDay = (iso: string): number => {
+  const d = new Date(iso)
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime()
+}
+const dayLabel = (iso: string): string => {
+  const d = new Date(iso)
+  const today = new Date()
+  const yesterday = new Date()
+  yesterday.setDate(today.getDate() - 1)
+  const sameDay = (a: Date, b: Date) =>
+    a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+  if (sameDay(d, today)) return t('transcriptTimeline.k3wcqg018')
+  if (sameDay(d, yesterday)) return t('transcriptTimeline.k40l1y019')
+  const y = d.getFullYear() !== today.getFullYear() ? t('transcriptTimeline.k2hda35028', { p0: d.getFullYear() }) : ''
+  return t('transcriptTimeline.kbs29zx029', { p0: y, p1: d.getMonth() + 1, p2: d.getDate() })
+}
+/** 每个块是否需要前置日界分隔(与上一块不同日,或首块) */
+const blockDayFlags = computed(() => {
+  const flags: Array<{ divider: string | null }> = []
+  let prevDay: number | null = null
+  for (const b of blocks.value) {
+    const day = startOfDay(b.firstAt)
+    flags.push({ divider: prevDay === null || day !== prevDay ? dayLabel(b.firstAt) : null })
+    prevDay = day
+  }
+  return flags
+})
+</script>
+
+<template>
+  <div class="transcript">
+    <div class="filter-bar">
+      <a-segmented
+        v-model:value="filter"
+        size="small"
+        :options="filterOptions"
+      />
+      <span class="count">{{ totalEvents }} {{ $t('transcriptTimeline.k1atjpx1005') }} {{ blocks.length }} {{ $t('transcriptTimeline.k4a9o007') }}</span>
+      <!-- 连接诚实态:断线待对齐 → 同步中脉搏;在线 → 最后数据时间(open-tag 规范) -->
+      <span
+        class="sync-chip"
+        :data-state="syncing ? 'syncing' : conn.state"
+        :title="syncing ? '连接中断,重连后将自动对齐缺失事件' : $t('transcriptTimeline.kglov3b025', { p0: lastDataAgo || '无' })"
+      >
+        <span
+          v-if="syncing"
+          class="sync-pulse"
+        />
+        <span
+          v-else-if="conn.state === 'open'"
+          class="i-tabler-point-filled sync-dot"
+        />
+        {{ syncing ? $t('transcriptTimeline.k3lmtk3008') : conn.state === 'open' ? lastDataAgo || $t('transcriptTimeline.k3y2p8020') : $t('transcriptTimeline.k44c2n024') }}
+      </span>
+    </div>
+    <div
+      ref="scroller"
+      class="scroller"
+      @scroll="onScroll"
+    >
+      <!-- 离底时的跳转最新悬浮按钮(流式新内容到达不强制跟随,点击回底;动画期抑制闪烁) -->
+      <button
+        v-if="!stickBottom && !scrollingDown"
+        class="jump-latest"
+        :title="$t('transcriptTimeline.kqu93z8001')"
+        @click="jumpToLatest"
+      >
+        <span class="i-tabler-arrow-down" />
+        {{ $t('transcriptTimeline.k40t11002') }}
+      </button>
+      <div
+        ref="columnEl"
+        class="column"
+      >
+        <button
+          v-if="maybeMore"
+          class="earlier-btn"
+          :disabled="loadingEarlier"
+          @click="loadEarlier"
+        >
+          {{ loadingEarlier ? $t('transcriptTimeline.k1br0ij9009') : $t('transcriptTimeline.kywgd38021') }}
+        </button>
+        <div
+          v-if="earlierExhausted && loadedCount > 0"
+          class="earlier-done"
+        >
+          {{ $t('transcriptTimeline.k1kbaden003') }}
+        </div>
+        <!-- 连接中骨架:头像圆 + 双行占位,布局对齐最终块形态(免跳变) -->
+        <div
+          v-if="connecting"
+          class="skel-stack"
+        >
+          <div
+            v-for="n in 3"
+            :key="n"
+            class="skel-row"
+            :style="{ '--d': `${(n - 1) * 0.12}s` }"
+          >
+            <span class="aw-skel skel-ava" />
+            <div class="skel-lines">
+              <span class="aw-skel skel-line name" />
+              <span class="aw-skel skel-line w70" />
+              <span class="aw-skel skel-line w45" />
+            </div>
+          </div>
+        </div>
+        <div
+          v-else-if="blocks.length === 0 && totalEvents === 0"
+          class="empty"
+        >
+          <!-- 同步中 ≠ 空:诚实区分(快照未到时不断言"无事件") -->
+          <span
+            v-if="syncing || conn.state !== 'open'"
+            class="i-tabler-refresh empty-icon"
+          />
+          <span
+            v-else
+            class="i-tabler-message-dots empty-icon"
+          />
+          <p class="empty-title">
+            {{ syncing || conn.state !== 'open' ? $t('transcriptTimeline.klnne6o010') : $t('transcriptTimeline.k126izdm022') }}
+          </p>
+          <p class="empty-hint">
+            {{ syncing || conn.state !== 'open' ? $t('transcriptTimeline.k1iuqpxj011') : $t('transcriptTimeline.kuyjpmi023') }}
+          </p>
+        </div>
+        <!-- 过滤空态:有事件但当前过滤无匹配(区别于真空) -->
+        <div
+          v-else-if="blocks.length === 0"
+          class="empty filtered"
+        >
+          <span class="i-tabler-filter-off empty-icon" />
+          <p class="empty-title">
+            {{ $t('transcriptTimeline.ktuo1zg004') }}
+          </p>
+          <p class="empty-hint">
+            「{{ filterOptions.find(o => o.value === filter)?.label ?? filter }}」{{ $t('transcriptTimeline.kapxgq4006') }}
+          </p>
+        </div>
+        <template
+          v-for="(b, i) in blocks"
+          :key="b.id"
+        >
+          <div
+            v-if="blockDayFlags[i]?.divider"
+            class="date-divider"
+          >
+            <span class="date-divider-label">{{ blockDayFlags[i]!.divider }}</span>
+          </div>
+          <workshop-event-block
+            :block="b"
+            :turn-start="i > 0 && blocks[i - 1]!.agentId !== b.agentId"
+            :compact="i > 0 && blocks[i - 1]!.agentId === b.agentId"
+            :enter-stage="staged.get(b.id)"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.transcript {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--paper); /* 灰画布:消息气泡白卡在此浮出(Slack 声部) */
+}
+.filter-bar {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 6px 16px;
+  background: var(--paper-raised);
+  border-bottom: 1px solid var(--line);
+}
+.count {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-fainter);
+}
+/* 连接诚实态 chip:同步中琥珀脉搏 / 在线绿点+最后数据时间 / 离线灰 */
+.sync-chip {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  margin-left: auto;
+  padding: 1px 8px;
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-faint);
+  background: var(--paper-deep);
+  border-radius: var(--radius-pill);
+}
+.sync-chip[data-state='syncing'] {
+  color: var(--tone-warning-dot);
+}
+.sync-chip[data-state='open'] .sync-dot {
+  font-size: 7px;
+  color: var(--tone-success-dot);
+}
+.sync-pulse {
+  width: 6px;
+  height: 6px;
+  background: var(--tone-warning-dot);
+  border-radius: 50%;
+  animation: sync-breath 1.2s ease-in-out infinite;
+}
+@keyframes sync-breath {
+  0%, 100% { opacity: 0.35; transform: scale(0.85); }
+  50% { opacity: 1; transform: scale(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sync-pulse { animation: none; opacity: 0.8; }
+}
+.jump-latest {
+  position: sticky;
+  bottom: 12px;
+  z-index: 5;
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  float: right;
+  margin-right: 14px;
+  padding: 5px 12px;
+  font-family: var(--font-body);
+  font-size: 11px;
+  color: var(--on-accent);
+  cursor: pointer;
+  background: var(--accent);
+  border: none;
+  border-radius: var(--radius-pill);
+  box-shadow: var(--shadow-float);
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+}
+
+.jump-latest:hover { opacity: 0.92; }
+.jump-latest:active { transform: translateY(1px); }
+
+.scroller {
+  overscroll-behavior: contain;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+/* Codex 式阅读列:宽屏下内容居中,阅读行宽 ~900px;首载轻淡入 */
+.column {
+  max-width: 900px;
+  padding: 10px 4px 24px;
+  margin: 0 auto;
+  animation: column-in 0.28s ease-out;
+}
+@keyframes column-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.earlier-btn {
+  display: block;
+  margin: 0 auto 10px;
+  padding: 4px 14px;
+  font-family: var(--font-body);
+  font-size: 11px;
+  color: var(--ink-faint);
+  cursor: pointer;
+  background: var(--paper-raised);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-pill);
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.earlier-btn:hover:not(:disabled) {
+  color: var(--ink);
+  background: var(--paper-deep);
+}
+.earlier-btn:disabled { opacity: 0.5; cursor: default; }
+.earlier-done {
+  margin-bottom: 8px;
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  text-align: center;
+  color: var(--ink-fainter);
+}
+/* 空态:编辑部式 serif 标题(pane-empty 声部) */
+.empty {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  padding: 72px 16px;
+  text-align: center;
+}
+.empty-icon {
+  font-size: 28px;
+  color: var(--ink-fainter);
+}
+.empty-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 22px;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  color: var(--ink-soft);
+}
+.empty-hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--ink-faint);
+}
+
+/* 连接中骨架:对齐块行网格(26px 头像列 + 内容列),行间延迟入场 */
+.skel-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 26px 6px;
+}
+
+.skel-row {
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr);
+  gap: 10px;
+  animation: aw-rise 0.4s cubic-bezier(0.22, 0.68, 0.36, 1) backwards;
+  animation-delay: var(--d, 0s);
+}
+
+.skel-ava {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+}
+
+.skel-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.skel-line {
+  height: 11px;
+}
+
+.skel-line.name { width: 120px; height: 13px; }
+.skel-line.w70 { width: 70%; }
+.skel-line.w45 { width: 45%; }
+
+@media (prefers-reduced-motion: reduce) {
+  .skel-row { animation: none; }
+}
+</style>

package/app/components/workshop/blocks/ClusterArtifact.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+/**
+ * 交付物群 — 每个 artifact 卡片;且内容与相邻回复重复时默认折叠正文(可展开);
+ * 命名适配:deliverable/summary/result/output 等语义由 ArtifactCard 完成。
+ */
+import { computed, ref } from 'vue'
+import type { EventBlock } from '@/app/composables/workshop/useEventBlocks'
+
+const props = defineProps<{ block: EventBlock }>()
+
+const artifacts = computed(() =>
+  props.block.events
+    .filter(e => e.type === 'a2a.artifact')
+    .map(e => (e.payload as { taskId?: string, artifact: { artifactId: string, name?: string, parts: Array<{ text?: string }> } }).artifact),
+)
+
+const showBody = computed(() => !props.block.dupStream)
+const expanded = ref(props.block.dupStream)
+</script>
+
+<template>
+  <div class="artifact-cluster">
+    <div
+      v-if="block.dupStream"
+      class="dup-note"
+    >
+      <span class="i-tabler-copy" />
+      <span>{{ $t('clusterArtifact.kyh87lw001') }}</span>
+      <button
+        class="mini-btn"
+        @click="expanded = !expanded"
+      >
+        {{ expanded ? $t('clusterArtifact.k49les002') : '查看' }}
+      </button>
+    </div>
+    <template v-if="showBody || expanded">
+      <workshop-artifact-card
+        v-for="(a, i) in artifacts"
+        :key="i"
+        :artifact="a"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.artifact-cluster {
+  padding: 2px 0 6px 2px;
+}
+.dup-note {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--ink-faint);
+}
+.mini-btn {
+  padding: 1px 10px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--ink-faint);
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-chip);
+  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
+}
+.mini-btn:hover {
+  color: var(--ink);
+  background: var(--hover-tint);
+  border-color: var(--ink-fainter);
+}
+.artifact-cluster > :deep(.artifact-card) {
+  margin-top: 4px;
+}
+</style>

package/app/components/workshop/blocks/ClusterError.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+/**
+ * 错误块 — 逐行 code:message;时限错误底色强调。
+ */
+import { computed, ref } from 'vue'
+import type { EventBlock } from '@/app/composables/workshop/useEventBlocks'
+
+const props = defineProps<{ block: EventBlock }>()
+
+const lines = computed(() =>
+  props.block.events.map(e => ({
+    seq: e.seq,
+    code: String((e.payload as { code?: string }).code ?? ''),
+    text: String((e.payload as { message?: string }).message ?? ''),
+  })),
+)
+const expanded = ref(false)
+const MAX = 3
+const shown = computed(() => (expanded.value ? lines.value : lines.value.slice(0, MAX)))
+const hasMore = computed(() => lines.value.length > MAX)
+</script>
+
+<template>
+  <div class="error-cluster">
+    <div
+      v-for="er in shown"
+      :key="er.seq"
+      class="error-line"
+    >
+      <span class="i-tabler-alert-triangle" />
+      <span
+        v-if="er.code"
+        class="error-code"
+      >{{ er.code }}</span>
+      <span class="error-text">{{ er.text }}</span>
+    </div>
+    <button
+      v-if="hasMore"
+      class="more-btn"
+      @click="expanded = !expanded"
+    >
+      {{ expanded ? $t('clusterError.k40p82001') : `全部 ${lines.length} 条` }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.error-cluster {
+  padding: 2px 0 5px 2px;
+}
+/* 错误块体:danger 底色轻染(与任务 FAILED chip 同一视觉语义) */
+.error-line {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  padding: 1px 6px;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  line-height: 20px;
+  color: var(--tone-danger-dot);
+}
+.error-line:first-child {
+  background: var(--tone-danger-bg);
+  border-radius: var(--radius-chip);
+}
+.error-code { padding: 0 5px; font-size: 9px; background: color-mix(in srgb, var(--tone-danger-dot) 14%, transparent); border-radius: var(--radius-chip); }
+.error-text { overflow-wrap: anywhere; word-break: break-word; }
+.more-btn {
+  margin-top: 4px;
+  padding: 1px 10px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--ink-faint);
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-chip);
+  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
+}
+.more-btn:hover {
+  color: var(--ink);
+  background: var(--hover-tint);
+  border-color: var(--ink-fainter);
+}
+</style>