@harbinger-ai/harbinger 0.1.2 → 0.1.4

package/lib/chat/components/settings-providers-page.js

@@ -0,0 +1,872 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  CpuIcon,
+  CheckIcon,
+  SpinnerIcon,
+  EyeIcon,
+  EyeOffIcon,
+  XIcon,
+  RefreshIcon,
+  WifiIcon,
+  ServerIcon,
+  ScanIcon,
+  GlobeIcon,
+  ZapIcon
+} from "./icons.js";
+import {
+  getLlmProviders,
+  saveLlmProvider,
+  setActiveProvider,
+  testLlmConnection,
+  getActiveProvider,
+  scanLocalProviders,
+  getLocalModels
+} from "../actions.js";
+const CLOUD_PROVIDERS = {
+  anthropic: {
+    name: "Anthropic",
+    icon: "A",
+    color: "#d4a574",
+    keyPrefix: "sk-ant-",
+    keyEnv: "ANTHROPIC_API_KEY",
+    models: [
+      "claude-sonnet-4-20250514",
+      "claude-opus-4-20250514",
+      "claude-haiku-4-5-20251001",
+      "claude-3-5-sonnet-20241022"
+    ]
+  },
+  openai: {
+    name: "OpenAI",
+    icon: "O",
+    color: "#74aa9c",
+    keyPrefix: "sk-",
+    keyEnv: "OPENAI_API_KEY",
+    models: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "o1", "o1-mini", "o3-mini"]
+  },
+  google: {
+    name: "Google",
+    icon: "G",
+    color: "#4285f4",
+    keyPrefix: "AI",
+    keyEnv: "GOOGLE_API_KEY",
+    models: ["gemini-2.5-pro", "gemini-2.5-flash", "gemini-2.0-flash"]
+  }
+};
+const LOCAL_PROVIDERS = {
+  ollama: { name: "Ollama", icon: "\u{1F999}", defaultUrl: "http://localhost:11434" },
+  lmstudio: { name: "LM Studio", icon: "\u{1F52C}", defaultUrl: "http://localhost:1234/v1" },
+  localai: { name: "LocalAI", icon: "\u{1F916}", defaultUrl: "http://localhost:8080/v1" },
+  llamacpp: { name: "llama.cpp", icon: "\u{1F527}", defaultUrl: "http://localhost:8081" },
+  vllm: { name: "vLLM", icon: "\u26A1", defaultUrl: "http://localhost:8000/v1" },
+  jan: { name: "Jan", icon: "\u{1F310}", defaultUrl: "http://localhost:1337/v1" }
+};
+function TrafficLights({ label }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+      /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+      /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+    ] }),
+    label && /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider ml-1", children: label })
+  ] });
+}
+function ProviderCard({ id, meta, config, isActive, isLocal, detected, onEdit, index }) {
+  const hasKey = !isLocal && (config?.hasKey || !!config?.apiKey);
+  const isDetected = isLocal && detected;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.25, delay: index * 0.04 },
+      className: `rounded-lg border bg-[--card] transition-all cursor-pointer hover:border-[--cyan]/20 ${isActive ? "border-[--cyan]/30 shadow-[0_0_15px_oklch(0.7_0.17_195/8%)]" : "border-white/[0.06]"}`,
+      onClick: onEdit,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3.5", children: [
+        /* @__PURE__ */ jsx("div", { className: `shrink-0 w-9 h-9 rounded-md flex items-center justify-center text-sm font-bold ${isLocal ? "bg-emerald-500/10 text-emerald-400" : "bg-[--cyan]/10 text-[--cyan]"}`, children: isLocal ? /* @__PURE__ */ jsx("span", { className: "text-base", children: meta.icon }) : /* @__PURE__ */ jsx("span", { className: "font-mono", children: meta.icon }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium", children: meta.name }),
+            isLocal && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-1.5 py-0 text-[9px] font-mono", children: "local" })
+          ] }),
+          config?.model && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-mono text-muted-foreground mt-0.5 truncate", children: config.model }),
+          isLocal && detected?.models?.length > 0 && !config?.model && /* @__PURE__ */ jsxs("p", { className: "text-[10px] font-mono text-muted-foreground mt-0.5", children: [
+            detected.models.length,
+            " model(s) available"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+          isLocal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${isDetected ? "bg-emerald-400 animate-pulse" : "bg-muted-foreground/40"}` }),
+            /* @__PURE__ */ jsx("span", { className: `text-[10px] font-mono ${isDetected ? "text-emerald-400" : "text-muted-foreground"}`, children: isDetected ? "running" : "not found" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${hasKey ? "bg-[--success]" : "bg-muted-foreground/40"}` }),
+            /* @__PURE__ */ jsx("span", { className: `text-[10px] font-mono ${hasKey ? "text-[--success]" : "text-muted-foreground"}`, children: hasKey ? "configured" : "no key" })
+          ] }),
+          isActive && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 px-2 py-0.5 text-[10px] font-mono font-medium", children: "active" })
+        ] })
+      ] })
+    }
+  );
+}
+function CloudSetupForm({ provider, meta, config, isActive, onSave, onSetActive, onClose }) {
+  const [apiKey, setApiKey] = useState("");
+  const [model, setModel] = useState(config?.model || meta.models[0] || "");
+  const [maxTokens, setMaxTokens] = useState(config?.maxTokens || 4096);
+  const [showKey, setShowKey] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const saveConfig = { model, maxTokens: parseInt(maxTokens) };
+      if (apiKey && !apiKey.includes("***")) {
+        saveConfig.apiKey = apiKey;
+      }
+      await onSave(provider, saveConfig);
+    } finally {
+      setSaving(false);
+    }
+  }
+  async function handleTest() {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await testLlmConnection(provider);
+      setTestResult(result);
+    } catch (err) {
+      setTestResult({ error: err.message });
+    } finally {
+      setTesting(false);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, height: 0 },
+      animate: { opacity: 1, height: "auto" },
+      exit: { opacity: 0, height: 0 },
+      transition: { duration: 0.2 },
+      className: "overflow-hidden",
+      children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-[--cyan]/20 bg-[--card] p-5 mt-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx(TrafficLights, { label: `${meta.name} Setup` }),
+          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx(XIcon, { size: 14 }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "API Key" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: showKey ? "text" : "password",
+                    value: apiKey,
+                    onChange: (e) => setApiKey(e.target.value),
+                    placeholder: config?.hasKey ? "(saved \u2014 enter new key to change)" : `${meta.keyPrefix}...`,
+                    className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowKey(!showKey),
+                    className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+                    children: showKey ? /* @__PURE__ */ jsx(EyeOffIcon, { size: 14 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 14 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: handleTest,
+                  disabled: testing || !apiKey && !config?.hasKey,
+                  className: "inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan] transition-colors disabled:opacity-50",
+                  children: [
+                    testing ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(ZapIcon, { size: 12 }),
+                    "Test"
+                  ]
+                }
+              )
+            ] }),
+            config?.hasKey && /* @__PURE__ */ jsxs("p", { className: "text-[10px] font-mono text-muted-foreground/60 mt-1", children: [
+              "Key saved: ",
+              config.apiKey
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Model" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: model,
+                onChange: (e) => setModel(e.target.value),
+                className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors appearance-none",
+                children: meta.models.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m }, m))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Max Tokens" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: maxTokens,
+                onChange: (e) => setMaxTokens(e.target.value),
+                className: "w-32 text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(TestResultBox, { result: testResult }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleSave,
+                disabled: saving,
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50",
+                children: [
+                  saving ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(CheckIcon, { size: 12 }),
+                  "Save"
+                ]
+              }
+            ),
+            !isActive && (config?.hasKey || apiKey) && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => onSetActive(provider, model),
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan] transition-colors",
+                children: "Set as Active"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground",
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function LocalSetupForm({ provider, meta, config, detected, isActive, onSave, onSetActive, onClose }) {
+  const detectedModels = detected?.models || [];
+  const [model, setModel] = useState(config?.model || detectedModels[0]?.id || "");
+  const [customModel, setCustomModel] = useState("");
+  const [baseUrl, setBaseUrl] = useState(config?.baseUrl || detected?.baseUrl || meta.defaultUrl || "");
+  const [maxTokens, setMaxTokens] = useState(config?.maxTokens || 4096);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const [models, setModels] = useState(detectedModels);
+  async function handleRefreshModels() {
+    setRefreshing(true);
+    try {
+      const fetched = await getLocalModels(baseUrl);
+      setModels(fetched);
+      if (fetched.length > 0 && !model) setModel(fetched[0].id);
+    } catch {
+    }
+    setRefreshing(false);
+  }
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const selectedModel = customModel || model;
+      await onSave(provider, {
+        model: selectedModel,
+        maxTokens: parseInt(maxTokens),
+        baseUrl,
+        apiKey: "not-needed"
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+  async function handleTest() {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await testLlmConnection(provider);
+      setTestResult(result);
+    } catch (err) {
+      setTestResult({ error: err.message });
+    } finally {
+      setTesting(false);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, height: 0 },
+      animate: { opacity: 1, height: "auto" },
+      exit: { opacity: 0, height: 0 },
+      transition: { duration: 0.2 },
+      className: "overflow-hidden",
+      children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-emerald-500/20 bg-[--card] p-5 mt-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-[10px] font-medium text-emerald-400 uppercase tracking-wider ml-1", children: [
+              meta.name,
+              " Setup"
+            ] }),
+            detected && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-1.5 py-0 text-[9px] font-mono", children: "detected" })
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx(XIcon, { size: 14 }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Base URL" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: baseUrl,
+                onChange: (e) => setBaseUrl(e.target.value),
+                placeholder: meta.defaultUrl,
+                className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-emerald-500/40 focus:ring-1 focus:ring-emerald-500/20 transition-colors"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider", children: "Model" }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: handleRefreshModels,
+                  disabled: refreshing,
+                  className: "inline-flex items-center gap-1 text-[10px] font-mono text-muted-foreground hover:text-emerald-400 transition-colors disabled:opacity-50",
+                  children: [
+                    refreshing ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 10 }) : /* @__PURE__ */ jsx(RefreshIcon, { size: 10 }),
+                    "Scan Models"
+                  ]
+                }
+              )
+            ] }),
+            models.length > 0 ? /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: model,
+                onChange: (e) => {
+                  setModel(e.target.value);
+                  setCustomModel("");
+                },
+                className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-emerald-500/40 focus:ring-1 focus:ring-emerald-500/20 transition-colors appearance-none",
+                children: models.map((m) => /* @__PURE__ */ jsxs("option", { value: m.id, children: [
+                  m.name,
+                  m.paramSize ? ` (${m.paramSize})` : "",
+                  m.family ? ` \u2014 ${m.family}` : ""
+                ] }, m.id))
+              }
+            ) : /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: customModel,
+                onChange: (e) => setCustomModel(e.target.value),
+                placeholder: "model-name (or click Scan Models)",
+                className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-emerald-500/40 focus:ring-1 focus:ring-emerald-500/20 transition-colors"
+              }
+            ),
+            models.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5 mt-2", children: [
+              models.slice(0, 8).map((m) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setModel(m.id);
+                    setCustomModel("");
+                  },
+                  className: `inline-flex items-center rounded-full px-2 py-0.5 text-[9px] font-mono border transition-colors ${model === m.id ? "bg-emerald-500/15 text-emerald-400 border-emerald-500/30" : "bg-white/[0.02] text-muted-foreground border-white/[0.06] hover:border-emerald-500/20"}`,
+                  children: m.name
+                },
+                m.id
+              )),
+              models.length > 8 && /* @__PURE__ */ jsxs("span", { className: "text-[9px] font-mono text-muted-foreground self-center", children: [
+                "+",
+                models.length - 8,
+                " more"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Max Tokens" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: maxTokens,
+                onChange: (e) => setMaxTokens(e.target.value),
+                className: "w-32 text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-emerald-500/40 focus:ring-1 focus:ring-emerald-500/20 transition-colors"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(TestResultBox, { result: testResult }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleSave,
+                disabled: saving || !model && !customModel,
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 hover:bg-emerald-500 hover:text-white transition-colors disabled:opacity-50",
+                children: [
+                  saving ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(CheckIcon, { size: 12 }),
+                  "Save"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleTest,
+                disabled: testing,
+                className: "inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-emerald-500/30 hover:text-emerald-400 transition-colors disabled:opacity-50",
+                children: [
+                  testing ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(ZapIcon, { size: 12 }),
+                  "Test"
+                ]
+              }
+            ),
+            !isActive && (model || customModel) && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => onSetActive(provider, customModel || model),
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan] transition-colors",
+                children: "Set as Active"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground",
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function CustomSetupForm({ config, isActive, onSave, onSetActive, onClose }) {
+  const [apiKey, setApiKey] = useState("");
+  const [model, setModel] = useState(config?.model || "");
+  const [baseUrl, setBaseUrl] = useState(config?.baseUrl || "");
+  const [maxTokens, setMaxTokens] = useState(config?.maxTokens || 4096);
+  const [showKey, setShowKey] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const saveConfig = { model, maxTokens: parseInt(maxTokens), baseUrl };
+      if (apiKey && !apiKey.includes("***")) saveConfig.apiKey = apiKey;
+      await onSave("custom", saveConfig);
+    } finally {
+      setSaving(false);
+    }
+  }
+  async function handleTest() {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await testLlmConnection("custom");
+      setTestResult(result);
+    } catch (err) {
+      setTestResult({ error: err.message });
+    } finally {
+      setTesting(false);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, height: 0 },
+      animate: { opacity: 1, height: "auto" },
+      exit: { opacity: 0, height: 0 },
+      transition: { duration: 0.2 },
+      className: "overflow-hidden",
+      children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-purple-500/20 bg-[--card] p-5 mt-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-purple-400 uppercase tracking-wider ml-1", children: "Custom Provider (OpenAI-Compatible)" })
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx(XIcon, { size: 14 }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Base URL" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: baseUrl,
+                onChange: (e) => setBaseUrl(e.target.value),
+                placeholder: "https://api.example.com/v1",
+                className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-purple-500/40 focus:ring-1 focus:ring-purple-500/20 transition-colors"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "API Key" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: showKey ? "text" : "password",
+                  value: apiKey,
+                  onChange: (e) => setApiKey(e.target.value),
+                  placeholder: config?.hasKey ? "(saved)" : "sk-... (or leave empty if not needed)",
+                  className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-purple-500/40 focus:ring-1 focus:ring-purple-500/20 transition-colors"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowKey(!showKey),
+                  className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+                  children: showKey ? /* @__PURE__ */ jsx(EyeOffIcon, { size: 14 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 14 })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Model" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: model,
+                onChange: (e) => setModel(e.target.value),
+                placeholder: "model-name",
+                className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-purple-500/40 focus:ring-1 focus:ring-purple-500/20 transition-colors"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Max Tokens" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: maxTokens,
+                onChange: (e) => setMaxTokens(e.target.value),
+                className: "w-32 text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-purple-500/40 focus:ring-1 focus:ring-purple-500/20 transition-colors"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(TestResultBox, { result: testResult }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleSave,
+                disabled: saving,
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20 hover:bg-purple-500 hover:text-white transition-colors disabled:opacity-50",
+                children: [
+                  saving ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(CheckIcon, { size: 12 }),
+                  " Save"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleTest,
+                disabled: testing,
+                className: "inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-purple-500/30 hover:text-purple-400 transition-colors disabled:opacity-50",
+                children: [
+                  testing ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(ZapIcon, { size: 12 }),
+                  " Test"
+                ]
+              }
+            ),
+            !isActive && model && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => onSetActive("custom", model),
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan] transition-colors",
+                children: "Set as Active"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground",
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function TestResultBox({ result }) {
+  if (!result) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-white/[0.04] bg-black/30 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-1.5 border-b border-white/[0.04]", children: [
+      /* @__PURE__ */ jsx(TrafficLights, {}),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-[9px] text-muted-foreground ml-1", children: "connection test" }),
+      result.error ? /* @__PURE__ */ jsx(XIcon, { size: 10, className: "text-[--destructive] ml-auto" }) : /* @__PURE__ */ jsx(CheckIcon, { size: 10, className: "text-[--success] ml-auto" })
+    ] }),
+    /* @__PURE__ */ jsx("pre", { className: "text-[11px] p-2.5 font-mono overflow-auto max-h-24 whitespace-pre-wrap break-words text-foreground/80", children: result.error ? `Error: ${result.error}` : `Connected. ${result.response || "OK"}` })
+  ] });
+}
+function StatsCard({ label, value, color = "cyan" }) {
+  const colors = {
+    cyan: { border: "border-[--cyan]/20", text: "text-[--cyan]" },
+    emerald: { border: "border-emerald-500/20", text: "text-emerald-400" },
+    purple: { border: "border-purple-500/20", text: "text-purple-400" },
+    default: { border: "border-white/[0.06]", text: "text-foreground" }
+  };
+  const c = colors[color] || colors.default;
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center p-3 rounded-lg border bg-[--card] ${c.border}`, children: [
+    /* @__PURE__ */ jsx("span", { className: `text-xl font-semibold font-mono ${c.text}`, children: value }),
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-[9px] text-muted-foreground uppercase tracking-wider mt-0.5", children: label })
+  ] });
+}
+function SettingsProvidersPage() {
+  const [loading, setLoading] = useState(true);
+  const [providers, setProviders] = useState({});
+  const [activeProviderInfo, setActiveProviderInfo] = useState(null);
+  const [editingProvider, setEditingProvider] = useState(null);
+  const [scanning, setScanning] = useState(false);
+  const [localDetected, setLocalDetected] = useState({});
+  const load = useCallback(async () => {
+    try {
+      const [provs, active] = await Promise.all([
+        getLlmProviders(),
+        getActiveProvider()
+      ]);
+      setProviders(provs || {});
+      setActiveProviderInfo(active || {});
+    } catch {
+    }
+    setLoading(false);
+  }, []);
+  async function handleScan() {
+    setScanning(true);
+    try {
+      const results = await scanLocalProviders();
+      const detected = {};
+      for (const r of results) {
+        detected[r.id] = r;
+      }
+      setLocalDetected(detected);
+    } catch {
+    }
+    setScanning(false);
+  }
+  useEffect(() => {
+    load();
+    handleScan();
+  }, []);
+  async function handleSave(provider, config) {
+    await saveLlmProvider(provider, config);
+    await load();
+    setEditingProvider(null);
+  }
+  async function handleSetActive(provider, model) {
+    await setActiveProvider(provider, model);
+    await load();
+    setEditingProvider(null);
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-16 animate-shimmer rounded-lg border border-white/[0.06] bg-[--card]" }, i)) });
+  }
+  const cloudCount = Object.keys(CLOUD_PROVIDERS).filter((p) => providers[p]?.hasKey).length;
+  const localCount = Object.keys(localDetected).length;
+  const cloudList = Object.keys(CLOUD_PROVIDERS);
+  const localList = Object.keys(LOCAL_PROVIDERS);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    activeProviderInfo?.provider && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: -8 },
+        animate: { opacity: 1, y: 0 },
+        className: "rounded-lg border border-[--cyan]/20 bg-[--cyan]/5 p-4 mb-6",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-[--cyan]/10 p-2", children: /* @__PURE__ */ jsx(CpuIcon, { size: 16, className: "text-[--cyan]" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider", children: "Active Provider" }),
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[--success] animate-pulse" })
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm font-mono font-medium mt-0.5", children: [
+              CLOUD_PROVIDERS[activeProviderInfo.provider]?.name || LOCAL_PROVIDERS[activeProviderInfo.provider]?.name || activeProviderInfo.provider,
+              activeProviderInfo.model && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground ml-2", children: [
+                "/ ",
+                activeProviderInfo.model
+              ] })
+            ] }),
+            activeProviderInfo.keyLoaded === false && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-mono text-amber-400 mt-1", children: "Warning: API key not loaded in process. Save the provider config or restart the server." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-right shrink-0", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-[9px] font-mono text-muted-foreground/50", children: [
+              "env: ",
+              activeProviderInfo.envProvider || "not set"
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-[9px] font-mono text-muted-foreground/50", children: [
+              "model: ",
+              activeProviderInfo.envModel || "default"
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-3 mb-6", children: [
+      /* @__PURE__ */ jsx(StatsCard, { label: "Cloud", value: cloudList.length }),
+      /* @__PURE__ */ jsx(StatsCard, { label: "Configured", value: cloudCount, color: "cyan" }),
+      /* @__PURE__ */ jsx(StatsCard, { label: "Local", value: localCount, color: "emerald" }),
+      /* @__PURE__ */ jsx(StatsCard, { label: "Active", value: activeProviderInfo?.provider ? 1 : 0, color: "purple" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-2 mb-3", children: [
+      /* @__PURE__ */ jsx(GlobeIcon, { size: 12, className: "text-[--cyan]" }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider", children: "Cloud Providers" }),
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center rounded-full bg-[--cyan]/10 px-2 py-0.5 text-[10px] font-mono font-medium text-[--cyan]", children: [
+        cloudCount,
+        "/",
+        cloudList.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mb-8", children: cloudList.map((p, i) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        ProviderCard,
+        {
+          id: p,
+          meta: CLOUD_PROVIDERS[p],
+          config: providers[p],
+          isActive: activeProviderInfo?.provider === p,
+          isLocal: false,
+          onEdit: () => setEditingProvider(editingProvider === p ? null : p),
+          index: i
+        }
+      ),
+      /* @__PURE__ */ jsx(AnimatePresence, { children: editingProvider === p && /* @__PURE__ */ jsx(
+        CloudSetupForm,
+        {
+          provider: p,
+          meta: CLOUD_PROVIDERS[p],
+          config: providers[p],
+          isActive: activeProviderInfo?.provider === p,
+          onSave: handleSave,
+          onSetActive: handleSetActive,
+          onClose: () => setEditingProvider(null)
+        }
+      ) })
+    ] }, p)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-2 mb-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(ServerIcon, { size: 12, className: "text-emerald-400" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-emerald-400 uppercase tracking-wider", children: "Local Providers" }),
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-mono font-medium text-emerald-400", children: [
+          localCount,
+          " detected"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: handleScan,
+          disabled: scanning,
+          className: "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[10px] font-mono font-medium border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/10 transition-colors disabled:opacity-50",
+          children: [
+            scanning ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 10 }) : /* @__PURE__ */ jsx(ScanIcon, { size: 10 }),
+            scanning ? "Scanning..." : "Scan Network"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mb-8", children: localList.sort((a, b) => {
+      const aD = localDetected[a] ? 1 : 0;
+      const bD = localDetected[b] ? 1 : 0;
+      return bD - aD;
+    }).map((p, i) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        ProviderCard,
+        {
+          id: p,
+          meta: LOCAL_PROVIDERS[p],
+          config: providers[p],
+          isActive: activeProviderInfo?.provider === p,
+          isLocal: true,
+          detected: localDetected[p],
+          onEdit: () => setEditingProvider(editingProvider === p ? null : p),
+          index: i
+        }
+      ),
+      /* @__PURE__ */ jsx(AnimatePresence, { children: editingProvider === p && /* @__PURE__ */ jsx(
+        LocalSetupForm,
+        {
+          provider: p,
+          meta: LOCAL_PROVIDERS[p],
+          config: providers[p],
+          detected: localDetected[p],
+          isActive: activeProviderInfo?.provider === p,
+          onSave: handleSave,
+          onSetActive: handleSetActive,
+          onClose: () => setEditingProvider(null)
+        }
+      ) })
+    ] }, p)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-2 mb-3", children: [
+      /* @__PURE__ */ jsx(WifiIcon, { size: 12, className: "text-purple-400" }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-purple-400 uppercase tracking-wider", children: "Custom Provider" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono text-muted-foreground", children: "(OpenAI-Compatible)" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(
+        ProviderCard,
+        {
+          id: "custom",
+          meta: { name: "Custom", icon: "\u2699", color: "#a78bfa" },
+          config: providers.custom,
+          isActive: activeProviderInfo?.provider === "custom",
+          isLocal: false,
+          onEdit: () => setEditingProvider(editingProvider === "custom" ? null : "custom"),
+          index: 0
+        }
+      ),
+      /* @__PURE__ */ jsx(AnimatePresence, { children: editingProvider === "custom" && /* @__PURE__ */ jsx(
+        CustomSetupForm,
+        {
+          config: providers.custom,
+          isActive: activeProviderInfo?.provider === "custom",
+          onSave: handleSave,
+          onSetActive: handleSetActive,
+          onClose: () => setEditingProvider(null)
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  SettingsProvidersPage
+};