@tradalab/lyra 2.6.0 → 3.0.0

package/dist/blocks/index.js

@@ -1,28 +1,29 @@
 "use client";
-import { Label, Combobox, ComboboxInput, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem } from '../chunk-VA6K3TP3.js';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../chunk-LZZ3UOPT.js';
+import { Label, Combobox, ComboboxInput, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem, Spinner, Alert, AlertDescription, FieldGroup, FieldSet, FieldLegend, FieldDescription, Field, FieldContent, FieldLabel, Badge, Switch, FieldSeparator, Progress } from '../chunk-DUWK53B5.js';
+import { NativeSelect, NativeSelectOption } from '../chunk-FHM6VOPQ.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../chunk-XJJQAQWJ.js';
 import { Dialog, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from '../chunk-XWGYXLIA.js';
 import '../chunk-2HDU26FC.js';
-import { Button } from '../chunk-VGOGWZCF.js';
+import { Button, Input } from '../chunk-VGOGWZCF.js';
 import { cn } from '../chunk-XH55BHUU.js';
-import * as React from 'react';
+import * as React5 from 'react';
 import { createContext, useMemo, useState, useEffect, useContext, useCallback, useId } from 'react';
 import { Slot } from 'radix-ui';
 import { FormProvider, Controller, useFormContext } from 'react-hook-form';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { ChevronRight, FolderOpen, Folder, File } from 'lucide-react';
+import { ChevronRight, CheckIcon, CopyIcon, PlusIcon, FolderOpen, Folder, File } from 'lucide-react';
 
 var Form = FormProvider;
-var FormFieldContext = React.createContext(null);
+var FormFieldContext = React5.createContext(null);
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
+  const fieldContext = React5.useContext(FormFieldContext);
+  const itemContext = React5.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
@@ -38,9 +39,9 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React.createContext(null);
+var FormItemContext = React5.createContext(null);
 function FormItem({ className, ...props }) {
-  const id = React.useId();
+  const id = React5.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormLabel({ className, ...props }) {
@@ -493,8 +494,8 @@ function TzPicker({
     search: labels?.search ?? "Search timezone",
     noMatch: labels?.noMatch ?? "No match"
   };
-  const own = React.useMemo(() => browserTz(), []);
-  const entries = React.useMemo(() => {
+  const own = React5.useMemo(() => browserTz(), []);
+  const entries = React5.useMemo(() => {
     const zones = allZones();
     const out = [];
     if (allowInherit) out.push({ tz: "", name: l.inherit, offset: "" });
@@ -557,7 +558,7 @@ function OptionPicker({
 }) {
   const t = (k) => labels?.[k] ?? FALLBACK[k];
   const placeholder = labels?.placeholder ?? FALLBACK.placeholder;
-  const entries = React.useMemo(() => {
+  const entries = React5.useMemo(() => {
     const out = [{ id: "", label: placeholder, none: true }, ...options];
     if (value !== "" && !options.some((o) => o.id === value)) {
       out.push({ id: value, label: value });
@@ -587,7 +588,720 @@ function OptionPicker({
     }
   );
 }
+var FALLBACK2 = {
+  enable: "Allow MCP clients",
+  enableHint: "Let an AI agent such as Claude Desktop or Cursor use the tools this app offers.",
+  running: "Running",
+  stopped: "Off",
+  notOffered: "This build of the app offers no MCP tools.",
+  connect: "Connect a client",
+  connectHint: "Add this to the client's MCP configuration, then restart the client.",
+  copy: "Copy",
+  copied: "Copied",
+  copyConfig: "Copy configuration",
+  tools: "Tools",
+  toolsHint: "A tool turned off is hidden from every client.",
+  asksFirst: "Asks first",
+  asksFirstHint: "You confirm every call in a dialog.",
+  clients: "Allowed programs",
+  clientsHint: "A program is added when you allow it, the first time it runs a tool.",
+  clientsEmpty: "No program allowed yet.",
+  revoke: "Remove",
+  activity: "Recent calls",
+  activityEmpty: "Calls show up here while this screen is open.",
+  ok: "OK",
+  error: "Failed",
+  denied: "Denied",
+  auditLog: "Audit log",
+  auditLogHint: "Every call is written here, with credential-like arguments hidden.",
+  retry: "Retry"
+};
+var RECENT_CALLS = 20;
+var OUTCOME_VARIANT = { ok: "secondary", error: "destructive", denied: "outline" };
+function messageOf(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+function baseName(path) {
+  return path.split(/[\\/]/).pop() || path;
+}
+function McpSettings({
+  api,
+  serverName,
+  copy,
+  labels,
+  locale,
+  className
+}) {
+  const t = { ...FALLBACK2, ...labels };
+  const id = React5.useId();
+  const [status, setStatus] = React5.useState(null);
+  const [loadError, setLoadError] = React5.useState(null);
+  const [error, setError] = React5.useState(null);
+  const [busy, setBusy] = React5.useState(false);
+  const [copied, setCopied] = React5.useState(false);
+  const [calls, setCalls] = React5.useState([]);
+  const changes = React5.useRef(0);
+  const callKey = React5.useRef(0);
+  const load = React5.useCallback(() => {
+    setLoadError(null);
+    api.status().then(setStatus, (err) => setLoadError(messageOf(err)));
+  }, [api]);
+  React5.useEffect(load, [load]);
+  React5.useEffect(() => {
+    if (!api.onCall) return;
+    return api.onCall((call) => {
+      setCalls((prev) => [{ ...call, key: ++callKey.current, at: /* @__PURE__ */ new Date() }, ...prev].slice(0, RECENT_CALLS));
+      const started = changes.current;
+      api.status().then(
+        (next) => {
+          if (changes.current === started) setStatus(next);
+        },
+        // A refresh nobody asked for keeps the last answer on screen rather than raising an error.
+        () => {
+        }
+      );
+    });
+  }, [api]);
+  React5.useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 2e3);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  const change = async (action) => {
+    changes.current++;
+    setBusy(true);
+    setError(null);
+    try {
+      setStatus(await action());
+    } catch (err) {
+      setError(messageOf(err));
+    } finally {
+      changes.current++;
+      setBusy(false);
+    }
+  };
+  if (!status) {
+    if (!loadError) return /* @__PURE__ */ jsx(Spinner, { className });
+    return /* @__PURE__ */ jsx(Alert, { variant: "destructive", className, children: /* @__PURE__ */ jsxs(AlertDescription, { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("span", { children: loadError }),
+      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", onClick: load, children: t.retry })
+    ] }) });
+  }
+  if (!status.offered) {
+    return /* @__PURE__ */ jsx(FieldGroup, { className, children: /* @__PURE__ */ jsxs(FieldSet, { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx(FieldLegend, { children: t.enable }),
+      /* @__PURE__ */ jsx(FieldDescription, { children: t.notOffered })
+    ] }) });
+  }
+  const snippet = JSON.stringify(
+    { mcpServers: { [serverName]: { command: status.client.command, args: status.client.args } } },
+    null,
+    2
+  );
+  const day = (iso) => {
+    const d = new Date(iso);
+    return Number.isNaN(d.getTime()) ? iso : d.toLocaleDateString(locale);
+  };
+  return (
+    // min-w-0 on every FieldSet: a fieldset is min-content wide by default, so one long path or
+    // config line would widen the whole screen instead of truncating or scrolling.
+    /* @__PURE__ */ jsxs(FieldGroup, { className, children: [
+      error ? /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }) : null,
+      /* @__PURE__ */ jsx(FieldSet, { className: "min-w-0", children: /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", children: [
+        /* @__PURE__ */ jsxs(FieldContent, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: `${id}-enable`, className: "text-sm", children: t.enable }),
+            /* @__PURE__ */ jsx(Badge, { variant: "outline", children: status.running ? t.running : t.stopped })
+          ] }),
+          /* @__PURE__ */ jsx(FieldDescription, { children: t.enableHint })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id: `${id}-enable`,
+            checked: status.enabled,
+            disabled: busy,
+            onCheckedChange: (on) => void change(() => api.enable(on))
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(FieldSeparator, {}),
+      /* @__PURE__ */ jsxs(FieldSet, { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(FieldLegend, { children: t.connect }),
+        /* @__PURE__ */ jsx(FieldDescription, { children: t.connectHint }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("pre", { className: "bg-muted/50 overflow-x-auto border px-3 py-2 font-mono text-xs leading-relaxed", children: snippet }),
+          copy ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "xs",
+              variant: "outline",
+              className: "bg-background absolute top-2 right-2",
+              "aria-label": t.copyConfig,
+              onClick: () => void copy(snippet).then(
+                () => setCopied(true),
+                (err) => setError(messageOf(err))
+              ),
+              children: [
+                copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}),
+                copied ? t.copied : t.copy
+              ]
+            }
+          ) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(FieldSeparator, {}),
+      /* @__PURE__ */ jsxs(FieldSet, { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(FieldLegend, { children: t.tools }),
+        /* @__PURE__ */ jsx(FieldDescription, { children: t.toolsHint }),
+        status.tools.map((tool) => /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", "data-disabled": !status.enabled, children: [
+          /* @__PURE__ */ jsxs(FieldContent, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(FieldLabel, { htmlFor: `${id}-tool-${tool.name}`, className: "font-mono text-xs", children: tool.name }),
+              tool.destructive ? /* @__PURE__ */ jsx(Badge, { variant: "destructive", title: t.asksFirstHint, children: t.asksFirst }) : null
+            ] }),
+            /* @__PURE__ */ jsx(FieldDescription, { children: tool.description })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              id: `${id}-tool-${tool.name}`,
+              size: "sm",
+              checked: tool.enabled,
+              disabled: busy || !status.enabled,
+              onCheckedChange: (on) => void change(() => api.setTool(tool.name, on))
+            }
+          )
+        ] }, tool.name))
+      ] }),
+      /* @__PURE__ */ jsx(FieldSeparator, {}),
+      /* @__PURE__ */ jsxs(FieldSet, { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(FieldLegend, { children: t.clients }),
+        /* @__PURE__ */ jsx(FieldDescription, { children: t.clientsHint }),
+        status.clients.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: t.clientsEmpty }) : /* @__PURE__ */ jsx("ul", { className: "divide-y border", children: status.clients.map((client) => {
+          const who = client.name || baseName(client.path);
+          return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 px-3 py-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm", children: who }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-muted-foreground truncate text-left font-mono text-xs [direction:rtl]",
+                  title: client.path,
+                  children: /* @__PURE__ */ jsx("bdi", { children: client.path })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs whitespace-nowrap", children: day(client.approved_at) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "xs",
+                variant: "ghost",
+                "aria-label": `${t.revoke} ${who}`,
+                disabled: busy,
+                onClick: () => void change(() => api.revokeClient(client.path)),
+                children: t.revoke
+              }
+            )
+          ] }, client.path);
+        }) })
+      ] }),
+      api.onCall ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(FieldSeparator, {}),
+        /* @__PURE__ */ jsxs(FieldSet, { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx(FieldLegend, { children: t.activity }),
+          calls.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: t.activityEmpty }) : /* @__PURE__ */ jsx("ul", { "aria-label": t.activity, className: "divide-y border", children: calls.map((call) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 px-3 py-1.5 text-xs", title: call.error, children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground tabular-nums", children: call.at.toLocaleTimeString(locale) }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono", children: call.tool }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground max-w-40 truncate", title: call.client_path, children: call.client || baseName(call.client_path) }),
+            /* @__PURE__ */ jsx(Badge, { variant: OUTCOME_VARIANT[call.outcome], children: t[call.outcome] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground w-14 text-right tabular-nums", children: [
+              call.ms,
+              " ms"
+            ] })
+          ] }, call.key)) })
+        ] })
+      ] }) : null,
+      /* @__PURE__ */ jsx(FieldSeparator, {}),
+      /* @__PURE__ */ jsxs(FieldSet, { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(FieldLegend, { children: t.auditLog }),
+        /* @__PURE__ */ jsx(FieldDescription, { children: t.auditLogHint }),
+        /* @__PURE__ */ jsx(
+          "code",
+          {
+            className: "bg-muted/50 block truncate border px-3 py-2 text-left font-mono text-xs [direction:rtl]",
+            title: status.audit_log,
+            children: /* @__PURE__ */ jsx("bdi", { children: status.audit_log })
+          }
+        )
+      ] })
+    ] })
+  );
+}
+var FALLBACK3 = {
+  slots: "Models for this app",
+  slotsHint: "Each feature uses the provider and model chosen here.",
+  notSet: "Not set",
+  model: "Model",
+  modelHint: "Type a name or pick one the provider has.",
+  localOnly: "This machine only",
+  localOnlyHint: "What this feature reads never leaves the computer.",
+  download: "Download",
+  notDownloaded: "Not on this computer yet",
+  cancel: "Cancel",
+  providers: "Providers",
+  providersHint: "Services and programs that run models.",
+  providersEmpty: "No provider yet.",
+  add: "Add provider",
+  edit: "Edit",
+  remove: "Remove",
+  removeConfirm: "Remove",
+  keep: "Keep",
+  byApp: "run by the app",
+  thisMachine: "this machine",
+  remote: "remote",
+  keySaved: "key saved",
+  driver: "Type",
+  id: "Name",
+  idHint: "Lowercase letters, digits, dot, dash and underscore.",
+  save: "Save",
+  keyKeep: "Saved; leave empty to keep it",
+  keyRemove: "Remove key",
+  running: "Running on this computer",
+  addFound: "Add",
+  retry: "Retry"
+};
+var CAPABILITY = {
+  chat: "chat",
+  embed: "embeddings",
+  vision: "vision",
+  audio: "audio",
+  tools: "tools",
+  transcribe: "speech to text"
+};
+function messageOf2(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+function hostOf(url) {
+  if (!url) return "";
+  try {
+    const u = new URL(url);
+    return u.host + (u.pathname === "/" ? "" : u.pathname);
+  } catch {
+    return url;
+  }
+}
+function sizeOf(bytes) {
+  if (bytes >= 1 << 30) return `${(bytes / (1 << 30)).toFixed(1)} GB`;
+  if (bytes >= 1 << 20) return `${Math.round(bytes / (1 << 20))} MB`;
+  return `${Math.ceil(bytes / 1024)} KB`;
+}
+function serves(slot, p) {
+  return slot.needs.every((c) => p.capabilities.includes(c)) && (!slot.local_only || p.local);
+}
+var pullKey = (provider, model) => `${provider}/${model}`;
+function LlmSettings({
+  api,
+  labels,
+  className
+}) {
+  const t = { ...FALLBACK3, ...labels };
+  const cap = (c) => labels?.capabilities?.[c] ?? CAPABILITY[c] ?? c;
+  const id = React5.useId();
+  const [state, setState] = React5.useState(null);
+  const [drivers, setDrivers] = React5.useState([]);
+  const [found, setFound] = React5.useState([]);
+  const [loadError, setLoadError] = React5.useState(null);
+  const [error, setError] = React5.useState(null);
+  const [busy, setBusy] = React5.useState(false);
+  const [draft, setDraft] = React5.useState(null);
+  const [draftError, setDraftError] = React5.useState(null);
+  const [removing, setRemoving] = React5.useState(null);
+  const [models, setModels] = React5.useState({});
+  const [typed, setTyped] = React5.useState({});
+  const [pulls, setPulls] = React5.useState({});
+  const load = React5.useCallback(() => {
+    setLoadError(null);
+    Promise.all([api.state(), api.drivers()]).then(
+      ([s, d]) => {
+        setState(s);
+        setDrivers(d);
+      },
+      (err) => setLoadError(messageOf2(err))
+    );
+    api.detect?.().then(setFound, () => {
+    });
+  }, [api]);
+  React5.useEffect(load, [load]);
+  React5.useEffect(() => {
+    if (!api.onPull) return;
+    return api.onPull((p) => setPulls((prev) => ({ ...prev, [pullKey(p.provider, p.model)]: p })));
+  }, [api]);
+  const listModels = React5.useCallback(
+    (provider2) => {
+      api.models(provider2).then(
+        (ms) => setModels((prev) => ({ ...prev, [provider2]: ms })),
+        // A provider that cannot list its models still takes a typed name.
+        () => setModels((prev) => ({ ...prev, [provider2]: [] }))
+      );
+    },
+    [api]
+  );
+  const bound = React5.useMemo(() => new Set((state?.slots ?? []).map((s) => s.provider).filter(Boolean)), [state]);
+  React5.useEffect(() => {
+    for (const p of bound) if (!(p in models)) listModels(p);
+  }, [bound, models, listModels]);
+  const change = async (action) => {
+    setBusy(true);
+    setError(null);
+    try {
+      setState(await action());
+    } catch (err) {
+      setError(messageOf2(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  if (!state) {
+    if (!loadError) return /* @__PURE__ */ jsx(Spinner, { className });
+    return /* @__PURE__ */ jsx(Alert, { variant: "destructive", className, children: /* @__PURE__ */ jsxs(AlertDescription, { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("span", { children: loadError }),
+      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", onClick: load, children: t.retry })
+    ] }) });
+  }
+  const provider = (pid) => state.providers.find((p) => p.id === pid);
+  const saveDraft = async () => {
+    if (!draft) return;
+    const d = drivers.find((x) => x.name === draft.driver);
+    const values = {};
+    const secrets = {};
+    for (const f of d?.fields ?? []) {
+      if (f.kind !== "secret") {
+        if (draft.values[f.key]) values[f.key] = draft.values[f.key];
+      } else if (f.key in draft.secrets) {
+        secrets[f.key] = draft.secrets[f.key];
+      }
+    }
+    setBusy(true);
+    setDraftError(null);
+    try {
+      setState(await api.saveProvider({ id: draft.id, driver: draft.driver, values, secrets }));
+      setModels((prev) => {
+        const next = { ...prev };
+        delete next[draft.id];
+        return next;
+      });
+      setDraft(null);
+    } catch (err) {
+      setDraftError(messageOf2(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const startDraft = (next) => {
+    setDraft(next);
+    setDraftError(null);
+    setRemoving(null);
+  };
+  const newDraft = (driver, values = {}, name = driver) => {
+    const taken = new Set(state.providers.map((p) => p.id));
+    let pid = name;
+    for (let i = 2; taken.has(pid); i++) pid = `${name}-${i}`;
+    return { driver, id: pid, values, secrets: {} };
+  };
+  const form = (d) => {
+    const spec = drivers.find((x) => x.name === d.driver);
+    const set = (patch) => setDraft({ ...d, ...patch });
+    return /* @__PURE__ */ jsxs("div", { className: "bg-muted/30 flex flex-col gap-3 border px-3 py-3", "data-testid": "provider-form", children: [
+      draftError ? /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: draftError }) }) : null,
+      d.existing ? null : /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: `${id}-driver`, children: t.driver }),
+          /* @__PURE__ */ jsx(NativeSelect, { id: `${id}-driver`, value: d.driver, onChange: (e) => set(newDraft(e.target.value)), children: drivers.map((x) => /* @__PURE__ */ jsx(NativeSelectOption, { value: x.name, children: x.name }, x.name)) })
+        ] }),
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: `${id}-id`, children: t.id }),
+          /* @__PURE__ */ jsx(Input, { id: `${id}-id`, value: d.id, spellCheck: false, onChange: (e) => set({ id: e.target.value.toLowerCase() }) }),
+          /* @__PURE__ */ jsx(FieldDescription, { children: t.idHint })
+        ] })
+      ] }),
+      spec?.fields.map((f) => {
+        const fid = `${id}-f-${f.key}`;
+        if (f.kind === "bool") {
+          const on = (d.values[f.key] ?? f.default ?? "false") === "true";
+          return /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", children: [
+            /* @__PURE__ */ jsxs(FieldContent, { children: [
+              /* @__PURE__ */ jsx(FieldLabel, { htmlFor: fid, children: f.label }),
+              f.description ? /* @__PURE__ */ jsx(FieldDescription, { children: f.description }) : null
+            ] }),
+            /* @__PURE__ */ jsx(Switch, { id: fid, size: "sm", checked: on, onCheckedChange: (v) => set({ values: { ...d.values, [f.key]: v ? "true" : "false" } }) })
+          ] }, f.key);
+        }
+        if (f.kind === "secret") {
+          const saved = d.existing?.secrets.includes(f.key) ?? false;
+          const cleared = d.secrets[f.key] === "" && saved;
+          return /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: fid, children: f.label }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: fid,
+                  type: "password",
+                  autoComplete: "off",
+                  placeholder: saved && !cleared ? t.keyKeep : void 0,
+                  value: d.secrets[f.key] ?? "",
+                  onChange: (e) => {
+                    const secrets = { ...d.secrets, [f.key]: e.target.value };
+                    if (e.target.value === "" && !cleared) delete secrets[f.key];
+                    set({ secrets });
+                  }
+                }
+              ),
+              saved && !cleared ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => set({ secrets: { ...d.secrets, [f.key]: "" } }), children: t.keyRemove }) : null
+            ] }),
+            f.description ? /* @__PURE__ */ jsx(FieldDescription, { children: f.description }) : null
+          ] }, f.key);
+        }
+        return /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: fid, children: f.label }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: fid,
+              type: f.kind === "url" ? "url" : "text",
+              spellCheck: false,
+              placeholder: f.default,
+              required: f.required,
+              value: d.values[f.key] ?? "",
+              onChange: (e) => set({ values: { ...d.values, [f.key]: e.target.value } })
+            }
+          ),
+          f.description ? /* @__PURE__ */ jsx(FieldDescription, { children: f.description }) : null
+        ] }, f.key);
+      }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", disabled: busy, onClick: () => setDraft(null), children: t.cancel }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", disabled: busy || !d.id, onClick: () => void saveDraft(), children: t.save })
+      ] })
+    ] });
+  };
+  const unused = found.filter((f) => !state.providers.some((p) => p.values.base_url === f.base_url));
+  return (
+    // min-w-0 on every FieldSet: a fieldset is min-content wide by default, so one long URL
+    // would widen the whole screen instead of truncating.
+    /* @__PURE__ */ jsxs(FieldGroup, { className, children: [
+      error ? /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }) : null,
+      /* @__PURE__ */ jsxs(FieldSet, { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(FieldLegend, { children: t.slots }),
+        /* @__PURE__ */ jsx(FieldDescription, { children: t.slotsHint }),
+        /* @__PURE__ */ jsx("ul", { className: "divide-y border", children: state.slots.map((slot) => {
+          const current = provider(slot.provider);
+          const choices = state.providers.filter((p) => p.id === slot.provider || serves(slot, p));
+          const known = slot.provider ? models[slot.provider] : void 0;
+          const draftModel = typed[slot.name] ?? slot.model ?? "";
+          const chosen = slot.model ?? "";
+          const pull = current ? pulls[pullKey(current.id, chosen)] : void 0;
+          const pulling = pull !== void 0;
+          const missing = known !== void 0 && chosen !== "" && !known.some((m) => m.id === chosen);
+          const commit = () => {
+            if (!slot.provider || draftModel === (slot.model ?? "")) return;
+            void change(() => api.bind(slot.name, slot.provider, draftModel));
+          };
+          return /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-2 px-3 py-3", "data-testid": `slot-${slot.name}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start gap-x-6 gap-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-40 flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: slot.label }),
+                  slot.local_only ? /* @__PURE__ */ jsx(Badge, { variant: "outline", title: t.localOnlyHint, children: t.localOnly }) : null
+                ] }),
+                slot.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: slot.description }) : null
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex w-full gap-2 sm:w-auto", children: [
+                /* @__PURE__ */ jsxs(
+                  NativeSelect,
+                  {
+                    "aria-label": `${slot.label}: ${t.providers}`,
+                    className: "sm:w-40",
+                    value: slot.provider ?? "",
+                    disabled: busy,
+                    onChange: (e) => {
+                      const next = e.target.value;
+                      setTyped((prev) => {
+                        const rest = { ...prev };
+                        delete rest[slot.name];
+                        return rest;
+                      });
+                      void change(() => next ? api.bind(slot.name, next, "") : api.unbind(slot.name));
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(NativeSelectOption, { value: "", children: t.notSet }),
+                      choices.map((p) => /* @__PURE__ */ jsx(NativeSelectOption, { value: p.id, children: p.id }, p.id))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    "aria-label": `${slot.label}: ${t.model}`,
+                    title: t.modelHint,
+                    className: "sm:w-56 [&::-webkit-calendar-picker-indicator]:opacity-30",
+                    list: `${id}-models-${slot.name}`,
+                    spellCheck: false,
+                    placeholder: t.model,
+                    disabled: busy || !slot.provider,
+                    value: draftModel,
+                    onChange: (e) => setTyped((prev) => ({ ...prev, [slot.name]: e.target.value })),
+                    onBlur: commit,
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") commit();
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("datalist", { id: `${id}-models-${slot.name}`, children: known?.map((m) => /* @__PURE__ */ jsx("option", { value: m.id, children: [m.parameter_size, m.quantization, m.size ? sizeOf(m.size) : ""].filter(Boolean).join(" \xB7 ") }, m.id)) })
+              ] })
+            ] }),
+            slot.error ? /* @__PURE__ */ jsx("p", { className: "text-destructive text-xs", children: slot.error }) : null,
+            current?.manages && api.pull && missing && !pulling ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: t.notDownloaded }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "xs",
+                  variant: "outline",
+                  disabled: busy,
+                  onClick: () => {
+                    const key = pullKey(current.id, chosen);
+                    const end = () => setPulls((prev) => {
+                      const rest = { ...prev };
+                      delete rest[key];
+                      return rest;
+                    });
+                    setPulls((prev) => ({ ...prev, [key]: { provider: current.id, model: chosen, status: "", done: 0, total: 0 } }));
+                    api.pull?.(current.id, chosen).then(
+                      (done) => {
+                        end();
+                        if (done) listModels(current.id);
+                      },
+                      (err) => {
+                        end();
+                        setError(messageOf2(err));
+                      }
+                    );
+                  },
+                  children: [
+                    t.download,
+                    " ",
+                    chosen
+                  ]
+                }
+              )
+            ] }) : null,
+            pulling && current ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", "data-testid": `pull-${slot.name}`, children: [
+              /* @__PURE__ */ jsx(Progress, { className: "flex-1", value: pull.total > 0 ? pull.done / pull.total * 100 : 0 }),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-28 text-right text-xs tabular-nums", children: pull.total > 0 ? `${sizeOf(pull.done)} / ${sizeOf(pull.total)}` : pull.status }),
+              api.cancelPull ? /* @__PURE__ */ jsx(Button, { size: "xs", variant: "ghost", onClick: () => void api.cancelPull?.(current.id, pull.model), children: t.cancel }) : null
+            ] }) : null
+          ] }, slot.name);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(FieldSeparator, {}),
+      /* @__PURE__ */ jsxs(FieldSet, { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(FieldLegend, { children: t.providers }),
+            /* @__PURE__ */ jsx(FieldDescription, { children: t.providersHint })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              variant: "outline",
+              disabled: busy || drivers.length === 0,
+              onClick: () => startDraft(newDraft(drivers[0]?.name ?? "")),
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon, {}),
+                t.add
+              ]
+            }
+          )
+        ] }),
+        draft && !draft.existing ? form(draft) : null,
+        state.providers.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: t.providersEmpty }) : /* @__PURE__ */ jsx("ul", { className: "divide-y border", children: state.providers.map(
+          (p) => draft?.existing?.id === p.id ? /* @__PURE__ */ jsx("li", { className: "p-0", children: form(draft) }, p.id) : /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 px-3 py-2", "data-testid": `provider-${p.id}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium", children: p.id }),
+                p.driver !== p.id ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: p.driver ?? t.byApp }) : null
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex flex-wrap items-center gap-x-2 text-xs [&>*:not(:first-child)]:before:mr-2 [&>*:not(:first-child)]:before:content-['\xB7']", children: [
+                p.values.base_url ? /* @__PURE__ */ jsx("span", { className: "max-w-64 truncate font-mono", title: p.values.base_url, children: hostOf(p.values.base_url) }) : null,
+                /* @__PURE__ */ jsx("span", { children: p.local ? t.thisMachine : t.remote }),
+                p.secrets.length > 0 ? /* @__PURE__ */ jsx("span", { children: t.keySaved }) : null,
+                p.capabilities.length > 0 ? /* @__PURE__ */ jsx("span", { children: p.capabilities.map(cap).join(", ") }) : null
+              ] }),
+              p.error ? /* @__PURE__ */ jsx("p", { className: "text-destructive text-xs", children: p.error }) : null
+            ] }),
+            p.editable ? removing === p.id ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { size: "xs", variant: "ghost", onClick: () => setRemoving(null), children: t.keep }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "xs",
+                  variant: "destructive",
+                  disabled: busy,
+                  onClick: () => {
+                    setRemoving(null);
+                    void change(() => api.deleteProvider(p.id));
+                  },
+                  children: [
+                    t.removeConfirm,
+                    " ",
+                    p.id
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "xs",
+                  variant: "ghost",
+                  "aria-label": `${t.edit} ${p.id}`,
+                  disabled: busy,
+                  onClick: () => startDraft({ existing: p, driver: p.driver ?? "", id: p.id, values: { ...p.values }, secrets: {} }),
+                  children: t.edit
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { size: "xs", variant: "ghost", "aria-label": `${t.remove} ${p.id}`, disabled: busy, onClick: () => setRemoving(p.id), children: t.remove })
+            ] }) : null
+          ] }, p.id)
+        ) }),
+        unused.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: t.running }),
+          /* @__PURE__ */ jsx("ul", { className: "divide-y border border-dashed", children: unused.map((f) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm", children: f.name }),
+            f.version ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: f.version }) : null,
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground min-w-0 flex-1 truncate font-mono text-xs", children: f.base_url }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "xs",
+                variant: "outline",
+                "aria-label": `${t.addFound} ${f.name}`,
+                disabled: busy || !drivers.some((d) => d.name === f.driver),
+                onClick: () => startDraft(newDraft(f.driver, { base_url: f.base_url }, f.name)),
+                children: t.addFound
+              }
+            )
+          ] }, f.base_url)) })
+        ] }) : null
+      ] })
+    ] })
+  );
+}
 
-export { ConfirmContext, ConfirmDialog, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, OptionPicker, Panel, PanelCard, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, TzPicker, useConfirm, useFormField };
+export { ConfirmContext, ConfirmDialog, ConfirmProvider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, LlmSettings, McpSettings, OptionPicker, Panel, PanelCard, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, TzPicker, useConfirm, useFormField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map