@tonyclaw/agent-inspector 2.1.14 → 2.1.15

package/src/components/groups/GroupsDialog.tsx

@@ -1173,19 +1173,24 @@ function LatestLogsPreview({ logs }: { logs: SessionLogSummary[] }): JSX.Element
         Latest logs
       </div>
       <div className="divide-y divide-border">
-        {visibleLogs.map((log) => (
-          <div
-            key={log.id}
-            className="grid gap-2 px-3 py-2 text-xs sm:grid-cols-[72px_1fr_88px_88px]"
-          >
-            <span className="font-mono text-muted-foreground">#{log.id}</span>
-            <span className="min-w-0 truncate">
-              {displayText(log.model)} · {log.apiFormat} · {log.path}
-            </span>
-            <span className="font-mono text-muted-foreground">{formatMs(log.firstChunkMs)}</span>
-            <span className="font-mono text-muted-foreground">{formatMs(log.latencyMs)}</span>
-          </div>
-        ))}
+        {visibleLogs.map((log) => {
+          const displayNumber = log.sessionLogNumber ?? log.id;
+          return (
+            <div
+              key={log.id}
+              className="grid gap-2 px-3 py-2 text-xs sm:grid-cols-[72px_1fr_88px_88px]"
+            >
+              <span className="font-mono text-muted-foreground" title={`Log ID ${String(log.id)}`}>
+                #{displayNumber}
+              </span>
+              <span className="min-w-0 truncate">
+                {displayText(log.model)} · {log.apiFormat} · {log.path}
+              </span>
+              <span className="font-mono text-muted-foreground">{formatMs(log.firstChunkMs)}</span>
+              <span className="font-mono text-muted-foreground">{formatMs(log.latencyMs)}</span>
+            </div>
+          );
+        })}
       </div>
     </div>
   );

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

@@ -146,11 +146,29 @@ function firstToolLog(logs: CapturedLog[]): CapturedLog | null {
   return null;
 }
 
+function buildDisplayNumberByLogId(logs: readonly CapturedLog[]): Map<number, number> {
+  const result = new Map<number, number>();
+  for (let index = 0; index < logs.length; index += 1) {
+    const log = logs[index];
+    if (log === undefined) continue;
+    result.set(log.id, index + 1);
+  }
+  return result;
+}
+
+function displayLogNumber(
+  logId: number,
+  displayNumberByLogId: ReadonlyMap<number, number>,
+): string {
+  return String(displayNumberByLogId.get(logId) ?? logId);
+}
+
 function buildTraceInsights(input: {
   logs: CapturedLog[];
   scopeId: string;
   summary: TraceSummary;
   candidates: KnowledgeCandidate[];
+  displayNumberByLogId: ReadonlyMap<number, number>;
 }): TraceInsight[] {
   const insights: TraceInsight[] = [
     {
@@ -170,7 +188,7 @@ function buildTraceInsights(input: {
       title: `${String(input.summary.toolCallCount)} tool call${
         input.summary.toolCallCount === 1 ? "" : "s"
       }`,
-      detail: `First tool evidence at #${String(toolLog.id)}`,
+      detail: `First tool evidence at #${displayLogNumber(toolLog.id, input.displayNumberByLogId)}`,
       logId: toolLog.id,
     });
   }
@@ -180,7 +198,7 @@ function buildTraceInsights(input: {
     insights.push({
       kind: "failure",
       title: `Failure #${String(failure.responseStatus)}`,
-      detail: `First failed request is #${String(failure.id)}`,
+      detail: `First failed request is #${displayLogNumber(failure.id, input.displayNumberByLogId)}`,
       logId: failure.id,
     });
   }
@@ -190,7 +208,7 @@ function buildTraceInsights(input: {
     insights.push({
       kind: "slow",
       title: `Slowest ${formatElapsed(input.summary.maxElapsedMs)}`,
-      detail: `Max latency observed at #${String(slowest.id)}`,
+      detail: `Max latency observed at #${displayLogNumber(slowest.id, input.displayNumberByLogId)}`,
       logId: slowest.id,
     });
   }
@@ -291,12 +309,16 @@ function previewText(value: string, maxLength: number): string {
   return `${normalized.slice(0, maxLength - 3)}...`;
 }
 
-function logRangeLabel(logIds: number[]): string {
+function logRangeLabel(
+  logIds: number[],
+  displayNumberByLogId: ReadonlyMap<number, number>,
+): string {
   const first = logIds[0];
   const last = logIds[logIds.length - 1];
   if (first === undefined) return "No evidence logs";
-  if (last === undefined || first === last) return `#${String(first)}`;
-  return `#${String(first)}-#${String(last)}`;
+  const firstLabel = displayLogNumber(first, displayNumberByLogId);
+  if (last === undefined || first === last) return `#${firstLabel}`;
+  return `#${firstLabel}-#${displayLogNumber(last, displayNumberByLogId)}`;
 }
 
 function tagsToText(tags: string[]): string {
@@ -316,12 +338,14 @@ function CandidateItem({
   isUpdating,
   onPromoteCandidate,
   onUpdateCandidate,
+  displayNumberByLogId,
 }: {
   candidate: KnowledgeCandidate;
   isPromoting: boolean;
   isUpdating: boolean;
   onPromoteCandidate: (candidateId: string) => void;
   onUpdateCandidate: (candidateId: string, update: CandidateDraftUpdate) => Promise<boolean>;
+  displayNumberByLogId: ReadonlyMap<number, number>;
 }): JSX.Element {
   const [editing, setEditing] = useState(false);
   const [draftType, setDraftType] = useState<KnowledgeCandidate["type"]>(candidate.type);
@@ -484,7 +508,7 @@ function CandidateItem({
       <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground">
         <span className="inline-flex items-center gap-1">
           <FileSearch className="size-3" />
-          {logRangeLabel(candidate.logIds)}
+          {logRangeLabel(candidate.logIds, displayNumberByLogId)}
         </span>
         <span className="inline-flex items-center gap-1">
           <ShieldCheck className="size-3" />
@@ -504,20 +528,24 @@ function CandidateItem({
         )}
       </div>
       <div className="mt-1 flex flex-wrap items-center gap-1.5">
-        {candidate.logIds.map((logId) => (
-          <a
-            key={logId}
-            href={`#${getLogAnchor(logId)}`}
-            onClick={(event) => {
-              event.preventDefault();
-              jumpToLog(logId);
-            }}
-            className="rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            aria-label={`Jump to evidence log ${String(logId)}`}
-          >
-            #{logId}
-          </a>
-        ))}
+        {candidate.logIds.map((logId) => {
+          const displayNumber = displayLogNumber(logId, displayNumberByLogId);
+          return (
+            <a
+              key={logId}
+              href={`#${getLogAnchor(logId)}`}
+              onClick={(event) => {
+                event.preventDefault();
+                jumpToLog(logId);
+              }}
+              className="rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={`Jump to evidence log ${displayNumber}`}
+              title={`Log ID ${String(logId)}`}
+            >
+              #{displayNumber}
+            </a>
+          );
+        })}
         <span className="flex-1" />
         {canEdit && (
           <Button
@@ -560,12 +588,14 @@ function CandidateList({
   updatingCandidateIds,
   onPromoteCandidate,
   onUpdateCandidate,
+  displayNumberByLogId,
 }: {
   candidates: KnowledgeCandidate[];
   promotingCandidateIds: ReadonlySet<string>;
   updatingCandidateIds: ReadonlySet<string>;
   onPromoteCandidate: (candidateId: string) => void;
   onUpdateCandidate: (candidateId: string, update: CandidateDraftUpdate) => Promise<boolean>;
+  displayNumberByLogId: ReadonlyMap<number, number>;
 }): JSX.Element | null {
   if (candidates.length === 0) return null;
   return (
@@ -578,6 +608,7 @@ function CandidateList({
           isUpdating={updatingCandidateIds.has(candidate.id)}
           onPromoteCandidate={onPromoteCandidate}
           onUpdateCandidate={onUpdateCandidate}
+          displayNumberByLogId={displayNumberByLogId}
         />
       ))}
     </div>
@@ -608,9 +639,10 @@ export function AgentTraceSummary({
     () => buildTraceSummary(logs, slowResponseThresholdSeconds, candidates.length),
     [candidates.length, logs, slowResponseThresholdSeconds],
   );
+  const displayNumberByLogId = useMemo(() => buildDisplayNumberByLogId(logs), [logs]);
   const traceInsights = useMemo(
-    () => buildTraceInsights({ logs, scopeId, summary, candidates }),
-    [candidates, logs, scopeId, summary],
+    () => buildTraceInsights({ logs, scopeId, summary, candidates, displayNumberByLogId }),
+    [candidates, displayNumberByLogId, logs, scopeId, summary],
   );
   const showElapsedSummary = showRollupMetrics || summary.maxElapsedMs !== null;
   const timeRange = useMemo(
@@ -870,6 +902,7 @@ export function AgentTraceSummary({
           updatingCandidateIds={updatingCandidateIds}
           onPromoteCandidate={promoteCandidate}
           onUpdateCandidate={updateCandidate}
+          displayNumberByLogId={displayNumberByLogId}
         />
       )}
     </section>

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

@@ -32,6 +32,10 @@ export type CompareDrawerProps = {
   left: CapturedLog;
   /** Log selected second (shown on the right). */
   right: CapturedLog;
+  /** Human-facing ordinal inside the left log's session. */
+  leftDisplayNumber: number;
+  /** Human-facing ordinal inside the right log's session. */
+  rightDisplayNumber: number;
   onClose: () => void;
 };
 
@@ -541,7 +545,15 @@ function ModeToggle({
   );
 }
 
-function SideSummary({ log, side }: { log: CapturedLog; side: "left" | "right" }): JSX.Element {
+function SideSummary({
+  log,
+  side,
+  displayNumber,
+}: {
+  log: CapturedLog;
+  side: "left" | "right";
+  displayNumber: number;
+}): JSX.Element {
   const conversationId = getConversationId(log);
   return (
     <div className="flex-1 min-w-0 space-y-1 text-xs">
@@ -557,7 +569,9 @@ function SideSummary({ log, side }: { log: CapturedLog; side: "left" | "right" }
         >
           {side === "left" ? "← Left" : "Right →"}
         </Badge>
-        <span className="font-mono text-blue-400/80">#{log.id}</span>
+        <span className="font-mono text-blue-400/80" title={`Log ID ${String(log.id)}`}>
+          #{displayNumber}
+        </span>
         {log.model !== null && (
           <span className="font-mono text-muted-foreground truncate">{log.model}</span>
         )}
@@ -584,7 +598,13 @@ function SideSummary({ log, side }: { log: CapturedLog; side: "left" | "right" }
   );
 }
 
-export function CompareDrawer({ left, right, onClose }: CompareDrawerProps): JSX.Element {
+export function CompareDrawer({
+  left,
+  right,
+  leftDisplayNumber,
+  rightDisplayNumber,
+  onClose,
+}: CompareDrawerProps): JSX.Element {
   // Memoize the diff so re-renders (e.g. parent re-renders) don't recompute.
   const ops = useMemo<DiffOp[]>(() => {
     const leftRequest = getLogFormatAdapter(resolveLogFormat(left)).analyzeRequest(
@@ -741,8 +761,8 @@ export function CompareDrawer({ left, right, onClose }: CompareDrawerProps): JSX
         {/* Header */}
         <div className="flex items-start gap-4 px-4 py-3 border-b border-border">
           <div className="flex-1 flex gap-4 min-w-0">
-            <SideSummary log={left} side="left" />
-            <SideSummary log={right} side="right" />
+            <SideSummary log={left} side="left" displayNumber={leftDisplayNumber} />
+            <SideSummary log={right} side="right" displayNumber={rightDisplayNumber} />
           </div>
           <div className="flex items-center gap-2 shrink-0">
             <ModeToggle mode={mode} onChange={setMode} />
@@ -799,7 +819,13 @@ export function CompareDrawer({ left, right, onClose }: CompareDrawerProps): JSX
                   })}
                 </div>
               ) : (
-                <SplitBody grouped={grouped} left={left} right={right} />
+                <SplitBody
+                  grouped={grouped}
+                  left={left}
+                  right={right}
+                  leftDisplayNumber={leftDisplayNumber}
+                  rightDisplayNumber={rightDisplayNumber}
+                />
               )}
             </div>
           </>
@@ -814,18 +840,22 @@ function SplitBody({
   grouped,
   left,
   right,
+  leftDisplayNumber,
+  rightDisplayNumber,
 }: {
   grouped: GroupedOp[];
   left: CapturedLog;
   right: CapturedLog;
+  leftDisplayNumber: number;
+  rightDisplayNumber: number;
 }): JSX.Element {
   return (
     <div className="grid grid-cols-[200px_1fr_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs">
       {/* Column headers */}
       <div className="grid grid-cols-[200px_1fr_1fr] gap-x-2 col-span-3 pb-2 mb-2 border-b border-border text-[10px] uppercase tracking-wider text-muted-foreground">
         <span>Path</span>
-        <span>Left (Log #{left.id})</span>
-        <span>Right (Log #{right.id})</span>
+        <span title={`Log ID ${String(left.id)}`}>Left (Log #{leftDisplayNumber})</span>
+        <span title={`Log ID ${String(right.id)}`}>Right (Log #{rightDisplayNumber})</span>
       </div>
 
       {grouped.map((g, i) => {

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

@@ -7,7 +7,6 @@ import {
   Loader2,
   MessageSquare,
   Trash2,
-  User,
   Zap,
 } from "lucide-react";
 import type { JSX } from "react";
@@ -17,8 +16,9 @@ import { formatTimestampRange } from "../../lib/timeDisplay";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../contracts";
 import { ConfirmDialog } from "../ui/confirm-dialog";
-import { ProviderLogo, type Provider } from "../providers/ProviderLogo";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+import type { Provider } from "../providers/ProviderLogo";
+import { ClientLogo, clientAppLabel, detectClientApp } from "../clients/ClientLogo";
+import { ProviderLogoStack, ROW_CHEVRON_SLOT_CLASS } from "./ProviderLogoStack";
 import { resolveLogFormat } from "./log-formats";
 
 export type ConversationHeaderProps = {
@@ -89,6 +89,17 @@ export function ConversationHeader({
     },
     [conversationId],
   );
+  const providerLogoItems =
+    providers?.map(({ provider, models }) => ({
+      provider,
+      tooltip: models.length === 1 ? (models[0] ?? provider) : models.join(", "),
+    })) ?? [];
+  const clientApp = detectClientApp({ userAgent, conversationId, clientProjectFolder });
+  const detectedClientLabel = clientAppLabel(clientApp);
+  const hasUserAgent = userAgent !== null && userAgent !== undefined && userAgent !== "";
+  const clientDisplayLabel = detectedClientLabel ?? userAgent ?? null;
+  const clientTooltip =
+    detectedClientLabel !== null && hasUserAgent ? `${detectedClientLabel} - ${userAgent}` : null;
 
   return (
     <div
@@ -112,14 +123,19 @@ export function ConversationHeader({
         }
       }}
     >
+      {/* Provider logos: first visual element whenever model/provider logos are available. */}
+      <ProviderLogoStack items={providerLogoItems} ariaLabel="Models used in this session" />
+
       {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
-      {expanded ? (
-        <ChevronDown className="size-4 text-muted-foreground shrink-0" />
-      ) : isLoading ? (
-        <Loader2 className="size-4 animate-spin text-muted-foreground shrink-0" />
-      ) : (
-        <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-      )}
+      <span className={ROW_CHEVRON_SLOT_CLASS}>
+        {expanded ? (
+          <ChevronDown className="size-4 shrink-0" />
+        ) : isLoading ? (
+          <Loader2 className="size-4 shrink-0 animate-spin" />
+        ) : (
+          <ChevronRight className="size-4 shrink-0" />
+        )}
+      </span>
 
       {/* Session identifier.
           - Real session id (e.g. `sess_abc123...`) → render the id with the
@@ -175,41 +191,17 @@ export function ConversationHeader({
         </>
       )}
 
-      {/* User-Agent */}
-      {userAgent !== null && userAgent !== undefined && userAgent !== "" && (
+      {/* Client app / User-Agent */}
+      {clientDisplayLabel !== null && clientDisplayLabel !== "" && (
         <span
           className="flex items-center gap-1 text-muted-foreground text-xs shrink-0"
-          title={userAgent}
+          title={clientTooltip ?? clientDisplayLabel}
         >
-          <User className="size-3" />
-          <span className="font-mono tabular-nums truncate max-w-[120px]">{userAgent}</span>
-        </span>
-      )}
-
-      {/* Provider logos — one per unique provider used in this session. When
-         a session switched models mid-stream (e.g. claude-3-5 → deepseek-v4)
-         multiple logos appear side-by-side; tooltip lists every distinct
-         model name. */}
-      {providers !== undefined && providers.length > 0 && (
-        <TooltipProvider delayDuration={150}>
-          <span
-            className="flex items-center gap-0.5 shrink-0"
-            aria-label="Models used in this session"
-          >
-            {providers.map(({ provider, models }) => (
-              <Tooltip key={provider}>
-                <TooltipTrigger asChild>
-                  <span className="shrink-0">
-                    <ProviderLogo provider={provider} className="size-4" />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {models.length === 1 ? models[0] : models.join(", ")}
-                </TooltipContent>
-              </Tooltip>
-            ))}
+          <ClientLogo client={clientApp} className="size-5" />
+          <span className="font-mono tabular-nums truncate max-w-[120px]">
+            {clientDisplayLabel}
           </span>
-        </TooltipProvider>
+        </span>
       )}
 
       {/* Time range */}

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

@@ -277,6 +277,8 @@ function HeaderRows({
 
 export type LogEntryProps = {
   log: CapturedLog;
+  /** Human-facing ordinal inside the current session. Internal lookups still use `log.id`. */
+  displayNumber: number;
   viewMode?: "simple" | "full";
   /** Live "strip Claude Code billing header" flag, sourced once at the viewer
    * container. Hoisted out of `LogEntry` so a single SWR subscription serves
@@ -361,6 +363,7 @@ const HeadersDiffContent = memo(function ({
 
 export const LogEntry = memo(function ({
   log,
+  displayNumber,
   viewMode = "simple",
   strip,
   slowResponseThresholdSeconds,
@@ -734,6 +737,7 @@ export const LogEntry = memo(function ({
         />
         <LogEntryHeader
           log={displayLog}
+          displayNumber={displayNumber}
           messageCount={requestAnalysis.messageCount}
           toolCount={requestAnalysis.toolCount}
           expanded={expanded}
@@ -1051,7 +1055,12 @@ export const LogEntry = memo(function ({
         )}
       </div>
       <Suspense fallback={null}>
-        <LazyReplayDialog log={displayLog} open={replayOpen} onOpenChange={setReplayOpen} />
+        <LazyReplayDialog
+          log={displayLog}
+          displayNumber={displayNumber}
+          open={replayOpen}
+          onOpenChange={setReplayOpen}
+        />
       </Suspense>
     </TooltipProvider>
   );

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

@@ -32,6 +32,7 @@ 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-400/[0.08] text-emerald-200 border-emerald-300/25",
@@ -155,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). */
@@ -184,6 +187,7 @@ export type LogEntryHeaderProps = {
 
 export const LogEntryHeader = memo(function ({
   log,
+  displayNumber,
   messageCount = null,
   toolCount = null,
   expanded,
@@ -249,6 +253,14 @@ export const LogEntryHeader = memo(function ({
           )}
           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={cn(
@@ -257,10 +269,9 @@ export const LogEntryHeader = memo(function ({
           )}
         >
           <span className={cn("size-1.5 rounded-full", statusCue.dot)} aria-hidden="true" />
-          <span className="text-[9px] font-semibold uppercase tracking-normal text-current/65">
-            Shot
+          <span className="text-xs font-semibold tabular-nums" title={`Log ID ${String(log.id)}`}>
+            #{displayNumber}
           </span>
-          <span className="text-xs font-semibold tabular-nums">#{log.id}</span>
         </span>
 
         {/* Request start time */}
@@ -271,10 +282,6 @@ export const LogEntryHeader = memo(function ({
           </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. */}
@@ -608,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>