@datatechsolutions/ui 2.11.42 → 2.11.44

package/dist/{chunk-HRQPV3H3.mjs → chunk-IWATRHQP.mjs}

@@ -8,7 +8,7 @@ import { Position, NodeResizer, MarkerType, useReactFlow, getBezierPath, BaseEdg
 import '@xyflow/react/dist/style.css';
 import { create } from 'zustand';
 import { PlusIcon, XMarkIcon } from '@heroicons/react/24/solid';
-import { Bars2Icon, CursorArrowRaysIcon, HandRaisedIcon, MagnifyingGlassPlusIcon, MagnifyingGlassMinusIcon, ArrowsPointingInIcon, ArrowUturnLeftIcon, ArrowUturnRightIcon, MapIcon, EllipsisHorizontalIcon, Squares2X2Icon, ArrowsRightLeftIcon, CommandLineIcon, ExclamationTriangleIcon, CpuChipIcon, TrashIcon, WrenchScrewdriverIcon, NewspaperIcon, ChartBarIcon, CloudIcon, ScaleIcon, AdjustmentsHorizontalIcon, CircleStackIcon, PlayIcon, StopIcon, ArrowsPointingOutIcon, CodeBracketIcon, GlobeAltIcon, DocumentTextIcon, ArrowPathIcon, BookOpenIcon, ChatBubbleLeftRightIcon, QuestionMarkCircleIcon, AdjustmentsVerticalIcon, Square3Stack3DIcon, DocumentMagnifyingGlassIcon, ListBulletIcon, PlayCircleIcon, PencilSquareIcon, ServerStackIcon, KeyIcon, RectangleGroupIcon, ChevronDownIcon, ChevronUpIcon, PresentationChartBarIcon, ChartPieIcon, ChartBarSquareIcon, CurrencyDollarIcon, ShieldCheckIcon, ClipboardDocumentCheckIcon, FireIcon, ShoppingBagIcon, UsersIcon, BuildingStorefrontIcon, PencilIcon, DocumentDuplicateIcon, ClipboardDocumentIcon, ClipboardIcon, PlusIcon as PlusIcon$1, XMarkIcon as XMarkIcon$1 } from '@heroicons/react/24/outline';
+import { Bars2Icon, CursorArrowRaysIcon, HandRaisedIcon, MagnifyingGlassPlusIcon, MagnifyingGlassMinusIcon, ArrowsPointingInIcon, ArrowUturnLeftIcon, ArrowUturnRightIcon, MapIcon, EllipsisHorizontalIcon, Squares2X2Icon, ArrowsRightLeftIcon, CommandLineIcon, ExclamationTriangleIcon, CpuChipIcon, TrashIcon, WrenchScrewdriverIcon, NewspaperIcon, ChartBarIcon, CloudIcon, ScaleIcon, AdjustmentsHorizontalIcon, CircleStackIcon, PlayIcon, StopIcon, ArrowsPointingOutIcon, CodeBracketIcon, GlobeAltIcon, DocumentTextIcon, ArrowPathIcon, BookOpenIcon, ChatBubbleLeftRightIcon, QuestionMarkCircleIcon, AdjustmentsVerticalIcon, Square3Stack3DIcon, DocumentMagnifyingGlassIcon, ListBulletIcon, PlayCircleIcon, PencilSquareIcon, ServerStackIcon, KeyIcon, RectangleGroupIcon, ChevronDownIcon, ChevronUpIcon, PresentationChartBarIcon, ChartPieIcon, ChartBarSquareIcon, CurrencyDollarIcon, ShieldCheckIcon, ClipboardDocumentCheckIcon, FireIcon, ShoppingBagIcon, UsersIcon, BuildingStorefrontIcon, PencilIcon, DocumentDuplicateIcon, ClipboardDocumentIcon, ClipboardIcon, PlusIcon as PlusIcon$1, XMarkIcon as XMarkIcon$1, TableCellsIcon, FunnelIcon, Cog6ToothIcon, VariableIcon, MagnifyingGlassIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DEFAULT_PASTE_OFFSET = 40;
@@ -1153,6 +1153,481 @@ function getEntityHandleColor(entityKey) {
 function getEntityMinimapColor(entityKey) {
   return presetFromKey(entityKey).minimapColor;
 }
+var DATASOURCE_LOGOS = {
+  bigquery: "/logos/datasources/bigquery.svg",
+  postgres: "/logos/datasources/postgres.svg",
+  snowflake: "/logos/datasources/snowflake.svg",
+  mongodb: "/logos/datasources/mongodb.svg",
+  redis: "/logos/datasources/redis.svg",
+  mysql: "/logos/datasources/mysql.svg",
+  clickhouse: "/logos/datasources/clickhouse.svg",
+  elasticsearch: "/logos/datasources/elasticsearch.svg",
+  duckdb: "/logos/datasources/duckdb.svg",
+  sqlite: "/logos/datasources/sqlite.svg",
+  mariadb: "/logos/datasources/mariadb.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",
+  supabase: "/logos/datasources/supabase.svg",
+  firebase: "/logos/datasources/firebase.svg",
+  neo4j: "/logos/datasources/neo4j.svg"
+};
+function getDatasourceLogo(datasourceId, dialect) {
+  const search = (dialect ?? datasourceId).toLowerCase();
+  for (const [key, url] of Object.entries(DATASOURCE_LOGOS)) {
+    if (search.includes(key)) return url;
+  }
+  return null;
+}
+var TYPE_COLORS = {
+  string: "bg-gray-500/10 text-gray-500 dark:text-gray-400",
+  varchar: "bg-gray-500/10 text-gray-500 dark:text-gray-400",
+  text: "bg-gray-500/10 text-gray-500 dark:text-gray-400",
+  integer: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  int: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  bigint: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  number: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  decimal: "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400",
+  float: "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400",
+  boolean: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+  date: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  timestamp: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  datetime: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  json: "bg-violet-500/10 text-violet-600 dark:text-violet-400",
+  jsonb: "bg-violet-500/10 text-violet-600 dark:text-violet-400",
+  uuid: "bg-teal-500/10 text-teal-600 dark:text-teal-400",
+  array: "bg-pink-500/10 text-pink-600 dark:text-pink-400"
+};
+var SIDEBAR_SECTIONS = [
+  { id: "connection", label: "Connection", icon: CircleStackIcon },
+  { id: "table", label: "Table", icon: TableCellsIcon },
+  { id: "columns", label: "Columns", icon: TableCellsIcon },
+  { id: "filters", label: "Filters", icon: FunnelIcon },
+  { id: "output", label: "Output", icon: Cog6ToothIcon }
+];
+function DatasourceNodeConfigForm({
+  open,
+  nodeId,
+  config,
+  onSave,
+  onCancel,
+  datasources,
+  onLoadTables,
+  onLoadSchema
+}) {
+  const t = useTranslations("agents.workflow.datasourceNodeConfig");
+  const [activeSectionId, setActiveSectionId] = useState("connection");
+  const [selectedDatasourceId, setSelectedDatasourceId] = useState(config.datasourceId ?? "");
+  const [selectedTable, setSelectedTable] = useState(config.table ?? "");
+  const [availableTables, setAvailableTables] = useState([]);
+  const [availableColumns, setAvailableColumns] = useState([]);
+  const [selectedColumns, setSelectedColumns] = useState([...config.selectedColumns ?? []]);
+  const [outputVariable, setOutputVariable] = useState(config.outputVariable);
+  const [limit, setLimit] = useState(config.limit);
+  const [filterVariables, setFilterVariables] = useState({ ...config.filterVariables });
+  const [tableSearch, setTableSearch] = useState("");
+  const [columnSearch, setColumnSearch] = useState("");
+  const allColumnNames = availableColumns.map((column) => column.name);
+  const allSelected = selectedColumns.length > 0 && selectedColumns.length === allColumnNames.length;
+  const selectedDatasource = datasources.find((datasource) => datasource.id === selectedDatasourceId);
+  const filteredTables = useMemo(
+    () => tableSearch ? availableTables.filter((table) => table.toLowerCase().includes(tableSearch.toLowerCase())) : availableTables,
+    [availableTables, tableSearch]
+  );
+  const filteredColumns = useMemo(
+    () => columnSearch ? availableColumns.filter((column) => column.name.toLowerCase().includes(columnSearch.toLowerCase())) : availableColumns,
+    [availableColumns, columnSearch]
+  );
+  const loadTables = useCallback(async (datasourceId) => {
+    if (!datasourceId) {
+      setAvailableTables([]);
+      return;
+    }
+    const tables = await onLoadTables(datasourceId);
+    setAvailableTables(tables);
+  }, [onLoadTables]);
+  const loadSchema = useCallback(async (datasourceId, table) => {
+    if (!datasourceId || !table) {
+      setAvailableColumns([]);
+      return;
+    }
+    const columns = await onLoadSchema(datasourceId, table);
+    setAvailableColumns(columns);
+  }, [onLoadSchema]);
+  useEffect(() => {
+    if (selectedDatasourceId) loadTables(selectedDatasourceId);
+  }, [selectedDatasourceId, loadTables]);
+  useEffect(() => {
+    if (selectedDatasourceId && selectedTable) loadSchema(selectedDatasourceId, selectedTable);
+  }, [selectedDatasourceId, selectedTable, loadSchema]);
+  const handleDatasourceChange = (datasourceId) => {
+    setSelectedDatasourceId(datasourceId);
+    setSelectedTable("");
+    setAvailableTables([]);
+    setAvailableColumns([]);
+    setSelectedColumns([]);
+    setFilterVariables({});
+    setTableSearch("");
+    setColumnSearch("");
+  };
+  const handleTableChange = (table) => {
+    setSelectedTable(table);
+    setAvailableColumns([]);
+    setSelectedColumns([]);
+    setFilterVariables({});
+    setColumnSearch("");
+  };
+  const handleToggleColumn = (columnName) => {
+    setSelectedColumns(
+      (previous) => previous.includes(columnName) ? previous.filter((name) => name !== columnName) : [...previous, columnName]
+    );
+  };
+  const handleAddFilter = () => {
+    setFilterVariables((previous) => ({ ...previous, [`field_${Object.keys(previous).length}`]: "" }));
+  };
+  const handleUpdateFilterVariable = (oldKey, newKey) => {
+    setFilterVariables((previous) => {
+      const updated = { ...previous };
+      const value = updated[oldKey] ?? "";
+      delete updated[oldKey];
+      updated[newKey] = value;
+      return updated;
+    });
+  };
+  const handleUpdateFilterField = (key, newValue) => {
+    setFilterVariables((previous) => ({ ...previous, [key]: newValue }));
+  };
+  const handleRemoveFilter = (key) => {
+    setFilterVariables((previous) => {
+      const updated = { ...previous };
+      delete updated[key];
+      return updated;
+    });
+  };
+  const handleSave = () => {
+    const cleanedFilters = {};
+    for (const [key, value] of Object.entries(filterVariables)) {
+      if (key.trim() && value.trim()) cleanedFilters[key.trim()] = value.trim();
+    }
+    onSave({
+      ...config,
+      datasourceId: selectedDatasourceId,
+      dialect: selectedDatasource?.dialect ?? "",
+      table: selectedTable,
+      selectedColumns,
+      outputVariable: outputVariable.trim(),
+      limit,
+      filterVariables: cleanedFilters
+    });
+  };
+  const filterEntries = Object.entries(filterVariables);
+  const canSave = selectedDatasourceId && selectedTable && selectedColumns.length > 0;
+  function renderSection() {
+    switch (activeSectionId) {
+      case "connection":
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("datasourceHelp") }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: datasources.map((datasource) => {
+            const isSelected = datasource.id === selectedDatasourceId;
+            const logo2 = getDatasourceLogo(datasource.id, datasource.dialect);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  handleDatasourceChange(datasource.id);
+                  setActiveSectionId("table");
+                },
+                className: `flex items-center gap-3 rounded-xl border px-3 py-2.5 text-left transition-all ${isSelected ? "border-cyan-500/50 bg-cyan-500/5 ring-1 ring-cyan-500/20 dark:border-cyan-400/40 dark:bg-cyan-400/5" : "border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm dark:border-white/10 dark:bg-white/[0.03] dark:hover:border-white/20"}`,
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center", children: logo2 ? /* @__PURE__ */ jsx("img", { src: logo2, alt: datasource.dialect, className: "h-7 w-7" }) : /* @__PURE__ */ jsx(ServerStackIcon, { className: "h-6 w-6 text-gray-400" }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-gray-900 dark:text-white", children: datasource.name }),
+                    /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: datasource.dialect })
+                  ] }),
+                  isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 shrink-0 text-cyan-500 dark:text-cyan-400" })
+                ]
+              },
+              datasource.id
+            );
+          }) })
+        ] });
+      case "table":
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("tableHelp") }),
+          !selectedDatasourceId ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-xs text-gray-400", children: t("selectDatasource") }) : /* @__PURE__ */ jsxs("div", { className: "liquid-surface rounded-xl border border-white/30 dark:border-white/10", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-gray-200/50 px-3 py-2 dark:border-white/5", children: [
+              /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "h-3.5 w-3.5 text-gray-400" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: tableSearch,
+                  onChange: (event) => setTableSearch(event.target.value),
+                  placeholder: t("selectTable"),
+                  className: "flex-1 bg-transparent text-xs text-gray-900 outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500"
+                }
+              ),
+              availableTables.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: availableTables.length })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-y-auto p-1", children: [
+              filteredTables.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-[10px] text-gray-400", children: t("noColumnsAvailable") }),
+              filteredTables.map((table) => {
+                const isSelected = table === selectedTable;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      handleTableChange(table);
+                      setActiveSectionId("columns");
+                    },
+                    className: `flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors ${isSelected ? "bg-cyan-500/10 font-semibold text-cyan-700 dark:text-cyan-300" : "text-gray-700 hover:bg-gray-100/60 dark:text-gray-300 dark:hover:bg-white/5"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(TableCellsIcon, { className: "h-3.5 w-3.5 shrink-0 text-gray-400" }),
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: table }),
+                      isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-cyan-500" })
+                    ]
+                  },
+                  table
+                );
+              })
+            ] })
+          ] })
+        ] });
+      case "columns":
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+              selectedColumns.length,
+              "/",
+              availableColumns.length,
+              " selected"
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSelectedColumns(allSelected ? [] : [...allColumnNames]),
+                disabled: availableColumns.length === 0,
+                className: "text-[10px] font-semibold text-cyan-600 hover:text-cyan-700 disabled:opacity-40 dark:text-cyan-400",
+                children: allSelected ? t("deselectAll") : t("selectAll")
+              }
+            )
+          ] }),
+          !selectedTable ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-xs text-gray-400", children: t("selectTable") }) : /* @__PURE__ */ jsxs("div", { className: "liquid-surface rounded-xl border border-white/30 dark:border-white/10", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-gray-200/50 px-3 py-2 dark:border-white/5", children: [
+              /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "h-3.5 w-3.5 text-gray-400" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: columnSearch,
+                  onChange: (event) => setColumnSearch(event.target.value),
+                  placeholder: "Search columns...",
+                  className: "flex-1 bg-transparent text-xs text-gray-900 outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-y-auto p-1", children: [
+              filteredColumns.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-[10px] text-gray-400", children: t("noColumnsAvailable") }),
+              filteredColumns.map((column) => {
+                const isSelected = selectedColumns.includes(column.name);
+                const typeColor = TYPE_COLORS[column.type.toLowerCase()] ?? TYPE_COLORS.string;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleToggleColumn(column.name),
+                    className: `flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left transition-colors ${isSelected ? "bg-cyan-500/8 dark:bg-cyan-400/5" : "hover:bg-gray-100/60 dark:hover:bg-white/5"}`,
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: `flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors ${isSelected ? "border-cyan-500 bg-cyan-500 dark:border-cyan-400 dark:bg-cyan-400" : "border-gray-300 dark:border-gray-600"}`, children: isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-2.5 w-2.5 text-white" }) }),
+                      /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate text-xs text-gray-900 dark:text-white", children: [
+                        column.name,
+                        column.nullable && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[9px] text-gray-400", children: "?" })
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { className: `shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-medium ${typeColor}`, children: column.type })
+                    ]
+                  },
+                  column.name
+                );
+              })
+            ] })
+          ] })
+        ] });
+      case "filters":
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("filtersHelp") }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: handleAddFilter,
+                className: "flex items-center gap-1 text-[10px] font-semibold text-cyan-600 hover:text-cyan-700 dark:text-cyan-400",
+                children: [
+                  /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-3 w-3" }),
+                  t("addFilter")
+                ]
+              }
+            )
+          ] }),
+          filterEntries.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 py-8", children: [
+            /* @__PURE__ */ jsx(FunnelIcon, { className: "h-8 w-8 text-gray-300 dark:text-gray-600" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: "No filters configured" }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: handleAddFilter,
+                className: "flex items-center gap-1 rounded-lg bg-cyan-500/10 px-3 py-1.5 text-[10px] font-semibold text-cyan-600 hover:bg-cyan-500/15 dark:text-cyan-400",
+                children: [
+                  /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-3 w-3" }),
+                  t("addFilter")
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filterEntries.map(([variableName, columnName], index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 dark:border-white/10 dark:bg-white/[0.03]", children: [
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: columnName,
+                onChange: (event) => handleUpdateFilterField(variableName, event.target.value),
+                className: "flex-1 rounded bg-transparent text-xs text-gray-900 outline-none dark:text-white",
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: t("columnName") }),
+                  availableColumns.map((column) => /* @__PURE__ */ jsx("option", { value: column.name, children: column.name }, column.name))
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-gray-400", children: "=" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: variableName,
+                onChange: (event) => handleUpdateFilterVariable(variableName, event.target.value),
+                placeholder: t("variableReference"),
+                className: "flex-1 bg-transparent text-xs text-gray-900 outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleRemoveFilter(variableName),
+                className: "shrink-0 rounded-md p-1 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20",
+                children: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3 w-3" })
+              }
+            )
+          ] }, index)) })
+        ] });
+      case "output":
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("outputVariableLabel") }),
+            /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] text-gray-500 dark:text-gray-400", children: t("outputVariableHelp") }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2.5 dark:border-white/10 dark:bg-white/[0.03]", children: [
+              /* @__PURE__ */ jsx(VariableIcon, { className: "h-4 w-4 text-gray-400" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: outputVariable,
+                  onChange: (event) => setOutputVariable(event.target.value),
+                  placeholder: "datasourceResult",
+                  className: "flex-1 bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("limitLabel") }),
+            /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] text-gray-500 dark:text-gray-400", children: t("limitHelp") }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: limit,
+                onChange: (event) => setLimit(Math.max(1, Number.parseInt(event.target.value, 10) || 1)),
+                min: 1,
+                max: 1e4,
+                className: "w-32 rounded-xl border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-900 outline-none focus:border-cyan-400 dark:border-white/10 dark:bg-white/[0.03] dark:text-white"
+              }
+            )
+          ] }),
+          selectedDatasource && selectedTable && /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-cyan-500/20 bg-cyan-500/5 p-3 dark:border-cyan-400/15 dark:bg-cyan-400/5", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-cyan-600 dark:text-cyan-400 mb-2", children: "Summary" }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-xs text-gray-600 dark:text-gray-300", children: [
+              /* @__PURE__ */ jsxs("p", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Source:" }),
+                " ",
+                selectedDatasource.name,
+                " (",
+                selectedDatasource.dialect,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsxs("p", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Table:" }),
+                " ",
+                selectedTable
+              ] }),
+              /* @__PURE__ */ jsxs("p", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Columns:" }),
+                " ",
+                selectedColumns.length,
+                " of ",
+                availableColumns.length
+              ] }),
+              /* @__PURE__ */ jsxs("p", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Filters:" }),
+                " ",
+                filterEntries.length
+              ] }),
+              /* @__PURE__ */ jsxs("p", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Limit:" }),
+                " ",
+                limit
+              ] }),
+              /* @__PURE__ */ jsxs("p", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Output:" }),
+                " ",
+                outputVariable || "\u2014"
+              ] })
+            ] })
+          ] })
+        ] });
+      default:
+        return null;
+    }
+  }
+  const logo = getDatasourceLogo(selectedDatasourceId, selectedDatasource?.dialect);
+  return /* @__PURE__ */ jsx(
+    GlassModal,
+    {
+      open,
+      onClose: onCancel,
+      title: selectedDatasource?.name ?? t("datasourceLabel"),
+      subtitle: selectedTable ? `${selectedDatasource?.dialect} \xB7 ${selectedTable}` : void 0,
+      icon: logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: "", className: "h-5 w-5" }) : /* @__PURE__ */ jsx(ServerStackIcon, { className: "h-5 w-5 text-white" }),
+      gradient: "from-cyan-500 to-blue-600",
+      maxWidth: "3xl",
+      sidebar: {
+        sections: SIDEBAR_SECTIONS,
+        activeSectionId,
+        onSectionChange: setActiveSectionId
+      },
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 px-6 py-3", children: [
+        /* @__PURE__ */ jsx(Button, { outline: true, onClick: onCancel, children: t("cancel") }),
+        /* @__PURE__ */ jsx(Button, { color: "cyan", onClick: handleSave, disabled: !canSave, children: t("save") })
+      ] }),
+      children: renderSection()
+    }
+  );
+}
 function LangChainIcon({ className }) {
   return /* @__PURE__ */ jsx("svg", { role: "img", viewBox: "0 0 24 24", fill: "currentColor", className, "aria-label": "LangChain", children: /* @__PURE__ */ jsx("path", { d: "M6.0988 5.9175C2.7359 5.9175 0 8.6462 0 12s2.736 6.0825 6.0988 6.0825h11.8024C21.2641 18.0825 24 15.3538 24 12s-2.736-6.0825-6.0988-6.0825ZM5.9774 7.851c.493.0124 1.02.2496 1.273.6228.3673.4592.4778 1.0668.8944 1.4932.5604.6118 1.199 1.1505 1.7161 1.802.4892.5954.8386 1.2937 1.1436 1.9975.1244.2335.1257.5202.31.7197.0908.1204.5346.4483.4383.5645.0555.1204.4702.286.3263.4027-.1944.04-.4129.0476-.5616-.1074-.0549.126-.183.0596-.2819.0432a4 4 0 0 0-.025.0736c-.3288.0219-.5754-.3126-.732-.565-.3111-.168-.6642-.2702-.982-.446-.0182.2895.0452.6485-.231.8353-.014.5565.8436.0656.9222.4804-.061.0067-.1286-.0095-.1774.0373-.2239.2172-.4805-.1645-.7385-.007-.3464.174-.3808.3161-.8096.352-.0237-.0359-.0143-.0592.0059-.0811.1207-.1399.1295-.3046.3356-.3643-.2122-.0334-.3899.0833-.5686.1757-.2323.095-.2304-.2141-.5878.0164-.0396-.0322-.0208-.0615.0018-.0864.0908-.1107.2102-.127.345-.1208-.663-.3686-.9751.4507-1.2813.0432-.092.0243-.1265.1068-.1845.1652-.05-.0548-.0123-.1212-.0099-.1857-.0598-.028-.1356-.041-.1179-.1366-.1171-.0395-.1988.0295-.286.0952-.0787-.0608.0532-.1492.0776-.2125.0702-.1216.23-.025.3111-.1126.2306-.1308.552.0814.8155.0455.203.0255.4544-.1825.3526-.39-.2171-.2767-.179-.6386-.1839-.9695-.0268-.1929-.491-.4382-.6252-.6462-.1659-.1873-.295-.4047-.4243-.6182-.4666-.9008-.3198-2.0584-.9077-2.8947-.266.1466-.6125.0774-.8418-.119-.1238.1125-.1292.2598-.139.4161-.297-.2962-.2593-.8559-.022-1.1855.0969-.1302.2127-.2373.342-.3316.0292-.0213.0391-.0419.0385-.0747.1174-.5267.5764-.7391 1.0694-.7267m12.4071.46c.5575 0 1.0806.2159 1.474.6082s.61.9145.61 1.4704c0 .556-.2167 1.078-.61 1.4698v.0006l-.902.8995a2.08 2.08 0 0 1-.8597.5166l-.0164.0047-.0058.0164a2.05 2.05 0 0 1-.474.7308l-.9018.8995c-.3934.3924-.917.6083-1.4745.6083s-1.0806-.216-1.474-.6083c-.813-.8107-.813-2.1294 0-2.9402l.9019-.8995a2.056 2.056 0 0 1 .858-.5143l.017-.0053.0058-.0158a2.07 2.07 0 0 1 .4752-.7337l.9018-.8995c.3934-.3924.9171-.6083 1.4745-.6083zm0 .8965a1.18 1.18 0 0 0-.8388.3462l-.9018.8995a1.181 1.181 0 0 0-.3427.9252l.0053.0572c.0323.2652.149.5044.3374.6917.13.1296.2733.2114.4471.2686a.9.9 0 0 1 .014.1582.884.884 0 0 1-.2609.6304l-.0554.0554c-.3013-.1028-.5525-.253-.7794-.4792a2.06 2.06 0 0 1-.5761-1.0968l-.0099-.0578-.0461.0368a1.1 1.1 0 0 0-.0876.0794l-.9024.8995c-.4623.461-.4623 1.212 0 1.673.2311.2305.535.346.8394.3461.3043 0 .6077-.1156.8388-.3462l.9019-.8995c.4623-.461.4623-1.2113 0-1.673a1.17 1.17 0 0 0-.4367-.2749 1 1 0 0 1-.014-.1611c0-.2591.1023-.505.2901-.6923.3019.1028.57.2694.7962.495.3007.2999.4994.679.5756 1.0968l.0105.0578.0455-.0373a1.1 1.1 0 0 0 .0887-.0794l.902-.8996c.4622-.461.4628-1.2124 0-1.6735a1.18 1.18 0 0 0-.8395-.3462Zm-9.973 5.1567-.0006.0006c-.0793.3078-.1048.8318-.506.847-.033.1776.1228.2445.2655.1874.141-.0645.2081.0508.2557.1657.2177.0317.5394-.0725.5516-.3298-.325-.1867-.4253-.5418-.5662-.8709" }) });
 }
@@ -2838,7 +3313,7 @@ var NoteFlowNode = memo(function NoteFlowNode2({ data, selected }) {
     }
   );
 });
-var DATASOURCE_LOGOS = {
+var DATASOURCE_LOGOS2 = {
   bigquery: "/logos/datasources/bigquery.svg",
   postgres: "/logos/datasources/postgres.svg",
   snowflake: "/logos/datasources/snowflake.svg",
@@ -2860,9 +3335,9 @@ var DATASOURCE_LOGOS = {
   firebase: "/logos/datasources/firebase.svg",
   neo4j: "/logos/datasources/neo4j.svg"
 };
-function getDatasourceLogo(datasourceId, dialect) {
+function getDatasourceLogo2(datasourceId, dialect) {
   const search = (dialect ?? datasourceId).toLowerCase();
-  for (const [key, url] of Object.entries(DATASOURCE_LOGOS)) {
+  for (const [key, url] of Object.entries(DATASOURCE_LOGOS2)) {
     if (search.includes(key)) return url;
   }
   return null;
@@ -2889,7 +3364,7 @@ var DatasourceFlowNode = memo(function DatasourceFlowNode2({ id, data, selected
   }
   const columnCount = config.selectedColumns?.length ?? 0;
   const filterCount = config.filterVariables ? Object.keys(config.filterVariables).length : 0;
-  const logo = getDatasourceLogo(config.datasourceId, config.dialect);
+  const logo = getDatasourceLogo2(config.datasourceId, config.dialect);
   const content = /* @__PURE__ */ jsxs(NodeCard, { compact: isCompact, selected, nodeType: "datasource", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
@@ -4857,328 +5332,6 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
     ] })
   ] });
 }
-var COLUMN_TYPE_BADGE_COLORS = {
-  string: "bg-gray-100 text-gray-600 dark:bg-gray-500/20 dark:text-gray-300",
-  varchar: "bg-gray-100 text-gray-600 dark:bg-gray-500/20 dark:text-gray-300",
-  text: "bg-gray-100 text-gray-600 dark:bg-gray-500/20 dark:text-gray-300",
-  integer: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  int: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  bigint: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  number: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  decimal: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  float: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  boolean: "bg-green-100 text-green-600 dark:bg-green-500/20 dark:text-green-300",
-  date: "bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-300",
-  timestamp: "bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-300",
-  datetime: "bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-300",
-  json: "bg-purple-100 text-purple-600 dark:bg-purple-500/20 dark:text-purple-300",
-  jsonb: "bg-purple-100 text-purple-600 dark:bg-purple-500/20 dark:text-purple-300",
-  uuid: "bg-teal-100 text-teal-600 dark:bg-teal-500/20 dark:text-teal-300"
-};
-function DatasourceNodeConfigForm({
-  nodeId,
-  config,
-  onSave,
-  onCancel,
-  datasources,
-  onLoadTables,
-  onLoadSchema
-}) {
-  const t = useTranslations("agents.workflow.datasourceNodeConfig");
-  const [selectedDatasourceId, setSelectedDatasourceId] = useState(config.datasourceId ?? "");
-  const [selectedTable, setSelectedTable] = useState(config.table ?? "");
-  const [availableTables, setAvailableTables] = useState([]);
-  const [availableColumns, setAvailableColumns] = useState([]);
-  const [selectedColumns, setSelectedColumns] = useState([...config.selectedColumns ?? []]);
-  const [outputVariable, setOutputVariable] = useState(config.outputVariable);
-  const [limit, setLimit] = useState(config.limit);
-  const [filterVariables, setFilterVariables] = useState({ ...config.filterVariables });
-  const allColumnNames = availableColumns.map((column) => column.name);
-  const allSelected = selectedColumns.length > 0 && selectedColumns.length === allColumnNames.length;
-  const selectedDatasource = datasources.find((datasource) => datasource.id === selectedDatasourceId);
-  const loadTables = useCallback(async (datasourceId) => {
-    if (!datasourceId) {
-      setAvailableTables([]);
-      return;
-    }
-    const tables = await onLoadTables(datasourceId);
-    setAvailableTables(tables);
-  }, [onLoadTables]);
-  const loadSchema = useCallback(async (datasourceId, table) => {
-    if (!datasourceId || !table) {
-      setAvailableColumns([]);
-      return;
-    }
-    const columns = await onLoadSchema(datasourceId, table);
-    setAvailableColumns(columns);
-  }, [onLoadSchema]);
-  useEffect(() => {
-    if (selectedDatasourceId) {
-      loadTables(selectedDatasourceId);
-    }
-  }, [selectedDatasourceId, loadTables]);
-  useEffect(() => {
-    if (selectedDatasourceId && selectedTable) {
-      loadSchema(selectedDatasourceId, selectedTable);
-    }
-  }, [selectedDatasourceId, selectedTable, loadSchema]);
-  const handleDatasourceChange = (datasourceId) => {
-    setSelectedDatasourceId(datasourceId);
-    setSelectedTable("");
-    setAvailableTables([]);
-    setAvailableColumns([]);
-    setSelectedColumns([]);
-    setFilterVariables({});
-  };
-  const handleTableChange = (table) => {
-    setSelectedTable(table);
-    setAvailableColumns([]);
-    setSelectedColumns([]);
-    setFilterVariables({});
-  };
-  const handleToggleSelectAll = () => {
-    if (allSelected) {
-      setSelectedColumns([]);
-    } else {
-      setSelectedColumns([...allColumnNames]);
-    }
-  };
-  const handleToggleColumn = (columnName) => {
-    setSelectedColumns(
-      (previous) => previous.includes(columnName) ? previous.filter((name) => name !== columnName) : [...previous, columnName]
-    );
-  };
-  const handleAddFilter = () => {
-    setFilterVariables((previous) => ({ ...previous, "": "" }));
-  };
-  const handleUpdateFilterVariable = (oldKey, newKey) => {
-    setFilterVariables((previous) => {
-      const updated = { ...previous };
-      const value = updated[oldKey] ?? "";
-      delete updated[oldKey];
-      updated[newKey] = value;
-      return updated;
-    });
-  };
-  const handleUpdateFilterField = (key, newValue) => {
-    setFilterVariables((previous) => ({ ...previous, [key]: newValue }));
-  };
-  const handleRemoveFilter = (key) => {
-    setFilterVariables((previous) => {
-      const updated = { ...previous };
-      delete updated[key];
-      return updated;
-    });
-  };
-  const handleSave = () => {
-    const cleanedFilters = {};
-    for (const [key, value] of Object.entries(filterVariables)) {
-      if (key.trim() && value.trim()) {
-        cleanedFilters[key.trim()] = value.trim();
-      }
-    }
-    onSave({
-      ...config,
-      datasourceId: selectedDatasourceId,
-      dialect: selectedDatasource?.dialect ?? "",
-      table: selectedTable,
-      selectedColumns,
-      outputVariable: outputVariable.trim(),
-      limit,
-      filterVariables: cleanedFilters
-    });
-  };
-  const filterEntries = Object.entries(filterVariables);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("datasourceLabel") }),
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("datasourceHelp") }),
-      /* @__PURE__ */ jsxs(
-        "select",
-        {
-          value: selectedDatasourceId,
-          onChange: (event) => handleDatasourceChange(event.target.value),
-          className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white",
-          children: [
-            /* @__PURE__ */ jsx("option", { value: "", children: t("selectDatasource") }),
-            datasources.map((datasource) => /* @__PURE__ */ jsxs("option", { value: datasource.id, children: [
-              datasource.name,
-              " (",
-              datasource.dialect,
-              ")"
-            ] }, datasource.id))
-          ]
-        }
-      ),
-      selectedDatasource && /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300", children: selectedDatasource.dialect }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("tableLabel") }),
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("tableHelp") }),
-      /* @__PURE__ */ jsxs(
-        "select",
-        {
-          value: selectedTable,
-          onChange: (event) => handleTableChange(event.target.value),
-          disabled: !selectedDatasourceId,
-          className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white",
-          children: [
-            /* @__PURE__ */ jsx("option", { value: "", children: t("selectTable") }),
-            availableTables.map((table) => /* @__PURE__ */ jsx("option", { value: table, children: table }, table))
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariableLabel") }),
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("outputVariableHelp") }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: outputVariable,
-          onChange: (event) => setOutputVariable(event.target.value),
-          placeholder: "datasourceResult",
-          className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("limitLabel") }),
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("limitHelp") }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "number",
-          value: limit,
-          onChange: (event) => setLimit(Math.max(1, Number.parseInt(event.target.value, 10) || 1)),
-          min: 1,
-          max: 1e4,
-          className: "w-32 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("columnsLabel") }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleToggleSelectAll,
-            disabled: availableColumns.length === 0,
-            className: "text-xs font-medium text-indigo-600 hover:text-indigo-700 disabled:cursor-not-allowed disabled:opacity-50 dark:text-indigo-400 dark:hover:text-indigo-300",
-            children: allSelected ? t("deselectAll") : t("selectAll")
-          }
-        )
-      ] }),
-      selectedColumns.length === 0 && availableColumns.length > 0 && /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-amber-600 dark:text-amber-400", children: t("noColumnsSelected") }),
-      /* @__PURE__ */ jsxs("div", { className: "max-h-48 space-y-1 overflow-y-auto rounded-lg border border-gray-200 p-2 dark:border-gray-700", children: [
-        availableColumns.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-2 py-2 text-xs text-gray-500 dark:text-gray-400", children: t("noColumnsAvailable") }),
-        availableColumns.map((column) => {
-          const isSelected = selectedColumns.includes(column.name);
-          const typeBadgeColor = COLUMN_TYPE_BADGE_COLORS[column.type.toLowerCase()] ?? COLUMN_TYPE_BADGE_COLORS.string;
-          return /* @__PURE__ */ jsxs(
-            "label",
-            {
-              className: `flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${isSelected ? "bg-indigo-50 dark:bg-indigo-500/10" : "hover:bg-gray-50 dark:hover:bg-gray-800"}`,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: isSelected,
-                    onChange: () => handleToggleColumn(column.name),
-                    className: "h-3.5 w-3.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600"
-                  }
-                ),
-                /* @__PURE__ */ jsxs("span", { className: "flex-1 text-xs font-medium text-gray-900 dark:text-white", children: [
-                  column.name,
-                  column.nullable && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[9px] text-gray-400 dark:text-gray-500", children: "?" })
-                ] }),
-                /* @__PURE__ */ jsx("span", { className: `rounded-full px-1.5 py-0.5 text-[9px] font-medium ${typeBadgeColor}`, children: column.type })
-              ]
-            },
-            column.name
-          );
-        })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("filtersLabel") }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: handleAddFilter,
-            className: "flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300",
-            children: [
-              /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-3 w-3" }),
-              t("addFilter")
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("filtersHelp") }),
-      filterEntries.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filterEntries.map(([variableName, columnName], index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            value: columnName,
-            onChange: (event) => handleUpdateFilterField(variableName, event.target.value),
-            className: "flex-1 rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-xs text-gray-900 outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white",
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: t("columnName") }),
-              availableColumns.map((column) => /* @__PURE__ */ jsx("option", { value: column.name, children: column.name }, column.name))
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: "=" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: variableName,
-            onChange: (event) => handleUpdateFilterVariable(variableName, event.target.value),
-            placeholder: t("variableReference"),
-            className: "flex-1 rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-xs text-gray-900 placeholder-gray-400 outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => handleRemoveFilter(variableName),
-            className: "rounded-md p-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20",
-            children: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3.5 w-3.5" })
-          }
-        )
-      ] }, index)) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onCancel,
-          className: "rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
-          children: t("cancel")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleSave,
-          disabled: !selectedDatasourceId || !selectedTable || selectedColumns.length === 0,
-          className: "rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600",
-          children: t("save")
-        }
-      )
-    ] })
-  ] });
-}
 var GROUP_COLOR_OPTIONS = [
   { value: "indigo", ring: "ring-indigo-500", fill: "bg-indigo-500" },
   { value: "teal", ring: "ring-teal-500", fill: "bg-teal-500" },
@@ -5540,18 +5693,8 @@ function LogicNodeModal({ onSave, entities = [], datasources = [], onLoadTables,
       case "iteration_start":
         return /* @__PURE__ */ jsx(IterationStartNodeConfigForm, { config, onSave: handleSave, onCancel: closeModal });
       case "datasource":
-        return /* @__PURE__ */ jsx(
-          DatasourceNodeConfigForm,
-          {
-            nodeId,
-            config,
-            onSave: handleSave,
-            onCancel: closeModal,
-            datasources,
-            onLoadTables: onLoadTables ?? (async () => []),
-            onLoadSchema: onLoadSchema ?? (async () => [])
-          }
-        );
+        return null;
+      // Datasource uses its own GlassModal with sidebar — rendered separately
       case "entity":
         return /* @__PURE__ */ jsx(EntityNodeConfigForm, { config, entities, onSave: handleSave, onCancel: closeModal });
       case "group":
@@ -5983,6 +6126,9 @@ function WorkflowCanvasInner({
   agentTools = [],
   rules,
   entities = [],
+  datasources = [],
+  onLoadTables,
+  onLoadSchema,
   initialGraph,
   onGraphChange,
   onEditTool,
@@ -7339,7 +7485,7 @@ function WorkflowCanvasInner({
   const handleEdgeClick = useCallback(() => {
     closeContextMenu();
   }, [closeContextMenu]);
-  useMemo(() => {
+  const editingLogicNode = useMemo(() => {
     if (!editingLogicNodeId) return null;
     const node = nodes.find((matchingNode) => matchingNode.id === editingLogicNodeId);
     if (!node) return null;
@@ -7515,6 +7661,22 @@ function WorkflowCanvasInner({
         },
         entities: allEntities
       }
+    ),
+    editingLogicNode?.config?.type === "datasource" && /* @__PURE__ */ jsx(
+      DatasourceNodeConfigForm,
+      {
+        open: true,
+        nodeId: editingLogicNode.nodeId,
+        config: editingLogicNode.config,
+        onSave: (updatedConfig) => {
+          handleSaveLogicNodeConfig(editingLogicNode.nodeId, updatedConfig);
+          setEditingLogicNodeId(null);
+        },
+        onCancel: () => setEditingLogicNodeId(null),
+        datasources,
+        onLoadTables: onLoadTables ?? (async () => []),
+        onLoadSchema: onLoadSchema ?? (async () => [])
+      }
     )
   ] });
 }
@@ -7653,5 +7815,5 @@ function Workspace({
 }
 
 export { AgentFlowNode, AgentToolFlowNode, AnswerFlowNode, AnthropicIcon, CATEGORY_COLORS, CATEGORY_PILL_COLORS, CodeFlowNode, CrewAIIcon, DocumentExtractorFlowNode, EndFlowNode, EntityFlowNode, FRAMEWORK_META, GoogleADKIcon, GroupFlowNode, HttpRequestFlowNode, ICON_MAP, IfElseFlowNode, IterationFlowNode, IterationStartFlowNode, KnowledgeBaseFlowNode, LOGIC_ICON_MAP, LOGIC_NODE_BADGE_COLORS, LOGIC_NODE_GRADIENTS, LOGIC_NODE_HANDLE_COLORS, LangChainIcon, ListOperatorFlowNode, LogicNodeModal, MINIMAP_NODE_COLORS, ModelProviderFlowNode, NODE_EXECUTION_ACCENT_COLORS, NodeCard, NodeContextMenu, NoteFlowNode, OpenAIIcon, PanelContextMenu, ParameterExtractorFlowNode, QuestionClassifierFlowNode, RuleFlowNode, SelectionContextMenu, StartFlowNode, StrandsIcon, TemplateTransformFlowNode, ToolFlowNode, VariableAggregatorFlowNode, VariableAssignerFlowNode, WorkflowBuilderProvider, WorkflowCanvas, Workspace, getCompatibleModels, getDefaultFrameworkForModel, getEntityBadgeColor, getEntityGradient, getEntityHandleColor, getEntityIcon, getEntityMinimapColor, getFrameworkMeta, getNodeExecutionAccent, getNodeExecutionAccentRgb, isFrameworkCompatibleWithProviders, isModelCompatibleWithFramework, useModalStore, useWorkflowBuilderClient, useWorkflowBuilderClientOptional, useWorkflowStore };
-//# sourceMappingURL=chunk-HRQPV3H3.mjs.map
-//# sourceMappingURL=chunk-HRQPV3H3.mjs.map
+//# sourceMappingURL=chunk-IWATRHQP.mjs.map
+//# sourceMappingURL=chunk-IWATRHQP.mjs.map