From fcf977b522a88db0b681721f4b07bd410de9416e Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujong@berri.ai>
Date: Sun, 4 Oct 2026 20:17:47 -0700
Subject: [PATCH] feat(ui): drop the Lens preview header and keep setup within
 the page

The sample card already shows the match count, so the preview header
repeated it. On wide screens the setup no longer scrolls as a page: the
preview table and, when needed, the steps column scroll on their own.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../investigations/InvestigationsView.tsx     |  2 +-
 .../InvestigationSetup.integration.test.tsx   |  9 +++----
 .../lens/setup/InvestigationSetup.tsx         | 13 +++++++---
 .../lens/setup/MatchingActivityPreview.tsx    | 26 +++----------------
 .../lens/setup/useMatchingActivity.ts         | 21 ---------------
 5 files changed, 18 insertions(+), 53 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/lens/investigations/InvestigationsView.tsx b/ui/litellm-dashboard/src/components/lens/investigations/InvestigationsView.tsx
index 56845958ab1..4dc720786fd 100644
--- a/ui/litellm-dashboard/src/components/lens/investigations/InvestigationsView.tsx
+++ b/ui/litellm-dashboard/src/components/lens/investigations/InvestigationsView.tsx
@@ -189,7 +189,7 @@ export function InvestigationsView({ readOnly = false }: InvestigationsViewProps
   return (
     <section
       aria-label="Investigations"
-      className={cn("flex w-full min-w-0 flex-1 flex-col", !browsing && "gap-3 p-4")}
+      className={cn("flex min-h-0 w-full min-w-0 flex-1 flex-col", !browsing && "gap-3 p-4")}
     >
       <Banners
         error={bannerError}
diff --git a/ui/litellm-dashboard/src/components/lens/setup/InvestigationSetup.integration.test.tsx b/ui/litellm-dashboard/src/components/lens/setup/InvestigationSetup.integration.test.tsx
index d0fcc108aa1..cd3adaf900a 100644
--- a/ui/litellm-dashboard/src/components/lens/setup/InvestigationSetup.integration.test.tsx
+++ b/ui/litellm-dashboard/src/components/lens/setup/InvestigationSetup.integration.test.tsx
@@ -171,7 +171,6 @@ describe("Investigation setup", () => {
     await user.type(screen.getByRole("textbox", { name: "Check 1" }), "Find incomplete reports");
     await user.click(screen.getByRole("button", { name: "Continue" }));
     await waitFor(() => expect(screen.getByRole("button", { name: "Run and monitor" })).toBeEnabled());
-    expect(screen.getByText("1 matching run")).toBeInTheDocument();
     expect(screen.getByText("Research report")).toBeInTheDocument();
     await user.click(screen.getByRole("button", { name: "Run and monitor" }));
     expect(save).toHaveBeenCalledWith(
@@ -340,9 +339,9 @@ it.each(["new", "duplicate"] as const)("blocks a %s investigation until its mode
       : Promise.resolve(gatewayResponse(path, {})),
   );
   renderWithProviders(<InvestigationSetup initial={settings} mode={mode} onClose={vi.fn()} onSave={save} />);
+  expect(await screen.findByText("100% of 1")).toBeInTheDocument();
   await user.click(screen.getByRole("button", { name: "Continue" }));
   await user.click(screen.getByRole("button", { name: "Continue" }));
-  expect(await screen.findByText("1 matching run")).toBeInTheDocument();
   expect(screen.getByRole("button", { name: mode === "new" ? "Run and monitor" : "Run investigation" })).toBeDisabled();
   expect(save).not.toHaveBeenCalled();
 });
@@ -393,14 +392,14 @@ it("appends the next preview page as the list scrolls near its end, then stops a
   renderWithProviders(<InvestigationSetup mode="edit" initial={settings} onClose={vi.fn()} onSave={vi.fn()} />);
   expect(await screen.findByText("Run one")).toBeVisible();
   expect(screen.getByText(/Showing 1 of 2/)).toBeVisible();
-  expect(screen.getByRole("status")).toHaveTextContent("2 matching runs");
+  expect(screen.getByText("100% of 2")).toBeVisible();
   const nextPageCalls = () =>
     proxy.post.mock.calls.filter(([, options]) => (options?.body as { cursor: string }).cursor === "next");
   expect(nextPageCalls()).toHaveLength(0);
   act(() => mockAllIsIntersecting(true));
   await waitFor(() => expect(nextPageCalls()).toHaveLength(1));
   expect(screen.getByText("Run one")).toBeVisible();
-  expect(screen.getByRole("status")).toHaveTextContent("2 matching runs");
+  expect(screen.getByText("100% of 2")).toBeVisible();
   act(() => finishSecondPage());
   expect(await screen.findByText("Run two")).toBeVisible();
   expect(screen.getByText("Run one")).toBeVisible();
@@ -423,7 +422,7 @@ it("fetches one preview for two keystrokes inside the debounce window", async ()
     await vi.advanceTimersByTimeAsync(1000);
     await waitFor(() => expect(previewsFor("ab")).toHaveLength(1));
     expect(previewsFor("a")).toHaveLength(0);
-    expect(await screen.findByText("1 matching run")).toBeVisible();
+    expect(await screen.findByText(/% of 1$/)).toBeVisible();
   } finally {
     vi.useRealTimers();
   }
diff --git a/ui/litellm-dashboard/src/components/lens/setup/InvestigationSetup.tsx b/ui/litellm-dashboard/src/components/lens/setup/InvestigationSetup.tsx
index 0c9bb89ddcf..a3a0fe725cc 100644
--- a/ui/litellm-dashboard/src/components/lens/setup/InvestigationSetup.tsx
+++ b/ui/litellm-dashboard/src/components/lens/setup/InvestigationSetup.tsx
@@ -163,7 +163,7 @@ function SetupEditor({
   const saveLabel = saveLabelFor(mode, repeat);
   const offline = !ready && mode !== "edit";
   return (
-    <section aria-label={TITLES[mode]} className="flex min-w-0 flex-1 flex-col">
+    <section aria-label={TITLES[mode]} className="flex min-h-0 min-w-0 flex-1 flex-col">
       <header className="flex items-center gap-1 border-b pb-3">
         <Button
           variant="ghost"
@@ -194,8 +194,13 @@ function SetupEditor({
           The worker or trace storage is unavailable. Your draft is safe; you can start when it reconnects.
         </p>
       )}
-      <div className="grid min-w-0 flex-1 items-start gap-8 pt-6 lg:grid-cols-[minmax(0,26rem)_minmax(0,1fr)] xl:gap-10">
-        <SetupSteps aria-label="Investigation setup" current={step} onOpen={setStep}>
+      <div className="grid min-h-0 min-w-0 flex-1 items-start gap-8 pt-6 lg:grid-cols-[minmax(0,26rem)_minmax(0,1fr)] lg:grid-rows-[minmax(0,1fr)] xl:gap-10">
+        <SetupSteps
+          aria-label="Investigation setup"
+          current={step}
+          onOpen={setStep}
+          className="lg:-m-1 lg:max-h-full lg:overflow-y-auto lg:p-1"
+        >
           <SetupStep id="activity" heading="Activity" description="Which runs to review" summary={<ActivitySummary />}>
             <ScopeFields {...activity.scope} />
             <SampleFields eligible={activity.preview.page.eligible} />
@@ -232,7 +237,7 @@ function SetupEditor({
           noun="run"
           storageKey={FINDING_PANEL_WIDTH_KEY}
         >
-          <MatchingActivityPreview {...activity.preview} className="min-w-0 lg:sticky lg:top-0" />
+          <MatchingActivityPreview {...activity.preview} className="min-w-0 lg:max-h-full" />
           <Inspector.Panel label="Run details" testId="run-panel">
             {(run: TraceRef) => (
               <TraceEvidence
diff --git a/ui/litellm-dashboard/src/components/lens/setup/MatchingActivityPreview.tsx b/ui/litellm-dashboard/src/components/lens/setup/MatchingActivityPreview.tsx
index 8f3147cef6b..b8dbe23f4b0 100644
--- a/ui/litellm-dashboard/src/components/lens/setup/MatchingActivityPreview.tsx
+++ b/ui/litellm-dashboard/src/components/lens/setup/MatchingActivityPreview.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { memo, useMemo, type ComponentProps } from "react";
-import { RotateCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/cva.config";
 
@@ -72,31 +71,14 @@ export function MatchingActivityPreview({
     [pickedIds, togglePick],
   );
   const shown = status.ready || status.stale;
+  const showTable = status.loading || (shown && !status.error && runs.length > 0);
   return (
     <section
       aria-label="Matching activity"
       data-slot="matching-activity-preview"
-      className={cn("self-start overflow-hidden rounded-lg border bg-card", className)}
+      className={cn("flex flex-col self-start overflow-hidden rounded-lg border bg-card", className)}
       {...props}
     >
-      <header className="flex items-start justify-between gap-3 border-b px-4 py-3">
-        <div className="grid min-w-0 gap-0.5">
-          <p className="text-sm font-semibold tabular-nums" role="status">
-            {status.title}
-          </p>
-          <p className="text-xs text-muted-foreground">{status.windowLabel} · Previewing is free</p>
-        </div>
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          className="-mr-1.5 text-muted-foreground"
-          aria-label="Refresh matching activity"
-          onClick={status.refresh}
-          disabled={!status.ready}
-        >
-          <RotateCw className={cn("size-3.5", (status.loading || status.stale) && "motion-safe:animate-spin")} />
-        </Button>
-      </header>
       {status.ready && status.error && (
         <p role="alert" className="px-4 py-3 text-sm text-destructive">
           {status.error.message}{" "}
@@ -113,8 +95,8 @@ export function MatchingActivityPreview({
           </p>
         </div>
       )}
-      {(status.loading || (shown && !status.error && runs.length > 0)) && (
-        <div className="flex max-h-[calc(100dvh-16rem)] min-h-0 flex-col">
+      {showTable && (
+        <div className="flex max-h-[calc(100dvh-16rem)] min-h-0 flex-1 flex-col lg:max-h-none">
           <PreviewTable
             traces={runs}
             isLoading={status.loading}
diff --git a/ui/litellm-dashboard/src/components/lens/setup/useMatchingActivity.ts b/ui/litellm-dashboard/src/components/lens/setup/useMatchingActivity.ts
index 661929df086..8384e717c16 100644
--- a/ui/litellm-dashboard/src/components/lens/setup/useMatchingActivity.ts
+++ b/ui/litellm-dashboard/src/components/lens/setup/useMatchingActivity.ts
@@ -5,7 +5,6 @@ import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { useFormContext, useWatch } from "react-hook-form";
 import { lensKeys, lensQueries } from "../data/queries";
 import { useLensApi } from "../data/LensServices";
-import { durationLabel } from "../model/format";
 import type { Execution, Sample } from "../model/types";
 import type { TraceSummary } from "../traces/types";
 import { useDebouncedValue } from "./useDebouncedValue";
@@ -26,8 +25,6 @@ export interface ScopeOptions {
 }
 
 export interface PreviewStatus {
-  readonly title: string;
-  readonly windowLabel: string;
   readonly ready: boolean;
   /** No results yet for any search: the table shows skeleton rows. */
   readonly loading: boolean;
@@ -79,27 +76,11 @@ function validScope(scope: Selection): boolean {
   return validWindow(scope) && validSampling;
 }
 
-function previewTitle(
-  state: { pending: boolean; validWindow: boolean; valid: boolean },
-  data: PreviewPageData | undefined,
-): string {
-  if (!state.validWindow) return "Choose a history window between 1 hour and 365 days";
-  if (!state.valid) return "Complete your sampling settings to preview matches";
-  if (state.pending) return "Finding matching runs…";
-  if (!data) return "Preview unavailable";
-  return `${data.eligible.toLocaleString()} matching run${data.eligible === 1 ? "" : "s"}`;
-}
-
 function manualSelectedCount(selection: Selection): number {
   const sampled = Math.ceil((selection.execution_ids.length * (selection.sample_percent ?? 100)) / 100);
   return Math.min(sampled, selection.sample_size ?? Infinity);
 }
 
-function windowLabel(selection: Selection): string {
-  if (!validWindow(selection)) return "Choose a valid history window";
-  return `Last ${durationLabel(selection.lookback_hours ?? 24, "hours")}`;
-}
-
 function scopeOptions(selection: Selection, asOf: string, executions: readonly Execution[]): ScopeOptions {
   const endMs = Date.parse(asOf) || Date.now();
   return {
@@ -161,8 +142,6 @@ export function useMatchingActivity(): MatchingActivity {
     scope: scopeOptions(selection, asOf, executions),
     preview: {
       status: {
-        title: previewTitle({ pending, validWindow: windowValid, valid }, firstPage),
-        windowLabel: windowLabel(selection),
         ready,
         loading,
         stale,