npm - @harbinger-ai/harbinger - Versions diffs - 0.1.3 → 0.1.5 - Mend

@harbinger-ai/harbinger 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/lib/bounty/actions.js +45 -0
package/lib/chat/actions.js +501 -20
package/lib/chat/components/agents-page.js +942 -159
package/lib/chat/components/agents-page.jsx +907 -233
package/lib/chat/components/icons.js +105 -0
package/lib/chat/components/icons.jsx +129 -0
package/lib/chat/components/page-layout.js +41 -2
package/lib/chat/components/page-layout.jsx +40 -2
package/lib/chat/components/settings-providers-page.js +647 -112
package/lib/chat/components/settings-providers-page.jsx +641 -134
package/lib/chat/components/targets-page.js +554 -96
package/lib/chat/components/targets-page.jsx +464 -114
package/package.json +1 -1

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

@@ -1,65 +1,121 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { CpuIcon, CheckIcon, SpinnerIcon, EyeIcon, EyeOffIcon, XIcon } from "./icons.js";
+import {
+  CpuIcon,
+  CheckIcon,
+  SpinnerIcon,
+  EyeIcon,
+  EyeOffIcon,
+  XIcon,
+  RefreshIcon,
+  WifiIcon,
+  ServerIcon,
+  ScanIcon,
+  GlobeIcon,
+  ZapIcon
+} from "./icons.js";
 import {
   getLlmProviders,
   saveLlmProvider,
   setActiveProvider,
   testLlmConnection,
-  getActiveProvider
+  getActiveProvider,
+  scanLocalProviders,
+  getLocalModels
 } from "../actions.js";
-const PROVIDER_MODELS = {
-  anthropic: ["claude-sonnet-4-20250514", "claude-opus-4-20250514", "claude-haiku-4-5-20251001", "claude-3-5-sonnet-20241022"],
-  openai: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "o1", "o1-mini", "o3-mini"],
-  google: ["gemini-2.5-pro", "gemini-2.5-flash", "gemini-2.0-flash"],
-  custom: []
+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 PROVIDER_META = {
-  anthropic: { name: "Anthropic", keyPrefix: "sk-ant-", keyEnv: "ANTHROPIC_API_KEY" },
-  openai: { name: "OpenAI", keyPrefix: "sk-", keyEnv: "OPENAI_API_KEY" },
-  google: { name: "Google", keyPrefix: "AI", keyEnv: "GOOGLE_API_KEY" },
-  custom: { name: "Custom", keyPrefix: "", keyEnv: "CUSTOM_API_KEY" }
+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 ProviderCard({ provider, config, isActive, onEdit, index }) {
-  const meta = PROVIDER_META[provider];
-  const hasKey = !!config?.apiKey;
+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.05 },
+      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-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", 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("div", { className: "shrink-0 rounded-md bg-[--cyan]/10 p-2", children: /* @__PURE__ */ jsx(CpuIcon, { size: 16, className: "text-[--cyan]" }) }),
+      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__ */ jsx("p", { className: "text-sm font-mono font-medium", children: meta.name }),
-          config?.model && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-mono text-muted-foreground mt-0.5 truncate", children: config.model })
+          /* @__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: [
-          /* @__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" }),
+          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 ProviderSetupForm({ provider, config, isActive, onSave, onSetActive, onClose }) {
-  const meta = PROVIDER_META[provider];
-  const models = PROVIDER_MODELS[provider];
-  const [apiKey, setApiKey] = useState(config?.apiKey || "");
-  const [model, setModel] = useState(config?.model || models[0] || "");
+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 [baseUrl, setBaseUrl] = useState(config?.baseUrl || "");
   const [showKey, setShowKey] = useState(false);
   const [saving, setSaving] = useState(false);
   const [testing, setTesting] = useState(false);
@@ -67,7 +123,11 @@ function ProviderSetupForm({ provider, config, isActive, onSave, onSetActive, on
   async function handleSave() {
     setSaving(true);
     try {
-      await onSave(provider, { apiKey, model, maxTokens: parseInt(maxTokens), baseUrl: baseUrl || void 0 });
+      const saveConfig = { model, maxTokens: parseInt(maxTokens) };
+      if (apiKey && !apiKey.includes("***")) {
+        saveConfig.apiKey = apiKey;
+      }
+      await onSave(provider, saveConfig);
     } finally {
       setSaving(false);
     }
@@ -84,10 +144,6 @@ function ProviderSetupForm({ provider, config, isActive, onSave, onSetActive, on
       setTesting(false);
     }
   }
-  async function handleSetActive() {
-    await onSetActive(provider, model);
-  }
-  const maskedKey = apiKey ? apiKey.slice(0, 8) + "\u2022".repeat(Math.max(0, apiKey.length - 12)) + apiKey.slice(-4) : "";
   return /* @__PURE__ */ jsx(
     motion.div,
     {
@@ -96,19 +152,9 @@ function ProviderSetupForm({ provider, config, isActive, onSave, onSetActive, on
       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-3", children: [
+      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__ */ 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-[--cyan] uppercase tracking-wider", children: [
-              meta.name,
-              " Setup"
-            ] })
-          ] }),
+          /* @__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: [
@@ -122,7 +168,7 @@ function ProviderSetupForm({ provider, config, isActive, onSave, onSetActive, on
                     type: showKey ? "text" : "password",
                     value: apiKey,
                     onChange: (e) => setApiKey(e.target.value),
-                    placeholder: meta.keyPrefix + "...",
+                    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"
                   }
                 ),
@@ -136,38 +182,230 @@ function ProviderSetupForm({ provider, config, isActive, onSave, onSetActive, on
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(
                 "button",
                 {
                   onClick: handleTest,
-                  disabled: testing || !apiKey,
+                  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 }) : "Test"
+                  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" }),
-            models.length > 0 ? /* @__PURE__ */ jsx(
+            /* @__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: models.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m }, m))
+                children: meta.models.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m }, m))
               }
-            ) : /* @__PURE__ */ jsx(
+            )
+          ] }),
+          /* @__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: 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-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+                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(
@@ -176,11 +414,111 @@ function ProviderSetupForm({ provider, config, isActive, onSave, onSetActive, on
                 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"
+                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)" })
           ] }),
-          provider === "custom" && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__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",
@@ -189,39 +527,89 @@ function ProviderSetupForm({ provider, config, isActive, onSave, onSetActive, on
                 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-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+                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"
               }
             )
           ] }),
-          testResult && /* @__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__ */ 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-[9px] text-muted-foreground ml-1", children: "connection test" }),
-              testResult.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: testResult.error ? `Error: ${testResult.error}` : `Connected. Response: ${testResult.response || "OK"}` })
+          /* @__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 || !apiKey,
-                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",
+                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"
+                  " 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 && apiKey && /* @__PURE__ */ jsx(
+            !isActive && model && /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: handleSetActive,
+                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"
               }
@@ -240,10 +628,28 @@ function ProviderSetupForm({ provider, config, isActive, onSave, onSetActive, on
     }
   );
 }
-function StatsCard({ label, value, active }) {
-  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center p-4 rounded-lg border bg-[--card] ${active ? "border-[--cyan]/20" : "border-white/[0.06]"}`, children: [
-    /* @__PURE__ */ jsx("span", { className: `text-2xl font-semibold font-mono ${active ? "text-[--cyan]" : "text-foreground"}`, children: value }),
-    /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground uppercase tracking-wider mt-1", children: label })
+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() {
@@ -251,7 +657,9 @@ function SettingsProvidersPage() {
   const [providers, setProviders] = useState({});
   const [activeProviderInfo, setActiveProviderInfo] = useState(null);
   const [editingProvider, setEditingProvider] = useState(null);
-  async function load() {
+  const [scanning, setScanning] = useState(false);
+  const [localDetected, setLocalDetected] = useState({});
+  const load = useCallback(async () => {
     try {
       const [provs, active] = await Promise.all([
         getLlmProviders(),
@@ -262,9 +670,23 @@ function SettingsProvidersPage() {
     } 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);
@@ -279,57 +701,170 @@ function SettingsProvidersPage() {
   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 configuredCount = Object.values(providers).filter((p) => p?.apiKey).length;
-  const providerList = ["anthropic", "openai", "google", "custom"];
+  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("div", { 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: [
-          PROVIDER_META[activeProviderInfo.provider]?.name || activeProviderInfo.provider,
-          activeProviderInfo.model && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground ml-2", children: [
-            "/ ",
-            activeProviderInfo.model
+    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-3 gap-3 mb-6", children: [
-      /* @__PURE__ */ jsx(StatsCard, { label: "Providers", value: providerList.length }),
-      /* @__PURE__ */ jsx(StatsCard, { label: "Configured", value: configuredCount }),
-      /* @__PURE__ */ jsx(StatsCard, { label: "Active", value: activeProviderInfo?.provider ? 1 : 0, active: true })
+      }
+    ),
+    /* @__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-4", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider", children: "Configured Providers" }),
-      /* @__PURE__ */ jsx("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: configuredCount })
+    /* @__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-3", children: providerList.map((p, i) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__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(
-        ProviderSetupForm,
+        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)) })
+    ] }, 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 {