@tonyclaw/agent-inspector 2.0.2 → 2.0.4

package/src/components/proxy-viewer/formats/anthropic/ContentBlocks.tsx

@@ -1,7 +1,7 @@
 import { Brain, ChevronDown, ChevronRight, Terminal } from "lucide-react";
 import { type JSX, memo, useState } from "react";
-import ReactMarkdown from "react-markdown";
 import type { ResponseContentBlockType } from "../../../../proxy/schemas";
+import { AnswerMarkdown } from "../../AnswerMarkdown";
 import { Badge } from "../../../ui/badge";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../ui/collapsible";
 import { JsonViewer } from "../../../ui/json-viewer";
@@ -30,9 +30,7 @@ function SystemReminderBlock({ text }: { text: string }): JSX.Element {
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className="pl-4 pt-1">
-          <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>
+          <AnswerMarkdown text={text} />
         </div>
       </CollapsibleContent>
     </Collapsible>
@@ -50,11 +48,7 @@ export const TextBlock = memo(function TextBlock({ text }: { text: string }): JS
   return (
     <div className="space-y-2">
       {thinking !== null && <ThinkingBlock thinking={thinking} />}
-      {remainingText.length > 0 && (
-        <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>{remainingText}</ReactMarkdown>
-        </div>
-      )}
+      {remainingText.length > 0 && <AnswerMarkdown text={remainingText} />}
       {thinking === null && remainingText.length === 0 && (
         <p className="text-xs text-muted-foreground italic">Empty text block</p>
       )}
@@ -113,9 +107,9 @@ export const ToolUseBlock = memo(function ToolUseBlock({
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="border-l-2 border-blue-500/40 my-1">
-        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-blue-500/5 transition-colors rounded-r-sm group">
-          <Terminal className="size-3.5 text-blue-400 shrink-0" />
+      <div className="border-l-2 border-sky-400/25 my-1">
+        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-sky-400/[0.04] transition-colors rounded-r-sm group">
+          <Terminal className="size-3.5 text-sky-400/70 shrink-0" />
           <Badge variant="outline" className="text-[10px] font-mono px-1.5 py-0 h-4">
             {name}
           </Badge>

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

@@ -1,8 +1,8 @@
 import { StopCircle, Terminal, Zap } from "lucide-react";
 import { memo, useState, type JSX } from "react";
-import ReactMarkdown from "react-markdown";
 import type { OpenAIResponse, OpenAIToolCall } from "../../../../proxy/schemas";
 import { formatTokens } from "../../../../lib/utils";
+import { AnswerMarkdown } from "../../AnswerMarkdown";
 import { Badge } from "../../../ui/badge";
 import { JsonViewer } from "../../../ui/json-viewer";
 import { safeJsonValue } from "../../../ui/json-viewer-bulk";
@@ -29,8 +29,8 @@ function parseToolArguments(raw: string | undefined): unknown {
 }
 
 /** One collapsible tool_use row, mirroring the Anthropic ToolUseBlock visual
- *  treatment (Terminal icon, blue accent, name as a Badge, JSON input in a
- *  scrollable JsonViewer). */
+ *  treatment (Terminal icon, soft tool accent, name as a Badge, JSON input in
+ *  a scrollable JsonViewer). */
 function OpenAIToolCallBlock({ call }: { call: OpenAIToolCall }): JSX.Element {
   const [open, setOpen] = useState(false);
   const name = call.function.name ?? "(unnamed tool)";
@@ -38,9 +38,9 @@ function OpenAIToolCallBlock({ call }: { call: OpenAIToolCall }): JSX.Element {
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="border-l-2 border-blue-500/40 my-1">
-        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-blue-500/5 transition-colors rounded-r-sm group">
-          <Terminal className="size-3.5 text-blue-400 shrink-0" />
+      <div className="border-l-2 border-sky-400/25 my-1">
+        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-sky-400/[0.04] transition-colors rounded-r-sm group">
+          <Terminal className="size-3.5 text-sky-400/70 shrink-0" />
           <Badge variant="outline" className="text-[10px] font-mono px-1.5 py-0 h-4">
             {name}
           </Badge>
@@ -133,11 +133,7 @@ export const OpenAIResponseView = memo(function OpenAIResponseView({
               <div className="space-y-2">
                 {/* Show thinking from tags only if no reasoning_content field */}
                 {thinking !== null && !hasReasoningField && <ThinkingBlock thinking={thinking} />}
-                {remainingText.length > 0 && (
-                  <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>{remainingText}</ReactMarkdown>
-                  </div>
-                )}
+                {remainingText.length > 0 && <AnswerMarkdown text={remainingText} />}
               </div>
             );
           })()}
@@ -146,10 +142,10 @@ export const OpenAIResponseView = memo(function OpenAIResponseView({
           <OpenAIToolCallBlock key={call.id ?? `tc-${i}`} call={call} />
         ))}
         {message?.function_call !== null && message?.function_call !== undefined && (
-          <div className="border border-blue-500/30 rounded-md p-3 bg-blue-500/5">
-            <div className="text-xs text-blue-400 font-mono mb-1">function_call</div>
+          <div className="border border-sky-400/20 rounded-md p-3 bg-muted/20">
+            <div className="text-xs text-sky-400/80 font-mono mb-1">function_call</div>
             <div className="font-mono text-xs">
-              <span className="text-blue-300">{message.function_call.name}</span>
+              <span className="text-foreground/80">{message.function_call.name}</span>
               <span className="text-muted-foreground">({message.function_call.arguments})</span>
             </div>
           </div>

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

@@ -1,4 +1,5 @@
 import { extractStopReason, isTurnBoundary, type StopReason } from "../../lib/stopReason";
+import { safeGetOwnProperty } from "../../lib/objectUtils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { resolveLogFormat } from "./log-formats";
 
@@ -16,6 +17,34 @@ type ConversationLike = {
   logs: CapturedLog[];
 };
 
+export type TraceSummary = {
+  llmCallCount: number;
+  toolCallCount: number;
+  failedCallCount: number;
+  pendingCallCount: number;
+  slowCallCount: number;
+  totalInputTokens: number;
+  totalOutputTokens: number;
+  totalCacheCreationInputTokens: number;
+  totalCacheReadInputTokens: number;
+  totalElapsedMs: number;
+  maxElapsedMs: number | null;
+  startedAt: string | null;
+  endedAt: string | null;
+  knowledgeCandidateCount: number;
+};
+
+export type ToolTraceEvent = {
+  id: string;
+  logId: number;
+  index: number;
+  provider: "anthropic" | "openai";
+  name: string;
+  argumentsPreview: string | null;
+};
+
+const PREVIEW_LIMIT = 180;
+
 export function shouldRenderConversationContent(standalone: boolean, expanded: boolean): boolean {
   return standalone || expanded;
 }
@@ -64,3 +93,151 @@ export function buildValidPredecessors(groups: ConversationLike[]): Map<number,
 
   return predecessors;
 }
+
+function parseJsonResponse(responseText: string | null): unknown {
+  if (responseText === null) return null;
+  try {
+    const parsed: unknown = JSON.parse(responseText);
+    if (typeof parsed === "string") {
+      return JSON.parse(parsed);
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+function previewValue(value: unknown): string | null {
+  if (value === undefined || value === null) return null;
+  const raw = typeof value === "string" ? value : JSON.stringify(value);
+  if (raw === undefined) 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: CapturedLog): ToolTraceEvent[] {
+  const parsed = parseJsonResponse(log.responseText);
+  const content = safeGetOwnProperty(parsed, "content");
+  if (!Array.isArray(content)) return [];
+
+  const events: ToolTraceEvent[] = [];
+  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: CapturedLog): ToolTraceEvent[] {
+  const parsed = parseJsonResponse(log.responseText);
+  const choices = safeGetOwnProperty(parsed, "choices");
+  if (!Array.isArray(choices)) return [];
+
+  const events: ToolTraceEvent[] = [];
+  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;
+}
+
+export function extractToolTraceEvents(log: CapturedLog): ToolTraceEvent[] {
+  const format = resolveLogFormat(log);
+  switch (format) {
+    case "anthropic":
+      return extractAnthropicToolTraceEvents(log);
+    case "openai":
+      return extractOpenAIToolTraceEvents(log);
+    case "unknown":
+      return [];
+  }
+}
+
+export function buildTraceSummary(
+  logs: CapturedLog[],
+  slowResponseThresholdSeconds: number,
+  knowledgeCandidateCount = 0,
+): TraceSummary {
+  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: number | null = 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 * 1000
+    ) {
+      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,
+  };
+}

package/src/lib/runtimeConfig.ts

@@ -2,6 +2,11 @@ import { z } from "zod";
 
 export const DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS = 10;
 export const MAX_SLOW_RESPONSE_THRESHOLD_SECONDS = 600;
+export const DEFAULT_TIME_DISPLAY_FORMAT = "time";
+
+export const TimeDisplayFormatSchema = z.enum(["time", "full"]);
+
+export type TimeDisplayFormat = z.infer<typeof TimeDisplayFormatSchema>;
 
 /**
  * Schema for the runtime proxy config. Shared between server
@@ -20,6 +25,7 @@ export const RuntimeConfigSchema = z.object({
     .min(0)
     .max(MAX_SLOW_RESPONSE_THRESHOLD_SECONDS)
     .default(DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS),
+  timeDisplayFormat: TimeDisplayFormatSchema.default(DEFAULT_TIME_DISPLAY_FORMAT),
 });
 
 export type RuntimeConfig = z.infer<typeof RuntimeConfigSchema>;

package/src/lib/timeDisplay.ts

@@ -0,0 +1,22 @@
+import type { TimeDisplayFormat } from "./runtimeConfig";
+
+export function formatTimestamp(iso: string, format: TimeDisplayFormat): string {
+  switch (format) {
+    case "full":
+      return iso;
+    case "time":
+      return new Date(iso).toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      });
+  }
+}
+
+export function formatTimestampRange(
+  startedAt: string,
+  endedAt: string,
+  format: TimeDisplayFormat,
+): string {
+  return `${formatTimestamp(startedAt, format)} - ${formatTimestamp(endedAt, format)}`;
+}

package/src/lib/useOnboarding.ts

@@ -2,6 +2,7 @@ import useSWR, { type SWRResponse, useSWRConfig } from "swr";
 import { fetchJson } from "./apiClient";
 import {
   DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  DEFAULT_TIME_DISPLAY_FORMAT,
   RuntimeConfigSchema,
   type RuntimeConfig,
 } from "./runtimeConfig";
@@ -66,6 +67,7 @@ export function useOnboarding(): UseOnboarding {
         hasSeenOnboarding: true,
         slowResponseThresholdSeconds:
           response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+        timeDisplayFormat: response.data?.timeDisplayFormat ?? DEFAULT_TIME_DISPLAY_FORMAT,
       },
       rollbackOnError: true,
       revalidate: false,

package/src/lib/useStripConfig.ts

@@ -2,7 +2,9 @@ import useSWR, { type SWRResponse, useSWRConfig } from "swr";
 import { fetchJson } from "./apiClient";
 import {
   DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  DEFAULT_TIME_DISPLAY_FORMAT,
   RuntimeConfigSchema,
+  type TimeDisplayFormat,
   type RuntimeConfig,
 } from "./runtimeConfig";
 
@@ -36,10 +38,12 @@ export async function setRuntimeConfig(patch: Partial<RuntimeConfig>): Promise<R
 export type UseStripConfig = {
   strip: boolean;
   slowResponseThresholdSeconds: number;
+  timeDisplayFormat: TimeDisplayFormat;
   isLoading: boolean;
   isError: boolean;
   setStrip: (next: boolean) => Promise<void>;
   setSlowResponseThresholdSeconds: (next: number) => Promise<void>;
+  setTimeDisplayFormat: (next: TimeDisplayFormat) => Promise<void>;
 };
 
 /**
@@ -64,12 +68,14 @@ export function useStripConfig(): UseStripConfig {
   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: Partial<RuntimeConfig>): RuntimeConfig => ({
     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,
   });
 
@@ -97,12 +103,22 @@ export function useStripConfig(): UseStripConfig {
     );
   };
 
+  const setTimeDisplayFormat = async (next: TimeDisplayFormat): Promise<void> => {
+    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 !== undefined,
     setStrip,
     setSlowResponseThresholdSeconds,
+    setTimeDisplayFormat,
   };
 }

package/src/proxy/chunkStorage.ts

@@ -30,11 +30,10 @@ const StreamingChunksDataSchema = z.object({
   truncated: z.boolean().optional(),
 });
 
-const CHUNKS_DIR_ENV = process.env["CHUNKS_DIR"];
-
 export function getChunksDir(): string {
-  if (CHUNKS_DIR_ENV !== undefined) {
-    return isAbsolute(CHUNKS_DIR_ENV) ? CHUNKS_DIR_ENV : join(getDataDir(), CHUNKS_DIR_ENV);
+  const chunksDirEnv = process.env["CHUNKS_DIR"];
+  if (chunksDirEnv !== undefined && chunksDirEnv !== "") {
+    return isAbsolute(chunksDirEnv) ? chunksDirEnv : join(getDataDir(), chunksDirEnv);
   }
   return join(getDataDir(), "chunks");
 }

package/src/proxy/config.ts

@@ -12,6 +12,7 @@ import { logger } from "./logger";
 import { getDataDir } from "./dataDir";
 import {
   DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  DEFAULT_TIME_DISPLAY_FORMAT,
   RuntimeConfigSchema,
   type RuntimeConfig,
 } from "../lib/runtimeConfig";
@@ -79,6 +80,7 @@ function resolveInitialConfig(): RuntimeConfig {
       stripClaudeCodeBillingHeader: true,
       hasSeenOnboarding: false,
       slowResponseThresholdSeconds: DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+      timeDisplayFormat: DEFAULT_TIME_DISPLAY_FORMAT,
     };
   }
 
@@ -87,6 +89,7 @@ function resolveInitialConfig(): RuntimeConfig {
     stripClaudeCodeBillingHeader: false,
     hasSeenOnboarding: false,
     slowResponseThresholdSeconds: DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+    timeDisplayFormat: DEFAULT_TIME_DISPLAY_FORMAT,
   };
 }
 

package/src/proxy/logger.ts

@@ -3,23 +3,14 @@ import { writeFileSync, mkdirSync } from "node:fs";
 import path from "node:path";
 import { getDataDir } from "./dataDir";
 
-const LOG_DIR_ENV = process.env["LOG_DIR"];
 const RETENTION_DAYS = Number(process.env["LOG_RETENTION_DAYS"] ?? "7");
-const LOG_FILE_ENV = process.env["AGENT_INSPECTOR_LOG_FILE"];
-
-let resolvedLogDir: string | null = null;
 
 export function resolveLogDir(): string {
-  if (resolvedLogDir !== null) return resolvedLogDir;
-
-  if (LOG_DIR_ENV !== undefined) {
-    resolvedLogDir = path.isAbsolute(LOG_DIR_ENV)
-      ? LOG_DIR_ENV
-      : path.join(getDataDir(), LOG_DIR_ENV);
-  } else {
-    resolvedLogDir = path.join(getDataDir(), "logs");
+  const logDirEnv = process.env["LOG_DIR"];
+  if (logDirEnv !== undefined && logDirEnv !== "") {
+    return path.isAbsolute(logDirEnv) ? logDirEnv : path.join(getDataDir(), logDirEnv);
   }
-  return resolvedLogDir;
+  return path.join(getDataDir(), "logs");
 }
 
 export function getLogFilePath(): string {
@@ -31,8 +22,9 @@ export function getLogFilePath(): string {
 }
 
 function getInspectorLogPath(): string {
-  if (LOG_FILE_ENV !== undefined) {
-    return LOG_FILE_ENV;
+  const logFileEnv = process.env["AGENT_INSPECTOR_LOG_FILE"];
+  if (logFileEnv !== undefined && logFileEnv !== "") {
+    return logFileEnv;
   }
   return path.join(getDataDir(), "logs", "inspector.log");
 }
@@ -43,6 +35,7 @@ export async function initLogger(): Promise<void> {
   const cutoff = Date.now() - retentionMs;
 
   try {
+    await mkdir(dir, { recursive: true });
     const entries = await readdir(dir);
     for (const entry of entries) {
       if (!entry.endsWith(".jsonl")) continue;

package/src/proxy/store.ts

@@ -5,14 +5,7 @@ import { createInterface } from "node:readline";
 import { Buffer } from "node:buffer";
 import { join } from "node:path";
 import { appendLogEntry, resolveLogDir, logger } from "./logger";
-import {
-  addToIndex,
-  findInIndex,
-  getNextLogId,
-  getCurrentLogFile,
-  saveIndex,
-  loadIndex,
-} from "./logIndex";
+import { addToIndex, findInIndex, getNextLogId, getCurrentLogFile } from "./logIndex";
 import { writeChunks } from "./chunkStorage";
 import type { CapturedLog } from "./schemas";
 import { CapturedLogSchema } from "./schemas";
@@ -67,17 +60,11 @@ function removeFromCache(id: number): void {
 }
 
 /**
- * Add a test log entry directly to the in-memory store (for dashboard display).
- * This is used by the provider test endpoint alongside appendLogEntry (file logging).
+ * Add a test log entry to the in-memory store and persistent log file.
+ * This is used by the provider test endpoint to seed the provider-test session.
  */
 export async function addTestLogEntry(entry: Omit<CapturedLog, "id">): Promise<CapturedLog> {
   const id = await getNextLogId();
-  // Update the index with the new maxId so subsequent calls get unique IDs
-  const index = await loadIndex();
-  if (id > index.maxId) {
-    index.maxId = id;
-    await saveIndex(index);
-  }
 
   // Persist streaming chunks to disk if present
   let streamingChunksPath: string | null = null;
@@ -100,6 +87,11 @@ export async function addTestLogEntry(entry: Omit<CapturedLog, "id">): Promise<C
     sessionId: session.id,
     streamingChunksPath,
   };
+
+  const logFile = getCurrentLogFile();
+  appendLogEntry(log);
+  await addToIndex(id, logFile, -1, -1);
+
   addToCache(log);
   observeSessionLog(log, session.source);
   emitLogUpdate(log);

package/src/routes/api/config.ts

@@ -1,6 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { z } from "zod";
-import { MAX_SLOW_RESPONSE_THRESHOLD_SECONDS } from "../../lib/runtimeConfig";
+import {
+  MAX_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  TimeDisplayFormatSchema,
+} from "../../lib/runtimeConfig";
 import { getConfig, setConfig, RuntimeConfigSchema } from "../../proxy/config";
 
 // Partial schema for PATCH: at least one known field must be present.
@@ -14,6 +17,7 @@ const RuntimeConfigPatchSchema = z
       .min(0)
       .max(MAX_SLOW_RESPONSE_THRESHOLD_SECONDS)
       .optional(),
+    timeDisplayFormat: TimeDisplayFormatSchema.optional(),
   })
   .strict()
   .refine((v) => Object.keys(v).length > 0, {