@tonyclaw/agent-inspector 4.0.1 → 4.0.3

package/src/components/providers/SettingsDialog.tsx

@@ -1,1042 +0,0 @@
-import { type JSX, useState, useCallback, useEffect, useMemo } from "react";
-import { Check, Copy, Settings, Terminal } from "lucide-react";
-import { z } from "zod";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
-import { Button } from "../ui/button";
-import { INSPECTOR_ICON_TRIGGER_CLASS } from "../ui/icon-trigger";
-import { ProvidersPanel } from "./ProvidersPanel";
-import { useProviders } from "../../lib/useProviders";
-import { useStripConfig } from "../../lib/useStripConfig";
-import { copyTextToClipboard } from "../../lib/clipboard";
-import { fetchJsonWithTimeout } from "../../lib/apiClient";
-import {
-  subscribeCodingAgentEndpoints,
-  type CodingAgentEndpoints,
-} from "../../lib/codingAgentEndpoints";
-import {
-  MAX_PROVIDER_TEST_TIMEOUT_SECONDS,
-  MAX_SLOW_RESPONSE_THRESHOLD_SECONDS,
-  TimeDisplayFormatSchema,
-  type TimeDisplayFormat,
-} from "../../lib/runtimeConfig";
-
-export const SETTINGS_SECTIONS = [
-  { value: "providers", label: "Providers" },
-  { value: "proxy", label: "Proxy" },
-  { value: "storage", label: "Storage" },
-  { value: "mcp", label: "MCP" },
-  { value: "onboarding", label: "Onboarding" },
-];
-
-export function ResponsiveSettingsTabs(): JSX.Element {
-  return (
-    <TabsList
-      aria-label="Settings sections"
-      className="grid w-full grid-cols-3 justify-stretch gap-1 bg-muted/35 p-1 group-data-[orientation=horizontal]/tabs:h-auto sm:grid-cols-5"
-    >
-      {SETTINGS_SECTIONS.map((section) => (
-        <TabsTrigger key={section.value} value={section.value} className="min-w-0 w-full">
-          {section.label}
-        </TabsTrigger>
-      ))}
-    </TabsList>
-  );
-}
-
-export function SettingsDialog(): JSX.Element {
-  const [open, setOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState("providers");
-  const { providers, isLoading, mutate } = useProviders();
-  const [testResults, setTestResults] = useState<
-    Record<string, import("./ProvidersPanel").TestResults>
-  >({});
-  const [testingProviders, setTestingProviders] = useState<Set<string>>(new Set());
-  const [testingTimeLeft, setTestingTimeLeft] = useState<Record<string, number>>({});
-
-  const handleTestResultsChange = useCallback(
-    (providerId: string, results: import("./ProvidersPanel").TestResults) => {
-      setTestResults((prev) => ({ ...prev, [providerId]: results }));
-    },
-    [],
-  );
-
-  const handleTestingProvidersChange = useCallback((providerId: string, isTesting: boolean) => {
-    setTestingProviders((prev) => {
-      const next = new Set(prev);
-      if (isTesting) {
-        next.add(providerId);
-      } else {
-        next.delete(providerId);
-      }
-      return next;
-    });
-  }, []);
-
-  const handleTestingTimeLeftChange = useCallback(
-    (providerId: string, seconds: number | undefined) => {
-      setTestingTimeLeft((prev) => {
-        if (seconds === undefined) {
-          const next = { ...prev };
-          delete next[providerId];
-          return next;
-        }
-        return { ...prev, [providerId]: seconds };
-      });
-    },
-    [],
-  );
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className={INSPECTOR_ICON_TRIGGER_CLASS}
-          aria-label="Settings"
-          title="Settings"
-        >
-          <Settings className="size-4" />
-          <span className="sr-only">Settings</span>
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="flex max-h-[calc(100vh-1rem)] w-[calc(100%-1rem)] max-w-2xl flex-col overflow-hidden p-4 sm:max-h-[80vh] sm:p-6">
-        <DialogHeader>
-          <DialogTitle>Settings</DialogTitle>
-        </DialogHeader>
-
-        <Tabs
-          value={activeTab}
-          onValueChange={setActiveTab}
-          className="min-h-0 min-w-0 flex-1 overflow-hidden"
-        >
-          <ResponsiveSettingsTabs />
-
-          <div className="mt-4 min-w-0 flex-1 overflow-x-hidden overflow-y-auto pr-1 sm:pr-2">
-            <TabsContent value="providers">
-              <ProvidersPanel
-                externalProviders={providers}
-                isLoading={isLoading}
-                externalTestResults={testResults}
-                externalTestingProviders={testingProviders}
-                externalTestingTimeLeft={testingTimeLeft}
-                onProvidersMutate={() => {
-                  return mutate();
-                }}
-                onTestResultsChange={handleTestResultsChange}
-                onTestingProvidersChange={handleTestingProvidersChange}
-                onTestingTimeLeftChange={handleTestingTimeLeftChange}
-              />
-            </TabsContent>
-            <TabsContent value="proxy">
-              <ProxySettingsTab />
-            </TabsContent>
-            <TabsContent value="storage">
-              <StorageSettingsTab />
-            </TabsContent>
-            <TabsContent value="mcp">
-              <McpSettingsTab />
-            </TabsContent>
-            <TabsContent value="onboarding">
-              <OnboardingSettingsTab />
-            </TabsContent>
-          </div>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-type LogStorageStats = {
-  memoryCount: number;
-  inventory: {
-    checkedAt: string;
-    totalFiles: number;
-    totalBytes: number;
-    artifacts: StorageArtifactSummary[];
-  };
-  policy: {
-    maxAgeMs: number;
-    maxTotalBytes: number;
-  };
-  reclaimableBytes: number;
-  lastGc: {
-    checkedAt: string;
-    filesDeleted: number;
-    bytesDeleted: number;
-    errors: number;
-    beforeTotalBytes: number;
-    afterTotalBytes: number;
-  } | null;
-};
-
-type StorageArtifactSummary = {
-  kind: string;
-  root: string;
-  sensitivity: string;
-  cleanupBehavior: string;
-  fileCount: number;
-  bytes: number;
-  oldestModifiedAt: string | null;
-  newestModifiedAt: string | null;
-};
-
-const StorageArtifactSummarySchema = z.object({
-  kind: z.string(),
-  root: z.string(),
-  sensitivity: z.string(),
-  cleanupBehavior: z.string(),
-  fileCount: z.number(),
-  bytes: z.number(),
-  oldestModifiedAt: z.string().nullable(),
-  newestModifiedAt: z.string().nullable(),
-});
-
-const LogStorageStatsSchema = z.object({
-  memoryCount: z.number(),
-  inventory: z.object({
-    checkedAt: z.string(),
-    totalFiles: z.number(),
-    totalBytes: z.number(),
-    artifacts: z.array(StorageArtifactSummarySchema),
-  }),
-  policy: z.object({
-    maxAgeMs: z.number(),
-    maxTotalBytes: z.number(),
-  }),
-  reclaimableBytes: z.number(),
-  lastGc: z
-    .object({
-      checkedAt: z.string(),
-      filesDeleted: z.number(),
-      bytesDeleted: z.number(),
-      errors: z.number(),
-      beforeTotalBytes: z.number(),
-      afterTotalBytes: z.number(),
-    })
-    .nullable(),
-});
-
-const STORAGE_STATS_FETCH_TIMEOUT_MS = 10_000;
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
-  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GiB`;
-}
-
-function formatRetention(maxAgeMs: number): string {
-  const days = Math.round(maxAgeMs / 1000 / 60 / 60 / 24);
-  return `${days.toLocaleString()} days`;
-}
-
-function StorageSettingsTab(): JSX.Element {
-  const [stats, setStats] = useState<LogStorageStats | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [gcLoading, setGcLoading] = useState(false);
-  const [copiedId, setCopiedId] = useState<string | null>(null);
-
-  const refresh = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const data = await fetchJsonWithTimeout(
-        "/api/storage",
-        LogStorageStatsSchema,
-        STORAGE_STATS_FETCH_TIMEOUT_MS,
-        undefined,
-        (response) => `Failed to load storage stats: HTTP ${String(response.status)}`,
-      );
-      setStats(data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
-
-  const handleCopy = useCallback((id: string, value: string) => {
-    void copyTextToClipboard(value).then((success) => {
-      if (!success) return;
-      setCopiedId(id);
-      setTimeout(() => setCopiedId(null), 1600);
-    });
-  }, []);
-
-  const handleRunGc = useCallback(async () => {
-    setGcLoading(true);
-    setError(null);
-    try {
-      const data = await fetchJsonWithTimeout(
-        "/api/storage",
-        LogStorageStatsSchema,
-        STORAGE_STATS_FETCH_TIMEOUT_MS,
-        { method: "POST" },
-        (response) => `Failed to run storage GC: HTTP ${String(response.status)}`,
-      );
-      setStats(data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setGcLoading(false);
-    }
-  }, []);
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between gap-3">
-        <div className="min-w-0">
-          <h3 className="text-sm font-semibold">Storage lifecycle</h3>
-          <p className="text-xs text-muted-foreground">
-            Inspect local captured-data footprint, retention policy, and safe reclaim actions.
-          </p>
-        </div>
-        <div className="flex shrink-0 items-center gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => void handleRunGc()}
-            disabled={gcLoading}
-          >
-            {gcLoading ? "Running..." : "Run GC now"}
-          </Button>
-          <Button type="button" variant="outline" size="sm" onClick={() => void refresh()}>
-            {loading ? "Refreshing..." : "Refresh"}
-          </Button>
-        </div>
-      </div>
-
-      {stats !== null && (
-        <div className="grid gap-2 text-xs">
-          <div className="grid gap-2 sm:grid-cols-2">
-            <StorageMetricCard
-              label="Persisted footprint"
-              value={`${stats.inventory.totalFiles.toLocaleString()} files / ${formatBytes(
-                stats.inventory.totalBytes,
-              )}`}
-              detail={`Checked ${new Date(stats.inventory.checkedAt).toLocaleString()}`}
-            />
-            <StorageMetricCard
-              label="Auto-reclaimable"
-              value={formatBytes(stats.reclaimableBytes)}
-              detail={`Retention ${formatRetention(stats.policy.maxAgeMs)} / max ${formatBytes(
-                stats.policy.maxTotalBytes,
-              )}`}
-            />
-            <StorageMetricCard
-              label="In-memory logs"
-              value={`${stats.memoryCount.toLocaleString()} loaded`}
-              detail="Recent completed entries kept hot for the UI"
-            />
-            <StorageMetricCard
-              label="Last GC"
-              value={
-                stats.lastGc === null
-                  ? "Not run yet"
-                  : `${stats.lastGc.filesDeleted.toLocaleString()} files / ${formatBytes(
-                      stats.lastGc.bytesDeleted,
-                    )}`
-              }
-              detail={
-                stats.lastGc === null
-                  ? "Runs at startup, on schedule, or manually here"
-                  : `${new Date(stats.lastGc.checkedAt).toLocaleString()} · ${
-                      stats.lastGc.errors
-                    } errors`
-              }
-            />
-          </div>
-          {stats.inventory.artifacts.map((artifact) => (
-            <StorageArtifactRow
-              key={`${artifact.kind}:${artifact.root}`}
-              artifact={artifact}
-              copiedId={copiedId}
-              onCopy={handleCopy}
-            />
-          ))}
-        </div>
-      )}
-
-      {error !== null && <p className="text-xs text-destructive">{error}</p>}
-    </div>
-  );
-}
-
-function cleanupBehaviorLabel(cleanupBehavior: string): string {
-  switch (cleanupBehavior) {
-    case "retention-gc":
-      return "Retention GC";
-    case "orphan-reclaim":
-      return "Orphan reclaim";
-    case "rotation":
-      return "Rotation-owned";
-    case "manual-owner-delete":
-      return "Manual only";
-    default:
-      return cleanupBehavior;
-  }
-}
-
-function StorageMetricCard({
-  label,
-  value,
-  detail,
-}: {
-  label: string;
-  value: string;
-  detail: string;
-}): JSX.Element {
-  return (
-    <div className="rounded-md bg-muted/20 px-3 py-2">
-      <div className="font-medium">{label}</div>
-      <div className="mt-1 font-mono text-muted-foreground">{value}</div>
-      <div className="mt-1 text-[11px] text-muted-foreground">{detail}</div>
-    </div>
-  );
-}
-
-function StorageArtifactRow({
-  artifact,
-  copiedId,
-  onCopy,
-}: {
-  artifact: StorageArtifactSummary;
-  copiedId: string | null;
-  onCopy: (id: string, value: string) => void;
-}): JSX.Element {
-  const id = `storage-${artifact.kind}`;
-  const oldest = artifact.oldestModifiedAt === null ? "none" : new Date(artifact.oldestModifiedAt);
-  const newest = artifact.newestModifiedAt === null ? "none" : new Date(artifact.newestModifiedAt);
-  return (
-    <div className="rounded-md border border-border/45 bg-muted/15 px-3 py-2">
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <div>
-          <div className="font-medium">{artifact.kind}</div>
-          <div className="mt-1 text-[11px] text-muted-foreground">
-            {cleanupBehaviorLabel(artifact.cleanupBehavior)} · {artifact.sensitivity}
-          </div>
-        </div>
-        <div className="text-right font-mono text-muted-foreground">
-          {artifact.fileCount.toLocaleString()} files / {formatBytes(artifact.bytes)}
-        </div>
-      </div>
-      <div className="mt-2 grid gap-1 text-[11px] text-muted-foreground sm:grid-cols-2">
-        <div>Oldest: {oldest instanceof Date ? oldest.toLocaleString() : oldest}</div>
-        <div>Newest: {newest instanceof Date ? newest.toLocaleString() : newest}</div>
-      </div>
-      <div className="mt-2">
-        <CopyableSetupValue
-          id={id}
-          label="Root path"
-          value={artifact.root}
-          copiedId={copiedId}
-          onCopy={onCopy}
-        />
-      </div>
-    </div>
-  );
-}
-
-function CopyableSetupValue({
-  id,
-  label,
-  value,
-  copiedId,
-  onCopy,
-}: {
-  id: string;
-  label: string;
-  value: string;
-  copiedId: string | null;
-  onCopy: (id: string, value: string) => void;
-}): JSX.Element {
-  const copied = copiedId === id;
-  return (
-    <div className="min-w-0 rounded-md border border-border/45 bg-muted/15 px-3 py-2 transition-colors hover:bg-muted/25">
-      <div className="mb-1 text-xs font-medium text-muted-foreground">{label}</div>
-      <div className="flex min-w-0 items-center gap-2">
-        <code className="min-w-0 flex-1 truncate font-mono text-xs text-foreground" title={value}>
-          {value}
-        </code>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="size-7 shrink-0"
-          onClick={() => onCopy(id, value)}
-          aria-label={copied ? `Copied ${label}` : `Copy ${label}`}
-        >
-          {copied ? (
-            <Check className="size-3.5 text-status-success" />
-          ) : (
-            <Copy className="size-3.5" />
-          )}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export function OnboardingSettingsTab(): JSX.Element {
-  const [copiedId, setCopiedId] = useState<string | null>(null);
-  const [endpoints, setEndpoints] = useState<CodingAgentEndpoints | null>(null);
-  useEffect(() => subscribeCodingAgentEndpoints(setEndpoints), []);
-  const values = useMemo(
-    () => [
-      { id: "status", label: "Check onboarding", value: "agent-inspector onboard --status" },
-      {
-        id: "status-json",
-        label: "Check onboarding JSON",
-        value: "agent-inspector onboard --status --json",
-      },
-      { id: "refresh", label: "Refresh generated files", value: "agent-inspector onboard --force" },
-      {
-        id: "uninstall",
-        label: "Remove matching generated files",
-        value: "agent-inspector onboard --uninstall",
-      },
-      { id: "claude", label: "Claude Code command", value: "/agent-inspector:onboard" },
-      { id: "doctor", label: "Backend doctor", value: "agent-inspector doctor --verbose" },
-      {
-        id: "support-bundle",
-        label: "Redacted support bundle",
-        value: "agent-inspector doctor --support-bundle",
-      },
-      {
-        id: "codex",
-        label: "Codex prompt",
-        value: "Use the agent-inspector-onboard skill",
-      },
-      {
-        id: "opencode-config",
-        label: "OpenCode config",
-        value: "agent-inspector onboard --opencode-only",
-      },
-      {
-        id: "opencode-status",
-        label: "OpenCode status",
-        value: "agent-inspector onboard --status --opencode-only",
-      },
-      { id: "opencode-verify", label: "OpenCode verify", value: "opencode mcp list" },
-      {
-        id: "mimo-config",
-        label: "MiMo Code config",
-        value: "agent-inspector onboard --mimo-only",
-      },
-      {
-        id: "mimo-status",
-        label: "MiMo Code status",
-        value: "agent-inspector onboard --status --mimo-only",
-      },
-      { id: "mimo-verify", label: "MiMo Code verify", value: "mimo mcp list" },
-      ...(endpoints === null
-        ? []
-        : [
-            {
-              id: "opencode-proxy",
-              label: "OpenCode proxy",
-              value: `LLM_BASE_URL=${endpoints.proxy}`,
-            },
-            {
-              id: "mimo-proxy",
-              label: "MiMo Code proxy",
-              value: `OPENAI_BASE_URL=${endpoints.openAiV1}`,
-            },
-            { id: "mcp", label: "MCP URL", value: endpoints.mcp },
-            { id: "proxy", label: "Proxy URL", value: endpoints.proxy },
-            {
-              id: "anthropic",
-              label: "Anthropic base",
-              value: `ANTHROPIC_BASE_URL=${endpoints.proxy}`,
-            },
-            {
-              id: "openai",
-              label: "OpenAI base",
-              value: `OPENAI_BASE_URL=${endpoints.openAiV1}`,
-            },
-          ]),
-    ],
-    [endpoints],
-  );
-
-  const handleCopy = useCallback((id: string, value: string) => {
-    void copyTextToClipboard(value).then((success) => {
-      if (!success) return;
-      setCopiedId(id);
-      setTimeout(() => setCopiedId(null), 1600);
-    });
-  }, []);
-
-  return (
-    <div className="min-w-0 space-y-4">
-      <div className="flex items-center gap-2">
-        <Terminal className="size-4 text-muted-foreground" />
-        <h3 className="text-sm font-semibold">Agent onboarding</h3>
-      </div>
-      <div className="grid gap-2">
-        {values.map((item) => (
-          <CopyableSetupValue
-            key={item.id}
-            id={item.id}
-            label={item.label}
-            value={item.value}
-            copiedId={copiedId}
-            onCopy={handleCopy}
-          />
-        ))}
-      </div>
-      <div className="grid gap-2 rounded-md border border-status-info/25 bg-status-info/10 px-3 py-2 text-xs">
-        <div className="font-medium text-foreground">Verified first trace flow</div>
-        <ol className="ml-4 list-decimal space-y-1 text-muted-foreground">
-          <li>Start Agent Inspector and confirm the application bar shows Live.</li>
-          <li>Copy the Proxy URL or MCP URL that matches your coding agent.</li>
-          <li>Run a tiny coding-agent prompt such as “say hello and stop”.</li>
-          <li>
-            Return to Logs and confirm one new request appears with request, response, tokens, and
-            tool activity when present.
-          </li>
-        </ol>
-      </div>
-      <div className="grid gap-2 rounded-md bg-muted/15 px-3 py-2 text-xs text-muted-foreground">
-        <div className="flex items-center gap-2">
-          <Check className="size-3.5 text-status-success" />
-          <span>Provider test creates a traceable memory probe session.</span>
-        </div>
-        <div className="flex items-center gap-2">
-          <Check className="size-3.5 text-status-success" />
-          <span>Captured sessions can produce reviewable memory candidates.</span>
-        </div>
-        <div className="flex items-start gap-2">
-          <Check className="mt-0.5 size-3.5 text-status-success" />
-          <span>
-            Streamable HTTP clients should use the MCP URL directly. Stdio-only clients should use
-            <code className="mx-1 rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
-              agent-inspector-mcp stdio
-            </code>
-            instead. Configure only one entry for the same Inspector.
-          </span>
-        </div>
-        <div className="flex items-start gap-2">
-          <Check className="mt-0.5 size-3.5 text-status-success" />
-          <span>
-            OpenCode onboarding safely merges{" "}
-            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
-              mcp.agent-inspector
-            </code>{" "}
-            into{" "}
-            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
-              opencode.json
-            </code>
-            , then verify with{" "}
-            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
-              opencode mcp list
-            </code>
-            .
-          </span>
-        </div>
-        <div className="flex items-start gap-2">
-          <Check className="mt-0.5 size-3.5 text-status-success" />
-          <span>
-            MiMo Code onboarding safely merges{" "}
-            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
-              mcp.agent-inspector
-            </code>{" "}
-            into{" "}
-            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
-              mimocode.jsonc
-            </code>
-            , then route OpenAI-format traffic with{" "}
-            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
-              OPENAI_BASE_URL
-            </code>
-            .
-          </span>
-        </div>
-        <div className="flex items-start gap-2">
-          <Check className="mt-0.5 size-3.5 text-status-success" />
-          <span>
-            If your AI tool runs in another container or host, replace localhost with an address
-            reachable from that tool and verify the network/firewall path.
-          </span>
-        </div>
-        <div className="flex items-start gap-2">
-          <Check className="mt-0.5 size-3.5 text-status-success" />
-          <span>
-            If the first trace does not appear, run{" "}
-            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
-              agent-inspector doctor --verbose
-            </code>{" "}
-            and compare the agent base URL with the current Proxy URL. A base-path mismatch such as{" "}
-            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
-              /
-            </code>{" "}
-            versus{" "}
-            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px] text-foreground">
-              /inspector
-            </code>{" "}
-            means the tool is talking to a different Inspector surface.
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function McpSettingsTab(): JSX.Element {
-  const [copiedId, setCopiedId] = useState<string | null>(null);
-  const [endpoint, setEndpoint] = useState<string | null>(null);
-  useEffect(
-    () =>
-      subscribeCodingAgentEndpoints((endpoints) => {
-        setEndpoint(endpoints?.mcp ?? null);
-      }),
-    [],
-  );
-  const values = useMemo(
-    () =>
-      endpoint === null
-        ? []
-        : [
-            { id: "mcp-url", label: "Streamable HTTP MCP URL", value: endpoint },
-            {
-              id: "stdio",
-              label: "Stdio bridge command",
-              value: `agent-inspector-mcp stdio --url ${endpoint}`,
-            },
-            {
-              id: "doctor",
-              label: "Bridge doctor",
-              value: `agent-inspector-mcp doctor --url ${endpoint}`,
-            },
-            {
-              id: "writes",
-              label: "Enable write tools",
-              value: "AGENT_INSPECTOR_MCP_WRITES=1 agent-inspector",
-            },
-            {
-              id: "capabilities",
-              label: "Capabilities resource",
-              value: "inspector://mcp/capabilities",
-            },
-            {
-              id: "context",
-              label: "Current context resource",
-              value: "inspector://context/current",
-            },
-            {
-              id: "streamable-json",
-              label: "Streamable HTTP JSON",
-              value: JSON.stringify(
-                {
-                  mcpServers: {
-                    "agent-inspector": {
-                      type: "streamableHttp",
-                      url: endpoint,
-                    },
-                  },
-                },
-                null,
-                2,
-              ),
-            },
-            {
-              id: "stdio-json",
-              label: "Stdio MCP JSON",
-              value: JSON.stringify(
-                {
-                  mcpServers: {
-                    "agent-inspector": {
-                      command: "agent-inspector-mcp",
-                      args: ["stdio", "--url", endpoint],
-                    },
-                  },
-                },
-                null,
-                2,
-              ),
-            },
-            {
-              id: "opencode-local",
-              label: "OpenCode local MCP",
-              value: JSON.stringify(
-                {
-                  mcp: {
-                    "agent-inspector": {
-                      type: "local",
-                      command: ["agent-inspector-mcp", "stdio", "--url", endpoint],
-                      enabled: true,
-                    },
-                  },
-                },
-                null,
-                2,
-              ),
-            },
-            {
-              id: "mimo-local",
-              label: "MiMo Code local MCP",
-              value: JSON.stringify(
-                {
-                  mcp: {
-                    "agent-inspector": {
-                      type: "local",
-                      command: ["agent-inspector-mcp", "stdio", "--url", endpoint],
-                      enabled: true,
-                    },
-                  },
-                },
-                null,
-                2,
-              ),
-            },
-            {
-              id: "codex-toml",
-              label: "Codex TOML",
-              value: `[mcp_servers.agent-inspector]\ncommand = "agent-inspector-mcp"\nargs = ["stdio", "--url", "${endpoint}"]`,
-            },
-          ],
-    [endpoint],
-  );
-
-  const handleCopy = useCallback((id: string, value: string) => {
-    void copyTextToClipboard(value).then((success) => {
-      if (!success) return;
-      setCopiedId(id);
-      setTimeout(() => setCopiedId(null), 1600);
-    });
-  }, []);
-
-  return (
-    <div className="min-w-0 space-y-4">
-      <div className="flex items-center gap-2">
-        <Terminal className="size-4 text-muted-foreground" />
-        <h3 className="text-sm font-semibold">MCP access</h3>
-      </div>
-      <div className="grid gap-2 rounded-md bg-muted/15 px-3 py-2 text-xs text-muted-foreground">
-        <div>
-          Use Streamable HTTP when the client supports URL-based MCP. Use the stdio bridge only for
-          stdio-only clients. Configure one entry for the same Inspector instance.
-        </div>
-        <div>
-          If the MCP client runs in another container or host, replace localhost with a reachable
-          host/IP and verify the network path.
-        </div>
-      </div>
-      {endpoint === null ? (
-        <div
-          role="alert"
-          className="rounded-md bg-destructive/10 px-3 py-2 text-xs text-destructive"
-        >
-          The browser runtime does not provide a valid agent-facing MCP endpoint.
-        </div>
-      ) : (
-        <div className="grid gap-2">
-          {values.map((item) => (
-            <CopyableSetupValue
-              key={item.id}
-              id={item.id}
-              label={item.label}
-              value={item.value}
-              copiedId={copiedId}
-              onCopy={handleCopy}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ProxySettingsTab(): JSX.Element {
-  const {
-    strip,
-    slowResponseThresholdSeconds,
-    providerTestTimeoutSeconds,
-    timeDisplayFormat,
-    isLoading,
-    setStrip,
-    setSlowResponseThresholdSeconds,
-    setProviderTestTimeoutSeconds,
-    setTimeDisplayFormat,
-  } = useStripConfig();
-  const [error, setError] = useState<string | null>(null);
-  const [pending, setPending] = useState(false);
-
-  const handleToggle = useCallback(
-    async (next: boolean) => {
-      setError(null);
-      setPending(true);
-      try {
-        await setStrip(next);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : String(err));
-      } finally {
-        setPending(false);
-      }
-    },
-    [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],
-  );
-
-  const handleProviderTestTimeoutChange = useCallback(
-    async (next: number) => {
-      setError(null);
-      setPending(true);
-      try {
-        await setProviderTestTimeoutSeconds(next);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : String(err));
-      } finally {
-        setPending(false);
-      }
-    },
-    [setProviderTestTimeoutSeconds],
-  );
-
-  const handleTimeDisplayFormatChange = useCallback(
-    async (next: TimeDisplayFormat) => {
-      setError(null);
-      setPending(true);
-      try {
-        await setTimeDisplayFormat(next);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : String(err));
-      } finally {
-        setPending(false);
-      }
-    },
-    [setTimeDisplayFormat],
-  );
-
-  return (
-    <div className="space-y-4">
-      <div className="space-y-1">
-        <h3 className="text-sm font-semibold">Claude Code billing header</h3>
-        <p className="text-xs text-muted-foreground">
-          Strip Claude Code's synthetic billing block before upstream forwarding. This can improve
-          prefix-cache hits with third-party providers and is persisted to <code>config.json</code>.
-        </p>
-      </div>
-
-      <label className="flex items-center gap-3">
-        <input
-          type="checkbox"
-          role="switch"
-          checked={strip}
-          disabled={isLoading || pending}
-          onChange={(e) => {
-            void handleToggle(e.currentTarget.checked);
-          }}
-          className="size-4 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
-        />
-        <span className="text-sm">
-          {isLoading ? "Loading..." : strip ? "Stripping enabled" : "Stripping disabled"}
-        </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">
-          Show a slow marker when elapsed time exceeds this many seconds. Use <code>0</code> to
-          disable it.
-        </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>
-
-      <div className="space-y-1">
-        <label htmlFor="provider-test-timeout" className="text-sm font-semibold">
-          Provider test timeout
-        </label>
-        <p className="text-xs text-muted-foreground">
-          Abort slow Provider Test probes after this many seconds per model.
-        </p>
-        <div className="flex items-center gap-2">
-          <input
-            id="provider-test-timeout"
-            type="number"
-            min={1}
-            max={MAX_PROVIDER_TEST_TIMEOUT_SECONDS}
-            step={1}
-            value={providerTestTimeoutSeconds}
-            disabled={isLoading || pending}
-            onChange={(e) => {
-              const next = Number(e.currentTarget.value);
-              if (!Number.isInteger(next)) return;
-              if (next < 1 || next > MAX_PROVIDER_TEST_TIMEOUT_SECONDS) return;
-              void handleProviderTestTimeoutChange(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 / model</span>
-        </div>
-      </div>
-
-      <div className="space-y-1">
-        <label htmlFor="time-display-format" className="text-sm font-semibold">
-          Time display
-        </label>
-        <p className="text-xs text-muted-foreground">
-          Controls timestamps in session summaries, headers, and log rows.
-        </p>
-        <select
-          id="time-display-format"
-          value={timeDisplayFormat}
-          disabled={isLoading || pending}
-          onChange={(event) => {
-            const parsed = TimeDisplayFormatSchema.safeParse(event.currentTarget.value);
-            if (!parsed.success) return;
-            void handleTimeDisplayFormatChange(parsed.data);
-          }}
-          className="h-8 rounded-md border border-input bg-background px-2 text-sm disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          <option value="time">Time only</option>
-          <option value="full">Full ISO</option>
-        </select>
-      </div>
-
-      {error !== null && <p className="text-xs text-destructive">Failed to save: {error}</p>}
-    </div>
-  );
-}