@tonyclaw/agent-inspector 4.0.1 → 4.0.2

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

@@ -1,596 +0,0 @@
-import {
-  AlertTriangle,
-  ArrowDown,
-  ArrowUp,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  ChevronsDown,
-  ChevronsUp,
-  Clock,
-  Copy,
-  FileDiff,
-  FileTerminal,
-  Gauge,
-  Globe,
-  History,
-  Loader2,
-  MessageSquare,
-  OctagonAlert,
-  Radio,
-  RotateCcw,
-  Wrench,
-  Zap,
-} from "lucide-react";
-import type { JSX, MouseEvent } from "react";
-import { memo } from "react";
-import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
-import { formatTimestamp } from "../../lib/timeDisplay";
-import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
-import type { CapturedLog } from "../../contracts";
-import { Badge } from "../ui/badge";
-import { Button } from "../ui/button";
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
-import type { CacheTrend } from "./cacheTrend";
-import { ToolTraceEvents } from "./ToolTraceEvents";
-import type { ToolTraceEvent } from "./viewerState";
-
-const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
-  success: "bg-slate-300/[0.08] text-slate-100 border-transparent",
-  client_error: "bg-amber-300/[0.10] text-amber-100 border-transparent",
-  server_error: "bg-rose-400/[0.10] text-rose-100 border-transparent",
-  pending: "bg-cyan-300/[0.08] text-cyan-100 border-transparent",
-};
-
-const STATUS_CUE_CLASSES: Record<
-  StatusCategory,
-  {
-    frame: string;
-  }
-> = {
-  success: {
-    frame: "border-cyan-200/15 bg-white/[0.04] text-text-strong",
-  },
-  client_error: {
-    frame: "border-amber-300/25 bg-amber-300/[0.08] text-amber-100",
-  },
-  server_error: {
-    frame: "border-rose-300/25 bg-rose-300/[0.08] text-rose-100",
-  },
-  pending: {
-    frame: "border-cyan-300/25 bg-cyan-300/[0.08] text-cyan-100",
-  },
-};
-
-const HEADER_ACTION_BUTTON_CLASS =
-  "border border-transparent bg-white/[0.045] hover:bg-white/[0.075] size-8 text-muted-foreground shadow-none hover:text-cyan-100";
-
-const TELEMETRY_CHIP_CLASS = "bg-white/[0.045] flex h-7 items-center gap-1 rounded-md px-2 text-xs";
-
-function formatElapsed(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
-function formatTokenRate(tokensPerSecond: number): string {
-  if (tokensPerSecond >= 10) return `${tokensPerSecond.toFixed(0)}/s`;
-  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 (up / down) plus the absolute
- * delta in compact form. Returns `null` when there is no trend to display.
- */
-function CacheTrendIndicator({ trend }: { trend: CacheTrend | null }): JSX.Element | null {
-  if (trend === null) return null;
-  const isUp = trend.direction === "up";
-  const Icon = isUp ? ArrowUp : ArrowDown;
-  const sign = isUp ? "+" : "-";
-  return (
-    <span className="flex items-center gap-0.5 text-muted-foreground tabular-nums">
-      <Icon className={isUp ? "size-3 text-cyan-300" : "size-3 text-rose-400"} />
-      <span className="font-mono">
-        {sign}
-        {formatTokens(trend.delta)}
-      </span>
-    </span>
-  );
-}
-
-/**
- * Per-tab action bundle surfaced in the header when the tab is active.
- * - `copyText === null` - Copy button hidden (e.g. tab has no body to copy)
- * - `expansion === null` - Expand-all button hidden (e.g. flat dict, or
- *   not valid JSON). When present, the button reflects the JSON viewer's
- *   bulk-expansion state and the caller is responsible for forwarding the
- *   matching `bulkDepth` / `bulkRevision` to the underlying viewer.
- * - `diffWithRaw` / `diffWithPrevious` - optional Diff buttons. Undefined
- *   means "not applicable" (hidden). Today only the Request tab sets them.
- */
-export type HeaderTabAction = {
-  copyLabel: string;
-  copyText: string | null;
-  copyCopied: boolean;
-  onCopy: (event: MouseEvent) => void;
-  expansion: {
-    isExpanded: boolean;
-    isPending: boolean;
-    onToggle: () => void;
-  } | null;
-  /** Toggle for "Diff with Raw": display request body vs raw (pre-billing-strip). */
-  diffWithRaw?: { active: boolean; onToggle: () => void };
-  /** One-shot handler for "Diff with Previous": compare against the preceding log. */
-  diffWithPrevious?: () => void;
-};
-
-/**
- * Tab actions keyed by Tabs value. Tabs without an entry (Context, Parsed
- * Response) leave the corresponding key unset, so the header renders no
- * action buttons for them. Typed as a record (rather than a `Partial<...>`
- * union) so the per-tab lookup in the header is type-safe.
- */
-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). */
-  toolCount?: number | null;
-  /** Tools actually called by this response, shown inline with the log telemetry. */
-  toolEvents?: ToolTraceEvent[];
-  expanded: boolean;
-  onToggle: () => void;
-  /** Per-log cache token trend (creation + read) relative to the previous log
-   * in the same conversation group. When `undefined` or a field is `null`,
-   * the corresponding cache span renders as it did before: no arrow.
-   */
-  cacheTrend?: { creation: CacheTrend | null; read: CacheTrend | null } | null;
-  /** Currently-active tab value (matches the `Tabs` value prop). The header
-   *  uses this to pick the right entry from `tabActions`. */
-  activeTab?: string;
-  /** Per-tab Copy + Expand-all actions. Only tabs with an entry will show
-   *  buttons when active. Tabs without an entry (Context, Parsed Response)
-   *  render no header buttons. */
-  tabActions?: HeaderTabActions;
-  /** Re-send this request to the provider. Rendered in the header row when
-   *  `expanded` is true. */
-  onReplay?: () => void;
-  /** Slow-response threshold in seconds. `0` disables the warning indicator. */
-  slowResponseThresholdSeconds?: number;
-  /** Show client PID/project metadata on each log row. Parent process rows can disable this. */
-  showClientMetadata?: boolean;
-  /** Controls whether timestamps render as compact local time or full ISO strings. */
-  timeDisplayFormat: TimeDisplayFormat;
-};
-
-export const LogEntryHeader = memo(function ({
-  log,
-  displayNumber,
-  messageCount = null,
-  toolCount = null,
-  toolEvents = [],
-  expanded,
-  onToggle,
-  cacheTrend = null,
-  activeTab,
-  tabActions,
-  onReplay,
-  slowResponseThresholdSeconds = 0,
-  showClientMetadata = true,
-  timeDisplayFormat,
-}: LogEntryHeaderProps): JSX.Element {
-  const statusCategory = getStatusCategory(log.responseStatus);
-  const isSlowResponse =
-    log.elapsedMs !== null &&
-    slowResponseThresholdSeconds > 0 &&
-    log.elapsedMs > slowResponseThresholdSeconds * 1000;
-
-  const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
-  const firstChunkMs = log.firstChunkMs ?? null;
-  const tokensPerSecond = log.tokensPerSecond ?? null;
-  const firstChunkLabel = firstChunkMs === null ? null : formatElapsed(firstChunkMs);
-  const tokenRateLabel =
-    tokensPerSecond === null || tokensPerSecond <= 0 ? null : formatTokenRate(tokensPerSecond);
-  const warningCount = log.warnings?.length ?? 0;
-  const hasClientPid = log.clientPid !== null && log.clientPid !== undefined;
-  const hasClientProjectFolder =
-    log.clientProjectFolder !== null &&
-    log.clientProjectFolder !== undefined &&
-    log.clientProjectFolder !== "";
-  const hasClientCwd =
-    log.clientCwd !== null && log.clientCwd !== undefined && log.clientCwd !== "";
-  const statusCue = STATUS_CUE_CLASSES[statusCategory];
-  const statusLabel = statusCueLabel(statusCategory, log.responseStatus);
-  const showStatusBadge = statusCategory !== "success" || log.responseStatus !== 200;
-  const showStandaloneStreamingIndicator =
-    log.streaming && firstChunkLabel === null && tokenRateLabel === null;
-
-  return (
-    <TooltipProvider>
-      <div
-        id={`log-${log.id}`}
-        role="button"
-        tabIndex={0}
-        data-nav-id={`log-${log.id}`}
-        data-nav-action={expanded ? "collapse" : "expand"}
-        className={cn(
-          "group/header relative isolate flex min-w-0 cursor-pointer items-start gap-2 overflow-hidden px-3 py-2 transition-[background-color,border-color,box-shadow]",
-          expanded ? "bg-white/[0.04]" : "bg-transparent hover:bg-white/[0.035]",
-          "select-none",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
-        )}
-        onClick={onToggle}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onToggle();
-          }
-        }}
-      >
-        <span className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">
-          {/* Request ID */}
-          <span
-            className={cn(
-              "inline-flex h-8 shrink-0 items-center rounded-md px-2 font-mono",
-              statusCue.frame,
-            )}
-          >
-            <span className="text-xs font-semibold tabular-nums" title={`Log ID ${String(log.id)}`}>
-              #{displayNumber}
-            </span>
-          </span>
-
-          {/* Request start time */}
-          <span className="bg-white/[0.045] flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground">
-            <Clock className="size-3" />
-            <span className="font-mono tabular-nums" title={log.timestamp}>
-              {formatTimestamp(log.timestamp, timeDisplayFormat)}
-            </span>
-          </span>
-
-          {/* 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. */}
-          {showStatusBadge && (
-            <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="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}
-                </Badge>
-              </TooltipTrigger>
-              <TooltipContent>
-                {warningCount === 1
-                  ? "1 tool schema warning"
-                  : `${warningCount} tool schema warnings`}
-              </TooltipContent>
-            </Tooltip>
-          )}
-
-          {/* Elapsed time. Tooltip is only shown when this log exceeded the slow-
-            response threshold - for normal-speed logs the elapsed value is
-            self-explanatory, so we skip the tooltip wrapper to keep the row
-            quiet. */}
-          {log.elapsedMs !== null &&
-            (isSlowResponse ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <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" />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                  Slow response: {formatElapsed(log.elapsedMs)} exceeds{" "}
-                  {formatElapsed(slowResponseThresholdSeconds * 1000)}
-                </TooltipContent>
-              </Tooltip>
-            ) : (
-              <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>
-            ))}
-
-          {/* Streaming timing */}
-          {log.streaming && firstChunkLabel !== null && (
-            <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>
-          )}
-          {log.streaming && tokenRateLabel !== null && (
-            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
-              <Gauge className="size-3" />
-              <span className="font-mono tabular-nums">{tokenRateLabel}</span>
-            </span>
-          )}
-
-          {/* Token counts */}
-          {hasTokens && (
-            <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
-                  className={cn(
-                    "whitespace-nowrap",
-                    log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground",
-                  )}
-                >
-                  IN {log.inputTokens !== null ? formatTokens(log.inputTokens) : "n/a"}
-                </span>
-                <span className="text-muted-foreground">/</span>
-                <span
-                  className={cn(
-                    "whitespace-nowrap",
-                    log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground",
-                  )}
-                >
-                  OUT {log.outputTokens !== null ? formatTokens(log.outputTokens) : "n/a"}
-                </span>
-              </span>
-            </span>
-          )}
-          {/* Cache tokens */}
-          {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
-            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0")}>
-              <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
-              <span className="font-mono tabular-nums text-cyan-300">
-                KV Cache +{formatTokens(log.cacheCreationInputTokens)}
-              </span>
-            </span>
-          )}
-          {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 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)}
-              </span>
-            </span>
-          )}
-
-          {/* Message count */}
-          {messageCount !== null && (
-            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
-              <MessageSquare className="size-3" />
-              <span className="font-mono tabular-nums">{messageCount}</span>
-            </span>
-          )}
-
-          {/* Tool count */}
-          {toolCount !== null && (
-            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
-              <Wrench className="size-3" />
-              <span className="font-mono tabular-nums">{toolCount}</span>
-            </span>
-          )}
-
-          <ToolTraceEvents events={toolEvents} />
-
-          {/* Origin */}
-          {log.origin !== null && (
-            <span
-              className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-muted-foreground xl:flex")}
-              title={`Origin: ${log.origin}`}
-            >
-              <Globe className="size-3" />
-              <span className="font-mono tabular-nums truncate max-w-[120px]" title={log.origin}>
-                {log.origin}
-              </span>
-            </span>
-          )}
-
-          {/* Client info (PID + project folder) */}
-          {showClientMetadata && (hasClientPid || hasClientProjectFolder) && (
-            <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>
-              ) : (
-                <span className="font-mono tabular-nums">PID {log.clientPid}</span>
-              )}
-            </span>
-          )}
-
-          {/* Streaming indicator */}
-          {showStandaloneStreamingIndicator && (
-            <Radio className="size-3 shrink-0 text-muted-foreground/60" />
-          )}
-        </span>
-
-        <span className="flex shrink-0 items-start gap-1.5">
-          {/* 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()}
-            >
-              {tabActions !== undefined &&
-                activeTab !== undefined &&
-                (() => {
-                  const action = tabActions[activeTab];
-                  if (action === undefined) return null;
-                  return (
-                    <>
-                      {action.expansion !== null && (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              variant="outline"
-                              size="icon"
-                              className={HEADER_ACTION_BUTTON_CLASS}
-                              onClick={action.expansion.onToggle}
-                              disabled={action.expansion.isPending}
-                              aria-pressed={action.expansion.isExpanded}
-                              aria-label={
-                                action.expansion.isExpanded
-                                  ? "Collapse all JSON"
-                                  : "Expand all JSON"
-                              }
-                            >
-                              {action.expansion.isExpanded ? (
-                                <ChevronsUp className="size-3.5" />
-                              ) : (
-                                <ChevronsDown className="size-3.5" />
-                              )}
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            {action.expansion.isExpanded
-                              ? "Collapse all JSON nodes"
-                              : "Expand all JSON nodes"}
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
-                      {action.diffWithRaw !== undefined && (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              variant="outline"
-                              size="icon"
-                              className={cn(
-                                HEADER_ACTION_BUTTON_CLASS,
-                                action.diffWithRaw.active &&
-                                  "border-cyan-300/35 bg-cyan-400/15 text-cyan-100",
-                              )}
-                              onClick={action.diffWithRaw.onToggle}
-                              aria-pressed={action.diffWithRaw.active}
-                              aria-label={
-                                action.diffWithRaw.active ? "Hide raw diff" : "Diff with raw"
-                              }
-                            >
-                              <FileDiff className="size-3.5" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            {action.diffWithRaw.active
-                              ? "Hide diff with raw request"
-                              : "Show diff between displayed and raw request body"}
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
-                      {action.diffWithPrevious !== undefined && (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              variant="outline"
-                              size="icon"
-                              className={HEADER_ACTION_BUTTON_CLASS}
-                              onClick={action.diffWithPrevious}
-                              aria-label="Diff with previous"
-                            >
-                              <History className="size-3.5" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            Compare this request with the immediately preceding one
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
-                      {action.copyText !== null && (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              variant="outline"
-                              size="icon"
-                              className={HEADER_ACTION_BUTTON_CLASS}
-                              onClick={action.onCopy}
-                              aria-label={action.copyCopied ? "Copied" : action.copyLabel}
-                            >
-                              {action.copyCopied ? (
-                                <Check className="size-3.5 text-cyan-300" />
-                              ) : (
-                                <Copy className="size-3.5" />
-                              )}
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            {action.copyCopied ? "Copied to clipboard" : action.copyLabel}
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
-                    </>
-                  );
-                })()}
-              {onReplay !== undefined && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      className={HEADER_ACTION_BUTTON_CLASS}
-                      onClick={onReplay}
-                      aria-label="Replay request"
-                    >
-                      <RotateCcw className="size-3.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>Re-send this request to the provider</TooltipContent>
-                </Tooltip>
-              )}
-            </span>
-          )}
-
-          <span
-            className="bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-text-strong"
-            aria-hidden="true"
-          >
-            {expanded ? (
-              <ChevronDown className="size-4 shrink-0" />
-            ) : (
-              <ChevronRight className="size-4 shrink-0" />
-            )}
-          </span>
-        </span>
-      </div>
-    </TooltipProvider>
-  );
-});

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

@@ -1,57 +0,0 @@
-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 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(
-                  "border border-border bg-muted/40 inline-flex size-6 shrink-0 items-center justify-center rounded-md",
-                  index > 0 && "-ml-2",
-                )}
-              >
-                <ProviderLogo provider={item.provider} className="size-4" />
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>{item.tooltip}</TooltipContent>
-          </Tooltip>
-        ))}
-        {overflowCount > 0 && (
-          <span className="border border-border bg-muted/40 -ml-2 inline-flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md px-1 font-mono text-[10px] text-muted-foreground">
-            +{overflowCount}
-          </span>
-        )}
-      </span>
-    </TooltipProvider>
-  );
-}