@tonyclaw/llm-inspector 1.6.0

package/src/components/providers/ProviderLogo.tsx

@@ -0,0 +1,111 @@
+import type { JSX } from "react";
+import React from "react";
+import AnthropicLogoSvg from "../../assets/logos/anthropic.svg";
+import OpenAILogoSvg from "../../assets/logos/openai.svg";
+import DeepSeekLogoSvg from "../../assets/logos/deepseek.svg";
+import MiniMaxLogoSvg from "../../assets/logos/minimax.jpeg";
+import AlibabaLogoSvg from "../../assets/logos/alibaba.svg";
+import QwenLogoSvg from "../../assets/logos/qwen.png";
+import ZhipuAILogoSvg from "../../assets/logos/zhipuai.svg";
+
+export type Provider =
+  | "anthropic"
+  | "openai"
+  | "deepseek"
+  | "minimax"
+  | "alibaba"
+  | "qwen"
+  | "zhipuai"
+  | "unknown";
+
+const PROVIDER_MAP: Record<string, Provider> = {
+  "claude-": "anthropic",
+  "gpt-": "openai",
+  "o1-": "openai",
+  "o3-": "openai",
+  "deepseek-": "deepseek",
+  MiniMax: "minimax",
+  qwen: "qwen",
+  "glm-": "zhipuai",
+};
+
+export function detectProvider(model: string | null): Provider {
+  if (model === null) return "unknown";
+  for (const [prefix, provider] of Object.entries(PROVIDER_MAP)) {
+    if (model.startsWith(prefix)) {
+      return provider;
+    }
+  }
+  return "unknown";
+}
+
+const sizeStyle = { width: 24, height: 24, objectFit: "contain" as const };
+
+const AnthropicLogo = React.memo(
+  ({ className }: { className?: string }): JSX.Element => (
+    <img src={AnthropicLogoSvg} alt="Anthropic" className={className} style={sizeStyle} />
+  ),
+);
+
+const OpenAILogo = React.memo(
+  ({ className }: { className?: string }): JSX.Element => (
+    <img src={OpenAILogoSvg} alt="OpenAI" className={className} style={sizeStyle} />
+  ),
+);
+
+const DeepSeekLogo = React.memo(
+  ({ className }: { className?: string }): JSX.Element => (
+    <img src={DeepSeekLogoSvg} alt="DeepSeek" className={className} style={sizeStyle} />
+  ),
+);
+
+const MiniMaxLogo = React.memo(
+  ({ className }: { className?: string }): JSX.Element => (
+    <img src={MiniMaxLogoSvg} alt="MiniMax" className={className} style={sizeStyle} />
+  ),
+);
+
+const AlibabaLogo = React.memo(
+  ({ className }: { className?: string }): JSX.Element => (
+    <img src={AlibabaLogoSvg} alt="Alibaba" className={className} style={sizeStyle} />
+  ),
+);
+
+const QwenLogo = React.memo(
+  ({ className }: { className?: string }): JSX.Element => (
+    <img src={QwenLogoSvg} alt="Qwen" className={className} style={sizeStyle} />
+  ),
+);
+
+const ZhipuAILogo = React.memo(
+  ({ className }: { className?: string }): JSX.Element => (
+    <img src={ZhipuAILogoSvg} alt="ZhipuAI" className={className} style={sizeStyle} />
+  ),
+);
+
+export function ProviderLogo({
+  provider,
+  className,
+}: {
+  provider: Provider;
+  className?: string;
+}): JSX.Element | null {
+  switch (provider) {
+    case "anthropic":
+      return <AnthropicLogo className={className} />;
+    case "openai":
+      return <OpenAILogo className={className} />;
+    case "deepseek":
+      return <DeepSeekLogo className={className} />;
+    case "minimax":
+      return <MiniMaxLogo className={className} />;
+    case "alibaba":
+      return <AlibabaLogo className={className} />;
+    case "qwen":
+      return <QwenLogo className={className} />;
+    case "zhipuai":
+      return <ZhipuAILogo className={className} />;
+    case "unknown":
+      return null;
+  }
+}

package/src/components/providers/ProvidersPanel.tsx

@@ -0,0 +1,259 @@
+import { type JSX, useState, useEffect, useCallback } from "react";
+import { Button } from "../ui/button";
+import { Plus, AlertCircle, Copy, Check } from "lucide-react";
+import { ProviderCard } from "./ProviderCard";
+import { ProviderForm } from "./ProviderForm";
+import type { ProviderConfig } from "../../proxy/providers";
+
+type ConfigPathsResponse = {
+  providerConfig: string;
+};
+
+type TestResult = {
+  success: boolean;
+  error?: string;
+};
+
+type NotConfigured = { notConfigured: true };
+
+type StreamingTestResults = {
+  nonStreaming: TestResult | NotConfigured;
+  streaming: TestResult | NotConfigured;
+};
+
+type TestResults = {
+  anthropic: StreamingTestResults;
+  openai: StreamingTestResults;
+};
+
+export function ProvidersPanel(): JSX.Element {
+  const [providers, setProviders] = useState<ProviderConfig[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [editingProvider, setEditingProvider] = useState<ProviderConfig | undefined>();
+  const [error, setError] = useState<string | null>(null);
+  const [testResults, setTestResults] = useState<Record<string, TestResults>>({});
+  const [testingProviders, setTestingProviders] = useState<Set<string>>(new Set());
+  const [configPath, setConfigPath] = useState<string | null>(null);
+  const [configPathCopied, setConfigPathCopied] = useState(false);
+
+  const fetchProviders = useCallback(async (): Promise<void> => {
+    try {
+      const providersRes = await fetch("/api/providers");
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const providersData = (await providersRes.json()) as ProviderConfig[];
+      setProviders(providersData);
+    } catch {
+      setError("Failed to load providers");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchProviders();
+    void (async () => {
+      try {
+        const res = await fetch("/api/config/paths");
+        if (res.ok) {
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          const data = (await res.json()) as ConfigPathsResponse;
+          setConfigPath(data.providerConfig);
+        }
+      } catch {
+        // Ignore
+      }
+    })();
+  }, [fetchProviders]);
+
+  const runTest = useCallback(async (providerId: string): Promise<void> => {
+    setTestingProviders((prev) => new Set(prev).add(providerId));
+    try {
+      const res = await fetch(`/api/providers/${providerId}/test`, { method: "POST" });
+      if (res.ok) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const results = (await res.json()) as TestResults;
+        setTestResults((prev) => ({ ...prev, [providerId]: results }));
+      }
+    } finally {
+      setTestingProviders((prev) => {
+        const next = new Set(prev);
+        next.delete(providerId);
+        return next;
+      });
+    }
+  }, []);
+
+  function handleAddProvider(data: {
+    name: string;
+    apiKey: string;
+    model?: string;
+    anthropicBaseUrl?: string;
+    openaiBaseUrl?: string;
+  }): void {
+    void (async () => {
+      const res = await fetch("/api/providers", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      if (!res.ok) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const err = (await res.json()) as { error?: string };
+        setError(err.error ?? "Failed to add provider");
+        return;
+      }
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const newProvider = (await res.json()) as ProviderConfig;
+      await fetchProviders();
+      setShowForm(false);
+      // Run test on new provider
+      await runTest(newProvider.id);
+    })();
+  }
+
+  function handleUpdateProvider(data: {
+    name: string;
+    apiKey: string;
+    model?: string;
+    anthropicBaseUrl?: string;
+    openaiBaseUrl?: string;
+  }): void {
+    if (!editingProvider) return;
+    void (async () => {
+      const res = await fetch(`/api/providers/${editingProvider.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      if (!res.ok) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const err = (await res.json()) as { error?: string };
+        setError(err.error ?? "Failed to update provider");
+        return;
+      }
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const updated = (await res.json()) as ProviderConfig;
+      await fetchProviders();
+      setEditingProvider(undefined);
+      // Run test on updated provider
+      await runTest(updated.id);
+    })();
+  }
+
+  function handleDeleteProvider(providerId: string): void {
+    // eslint-disable-next-line no-alert
+    if (!window.confirm("Are you sure you want to delete this provider?")) return;
+    void (async () => {
+      const res = await fetch(`/api/providers/${providerId}`, {
+        method: "DELETE",
+      });
+      if (!res.ok) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const err = (await res.json()) as { error?: string };
+        setError(err.error ?? "Failed to delete provider");
+        return;
+      }
+      await fetchProviders();
+    })();
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <p className="text-sm text-muted-foreground">Loading providers...</p>
+      </div>
+    );
+  }
+
+  if (showForm || editingProvider) {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-medium">
+            {editingProvider ? "Edit Provider" : "Add New Provider"}
+          </h3>
+        </div>
+        <ProviderForm
+          provider={editingProvider}
+          onSubmit={editingProvider ? handleUpdateProvider : handleAddProvider}
+          onCancel={() => {
+            setShowForm(false);
+            setEditingProvider(undefined);
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-medium">Providers</h3>
+        <Button onClick={() => setShowForm(true)} size="sm" className="gap-1">
+          <Plus className="size-4" />
+          Add Provider
+        </Button>
+      </div>
+
+      {configPath !== null && (
+        <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/30 rounded-md px-3 py-2">
+          <span className="shrink-0">Config:</span>
+          <span className="font-mono truncate" title={configPath}>
+            {configPath}
+          </span>
+          <button
+            type="button"
+            onClick={() => {
+              void window.navigator.clipboard.writeText(configPath).then(() => {
+                setConfigPathCopied(true);
+                setTimeout(() => setConfigPathCopied(false), 2000);
+              });
+            }}
+            className="shrink-0 ml-auto text-muted-foreground hover:text-foreground transition-colors"
+            title="Copy path"
+          >
+            {configPathCopied ? (
+              <Check className="size-3 text-green-500" />
+            ) : (
+              <Copy className="size-3" />
+            )}
+          </button>
+        </div>
+      )}
+
+      {error !== null && (
+        <div className="flex items-center gap-2 text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
+          <AlertCircle className="size-4 shrink-0" />
+          {error}
+        </div>
+      )}
+
+      {providers.length === 0 ? (
+        <div className="text-center py-12 space-y-3">
+          <p className="text-sm text-muted-foreground">No providers configured yet.</p>
+          <Button onClick={() => setShowForm(true)} variant="outline" size="sm">
+            <Plus className="size-4" />
+            Add Your First Provider
+          </Button>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {providers.map((provider) => (
+            <ProviderCard
+              key={provider.id}
+              provider={provider}
+              testResults={testResults[provider.id]}
+              isTesting={testingProviders.has(provider.id)}
+              onEdit={(p) => setEditingProvider(p)}
+              onDelete={handleDeleteProvider}
+              onTest={(id: string) => {
+                void runTest(id);
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/providers/SettingsDialog.tsx

@@ -0,0 +1,39 @@
+import { type JSX, useState } from "react";
+import { Settings } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
+import { Button } from "../ui/button";
+import { ProvidersPanel } from "./ProvidersPanel";
+
+export function SettingsDialog(): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState("providers");
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="icon" className="size-8">
+          <Settings className="size-4" />
+          <span className="sr-only">Settings</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Settings</DialogTitle>
+        </DialogHeader>
+
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 overflow-hidden">
+          <TabsList>
+            <TabsTrigger value="providers">Providers</TabsTrigger>
+          </TabsList>
+
+          <div className="mt-4 overflow-y-auto flex-1">
+            <TabsContent value="providers">
+              <ProvidersPanel />
+            </TabsContent>
+          </div>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import type { JSX } from "react";
+import type { CapturedLog } from "../../proxy/schemas";
+import {
+  ConversationHeader,
+  getConversationId,
+  type ConversationGroupData,
+} from "./ConversationHeader";
+import { LogEntry } from "./LogEntry";
+
+export type ConversationGroupProps = {
+  group: ConversationGroupData;
+  viewMode?: "simple" | "full";
+};
+
+function computeStats(logs: CapturedLog[]): {
+  totalInputTokens: number;
+  totalOutputTokens: number;
+} {
+  let totalInput = 0;
+  let totalOutput = 0;
+  for (const log of logs) {
+    if (log.inputTokens !== null) totalInput += log.inputTokens;
+    if (log.outputTokens !== null) totalOutput += log.outputTokens;
+  }
+  return { totalInputTokens: totalInput, totalOutputTokens: totalOutput };
+}
+
+export function ConversationGroup({
+  group,
+  viewMode = "simple",
+}: ConversationGroupProps): JSX.Element {
+  const [expanded, setExpanded] = useState(false);
+
+  const stats = computeStats(group.logs);
+  const startTime = group.logs[0]?.timestamp ?? new Date().toISOString();
+  const endTime = group.logs[group.logs.length - 1]?.timestamp ?? new Date().toISOString();
+
+  const displayId =
+    group.conversationId.startsWith("PID:") || group.conversationId.includes("|")
+      ? group.conversationId
+      : group.conversationId.length > 24
+        ? group.conversationId.slice(0, 12) + "…" + group.conversationId.slice(-12)
+        : group.conversationId;
+
+  return (
+    <div className="mb-4">
+      <ConversationHeader
+        conversationId={displayId}
+        startTime={startTime}
+        endTime={endTime}
+        totalCalls={group.logs.length}
+        totalInputTokens={stats.totalInputTokens}
+        totalOutputTokens={stats.totalOutputTokens}
+        expanded={expanded}
+        onToggle={() => setExpanded(!expanded)}
+      />
+
+      {expanded && (
+        <div className="pl-4 border-l-2 border-muted ml-3">
+          {group.logs.map((log) => (
+            <LogEntry key={log.id} log={log} viewMode={viewMode} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,141 @@
+import { ChevronDown, ChevronRight, Clock, MessageSquare, Zap } from "lucide-react";
+import type { JSX } from "react";
+import { cn, formatTokens } from "../../lib/utils";
+import type { CapturedLog } from "../../proxy/schemas";
+
+export type ConversationHeaderProps = {
+  conversationId: string;
+  startTime: string;
+  endTime: string;
+  totalCalls: number;
+  totalInputTokens: number;
+  totalOutputTokens: number;
+  expanded: boolean;
+  onToggle: () => void;
+};
+
+function formatTimestamp(iso: string): string {
+  const date = new Date(iso);
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+
+export function ConversationHeader({
+  conversationId,
+  startTime,
+  endTime,
+  totalCalls,
+  totalInputTokens,
+  totalOutputTokens,
+  expanded,
+  onToggle,
+}: ConversationHeaderProps): JSX.Element {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className={cn(
+        "flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors",
+        "hover:bg-muted/50",
+        "select-none",
+        "border border-border rounded-lg mb-2 bg-muted/30",
+      )}
+      onClick={onToggle}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onToggle();
+        }
+      }}
+    >
+      {/* Expand chevron */}
+      {expanded ? (
+        <ChevronDown className="size-4 text-muted-foreground shrink-0" />
+      ) : (
+        <ChevronRight className="size-4 text-muted-foreground shrink-0" />
+      )}
+
+      {/* Conversation ID */}
+      <span
+        className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"
+        title={conversationId}
+      >
+        {conversationId.length > 24
+          ? conversationId.slice(0, 12) + "…" + conversationId.slice(-12)
+          : conversationId}
+      </span>
+
+      {/* Time range */}
+      <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(startTime)} - {formatTimestamp(endTime)}
+        </span>
+      </span>
+
+      {/* Total calls */}
+      <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+        <MessageSquare className="size-3" />
+        <span className="font-mono tabular-nums">
+          {totalCalls} call{totalCalls !== 1 ? "s" : ""}
+        </span>
+      </span>
+
+      {/* Token counts */}
+      <span className="flex items-center gap-1 text-xs shrink-0">
+        <Zap className="size-3 text-muted-foreground" />
+        <span className="font-mono tabular-nums">
+          <span className="text-blue-400">{formatTokens(totalInputTokens)}</span>
+          {" / "}
+          <span className="text-amber-400">{formatTokens(totalOutputTokens)}</span>
+        </span>
+      </span>
+
+      {/* Spacer */}
+      <span className="flex-1 min-w-0" />
+    </div>
+  );
+}
+
+export type ConversationGroupData = {
+  id: string;
+  conversationId: string;
+  logs: CapturedLog[];
+};
+
+export function getConversationId(log: CapturedLog): string {
+  if (log.sessionId !== null && log.sessionId !== "") {
+    return log.sessionId;
+  }
+  const pid = log.clientPid !== null ? `PID:${log.clientPid}` : "unknown";
+  const folder = log.clientProjectFolder !== null ? log.clientProjectFolder : "no-folder";
+  return `${pid}|${folder}`;
+}
+
+export function groupLogsByConversation(logs: CapturedLog[]): ConversationGroupData[] {
+  const groups = new Map<string, CapturedLog[]>();
+
+  for (const log of logs) {
+    const convId = getConversationId(log);
+    const existing = groups.get(convId);
+    if (existing !== undefined) {
+      existing.push(log);
+    } else {
+      groups.set(convId, [log]);
+    }
+  }
+
+  const result: ConversationGroupData[] = [];
+
+  for (const [conversationId, groupLogs] of groups) {
+    const sorted = [...groupLogs].sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+    result.push({
+      id: conversationId,
+      conversationId,
+      logs: sorted,
+    });
+  }
+
+  result.sort((a, b) => (a.logs[0]?.timestamp ?? "").localeCompare(b.logs[0]?.timestamp ?? ""));
+
+  return result;
+}