From f0abe1bea1feb5978293b21b68fa4849cb13a6a6 Mon Sep 17 00:00:00 2001
From: ishaan-berri <155045088+ishaan-berri@users.noreply.github.com>
Date: Sat, 3 Oct 2026 10:56:48 -0700
Subject: [PATCH] feat(lens): live dot field timeline and full-screen traces
 view (#44390)

* feat(lens): add dot field layout and live status helpers for the traces timeline

* test(lens): cover dot field layout, agent colors and live status

* feat(lens): draw the traces timeline as a live dot field

* feat(lens): add the sweep animation for the live traces timeline

* feat(lens): put the lens tabs in a compact header and fill the screen with traces
---
 ui/litellm-dashboard/src/app/globals.css      |   9 +
 .../src/components/lens/LensWorkspace.tsx     |  38 +--
 .../view_logs/TraceView/TracesTimeline.tsx    | 261 ++++++++++++++----
 .../view_logs/TraceView/lensField.test.ts     | 114 ++++++++
 .../view_logs/TraceView/lensField.ts          |  67 +++++
 5 files changed, 423 insertions(+), 66 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/view_logs/TraceView/lensField.test.ts
 create mode 100644 ui/litellm-dashboard/src/components/view_logs/TraceView/lensField.ts

diff --git a/ui/litellm-dashboard/src/app/globals.css b/ui/litellm-dashboard/src/app/globals.css
index e1ff921648f..72d304c0dc7 100644
--- a/ui/litellm-dashboard/src/app/globals.css
+++ b/ui/litellm-dashboard/src/app/globals.css
@@ -473,3 +473,12 @@
 [data-slot="dialog-content"][data-nested-dialog-open] {
   visibility: hidden;
 }
+
+@keyframes lens-sweep {
+  from {
+    left: -6rem;
+  }
+  to {
+    left: 100%;
+  }
+}
diff --git a/ui/litellm-dashboard/src/components/lens/LensWorkspace.tsx b/ui/litellm-dashboard/src/components/lens/LensWorkspace.tsx
index 0a3d3ae6a0d..a0ac3e3e59c 100644
--- a/ui/litellm-dashboard/src/components/lens/LensWorkspace.tsx
+++ b/ui/litellm-dashboard/src/components/lens/LensWorkspace.tsx
@@ -69,29 +69,31 @@ function LensContent({
   const openDemo = onDemo ? () => onDemo(activeTab) : undefined;
   return (
     <LensPreviewTarget.Provider value={previewTarget}>
-      <main className="flex w-full min-w-0 flex-1 flex-col gap-5 p-6 md:p-8">
-        <div className="flex min-h-9 flex-wrap items-center justify-between gap-3">
-          <h1 className="flex items-center gap-2 text-2xl font-semibold tracking-tight">
-            <Aperture aria-hidden="true" className="size-7" strokeWidth={1.75} />
-            Lens
-          </h1>
-          <div ref={setPreviewTarget} />
-        </div>
+      <main className="flex min-h-full w-full min-w-0 flex-1 flex-col gap-2 px-3 pt-2 pb-3">
         {demo && <DemoNotice onExit={onExit} />}
         <Tabs
           value={activeTab}
           onValueChange={(value) => (demo ? setDemoTab(value as Tab) : void setTab(value as Tab))}
-          className="min-h-0 flex-1 gap-4"
+          className="min-h-0 flex-1 gap-2"
         >
-          <TabsList variant="line" aria-label="Lens" className="w-full justify-start gap-6 border-b px-0">
-            <TabsTrigger value="traces" className="flex-none px-0">
-              Traces
-            </TabsTrigger>
-            <TabsTrigger value="investigations" className="flex-none px-0">
-              Investigations
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="traces" keepMounted className="min-h-0">
+          <div className="flex min-h-8 flex-wrap items-center justify-between gap-3">
+            <div className="flex items-center gap-3">
+              <h1 className="flex items-center gap-1.5 text-sm font-semibold tracking-tight">
+                <Aperture aria-hidden="true" className="size-4" strokeWidth={2} />
+                Lens
+              </h1>
+              <TabsList aria-label="Lens" className="h-8">
+                <TabsTrigger value="traces" className="px-3">
+                  Traces
+                </TabsTrigger>
+                <TabsTrigger value="investigations" className="px-3">
+                  Investigations
+                </TabsTrigger>
+              </TabsList>
+            </div>
+            <div ref={setPreviewTarget} />
+          </div>
+          <TabsContent value="traces" keepMounted className="flex min-h-0 flex-col">
             <AgentTracesPage
               accessToken={accessToken}
               isActive={activeTab === "traces"}
diff --git a/ui/litellm-dashboard/src/components/view_logs/TraceView/TracesTimeline.tsx b/ui/litellm-dashboard/src/components/view_logs/TraceView/TracesTimeline.tsx
index 7539e5a4e83..17ab684d024 100644
--- a/ui/litellm-dashboard/src/components/view_logs/TraceView/TracesTimeline.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/TraceView/TracesTimeline.tsx
@@ -5,7 +5,9 @@ import { useEffect, useMemo, useRef, useState } from "react";
 
 import { cn } from "@/lib/cva.config";
 
+import { FIELD_COLS, FIELD_ROWS, agentDotColor, agoLabel, columnDots, isReceiving } from "./lensField";
 import type { TraceSummary } from "./traceTypes";
+import { traceAgentNames } from "./traceUtils";
 
 const BUCKETS = 60;
 const TICKS = 6;
@@ -24,6 +26,7 @@ export interface Bucket {
   endMs: number;
   runs: number;
   failed: number;
+  agents: readonly string[];
 }
 
 /** Run counts per equal-width time bucket across the window; runs outside it are dropped. */
@@ -32,6 +35,7 @@ export function bucketRuns(runs: readonly TraceSummary[], range: TimeWindow, buc
   const placed = runs.map((run) => ({
     index: Math.floor((moment(run.start_time).valueOf() - range.startMs) / width),
     failed: run.error_count > 0,
+    agent: traceAgentNames(run)[0] ?? "",
   }));
   return Array.from({ length: buckets }, (_, i) => {
     const hits = placed.filter((p) => p.index === i);
@@ -40,6 +44,7 @@ export function bucketRuns(runs: readonly TraceSummary[], range: TimeWindow, buc
       endMs: range.startMs + (i + 1) * width,
       runs: hits.length,
       failed: hits.filter((p) => p.failed).length,
+      agents: hits.filter((p) => !p.failed).map((p) => p.agent),
     };
   });
 }
@@ -73,44 +78,202 @@ interface TracesTimelineProps {
   onSelect: (selection: TimeWindow | null) => void;
 }
 
-function BucketBar({
-  bucket,
-  max,
-  dimmed,
-  hovered,
-}: {
-  bucket: Bucket;
+const FAILED_RED = "#e5484d";
+const DOT_PITCH = 6;
+const FIELD_HEIGHT = FIELD_ROWS * DOT_PITCH;
+
+function fieldDotColor(lit: boolean, dot: ReturnType<typeof columnDots>[number], grid: string): string {
+  if (!lit) return grid;
+  if (dot.kind === "failed") return FAILED_RED;
+  return dot.kind === "run" ? dot.color : grid;
+}
+
+interface FieldFrame {
+  buckets: readonly Bucket[];
   max: number;
-  dimmed: boolean;
-  hovered: boolean;
+  band: Band | null;
+  hover: number | null;
+  progress: number;
+}
+
+function dotRadius(lit: boolean, hovered: boolean): number {
+  if (!lit) return 0.9;
+  return hovered ? 2.4 : 1.9;
+}
+
+function drawField(canvas: HTMLCanvasElement, { buckets, max, band, hover, progress }: FieldFrame) {
+  const context = canvas.getContext("2d");
+  const width = canvas.clientWidth;
+  if (!context || width === 0) return;
+  const ratio = window.devicePixelRatio || 1;
+  canvas.width = Math.round(width * ratio);
+  canvas.height = Math.round(FIELD_HEIGHT * ratio);
+  context.setTransform(ratio, 0, 0, ratio, 0, 0);
+  context.clearRect(0, 0, width, FIELD_HEIGHT);
+  const grid = document.documentElement.classList.contains("dark") ? "rgba(255,255,255,0.08)" : "rgba(15,23,42,0.08)";
+  const columnWidth = width / buckets.length;
+  const pitch = columnWidth / FIELD_COLS;
+  buckets.forEach((bucket, i) => {
+    const dots = columnDots(bucket, max, i * 7919 + bucket.runs);
+    const visible = Math.ceil(dots.length * progress);
+    const dimmed = band !== null && (i < band.lo || i > band.hi);
+    dots.forEach((dot, index) => {
+      const lit = dot.kind !== "grid" && index < visible;
+      context.globalAlpha = lit && dimmed ? 0.15 : 1;
+      context.fillStyle = fieldDotColor(lit, dot, grid);
+      context.beginPath();
+      context.arc(
+        i * columnWidth + pitch * ((index % FIELD_COLS) + 0.5),
+        FIELD_HEIGHT - DOT_PITCH * (Math.floor(index / FIELD_COLS) + 0.5),
+        dotRadius(lit, hover === i),
+        0,
+        Math.PI * 2,
+      );
+      context.fill();
+    });
+  });
+  context.globalAlpha = 1;
+}
+
+function useRiseIn(): number {
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setProgress(1);
+      return;
+    }
+    const start = performance.now();
+    let frame = requestAnimationFrame(function rise(now) {
+      const t = Math.min(1, (now - start) / 700);
+      setProgress(1 - (1 - t) ** 3);
+      if (t < 1) frame = requestAnimationFrame(rise);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  return progress;
+}
+
+function DotField({
+  buckets,
+  max,
+  band,
+  hover,
+}: {
+  buckets: readonly Bucket[];
+  max: number;
+  band: Band | null;
+  hover: number | null;
 }) {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const progress = useRiseIn();
+  useEffect(() => {
+    const node = canvas.current;
+    if (!node) return;
+    const frame: FieldFrame = { buckets, max, band, hover, progress };
+    const paint = () => drawField(node, frame);
+    paint();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(paint);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [buckets, max, band, hover, progress]);
   return (
-    <div
-      className="pointer-events-none flex h-full flex-1 flex-col justify-end px-px"
-      data-testid="timeline-bucket"
-      data-runs={bucket.runs}
-    >
-      {bucket.runs > 0 && (
-        <div
-          className={cn(
-            "mx-auto flex w-full max-w-[10px] flex-col overflow-hidden rounded-t-[2px]",
-            dimmed && "bg-muted-foreground/25",
-            !dimmed && (hovered ? "bg-info" : "bg-info/65"),
-          )}
-          style={{ height: `${Math.max(6, (bucket.runs / max) * 100)}%` }}
-        >
-          {bucket.failed > 0 && (
-            <div
-              className="w-full shrink-0 bg-destructive"
-              style={{ height: `${Math.max(2, Math.min(25, (bucket.failed / bucket.runs) * 100))}%` }}
-            />
-          )}
-        </div>
+    <canvas
+      ref={canvas}
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-x-0 bottom-0 w-full"
+      style={{ height: FIELD_HEIGHT }}
+    />
+  );
+}
+
+function BucketBar({ bucket }: { bucket: Bucket }) {
+  return <div className="pointer-events-none h-full flex-1" data-testid="timeline-bucket" data-runs={bucket.runs} />;
+}
+
+function useNow(intervalMs: number): number {
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), intervalMs);
+    return () => window.clearInterval(timer);
+  }, [intervalMs]);
+  return now;
+}
+
+function LivePulse({ live }: { live: boolean }) {
+  return (
+    <span aria-hidden="true" className="relative flex size-2">
+      {live && (
+        <span className="absolute inline-flex size-full rounded-full bg-[#3b5bfd] opacity-60 motion-safe:animate-ping" />
       )}
+      <span
+        className={cn("relative inline-flex size-2 rounded-full", live ? "bg-[#3b5bfd]" : "bg-muted-foreground/50")}
+      />
+    </span>
+  );
+}
+
+function latestStart(runs: readonly TraceSummary[]): number | null {
+  return runs.reduce<number | null>((latest, run) => {
+    const t = moment(run.start_time).valueOf();
+    return latest === null || t > latest ? t : latest;
+  }, null);
+}
+
+function FieldHeader({ runs, range }: { runs: readonly TraceSummary[]; range: TimeWindow }) {
+  const now = useNow(1000);
+  const agents = Array.from(new Set(runs.flatMap(traceAgentNames)));
+  const failed = runs.filter((run) => run.error_count > 0).length;
+  const lastMs = latestStart(runs);
+  const live = isReceiving(lastMs, now);
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-1 font-mono text-[11px] leading-none">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-muted-foreground tabular-nums">
+        <span className="flex items-center gap-2" role="status" data-testid="traces-last-seen">
+          <LivePulse live={live} />
+          <span className={cn("font-semibold", live ? "text-[#0011b3] dark:text-[#8b9bff]" : "text-foreground")}>
+            {live ? "receiving" : "idle"}
+          </span>
+          {lastMs !== null && <span>last trace {agoLabel(lastMs, now)}</span>}
+        </span>
+        <span>
+          <span className="font-semibold text-foreground">{runs.length.toLocaleString()}</span>{" "}
+          {runs.length === 1 ? "run" : "runs"} from{" "}
+          <span className="font-semibold text-foreground">{agents.length}</span>{" "}
+          {agents.length === 1 ? "agent" : "agents"}
+          {failed > 0 && <span className="text-[#e5484d]"> · {failed} failed</span>}
+        </span>
+      </div>
+      <div className="flex flex-wrap items-center justify-end gap-x-3 gap-y-1 text-muted-foreground">
+        {agents.slice(0, 6).map((agent) => (
+          <span key={agent} className="flex items-center gap-1.5">
+            <span className="size-[6px] rounded-full" style={{ backgroundColor: agentDotColor(agent) }} />
+            {agent}
+          </span>
+        ))}
+        <span className="rounded border border-border bg-muted/50 px-1.5 py-px">
+          Total {formatSpan(range.endMs - range.startMs)}
+        </span>
+      </div>
     </div>
   );
 }
 
+function NowEdge() {
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-y-0 w-24 bg-gradient-to-r from-transparent via-[#3b5bfd]/[0.08] to-transparent motion-safe:animate-[lens-sweep_6s_linear_infinite] motion-reduce:hidden"
+      />
+      <div aria-hidden="true" className="pointer-events-none absolute inset-y-0 right-0">
+        <span className="absolute inset-y-0 right-0 w-px bg-[#3b5bfd]/50" />
+        <span className="absolute -top-0.5 right-0 size-1.5 translate-x-1/2 rounded-full bg-[#3b5bfd] motion-safe:animate-pulse" />
+      </div>
+    </>
+  );
+}
+
 function BucketTooltip({ bucket, index }: { bucket: Bucket; index: number }) {
   return (
     <div
@@ -125,7 +288,7 @@ function BucketTooltip({ bucket, index }: { bucket: Bucket; index: number }) {
         {bucket.runs} {bucket.runs === 1 ? "run" : "runs"}
         {bucket.failed > 0 && `, ${bucket.failed} failed`}
       </div>
-      <div className="text-info">drag to zoom</div>
+      <div className="text-[#0011b3] dark:text-[#8b9bff]">drag to zoom</div>
     </div>
   );
 }
@@ -185,29 +348,31 @@ function SelectionBracket({
   const leftFrac = band.lo / BUCKETS;
   const rightFrac = (band.hi + 1) / BUCKETS;
   const widthPx = (rightFrac - leftFrac) * stripWidth;
-  const handle = "absolute inset-y-0 w-[3px] cursor-ew-resize bg-info";
+  const handle = "absolute inset-y-0 w-[2px] cursor-ew-resize bg-[#0011b3] dark:bg-[#8b9bff]";
+  const tick =
+    "before:absolute before:top-0 before:h-[2px] before:w-2 before:bg-inherit after:absolute after:bottom-0 after:h-[2px] after:w-2 after:bg-inherit";
   const edgeLabel =
-    "pointer-events-none absolute -top-4 font-mono text-[10px] whitespace-nowrap text-info tabular-nums";
+    "pointer-events-none absolute -bottom-5 font-mono text-[10px] whitespace-nowrap text-[#0011b3] tabular-nums dark:text-[#8b9bff]";
   return (
     <>
       <div
-        className="absolute inset-y-0 cursor-grab rounded-[2px] border border-info bg-info/10 active:cursor-grabbing"
+        className="absolute inset-y-0 cursor-grab bg-[#0011b3]/[0.05] active:cursor-grabbing dark:bg-[#8b9bff]/[0.08]"
         style={{ left: pct(leftFrac), width: pct(rightFrac - leftFrac) }}
         data-testid="timeline-selection"
         onPointerDown={onHandleDown("move")}
       >
         <span
-          className={cn(handle, "-left-px")}
+          className={cn(handle, tick, "-left-px before:left-0 after:left-0")}
           data-testid="timeline-handle-lo"
           onPointerDown={onHandleDown("resize-lo")}
         />
         <span
-          className={cn(handle, "-right-px")}
+          className={cn(handle, tick, "-right-px before:right-0 after:right-0")}
           data-testid="timeline-handle-hi"
           onPointerDown={onHandleDown("resize-hi")}
         />
         {widthPx >= MIN_DURATION_LABEL_PX && (
-          <span className="pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 text-center font-mono text-[11px] font-medium text-info">
+          <span className="pointer-events-none absolute inset-x-0 top-2 text-center font-mono text-[11px] font-semibold text-[#0011b3] dark:text-[#8b9bff]">
             {formatSpan(window.endMs - window.startMs)}
           </span>
         )}
@@ -312,7 +477,6 @@ export function TracesTimeline({ runs, range, selection, onSelect }: TracesTimel
     onSelect(null);
   };
 
-  const isDimmed = (i: number): boolean => band !== null && (i < band.lo || i > band.hi);
   const labelFormat = edgeFormat(range);
 
   return (
@@ -322,16 +486,13 @@ export function TracesTimeline({ runs, range, selection, onSelect }: TracesTimel
       tabIndex={0}
       onKeyDown={onKeyDown}
     >
-      <div className="mb-4 flex items-center">
-        <span className="rounded border border-border bg-muted/50 px-1.5 py-px font-mono text-[10px] text-muted-foreground">
-          Total {formatSpan(range.endMs - range.startMs)}
-        </span>
-      </div>
+      <FieldHeader runs={runs} range={range} />
       <div
         ref={areaRef}
         role="presentation"
         data-testid="timeline-area"
-        className="relative flex h-14 cursor-crosshair touch-none items-end border-b border-border"
+        className="relative mt-2 flex cursor-crosshair touch-none items-end"
+        style={{ height: FIELD_HEIGHT }}
         onPointerDown={(e) => begin("select", e)}
         onPointerMove={onMove}
         onPointerUp={onUp}
@@ -340,13 +501,15 @@ export function TracesTimeline({ runs, range, selection, onSelect }: TracesTimel
       >
         {hover !== null && !drag && (
           <div
-            className="pointer-events-none absolute inset-y-0 w-px bg-info"
+            className="pointer-events-none absolute inset-y-0 w-px bg-[#0011b3]/50 dark:bg-[#8b9bff]/50"
             style={{ left: pct((hover + 0.5) / BUCKETS) }}
             data-testid="timeline-cursor"
           />
         )}
-        {buckets.map((b, i) => (
-          <BucketBar key={b.startMs} bucket={b} max={max} dimmed={isDimmed(i)} hovered={hover === i} />
+        <DotField buckets={buckets} max={max} band={band} hover={hover} />
+        <NowEdge />
+        {buckets.map((b) => (
+          <BucketBar key={b.startMs} bucket={b} />
         ))}
         {band && (
           <SelectionBracket
@@ -358,7 +521,9 @@ export function TracesTimeline({ runs, range, selection, onSelect }: TracesTimel
           />
         )}
       </div>
-      <TickAxis range={range} />
+      <div className="mt-1">
+        <TickAxis range={range} />
+      </div>
       {hover !== null && !drag && <BucketTooltip bucket={buckets[hover]} index={hover} />}
     </div>
   );
diff --git a/ui/litellm-dashboard/src/components/view_logs/TraceView/lensField.test.ts b/ui/litellm-dashboard/src/components/view_logs/TraceView/lensField.test.ts
new file mode 100644
index 00000000000..970700f864d
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/TraceView/lensField.test.ts
@@ -0,0 +1,114 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  AGENT_DOT_COLORS,
+  FIELD_COLS,
+  FIELD_ROWS,
+  UNNAMED_AGENT_COLOR,
+  agoLabel,
+  isReceiving,
+  agentDotColor,
+  columnDots,
+  columnTop,
+  litDots,
+} from "./lensField";
+
+const capacity = FIELD_ROWS * FIELD_COLS;
+const bucket = (runs: number, failed = 0, agents: string[] = []) => ({ runs, failed, agents });
+const count = (dots: ReturnType<typeof columnDots>, kind: string) => dots.filter((dot) => dot.kind === kind).length;
+
+describe("litDots", () => {
+  it("lights nothing for an empty bucket and at least one full row for any runs", () => {
+    expect(litDots(0, 10)).toBe(0);
+    expect(litDots(1, 1000)).toBe(FIELD_COLS);
+  });
+
+  it("fills the busiest bucket and keeps quieter buckets visible with square-root scaling", () => {
+    expect(litDots(4, 4)).toBe(capacity);
+    expect(litDots(1, 4)).toBe(capacity / 2);
+  });
+});
+
+describe("columnDots", () => {
+  it("always returns one dot per slot in the column", () => {
+    expect(columnDots(bucket(0), 4, 1)).toHaveLength(capacity);
+    expect(count(columnDots(bucket(0), 4, 1), "grid")).toBe(capacity);
+  });
+
+  it("puts failures above the successful runs", () => {
+    const dots = columnDots(bucket(4, 1, ["a", "a", "a"]), 4, 3);
+    const lastRun = dots.findLastIndex((dot) => dot.kind === "run");
+    const firstFailed = dots.findIndex((dot) => dot.kind === "failed");
+    expect(firstFailed).toBeGreaterThan(lastRun);
+    expect(count(dots, "failed")).toBeGreaterThan(0);
+  });
+
+  it("colors successful runs by agent in bands sized by each agent's share", () => {
+    const other = ["beta", "gamma", "delta", "omega", "zeta"].find(
+      (name) => agentDotColor(name) !== agentDotColor("alpha"),
+    );
+    if (!other) throw new Error("palette maps every candidate to one color");
+    const dots = columnDots(bucket(4, 0, ["alpha", "alpha", "alpha", other]), 4, 5);
+    const colors = dots.flatMap((dot) => (dot.kind === "run" ? [dot.color] : []));
+    const alpha = colors.filter((color) => color === agentDotColor("alpha")).length;
+    const beta = colors.filter((color) => color === agentDotColor(other)).length;
+    expect(alpha).toBeGreaterThan(beta * 2);
+    expect(beta).toBeGreaterThan(0);
+  });
+
+  it("keeps the bottom row solid so even a single run reads as a mark", () => {
+    const dots = columnDots(bucket(1, 0, ["a"]), 1000, 9);
+    expect(dots.slice(0, FIELD_COLS).every((dot) => dot.kind === "run")).toBe(true);
+  });
+
+  it("is deterministic for the same bucket and seed so the field does not flicker on re-render", () => {
+    expect(columnDots(bucket(3, 1, ["a", "b"]), 4, 11)).toEqual(columnDots(bucket(3, 1, ["a", "b"]), 4, 11));
+  });
+});
+
+describe("agentDotColor", () => {
+  it("gives each agent a stable color from the palette", () => {
+    expect(agentDotColor("claude-code")).toBe(agentDotColor("claude-code"));
+    expect(AGENT_DOT_COLORS).toContain(agentDotColor("claude-code"));
+  });
+
+  it("keeps runs with no agent name neutral so they never look like a named agent", () => {
+    expect(agentDotColor("")).toBe(UNNAMED_AGENT_COLOR);
+    expect(AGENT_DOT_COLORS).not.toContain(agentDotColor(""));
+  });
+});
+
+describe("columnTop", () => {
+  it("reaches the top of the field only for the busiest bucket", () => {
+    expect(columnTop(4, 4)).toBe(1);
+    expect(columnTop(0, 4)).toBe(0);
+    expect(columnTop(1, 4)).toBeGreaterThan(0);
+    expect(columnTop(1, 4)).toBeLessThan(columnTop(2, 4));
+  });
+});
+
+describe("agoLabel", () => {
+  const now = Date.UTC(2026, 9, 3, 12, 0, 0);
+
+  it("rounds down to the largest whole unit", () => {
+    expect(agoLabel(now - 2_000, now)).toBe("just now");
+    expect(agoLabel(now - 45_000, now)).toBe("45s ago");
+    expect(agoLabel(now - 12 * 60_000 - 59_000, now)).toBe("12m ago");
+    expect(agoLabel(now - 3 * 3_600_000, now)).toBe("3h ago");
+    expect(agoLabel(now - 2 * 86_400_000, now)).toBe("2d ago");
+  });
+
+  it("treats a timestamp slightly in the future as just now instead of negative", () => {
+    expect(agoLabel(now + 10_000, now)).toBe("just now");
+  });
+});
+
+describe("isReceiving", () => {
+  const now = Date.UTC(2026, 9, 3, 12, 0, 0);
+
+  it("is live only when a trace landed in the last five minutes", () => {
+    expect(isReceiving(now - 4 * 60_000, now)).toBe(true);
+    expect(isReceiving(now - 6 * 60_000, now)).toBe(false);
+    expect(isReceiving(null, now)).toBe(false);
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/view_logs/TraceView/lensField.ts b/ui/litellm-dashboard/src/components/view_logs/TraceView/lensField.ts
new file mode 100644
index 00000000000..048cc98e713
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/TraceView/lensField.ts
@@ -0,0 +1,67 @@
+export const AGENT_DOT_COLORS = ["#0011b3", "#3b5bfd", "#7c93ff", "#22b3e8"] as const;
+export const FIELD_ROWS = 12;
+export const FIELD_COLS = 2;
+
+export type FieldDot = { kind: "run"; color: string } | { kind: "failed" } | { kind: "grid" };
+
+export interface FieldBucket {
+  runs: number;
+  failed: number;
+  agents: readonly string[];
+}
+
+const hash = (seed: number, value: number): number => Math.imul(seed ^ Math.imul(value, 0x9e3779b1), 0x85ebca6b) >>> 0;
+
+export const UNNAMED_AGENT_COLOR = "#94a3b8";
+
+export function agentDotColor(agent: string): string {
+  if (!agent) return UNNAMED_AGENT_COLOR;
+  const code = Array.from(agent).reduce((total, char) => hash(total, char.charCodeAt(0)), 7);
+  return AGENT_DOT_COLORS[code % AGENT_DOT_COLORS.length];
+}
+
+/** Lit dot count for a bucket: square-root scaled against the busiest bucket so sparse traffic still reads. */
+export function litDots(runs: number, max: number, capacity = FIELD_ROWS * FIELD_COLS): number {
+  if (runs === 0 || max === 0) return 0;
+  return Math.max(FIELD_COLS, Math.round(Math.sqrt(runs / max) * capacity));
+}
+
+/**
+ * Bottom-up dots for one time bucket. Successful runs fill from the bottom in agent-colored bands sized by
+ * each agent's share; failures sit on top. A stable sprinkle of gaps (seeded by bucket) keeps the field organic.
+ */
+export function columnDots(bucket: FieldBucket, max: number, seed: number): readonly FieldDot[] {
+  const capacity = FIELD_ROWS * FIELD_COLS;
+  const lit = litDots(bucket.runs, max, capacity);
+  const failed =
+    bucket.failed === 0 ? 0 : Math.min(lit, Math.max(FIELD_COLS, Math.round((bucket.failed / bucket.runs) * lit)));
+  const ok = lit - failed;
+  const agents = bucket.agents.length ? bucket.agents : [""];
+  return Array.from({ length: capacity }, (_, index): FieldDot => {
+    if (index >= lit) return { kind: "grid" };
+    const gap = index >= FIELD_COLS && hash(seed + 1, index) % 100 < 12;
+    if (gap) return { kind: "grid" };
+    if (index >= ok) return { kind: "failed" };
+    return { kind: "run", color: agentDotColor(agents[Math.floor((index / ok) * agents.length)]) };
+  });
+}
+
+/** Top edge of a bucket's lit dots as a 0..1 fraction of the field height, for anchoring annotation leaders. */
+export function columnTop(runs: number, max: number): number {
+  return Math.ceil(litDots(runs, max) / FIELD_COLS) / FIELD_ROWS;
+}
+
+export function agoLabel(thenMs: number, nowMs: number): string {
+  const seconds = Math.max(0, Math.floor((nowMs - thenMs) / 1000));
+  if (seconds < 5) return "just now";
+  if (seconds < 60) return `${seconds}s ago`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  return `${Math.floor(seconds / 86400)}d ago`;
+}
+
+export const RECEIVING_WINDOW_MS = 5 * 60 * 1000;
+
+export function isReceiving(lastMs: number | null, nowMs: number): boolean {
+  return lastMs !== null && nowMs - lastMs < RECEIVING_WINDOW_MS;
+}