@tonyclaw/llm-inspector 1.16.5 → 1.17.0

package/.output/server/index.mjs

@@ -38,91 +38,91 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-15T12:23:59.073Z",
+    "mtime": "2026-06-16T13:43:26.730Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
-  "/assets/minimax-BPMzvuL-.jpeg": {
-    "type": "image/jpeg",
-    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-15T12:23:59.073Z",
-    "size": 6918,
-    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
-  },
-  "/assets/CompareDrawer-C1w4KUGZ.js": {
+  "/assets/CompareDrawer-C4fie5g5.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"4a10-U7vRVdbG90QCagHyB/PsN2Edv9Y"',
-    "mtime": "2026-06-15T12:23:59.073Z",
+    "etag": '"4a10-3djWuOwKSKXlQPoy4NHzqd2tggE"',
+    "mtime": "2026-06-16T13:43:26.730Z",
     "size": 18960,
-    "path": "../public/assets/CompareDrawer-C1w4KUGZ.js"
-  },
-  "/assets/json-viewer-C_QUhGeu.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"1e60c-NxhepLRPlTKqcPUc59jhJtOyGpg"',
-    "mtime": "2026-06-15T12:23:59.074Z",
-    "size": 124428,
-    "path": "../public/assets/json-viewer-C_QUhGeu.js"
+    "path": "../public/assets/CompareDrawer-C4fie5g5.js"
   },
-  "/assets/index-BGzHFOEX.css": {
+  "/assets/index-DoGvsnbA.css": {
     "type": "text/css; charset=utf-8",
-    "etag": '"16d02-Bx7KW/5wmN1RfMrbWqhaqF7lGHk"',
-    "mtime": "2026-06-15T12:23:59.073Z",
-    "size": 93442,
-    "path": "../public/assets/index-BGzHFOEX.css"
+    "etag": '"16d26-qw65JIM4oxztXa/jhWYD9PPuvfA"',
+    "mtime": "2026-06-16T13:43:26.730Z",
+    "size": 93478,
+    "path": "../public/assets/index-DoGvsnbA.css"
   },
-  "/assets/ReplayDialog-DR2Sgq_g.js": {
+  "/assets/index-DpbutOvo.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"11b1-xYgR1cdDnesImArvyIDX3s2xRMU"',
-    "mtime": "2026-06-15T12:23:59.073Z",
-    "size": 4529,
-    "path": "../public/assets/ReplayDialog-DR2Sgq_g.js"
+    "etag": '"744e2-P9RhN2wY9pxyu6b/wpeHlefe59k"',
+    "mtime": "2026-06-16T13:43:26.731Z",
+    "size": 476386,
+    "path": "../public/assets/index-DpbutOvo.js"
   },
-  "/assets/ResponseView-ackes7_g.js": {
+  "/assets/ReplayDialog-Dme5uOR9.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"6e82-UP1WD/TqChwiuI7DV8LDxr8mcoI"',
-    "mtime": "2026-06-15T12:23:59.074Z",
-    "size": 28290,
-    "path": "../public/assets/ResponseView-ackes7_g.js"
+    "etag": '"11b1-SKRfqUa9SY8yNi8IxWzCC6VvjQI"',
+    "mtime": "2026-06-16T13:43:26.730Z",
+    "size": 4529,
+    "path": "../public/assets/ReplayDialog-Dme5uOR9.js"
   },
-  "/assets/zhipuai-BPNAnxo-.svg": {
-    "type": "image/svg+xml",
-    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-15T12:23:59.073Z",
-    "size": 11256,
-    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
+  "/assets/json-viewer-BV-WUszW.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"1e60c-26TCWxphlokObc5HBPeY7NRlcXU"',
+    "mtime": "2026-06-16T13:43:26.731Z",
+    "size": 124428,
+    "path": "../public/assets/json-viewer-BV-WUszW.js"
   },
-  "/assets/RequestAnatomy-DAre35kj.js": {
+  "/assets/RequestAnatomy-ChBLDNFH.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"141b-+jsq3YAE5FysxZARhUPCzQUpXJE"',
-    "mtime": "2026-06-15T12:23:59.074Z",
+    "etag": '"141b-nxiiCAE0vs7SLaqcUISSgXq1IGo"',
+    "mtime": "2026-06-16T13:43:26.730Z",
     "size": 5147,
-    "path": "../public/assets/RequestAnatomy-DAre35kj.js"
+    "path": "../public/assets/RequestAnatomy-ChBLDNFH.js"
+  },
+  "/assets/minimax-BPMzvuL-.jpeg": {
+    "type": "image/jpeg",
+    "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
+    "mtime": "2026-06-16T13:43:26.730Z",
+    "size": 6918,
+    "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/main-CDMdNDY_.js": {
+  "/assets/main-DRu10KNQ.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"505ae-1nSD340FKDRNgunwXT0ErZchYkU"',
-    "mtime": "2026-06-15T12:23:59.074Z",
+    "etag": '"505ae-BP/aj8/2FZWooG/jXqGZEmVfl3E"',
+    "mtime": "2026-06-16T13:43:26.730Z",
     "size": 329134,
-    "path": "../public/assets/main-CDMdNDY_.js"
+    "path": "../public/assets/main-DRu10KNQ.js"
   },
-  "/assets/StreamingChunkSequence-GrXwIGKA.js": {
+  "/assets/StreamingChunkSequence-zeJZQLqT.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"d72-eczKwdvLd8GmG1QNwNn/d+VEOq0"',
-    "mtime": "2026-06-15T12:23:59.074Z",
+    "etag": '"d72-nuJyJopptXOHt0oPHw//D9VSW+k"',
+    "mtime": "2026-06-16T13:43:26.731Z",
     "size": 3442,
-    "path": "../public/assets/StreamingChunkSequence-GrXwIGKA.js"
+    "path": "../public/assets/StreamingChunkSequence-zeJZQLqT.js"
   },
-  "/assets/index-DX88k9br.js": {
+  "/assets/ResponseView-wGeqBzVU.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"738e0-qSt/VXgdC2y0xa/XDlbeCzFrP6k"',
-    "mtime": "2026-06-15T12:23:59.073Z",
-    "size": 473312,
-    "path": "../public/assets/index-DX88k9br.js"
+    "etag": '"6e82-ZzZo1WT+DlE16b9M9AMC/410RcI"',
+    "mtime": "2026-06-16T13:43:26.731Z",
+    "size": 28290,
+    "path": "../public/assets/ResponseView-wGeqBzVU.js"
+  },
+  "/assets/zhipuai-BPNAnxo-.svg": {
+    "type": "image/svg+xml",
+    "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
+    "mtime": "2026-06-16T13:43:26.730Z",
+    "size": 11256,
+    "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-15T12:23:59.073Z",
+    "mtime": "2026-06-16T13:43:26.730Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.16.5",
+  "version": "1.17.0",
   "type": "module",
   "description": "LLM API proxy inspector — captures and displays requests/responses from AI coding tools in a web UI",
   "license": "MIT",

package/src/components/ProxyViewer.tsx

@@ -3,6 +3,7 @@ import { Download } from "lucide-react";
 
 import type { CapturedLog } from "../proxy/schemas";
 import { exportLogsAsZip } from "../lib/export-logs";
+import { formatTokens } from "../lib/utils";
 import packageJson from "../../package.json";
 import { ConversationGroup, groupLogsByConversation } from "./proxy-viewer";
 
@@ -98,6 +99,8 @@ export type ProxyViewerProps = {
   onViewModeChange: (mode: "simple" | "full") => void;
   /** Live strip-Claude-Code-billing-header flag, sourced once at the container. */
   strip: boolean;
+  /** Slow-response threshold in seconds. `0` disables the warning indicator. */
+  slowResponseThresholdSeconds: number;
 };
 
 export function ProxyViewer({
@@ -113,6 +116,7 @@ export function ProxyViewer({
   viewMode,
   onViewModeChange,
   strip,
+  slowResponseThresholdSeconds,
 }: ProxyViewerProps): JSX.Element {
   const { totalIn, totalOut } = useMemo(() => computeTokenSummary(logs), [logs]);
   const [exporting, setExporting] = useState(false);
@@ -276,7 +280,7 @@ export function ProxyViewer({
         <span className="text-muted-foreground text-xs font-mono">
           {logs.length} request{logs.length !== 1 ? "s" : ""}
           {totalIn > 0 || totalOut > 0
-            ? ` · ${totalIn.toLocaleString()} in / ${totalOut.toLocaleString()} out`
+            ? ` · ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`
             : ""}
         </span>
         {logs.length > 0 && (
@@ -330,6 +334,7 @@ export function ProxyViewer({
                   group={group}
                   viewMode={viewMode}
                   strip={strip}
+                  slowResponseThresholdSeconds={slowResponseThresholdSeconds}
                   cacheTrends={cacheTrends}
                   onCompareWithPrevious={handleCompareWithPrevious}
                   comparisonPredecessors={comparisonPredecessors}

package/src/components/ProxyViewerContainer.tsx

@@ -250,7 +250,7 @@ export function ProxyViewerContainer(): JSX.Element {
 
   // Read the strip config once at the container so the virtualized list does
   // not need N independent SWR subscriptions per row.
-  const { strip } = useStripConfig();
+  const { strip, slowResponseThresholdSeconds } = useStripConfig();
 
   return (
     <>
@@ -273,6 +273,7 @@ export function ProxyViewerContainer(): JSX.Element {
         viewMode={viewMode}
         onViewModeChange={setViewMode}
         strip={strip}
+        slowResponseThresholdSeconds={slowResponseThresholdSeconds}
       />
     </>
   );

package/src/components/providers/SettingsDialog.tsx

@@ -6,6 +6,7 @@ import { Button } from "../ui/button";
 import { ProvidersPanel } from "./ProvidersPanel";
 import { useProviders } from "../../lib/useProviders";
 import { useStripConfig } from "../../lib/useStripConfig";
+import { MAX_SLOW_RESPONSE_THRESHOLD_SECONDS } from "../../lib/runtimeConfig";
 
 export function SettingsDialog(): JSX.Element {
   const [open, setOpen] = useState(false);
@@ -96,7 +97,13 @@ export function SettingsDialog(): JSX.Element {
 }
 
 function ProxySettingsTab(): JSX.Element {
-  const { strip, isLoading, setStrip } = useStripConfig();
+  const {
+    strip,
+    slowResponseThresholdSeconds,
+    isLoading,
+    setStrip,
+    setSlowResponseThresholdSeconds,
+  } = useStripConfig();
   const [error, setError] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
 
@@ -115,6 +122,21 @@ function ProxySettingsTab(): JSX.Element {
     [setStrip],
   );
 
+  const handleThresholdChange = useCallback(
+    async (next: number) => {
+      setError(null);
+      setPending(true);
+      try {
+        await setSlowResponseThresholdSeconds(next);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setPending(false);
+      }
+    },
+    [setSlowResponseThresholdSeconds],
+  );
+
   return (
     <div className="space-y-4">
       <div className="space-y-1">
@@ -145,6 +167,35 @@ function ProxySettingsTab(): JSX.Element {
         </span>
       </label>
 
+      <div className="space-y-1">
+        <label htmlFor="slow-response-threshold" className="text-sm font-semibold">
+          Slow response threshold
+        </label>
+        <p className="text-xs text-muted-foreground">
+          Logs whose elapsed time exceeds this many seconds show a warning icon next to the
+          duration. Set to <code>0</code> to disable the indicator.
+        </p>
+        <div className="flex items-center gap-2">
+          <input
+            id="slow-response-threshold"
+            type="number"
+            min={0}
+            max={MAX_SLOW_RESPONSE_THRESHOLD_SECONDS}
+            step={1}
+            value={slowResponseThresholdSeconds}
+            disabled={isLoading || pending}
+            onChange={(e) => {
+              const next = Number(e.currentTarget.value);
+              if (!Number.isInteger(next)) return;
+              if (next < 0 || next > MAX_SLOW_RESPONSE_THRESHOLD_SECONDS) return;
+              void handleThresholdChange(next);
+            }}
+            className="h-8 w-24 rounded-md border border-input bg-transparent px-2 text-sm font-mono disabled:cursor-not-allowed disabled:opacity-50"
+          />
+          <span className="text-xs text-muted-foreground">seconds</span>
+        </div>
+      </div>
+
       {error !== null && <p className="text-xs text-destructive">Failed to save: {error}</p>}
     </div>
   );

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

@@ -16,6 +16,8 @@ export type ConversationGroupProps = {
   viewMode?: "simple" | "full";
   /** Live strip-Claude-Code-billing-header flag from the viewer container. */
   strip: boolean;
+  /** Slow-response threshold in seconds. `0` disables the warning indicator. */
+  slowResponseThresholdSeconds: number;
   /**
    * Pre-computed per-log cache token trend map (keyed by `log.id`) shared
    * across the whole viewer. Each `LogEntry` looks up its own entry.
@@ -47,6 +49,7 @@ export const ConversationGroup = memo(function ({
   group,
   viewMode = "simple",
   strip,
+  slowResponseThresholdSeconds,
   cacheTrends,
   onCompareWithPrevious,
   comparisonPredecessors,
@@ -97,6 +100,7 @@ export const ConversationGroup = memo(function ({
               entries={tg.entries}
               viewMode={viewMode}
               strip={strip}
+              slowResponseThresholdSeconds={slowResponseThresholdSeconds}
               cacheTrends={cacheTrends}
               onCompareWithPrevious={onCompareWithPrevious}
               comparisonPredecessors={comparisonPredecessors}

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

@@ -45,6 +45,8 @@ export type LogEntryProps = {
    * cost).
    */
   strip: boolean;
+  /** Slow-response threshold in seconds. `0` disables the warning indicator. */
+  slowResponseThresholdSeconds: number;
   /**
    * Per-log cache token trend, looked up in the viewer-level trend map.
    * `null` (or absent) means the header should render with no arrows.
@@ -180,6 +182,7 @@ export const LogEntry = memo(function ({
   log,
   viewMode = "simple",
   strip,
+  slowResponseThresholdSeconds,
   cacheTrend = null,
   onCompareWithPrevious,
 }: LogEntryProps): JSX.Element {
@@ -242,6 +245,7 @@ export const LogEntry = memo(function ({
           onToggle={() => setExpanded(!expanded)}
           responseToolNames={responseAnalysis.toolNames}
           cacheTrend={cacheTrend}
+          slowResponseThresholdSeconds={slowResponseThresholdSeconds}
           onReplay={
             onCompareWithPrevious === undefined
               ? undefined

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

@@ -41,6 +41,14 @@ function formatElapsed(ms: number): string {
   return `${(ms / 1000).toFixed(1)}s`;
 }
 
+function formatTimestamp(iso: string): string {
+  const d = new Date(iso);
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  const ss = String(d.getSeconds()).padStart(2, "0");
+  return `${hh}:${mm}:${ss}`;
+}
+
 /**
  * Inline trend indicator: small arrow (green up / red down) plus the absolute
  * delta in compact form. Returns `null` when there is no trend to display.
@@ -91,6 +99,8 @@ export type LogEntryHeaderProps = {
     isExpanded: boolean;
     isPending: boolean;
   } | null;
+  /** Slow-response threshold in seconds. `0` disables the warning indicator. */
+  slowResponseThresholdSeconds?: number;
 };
 
 export const LogEntryHeader = memo(function ({
@@ -106,8 +116,13 @@ export const LogEntryHeader = memo(function ({
   requestCopied = false,
   onToggleRequestExpansion,
   requestExpansionState = null,
+  slowResponseThresholdSeconds = 0,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
+  const isSlowResponse =
+    log.elapsedMs !== null &&
+    slowResponseThresholdSeconds > 0 &&
+    log.elapsedMs > slowResponseThresholdSeconds * 1000;
 
   const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
   const toolNamesJoined = useMemo(() => responseToolNames?.join(", ") ?? null, [responseToolNames]);
@@ -138,6 +153,17 @@ export const LogEntryHeader = memo(function ({
           #{log.id}
         </span>
 
+        {/* Timestamp */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+              <Clock className="size-3" />
+              <span className="font-mono tabular-nums">{formatTimestamp(log.timestamp)}</span>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>{log.timestamp}</TooltipContent>
+        </Tooltip>
+
         {/* Model — logo icon only, model name in tooltip */}
         {log.model !== null && (
           <Tooltip>
@@ -174,10 +200,27 @@ export const LogEntryHeader = memo(function ({
 
         {/* Elapsed time */}
         {log.elapsedMs !== null && (
-          <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
-            <Clock className="size-3" />
-            <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
-          </span>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span
+                className={cn(
+                  "flex items-center gap-1 text-xs shrink-0",
+                  isSlowResponse ? "text-amber-400" : "text-muted-foreground",
+                )}
+              >
+                <Clock className="size-3" />
+                <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
+                {isSlowResponse && <AlertTriangle className="size-3" aria-label="Slow response" />}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              {isSlowResponse
+                ? `Slow response: ${formatElapsed(log.elapsedMs)} exceeds ${formatElapsed(
+                    slowResponseThresholdSeconds * 1000,
+                  )}`
+                : "Elapsed response time"}
+            </TooltipContent>
+          </Tooltip>
         )}
 
         {/* Token counts */}

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

@@ -1,10 +1,11 @@
 import { type JSX, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ChevronRight, Clock, Zap } from "lucide-react";
+import { AlertTriangle, ChevronRight, Clock, Zap } from "lucide-react";
 import { isTurnBoundary } from "../../lib/stopReason";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
 import { getCrabVariant } from "../ui/crab-variants";
 import { ProviderLogo, detectProvider, type Provider } from "../providers/ProviderLogo";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
 import { ThreadConnector } from "./ThreadConnector";
@@ -19,6 +20,7 @@ type TurnGroupProps = {
   entries: TurnEntry[];
   viewMode: "simple" | "full";
   strip: boolean;
+  slowResponseThresholdSeconds: number;
   cacheTrends?: Map<number, CacheTrendEntry>;
   onCompareWithPrevious: (log: CapturedLog) => void;
   comparisonPredecessors: Map<number, CapturedLog>;
@@ -29,6 +31,7 @@ export const TurnGroup = memo(function TurnGroup({
   entries,
   viewMode,
   strip,
+  slowResponseThresholdSeconds,
   cacheTrends,
   onCompareWithPrevious,
   comparisonPredecessors,
@@ -102,6 +105,10 @@ export const TurnGroup = memo(function TurnGroup({
   const EndCrab = useMemo(() => getCrabVariant(entries[lastIdx]?.log.id ?? 0), [entries, lastIdx]);
 
   const bgClass = turnIndex % 2 === 0 ? "bg-muted/10" : "bg-muted/25";
+  const aggregateIsSlow =
+    aggregate.hasElapsed &&
+    slowResponseThresholdSeconds > 0 &&
+    aggregate.totalElapsed > slowResponseThresholdSeconds * 1000;
 
   // ResizeObserver → re-render connectors when any LogEntry height changes
   const [layoutVersion, setLayoutVersion] = useState(0);
@@ -234,12 +241,33 @@ export const TurnGroup = memo(function TurnGroup({
 
               {/* Elapsed */}
               {aggregate.hasElapsed && (
-                <span className="flex items-center gap-1 text-muted-foreground shrink-0">
-                  <Clock className="size-3" />
-                  <span className="font-mono tabular-nums">
-                    {formatElapsed(aggregate.totalElapsed)}
-                  </span>
-                </span>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span
+                        className={cn(
+                          "flex items-center gap-1 shrink-0",
+                          aggregateIsSlow ? "text-amber-400" : "text-muted-foreground",
+                        )}
+                      >
+                        <Clock className="size-3" />
+                        <span className="font-mono tabular-nums">
+                          {formatElapsed(aggregate.totalElapsed)}
+                        </span>
+                        {aggregateIsSlow && (
+                          <AlertTriangle className="size-3" aria-label="Slow response" />
+                        )}
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {aggregateIsSlow
+                        ? `Slow response: ${formatElapsed(
+                            aggregate.totalElapsed,
+                          )} exceeds ${formatElapsed(slowResponseThresholdSeconds * 1000)}`
+                        : "Total elapsed response time"}
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               )}
 
               {/* Tokens */}
@@ -296,6 +324,7 @@ export const TurnGroup = memo(function TurnGroup({
                   log={log}
                   viewMode={viewMode}
                   strip={strip}
+                  slowResponseThresholdSeconds={slowResponseThresholdSeconds}
                   cacheTrend={cacheTrends?.get(log.id) ?? null}
                   onCompareWithPrevious={
                     comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined

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