@tonyclaw/llm-inspector 1.16.4 → 1.17.0

package/src/components/ui/json-viewer-bulk.ts

@@ -0,0 +1,97 @@
+import { useCallback, useMemo, useState, useTransition } from "react";
+
+type JsonPrimitive = string | number | boolean | null;
+export type JsonValue =
+  | JsonPrimitive
+  | ReadonlyArray<JsonValue>
+  | Readonly<{ [key: string]: JsonValue }>;
+
+export type JsonExpansionPolicy = {
+  depth: number;
+};
+
+export function getJsonExpansionPolicy(_value: JsonValue): JsonExpansionPolicy {
+  return { depth: Number.POSITIVE_INFINITY };
+}
+
+export type JsonBulkExpansion = {
+  parsedData: JsonValue | null;
+  policy: JsonExpansionPolicy | null;
+  isExpanded: boolean;
+  toggle: () => void;
+  isPending: boolean;
+  bulkDepth: number;
+  bulkRevision: number;
+};
+
+type ParsedJsonText =
+  | {
+      kind: "json";
+      data: JsonValue;
+    }
+  | {
+      kind: "text";
+    };
+
+export function parseJsonText(text: string): ParsedJsonText {
+  try {
+    const parsed: unknown = JSON.parse(text);
+    return { kind: "json", data: safeJsonValue(parsed) };
+  } catch {
+    return { kind: "text" };
+  }
+}
+
+export function useJsonBulkExpansion(text: string | null): JsonBulkExpansion {
+  const parsed = useMemo(() => (text === null ? null : parseJsonText(text)), [text]);
+  const parsedData = parsed?.kind === "json" ? parsed.data : null;
+  const policy = useMemo(
+    () => (parsedData === null ? null : getJsonExpansionPolicy(parsedData)),
+    [parsedData],
+  );
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [bulkDepth, setBulkDepth] = useState(0);
+  const [bulkRevision, setBulkRevision] = useState(0);
+  const [isPending, startTransition] = useTransition();
+
+  const toggle = useCallback(() => {
+    const nextExpanded = !isExpanded;
+    const targetDepth = nextExpanded && policy !== null ? policy.depth : 0;
+    startTransition(() => {
+      setIsExpanded(nextExpanded);
+      setBulkDepth(targetDepth);
+      setBulkRevision((current) => current + 1);
+    });
+  }, [isExpanded, policy]);
+
+  return { parsedData, policy, isExpanded, toggle, isPending, bulkDepth, bulkRevision };
+}
+
+export function safeJsonValue(value: unknown): JsonValue {
+  if (value === null || value === undefined) return null;
+  switch (typeof value) {
+    case "string":
+      return value;
+    case "number":
+      return value;
+    case "boolean":
+      return value;
+    case "object": {
+      if (Array.isArray(value)) {
+        return value.map((item: unknown) => safeJsonValue(item));
+      }
+      const result: Record<string, JsonValue> = {};
+      for (const key of Object.keys(value)) {
+        const descriptor = Object.getOwnPropertyDescriptor(value, key);
+        result[key] = safeJsonValue(descriptor?.value);
+      }
+      return result;
+    }
+    case "bigint":
+    case "symbol":
+    case "function":
+    case "undefined":
+      return String(value);
+  }
+  return null;
+}

package/src/components/ui/json-viewer.tsx

@@ -1,15 +1,11 @@
-import { Check, ChevronDown, ChevronRight, ChevronsDown, ChevronsUp, Copy } from "lucide-react";
-import { type JSX, memo, useCallback, useMemo, useState, useTransition } from "react";
+import { Check, ChevronDown, ChevronRight, ChevronsDown, Copy } from "lucide-react";
+import { type JSX, memo, useEffect, useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
-
-type JsonPrimitive = string | number | boolean | null;
-export type JsonValue =
-  | JsonPrimitive
-  | ReadonlyArray<JsonValue>
-  | Readonly<{ [key: string]: JsonValue }>;
+import type { JsonValue } from "./json-viewer-bulk";
+import { parseJsonText, safeJsonValue } from "./json-viewer-bulk";
 
 type DataType = "string" | "number" | "boolean" | "null" | "array" | "object";
 
@@ -47,133 +43,6 @@ function getEntries(value: JsonValue): ReadonlyArray<readonly [string, JsonValue
   return [];
 }
 
-export const JSON_FULL_EXPANSION_NODE_LIMIT = 1000;
-export const JSON_LARGE_EXPANSION_DEPTH = 2;
-
-export type JsonExpansionPolicy = {
-  depth: number;
-  limited: boolean;
-  countedNodes: number;
-};
-
-export function countJsonNodes(value: JsonValue, limit = Number.POSITIVE_INFINITY): number {
-  let count = 0;
-  const pending: JsonValue[] = [value];
-
-  while (pending.length > 0) {
-    const current = pending.pop();
-    if (current === undefined) continue;
-    count += 1;
-    if (count > limit) return count;
-    if (!isExpandable(current)) continue;
-    for (const [, child] of getEntries(current)) {
-      pending.push(child);
-    }
-  }
-
-  return count;
-}
-
-export function getJsonExpansionPolicy(value: JsonValue): JsonExpansionPolicy {
-  const countedNodes = countJsonNodes(value, JSON_FULL_EXPANSION_NODE_LIMIT);
-  const limited = countedNodes > JSON_FULL_EXPANSION_NODE_LIMIT;
-  return {
-    depth: limited ? JSON_LARGE_EXPANSION_DEPTH : Number.POSITIVE_INFINITY,
-    limited,
-    countedNodes,
-  };
-}
-
-export type JsonBulkExpansion = {
-  parsedData: JsonValue | null;
-  policy: JsonExpansionPolicy | null;
-  isExpanded: boolean;
-  toggle: () => void;
-  isPending: boolean;
-  bulkDepth: number;
-  bulkRevision: number;
-};
-
-export function useJsonBulkExpansion(text: string | null): JsonBulkExpansion {
-  const parsed = useMemo(() => (text === null ? null : parseJsonText(text)), [text]);
-  const parsedData = parsed?.kind === "json" ? parsed.data : null;
-  const policy = useMemo(
-    () => (parsedData === null ? null : getJsonExpansionPolicy(parsedData)),
-    [parsedData],
-  );
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [bulkDepth, setBulkDepth] = useState(0);
-  const [bulkRevision, setBulkRevision] = useState(0);
-  const [isPending, startTransition] = useTransition();
-
-  const toggle = useCallback(() => {
-    const nextExpanded = !isExpanded;
-    const targetDepth = nextExpanded && policy !== null ? policy.depth : 0;
-    startTransition(() => {
-      setIsExpanded(nextExpanded);
-      setBulkDepth(targetDepth);
-      setBulkRevision((current) => current + 1);
-    });
-  }, [isExpanded, policy]);
-
-  return { parsedData, policy, isExpanded, toggle, isPending, bulkDepth, bulkRevision };
-}
-
-export function JsonExpansionButton({
-  policy,
-  isExpanded,
-  isPending,
-  onToggle,
-}: {
-  policy: JsonExpansionPolicy | null;
-  isExpanded: boolean;
-  isPending: boolean;
-  onToggle: () => void;
-}): JSX.Element | null {
-  if (policy === null) return null;
-
-  const label = isPending
-    ? "Updating..."
-    : isExpanded
-      ? "Collapse all"
-      : policy.limited
-        ? `Expand ${JSON_LARGE_EXPANSION_DEPTH} levels`
-        : "Expand all";
-
-  const tooltip =
-    policy.limited && !isExpanded
-      ? `Large JSON detected; expand ${JSON_LARGE_EXPANSION_DEPTH} levels to protect rendering performance`
-      : isExpanded
-        ? "Collapse all JSON nodes"
-        : "Expand all JSON nodes";
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-7 text-xs"
-          onClick={(e) => {
-            e.stopPropagation();
-            onToggle();
-          }}
-          disabled={isPending}
-          aria-pressed={isExpanded}
-        >
-          {isExpanded ? (
-            <ChevronsUp className="size-3 mr-1" />
-          ) : (
-            <ChevronsDown className="size-3 mr-1" />
-          )}
-          {label}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>{tooltip}</TooltipContent>
-    </Tooltip>
-  );
-}
-
 const STRING_TRUNCATE_LIMIT = 120;
 
 function StringValue({ text }: { text: string }): JSX.Element {
@@ -320,6 +189,12 @@ type JsonNodeProps = {
   level: number;
   defaultExpandDepth: number;
   isArrayItem: boolean;
+  /** Full JSON-pointer-style path to this node (e.g. "/messages/3"). */
+  path: string;
+  /** When set, ancestors of this path auto-expand for one render. */
+  expandTargetPath: string | null;
+  /** Set of paths that should expose `data-anatomy-path` on their row. */
+  anatomyPaths: Set<string> | null;
 };
 
 function ExpandCollapseButton({
@@ -345,8 +220,31 @@ const JsonNode = memo(function JsonNode({
   level,
   defaultExpandDepth,
   isArrayItem,
+  path,
+  expandTargetPath,
+  anatomyPaths,
 }: JsonNodeProps): JSX.Element {
-  const [expanded, setExpanded] = useState(level < defaultExpandDepth);
+  // A node is an ancestor of the target if the target starts with this
+  // node's path followed by a path separator. The root path is "" and
+  // is an ancestor of every non-empty path.
+  const isAncestorOfTarget = useMemo(() => {
+    if (expandTargetPath === null) return false;
+    if (path === "") return expandTargetPath.length > 0;
+    return expandTargetPath === path || expandTargetPath.startsWith(`${path}/`);
+  }, [expandTargetPath, path]);
+
+  const initialExpanded = level < defaultExpandDepth || (isAncestorOfTarget && isExpandable(value));
+
+  const [expanded, setExpanded] = useState(initialExpanded);
+  // Re-evaluate on every render so a freshly-changed expandTargetPath
+  // immediately auto-expands a previously-collapsed ancestor.
+  useEffect(() => {
+    if (isAncestorOfTarget && isExpandable(value) && !expanded) {
+      setExpanded(true);
+    }
+    // We deliberately only react to expandTargetPath changes here.
+  }, [expandTargetPath]);
+
   const [childResetKey, setChildResetKey] = useState(0);
   const [childDepthOverride, setChildDepthOverride] = useState<number | null>(null);
   const expandable = isExpandable(value);
@@ -361,6 +259,8 @@ const JsonNode = memo(function JsonNode({
   const openBracket = dataType === "array" ? "[" : "{";
   const closeBracket = dataType === "array" ? "]" : "}";
 
+  const hasAnatomyPath = anatomyPaths !== null && anatomyPaths.has(path);
+
   function expandAllDeep(): void {
     setExpanded(true);
     setChildDepthOverride(Number.POSITIVE_INFINITY);
@@ -395,6 +295,7 @@ const JsonNode = memo(function JsonNode({
           "flex items-start gap-1 py-0.5 px-1 -ml-1 rounded-sm group/row",
           expandable && "cursor-pointer hover:bg-muted/50",
         )}
+        data-anatomy-path={hasAnatomyPath ? path : undefined}
         onClick={expandable ? handleRowToggle : undefined}
         onKeyDown={
           expandable
@@ -458,6 +359,9 @@ const JsonNode = memo(function JsonNode({
               level={level + 1}
               defaultExpandDepth={effectiveChildDepth}
               isArrayItem={dataType === "array"}
+              path={path === "" ? `/${key}` : `${path}/${key}`}
+              expandTargetPath={expandTargetPath}
+              anatomyPaths={anatomyPaths}
             />
           ))}
           <div className="text-muted-foreground py-0.5 px-1">{closeBracket}</div>
@@ -474,6 +378,19 @@ export type JsonViewerProps = {
   showCopy?: boolean;
   bulkDepth?: number;
   bulkRevision?: number;
+  /**
+   * Set of JSON-pointer-style paths whose row should expose a
+   * `data-anatomy-path` attribute. Used by the Anatomy view to
+   * locate rows for click-to-jump. When `null` or `undefined`,
+   * no `data-anatomy-path` attribute is emitted (zero cost).
+   */
+  anatomyPaths?: Set<string> | null;
+  /**
+   * When set, every ancestor of this path in the tree auto-expands
+   * for one render so the target row becomes visible. The hook
+   * flips this back to `null` after the scroll lands.
+   */
+  expandToPath?: string | null;
 };
 
 export function JsonViewer({
@@ -483,6 +400,8 @@ export function JsonViewer({
   showCopy = false,
   bulkDepth: controlledBulkDepth,
   bulkRevision: controlledBulkRevision,
+  anatomyPaths = null,
+  expandToPath = null,
 }: JsonViewerProps): JSX.Element {
   const expandable = isExpandable(data);
   const entries = useMemo(() => getEntries(data), [data]);
@@ -523,6 +442,9 @@ export function JsonViewer({
               level={0}
               defaultExpandDepth={bulkDepth}
               isArrayItem={isArray}
+              path={`/${key}`}
+              expandTargetPath={expandToPath}
+              anatomyPaths={anatomyPaths}
             />
           ))}
         </div>
@@ -537,24 +459,6 @@ export type JsonViewerFromStringProps = {
   className?: string;
 };
 
-type ParsedJsonText =
-  | {
-      kind: "json";
-      data: JsonValue;
-    }
-  | {
-      kind: "text";
-    };
-
-function parseJsonText(text: string): ParsedJsonText {
-  try {
-    const parsed: unknown = JSON.parse(text);
-    return { kind: "json", data: safeJsonValue(parsed) };
-  } catch {
-    return { kind: "text" };
-  }
-}
-
 export const JsonViewerFromString = memo(function JsonViewerFromString({
   text,
   defaultExpandDepth = 0,
@@ -576,32 +480,3 @@ export const JsonViewerFromString = memo(function JsonViewerFromString({
     <pre className={cn("font-mono text-xs whitespace-pre-wrap break-words", className)}>{text}</pre>
   );
 });
-
-export function safeJsonValue(value: unknown): JsonValue {
-  if (value === null || value === undefined) return null;
-  switch (typeof value) {
-    case "string":
-      return value;
-    case "number":
-      return value;
-    case "boolean":
-      return value;
-    case "object": {
-      if (Array.isArray(value)) {
-        return value.map((item: unknown) => safeJsonValue(item));
-      }
-      const result: Record<string, JsonValue> = {};
-      for (const key of Object.keys(value)) {
-        const descriptor = Object.getOwnPropertyDescriptor(value, key);
-        result[key] = safeJsonValue(descriptor?.value);
-      }
-      return result;
-    }
-    case "bigint":
-    case "symbol":
-    case "function":
-    case "undefined":
-      return String(value);
-  }
-  return null;
-}

package/src/lib/runtimeConfig.ts

@@ -1,5 +1,8 @@
 import { z } from "zod";
 
+export const DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS = 10;
+export const MAX_SLOW_RESPONSE_THRESHOLD_SECONDS = 600;
+
 /**
  * Schema for the runtime proxy config. Shared between server
  * (src/proxy/config.ts) and client (src/lib/useStripConfig.ts) so that
@@ -11,6 +14,12 @@ import { z } from "zod";
 export const RuntimeConfigSchema = z.object({
   stripClaudeCodeBillingHeader: z.boolean(),
   hasSeenOnboarding: z.boolean().default(false),
+  slowResponseThresholdSeconds: z
+    .number()
+    .int()
+    .min(0)
+    .max(MAX_SLOW_RESPONSE_THRESHOLD_SECONDS)
+    .default(DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS),
 });
 
 export type RuntimeConfig = z.infer<typeof RuntimeConfigSchema>;

package/src/lib/useOnboarding.ts

@@ -1,6 +1,10 @@
 import useSWR, { type SWRResponse, useSWRConfig } from "swr";
 import { fetchJson } from "./apiClient";
-import { RuntimeConfigSchema, type RuntimeConfig } from "./runtimeConfig";
+import {
+  DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  RuntimeConfigSchema,
+  type RuntimeConfig,
+} from "./runtimeConfig";
 
 export const ONBOARDING_SWR_KEY = "/api/config";
 
@@ -60,6 +64,8 @@ export function useOnboarding(): UseOnboarding {
       optimisticData: {
         stripClaudeCodeBillingHeader: response.data?.stripClaudeCodeBillingHeader ?? false,
         hasSeenOnboarding: true,
+        slowResponseThresholdSeconds:
+          response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
       },
       rollbackOnError: true,
       revalidate: false,

package/src/lib/useStripConfig.ts

@@ -1,6 +1,10 @@
 import useSWR, { type SWRResponse, useSWRConfig } from "swr";
 import { fetchJson } from "./apiClient";
-import { RuntimeConfigSchema, type RuntimeConfig } from "./runtimeConfig";
+import {
+  DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  RuntimeConfigSchema,
+  type RuntimeConfig,
+} from "./runtimeConfig";
 
 export const STRIP_CONFIG_SWR_KEY = "/api/config";
 
@@ -31,15 +35,18 @@ export async function setRuntimeConfig(patch: Partial<RuntimeConfig>): Promise<R
 
 export type UseStripConfig = {
   strip: boolean;
+  slowResponseThresholdSeconds: number;
   isLoading: boolean;
   isError: boolean;
   setStrip: (next: boolean) => Promise<void>;
+  setSlowResponseThresholdSeconds: (next: number) => Promise<void>;
 };
 
 /**
  * Hook reading the runtime config from /api/config.
  *
  * - `strip` is the live value from the server (or the optimistic value mid-PATCH).
+ * - `slowResponseThresholdSeconds` controls the UI's slow-response indicator.
  * - `setStrip(next)` PATCHes the server with optimistic update; on failure
  *   it throws and SWR rolls back the optimistic value.
  */
@@ -55,13 +62,35 @@ export function useStripConfig(): UseStripConfig {
   const { mutate: globalMutate } = useSWRConfig();
 
   const strip = response.data?.stripClaudeCodeBillingHeader ?? false;
+  const slowResponseThresholdSeconds =
+    response.data?.slowResponseThresholdSeconds ?? DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS;
+
+  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,
+    ...patch,
+  });
 
   const setStrip = async (next: boolean): Promise<void> => {
     await globalMutate(
       STRIP_CONFIG_SWR_KEY,
       setRuntimeConfig({ stripClaudeCodeBillingHeader: next }),
       {
-        optimisticData: { stripClaudeCodeBillingHeader: next },
+        optimisticData: optimisticConfig({ stripClaudeCodeBillingHeader: next }),
+        rollbackOnError: true,
+        revalidate: false,
+      },
+    );
+  };
+
+  const setSlowResponseThresholdSeconds = async (next: number): Promise<void> => {
+    await globalMutate(
+      STRIP_CONFIG_SWR_KEY,
+      setRuntimeConfig({ slowResponseThresholdSeconds: next }),
+      {
+        optimisticData: optimisticConfig({ slowResponseThresholdSeconds: next }),
         rollbackOnError: true,
         revalidate: false,
       },
@@ -70,8 +99,10 @@ export function useStripConfig(): UseStripConfig {
 
   return {
     strip,
+    slowResponseThresholdSeconds,
     isLoading: response.isLoading,
     isError: response.error !== undefined,
     setStrip,
+    setSlowResponseThresholdSeconds,
   };
 }

package/src/lib/utils.ts

@@ -6,9 +6,8 @@ export function cn(...inputs: ClassValue[]): string {
 }
 
 export function formatTokens(count: number): string {
-  if (count >= 1_048_576) return (count / 1_048_576).toFixed(1).replace(/\.0$/, "") + "M";
-  if (count >= 1024) return (count / 1024).toFixed(1).replace(/\.0$/, "") + "K";
-  return count.toString();
+  if (count >= 1_000_000) return (count / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
+  return (count / 1000).toFixed(1).replace(/\.0$/, "") + "K";
 }
 
 export type StatusCategory = "success" | "client_error" | "server_error" | "pending";

package/src/proxy/config.ts

@@ -10,7 +10,11 @@ import {
 import { join } from "node:path";
 import { logger } from "./logger";
 import { getDataDir } from "./dataDir";
-import { RuntimeConfigSchema, type RuntimeConfig } from "../lib/runtimeConfig";
+import {
+  DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  RuntimeConfigSchema,
+  type RuntimeConfig,
+} from "../lib/runtimeConfig";
 
 // Re-export so server-side callers (api/config.ts, tests) keep the
 // existing import path `from "../../proxy/config"`.
@@ -18,10 +22,8 @@ export { RuntimeConfigSchema };
 export type { RuntimeConfig };
 
 /**
- * Runtime-mutable server config. Currently exposes a single flag for
- * stripping the synthetic `x-anthropic-billing-header:` text block that
- * Claude Code prepends to system prompts. The proxy handler reads
- * `getConfig().stripClaudeCodeBillingHeader` once per request; the API
+ * Runtime-mutable server config. Includes proxy behavior flags and UI tuning
+ * settings that should take effect without restarting the dev server. The API
  * layer reads and writes the same object via `getConfig` / `setConfig`.
  *
  * Boot-time precedence (first match wins):
@@ -73,11 +75,19 @@ function resolveInitialConfig(): RuntimeConfig {
 
   // 2. Env var
   if (process.env["LLM_INSPECTOR_STRIP_CLAUDE_CODE_BILLING_HEADER"] === "1") {
-    return { stripClaudeCodeBillingHeader: true, hasSeenOnboarding: false };
+    return {
+      stripClaudeCodeBillingHeader: true,
+      hasSeenOnboarding: false,
+      slowResponseThresholdSeconds: DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+    };
   }
 
   // 3. Default off
-  return { stripClaudeCodeBillingHeader: false, hasSeenOnboarding: false };
+  return {
+    stripClaudeCodeBillingHeader: false,
+    hasSeenOnboarding: false,
+    slowResponseThresholdSeconds: DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS,
+  };
 }
 
 /**

package/src/routes/api/config.ts

@@ -1,5 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { z } from "zod";
+import { MAX_SLOW_RESPONSE_THRESHOLD_SECONDS } from "../../lib/runtimeConfig";
 import { getConfig, setConfig, RuntimeConfigSchema } from "../../proxy/config";
 
 // Partial schema for PATCH: at least one known field must be present.
@@ -7,6 +8,12 @@ const RuntimeConfigPatchSchema = z
   .object({
     stripClaudeCodeBillingHeader: z.boolean().optional(),
     hasSeenOnboarding: z.boolean().optional(),
+    slowResponseThresholdSeconds: z
+      .number()
+      .int()
+      .min(0)
+      .max(MAX_SLOW_RESPONSE_THRESHOLD_SECONDS)
+      .optional(),
   })
   .strict()
   .refine((v) => Object.keys(v).length > 0, {

package/src/routes/api/logs.stream.ts

@@ -11,20 +11,10 @@ export const Route = createFileRoute("/api/logs/stream")({
         const model = url.searchParams.get("model") ?? undefined;
 
         let controllerRef: ReadableStreamDefaultController<Uint8Array> | null = null;
-
-        // Send heartbeat comment every 30s to keep connection alive
-        const heartbeat = setInterval(() => {
-          if (controllerRef) {
-            try {
-              controllerRef.enqueue(new TextEncoder().encode(": heartbeat\n\n"));
-            } catch {
-              // Stream closed
-            }
-          }
-        }, 30000);
+        let cleanedUp = false;
 
         const unsubscribe = onLogUpdate((log: CapturedLog) => {
-          if (!controllerRef) return;
+          if (controllerRef === null) return;
           // Filter by session/model if specified
           if (sessionId !== undefined && log.sessionId !== sessionId) return;
           if (model !== undefined && log.model !== model) return;
@@ -32,10 +22,32 @@ export const Route = createFileRoute("/api/logs/stream")({
             const data = `data: ${JSON.stringify({ type: "update", log })}\n\n`;
             controllerRef.enqueue(new TextEncoder().encode(data));
           } catch {
-            // Stream closed
+            cleanup();
           }
         });
 
+        const cleanup = (): void => {
+          if (cleanedUp) return;
+          cleanedUp = true;
+          clearInterval(heartbeat);
+          unsubscribe();
+          controllerRef = null;
+          request.signal.removeEventListener("abort", cleanup);
+        };
+
+        // Send heartbeat comment every 30s to keep connection alive
+        const heartbeat = setInterval(() => {
+          if (controllerRef !== null) {
+            try {
+              controllerRef.enqueue(new TextEncoder().encode(": heartbeat\n\n"));
+            } catch {
+              cleanup();
+            }
+          }
+        }, 30000);
+
+        request.signal.addEventListener("abort", cleanup, { once: true });
+
         const stream = new ReadableStream<Uint8Array>({
           start(controller) {
             controllerRef = controller;
@@ -45,9 +57,7 @@ export const Route = createFileRoute("/api/logs/stream")({
             controller.enqueue(new TextEncoder().encode(initData));
           },
           cancel() {
-            clearInterval(heartbeat);
-            unsubscribe();
-            controllerRef = null;
+            cleanup();
           },
         });