@tonyclaw/llm-inspector 1.6.0

package/src/components/ProxyViewerContainer.tsx

@@ -0,0 +1,211 @@
+import { useState, useEffect, useCallback, useRef, type JSX } from "react";
+import { z } from "zod";
+import { CapturedLogSchema, type CapturedLog } from "../proxy/schemas";
+import { ProxyViewer } from "./ProxyViewer";
+
+type logsResponse = {
+  logs: CapturedLog[];
+  total: number;
+  offset: number;
+  limit: number;
+};
+
+const LogsResponseSchema = z.object({
+  logs: z.array(CapturedLogSchema),
+  total: z.number(),
+  offset: z.number(),
+  limit: z.number(),
+});
+
+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];
+}
+
+export function ProxyViewerContainer(): JSX.Element {
+  const [logs, setLogs] = useState<CapturedLog[]>([]);
+  const [sessions, setSessions] = useState<string[]>([]);
+  const [models, setModels] = useState<string[]>([]);
+  const [selectedSession, setSelectedSession] = useState("__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 fetchSessionsAndModels = useCallback(async () => {
+    try {
+      const [sessionsRes, modelsRes] = await Promise.all([
+        fetch("/api/sessions"),
+        fetch("/api/models"),
+      ]);
+      if (sessionsRes.ok && modelsRes.ok) {
+        const sessionsJson: unknown = await sessionsRes.json();
+        const modelsJson: unknown = await modelsRes.json();
+        const sessionsResult = z.array(z.string()).safeParse(sessionsJson);
+        const modelsResult = z.array(z.string()).safeParse(modelsJson);
+        if (sessionsResult.success) setSessions(sessionsResult.data);
+        if (modelsResult.success) setModels(modelsResult.data);
+      }
+    } catch {
+      // SSE already has sessions/models from init
+    }
+  }, []);
+
+  const connectSSE = useCallback(() => {
+    // Clean up existing connection
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+
+    const params = new URLSearchParams();
+    if (selectedSession !== "__all__") params.set("sessionId", selectedSession);
+    if (selectedModel !== "__all__") params.set("model", selectedModel);
+
+    const es = new EventSource(`/api/logs/stream?${params}`);
+    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") {
+          setLogs(update.logs);
+          setSessions(extractSessions(update.logs));
+          setModels(extractModels(update.logs));
+          setError(null);
+        } else if (update.type === "update") {
+          setLogs((prev) => {
+            // Filter by current selection before adding
+            const sessionMatch =
+              selectedSession === "__all__" || update.log.sessionId === selectedSession;
+            const modelMatch = selectedModel === "__all__" || update.log.model === selectedModel;
+            if (!sessionMatch || !modelMatch) return prev;
+
+            // Update existing log or add as new
+            const existsIndex = prev.findIndex((l) => l.id === update.log.id);
+            if (existsIndex >= 0) {
+              // Replace the existing log with updated data
+              return prev.map((l) => (l.id === update.log.id ? update.log : l));
+            }
+            // Add to end (newest)
+            return [...prev, update.log];
+          });
+          // Update sessions and models
+          setSessions((prev) => {
+            const sessionId = update.log.sessionId;
+            if (sessionId !== null && sessionId !== undefined && sessionId !== "") {
+              return prev.includes(sessionId) ? prev : [...prev, sessionId];
+            }
+            return prev;
+          });
+          setModels((prev) => {
+            const model = update.log.model;
+            if (model !== null && model !== undefined && model !== "") {
+              return prev.includes(model) ? prev : [...prev, model];
+            }
+            return prev;
+          });
+        }
+      } catch {
+        setError("Failed to parse SSE data");
+      }
+    };
+
+    es.onerror = () => {
+      setError("SSE connection lost, reconnecting...");
+      es.close();
+      // Reconnect after 3 seconds
+      setTimeout(connectSSE, 3000);
+    };
+
+    void fetchSessionsAndModels();
+  }, [selectedSession, selectedModel, fetchSessionsAndModels]);
+
+  useEffect(() => {
+    connectSSE();
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+    };
+  }, [connectSSE]);
+
+  const handleClearAll = useCallback(() => {
+    void (async () => {
+      try {
+        const res = await fetch("/api/logs", { method: "DELETE" });
+        if (!res.ok) {
+          setError("Failed to clear logs");
+          return;
+        }
+        setLogs([]);
+        setSessions([]);
+        setModels([]);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error clearing logs");
+      }
+    })();
+  }, []);
+
+  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>
+      )}
+      <ProxyViewer
+        logs={logs}
+        sessions={sessions}
+        models={models}
+        selectedSession={selectedSession}
+        selectedModel={selectedModel}
+        onSessionChange={setSelectedSession}
+        onModelChange={setSelectedModel}
+        onClearAll={handleClearAll}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+      />
+    </>
+  );
+}

package/src/components/providers/ProviderCard.tsx

@@ -0,0 +1,186 @@
+import { type JSX, useState } from "react";
+import { Button } from "../ui/button";
+import {
+  Eye,
+  EyeOff,
+  Pencil,
+  Trash2,
+  RotateCw,
+  CheckCircle,
+  XCircle,
+  Minus,
+  ExternalLink,
+} from "lucide-react";
+import type { ProviderConfig } from "../../proxy/providers";
+
+// Known provider documentation links
+const KNOWN_PROVIDER_DOCS: Record<string, string> = {
+  deepseek: "https://api-docs.deepseek.com/zh-cn/",
+};
+
+type TestResult = {
+  success: boolean;
+  error?: string;
+};
+
+type NotConfigured = { notConfigured: true };
+
+type StreamingTestResults = {
+  nonStreaming: TestResult | NotConfigured;
+  streaming: TestResult | NotConfigured;
+};
+
+type TestResults = {
+  anthropic: StreamingTestResults;
+  openai: StreamingTestResults;
+};
+
+type ProviderCardProps = {
+  provider: ProviderConfig;
+  testResults?: TestResults;
+  isTesting?: boolean;
+  onEdit: (provider: ProviderConfig) => void;
+  onDelete: (providerId: string) => void;
+  onTest?: (providerId: string) => void;
+};
+
+function maskApiKey(apiKey: string): string {
+  if (apiKey.length <= 8) return "••••••••";
+  return apiKey.slice(0, 4) + "••••••••" + apiKey.slice(-4);
+}
+
+function hasSuccessField(result: TestResult | NotConfigured): result is TestResult {
+  return Object.prototype.hasOwnProperty.call(result, "success");
+}
+
+function TestStatus({ result }: { result: TestResult | NotConfigured }): JSX.Element {
+  if (!hasSuccessField(result)) {
+    return (
+      <div className="flex items-center gap-1 text-xs text-muted-foreground">
+        <Minus className="size-3" />
+        <span>Not configured</span>
+      </div>
+    );
+  }
+  if (result.success) {
+    return (
+      <div className="flex items-center gap-1 text-xs text-green-600">
+        <CheckCircle className="size-3" />
+        <span>Connected</span>
+      </div>
+    );
+  }
+  return (
+    <div className="flex items-center gap-1 text-xs text-red-600" title={result.error}>
+      <XCircle className="size-3" />
+      <span className="truncate">{result.error}</span>
+    </div>
+  );
+}
+
+export function ProviderCard({
+  provider,
+  testResults,
+  isTesting,
+  onEdit,
+  onDelete,
+  onTest,
+}: ProviderCardProps): JSX.Element {
+  const [showApiKey, setShowApiKey] = useState(false);
+
+  return (
+    <div className="border rounded-lg p-4 flex flex-col gap-3 bg-card">
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="font-medium truncate">
+            {provider.model !== undefined && provider.model !== ""
+              ? `${provider.model} (${provider.name})`
+              : provider.name}
+          </span>
+        </div>
+        {Object.entries(KNOWN_PROVIDER_DOCS).map(([keyword, url]) =>
+          provider.name.toLowerCase().includes(keyword) ? (
+            <a
+              key={keyword}
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 text-xs"
+              title="View API documentation"
+            >
+              <ExternalLink className="size-3" />
+              <span className="sr-only">Docs</span>
+            </a>
+          ) : null,
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        <code className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded flex-1 truncate">
+          {showApiKey ? provider.apiKey : maskApiKey(provider.apiKey)}
+        </code>
+        <button
+          type="button"
+          onClick={() => setShowApiKey((s) => !s)}
+          className="text-muted-foreground hover:text-foreground transition-colors p-1"
+          aria-label={showApiKey ? "Hide API key" : "Show API key"}
+        >
+          {showApiKey ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+        </button>
+      </div>
+
+      {provider.anthropicBaseUrl !== undefined && provider.anthropicBaseUrl !== "" && (
+        <div className="flex items-center justify-between gap-2">
+          <div className="text-xs text-muted-foreground min-w-0 flex-1">
+            <span className="font-medium">Anthropic:</span>{" "}
+            <span className="truncate">{provider.anthropicBaseUrl}</span>
+          </div>
+          {testResults && <TestStatus result={testResults.anthropic.nonStreaming} />}
+        </div>
+      )}
+
+      {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
+        <div className="flex items-center justify-between gap-2">
+          <div className="text-xs text-muted-foreground min-w-0 flex-1">
+            <span className="font-medium">OpenAI:</span>{" "}
+            <span className="truncate">{provider.openaiBaseUrl}</span>
+          </div>
+          {testResults && <TestStatus result={testResults.openai.nonStreaming} />}
+        </div>
+      )}
+
+      <div className="flex gap-2 pt-1 border-t">
+        {onTest !== undefined && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onTest(provider.id)}
+            className="text-xs h-7 gap-1"
+            disabled={isTesting ?? false}
+          >
+            <RotateCw className={`size-3 ${(isTesting ?? false) ? "animate-spin" : ""}`} />
+            {(isTesting ?? false) ? "Testing..." : "Test"}
+          </Button>
+        )}
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onEdit(provider)}
+          className="text-xs h-7 gap-1"
+        >
+          <Pencil className="size-3" />
+          Edit
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onDelete(provider.id)}
+          className="text-xs h-7 gap-1 text-destructive hover:text-destructive"
+        >
+          <Trash2 className="size-3" />
+          Delete
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/providers/ProviderForm.tsx

@@ -0,0 +1,259 @@
+import { type JSX, useState, useEffect } from "react";
+import { Button } from "../ui/button";
+import type { ProviderConfig } from "../../proxy/providers";
+
+// Known provider presets - maps provider name keywords to their API URLs
+const KNOWN_PROVIDER_PRESETS: Record<string, { format: "anthropic" | "openai"; baseUrl: string }> =
+  {
+    deepseek: {
+      format: "openai",
+      baseUrl: "https://api.deepseek.com",
+    },
+    minimax: {
+      format: "anthropic",
+      baseUrl: "https://api.minimaxi.com/anthropic",
+    },
+    alibaba: {
+      format: "openai",
+      baseUrl: "https://dashscope.aliyuncs.com/compatible-mode",
+    },
+  };
+
+// MiniMax model options
+const MINIMAX_MODELS = [
+  "MiniMax M2.7",
+  "MiniMax M2.7-highspeed",
+  "MiniMax M2.5",
+  "MiniMax M2.5-highspeed",
+  "MiniMax M2.1",
+  "MiniMax M2.1-highspeed",
+  "MiniMax M2",
+];
+
+// Alibaba model options
+const ALIBABA_MODELS = ["glm-5", "glm-5.1", "qwen3.6-plus", "qwen3.7-max"];
+
+type ProviderFormProps = {
+  provider?: ProviderConfig;
+  onSubmit: (data: {
+    name: string;
+    apiKey: string;
+    model?: string;
+    format: "anthropic" | "openai";
+    baseUrl?: string;
+  }) => void;
+  onCancel: () => void;
+};
+
+export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps): JSX.Element {
+  const [name, setName] = useState(provider?.name ?? "Provider Name");
+  const [apiKey, setApiKey] = useState(provider?.apiKey ?? "");
+  const [model, setModel] = useState(provider?.model ?? "");
+  const [format, setFormat] = useState<"anthropic" | "openai">(provider?.format ?? "anthropic");
+  const [baseUrl, setBaseUrl] = useState(provider?.baseUrl ?? "");
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Track if URL field has been manually edited (to avoid overriding user edits)
+  const [manualBaseUrlOverride, setManualBaseUrlOverride] = useState(false);
+
+  // Check if MiniMax is detected
+  const isMiniMax = name.toLowerCase().includes("minimax");
+  // Check if Alibaba is detected
+  const isAlibaba = name.toLowerCase().includes("alibaba");
+
+  useEffect(() => {
+    if (provider) {
+      setName(provider.name);
+      setApiKey(provider.apiKey);
+      setModel(provider.model ?? "");
+      setFormat(provider.format ?? "anthropic");
+      setBaseUrl(provider.baseUrl ?? "");
+      setManualBaseUrlOverride(false);
+    }
+  }, [provider]);
+
+  // Detect known provider presets and auto-fill URLs
+  useEffect(() => {
+    const lowerName = name.toLowerCase();
+    for (const [keyword, preset] of Object.entries(KNOWN_PROVIDER_PRESETS)) {
+      if (lowerName.includes(keyword)) {
+        if (!manualBaseUrlOverride) {
+          setFormat(preset.format);
+          setBaseUrl(preset.baseUrl);
+        }
+        // For MiniMax, auto-select the first model if not already set
+        if (keyword === "minimax" && !model) {
+          setModel(MINIMAX_MODELS[0] ?? "");
+        }
+        // For Alibaba, auto-select the first model if not already set
+        if (keyword === "alibaba" && !model) {
+          setModel(ALIBABA_MODELS[0] ?? "");
+        }
+        break;
+      }
+    }
+  }, [name]);
+
+  function validate(): boolean {
+    const newErrors: Record<string, string> = {};
+    if (!name.trim()) {
+      newErrors.name = "Name is required";
+    }
+    if (!apiKey.trim()) {
+      newErrors.apiKey = "API key is required";
+    }
+    if (!model.trim()) {
+      newErrors.model = "Model is required";
+    }
+    if (!baseUrl.trim()) {
+      newErrors.baseUrl = "Base URL is required";
+    } else if (!isValidUrl(baseUrl.trim())) {
+      newErrors.baseUrl = "Invalid URL format";
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }
+
+  function isValidUrl(str: string): boolean {
+    try {
+      new URL(str);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  function handleSubmit(e: React.FormEvent): void {
+    e.preventDefault();
+    if (!validate()) return;
+    setIsSubmitting(true);
+    try {
+      onSubmit({
+        name: name.trim(),
+        apiKey: apiKey.trim(),
+        model: model.trim() || undefined,
+        format,
+        baseUrl: baseUrl.trim() || undefined,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <label htmlFor="provider-name" className="text-sm font-medium">
+          Name <span className="text-destructive">*</span>
+        </label>
+        <input
+          id="provider-name"
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Model Name"
+          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+        />
+        {errors.name !== undefined && <p className="text-xs text-destructive">{errors.name}</p>}
+      </div>
+
+      <div className="space-y-2">
+        <label htmlFor="provider-apikey" className="text-sm font-medium">
+          API Key <span className="text-destructive">*</span>
+        </label>
+        <input
+          id="provider-apikey"
+          type="password"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          placeholder="sk-ant-..."
+          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+        />
+        {errors.apiKey !== undefined && <p className="text-xs text-destructive">{errors.apiKey}</p>}
+      </div>
+
+      <div className="space-y-2">
+        <label htmlFor="provider-model" className="text-sm font-medium">
+          Model <span className="text-destructive">*</span>
+        </label>
+        {isMiniMax || isAlibaba ? (
+          <select
+            id="provider-model"
+            value={model}
+            onChange={(e) => setModel(e.target.value)}
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {(isMiniMax ? MINIMAX_MODELS : ALIBABA_MODELS).map((m) => (
+              <option key={m} value={m}>
+                {m}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <input
+            id="provider-model"
+            type="text"
+            value={model}
+            onChange={(e) => setModel(e.target.value)}
+            placeholder=""
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+          />
+        )}
+        {errors.model !== undefined && <p className="text-xs text-destructive">{errors.model}</p>}
+      </div>
+
+      <div className="space-y-2">
+        <label htmlFor="provider-format" className="text-sm font-medium">
+          API Format <span className="text-destructive">*</span>
+        </label>
+        <select
+          id="provider-format"
+          value={format}
+          onChange={(e) => setFormat(e.target.value === "anthropic" ? "anthropic" : "openai")}
+          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <option value="anthropic">Anthropic (/v1/messages)</option>
+          <option value="openai">OpenAI (/v1/chat/completions)</option>
+        </select>
+        <p className="text-xs text-muted-foreground">
+          {format === "anthropic"
+            ? "Use Anthropic format for /v1/messages endpoint"
+            : "Use OpenAI format for /v1/chat/completions endpoint"}
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <label htmlFor="provider-base-url" className="text-sm font-medium">
+          Base URL <span className="text-destructive">*</span>
+        </label>
+        <input
+          id="provider-base-url"
+          type="text"
+          value={baseUrl}
+          onChange={(e) => {
+            setManualBaseUrlOverride(true);
+            setBaseUrl(e.target.value);
+          }}
+          placeholder={
+            format === "anthropic" ? "https://api.anthropic.com" : "https://api.openai.com/v1"
+          }
+          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+        />
+        {errors.baseUrl !== undefined && (
+          <p className="text-xs text-destructive">{errors.baseUrl}</p>
+        )}
+        <p className="text-xs text-muted-foreground">Base URL for the provider API.</p>
+      </div>
+
+      <div className="flex gap-2 justify-end pt-2">
+        <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
+          Cancel
+        </Button>
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? "Saving..." : provider ? "Update Provider" : "Add Provider"}
+        </Button>
+      </div>
+    </form>
+  );
+}