From 775a8080037e12fffcf352a2378482b5ab88f2eb Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaan@berri.ai>
Date: Sat, 3 Oct 2026 18:19:40 -0700
Subject: [PATCH] refactor(lens): name now reading conditions

---
 .../lens/investigations/live/NowReading.tsx   | 24 ++++++++++++-------
 .../src/components/lens/model/stage.test.ts   |  7 +++++-
 .../src/components/lens/model/stage.ts        | 17 ++++++++-----
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/lens/investigations/live/NowReading.tsx b/ui/litellm-dashboard/src/components/lens/investigations/live/NowReading.tsx
index b785616eea9..f89c6cfbc6d 100644
--- a/ui/litellm-dashboard/src/components/lens/investigations/live/NowReading.tsx
+++ b/ui/litellm-dashboard/src/components/lens/investigations/live/NowReading.tsx
@@ -8,6 +8,11 @@ import { ModelName } from "./LiveStrip";
 
 const RED = "text-[#e5484d]";
 
+function dotTone(reading: boolean, issueShown: boolean): string {
+  if (reading) return "bg-foreground motion-safe:animate-pulse";
+  return issueShown ? "bg-[#e5484d]" : "bg-foreground/50";
+}
+
 function LaneRow({ lane, now, charMs }: { lane: Lane; now: number; charMs: number }) {
   const { review } = lane;
   const text = review ? laneText(review.reasoning) : "";
@@ -17,13 +22,7 @@ function LaneRow({ lane, now, charMs }: { lane: Lane; now: number; charMs: numbe
   return (
     <li className="flex flex-col gap-1 rounded-lg bg-background/70 px-2.5 py-2 text-[12px] ring-1 ring-border/60 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-top-1 motion-safe:duration-200">
       <div className="flex items-center gap-2">
-        <span
-          aria-hidden="true"
-          className={cn(
-            "size-1.5 shrink-0 rounded-full",
-            !review ? "bg-foreground motion-safe:animate-pulse" : issue && !typing ? "bg-[#e5484d]" : "bg-foreground/50",
-          )}
-        />
+        <span aria-hidden="true" className={cn("size-1.5 shrink-0 rounded-full", dotTone(!review, issue && !typing))} />
         <span className="truncate font-medium text-foreground">{lane.agent || "trace"}</span>
         <span className="truncate font-mono text-[11px] text-muted-foreground">{lane.traceId.slice(0, 8)}</span>
         <span className="ml-auto shrink-0 text-[11px] tabular-nums text-muted-foreground">
@@ -38,10 +37,17 @@ function LaneRow({ lane, now, charMs }: { lane: Lane; now: number; charMs: numbe
         <>
           <p className="min-h-[1.25rem] leading-relaxed text-muted-foreground">
             {text.slice(0, typed)}
-            {typing && <span aria-hidden="true" className="ml-px inline-block h-3 w-px translate-y-0.5 bg-foreground" />}
+            {typing && (
+              <span aria-hidden="true" className="ml-px inline-block h-3 w-px translate-y-0.5 bg-foreground" />
+            )}
           </p>
           {!typing && (
-            <p className={cn("truncate font-medium motion-safe:animate-in motion-safe:fade-in", issue ? RED : "text-foreground")}>
+            <p
+              className={cn(
+                "truncate font-medium motion-safe:animate-in motion-safe:fade-in",
+                issue ? RED : "text-foreground",
+              )}
+            >
               {shortVerdict(review)}
             </p>
           )}
diff --git a/ui/litellm-dashboard/src/components/lens/model/stage.test.ts b/ui/litellm-dashboard/src/components/lens/model/stage.test.ts
index 277acf0570c..593584d098f 100644
--- a/ui/litellm-dashboard/src/components/lens/model/stage.test.ts
+++ b/ui/litellm-dashboard/src/components/lens/model/stage.test.ts
@@ -19,7 +19,12 @@ function review(id: string, reasoning = "Checked the tool output. It matched."):
   };
 }
 
-const reading = (id: string) => ({ execution_id: id, trace_id: `trace-${id}`, agent: "bot", started_at: "2026-10-03T16:00:00Z" });
+const reading = (id: string) => ({
+  execution_id: id,
+  trace_id: `trace-${id}`,
+  agent: "bot",
+  started_at: "2026-10-03T16:00:00Z",
+});
 const input = (overrides: Partial<StageInput>): StageInput => ({
   reading: [],
   reviews: [],
diff --git a/ui/litellm-dashboard/src/components/lens/model/stage.ts b/ui/litellm-dashboard/src/components/lens/model/stage.ts
index c306989bcd3..d4ac960e958 100644
--- a/ui/litellm-dashboard/src/components/lens/model/stage.ts
+++ b/ui/litellm-dashboard/src/components/lens/model/stage.ts
@@ -31,7 +31,11 @@ const LANE_CHARS = 220;
 const LANE_SENTENCES = 2;
 
 export function laneText(reasoning: string): string {
-  const brief = reasoning.trim().split(/(?<=[.!?])\s+/).slice(0, LANE_SENTENCES).join(" ");
+  const brief = reasoning
+    .trim()
+    .split(/(?<=[.!?])\s+/)
+    .slice(0, LANE_SENTENCES)
+    .join(" ");
   return brief.length > LANE_CHARS ? `${brief.slice(0, LANE_CHARS - 1).trimEnd()}…` : brief;
 }
 
@@ -51,7 +55,7 @@ export function startStage(reviews: readonly Review[]): Stage {
 function settle(lane: Lane, reviews: ReadonlyMap<string, Review>, live: ReadonlySet<string>, now: number): Lane {
   const review = lane.review ?? reviews.get(lane.key) ?? null;
   const landedAt = lane.landedAt ?? (review ? now : null);
-  const goneAt = review || live.has(lane.key) ? null : (lane.goneAt ?? now);
+  const goneAt = review || live.has(lane.key) ? null : lane.goneAt ?? now;
   if (review === lane.review && landedAt === lane.landedAt && goneAt === lane.goneAt) return lane;
   return { ...lane, review, landedAt, goneAt };
 }
@@ -104,10 +108,11 @@ export function stepStage(stage: Stage, input: StageInput): Stage {
   const room = free - landing.length;
   const waiting = input.reading.filter((item) => !taken.has(item.execution_id) && !reviews.has(item.execution_id));
   const starting = room > 0 ? waiting.slice(0, room) : [];
-  const unchanged =
-    !done.length && !fresh.length && !starting.length && settled.every((lane, n) => lane === stage.lanes[n]);
-  if (unchanged) return stage;
-  const releasedNow = [...done.filter((lane) => lane.review), ...overflow].map((item) => ("key" in item ? item.key : item.execution_id));
+  const nothingMoved = !done.length && !fresh.length && !starting.length;
+  if (nothingMoved && settled.every((lane, n) => lane === stage.lanes[n])) return stage;
+  const releasedNow = [...done.filter((lane) => lane.review), ...overflow].map((item) =>
+    "key" in item ? item.key : item.execution_id,
+  );
   return {
     lanes: [...kept, ...landing.map((review) => landedLane(review, now)), ...starting.map(readingLane)],
     released: releasedNow.length ? new Set([...stage.released, ...releasedNow]) : stage.released,