@tonyclaw/agent-inspector 2.0.3 → 2.0.4

package/src/components/providers/SettingsDialog.tsx

@@ -6,7 +6,11 @@ import { Button } from "../ui/button";
 import { ProvidersPanel } from "./ProvidersPanel";
 import { useProviders } from "../../lib/useProviders";
 import { useStripConfig } from "../../lib/useStripConfig";
-import { MAX_SLOW_RESPONSE_THRESHOLD_SECONDS } from "../../lib/runtimeConfig";
+import {
+  MAX_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  TimeDisplayFormatSchema,
+  type TimeDisplayFormat,
+} from "../../lib/runtimeConfig";
 
 export function SettingsDialog(): JSX.Element {
   const [open, setOpen] = useState(false);
@@ -100,9 +104,11 @@ function ProxySettingsTab(): JSX.Element {
   const {
     strip,
     slowResponseThresholdSeconds,
+    timeDisplayFormat,
     isLoading,
     setStrip,
     setSlowResponseThresholdSeconds,
+    setTimeDisplayFormat,
   } = useStripConfig();
   const [error, setError] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
@@ -137,6 +143,21 @@ function ProxySettingsTab(): JSX.Element {
     [setSlowResponseThresholdSeconds],
   );
 
+  const handleTimeDisplayFormatChange = useCallback(
+    async (next: TimeDisplayFormat) => {
+      setError(null);
+      setPending(true);
+      try {
+        await setTimeDisplayFormat(next);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setPending(false);
+      }
+    },
+    [setTimeDisplayFormat],
+  );
+
   return (
     <div className="space-y-4">
       <div className="space-y-1">
@@ -196,6 +217,29 @@ function ProxySettingsTab(): JSX.Element {
         </div>
       </div>
 
+      <div className="space-y-1">
+        <label htmlFor="time-display-format" className="text-sm font-semibold">
+          Time display
+        </label>
+        <p className="text-xs text-muted-foreground">
+          Controls timestamps in session summaries, conversation headers, and log rows.
+        </p>
+        <select
+          id="time-display-format"
+          value={timeDisplayFormat}
+          disabled={isLoading || pending}
+          onChange={(event) => {
+            const parsed = TimeDisplayFormatSchema.safeParse(event.currentTarget.value);
+            if (!parsed.success) return;
+            void handleTimeDisplayFormatChange(parsed.data);
+          }}
+          className="h-8 rounded-md border border-input bg-background px-2 text-sm disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <option value="time">Time only</option>
+          <option value="full">Full ISO</option>
+        </select>
+      </div>
+
       {error !== null && <p className="text-xs text-destructive">Failed to save: {error}</p>}
     </div>
   );

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

@@ -1,6 +1,18 @@
 import { useCallback, useMemo, useState, type JSX } from "react";
-import { AlertTriangle, Brain, Clock, Loader2, MessageSquare, Wrench, Zap } from "lucide-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";
@@ -23,6 +35,8 @@ type AgentTraceSummaryProps = {
   logs: CapturedLog[];
   scopeId: string;
   slowResponseThresholdSeconds: number;
+  showRollupMetrics: boolean;
+  timeDisplayFormat: TimeDisplayFormat;
 };
 
 function formatElapsed(ms: number | null): string {
@@ -31,25 +45,30 @@ function formatElapsed(ms: number | null): string {
   return `${(ms / 1000).toFixed(1)}s`;
 }
 
-function formatTimeRange(startedAt: string | null, endedAt: string | null): string | null {
+function formatTimeRange(
+  startedAt: string | null,
+  endedAt: string | null,
+  timeDisplayFormat: TimeDisplayFormat,
+): string | null {
   if (startedAt === null || endedAt === null) return null;
-  const format = (iso: string): string =>
-    new Date(iso).toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-    });
-  return `${format(startedAt)} - ${format(endedAt)}`;
+  return formatTimestampRange(startedAt, endedAt, timeDisplayFormat);
 }
 
-function scrollToLog(logId: number): void {
-  const target = document.getElementById(`log-${String(logId)}`);
+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 });
-  if (target.getAttribute("data-nav-action") === "expand") {
-    target.click();
-  }
 }
 
 function CandidateList({ candidates }: { candidates: KnowledgeCandidate[] }): JSX.Element | null {
@@ -74,14 +93,18 @@ function CandidateList({ candidates }: { candidates: KnowledgeCandidate[] }): JS
           </div>
           <div className="mt-1 flex flex-wrap items-center gap-1.5">
             {candidate.logIds.map((logId) => (
-              <button
+              <a
                 key={logId}
-                type="button"
-                onClick={() => scrollToLog(logId)}
-                className="rounded border border-border px-1.5 py-0.5 font-mono text-[10px] text-blue-400 transition-colors hover:bg-muted hover:text-blue-300"
+                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}
-              </button>
+              </a>
             ))}
           </div>
         </div>
@@ -94,19 +117,24 @@ 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),
-    [summary.endedAt, summary.startedAt],
+    () => formatTimeRange(summary.startedAt, summary.endedAt, timeDisplayFormat),
+    [summary.endedAt, summary.startedAt, timeDisplayFormat],
   );
 
   const createCandidates = useCallback(() => {
@@ -128,6 +156,7 @@ export function AgentTraceSummary({
         }
         const parsed = await parseJsonResponse(response, CandidateResponseSchema);
         setCandidates(parsed.candidates);
+        setCandidatesExpanded(parsed.candidates.length > 0);
         setCandidateState({ status: "ready", error: null });
       } catch (error) {
         setCandidateState({
@@ -143,20 +172,24 @@ export function AgentTraceSummary({
   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">
-        <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>
+        {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-amber-400" />
+          <Wrench className="size-3.5 text-sky-400/70" />
           {summary.toolCallCount} tools
         </span>
-        <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)}
+        {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>
-        </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" />
@@ -166,16 +199,20 @@ export function AgentTraceSummary({
             </span>
           </span>
         )}
-        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
-          <Clock className="size-3.5" />
-          <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>
-        {timeRange !== null && (
+        {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 ||
@@ -190,9 +227,11 @@ export function AgentTraceSummary({
           </span>
         )}
         <span className="flex-1" />
-        <Badge variant="outline" className="h-6 px-2 text-[10px] font-mono">
-          {summary.knowledgeCandidateCount} memory
-        </Badge>
+        {hasCandidates && (
+          <Badge variant="outline" className="h-6 px-2 text-[10px] font-mono">
+            {formatCandidateCount(summary.knowledgeCandidateCount)}
+          </Badge>
+        )}
         <Button
           type="button"
           variant="outline"
@@ -208,11 +247,30 @@ export function AgentTraceSummary({
           )}
           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>
       )}
-      <CandidateList candidates={candidates} />
+      {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,
@@ -29,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;
 };
@@ -56,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]);
@@ -63,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]);
@@ -82,6 +90,7 @@ 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))}
         />
       )}
@@ -92,6 +101,8 @@ export const ConversationGroup = memo(function ({
             logs={group.logs}
             scopeId={group.conversationId}
             slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+            showRollupMetrics={showTraceRollupMetrics}
+            timeDisplayFormat={timeDisplayFormat}
           />
           {turnGroups.map((tg) => (
             <TurnGroup
@@ -100,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

@@ -13,11 +13,10 @@ export function ToolTraceEvents({ events }: ToolTraceEventsProps): JSX.Element |
       {events.map((event) => (
         <div
           key={event.id}
-          className="flex min-w-0 items-center gap-2 rounded-md border border-amber-500/20 bg-amber-500/5 px-2.5 py-1.5 text-xs"
+          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-amber-400" />
-          <span className="font-mono font-semibold text-amber-300">{event.name}</span>
-          <span className="font-mono text-muted-foreground">#{event.logId}</span>
+          <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" />

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";
@@ -26,6 +27,7 @@ type TurnGroupProps = {
   onCompareWithPrevious: (log: CapturedLog) => void;
   comparisonPredecessors: Map<number, CapturedLog>;
   turnIndex?: number;
+  timeDisplayFormat: TimeDisplayFormat;
 };
 
 export const TurnGroup = memo(function TurnGroup({
@@ -37,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;
@@ -331,6 +334,7 @@ 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

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",
 };