@tonyclaw/llm-inspector 1.16.1 → 1.16.2

package/src/components/proxy-viewer/ThreadConnector.tsx

@@ -1,5 +1,4 @@
 import { type JSX, useMemo } from "react";
-import { ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils";
 import type { StopReason } from "../../lib/stopReason";
 import { getCrabVariant } from "../ui/crab-variants";
@@ -12,20 +11,17 @@ export type ThreadConnectorProps = {
   isTurnStart: boolean;
   /** Seed for crab variant selection (0-11). */
   crabIndex?: number;
-  /** When true, the boundary marker is clickable to collapse/expand the turn. */
+  /** When true the crab is clickable (collapse / expand a turn). */
   collapsible?: boolean;
-  collapsed?: boolean;
   onToggle?: () => void;
 };
 
 /**
- * Vertical timeline connector for thread view. Uses flexbox layout (no
- * absolute positioning) so the connector naturally tracks its sibling
- * LogEntry height — no scroll jitter.
- *
- * Markers use the CrabLogo. At turn starts the crab is static (amber),
- * during processing it "crawls" downward with a bounce animation, and
- * at turn boundaries it stops with a glow.
+ * Vertical timeline connector.  Top spacer uses a calc() that
+ * mixes rem (py-1 + half-line) and px (border) so the crab
+ * centre-line matches the LogEntry `#id` index regardless of the
+ * root font-size.  The bottom spacer is flex-1 so the outgoing
+ * line adapts to whatever height the LogEntry occupies.
  */
 export function ThreadConnector({
   stopReason,
@@ -34,74 +30,82 @@ export function ThreadConnector({
   isTurnStart,
   crabIndex = 0,
   collapsible = false,
-  collapsed = false,
   onToggle,
 }: ThreadConnectorProps): JSX.Element {
   const isBoundary = stopReason === "end_turn" || stopReason === "stop";
   const isRunning = isPending && !isBoundary;
   const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
 
+  const interactiveProps =
+    collapsible && onToggle
+      ? ({
+          role: "button" as const,
+          tabIndex: 0,
+          className: "cursor-pointer",
+          onClick: (e: React.MouseEvent) => {
+            e.stopPropagation();
+            onToggle();
+          },
+          onKeyDown: (e: React.KeyboardEvent) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onToggle();
+            }
+          },
+        } as const)
+      : ({} as const);
+
   return (
-    <div className="flex flex-col items-center w-6 shrink-0">
-      {/* Top: incoming line */}
-      <div className="flex justify-center h-2.5">
-        {!isFirst && <div className="w-0.5 bg-muted-foreground/30" />}
+    <div className="flex flex-col items-center w-6 shrink-0 pt-0.5 pb-0.5">
+      {/* Top spacer — crab centre must land on the LogEntry index midline.
+       *  Index midline from container top = border(1px) + py-1(0.25rem) + ½line(0.5rem)
+       *  = 1px + 0.75rem.  Crab centre = pt(2px) + spacer + 7px(half crab).
+       *  ∴ spacer = 0.75rem - 8px.  (at 16px root: 12-8=4px; 2+4+7=13px). */}
+      <div className="flex justify-center h-[calc(0.75rem-8px)]">
+        {!isFirst && <div className="w-0.5 bg-muted-foreground/30 h-full" />}
       </div>
 
-      {/* Collapse toggle — sits above the crab, no overlap */}
-      {collapsible && (
-        <button
-          type="button"
-          onClick={onToggle}
-          title={collapsed ? "Expand turn" : "Collapse turn"}
-          className="cursor-pointer flex justify-center py-0.5"
+      {/* Crab — pinned to the fixed offset above so it never drifts
+       *  when the LogEntry expands / collapses.  Clickable when the
+       *  turn is collapsible (replaces the old chevron toggle). */}
+      {isBoundary ? (
+        <span
+          title={stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)"}
+          {...interactiveProps}
         >
-          {collapsed ? (
-            <ChevronRight className="size-3 text-muted-foreground hover:text-foreground transition-colors" />
-          ) : (
-            <ChevronDown className="size-3 text-muted-foreground hover:text-foreground transition-colors" />
-          )}
-        </button>
-      )}
-
-      {/* Center marker — CrabLogo */}
-      <div className="flex items-center justify-center py-0.5">
-        {isBoundary ? (
-          <span
-            title={stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)"}
-          >
-            <Crab
-              className={cn(
-                "size-3.5 text-amber-400",
-                "animate-crab-settle",
-                "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
-              )}
-            />
-          </span>
-        ) : isTurnStart ? (
-          <span title="Start of turn">
-            <Crab
-              className={cn(
-                "size-3.5 text-emerald-400",
-                "animate-crab-appear",
-                "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
-              )}
-            />
-          </span>
-        ) : isRunning ? (
-          <span title="Processing…">
-            <Crab className={cn("size-3.5 text-amber-300/80", "animate-crab-crawl")} />
-          </span>
-        ) : (
+          <Crab
+            className={cn(
+              "size-3.5 text-amber-400",
+              "animate-crab-settle",
+              "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
+            )}
+          />
+        </span>
+      ) : isTurnStart ? (
+        <span title="Start of turn" {...interactiveProps}>
+          <Crab
+            className={cn(
+              "size-3.5 text-emerald-400",
+              "animate-crab-appear",
+              "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
+            )}
+          />
+        </span>
+      ) : isRunning ? (
+        <span title="Processing…">
+          <Crab className={cn("size-3.5 text-amber-300/80", "animate-crab-crawl")} />
+        </span>
+      ) : (
+        <span>
           <Crab className="size-3.5 text-muted-foreground/40" />
-        )}
-      </div>
+        </span>
+      )}
 
-      {/* Bottom: outgoing line */}
-      <div className="flex-1 flex justify-center min-h-1">
-        {isBoundary ? (
-          <div className="w-0.5 bg-muted-foreground/10 h-4" />
-        ) : (
+      {/* Bottom spacer — flex-1 fills whatever height the LogEntry
+       *  consumes (header + expanded content).  Turn boundaries have
+       *  no outgoing line. */}
+      <div className="flex-1 flex justify-center min-h-0">
+        {!isBoundary && (
           <div
             className={cn(
               "w-0.5 h-full",

package/src/components/proxy-viewer/TurnGroup.tsx

@@ -1,12 +1,20 @@
-import { type JSX, memo, useCallback, useMemo, useState } from "react";
+import { type JSX, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ChevronRight, Clock, Zap } from "lucide-react";
 import { isTurnBoundary } from "../../lib/stopReason";
-import { cn } from "../../lib/utils";
+import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
+import { getCrabVariant } from "../ui/crab-variants";
+import { ProviderLogo, detectProvider, type Provider } from "../providers/ProviderLogo";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
 import { ThreadConnector } from "./ThreadConnector";
 import type { TurnEntry } from "./viewerState";
 
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
 type TurnGroupProps = {
   entries: TurnEntry[];
   viewMode: "simple" | "full";
@@ -14,7 +22,6 @@ type TurnGroupProps = {
   cacheTrends?: Map<number, CacheTrendEntry>;
   onCompareWithPrevious: (log: CapturedLog) => void;
   comparisonPredecessors: Map<number, CapturedLog>;
-  /** Turn index for alternating background colours. */
   turnIndex?: number;
 };
 
@@ -34,54 +41,248 @@ export const TurnGroup = memo(function TurnGroup({
   const collapsible = isComplete && !isPending;
   const [collapsed, setCollapsed] = useState(false);
 
+  // Auto-collapse when the turn finishes (transitions from incomplete → complete)
+  const prevCompleteRef = useRef(isComplete);
+  useEffect(() => {
+    if (isComplete && !prevCompleteRef.current) {
+      setCollapsed(true);
+    }
+    prevCompleteRef.current = isComplete;
+  }, [isComplete]);
+
   const toggleCollapse = useCallback(() => {
     if (collapsible) setCollapsed((prev) => !prev);
   }, [collapsible]);
 
-  // When collapsed, only show the boundary entry
-  const visibleEntries = useMemo(() => {
-    if (!collapsed) return entries;
-    const last = entries[lastIdx];
-    return last !== undefined ? [last] : [];
-  }, [entries, collapsed, lastIdx]);
+  // Aggregate totals for collapsed summary
+  const aggregate = useMemo(() => {
+    let totalInput = 0;
+    let totalOutput = 0;
+    let totalElapsed = 0;
+    let hasTokens = false;
+    let hasElapsed = false;
+    for (const e of entries) {
+      if (e.log.inputTokens !== null) {
+        totalInput += e.log.inputTokens;
+        hasTokens = true;
+      }
+      if (e.log.outputTokens !== null) {
+        totalOutput += e.log.outputTokens;
+        hasTokens = true;
+      }
+      if (e.log.elapsedMs !== null) {
+        totalElapsed += e.log.elapsedMs;
+        hasElapsed = true;
+      }
+    }
+    return {
+      totalInput,
+      totalOutput,
+      hasTokens,
+      totalElapsed,
+      hasElapsed,
+    };
+  }, [entries, lastIdx]);
+
+  // Unique providers across all entries (for collapsed model logos)
+  const uniqueProviders = useMemo(() => {
+    const seen = new Set<Provider>();
+    for (const e of entries) {
+      const p = detectProvider(e.log.model);
+      if (p !== "unknown") seen.add(p);
+    }
+    return [...seen];
+  }, [entries]);
+
+  // Crab variant creators for the dual-crab collapsed layout
+  const StartCrab = useMemo(() => getCrabVariant(entries[0]?.log.id ?? 0), [entries]);
+  const EndCrab = useMemo(() => getCrabVariant(entries[lastIdx]?.log.id ?? 0), [entries, lastIdx]);
 
   const bgClass = turnIndex % 2 === 0 ? "bg-muted/10" : "bg-muted/25";
 
+  // ResizeObserver → re-render connectors when any LogEntry height changes
+  const [layoutVersion, setLayoutVersion] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    let raf = 0;
+    const ro = new ResizeObserver(() => {
+      window.cancelAnimationFrame(raf);
+      raf = window.requestAnimationFrame(() => setLayoutVersion((v) => v + 1));
+    });
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      window.cancelAnimationFrame(raf);
+    };
+  }, []);
+
   return (
     <div
+      ref={containerRef}
       className={cn("border rounded-lg", isPending ? "border-amber-500/10" : "border-transparent")}
     >
-      {visibleEntries.map((entry, visibleIdx) => {
-        const originalIdx = collapsed ? lastIdx : visibleIdx;
-        const { log, stopReason: reason } = entry;
-        const isBoundary = reason === "end_turn" || reason === "stop";
-
-        return (
-          <div key={log.id} className="flex items-stretch">
-            <ThreadConnector
-              stopReason={reason}
-              isPending={log.responseStatus === null}
-              isFirst={originalIdx === 0}
-              isTurnStart={originalIdx === 0}
-              crabIndex={log.id % 12}
-              collapsible={collapsible && isBoundary && entries.length > 1}
-              collapsed={collapsed}
-              onToggle={toggleCollapse}
-            />
-            <div className={cn("flex-1 min-w-0 mb-0.5 rounded-lg", bgClass)}>
-              <LogEntry
-                log={log}
-                viewMode={viewMode}
-                strip={strip}
-                cacheTrend={cacheTrends?.get(log.id) ?? null}
-                onCompareWithPrevious={
-                  comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined
+      {collapsed ? (
+        /* ---- Collapsed: dual-crab + summary ---- */
+        <div className="flex items-stretch">
+          {/* Dual-crab connector */}
+          <div className="w-6 shrink-0 flex flex-col items-center pt-0.5 pb-0.5">
+            {/* Start turn crab (clickable to expand) */}
+            <div className="flex justify-center h-[calc(0.75rem-8px)]" />
+            <span
+              role="button"
+              tabIndex={0}
+              title="Start of turn — click to expand"
+              className="cursor-pointer"
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleCollapse();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  toggleCollapse();
                 }
+              }}
+            >
+              <StartCrab
+                className={cn(
+                  "size-3.5 text-emerald-400",
+                  "animate-crab-appear",
+                  "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
+                )}
               />
+            </span>
+
+            {/* Connecting line between the two crabs */}
+            <div className="flex-1 flex justify-center min-h-0">
+              <div className="w-0.5 bg-muted-foreground/30 h-full" />
             </div>
+
+            {/* End turn crab (clickable to expand) */}
+            <span
+              role="button"
+              tabIndex={0}
+              title="End of Turn — click to expand"
+              className="cursor-pointer"
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleCollapse();
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  toggleCollapse();
+                }
+              }}
+            >
+              <EndCrab
+                className={cn(
+                  "size-3.5 text-amber-400",
+                  "animate-crab-settle",
+                  "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
+                )}
+              />
+            </span>
+          </div>
+
+          {/* Summary content — card-like appearance matching LogEntry */}
+          <div
+            className={cn(
+              "flex-1 min-w-0 mb-0.5 rounded-lg border border-border py-1 px-3 flex items-center gap-3 text-xs cursor-pointer",
+              bgClass,
+            )}
+            onClick={toggleCollapse}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                toggleCollapse();
+              }
+            }}
+          >
+            {/* ID range */}
+            <span className="text-blue-400/80 font-mono font-semibold tabular-nums shrink-0">
+              #{entries[0]?.log.id ?? "?"} ~ #{entries[lastIdx]?.log.id ?? "?"}
+            </span>
+
+            {/* Request count */}
+            <span className="text-muted-foreground shrink-0">
+              {entries.length} request{entries.length > 1 ? "s" : ""}
+            </span>
+
+            {/* Model logos — one per unique provider */}
+            {uniqueProviders.length > 0 && (
+              <span className="flex items-center gap-0.5 shrink-0">
+                {uniqueProviders.map((p) => (
+                  <ProviderLogo key={p} provider={p} className="size-4" />
+                ))}
+              </span>
+            )}
+
+            {/* Elapsed */}
+            {aggregate.hasElapsed && (
+              <span className="hidden xl:flex items-center gap-1 text-muted-foreground shrink-0">
+                <Clock className="size-3" />
+                <span className="font-mono tabular-nums">
+                  {formatElapsed(aggregate.totalElapsed)}
+                </span>
+              </span>
+            )}
+
+            {/* Tokens */}
+            {aggregate.hasTokens && (
+              <span className="flex items-center gap-1 shrink-0">
+                <Zap className="size-3 text-muted-foreground" />
+                <span className="font-mono tabular-nums">
+                  <span className="text-blue-400">IN {formatTokens(aggregate.totalInput)}</span>
+                  {" / "}
+                  <span className="text-amber-400">OUT {formatTokens(aggregate.totalOutput)}</span>
+                </span>
+              </span>
+            )}
+
+            {/* Spacer */}
+            <span className="flex-1 min-w-0" />
+
+            {/* Expand chevron */}
+            <ChevronRight className="size-4 text-muted-foreground shrink-0" />
           </div>
-        );
-      })}
+        </div>
+      ) : (
+        /* ---- Expanded: full entries ---- */
+        entries.map((entry, visibleIdx) => {
+          const { log, stopReason: reason } = entry;
+          const isTurnStart = visibleIdx === 0;
+
+          return (
+            <div key={log.id} className="flex items-stretch">
+              <ThreadConnector
+                stopReason={reason}
+                isPending={log.responseStatus === null}
+                isFirst={visibleIdx === 0}
+                isTurnStart={isTurnStart}
+                crabIndex={log.id % 12}
+                collapsible={collapsible && entries.length > 1 && isTurnStart}
+                onToggle={toggleCollapse}
+              />
+              <div className={cn("flex-1 min-w-0 mb-0.5 rounded-lg", bgClass)}>
+                <LogEntry
+                  log={log}
+                  viewMode={viewMode}
+                  strip={strip}
+                  cacheTrend={cacheTrends?.get(log.id) ?? null}
+                  onCompareWithPrevious={
+                    comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined
+                  }
+                />
+              </div>
+            </div>
+          );
+        })
+      )}
     </div>
   );
 });

package/src/components/ui/json-viewer.tsx

@@ -251,8 +251,7 @@ const JsonNode = memo(function JsonNode({
   const openBracket = dataType === "array" ? "[" : "{";
   const closeBracket = dataType === "array" ? "]" : "}";
 
-  function handleExpandAll(e: React.MouseEvent): void {
-    e.stopPropagation();
+  function toggleDeepExpansion(): void {
     if (allExpanded) {
       setExpanded(false);
       setChildDepthOverride(0);
@@ -266,6 +265,11 @@ const JsonNode = memo(function JsonNode({
     }
   }
 
+  function handleExpandAll(e: React.MouseEvent): void {
+    e.stopPropagation();
+    toggleDeepExpansion();
+  }
+
   const effectiveChildDepth = childDepthOverride ?? defaultExpandDepth;
 
   return (
@@ -295,6 +299,9 @@ const JsonNode = memo(function JsonNode({
               }
             : undefined
         }
+        onDoubleClick={
+          expandable && hasExpandableDescendant(value) ? () => toggleDeepExpansion() : undefined
+        }
         role={expandable ? "button" : undefined}
         tabIndex={expandable ? 0 : undefined}
       >

package/src/lib/runtimeConfig.ts

@@ -10,6 +10,7 @@ import { z } from "zod";
  */
 export const RuntimeConfigSchema = z.object({
   stripClaudeCodeBillingHeader: z.boolean(),
+  hasSeenOnboarding: z.boolean().default(false),
 });
 
 export type RuntimeConfig = z.infer<typeof RuntimeConfigSchema>;

package/src/lib/useOnboarding.ts

@@ -0,0 +1,74 @@
+import useSWR, { type SWRResponse, useSWRConfig } from "swr";
+import { fetchJson } from "./apiClient";
+import { RuntimeConfigSchema, type RuntimeConfig } from "./runtimeConfig";
+
+export const ONBOARDING_SWR_KEY = "/api/config";
+
+async function fetcher(url: string): Promise<RuntimeConfig> {
+  return fetchJson(
+    url,
+    RuntimeConfigSchema,
+    undefined,
+    (response) => `Failed to fetch ${url}: ${response.status}`,
+  );
+}
+
+async function patchRuntimeConfig(patch: Partial<RuntimeConfig>): Promise<RuntimeConfig> {
+  return fetchJson(
+    ONBOARDING_SWR_KEY,
+    RuntimeConfigSchema,
+    {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(patch),
+    },
+    (response) => `PATCH failed with status ${response.status}`,
+  );
+}
+
+export type UseOnboarding = {
+  hasSeenOnboarding: boolean;
+  isLoading: boolean;
+  markSeen: () => Promise<void>;
+};
+
+/**
+ * Hook for the first-launch onboarding banner. The server's
+ * `hasSeenOnboarding` flag is the source of truth — set to `true` on
+ * dismissal and persisted in the server config file so it survives
+ * across browser sessions.
+ *
+ * `hasSeenOnboarding` defaults to `false` until the SWR fetch resolves,
+ * which means the banner shows briefly on first load. That is
+ * acceptable: the fetch is local and resolves within milliseconds.
+ */
+export function useOnboarding(): UseOnboarding {
+  const response: SWRResponse<RuntimeConfig, Error> = useSWR<RuntimeConfig, Error>(
+    ONBOARDING_SWR_KEY,
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+    },
+  );
+  const { mutate: globalMutate } = useSWRConfig();
+
+  const hasSeenOnboarding = response.data?.hasSeenOnboarding ?? false;
+
+  const markSeen = async (): Promise<void> => {
+    await globalMutate(ONBOARDING_SWR_KEY, patchRuntimeConfig({ hasSeenOnboarding: true }), {
+      optimisticData: {
+        stripClaudeCodeBillingHeader: response.data?.stripClaudeCodeBillingHeader ?? false,
+        hasSeenOnboarding: true,
+      },
+      rollbackOnError: true,
+      revalidate: false,
+    });
+  };
+
+  return {
+    hasSeenOnboarding,
+    isLoading: response.isLoading,
+    markSeen,
+  };
+}

package/src/proxy/config.ts

@@ -73,11 +73,11 @@ function resolveInitialConfig(): RuntimeConfig {
 
   // 2. Env var
   if (process.env["LLM_INSPECTOR_STRIP_CLAUDE_CODE_BILLING_HEADER"] === "1") {
-    return { stripClaudeCodeBillingHeader: true };
+    return { stripClaudeCodeBillingHeader: true, hasSeenOnboarding: false };
   }
 
   // 3. Default off
-  return { stripClaudeCodeBillingHeader: false };
+  return { stripClaudeCodeBillingHeader: false, hasSeenOnboarding: false };
 }
 
 /**

package/src/routes/api/config.ts

@@ -6,6 +6,7 @@ import { getConfig, setConfig, RuntimeConfigSchema } from "../../proxy/config";
 const RuntimeConfigPatchSchema = z
   .object({
     stripClaudeCodeBillingHeader: z.boolean().optional(),
+    hasSeenOnboarding: z.boolean().optional(),
   })
   .strict()
   .refine((v) => Object.keys(v).length > 0, {