@tonyclaw/llm-inspector 1.7.9 → 1.9.0

package/src/components/providers/ProvidersPanel.tsx

@@ -32,9 +32,11 @@ type TestResult = {
 
 type NotConfigured = { notConfigured: true };
 
+type Testing = { testing: true };
+
 type StreamingTestResults = {
-  nonStreaming: TestResult | NotConfigured;
-  streaming: TestResult | NotConfigured;
+  nonStreaming: TestResult | NotConfigured | Testing;
+  streaming: TestResult | NotConfigured | Testing;
 };
 
 export type TestResults = {
@@ -47,7 +49,7 @@ type ProvidersPanelProps = {
   externalTestResults?: Record<string, TestResults>;
   externalTestingProviders?: Set<string>;
   externalTestingTimeLeft?: Record<string, number>;
-  onProvidersChange?: (providers: ProviderConfig[]) => void;
+  onProvidersMutate?: () => void;
   onTestResultsChange?: (providerId: string, results: TestResults) => void;
   onTestingProvidersChange?: (providerId: string, isTesting: boolean) => void;
   onTestingTimeLeftChange?: (providerId: string, seconds: number | undefined) => void;
@@ -58,13 +60,11 @@ export function ProvidersPanel({
   externalTestResults,
   externalTestingProviders,
   externalTestingTimeLeft,
-  onProvidersChange,
+  onProvidersMutate,
   onTestResultsChange,
   onTestingProvidersChange,
   onTestingTimeLeftChange,
 }: ProvidersPanelProps): JSX.Element {
-  const [internalProviders, setInternalProviders] = useState<ProviderConfig[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
   const [showForm, setShowForm] = useState(false);
   const [editingProvider, setEditingProvider] = useState<ProviderConfig | undefined>();
   const [error, setError] = useState<string | null>(null);
@@ -76,9 +76,8 @@ export function ProvidersPanel({
   const [configPath, setConfigPath] = useState<string | null>(null);
   const [configPathCopied, setConfigPathCopied] = useState(false);
 
-  // Use external state if provided, otherwise use internal state
-  const providers = externalProviders ?? internalProviders;
-  const setProviders = onProvidersChange ?? setInternalProviders;
+  // Use external state if provided (from SWR), otherwise use internal state
+  const providers = externalProviders ?? [];
   const testResults = externalTestResults ?? internalTestResults;
   const setTestResults = onTestResultsChange
     ? (id: string, results: TestResults) => onTestResultsChange(id, results)
@@ -102,21 +101,7 @@ export function ProvidersPanel({
         }
       };
 
-  const fetchProviders = useCallback(async (): Promise<void> => {
-    try {
-      const providersRes = await fetch("/api/providers");
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      const providersData = (await providersRes.json()) as ProviderConfig[];
-      setProviders(providersData);
-    } catch {
-      setError("Failed to load providers");
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
   useEffect(() => {
-    void fetchProviders();
     void (async () => {
       try {
         const res = await fetch("/api/config/paths");
@@ -129,7 +114,7 @@ export function ProvidersPanel({
         // Ignore
       }
     })();
-  }, [fetchProviders]);
+  }, []);
 
   const TEST_TIMEOUT_SECONDS = 30;
 
@@ -137,8 +122,8 @@ export function ProvidersPanel({
     async (providerId: string): Promise<void> => {
       // Clear previous test results when starting a new test
       const resetResults: TestResults = {
-        anthropic: { nonStreaming: { notConfigured: true }, streaming: { notConfigured: true } },
-        openai: { nonStreaming: { notConfigured: true }, streaming: { notConfigured: true } },
+        anthropic: { nonStreaming: { testing: true }, streaming: { testing: true } },
+        openai: { nonStreaming: { testing: true }, streaming: { testing: true } },
       };
       if (onTestResultsChange) {
         onTestResultsChange(providerId, resetResults);
@@ -287,7 +272,7 @@ export function ProvidersPanel({
       }
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       const newProvider = (await res.json()) as ProviderConfig;
-      await fetchProviders();
+      onProvidersMutate?.();
       setShowForm(false);
       // Run test on new provider
       await runTest(newProvider.id);
@@ -325,7 +310,7 @@ export function ProvidersPanel({
       }
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       const updated = (await res.json()) as ProviderConfig;
-      await fetchProviders();
+      onProvidersMutate?.();
       setEditingProvider(undefined);
       // Run test on updated provider
       await runTest(updated.id);
@@ -345,7 +330,7 @@ export function ProvidersPanel({
         setError(err.error ?? "Failed to delete provider");
         return;
       }
-      await fetchProviders();
+      onProvidersMutate?.();
     })();
   }
 
@@ -400,7 +385,7 @@ export function ProvidersPanel({
         });
         const data = ImportResponseSchema.parse(await res.json());
         if (res.ok && data.imported !== undefined && data.imported > 0) {
-          await fetchProviders();
+          onProvidersMutate?.();
           // Show success message via error state temporarily
           setError(null);
           // Use a ref or state to show success - for now just refresh list
@@ -418,7 +403,7 @@ export function ProvidersPanel({
   }
 
   // Only show loading if we have no providers at all (prevents flashing when reopening Settings during test)
-  if (isLoading && providers.length === 0) {
+  if (providers.length === 0) {
     return (
       <div className="flex items-center justify-center py-8">
         <p className="text-sm text-muted-foreground">Loading providers...</p>
@@ -448,14 +433,24 @@ export function ProvidersPanel({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between sticky top-0 z-10 bg-background pb-2">
         <h3 className="text-lg font-medium">Providers</h3>
         <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={() => handleExport(false)} className="gap-1">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handleExport(false)}
+            className="gap-1 hover:bg-muted"
+          >
             <Download className="size-3" />
             Export
           </Button>
-          <Button variant="outline" size="sm" onClick={handleImportClick} className="gap-1">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleImportClick}
+            className="gap-1 hover:bg-muted"
+          >
             <Upload className="size-3" />
             Import
           </Button>

package/src/components/providers/SettingsDialog.tsx

@@ -4,12 +4,12 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { Button } from "../ui/button";
 import { ProvidersPanel } from "./ProvidersPanel";
-import type { ProviderConfig } from "../../proxy/providers";
+import { useProviders } from "../../lib/useProviders";
 
 export function SettingsDialog(): JSX.Element {
   const [open, setOpen] = useState(false);
   const [activeTab, setActiveTab] = useState("providers");
-  const [providers, setProviders] = useState<ProviderConfig[]>([]);
+  const { providers, mutate } = useProviders();
   const [testResults, setTestResults] = useState<
     Record<string, import("./ProvidersPanel").TestResults>
   >({});
@@ -74,7 +74,9 @@ export function SettingsDialog(): JSX.Element {
                 externalTestResults={testResults}
                 externalTestingProviders={testingProviders}
                 externalTestingTimeLeft={testingTimeLeft}
-                onProvidersChange={setProviders}
+                onProvidersMutate={() => {
+                  void mutate();
+                }}
                 onTestResultsChange={handleTestResultsChange}
                 onTestingProvidersChange={handleTestingProvidersChange}
                 onTestingTimeLeftChange={handleTestingTimeLeftChange}

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

@@ -182,6 +182,12 @@ export const LogEntry = memo(function LogEntry({
 
               <TabsContent value="raw">
                 <div className="px-4 py-3 space-y-3">
+                  {log.error !== undefined && log.error !== null && (
+                    <div className="rounded border border-destructive/50 bg-destructive/10 p-3 text-xs">
+                      <div className="font-semibold text-destructive mb-1">SSE Error</div>
+                      <div className="text-muted-foreground font-mono">{log.error}</div>
+                    </div>
+                  )}
                   <div className="flex justify-end">
                     <CopyButton
                       text={log.responseText}
@@ -215,6 +221,7 @@ export const LogEntry = memo(function LogEntry({
                     cacheCreationInputTokens={log.cacheCreationInputTokens}
                     cacheReadInputTokens={log.cacheReadInputTokens}
                     apiFormat={log.apiFormat}
+                    error={log.error}
                   />
                 </div>
               </TabsContent>

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

@@ -19,6 +19,8 @@ export type ResponseViewProps = {
   cacheCreationInputTokens?: number | null;
   cacheReadInputTokens?: number | null;
   apiFormat?: "anthropic" | "openai" | "unknown";
+  /** SSE error message from streaming response */
+  error?: string | null;
 };
 
 function getStatusClasses(category: StatusCategory): string {
@@ -95,8 +97,9 @@ export function ResponseView({
   cacheCreationInputTokens,
   cacheReadInputTokens,
   apiFormat,
+  error,
 }: ResponseViewProps): JSX.Element {
-  if (responseText === null) {
+  if (responseText === null && error === undefined) {
     return (
       <div className="flex items-center gap-2 py-3">
         <StatusIndicator status={responseStatus} />
@@ -105,18 +108,41 @@ export function ResponseView({
     );
   }
 
-  const isError = responseStatus !== null && responseStatus >= 400;
+  const isHttpError = responseStatus !== null && responseStatus >= 400;
 
-  if (isError) {
+  if (isHttpError) {
     return (
       <div className="space-y-2">
         <StatusIndicator status={responseStatus} />
-        <ErrorResponseView text={responseText} />
+        <ErrorResponseView text={responseText ?? ""} />
+        {error !== undefined && error !== null && (
+          <div className="rounded border border-destructive/50 bg-destructive/10 p-3 text-xs">
+            <div className="font-semibold text-destructive mb-1">SSE Error</div>
+            <div className="text-muted-foreground font-mono">{error}</div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (error !== undefined && error !== null) {
+    return (
+      <div className="space-y-2">
+        <StatusIndicator status={responseStatus} />
+        <div className="rounded border border-destructive/50 bg-destructive/10 p-3 text-xs">
+          <div className="font-semibold text-destructive mb-1">SSE Error</div>
+          <div className="text-muted-foreground font-mono">{error}</div>
+        </div>
+        {responseText !== null && (
+          <div className="mt-2">
+            <ErrorResponseView text={responseText} />
+          </div>
+        )}
       </div>
     );
   }
 
-  const parsed = parseResponse(responseText, apiFormat);
+  const parsed = responseText !== null ? parseResponse(responseText, apiFormat) : null;
 
   if (parsed !== null) {
     return (
@@ -155,7 +181,7 @@ export function ResponseView({
           </span>
         )}
       </div>
-      <MarkdownFallbackView text={responseText} />
+      <MarkdownFallbackView text={responseText ?? ""} />
     </div>
   );
 }

package/src/lib/useProviders.ts

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/consistent-type-assertions */
+import useSWR, { type SWRResponse } from "swr";
+import type { ProviderConfig } from "../proxy/providers";
+
+async function fetcher(url: string): Promise<ProviderConfig[]> {
+  const response = await fetch(url);
+  const data = await response.json();
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  return data as ProviderConfig[];
+}
+
+export function useProviders() {
+  const response: SWRResponse<ProviderConfig[], Error> = useSWR<ProviderConfig[], Error>(
+    "/api/providers",
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+    },
+  );
+
+  return {
+    providers: response.data ?? [],
+    isLoading: response.isLoading,
+    isError: response.error,
+    mutate: response.mutate,
+  };
+}

package/src/proxy/chunkStorage.ts

@@ -8,6 +8,7 @@ import {
   copyFileSync,
 } from "node:fs";
 import { join, isAbsolute } from "node:path";
+import { logger } from "./logger";
 import { z } from "zod";
 import { JsonValueSchema, type StreamingChunk } from "./schemas";
 
@@ -63,8 +64,7 @@ export function writeChunks(logId: number, chunks: StreamingChunk[], truncated?:
   try {
     mkdirSync(dir, { recursive: true });
   } catch (err) {
-    // eslint-disable-next-line no-console
-    console.error("[chunkStorage] Failed to create chunks directory:", err);
+    logger.error("[chunkStorage] Failed to create chunks directory:", String(err));
   }
 
   const data: StreamingChunksData = { chunks, truncated };
@@ -73,8 +73,7 @@ export function writeChunks(logId: number, chunks: StreamingChunk[], truncated?:
   try {
     writeFileSync(tempPath, JSON.stringify(data), "utf-8");
   } catch (err) {
-    // eslint-disable-next-line no-console
-    console.error("[chunkStorage] Failed to write chunks temp file:", err);
+    logger.error("[chunkStorage] Failed to write chunks temp file:", String(err));
     return targetPath;
   }
 
@@ -89,8 +88,7 @@ export function writeChunks(logId: number, chunks: StreamingChunk[], truncated?:
       copyFileSync(tempPath, targetPath);
       unlinkSync(tempPath);
     } catch (copyErr) {
-      // eslint-disable-next-line no-console
-      console.error("[chunkStorage] Failed to copy chunks file:", copyErr);
+      logger.error("[chunkStorage] Failed to copy chunks file:", String(copyErr));
     }
   }
 

package/src/proxy/formats/anthropic/schemas.ts

@@ -196,6 +196,14 @@ const SsePingEvent = z.object({
   type: z.literal("ping"),
 });
 
+const SseErrorEvent = z.object({
+  type: z.literal("error"),
+  error: z.object({
+    type: z.string(),
+    message: z.string(),
+  }),
+});
+
 export const SseEventSchema = z.discriminatedUnion("type", [
   SseMessageStartEvent,
   SseContentBlockStartEvent,
@@ -204,6 +212,7 @@ export const SseEventSchema = z.discriminatedUnion("type", [
   SseMessageDeltaEvent,
   SseMessageStopEvent,
   SsePingEvent,
+  SseErrorEvent,
 ]);
 
 export type AnthropicRequest = z.infer<typeof AnthropicRequestSchema>;

package/src/proxy/formats/anthropic/stream.ts

@@ -133,6 +133,17 @@ export function extractAnthropicStream(
           stopSequence = data.delta.stop_sequence ?? null;
           outputTokens = data.usage.output_tokens;
           log.outputTokens = outputTokens;
+          // Cache tokens may also be present in message_delta usage
+          if (data.usage.cache_creation_input_tokens !== undefined) {
+            log.cacheCreationInputTokens = data.usage.cache_creation_input_tokens;
+          }
+          if (data.usage.cache_read_input_tokens !== undefined) {
+            log.cacheReadInputTokens = data.usage.cache_read_input_tokens;
+          }
+          break;
+        case "error":
+          // Store error info on the log for display
+          log.error = data.error.message;
           break;
         case "content_block_stop":
         case "message_stop":

package/src/proxy/formats/openai/stream.ts

@@ -42,6 +42,21 @@ export function extractOpenAIStream(
 
     try {
       const parsed: unknown = JSON.parse(dataStr);
+      // Check for error object in SSE stream before trying to parse as chunk
+      if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+        const errorDesc = Object.getOwnPropertyDescriptor(parsed, "error");
+        if (
+          errorDesc !== undefined &&
+          typeof errorDesc.value === "object" &&
+          errorDesc.value !== null
+        ) {
+          const msgDesc = Object.getOwnPropertyDescriptor(errorDesc.value, "message");
+          if (msgDesc !== undefined && typeof msgDesc.value === "string") {
+            log.error = msgDesc.value;
+          }
+          continue;
+        }
+      }
       const chunkResult = OpenAISSERawChunkSchema.safeParse(parsed);
       if (!chunkResult.success) continue;
       const chunk = chunkResult.data;

package/src/proxy/handler.ts

@@ -1,5 +1,5 @@
 import { createLog, emitLogUpdate, type CapturedLog } from "./store";
-import { appendLogEntry } from "./logger";
+import { appendLogEntry, logger } from "./logger";
 import { writeChunks } from "./chunkStorage";
 import { extractModelFromBody, type RequestFormat } from "./schemas";
 import { registry } from "./formats";
@@ -89,6 +89,7 @@ function buildFileLogEntry(log: CapturedLog, upstreamUrl: string): Record<string
     clientProjectFolder: log.clientProjectFolder,
     streamingChunks: log.streamingChunks,
     streamingChunksPath: log.streamingChunksPath,
+    error: log.error,
   };
 }
 
@@ -252,7 +253,7 @@ function handleStreamingResponse(
         );
         log.streamingChunksPath = chunkPath;
       }
-      appendLogEntry({ ...buildFileLogEntry(log, upstreamUrl), error: null });
+      appendLogEntry(buildFileLogEntry(log, upstreamUrl));
       emitLogUpdate(log);
     },
   });
@@ -264,18 +265,23 @@ function handleStreamingResponse(
   const loggedStream = upstreamRes.body.pipeThrough(transform);
 
   req.signal?.addEventListener("abort", () => {
-    if (log.responseText === null && chunks.length > 0) {
-      const full = chunks.join("");
+    if (log.responseText === null) {
+      logger.info(`[handler] Streaming client aborted: ${log.method} ${log.path}`);
       log.elapsedMs = Date.now() - startTime;
-      log.responseText = formatHandler.extractStream(full, log, log.model ?? undefined, true);
-      // Persist chunks to disk on abort
-      if (log.streamingChunks && log.streamingChunks.chunks.length > 0) {
-        const chunkPath = writeChunks(
-          log.id,
-          log.streamingChunks.chunks,
-          log.streamingChunks.truncated,
-        );
-        log.streamingChunksPath = chunkPath;
+      if (chunks.length > 0) {
+        const full = chunks.join("");
+        log.responseText = formatHandler.extractStream(full, log, log.model ?? undefined, true);
+        // Persist chunks to disk on abort
+        if (log.streamingChunks && log.streamingChunks.chunks.length > 0) {
+          const chunkPath = writeChunks(
+            log.id,
+            log.streamingChunks.chunks,
+            log.streamingChunks.truncated,
+          );
+          log.streamingChunksPath = chunkPath;
+        }
+      } else {
+        log.responseText = "Client aborted";
       }
       appendLogEntry({ ...buildFileLogEntry(log, upstreamUrl), error: "Client aborted" });
       emitLogUpdate(log);
@@ -296,15 +302,17 @@ export async function handleProxy(req: Request): Promise<Response> {
   const url = new URL(req.url);
   const parsed = parseRequestPath(req, url);
 
+  // Read body only after cheap path checks
   let requestBody: string | null = null;
   if (req.body && req.method !== "GET" && req.method !== "HEAD") {
     requestBody = await req.text();
   }
 
-  // Extract model once and reuse
+  // Extract model once and reuse - avoid duplicate parsing
   const model = requestBody !== null ? extractModelFromBody(requestBody) : null;
 
-  const matchedProviderConfig = findProviderByModelFromConfig(requestBody);
+  // Find provider config using already-extracted model (not calling extractModelFromBody again)
+  const matchedProviderConfig = model !== null ? findProviderByModel(model) : null;
   const upstreamBase = selectUpstreamBase(parsed.isChatCompletions, matchedProviderConfig);
   const upstreamUrl = buildUpstreamUrl(upstreamBase, parsed.normalizedPath);
   const upstreamHost = getHostFromUrl(upstreamBase);
@@ -318,6 +326,7 @@ export async function handleProxy(req: Request): Promise<Response> {
 
   // Only proxy requests matching a registered provider
   if (model === null || provider === null) {
+    logger.warn(`[handler] Unsupported provider: model=${model}`);
     return new Response("Forbidden: unsupported provider", { status: STATUS_FORBIDDEN });
   }
 
@@ -354,9 +363,19 @@ export async function handleProxy(req: Request): Promise<Response> {
       method: req.method,
       headers: upstreamHeaders,
       body: requestBody,
+      signal: req.signal,
     });
   } catch (err) {
     log.elapsedMs = Date.now() - startTime;
+    // Check if it was a client abort (not a proxy error)
+    if (err instanceof Error && err.name === "AbortError") {
+      logger.info(`[handler] Client aborted: ${req.method} ${parsed.apiPath}`);
+      log.responseStatus = 499; // Client Closed Request (non-standard but descriptive)
+      log.responseText = "Client aborted";
+      appendLogEntry({ ...buildFileLogEntry(log, upstreamUrl), error: "Client aborted" });
+      return new Response("Client aborted", { status: 499 });
+    }
+    logger.error(`[handler] Proxy error: ${req.method} ${parsed.apiPath}`, String(err));
     log.responseStatus = STATUS_BAD_GATEWAY;
     log.responseText = String(err);
     appendLogEntry({ ...buildFileLogEntry(log, upstreamUrl), error: String(err) });
@@ -380,15 +399,3 @@ export async function handleProxy(req: Request): Promise<Response> {
 
   return handleStreamingResponse(upstreamRes, req, startTime, formatHandler, upstreamUrl, log);
 }
-
-/**
- * Find provider configuration by model name (from persistent store).
- */
-function findProviderByModelFromConfig(
-  requestBody: string | null,
-): ReturnType<typeof findProviderByModel> {
-  if (requestBody === null) return null;
-  const model = extractModelFromBody(requestBody);
-  if (model === null) return null;
-  return findProviderByModel(model);
-}

package/src/proxy/logIndex.ts

@@ -2,7 +2,7 @@ import { readFile, writeFile, stat, readdir, mkdir } from "node:fs/promises";
 import { createReadStream, existsSync } from "node:fs";
 import { join, dirname } from "node:path";
 import { createInterface } from "node:readline";
-import { resolveLogDir } from "./logger";
+import { resolveLogDir, logger } from "./logger";
 
 type LogIndexEntry = {
   id: number;
@@ -71,8 +71,7 @@ export async function loadIndex(): Promise<LogIndex> {
     }
     return cachedIndex;
   } catch (err) {
-    // eslint-disable-next-line no-console
-    console.error("[logIndex] Failed to load index:", err);
+    logger.error("[logIndex] Failed to load index:", String(err));
     cachedIndex = createEmptyIndex();
     return cachedIndex;
   }
@@ -91,8 +90,7 @@ export async function saveIndex(index: LogIndex): Promise<void> {
   try {
     await writeFile(indexPath, JSON.stringify(index), "utf-8");
   } catch (err) {
-    // eslint-disable-next-line no-console
-    console.error("[logIndex] Failed to save index:", err);
+    logger.error("[logIndex] Failed to save index:", String(err));
   }
 }
 
@@ -107,6 +105,36 @@ export async function addToIndex(
   if (id > index.maxId) {
     index.maxId = id;
   }
+  // Defer disk writes to reduce I/O - flush after a batch of updates
+  scheduleIndexFlush();
+}
+
+// Batch writes: collect pending flushes and write once
+let indexFlushScheduled = false;
+let indexFlushTimeout: ReturnType<typeof setTimeout> | null = null;
+
+async function flushIndexAsync(): Promise<void> {
+  indexFlushScheduled = false;
+  indexFlushTimeout = null;
+  const index = await loadIndex();
+  await saveIndex(index);
+}
+
+function scheduleIndexFlush(): void {
+  if (indexFlushScheduled) return;
+  indexFlushScheduled = true;
+  indexFlushTimeout = setTimeout(() => {
+    void flushIndexAsync();
+  }, 1000); // Flush after 1 second of inactivity
+}
+
+export async function flushIndex(): Promise<void> {
+  if (indexFlushTimeout !== null) {
+    clearTimeout(indexFlushTimeout);
+    indexFlushTimeout = null;
+  }
+  indexFlushScheduled = false;
+  const index = await loadIndex();
   await saveIndex(index);
 }
 
@@ -173,9 +201,26 @@ export async function rebuildIndex(): Promise<LogIndex> {
   return newIndex;
 }
 
+// Mutex for atomic ID generation to prevent race conditions
+let idGenerationLock = false;
+
 export async function getNextLogId(): Promise<number> {
-  const index = await loadIndex();
-  return index.maxId + 1;
+  // Wait for any ongoing ID generation to complete
+  while (idGenerationLock) {
+    // Use setTimeout(0) to yield to event loop
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+  idGenerationLock = true;
+  try {
+    const index = await loadIndex();
+    const nextId = index.maxId + 1;
+    index.maxId = nextId;
+    // Synchronously update the index in memory (disk write is deferred via batching)
+    cachedIndex = index;
+    return nextId;
+  } finally {
+    idGenerationLock = false;
+  }
 }
 
 export function getCurrentLogFile(): string {