feat(agentic): Agent X cosmetic improvements / Agent X 外观改进 (#607)

* feat(agentic): enrich benchmark point tooltips

Preserve KV offload backend versions and multinode transfer engines through ingest, then show offload type, backend/version, transfer engine, and cache-hit rates across official, comparison, and unofficial-run tooltips.

中文：丰富 Agent X 基准测试数据点的提示卡信息。在摄取流程中保留 KV 卸载后端版本和多节点传输引擎，并在正式运行、GPU 对比及非正式运行覆盖层的提示卡中展示卸载类型、后端及版本、传输引擎和 Cache 命中率。

* fix(inference): restore unofficial overlay tooltips

Pass the portaled tooltip element through the shared D3 render context so unofficial-run points can render and pin the same tooltip as official points.

中文：通过共享 D3 渲染上下文传递 Portal 中的提示卡节点，使非正式运行数据点能够与正式运行数据点一样显示并固定提示卡。

* feat(agentic): surface runtime component metadata

Preserve and render KV offload engines, KV transfer engines, and router names/versions across official, comparison, fixed-sequence, agentic, and unofficial-run tooltips. Add an artifact-backed metadata backfill that merges only runtime keys into historical rows.

中文：展示 Agentic 运行时组件元数据。在正式运行、GPU 对比、固定序列长度、Agentic 及非正式运行提示卡中保留并展示 KV 卸载引擎、KV 传输引擎以及路由器名称和版本；新增基于原始产物的元数据回填，仅向历史数据合并运行时字段。

* fix(inference): preserve legacy and localized tooltips

Keep an explicit legacy offload fallback when detailed runtime metadata is unavailable, and rebuild unofficial overlay layers when the locale changes.

中文：保留旧版及本地化提示卡。在缺少详细运行时元数据时显示明确的旧版卸载状态，并在语言切换后重新构建非正式运行覆盖层。

* fix(inference): scope legacy offload fallback

Show the binary fallback only for legacy agentic rows so fixed-sequence database defaults do not create misleading tooltip metadata.

中文：限定旧版卸载状态的适用范围。仅对旧版 Agentic 数据显示二元回退信息，避免固定序列长度数据的数据库默认值产生误导性提示卡。

* fix(db): harden runtime metadata backfill

Store component versions only when their names are valid and include the producer rollout date itself in historical backfill candidates.

中文：强化运行时元数据回填。仅在组件名称有效时保留对应版本，并将生产端上线当天纳入历史回填候选范围。

* fix(agentic): hide CPU cache hits without offload

Gate CPU Cache hit-rate rows behind the canonical KV-offload state in shared point tooltips and the agentic detail summary. Preserve GPU and theoretical rates, legacy fallback behavior, and unofficial-run overlays.\n\n中文：仅在启用 KV 卸载时展示 CPU Cache 命中率，统一覆盖数据点提示卡和 Agentic 详情摘要；保留 GPU 与理论命中率、旧版数据回退逻辑以及非正式运行覆盖层支持。

* fix(inference): omit disabled offload type

Hide the Offload Type row when the canonical KV-offloading descriptor is none while preserving non-empty types and legacy agentic fallbacks.

中文：当规范化 KV 卸载描述为 none 时隐藏“卸载类型”行，同时保留有效卸载类型和旧版 Agentic 数据的回退展示。

Author: cquil11

packages/app/cypress/e2e/agentic-point-time-series.cy.ts

@@ -222,7 +222,9 @@ const pointMeta = {
   date: '2026-06-23',
   run_url: null,
   server_gpu_cache_hit_rate: 0.5,
-  server_cpu_cache_hit_rate: null,
+  // Reproduces historical rows that retained a CPU hit metric after offload
+  // was disabled. The agentic point summary must suppress this stale value.
+  server_cpu_cache_hit_rate: 0.42,
 };
 
 const sourceSeries = (source: Record<string, unknown>, prompt: number, generation: number) => ({
@@ -297,6 +299,9 @@ describe('Agentic point orchestrator metric sources', () => {
   });
 
   it('switches every server chart to an orchestrator-normalized worker', () => {
+    cy.contains('GPU cache hit').should('be.visible');
+    cy.contains('CPU cache hit').should('not.exist');
+
     cy.get('[data-testid="metric-source-toolbar"]')
       .should('have.css', 'position', 'sticky')
       .and('have.css', 'top', '64px');

packages/app/cypress/e2e/gpu-compare-agentic-detail.cy.ts

@@ -108,10 +108,18 @@ const agenticBenchmarks = AGENTIC_HARDWARE.flatMap((g) =>
     isl: null,
     osl: null,
     conc,
-    offload_mode: 'off',
+    offload_mode: 'on',
     benchmark_type: 'agentic_traces',
     image: 'vllm/vllm-openai:v0.9.0',
-    metrics: agenticMetrics(conc),
+    metrics: {
+      ...agenticMetrics(conc),
+      kv_offloading: 'dram',
+      kv_offload_backend: 'mooncake',
+      kv_offload_backend_version: '0.3.11.post1',
+      router_name: 'vllm-router',
+      router_version: '0.1.14',
+      server_gpu_cache_hit_rate: 0.875,
+    },
     workers: null,
     date: AGENTIC_DATE,
     run_url: null,
@@ -177,6 +185,12 @@ describe('GPU comparison agentic point detail', () => {
       });
 
     cy.get('[data-chart-tooltip]:visible').should('have.length', 1);
+    cy.get('[data-chart-tooltip]:visible')
+      .should('contain', 'Offload Type: DRAM')
+      .and('contain', 'KV Offload Engine: Mooncake 0.3.11.post1')
+      .and('contain', 'Router: vLLM Router 0.1.14')
+      .and('contain', 'GPU Cache Hit Rate: 87.5%')
+      .and('not.contain', 'Offload Mode');
     cy.get('[data-chart-tooltip]:visible [data-action="view-charts"]')
       .should('be.visible')
       .then(($link) => {

packages/app/cypress/e2e/unofficial-watermark.cy.ts

@@ -19,6 +19,16 @@ describe('Unofficial-run watermark', () => {
           ],
           benchmarks: benchmarks.map((row: Record<string, unknown>) => ({
             ...row,
+            is_multinode: true,
+            metrics: {
+              ...(row.metrics as Record<string, unknown> | undefined),
+              kv_offloading: 'dram',
+              kv_offload_backend: 'hicache',
+              kv_p2p_transfer: 'nixl',
+              router_name: 'sglang-router',
+              router_version: '0.3.2',
+              server_gpu_cache_hit_rate: 0.875,
+            },
             run_url: runUrl,
           })),
           evaluations: [],
@@ -58,6 +68,20 @@ describe('Unofficial-run watermark', () => {
         cy.wrap($image).parent('svg').find('.unofficial-watermark-image').should('have.length', 1);
       });
 
+    cy.get('[data-testid="scatter-graph"] .unofficial-overlay-pt')
+      .first()
+      .then(($point) => {
+        $point[0].dispatchEvent(new MouseEvent('mouseenter'));
+        const tooltip = $point[0].ownerDocument.querySelector<HTMLElement>('[data-chart-tooltip]');
+        expect(tooltip).not.to.equal(null);
+        expect(tooltip!.style.display).to.equal('block');
+        expect(tooltip).to.contain.text('Offload Type: DRAM');
+        expect(tooltip).to.contain.text('KV Offload Engine: HiCache');
+        expect(tooltip).to.contain.text('KV Transfer Engine: NIXL');
+        expect(tooltip).to.contain.text('Router: SGLang Router 0.3.2');
+        expect(tooltip).to.contain.text('GPU Cache Hit Rate: 87.5%');
+      });
+
     cy.get('[data-testid="scatter-graph"]').first().scrollIntoView();
     cy.screenshot('unofficial-watermark', { capture: 'viewport' });
 

packages/app/src/components/inference/agentic-point/point-summary.test.ts

@@ -0,0 +1,47 @@
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import type { PointMeta } from '@/hooks/api/use-trace-server-metrics';
+
+import { PointSummary } from './point-summary';
+
+function meta(overrides: Partial<PointMeta> = {}): PointMeta {
+  return {
+    id: 206885,
+    hardware: 'gb200',
+    framework: 'dynamo-vllm',
+    model: 'deepseek-r1-0528',
+    precision: 'fp8',
+    spec_method: 'none',
+    disagg: true,
+    conc: 128,
+    offload_mode: 'off',
+    isl: null,
+    osl: null,
+    benchmark_type: 'agentic_traces',
+    date: '2026-06-23',
+    run_url: null,
+    server_gpu_cache_hit_rate: 0.5,
+    server_cpu_cache_hit_rate: 0.42,
+    ...overrides,
+  };
+}
+
+describe('PointSummary', () => {
+  it('hides a stale CPU cache hit rate when offload is disabled', () => {
+    const html = renderToStaticMarkup(createElement(PointSummary, { meta: meta() }));
+
+    expect(html).toContain('GPU cache hit');
+    expect(html).not.toContain('CPU cache hit');
+  });
+
+  it('shows the CPU cache hit rate when offload is enabled', () => {
+    const html = renderToStaticMarkup(
+      createElement(PointSummary, { meta: meta({ offload_mode: 'on' }) }),
+    );
+
+    expect(html).toContain('CPU cache hit');
+    expect(html).toContain('42.00%');
+  });
+});

packages/app/src/components/inference/agentic-point/point-summary.tsx

@@ -3,6 +3,7 @@
 import type { ReactNode } from 'react';
 
 import type { PointMeta } from '@/hooks/api/use-trace-server-metrics';
+import { isKvOffloadEnabled } from '@/lib/kv-offload';
 
 const fmtPct = (v: number | null | undefined): string =>
   v === null || v === undefined || Number.isNaN(v) ? '—' : `${(v * 100).toFixed(2)}%`;
@@ -18,6 +19,8 @@ function MetaLine({ label, value }: { label: string; value: ReactNode }) {
 
 /** Selected-point header: config facts (offload, concurrency, cache hit rates, ISL/OSL). */
 export function PointSummary({ meta }: { meta: PointMeta }) {
+  const showCpuCacheHit = isKvOffloadEnabled(meta);
+
   return (
     <div className="mb-4">
       <div className="flex items-baseline justify-between gap-3 mb-2">
@@ -41,7 +44,9 @@ export function PointSummary({ meta }: { meta: PointMeta }) {
         <MetaLine label="Offload" value={(meta.offload_mode ?? 'off').toUpperCase()} />
         <MetaLine label="Concurrency" value={meta.conc} />
         <MetaLine label="GPU cache hit" value={fmtPct(meta.server_gpu_cache_hit_rate)} />
-        <MetaLine label="CPU cache hit" value={fmtPct(meta.server_cpu_cache_hit_rate)} />
+        {showCpuCacheHit && (
+          <MetaLine label="CPU cache hit" value={fmtPct(meta.server_cpu_cache_hit_rate)} />
+        )}
         {meta.isl !== null && <MetaLine label="ISL" value={meta.isl} />}
         {meta.osl !== null && <MetaLine label="OSL" value={meta.osl} />}
       </div>

packages/app/src/components/inference/types.ts

@@ -190,9 +190,21 @@ export interface AggDataEntry {
   isl?: number | null;
   /** OSL in tokens — null for agentic_traces. */
   osl?: number | null;
-  // ── Agentic-only fields (populated from metrics JSONB for `agentic_traces` rows) ──
+  // ── Runtime cache metadata (populated from metrics JSONB when emitted) ──
   /** "on" | "off" — whether KV cache offload to CPU was enabled. */
   offload_mode?: string;
+  /** Offload tier/type, for example `dram` or `none`. */
+  kv_offloading?: string;
+  /** Offload implementation, for example `mooncake`, `lmcache`, or `hicache`. */
+  kv_offload_backend?: string;
+  /** Optional version independently declared for the offload backend. */
+  kv_offload_backend_version?: string;
+  /** P2P engine used to move KV state between workers on multinode runs. */
+  kv_p2p_transfer?: string;
+  /** Request router implementation, for example `vllm-router` or `sglang-router`. */
+  router_name?: string;
+  /** Version independently declared for the request router. */
+  router_version?: string;
   /** Actual server-observed GPU prefix-cache hit rate (0..1). */
   server_gpu_cache_hit_rate?: number;
   /** Actual server-observed CPU prefix-cache hit rate (0..1). */

packages/app/src/components/inference/ui/GPUGraph.tsx

@@ -853,6 +853,7 @@ const GPUGraph = React.memo(
               hardwareConfig,
               runUrl: d.run_url ? updateRepoUrl(d.run_url) : undefined,
               hasTrace: typeof d.id === 'number' ? traceAvailability?.[d.id] === true : false,
+              locale,
             }),
           getRulerX: (d, xScale) => (xScale as d3.ScaleLinear<number, number>)(d.x),
           getRulerY: (d, yScale) => (yScale as d3.ScaleLinear<number, number>)(d.y),

packages/app/src/components/inference/ui/ScatterGraph.tsx

@@ -1204,6 +1204,7 @@ const ScatterGraph = React.memo(
             isTracked: trackedConfigIdsRef.current.has(buildPointConfigId(d)),
             runUrl: d.run_url ? updateRepoUrl(d.run_url) : undefined,
             hasTrace: typeof d.id === 'number' ? traceAvailability?.[d.id] === true : false,
+            locale,
           }),
         getRulerX: (d: InferenceData, xScale: any) => (xScale as ContinuousScale)(d.x),
         getRulerY: (d: InferenceData, yScale: any) => (yScale as ContinuousScale)(d.y),
@@ -1270,6 +1271,7 @@ const ScatterGraph = React.memo(
         // tooltip content closure (the "View charts" button), so rebuild the
         // config when the presence fetch resolves.
         traceAvailability,
+        locale,
       ],
     );
 
@@ -2211,8 +2213,7 @@ const ScatterGraph = React.memo(
               // Overlay tooltip handlers
               const svgNode = ctx.layout.svg.node()!;
               const container = svgNode.parentElement as HTMLDivElement;
-              const tooltipDiv = svgNode.nextElementSibling as HTMLDivElement;
-              const tooltip = d3.select(tooltipDiv);
+              const tooltip = d3.select(ctx.tooltipElement);
 
               const createOverlayConfig = (d: InferenceData, pinned: boolean) => ({
                 data: d,
@@ -2222,6 +2223,7 @@ const ScatterGraph = React.memo(
                 selectedYAxisMetric,
                 hardwareConfig: overlayData.hardwareConfig,
                 overlayData,
+                locale,
               });
 
               overlayPoints
@@ -2493,6 +2495,7 @@ const ScatterGraph = React.memo(
       yLabel,
       selectedYAxisMetric,
       chartDefinition,
+      locale,
     ]);
 
     // Layers handle for the decoration effect — lets it re-run individual