agentworkshop 0.2.1

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+/**
+ * 生命周期块(合并后显示最新状态 + 过渡次数);
+ * 当前任务以标题呈现(entities.taskTitle),无实体时回退短 ID。
+ */
+import { computed } from 'vue'
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+import type { EventBlock } from '@/app/composables/workshop/useEventBlocks'
+
+const props = defineProps<{ block: EventBlock }>()
+const entities = useEntitiesStore()
+
+const life = computed(() => {
+  const last = props.block.events[props.block.events.length - 1]
+  if (!last || last.type !== 'agent.status') return null
+  const p = last.payload as { state: string, currentTaskId?: string | null, queued?: number, completed?: number }
+  return { state: p.state, currentTaskId: p.currentTaskId ?? null, queued: p.queued ?? 0, completed: p.completed ?? 0, transitions: props.block.events.length, channelId: last.channelId }
+})
+
+const currentTitle = computed(() => {
+  const l = life.value
+  if (!l?.currentTaskId) return ''
+  const title = entities.taskTitle(l.channelId, l.currentTaskId)
+  if (title && title !== l.currentTaskId) return title
+  return l.currentTaskId.slice(0, 12)
+})
+</script>
+
+<template>
+  <div class="life-cluster">
+    <span
+      v-if="life"
+      class="life-dot"
+      :data-state="life.state"
+    />
+    <div
+      v-if="life"
+      class="life-row"
+    >
+      <span class="life-state">{{ life.state }}</span>
+      <span
+        v-if="currentTitle"
+        class="life-task"
+        :title="life.currentTaskId ?? ''"
+      >「{{ currentTitle }}」</span>
+      <span class="life-meta">{{ $t('clusterLife.k498bf002') }} {{ life.queued }} · 完成 {{ life.completed }}</span>
+      <span
+        v-if="life.transitions > 1"
+        class="life-count"
+      >{{ life.transitions }} {{ $t('clusterLife.k3pi5z1003') }}</span>
+    </div>
+    <span
+      v-else
+      class="life-row"
+    >{{ $t('clusterLife.k1xthifv001') }}</span>
+  </div>
+</template>
+
+<style scoped>
+.life-cluster {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 2px 0 3px 2px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  opacity: 0.88;
+}
+.life-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
+.life-dot[data-state='busy'] { background: var(--accent-cobalt); }
+.life-dot[data-state='idle'] { background: var(--accent-moss); }
+.life-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.life-state {
+  font-weight: 500;
+  text-transform: uppercase;
+  font-size: 9.5px;
+  letter-spacing: 0.1em;
+}
+.life-task { overflow: hidden; max-width: 280px; text-overflow: ellipsis; white-space: nowrap; }
+.life-meta { font-size: 10px; opacity: 0.6; }
+.life-count { font-size: 9.5px; opacity: 0.45; }
+</style>

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+/**
+ * 团队成员变更行 — 每行独立(added/updated/removed 语义由 render 端解读)。
+ */
+import { computed, ref } from 'vue'
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+import type { EventBlock } from '@/app/composables/workshop/useEventBlocks'
+
+const props = defineProps<{ block: EventBlock }>()
+const entities = useEntitiesStore()
+const cid = computed(() => props.block.events[0]?.channelId ?? '')
+
+const lines = computed(() =>
+  props.block.events.map((e) => {
+    const p = e.payload as {
+      op: 'added' | 'updated' | 'removed'
+      agentId: string
+      name: string
+      role: string
+      harness: string
+      enabled?: number
+      by: string
+      reason?: string
+    }
+    const who = p.by === 'user' ? '用户' : `lead ${entities.agentName(cid.value, p.by.replace(/^lead:/, ''))}`
+    const member = `${p.name}(${p.role}/${p.harness})`
+    const verbs = {
+      added: `新增成员 ${member}`,
+      updated: p.enabled === 0 ? `禁用成员 ${member}` : `更新成员 ${member}`,
+      removed: `移除成员 ${member}`,
+    } as const
+    return { seq: e.seq, text: `${who}${verbs[p.op]}${p.reason ? `,理由:${p.reason}` : ''}`, op: p.op }
+  }),
+)
+
+const expanded = ref(false)
+const MAX = 8
+const shown = computed(() => (expanded.value ? lines.value : lines.value.slice(0, MAX)))
+const hasMore = computed(() => lines.value.length > MAX)
+</script>
+
+<template>
+  <div class="member-cluster">
+    <div
+      v-for="m in shown"
+      :key="m.seq"
+      class="member-line"
+      :data-op="m.op"
+    >
+      <span class="i-tabler-users" />
+      <span class="line-text">{{ m.text }}</span>
+    </div>
+    <button
+      v-if="hasMore"
+      class="more-btn"
+      @click="expanded = !expanded"
+    >
+      {{ expanded ? $t('clusterMember.k40p82001') : `全部 ${lines.length} 条` }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.member-cluster { padding: 1px 0 5px 2px; }
+.member-line {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  line-height: 20px;
+}
+/* 成员变更行:统一中性墨(动词语义已含 新增/移除,不靠颜色重复表意) */
+.member-line { color: var(--ink-soft); }
+.line-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>

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/**
+ * 记忆沉淀行 — scope+|标题|
+ */
+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,
+    scope: String((e.payload as { scope: string }).scope),
+    title: String((e.payload as { title: string }).title),
+  })),
+)
+const expanded = ref(false)
+const MAX = 8
+const shown = computed(() => (expanded.value ? lines.value : lines.value.slice(0, MAX)))
+const hasMore = computed(() => lines.value.length > MAX)
+</script>
+
+<template>
+  <div class="memory-cluster">
+    <div
+      v-for="m in shown"
+      :key="m.seq"
+      class="memory-line"
+    >
+      <span class="i-tabler-bookmark" />
+      <span
+        class="mem-scope"
+        :data-scope="m.scope"
+      >{{ m.scope }}</span>
+      <span class="mem-title">{{ m.title }}</span>
+    </div>
+    <button
+      v-if="hasMore"
+      class="more-btn"
+      @click="expanded = !expanded"
+    >
+      {{ expanded ? $t('clusterMemory.k40p82001') : `全部 ${lines.length} 条` }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.memory-cluster { padding: 1px 0 5px 2px; }
+.memory-line {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  line-height: 20px;
+}
+.mem-scope {
+  padding: 0 5px;
+  font-size: 8.5px;
+  letter-spacing: 0.08em;
+  color: var(--ink-soft);
+  background: color-mix(in srgb, var(--ink) 5%, transparent);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-chip);
+}
+.mem-title { 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>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/**
+ * 其他事件块 — 未识别类型行式展示。
+ */
+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, type: e.type })),
+)
+const expanded = ref(false)
+const MAX = 6
+const shown = computed(() => (expanded.value ? lines.value : lines.value.slice(0, MAX)))
+const hasMore = computed(() => lines.value.length > MAX)
+</script>
+
+<template>
+  <div class="other-cluster">
+    <div
+      v-for="l in shown"
+      :key="l.seq"
+      class="other-row"
+    >
+      <span class="i-tabler-dots" />
+      <span class="other-type">{{ l.type }}</span>
+    </div>
+    <button
+      v-if="hasMore"
+      class="more-btn"
+      @click="expanded = !expanded"
+    >
+      {{ expanded ? $t('clusterOther.k40p82001') : `全部 ${lines.length} 条` }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.other-cluster { padding: 1px 0 5px 2px; }
+.other-row {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  line-height: 20px;
+  opacity: 0.65;
+}
+.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>

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

@@ -0,0 +1,359 @@
+<script setup lang="ts">
+/**
+ * 消息路由块 — Slack/open-tag 聊天声部:
+ *  - 每条 a2a.message 渲染为一条聊天行:@目标 pill(可点击打开 Agent 抽屉)+
+ *    类型徽章(任务派发/实时注入/协作消息…)+ 时间 + 正文(mdLite + @提及高亮);
+ *  - 人类发送(from 空 + x-aw-from-label)→ 头部显示发送者名,行内带用户章;
+ *  - agent↔agent 协作、lead→worker 任务派发共用同一渲染面(@ 语义统一)。
+ */
+import { computed, ref } from 'vue'
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+import { mdLiteMentions, agentHueColor, type EventBlock, type MentionMember } from '@/app/composables/workshop/useEventBlocks'
+import { formatLocalClock } from '@/app/composables/workshop/useLocalTime'
+
+const { t } = useI18n()
+
+const props = defineProps<{ block: EventBlock }>()
+const entities = useEntitiesStore()
+
+/** @pill 点击 → 控制台打开 Agent 抽屉(w/[wsId] provide;缺省安全兜底) */
+const openAgent = inject<(target: { channelId: string, agentId: string }) => void>(
+  'aw:open-agent',
+  () => {},
+)
+
+interface RouteRow {
+  seq: number
+  i: number
+  channelId: string
+  from: string
+  fromLabel: string
+  to: string
+  kind: { icon: string, label: string, tone: string }
+  text: string
+  time: string
+  /** 回执语义(open-tag action receipt 移植):需对方回复 / 是对某消息的回复 */
+  requireReply: boolean
+  inReplyTo: string
+}
+
+const rows = computed<RouteRow[]>(() =>
+  props.block.events.map((e, i) => {
+    const meta = (e.payload as { metadata?: Record<string, unknown> }).metadata ?? {}
+    const fromId = typeof meta['x-aw-from-agent'] === 'string' ? meta['x-aw-from-agent'] as string : ''
+    const fromLabel = typeof meta['x-aw-from-label'] === 'string' ? meta['x-aw-from-label'] as string : ''
+    const toId = typeof meta['x-aw-target-agent'] === 'string' ? meta['x-aw-target-agent'] as string : ''
+    const priority = meta['x-aw-msg-priority'] === 'immediate' ? 'immediate' : 'task'
+    const taskKind = typeof meta['x-aw-task-kind'] === 'string' ? meta['x-aw-task-kind'] as string : ''
+    const kind = taskKind === 'assign'
+      ? { icon: 'i-tabler-send', label: t('clusterRoute.k1ax44eo005'), tone: 'assign' }
+      : taskKind === 'cancel'
+        ? { icon: 'i-tabler-circle-x', label: t('clusterRoute.k1bsct42006'), tone: 'notice' }
+        : taskKind === 'child-completed'
+          ? { icon: 'i-tabler-circle-check', label: t('clusterRoute.k1ax087h007'), tone: 'notice' }
+          : priority === 'immediate'
+            ? { icon: 'i-tabler-bolt', label: t('clusterRoute.k1cxjc4m008'), tone: 'immediate' }
+            : { icon: 'i-tabler-message', label: t('clusterRoute.k1bka5dz009'), tone: 'peer' }
+    const parts = (e.payload as { parts?: Array<{ text?: string }> }).parts ?? []
+    const replyRaw = meta['x-aw-in-reply-to']
+    return {
+      seq: e.seq,
+      i,
+      channelId: e.channelId,
+      from: fromId,
+      fromLabel,
+      to: toId,
+      kind,
+      text: parts.map(p => p.text ?? '').join('\n').trim(),
+      time: formatLocalClock(e.at),
+      requireReply: meta['x-aw-require-reply'] === 'true',
+      inReplyTo: typeof replyRaw === 'string' ? replyRaw : '',
+    }
+  }),
+)
+
+const channelId = computed(() => props.block.events[0]?.channelId ?? '')
+
+/** 本 channel 成员表(@提及高亮 + pill 名称解析) */
+const members = computed<MentionMember[]>(() =>
+  (entities.agents[channelId.value] ?? []).map(a => ({ agentId: a.agentId, name: a.name })),
+)
+
+const nameOf = (id: string): string =>
+  id ? entities.agentName(channelId.value, id) : ''
+
+const initials = (name: string) => name.trim().charAt(0).toUpperCase()
+
+const rendered = computed(() => rows.value.map(r => mdLiteMentions(r.text, members.value)))
+
+/** @pill / 正文内提及点击(事件委托) */
+const onBodyClick = (ev: MouseEvent): void => {
+  const el = (ev.target as HTMLElement).closest<HTMLElement>('.md-mention, .who-pill')
+  if (!el) return
+  const agentId = el.dataset.agentId
+  if (agentId) openAgent({ channelId: channelId.value, agentId })
+}
+
+const expanded = ref(false)
+const MAX = 4
+const shown = computed(() => (expanded.value ? rows.value : rows.value.slice(0, MAX)))
+const shownRendered = computed(() => (expanded.value ? rendered.value : rendered.value.slice(0, MAX)))
+const hasMore = computed(() => rows.value.length > MAX)
+</script>
+
+<template>
+  <div
+    class="route-cluster"
+    @click="onBodyClick"
+  >
+    <div
+      v-for="(r, ri) in shown"
+      :key="r.seq"
+      class="chat-row"
+    >
+      <!-- 元行:发送者 → @目标 + 类型徽章 + 时间 -->
+      <div class="chat-meta">
+        <span
+          v-if="r.fromLabel && !r.from"
+          class="human-chip"
+          :title="$t('clusterRoute.k12448jn010', { p0: r.fromLabel })"
+        >
+          <span class="i-tabler-user" />
+          {{ r.fromLabel }}
+        </span>
+        <button
+          v-if="r.from"
+          type="button"
+          class="who-pill from"
+          :data-agent-id="r.from"
+          :title="$t('clusterRoute.khsfl59011', { p0: nameOf(r.from) })"
+        >
+          <span
+            class="aw-avatar is-agent who-ava"
+            :style="{ '--av': agentHueColor(r.from) }"
+          >{{ initials(nameOf(r.from)) }}</span>
+          @{{ nameOf(r.from) }}
+        </button>
+        <span
+          v-if="r.to"
+          class="to-arrow"
+          aria-hidden="true"
+        >→</span>
+        <button
+          v-if="r.to"
+          type="button"
+          class="who-pill"
+          :data-agent-id="r.to"
+          :title="$t('clusterRoute.khsfl59011', { p0: nameOf(r.to) })"
+        >
+          @{{ nameOf(r.to) }}
+        </button>
+        <span
+          v-else
+          class="who-broadcast"
+        >{{ $t('clusterRoute.kyza1ya002') }}</span>
+        <span
+          class="route-badge"
+          :data-tone="r.kind.tone"
+        ><span :class="r.kind.icon" />{{ r.kind.label }}</span>
+        <!-- 回执徽章(open-tag action receipt):需回复 = 等待对方响应;回执 = 对某消息的回复关联 -->
+        <span
+          v-if="r.requireReply"
+          class="route-badge receipt"
+          :title="$t('clusterRoute.kfbpe32001')"
+        ><span class="i-tabler-message-reply" />{{ $t('clusterRoute.k3wn89c003') }}</span>
+        <span
+          v-if="r.inReplyTo"
+          class="route-badge reply-link aw-mono"
+          :title="$t('clusterRoute.k94hqp2012', { p0: r.inReplyTo })"
+        >↩ {{ r.inReplyTo.slice(0, 8) }}</span>
+        <span class="chat-time aw-mono">{{ r.time }}</span>
+      </div>
+      <!-- 正文:markdown-lite + @提及 pill -->
+      <div
+        v-if="r.text"
+        class="chat-body prose"
+        v-html="shownRendered[ri]"
+      />
+    </div>
+    <button
+      v-if="hasMore"
+      class="more-btn"
+      @click="expanded = !expanded"
+    >
+      {{ expanded ? $t('clusterRoute.k40p82004') : $t('clusterRoute.k13ewgum013', { p0: rows.length }) }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.route-cluster {
+  padding: 1px 0 5px;
+}
+
+.chat-row {
+  margin-bottom: 6px;
+  padding: 7px 12px 8px;
+  background: var(--bubble-bg);
+  border: 1px solid var(--bubble-line);
+  border-radius: var(--radius-bubble);
+  box-shadow: var(--bubble-shadow);
+  transition: border-color var(--transition-fast), background var(--transition-fast);
+}
+
+.chat-row:hover {
+  border-color: var(--line-strong);
+}
+
+.chat-row:last-of-type {
+  margin-bottom: 0;
+}
+
+/* 元行:@pill / 徽章 / 时间 */
+.chat-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.who-pill {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  padding: 1px 8px 1px 3px;
+  font-family: var(--font-body);
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--mention-ink);
+  cursor: pointer;
+  background: var(--mention);
+  border: 0;
+  border-radius: var(--radius-pill);
+  transition: background var(--transition-fast);
+}
+
+.who-pill:hover {
+  background: color-mix(in srgb, var(--mention) 70%, var(--g-peach));
+}
+
+.who-ava {
+  width: 18px;
+  height: 18px;
+  font-size: 9px;
+}
+
+.to-arrow {
+  font-size: 11px;
+  color: var(--ink-fainter);
+}
+
+.who-broadcast {
+  font-size: 11px;
+  color: var(--ink-faint);
+}
+
+.human-chip {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  padding: 0 7px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--ink-soft);
+  background: var(--paper-deep);
+  border-radius: var(--radius-chip);
+}
+
+.route-badge {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  padding: 0 6px;
+  font-size: 9.5px;
+  color: var(--ink-soft);
+  background: color-mix(in srgb, var(--ink) 4.5%, transparent);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-chip);
+}
+
+/* 消息类型徽章(Slack 规范:类型是元语,用中性 chip + 图标表意,不堆彩色) */
+.route-badge[data-tone='assign'],
+.route-badge[data-tone='immediate'],
+.route-badge[data-tone='notice'],
+.route-badge[data-tone='peer'] {
+  color: var(--ink-soft);
+  background: transparent;
+  border-color: var(--line);
+}
+.route-badge[data-tone='assign'] { color: var(--ink-soft); }
+
+/* 回执徽章:需回复(琥珀,注意级,附文字) / 回复关联(低视觉权重,等宽短 id 可对账) */
+.route-badge.receipt {
+  color: var(--tone-warning-dot);
+  background: color-mix(in srgb, var(--tone-warning-dot) 12%, transparent);
+  border-color: transparent;
+}
+.route-badge.reply-link {
+  font-size: 9.5px;
+  color: var(--ink-fainter);
+  background: color-mix(in srgb, var(--ink) 6%, transparent);
+}
+
+.chat-time {
+  margin-left: auto;
+  font-size: 9.5px;
+  color: var(--ink-fainter);
+}
+
+/* 正文:聊天正文排版(无高度封顶,消息流自然展开) */
+.chat-body {
+  padding: 1px 0 0 2px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--ink);
+  white-space: normal;
+  word-break: break-word;
+}
+
+.prose :deep(p) { margin: 0 0 6px; }
+.prose :deep(p:last-child) { margin-bottom: 0; }
+.prose :deep(code) {
+  padding: 0.5px 4px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  background: var(--paper-deep);
+  border-radius: var(--radius-chip);
+}
+.prose :deep(pre) {
+  max-width: 100%;
+  margin: 4px 0;
+  padding: 6px 9px;
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  background: var(--paper-deep);
+  border-radius: var(--radius-chip);
+}
+.prose :deep(b) { font-weight: 600; }
+
+.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>