agentworkshop 0.2.1

package/app/components/workshop/MemoryPanel.vue

@@ -0,0 +1,364 @@
+<script setup lang="ts">
+/**
+ * 记忆面板:shared 公共域 / 按成员 private 域切换;
+ * 混合检索(REST search,与 agent search_memory 工具同源)+ 手动写入 + 删除。
+ * 身份凭证自动化:REST 记忆端点要求 Bearer agent token,成员列表(用户 token 可读)
+ * 已含各成员 token → 自动装配;手动填 token 仅作为兜底(默认折叠)。
+ * 传入 agentId(Agent 抽屉场景)时锁定身份,隐藏身份选择。
+ */
+import { message } from 'ant-design-vue'
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+import { useWorkshopApi } from '@/app/composables/workshop/useWorkshopApi'
+
+const { t } = useI18n()
+
+const props = defineProps<{ channelId: string, agentId?: string }>()
+const entities = useEntitiesStore()
+const api = useWorkshopApi()
+
+const domain = ref<'shared' | 'private'>('shared')
+const selectedAgent = ref<string>(props.agentId ?? '')
+watch(() => props.agentId, (v) => {
+  if (v) selectedAgent.value = v
+})
+
+/** 成员身份 → token 自动装配(用户 token 拉成员列表;失败退化为手填) */
+const memberTokens = ref<Record<string, string>>({})
+const manualToken = ref('')
+const effectiveToken = computed(() =>
+  manualToken.value.trim() || memberTokens.value[selectedAgent.value] || '',
+)
+const tokenResolved = computed(() => effectiveToken.value.length > 0)
+
+const loadMembers = async (): Promise<void> => {
+  try {
+    const res = await api.listChannelAgents(props.channelId)
+    const map: Record<string, string> = {}
+    for (const m of res.data ?? []) {
+      if (m.token) map[m.id] = m.token
+    }
+    memberTokens.value = map
+    if (!selectedAgent.value) {
+      // 默认身份:优先 lead(shared 域写入需 lead)
+      const lead = (res.data ?? []).find(m => m.role === 'lead')
+      if (lead) selectedAgent.value = lead.id
+    }
+  }
+  catch { /* 拉取失败由手填兜底 */ }
+}
+onMounted(() => void loadMembers())
+watch(() => props.channelId, () => {
+  memberTokens.value = {}
+  selectedAgent.value = props.agentId ?? ''
+  void loadMembers()
+})
+
+const authHeaders = computed<Record<string, string>>(() => {
+  const h: Record<string, string> = {}
+  if (effectiveToken.value) h.authorization = `Bearer ${effectiveToken.value}`
+  return h
+})
+
+const agents = computed(() => entities.agents[props.channelId] ?? [])
+
+const rows = ref<Array<{ id: string, title: string, content: string, kind: string, importance: number, agentId: string }>>([])
+const loading = ref(false)
+
+const load = async (): Promise<void> => {
+  loading.value = true
+  try {
+    const url = domain.value === 'shared'
+      ? `/api/workshop/channels/${props.channelId}/memories`
+      : `/api/workshop/channels/${props.channelId}/agents/${selectedAgent.value}/memories`
+    const res = await fetch(url, { headers: authHeaders.value })
+    const json = await res.json()
+    rows.value = json.code === 0 ? json.data : []
+    if (json.code !== 0) message.warning(json.message ?? t('memoryPanel.k186sctu014'))
+  }
+  finally {
+    loading.value = false
+  }
+}
+watch([domain, selectedAgent, effectiveToken], () => {
+  if (effectiveToken.value && (domain.value === 'shared' || selectedAgent.value)) void load()
+})
+
+const searchText = ref('')
+const searchScope = ref<'auto' | 'private' | 'shared'>('auto')
+const searchResults = ref<Array<{ id: string, title: string, content: string, score: number, source: string }>>([])
+const searching = ref(false)
+const doSearch = async (): Promise<void> => {
+  if (!searchText.value.trim() || !selectedAgent.value || !effectiveToken.value) {
+    message.warning(t('memoryPanel.k1eh0fbo015'))
+    return
+  }
+  searching.value = true
+  try {
+    const res = await fetch(`/api/workshop/channels/${props.channelId}/agents/${selectedAgent.value}/memories/search`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', ...authHeaders.value },
+      body: JSON.stringify({ query: searchText.value, scope: searchScope.value, limit: 8 }),
+    })
+    const json = await res.json()
+    searchResults.value = json.code === 0 ? json.data : []
+  }
+  finally {
+    searching.value = false
+  }
+}
+
+const writeOpen = ref(false)
+const writeForm = reactive({ title: '', content: '', scope: 'shared' as 'shared' | 'private', importance: 0.8, dedupKey: '' })
+const doWrite = async (): Promise<void> => {
+  if (!writeForm.title || !writeForm.content || !selectedAgent.value || !effectiveToken.value) {
+    message.warning(t('memoryPanel.k1dpj734016'))
+    return
+  }
+  const res = await fetch(
+    `/api/workshop/channels/${props.channelId}/agents/${selectedAgent.value}/memories`,
+    {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', ...authHeaders.value },
+      body: JSON.stringify({ ...writeForm, dedupKey: writeForm.dedupKey || undefined }),
+    },
+  )
+  const json = await res.json()
+  if (json.code === 0) {
+    message.success(t('memoryPanel.k3n5bat017'))
+    writeOpen.value = false
+    writeForm.title = ''
+    writeForm.content = ''
+    void load()
+  }
+  else {
+    message.error(json.message ?? t('memoryPanel.k1bb5i1l018'))
+  }
+}
+</script>
+
+<template>
+  <div class="memory-panel">
+    <div class="toolbar">
+      <a-radio-group
+        v-model:value="domain"
+        size="small"
+        button-style="solid"
+      >
+        <a-radio-button value="shared">
+          {{ $t('memoryPanel.k3l2hmp005') }}
+        </a-radio-button>
+        <a-radio-button value="private">
+          {{ $t('memoryPanel.k3rve9a006') }}
+        </a-radio-button>
+      </a-radio-group>
+      <a-select
+        v-if="!agentId"
+        v-model:value="selectedAgent"
+        size="small"
+        :placeholder="$t('memoryPanel.k1du3379001')"
+        class="agent-select"
+        :options="agents.map(a => ({ value: a.agentId, label: a.name }))"
+      />
+      <a-tooltip :title="tokenResolved ? '成员 token 已自动装配' : '自动装配失败,可手动填入成员 token'">
+        <span
+          class="token-state"
+          :data-ok="tokenResolved"
+        ><span class="i-tabler-key" />{{ tokenResolved ? 'auto' : $t('memoryPanel.k3zul4013') }}</span>
+      </a-tooltip>
+    </div>
+    <a-input-password
+      v-if="!tokenResolved"
+      v-model:value="manualToken"
+      size="small"
+      placeholder="Bearer token(成员身份,兜底手填)"
+      class="token"
+    />
+
+    <div class="search-bar">
+      <a-input-search
+        v-model:value="searchText"
+        size="small"
+        placeholder="混合检索记忆(FTS+向量,与 agent search_memory 同源)…"
+        :loading="searching"
+        @search="doSearch"
+      />
+      <a-select
+        v-model:value="searchScope"
+        size="small"
+        class="scope"
+        :options="[{ value: 'auto', label: 'auto' }, { value: 'private', label: 'private' }, { value: 'shared', label: 'shared' }]"
+      />
+    </div>
+    <div
+      v-if="searchResults.length"
+      class="search-results"
+    >
+      <div
+        v-for="s in searchResults"
+        :key="s.id"
+        class="hit"
+        :title="s.content.slice(0, 200)"
+      >
+        <span
+          class="src"
+          :data-source="s.source"
+        >{{ s.source }}</span>
+        <span class="score">{{ s.score }}</span>
+        <span class="hit-title">{{ s.title }}</span>
+      </div>
+    </div>
+
+    <div class="list-head">
+      <span>{{ $t('memoryPanel.k1k7okbe007') }}</span>
+      <a-space size="small">
+        <a-button
+          size="small"
+          type="text"
+          @click="load"
+        >
+          {{ $t('memoryPanel.k3x1jg008') }}
+        </a-button>
+        <a-button
+          size="small"
+          type="text"
+          @click="writeOpen = true"
+        >
+          {{ $t('memoryPanel.k3wtib009') }}
+        </a-button>
+      </a-space>
+    </div>
+    <a-spin :spinning="loading">
+      <div
+        v-for="r in rows"
+        :key="r.id"
+        class="row"
+      >
+        <div class="row-head">
+          <a-tag class="kind">
+            {{ r.kind }}
+          </a-tag>
+          <span class="row-importance">{{ r.importance.toFixed(2) }}</span>
+          <span class="row-title">{{ r.title }}</span>
+        </div>
+        <div class="row-content">
+          {{ r.content.slice(0, 140) }}{{ r.content.length > 140 ? '…' : '' }}
+        </div>
+      </div>
+      <div
+        v-if="rows.length === 0 && !loading"
+        class="empty"
+      >
+        ({{ $t('memoryPanel.k43rxk011') }}
+      </div>
+    </a-spin>
+
+    <a-modal
+      v-model:open="writeOpen"
+      :title="$t('memoryPanel.k1bbee8p002')"
+      ok-text="写入"
+      cancel-text="取消"
+      @ok="doWrite"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="scope">
+          <a-radio-group v-model:value="writeForm.scope">
+            <a-radio value="shared">
+              {{ $t('memoryPanel.kemjjvq010') }}
+            </a-radio>
+            <a-radio value="private">
+              private({{ $t('memoryPanel.k3onh9w012') }}
+            </a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item :label="$t('memoryPanel.k419s4003')">
+          <a-input v-model:value="writeForm.title" />
+        </a-form-item>
+        <a-form-item :label="$t('memoryPanel.k3wv1f004')">
+          <a-textarea
+            v-model:value="writeForm.content"
+            :rows="4"
+          />
+        </a-form-item>
+        <a-form-item label="importance(0-1)">
+          <a-input-number
+            v-model:value="writeForm.importance"
+            :min="0"
+            :max="1"
+            :step="0.1"
+          />
+        </a-form-item>
+        <a-form-item label="dedupKey(可选,幂等)">
+          <a-input v-model:value="writeForm.dedupKey" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<style scoped>
+.memory-panel { font-size: 12px; }
+.toolbar {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 6px;
+}
+.agent-select { flex: 1 1 auto; min-width: 90px; }
+.token-state {
+  flex: 0 0 auto;
+  padding: 0 5px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  border-radius: var(--radius-chip);
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+.token-state[data-ok='true'] { color: var(--tone-success-dot); }
+.token-state[data-ok='false'] { color: var(--tone-warning-dot); }
+.token { margin-bottom: 6px; }
+.search-bar {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.scope { width: 90px; }
+.search-results { margin-bottom: 8px; }
+.hit {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 2px 4px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+.src {
+  padding: 0 4px;
+  color: var(--tone-info-dot);
+  background: var(--tone-info-bg);
+  border-radius: var(--radius-chip);
+}
+.src[data-source='shared'] {
+  color: var(--tone-retry-dot);
+  background: var(--tone-retry-bg);
+}
+.score { opacity: 0.5; }
+.hit-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.list-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0;
+  font-weight: 600;
+  opacity: 0.7;
+}
+.row { padding: 4px 0; border-bottom: 1px dashed color-mix(in srgb, currentColor 10%, transparent); }
+.row-head { display: flex; gap: 6px; align-items: center; }
+.kind { margin-inline-end: 0; font-size: 10px; }
+.row-importance { font-family: var(--font-mono); font-size: 10px; opacity: 0.5; }
+.row-title { font-weight: 600; font-size: 12px; }
+.row-content {
+  font-size: 11px;
+  opacity: 0.65;
+  word-break: break-all;
+}
+.empty { padding: 8px 0; opacity: 0.4; }
+</style>

package/app/components/workshop/MentionHoverCard.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+/**
+ * @提及悬停信息卡(open-tag agent-hovercard 移植):
+ * 悬停时间线里的 .md-mention / .who-pill(均带 data-agent-id)→ 350ms 后浮出
+ * 成员信息卡(头像/名字/角色/harness/状态/当前任务)。
+ * 纯信息浮层:pointer-events:none,不挡点击(点击仍走打开抽屉)。
+ * 文档级 mouseover/mouseout 委托 —— 时间线/lanes 全树生效,单实例挂载。
+ */
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { useEntitiesStore, type AgentView } from '@/app/stores/workshop/entities'
+import { agentHueColor } from '@/app/composables/workshop/useEventBlocks'
+
+const entities = useEntitiesStore()
+
+interface HoverState {
+  x: number
+  y: number
+  agent: AgentView
+  channelId: string
+}
+
+const card = ref<HoverState | null>(null)
+let showTimer: ReturnType<typeof setTimeout> | null = null
+
+const findAgent = (agentId: string): { agent: AgentView, channelId: string } | null => {
+  for (const [cid, list] of Object.entries(entities.agents)) {
+    const hit = list.find(a => a.agentId === agentId)
+    if (hit) return { agent: hit, channelId: cid }
+  }
+  return null
+}
+
+const mentionEl = (ev: MouseEvent): HTMLElement | null =>
+  (ev.target as HTMLElement).closest?.('.md-mention, .who-pill') ?? null
+
+const onOver = (ev: MouseEvent): void => {
+  const el = mentionEl(ev)
+  if (!el) return
+  const agentId = el.dataset.agentId
+  if (!agentId) return
+  if (showTimer) clearTimeout(showTimer)
+  showTimer = setTimeout(() => {
+    const hit = findAgent(agentId)
+    if (!hit) return
+    const x = Math.min(ev.clientX + 14, Math.max(window.innerWidth - 280, 8))
+    const y = Math.min(ev.clientY + 16, Math.max(window.innerHeight - 170, 8))
+    card.value = { x, y, ...hit }
+  }, 350)
+}
+
+const onOut = (ev: MouseEvent): void => {
+  if (!mentionEl(ev)) return
+  if (showTimer) clearTimeout(showTimer)
+  card.value = null
+}
+
+onMounted(() => {
+  document.addEventListener('mouseover', onOver)
+  document.addEventListener('mouseout', onOut)
+})
+onBeforeUnmount(() => {
+  if (showTimer) clearTimeout(showTimer)
+  document.removeEventListener('mouseover', onOver)
+  document.removeEventListener('mouseout', onOut)
+})
+
+const stateDot = (s: AgentView['state']): string =>
+  s === 'busy' ? 'var(--tone-live-dot)' : 'var(--ink-fainter)'
+</script>
+
+<template>
+  <teleport to="body">
+    <div
+      v-if="card"
+      class="mh-card"
+      :style="{ left: `${card.x}px`, top: `${card.y}px` }"
+    >
+      <span
+        class="aw-avatar is-agent mh-ava"
+        :style="{ '--av': agentHueColor(card.agent.agentId) }"
+      >{{ card.agent.name.trim().charAt(0).toUpperCase() }}</span>
+      <div class="mh-body">
+        <div class="mh-name">
+          <span
+            class="mh-dot"
+            :style="{ background: stateDot(card.agent.state) }"
+          />
+          {{ card.agent.name }}
+        </div>
+        <div class="mh-role">
+          {{ card.agent.role }} / {{ card.agent.harness }} / {{ card.agent.state }}
+        </div>
+        <div
+          v-if="card.agent.currentTaskId"
+          class="mh-task"
+        >
+          {{ $t('mentionHoverCard.k3o5eky002') }}{{ entities.taskTitle(card.channelId, card.agent.currentTaskId) }}
+        </div>
+        <div class="mh-hint">
+          {{ $t('mentionHoverCard.k1t89ag4001') }}
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<style scoped>
+.mh-ava {
+  width: 34px;
+  height: 34px;
+  font-size: 14px;
+}
+
+.mh-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.mh-name {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.mh-dot {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+
+.mh-role {
+  font-size: 11.5px;
+  color: var(--ink-faint);
+}
+
+.mh-task {
+  overflow: hidden;
+  font-size: 11.5px;
+  color: var(--ink-soft);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mh-hint {
+  margin-top: 3px;
+  font-size: 10.5px;
+  color: var(--ink-fainter);
+}
+</style>

package/app/components/workshop/MultiChannelView.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+/**
+ * 多 channel 同屏视图(P2):workspace 挂载的全部 channel 并排 mini 时间线。
+ * 单条 WS 连接多路 sub 的 UI 呈现面;每列独立事件流 + 状态头(seq/事件数/活跃任务)。
+ */
+import { useStorage } from '@vueuse/core'
+import { useWorkspacesStore } from '@/app/stores/workshop/workspaces'
+import { useEntitiesStore } from '@/app/stores/workshop/entities'
+import { useEventsStore } from '@/app/stores/workshop/events'
+import { formatLocalClock } from '@/app/composables/workshop/useLocalTime'
+
+const { t } = useI18n()
+
+const props = defineProps<{ wsId: string }>()
+const emit = defineEmits<{ (e: 'openTask', taskId: string): void }>()
+
+// 每列宽度拖拽调节(PaneSplitter;按 channelId 持久化,双击复位默认宽)
+const COL_W_DEFAULT = 360
+const colWidths = useStorage<Record<string, number>>('aw.harness.mcColW', {})
+const colWidth = (id: string): number => colWidths.value[id] ?? COL_W_DEFAULT
+const resizeCol = (id: string, d: number): void => {
+  colWidths.value = { ...colWidths.value, [id]: Math.min(760, Math.max(300, colWidth(id) + d)) }
+}
+const resetCol = (id: string): void => {
+  const next = { ...colWidths.value }
+  Reflect.deleteProperty(next, id)
+  colWidths.value = next
+}
+
+const wsStore = useWorkspacesStore()
+const entities = useEntitiesStore()
+const events = useEventsStore()
+
+const columns = computed(() =>
+  (wsStore.workspaces.find(w => w.id === props.wsId)?.channelIds ?? []).map((id) => {
+    const agents = entities.agents[id] ?? []
+    const tasks = entities.tasks[id] ?? []
+    return {
+      id,
+      name: entities.channels[id]?.name ?? id.slice(0, 8),
+      /** 实体基线(WS 快照)是否已到达:未到时计数不可信 */
+      synced: entities.channels[id] !== undefined,
+      busy: agents.filter(a => a.state === 'busy').length,
+      agents: agents.length,
+      activeTasks: tasks.filter(t => !['COMPLETED', 'CANCELED', 'FAILED'].includes(t.state)).length,
+      seq: events.lastSeq(id),
+      items: events.ring(id).items.slice(-120), // 每列最近 120 帧(轻量)
+    }
+  }))
+
+/** 迷你事件行:单行摘要(时间 + 类型图标 + 主体) */
+const summaryOf = (e: { type: string, at: string, agentId?: string, payload: unknown }): string => {
+  const p = e.payload as Record<string, unknown>
+  switch (e.type) {
+    case 'task.status': return `${String(p.state)} ${String(p.taskId ?? '').slice(0, 6)}`
+    case 'task.progress': return `${String(p.progress ?? '')}%`
+    case 'agent.delta': return `…${String(p.delta ?? '').slice(-24)}`
+    case 'agent.message': return `${String((p.parts as Array<{ text?: string }> | undefined)?.[0]?.text ?? '').slice(0, 40)}`
+    case 'a2a.message': return `文本 ${String((p.parts as Array<{ text?: string }> | undefined)?.[0]?.text ?? '').slice(0, 40)}`
+    case 'a2a.artifact': return `交付 ${String((p.artifact as { name?: string } | undefined)?.name ?? '')}`
+    case 'memory.saved': return t('multiChannelView.kfvue7n009', { p0: String(p.title ?? '') })
+    case 'agent.member': return t('multiChannelView.khq39oe010', { p0: String(p.op ?? ''), p1: String(p.name ?? '') })
+    case 'agent.status': return `${String(p.state)}`
+    case 'error': return t('multiChannelView.k16wopr9011', { p0: String(p.code ?? '') })
+    default: return e.type
+  }
+}
+</script>
+
+<template>
+  <div class="split">
+    <div
+      v-if="columns.length === 0"
+      class="empty"
+    >
+      {{ $t('multiChannelView.k1bfi9ms001') }}
+    </div>
+    <template
+      v-for="col in columns"
+      :key="col.id"
+    >
+      <div
+        class="col"
+        :style="{ flexBasis: `${colWidth(col.id)}px` }"
+      >
+        <div class="col-head">
+          <span class="col-name">{{ col.name }}</span>
+          <span class="col-meta">
+            <template v-if="col.synced">{{ col.agents }}a / {{ $t('multiChannelView.k4by6003') }}{{ col.busy }} / {{ $t('multiChannelView.k3wcox005') }}{{ col.activeTasks }} / seq{{ col.seq }}</template>
+            <template v-else>{{ $t('multiChannelView.k1bst7s9002') }}</template>
+          </span>
+        </div>
+        <div class="col-body">
+          <div
+            v-if="col.items.length === 0"
+            class="col-empty"
+          >
+            {{ col.synced ? $t('multiChannelView.k1el0s5k004') : $t('multiChannelView.k1bst7s9002') }}
+          </div>
+          <div
+            v-for="e in col.items"
+            :key="`${col.id}-${e.seq}`"
+            class="mini-event"
+            :class="{ clickable: e.type === 'task.status' }"
+            @click="e.type === 'task.status' && emit('openTask', (e.payload as { taskId: string }).taskId)"
+          >
+            <span class="me-time">{{ formatLocalClock(e.at) }}</span>
+            <span class="me-agent">{{ e.agentId?.slice(0, 4) ?? 'sys' }}</span>
+            <span class="me-text">{{ summaryOf(e) }}</span>
+          </div>
+        </div>
+      </div>
+      <!-- 每列右侧都挂分隔条(含最右列):分隔条统一调节"其左侧列"的宽度,
+           尾条即最右列的右缘调节柄 —— 最右列也能拖拽拉宽/收窄 -->
+      <workshop-pane-splitter
+        :label="$t('multiChannelView.kvfx0mh006', { p0: col.name })"
+        @resize="d => resizeCol(col.id, d)"
+        @reset="resetCol(col.id)"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.split {
+  overscroll-behavior: contain;
+  display: flex;
+  gap: 8px;
+  height: 100%;
+  min-height: 0;
+  padding: 8px;
+  overflow-x: auto;
+}
+.col {
+  display: flex;
+  flex: 0 0 auto; /* 宽度由拖拽分隔条驱动(inline flexBasis) */
+  flex-direction: column;
+  min-width: 300px;
+  background: var(--paper-raised);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-panel-sm);
+}
+.col-head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--line);
+}
+.col-name { font-size: 13px; font-weight: 700; }
+.col-meta {
+  flex: 1 1 auto;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--ink-faint);
+  text-align: right;
+}
+.col-body {
+  overscroll-behavior: contain;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+.mini-event {
+  display: flex;
+  gap: 6px;
+  padding: 2px 8px;
+  line-height: 1.6;
+}
+.mini-event.clickable { cursor: pointer; }
+.mini-event.clickable:hover { background: var(--hover-tint); }
+.me-time { flex: 0 0 auto; color: var(--ink-fainter); }
+.me-agent { flex: 0 0 auto; color: var(--ink-faint); }
+.me-text {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.col-empty,
+.empty {
+  padding: 24px 8px;
+  font-size: 12px;
+  color: var(--ink-faint);
+  text-align: center;
+}
+</style>