@tonyclaw/llm-inspector 1.14.7 → 1.14.8

package/src/components/providers/ProviderForm.tsx

@@ -1,5 +1,6 @@
 import { type JSX, useState, useEffect, useRef } from "react";
 import { Button } from "../ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import { Eye, EyeOff, Copy, Check, ChevronDown } from "lucide-react";
 import type { ProviderConfig } from "../../proxy/providers";
 import { maskApiKey } from "../../lib/mask";
@@ -371,28 +372,42 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
 
       <div className="space-y-2">
         <div className="flex gap-1 border-b border-border">
-          <button
-            type="button"
-            onClick={() => setActiveTab("anthropic")}
-            className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
-              activeTab === "anthropic"
-                ? "border-primary text-primary"
-                : "border-transparent text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            Anthropic Format
-          </button>
-          <button
-            type="button"
-            onClick={() => setActiveTab("openai")}
-            className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
-              activeTab === "openai"
-                ? "border-primary text-primary"
-                : "border-transparent text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            OpenAI Format
-          </button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => setActiveTab("anthropic")}
+                  className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
+                    activeTab === "anthropic"
+                      ? "border-primary text-primary"
+                      : "border-transparent text-muted-foreground hover:text-foreground"
+                  }`}
+                >
+                  Anthropic Format
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>Anthropic Messages API protocol</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => setActiveTab("openai")}
+                  className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
+                    activeTab === "openai"
+                      ? "border-primary text-primary"
+                      : "border-transparent text-muted-foreground hover:text-foreground"
+                  }`}
+                >
+                  OpenAI Format
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>OpenAI Chat Completions API protocol</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
         {errors.format !== undefined && <p className="text-xs text-destructive">{errors.format}</p>}
       </div>

package/src/components/providers/ProvidersPanel.tsx

@@ -434,24 +434,38 @@ export function ProvidersPanel({
       <div className="flex items-center justify-between sticky top-0 z-10 bg-background pb-2">
         <h3 className="text-lg font-medium">Providers</h3>
         <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => handleExport(false)}
-            className="gap-1 hover:bg-muted"
-          >
-            <Download className="size-3" />
-            Export
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleImportClick}
-            className="gap-1 hover:bg-muted"
-          >
-            <Upload className="size-3" />
-            Import
-          </Button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleExport(false)}
+                  className="gap-1 hover:bg-muted"
+                >
+                  <Download className="size-3" />
+                  Export
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Download providers as JSON for backup or sharing</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleImportClick}
+                  className="gap-1 hover:bg-muted"
+                >
+                  <Upload className="size-3" />
+                  Import
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Import providers from an exported JSON file</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
           <input
             type="file"
             ref={fileInputRef}
@@ -490,23 +504,29 @@ export function ProvidersPanel({
           <span className="font-mono truncate" title={configPath}>
             {configPath}
           </span>
-          <button
-            type="button"
-            onClick={() => {
-              void window.navigator.clipboard.writeText(configPath).then(() => {
-                setConfigPathCopied(true);
-                setTimeout(() => setConfigPathCopied(false), 2000);
-              });
-            }}
-            className="shrink-0 ml-auto text-muted-foreground hover:text-foreground transition-colors"
-            title="Copy path"
-          >
-            {configPathCopied ? (
-              <Check className="size-3 text-green-500" />
-            ) : (
-              <Copy className="size-3" />
-            )}
-          </button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => {
+                    void window.navigator.clipboard.writeText(configPath).then(() => {
+                      setConfigPathCopied(true);
+                      setTimeout(() => setConfigPathCopied(false), 2000);
+                    });
+                  }}
+                  className="shrink-0 ml-auto text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {configPathCopied ? (
+                    <Check className="size-3 text-green-500" />
+                  ) : (
+                    <Copy className="size-3" />
+                  )}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>Copy config file path to clipboard</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
       )}
 
@@ -529,18 +549,30 @@ export function ProvidersPanel({
         <div className="space-y-3">
           <div className="flex gap-1 border-b border-border">
             {(["all", "personal", "company"] as const).map((tab) => (
-              <button
-                key={tab}
-                type="button"
-                onClick={() => setSourceFilter(tab)}
-                className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
-                  sourceFilter === tab
-                    ? "border-primary text-primary"
-                    : "border-transparent text-muted-foreground hover:text-foreground"
-                }`}
-              >
-                {tab === "all" ? "All" : tab === "personal" ? "Personal" : "Company"}
-              </button>
+              <TooltipProvider key={tab}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() => setSourceFilter(tab)}
+                      className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
+                        sourceFilter === tab
+                          ? "border-primary text-primary"
+                          : "border-transparent text-muted-foreground hover:text-foreground"
+                      }`}
+                    >
+                      {tab === "all" ? "All" : tab === "personal" ? "Personal" : "Company"}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {tab === "all"
+                      ? "Show all providers"
+                      : tab === "personal"
+                        ? "Providers you configured yourself"
+                        : "Providers set by your organization"}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             ))}
           </div>
           <div ref={listScrollRef} className="space-y-3">

package/src/components/providers/SettingsDialog.tsx

@@ -3,6 +3,7 @@ import { Settings } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { Button } from "../ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import { ProvidersPanel } from "./ProvidersPanel";
 import { useProviders } from "../../lib/useProviders";
 import { useStripConfig } from "../../lib/useStripConfig";
@@ -129,21 +130,30 @@ function ProxySettingsTab(): JSX.Element {
         </p>
       </div>
 
-      <label className="flex items-center gap-3">
-        <input
-          type="checkbox"
-          role="switch"
-          checked={strip}
-          disabled={isLoading || pending}
-          onChange={(e) => {
-            void handleToggle(e.currentTarget.checked);
-          }}
-          className="size-4 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
-        />
-        <span className="text-sm">
-          {isLoading ? "Loading…" : strip ? "Stripping enabled" : "Stripping disabled"}
-        </span>
-      </label>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <label className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                role="switch"
+                checked={strip}
+                disabled={isLoading || pending}
+                onChange={(e) => {
+                  void handleToggle(e.currentTarget.checked);
+                }}
+                className="size-4 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+              />
+              <span className="text-sm">
+                {isLoading ? "Loading…" : strip ? "Stripping enabled" : "Stripping disabled"}
+              </span>
+            </label>
+          </TooltipTrigger>
+          <TooltipContent>
+            Strip Claude Code billing header to improve cache hit rates
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       {error !== null && <p className="text-xs text-destructive">Failed to save: {error}</p>}
     </div>

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

@@ -1,14 +1,17 @@
-import { useState, memo } from "react";
+import { useState, memo, useMemo, useEffect } from "react";
 import type { JSX } from "react";
 import type { CapturedLog } from "../../proxy/schemas";
+import { extractStopReason } from "../../lib/stopReason";
 import {
   ConversationHeader,
   getConversationId,
   getGroupApiFormat,
   hasMixedApiFormat,
   type ConversationGroupData,
+  type ViewMode,
 } from "./ConversationHeader";
 import { LogEntry } from "./LogEntry";
+import { ThreadConnector } from "./ThreadConnector";
 import type { CacheTrendEntry } from "./cacheTrend";
 
 export type ConversationGroupProps = {
@@ -21,10 +24,10 @@ export type ConversationGroupProps = {
    * across the whole viewer. Each `LogEntry` looks up its own entry.
    */
   cacheTrends?: Map<number, CacheTrendEntry>;
-  /** Set of log ids currently marked for comparison. Forwarded to each `LogEntry`. */
-  selectedSet: Set<number>;
-  /** Toggle a log in/out of the comparison selection. */
-  onToggleSelect: (logId: number) => void;
+  /** Callback to open CompareDrawer with a log and its immediate predecessor. */
+  onCompareWithPrevious: (log: CapturedLog) => void;
+  /** Default display mode for new groups (from global toggle). */
+  defaultGroupViewMode?: ViewMode;
 };
 
 function computeStats(logs: CapturedLog[]): {
@@ -45,15 +48,25 @@ export const ConversationGroup = memo(function ({
   viewMode = "simple",
   strip,
   cacheTrends,
-  selectedSet,
-  onToggleSelect,
+  onCompareWithPrevious,
+  defaultGroupViewMode = "thread",
 }: ConversationGroupProps): JSX.Element {
   const [expanded, setExpanded] = useState(false);
+  const [groupViewMode, setGroupViewMode] = useState<ViewMode>(defaultGroupViewMode);
+
+  // Sync local view mode when global toggle changes (it only acts as default on mount otherwise)
+  useEffect(() => {
+    setGroupViewMode(defaultGroupViewMode);
+  }, [defaultGroupViewMode]);
 
   const stats = computeStats(group.logs);
   const startTime = group.logs[0]?.timestamp ?? new Date().toISOString();
   const endTime = group.logs[group.logs.length - 1]?.timestamp ?? new Date().toISOString();
   const mixed = hasMixedApiFormat(group.logs);
+  const isLoading = group.logs.some((log) => log.responseStatus === null);
+
+  // Pre-compute stop reasons for each log — used by ThreadConnector
+  const stopReasons = useMemo(() => group.logs.map((log) => extractStopReason(log)), [group.logs]);
 
   const displayId =
     group.conversationId.startsWith("PID:") || group.conversationId.includes("|")
@@ -75,9 +88,12 @@ export const ConversationGroup = memo(function ({
         expanded={expanded}
         onToggle={() => setExpanded(!expanded)}
         hideApiFormat={mixed}
+        isLoading={isLoading}
+        viewMode={groupViewMode}
+        onToggleViewMode={() => setGroupViewMode((prev) => (prev === "thread" ? "flat" : "thread"))}
       />
 
-      {expanded && (
+      {expanded && groupViewMode === "flat" && (
         <div className="pl-4 border-l-2 border-muted ml-3">
           {group.logs.map((log) => (
             <LogEntry
@@ -87,12 +103,36 @@ export const ConversationGroup = memo(function ({
               suppressApiFormatBadge={!mixed}
               strip={strip}
               cacheTrend={cacheTrends?.get(log.id) ?? null}
-              isSelected={selectedSet.has(log.id)}
-              onToggleSelect={onToggleSelect}
+              onCompareWithPrevious={() => onCompareWithPrevious(log)}
             />
           ))}
         </div>
       )}
+
+      {expanded && groupViewMode === "thread" && (
+        <div className="ml-3">
+          {group.logs.map((log, idx) => (
+            <div key={log.id} className="flex items-stretch">
+              <ThreadConnector
+                stopReason={stopReasons[idx] ?? null}
+                isPending={log.responseStatus === null}
+                isFirst={idx === 0}
+                isLast={idx === group.logs.length - 1}
+              />
+              <div className="flex-1 min-w-0 mb-2">
+                <LogEntry
+                  log={log}
+                  viewMode={viewMode}
+                  suppressApiFormatBadge={!mixed}
+                  strip={strip}
+                  cacheTrend={cacheTrends?.get(log.id) ?? null}
+                  onCompareWithPrevious={() => onCompareWithPrevious(log)}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 });

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

@@ -1,4 +1,12 @@
-import { ChevronDown, ChevronRight, Clock, MessageSquare, Zap } from "lucide-react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  GitBranch,
+  Loader2,
+  MessageSquare,
+  Zap,
+} from "lucide-react";
 import type { JSX } from "react";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
@@ -10,6 +18,8 @@ const API_FORMAT_LABELS: Record<"anthropic" | "openai" | "unknown", string> = {
   unknown: "Unknown",
 };
 
+export type ViewMode = "flat" | "thread";
+
 export type ConversationHeaderProps = {
   conversationId: string;
   startTime: string;
@@ -23,6 +33,13 @@ export type ConversationHeaderProps = {
   /** Hide the API format badge on the header (used when the group contains
    * mixed formats — the per-log badges are shown instead). */
   hideApiFormat?: boolean;
+  /** When true and the group is collapsed, show a spinner instead of the
+   * expand chevron to indicate an in-flight request inside the group. */
+  isLoading?: boolean;
+  /** Current display mode for this group (flat cards or threaded timeline). */
+  viewMode?: ViewMode;
+  /** Toggle between flat and thread display modes for this group. */
+  onToggleViewMode?: () => void;
 };
 
 function formatTimestamp(iso: string): string {
@@ -41,6 +58,9 @@ export function ConversationHeader({
   expanded,
   onToggle,
   hideApiFormat = false,
+  isLoading = false,
+  viewMode,
+  onToggleViewMode,
 }: ConversationHeaderProps): JSX.Element {
   return (
     <div
@@ -60,13 +80,39 @@ export function ConversationHeader({
         }
       }}
     >
-      {/* Expand chevron */}
+      {/* Expand chevron — shows spinner when collapsed and group has pending logs */}
       {expanded ? (
         <ChevronDown className="size-4 text-muted-foreground shrink-0" />
+      ) : isLoading ? (
+        <Loader2 className="size-4 animate-spin text-muted-foreground shrink-0" />
       ) : (
         <ChevronRight className="size-4 text-muted-foreground shrink-0" />
       )}
 
+      {/* Thread/flat view toggle — only shown when expanded */}
+      {expanded && onToggleViewMode !== undefined && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleViewMode();
+          }}
+          className={cn(
+            "px-1.5 py-0.5 rounded text-[10px] font-mono transition-colors shrink-0 cursor-pointer",
+            viewMode === "thread"
+              ? "bg-amber-500/15 text-amber-400 border border-amber-500/30"
+              : "bg-muted text-muted-foreground border border-border hover:text-foreground",
+          )}
+          title={
+            viewMode === "thread"
+              ? "Thread view — click for flat view"
+              : "Flat view — click for thread view"
+          }
+        >
+          <GitBranch className="size-3" />
+        </button>
+      )}
+
       {/* Conversation ID */}
       <span
         className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"