@tonyclaw/agent-inspector 2.1.14 → 2.1.16

package/src/components/ProxyViewer.tsx

@@ -1,6 +1,7 @@
 import {
   type ChangeEvent,
   type JSX,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -40,13 +41,14 @@ import { formatTimestampRange } from "../lib/timeDisplay";
 import { cn, formatContextWindowTokens, formatTokens } from "../lib/utils";
 import { useProviders } from "../lib/useProviders";
 import packageJson from "../../package.json";
-import { groupLogsByConversation } from "./proxy-viewer";
+import { groupLogsByConversation, type ConversationGroupData } from "./proxy-viewer";
 
 import { CrabLogo } from "./ui/crab-logo";
 import { crabVariants } from "./ui/crab-variants";
 import { McpLogo } from "./ui/mcp-logo";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
+import type { TransientToastInput } from "./ui/transient-toast";
 import { AlertsDialog } from "./alerts/AlertsDialog";
 import { GroupsDialog } from "./groups/GroupsDialog";
 import { SettingsDialog } from "./providers/SettingsDialog";
@@ -72,6 +74,25 @@ function truncateSessionId(id: string): string {
   return `${id.slice(0, 12)}...${id.slice(-12)}`;
 }
 
+function buildDisplayNumberByLogId(groups: readonly ConversationGroupData[]): Map<number, number> {
+  const result = new Map<number, number>();
+  for (const group of groups) {
+    for (let index = 0; index < group.logs.length; index += 1) {
+      const log = group.logs[index];
+      if (log === undefined) continue;
+      result.set(log.id, index + 1);
+    }
+  }
+  return result;
+}
+
+function displayNumberForLog(
+  log: CapturedLog,
+  displayNumberByLogId: ReadonlyMap<number, number>,
+): number {
+  return displayNumberByLogId.get(log.id) ?? log.id;
+}
+
 export function shouldShowRawExport(captureMode: CaptureMode): boolean {
   return captureMode === "full";
 }
@@ -247,7 +268,7 @@ function slateStatusClass(status: SessionSlateStatus): string {
     case "watch":
       return "border-amber-300/35 bg-amber-400/10 text-amber-100";
     case "clear":
-      return "border-emerald-400/30 bg-emerald-500/10 text-emerald-100";
+      return "border-slate-300/20 bg-slate-300/[0.08] text-slate-100";
   }
 }
 
@@ -255,9 +276,9 @@ function SessionOpeningSlate({ stats }: { stats: SessionSlateStats }): JSX.Eleme
   if (stats.requests === 0) return null;
 
   return (
-    <div className="mb-4 rounded-md border border-border bg-[#0c0d0f] shadow-[0_14px_50px_rgba(0,0,0,0.25)]">
+    <div className="border border-border bg-card shadow-sm mb-4 rounded-[8px]">
       <div className="grid grid-cols-2 gap-0 md:grid-cols-[minmax(220px,1.2fr)_repeat(4,minmax(120px,1fr))]">
-        <div className="col-span-2 border-b border-border/70 px-4 py-3 md:col-span-1 md:border-b-0 md:border-r">
+        <div className="col-span-2 border-b border-white/10 px-4 py-3 md:col-span-1 md:border-b-0 md:border-r">
           <div className="flex items-center gap-2 text-[10px] font-semibold uppercase text-muted-foreground">
             <Clapperboard className="size-3.5 text-cyan-300" />
             Opening Slate
@@ -269,7 +290,7 @@ function SessionOpeningSlate({ stats }: { stats: SessionSlateStats }): JSX.Eleme
             {stats.timeRange ?? "Timeline pending"}
           </div>
         </div>
-        <div className="border-r border-b border-border/70 px-4 py-3 md:border-b-0">
+        <div className="border-r border-b border-white/10 px-4 py-3 md:border-b-0">
           <div className="text-[10px] uppercase text-muted-foreground">Status</div>
           <div
             className={cn(
@@ -280,13 +301,13 @@ function SessionOpeningSlate({ stats }: { stats: SessionSlateStats }): JSX.Eleme
             {stats.statusLabel}
           </div>
         </div>
-        <div className="border-b border-border/70 px-4 py-3 md:border-b-0 md:border-r">
+        <div className="border-b border-white/10 px-4 py-3 md:border-b-0 md:border-r">
           <div className="text-[10px] uppercase text-muted-foreground">Requests</div>
           <div className="mt-2 font-mono text-xl font-semibold text-foreground">
             {stats.requests}
           </div>
         </div>
-        <div className="border-r border-border/70 px-4 py-3 md:border-r">
+        <div className="border-r border-white/10 px-4 py-3 md:border-r">
           <div className="flex items-center gap-1 text-[10px] uppercase text-muted-foreground">
             <Siren className="size-3 text-red-300" />
             Failure
@@ -392,7 +413,7 @@ function sessionRiskBarClass(risk: ContextRiskLevel): string {
     case "unknown":
       return "bg-muted-foreground/50";
     case "ok":
-      return "bg-emerald-400";
+      return "bg-cyan-300";
   }
 }
 
@@ -451,7 +472,7 @@ function evidenceChipClass(value: string): string {
     normalized.includes("complete") ||
     normalized.includes("accept")
   ) {
-    return "border-emerald-400/30 bg-emerald-500/10 text-emerald-100";
+    return "border-cyan-300/25 bg-cyan-400/10 text-cyan-100";
   }
   return "border-border/70 bg-background/70 text-muted-foreground";
 }
@@ -494,11 +515,11 @@ function SessionMembershipPanel({
   );
 
   return (
-    <div className="mb-3 overflow-hidden rounded-md border border-border bg-[#0c0d0f] text-xs">
+    <div className="border border-border bg-card shadow-sm mb-3 rounded-[8px] text-xs">
       <button
         type="button"
         onClick={() => setOpen((value) => !value)}
-        className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/30"
+        className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-white/[0.04]"
         aria-expanded={open}
       >
         <div className="min-w-0 flex-1">
@@ -536,7 +557,7 @@ function SessionMembershipPanel({
         )}
       </button>
       {open && (
-        <div className="space-y-2 border-t border-border/70 px-3 py-2">
+        <div className="space-y-2 border-t border-white/10 px-3 py-2">
           {memberships.map((membership) => {
             const member = membership.member;
             const metadataRows = getMemberMetadataRows(member);
@@ -576,7 +597,7 @@ function SessionMembershipPanel({
                     {metadataRows.map((row) => (
                       <div
                         key={row.key}
-                        className="min-w-0 rounded border border-border/60 px-2 py-1"
+                        className="border border-border bg-muted/40 min-w-0 rounded-md px-2 py-1"
                       >
                         <div className="font-mono text-[10px] text-muted-foreground">{row.key}</div>
                         <div
@@ -634,7 +655,7 @@ function LogPaginationButton({
       type="button"
       onClick={onClick}
       disabled={disabled}
-      className="inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45"
+      className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45"
       title={title}
     >
       {icon}
@@ -660,8 +681,8 @@ function LogPaginationBar({
       className={cn(
         "flex min-h-9 flex-col gap-2 px-1 py-1 sm:flex-row sm:items-center",
         embedded
-          ? "border-t border-border/70 pt-2"
-          : "mb-3 rounded-md border border-border bg-muted/10 px-2",
+          ? "border-t border-white/10 pt-2"
+          : "border border-border bg-card shadow-sm mb-3 rounded-[8px] px-2",
       )}
     >
       <div className="w-full min-w-0 px-1 font-mono text-[11px] text-muted-foreground sm:flex-1">
@@ -719,7 +740,7 @@ function sessionRiskClass(risk: ContextRiskLevel): string {
     case "unknown":
       return "text-muted-foreground";
     case "ok":
-      return "text-emerald-300";
+      return "text-cyan-200";
   }
 }
 
@@ -730,7 +751,7 @@ function sessionHealthClass(level: ContextHealthLevel): string {
     case "optimizable":
       return "border-amber-400/25 bg-amber-400/8 text-amber-100";
     case "ok":
-      return "border-emerald-400/25 bg-emerald-400/8 text-emerald-100";
+      return "border-cyan-300/25 bg-cyan-400/8 text-cyan-100";
   }
 }
 
@@ -793,12 +814,12 @@ function CopyableCommand({ command }: { command: string }): JSX.Element {
   }, [command]);
 
   return (
-    <div className="inline-flex items-center gap-2 bg-muted rounded-md px-3 py-2">
-      <pre className="text-blue-500 font-mono text-sm m-0">{command}</pre>
+    <div className="border border-border bg-muted/40 inline-flex max-w-full items-center gap-2 rounded-md px-3 py-2">
+      <pre className="m-0 overflow-x-auto font-mono text-sm text-cyan-200">{command}</pre>
       <button
         type="button"
         onClick={handleCopy}
-        className="text-muted-foreground hover:text-foreground transition-colors shrink-0 cursor-pointer"
+        className="shrink-0 cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
         aria-label="Copy command"
       >
         {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
@@ -812,8 +833,8 @@ function McpReadyBadge(): JSX.Element {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <span className="inline-flex h-7 items-center gap-2 rounded-md border border-cyan-400/30 bg-cyan-500/10 px-2.5 font-mono text-[11px] font-medium text-cyan-300 shadow-[0_0_16px_rgba(34,211,238,0.08)]">
-            <span className="size-1.5 rounded-full bg-emerald-300 shadow-[0_0_8px_rgba(110,231,183,0.8)]" />
+          <span className="border border-border bg-muted/40 inline-flex h-7 items-center gap-2 rounded-md px-2.5 font-mono text-[11px] font-medium text-cyan-200">
+            <span className="size-1.5 rounded-full bg-cyan-200 shadow-[0_0_8px_rgba(125,211,252,0.75)]" />
             MCP Ready
             <span className="hidden text-cyan-200/70 sm:inline">/api/mcp</span>
           </span>
@@ -827,6 +848,40 @@ function McpReadyBadge(): JSX.Element {
   );
 }
 
+function SidebarPanel({
+  label,
+  children,
+  className,
+}: {
+  label: string;
+  children: ReactNode;
+  className?: string;
+}): JSX.Element {
+  return (
+    <section className={cn("border border-border bg-card shadow-sm rounded-[8px]", className)}>
+      <div className="border-b border-white/10 px-3 py-2">
+        <div className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-white/40">
+          {label}
+        </div>
+      </div>
+      <div className="p-3">{children}</div>
+    </section>
+  );
+}
+
+function SidebarMetric({ label, value }: { label: string; value: string | number }): JSX.Element {
+  return (
+    <div className="border border-border bg-muted/40 min-w-0 rounded-md px-2 py-2">
+      <div className="truncate font-mono text-lg font-semibold leading-6 text-slate-100">
+        {value}
+      </div>
+      <div className="mt-0.5 truncate font-mono text-[10px] uppercase tracking-[0.12em] text-white/35">
+        {label}
+      </div>
+    </div>
+  );
+}
+
 const CRAB_VARIANT_COLORS = [
   "text-amber-500",
   "text-rose-500",
@@ -890,7 +945,7 @@ function BrandHeader({
 }): JSX.Element {
   if (compact) {
     return (
-      <div className="pb-3">
+      <div className="border border-border bg-card shadow-sm rounded-[8px] p-3">
         <div className="flex items-start justify-between gap-3">
           <div className="flex min-w-0 items-start gap-2">
             <CrabFamily compact={true} entrancePhase={crabEntrancePhase} />
@@ -953,7 +1008,7 @@ function SessionContextLogButton({ label, logId }: { label: string; logId: numbe
     <button
       type="button"
       onClick={() => openLogContext(logId)}
-      className="inline-flex h-5 items-center rounded px-1 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+      className="inline-flex h-5 items-center rounded px-1 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground"
       title={`Open Context for ${formatLogReference(logId)}`}
     >
       {label} {formatLogReference(logId)}
@@ -990,7 +1045,7 @@ function SessionContextProgressBar({
       title="Open latest Context details"
     >
       <span
-        className="relative block h-2.5 overflow-hidden rounded-full border border-border/70 bg-background transition-colors group-hover:border-foreground/30"
+        className="relative block h-2.5 overflow-hidden rounded-full border border-white/10 bg-black/25 transition-colors group-hover:border-cyan-200/35"
         role="meter"
         aria-label={ariaLabel}
         aria-valuemin={0}
@@ -1025,7 +1080,7 @@ function SessionModelContextRow({ summary }: { summary: SessionModelContextSumma
   };
 
   return (
-    <div className="grid gap-x-4 gap-y-2 border-t border-border/60 py-2 first:border-t-0 lg:grid-cols-[minmax(180px,1fr)_minmax(260px,1fr)_minmax(260px,1.4fr)]">
+    <div className="grid gap-x-4 gap-y-2 border-t border-white/10 py-2 first:border-t-0 lg:grid-cols-[minmax(180px,1fr)_minmax(260px,1fr)_minmax(260px,1.4fr)]">
       <div className="min-w-0">
         <div className="flex min-w-0 items-center gap-2">
           <button
@@ -1080,7 +1135,7 @@ function SessionModelContextRow({ summary }: { summary: SessionModelContextSumma
                 <TrendIcon
                   className={cn(
                     "size-3",
-                    trend !== null && trend > 0 ? "text-amber-300" : "text-emerald-300",
+                    trend !== null && trend > 0 ? "text-amber-300" : "text-cyan-300",
                   )}
                 />
               )}
@@ -1118,7 +1173,7 @@ function SessionContextSummaryPanel({
 }): JSX.Element | null {
   if (summary.models.length === 0) return null;
   return (
-    <div className="mt-3 border-t border-border/70 pt-2">
+    <div className="mt-3 border-t border-white/10 pt-2">
       <div className="mb-1 flex items-center justify-between gap-2">
         <div className="text-[11px] font-semibold uppercase tracking-normal text-muted-foreground">
           Session Context
@@ -1186,12 +1241,12 @@ function SessionContextBar({
   }, []);
 
   return (
-    <div className="mb-3 rounded-md border border-border bg-muted/15 px-3 py-2 text-xs">
+    <div className="border border-border bg-card shadow-sm mb-3 rounded-[8px] px-3 py-2 text-xs">
       <div className="flex flex-wrap items-center gap-2">
         {showBackLink && (
           <a
             href="/"
-            className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
             aria-label="Back to all sessions"
             title="Back to all sessions"
           >
@@ -1228,7 +1283,7 @@ function SessionContextBar({
           <button
             type="button"
             onClick={() => setDetailsOpen((value) => !value)}
-            className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-border bg-background/60 px-2.5 font-mono text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md px-2.5 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground"
             aria-expanded={detailsOpen}
             title={detailsOpen ? "Hide context details" : "Show context details"}
           >
@@ -1243,7 +1298,7 @@ function SessionContextBar({
         <button
           type="button"
           onClick={handleCopyLink}
-          className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
           aria-label={copied ? "Copied session link" : "Copy session link"}
           title={copied ? "Copied session link" : "Copy session link"}
         >
@@ -1267,6 +1322,8 @@ export type ProxyViewerProps = {
   /** Clear only the logs whose ids are passed. Called by the per-group
    *  Clear button on each conversation header. */
   onClearGroup: (ids: number[]) => void;
+  /** Surface short-lived action feedback without adding sticky page chrome. */
+  onNotify?: (notice: TransientToastInput) => void;
   onImportLogs?: (file: File) => Promise<ImportLogsResponse>;
   viewMode: "simple" | "full";
   captureMode: CaptureMode;
@@ -1300,6 +1357,7 @@ export function ProxyViewer({
   onModelChange,
   onClearAll,
   onClearGroup,
+  onNotify,
   onImportLogs,
   viewMode,
   captureMode,
@@ -1356,13 +1414,17 @@ export function ProxyViewer({
       try {
         const result = await exportLogsAsZip(logs, mode);
         if (!result.ok) {
-          setExportError(result.message);
+          if (onNotify !== undefined) {
+            onNotify({ message: result.message, tone: "error" });
+          } else {
+            setExportError(result.message);
+          }
         }
       } finally {
         setExporting(null);
       }
     },
-    [logs],
+    [logs, onNotify],
   );
   const handleImportClick = useCallback(() => {
     importInputRef.current?.click();
@@ -1380,18 +1442,26 @@ export function ProxyViewer({
       void onImportLogs(file)
         .then((result) => {
           const skipped = result.skipped > 0 ? `, skipped ${String(result.skipped)}` : "";
-          setImportStatus(
-            `Imported ${String(result.imported)} logs as ${result.sessionId}${skipped}.`,
-          );
+          const message = `Imported ${String(result.imported)} logs as ${result.sessionId}${skipped}.`;
+          if (onNotify !== undefined) {
+            onNotify({ message, tone: "success" });
+          } else {
+            setImportStatus(message);
+          }
         })
         .catch((err: unknown) => {
-          setImportError(err instanceof Error ? err.message : "Failed to import logs");
+          const message = err instanceof Error ? err.message : "Failed to import logs";
+          if (onNotify !== undefined) {
+            onNotify({ message, tone: "error" });
+          } else {
+            setImportError(message);
+          }
         })
         .finally(() => {
           setImporting(false);
         });
     },
-    [onImportLogs],
+    [onImportLogs, onNotify],
   );
   // Close the compare drawer when the user changes the session or model
   // filter, since the predecessor relationship may no longer be meaningful.
@@ -1404,6 +1474,7 @@ export function ProxyViewer({
   }, []);
 
   const groups = useMemo(() => groupLogsByConversation(logs), [logs]);
+  const displayNumberByLogId = useMemo(() => buildDisplayNumberByLogId(groups), [groups]);
   const sessionContextScope = useMemo(
     () => resolveSessionContextScope({ pinnedSessionId, selectedSession, sessions, logs }),
     [logs, pinnedSessionId, selectedSession, sessions],
@@ -1447,38 +1518,30 @@ export function ProxyViewer({
   );
 
   return (
-    <div className="min-h-screen w-full bg-[#070809] text-foreground">
+    <div className="bg-background min-h-screen w-full text-foreground">
       <div className="grid min-h-screen w-full grid-cols-1 lg:grid-cols-[340px_minmax(0,1fr)] xl:grid-cols-[360px_minmax(0,1fr)]">
-        <aside className="border-b border-border bg-[#090a0c] lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-r">
+        <aside className="bg-background border-b lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-r">
           <div className="space-y-4 p-4">
             <BrandHeader compact={true} crabEntrancePhase={crabEntrancePhase} />
 
-            <div className="grid grid-cols-3 gap-2 border-y border-border/70 py-3">
-              <div className="min-w-0">
-                <div className="font-mono text-lg font-semibold text-foreground">{logs.length}</div>
-                <div className="text-[10px] uppercase text-muted-foreground">Requests</div>
-              </div>
-              <div className="min-w-0">
-                <div className="font-mono text-lg font-semibold text-foreground">
-                  {formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)}
-                </div>
-                <div className="text-[10px] uppercase text-muted-foreground">Input</div>
-              </div>
-              <div className="min-w-0">
-                <div className="font-mono text-lg font-semibold text-foreground">
-                  {formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)}
-                </div>
-                <div className="text-[10px] uppercase text-muted-foreground">Output</div>
+            <SidebarPanel label="Session">
+              <div className="grid grid-cols-3 gap-2">
+                <SidebarMetric label="Requests" value={logs.length} />
+                <SidebarMetric
+                  label="Input"
+                  value={formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)}
+                />
+                <SidebarMetric
+                  label="Output"
+                  value={formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)}
+                />
               </div>
-            </div>
+            </SidebarPanel>
 
-            <div className="space-y-2">
-              <div className="text-[10px] font-semibold uppercase tracking-normal text-muted-foreground">
-                Workspace
-              </div>
-              <div className="rounded-md border border-border bg-[#0c0d0f] px-3 py-2">
+            <SidebarPanel label="Workspace">
+              <div className="border border-border bg-muted/40 rounded-md px-3 py-2">
                 <div
-                  className="font-mono text-xs font-semibold text-purple-300"
+                  className="truncate font-mono text-xs font-semibold text-cyan-100"
                   title={activeScopeLabel}
                 >
                   {activeScopeLabel}
@@ -1487,7 +1550,7 @@ export function ProxyViewer({
                   {isPinnedSessionPage ? "Session workspace" : "Live workspace"}
                 </div>
               </div>
-            </div>
+            </SidebarPanel>
 
             {hasSessionContext && sessionContextScope !== null && (
               <SessionContextBar
@@ -1507,44 +1570,43 @@ export function ProxyViewer({
                 <SessionMembershipPanel memberships={sessionMemberships} />
               )}
 
-            <div className="space-y-2">
-              <div className="text-[10px] font-semibold uppercase tracking-normal text-muted-foreground">
-                Filters
-              </div>
-              {!hideSessionFilter && (
-                <Select value={selectedSession} onValueChange={onSessionChange}>
-                  <SelectTrigger className="h-9 w-full text-xs">
-                    <SelectValue placeholder="All sessions" />
+            <SidebarPanel label="Filters">
+              <div className="space-y-2">
+                {!hideSessionFilter && (
+                  <Select value={selectedSession} onValueChange={onSessionChange}>
+                    <SelectTrigger className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 w-full text-xs">
+                      <SelectValue placeholder="All sessions" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__all__">All sessions</SelectItem>
+                      {sessions.map((s) => (
+                        <SelectItem key={s} value={s}>
+                          {truncateSessionId(s)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+                <Select value={selectedModel} onValueChange={onModelChange}>
+                  <SelectTrigger className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 w-full text-xs">
+                    <SelectValue placeholder="All models" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="__all__">All sessions</SelectItem>
-                    {sessions.map((s) => (
-                      <SelectItem key={s} value={s}>
-                        {truncateSessionId(s)}
+                    <SelectItem value="__all__">All models</SelectItem>
+                    {models.map((m) => (
+                      <SelectItem key={m} value={m}>
+                        {m}
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
-              )}
-              <Select value={selectedModel} onValueChange={onModelChange}>
-                <SelectTrigger className="h-9 w-full text-xs">
-                  <SelectValue placeholder="All models" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="__all__">All models</SelectItem>
-                  {models.map((m) => (
-                    <SelectItem key={m} value={m}>
-                      {m}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
+              </div>
+            </SidebarPanel>
           </div>
         </aside>
 
         <main className="min-w-0">
-          <div className="sticky top-0 z-30 border-b border-border bg-[#08090b]/95 px-4 py-3 shadow-[0_12px_40px_rgba(0,0,0,0.24)] backdrop-blur lg:px-5">
+          <div className="border border-border bg-background/95 shadow-sm sticky top-0 z-30 border-b px-4 py-3 lg:px-5">
             <div className="flex flex-wrap items-center gap-2">
               <div className="min-w-[180px] flex-1">
                 <div className="text-sm font-semibold text-foreground">Logs</div>
@@ -1565,7 +1627,7 @@ export function ProxyViewer({
                     type="button"
                     onClick={handleImportClick}
                     disabled={importing}
-                    className="inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                    className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                     title="Import Agent Inspector export"
                   >
                     {importing ? (
@@ -1586,7 +1648,7 @@ export function ProxyViewer({
                     void handleExport("redacted");
                   }}
                   disabled={exporting !== null}
-                  className="inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                  className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                   title="Export redacted logs as JSON ZIP"
                 >
                   {exporting === "redacted" ? (
@@ -1606,7 +1668,7 @@ export function ProxyViewer({
                     void handleExport("raw");
                   }}
                   disabled={exporting !== null}
-                  className="inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                  className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
                   title="Export raw logs without redaction"
                 >
                   {exporting === "raw" ? (
@@ -1622,7 +1684,7 @@ export function ProxyViewer({
               <button
                 type="button"
                 onClick={onClearAll}
-                className="inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:text-foreground"
                 title="Clear all logs"
               >
                 <Trash2 className="size-3.5" />
@@ -1630,18 +1692,18 @@ export function ProxyViewer({
               </button>
             </div>
             <LogPaginationBar logs={logs} pagination={pagination} embedded={true} />
-            {exportError !== null && (
+            {onNotify === undefined && exportError !== null && (
               <div className="mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
                 {exportError}
               </div>
             )}
-            {importError !== null && (
+            {onNotify === undefined && importError !== null && (
               <div className="mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
                 {importError}
               </div>
             )}
-            {importStatus !== null && importError === null && (
-              <div className="mt-2 rounded-md border border-emerald-500/25 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-200">
+            {onNotify === undefined && importStatus !== null && importError === null && (
+              <div className="mt-2 rounded-md border border-cyan-400/25 bg-cyan-500/10 px-3 py-2 text-xs text-cyan-100">
                 {importStatus}
               </div>
             )}
@@ -1652,7 +1714,7 @@ export function ProxyViewer({
             {logs.length === 0 ? (
               selectedSession !== "__all__" ? (
                 <div className="py-16 text-center text-muted-foreground">
-                  <div className="mx-auto max-w-xl space-y-4 rounded-md border border-border bg-muted/10 px-4 py-8">
+                  <div className="border border-border bg-card shadow-sm mx-auto max-w-xl space-y-4 rounded-[8px] px-4 py-8">
                     <p className="text-sm font-medium">
                       {isLoading ? "Loading session data..." : "Session not found"}
                     </p>
@@ -1686,7 +1748,7 @@ export function ProxyViewer({
                 </div>
               ) : (
                 <div className="py-16 text-center text-muted-foreground">
-                  <div className="mx-auto max-w-2xl space-y-4 rounded-md border border-border bg-muted/10 px-4 py-8">
+                  <div className="border border-border bg-card shadow-sm mx-auto max-w-2xl space-y-4 rounded-[8px] px-4 py-8">
                     <p className="text-sm">No requests captured yet.</p>
                     <div className="flex flex-col items-center gap-2">
                       <CopyableCommand command="ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>" />
@@ -1716,8 +1778,7 @@ export function ProxyViewer({
                     onCompareWithPrevious={handleCompareWithPrevious}
                     comparisonPredecessors={comparisonPredecessors}
                     onClearGroup={onClearGroup}
-                    standalone={groups.length === 1}
-                    hasPinnedSessionContext={hasSessionContext}
+                    defaultExpanded={groups.length === 1}
                     timeDisplayFormat={timeDisplayFormat}
                   />
                 </div>
@@ -1733,7 +1794,13 @@ export function ProxyViewer({
       {/* Compare drawer: sibling of the log list, not a route change. */}
       {comparePair !== null && (
         <Suspense fallback={null}>
-          <LazyCompareDrawer left={comparePair[0]} right={comparePair[1]} onClose={closeCompare} />
+          <LazyCompareDrawer
+            left={comparePair[0]}
+            right={comparePair[1]}
+            leftDisplayNumber={displayNumberForLog(comparePair[0], displayNumberByLogId)}
+            rightDisplayNumber={displayNumberForLog(comparePair[1], displayNumberByLogId)}
+            onClose={closeCompare}
+          />
         </Suspense>
       )}
     </div>