@tonyclaw/agent-inspector 2.1.13 → 2.1.15

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

@@ -32,17 +32,51 @@ import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import type { CacheTrend } from "./cacheTrend";
+import { ROW_CHEVRON_SLOT_CLASS } from "./ProviderLogoStack";
 
 const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
-  success: "bg-emerald-500/15 text-emerald-400 border-emerald-500/25",
-  client_error: "bg-amber-500/15 text-amber-400 border-amber-500/25",
-  server_error: "bg-rose-500/15 text-rose-400 border-rose-500/25",
-  pending: "bg-muted text-muted-foreground border-border",
+  success: "bg-emerald-400/[0.08] text-emerald-200 border-emerald-300/25",
+  client_error: "bg-amber-300/[0.10] text-amber-100 border-amber-300/30",
+  server_error: "bg-rose-400/[0.10] text-rose-100 border-rose-300/30",
+  pending: "bg-cyan-300/[0.08] text-cyan-100 border-cyan-300/25",
+};
+
+const STATUS_CUE_CLASSES: Record<
+  StatusCategory,
+  {
+    frame: string;
+    dot: string;
+    rail: string;
+  }
+> = {
+  success: {
+    frame: "border-emerald-300/20 bg-emerald-300/[0.06] text-emerald-100",
+    dot: "bg-emerald-300 shadow-[0_0_14px_rgba(110,231,183,0.8)]",
+    rail: "bg-emerald-300/45 shadow-[0_0_22px_rgba(110,231,183,0.28)]",
+  },
+  client_error: {
+    frame: "border-amber-300/25 bg-amber-300/[0.08] text-amber-100",
+    dot: "bg-amber-200 shadow-[0_0_14px_rgba(252,211,77,0.8)]",
+    rail: "bg-amber-300/50 shadow-[0_0_22px_rgba(252,211,77,0.28)]",
+  },
+  server_error: {
+    frame: "border-rose-300/25 bg-rose-300/[0.08] text-rose-100",
+    dot: "bg-rose-300 shadow-[0_0_14px_rgba(253,164,175,0.8)]",
+    rail: "bg-rose-300/50 shadow-[0_0_22px_rgba(253,164,175,0.28)]",
+  },
+  pending: {
+    frame: "border-cyan-300/25 bg-cyan-300/[0.08] text-cyan-100",
+    dot: "bg-cyan-200 shadow-[0_0_14px_rgba(103,232,249,0.8)]",
+    rail: "bg-cyan-300/50 shadow-[0_0_22px_rgba(103,232,249,0.28)]",
+  },
 };
 
 const HEADER_ACTION_BUTTON_CLASS =
   "size-8 border-white/10 bg-[#0a0d11] text-muted-foreground shadow-none hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100";
 
+const TELEMETRY_CHIP_CLASS =
+  "flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]";
+
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
   return `${(ms / 1000).toFixed(1)}s`;
@@ -53,6 +87,19 @@ function formatTokenRate(tokensPerSecond: number): string {
   return `${tokensPerSecond.toFixed(1)}/s`;
 }
 
+function statusCueLabel(category: StatusCategory, status: number | null): string {
+  switch (category) {
+    case "success":
+      return status === null ? "OK" : String(status);
+    case "client_error":
+      return status === null ? "WARN" : String(status);
+    case "server_error":
+      return status === null ? "FAIL" : String(status);
+    case "pending":
+      return "ROLL";
+  }
+}
+
 /**
  * Inline trend indicator: small arrow (green up / red down) plus the absolute
  * delta in compact form. Returns `null` when there is no trend to display.
@@ -109,6 +156,8 @@ export type HeaderTabActions = Record<string, HeaderTabAction | undefined>;
 
 export type LogEntryHeaderProps = {
   log: CapturedLog;
+  /** Human-facing ordinal inside the current session. Internal actions still use `log.id`. */
+  displayNumber: number;
   /** Number of messages in the request (supports both Anthropic and OpenAI formats). */
   messageCount?: number | null;
   /** Number of tools defined in the request (supports both Anthropic and OpenAI formats). */
@@ -138,6 +187,7 @@ export type LogEntryHeaderProps = {
 
 export const LogEntryHeader = memo(function ({
   log,
+  displayNumber,
   messageCount = null,
   toolCount = null,
   expanded,
@@ -169,6 +219,8 @@ export const LogEntryHeader = memo(function ({
     log.clientProjectFolder !== "";
   const hasClientCwd =
     log.clientCwd !== null && log.clientCwd !== undefined && log.clientCwd !== "";
+  const statusCue = STATUS_CUE_CLASSES[statusCategory];
+  const statusLabel = statusCueLabel(statusCategory, log.responseStatus);
 
   return (
     <TooltipProvider>
@@ -179,9 +231,11 @@ export const LogEntryHeader = memo(function ({
         data-nav-id={`log-${log.id}`}
         data-nav-action={expanded ? "collapse" : "expand"}
         className={cn(
-          "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 px-3 py-1.5 cursor-pointer transition-colors",
-          expanded ? "bg-[#0c1015]" : "hover:bg-muted/30",
-          "select-none",
+          "group/header relative isolate flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 overflow-hidden px-3 py-2 cursor-pointer transition-[background-color,border-color,box-shadow]",
+          expanded
+            ? "bg-[linear-gradient(90deg,#0f1720_0%,#090d12_50%,#07090d_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]"
+            : "bg-[#080b10] hover:bg-[#0b1016]",
+          "select-none before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-white/10",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
         )}
         onClick={onToggle}
@@ -192,51 +246,70 @@ export const LogEntryHeader = memo(function ({
           }
         }}
       >
+        <span
+          className={cn(
+            "absolute left-0 top-2 bottom-2 w-0.5 rounded-r-full transition-colors",
+            statusCue.rail,
+          )}
+          aria-hidden="true"
+        />
+        <span className={ROW_CHEVRON_SLOT_CLASS}>
+          {expanded ? (
+            <ChevronDown className="size-4 shrink-0" />
+          ) : (
+            <ChevronRight className="size-4 shrink-0" />
+          )}
+        </span>
+
         {/* Request ID */}
-        <span className="text-blue-400/80 font-mono text-xs font-semibold tabular-nums shrink-0">
-          #{log.id}
+        <span
+          className={cn(
+            "inline-flex h-8 shrink-0 items-center gap-2 rounded-md border px-2 font-mono shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+            statusCue.frame,
+          )}
+        >
+          <span className={cn("size-1.5 rounded-full", statusCue.dot)} aria-hidden="true" />
+          <span className="text-xs font-semibold tabular-nums" title={`Log ID ${String(log.id)}`}>
+            #{displayNumber}
+          </span>
         </span>
 
         {/* Request start time */}
-        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+        <span className="flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-muted-foreground text-xs shrink-0">
           <Clock className="size-3" />
           <span className="font-mono tabular-nums" title={log.timestamp}>
             {formatTimestamp(log.timestamp, timeDisplayFormat)}
           </span>
         </span>
 
-        {/* Model logo moved to the session/conversation header — per-log rows
-            no longer render the logo (sessions with many logs would show the
-            same provider logo dozens of times). */}
-
         {/* Response Status — only shown for non-200 or pending. Each category
             carries a distinct icon in addition to color so the meaning is
             legible without color perception. */}
-        {statusCategory !== "success" && (
-          <Badge
-            variant="outline"
-            className={cn(
-              "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums gap-1",
-              STATUS_BADGE_CLASSES[statusCategory],
-            )}
-          >
-            {statusCategory === "server_error" ? (
-              <OctagonAlert className="size-3" aria-label="Server error" />
-            ) : statusCategory === "client_error" ? (
-              <AlertTriangle className="size-3" aria-label="Client error" />
-            ) : statusCategory === "pending" ? (
-              <Loader2 className="size-3 animate-spin" aria-label="Pending" />
-            ) : null}
-            {log.responseStatus}
-          </Badge>
-        )}
+        <Badge
+          variant="outline"
+          className={cn(
+            "h-6 gap-1 rounded-md px-2 py-0 font-mono text-[10px] font-semibold uppercase tabular-nums shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+            STATUS_BADGE_CLASSES[statusCategory],
+          )}
+        >
+          {statusCategory === "success" ? (
+            <Check className="size-3" aria-label="Success" />
+          ) : statusCategory === "server_error" ? (
+            <OctagonAlert className="size-3" aria-label="Server error" />
+          ) : statusCategory === "client_error" ? (
+            <AlertTriangle className="size-3" aria-label="Client error" />
+          ) : (
+            <Loader2 className="size-3 animate-spin" aria-label="Pending" />
+          )}
+          {statusLabel}
+        </Badge>
 
         {warningCount > 0 && (
           <Tooltip>
             <TooltipTrigger asChild>
               <Badge
                 variant="outline"
-                className="text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums gap-1 bg-amber-500/15 text-amber-400 border-amber-500/25"
+                className="h-6 gap-1 rounded-md border-amber-300/30 bg-amber-300/[0.10] px-2 py-0 font-mono text-[10px] tabular-nums text-amber-100"
               >
                 <AlertTriangle className="size-3" aria-label="Tool schema warnings" />
                 {warningCount}
@@ -258,7 +331,12 @@ export const LogEntryHeader = memo(function ({
           (isSlowResponse ? (
             <Tooltip>
               <TooltipTrigger asChild>
-                <span className="flex items-center gap-1 text-xs text-amber-400 shrink-0">
+                <span
+                  className={cn(
+                    TELEMETRY_CHIP_CLASS,
+                    "shrink-0 border-amber-300/25 text-amber-200",
+                  )}
+                >
                   <Clock className="size-3" />
                   <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
                   <AlertTriangle className="size-3" aria-label="Slow response" />
@@ -270,7 +348,7 @@ export const LogEntryHeader = memo(function ({
               </TooltipContent>
             </Tooltip>
           ) : (
-            <span className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
               <Clock className="size-3" />
               <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
             </span>
@@ -280,7 +358,7 @@ export const LogEntryHeader = memo(function ({
         {log.streaming && firstChunkLabel !== null && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className="flex items-center gap-1 text-xs text-cyan-400 shrink-0">
+              <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
                 <Radio className="size-3" />
                 <span className="font-mono tabular-nums">first {firstChunkLabel}</span>
               </span>
@@ -291,7 +369,7 @@ export const LogEntryHeader = memo(function ({
         {log.streaming && tokenRateLabel !== null && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className="flex items-center gap-1 text-xs text-emerald-400 shrink-0">
+              <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-emerald-300")}>
                 <Gauge className="size-3" />
                 <span className="font-mono tabular-nums">{tokenRateLabel}</span>
               </span>
@@ -302,7 +380,7 @@ export const LogEntryHeader = memo(function ({
 
         {/* Token counts */}
         {hasTokens && (
-          <span className="flex min-w-0 items-center gap-1 text-xs sm:shrink-0">
+          <span className={cn(TELEMETRY_CHIP_CLASS, "min-w-0 sm:shrink-0")}>
             <Zap className="size-3 text-muted-foreground" />
             <span className="flex min-w-0 flex-wrap items-center gap-x-1 font-mono tabular-nums">
               <span
@@ -327,7 +405,7 @@ export const LogEntryHeader = memo(function ({
         )}
         {/* Cache tokens */}
         {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
-          <span className="flex items-center gap-1 text-xs shrink-0">
+          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0")}>
             <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
             <span className="font-mono tabular-nums text-emerald-400">
               KV Cache +{formatTokens(log.cacheCreationInputTokens)}
@@ -335,7 +413,7 @@ export const LogEntryHeader = memo(function ({
           </span>
         )}
         {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-          <span className="flex items-center gap-1 text-xs shrink-0">
+          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0")}>
             <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
             <span className="font-mono tabular-nums text-purple-400">
               KV Cache ~{formatTokens(log.cacheReadInputTokens)}
@@ -345,7 +423,7 @@ export const LogEntryHeader = memo(function ({
 
         {/* Message count */}
         {messageCount !== null && (
-          <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
             <MessageSquare className="size-3" />
             <span className="font-mono tabular-nums">{messageCount}</span>
           </span>
@@ -353,7 +431,7 @@ export const LogEntryHeader = memo(function ({
 
         {/* Tool count */}
         {toolCount !== null && (
-          <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
             <Wrench className="size-3" />
             <span className="font-mono tabular-nums">{toolCount}</span>
           </span>
@@ -362,7 +440,7 @@ export const LogEntryHeader = memo(function ({
         {/* Origin */}
         {log.origin !== null && (
           <span
-            className="hidden xl:flex items-center gap-1 text-muted-foreground text-xs shrink-0"
+            className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-muted-foreground xl:flex")}
             title={`Origin: ${log.origin}`}
           >
             <Globe className="size-3" />
@@ -376,7 +454,7 @@ export const LogEntryHeader = memo(function ({
         {(hasClientPid || hasClientProjectFolder) && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className="hidden xl:flex items-center gap-1 text-purple-400/80 text-xs shrink-0">
+              <span className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex")}>
                 <FileTerminal className="size-3" />
                 {hasClientProjectFolder ? (
                   <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>
@@ -537,13 +615,6 @@ export const LogEntryHeader = memo(function ({
             )}
           </span>
         )}
-
-        {/* Expand chevron */}
-        {expanded ? (
-          <ChevronDown className="size-4 text-muted-foreground shrink-0" />
-        ) : (
-          <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-        )}
       </div>
     </TooltipProvider>
   );

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

@@ -0,0 +1,60 @@
+import type { JSX } from "react";
+import { cn } from "../../lib/utils";
+import { ProviderLogo, type Provider } from "../providers/ProviderLogo";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+
+const MAX_VISIBLE_LOGOS = 3;
+
+export const ROW_CHEVRON_SLOT_CLASS =
+  "flex h-8 w-5 shrink-0 items-center justify-center text-muted-foreground";
+
+export type ProviderLogoStackItem = {
+  provider: Provider;
+  tooltip: string;
+};
+
+export function ProviderLogoStack({
+  items,
+  ariaLabel,
+  className,
+}: {
+  items: readonly ProviderLogoStackItem[];
+  ariaLabel: string;
+  className?: string;
+}): JSX.Element {
+  if (items.length === 0) {
+    return (
+      <span className={cn("flex h-8 w-12 shrink-0 items-center", className)} aria-hidden="true" />
+    );
+  }
+
+  const visibleItems = items.slice(0, MAX_VISIBLE_LOGOS);
+  const overflowCount = items.length - visibleItems.length;
+
+  return (
+    <TooltipProvider delayDuration={150}>
+      <span className={cn("flex h-8 w-12 shrink-0 items-center", className)} aria-label={ariaLabel}>
+        {visibleItems.map((item, index) => (
+          <Tooltip key={`${item.provider}-${String(index)}`}>
+            <TooltipTrigger asChild>
+              <span
+                className={cn(
+                  "inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-white/10 bg-black/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+                  index > 0 && "-ml-2",
+                )}
+              >
+                <ProviderLogo provider={item.provider} className="size-4" />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>{item.tooltip}</TooltipContent>
+          </Tooltip>
+        ))}
+        {overflowCount > 0 && (
+          <span className="-ml-2 inline-flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md border border-white/10 bg-black/40 px-1 font-mono text-[10px] text-muted-foreground">
+            +{overflowCount}
+          </span>
+        )}
+      </span>
+    </TooltipProvider>
+  );
+}

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

@@ -35,6 +35,7 @@ type ReplayResult = z.infer<typeof ReplayResultSchema>;
 
 type ReplayDialogProps = {
   log: CapturedLog;
+  displayNumber: number;
   open: boolean;
   onOpenChange: (open: boolean) => void;
 };
@@ -159,7 +160,12 @@ function ReplayComparisonTable({
   );
 }
 
-export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JSX.Element {
+export function ReplayDialog({
+  log,
+  displayNumber,
+  open,
+  onOpenChange,
+}: ReplayDialogProps): JSX.Element {
   const { providers } = useProviders();
   const originalBody = log.rawRequestBody ?? "{}";
   const [modifiedBody, setModifiedBody] = useState<string>(() => {
@@ -310,7 +316,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <RotateCcw className="size-4" />
-            Replay Request #{log.id}
+            <span title={`Log ID ${String(log.id)}`}>Replay Request #{displayNumber}</span>
           </DialogTitle>
         </DialogHeader>
 

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

@@ -13,12 +13,11 @@ import {
   Terminal,
   Wrench,
 } from "lucide-react";
-import { memo, useMemo, useState, type JSX } from "react";
+import { memo, Suspense, useMemo, useState, type JSX } from "react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Collapsible, CollapsibleContent } from "../ui/collapsible";
-import { JsonViewer } from "../ui/json-viewer";
 import { safeJsonValue } from "../ui/json-viewer-bulk";
 import { ScrollArea } from "../ui/scroll-area";
 import type {
@@ -26,6 +25,7 @@ import type {
   RequestToolDefinition,
   RequestToolsSummary,
 } from "./requestTools";
+import { LazyJsonViewer } from "./lazy";
 import { useCopyFeedback } from "./useCopyFeedback";
 
 type RequestToolsProps = {
@@ -152,17 +152,23 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
           </button>
         </div>
         <CollapsibleContent>
-          <div className="space-y-2 border-t border-white/10 bg-white/[0.02] px-2.5 py-2">
-            {tool.description !== null && (
-              <p className="text-xs leading-relaxed text-muted-foreground">{tool.description}</p>
-            )}
-            <RequiredParameters names={tool.requiredParameters} />
-            {tool.schema !== null && (
-              <ScrollArea className="max-h-64 rounded-md border border-white/10 bg-[#06080b] p-2">
-                <JsonViewer data={safeJsonValue(tool.schema)} defaultExpandDepth={0} />
-              </ScrollArea>
-            )}
-          </div>
+          {open && (
+            <div className="space-y-2 border-t border-white/10 bg-white/[0.02] px-2.5 py-2">
+              {tool.description !== null && (
+                <p className="text-xs leading-relaxed text-muted-foreground">{tool.description}</p>
+              )}
+              <RequiredParameters names={tool.requiredParameters} />
+              {tool.schema !== null && (
+                <ScrollArea className="max-h-64 rounded-md border border-white/10 bg-[#06080b] p-2">
+                  <Suspense
+                    fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}
+                  >
+                    <LazyJsonViewer data={safeJsonValue(tool.schema)} defaultExpandDepth={0} />
+                  </Suspense>
+                </ScrollArea>
+              )}
+            </div>
+          )}
         </CollapsibleContent>
       </div>
     </Collapsible>

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

@@ -1,9 +1,9 @@
-import { memo, useState, useEffect, useMemo, type JSX } from "react";
+import { memo, Suspense, 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 "../../contracts";
+import { LazyJsonViewer } from "./lazy";
 
 export type StreamingChunkSequenceProps = {
   logId: number;
@@ -140,7 +140,13 @@ export const StreamingChunkSequence = memo(function StreamingChunkSequence({
                           {chunk.type}
                         </span>
                       </div>
-                      <JsonViewer data={chunk} defaultExpandDepth={0} showCopy />
+                      <Suspense
+                        fallback={
+                          <div className="text-xs text-muted-foreground">Loading JSON...</div>
+                        }
+                      >
+                        <LazyJsonViewer data={chunk} defaultExpandDepth={0} showCopy />
+                      </Suspense>
                     </div>
                   ))}
                 </div>

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

@@ -1,6 +1,6 @@
 import { type JSX, useMemo } from "react";
 import { cn } from "../../lib/utils";
-import type { StopReason } from "../../lib/stopReason";
+import { isTurnBoundary, type StopReason } from "../../lib/stopReason";
 import { getCrabVariant, getInteriorCrabVariant } from "../ui/crab-variants";
 
 export type ThreadConnectorProps = {
@@ -18,10 +18,24 @@ export type ThreadConnectorProps = {
   onToggle?: () => void;
 };
 
+function boundaryTitle(stopReason: StopReason): string {
+  switch (stopReason) {
+    case "end_turn":
+      return "End of Turn (Anthropic)";
+    case "stop":
+      return "End of Turn (OpenAI)";
+    case "length":
+      return "End of Turn (length limit)";
+    case "tool_use":
+    case null:
+      return "End of Turn";
+  }
+}
+
 /**
  * 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
+ * centre-line matches the LogEntry display number regardless of the
  * root font-size.  The bottom spacer is flex-1 so the outgoing
  * line adapts to whatever height the LogEntry occupies.
  */
@@ -35,7 +49,7 @@ export function ThreadConnector({
   collapsible = false,
   onToggle,
 }: ThreadConnectorProps): JSX.Element {
-  const isBoundary = stopReason === "end_turn" || stopReason === "stop";
+  const isBoundary = isTurnBoundary(stopReason);
   const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
   const isRunning = isPending && !isBoundary;
   const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
@@ -84,10 +98,7 @@ export function ThreadConnector({
           />
         </span>
       ) : isBoundary ? (
-        <span
-          title={stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)"}
-          {...interactiveProps}
-        >
+        <span title={boundaryTitle(stopReason)} {...interactiveProps}>
           <Crab
             className={cn(
               "size-3.5 text-amber-400",