@tonyclaw/agent-inspector 3.0.23 → 3.0.24

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

@@ -39,6 +39,7 @@ import { RequestTools } from "./RequestToolsPanel";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { getLogFormatAdapter, resolveLogFormat } from "./log-formats";
 import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest, type LogFocusTab } from "./logFocus";
+import type { ToolTraceEvent } from "./viewerState";
 import {
   shouldShowHeadersDiffButton,
   shouldShowHeadersTab,
@@ -353,6 +354,8 @@ export type LogEntryProps = {
   onCompareWithPrevious?: (log: CapturedLog) => void;
   /** Show client PID/project metadata on the log header row. */
   showClientMetadata?: boolean;
+  /** Tools called by the response, rendered in the compact log header. */
+  toolEvents?: ToolTraceEvent[];
 };
 
 function DiffToggleButton({
@@ -427,6 +430,7 @@ export const LogEntry = memo(function ({
   cacheTrend = null,
   onCompareWithPrevious,
   showClientMetadata = true,
+  toolEvents = [],
 }: LogEntryProps): JSX.Element {
   const [expanded, setExpanded] = useState<boolean>(false);
   const [replayOpen, setReplayOpen] = useState<boolean>(false);
@@ -831,6 +835,7 @@ export const LogEntry = memo(function ({
           displayNumber={displayNumber}
           messageCount={requestAnalysis.messageCount}
           toolCount={requestAnalysis.toolCount}
+          toolEvents={toolEvents}
           expanded={expanded}
           onToggle={handleToggleExpanded}
           cacheTrend={cacheTrend}

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

@@ -32,6 +32,8 @@ 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",
@@ -150,6 +152,8 @@ export type LogEntryHeaderProps = {
   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
@@ -180,6 +184,7 @@ export const LogEntryHeader = memo(function ({
   displayNumber,
   messageCount = null,
   toolCount = null,
+  toolEvents = [],
   expanded,
   onToggle,
   cacheTrend = null,
@@ -406,6 +411,8 @@ export const LogEntryHeader = memo(function ({
             </span>
           )}
 
+          <ToolTraceEvents events={toolEvents} />
+
           {/* Origin */}
           {log.origin !== null && (
             <span

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

@@ -1,67 +1,64 @@
-import { type JSX } from "react";
-import { AlertTriangle, Wrench } from "lucide-react";
+import { type JSX, type MouseEvent } from "react";
+import { Wrench } from "lucide-react";
 import type { ToolTraceEvent } from "./viewerState";
 import { dispatchLogFocusRequest } from "./logFocus";
 
 type ToolTraceEventsProps = {
   events: ToolTraceEvent[];
-  warnings?: readonly string[];
 };
 
-const VISIBLE_TOOL_LIMIT = 4;
+const VISIBLE_TOOL_LIMIT = 3;
 
 function ToolTraceEventChip({ event }: { event: ToolTraceEvent }): JSX.Element {
+  const handleClick = (clickEvent: MouseEvent<HTMLButtonElement>): void => {
+    clickEvent.stopPropagation();
+    dispatchLogFocusRequest({
+      logId: event.logId,
+      tab: "response",
+      toolCallIndex: event.index,
+    });
+  };
+
   return (
     <button
       type="button"
-      key={event.id}
-      className="inline-flex h-6 max-w-[11rem] min-w-0 items-center gap-1 rounded-md bg-white/[0.028] px-1.5 text-[11px] text-muted-foreground transition-colors hover:bg-sky-400/[0.08] hover:text-sky-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      onClick={() =>
-        dispatchLogFocusRequest({
-          logId: event.logId,
-          tab: "response",
-          toolCallIndex: event.index,
-        })
-      }
+      className="inline-flex h-5 min-w-0 max-w-[8.5rem] items-center rounded px-1.5 text-[10px] text-muted-foreground transition-colors hover:bg-background/65 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      onClick={handleClick}
+      onKeyDown={(keyEvent) => keyEvent.stopPropagation()}
       aria-label={`Open response tool call ${event.name}`}
+      title={event.name}
     >
-      <Wrench className="size-3 shrink-0 text-sky-400/65" />
       <span className="min-w-0 truncate font-mono font-semibold">{event.name}</span>
     </button>
   );
 }
 
-export function ToolTraceEvents({
-  events,
-  warnings = [],
-}: ToolTraceEventsProps): JSX.Element | null {
-  if (events.length === 0 && warnings.length === 0) return null;
+export function ToolTraceEvents({ events }: ToolTraceEventsProps): JSX.Element | null {
+  if (events.length === 0) return null;
   const visibleEvents = events.slice(0, VISIBLE_TOOL_LIMIT);
   const hiddenCount = Math.max(0, events.length - visibleEvents.length);
   return (
-    <div className="mx-3 mb-2 flex min-w-0 items-center gap-1.5 overflow-hidden rounded-md bg-black/[0.10] px-2 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.025)]">
-      {events.length > 0 && (
-        <span className="inline-flex h-6 shrink-0 items-center gap-1 rounded-md px-1.5 font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-sky-300/70">
-          <Wrench className="size-3" />
-          {events.length}
-        </span>
-      )}
-      {warnings.length > 0 && (
-        <span className="inline-flex h-6 shrink-0 items-center gap-1 rounded-md border border-amber-300/20 bg-amber-300/[0.08] px-1.5 font-mono text-[10px] font-semibold text-amber-100">
-          <AlertTriangle className="size-3" />
-          {warnings.length}
-        </span>
-      )}
-      <div className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
+    <span
+      className="inline-flex h-7 min-w-0 max-w-full items-center gap-1 overflow-hidden rounded-md border border-cyan-300/10 bg-cyan-300/[0.055] px-1 sm:max-w-[26rem]"
+      role="group"
+      aria-label={`${events.length} response tool ${events.length === 1 ? "call" : "calls"}`}
+      onClick={(clickEvent) => clickEvent.stopPropagation()}
+      onKeyDown={(keyEvent) => keyEvent.stopPropagation()}
+    >
+      <span className="inline-flex h-5 shrink-0 items-center gap-1 px-1 font-mono text-[9px] font-semibold uppercase text-cyan-300">
+        <Wrench className="size-3" />
+        Call {events.length}
+      </span>
+      <span className="flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden">
         {visibleEvents.map((event) => (
           <ToolTraceEventChip key={event.id} event={event} />
         ))}
         {hiddenCount > 0 && (
-          <span className="inline-flex h-6 shrink-0 items-center rounded-md bg-white/[0.025] px-1.5 font-mono text-[11px] font-semibold text-muted-foreground">
+          <span className="inline-flex h-5 shrink-0 items-center rounded px-1 font-mono text-[10px] font-semibold text-muted-foreground">
             +{hiddenCount}
           </span>
         )}
-      </div>
-    </div>
+      </span>
+    </span>
   );
 }

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

@@ -24,7 +24,6 @@ import {
   type LogFocusRequest,
 } from "./logFocus";
 import { ThreadConnector } from "./ThreadConnector";
-import { ToolTraceEvents } from "./ToolTraceEvents";
 import { extractToolTraceEvents, isTurnCollapsible, type TurnEntry } from "./viewerState";
 
 function formatElapsed(ms: number): string {
@@ -358,14 +357,11 @@ export const TurnGroup = memo(function TurnGroup({
                   timeDisplayFormat={timeDisplayFormat}
                   cacheTrend={cacheTrends?.get(log.id) ?? null}
                   showClientMetadata={showLogClientMetadata}
+                  toolEvents={toolEventsByLogId.get(log.id)}
                   onCompareWithPrevious={
                     comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined
                   }
                 />
-                <ToolTraceEvents
-                  events={toolEventsByLogId.get(log.id) ?? []}
-                  warnings={log.warnings ?? []}
-                />
               </div>
             </div>
           );

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

@@ -0,0 +1,46 @@
+import type { CapturedLog } from "../../contracts";
+
+/**
+ * Filter logs by selected session/model. Both `__all__` and missing values
+ * pass through. Returns the input array reference when no log matches the
+ * filter, so referential equality is preserved for empty results.
+ */
+export function filterLogs(
+  logs: CapturedLog[],
+  selectedSession: string,
+  selectedModel: string,
+): CapturedLog[] {
+  if (selectedSession === "__all__" && selectedModel === "__all__") return logs;
+  return logs.filter((l) => {
+    if (selectedSession !== "__all__" && l.sessionId !== selectedSession) return false;
+    if (selectedModel !== "__all__" && l.model !== selectedModel) return false;
+    return true;
+  });
+}
+
+export function mergeLogsById(
+  previousLogs: readonly CapturedLog[],
+  incomingLogs: readonly CapturedLog[],
+): CapturedLog[] {
+  if (previousLogs.length === 0) return [...incomingLogs];
+  if (incomingLogs.length === 0) return [...previousLogs];
+
+  const byId = new Map<number, CapturedLog>();
+  for (const log of previousLogs) byId.set(log.id, log);
+  for (const log of incomingLogs) byId.set(log.id, log);
+  return [...byId.values()].toSorted((left, right) => left.id - right.id);
+}
+
+export function mergeSessionIds(
+  previousSessions: readonly string[],
+  incomingSessions: readonly string[],
+): string[] {
+  const merged = new Set<string>();
+  for (const session of previousSessions) {
+    if (session !== "") merged.add(session);
+  }
+  for (const session of incomingSessions) {
+    if (session !== "") merged.add(session);
+  }
+  return [...merged].sort();
+}