@tonyclaw/llm-inspector 1.18.2 → 1.19.0

package/src/components/ProxyViewer.tsx

@@ -303,165 +303,176 @@ export function ProxyViewer({
 
   return (
     <div className="max-w-[1400px] xl:max-w-[1600px] 2xl:max-w-[1800px] mx-auto px-6 pb-6">
-      {/* Brand row */}
-      <div className="grid grid-cols-[1fr_auto_1fr] items-start gap-3 pt-6 pb-8">
-        <div />
-        <h1 className="flex min-w-0 flex-col items-center gap-2 text-center">
-          <span className="flex max-w-[calc(100vw-7rem)] items-end gap-2 whitespace-nowrap">
-            {/* Crab family — hover to animate together */}
-            <span className="flex shrink-0 items-end gap-1 group cursor-default" aria-hidden="true">
-              <CrabLogo className="size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" />
-              <span className="hidden items-end gap-0.5 sm:flex">
-                {crabVariants.map((Crab, i) => {
-                  const color = [
-                    "text-amber-500",
-                    "text-rose-500",
-                    "text-sky-500",
-                    "text-emerald-500",
-                    "text-violet-500",
-                    "text-orange-500",
-                    "text-cyan-500",
-                    "text-pink-500",
-                    "text-lime-500",
-                    "text-blue-500",
-                    "text-yellow-500",
-                    "text-fuchsia-500",
-                  ][i];
-                  const entranceClass =
-                    crabEntrancePhase === "hidden"
-                      ? "opacity-0 scale-0"
-                      : crabEntrancePhase === "playing"
-                        ? "animate-crab-piano-pop"
-                        : "";
-                  return (
-                    <Crab
-                      key={i}
-                      className={`size-5 ${color} transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1 ${entranceClass}`}
-                      style={{
-                        transitionDelay: `${i * 50}ms`,
-                        ...(crabEntrancePhase === "playing"
-                          ? { animationDelay: `${i * 400}ms` }
-                          : {}),
-                      }}
-                    />
-                  );
-                })}
+      {/* Sticky chrome — brand row, optional pinned-session context, and the
+          filter/control bar stay visible while the user scrolls through the
+          log list. `z-30` sits above the per-conversation sticky header
+          (`z-10`) but below modal-level overlays (dialogs, dropdowns,
+          tooltips — `z-50`). Background is fully opaque so logs don't bleed
+          through. */}
+      <div className="sticky top-0 z-30 bg-background pt-6">
+        {/* Brand row */}
+        <div className="grid grid-cols-[1fr_auto_1fr] items-start gap-3 pb-8">
+          <div />
+          <h1 className="flex min-w-0 flex-col items-center gap-2 text-center">
+            <span className="flex max-w-[calc(100vw-7rem)] items-end gap-2 whitespace-nowrap">
+              {/* Crab family — hover to animate together */}
+              <span
+                className="flex shrink-0 items-end gap-1 group cursor-default"
+                aria-hidden="true"
+              >
+                <CrabLogo className="size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" />
+                <span className="hidden items-end gap-0.5 sm:flex">
+                  {crabVariants.map((Crab, i) => {
+                    const color = [
+                      "text-amber-500",
+                      "text-rose-500",
+                      "text-sky-500",
+                      "text-emerald-500",
+                      "text-violet-500",
+                      "text-orange-500",
+                      "text-cyan-500",
+                      "text-pink-500",
+                      "text-lime-500",
+                      "text-blue-500",
+                      "text-yellow-500",
+                      "text-fuchsia-500",
+                    ][i];
+                    const entranceClass =
+                      crabEntrancePhase === "hidden"
+                        ? "opacity-0 scale-0"
+                        : crabEntrancePhase === "playing"
+                          ? "animate-crab-piano-pop"
+                          : "";
+                    return (
+                      <Crab
+                        key={i}
+                        className={`size-5 ${color} transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1 ${entranceClass}`}
+                        style={{
+                          transitionDelay: `${i * 50}ms`,
+                          ...(crabEntrancePhase === "playing"
+                            ? { animationDelay: `${i * 400}ms` }
+                            : {}),
+                        }}
+                      />
+                    );
+                  })}
+                </span>
               </span>
-            </span>
-            <span className="flex min-w-0 items-baseline gap-2 pl-1">
-              <span className="truncate text-lg font-bold">LLM Inspector</span>
-              <span className="shrink-0 font-mono text-xs font-semibold text-muted-foreground">
-                v{packageJson.version}
+              <span className="flex min-w-0 items-baseline gap-2 pl-1">
+                <span className="truncate text-lg font-bold">LLM Inspector</span>
+                <span className="shrink-0 font-mono text-xs font-semibold text-muted-foreground">
+                  v{packageJson.version}
+                </span>
               </span>
+              <Plus className="size-4 shrink-0 text-muted-foreground/70" aria-hidden="true" />
+              <McpLogo className="size-10 shrink-0" />
             </span>
-            <Plus className="size-4 shrink-0 text-muted-foreground/70" aria-hidden="true" />
-            <McpLogo className="size-10 shrink-0" />
-          </span>
-          <McpReadyBadge />
-        </h1>
-        <div className="justify-self-end">
-          <SettingsDialog />
+            <McpReadyBadge />
+          </h1>
+          <div className="justify-self-end">
+            <SettingsDialog />
+          </div>
         </div>
-      </div>
 
-      {pinnedSessionId !== undefined && (
-        <SessionContextBar
-          sessionId={pinnedSessionId}
-          logs={logs}
-          totalIn={totalIn}
-          totalOut={totalOut}
-        />
-      )}
+        {pinnedSessionId !== undefined && (
+          <SessionContextBar
+            sessionId={pinnedSessionId}
+            logs={logs}
+            totalIn={totalIn}
+            totalOut={totalOut}
+          />
+        )}
 
-      {/* Controls + Filters */}
-      <div className="flex items-center gap-3 mb-4">
-        {!hideSessionFilter && (
-          <Select value={selectedSession} onValueChange={onSessionChange}>
-            <SelectTrigger className="flex-1 max-w-[350px] text-xs">
-              <SelectValue placeholder="All sessions" />
+        {/* Controls + Filters */}
+        <div className="flex items-center gap-3 mb-4">
+          {!hideSessionFilter && (
+            <Select value={selectedSession} onValueChange={onSessionChange}>
+              <SelectTrigger className="flex-1 max-w-[350px] 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="flex-1 max-w-[250px] 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="flex-1 max-w-[250px] 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 className="flex items-center border border-border rounded-md overflow-hidden">
-          <button
-            type="button"
-            onClick={() => onViewModeChange("simple")}
-            className={`h-8 px-3 cursor-pointer transition-colors text-xs ${
-              viewMode === "simple"
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:bg-muted/50"
-            }`}
-          >
-            Simple
-          </button>
+          <div className="flex items-center border border-border rounded-md overflow-hidden">
+            <button
+              type="button"
+              onClick={() => onViewModeChange("simple")}
+              className={`h-8 px-3 cursor-pointer transition-colors text-xs ${
+                viewMode === "simple"
+                  ? "bg-muted text-foreground"
+                  : "text-muted-foreground hover:bg-muted/50"
+              }`}
+            >
+              Simple
+            </button>
+            <button
+              type="button"
+              onClick={() => onViewModeChange("full")}
+              className={`h-8 px-3 cursor-pointer transition-colors text-xs ${
+                viewMode === "full"
+                  ? "bg-muted text-foreground"
+                  : "text-muted-foreground hover:bg-muted/50"
+              }`}
+            >
+              Full
+            </button>
+          </div>
+          <div className="flex-1" />
+          <span className="text-muted-foreground text-xs font-mono">
+            {logs.length} request{logs.length !== 1 ? "s" : ""}
+            {totalIn > 0 || totalOut > 0
+              ? ` · ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`
+              : ""}
+          </span>
+          {logs.length > 0 && (
+            <button
+              type="button"
+              onClick={() => {
+                void handleExport();
+              }}
+              disabled={exporting}
+              className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted"
+              title="Export all logs as JSON ZIP"
+            >
+              {exporting ? (
+                <span>Exporting...</span>
+              ) : (
+                <>
+                  <Download className="size-3.5" />
+                  <span>Export</span>
+                </>
+              )}
+            </button>
+          )}
           <button
             type="button"
-            onClick={() => onViewModeChange("full")}
-            className={`h-8 px-3 cursor-pointer transition-colors text-xs ${
-              viewMode === "full"
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:bg-muted/50"
-            }`}
+            onClick={onClearAll}
+            className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer rounded-md hover:bg-muted"
+            title="Clear all logs"
           >
-            Full
+            Clear
           </button>
         </div>
-        <div className="flex-1" />
-        <span className="text-muted-foreground text-xs font-mono">
-          {logs.length} request{logs.length !== 1 ? "s" : ""}
-          {totalIn > 0 || totalOut > 0
-            ? ` · ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`
-            : ""}
-        </span>
-        {logs.length > 0 && (
-          <button
-            type="button"
-            onClick={() => {
-              void handleExport();
-            }}
-            disabled={exporting}
-            className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted"
-            title="Export all logs as JSON ZIP"
-          >
-            {exporting ? (
-              <span>Exporting...</span>
-            ) : (
-              <>
-                <Download className="size-3.5" />
-                <span>Export</span>
-              </>
-            )}
-          </button>
-        )}
-        <button
-          type="button"
-          onClick={onClearAll}
-          className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer rounded-md hover:bg-muted"
-          title="Clear all logs"
-        >
-          Clear
-        </button>
       </div>
 
       {/* Log list */}