@tonyclaw/llm-inspector 1.14.7 → 1.14.9

package/src/components/providers/ProviderCard.tsx

@@ -1,5 +1,6 @@
 import { type JSX, type ReactNode, useCallback, useRef, useState } from "react";
 import { Button } from "../ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import {
   Eye,
   EyeOff,
@@ -109,16 +110,30 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
     }
     if (result.cacheCreationInputTokens !== undefined && result.cacheCreationInputTokens > 0) {
       tokenParts.push(
-        <span key="cache-create" className="font-mono tabular-nums text-emerald-400">
-          +{result.cacheCreationInputTokens} cache
-        </span>,
+        <TooltipProvider key="cache-create">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="font-mono tabular-nums text-emerald-400">
+                +{result.cacheCreationInputTokens} cache
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Tokens cached for reuse, reducing future API cost</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>,
       );
     }
     if (result.cacheReadInputTokens !== undefined && result.cacheReadInputTokens > 0) {
       tokenParts.push(
-        <span key="cache-read" className="font-mono tabular-nums text-purple-400">
-          ~{result.cacheReadInputTokens} cached
-        </span>,
+        <TooltipProvider key="cache-read">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="font-mono tabular-nums text-purple-400">
+                ~{result.cacheReadInputTokens} cached
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Tokens served from cache, reducing API cost</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>,
       );
     }
     const displayTokens: ReactNode[] = [];
@@ -127,11 +142,20 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
       displayTokens.push(tokenParts[i]);
     }
     return (
-      <div className="flex items-center gap-1 text-xs text-green-600 shrink-0">
-        <CheckCircle className="size-3" />
-        <span>Connected</span>
-        {tokenParts.length > 0 && <span className="text-muted-foreground">({displayTokens})</span>}
-      </div>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex items-center gap-1 text-xs text-green-600 shrink-0">
+              <CheckCircle className="size-3" />
+              <span>Connected</span>
+              {tokenParts.length > 0 && (
+                <span className="text-muted-foreground">({displayTokens})</span>
+              )}
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>Connection test passed</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     );
   }
 
@@ -145,16 +169,31 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
     <div className="flex flex-col gap-1 shrink-0">
       <div className="flex items-center gap-1 text-xs text-red-600 max-w-[200px]">
         {getErrorIcon(errorType)}
-        <span className="truncate">{errorMessage}</span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="truncate">{errorMessage}</span>
+            </TooltipTrigger>
+            <TooltipContent>Connection test failed</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
         {errorDetails !== undefined && (
-          <button
-            type="button"
-            onClick={() => setShowDetails(!showDetails)}
-            className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
-            title={showDetails ? "Hide details" : "Show details"}
-          >
-            {showDetails ? <EyeOff className="size-3" /> : <Eye className="size-3" />}
-          </button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => setShowDetails(!showDetails)}
+                  className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {showDetails ? <EyeOff className="size-3" /> : <Eye className="size-3" />}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {showDetails ? "Hide error details" : "Show detailed error information"}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         )}
       </div>
       {showDetails && errorDetails !== undefined && (
@@ -243,14 +282,28 @@ export function ProviderCard({
         <div className="flex items-center gap-2 min-w-0">
           <span className="font-medium truncate">{provider.name}</span>
           {provider.source === "company" && (
-            <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 shrink-0">
-              公司
-            </span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 shrink-0">
+                    公司
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>Company-provided API key</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           )}
           {provider.source === "personal" && (
-            <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 shrink-0">
-              个人
-            </span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 shrink-0">
+                    个人
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>Your personal API key</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           )}
         </div>
         {docsUrl !== undefined && (

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,18 @@
-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 { cn } from "../../lib/utils";
 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 +25,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 +49,38 @@ 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]);
+
+  // Compute turn indices for alternating background colours
+  const turnIndices = useMemo(() => {
+    const indices: number[] = [];
+    let turn = 0;
+    for (let i = 0; i < stopReasons.length; i++) {
+      if (i > 0 && (stopReasons[i - 1] === "end_turn" || stopReasons[i - 1] === "stop")) {
+        turn++;
+      }
+      indices.push(turn);
+    }
+    return indices;
+  }, [stopReasons]);
 
   const displayId =
     group.conversationId.startsWith("PID:") || group.conversationId.includes("|")
@@ -75,24 +102,60 @@ export const ConversationGroup = memo(function ({
         expanded={expanded}
         onToggle={() => setExpanded(!expanded)}
         hideApiFormat={mixed}
+        isLoading={isLoading}
+        userAgent={group.logs[0]?.userAgent ?? null}
+        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
               key={log.id}
               log={log}
               viewMode={viewMode}
-              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) => {
+            const isTurnStart =
+              idx === 0 || stopReasons[idx - 1] === "end_turn" || stopReasons[idx - 1] === "stop";
+            return (
+              <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}
+                  isTurnStart={isTurnStart}
+                />
+                <div
+                  className={cn(
+                    "flex-1 min-w-0 mb-2 rounded-lg",
+                    (turnIndices[idx] ?? 0) % 2 === 0 ? "bg-muted/10" : "bg-muted/25",
+                  )}
+                >
+                  <LogEntry
+                    log={log}
+                    viewMode={viewMode}
+                    strip={strip}
+                    cacheTrend={cacheTrends?.get(log.id) ?? null}
+                    onCompareWithPrevious={() => onCompareWithPrevious(log)}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 });