From 55a675ef8b8eb6ea0b9a74ffa3ca4e037e7bb28f Mon Sep 17 00:00:00 2001
From: bowenliang123 <liang.bowen.123@qq.com>
Date: Mon, 24 Aug 2026 18:08:37 +0800
Subject: [PATCH] style(detail): tidy the trend detail head row

Restyle the request detail header for a cleaner, more consistent look:
- even 8px gaps and center-aligned items on the single wrapping row
- time pinned right with tabular figures
- provider figures (actual prompt / output / cache) as uniform neutral
  pills with tabular numbers, replacing the plain spans and the two
  same-green accent colors
- marker chip tinted with the warn color, matching the event list chips
---
 src/client/components/requestDetail.tsx | 12 ++++++------
 src/client/styles.css                   | 12 +++++++-----
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/client/components/requestDetail.tsx b/src/client/components/requestDetail.tsx
index 1b70503..25d8cc9 100644
--- a/src/client/components/requestDetail.tsx
+++ b/src/client/components/requestDetail.tsx
@@ -37,17 +37,17 @@ export function makeRequestDetail(
             ? <span className="lc-detail-marker" title={eventLabel(marker)}>{'✂ ' + markerAt}</span>
             : null}
           {isTurn ? <span className="lc-detail-tag">{t('detail.lastStep')}</span> : null}
-          <span>{fmtTime(req.time)}</span>
+          <span className="lc-detail-time">{fmtTime(req.time)}</span>
+          {/* Metric chips: one neutral pill per provider figure; the cache figure drops out on hosts
+              that do not fold `cacheRead` (and on usage-less requests). */}
           {req.prompt !== undefined
-            ? <span className="lc-actual">{t('detail.actual', { n: fmt(req.prompt) })}</span>
+            ? <span className="lc-detail-metric">{t('detail.actual', { n: fmt(req.prompt) })}</span>
             : null}
           {req.output !== undefined
-            ? <span>{t('detail.output', { n: fmt(req.output) })}</span>
+            ? <span className="lc-detail-metric">{t('detail.output', { n: fmt(req.output) })}</span>
             : null}
-          {/* Step-level cache hit: the cache-served half of the billed prompt; absent on hosts
-              that do not fold `cacheRead` (and on usage-less requests) — the figure drops out. */}
           {req.prompt !== undefined && req.cacheRead !== undefined
-            ? <span className="lc-cache">{t('detail.cache', { n: cacheHitPercent(req.cacheRead, req.prompt) ?? '—' })}</span>
+            ? <span className="lc-detail-metric">{t('detail.cache', { n: cacheHitPercent(req.cacheRead, req.prompt) ?? '—' })}</span>
             : null}
         </div>
         <StackedBar parts={partsOf(req)} height={10} />
diff --git a/src/client/styles.css b/src/client/styles.css
index 839882c..08cfa65 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -128,12 +128,14 @@
    slice; max-width keeps the block's ellipsis behavior for narrow blocks. */
 .lc-turn-label { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
 .lc-detail { margin-top: 12px; border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 12px; }
-.lc-detail-head { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; color: var(--dsw-alias-label-secondary); }
-.lc-detail-head b { color: var(--dsw-alias-label-primary); }
-.lc-detail-marker { color: var(--dsw-alias-state-warn-primary); font-size: 11px; background: var(--dsw-alias-bg-layer-2); border-radius: 6px; padding: 1px 7px; }
-.lc-detail-head .lc-actual { color: var(--dsw-alias-state-success-primary); }
-.lc-detail-head .lc-cache { color: var(--dsw-alias-state-success-primary); }
+/* One wrapping row: title + event/tag chips + right-pinned tabular time, then uniform neutral metric pills —
+   same pill size/tabular figures, so a wrapped line still reads as a grid instead of scattered inline spans. */
+.lc-detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; color: var(--dsw-alias-label-secondary); }
+.lc-detail-head b { font-size: 13px; color: var(--dsw-alias-label-primary); }
+.lc-detail-time { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.lc-detail-marker { color: var(--dsw-alias-state-warn-primary); font-size: 11px; background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent); border-radius: 6px; padding: 1px 7px; }
 .lc-detail-tag { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 4px; padding: 0 6px; font-size: 11px; color: var(--dsw-alias-label-secondary); }
+.lc-detail-metric { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 2px 8px; border-radius: 6px; color: var(--dsw-alias-label-primary); background: color-mix(in srgb, var(--dsw-alias-label-secondary) 14%, transparent); }
 .lc-detail-rows { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
 .lc-detail-row { display: flex; align-items: center; gap: 8px; }
 .lc-detail-label { min-width: 70px; white-space: nowrap; color: var(--dsw-alias-label-secondary); }