agentworkshop 0.7.40 → 0.7.44

package/app/components/workshop/MemoryPanel.vue

@@ -1,364 +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>
+<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 ? $t('memoryPanel.tokenAuto') : $t('memoryPanel.tokenManual')">
+        <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="$t('memoryPanel.tokenPh')"
+      class="token"
+    />
+
+    <div class="search-bar">
+      <a-input-search
+        v-model:value="searchText"
+        size="small"
+        :placeholder="$t('memoryPanel.searchPh')"
+        :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="$t('memoryPanel.writeOk')"
+      :cancel-text="$t('common.cancel')"
+      @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="$t('memoryPanel.dedupLabel')">
+          <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>