@tonyclaw/agent-inspector 2.0.2 → 2.0.4

package/.output/server/_ssr/{ProxyViewerContainer-249bTH-T.mjs → ProxyViewerContainer-Cckz5qKu.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, D as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, a as RuntimeConfigSchema, r as requestFormatForPath, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, d as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, g as getSessionPath, e as ProviderConfigSchema, s as stripClaudeCodeBillingHeader, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, b as AnthropicRequestSchema } from "./router-to_OJirX.mjs";
+import { C as CapturedLogSchema, D as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, a as DEFAULT_TIME_DISPLAY_FORMAT, b as RuntimeConfigSchema, r as requestFormatForPath, e as createPendingProviderTestResults, P as ProviderTestResultsSchema, f as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, T as TimeDisplayFormatSchema, g as getSessionPath, h as ProviderConfigSchema, K as KnowledgeCandidateSchema, s as stripClaudeCodeBillingHeader, d as safeGetOwnProperty, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, c as AnthropicRequestSchema } from "./router-Dgkv5nKP.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
 import { J as JSZip } from "../_libs/jszip.mjs";
 import { c as clsx } from "../_libs/clsx.mjs";
@@ -9,7 +9,7 @@ import { R as Root, T as Trigger$2, C as Content, a as Close, b as Title, P as P
 import { d as diffJson, a as diffLines } from "../_libs/diff.mjs";
 import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { R as Root2, T as Trigger, I as Icon, V as Value, P as Portal, C as Content2, a as Viewport, b as Item, c as ItemIndicator, d as ItemText, S as ScrollUpButton, e as ScrollDownButton } from "../_libs/radix-ui__react-select.mjs";
-import { C as Check, X, P as Plus, D as Download, S as Settings, A as ArrowLeft, a as Copy, b as ChevronDown, U as Upload, c as Scan, d as CircleAlert, e as ChevronUp, L as LoaderCircle, f as ChevronRight, g as User, h as Clock, M as MessageSquare, Z as Zap, E as ExternalLink, T as Trash2, i as TriangleAlert, j as EyeOff, k as Eye, R as RotateCw, l as Pencil, m as Minus, n as CircleCheckBig, O as OctagonAlert, W as Wrench, G as Globe, F as FileTerminal, o as Radio, p as ChevronsUp, q as ChevronsDown, r as FileDiff, H as History, s as RotateCcw, t as GitCompareArrows, u as CircleQuestionMark, v as Server, w as Gauge, x as Lock, y as Wifi, z as WifiOff, B as ArrowUp, I as ArrowDown, J as Rows3, K as Columns2 } from "../_libs/lucide-react.mjs";
+import { C as Check, X, P as Plus, D as Download, S as Settings, A as ArrowLeft, a as Copy, b as ChevronDown, U as Upload, c as Scan, d as CircleAlert, e as ChevronUp, L as LoaderCircle, f as ChevronRight, g as User, h as Clock, M as MessageSquare, Z as Zap, E as ExternalLink, T as Trash2, W as Wrench, i as TriangleAlert, B as Brain, j as EyeOff, k as Eye, R as RotateCw, l as Pencil, m as Minus, n as CircleCheckBig, O as OctagonAlert, G as Globe, F as FileTerminal, o as Radio, p as ChevronsUp, q as ChevronsDown, r as FileDiff, H as History, s as RotateCcw, t as GitCompareArrows, u as CircleQuestionMark, v as Server, w as Gauge, x as Lock, y as Wifi, z as WifiOff, I as ArrowUp, J as ArrowDown, K as Rows3, N as Columns2 } from "../_libs/lucide-react.mjs";
 import { u as union, d as object, a as array, l as literal, b as string, n as number, c as boolean, _ as _enum } from "../_libs/zod.mjs";
 import { P as Provider, R as Root3, T as Trigger$1, a as Portal$1, C as Content2$1, A as Arrow2 } from "../_libs/radix-ui__react-tooltip.mjs";
 import { R as Root2$1, L as List, T as Trigger$3, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
@@ -17,7 +17,7 @@ import { S as Slot } from "../_libs/radix-ui__react-slot.mjs";
 const ApiErrorSchema = object({
   error: string()
 });
-async function parseJsonResponse(response, schema) {
+async function parseJsonResponse$1(response, schema) {
   const data = await response.json();
   return schema.parse(data);
 }
@@ -36,7 +36,7 @@ async function fetchJson(input, schema, init, errorFallback) {
     const fallback = errorFallback?.(response) ?? `Request failed with status ${response.status}`;
     throw new Error(await readApiError(response, fallback));
   }
-  return parseJsonResponse(response, schema);
+  return parseJsonResponse$1(response, schema);
 }
 const STRIP_CONFIG_SWR_KEY = "/api/config";
 async function fetcher$2(url) {
@@ -71,10 +71,12 @@ function useStripConfig() {
   const { mutate: globalMutate } = useSWRConfig();
   const strip = response.data?.stripClaudeCodeBillingHeader ?? false;
   const slowResponseThresholdSeconds = response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS;
+  const timeDisplayFormat = response.data?.timeDisplayFormat ?? DEFAULT_TIME_DISPLAY_FORMAT;
   const optimisticConfig = (patch) => ({
     stripClaudeCodeBillingHeader: response.data?.stripClaudeCodeBillingHeader ?? false,
     hasSeenOnboarding: response.data?.hasSeenOnboarding ?? false,
     slowResponseThresholdSeconds: response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+    timeDisplayFormat: response.data?.timeDisplayFormat ?? DEFAULT_TIME_DISPLAY_FORMAT,
     ...patch
   });
   const setStrip = async (next) => {
@@ -99,13 +101,22 @@ function useStripConfig() {
       }
     );
   };
+  const setTimeDisplayFormat = async (next) => {
+    await globalMutate(STRIP_CONFIG_SWR_KEY, setRuntimeConfig({ timeDisplayFormat: next }), {
+      optimisticData: optimisticConfig({ timeDisplayFormat: next }),
+      rollbackOnError: true,
+      revalidate: false
+    });
+  };
   return {
     strip,
     slowResponseThresholdSeconds,
+    timeDisplayFormat,
     isLoading: response.isLoading,
     isError: response.error !== void 0,
     setStrip,
-    setSlowResponseThresholdSeconds
+    setSlowResponseThresholdSeconds,
+    setTimeDisplayFormat
   };
 }
 const ONBOARDING_SWR_KEY = "/api/config";
@@ -145,7 +156,8 @@ function useOnboarding() {
       optimisticData: {
         stripClaudeCodeBillingHeader: response.data?.stripClaudeCodeBillingHeader ?? false,
         hasSeenOnboarding: true,
-        slowResponseThresholdSeconds: response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS
+        slowResponseThresholdSeconds: response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+        timeDisplayFormat: response.data?.timeDisplayFormat ?? DEFAULT_TIME_DISPLAY_FORMAT
       },
       rollbackOnError: true,
       revalidate: false
@@ -261,6 +273,21 @@ async function exportLogsAsZip(logs) {
   document.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
+function formatTimestamp(iso, format) {
+  switch (format) {
+    case "full":
+      return iso;
+    case "time":
+      return new Date(iso).toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit"
+      });
+  }
+}
+function formatTimestampRange(startedAt, endedAt, format) {
+  return `${formatTimestamp(startedAt, format)} - ${formatTimestamp(endedAt, format)}`;
+}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -275,7 +302,7 @@ function getStatusCategory(status) {
   if (status >= 500) return "server_error";
   return "pending";
 }
-const version = "2.0.2";
+const version = "2.0.4";
 const packageJson = {
   version
 };
@@ -469,10 +496,6 @@ const API_FORMAT_LABELS = {
   openai: "OpenAI",
   unknown: "Unknown"
 };
-function formatTimestamp(iso) {
-  const date = new Date(iso);
-  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
-}
 function ConversationHeader({
   conversationId,
   startTime,
@@ -486,6 +509,7 @@ function ConversationHeader({
   hideApiFormat = false,
   isLoading = false,
   userAgent,
+  timeDisplayFormat,
   onClear
 }) {
   const [confirmOpen, setConfirmOpen] = reactExports.useState(false);
@@ -559,11 +583,7 @@ function ConversationHeader({
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
-            formatTimestamp(startTime),
-            " - ",
-            formatTimestamp(endTime)
-          ] })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatTimestampRange(startTime, endTime, timeDisplayFormat) })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3" }),
@@ -1343,27 +1363,27 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-DIth2DQM.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-DuWEpqQ7.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-C1aGx0y1.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-BDRcr8E5.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-D2bCiEJn.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-BoO2_Ij0.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-DP6k4Xs_.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-DZiPBxvO.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-HyXZV-b5.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-D-be7KEL.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-Co-YRwUP.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-aJhb93ZK.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-Co-YRwUP.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-aJhb93ZK.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -1757,7 +1777,7 @@ const STATUS_BADGE_CLASSES = {
   server_error: "bg-rose-500/15 text-rose-400 border-rose-500/25",
   pending: "bg-muted text-muted-foreground border-border"
 };
-function formatElapsed$1(ms) {
+function formatElapsed$2(ms) {
   if (ms < 1e3) return `${ms}ms`;
   return `${(ms / 1e3).toFixed(1)}s`;
 }
@@ -1780,17 +1800,16 @@ const LogEntryHeader = reactExports.memo(function({
   toolCount = null,
   expanded,
   onToggle,
-  responseToolNames = null,
   cacheTrend = null,
   activeTab,
   tabActions,
   onReplay,
-  slowResponseThresholdSeconds = 0
+  slowResponseThresholdSeconds = 0,
+  timeDisplayFormat
 }) {
   const statusCategory = getStatusCategory(log.responseStatus);
   const isSlowResponse = log.elapsedMs !== null && slowResponseThresholdSeconds > 0 && log.elapsedMs > slowResponseThresholdSeconds * 1e3;
   const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
-  const toolNamesJoined = reactExports.useMemo(() => responseToolNames?.join(", ") ?? null, [responseToolNames]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -1819,7 +1838,7 @@ const LogEntryHeader = reactExports.memo(function({
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: log.timestamp })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", title: log.timestamp, children: formatTimestamp(log.timestamp, timeDisplayFormat) })
         ] }),
         log.model !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogo, { provider: detectProvider(log.model), className: "size-4" }) }) }),
@@ -1849,12 +1868,12 @@ const LogEntryHeader = reactExports.memo(function({
               ),
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$1(log.elapsedMs) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$2(log.elapsedMs) }),
                 isSlowResponse && /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Slow response" })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: isSlowResponse ? `Slow response: ${formatElapsed$1(log.elapsedMs)} exceeds ${formatElapsed$1(
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: isSlowResponse ? `Slow response: ${formatElapsed$2(log.elapsedMs)} exceeds ${formatElapsed$2(
             slowResponseThresholdSeconds * 1e3
           )}` : "Elapsed response time" })
         ] }),
@@ -1912,10 +1931,6 @@ const LogEntryHeader = reactExports.memo(function({
           /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: toolCount })
         ] }),
-        responseToolNames !== null && responseToolNames.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-amber-400/80 text-xs shrink-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[160px]", children: toolNamesJoined })
-        ] }),
         log.origin !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "span",
           {
@@ -2403,6 +2418,7 @@ const LogEntry = reactExports.memo(function({
   viewMode = "simple",
   strip,
   slowResponseThresholdSeconds,
+  timeDisplayFormat,
   cacheTrend = null,
   onCompareWithPrevious
 }) {
@@ -2419,10 +2435,6 @@ const LogEntry = reactExports.memo(function({
     () => adapter.analyzeRequest(log.rawRequestBody),
     [adapter, log.rawRequestBody]
   );
-  const responseAnalysis = reactExports.useMemo(
-    () => adapter.analyzeResponse(log.responseText),
-    [adapter, log.responseText]
-  );
   const strippedRequestBody = reactExports.useMemo(() => {
     if (!strip || resolvedFormat !== "anthropic" || log.rawRequestBody === null) {
       return null;
@@ -2555,9 +2567,9 @@ const LogEntry = reactExports.memo(function({
           toolCount: requestAnalysis.toolCount,
           expanded,
           onToggle: () => setExpanded(!expanded),
-          responseToolNames: responseAnalysis.toolNames,
           cacheTrend,
           slowResponseThresholdSeconds,
+          timeDisplayFormat,
           activeTab,
           tabActions,
           onReplay: onCompareWithPrevious === void 0 ? void 0 : () => {
@@ -2764,6 +2776,25 @@ function ThreadConnector({
     ) })
   ] });
 }
+function ToolTraceEvents({ events }) {
+  if (events.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-3 mb-2 grid gap-1.5", children: events.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      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",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3.5 shrink-0 text-sky-400/70" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono font-semibold text-foreground/80", children: event.name }),
+        event.argumentsPreview !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 shrink-0 text-muted-foreground/60" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 truncate font-mono text-muted-foreground", children: event.argumentsPreview })
+        ] })
+      ]
+    },
+    event.id
+  )) });
+}
+const PREVIEW_LIMIT = 180;
 function shouldRenderConversationContent(standalone, expanded) {
   return standalone || expanded;
 }
@@ -2801,7 +2832,135 @@ function buildValidPredecessors(groups) {
   }
   return predecessors;
 }
-function formatElapsed(ms) {
+function parseJsonResponse(responseText) {
+  if (responseText === null) return null;
+  try {
+    const parsed = JSON.parse(responseText);
+    if (typeof parsed === "string") {
+      return JSON.parse(parsed);
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function previewValue(value) {
+  if (value === void 0 || value === null) return null;
+  const raw = typeof value === "string" ? value : JSON.stringify(value);
+  if (raw === void 0) return null;
+  const normalized = raw.replace(/\s+/g, " ").trim();
+  if (normalized.length === 0) return null;
+  return normalized.length > PREVIEW_LIMIT ? `${normalized.slice(0, PREVIEW_LIMIT - 1)}...` : normalized;
+}
+function extractAnthropicToolTraceEvents(log) {
+  const parsed = parseJsonResponse(log.responseText);
+  const content = safeGetOwnProperty(parsed, "content");
+  if (!Array.isArray(content)) return [];
+  const events = [];
+  for (const block of content) {
+    const type = safeGetOwnProperty(block, "type");
+    if (type !== "tool_use") continue;
+    const name = safeGetOwnProperty(block, "name");
+    if (typeof name !== "string" || name.length === 0) continue;
+    events.push({
+      id: `${String(log.id)}-anthropic-tool-${String(events.length)}`,
+      logId: log.id,
+      index: events.length,
+      provider: "anthropic",
+      name,
+      argumentsPreview: previewValue(safeGetOwnProperty(block, "input"))
+    });
+  }
+  return events;
+}
+function extractOpenAIToolTraceEvents(log) {
+  const parsed = parseJsonResponse(log.responseText);
+  const choices = safeGetOwnProperty(parsed, "choices");
+  if (!Array.isArray(choices)) return [];
+  const events = [];
+  for (const choice of choices) {
+    const message = safeGetOwnProperty(choice, "message");
+    const toolCalls = safeGetOwnProperty(message, "tool_calls");
+    if (!Array.isArray(toolCalls)) continue;
+    for (const call of toolCalls) {
+      const fn = safeGetOwnProperty(call, "function");
+      const name = safeGetOwnProperty(fn, "name");
+      if (typeof name !== "string" || name.length === 0) continue;
+      events.push({
+        id: `${String(log.id)}-openai-tool-${String(events.length)}`,
+        logId: log.id,
+        index: events.length,
+        provider: "openai",
+        name,
+        argumentsPreview: previewValue(safeGetOwnProperty(fn, "arguments"))
+      });
+    }
+  }
+  return events;
+}
+function extractToolTraceEvents(log) {
+  const format = resolveLogFormat(log);
+  switch (format) {
+    case "anthropic":
+      return extractAnthropicToolTraceEvents(log);
+    case "openai":
+      return extractOpenAIToolTraceEvents(log);
+    case "unknown":
+      return [];
+  }
+}
+function buildTraceSummary(logs, slowResponseThresholdSeconds, knowledgeCandidateCount = 0) {
+  let failedCallCount = 0;
+  let pendingCallCount = 0;
+  let slowCallCount = 0;
+  let totalInputTokens = 0;
+  let totalOutputTokens = 0;
+  let totalCacheCreationInputTokens = 0;
+  let totalCacheReadInputTokens = 0;
+  let totalElapsedMs = 0;
+  let maxElapsedMs = null;
+  let toolCallCount = 0;
+  for (const log of logs) {
+    if (log.responseStatus === null) {
+      pendingCallCount += 1;
+    } else if (log.responseStatus >= 400) {
+      failedCallCount += 1;
+    }
+    if (log.elapsedMs !== null && slowResponseThresholdSeconds > 0 && log.elapsedMs > slowResponseThresholdSeconds * 1e3) {
+      slowCallCount += 1;
+    }
+    if (log.inputTokens !== null) totalInputTokens += log.inputTokens;
+    if (log.outputTokens !== null) totalOutputTokens += log.outputTokens;
+    if (log.cacheCreationInputTokens !== null) {
+      totalCacheCreationInputTokens += log.cacheCreationInputTokens;
+    }
+    if (log.cacheReadInputTokens !== null) {
+      totalCacheReadInputTokens += log.cacheReadInputTokens;
+    }
+    if (log.elapsedMs !== null) {
+      totalElapsedMs += log.elapsedMs;
+      maxElapsedMs = maxElapsedMs === null ? log.elapsedMs : Math.max(maxElapsedMs, log.elapsedMs);
+    }
+    toolCallCount += extractToolTraceEvents(log).length;
+  }
+  return {
+    llmCallCount: logs.length,
+    toolCallCount,
+    failedCallCount,
+    pendingCallCount,
+    slowCallCount,
+    totalInputTokens,
+    totalOutputTokens,
+    totalCacheCreationInputTokens,
+    totalCacheReadInputTokens,
+    totalElapsedMs,
+    maxElapsedMs,
+    startedAt: logs[0]?.timestamp ?? null,
+    endedAt: logs[logs.length - 1]?.timestamp ?? null,
+    knowledgeCandidateCount
+  };
+}
+function formatElapsed$1(ms) {
   if (ms < 1e3) return `${ms}ms`;
   return `${(ms / 1e3).toFixed(1)}s`;
 }
@@ -2813,7 +2972,8 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
   cacheTrends,
   onCompareWithPrevious,
   comparisonPredecessors,
-  turnIndex = 0
+  turnIndex = 0,
+  timeDisplayFormat
 }) {
   const lastIdx = entries.length - 1;
   const lastStop = entries[lastIdx]?.stopReason ?? null;
@@ -2871,6 +3031,14 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
   const EndCrab = reactExports.useMemo(() => getCrabVariant(entries[lastIdx]?.log.id ?? 0), [entries, lastIdx]);
   const bgClass = turnIndex % 2 === 0 ? "bg-muted/10" : "bg-muted/25";
   const aggregateIsSlow = aggregate.maxElapsed !== null && slowResponseThresholdSeconds > 0 && aggregate.maxElapsed > slowResponseThresholdSeconds * 1e3;
+  const toolEventsByLogId = reactExports.useMemo(() => {
+    const events = /* @__PURE__ */ new Map();
+    for (const entry of entries) {
+      const extracted = extractToolTraceEvents(entry.log);
+      if (extracted.length > 0) events.set(entry.log.id, extracted);
+    }
+    return events;
+  }, [entries]);
   const [layoutVersion, setLayoutVersion] = reactExports.useState(0);
   const containerRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
@@ -3001,14 +3169,14 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                           ),
                           children: [
                             /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-                            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed(aggregate.maxElapsed) }),
+                            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$1(aggregate.maxElapsed) }),
                             aggregateIsSlow && /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Slow response" })
                           ]
                         }
                       ) }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: aggregateIsSlow ? `Slow response: ${formatElapsed(
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: aggregateIsSlow ? `Slow response: ${formatElapsed$1(
                         aggregate.maxElapsed
-                      )} exceeds ${formatElapsed(slowResponseThresholdSeconds * 1e3)}` : "Slowest request in this turn" })
+                      )} exceeds ${formatElapsed$1(slowResponseThresholdSeconds * 1e3)}` : "Slowest request in this turn" })
                     ] }) }),
                     aggregate.hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 shrink-0", children: [
                       /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 text-muted-foreground" }),
@@ -3052,23 +3220,225 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                 onToggle: toggleCollapse
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex-1 min-w-0 mb-0.5 rounded-lg", bgClass), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              LogEntry,
-              {
-                log,
-                viewMode,
-                strip,
-                slowResponseThresholdSeconds,
-                cacheTrend: cacheTrends?.get(log.id) ?? null,
-                onCompareWithPrevious: comparisonPredecessors.has(log.id) ? onCompareWithPrevious : void 0
-              }
-            ) })
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex-1 min-w-0 mb-0.5 rounded-lg", bgClass), children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                LogEntry,
+                {
+                  log,
+                  viewMode,
+                  strip,
+                  slowResponseThresholdSeconds,
+                  timeDisplayFormat,
+                  cacheTrend: cacheTrends?.get(log.id) ?? null,
+                  onCompareWithPrevious: comparisonPredecessors.has(log.id) ? onCompareWithPrevious : void 0
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTraceEvents, { events: toolEventsByLogId.get(log.id) ?? [] })
+            ] })
           ] }, log.id);
         })
       )
     }
   );
 });
+const CandidateResponseSchema = object({
+  candidates: array(KnowledgeCandidateSchema)
+});
+function formatElapsed(ms) {
+  if (ms === null) return "-";
+  if (ms < 1e3) return `${String(ms)}ms`;
+  return `${(ms / 1e3).toFixed(1)}s`;
+}
+function formatTimeRange$1(startedAt, endedAt, timeDisplayFormat) {
+  if (startedAt === null || endedAt === null) return null;
+  return formatTimestampRange(startedAt, endedAt, timeDisplayFormat);
+}
+function formatCandidateCount(count) {
+  return `${String(count)} candidate${count === 1 ? "" : "s"}`;
+}
+function getLogAnchor(logId) {
+  return `log-${String(logId)}`;
+}
+function jumpToLog(logId) {
+  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 }) {
+  if (candidates.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 grid gap-1.5", children: candidates.map((candidate) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: "rounded-md border border-border/80 bg-background/60 px-2.5 py-2",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "h-5 px-1.5 text-[10px] font-mono", children: candidate.type }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1 truncate text-xs font-medium", title: candidate.title, children: candidate.title }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 font-mono text-[10px] text-muted-foreground", children: candidate.status })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 flex flex-wrap items-center gap-1.5", children: candidate.logIds.map((logId) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "a",
+          {
+            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)}`,
+            children: [
+              "#",
+              logId
+            ]
+          },
+          logId
+        )) })
+      ]
+    },
+    candidate.id
+  )) });
+}
+function AgentTraceSummary({
+  logs,
+  scopeId,
+  slowResponseThresholdSeconds,
+  showRollupMetrics,
+  timeDisplayFormat
+}) {
+  const [candidates, setCandidates] = reactExports.useState([]);
+  const [candidatesExpanded, setCandidatesExpanded] = reactExports.useState(true);
+  const [candidateState, setCandidateState] = reactExports.useState({
+    status: "idle",
+    error: null
+  });
+  const hasCandidates = candidates.length > 0;
+  const summary = reactExports.useMemo(
+    () => buildTraceSummary(logs, slowResponseThresholdSeconds, candidates.length),
+    [candidates.length, logs, slowResponseThresholdSeconds]
+  );
+  const showElapsedSummary = showRollupMetrics || summary.maxElapsedMs !== null;
+  const timeRange = reactExports.useMemo(
+    () => formatTimeRange$1(summary.startedAt, summary.endedAt, timeDisplayFormat),
+    [summary.endedAt, summary.startedAt, timeDisplayFormat]
+  );
+  const createCandidates = reactExports.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$1(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 /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "mb-2 rounded-lg border border-border bg-muted/10 px-3 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-xs", children: [
+      showRollupMetrics && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 font-semibold text-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3.5 text-blue-400" }),
+        summary.llmCallCount,
+        " LLM"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3.5 text-sky-400/70" }),
+        summary.toolCallCount,
+        " tools"
+      ] }),
+      showRollupMetrics && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3.5 text-emerald-400" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
+          formatTokens(summary.totalInputTokens),
+          " / ",
+          formatTokens(summary.totalOutputTokens)
+        ] })
+      ] }),
+      (summary.totalCacheCreationInputTokens > 0 || summary.totalCacheReadInputTokens > 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3.5 text-purple-400" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
+          "+",
+          formatTokens(summary.totalCacheCreationInputTokens),
+          " / ~",
+          formatTokens(summary.totalCacheReadInputTokens)
+        ] })
+      ] }),
+      showElapsedSummary && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3.5" }),
+        showRollupMetrics && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: formatElapsed(summary.totalElapsedMs) }),
+        summary.maxElapsedMs !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-muted-foreground/70", children: [
+          "max ",
+          formatElapsed(summary.maxElapsedMs)
+        ] })
+      ] }),
+      showRollupMetrics && timeRange !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-muted-foreground/70", children: timeRange }),
+      (summary.failedCallCount > 0 || summary.pendingCallCount > 0 || summary.slowCallCount > 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-amber-400", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
+          summary.failedCallCount,
+          " fail / ",
+          summary.pendingCallCount,
+          " pending /",
+          " ",
+          summary.slowCallCount,
+          " slow"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1" }),
+      hasCandidates && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "h-6 px-2 text-[10px] font-mono", children: formatCandidateCount(summary.knowledgeCandidateCount) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "h-7 gap-1.5 px-2 text-xs",
+          onClick: createCandidates,
+          disabled: candidateState.status === "loading",
+          children: [
+            candidateState.status === "loading" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Brain, { className: "size-3.5" }),
+            "Candidate"
+          ]
+        }
+      ),
+      hasCandidates && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        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",
+          children: candidatesExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    candidateState.status === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 text-xs text-destructive", children: candidateState.error }),
+    candidatesExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(CandidateList, { candidates })
+  ] });
+}
 function computeStats(logs) {
   let totalInput = 0;
   let totalOutput = 0;
@@ -3087,7 +3457,9 @@ const ConversationGroup = reactExports.memo(function({
   onCompareWithPrevious,
   comparisonPredecessors,
   onClearGroup,
-  standalone = false
+  standalone = false,
+  hasPinnedSessionContext = false,
+  timeDisplayFormat
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
   const stats = reactExports.useMemo(() => computeStats(group.logs), [group.logs]);
@@ -3095,6 +3467,7 @@ const ConversationGroup = reactExports.memo(function({
   const endTime = group.logs[group.logs.length - 1]?.timestamp ?? (/* @__PURE__ */ new Date()).toISOString();
   const mixed = hasMixedApiFormat(group.logs);
   const isLoading = group.logs.some((log) => log.responseStatus === null);
+  const showTraceRollupMetrics = standalone && !hasPinnedSessionContext;
   const turnGroups = reactExports.useMemo(() => buildTurnGroups(group.logs), [group.logs]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
     !standalone && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3112,23 +3485,37 @@ const ConversationGroup = reactExports.memo(function({
         hideApiFormat: mixed,
         isLoading,
         userAgent: group.logs[0]?.userAgent ?? null,
+        timeDisplayFormat,
         onClear: () => onClearGroup(group.logs.map((l) => l.id))
       }
     ),
-    shouldRenderConversationContent(standalone, expanded) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: turnGroups.map((tg) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      TurnGroup,
-      {
-        entries: tg.entries,
-        viewMode,
-        strip,
-        slowResponseThresholdSeconds,
-        cacheTrends,
-        onCompareWithPrevious,
-        comparisonPredecessors,
-        turnIndex: tg.turnIndex
-      },
-      tg.turnIndex
-    )) })
+    shouldRenderConversationContent(standalone, expanded) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AgentTraceSummary,
+        {
+          logs: group.logs,
+          scopeId: group.conversationId,
+          slowResponseThresholdSeconds,
+          showRollupMetrics: showTraceRollupMetrics,
+          timeDisplayFormat
+        }
+      ),
+      turnGroups.map((tg) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TurnGroup,
+        {
+          entries: tg.entries,
+          viewMode,
+          strip,
+          slowResponseThresholdSeconds,
+          timeDisplayFormat,
+          cacheTrends,
+          onCompareWithPrevious,
+          comparisonPredecessors,
+          turnIndex: tg.turnIndex
+        },
+        tg.turnIndex
+      ))
+    ] })
   ] });
 });
 function CrabLogo({ className }) {
@@ -4480,7 +4867,7 @@ function ProvidersPanel({
       try {
         const res = await fetch("/api/config/paths");
         if (res.ok) {
-          const data = await parseJsonResponse(res, ConfigPathsResponseSchema);
+          const data = await parseJsonResponse$1(res, ConfigPathsResponseSchema);
           setConfigPath(data.providerConfig);
         }
       } catch {
@@ -4559,7 +4946,7 @@ function ProvidersPanel({
           signal: controller.signal
         });
         if (res.ok) {
-          const results = await parseJsonResponse(res, ProviderTestResultsSchema);
+          const results = await parseJsonResponse$1(res, ProviderTestResultsSchema);
           updateTestResults(providerId, results);
           await persistProviderTestLog(providerId, results);
         } else {
@@ -4599,7 +4986,7 @@ function ProvidersPanel({
           setError(await readApiError(res, "Failed to add provider"));
           return;
         }
-        const newProvider = await parseJsonResponse(res, ProviderConfigSchema);
+        const newProvider = await parseJsonResponse$1(res, ProviderConfigSchema);
         setShowForm(false);
         triggerHighlight(newProvider.id);
         refreshProviders();
@@ -4622,7 +5009,7 @@ function ProvidersPanel({
           setError(await readApiError(res, "Failed to update provider"));
           return;
         }
-        const updated = await parseJsonResponse(res, ProviderConfigSchema);
+        const updated = await parseJsonResponse$1(res, ProviderConfigSchema);
         setEditingProvider(void 0);
         triggerHighlight(updated.id);
         refreshProviders();
@@ -4697,7 +5084,7 @@ function ProvidersPanel({
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(text)
         });
-        const data = await parseJsonResponse(res, ImportResponseSchema);
+        const data = await parseJsonResponse$1(res, ImportResponseSchema);
         if (res.ok && data.imported !== void 0 && data.imported > 0) {
           refreshProviders();
           setError(null);
@@ -4986,9 +5373,11 @@ function ProxySettingsTab() {
   const {
     strip,
     slowResponseThresholdSeconds,
+    timeDisplayFormat,
     isLoading,
     setStrip,
-    setSlowResponseThresholdSeconds
+    setSlowResponseThresholdSeconds,
+    setTimeDisplayFormat
   } = useStripConfig();
   const [error, setError] = reactExports.useState(null);
   const [pending, setPending] = reactExports.useState(false);
@@ -5020,6 +5409,20 @@ function ProxySettingsTab() {
     },
     [setSlowResponseThresholdSeconds]
   );
+  const handleTimeDisplayFormatChange = reactExports.useCallback(
+    async (next) => {
+      setError(null);
+      setPending(true);
+      try {
+        await setTimeDisplayFormat(next);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setPending(false);
+      }
+    },
+    [setTimeDisplayFormat]
+  );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold", children: "Claude Code billing header" }),
@@ -5080,6 +5483,28 @@ function ProxySettingsTab() {
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground", children: "seconds" })
       ] })
     ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "time-display-format", className: "text-sm font-semibold", children: "Time display" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Controls timestamps in session summaries, conversation headers, and log rows." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "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",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "time", children: "Time only" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "full", children: "Full ISO" })
+          ]
+        }
+      )
+    ] }),
     error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-destructive", children: [
       "Failed to save: ",
       error
@@ -5266,16 +5691,11 @@ function computeTokenSummary(logs) {
   }
   return { totalIn, totalOut };
 }
-function formatTimeRange(logs) {
+function formatTimeRange(logs, timeDisplayFormat) {
   const first = logs[0];
   const last = logs[logs.length - 1];
   if (first === void 0 || last === void 0) return null;
-  const format = (iso) => new Date(iso).toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit"
-  });
-  return `${format(first.timestamp)} - ${format(last.timestamp)}`;
+  return formatTimestampRange(first.timestamp, last.timestamp, timeDisplayFormat);
 }
 function getFirstUserAgent(logs) {
   for (const log of logs) {
@@ -5350,10 +5770,14 @@ function SessionContextBar({
   sessionId,
   logs,
   totalIn,
-  totalOut
+  totalOut,
+  timeDisplayFormat
 }) {
   const [copied, setCopied] = reactExports.useState(false);
-  const timeRange = reactExports.useMemo(() => formatTimeRange(logs), [logs]);
+  const timeRange = reactExports.useMemo(
+    () => formatTimeRange(logs, timeDisplayFormat),
+    [logs, timeDisplayFormat]
+  );
   const userAgent = reactExports.useMemo(() => getFirstUserAgent(logs), [logs]);
   const handleCopyLink = reactExports.useCallback(() => {
     void window.navigator.clipboard.writeText(window.location.href).then(() => {
@@ -5426,6 +5850,7 @@ function ProxyViewer({
   onViewModeChange,
   strip,
   slowResponseThresholdSeconds,
+  timeDisplayFormat,
   hideSessionFilter = false,
   pinnedSessionId
 }) {
@@ -5472,6 +5897,7 @@ function ProxyViewer({
     setComparePair(null);
   }, []);
   const groups = reactExports.useMemo(() => groupLogsByConversation(logs), [logs]);
+  const hasPinnedSessionContext = pinnedSessionId !== void 0;
   const cacheTrends = reactExports.useMemo(() => computeCacheTrends(groups), [groups]);
   const comparisonPredecessors = reactExports.useMemo(() => buildValidPredecessors(groups), [groups]);
   const handleCompareWithPrevious = reactExports.useCallback(
@@ -5545,7 +5971,8 @@ function ProxyViewer({
           sessionId: pinnedSessionId,
           logs,
           totalIn,
-          totalOut
+          totalOut,
+          timeDisplayFormat
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
@@ -5584,7 +6011,7 @@ function ProxyViewer({
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground text-xs font-mono", children: [
+        !hasPinnedSessionContext && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground text-xs font-mono", children: [
           logs.length,
           " request",
           logs.length !== 1 ? "s" : "",
@@ -5655,7 +6082,9 @@ function ProxyViewer({
             onCompareWithPrevious: handleCompareWithPrevious,
             comparisonPredecessors,
             onClearGroup,
-            standalone: groups.length === 1
+            standalone: groups.length === 1,
+            hasPinnedSessionContext,
+            timeDisplayFormat
           },
           group.id
         )) })
@@ -5913,7 +6342,7 @@ function ProxyViewerContainer({
       }
     })();
   }, []);
-  const { strip, slowResponseThresholdSeconds } = useStripConfig();
+  const { strip, slowResponseThresholdSeconds, timeDisplayFormat } = useStripConfig();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     error !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed top-4 right-4 bg-destructive text-destructive-foreground px-4 py-2 rounded-md text-sm z-50", children: error }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(OnboardingBanner, {}),
@@ -5933,6 +6362,7 @@ function ProxyViewerContainer({
         onViewModeChange: setViewMode,
         strip,
         slowResponseThresholdSeconds,
+        timeDisplayFormat,
         hideSessionFilter: initialSessionId !== void 0,
         pinnedSessionId: initialSessionId
       }