@tonyclaw/llm-inspector 1.14.7 → 1.14.8

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

@@ -5,6 +5,7 @@ import { cn } from "../../lib/utils";
 import { type CapturedLog, parseRequest } from "../../proxy/schemas";
 import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
 import { Button } from "../ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import { JsonViewerFromString } from "../ui/json-viewer";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { computeHeadersDiff, computeRequestDiff, DiffView } from "./diff";
@@ -31,10 +32,8 @@ export type LogEntryProps = {
    * `null` (or absent) means the header should render with no arrows.
    */
   cacheTrend?: CacheTrendEntry | null;
-  /** Whether this log is currently marked for comparison. */
-  isSelected?: boolean;
-  /** Toggle this log in/out of the comparison selection. */
-  onToggleSelect?: (logId: number) => void;
+  /** Callback to open CompareDrawer with this log and its immediate predecessor. */
+  onCompareWithPrevious?: () => void;
 };
 
 /**
@@ -118,21 +117,29 @@ function DiffToggleButton({
   onClick: (e: React.MouseEvent) => void;
 }): JSX.Element {
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-pressed={active}
-      className={cn(
-        "flex items-center gap-1.5 text-xs px-2 py-1 rounded transition-colors",
-        active
-          ? "bg-primary/10 text-primary"
-          : "text-muted-foreground hover:text-foreground hover:bg-muted",
-      )}
-      title={active ? "Hide diff with raw" : "Diff this view against the raw version"}
-    >
-      <GitCompareArrows className="size-3" />
-      {active ? "Showing diff" : "Diff with Raw"}
-    </button>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            onClick={onClick}
+            aria-pressed={active}
+            className={cn(
+              "flex items-center gap-1.5 text-xs px-2 py-1 rounded transition-colors",
+              active
+                ? "bg-primary/10 text-primary"
+                : "text-muted-foreground hover:text-foreground hover:bg-muted",
+            )}
+          >
+            <GitCompareArrows className="size-3" />
+            {active ? "Showing diff" : "Diff with Raw"}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {active ? "Hide diff view" : "Compare proxy output against the original raw version"}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }
 
@@ -142,8 +149,7 @@ export const LogEntry = memo(function ({
   suppressApiFormatBadge = false,
   strip,
   cacheTrend = null,
-  isSelected = false,
-  onToggleSelect,
+  onCompareWithPrevious,
 }: LogEntryProps): JSX.Element {
   const [expanded, setExpanded] = useState<boolean>(false);
   const [requestCopied, setRequestCopied] = useState<boolean>(false);
@@ -199,12 +205,7 @@ export const LogEntry = memo(function ({
 
   return (
     <>
-      <div
-        className={cn(
-          "border border-border rounded-lg mb-3 overflow-hidden",
-          isSelected && "border-l-2 border-l-amber-400",
-        )}
-      >
+      <div className="border border-border rounded-lg mb-3 overflow-hidden">
         <LogEntryHeader
           log={log}
           parsedRequest={parsedRequest}
@@ -212,21 +213,61 @@ export const LogEntry = memo(function ({
           onToggle={() => setExpanded(!expanded)}
           suppressApiFormatBadge={suppressApiFormatBadge}
           cacheTrend={cacheTrend}
-          isSelected={isSelected}
-          onToggleSelect={onToggleSelect}
         />
 
         {expanded && (
           <div onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
             <Tabs defaultValue="request">
               <TabsList className="mx-4 mt-2">
-                {viewMode === "full" && <TabsTrigger value="raw-headers">Raw Headers</TabsTrigger>}
-                {viewMode === "full" && <TabsTrigger value="headers">Headers</TabsTrigger>}
+                {viewMode === "full" && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <TabsTrigger value="raw-headers">Raw Headers</TabsTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        HTTP headers received from the upstream provider
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+                {viewMode === "full" && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <TabsTrigger value="headers">Headers</TabsTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Request and response headers sent and received
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
                 {shouldShowRawRequestTab(log.apiFormat, viewMode, strip) && (
-                  <TabsTrigger value="raw-request">Raw Request</TabsTrigger>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <TabsTrigger value="raw-request">Raw Request</TabsTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Exact HTTP request sent to the upstream provider
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 )}
                 <TabsTrigger value="request">Request</TabsTrigger>
-                {viewMode === "full" && <TabsTrigger value="raw">Raw Response</TabsTrigger>}
+                {viewMode === "full" && (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <TabsTrigger value="raw">Raw Response</TabsTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        Exact HTTP response from the upstream provider
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
                 <TabsTrigger value="parsed">Response</TabsTrigger>
               </TabsList>
 
@@ -267,18 +308,48 @@ export const LogEntry = memo(function ({
                         }}
                       />
                     )}
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="h-7 text-xs"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setReplayOpen(true);
-                      }}
-                    >
-                      <RotateCcw className="size-3 mr-1" />
-                      Replay
-                    </Button>
+                    {onCompareWithPrevious !== undefined && (
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="h-7 text-xs"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                onCompareWithPrevious();
+                              }}
+                            >
+                              <GitCompareArrows className="size-3 mr-1" />
+                              Diff with Previous
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            Compare this request with the immediately preceding one
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    )}
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="h-7 text-xs"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setReplayOpen(true);
+                            }}
+                          >
+                            <RotateCcw className="size-3 mr-1" />
+                            Replay
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Re-send this request to the provider</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
                     <CopyButton
                       text={displayedRequestBody}
                       label="Copy Request"

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

@@ -1,7 +1,6 @@
 import {
   ArrowDown,
   ArrowUp,
-  Check,
   ChevronDown,
   ChevronRight,
   Clock,
@@ -20,6 +19,7 @@ import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../
 import type { CapturedLog, InspectorRequest } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
 import { ProviderLogo, detectProvider } from "../providers/ProviderLogo";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import type { CacheTrend } from "./cacheTrend";
 
 function formatElapsed(ms: number): string {
@@ -67,10 +67,6 @@ export type LogEntryHeaderProps = {
    * the corresponding cache span renders as it did before — no arrow.
    */
   cacheTrend?: { creation: CacheTrend | null; read: CacheTrend | null } | null;
-  /** Whether this log is currently marked for comparison. */
-  isSelected?: boolean;
-  /** Toggle this log in/out of the comparison selection. */
-  onToggleSelect?: (logId: number) => void;
 };
 
 export const LogEntryHeader = memo(function ({
@@ -80,8 +76,6 @@ export const LogEntryHeader = memo(function ({
   onToggle,
   suppressApiFormatBadge = false,
   cacheTrend = null,
-  isSelected = false,
-  onToggleSelect,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
 
@@ -111,40 +105,23 @@ export const LogEntryHeader = memo(function ({
         }
       }}
     >
-      {/* Selection checkbox (for log-request comparison) */}
-      {onToggleSelect !== undefined && (
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onToggleSelect(log.id);
-          }}
-          aria-label={isSelected ? "Deselect for comparison" : "Select for comparison"}
-          aria-pressed={isSelected}
-          className={cn(
-            "shrink-0 size-4 rounded-sm border flex items-center justify-center transition-colors cursor-pointer",
-            isSelected
-              ? "bg-amber-400 border-amber-400 text-amber-950"
-              : "border-muted-foreground/40 hover:border-amber-400 hover:bg-amber-400/10",
-          )}
-        >
-          {isSelected && <Check className="size-3" strokeWidth={3} />}
-        </button>
-      )}
-
       {/* Request ID */}
       <span className="text-blue-400/80 font-mono text-xs font-semibold tabular-nums shrink-0">
         #{log.id}
       </span>
 
-      {/* Model */}
+      {/* Model — logo icon only, model name in tooltip */}
       {log.model !== null && (
-        <>
-          <ProviderLogo provider={detectProvider(log.model)} className="size-4 shrink-0" />
-          <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-mono">
-            {log.model}
-          </Badge>
-        </>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="shrink-0">
+                <ProviderLogo provider={detectProvider(log.model)} className="size-4" />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>{log.model}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
 
       {/* API Format Badge */}
@@ -220,36 +197,64 @@ export const LogEntryHeader = memo(function ({
       )}
       {/* Cache tokens */}
       {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
-        <span className="flex items-center gap-1 text-xs shrink-0">
-          <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
-          <span className="font-mono tabular-nums text-emerald-400">
-            Cache +{formatTokens(log.cacheCreationInputTokens)}
-          </span>
-        </span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-xs shrink-0">
+                <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
+                <span className="font-mono tabular-nums text-emerald-400">
+                  Cache +{formatTokens(log.cacheCreationInputTokens)}
+                </span>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Tokens cached for reuse, reducing future API cost</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
       {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-        <span className="flex items-center gap-1 text-xs shrink-0">
-          <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
-          <span className="font-mono tabular-nums text-purple-400">
-            Cache ~{formatTokens(log.cacheReadInputTokens)}
-          </span>
-        </span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-xs shrink-0">
+                <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
+                <span className="font-mono tabular-nums text-purple-400">
+                  Cache ~{formatTokens(log.cacheReadInputTokens)}
+                </span>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Tokens served from cache, reducing API cost</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
 
       {/* Message count */}
       {messageCount !== null && (
-        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
-          <MessageSquare className="size-3" />
-          <span className="font-mono tabular-nums">{messageCount}</span>
-        </span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+                <MessageSquare className="size-3" />
+                <span className="font-mono tabular-nums">{messageCount}</span>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Number of messages in the conversation</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
 
       {/* Tool count */}
       {toolCount !== null && (
-        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
-          <Wrench className="size-3" />
-          <span className="font-mono tabular-nums">{toolCount}</span>
-        </span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+                <Wrench className="size-3" />
+                <span className="font-mono tabular-nums">{toolCount}</span>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Number of tools defined in the request</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
 
       {/* Origin */}
@@ -280,25 +285,38 @@ export const LogEntryHeader = memo(function ({
 
       {/* Client info (PID + project folder) */}
       {(log.clientPid !== null || log.clientProjectFolder !== null) && (
-        <span
-          className="flex items-center gap-1 text-purple-400/80 text-xs shrink-0"
-          title={
-            log.clientCwd !== null
-              ? `PID: ${log.clientPid ?? "?"} | CWD: ${log.clientCwd}`
-              : `PID: ${log.clientPid ?? "?"}`
-          }
-        >
-          <FileTerminal className="size-3" />
-          {log.clientProjectFolder !== null ? (
-            <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>
-          ) : (
-            <span className="font-mono tabular-nums">PID {log.clientPid}</span>
-          )}
-        </span>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="flex items-center gap-1 text-purple-400/80 text-xs shrink-0">
+                <FileTerminal className="size-3" />
+                {log.clientProjectFolder !== null ? (
+                  <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>
+                ) : (
+                  <span className="font-mono tabular-nums">PID {log.clientPid}</span>
+                )}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              {log.clientCwd !== null
+                ? `PID: ${log.clientPid ?? "?"}  CWD: ${log.clientCwd}`
+                : `Process ID: ${log.clientPid ?? "?"}`}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
 
       {/* Streaming indicator */}
-      {log.streaming && <Radio className="size-3 text-muted-foreground/60 shrink-0" />}
+      {log.streaming && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Radio className="size-3 text-muted-foreground/60 shrink-0" />
+            </TooltipTrigger>
+            <TooltipContent>Request used SSE streaming</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
 
       {/* Spacer */}
       <span className="flex-1 min-w-0" />

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

@@ -3,6 +3,7 @@ import type { JSX } from "react";
 import { useState } from "react";
 import { z } from "zod";
 import { Button } from "../ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { ResponseView } from "./ResponseView";
@@ -92,12 +93,21 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
           <TabsContent value="modified" className="space-y-4">
             <div>
               <label className="text-sm font-medium mb-2 block">Request Body (JSON)</label>
-              <textarea
-                className="w-full h-64 p-3 font-mono text-xs bg-muted rounded-md border border-input resize-none focus:outline-none focus:ring-2 focus:ring-ring"
-                value={modifiedBody}
-                onChange={(e) => setModifiedBody(e.target.value)}
-                spellCheck={false}
-              />
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <textarea
+                      className="w-full h-64 p-3 font-mono text-xs bg-muted rounded-md border border-input resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                      value={modifiedBody}
+                      onChange={(e) => setModifiedBody(e.target.value)}
+                      spellCheck={false}
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Edit the request body before re-sending to the provider
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </div>
 
             {error !== null && error !== "" && (

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo, type JSX } from "react";
 import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
 import { Badge } from "../ui/badge";
 import { JsonViewer } from "../ui/json-viewer";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import type { StreamingChunk } from "../../proxy/schemas";
 
 export type StreamingChunkSequenceProps = {
@@ -153,22 +154,29 @@ export function StreamingChunkSequence({
 
   return (
     <div className="space-y-1">
-      <button
-        type="button"
-        className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
-        onClick={() => setContainerExpanded((v) => !v)}
-      >
-        {containerExpanded ? (
-          <ChevronDown className="size-3" />
-        ) : (
-          <ChevronRight className="size-3" />
-        )}
-        <span>Raw SSE Events</span>
-        <Badge variant="outline" className="text-[9px] px-1 py-0 h-4 font-mono ml-1">
-          {logId}
-          {truncated === true ? "+" : ""}
-        </Badge>
-      </button>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+              onClick={() => setContainerExpanded((v) => !v)}
+            >
+              {containerExpanded ? (
+                <ChevronDown className="size-3" />
+              ) : (
+                <ChevronRight className="size-3" />
+              )}
+              <span>Raw SSE Events</span>
+              <Badge variant="outline" className="text-[9px] px-1 py-0 h-4 font-mono ml-1">
+                {logId}
+                {truncated === true ? "+" : ""}
+              </Badge>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>Server-Sent Events streaming chunks from the provider</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
       {containerExpanded === true ? (
         <div className="rounded-md border border-border bg-muted/20 overflow-auto max-h-64">

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

@@ -0,0 +1,104 @@
+import type { JSX } from "react";
+import { cn } from "../../lib/utils";
+import type { StopReason } from "../../lib/stopReason";
+
+export type ThreadConnectorProps = {
+  /** The stop reason extracted from this log entry's response. */
+  stopReason: StopReason;
+  /** True when the response is still in-flight (responseStatus === null). */
+  isPending: boolean;
+  /** True when this is the first entry in the group. */
+  isFirst: boolean;
+  /** True when this is the last entry in the group. */
+  isLast: boolean;
+};
+
+/**
+ * Renders the vertical timeline connector on the left side of a log entry
+ * in thread view. A continuous line runs through intermediate entries, with:
+ * - Line starts from the top for the first entry
+ * - Line continues through intermediate entries
+ * - Line ends at a turn-boundary dot/cap when stop_reason is end_turn/stop
+ * - Dimmed/dashed line for pending (in-flight) entries
+ * - A solid dot marks turn boundaries
+ */
+export function ThreadConnector({
+  stopReason,
+  isPending,
+  isFirst,
+  isLast,
+}: ThreadConnectorProps): JSX.Element {
+  // Turn boundary: "end_turn" for Anthropic, "stop" for OpenAI
+  const isBoundary = stopReason === "end_turn" || stopReason === "stop";
+  // Tool use: the turn continues
+  const isToolUse = stopReason === "tool_use";
+
+  // Compute classes for each segment of the connector:
+  // - top half line (from previous entry down to this entry's top)
+  // - center dot/circle (this entry's response marker)
+  // - bottom half line (from this entry's bottom down to the next entry)
+
+  const lineClass = cn(
+    "w-0.5 bg-muted-foreground/30",
+    isPending && "border-dashed bg-transparent border-l-2 border-muted-foreground/20",
+  );
+
+  return (
+    <div className="flex items-stretch h-full w-6 shrink-0 relative">
+      {/* Top line segment */}
+      <div className="absolute left-1/2 -translate-x-1/2 w-0.5 top-0 flex flex-col items-center">
+        {!isFirst && (
+          <div
+            className={cn("w-0.5 grow", "bg-muted-foreground/30", "h-4")}
+            style={{ minHeight: "0.5rem" }}
+          />
+        )}
+        {isFirst && <div className="h-4" />}
+      </div>
+
+      {/* Center marker */}
+      <div className="absolute left-1/2 -translate-x-1/2 top-4 flex items-center justify-center z-10">
+        {isBoundary ? (
+          <div
+            className={cn(
+              "size-2.5 rounded-full border-2",
+              "bg-background border-amber-400",
+              "shadow-[0_0_6px_rgba(251,191,36,0.4)]",
+            )}
+            title={stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)"}
+          />
+        ) : isToolUse ? (
+          <div
+            className="size-2 rounded-full bg-muted-foreground/25"
+            title="Tool Use — turn continues"
+          />
+        ) : isPending ? (
+          <div
+            className="size-2.5 rounded-full border-2 border-dashed border-muted-foreground/30 animate-pulse"
+            title="Response pending"
+          />
+        ) : (
+          <div className="size-1.5 rounded-full bg-muted-foreground/30" />
+        )}
+      </div>
+
+      {/* Bottom line segment */}
+      <div
+        className="absolute left-1/2 -translate-x-1/2 w-0.5 top-4 flex flex-col items-center"
+        style={{ bottom: 0 }}
+      >
+        {!isBoundary && (
+          <div
+            className={cn(
+              "w-0.5 flex-1",
+              isPending
+                ? "border-dashed bg-transparent border-l-2 border-muted-foreground/20"
+                : "bg-muted-foreground/30",
+            )}
+          />
+        )}
+        {isBoundary && <div className="w-0.5 h-4 bg-muted-foreground/10" />}
+      </div>
+    </div>
+  );
+}

package/src/components/proxy-viewer/index.ts

@@ -4,5 +4,6 @@ export {
   getConversationId,
   groupLogsByConversation,
 } from "./ConversationHeader";
-export type { ConversationGroupData } from "./ConversationHeader";
+export type { ConversationGroupData, ViewMode } from "./ConversationHeader";
 export { LogEntry } from "./LogEntry";
+export { ThreadConnector } from "./ThreadConnector";