style: separate trace origin and sender metadata rows

changelogs/unreleased.md

@@ -1,5 +1,7 @@
 # Unreleased
 
+- Present trace-detail UMO and sender on separate icon-and-value rows instead of a dot-separated line, preserving UMO alias tooltips.
+
 - Use native system fonts throughout trace text and tooltips instead of Outfit, without changing text sizing or icon fonts. Change running status chips and detail badges from amber to blue.
 
 - Include month and day in trace timestamps (MM-DD HH:mm:ss.SSS), including detail timestamps and timeline tooltips.

dashboard/src/components/shared/TraceDisplayer.vue

@@ -13,6 +13,7 @@ import {
   RefreshCw,
   Search,
   Send,
+  UserRound,
   Workflow,
   X,
 } from "@lucide/vue";
@@ -933,14 +934,20 @@ onBeforeUnmount(() => {
           <div class="trace-detail-summary">
             <div class="trace-detail-kicker"><span class="trace-status-badge" :class="statusClass(selectedEvent)">{{ statusLabel(selectedEvent) }}</span><span>{{ shortSpan(selectedEvent.span_id) }}</span></div>
             <TraceMessagePreview :key="selectedEvent.span_id" class="trace-message-title" tag="h2" :lines="2" :text="selectedEvent.message_outline || tm('untitled')" />
-            <p>
+            <div class="trace-detail-meta">
+            <p class="trace-detail-meta-row" aria-label="UMO">
+              <Hash :size="14" aria-hidden="true" />
               <v-tooltip :text="selectedEvent.umo" location="top" content-class="trace-tooltip">
                 <template #activator="{ props }">
                   <span v-bind="props" :class="{ 'trace-hover-name': umoNames[selectedEvent.umo] && umoNames[selectedEvent.umo] !== selectedEvent.umo }">{{ umoNames[selectedEvent.umo] || selectedEvent.umo || "-" }}</span>
                 </template>
               </v-tooltip>
-              · {{ selectedEvent.sender_name || "-" }}
             </p>
+            <p class="trace-detail-meta-row" :aria-label="tm('columns.sender')">
+              <UserRound :size="14" aria-hidden="true" />
+              <span>{{ selectedEvent.sender_name || "-" }}</span>
+            </p>
+            </div>
           </div>
           <div class="trace-detail-actions">
             <div class="trace-detail-time">{{ formatTime(selectedEvent.first_time) }}</div>
@@ -1076,6 +1083,10 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+.trace-detail-meta { display: grid; gap: 5px; }
+.trace-detail-meta-row { align-items: flex-start; display: flex; gap: 7px; }
+.trace-detail-meta-row > svg { flex: 0 0 auto; margin-top: 1px; }
+.trace-detail-meta-row > span { min-width: 0; }
 .trace-explorer :deep(button), .trace-explorer :deep(input), .trace-explorer :deep(select), .trace-explorer :deep(textarea), .trace-explorer :deep(.v-btn), .trace-explorer :deep(.v-chip), .trace-explorer :deep(.v-field), .trace-explorer :deep(.v-table) { font-family: inherit; }
 :global(.trace-tooltip) { font-family: system-ui, sans-serif; }
 :global(.trace-menu) { font-family: system-ui, sans-serif; }

docs/en/use/webui.md

@@ -172,6 +172,8 @@ The toolbar contains search, fullscreen, font-size controls, and `Install Pip pa
 
 ### Trace
 
+Below the detail title, UMO and sender appear on separate icon-and-value rows. UMO aliases retain their hover tooltip showing the full identifier.
+
 Trace text and tooltips use the system UI font rather than Outfit. Running status is blue; completed and error statuses remain green and red.
 
 List and detail timestamps include month and day using `MM-DD HH:mm:ss.SSS` in the browser's local time zone; timeline timestamp tooltips use the same format.

docs/zh/use/webui.md

@@ -174,6 +174,8 @@ ChatUI 支持以下常用能力：
 
 包含 Agent 调用时，详情统计区增加无边框的 Tokens 卡片，展示本轮输入（含缓存输入）与输出的累计总量，以两位小数的 k/M 格式显示，悬浮提示保留精确数量；悬停或键盘聚焦可查看输入、输出及缓存命中明细。同一 Agent 的累计快照只取最新一份，多个 Agent 分别累计。没有已上报用量时显示“—”，不按 0 处理。
 
+详情标题下的 UMO 和发送人分别以“图标 + 值”独立成行，不再使用点分隔；UMO 别名仍可悬停查看完整标识。
+
 追踪区域和悬停提示使用系统默认字体，不使用 Outfit。运行中状态为蓝色，已完成和错误仍分别为绿色和红色。
 
 列表和详情时间戳按浏览器本地时区显示月、日，格式为 `MM-DD HH:mm:ss.SSS`；时间线悬停提示使用同一格式。