@datatechsolutions/ui 2.11.83 → 2.11.84

package/dist/platform/pages/index.mjs

@@ -1,118 +1,23 @@
 "use client";
-import { defaultRuleForm, RuleForm } from '../../chunk-UVGMKHWH.mjs';
+import { adaptWorkflowGraphToUi, formatDurationMs } from '../../chunk-UQXVCVAN.mjs';
+import { WorkflowWorkspace } from '../../chunk-MNQEZL7B.mjs';
+export { RolesPageView, UsersPageView } from '../../chunk-MNQEZL7B.mjs';
+import { DatasourceModal, findCategory, DIALECT_CATEGORIES } from '../../chunk-EDE36MKE.mjs';
+export { DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, findCategory, findDialect } from '../../chunk-EDE36MKE.mjs';
+import { defaultRuleForm, RuleForm, ExecutionTimelinePanel } from '../../chunk-63AL2RN5.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-BH2AU3LG.mjs';
+import { HeroSection, PageLoadingState, PageEmptyState, EntityCard, Badge, ManagementPageLayout, CreateActionButton, Button, GlassModal, FormGrid, FormSelect, FormInput, FormTextarea, SectionHeader, Text, Form, FormActionsRow, Table, TableHead, TableRow, TableHeader, TableBody, TableCell, InlineForm, CopyableId } from '../../chunk-I6WYV2AN.mjs';
+import { useLink } from '../../chunk-QWG2FMUN.mjs';
 import '../../chunk-D2JF6C3E.mjs';
+import '../../chunk-7VJ7CMMT.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';
+import { CubeTransparentIcon, CpuChipIcon, ChatBubbleLeftEllipsisIcon, WrenchScrewdriverIcon, AdjustmentsHorizontalIcon, CircleStackIcon, RectangleStackIcon, ClockIcon, LinkIcon, KeyIcon, ArrowPathIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
 
-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,
@@ -1106,408 +1011,6 @@ function pickAction(rule) {
   }
   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",
@@ -1771,7 +1274,749 @@ function DatasourcesPageView({
     )
   ] });
 }
+function DashboardPageView({ labels, appLogo }) {
+  const hero = /* @__PURE__ */ jsxs("div", { className: "w-full text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: appLogo }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 text-base text-gray-500 dark:text-gray-400", children: labels.subtitle })
+  ] });
+  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content: null });
+}
+function AgentsIndexPageView({ labels }) {
+  const Link = useLink();
+  const tiles = [
+    { id: "config", title: labels.configTitle, subtitle: labels.configSubtitle, href: "/agents/config", gradient: "from-violet-500 to-indigo-700", icon: CpuChipIcon },
+    { id: "tools", title: labels.toolDefinitionsTitle, subtitle: labels.toolDefinitionsSubtitle, href: "/agents/tool-definitions", gradient: "from-amber-500 to-orange-700", icon: WrenchScrewdriverIcon },
+    { id: "models", title: labels.modelsTitle, subtitle: labels.modelsSubtitle, href: "/agents/models", gradient: "from-emerald-500 to-teal-700", icon: CubeTransparentIcon },
+    { id: "prompts", title: labels.promptsTitle, subtitle: labels.promptsSubtitle, href: "/agents/prompts", gradient: "from-sky-500 to-blue-700", icon: ChatBubbleLeftEllipsisIcon }
+  ];
+  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"
+    }
+  );
+  const content = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: tiles.map((tile) => {
+    const Icon = tile.icon;
+    return /* @__PURE__ */ jsx(Link, { href: tile.href, className: "block focus:outline-none", children: /* @__PURE__ */ jsx(
+      EntityCard,
+      {
+        accentGradient: tile.gradient,
+        icon: /* @__PURE__ */ jsx("div", { className: `flex h-11 w-11 items-center justify-center rounded-lg bg-gradient-to-br ${tile.gradient} shadow-lg`, children: /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6 text-white" }) }),
+        title: tile.title,
+        children: /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: tile.subtitle })
+      }
+    ) }, tile.id);
+  }) });
+  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
+}
+function WorkflowsPageView({ labels, workflows, onCreate, onUpdateMeta, onPublish }) {
+  const selectedWorkflow = workflows[0] ?? null;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(
+      SectionHeader,
+      {
+        icon: /* @__PURE__ */ jsx(RectangleStackIcon, { className: "h-5 w-5 text-white" }),
+        title: labels.title,
+        subtitle: labels.subtitle,
+        gradient: "from-sky-500 to-indigo-600"
+      }
+    ),
+    /* @__PURE__ */ jsxs("section", { className: "liquid-surface rounded-2xl p-4 space-y-3", children: [
+      /* @__PURE__ */ jsx(Text, { className: "font-semibold text-slate-900 dark:text-slate-100", children: labels.add }),
+      /* @__PURE__ */ jsx(
+        Form,
+        {
+          onSubmit: (event) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            const name = String(formData.get("name") ?? "").trim();
+            const description = String(formData.get("description") ?? "").trim();
+            if (!name) return;
+            onCreate({ name, description });
+            event.currentTarget.reset();
+          },
+          children: /* @__PURE__ */ jsxs(FormGrid, { children: [
+            /* @__PURE__ */ jsx(FormInput, { name: "name", label: labels.workflowName, placeholder: labels.workflowNamePlaceholder, required: true }),
+            /* @__PURE__ */ jsx(FormTextarea, { name: "description", label: labels.description, placeholder: labels.workflowDescriptionPlaceholder, rows: 3 }),
+            /* @__PURE__ */ jsx(FormActionsRow, { children: /* @__PURE__ */ jsx(Button, { type: "submit", children: labels.create }) })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "liquid-surface rounded-2xl p-4 space-y-3", children: [
+      /* @__PURE__ */ jsx(Text, { className: "font-semibold text-slate-900 dark:text-slate-100", children: labels.registry }),
+      /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: labels.name }),
+          /* @__PURE__ */ jsx(TableHeader, { children: labels.description }),
+          /* @__PURE__ */ jsx(TableHeader, { children: labels.version }),
+          /* @__PURE__ */ jsx(TableHeader, { children: labels.status }),
+          /* @__PURE__ */ jsx(TableHeader, { children: labels.actions })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: workflows.map((workflow) => /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableCell, { children: workflow.name }),
+          /* @__PURE__ */ jsx(TableCell, { children: workflow.description }),
+          /* @__PURE__ */ jsx(TableCell, { children: String(workflow.version) }),
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { children: workflow.isDraft ? labels.statusDraft : labels.statusPublished }) }),
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Form,
+              {
+                onSubmit: (event) => {
+                  event.preventDefault();
+                  onUpdateMeta({
+                    workflowId: workflow.id,
+                    name: workflow.name ?? "",
+                    description: workflow.description ?? ""
+                  });
+                },
+                children: /* @__PURE__ */ jsx(InlineForm, { children: /* @__PURE__ */ jsx(Button, { type: "submit", outline: true, children: labels.saveMeta }) })
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { type: "button", color: "sky", onClick: () => onPublish(workflow.id), children: labels.publish })
+          ] }) })
+        ] }, workflow.id)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "liquid-surface rounded-2xl p-4 space-y-3", children: [
+      /* @__PURE__ */ jsx(Text, { className: "font-semibold text-slate-900 dark:text-slate-100", children: labels.workspace }),
+      selectedWorkflow ? /* @__PURE__ */ jsx("div", { className: "min-h-[680px] rounded-2xl border border-white/65 dark:border-white/12 overflow-hidden", children: /* @__PURE__ */ jsx(WorkflowWorkspace, { graph: adaptWorkflowGraphToUi(selectedWorkflow.graph) }) }) : /* @__PURE__ */ jsx(Text, { children: labels.empty })
+    ] })
+  ] });
+}
+var BADGE_COLOR = {
+  completed: "emerald",
+  failed: "rose",
+  running: "sky",
+  pending: "amber",
+  cancelled: "zinc"
+};
+function WorkflowRunsPageView({ labels, runs, loading, onCancel, onReplay, onView, onViewTimeline }) {
+  const [statusFilter, setStatusFilter] = useState("all");
+  const statusOptions = useMemo(() => [
+    { value: "all", label: labels.filterAll },
+    { value: "pending", label: labels.statusPending },
+    { value: "running", label: labels.statusRunning },
+    { value: "completed", label: labels.statusCompleted },
+    { value: "failed", label: labels.statusFailed },
+    { value: "cancelled", label: labels.statusCancelled }
+  ], [labels]);
+  const statusLabelFor = (status) => {
+    switch (status) {
+      case "pending":
+        return labels.statusPending;
+      case "running":
+        return labels.statusRunning;
+      case "completed":
+        return labels.statusCompleted;
+      case "failed":
+        return labels.statusFailed;
+      case "cancelled":
+        return labels.statusCancelled;
+      default:
+        return status;
+    }
+  };
+  const filteredRuns = statusFilter === "all" ? runs : runs.filter((run) => run.status === statusFilter);
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(ClockIcon, { className: "h-5 w-5" }),
+      label: labels.title,
+      title: labels.title,
+      subtitle: labels.subtitle,
+      gradient: "from-indigo-500 to-sky-700",
+      toolbar: /* @__PURE__ */ jsx("div", { className: "w-48", children: /* @__PURE__ */ jsx(
+        FormSelect,
+        {
+          name: "statusFilter",
+          label: labels.filterStatus,
+          options: statusOptions,
+          value: statusFilter,
+          onValueChange: setStatusFilter
+        }
+      ) })
+    }
+  );
+  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : filteredRuns.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: filteredRuns.map((run) => /* @__PURE__ */ jsxs(
+    EntityCard,
+    {
+      accentGradient: "from-indigo-500 to-sky-700",
+      icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-indigo-500/10 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400", children: /* @__PURE__ */ jsx(ClockIcon, { className: "h-6 w-6" }) }),
+      title: run.id.slice(0, 8),
+      subtitle: `${labels.startedAt}: ${new Date(run.createdAt).toLocaleString()}`,
+      status: /* @__PURE__ */ jsx(Badge, { color: BADGE_COLOR[run.status] ?? "zinc", children: statusLabelFor(run.status) }),
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        onView && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onView(run), children: labels.view }),
+        onViewTimeline && labels.timeline && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onViewTimeline(run), children: labels.timeline }),
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => onReplay(run), children: labels.replay }),
+        run.status === "running" && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", color: "rose", onClick: () => onCancel(run), children: labels.cancel })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs("dl", { className: "mt-1 grid grid-cols-2 gap-1 text-xs text-slate-500 dark:text-slate-400", children: [
+          /* @__PURE__ */ jsx("dt", { children: labels.duration }),
+          /* @__PURE__ */ jsx("dd", { className: "text-right", children: formatDurationMs(run.totalDurationMs) }),
+          /* @__PURE__ */ jsx("dt", { children: labels.triggeredBy }),
+          /* @__PURE__ */ jsx("dd", { className: "text-right truncate", children: run.triggeredBy || "\u2014" })
+        ] }),
+        run.error && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-xs text-rose-600 dark:text-rose-400", children: run.error })
+      ]
+    },
+    run.id
+  )) });
+  return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content });
+}
+function RunTimelinePageView({ labels, entries, loading, runId }) {
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(ClockIcon, { className: "h-5 w-5" }),
+      label: labels.title,
+      title: labels.title,
+      subtitle: `${labels.subtitle} \u2014 ${runId.slice(0, 8)}`,
+      gradient: "from-indigo-500 to-violet-700"
+    }
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content: /* @__PURE__ */ jsx(PageLoadingState, {}) });
+  }
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(
+      ManagementPageLayout,
+      {
+        hero,
+        content: /* @__PURE__ */ jsx(PageEmptyState, { title: labels.empty ?? "", message: "", iconName: "folder-open" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ManagementPageLayout,
+    {
+      hero,
+      content: /* @__PURE__ */ jsx(
+        ExecutionTimelinePanel,
+        {
+          entries,
+          labels
+        }
+      )
+    }
+  );
+}
+var PROVIDER_PRESETS = {
+  anthropic_api: {
+    label: "Anthropic API",
+    description: "Claude Opus, Sonnet, Haiku via api.anthropic.com",
+    exampleModels: ["claude-opus-4-7", "claude-sonnet-4-6"]
+  },
+  openai_api: {
+    label: "OpenAI API",
+    description: "GPT-4o, o3, o4-mini via api.openai.com",
+    exampleModels: ["gpt-4o", "gpt-4o-mini"]
+  },
+  aws_bedrock: {
+    label: "AWS Bedrock",
+    description: "Anthropic / Meta / Mistral / Nova served through Bedrock",
+    needsRegion: true,
+    defaultRegion: "us-east-1",
+    exampleModels: ["amazon.nova-lite-v1:0", "anthropic.claude-3-5-sonnet-20241022-v2:0"]
+  },
+  google_vertex: {
+    label: "Google Vertex AI",
+    description: "Gemini + third-party models on Vertex",
+    needsRegion: true,
+    defaultRegion: "us-central1",
+    exampleModels: ["gemini-2.0-flash-exp", "gemini-1.5-pro"]
+  },
+  azure_openai: {
+    label: "Azure OpenAI",
+    description: "OpenAI deployments hosted on Azure",
+    needsRegion: true,
+    needsEndpoint: true,
+    defaultRegion: "eastus"
+  },
+  groq: {
+    label: "Groq",
+    description: "Low-latency Llama / Mixtral inference via api.groq.com"
+  },
+  mistral: {
+    label: "Mistral API",
+    description: "mistral.ai hosted open-weight + commercial models"
+  },
+  huggingface: {
+    label: "Hugging Face",
+    description: "Inference endpoints + serverless inference API",
+    needsEndpoint: true
+  },
+  ollama: {
+    label: "Ollama",
+    description: "Self-hosted Ollama server \u2014 provide the base URL",
+    needsEndpoint: true
+  },
+  custom: {
+    label: "Custom / OpenAI-compatible",
+    description: "Any OpenAI-API-compatible HTTP endpoint",
+    needsEndpoint: true
+  }
+};
+var PROVIDER_OPTIONS = Object.keys(PROVIDER_PRESETS).map((slug) => ({
+  value: slug,
+  label: PROVIDER_PRESETS[slug].label
+}));
+function ConnectionsPageView({
+  labels,
+  connections,
+  loading,
+  onCreate,
+  onUpdate,
+  onDelete,
+  onCreateSecret,
+  secretNamePrefix = "platform"
+}) {
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editing, setEditing] = useState(null);
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(LinkIcon, { className: "h-5 w-5" }),
+      label: labels.title,
+      title: labels.title,
+      subtitle: labels.subtitle,
+      gradient: "from-sky-500 to-indigo-600",
+      toolbar: /* @__PURE__ */ jsx(
+        CreateActionButton,
+        {
+          mode: "desktop",
+          label: labels.add,
+          onClick: () => setCreateOpen(true),
+          accent: "sky"
+        }
+      )
+    }
+  );
+  const mobileAction = /* @__PURE__ */ jsx(
+    CreateActionButton,
+    {
+      mode: "mobile",
+      label: labels.add,
+      onClick: () => setCreateOpen(true),
+      accent: "sky"
+    }
+  );
+  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : connections.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: connections.map((conn) => /* @__PURE__ */ jsx(
+    EntityCard,
+    {
+      accentGradient: "from-sky-500 to-indigo-600",
+      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(LinkIcon, { className: "h-6 w-6" }) }),
+      title: conn.name,
+      subtitle: providerLabel(conn.providerSlug),
+      status: /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx(Badge, { color: conn.enabled ? "emerald" : "zinc", children: conn.enabled ? labels.enable : labels.disable }),
+        conn.credentialRef ? /* @__PURE__ */ jsx(Badge, { color: "indigo", children: "Secret set" }) : /* @__PURE__ */ jsx(Badge, { color: "amber", children: "No secret" })
+      ] }),
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", outline: true, onClick: () => setEditing(conn), children: labels.edit }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            color: "rose",
+            onClick: async () => {
+              if (window.confirm(labels.deleteConfirm)) await onDelete(conn);
+            },
+            children: labels.delete
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxs("dl", { className: "mt-1 space-y-0.5 text-xs text-slate-500 dark:text-slate-400", children: [
+        conn.region && /* @__PURE__ */ jsx(Row, { label: "Region", value: conn.region }),
+        conn.endpoint && /* @__PURE__ */ jsx(Row, { label: "Endpoint", value: conn.endpoint }),
+        conn.modelFilter && conn.modelFilter.length > 0 && /* @__PURE__ */ jsx(Row, { label: "Models", value: conn.modelFilter.join(", ") })
+      ] })
+    },
+    conn.id
+  )) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    createOpen && /* @__PURE__ */ jsx(
+      ConnectionEditor,
+      {
+        title: labels.createTitle,
+        saveLabel: labels.save,
+        initial: defaultConnectionFormValue(),
+        mode: "create",
+        onClose: () => setCreateOpen(false),
+        onCreateSecret,
+        secretNamePrefix,
+        onSubmit: async (wire) => {
+          await onCreate(wire);
+          setCreateOpen(false);
+        }
+      }
+    ),
+    editing && /* @__PURE__ */ jsx(
+      ConnectionEditor,
+      {
+        title: labels.editTitle,
+        saveLabel: labels.save,
+        initial: modelToFormValue(editing),
+        mode: "edit",
+        onClose: () => setEditing(null),
+        onCreateSecret,
+        secretNamePrefix,
+        onSubmit: async (wire) => {
+          await onUpdate(editing.id, wire);
+          setEditing(null);
+        }
+      }
+    )
+  ] });
+}
+function ConnectionEditor({
+  title,
+  saveLabel,
+  initial,
+  mode,
+  onClose,
+  onSubmit,
+  onCreateSecret,
+  secretNamePrefix
+}) {
+  const [value, setValue] = useState(initial);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const preset = PROVIDER_PRESETS[value.providerSlug];
+  const handleSubmit = async () => {
+    setError(null);
+    setSubmitting(true);
+    try {
+      let credentialRef = value.credentialRef;
+      if (value.apiKey.trim().length > 0) {
+        const secret = await onCreateSecret(`${secretNamePrefix}-${value.providerSlug}-${Date.now()}`, value.apiKey.trim());
+        credentialRef = secret.id;
+      }
+      const modelFilter = parseCsv(value.modelFilter);
+      let config;
+      const trimmed = value.configJson.trim();
+      if (trimmed.length > 0) {
+        try {
+          const parsed = JSON.parse(trimmed);
+          if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+            throw new Error("config must be a JSON object");
+          }
+          config = parsed;
+        } catch (e) {
+          throw new Error(`Invalid config JSON: ${e.message}`);
+        }
+      }
+      if (mode === "create") {
+        const wire = {
+          providerSlug: value.providerSlug,
+          name: value.name.trim(),
+          ...value.region.trim() && { region: value.region.trim() },
+          ...value.endpoint.trim() && { endpoint: value.endpoint.trim() },
+          ...credentialRef && { credentialRef },
+          ...modelFilter.length > 0 && { modelFilter },
+          ...config && { config }
+        };
+        await onSubmit(wire);
+      } else {
+        const wire = {
+          name: value.name.trim() || void 0,
+          region: value.region.trim() || void 0,
+          endpoint: value.endpoint.trim() || void 0,
+          ...credentialRef && { credentialRef },
+          ...modelFilter.length > 0 ? { modelFilter } : {},
+          ...config && { config }
+        };
+        await onSubmit(wire);
+      }
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  useEffect(() => {
+    if (mode === "create" && preset.needsRegion && !value.region && preset.defaultRegion) {
+      setValue((v) => ({ ...v, region: preset.defaultRegion ?? "" }));
+    }
+  }, [mode, preset, value.region]);
+  const placeholderModels = useMemo(() => {
+    return preset.exampleModels?.join(", ") ?? "";
+  }, [preset]);
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open: true,
+      onClose,
+      title,
+      maxWidth: "2xl",
+      showFormFooter: true,
+      submitLabel: submitting ? "\u2026" : saveLabel,
+      onSubmit: (event) => {
+        event.preventDefault();
+        void handleSubmit();
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs(FormGrid, { children: [
+          /* @__PURE__ */ jsx(
+            FormSelect,
+            {
+              label: "Provider",
+              value: value.providerSlug,
+              options: PROVIDER_OPTIONS,
+              onValueChange: (slug) => setValue((v) => ({ ...v, providerSlug: slug })),
+              disabled: mode === "edit",
+              hint: preset.description
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Display name",
+              required: true,
+              value: value.name,
+              onValueChange: (name) => setValue((v) => ({ ...v, name })),
+              placeholder: "Production Bedrock, Claude dev, \u2026"
+            }
+          ),
+          preset.needsRegion && /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Region",
+              value: value.region,
+              onValueChange: (region) => setValue((v) => ({ ...v, region })),
+              placeholder: preset.defaultRegion
+            }
+          ),
+          preset.needsEndpoint && /* @__PURE__ */ jsx(
+            FormInput,
+            {
+              label: "Endpoint URL",
+              value: value.endpoint,
+              onValueChange: (endpoint) => setValue((v) => ({ ...v, endpoint })),
+              placeholder: "https://..."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: value.credentialRef ? "Rotate API key (leave blank to keep current)" : "API key",
+            type: "password",
+            value: value.apiKey,
+            onValueChange: (apiKey) => setValue((v) => ({ ...v, apiKey })),
+            placeholder: value.credentialRef ? "\u2022\u2022\u2022 stored in vault" : "sk-...",
+            hint: value.credentialRef ? `Stored secret: ${value.credentialRef.slice(0, 8)}\u2026` : "Plaintext \u2014 pushed to windsock vault on save, never persisted here."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label: "Model filter (comma-separated, optional)",
+            value: value.modelFilter,
+            onValueChange: (modelFilter) => setValue((v) => ({ ...v, modelFilter })),
+            placeholder: placeholderModels,
+            hint: "Leave blank to allow all models the provider exposes."
+          }
+        ),
+        /* @__PURE__ */ jsxs("details", { className: "rounded-xl border border-slate-200 bg-slate-50/60 p-3 text-sm dark:border-slate-700 dark:bg-slate-900/40", children: [
+          /* @__PURE__ */ jsx("summary", { className: "cursor-pointer font-medium text-slate-700 dark:text-slate-200", children: "Advanced config (JSON)" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
+            FormTextarea,
+            {
+              rows: 4,
+              value: value.configJson,
+              onValueChange: (configJson) => setValue((v) => ({ ...v, configJson })),
+              placeholder: '{\n  "temperature": 0.2\n}',
+              hint: "Free-form JSON passed to the runtime provider \u2014 e.g. Bedrock guardrail ids, Azure deployment overrides."
+            }
+          ) })
+        ] }),
+        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 Row({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-1 truncate", children: [
+    /* @__PURE__ */ jsxs("dt", { className: "font-medium", children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx("dd", { className: "truncate", children: value })
+  ] });
+}
+function providerLabel(slug) {
+  if (!slug) return "Unknown provider";
+  const key = slug;
+  return PROVIDER_PRESETS[key]?.label ?? slug;
+}
+function parseCsv(raw) {
+  return raw.split(",").map((entry) => entry.trim()).filter((entry) => entry.length > 0);
+}
+function defaultConnectionFormValue() {
+  return {
+    providerSlug: "anthropic_api",
+    name: "",
+    region: "",
+    endpoint: "",
+    apiKey: "",
+    credentialRef: "",
+    modelFilter: "",
+    configJson: ""
+  };
+}
+function modelToFormValue(conn) {
+  return {
+    providerSlug: conn.providerSlug ?? "custom",
+    name: conn.name,
+    region: conn.region ?? "",
+    endpoint: conn.endpoint ?? "",
+    apiKey: "",
+    credentialRef: conn.credentialRef ?? "",
+    modelFilter: (conn.modelFilter ?? []).join(", "),
+    configJson: conn.config ? JSON.stringify(conn.config, null, 2) : ""
+  };
+}
+function CredentialsPageView({ labels, credentials, loading, onCreate, onRotate, onDisable }) {
+  const [createOpen, setCreateOpen] = useState(false);
+  const [rotateFor, setRotateFor] = useState(null);
+  const typeOptions = [
+    { value: "generic", label: labels.typeGeneric },
+    { value: "api_key", label: labels.typeApiKey },
+    { value: "oauth", label: labels.typeOAuth },
+    { value: "password", label: labels.typePassword }
+  ];
+  const hero = /* @__PURE__ */ jsx(
+    HeroSection,
+    {
+      icon: /* @__PURE__ */ jsx(KeyIcon, { className: "h-5 w-5" }),
+      label: labels.title,
+      title: labels.title,
+      subtitle: labels.subtitle,
+      gradient: "from-rose-500 to-orange-600",
+      toolbar: /* @__PURE__ */ jsx(
+        CreateActionButton,
+        {
+          mode: "desktop",
+          label: labels.addCredential,
+          onClick: () => setCreateOpen(true),
+          accent: "rose"
+        }
+      )
+    }
+  );
+  const mobileAction = /* @__PURE__ */ jsx(
+    CreateActionButton,
+    {
+      mode: "mobile",
+      label: labels.addCredential,
+      onClick: () => setCreateOpen(true),
+      accent: "rose"
+    }
+  );
+  const content = loading ? /* @__PURE__ */ jsx(PageLoadingState, {}) : credentials.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: credentials.map((secret) => /* @__PURE__ */ jsxs(
+    EntityCard,
+    {
+      accentGradient: "from-rose-500 to-orange-700",
+      icon: /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-rose-500/10 text-rose-600 dark:bg-rose-500/20 dark:text-rose-400", children: /* @__PURE__ */ jsx(KeyIcon, { className: "h-6 w-6" }) }),
+      title: secret.name,
+      subtitle: secret.secretType,
+      status: /* @__PURE__ */ jsx(Badge, { color: secret.disabled ? "zinc" : "emerald", children: secret.disabled ? labels.disable : "Active" }),
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx(CopyableId, { id: secret.secretId }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", outline: true, onClick: () => setRotateFor(secret), children: [
+            /* @__PURE__ */ jsx(ArrowPathIcon, { className: "mr-1 h-3.5 w-3.5" }),
+            labels.rotate
+          ] }),
+          !secret.disabled && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              color: "rose",
+              onClick: () => {
+                if (window.confirm(labels.disableConfirm)) onDisable(secret);
+              },
+              children: [
+                /* @__PURE__ */ jsx(TrashIcon, { className: "mr-1 h-3.5 w-3.5" }),
+                labels.disable
+              ]
+            }
+          )
+        ] })
+      ] }),
+      children: [
+        secret.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: secret.description }),
+        /* @__PURE__ */ jsxs("dl", { className: "mt-2 grid grid-cols-2 gap-1 text-xs text-slate-500 dark:text-slate-400", children: [
+          /* @__PURE__ */ jsx("dt", { children: labels.createdAt }),
+          /* @__PURE__ */ jsx("dd", { className: "text-right", children: new Date(secret.createdAt).toLocaleDateString() }),
+          /* @__PURE__ */ jsx("dt", { children: labels.expiresAt }),
+          /* @__PURE__ */ jsx("dd", { className: "text-right", children: secret.expiresAt ? new Date(secret.expiresAt).toLocaleDateString() : labels.neverExpires })
+        ] })
+      ]
+    },
+    secret.secretId
+  )) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ManagementPageLayout, { hero, content, mobileAction }),
+    /* @__PURE__ */ jsx(
+      GlassModal,
+      {
+        open: createOpen,
+        onClose: () => setCreateOpen(false),
+        title: labels.createTitle,
+        maxWidth: "lg",
+        showFormFooter: true,
+        submitLabel: labels.save,
+        onSubmit: (event) => {
+          const formData = new FormData(event.currentTarget);
+          const name = String(formData.get("name") ?? "").trim();
+          const value = String(formData.get("value") ?? "");
+          const secretType = String(formData.get("secretType") ?? "generic");
+          const description = String(formData.get("description") ?? "").trim() || void 0;
+          if (!name || !value) return;
+          onCreate({ name, value, secretType, description });
+          setCreateOpen(false);
+        },
+        children: /* @__PURE__ */ jsxs(FormGrid, { children: [
+          /* @__PURE__ */ jsx(FormInput, { name: "name", label: labels.name, placeholder: labels.namePlaceholder, required: true }),
+          /* @__PURE__ */ jsx(FormSelect, { name: "secretType", label: labels.type, options: typeOptions, defaultValue: "generic" }),
+          /* @__PURE__ */ jsx(FormInput, { name: "value", label: labels.value, placeholder: labels.valuePlaceholder, required: true, type: "password" }),
+          /* @__PURE__ */ jsx(FormTextarea, { name: "description", label: labels.description, placeholder: labels.descriptionPlaceholder, rows: 2 })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      GlassModal,
+      {
+        open: rotateFor !== null,
+        onClose: () => setRotateFor(null),
+        title: `${labels.rotate}: ${rotateFor?.name ?? ""}`,
+        maxWidth: "md",
+        showFormFooter: true,
+        submitLabel: labels.rotate,
+        onSubmit: (event) => {
+          const formData = new FormData(event.currentTarget);
+          const value = String(formData.get("value") ?? "");
+          if (!value || !rotateFor) return;
+          onRotate(rotateFor, value);
+          setRotateFor(null);
+        },
+        children: /* @__PURE__ */ jsx(FormGrid, { children: /* @__PURE__ */ jsx(FormInput, { name: "value", label: labels.value, placeholder: labels.valuePlaceholder, required: true, type: "password" }) })
+      }
+    )
+  ] });
+}
 
-export { AgentsConfigPageView, AgentsModelsPageView, AgentsPromptsPageView, AgentsToolDefinitionsPageView, DIALECT_CATEGORIES, DatasourceFormModal, DatasourceModal, DatasourcesPageView, RulesPageView, TOOL_TYPES, UsersPageView, findCategory, findDialect, jsonSchemaToParameters, parametersToJsonSchema };
+export { AgentsConfigPageView, AgentsIndexPageView, AgentsModelsPageView, AgentsPromptsPageView, AgentsToolDefinitionsPageView, ConnectionsPageView, CredentialsPageView, DashboardPageView, DatasourcesPageView, RulesPageView, RunTimelinePageView, TOOL_TYPES, WorkflowRunsPageView, WorkflowsPageView, jsonSchemaToParameters, parametersToJsonSchema };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map