@datatechsolutions/ui 2.11.81 → 2.11.83

package/dist/platform/pages/index.mjs

@@ -0,0 +1,1777 @@
+"use client";
+import { defaultRuleForm, RuleForm } from '../../chunk-UVGMKHWH.mjs';
+import '../../chunk-JB6RNAD2.mjs';
+import '../../chunk-53SRKVKQ.mjs';
+import '../../chunk-J3OYJ44D.mjs';
+import { HeroSection, CreateActionButton, EntityCard, InlineForm, FormSelect, Button, GlassModal, FormGrid, FormInput, PageLoadingState, PageEmptyState, Badge, ManagementPageLayout, FormTextarea } from '../../chunk-LLFU42KC.mjs';
+import '../../chunk-7VJ7CMMT.mjs';
+import '../../chunk-QWG2FMUN.mjs';
+import '../../chunk-D2JF6C3E.mjs';
+import '../../chunk-OZNTQROP.mjs';
+import '../../chunk-WNCPAWLC.mjs';
+import { useState, useMemo } from 'react';
+import { CircleStackIcon, ServerStackIcon, CloudIcon, ClockIcon, ShareIcon, KeyIcon, MagnifyingGlassIcon, UserGroupIcon, CubeTransparentIcon, CpuChipIcon, ChatBubbleLeftEllipsisIcon, WrenchScrewdriverIcon, AdjustmentsHorizontalIcon, ArrowLeftIcon, CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/outline';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var ROLE_OPTIONS = [
+  { value: "admin", label: "Admin" },
+  { value: "manager", label: "Manager" },
+  { value: "analyst", label: "Analyst" },
+  { value: "viewer", label: "Viewer" }
+];
+function UsersPageView({ labels, users, onCreateUser, onUpdateRole }) {
+  const [createOpen, setCreateOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(
+      HeroSection,
+      {
+        icon: /* @__PURE__ */ jsx(UserGroupIcon, { className: "h-5 w-5" }),
+        label: labels.title,
+        title: labels.title,
+        subtitle: labels.subtitle,
+        gradient: "from-violet-500 to-indigo-600",
+        toolbar: /* @__PURE__ */ jsx(
+          CreateActionButton,
+          {
+            mode: "desktop",
+            label: labels.create,
+            onClick: () => setCreateOpen(true),
+            accent: "violet"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CreateActionButton,
+      {
+        mode: "mobile",
+        label: labels.create,
+        onClick: () => setCreateOpen(true),
+        accent: "violet"
+      }
+    ),
+    /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100", children: labels.list }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: users.map((user) => /* @__PURE__ */ jsx(
+        EntityCard,
+        {
+          accentGradient: "from-violet-500 to-indigo-700",
+          icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-violet-500/10 text-violet-600 dark:bg-violet-500/20 dark:text-violet-400", children: /* @__PURE__ */ jsx(UserGroupIcon, { className: "h-6 w-6" }) }),
+          title: user.name,
+          subtitle: user.email,
+          status: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold ${user.active ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300" : "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300"}`,
+              children: user.active ? labels.statusActive : labels.statusInactive
+            }
+          ),
+          footer: /* @__PURE__ */ jsx(
+            "form",
+            {
+              onSubmit: (event) => {
+                event.preventDefault();
+                const formData = new FormData(event.currentTarget);
+                const role = String(formData.get("role") ?? "viewer");
+                onUpdateRole({ email: user.email, role });
+              },
+              children: /* @__PURE__ */ jsxs(InlineForm, { children: [
+                /* @__PURE__ */ jsx(FormSelect, { name: "role", options: ROLE_OPTIONS, defaultValue: user.role }),
+                /* @__PURE__ */ jsx(Button, { type: "submit", outline: true, size: "sm", children: labels.save })
+              ] })
+            }
+          )
+        },
+        user.email
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      GlassModal,
+      {
+        open: createOpen,
+        onClose: () => setCreateOpen(false),
+        title: labels.create,
+        maxWidth: "lg",
+        showFormFooter: true,
+        cancelLabel: labels.list,
+        submitLabel: labels.add,
+        onSubmit: (event) => {
+          const formData = new FormData(event.currentTarget);
+          const name = String(formData.get("name") ?? "").trim();
+          const email = String(formData.get("email") ?? "").trim().toLowerCase();
+          const role = String(formData.get("role") ?? "viewer");
+          if (!name || !email) return;
+          onCreateUser({ name, email, role });
+          setCreateOpen(false);
+        },
+        children: /* @__PURE__ */ jsxs(FormGrid, { children: [
+          /* @__PURE__ */ jsx(FormInput, { name: "name", label: labels.name, placeholder: labels.userNamePlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "email", label: labels.email, placeholder: labels.userEmailPlaceholder, required: true, type: "email" }),
+          /* @__PURE__ */ jsx(FormSelect, { name: "role", label: labels.role, options: ROLE_OPTIONS })
+        ] })
+      }
+    )
+  ] });
+}
+function AgentsModelsPageView({ labels, models, loading }) {
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(CubeTransparentIcon, { className: "h-5 w-5" }),
+      label: labels.title,
+      title: labels.title,
+      subtitle: labels.subtitle,
+      gradient: "from-emerald-500 to-teal-700"
+    }
+  );
+  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : models.length === 0 ? /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty, message: labels.subtitle, iconName: "folder-open" }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: models.map((model) => /* @__PURE__ */ jsx(
+    EntityCard,
+    {
+      accentGradient: "from-emerald-500 to-teal-700",
+      icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400", children: /* @__PURE__ */ jsx(CubeTransparentIcon, { className: "h-6 w-6" }) }),
+      title: model.name,
+      subtitle: `${labels.provider}: ${model.provider}`,
+      status: /* @__PURE__ */ jsx(Badge, { color: model.enabled ? "emerald" : "zinc", children: model.enabled ? labels.enabled : labels.disabled })
+    },
+    model.id
+  )) });
+  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
+}
+function AgentsConfigPageView({ labels, agents, models, loading, onCreate, onUpdate, onDelete }) {
+  const [editing, setEditing] = useState(null);
+  const [createOpen, setCreateOpen] = useState(false);
+  const modelOptions = models.map((model) => ({ value: model.id, label: `${model.name} (${model.provider})` }));
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-5 w-5" }),
+      label: labels.title,
+      title: labels.title,
+      subtitle: labels.subtitle,
+      gradient: "from-violet-500 to-indigo-700",
+      toolbar: /* @__PURE__ */ jsx(
+        CreateActionButton,
+        {
+          mode: "desktop",
+          label: labels.addAgent,
+          onClick: () => setCreateOpen(true),
+          accent: "violet"
+        }
+      )
+    }
+  );
+  const mobileAction = /* @__PURE__ */ jsx(
+    CreateActionButton,
+    {
+      mode: "mobile",
+      label: labels.addAgent,
+      onClick: () => setCreateOpen(true),
+      accent: "violet"
+    }
+  );
+  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : agents.length === 0 ? /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty, message: labels.subtitle, iconName: "folder-open" }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: agents.map((agent) => {
+    const modelRecord = models.find((model) => model.id === String(agent.modelId ?? ""));
+    return /* @__PURE__ */ jsx(
+      EntityCard,
+      {
+        accentGradient: "from-violet-500 to-indigo-700",
+        icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-violet-500/10 text-violet-600 dark:bg-violet-500/20 dark:text-violet-400", children: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-6 w-6" }) }),
+        title: String(agent.name ?? ""),
+        subtitle: String(modelRecord?.name ?? agent.modelId ?? ""),
+        status: agent.activePromptVersion > 0 ? /* @__PURE__ */ jsxs(Badge, { color: "emerald", children: [
+          "v",
+          agent.activePromptVersion
+        ] }) : null,
+        footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEditing(agent), children: labels.edit }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              color: "rose",
+              onClick: () => {
+                if (window.confirm(labels.deleteConfirm)) onDelete(agent);
+              },
+              children: labels.delete
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+          labels.activeVersion,
+          ": ",
+          agent.activePromptVersion,
+          " \xB7 Prompts: ",
+          agent.promptCount
+        ] })
+      },
+      String(agent.agentId ?? agent.id ?? agent.name)
+    );
+  }) });
+  const renderForm = (initial, onSubmit) => /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open: true,
+      onClose: () => {
+        setEditing(null);
+        setCreateOpen(false);
+      },
+      title: initial.title,
+      maxWidth: "lg",
+      showFormFooter: true,
+      submitLabel: labels.save,
+      onSubmit: (event) => {
+        const form = new FormData(event.currentTarget);
+        onSubmit({
+          agentId: initial.agentId,
+          name: String(form.get("name") ?? "").trim(),
+          modelId: String(form.get("modelId") ?? ""),
+          systemPrompt: String(form.get("systemPrompt") ?? "").trim(),
+          maxTokens: Number(form.get("maxTokens") ?? 2048),
+          temperature: Number(form.get("temperature") ?? 0.2),
+          outputSchema: String(form.get("outputSchema") ?? "").trim() || void 0
+        });
+      },
+      children: /* @__PURE__ */ jsxs(FormGrid, { children: [
+        /* @__PURE__ */ jsx(FormInput, { name: "name", label: labels.name, defaultValue: initial.name ?? "", required: true }),
+        /* @__PURE__ */ jsx(FormSelect, { name: "modelId", label: labels.model, options: modelOptions, defaultValue: initial.modelId ?? modelOptions[0]?.value ?? "", required: true }),
+        /* @__PURE__ */ jsx(FormInput, { name: "maxTokens", label: String(labels.maxTokens), type: "number", defaultValue: String(initial.maxTokens ?? 2048) }),
+        /* @__PURE__ */ jsx(FormInput, { name: "temperature", label: labels.temperature, type: "number", step: 0.1, min: 0, max: 2, defaultValue: String(initial.temperature ?? 0.2) }),
+        /* @__PURE__ */ jsx(FormTextarea, { name: "systemPrompt", label: labels.systemPrompt, defaultValue: initial.systemPrompt ?? "", rows: 4 }),
+        /* @__PURE__ */ jsx(FormTextarea, { name: "outputSchema", label: labels.outputSchema, placeholder: labels.outputSchemaPlaceholder, defaultValue: initial.outputSchema ?? "", rows: 4 })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    createOpen && renderForm({ title: labels.createTitle }, (input) => {
+      onCreate(input);
+      setCreateOpen(false);
+    }),
+    editing && renderForm(
+      {
+        title: labels.editTitle,
+        agentId: String(editing.agentId ?? editing.id ?? ""),
+        name: String(editing.name ?? ""),
+        modelId: String(editing.modelId ?? ""),
+        systemPrompt: String(editing.systemPrompt ?? ""),
+        maxTokens: Number(editing.maxTokens ?? 2048),
+        temperature: Number(editing.temperature ?? 0.2),
+        outputSchema: String(editing.outputSchema ?? "")
+      },
+      (input) => {
+        onUpdate(String(editing.agentId ?? editing.id ?? ""), input);
+        setEditing(null);
+      }
+    )
+  ] });
+}
+var LOCALE_OPTIONS = [
+  { value: "en", label: "English" },
+  { value: "pt-BR", label: "Portugu\xEAs (Brasil)" },
+  { value: "es", label: "Espa\xF1ol" },
+  { value: "fr", label: "Fran\xE7ais" },
+  { value: "de", label: "Deutsch" },
+  { value: "it", label: "Italiano" }
+];
+function AgentsPromptsPageView({ labels, agents, prompts, loading, onCreate, onActivate, onDelete }) {
+  const [createOpen, setCreateOpen] = useState(false);
+  const agentOptions = useMemo(
+    () => agents.map((agent) => ({
+      value: String(agent.agentId ?? agent.id ?? ""),
+      label: String(agent.name ?? agent.agentId ?? agent.id ?? "")
+    })),
+    [agents]
+  );
+  const agentNameById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const agent of agents) {
+      const id = String(agent.agentId ?? agent.id ?? "");
+      if (id) map.set(id, String(agent.name ?? id));
+    }
+    return map;
+  }, [agents]);
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(ChatBubbleLeftEllipsisIcon, { className: "h-5 w-5" }),
+      label: labels.title,
+      title: labels.title,
+      subtitle: labels.subtitle,
+      gradient: "from-sky-500 to-blue-700",
+      toolbar: /* @__PURE__ */ jsx(
+        CreateActionButton,
+        {
+          mode: "desktop",
+          label: labels.addPrompt,
+          onClick: () => setCreateOpen(true),
+          accent: "sky"
+        }
+      )
+    }
+  );
+  const mobileAction = /* @__PURE__ */ jsx(
+    CreateActionButton,
+    {
+      mode: "mobile",
+      label: labels.addPrompt,
+      onClick: () => setCreateOpen(true),
+      accent: "sky"
+    }
+  );
+  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : prompts.length === 0 ? /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty, message: labels.subtitle, iconName: "folder-open" }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: prompts.map((prompt) => {
+    const agentName = agentNameById.get(prompt.agentId) ?? prompt.agentId;
+    const key = `${prompt.agentId}:${prompt.locale}:${prompt.version}`;
+    return /* @__PURE__ */ jsx(
+      EntityCard,
+      {
+        accentGradient: "from-sky-500 to-blue-700",
+        icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-sky-500/10 text-sky-600 dark:bg-sky-500/20 dark:text-sky-400", children: /* @__PURE__ */ jsx(ChatBubbleLeftEllipsisIcon, { className: "h-6 w-6" }) }),
+        title: agentName,
+        subtitle: `${prompt.locale} \xB7 v${prompt.version}`,
+        status: prompt.isActive ? /* @__PURE__ */ jsx(Badge, { color: "emerald", children: labels.isActive }) : null,
+        footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          !prompt.isActive && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onActivate(prompt), children: labels.activate }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              color: "rose",
+              onClick: () => {
+                if (window.confirm(labels.deleteConfirm)) onDelete(prompt);
+              },
+              children: labels.delete
+            }
+          )
+        ] }),
+        children: prompt.prompt && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-3 text-xs text-slate-500 dark:text-slate-400", children: prompt.prompt })
+      },
+      key
+    );
+  }) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsx(
+      GlassModal,
+      {
+        open: createOpen,
+        onClose: () => setCreateOpen(false),
+        title: labels.createTitle,
+        maxWidth: "2xl",
+        showFormFooter: true,
+        submitLabel: labels.save,
+        onSubmit: (event) => {
+          const form = new FormData(event.currentTarget);
+          const systemPrompt = String(form.get("systemPrompt") ?? "").trim();
+          const userTemplate = String(form.get("userTemplate") ?? "").trim();
+          const reason = String(form.get("reason") ?? "").trim();
+          onCreate({
+            agentId: String(form.get("agentId") ?? "").trim(),
+            locale: String(form.get("locale") ?? "en").trim(),
+            prompt: String(form.get("prompt") ?? "").trim(),
+            systemPrompt: systemPrompt || void 0,
+            userTemplate: userTemplate || void 0,
+            reason: reason || void 0,
+            isActive: String(form.get("isActive") ?? "true") === "true"
+          });
+          setCreateOpen(false);
+        },
+        children: /* @__PURE__ */ jsxs(FormGrid, { children: [
+          /* @__PURE__ */ jsx(FormSelect, { name: "agentId", label: labels.agent, options: agentOptions, required: true }),
+          /* @__PURE__ */ jsx(FormSelect, { name: "locale", label: labels.locale, options: LOCALE_OPTIONS, defaultValue: "en" }),
+          /* @__PURE__ */ jsx(
+            FormSelect,
+            {
+              name: "isActive",
+              label: labels.isActive,
+              options: [{ value: "true", label: labels.isActive }, { value: "false", label: labels.isActive }],
+              defaultValue: "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(FormInput, { name: "reason", label: labels.reason }),
+          /* @__PURE__ */ jsx(FormTextarea, { name: "systemPrompt", label: labels.systemPrompt, rows: 3 }),
+          /* @__PURE__ */ jsx(FormTextarea, { name: "userTemplate", label: labels.userTemplate, rows: 3 }),
+          /* @__PURE__ */ jsx(FormTextarea, { name: "prompt", label: labels.prompt, rows: 6, required: true })
+        ] })
+      }
+    )
+  ] });
+}
+var TOOL_TYPES = [
+  "http",
+  "function",
+  "database_query",
+  "code_execution",
+  "api_call"
+];
+var TOOL_TYPE_OPTIONS = [
+  { value: "http", label: "HTTP", description: "Call an HTTP endpoint with templated URL/body." },
+  { value: "function", label: "Function", description: "Invoke a pre-registered server-side implementation." },
+  { value: "database_query", label: "Database query", description: "Run a parameterized SELECT against a datasource." },
+  { value: "code_execution", label: "Code execution", description: "Run sandboxed code (JS/Python) \u2014 experimental." },
+  { value: "api_call", label: "API call", description: "Call a third-party API via stored credentials." }
+];
+var PARAMETER_TYPE_OPTIONS = [
+  { value: "string", label: "string" },
+  { value: "number", label: "number" },
+  { value: "boolean", label: "boolean" },
+  { value: "array", label: "array" },
+  { value: "object", label: "object" }
+];
+function AgentsToolDefinitionsPageView({ labels, tools, loading, onCreate, onUpdate, onDelete }) {
+  const [editing, setEditing] = useState(null);
+  const [createOpen, setCreateOpen] = useState(false);
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(WrenchScrewdriverIcon, { className: "h-5 w-5" }),
+      label: labels.title,
+      title: labels.title,
+      subtitle: labels.subtitle,
+      gradient: "from-amber-500 to-orange-700",
+      toolbar: /* @__PURE__ */ jsx(
+        CreateActionButton,
+        {
+          mode: "desktop",
+          label: labels.addTool,
+          onClick: () => setCreateOpen(true),
+          accent: "amber"
+        }
+      )
+    }
+  );
+  const mobileAction = /* @__PURE__ */ jsx(
+    CreateActionButton,
+    {
+      mode: "mobile",
+      label: labels.addTool,
+      onClick: () => setCreateOpen(true),
+      accent: "amber"
+    }
+  );
+  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : tools.length === 0 ? /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty, message: labels.subtitle, iconName: "folder-open" }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: tools.map((tool) => /* @__PURE__ */ jsx(
+    EntityCard,
+    {
+      accentGradient: "from-amber-500 to-orange-700",
+      icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400", children: /* @__PURE__ */ jsx(WrenchScrewdriverIcon, { className: "h-6 w-6" }) }),
+      title: tool.name,
+      subtitle: toolTypeLabel(tool),
+      status: /* @__PURE__ */ jsx(Badge, { color: tool.enabled ? "emerald" : "zinc", children: tool.enabled ? labels.enabled : labels.disabled }),
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEditing(tool), children: labels.edit }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            color: "rose",
+            onClick: () => {
+              if (window.confirm(labels.deleteConfirm)) onDelete(tool);
+            },
+            children: labels.delete
+          }
+        )
+      ] }),
+      children: tool.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: tool.description })
+    },
+    tool.agentToolId
+  )) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    createOpen && /* @__PURE__ */ jsx(
+      ToolEditor,
+      {
+        title: labels.createTitle,
+        saveLabel: labels.save,
+        initial: defaultForm(),
+        onClose: () => setCreateOpen(false),
+        onSubmit: (input) => {
+          onCreate(input);
+          setCreateOpen(false);
+        }
+      }
+    ),
+    editing && /* @__PURE__ */ jsx(
+      ToolEditor,
+      {
+        title: labels.editTitle,
+        saveLabel: labels.save,
+        initial: toolToForm(editing),
+        onClose: () => setEditing(null),
+        onSubmit: (input) => {
+          onUpdate(editing.agentToolId, input);
+          setEditing(null);
+        }
+      }
+    )
+  ] });
+}
+function ToolEditor({
+  title,
+  saveLabel,
+  initial,
+  onSubmit,
+  onClose
+}) {
+  const [value, setValue] = useState(initial);
+  const [error, setError] = useState(null);
+  const handleSubmit = () => {
+    if (!value.name.trim()) {
+      setError("Name is required");
+      return;
+    }
+    const names = value.parameters.map((p) => p.name.trim());
+    if (names.some((n) => n.length === 0)) {
+      setError("Every parameter must have a name");
+      return;
+    }
+    if (new Set(names).size !== names.length) {
+      setError("Parameter names must be unique");
+      return;
+    }
+    onSubmit(value);
+  };
+  const update = (key, next) => {
+    setValue((v) => ({ ...v, [key]: next }));
+  };
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open: true,
+      onClose,
+      title,
+      maxWidth: "3xl",
+      showFormFooter: true,
+      submitLabel: saveLabel,
+      onSubmit: (event) => {
+        event.preventDefault();
+        handleSubmit();
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+        /* @__PURE__ */ jsxs(FormGrid, { children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Name",
+              required: true,
+              value: value.name,
+              onValueChange: (name) => update("name", name),
+              placeholder: "get_station_prices"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormSelect,
+            {
+              label: "Tool type",
+              value: value.toolType,
+              options: TOOL_TYPE_OPTIONS.map((o) => ({ value: o.value, label: o.label })),
+              onValueChange: (v) => update("toolType", v),
+              hint: TOOL_TYPE_OPTIONS.find((o) => o.value === value.toolType)?.description
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormSelect,
+            {
+              label: "Enabled",
+              value: value.enabled ? "true" : "false",
+              options: [{ value: "true", label: "Enabled" }, { value: "false", label: "Disabled" }],
+              onValueChange: (v) => update("enabled", v === "true")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Icon (optional)",
+              value: value.icon ?? "",
+              onValueChange: (icon) => update("icon", icon),
+              placeholder: "heroicons:wrench-screwdriver"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          FormTextarea,
+          {
+            label: "Description",
+            rows: 2,
+            value: value.description ?? "",
+            onValueChange: (description) => update("description", description),
+            placeholder: "One-sentence summary shown to the agent when it picks tools."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ParametersEditor,
+          {
+            parameters: value.parameters,
+            onChange: (parameters) => update("parameters", parameters)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HandlerConfigEditor,
+          {
+            toolType: value.toolType,
+            config: value.handlerConfig,
+            onChange: (handlerConfig) => update("handlerConfig", handlerConfig)
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { className: "rounded-lg border border-red-400/40 bg-red-500/10 p-2 text-xs text-red-600 dark:text-red-300", children: error })
+      ] })
+    }
+  );
+}
+function ParametersEditor({
+  parameters,
+  onChange
+}) {
+  const update = (index, patch) => {
+    onChange(parameters.map((p, i) => i === index ? { ...p, ...patch } : p));
+  };
+  const remove = (index) => {
+    onChange(parameters.filter((_, i) => i !== index));
+  };
+  const add = () => {
+    onChange([...parameters, { name: "", type: "string", description: "", required: false }]);
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "rounded-xl border border-slate-200 bg-slate-50/60 p-3 dark:border-slate-700 dark:bg-slate-900/40", children: [
+    /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200", children: "Parameters" }),
+    /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: "The agent gets these as a JSON Schema. Any parameter marked required must be supplied for the LLM to call the tool." }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      parameters.map((param, index) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_160px_1fr_110px_auto] items-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: "Name",
+            value: param.name,
+            onValueChange: (name) => update(index, { name }),
+            placeholder: "station_id"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormSelect,
+          {
+            label: "Type",
+            value: param.type,
+            options: PARAMETER_TYPE_OPTIONS,
+            onValueChange: (t) => update(index, { type: t })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: "Description",
+            value: param.description,
+            onValueChange: (description) => update(index, { description })
+          }
+        ),
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 pb-2 text-xs text-gray-700 dark:text-gray-300", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: param.required,
+              onChange: (event) => update(index, { required: event.target.checked }),
+              className: "h-4 w-4 rounded border-gray-300"
+            }
+          ),
+          "Required"
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "button", plain: true, onClick: () => remove(index), children: "Remove" })
+      ] }, index)),
+      /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: add, children: "+ Add parameter" })
+    ] })
+  ] });
+}
+function HandlerConfigEditor({
+  toolType,
+  config,
+  onChange
+}) {
+  const set = (key, value) => onChange({ ...config, [key]: value });
+  if (toolType === "http") {
+    return /* @__PURE__ */ jsxs("section", { className: "rounded-xl border border-slate-200 bg-slate-50/60 p-3 dark:border-slate-700 dark:bg-slate-900/40", children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200", children: "HTTP handler" }),
+      /* @__PURE__ */ jsxs(FormGrid, { children: [
+        /* @__PURE__ */ jsx(
+          FormSelect,
+          {
+            label: "Method",
+            value: stringProp(config, "method", "GET"),
+            options: ["GET", "POST", "PUT", "PATCH", "DELETE"].map((m) => ({ value: m, label: m })),
+            onValueChange: (m) => set("method", m)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: "URL template",
+            value: stringProp(config, "url"),
+            onValueChange: (u) => set("url", u),
+            placeholder: "https://api.example.com/stations/{{ station_id }}"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        FormTextarea,
+        {
+          label: "Headers (JSON)",
+          rows: 3,
+          value: jsonProp(config, "headers"),
+          onValueChange: (raw) => setFromJson(set, "headers", raw),
+          placeholder: '{ "Authorization": "Bearer {{ apiKey }}" }'
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormTextarea,
+        {
+          label: "Body template",
+          rows: 3,
+          value: stringProp(config, "bodyTemplate"),
+          onValueChange: (b) => set("bodyTemplate", b),
+          placeholder: '{"query": "{{ search }}"}'
+        }
+      )
+    ] });
+  }
+  if (toolType === "function") {
+    return /* @__PURE__ */ jsxs("section", { className: "rounded-xl border border-slate-200 bg-slate-50/60 p-3 dark:border-slate-700 dark:bg-slate-900/40", children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200", children: "Function handler" }),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Implementation key",
+          value: stringProp(config, "implementationKey"),
+          onValueChange: (k) => set("implementationKey", k),
+          placeholder: "fuel.get_station_prices",
+          hint: "Must match a pre-registered handler on the server side."
+        }
+      )
+    ] });
+  }
+  if (toolType === "database_query") {
+    return /* @__PURE__ */ jsxs("section", { className: "rounded-xl border border-slate-200 bg-slate-50/60 p-3 dark:border-slate-700 dark:bg-slate-900/40", children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200", children: "Database query handler" }),
+      /* @__PURE__ */ jsxs(FormGrid, { children: [
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: "Datasource ID",
+            value: stringProp(config, "datasourceId"),
+            onValueChange: (v) => set("datasourceId", v),
+            placeholder: "UUID from /datasources"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: "Max rows",
+            type: "number",
+            value: numberProp(config, "maxRows", 100),
+            onValueChange: (v) => set("maxRows", Number(v) || 100)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        FormTextarea,
+        {
+          label: "Query template",
+          rows: 4,
+          value: stringProp(config, "queryTemplate"),
+          onValueChange: (v) => set("queryTemplate", v),
+          placeholder: "SELECT id, current_price FROM current_prices WHERE station_id = {{ station_id }}"
+        }
+      )
+    ] });
+  }
+  if (toolType === "code_execution") {
+    return /* @__PURE__ */ jsxs("section", { className: "rounded-xl border border-slate-200 bg-slate-50/60 p-3 dark:border-slate-700 dark:bg-slate-900/40", children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200", children: "Code execution handler" }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-amber-600 dark:text-amber-400", children: "Experimental \u2014 sandbox is not yet enforced. Only enable for trusted tools." }),
+      /* @__PURE__ */ jsx(
+        FormSelect,
+        {
+          label: "Language",
+          value: stringProp(config, "language", "javascript"),
+          options: [
+            { value: "javascript", label: "JavaScript" },
+            { value: "python", label: "Python" }
+          ],
+          onValueChange: (v) => set("language", v)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormTextarea,
+        {
+          label: "Code",
+          rows: 6,
+          value: stringProp(config, "code"),
+          onValueChange: (v) => set("code", v),
+          placeholder: "// return value becomes the tool output\nreturn { price: inputs.x * 1.08 }"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "rounded-xl border border-slate-200 bg-slate-50/60 p-3 dark:border-slate-700 dark:bg-slate-900/40", children: [
+    /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200", children: "API call handler" }),
+    /* @__PURE__ */ jsxs(FormGrid, { children: [
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "URL",
+          value: stringProp(config, "url"),
+          onValueChange: (v) => set("url", v)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormSelect,
+        {
+          label: "Auth",
+          value: stringProp(config, "authType", "bearer"),
+          options: [
+            { value: "none", label: "None" },
+            { value: "bearer", label: "Bearer token" },
+            { value: "api_key", label: "API key header" },
+            { value: "basic", label: "Basic auth" }
+          ],
+          onValueChange: (v) => set("authType", v)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          label: "Credential secret id",
+          value: stringProp(config, "credentialRef"),
+          onValueChange: (v) => set("credentialRef", v),
+          placeholder: "UUID from vault",
+          hint: "Leave blank if Auth is None."
+        }
+      )
+    ] })
+  ] });
+}
+function parametersToJsonSchema(params) {
+  const properties = {};
+  const required = [];
+  for (const param of params) {
+    if (!param.name.trim()) continue;
+    properties[param.name] = {
+      type: param.type,
+      ...param.description ? { description: param.description } : {}
+    };
+    if (param.required) required.push(param.name);
+  }
+  const schema = { type: "object", properties };
+  if (required.length > 0) schema.required = required;
+  return schema;
+}
+function jsonSchemaToParameters(schema) {
+  if (!schema || typeof schema !== "object" || Array.isArray(schema)) return [];
+  const root = schema;
+  const properties = root.properties;
+  if (!properties || typeof properties !== "object" || Array.isArray(properties)) return [];
+  const required = Array.isArray(root.required) ? root.required.filter((r) => typeof r === "string") : [];
+  const entries = Object.entries(properties);
+  return entries.map(([name, raw]) => {
+    const def = raw ?? {};
+    const rawType = def.type;
+    const type = isParameterType(rawType) ? rawType : "string";
+    return {
+      name,
+      type,
+      description: typeof def.description === "string" ? def.description : "",
+      required: required.includes(name)
+    };
+  });
+}
+function isParameterType(v) {
+  return v === "string" || v === "number" || v === "boolean" || v === "array" || v === "object";
+}
+function defaultForm() {
+  return {
+    name: "",
+    description: "",
+    toolType: "http",
+    parameters: [],
+    handlerConfig: { method: "GET" },
+    enabled: true
+  };
+}
+function toolToForm(tool) {
+  const raw = tool;
+  const implRaw = raw.implementationKey ?? raw.implementation_key;
+  let handlerConfig = {};
+  if (typeof implRaw === "string") {
+    try {
+      const parsed = JSON.parse(implRaw);
+      if (parsed && typeof parsed === "object") {
+        const inner = parsed.handlerConfig ?? parsed.handler_config;
+        if (inner && typeof inner === "object" && !Array.isArray(inner)) {
+          handlerConfig = inner;
+        }
+      }
+    } catch {
+      handlerConfig = { implementationKey: implRaw };
+    }
+  }
+  const toolTypeRaw = raw.toolType ?? raw.tool_type ?? raw.category;
+  const toolType = TOOL_TYPES.includes(String(toolTypeRaw)) ? toolTypeRaw : "function";
+  const parameters = jsonSchemaToParameters(raw.parameters ?? raw.inputSchema ?? raw.input_schema);
+  return {
+    agentToolId: tool.agentToolId,
+    name: tool.name,
+    description: tool.description,
+    toolType,
+    parameters,
+    handlerConfig,
+    enabled: tool.enabled,
+    icon: tool.icon
+  };
+}
+function toolTypeLabel(tool) {
+  const raw = tool;
+  const t = raw.toolType ?? raw.tool_type ?? tool.category;
+  const entry = TOOL_TYPE_OPTIONS.find((o) => o.value === t);
+  return entry?.label ?? (typeof t === "string" ? t : "tool");
+}
+function stringProp(obj, key, fallback = "") {
+  const value = obj[key];
+  return typeof value === "string" ? value : fallback;
+}
+function numberProp(obj, key, fallback) {
+  const value = obj[key];
+  return typeof value === "number" && Number.isFinite(value) ? String(value) : String(fallback);
+}
+function jsonProp(obj, key) {
+  const value = obj[key];
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return "";
+  }
+}
+function setFromJson(set, key, raw) {
+  if (!raw.trim()) {
+    set(key, void 0);
+    return;
+  }
+  try {
+    set(key, JSON.parse(raw));
+  } catch {
+    set(key, raw);
+  }
+}
+function RulesPageView({ labels, rules, loading, onCreate, onUpdate, onDelete }) {
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editing, setEditing] = useState(null);
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(AdjustmentsHorizontalIcon, { className: "h-5 w-5" }),
+      label: labels.title,
+      title: labels.title,
+      subtitle: labels.subtitle,
+      gradient: "from-fuchsia-500 to-purple-700",
+      toolbar: /* @__PURE__ */ jsx(
+        CreateActionButton,
+        {
+          mode: "desktop",
+          label: labels.addRule,
+          onClick: () => setCreateOpen(true),
+          accent: "fuchsia"
+        }
+      )
+    }
+  );
+  const mobileAction = /* @__PURE__ */ jsx(
+    CreateActionButton,
+    {
+      mode: "mobile",
+      label: labels.addRule,
+      onClick: () => setCreateOpen(true),
+      accent: "fuchsia"
+    }
+  );
+  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : rules.length === 0 ? /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty, message: labels.subtitle, iconName: "folder-open" }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: rules.map((rule) => /* @__PURE__ */ jsx(
+    EntityCard,
+    {
+      accentGradient: "from-fuchsia-500 to-purple-700",
+      icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-fuchsia-500/10 text-fuchsia-600 dark:bg-fuchsia-500/20 dark:text-fuchsia-400", children: /* @__PURE__ */ jsx(AdjustmentsHorizontalIcon, { className: "h-6 w-6" }) }),
+      title: rule.name,
+      subtitle: `${labels.order}: ${rule.order ?? 0}`,
+      status: /* @__PURE__ */ jsx(Badge, { color: rule.enabled ? "emerald" : "zinc", children: rule.enabled ? labels.enabled : labels.disabled }),
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEditing(rule), children: labels.edit }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            color: "rose",
+            onClick: () => {
+              if (window.confirm(labels.deleteConfirm)) onDelete(rule);
+            },
+            children: labels.delete
+          }
+        )
+      ] }),
+      children: rule.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: rule.description })
+    },
+    rule.ruleId
+  )) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    createOpen && /* @__PURE__ */ jsx(
+      RuleEditor,
+      {
+        title: labels.createTitle,
+        saveLabel: labels.save,
+        initial: defaultRuleForm(),
+        onClose: () => setCreateOpen(false),
+        onSubmit: (value) => {
+          onCreate(value);
+          setCreateOpen(false);
+        }
+      }
+    ),
+    editing && /* @__PURE__ */ jsx(
+      RuleEditor,
+      {
+        title: labels.editTitle,
+        saveLabel: labels.save,
+        initial: ruleToFormValue(editing),
+        onClose: () => setEditing(null),
+        onSubmit: (value) => {
+          onUpdate(editing.ruleId, value);
+          setEditing(null);
+        }
+      }
+    )
+  ] });
+}
+function RuleEditor({
+  title,
+  saveLabel,
+  initial,
+  onSubmit,
+  onClose
+}) {
+  const [value, setValue] = useState(initial);
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open: true,
+      onClose,
+      title,
+      maxWidth: "3xl",
+      showFormFooter: true,
+      submitLabel: saveLabel,
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit(value);
+      },
+      children: /* @__PURE__ */ jsx(RuleForm, { value, onChange: setValue })
+    }
+  );
+}
+function ruleToFormValue(rule) {
+  const base = defaultRuleForm();
+  const rawCondition = rule.condition ?? rule.conditions;
+  const rawAction = pickAction(rule);
+  return {
+    ...base,
+    ruleId: rule.ruleId,
+    name: rule.name ?? "",
+    description: rule.description ?? "",
+    enabled: rule.enabled,
+    priority: typeof rule.order === "number" ? rule.order : typeof rule.priority === "number" ? rule.priority : 0,
+    condition: rawCondition && typeof rawCondition === "object" ? rawCondition : base.condition,
+    action: rawAction ?? base.action,
+    status: typeof rule.status === "string" ? rule.status : base.status,
+    validFrom: typeof rule.validFrom === "string" ? rule.validFrom : base.validFrom,
+    validUntil: typeof rule.validUntil === "string" ? rule.validUntil : base.validUntil,
+    tags: Array.isArray(rule.tags) ? rule.tags.filter((tag) => typeof tag === "string") : base.tags
+  };
+}
+function pickAction(rule) {
+  const singular = rule.action;
+  if (singular && typeof singular === "object" && "type" in singular) {
+    return singular;
+  }
+  if (Array.isArray(rule.actions) && rule.actions.length > 0) {
+    const first = rule.actions[0];
+    if (first && typeof first === "object" && "type" in first) {
+      return first;
+    }
+  }
+  return void 0;
+}
+var DIALECT_CATEGORIES = [
+  {
+    id: "relational",
+    labelKey: "categoryRelational",
+    icon: CircleStackIcon,
+    gradient: "from-blue-500 to-indigo-600",
+    dialects: [
+      { value: "postgres", label: "PostgreSQL", defaultPort: 5432, formType: "standard" },
+      { value: "mysql", label: "MySQL", defaultPort: 3306, formType: "standard" },
+      { value: "mariadb", label: "MariaDB", defaultPort: 3306, formType: "standard" },
+      { value: "mssql", label: "SQL Server", defaultPort: 1433, formType: "standard" },
+      { value: "oracle", label: "Oracle", defaultPort: 1521, formType: "standard" },
+      { value: "db2", label: "IBM Db2", defaultPort: 5e4, formType: "standard" },
+      { value: "cockroachdb", label: "CockroachDB", defaultPort: 26257, formType: "standard" },
+      { value: "timescaledb", label: "TimescaleDB", defaultPort: 5432, formType: "standard" },
+      { value: "sqlite", label: "SQLite", formType: "connection-string" },
+      { value: "duckdb", label: "DuckDB", formType: "connection-string" }
+    ]
+  },
+  {
+    id: "nosql",
+    labelKey: "categoryNoSql",
+    icon: ServerStackIcon,
+    gradient: "from-emerald-500 to-teal-600",
+    dialects: [
+      { value: "mongodb", label: "MongoDB", defaultPort: 27017, formType: "connection-string" },
+      { value: "cassandra", label: "Cassandra", defaultPort: 9042, formType: "standard" },
+      { value: "scylladb", label: "ScyllaDB", defaultPort: 9042, formType: "standard" },
+      { value: "dynamodb", label: "DynamoDB", formType: "cloud-key" },
+      { value: "cosmosdb", label: "CosmosDB", formType: "connection-string" },
+      { value: "arangodb", label: "ArangoDB", defaultPort: 8529, formType: "standard" }
+    ]
+  },
+  {
+    id: "warehouse",
+    labelKey: "categoryWarehouse",
+    icon: CloudIcon,
+    gradient: "from-purple-500 to-violet-600",
+    dialects: [
+      { value: "bigquery", label: "BigQuery", formType: "cloud-bigquery" },
+      { value: "snowflake", label: "Snowflake", formType: "cloud-snowflake" },
+      { value: "clickhouse", label: "ClickHouse", defaultPort: 8123, formType: "standard" }
+    ]
+  },
+  {
+    id: "timeseries",
+    labelKey: "categoryTimeSeries",
+    icon: ClockIcon,
+    gradient: "from-sky-500 to-cyan-600",
+    dialects: [
+      { value: "influxdb", label: "InfluxDB", formType: "cloud-key" },
+      { value: "timestream", label: "Timestream", formType: "cloud-key" }
+    ]
+  },
+  {
+    id: "graph",
+    labelKey: "categoryGraph",
+    icon: ShareIcon,
+    gradient: "from-pink-500 to-rose-600",
+    dialects: [
+      { value: "neo4j", label: "Neo4j", defaultPort: 7687, formType: "standard" },
+      { value: "neptune", label: "Neptune", formType: "connection-string" }
+    ]
+  },
+  {
+    id: "keyvalue",
+    labelKey: "categoryKeyValue",
+    icon: KeyIcon,
+    gradient: "from-red-500 to-orange-600",
+    dialects: [
+      { value: "redis", label: "Redis", defaultPort: 6379, formType: "standard" }
+    ]
+  },
+  {
+    id: "search",
+    labelKey: "categorySearch",
+    icon: MagnifyingGlassIcon,
+    gradient: "from-amber-500 to-yellow-600",
+    dialects: [
+      { value: "elasticsearch", label: "Elasticsearch", defaultPort: 9200, formType: "standard" },
+      { value: "opensearch", label: "OpenSearch", defaultPort: 9200, formType: "standard" },
+      { value: "pinecone", label: "Pinecone", formType: "vector-key" },
+      { value: "qdrant", label: "Qdrant", defaultPort: 6333, formType: "standard" },
+      { value: "weaviate", label: "Weaviate", defaultPort: 8080, formType: "standard" },
+      { value: "milvus", label: "Milvus", defaultPort: 19530, formType: "standard" },
+      { value: "chromadb", label: "ChromaDB", defaultPort: 8e3, formType: "standard" }
+    ]
+  }
+];
+function findDialect(value) {
+  for (const category of DIALECT_CATEGORIES) {
+    const found = category.dialects.find((d) => d.value === value);
+    if (found) return found;
+  }
+  return void 0;
+}
+function findCategory(dialectValue) {
+  return DIALECT_CATEGORIES.find((c) => c.dialects.some((d) => d.value === dialectValue));
+}
+function DialectPicker({
+  labels,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: labels.stepSelectType }),
+    DIALECT_CATEGORIES.map((category) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: `flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br ${category.gradient}`, children: /* @__PURE__ */ jsx(category.icon, { className: "h-4 w-4 text-white" }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-700 dark:text-gray-200", children: labels[category.labelKey] ?? category.id })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3", children: category.dialects.map((dialect) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect(dialect.value),
+          className: "group flex items-center gap-2 rounded-xl border border-gray-200/60 bg-white/60 px-3 py-2.5 text-left text-sm font-medium text-gray-700 transition-all hover:border-amber-400/60 hover:bg-amber-50/50 hover:text-amber-700 active:scale-[0.97] dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:hover:border-amber-400/40 dark:hover:bg-amber-500/10 dark:hover:text-amber-300",
+          children: [
+            /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-4 w-4 shrink-0 text-gray-400 transition-colors group-hover:text-amber-500 dark:text-gray-500" }),
+            dialect.label
+          ]
+        },
+        dialect.value
+      )) })
+    ] }, category.id))
+  ] });
+}
+function ConnectionForm({
+  dialect,
+  labels,
+  onBack,
+  onSubmit
+}) {
+  const [testStatus, setTestStatus] = useState("idle");
+  const category = findCategory(dialect.value);
+  function handleSubmit(event) {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const data = {
+      name: String(formData.get("name") ?? "").trim(),
+      dialect: dialect.value
+    };
+    for (const key of ["host", "database", "username", "password", "schema", "connectionString", "projectId", "dataset", "keyFile", "account", "warehouse", "region", "bucket", "token", "apiKey", "environment", "index", "url"]) {
+      const val = String(formData.get(key) ?? "").trim();
+      if (val) data[key] = val;
+    }
+    const port = String(formData.get("port") ?? "").trim();
+    if (port) data.port = Number(port);
+    data.ssl = formData.get("ssl") === "on";
+    data.readOnly = formData.get("readOnly") === "on";
+    const maxPoolSize = String(formData.get("maxPoolSize") ?? "").trim();
+    if (maxPoolSize) {
+      const parsed = Number(maxPoolSize);
+      if (Number.isFinite(parsed) && parsed > 0) data.maxPoolSize = parsed;
+    }
+    const timeoutMs = String(formData.get("timeoutMs") ?? "").trim();
+    if (timeoutMs) {
+      const parsed = Number(timeoutMs);
+      if (Number.isFinite(parsed) && parsed > 0) data.timeoutMs = parsed;
+    }
+    const allowedTables = splitList(String(formData.get("allowedTables") ?? ""));
+    if (allowedTables.length > 0) data.allowedTables = allowedTables;
+    const blockedColumns = splitList(String(formData.get("blockedColumns") ?? ""));
+    if (blockedColumns.length > 0) data.blockedColumns = blockedColumns;
+    onSubmit(data);
+  }
+  function handleTestConnection() {
+    setTestStatus("testing");
+    setTimeout(() => {
+      setTestStatus("success");
+      setTimeout(() => setTestStatus("idle"), 3e3);
+    }, 1500);
+  }
+  function renderFields() {
+    switch (dialect.formType) {
+      case "standard":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(FormInput, { name: "host", label: labels.fieldHost, placeholder: labels.fieldHostPlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "port", label: labels.fieldPort, type: "number", defaultValue: dialect.defaultPort }),
+          /* @__PURE__ */ jsx(FormInput, { name: "database", label: labels.fieldDatabase, placeholder: labels.fieldDatabasePlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "username", label: labels.fieldUsername, placeholder: labels.fieldUsernamePlaceholder }),
+          /* @__PURE__ */ jsx(FormInput, { name: "password", label: labels.fieldPassword, type: "password", placeholder: labels.fieldPasswordPlaceholder }),
+          /* @__PURE__ */ jsx(FormInput, { name: "schema", label: labels.fieldSchema, placeholder: labels.fieldSchemaPlaceholder })
+        ] });
+      case "connection-string":
+        return /* @__PURE__ */ jsx("div", { className: "col-span-full", children: /* @__PURE__ */ jsx(FormInput, { name: "connectionString", label: labels.fieldConnectionString, placeholder: labels.fieldConnectionStringPlaceholder, required: true }) });
+      case "cloud-bigquery":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(FormInput, { name: "projectId", label: labels.fieldProjectId, placeholder: labels.fieldProjectIdPlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "dataset", label: labels.fieldDataset, placeholder: labels.fieldDatasetPlaceholder, required: true }),
+          /* @__PURE__ */ jsx("div", { className: "col-span-full", children: /* @__PURE__ */ jsx(FormInput, { name: "keyFile", label: labels.fieldKeyFile, placeholder: labels.fieldKeyFilePlaceholder }) })
+        ] });
+      case "cloud-snowflake":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(FormInput, { name: "account", label: labels.fieldAccount, placeholder: labels.fieldAccountPlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "warehouse", label: labels.fieldWarehouse, placeholder: labels.fieldWarehousePlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "database", label: labels.fieldDatabase, placeholder: labels.fieldDatabasePlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "username", label: labels.fieldUsername, placeholder: labels.fieldUsernamePlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "password", label: labels.fieldPassword, type: "password", placeholder: labels.fieldPasswordPlaceholder }),
+          /* @__PURE__ */ jsx(FormInput, { name: "schema", label: labels.fieldSchema, placeholder: labels.fieldSchemaPlaceholder })
+        ] });
+      case "cloud-key":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(FormInput, { name: "region", label: labels.fieldRegion, placeholder: labels.fieldRegionPlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "token", label: labels.fieldToken, type: "password", placeholder: labels.fieldTokenPlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "bucket", label: labels.fieldBucket, placeholder: labels.fieldBucketPlaceholder })
+        ] });
+      case "vector-key":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(FormInput, { name: "apiKey", label: labels.fieldApiKey, type: "password", placeholder: labels.fieldApiKeyPlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "environment", label: labels.fieldEnvironment, placeholder: labels.fieldEnvironmentPlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormInput, { name: "index", label: labels.fieldIndex, placeholder: labels.fieldIndexPlaceholder })
+        ] });
+    }
+  }
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          className: "flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-white/10 dark:hover:text-gray-300",
+          children: /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br ${category?.gradient ?? "from-gray-400 to-gray-500"}`, children: category ? /* @__PURE__ */ jsx(category.icon, { className: "h-4 w-4 text-white" }) : /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-4 w-4 text-white" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: dialect.label }),
+          /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-gray-400", children: labels[category?.labelKey ?? ""] ?? "" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FormInput, { name: "name", label: labels.fieldName, placeholder: labels.fieldNamePlaceholder, required: true }),
+    /* @__PURE__ */ jsx(FormGrid, { children: renderFields() }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-6 pt-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            name: "ssl",
+            defaultChecked: true,
+            className: "h-4 w-4 rounded border-gray-300 text-amber-600 focus:ring-amber-500 dark:border-gray-600 dark:bg-gray-800"
+          }
+        ),
+        labels.fieldSsl
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            name: "readOnly",
+            defaultChecked: true,
+            className: "h-4 w-4 rounded border-gray-300 text-amber-600 focus:ring-amber-500 dark:border-gray-600 dark:bg-gray-800"
+          }
+        ),
+        labels.fieldReadOnly
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: labels.fieldReadOnlyHelp }),
+    /* @__PURE__ */ jsxs("details", { className: "rounded-xl border border-gray-200/60 bg-white/40 p-3 dark:border-white/10 dark:bg-white/5", children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300", children: labels.advancedToggle ?? "Governance & performance" }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-3", children: [
+        /* @__PURE__ */ jsxs(FormGrid, { children: [
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              name: "maxPoolSize",
+              label: labels.fieldMaxPoolSize ?? "Max pool size",
+              type: "number",
+              min: 1,
+              max: 100,
+              placeholder: "5"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              name: "timeoutMs",
+              label: labels.fieldTimeoutMs ?? "Timeout (ms)",
+              type: "number",
+              min: 100,
+              placeholder: "5000"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            name: "allowedTables",
+            label: labels.fieldAllowedTables ?? "Allowed tables (comma-separated)",
+            placeholder: "stations, current_prices, competitor_prices"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: labels.fieldAllowedTablesHelp ?? "Leave blank to allow every table the credential can see. Otherwise only the listed tables are queryable from workflows." }),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            name: "blockedColumns",
+            label: labels.fieldBlockedColumns ?? "Blocked columns (comma-separated)",
+            placeholder: "customers.ssn, employees.salary"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: labels.fieldBlockedColumnsHelp ?? "Columns the driver must never surface, even if referenced by a workflow. Use table.column notation for specificity." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-t border-gray-200/60 pt-5 dark:border-white/10", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          color: "zinc",
+          onClick: handleTestConnection,
+          disabled: testStatus === "testing",
+          children: testStatus === "testing" ? labels.testing : labels.testConnection
+        }
+      ),
+      testStatus === "success" && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400", children: [
+        /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-4 w-4" }),
+        labels.connectionSuccess
+      ] }),
+      testStatus === "failed" && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400", children: [
+        /* @__PURE__ */ jsx(XCircleIcon, { className: "h-4 w-4" }),
+        labels.connectionFailed
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", color: "amber", children: labels.save })
+    ] })
+  ] });
+}
+function DatasourceFormModal({ open, onClose, labels, onSave }) {
+  const [selectedDialect, setSelectedDialect] = useState(null);
+  const dialect = selectedDialect ? findDialect(selectedDialect) : null;
+  function handleClose() {
+    setSelectedDialect(null);
+    onClose();
+  }
+  function handleSave(data) {
+    onSave(data);
+    handleClose();
+  }
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose: handleClose,
+      title: labels.createTitle,
+      subtitle: dialect ? labels.stepConfigure : labels.stepSelectType,
+      icon: /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-5 w-5" }),
+      gradient: "from-amber-500 to-orange-600",
+      maxWidth: "3xl",
+      children: dialect ? /* @__PURE__ */ jsx(
+        ConnectionForm,
+        {
+          dialect,
+          labels,
+          onBack: () => setSelectedDialect(null),
+          onSubmit: handleSave
+        }
+      ) : /* @__PURE__ */ jsx(DialectPicker, { labels, onSelect: setSelectedDialect })
+    }
+  );
+}
+function DatasourceModal({ open, onClose, labels, onSave }) {
+  const [selectedDialect, setSelectedDialect] = useState(null);
+  const dialect = selectedDialect ? findDialect(selectedDialect) : null;
+  function handleClose() {
+    setSelectedDialect(null);
+    onClose();
+  }
+  function handleSave(data) {
+    onSave(data);
+    handleClose();
+  }
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose: handleClose,
+      title: labels.createTitle,
+      subtitle: dialect ? labels.stepConfigure : labels.stepSelectType,
+      icon: /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-5 w-5" }),
+      gradient: "from-amber-500 to-orange-600",
+      maxWidth: "3xl",
+      children: dialect ? /* @__PURE__ */ jsx(
+        ConnectionForm,
+        {
+          dialect,
+          labels,
+          onBack: () => setSelectedDialect(null),
+          onSubmit: handleSave
+        }
+      ) : /* @__PURE__ */ jsx(DialectPicker, { labels, onSelect: setSelectedDialect })
+    }
+  );
+}
+function splitList(raw) {
+  return raw.split(",").map((entry) => entry.trim()).filter((entry) => entry.length > 0);
+}
+var SAMPLE_DATASOURCES = [
+  {
+    id: "ds_bigquery_analytics",
+    organizationId: "org_demo",
+    name: "BigQuery Analytics",
+    dialect: "bigquery",
+    credentials: null,
+    readOnly: true,
+    maxPoolSize: null,
+    timeoutMs: 3e4,
+    allowedTables: null,
+    blockedColumns: null,
+    enabled: true,
+    createdAt: "2026-03-20T10:00:00Z",
+    updatedAt: "2026-03-20T10:00:00Z",
+    slug: "bigquery-analytics"
+  },
+  {
+    id: "ds_postgres_prod",
+    organizationId: "org_demo",
+    name: "Production PostgreSQL",
+    dialect: "postgres",
+    credentials: null,
+    readOnly: true,
+    maxPoolSize: 10,
+    timeoutMs: 15e3,
+    allowedTables: null,
+    blockedColumns: null,
+    enabled: true,
+    createdAt: "2026-03-18T08:30:00Z",
+    updatedAt: "2026-03-22T14:00:00Z",
+    slug: "production-postgresql"
+  },
+  {
+    id: "ds_snowflake_dw",
+    organizationId: "org_demo",
+    name: "Snowflake Data Warehouse",
+    dialect: "snowflake",
+    credentials: null,
+    readOnly: true,
+    maxPoolSize: null,
+    timeoutMs: 3e4,
+    allowedTables: null,
+    blockedColumns: null,
+    enabled: true,
+    createdAt: "2026-03-15T09:00:00Z",
+    updatedAt: "2026-03-21T11:00:00Z",
+    slug: "snowflake-data-warehouse"
+  },
+  {
+    id: "ds_mongodb_events",
+    organizationId: "org_demo",
+    name: "Event Store (MongoDB)",
+    dialect: "mongodb",
+    credentials: null,
+    readOnly: true,
+    maxPoolSize: 5,
+    timeoutMs: 1e4,
+    allowedTables: null,
+    blockedColumns: null,
+    enabled: false,
+    createdAt: "2026-03-10T12:00:00Z",
+    updatedAt: "2026-03-19T16:00:00Z",
+    slug: "event-store-mongodb"
+  },
+  {
+    id: "ds_redis_cache",
+    organizationId: "org_demo",
+    name: "Redis Cache Layer",
+    dialect: "redis",
+    credentials: null,
+    readOnly: false,
+    maxPoolSize: 20,
+    timeoutMs: 5e3,
+    allowedTables: null,
+    blockedColumns: null,
+    enabled: true,
+    createdAt: "2026-03-12T07:00:00Z",
+    updatedAt: "2026-03-23T09:00:00Z",
+    slug: "redis-cache-layer"
+  },
+  {
+    id: "ds_pinecone_vectors",
+    organizationId: "org_demo",
+    name: "Pinecone Embeddings",
+    dialect: "pinecone",
+    credentials: null,
+    readOnly: true,
+    maxPoolSize: null,
+    timeoutMs: 2e4,
+    allowedTables: null,
+    blockedColumns: null,
+    enabled: true,
+    createdAt: "2026-03-22T15:00:00Z",
+    updatedAt: "2026-03-25T10:00:00Z",
+    slug: "pinecone-embeddings"
+  }
+];
+function getDialectLabel(dialect) {
+  if (!dialect) return "Unknown";
+  for (const category of DIALECT_CATEGORIES) {
+    const found = category.dialects.find((d) => d.value === dialect);
+    if (found) return found.label;
+  }
+  return dialect;
+}
+function getDialectGradient(dialect) {
+  if (!dialect) return "from-gray-400 to-gray-500";
+  const category = findCategory(dialect);
+  return category?.gradient ?? "from-gray-400 to-gray-500";
+}
+function getDialectIcon(dialect) {
+  if (!dialect) return CircleStackIcon;
+  const category = findCategory(dialect);
+  return category?.icon ?? CircleStackIcon;
+}
+var DIALECT_LOGO = {
+  bigquery: "/logos/datasources/bigquery.svg",
+  postgres: "/logos/datasources/postgres.svg",
+  postgresql: "/logos/datasources/postgres.svg",
+  mysql: "/logos/datasources/mysql.svg",
+  mariadb: "/logos/datasources/mariadb.svg",
+  snowflake: "/logos/datasources/snowflake.svg",
+  mongodb: "/logos/datasources/mongodb.svg",
+  redis: "/logos/datasources/redis.svg",
+  clickhouse: "/logos/datasources/clickhouse.svg",
+  elasticsearch: "/logos/datasources/elasticsearch.svg",
+  duckdb: "/logos/datasources/duckdb.svg",
+  sqlite: "/logos/datasources/sqlite.svg",
+  oracle: "/logos/datasources/oracle.svg",
+  mssql: "/logos/datasources/mssql.svg",
+  sqlserver: "/logos/datasources/mssql.svg",
+  cassandra: "/logos/datasources/cassandra.svg",
+  dynamodb: "/logos/datasources/dynamodb.svg",
+  cockroach: "/logos/datasources/cockroachdb.svg",
+  cockroachdb: "/logos/datasources/cockroachdb.svg",
+  supabase: "/logos/datasources/supabase.svg",
+  firebase: "/logos/datasources/firebase.svg",
+  neo4j: "/logos/datasources/neo4j.svg"
+};
+function getDialectLogoSrc(dialect) {
+  if (!dialect) return null;
+  return DIALECT_LOGO[dialect.toLowerCase()] ?? null;
+}
+function DatasourcesPageView({
+  labels,
+  datasources: externalDatasources,
+  useSampleData = false,
+  onCreate
+}) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [localDatasources, setLocalDatasources] = useState(
+    useSampleData ? SAMPLE_DATASOURCES : []
+  );
+  const datasources = externalDatasources ?? localDatasources;
+  const isEmpty = datasources.length === 0;
+  function handleCreate(data) {
+    if (onCreate) {
+      onCreate(data);
+      return;
+    }
+    const newDs = {
+      id: `ds_${Date.now()}`,
+      organizationId: "org_demo",
+      name: data.name,
+      dialect: data.dialect,
+      credentials: null,
+      readOnly: data.readOnly ?? true,
+      maxPoolSize: null,
+      timeoutMs: 3e4,
+      allowedTables: null,
+      blockedColumns: null,
+      enabled: true,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      slug: data.name.toLowerCase().replace(/\s+/g, "-")
+    };
+    setLocalDatasources((previous) => [...previous, newDs]);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(
+      HeroSection,
+      {
+        icon: /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-5 w-5" }),
+        label: labels.title,
+        title: labels.title,
+        subtitle: labels.subtitle,
+        gradient: "from-amber-500 to-orange-600",
+        toolbar: /* @__PURE__ */ jsx(
+          CreateActionButton,
+          {
+            mode: "desktop",
+            label: labels.addDatasource,
+            onClick: () => setModalOpen(true),
+            accent: "amber"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CreateActionButton,
+      {
+        mode: "mobile",
+        label: labels.addDatasource,
+        onClick: () => setModalOpen(true),
+        accent: "amber"
+      }
+    ),
+    isEmpty ? /* @__PURE__ */ jsx(
+      PageEmptyState,
+      {
+        title: labels.emptyTitle,
+        message: labels.emptyDescription,
+        iconName: "link",
+        customIcon: /* @__PURE__ */ jsx(CircleStackIcon, { className: "h-10 w-10 text-amber-500 dark:text-amber-400" })
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: datasources.map((ds) => {
+      const Icon = getDialectIcon(ds.dialect);
+      const gradient = getDialectGradient(ds.dialect);
+      const dialectLabel = getDialectLabel(ds.dialect);
+      const logoSrc = getDialectLogoSrc(ds.dialect);
+      const iconElement = logoSrc ? /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-black/5 dark:bg-white/10 dark:ring-white/10", children: /* @__PURE__ */ jsx("img", { src: logoSrc, alt: dialectLabel, className: "h-7 w-7 object-contain" }) }) : /* @__PURE__ */ jsx("div", { className: `flex h-11 w-11 items-center justify-center rounded-lg bg-gradient-to-br ${gradient} shadow-lg`, children: /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 text-white" }) });
+      return /* @__PURE__ */ jsx(
+        EntityCard,
+        {
+          accentGradient: gradient,
+          icon: iconElement,
+          title: ds.name ?? ds.id,
+          subtitle: dialectLabel,
+          status: /* @__PURE__ */ jsx(Badge, { color: ds.enabled ? "emerald" : "zinc", children: ds.enabled ? labels.enabled : labels.disabled }),
+          footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-400 dark:text-gray-500", children: [
+            ds.readOnly && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-900/30 dark:text-blue-300", children: "Read-only" }),
+            ds.timeoutMs && /* @__PURE__ */ jsxs("span", { children: [
+              ds.timeoutMs / 1e3,
+              "s timeout"
+            ] })
+          ] }),
+          children: /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              labels.dialect,
+              ": ",
+              dialectLabel
+            ] }),
+            ds.slug && /* @__PURE__ */ jsxs("div", { className: "truncate text-gray-400", children: [
+              "/",
+              ds.slug
+            ] })
+          ] })
+        },
+        ds.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      DatasourceModal,
+      {
+        open: modalOpen,
+        onClose: () => setModalOpen(false),
+        labels,
+        onSave: handleCreate
+      }
+    )
+  ] });
+}
+
+export { AgentsConfigPageView, AgentsModelsPageView, AgentsPromptsPageView, AgentsToolDefinitionsPageView, DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, DatasourcesPageView, RulesPageView, TOOL_TYPES, UsersPageView, findCategory, findDialect, jsonSchemaToParameters, parametersToJsonSchema };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map