@tonyclaw/agent-inspector 2.0.0

package/src/components/ProxyViewerContainer.tsx

@@ -0,0 +1,363 @@
+import { useState, useEffect, useCallback, useRef, useMemo, type JSX } from "react";
+import { z } from "zod";
+import { CapturedLogSchema, type CapturedLog } from "../proxy/schemas";
+import { useStripConfig } from "../lib/useStripConfig";
+import { OnboardingBanner } from "./OnboardingBanner";
+import { ProxyViewer } from "./ProxyViewer";
+
+type SSEUpdate =
+  | {
+      type: "init";
+      logs: CapturedLog[];
+    }
+  | {
+      type: "update";
+      log: CapturedLog;
+    };
+
+const SSEUpdateSchema = z.union([
+  z.object({
+    type: z.literal("init"),
+    logs: z.array(CapturedLogSchema),
+  }),
+  z.object({
+    type: z.literal("update"),
+    log: CapturedLogSchema,
+  }),
+]);
+
+function extractSessions(logs: CapturedLog[]): string[] {
+  const set = new Set<string>();
+  for (const l of logs) {
+    if (l.sessionId !== null && l.sessionId !== "") set.add(l.sessionId);
+  }
+  return [...set];
+}
+
+function extractModels(logs: CapturedLog[]): string[] {
+  const set = new Set<string>();
+  for (const l of logs) {
+    if (l.model !== null && l.model !== "") set.add(l.model);
+  }
+  return [...set];
+}
+
+/**
+ * Filter logs by selected session/model. Both `__all__` and missing values
+ * pass through. Returns the input array reference when no log matches the
+ * filter, so referential equality is preserved for empty results.
+ */
+function filterLogs(
+  logs: CapturedLog[],
+  selectedSession: string,
+  selectedModel: string,
+): CapturedLog[] {
+  if (selectedSession === "__all__" && selectedModel === "__all__") return logs;
+  return logs.filter((l) => {
+    if (selectedSession !== "__all__" && l.sessionId !== selectedSession) return false;
+    if (selectedModel !== "__all__" && l.model !== selectedModel) return false;
+    return true;
+  });
+}
+
+const DEBOUNCE_MS = 50;
+const HASH_SCROLL_ATTEMPTS = 12;
+const HASH_HIGHLIGHT_MS = 1800;
+
+function buildLogsStreamUrl(sessionId: string | undefined): string {
+  if (sessionId === undefined) return "/api/logs/stream";
+  const params = new URLSearchParams({ sessionId });
+  return `/api/logs/stream?${params.toString()}`;
+}
+
+export function ProxyViewerContainer({
+  initialSessionId,
+}: {
+  /**
+   * Initial session filter. When the route is `/session/$id`, pass the URL
+   * param here so the page opens already scoped to that session. Default
+   * `__all__` keeps the existing "all sessions" behavior on `/`.
+   *
+   * NOTE: the value is only used as the initial state on mount. To pick up
+   * a new value (e.g. user navigates to a different `/session/$id`), the
+   * caller should also pass a `key` prop matching the session id, which
+   * forces a remount.
+   */
+  initialSessionId?: string;
+} = {}): JSX.Element {
+  // `allLogs` is the unfiltered set populated by the SSE. The single SSE
+  // connection never re-opens on filter change — we always carry the full
+  // set and derive the displayed view with `useMemo` below.
+  const [allLogs, setAllLogs] = useState<CapturedLog[]>([]);
+  const [selectedSession, setSelectedSession] = useState(initialSessionId ?? "__all__");
+  const [selectedModel, setSelectedModel] = useState("__all__");
+  const [viewMode, setViewMode] = useState<"simple" | "full">("simple");
+  const [error, setError] = useState<string | null>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handledHashRef = useRef<string | null>(null);
+
+  // O(1) log lookup by id
+  const logIndexRef = useRef<Map<number, number>>(new Map());
+
+  // Debounce buffer for SSE updates
+  const pendingUpdatesRef = useRef<CapturedLog[]>([]);
+  const flushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Derived view: the logs the user actually sees. Recomputed only when the
+  // underlying set or filter changes — never on every SSE message.
+  const logs = useMemo(
+    () => filterLogs(allLogs, selectedSession, selectedModel),
+    [allLogs, selectedSession, selectedModel],
+  );
+  const sessions = useMemo(() => extractSessions(allLogs), [allLogs]);
+  const models = useMemo(() => extractModels(allLogs), [allLogs]);
+
+  const flushUpdates = useCallback(() => {
+    flushTimerRef.current = null;
+    const updates = pendingUpdatesRef.current;
+    pendingUpdatesRef.current = [];
+    if (updates.length === 0) return;
+
+    setAllLogs((prev) => {
+      let next = prev;
+      for (const log of updates) {
+        const idx = logIndexRef.current.get(log.id);
+        if (idx !== undefined) {
+          // Replace existing entry
+          next = [...next.slice(0, idx), log, ...next.slice(idx + 1)];
+        } else {
+          logIndexRef.current.set(log.id, next.length);
+          next = [...next, log];
+        }
+      }
+      return next;
+    });
+  }, []);
+
+  const scheduleUpdate = useCallback(
+    (log: CapturedLog) => {
+      pendingUpdatesRef.current.push(log);
+      if (flushTimerRef.current === null) {
+        flushTimerRef.current = setTimeout(flushUpdates, DEBOUNCE_MS);
+      }
+    },
+    [flushUpdates],
+  );
+
+  const connectSSE = useCallback(() => {
+    // Clean up existing connection
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+
+    const es = new EventSource(buildLogsStreamUrl(initialSessionId));
+    eventSourceRef.current = es;
+
+    es.onmessage = (event: MessageEvent) => {
+      try {
+        const rawData = String(event.data);
+        const parsed: unknown = JSON.parse(rawData);
+        const updateResult = SSEUpdateSchema.safeParse(parsed);
+        if (!updateResult.success) {
+          setError("Failed to parse SSE data");
+          return;
+        }
+        const update = updateResult.data;
+        if (update.type === "init") {
+          // Flush any pending debounce
+          if (flushTimerRef.current !== null) {
+            clearTimeout(flushTimerRef.current);
+            flushTimerRef.current = null;
+          }
+          pendingUpdatesRef.current = [];
+
+          // Build fresh index
+          const idx = new Map<number, number>();
+          for (let i = 0; i < update.logs.length; i++) {
+            const log = update.logs[i];
+            if (log !== undefined) idx.set(log.id, i);
+          }
+          logIndexRef.current = idx;
+          setAllLogs(update.logs);
+          setError(null);
+        } else if (update.type === "update") {
+          scheduleUpdate(update.log);
+        }
+      } catch {
+        setError("Failed to parse SSE data");
+      }
+    };
+
+    es.onerror = () => {
+      setError("SSE connection lost, reconnecting...");
+      es.close();
+      if (reconnectTimeoutRef.current !== null) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      reconnectTimeoutRef.current = setTimeout(connectSSE, 3000);
+    };
+  }, [initialSessionId, scheduleUpdate]);
+
+  useEffect(() => {
+    connectSSE();
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+      if (reconnectTimeoutRef.current !== null) {
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
+      if (flushTimerRef.current !== null) {
+        clearTimeout(flushTimerRef.current);
+        flushTimerRef.current = null;
+      }
+    };
+  }, [connectSSE]);
+
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (!hash.startsWith("#log-")) return;
+    if (handledHashRef.current === hash) return;
+    const targetId = hash.slice(1);
+    let cancelled = false;
+    let attempts = 0;
+    let highlightedTarget: HTMLElement | null = null;
+    let highlightTimer: number | null = null;
+
+    const tryScrollToLog = (): void => {
+      if (cancelled) return;
+      const target = document.getElementById(targetId);
+      if (target !== null) {
+        handledHashRef.current = hash;
+        target.scrollIntoView({ block: "center", behavior: "smooth" });
+        if (target instanceof HTMLElement) {
+          highlightedTarget = target;
+          target.setAttribute("data-deep-link-highlight", "true");
+          highlightTimer = window.setTimeout(() => {
+            target.removeAttribute("data-deep-link-highlight");
+          }, HASH_HIGHLIGHT_MS);
+          target.focus({ preventScroll: true });
+          if (target.getAttribute("data-nav-action") === "expand") {
+            target.click();
+          }
+        }
+        return;
+      }
+
+      attempts += 1;
+      if (attempts < HASH_SCROLL_ATTEMPTS) {
+        window.setTimeout(tryScrollToLog, 100);
+      }
+    };
+
+    tryScrollToLog();
+
+    return () => {
+      cancelled = true;
+      if (highlightTimer !== null) {
+        window.clearTimeout(highlightTimer);
+      }
+      if (highlightedTarget !== null) {
+        highlightedTarget.removeAttribute("data-deep-link-highlight");
+      }
+    };
+  }, [logs.length]);
+
+  const handleClearAll = useCallback(() => {
+    if (initialSessionId !== undefined && allLogs.length === 0) return;
+    void (async () => {
+      try {
+        const body =
+          initialSessionId === undefined
+            ? undefined
+            : JSON.stringify({ ids: allLogs.map((log) => log.id) });
+        const res = await fetch("/api/logs", {
+          method: "DELETE",
+          ...(body === undefined
+            ? {}
+            : {
+                headers: { "Content-Type": "application/json" },
+                body,
+              }),
+        });
+        if (!res.ok) {
+          setError("Failed to clear logs");
+          return;
+        }
+        logIndexRef.current.clear();
+        setAllLogs([]);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error clearing logs");
+      }
+    })();
+  }, [allLogs, initialSessionId]);
+
+  const handleClearGroup = useCallback((ids: number[]) => {
+    if (ids.length === 0) return;
+    void (async () => {
+      try {
+        const res = await fetch("/api/logs", {
+          method: "DELETE",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ ids }),
+        });
+        if (!res.ok) {
+          setError("Failed to clear group");
+          return;
+        }
+        const idSet = new Set(ids);
+        setAllLogs((prev) => {
+          const remaining = prev.filter((l) => !idSet.has(l.id));
+          // Rebuild index
+          const idx = new Map<number, number>();
+          for (let i = 0; i < remaining.length; i++) {
+            const log = remaining[i];
+            if (log !== undefined) idx.set(log.id, i);
+          }
+          logIndexRef.current = idx;
+          return remaining;
+        });
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error clearing group");
+      }
+    })();
+  }, []);
+
+  // Read the strip config once at the container so the virtualized list does
+  // not need N independent SWR subscriptions per row.
+  const { strip, slowResponseThresholdSeconds } = useStripConfig();
+
+  return (
+    <>
+      {error !== null && (
+        <div className="fixed top-4 right-4 bg-destructive text-destructive-foreground px-4 py-2 rounded-md text-sm z-50">
+          {error}
+        </div>
+      )}
+      <OnboardingBanner />
+      <ProxyViewer
+        logs={logs}
+        sessions={sessions}
+        models={models}
+        selectedSession={selectedSession}
+        selectedModel={selectedModel}
+        onSessionChange={setSelectedSession}
+        onModelChange={setSelectedModel}
+        onClearAll={handleClearAll}
+        onClearGroup={handleClearGroup}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+        strip={strip}
+        slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+        // Session filter is the URL's job when `initialSessionId` was given.
+        hideSessionFilter={initialSessionId !== undefined}
+        pinnedSessionId={initialSessionId}
+      />
+    </>
+  );
+}

package/src/components/providers/ImportWizardDialog.tsx

@@ -0,0 +1,349 @@
+import { type JSX, useState, useCallback, useEffect } from "react";
+import { z } from "zod";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Button } from "../ui/button";
+
+import { Loader2, Download, AlertCircle } from "lucide-react";
+
+function ClaudeCodeIcon(): JSX.Element {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="size-6 shrink-0"
+    >
+      <title>Claude Code</title>
+      <path
+        clipRule="evenodd"
+        d="M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z"
+      />
+    </svg>
+  );
+}
+
+function OpenCodeIcon(): JSX.Element {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="size-6 shrink-0"
+    >
+      <title>OpenCode</title>
+      <path d="M16 6H8v12h8V6zm4 16H4V2h16v20z" />
+    </svg>
+  );
+}
+
+function MiMoCodeIcon(): JSX.Element {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="size-6 shrink-0"
+    >
+      <title>MiMo Code</title>
+      <text
+        x="12"
+        y="18"
+        textAnchor="middle"
+        fontSize="16"
+        fontWeight="800"
+        fontFamily="system-ui, sans-serif"
+      >
+        M
+      </text>
+    </svg>
+  );
+}
+
+const ExternalProviderSchema = z.object({
+  name: z.string(),
+  apiKey: z.string(),
+  format: z.enum(["anthropic", "openai"]),
+  anthropicBaseUrl: z.string(),
+  openaiBaseUrl: z.string(),
+  models: z.array(z.string()),
+  sourceTool: z.enum(["claude-code", "opencode", "mimo-code"]),
+  alreadyExists: z.boolean(),
+});
+
+const ScanResponseSchema = z.object({
+  providers: z.array(ExternalProviderSchema),
+  warnings: z.array(z.string()).optional(),
+});
+
+const ImportResponseSchema = z.object({
+  success: z.boolean().optional(),
+  imported: z.number().optional(),
+  message: z.string().optional(),
+  errors: z.array(z.string()).optional(),
+});
+
+const sourceLogoMap: Record<string, () => JSX.Element> = {
+  "claude-code": ClaudeCodeIcon,
+  opencode: OpenCodeIcon,
+  "mimo-code": MiMoCodeIcon,
+};
+
+type ImportWizardDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onImportComplete: () => void;
+};
+
+export function ImportWizardDialog({
+  open,
+  onOpenChange,
+  onImportComplete,
+}: ImportWizardDialogProps): JSX.Element {
+  const [scanning, setScanning] = useState(false);
+  const [scanError, setScanError] = useState<string | null>(null);
+  const [providers, setProviders] = useState<z.infer<typeof ExternalProviderSchema>[]>([]);
+  const [warnings, setWarnings] = useState<string[]>([]);
+  const [selected, setSelected] = useState<Set<number>>(new Set());
+  const [importing, setImporting] = useState(false);
+  const [importResult, setImportResult] = useState<string | null>(null);
+  const [importError, setImportError] = useState<string | null>(null);
+
+  const scan = useCallback(() => {
+    setScanning(true);
+    setScanError(null);
+    setWarnings([]);
+    setProviders([]);
+    setSelected(new Set());
+    setImportResult(null);
+    setImportError(null);
+
+    fetch("/api/providers/scan")
+      .then((res) => {
+        if (!res.ok) {
+          return res.text().then((text) => {
+            setScanError(`Scan failed (${res.status}): ${text}`);
+          });
+        }
+        return res.json().then((data: unknown) => {
+          const parsed = ScanResponseSchema.safeParse(data);
+          if (!parsed.success) {
+            setScanError(`Invalid response: ${parsed.error.message}`);
+            return;
+          }
+          setProviders(parsed.data.providers);
+          setWarnings(parsed.data.warnings ?? []);
+          // Pre-select non-existing providers
+          const indices = new Set<number>();
+          parsed.data.providers.forEach((p, i) => {
+            if (!p.alreadyExists) indices.add(i);
+          });
+          setSelected(indices);
+        });
+      })
+      .catch((err: unknown) => {
+        setScanError(err instanceof Error ? err.message : String(err));
+      })
+      .finally(() => {
+        setScanning(false);
+      });
+  }, []);
+
+  // Auto-scan when dialog opens
+  useEffect(() => {
+    if (open) {
+      scan();
+    }
+  }, [open, scan]);
+
+  const toggleProvider = useCallback((index: number) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  }, []);
+
+  const importSelected = useCallback(() => {
+    const toImport = providers.filter((_, i) => selected.has(i));
+    if (toImport.length === 0) return;
+
+    setImporting(true);
+    setImportError(null);
+    setImportResult(null);
+
+    // Convert ExternalProvider[] to ProviderConfig shape for import
+    const now = new Date().toISOString();
+    const providersPayload = toImport.map((p) => ({
+      id: window.crypto.randomUUID(),
+      name: p.name,
+      apiKey: p.apiKey,
+      format: p.format,
+      anthropicBaseUrl: p.anthropicBaseUrl,
+      openaiBaseUrl: p.openaiBaseUrl,
+      models: p.models,
+      createdAt: now,
+      updatedAt: now,
+    }));
+
+    fetch("/api/providers/import", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ providers: providersPayload }),
+    })
+      .then((res) => res.json())
+      .then((data: unknown) => {
+        const parsed = ImportResponseSchema.safeParse(data);
+        if (!parsed.success) {
+          setImportError(`Invalid response: ${parsed.error.message}`);
+          return;
+        }
+        const result = parsed.data;
+        // Mark imported providers as already existing so they can't be re-selected
+        setProviders((prev) =>
+          prev.map((p, i) => (selected.has(i) ? { ...p, alreadyExists: true } : p)),
+        );
+        setSelected(new Set());
+
+        if (
+          result.errors !== undefined &&
+          result.errors.length > 0 &&
+          result.message !== undefined
+        ) {
+          setImportResult(result.message);
+        } else {
+          setImportResult(`Imported ${result.imported ?? toImport.length} provider(s)`);
+        }
+        onImportComplete();
+      })
+      .catch((err: unknown) => {
+        setImportError(err instanceof Error ? err.message : String(err));
+      })
+      .finally(() => {
+        setImporting(false);
+      });
+  }, [providers, selected, onImportComplete]);
+
+  const hasSelectable = providers.some((p) => !p.alreadyExists);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-xl max-h-[80vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Import from External Tools</DialogTitle>
+          <p className="text-xs text-muted-foreground">
+            Detect provider configurations from Claude Code, OpenCode, and MiMo Code.
+          </p>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto space-y-3">
+          {scanning && (
+            <div className="flex items-center justify-center py-8 gap-2 text-muted-foreground">
+              <Loader2 className="size-4 animate-spin" />
+              <span className="text-sm">Scanning for external providers...</span>
+            </div>
+          )}
+
+          {scanError !== null && (
+            <div className="flex items-center gap-2 text-destructive text-sm py-4">
+              <AlertCircle className="size-4" />
+              {scanError}
+            </div>
+          )}
+
+          {!scanning && scanError === null && providers.length === 0 && (
+            <p className="text-sm text-muted-foreground py-8 text-center">
+              No external provider configurations found.
+              <br />
+              <span className="text-xs">
+                Supported tools: Claude Code (~/.claude/settings.json), OpenCode
+                (~/.config/opencode/opencode.json), MiMo Code (~/.config/mimocode/mimocode.jsonc)
+              </span>
+            </p>
+          )}
+
+          {!scanning &&
+            providers.map((p, i) => (
+              <label
+                key={`${p.sourceTool}-${p.name}`}
+                className={`flex items-start gap-3 p-3 border rounded-md ${p.alreadyExists ? "" : "cursor-pointer hover:bg-muted/50"}`}
+              >
+                {!p.alreadyExists && (
+                  <input
+                    type="checkbox"
+                    checked={selected.has(i)}
+                    disabled={importing}
+                    onChange={() => toggleProvider(i)}
+                    className="mt-0.5 size-4"
+                  />
+                )}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between">
+                    {(() => {
+                      const LogoComponent = sourceLogoMap[p.sourceTool];
+                      if (LogoComponent === undefined) return null;
+                      return <LogoComponent />;
+                    })()}
+                    {p.alreadyExists && (
+                      <span className="text-[10px] text-muted-foreground">Already added</span>
+                    )}
+                  </div>
+                  <div className="text-xs text-muted-foreground mt-1 truncate">
+                    {p.models.slice(0, 4).join(", ")}
+                    {p.models.length > 4 ? ` +${p.models.length - 4} more` : ""}
+                  </div>
+                  <div className="text-xs text-muted-foreground mt-0.5 truncate">
+                    {p.format === "anthropic" ? p.anthropicBaseUrl : p.openaiBaseUrl}
+                  </div>
+                  <div className="text-xs text-muted-foreground mt-0.5 font-mono">
+                    {p.apiKey.length > 8
+                      ? `${p.apiKey.slice(0, 4)}••••${p.apiKey.slice(-4)}`
+                      : "••••"}
+                  </div>
+                </div>
+              </label>
+            ))}
+
+          {warnings.length > 0 && (
+            <div className="text-xs text-muted-foreground space-y-1 border-t pt-2">
+              {warnings.map((w, i) => (
+                <div key={i} className="flex items-center gap-1">
+                  <AlertCircle className="size-3" />
+                  {w}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {importResult !== null && (
+            <div className="text-sm text-green-500 border-t pt-2">{importResult}</div>
+          )}
+
+          {importError !== null && (
+            <div className="text-sm text-destructive border-t pt-2">{importError}</div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between pt-3 border-t">
+          <Button variant="outline" size="sm" onClick={scan} disabled={scanning}>
+            <Loader2 className={`size-3 mr-1 ${scanning ? "animate-spin" : ""}`} />
+            Rescan
+          </Button>
+          <Button
+            size="sm"
+            onClick={importSelected}
+            disabled={!hasSelectable || selected.size === 0 || importing}
+          >
+            <Download className="size-3 mr-1" />
+            {importing ? "Importing..." : `Import Selected (${selected.size})`}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}