@tonyclaw/llm-inspector 1.16.3 → 1.16.5

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

@@ -1,38 +1,46 @@
 import {
+  AlertTriangle,
   ArrowDown,
   ArrowUp,
+  Check,
   ChevronDown,
   ChevronRight,
+  ChevronsDown,
+  ChevronsUp,
   Clock,
+  Copy,
   FileTerminal,
   Globe,
   Loader2,
   MessageSquare,
+  OctagonAlert,
   Radio,
+  RotateCcw,
   Wrench,
   Zap,
 } from "lucide-react";
-import type { JSX } from "react";
+import type { JSX, MouseEvent } from "react";
 import { memo, useMemo } from "react";
 import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
 import { ProviderLogo, detectProvider } from "../providers/ProviderLogo";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import type { CacheTrend } from "./cacheTrend";
 
-function formatElapsed(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
 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: "",
+  server_error: "bg-rose-500/15 text-rose-400 border-rose-500/25",
   pending: "bg-muted text-muted-foreground border-border",
 };
 
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
 /**
  * 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.
@@ -68,6 +76,21 @@ export type LogEntryHeaderProps = {
    * the corresponding cache span renders as it did before — no arrow.
    */
   cacheTrend?: { creation: CacheTrend | null; read: CacheTrend | null } | null;
+  /** Re-send this request to the provider. Rendered in the header row when
+   *  `expanded` is true. */
+  onReplay?: () => void;
+  /** Copy the request body to the clipboard. Omit to hide the button. */
+  onCopyRequest?: (event: MouseEvent) => void;
+  /** Whether the latest copy of the request body succeeded (shows "Copied!"). */
+  requestCopied?: boolean;
+  /** Toggle the JSON bulk-expansion state for the request body. */
+  onToggleRequestExpansion?: () => void;
+  /** Current state of the JSON bulk-expansion button. `null` means the
+   *  request body is not JSON, so the button is hidden. */
+  requestExpansionState?: {
+    isExpanded: boolean;
+    isPending: boolean;
+  } | null;
 };
 
 export const LogEntryHeader = memo(function ({
@@ -78,6 +101,11 @@ export const LogEntryHeader = memo(function ({
   onToggle,
   responseToolNames = null,
   cacheTrend = null,
+  onReplay,
+  onCopyRequest,
+  requestCopied = false,
+  onToggleRequestExpansion,
+  requestExpansionState = null,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
 
@@ -89,10 +117,13 @@ export const LogEntryHeader = memo(function ({
       <div
         role="button"
         tabIndex={0}
+        data-nav-id={`log-${log.id}`}
+        data-nav-action={expanded ? "collapse" : "expand"}
         className={cn(
           "flex items-center gap-2 px-3 py-1 cursor-pointer transition-colors",
           "hover:bg-muted/50",
           "select-none",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
         )}
         onClick={onToggle}
         onKeyDown={(e) => {
@@ -119,38 +150,26 @@ export const LogEntryHeader = memo(function ({
           </Tooltip>
         )}
 
-        {/* Response Status — only shown for non-200 or pending */}
+        {/* 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" ? (
-              <Badge
-                variant="destructive"
-                className="text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums"
-              >
-                {log.responseStatus}
-              </Badge>
+              <OctagonAlert className="size-3" aria-label="Server error" />
+            ) : statusCategory === "client_error" ? (
+              <AlertTriangle className="size-3" aria-label="Client error" />
             ) : statusCategory === "pending" ? (
-              <Badge
-                variant="outline"
-                className={cn(
-                  "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
-                  STATUS_BADGE_CLASSES[statusCategory],
-                )}
-              >
-                <Loader2 className="size-3 animate-spin" />
-              </Badge>
-            ) : (
-              <Badge
-                variant="outline"
-                className={cn(
-                  "text-[10px] px-1.5 py-0 h-4 font-mono tabular-nums",
-                  STATUS_BADGE_CLASSES[statusCategory],
-                )}
-              >
-                {log.responseStatus}
-              </Badge>
-            )}
-          </>
+              <Loader2 className="size-3 animate-spin" aria-label="Pending" />
+            ) : null}
+            {log.responseStatus}
+          </Badge>
         )}
 
         {/* Elapsed time */}
@@ -279,6 +298,85 @@ export const LogEntryHeader = memo(function ({
         {/* Spacer */}
         <span className="flex-1 min-w-0" />
 
+        {/* Header actions — only when expanded, so the collapsed view stays
+            compact. Buttons stop propagation so they don't toggle the log. */}
+        {expanded && (
+          <span
+            className="flex items-center gap-1.5 shrink-0"
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            {requestExpansionState !== null && onToggleRequestExpansion !== undefined && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="size-8"
+                    onClick={onToggleRequestExpansion}
+                    disabled={requestExpansionState.isPending}
+                    aria-pressed={requestExpansionState.isExpanded}
+                    aria-label={
+                      requestExpansionState.isExpanded ? "Collapse all JSON" : "Expand all JSON"
+                    }
+                  >
+                    {requestExpansionState.isExpanded ? (
+                      <ChevronsUp className="size-3.5" />
+                    ) : (
+                      <ChevronsDown className="size-3.5" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {requestExpansionState.isExpanded
+                    ? "Collapse all JSON nodes"
+                    : "Expand all JSON nodes"}
+                </TooltipContent>
+              </Tooltip>
+            )}
+
+            {onCopyRequest !== undefined && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="size-8"
+                    onClick={onCopyRequest}
+                    aria-label="Copy request body"
+                  >
+                    {requestCopied ? (
+                      <Check className="size-3.5 text-emerald-500" />
+                    ) : (
+                      <Copy className="size-3.5" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {requestCopied ? "Copied to clipboard" : "Copy request body"}
+                </TooltipContent>
+              </Tooltip>
+            )}
+
+            {onReplay !== undefined && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="size-8"
+                    onClick={onReplay}
+                    aria-label="Replay request"
+                  >
+                    <RotateCcw className="size-3.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Re-send this request to the provider</TooltipContent>
+              </Tooltip>
+            )}
+          </span>
+        )}
+
         {/* Expand chevron */}
         {expanded ? (
           <ChevronDown className="size-4 text-muted-foreground shrink-0" />

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

@@ -140,7 +140,7 @@ export const StreamingChunkSequence = memo(function StreamingChunkSequence({
                           {chunk.type}
                         </span>
                       </div>
-                      <JsonViewer data={chunk} defaultExpandDepth={1} showCopy />
+                      <JsonViewer data={chunk} defaultExpandDepth={0} showCopy />
                     </div>
                   ))}
                 </div>

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

@@ -1,7 +1,7 @@
 import { type JSX, useMemo } from "react";
 import { cn } from "../../lib/utils";
 import type { StopReason } from "../../lib/stopReason";
-import { getCrabVariant } from "../ui/crab-variants";
+import { getCrabVariant, getInteriorCrabVariant } from "../ui/crab-variants";
 
 export type ThreadConnectorProps = {
   stopReason: StopReason;
@@ -9,6 +9,8 @@ export type ThreadConnectorProps = {
   isFirst: boolean;
   /** True when this entry starts a new turn (first overall, or after end_turn/stop). */
   isTurnStart: boolean;
+  /** True when this entry is the turn's only request. */
+  isOnlyEntry?: boolean;
   /** Seed for crab variant selection (0-11). */
   crabIndex?: number;
   /** When true the crab is clickable (collapse / expand a turn). */
@@ -28,13 +30,16 @@ export function ThreadConnector({
   isPending,
   isFirst,
   isTurnStart,
+  isOnlyEntry = false,
   crabIndex = 0,
   collapsible = false,
   onToggle,
 }: ThreadConnectorProps): JSX.Element {
   const isBoundary = stopReason === "end_turn" || stopReason === "stop";
+  const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
   const isRunning = isPending && !isBoundary;
   const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
+  const FusedCrab = useMemo(() => getInteriorCrabVariant(crabIndex), [crabIndex]);
 
   const interactiveProps =
     collapsible && onToggle
@@ -68,7 +73,17 @@ export function ThreadConnector({
       {/* Crab — pinned to the fixed offset above so it never drifts
        *  when the LogEntry expands / collapses.  Clickable when the
        *  turn is collapsible (replaces the old chevron toggle). */}
-      {isBoundary ? (
+      {isFusedBoundary ? (
+        <span title="Start and end of turn">
+          <FusedCrab
+            className={cn(
+              "size-3.5 text-[#80FF00]",
+              "animate-crab-settle",
+              "drop-shadow-[0_0_4px_rgba(128,255,0,0.5)]",
+            )}
+          />
+        </span>
+      ) : isBoundary ? (
         <span
           title={stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)"}
           {...interactiveProps}

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

@@ -8,7 +8,7 @@ import { ProviderLogo, detectProvider, type Provider } from "../providers/Provid
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
 import { ThreadConnector } from "./ThreadConnector";
-import type { TurnEntry } from "./viewerState";
+import { isTurnCollapsible, type TurnEntry } from "./viewerState";
 
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
@@ -38,17 +38,20 @@ export const TurnGroup = memo(function TurnGroup({
   const lastStop = entries[lastIdx]?.stopReason ?? null;
   const isComplete = lastStop !== null ? isTurnBoundary(lastStop) : false;
   const isPending = entries[lastIdx]?.log.responseStatus === null;
-  const collapsible = isComplete && !isPending;
+  const isSingleLog = entries.length === 1;
+  const collapsible = isTurnCollapsible(entries.length, isComplete, isPending);
   const [collapsed, setCollapsed] = useState(false);
 
   // Auto-collapse when the turn finishes (transitions from incomplete → complete)
-  const prevCompleteRef = useRef(isComplete);
+  const prevCompleteRef = useRef(false);
   useEffect(() => {
-    if (isComplete && !prevCompleteRef.current) {
+    if (!collapsible) {
+      setCollapsed(false);
+    } else if (isComplete && !prevCompleteRef.current) {
       setCollapsed(true);
     }
     prevCompleteRef.current = isComplete;
-  }, [isComplete]);
+  }, [collapsible, isComplete]);
 
   const toggleCollapse = useCallback(() => {
     if (collapsible) setCollapsed((prev) => !prev);
@@ -124,11 +127,30 @@ export const TurnGroup = memo(function TurnGroup({
       className={cn("border rounded-lg", isPending ? "border-amber-500/10" : "border-transparent")}
     >
       {collapsed ? (
-        /* ---- Collapsed: dual-crab + summary ---- */
-        <div className="flex items-stretch">
-          {/* Dual-crab connector */}
+        /* ---- Collapsed: dual-crab (+ summary card for multi-log turns) ---- */
+        <div
+          data-nav-id={`turn-collapsed-${entries[0]?.log.id ?? turnIndex}`}
+          data-nav-action="expand"
+          role="button"
+          tabIndex={0}
+          className="flex items-stretch cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none rounded-lg"
+          onClick={toggleCollapse}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              toggleCollapse();
+            }
+          }}
+        >
+          {/* Turn number */}
+          <div className="w-5 shrink-0 flex items-start pt-1.5">
+            <span className="text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none">
+              {turnIndex + 1}
+            </span>
+          </div>
+
+          {/* Dual-crab connector for collapsed multi-request turns. */}
           <div className="w-6 shrink-0 flex flex-col items-center pt-0.5 pb-0.5">
-            {/* Start turn crab (clickable to expand) */}
             <div className="flex justify-center h-[calc(0.75rem-8px)]" />
             <span
               role="button"
@@ -149,18 +171,15 @@ export const TurnGroup = memo(function TurnGroup({
               <StartCrab
                 className={cn(
                   "size-3.5 text-emerald-400",
-                  "animate-crab-appear",
-                  "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
+                  "animate-crab-appear drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
                 )}
               />
             </span>
 
-            {/* Connecting line between the two crabs */}
             <div className="flex-1 flex justify-center min-h-0">
               <div className="w-0.5 bg-muted-foreground/30 h-full" />
             </div>
 
-            {/* End turn crab (clickable to expand) */}
             <span
               role="button"
               tabIndex={0}
@@ -180,76 +199,70 @@ export const TurnGroup = memo(function TurnGroup({
               <EndCrab
                 className={cn(
                   "size-3.5 text-amber-400",
-                  "animate-crab-settle",
-                  "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
+                  "animate-crab-settle drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
                 )}
               />
             </span>
           </div>
 
-          {/* Summary content — card-like appearance matching LogEntry */}
-          <div
-            className={cn(
-              "flex-1 min-w-0 mb-0.5 rounded-lg border border-border py-1 px-3 flex items-center gap-3 text-xs cursor-pointer",
-              bgClass,
-            )}
-            onClick={toggleCollapse}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                toggleCollapse();
-              }
-            }}
-          >
-            {/* ID range */}
-            <span className="text-blue-400/80 font-mono font-semibold tabular-nums shrink-0">
-              #{entries[0]?.log.id ?? "?"} ~ #{entries[lastIdx]?.log.id ?? "?"}
-            </span>
-
-            {/* Request count */}
-            <span className="text-muted-foreground shrink-0">
-              {entries.length} request{entries.length > 1 ? "s" : ""}
-            </span>
+          {/* Summary content — hidden for single-log turns. */}
+          {entries.length > 1 && (
+            <div
+              className={cn(
+                "flex-1 min-w-0 mb-0.5 rounded-lg border border-border py-1 px-3 flex items-center gap-3 text-xs",
+                bgClass,
+              )}
+            >
+              {/* ID range */}
+              <span className="text-blue-400/80 font-mono font-semibold tabular-nums shrink-0">
+                #{entries[0]?.log.id ?? "?"} ~ #{entries[lastIdx]?.log.id ?? "?"}
+              </span>
 
-            {/* Model logos — one per unique provider */}
-            {uniqueProviders.length > 0 && (
-              <span className="flex items-center gap-0.5 shrink-0">
-                {uniqueProviders.map((p) => (
-                  <ProviderLogo key={p} provider={p} className="size-4" />
-                ))}
+              {/* Request count */}
+              <span className="text-muted-foreground shrink-0">
+                {entries.length} request{entries.length > 1 ? "s" : ""}
               </span>
-            )}
 
-            {/* Elapsed */}
-            {aggregate.hasElapsed && (
-              <span className="flex items-center gap-1 text-muted-foreground shrink-0">
-                <Clock className="size-3" />
-                <span className="font-mono tabular-nums">
-                  {formatElapsed(aggregate.totalElapsed)}
+              {/* Model logos — one per unique provider */}
+              {uniqueProviders.length > 0 && (
+                <span className="flex items-center gap-0.5 shrink-0">
+                  {uniqueProviders.map((p) => (
+                    <ProviderLogo key={p} provider={p} className="size-4" />
+                  ))}
                 </span>
-              </span>
-            )}
+              )}
 
-            {/* Tokens */}
-            {aggregate.hasTokens && (
-              <span className="flex items-center gap-1 shrink-0">
-                <Zap className="size-3 text-muted-foreground" />
-                <span className="font-mono tabular-nums">
-                  <span className="text-blue-400">IN {formatTokens(aggregate.totalInput)}</span>
-                  {" / "}
-                  <span className="text-amber-400">OUT {formatTokens(aggregate.totalOutput)}</span>
+              {/* Elapsed */}
+              {aggregate.hasElapsed && (
+                <span className="flex items-center gap-1 text-muted-foreground shrink-0">
+                  <Clock className="size-3" />
+                  <span className="font-mono tabular-nums">
+                    {formatElapsed(aggregate.totalElapsed)}
+                  </span>
                 </span>
-              </span>
-            )}
+              )}
 
-            {/* Spacer */}
-            <span className="flex-1 min-w-0" />
+              {/* Tokens */}
+              {aggregate.hasTokens && (
+                <span className="flex items-center gap-1 shrink-0">
+                  <Zap className="size-3 text-muted-foreground" />
+                  <span className="font-mono tabular-nums">
+                    <span className="text-blue-400">IN {formatTokens(aggregate.totalInput)}</span>
+                    {" / "}
+                    <span className="text-amber-400">
+                      OUT {formatTokens(aggregate.totalOutput)}
+                    </span>
+                  </span>
+                </span>
+              )}
 
-            {/* Expand chevron */}
-            <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-          </div>
+              {/* Spacer */}
+              <span className="flex-1 min-w-0" />
+
+              {/* Expand chevron */}
+              <ChevronRight className="size-4 text-muted-foreground shrink-0" />
+            </div>
+          )}
         </div>
       ) : (
         /* ---- Expanded: full entries ---- */
@@ -259,13 +272,23 @@ export const TurnGroup = memo(function TurnGroup({
 
           return (
             <div key={log.id} className="flex items-stretch">
+              {isTurnStart ? (
+                <div className="w-5 shrink-0 flex items-start pt-1.5">
+                  <span className="text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none">
+                    {turnIndex + 1}
+                  </span>
+                </div>
+              ) : (
+                <div className="w-5 shrink-0" />
+              )}
               <ThreadConnector
                 stopReason={reason}
                 isPending={log.responseStatus === null}
                 isFirst={visibleIdx === 0}
                 isTurnStart={isTurnStart}
+                isOnlyEntry={isSingleLog}
                 crabIndex={log.id % 12}
-                collapsible={collapsible && entries.length > 1 && isTurnStart}
+                collapsible={collapsible && isTurnStart}
                 onToggle={toggleCollapse}
               />
               <div className={cn("flex-1 min-w-0 mb-0.5 rounded-lg", bgClass)}>

package/src/components/proxy-viewer/anatomy/RequestAnatomy.tsx

@@ -0,0 +1,98 @@
+import { Info } from "lucide-react";
+import { type JSX, useMemo } from "react";
+import { cn, formatTokens } from "../../../lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
+import { SegmentBar } from "./SegmentBar";
+import type { AnatomySegment } from "./types";
+
+export type RequestAnatomyProps = {
+  /** Parsed request body, or `null` if it cannot be parsed. */
+  parsed: unknown | null;
+  /** Server-reported input token count, or `null` if unknown. */
+  inputTokens: number | null;
+  /** Optional callback fired when the user activates a segment. */
+  onSegmentActivate?: (segment: AnatomySegment) => void;
+  /** Pre-computed segments; if provided, `parsed` is ignored. */
+  segments?: AnatomySegment[] | null;
+};
+
+const DIVERGENCE_AMBER_THRESHOLD = 0.25;
+
+/**
+ * Render the request anatomy view: a one-line summary plus the
+ * stacked segment bar. Returns `null` when the request cannot be
+ * parsed or the segment list is empty.
+ */
+export function RequestAnatomy({
+  parsed,
+  inputTokens,
+  onSegmentActivate,
+  segments: providedSegments,
+}: RequestAnatomyProps): JSX.Element | null {
+  // Caller is expected to pre-compute segments in production (see
+  // LogEntry). When called standalone, fall back to deriving from
+  // `parsed` directly using the unknown adapter is not appropriate —
+  // the caller is responsible for choosing the right adapter.
+  const segments = useMemo(() => providedSegments ?? null, [providedSegments]);
+  const total = useMemo(() => (segments ?? []).reduce((sum, s) => sum + s.size, 0), [segments]);
+
+  // Show divergence warning when both estimate and server numbers exist.
+  const showDivergenceWarning = useMemo(() => {
+    if (segments === null || segments === undefined) return false;
+    if (inputTokens === null) return false;
+    if (total === 0) return false;
+    const ratio = Math.abs(inputTokens - total) / Math.max(inputTokens, total);
+    return ratio >= DIVERGENCE_AMBER_THRESHOLD;
+  }, [inputTokens, segments, total]);
+
+  const summaryColorClass = useMemo(() => {
+    if (inputTokens === null) return "text-muted-foreground";
+    if (showDivergenceWarning) return "text-amber-400";
+    return "text-muted-foreground";
+  }, [inputTokens, showDivergenceWarning]);
+
+  if (segments === null || segments === undefined) {
+    return null;
+  }
+  if (segments.length === 0) {
+    return null;
+  }
+  if (parsed === null && providedSegments === undefined) {
+    return null;
+  }
+
+  return (
+    <TooltipProvider delayDuration={150}>
+      <div className="px-4 py-3 space-y-2" data-testid="anatomy-root">
+        <div className="flex items-center gap-2 text-xs">
+          <span className="font-mono tabular-nums text-foreground">
+            ~{formatTokens(total)} tokens
+          </span>
+          {inputTokens !== null && (
+            <span className={cn("font-mono tabular-nums", summaryColorClass)}>
+              (server: {formatTokens(inputTokens)})
+            </span>
+          )}
+          {showDivergenceWarning && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  className="inline-flex items-center text-amber-400 hover:text-amber-300"
+                  aria-label="Token estimate diverges from server"
+                >
+                  <Info className="size-3.5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-xs text-xs">
+                Bar uses a token estimate heuristic (~4 ASCII chars / token, ~1 CJK / emoji char per
+                token). The server&apos;s reported value is the source of truth for cost.
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+        <SegmentBar segments={segments} totalTokens={total} onActivate={onSegmentActivate} />
+      </div>
+    </TooltipProvider>
+  );
+}