@tonyclaw/agent-inspector 2.0.2 → 2.0.4

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

@@ -0,0 +1,276 @@
+import { useCallback, useMemo, useState, type JSX } from "react";
+import {
+  AlertTriangle,
+  Brain,
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  Loader2,
+  MessageSquare,
+  Wrench,
+  Zap,
+} from "lucide-react";
+import { z } from "zod";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
+import { formatTimestampRange } from "../../lib/timeDisplay";
+import { formatTokens } from "../../lib/utils";
+import { parseJsonResponse, readApiError } from "../../lib/apiClient";
+import { KnowledgeCandidateSchema, type KnowledgeCandidate } from "../../knowledge/types";
+import type { CapturedLog } from "../../proxy/schemas";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { buildTraceSummary } from "./viewerState";
+
+const CandidateResponseSchema = z.object({
+  candidates: z.array(KnowledgeCandidateSchema),
+});
+
+type CandidateLoadState =
+  | { status: "idle"; error: null }
+  | { status: "loading"; error: null }
+  | { status: "ready"; error: null }
+  | { status: "failed"; error: string };
+
+type AgentTraceSummaryProps = {
+  logs: CapturedLog[];
+  scopeId: string;
+  slowResponseThresholdSeconds: number;
+  showRollupMetrics: boolean;
+  timeDisplayFormat: TimeDisplayFormat;
+};
+
+function formatElapsed(ms: number | null): string {
+  if (ms === null) return "-";
+  if (ms < 1000) return `${String(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function formatTimeRange(
+  startedAt: string | null,
+  endedAt: string | null,
+  timeDisplayFormat: TimeDisplayFormat,
+): string | null {
+  if (startedAt === null || endedAt === null) return null;
+  return formatTimestampRange(startedAt, endedAt, timeDisplayFormat);
+}
+
+function formatCandidateCount(count: number): string {
+  return `${String(count)} candidate${count === 1 ? "" : "s"}`;
+}
+
+function getLogAnchor(logId: number): string {
+  return `log-${String(logId)}`;
+}
+
+function jumpToLog(logId: number): void {
+  const anchor = getLogAnchor(logId);
+  const target = document.getElementById(anchor);
+  window.history.replaceState(null, "", `#${anchor}`);
+  if (!(target instanceof HTMLElement)) return;
+  target.scrollIntoView({ block: "center", behavior: "smooth" });
+  target.focus({ preventScroll: true });
+}
+
+function CandidateList({ candidates }: { candidates: KnowledgeCandidate[] }): JSX.Element | null {
+  if (candidates.length === 0) return null;
+  return (
+    <div className="mt-2 grid gap-1.5">
+      {candidates.map((candidate) => (
+        <div
+          key={candidate.id}
+          className="rounded-md border border-border/80 bg-background/60 px-2.5 py-2"
+        >
+          <div className="flex min-w-0 items-center gap-2">
+            <Badge variant="outline" className="h-5 px-1.5 text-[10px] font-mono">
+              {candidate.type}
+            </Badge>
+            <span className="min-w-0 flex-1 truncate text-xs font-medium" title={candidate.title}>
+              {candidate.title}
+            </span>
+            <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
+              {candidate.status}
+            </span>
+          </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>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function AgentTraceSummary({
+  logs,
+  scopeId,
+  slowResponseThresholdSeconds,
+  showRollupMetrics,
+  timeDisplayFormat,
+}: AgentTraceSummaryProps): JSX.Element | null {
+  const [candidates, setCandidates] = useState<KnowledgeCandidate[]>([]);
+  const [candidatesExpanded, setCandidatesExpanded] = useState(true);
+  const [candidateState, setCandidateState] = useState<CandidateLoadState>({
+    status: "idle",
+    error: null,
+  });
+  const hasCandidates = candidates.length > 0;
+  const summary = useMemo(
+    () => buildTraceSummary(logs, slowResponseThresholdSeconds, candidates.length),
+    [candidates.length, logs, slowResponseThresholdSeconds],
+  );
+  const showElapsedSummary = showRollupMetrics || summary.maxElapsedMs !== null;
+  const timeRange = useMemo(
+    () => formatTimeRange(summary.startedAt, summary.endedAt, timeDisplayFormat),
+    [summary.endedAt, summary.startedAt, timeDisplayFormat],
+  );
+
+  const createCandidates = useCallback(() => {
+    if (logs.length === 0 || candidateState.status === "loading") return;
+    setCandidateState({ status: "loading", error: null });
+    void (async () => {
+      try {
+        const response = await fetch(
+          `/api/knowledge/sessions/${encodeURIComponent(scopeId)}/candidates`,
+          { method: "POST" },
+        );
+        if (!response.ok) {
+          const message = await readApiError(
+            response,
+            `Candidate generation failed with ${String(response.status)}`,
+          );
+          setCandidateState({ status: "failed", error: message });
+          return;
+        }
+        const parsed = await parseJsonResponse(response, CandidateResponseSchema);
+        setCandidates(parsed.candidates);
+        setCandidatesExpanded(parsed.candidates.length > 0);
+        setCandidateState({ status: "ready", error: null });
+      } catch (error) {
+        setCandidateState({
+          status: "failed",
+          error: error instanceof Error ? error.message : "Candidate response was invalid",
+        });
+      }
+    })();
+  }, [candidateState.status, logs.length, scopeId]);
+
+  if (logs.length === 0) return null;
+
+  return (
+    <section className="mb-2 rounded-lg border border-border bg-muted/10 px-3 py-2">
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-xs">
+        {showRollupMetrics && (
+          <span className="inline-flex items-center gap-1.5 font-semibold text-foreground">
+            <MessageSquare className="size-3.5 text-blue-400" />
+            {summary.llmCallCount} LLM
+          </span>
+        )}
+        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+          <Wrench className="size-3.5 text-sky-400/70" />
+          {summary.toolCallCount} tools
+        </span>
+        {showRollupMetrics && (
+          <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+            <Zap className="size-3.5 text-emerald-400" />
+            <span className="font-mono">
+              {formatTokens(summary.totalInputTokens)} / {formatTokens(summary.totalOutputTokens)}
+            </span>
+          </span>
+        )}
+        {(summary.totalCacheCreationInputTokens > 0 || summary.totalCacheReadInputTokens > 0) && (
+          <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+            <Zap className="size-3.5 text-purple-400" />
+            <span className="font-mono">
+              +{formatTokens(summary.totalCacheCreationInputTokens)} / ~
+              {formatTokens(summary.totalCacheReadInputTokens)}
+            </span>
+          </span>
+        )}
+        {showElapsedSummary && (
+          <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+            <Clock className="size-3.5" />
+            {showRollupMetrics && (
+              <span className="font-mono">{formatElapsed(summary.totalElapsedMs)}</span>
+            )}
+            {summary.maxElapsedMs !== null && (
+              <span className="font-mono text-muted-foreground/70">
+                max {formatElapsed(summary.maxElapsedMs)}
+              </span>
+            )}
+          </span>
+        )}
+        {showRollupMetrics && timeRange !== null && (
+          <span className="font-mono text-muted-foreground/70">{timeRange}</span>
+        )}
+        {(summary.failedCallCount > 0 ||
+          summary.pendingCallCount > 0 ||
+          summary.slowCallCount > 0) && (
+          <span className="inline-flex items-center gap-1.5 text-amber-400">
+            <AlertTriangle className="size-3.5" />
+            <span className="font-mono">
+              {summary.failedCallCount} fail / {summary.pendingCallCount} pending /{" "}
+              {summary.slowCallCount} slow
+            </span>
+          </span>
+        )}
+        <span className="flex-1" />
+        {hasCandidates && (
+          <Badge variant="outline" className="h-6 px-2 text-[10px] font-mono">
+            {formatCandidateCount(summary.knowledgeCandidateCount)}
+          </Badge>
+        )}
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="h-7 gap-1.5 px-2 text-xs"
+          onClick={createCandidates}
+          disabled={candidateState.status === "loading"}
+        >
+          {candidateState.status === "loading" ? (
+            <Loader2 className="size-3.5 animate-spin" />
+          ) : (
+            <Brain className="size-3.5" />
+          )}
+          Candidate
+        </Button>
+        {hasCandidates && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-7 text-muted-foreground"
+            onClick={() => setCandidatesExpanded((value) => !value)}
+            aria-expanded={candidatesExpanded}
+            aria-label={
+              candidatesExpanded ? "Collapse memory candidates" : "Expand memory candidates"
+            }
+          >
+            {candidatesExpanded ? (
+              <ChevronDown className="size-3.5" />
+            ) : (
+              <ChevronRight className="size-3.5" />
+            )}
+          </Button>
+        )}
+      </div>
+      {candidateState.status === "failed" && (
+        <p className="mt-2 text-xs text-destructive">{candidateState.error}</p>
+      )}
+      {candidatesExpanded && <CandidateList candidates={candidates} />}
+    </section>
+  );
+}

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

@@ -0,0 +1,16 @@
+import type { JSX } from "react";
+import ReactMarkdown from "react-markdown";
+
+const ANSWER_MARKDOWN_CLASS =
+  "prose prose-sm dark:prose-invert max-w-none text-[13px] leading-[1.65] " +
+  "[&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] " +
+  "[&_p]:my-1 [&_p]:leading-[1.65] [&_ul]:my-1 [&_ol]:my-1 [&_li]:my-0.5 " +
+  "[&_li]:leading-[1.6]";
+
+export function AnswerMarkdown({ text }: { text: string }): JSX.Element {
+  return (
+    <div className={ANSWER_MARKDOWN_CLASS}>
+      <ReactMarkdown>{text}</ReactMarkdown>
+    </div>
+  );
+}

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

@@ -1,5 +1,6 @@
 import { useState, memo, useMemo } from "react";
 import type { JSX } from "react";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import type { CapturedLog } from "../../proxy/schemas";
 import {
   ConversationHeader,
@@ -8,6 +9,7 @@ import {
   type ConversationGroupData,
 } from "./ConversationHeader";
 import { TurnGroup } from "./TurnGroup";
+import { AgentTraceSummary } from "./AgentTraceSummary";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { buildTurnGroups, shouldRenderConversationContent } from "./viewerState";
 
@@ -28,6 +30,10 @@ export type ConversationGroupProps = {
   comparisonPredecessors: Map<number, CapturedLog>;
   /** When true, skip the group header and render content directly. */
   standalone?: boolean;
+  /** When true, the route-level session context already shows rollup metrics. */
+  hasPinnedSessionContext?: boolean;
+  /** Controls whether timestamps render as compact local time or full ISO strings. */
+  timeDisplayFormat: TimeDisplayFormat;
   /** Clear all logs that belong to this group. */
   onClearGroup: (ids: number[]) => void;
 };
@@ -55,6 +61,8 @@ export const ConversationGroup = memo(function ({
   comparisonPredecessors,
   onClearGroup,
   standalone = false,
+  hasPinnedSessionContext = false,
+  timeDisplayFormat,
 }: ConversationGroupProps): JSX.Element {
   const [expanded, setExpanded] = useState(false);
   const stats = useMemo(() => computeStats(group.logs), [group.logs]);
@@ -62,6 +70,7 @@ export const ConversationGroup = memo(function ({
   const endTime = group.logs[group.logs.length - 1]?.timestamp ?? new Date().toISOString();
   const mixed = hasMixedApiFormat(group.logs);
   const isLoading = group.logs.some((log) => log.responseStatus === null);
+  const showTraceRollupMetrics = standalone && !hasPinnedSessionContext;
 
   // Pre-compute stop reasons for each log — used by turnIndices
   const turnGroups = useMemo(() => buildTurnGroups(group.logs), [group.logs]);
@@ -81,12 +90,20 @@ export const ConversationGroup = memo(function ({
           hideApiFormat={mixed}
           isLoading={isLoading}
           userAgent={group.logs[0]?.userAgent ?? null}
+          timeDisplayFormat={timeDisplayFormat}
           onClear={() => onClearGroup(group.logs.map((l) => l.id))}
         />
       )}
 
       {shouldRenderConversationContent(standalone, expanded) && (
         <div>
+          <AgentTraceSummary
+            logs={group.logs}
+            scopeId={group.conversationId}
+            slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+            showRollupMetrics={showTraceRollupMetrics}
+            timeDisplayFormat={timeDisplayFormat}
+          />
           {turnGroups.map((tg) => (
             <TurnGroup
               key={tg.turnIndex}
@@ -94,6 +111,7 @@ export const ConversationGroup = memo(function ({
               viewMode={viewMode}
               strip={strip}
               slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+              timeDisplayFormat={timeDisplayFormat}
               cacheTrends={cacheTrends}
               onCompareWithPrevious={onCompareWithPrevious}
               comparisonPredecessors={comparisonPredecessors}

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

@@ -12,6 +12,8 @@ import {
 } from "lucide-react";
 import type { JSX } from "react";
 import { getSessionPath } from "../../lib/sessionUrl";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
+import { formatTimestampRange } from "../../lib/timeDisplay";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
@@ -43,16 +45,13 @@ export type ConversationHeaderProps = {
   isLoading?: boolean;
   /** User-Agent string from the first log in the group. */
   userAgent?: string | null;
+  /** Controls whether timestamps render as compact local time or full ISO strings. */
+  timeDisplayFormat: TimeDisplayFormat;
   /** Clear all logs in this group. After confirmation the parent removes them
    *  from the in-memory store; this header is then unmounted. */
   onClear?: () => void;
 };
 
-function formatTimestamp(iso: string): string {
-  const date = new Date(iso);
-  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
-}
-
 export function ConversationHeader({
   conversationId,
   startTime,
@@ -66,6 +65,7 @@ export function ConversationHeader({
   hideApiFormat = false,
   isLoading = false,
   userAgent,
+  timeDisplayFormat,
   onClear,
 }: ConversationHeaderProps): JSX.Element {
   const [confirmOpen, setConfirmOpen] = useState(false);
@@ -157,7 +157,7 @@ export function ConversationHeader({
       <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
         <Clock className="size-3" />
         <span className="font-mono tabular-nums">
-          {formatTimestamp(startTime)} - {formatTimestamp(endTime)}
+          {formatTimestampRange(startTime, endTime, timeDisplayFormat)}
         </span>
       </span>
 

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

@@ -2,6 +2,7 @@ import { GitCompareArrows } from "lucide-react";
 import { Suspense, type JSX } from "react";
 import { useMemo, useRef, useState, memo } from "react";
 import type { CapturedLog } from "../../proxy/schemas";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
@@ -48,6 +49,8 @@ export type LogEntryProps = {
   strip: boolean;
   /** Slow-response threshold in seconds. `0` disables the warning indicator. */
   slowResponseThresholdSeconds: number;
+  /** Controls whether timestamps render as compact local time or full ISO strings. */
+  timeDisplayFormat: TimeDisplayFormat;
   /**
    * Per-log cache token trend, looked up in the viewer-level trend map.
    * `null` (or absent) means the header should render with no arrows.
@@ -119,6 +122,7 @@ export const LogEntry = memo(function ({
   viewMode = "simple",
   strip,
   slowResponseThresholdSeconds,
+  timeDisplayFormat,
   cacheTrend = null,
   onCompareWithPrevious,
 }: LogEntryProps): JSX.Element {
@@ -135,10 +139,6 @@ export const LogEntry = memo(function ({
     () => adapter.analyzeRequest(log.rawRequestBody),
     [adapter, log.rawRequestBody],
   );
-  const responseAnalysis = useMemo(
-    () => adapter.analyzeResponse(log.responseText),
-    [adapter, log.responseText],
-  );
   const strippedRequestBody = useMemo(() => {
     if (!strip || resolvedFormat !== "anthropic" || log.rawRequestBody === null) {
       return null;
@@ -296,9 +296,9 @@ export const LogEntry = memo(function ({
           toolCount={requestAnalysis.toolCount}
           expanded={expanded}
           onToggle={() => setExpanded(!expanded)}
-          responseToolNames={responseAnalysis.toolNames}
           cacheTrend={cacheTrend}
           slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+          timeDisplayFormat={timeDisplayFormat}
           activeTab={activeTab}
           tabActions={tabActions}
           onReplay={

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

@@ -22,7 +22,9 @@ import {
   Zap,
 } from "lucide-react";
 import type { JSX, MouseEvent } from "react";
-import { memo, useMemo } 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 "../../proxy/schemas";
 import { Badge } from "../ui/badge";
@@ -105,8 +107,6 @@ export type LogEntryHeaderProps = {
   toolCount?: number | null;
   expanded: boolean;
   onToggle: () => void;
-  /** Tool call names extracted from the model response (e.g., ["read_file", "grep"]). */
-  responseToolNames?: string[] | null;
   /** 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.
@@ -124,6 +124,8 @@ export type LogEntryHeaderProps = {
   onReplay?: () => void;
   /** Slow-response threshold in seconds. `0` disables the warning indicator. */
   slowResponseThresholdSeconds?: number;
+  /** Controls whether timestamps render as compact local time or full ISO strings. */
+  timeDisplayFormat: TimeDisplayFormat;
 };
 
 export const LogEntryHeader = memo(function ({
@@ -132,12 +134,12 @@ export const LogEntryHeader = memo(function ({
   toolCount = null,
   expanded,
   onToggle,
-  responseToolNames = null,
   cacheTrend = null,
   activeTab,
   tabActions,
   onReplay,
   slowResponseThresholdSeconds = 0,
+  timeDisplayFormat,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
   const isSlowResponse =
@@ -146,7 +148,6 @@ export const LogEntryHeader = memo(function ({
     log.elapsedMs > slowResponseThresholdSeconds * 1000;
 
   const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
-  const toolNamesJoined = useMemo(() => responseToolNames?.join(", ") ?? null, [responseToolNames]);
 
   return (
     <TooltipProvider>
@@ -178,7 +179,9 @@ export const LogEntryHeader = memo(function ({
         {/* Request start time */}
         <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
           <Clock className="size-3" />
-          <span className="font-mono tabular-nums">{log.timestamp}</span>
+          <span className="font-mono tabular-nums" title={log.timestamp}>
+            {formatTimestamp(log.timestamp, timeDisplayFormat)}
+          </span>
         </span>
 
         {/* Model — logo icon only, model name in tooltip */}
@@ -303,14 +306,6 @@ export const LogEntryHeader = memo(function ({
           </span>
         )}
 
-        {/* Response tool calls — tool names the model requested to invoke */}
-        {responseToolNames !== null && responseToolNames.length > 0 && (
-          <span className="flex items-center gap-1 text-amber-400/80 text-xs shrink-0">
-            <Wrench className="size-3" />
-            <span className="font-mono tabular-nums truncate max-w-[160px]">{toolNamesJoined}</span>
-          </span>
-        )}
-
         {/* Origin */}
         {log.origin !== null && (
           <span

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

@@ -2,9 +2,9 @@ import { AlertTriangle, Zap } from "lucide-react";
 import type { JSX } from "react";
 import { memo } from "react";
 import { useMemo } from "react";
-import ReactMarkdown from "react-markdown";
 import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
 import type { RequestFormat } from "../../proxy/schemas";
+import { AnswerMarkdown } from "./AnswerMarkdown";
 import { formatViewFor } from "./formats";
 import { getLogFormatAdapter } from "./log-formats";
 
@@ -61,11 +61,7 @@ function ErrorResponseView({ text }: { text: string }): JSX.Element {
 }
 
 function MarkdownFallbackView({ text }: { text: string }): JSX.Element {
-  return (
-    <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
-      <ReactMarkdown>{text}</ReactMarkdown>
-    </div>
-  );
+  return <AnswerMarkdown text={text} />;
 }
 
 export const ResponseView = memo(function ResponseView({

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

@@ -0,0 +1,32 @@
+import { type JSX } from "react";
+import { ChevronRight, Wrench } from "lucide-react";
+import type { ToolTraceEvent } from "./viewerState";
+
+type ToolTraceEventsProps = {
+  events: ToolTraceEvent[];
+};
+
+export function ToolTraceEvents({ events }: ToolTraceEventsProps): JSX.Element | null {
+  if (events.length === 0) return null;
+  return (
+    <div className="mx-3 mb-2 grid gap-1.5">
+      {events.map((event) => (
+        <div
+          key={event.id}
+          className="flex min-w-0 items-center gap-2 rounded-md border border-border/70 bg-muted/20 px-2.5 py-1.5 text-xs"
+        >
+          <Wrench className="size-3.5 shrink-0 text-sky-400/70" />
+          <span className="font-mono font-semibold text-foreground/80">{event.name}</span>
+          {event.argumentsPreview !== null && (
+            <>
+              <ChevronRight className="size-3 shrink-0 text-muted-foreground/60" />
+              <span className="min-w-0 truncate font-mono text-muted-foreground">
+                {event.argumentsPreview}
+              </span>
+            </>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -1,6 +1,7 @@
 import { type JSX, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AlertTriangle, ChevronRight, Clock, Zap } from "lucide-react";
 import { isTurnBoundary } from "../../lib/stopReason";
+import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { getCrabVariant } from "../ui/crab-variants";
@@ -9,7 +10,8 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
 import { ThreadConnector } from "./ThreadConnector";
-import { isTurnCollapsible, type TurnEntry } from "./viewerState";
+import { ToolTraceEvents } from "./ToolTraceEvents";
+import { extractToolTraceEvents, isTurnCollapsible, type TurnEntry } from "./viewerState";
 
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
@@ -25,6 +27,7 @@ type TurnGroupProps = {
   onCompareWithPrevious: (log: CapturedLog) => void;
   comparisonPredecessors: Map<number, CapturedLog>;
   turnIndex?: number;
+  timeDisplayFormat: TimeDisplayFormat;
 };
 
 export const TurnGroup = memo(function TurnGroup({
@@ -36,6 +39,7 @@ export const TurnGroup = memo(function TurnGroup({
   onCompareWithPrevious,
   comparisonPredecessors,
   turnIndex = 0,
+  timeDisplayFormat,
 }: TurnGroupProps): JSX.Element {
   const lastIdx = entries.length - 1;
   const lastStop = entries[lastIdx]?.stopReason ?? null;
@@ -106,6 +110,14 @@ export const TurnGroup = memo(function TurnGroup({
     aggregate.maxElapsed !== null &&
     slowResponseThresholdSeconds > 0 &&
     aggregate.maxElapsed > slowResponseThresholdSeconds * 1000;
+  const toolEventsByLogId = useMemo(() => {
+    const events = new Map<number, ReturnType<typeof extractToolTraceEvents>>();
+    for (const entry of entries) {
+      const extracted = extractToolTraceEvents(entry.log);
+      if (extracted.length > 0) events.set(entry.log.id, extracted);
+    }
+    return events;
+  }, [entries]);
 
   // ResizeObserver → re-render connectors when any LogEntry height changes
   const [layoutVersion, setLayoutVersion] = useState(0);
@@ -322,11 +334,13 @@ export const TurnGroup = memo(function TurnGroup({
                   viewMode={viewMode}
                   strip={strip}
                   slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+                  timeDisplayFormat={timeDisplayFormat}
                   cacheTrend={cacheTrends?.get(log.id) ?? null}
                   onCompareWithPrevious={
                     comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined
                   }
                 />
+                <ToolTraceEvents events={toolEventsByLogId.get(log.id) ?? []} />
               </div>
             </div>
           );

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

@@ -7,7 +7,7 @@ const ROLE_COLOR_CLASSES: Record<AnatomyRole, string> = {
   system: "bg-sky-500/70",
   user: "bg-emerald-500/70",
   assistant: "bg-violet-500/70",
-  tool: "bg-amber-500/70",
+  tool: "bg-sky-400/55",
   tools: "bg-slate-500/70",
 };
 
@@ -15,7 +15,7 @@ const ROLE_FOCUS_RING: Record<AnatomyRole, string> = {
   system: "focus-visible:ring-sky-300",
   user: "focus-visible:ring-emerald-300",
   assistant: "focus-visible:ring-violet-300",
-  tool: "focus-visible:ring-amber-300",
+  tool: "focus-visible:ring-sky-300",
   tools: "focus-visible:ring-slate-300",
 };