From 48fff86a27aff4a60975a833e8b3cea5d12c96d4 Mon Sep 17 00:00:00 2001
From: moe-berri <moe@berri.ai>
Date: Sat, 3 Oct 2026 18:27:59 -0700
Subject: [PATCH] fix(lens): compact onboarding and animate gateway flow

---
 .../lens/LensWorkspace.integration.test.tsx   |  13 ++-
 .../lens/setup/LensGettingStarted.tsx         |   4 +-
 .../lens/setup/LensIntroduction.module.css    |  18 +++
 .../lens/setup/LensIntroduction.tsx           | 106 +++++++++++-------
 4 files changed, 89 insertions(+), 52 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/lens/setup/LensIntroduction.module.css

diff --git a/ui/litellm-dashboard/src/components/lens/LensWorkspace.integration.test.tsx b/ui/litellm-dashboard/src/components/lens/LensWorkspace.integration.test.tsx
index 3b268546344..058ff1e1e03 100644
--- a/ui/litellm-dashboard/src/components/lens/LensWorkspace.integration.test.tsx
+++ b/ui/litellm-dashboard/src/components/lens/LensWorkspace.integration.test.tsx
@@ -26,7 +26,8 @@ describe("Lens interactive demo", () => {
       onUrlUpdate,
     });
     expect(await screen.findByRole("heading", { name: "The gateway that helps your agents improve" })).toBeVisible();
-    await user.click(screen.getByRole("button", { name: "Preview sample" }));
+    expect(screen.queryByRole("button", { name: "Preview sample" })).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Explore with sample data" }));
     expect(await screen.findByText("Where is order #1042?")).toBeVisible();
     expect(screen.getByText("You’re viewing demo data")).toBeVisible();
     expect(screen.queryByRole("button", { name: "Set up tracing" })).not.toBeInTheDocument();
@@ -58,8 +59,7 @@ describe("Lens interactive demo", () => {
       searchParams: "?tab=investigations",
       onUrlUpdate,
     });
-    await screen.findByRole("button", { name: "Preview sample" });
-    await user.click(screen.getByRole("button", { name: "Preview sample" }));
+    await user.click(await screen.findByRole("button", { name: "Explore with sample data" }));
     await user.click(await screen.findByRole("tab", { name: "Findings" }));
     network.mockClear();
     await user.click(await screen.findByRole("row", { name: /Repeated lookups leave customers without an answer/ }));
@@ -111,7 +111,7 @@ describe("Lens interactive demo", () => {
     expect(screen.queryByRole("button", { name: "Preview sample" })).not.toBeInTheDocument();
   });
 
-  it("shows the header preview only for the active tab that still needs setup", async () => {
+  it("offers sample data in the main panel only for the active tab that needs setup", async () => {
     const user = userEvent.setup();
     const saved = createLensDemoData().lenses[0];
     network.mockImplementation(async (input) => {
@@ -122,13 +122,14 @@ describe("Lens interactive demo", () => {
       return Response.json({ data: [], traces: false, requests: false });
     });
     renderWithProviders(<LensWorkspace accessToken="live-token" userRole="Admin" readOnly={false} />);
-    expect(await screen.findByRole("button", { name: "Preview sample" })).toBeVisible();
+    expect(await screen.findByRole("button", { name: "Explore with sample data" })).toBeVisible();
     const tabs = within(screen.getByRole("tablist", { name: "Lens" }));
     await user.click(tabs.getByRole("tab", { name: "Investigations" }));
     expect(await screen.findByRole("row", { name: new RegExp(saved.settings.name) })).toBeVisible();
     expect(screen.queryByRole("button", { name: "Preview sample" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Explore with sample data" })).not.toBeInTheDocument();
     await user.click(tabs.getByRole("tab", { name: "Traces" }));
-    await user.click(await screen.findByRole("button", { name: "Preview sample" }));
+    await user.click(await screen.findByRole("button", { name: "Explore with sample data" }));
     expect(await screen.findByRole("table", { name: "Agent runs" })).toBeVisible();
     expect(screen.queryByRole("button", { name: "Preview sample" })).not.toBeInTheDocument();
   });
diff --git a/ui/litellm-dashboard/src/components/lens/setup/LensGettingStarted.tsx b/ui/litellm-dashboard/src/components/lens/setup/LensGettingStarted.tsx
index 01a83797b9f..01b62c864da 100644
--- a/ui/litellm-dashboard/src/components/lens/setup/LensGettingStarted.tsx
+++ b/ui/litellm-dashboard/src/components/lens/setup/LensGettingStarted.tsx
@@ -9,7 +9,6 @@ import { lensQueries } from "../api/queries";
 import { useSaveLens } from "../api/mutations";
 import { useLensApi } from "../services";
 import { TraceSheet } from "../investigations/TraceSheet";
-import { LensPreviewButton } from "../LensPreviewButton";
 import { useAnalysisKeyInfo } from "./worker/AnalysisKeyDetails";
 import { WorkerDialog } from "./worker/WorkerDialog";
 import { InvestigationSetupDialog } from "./InvestigationSetupDialog";
@@ -65,8 +64,7 @@ export function LensGettingStarted({
   };
 
   return (
-    <div className="mx-auto w-full max-w-7xl space-y-10 py-5 sm:space-y-12 sm:py-7">
-      {onDemo && <LensPreviewButton onClick={onDemo} />}
+    <div className="mx-auto w-full max-w-7xl space-y-8 py-3 sm:space-y-10 sm:py-4">
       <LensIntroduction onStart={start} onDemo={onDemo} />
       <div className="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_280px] xl:gap-8">
         <section
diff --git a/ui/litellm-dashboard/src/components/lens/setup/LensIntroduction.module.css b/ui/litellm-dashboard/src/components/lens/setup/LensIntroduction.module.css
new file mode 100644
index 00000000000..c2940a9c1b5
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/lens/setup/LensIntroduction.module.css
@@ -0,0 +1,18 @@
+.flow {
+  animation: gateway-flow 10s linear infinite;
+}
+
+@keyframes gateway-flow {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(240px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .flow {
+    animation: none;
+  }
+}
diff --git a/ui/litellm-dashboard/src/components/lens/setup/LensIntroduction.tsx b/ui/litellm-dashboard/src/components/lens/setup/LensIntroduction.tsx
index ed81678d51a..1dadd0141b4 100644
--- a/ui/litellm-dashboard/src/components/lens/setup/LensIntroduction.tsx
+++ b/ui/litellm-dashboard/src/components/lens/setup/LensIntroduction.tsx
@@ -1,51 +1,72 @@
 import { useId } from "react";
 import { ArrowRight, ArrowUpRight, ChevronDown, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import styles from "./LensIntroduction.module.css";
 
 const swarmColors = ["fill-violet-400", "fill-sky-400", "fill-amber-400", "fill-rose-400", "fill-indigo-400"];
 
 function flowDot(index: number) {
-  const column = index % 100;
-  const row = Math.floor(index / 100);
-  const wave = 2.5 + 2.6 * Math.sin((column + 5) / 3.8);
+  const column = (index % 124) - 24;
+  const row = Math.floor(index / 124);
+  const phase = (column + 24) % 24;
+  const wave = 2.5 + 2.6 * Math.sin(((phase + 5) / 24) * Math.PI * 2);
   if (Math.abs(row - wave) > 0.9) return null;
   return {
     x: column * 10 + 5,
     y: row * 10 + 5,
-    color: column < 61 ? swarmColors[(column + row) % swarmColors.length] : "fill-indigo-600 dark:fill-indigo-400",
+    color: swarmColors[(phase + row) % swarmColors.length],
   };
 }
 
-const flowDots = Array.from({ length: 600 }, (_, index) => flowDot(index)).filter((dot) => dot !== null);
+const flowDots = Array.from({ length: 744 }, (_, index) => flowDot(index)).filter((dot) => dot !== null);
 
 function GatewayFlow() {
   const patternId = useId();
+  const beforeGateway = `${patternId}-before`;
+  const afterGateway = `${patternId}-after`;
   return (
-    <div className="mt-10 sm:mt-12">
-      <div className="grid grid-cols-3 gap-3 text-xs sm:text-sm">
+    <div className="mt-5 sm:mt-6">
+      <div className="grid grid-cols-3 gap-3 text-xs">
         <div>
           <p className="font-semibold">Agent swarms</p>
-          <p className="mt-1 leading-5 text-muted-foreground">Every run, every recorded step</p>
+          <p className="mt-0.5 leading-4 text-muted-foreground">Every run, every recorded step</p>
         </div>
         <div className="text-center">
           <p className="font-semibold">LiteLLM gateway</p>
-          <p className="mt-1 leading-5 text-muted-foreground">One place, your infrastructure</p>
+          <p className="mt-0.5 leading-4 text-muted-foreground">One place, your infrastructure</p>
         </div>
         <div className="text-right">
           <p className="font-semibold">Lens</p>
-          <p className="mt-1 leading-5 text-muted-foreground">Findings to improve your agents</p>
+          <p className="mt-0.5 leading-4 text-muted-foreground">Findings to improve your agents</p>
         </div>
       </div>
-      <svg aria-hidden="true" viewBox="0 0 1000 60" className="mt-3 h-auto w-full" focusable="false">
+      <svg aria-hidden="true" viewBox="0 0 1000 60" className="mt-2 h-auto w-full" focusable="false">
         <defs>
           <pattern id={patternId} width="10" height="10" patternUnits="userSpaceOnUse">
             <circle cx="5" cy="5" r="2.3" className="fill-muted-foreground/10" />
           </pattern>
+          <clipPath id={beforeGateway}>
+            <rect width="609" height="60" />
+          </clipPath>
+          <clipPath id={afterGateway}>
+            <rect x="609" width="391" height="60" />
+          </clipPath>
         </defs>
         <rect width="1000" height="60" fill={`url(#${patternId})`} />
-        {flowDots.map((dot) => (
-          <circle key={`${dot.x}-${dot.y}`} cx={dot.x} cy={dot.y} r="2.3" className={dot.color} />
-        ))}
+        <g clipPath={`url(#${beforeGateway})`}>
+          <g className={styles.flow}>
+            {flowDots.map((dot) => (
+              <circle key={`${dot.x}-${dot.y}`} cx={dot.x} cy={dot.y} r="2.3" className={dot.color} />
+            ))}
+          </g>
+        </g>
+        <g clipPath={`url(#${afterGateway})`} className="fill-indigo-600 dark:fill-indigo-400">
+          <g className={styles.flow}>
+            {flowDots.map((dot) => (
+              <circle key={`${dot.x}-${dot.y}`} cx={dot.x} cy={dot.y} r="2.3" />
+            ))}
+          </g>
+        </g>
         <path d="M 615 1 H 609 V 59 H 615" fill="none" stroke="currentColor" strokeWidth="1.8" />
       </svg>
     </div>
@@ -65,14 +86,14 @@ const sampleAnswer = "The column store is 40% faster than the row store for your
 
 function TraceExample() {
   return (
-    <section aria-labelledby="lens-sample-trace" className="min-w-0 rounded-2xl border bg-card p-4 sm:p-5">
+    <section aria-labelledby="lens-sample-trace" className="min-w-0 rounded-xl border bg-card p-4">
       <div className="flex flex-wrap items-center justify-between gap-2 text-sm">
         <h3 id="lens-sample-trace" className="font-semibold">
           Tracing
         </h3>
         <p className="text-xs text-muted-foreground">Sample trace · 14.2s</p>
       </div>
-      <ol className="mt-5 space-y-3.5 text-xs sm:text-[13px]" aria-label="Sample trace timeline">
+      <ol className="mt-3 space-y-1.5 text-xs leading-5 sm:text-[13px]" aria-label="Sample trace timeline">
         {traceSteps.map((item, index) => (
           <li
             key={`${item.name}-${item.start}`}
@@ -99,14 +120,14 @@ function TraceExample() {
           </li>
         ))}
       </ol>
-      <div className="mt-5 grid gap-3 border-t pt-4 sm:grid-cols-2">
-        <div className="rounded-xl bg-muted/60 p-3.5">
+      <div className="mt-3 grid gap-3 border-t pt-3 sm:grid-cols-2">
+        <div className="rounded-lg bg-muted/60 p-2.5">
           <p className="text-xs text-muted-foreground">run_benchmark · output</p>
-          <p className="mt-2 text-[13px] leading-5">Error: benchmark runner unavailable (503)</p>
+          <p className="mt-1.5 text-[13px] leading-[18px]">Error: benchmark runner unavailable (503)</p>
         </div>
-        <div className="rounded-xl bg-muted/60 p-3.5">
+        <div className="rounded-lg bg-muted/60 p-2.5">
           <p className="text-xs text-muted-foreground">answer · output</p>
-          <p className="mt-2 text-[13px] leading-5">“{sampleAnswer}”</p>
+          <p className="mt-1.5 text-[13px] leading-[18px]">“{sampleAnswer}”</p>
         </div>
       </div>
     </section>
@@ -115,38 +136,38 @@ function TraceExample() {
 
 function FindingExamples() {
   return (
-    <section aria-labelledby="lens-sample-findings" className="min-w-0 rounded-2xl border bg-card p-4 sm:p-5">
+    <section aria-labelledby="lens-sample-findings" className="min-w-0 rounded-xl border bg-card p-4">
       <div className="flex flex-wrap items-center justify-between gap-2 text-sm">
         <h3 id="lens-sample-findings" className="font-semibold">
           Lens findings
         </h3>
         <p className="text-xs text-muted-foreground">500 sample runs reviewed</p>
       </div>
-      <div className="mt-4 divide-y border-t">
-        <article className="py-4">
+      <div className="mt-3 divide-y border-t">
+        <article className="py-3">
           <h4 className="flex items-start gap-2 text-sm font-semibold">
             <span aria-hidden="true" className="mt-1.5 size-2 shrink-0 rounded-full bg-rose-500" />
             Claims numbers it never measured
           </h4>
-          <div className="ml-4 mt-2 space-y-2 text-[13px] leading-5">
-            <p className="text-muted-foreground">
-              When the benchmark tool fails, the agent still reports a speedup in its answer.
-            </p>
-            <blockquote className="border-l-2 pl-3 italic">“{sampleAnswer}”</blockquote>
+          <div className="ml-4 mt-1.5 space-y-1.5 text-[13px] leading-[18px]">
+            <p className="text-muted-foreground">Reports a speedup even though the benchmark failed.</p>
+            <blockquote className="border-l-2 pl-3 italic">
+              “…40% faster than the row store for your workload.”
+            </blockquote>
             <p>
-              <span className="text-muted-foreground">Next step: </span>Tell the agent to report the failed benchmark
-              instead of estimating.
+              <span className="text-muted-foreground">Next step: </span>Report the failed benchmark instead of
+              estimating.
             </p>
             <p className="text-xs text-muted-foreground">38 linked runs · High priority</p>
           </div>
         </article>
-        <article className="pt-4">
+        <article className="pt-3">
           <h4 className="flex items-start gap-2 text-sm font-semibold">
             <span aria-hidden="true" className="mt-1.5 size-2 shrink-0 rounded-full bg-amber-500" />
             Promises to follow up, then stops
           </h4>
-          <div className="ml-4 mt-2 space-y-2 text-[13px] leading-5 text-muted-foreground">
-            <p>After the order lookup times out, the support agent replies “I will check” and ends the run.</p>
+          <div className="ml-4 mt-1.5 space-y-1.5 text-[13px] leading-[18px] text-muted-foreground">
+            <p>After an order lookup times out, the agent promises to check and ends the run.</p>
             <p className="text-xs">12 linked runs · Medium priority</p>
           </div>
         </article>
@@ -159,25 +180,24 @@ export function LensIntroduction({ onStart, onDemo }: { onStart: () => void; onD
   return (
     <section
       aria-labelledby="lens-introduction"
-      className="rounded-2xl border bg-card p-5 sm:p-8 xl:rounded-3xl xl:p-10"
+      className="rounded-2xl border bg-card p-5 sm:px-6 sm:py-5 xl:px-7 xl:py-6"
     >
       <h2
         id="lens-introduction"
-        className="max-w-[800px] text-3xl leading-[1.12] font-semibold tracking-[-0.035em] sm:text-4xl xl:text-[42px]"
+        className="text-2xl leading-tight font-semibold tracking-[-0.03em] sm:text-[30px] xl:text-[32px]"
       >
         The gateway that helps your agents improve
       </h2>
-      <p className="mt-5 max-w-[780px] text-base leading-7 text-muted-foreground">
-        Lens turns recorded agent runs into findings tied to the exact steps that caused them, so you can see what needs
-        to change without reading every trace by hand.
+      <p className="mt-3 max-w-[780px] text-sm leading-6 text-muted-foreground">
+        Turn recorded agent runs into findings linked to the exact steps, so you know what happened and what to change.
       </p>
-      <div className="mt-7 flex flex-wrap items-center gap-3">
+      <div className="mt-4 flex flex-wrap items-center gap-3">
         {onDemo && (
-          <Button size="lg" className="h-11 rounded-lg px-5" onClick={onDemo}>
+          <Button className="rounded-lg px-4" onClick={onDemo}>
             Explore with sample data <ArrowRight aria-hidden="true" className="size-4" />
           </Button>
         )}
-        <Button size="lg" variant={onDemo ? "outline" : "default"} className="h-11 rounded-lg px-5" onClick={onStart}>
+        <Button variant={onDemo ? "outline" : "default"} className="rounded-lg px-4" onClick={onStart}>
           Set up Lens
         </Button>
         <a
@@ -190,7 +210,7 @@ export function LensIntroduction({ onStart, onDemo }: { onStart: () => void; onD
         </a>
       </div>
       <GatewayFlow />
-      <div className="mt-7 grid items-stretch gap-4 lg:grid-cols-2">
+      <div className="mt-4 grid items-stretch gap-3 md:grid-cols-2">
         <TraceExample />
         <FindingExamples />
       </div>