@libredb/studio 0.9.7 → 0.9.12

package/dist/workspace.mjs

@@ -0,0 +1,4155 @@
+import { getDBIcon, cn, ENVIRONMENT_LABELS, Button, SchemaDiagram, SchemaExplorer, QueryEditor, QuerySafetyDialog, DataProfiler, CodeGenerator, TestDataGenerator, isDangerousQuery, ScrollArea, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, NL2SQLPanel, DataCharts, VisualExplain, ResultsGrid, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Label, Input, DialogFooter, buttonVariants, storage, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-DZ2UB3C6.mjs';
+import './chunk-6DRZXXNT.mjs';
+import { __spreadValues, __spreadProps, __objRest } from './chunk-4LVB3K53.mjs';
+import React, { useRef, useMemo, useEffect, useState, useCallback } from 'react';
+import { Lock, Pencil, Trash2, Database, AlertTriangle, Zap, Layers, Plus, GripVerticalIcon, Hash, FileJson, X, FlaskConical, Terminal, Save, Square, Play, Upload, Download, Bookmark, Tag, Check, ArrowRight, FileSpreadsheet, FileText, Table2, Loader2, LayoutGrid, Clock, BarChart3, Sparkles, Columns3, GitCompare, LayoutDashboard, RefreshCw, GripVertical, Search, History, ArrowUpDown, CheckCircle2, AlertCircle, RotateCcw, Edit3, Calendar, Camera, FileCode, ChevronDown, ChevronRight, Copy, Minus } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'next/navigation';
+import { format } from 'date-fns';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { toast } from 'sonner';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+var ConnectionItem = React.memo(function ConnectionItem2({
+  connection: conn,
+  isActive,
+  onSelect,
+  onDelete,
+  onEdit
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: false,
+      className: cn(
+        "group flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-200 text-sm relative overflow-hidden",
+        isActive ? "bg-blue-600/10 text-blue-400" : "hover:bg-accent/50 text-muted-foreground hover:text-foreground"
+      ),
+      onClick: () => onSelect(conn),
+      children: [
+        isActive && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layoutId: "active-indicator",
+            className: "absolute left-0 w-1 h-4 rounded-r-full",
+            style: { backgroundColor: conn.color || "#3b82f6" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "p-1 rounded transition-colors",
+              isActive ? "bg-blue-500/20" : "bg-muted group-hover:bg-accent"
+            ),
+            children: React.createElement(getDBIcon(conn.type), { className: "w-3 h-3" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate block font-medium text-body", children: conn.name }),
+          conn.environment && conn.environment !== "other" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-micro uppercase tracking-wider font-bold px-1.5 py-0.5 rounded-sm shrink-0",
+              style: {
+                color: conn.color || "#6b7280",
+                backgroundColor: `${conn.color || "#6b7280"}15`
+              },
+              children: ENVIRONMENT_LABELS[conn.environment]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+          conn.managed && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": `managed-lock-${conn.seedId || conn.id}`,
+              className: "w-6 h-6 flex items-center justify-center text-amber-500/60",
+              title: "Managed by administrator",
+              children: /* @__PURE__ */ jsx(Lock, { className: "w-3 h-3" })
+            }
+          ),
+          !conn.managed && onEdit && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-blue-500/20 hover:text-blue-400",
+              onClick: (e) => {
+                e.stopPropagation();
+                onEdit(conn);
+              },
+              children: /* @__PURE__ */ jsx(Pencil, { className: "w-3 h-3" })
+            }
+          ),
+          !conn.managed && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500/20 hover:text-red-400",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete(conn.id);
+              },
+              children: /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+function ConnectionsList({
+  connections,
+  activeConnection,
+  onSelectConnection,
+  onDeleteConnection,
+  onEditConnection,
+  onAddConnection
+}) {
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-3 mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground", children: "Connections" }),
+      /* @__PURE__ */ jsx("div", { className: "h-[1px] flex-1 bg-border/30 ml-3" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: connections.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-6 text-center border border-dashed border-border/50 rounded-lg mx-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-body text-muted-foreground mb-3 leading-relaxed", children: "No database connections established yet." }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-7 text-xs",
+          onClick: onAddConnection,
+          children: "Add Connection"
+        }
+      )
+    ] }) : connections.map((conn) => /* @__PURE__ */ jsx(
+      ConnectionItem,
+      {
+        connection: conn,
+        isActive: (activeConnection == null ? void 0 : activeConnection.id) === conn.id,
+        onSelect: onSelectConnection,
+        onDelete: onDeleteConnection,
+        onEdit: onEditConnection
+      },
+      conn.id
+    )) })
+  ] });
+}
+function Sidebar({
+  connections,
+  activeConnection,
+  schema,
+  isLoadingSchema,
+  onSelectConnection,
+  onDeleteConnection,
+  onEditConnection,
+  onAddConnection,
+  onTableClick,
+  onGenerateSelect,
+  onCreateTableClick,
+  onShowDiagram,
+  isAdmin = false,
+  onOpenMaintenance,
+  databaseType,
+  metadata,
+  onProfileTable,
+  onGenerateCode,
+  onGenerateTestData
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full h-full border-r border-border flex-col bg-background select-none", children: [
+    /* @__PURE__ */ jsxs("div", { className: "h-14 px-4 flex items-center justify-between border-b border-border", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-6 h-6 bg-blue-600 rounded-md flex items-center justify-center", children: /* @__PURE__ */ jsx(Zap, { className: "w-3.5 h-3.5 text-white fill-current" }) }),
+        /* @__PURE__ */ jsx("span", { className: "font-bold text-sm tracking-tight bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent", children: "LibreDB Studio" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        activeConnection && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-8 w-8 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+            onClick: onShowDiagram,
+            title: "Show ERD Diagram",
+            children: /* @__PURE__ */ jsx(Layers, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-8 w-8 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+            onClick: onAddConnection,
+            children: /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0 px-2 py-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(
+        ConnectionsList,
+        {
+          connections,
+          activeConnection,
+          onSelectConnection,
+          onDeleteConnection,
+          onEditConnection,
+          onAddConnection
+        }
+      ),
+      activeConnection && /* @__PURE__ */ jsx(
+        SchemaExplorer,
+        {
+          schema,
+          isLoadingSchema,
+          onTableClick,
+          onGenerateSelect,
+          onCreateTableClick,
+          isAdmin,
+          onOpenMaintenance,
+          databaseType,
+          metadata,
+          onProfileTable,
+          onGenerateCode,
+          onGenerateTestData
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-border bg-card/50 backdrop-blur-md", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 rounded-lg bg-muted/30 border border-border/50", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Connected" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground/70", children: "v1.2.5" })
+    ] }) })
+  ] });
+}
+function parseCSV(text) {
+  const lines = text.split(/\r?\n/).filter((line) => line.trim());
+  if (lines.length === 0) return { headers: [], rows: [], totalRows: 0 };
+  const parseLine = (line) => {
+    const result = [];
+    let current = "";
+    let inQuotes = false;
+    for (let i = 0; i < line.length; i++) {
+      const ch = line[i];
+      if (ch === '"' && !inQuotes) {
+        inQuotes = true;
+      } else if (ch === '"' && inQuotes) {
+        if (i + 1 < line.length && line[i + 1] === '"') {
+          current += '"';
+          i++;
+        } else {
+          inQuotes = false;
+        }
+      } else if (ch === "," && !inQuotes) {
+        result.push(current.trim());
+        current = "";
+      } else {
+        current += ch;
+      }
+    }
+    result.push(current.trim());
+    return result;
+  };
+  const headers = parseLine(lines[0]);
+  const rows = lines.slice(1).map((line) => parseLine(line));
+  return { headers, rows, totalRows: rows.length };
+}
+function parseJSON(text) {
+  const data = JSON.parse(text);
+  const arr = Array.isArray(data) ? data : [data];
+  if (arr.length === 0) return { headers: [], rows: [], totalRows: 0 };
+  const headers = [...new Set(arr.flatMap((obj) => Object.keys(obj)))];
+  const rows = arr.map((obj) => headers.map((h) => {
+    const val = obj[h];
+    if (val === null || val === void 0) return "";
+    if (typeof val === "object") return JSON.stringify(val);
+    return String(val);
+  }));
+  return { headers, rows, totalRows: rows.length };
+}
+function inferSqlType(values) {
+  const nonEmpty = values.filter((v) => v !== "" && v !== null);
+  if (nonEmpty.length === 0) return "TEXT";
+  const allIntegers = nonEmpty.every((v) => /^-?\d+$/.test(v));
+  if (allIntegers) return "INTEGER";
+  const allNumbers = nonEmpty.every((v) => /^-?\d+(\.\d+)?$/.test(v));
+  if (allNumbers) return "NUMERIC";
+  const allBooleans = nonEmpty.every((v) => /^(true|false|0|1)$/i.test(v));
+  if (allBooleans) return "BOOLEAN";
+  return "TEXT";
+}
+function escapeSQL(value) {
+  if (value === "" || value === "null" || value === "NULL") return "NULL";
+  return `'${value.replace(/'/g, "''")}'`;
+}
+function generateImportSQL(parsedData, targetTable, createNewTable, newTableName, columnMapping) {
+  if (!parsedData) return "";
+  const tableName = createNewTable ? newTableName || "imported_data" : targetTable;
+  if (!tableName) return "";
+  const statements = [];
+  if (createNewTable) {
+    const colDefs = parsedData.headers.map((h) => {
+      const colValues = parsedData.rows.slice(0, 100).map((r) => r[parsedData.headers.indexOf(h)]);
+      const sqlType = inferSqlType(colValues);
+      const colName = columnMapping[h] || h;
+      return `  ${colName} ${sqlType}`;
+    });
+    statements.push(`CREATE TABLE ${tableName} (
+${colDefs.join(",\n")}
+);`);
+  }
+  const mappedHeaders = parsedData.headers.map((h) => columnMapping[h] || h);
+  const batchSize = 100;
+  for (let i = 0; i < parsedData.rows.length; i += batchSize) {
+    const batch = parsedData.rows.slice(i, i + batchSize);
+    const valueRows = batch.map((row) => {
+      const values = row.map((val, idx) => {
+        const sqlType = inferSqlType(parsedData.rows.slice(0, 100).map((r) => r[idx]));
+        if (val === "" || val === "NULL" || val === "null") return "NULL";
+        if (sqlType === "INTEGER" || sqlType === "NUMERIC" || sqlType === "BOOLEAN") {
+          if (sqlType === "BOOLEAN") return val.toLowerCase() === "true" || val === "1" ? "TRUE" : "FALSE";
+          return val;
+        }
+        return escapeSQL(val);
+      });
+      return `  (${values.join(", ")})`;
+    });
+    statements.push(
+      `INSERT INTO ${tableName} (${mappedHeaders.join(", ")})
+VALUES
+${valueRows.join(",\n")};`
+    );
+  }
+  return statements.join("\n\n");
+}
+function DataImportModal({ isOpen, onClose, onImport, tables, databaseType }) {
+  const [step, setStep] = useState("upload");
+  const [parsedData, setParsedData] = useState(null);
+  const [fileName, setFileName] = useState("");
+  const [fileType, setFileType] = useState("csv");
+  const [targetTable, setTargetTable] = useState("");
+  const [createNewTable, setCreateNewTable] = useState(false);
+  const [newTableName, setNewTableName] = useState("");
+  const [columnMapping, setColumnMapping] = useState({});
+  const [error, setError] = useState(null);
+  const [isImporting, setIsImporting] = useState(false);
+  const fileInputRef = useRef(null);
+  const resetState = useCallback(() => {
+    setStep("upload");
+    setParsedData(null);
+    setFileName("");
+    setTargetTable("");
+    setCreateNewTable(false);
+    setNewTableName("");
+    setColumnMapping({});
+    setError(null);
+    setIsImporting(false);
+  }, []);
+  const handleClose = () => {
+    resetState();
+    onClose();
+  };
+  const handleFileSelect = useCallback((file) => {
+    var _a;
+    setError(null);
+    setFileName(file.name);
+    const ext = (_a = file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+    const isJSON = ext === "json";
+    setFileType(isJSON ? "json" : "csv");
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      var _a2;
+      try {
+        const text = (_a2 = e.target) == null ? void 0 : _a2.result;
+        const data = isJSON ? parseJSON(text) : parseCSV(text);
+        if (data.headers.length === 0) {
+          setError("No data found in file");
+          return;
+        }
+        setParsedData(data);
+        const mapping = {};
+        data.headers.forEach((h) => {
+          mapping[h] = h;
+        });
+        setColumnMapping(mapping);
+        setStep("preview");
+      } catch (err) {
+        setError(`Failed to parse file: ${err instanceof Error ? err.message : "Unknown error"}`);
+      }
+    };
+    reader.readAsText(file);
+  }, []);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files[0];
+    if (file) handleFileSelect(file);
+  }, [handleFileSelect]);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+  }, []);
+  const generatedSQL = useMemo(
+    () => generateImportSQL(parsedData, targetTable, createNewTable, newTableName, columnMapping),
+    [parsedData, targetTable, createNewTable, newTableName, columnMapping]
+  );
+  const handleImport = () => {
+    if (!generatedSQL) return;
+    setIsImporting(true);
+    onImport(generatedSQL);
+    setTimeout(() => {
+      handleClose();
+    }, 200);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "bg-[#0a0a0a] border-white/10 text-zinc-100 max-w-2xl max-h-[85vh] overflow-hidden flex flex-col", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Upload, { className: "w-5 h-5 text-blue-400" }),
+      "Import Data",
+      fileName && /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 font-normal ml-2", children: fileName })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-1 py-2", children: ["upload", "preview", "configure", "ready"].map((s, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: cn(
+        "flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider",
+        step === s ? "text-blue-400" : idx < ["upload", "preview", "configure", "ready"].indexOf(step) ? "text-emerald-400" : "text-zinc-600"
+      ), children: [
+        /* @__PURE__ */ jsx("div", { className: cn(
+          "w-5 h-5 rounded-full flex items-center justify-center text-label",
+          step === s ? "bg-blue-500/20 border border-blue-500/40" : idx < ["upload", "preview", "configure", "ready"].indexOf(step) ? "bg-emerald-500/20 border border-emerald-500/40" : "bg-white/5 border border-white/10"
+        ), children: idx < ["upload", "preview", "configure", "ready"].indexOf(step) ? /* @__PURE__ */ jsx(Check, { className: "w-3 h-3" }) : idx + 1 }),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: s === "upload" ? "Upload" : s === "preview" ? "Preview" : s === "configure" ? "Configure" : "Import" })
+      ] }),
+      idx < 3 && /* @__PURE__ */ jsx(ArrowRight, { className: "w-3 h-3 text-zinc-700" })
+    ] }, s)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto min-h-0", children: [
+      step === "upload" && /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onDrop: handleDrop,
+            onDragOver: handleDragOver,
+            onClick: () => {
+              var _a;
+              return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+            },
+            className: "border-2 border-dashed border-white/10 rounded-xl p-12 text-center cursor-pointer hover:border-blue-500/30 hover:bg-blue-500/5 transition-all",
+            children: [
+              /* @__PURE__ */ jsx(Upload, { className: "w-10 h-10 text-zinc-600 mx-auto mb-4" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-zinc-400 mb-1", children: "Drop a file here or click to browse" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-600", children: "Supports CSV and JSON files" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4 mt-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-zinc-500", children: [
+                  /* @__PURE__ */ jsx(FileSpreadsheet, { className: "w-4 h-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs", children: "CSV" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-zinc-500", children: [
+                  /* @__PURE__ */ jsx(FileJson, { className: "w-4 h-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs", children: "JSON" })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: ".csv,.json,.tsv",
+            className: "hidden",
+            onChange: (e) => {
+              var _a;
+              const file = (_a = e.target.files) == null ? void 0 : _a[0];
+              if (file) handleFileSelect(file);
+            }
+          }
+        ),
+        error && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 rounded-lg bg-red-500/10 border border-red-500/20 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { className: "w-4 h-4 text-red-400 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-red-400", children: error })
+        ] })
+      ] }),
+      step === "preview" && parsedData && /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            fileType === "json" ? /* @__PURE__ */ jsx(FileJson, { className: "w-5 h-5 text-amber-400" }) : /* @__PURE__ */ jsx(FileText, { className: "w-5 h-5 text-emerald-400" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: fileName }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-zinc-500", children: [
+                parsedData.totalRows,
+                " rows, ",
+                parsedData.headers.length,
+                " columns"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-7 text-xs text-zinc-500",
+              onClick: () => {
+                resetState();
+              },
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "w-3 h-3 mr-1" }),
+                " Reset"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "border border-white/5 rounded-lg overflow-auto max-h-60", children: [
+          /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "bg-[#0d0d0d]", children: parsedData.headers.map((h) => /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs uppercase tracking-wider text-zinc-500 font-mono border-b border-white/5 whitespace-nowrap", children: h }, h)) }) }),
+            /* @__PURE__ */ jsx("tbody", { children: parsedData.rows.slice(0, 10).map((row, idx) => /* @__PURE__ */ jsx("tr", { className: "border-b border-white/5 hover:bg-white/[0.02]", children: row.map((cell, cidx) => /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-zinc-300 font-mono whitespace-nowrap max-w-[200px] truncate", children: cell || /* @__PURE__ */ jsx("span", { className: "text-zinc-600 italic", children: "NULL" }) }, cidx)) }, idx)) })
+          ] }),
+          parsedData.totalRows > 10 && /* @__PURE__ */ jsxs("div", { className: "text-center py-2 text-xs text-zinc-600 bg-[#0d0d0d]", children: [
+            "... and ",
+            parsedData.totalRows - 10,
+            " more rows"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            className: "bg-blue-600 hover:bg-blue-500 h-8 text-xs gap-1",
+            onClick: () => setStep("configure"),
+            children: [
+              "Configure Import ",
+              /* @__PURE__ */ jsx(ArrowRight, { className: "w-3 h-3" })
+            ]
+          }
+        ) })
+      ] }),
+      step === "configure" && parsedData && /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-zinc-400 font-medium", children: "Target Table" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: cn(
+                  "flex-1 px-3 py-2 rounded-lg border text-xs text-left transition-all",
+                  !createNewTable ? "border-blue-500/40 bg-blue-500/10 text-blue-400" : "border-white/10 text-zinc-500 hover:bg-white/5"
+                ),
+                onClick: () => setCreateNewTable(false),
+                children: [
+                  /* @__PURE__ */ jsx(Table2, { className: "w-4 h-4 mb-1" }),
+                  "Existing Table"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: cn(
+                  "flex-1 px-3 py-2 rounded-lg border text-xs text-left transition-all",
+                  createNewTable ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-400" : "border-white/10 text-zinc-500 hover:bg-white/5"
+                ),
+                onClick: () => setCreateNewTable(true),
+                children: [
+                  /* @__PURE__ */ jsx(FileSpreadsheet, { className: "w-4 h-4 mb-1" }),
+                  "New Table"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        createNewTable ? /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-zinc-400", children: "New Table Name" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: newTableName,
+              onChange: (e) => setNewTableName(e.target.value),
+              placeholder: "imported_data",
+              className: "mt-1 bg-[#111] border-white/10 text-sm h-9"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-zinc-400", children: "Select Table" }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: targetTable,
+              onChange: (e) => setTargetTable(e.target.value),
+              className: "w-full mt-1 bg-[#111] border border-white/10 rounded-md px-3 py-2 text-sm text-zinc-300 outline-none focus:border-blue-500/40",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "-- Select a table --" }),
+                tables.map((t) => /* @__PURE__ */ jsx("option", { value: t.name, children: t.name }, t.name))
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-zinc-400 font-medium", children: "Column Mapping" }),
+          /* @__PURE__ */ jsxs("div", { className: "border border-white/5 rounded-lg overflow-hidden", children: [
+            /* @__PURE__ */ jsxs("div", { className: "bg-[#0d0d0d] grid grid-cols-[1fr,auto,1fr] gap-2 px-3 py-1.5 text-xs uppercase tracking-wider text-zinc-500 border-b border-white/5", children: [
+              /* @__PURE__ */ jsx("span", { children: "Source Column" }),
+              /* @__PURE__ */ jsx("span", {}),
+              /* @__PURE__ */ jsx("span", { children: "Target Column" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "max-h-40 overflow-auto", children: parsedData.headers.map((header) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr,auto,1fr] gap-2 items-center px-3 py-1.5 border-b border-white/5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-300 font-mono truncate", children: header }),
+              /* @__PURE__ */ jsx(ArrowRight, { className: "w-3 h-3 text-zinc-600" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: columnMapping[header] || "",
+                  onChange: (e) => setColumnMapping((prev) => __spreadProps(__spreadValues({}, prev), { [header]: e.target.value })),
+                  className: "h-7 text-xs bg-[#111] border-white/10",
+                  placeholder: header
+                }
+              )
+            ] }, header)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-8 text-xs text-zinc-500",
+              onClick: () => setStep("preview"),
+              children: "Back"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              className: "bg-blue-600 hover:bg-blue-500 h-8 text-xs gap-1",
+              onClick: () => setStep("ready"),
+              disabled: !createNewTable && !targetTable,
+              children: [
+                "Review SQL ",
+                /* @__PURE__ */ jsx(ArrowRight, { className: "w-3 h-3" })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      step === "ready" && /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Ready to Import" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-zinc-500 mt-0.5", children: [
+              parsedData == null ? void 0 : parsedData.totalRows,
+              " rows into ",
+              createNewTable ? newTableName || "imported_data" : targetTable
+            ] })
+          ] }),
+          databaseType && /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-wider text-zinc-500 bg-white/5 px-2 py-1 rounded", children: databaseType })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "border border-white/5 rounded-lg bg-[#0d0d0d] overflow-auto max-h-60", children: /* @__PURE__ */ jsxs("pre", { className: "p-3 text-xs text-zinc-400 font-mono whitespace-pre-wrap", children: [
+          generatedSQL.substring(0, 3e3),
+          generatedSQL.length > 3e3 && "\n\n... (truncated for preview)"
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-8 text-xs text-zinc-500",
+              onClick: () => setStep("configure"),
+              children: "Back"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "h-8 text-xs border-white/10",
+                onClick: () => {
+                  navigator.clipboard.writeText(generatedSQL);
+                },
+                children: "Copy SQL"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                className: "bg-emerald-600 hover:bg-emerald-500 h-8 text-xs gap-1",
+                onClick: handleImport,
+                disabled: isImporting,
+                children: isImporting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }),
+                  " Importing..."
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Upload, { className: "w-3 h-3" }),
+                  " Execute Import"
+                ] })
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function Textarea(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    __spreadValues({
+      "data-slot": "textarea",
+      className: cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )
+    }, props)
+  );
+}
+function SaveQueryModal({ isOpen, onClose, onSave, defaultQuery }) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [tagsInput, setTagsInput] = useState("");
+  const handleSave = () => {
+    if (!name) return;
+    const tags = tagsInput.split(",").map((t) => t.trim()).filter((t) => t);
+    onSave(name, description, tags);
+    setName("");
+    setDescription("");
+    setTagsInput("");
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "bg-[#0d0d0d] border-white/10 text-zinc-300 sm:max-w-[425px]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "text-white flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Bookmark, { className: "w-5 h-5 text-blue-500" }),
+        " Save Query"
+      ] }),
+      /* @__PURE__ */ jsx(DialogDescription, { className: "text-zinc-500", children: "Give your query a name and description to find it easily later." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "name", className: "text-xs font-bold uppercase tracking-widest text-zinc-500", children: "Name" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "name",
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            placeholder: "e.g. Monthly Active Users",
+            className: "bg-white/5 border-white/10 focus:ring-blue-500/20"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "description", className: "text-xs font-bold uppercase tracking-widest text-zinc-500", children: "Description" }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: "description",
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            placeholder: "What does this query do?",
+            className: "bg-white/5 border-white/10 focus:ring-blue-500/20 min-h-[80px]"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsxs(Label, { htmlFor: "tags", className: "text-xs font-bold uppercase tracking-widest text-zinc-500 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Tag, { className: "w-3 h-3" }),
+          " Tags (comma separated)"
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "tags",
+            value: tagsInput,
+            onChange: (e) => setTagsInput(e.target.value),
+            placeholder: "reports, analytics, users",
+            className: "bg-white/5 border-white/10 focus:ring-blue-500/20"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-xs font-bold uppercase tracking-widest text-zinc-500 mb-2 block", children: "Preview" }),
+        /* @__PURE__ */ jsx("div", { className: "bg-[#050505] p-3 rounded-md border border-white/5 max-h-[100px] overflow-y-auto", children: /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono text-zinc-500 italic whitespace-pre-wrap break-words", children: defaultQuery }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onClose, className: "text-zinc-400", children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleSave,
+          disabled: !name,
+          className: "bg-blue-600 hover:bg-blue-500 text-white font-bold",
+          children: "Save Query"
+        }
+      )
+    ] })
+  ] }) });
+}
+function StudioTabBar({
+  tabs,
+  activeTabId,
+  editingTabId,
+  editingTabName,
+  onSetActiveTabId,
+  onSetEditingTabId,
+  onSetEditingTabName,
+  onSetTabs,
+  onCloseTab,
+  onAddTab
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "hidden md:flex h-10 bg-[#0d0d0d] border-b border-white/5 items-center px-2 gap-1 overflow-x-auto no-scrollbar", children: [
+    tabs.map((tab) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: () => onSetActiveTabId(tab.id),
+        onDoubleClick: () => {
+          onSetEditingTabId(tab.id);
+          onSetEditingTabName(tab.name);
+        },
+        className: cn(
+          "h-8 flex items-center px-3 gap-2 rounded-t-md transition-all cursor-pointer min-w-[120px] max-w-[200px] group relative border-t-2",
+          activeTabId === tab.id ? "bg-[#141414] text-zinc-100 border-blue-500" : "text-zinc-500 hover:bg-white/5 border-transparent"
+        ),
+        children: [
+          tab.type === "sql" ? /* @__PURE__ */ jsx(Hash, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(FileJson, { className: "w-3 h-3" }),
+          editingTabId === tab.id ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              autoFocus: true,
+              value: editingTabName,
+              onChange: (e) => onSetEditingTabName(e.target.value),
+              onBlur: () => {
+                if (editingTabName.trim()) {
+                  onSetTabs((prev) => prev.map((t) => t.id === tab.id ? __spreadProps(__spreadValues({}, t), { name: editingTabName.trim() }) : t));
+                }
+                onSetEditingTabId(null);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  if (editingTabName.trim()) {
+                    onSetTabs((prev) => prev.map((t) => t.id === tab.id ? __spreadProps(__spreadValues({}, t), { name: editingTabName.trim() }) : t));
+                  }
+                  onSetEditingTabId(null);
+                } else if (e.key === "Escape") {
+                  onSetEditingTabId(null);
+                }
+              },
+              onClick: (e) => e.stopPropagation(),
+              className: "text-xs font-medium bg-transparent border-b border-blue-500 outline-none w-full text-zinc-100"
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "text-xs truncate font-medium", children: tab.name }),
+          tabs.length > 1 && /* @__PURE__ */ jsx(X, { className: "w-3 h-3 ml-auto opacity-0 group-hover:opacity-100 hover:text-white shrink-0", onClick: (e) => onCloseTab(tab.id, e) })
+        ]
+      },
+      tab.id
+    )),
+    /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4 text-zinc-500 cursor-pointer hover:text-white mx-2", onClick: onAddTab })
+  ] });
+}
+function QueryToolbar({
+  activeConnection,
+  metadata,
+  isExecuting,
+  playgroundMode,
+  transactionActive,
+  editingEnabled,
+  onSaveQuery,
+  onExecuteQuery,
+  onCancelQuery,
+  onBeginTransaction,
+  onCommitTransaction,
+  onRollbackTransaction,
+  onTogglePlayground,
+  onToggleEditing,
+  onImport
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    playgroundMode && /* @__PURE__ */ jsxs("div", { className: "hidden md:flex items-center justify-center gap-2 px-4 py-1 bg-emerald-500/10 border-b border-emerald-500/20 text-emerald-400", children: [
+      /* @__PURE__ */ jsx(FlaskConical, { className: "w-3 h-3" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-bold uppercase tracking-widest", children: "Sandbox Mode \u2014 All changes will be auto-rolled back" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "hidden md:flex items-center justify-between px-4 py-1.5 bg-[#0a0a0a] border-b border-white/5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 py-0.5 rounded bg-blue-500/5 border border-blue-500/10", children: [
+          /* @__PURE__ */ jsx(Terminal, { className: "w-3 h-3 text-blue-400" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-blue-400 uppercase tracking-widest", children: "Query" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-white/5" }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-2",
+            onClick: onSaveQuery,
+            children: [
+              /* @__PURE__ */ jsx(Save, { className: "w-3 h-3" }),
+              " Save"
+            ]
+          }
+        )
+      ] }),
+      isExecuting ? /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          className: "bg-red-600 hover:bg-red-500 text-white font-bold text-body h-7 px-4 gap-2",
+          onClick: onCancelQuery,
+          children: [
+            /* @__PURE__ */ jsx(Square, { className: "w-3 h-3 fill-current" }),
+            "CANCEL"
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          className: "bg-blue-600 hover:bg-blue-500 text-white font-bold text-body h-7 px-4 gap-2",
+          onClick: onExecuteQuery,
+          disabled: !activeConnection,
+          children: [
+            /* @__PURE__ */ jsx(Play, { className: "w-3 h-3 fill-current" }),
+            "RUN"
+          ]
+        }
+      ),
+      activeConnection && (metadata == null ? void 0 : metadata.capabilities.queryLanguage) === "sql" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-2 pl-2 border-l border-white/10", children: [
+        transactionActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-label font-bold text-amber-400 uppercase tracking-wider px-1.5 py-0.5 bg-amber-500/10 rounded border border-amber-500/20 mr-1", children: "TXN" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "ghost",
+              className: "h-7 text-xs font-bold text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10 gap-1",
+              onClick: onCommitTransaction,
+              children: "COMMIT"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "ghost",
+              className: "h-7 text-xs font-bold text-red-400 hover:text-red-300 hover:bg-red-500/10 gap-1",
+              onClick: onRollbackTransaction,
+              children: "ROLLBACK"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            className: "h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-1",
+            onClick: onBeginTransaction,
+            disabled: playgroundMode,
+            children: "BEGIN"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            className: cn(
+              "h-7 text-xs font-bold uppercase tracking-widest gap-1",
+              playgroundMode ? "text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20" : "text-zinc-500 hover:text-white"
+            ),
+            onClick: onTogglePlayground,
+            disabled: transactionActive,
+            title: "Playground mode: queries are auto-rolled back",
+            children: [
+              /* @__PURE__ */ jsx(FlaskConical, { className: "w-3 h-3" }),
+              "SANDBOX"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            className: cn(
+              "h-7 text-xs font-bold uppercase tracking-widest gap-1",
+              editingEnabled ? "text-amber-400 bg-amber-500/10 hover:bg-amber-500/20" : "text-zinc-500 hover:text-white"
+            ),
+            onClick: onToggleEditing,
+            title: "Enable inline data editing",
+            children: [
+              /* @__PURE__ */ jsx(Pencil, { className: "w-3 h-3" }),
+              "EDIT"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            className: "h-7 text-xs font-bold uppercase tracking-widest text-zinc-500 hover:text-white gap-1",
+            onClick: onImport,
+            title: "Import data from CSV/JSON",
+            children: [
+              /* @__PURE__ */ jsx(Upload, { className: "w-3 h-3" }),
+              "IMPORT"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function AIAutopilotPanel({ connection, schemaContext, onExecuteQuery }) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [report, setReport] = useState("");
+  const [error, setError] = useState(null);
+  const [copiedIndex, setCopiedIndex] = useState(null);
+  const reportRef = useRef(null);
+  const runAutopilot = async () => {
+    var _a;
+    if (!connection) return;
+    setIsLoading(true);
+    setError(null);
+    setReport("");
+    try {
+      const [monitoringRes] = await Promise.all([
+        fetch("/api/db/monitoring", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            connection,
+            options: {
+              includeTables: true,
+              includeIndexes: true,
+              slowQueryLimit: 20
+            }
+          })
+        })
+      ]);
+      let monitoringData = null;
+      if (monitoringRes.ok) {
+        monitoringData = await monitoringRes.json();
+      }
+      let filteredSchema = "";
+      if (schemaContext) {
+        try {
+          const tables = JSON.parse(schemaContext);
+          filteredSchema = tables.slice(0, 30).map((t) => {
+            var _a2;
+            const cols = ((_a2 = t.columns) == null ? void 0 : _a2.slice(0, 6).map((c) => `${c.name} (${c.type})`).join(", ")) || "";
+            return `${t.name} (${t.rowCount || 0} rows): ${cols}`;
+          }).join("\n");
+        } catch (e) {
+          filteredSchema = schemaContext.substring(0, 2e3);
+        }
+      }
+      const response = await fetch("/api/ai/autopilot", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          slowQueries: monitoringData == null ? void 0 : monitoringData.slowQueries,
+          indexStats: monitoringData == null ? void 0 : monitoringData.indexes,
+          tableStats: monitoringData == null ? void 0 : monitoringData.tables,
+          performanceMetrics: monitoringData == null ? void 0 : monitoringData.performance,
+          overview: monitoringData == null ? void 0 : monitoringData.overview,
+          schemaContext: filteredSchema,
+          databaseType: connection.type
+        })
+      });
+      if (!response.ok) {
+        const errData = await response.json();
+        throw new Error(errData.error || "Autopilot analysis failed");
+      }
+      const reader = (_a = response.body) == null ? void 0 : _a.getReader();
+      if (!reader) throw new Error("No reader");
+      let fullResponse = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        fullResponse += new TextDecoder().decode(value);
+        setReport(fullResponse);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const copyToClipboard = (text, index) => {
+    navigator.clipboard.writeText(text);
+    setCopiedIndex(index);
+    setTimeout(() => setCopiedIndex(null), 2e3);
+  };
+  const renderMarkdown = (text) => {
+    const lines = text.split("\n");
+    const elements = [];
+    let inCodeBlock = false;
+    let codeContent = "";
+    let codeBlockIdx = 0;
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      if (line.startsWith("```")) {
+        if (inCodeBlock) {
+          const blockIndex = codeBlockIdx++;
+          const sql = codeContent.trim();
+          elements.push(
+            /* @__PURE__ */ jsxs("div", { className: "relative group my-2", children: [
+              /* @__PURE__ */ jsx("pre", { className: "bg-[#050505] rounded-lg p-3 text-body font-mono text-blue-300 overflow-x-auto whitespace-pre-wrap border border-white/5", children: sql }),
+              /* @__PURE__ */ jsxs("div", { className: "absolute top-1.5 right-1.5 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => copyToClipboard(sql, blockIndex),
+                    className: "p-1 rounded bg-white/10 hover:bg-white/20 text-zinc-400",
+                    title: "Copy",
+                    children: copiedIndex === blockIndex ? /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-emerald-400" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3 h-3" })
+                  }
+                ),
+                onExecuteQuery && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => onExecuteQuery(sql),
+                    className: "p-1 rounded bg-blue-600/20 hover:bg-blue-600/30 text-blue-400",
+                    title: "Execute",
+                    children: /* @__PURE__ */ jsx(Play, { className: "w-3 h-3 fill-current" })
+                  }
+                )
+              ] })
+            ] }, `code-${i}`)
+          );
+          codeContent = "";
+          inCodeBlock = false;
+        } else {
+          inCodeBlock = true;
+        }
+        continue;
+      }
+      if (inCodeBlock) {
+        codeContent += line + "\n";
+        continue;
+      }
+      if (line.startsWith("## ")) {
+        elements.push(/* @__PURE__ */ jsx("h2", { className: "text-sm font-bold text-zinc-200 mt-4 mb-2", children: line.slice(3) }, i));
+      } else if (line.startsWith("### ")) {
+        elements.push(/* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-zinc-300 mt-3 mb-1", children: line.slice(4) }, i));
+      } else if (line.startsWith("- ")) {
+        const content = line.slice(2).replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
+        elements.push(/* @__PURE__ */ jsx("li", { className: "text-xs text-zinc-400 ml-4 leading-relaxed", dangerouslySetInnerHTML: { __html: content } }, i));
+      } else if (line.match(/^\d+\.\s/)) {
+        const content = line.replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
+        elements.push(/* @__PURE__ */ jsx("li", { className: "text-xs text-zinc-400 ml-4 leading-relaxed list-decimal", dangerouslySetInnerHTML: { __html: content } }, i));
+      } else if (line.trim()) {
+        const content = line.replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
+        elements.push(/* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-400 leading-relaxed", dangerouslySetInnerHTML: { __html: content } }, i));
+      } else {
+        elements.push(/* @__PURE__ */ jsx("div", { className: "h-2" }, i));
+      }
+    }
+    return elements;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-[#080808]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "p-1 rounded bg-cyan-500/10", children: /* @__PURE__ */ jsx(Sparkles, { className: "w-3.5 h-3.5 text-cyan-400" }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-cyan-400 uppercase tracking-widest", children: "AI Performance Autopilot" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: runAutopilot,
+          disabled: isLoading || !connection,
+          className: cn(
+            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold transition-colors",
+            isLoading ? "bg-cyan-600/20 text-cyan-400 cursor-wait" : "bg-cyan-600 hover:bg-cyan-500 text-white"
+          ),
+          children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }),
+            " Analyzing..."
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(RefreshCw, { className: "w-3 h-3" }),
+            " ",
+            report ? "Re-analyze" : "Run Analysis"
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { ref: reportRef, className: "flex-1 overflow-auto p-4", children: [
+      !report && !isLoading && !error && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full opacity-40", children: [
+        /* @__PURE__ */ jsx(Sparkles, { className: "w-8 h-8 mb-3" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "AI Performance Autopilot" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500 mt-1", children: 'Click "Run Analysis" to get AI-powered optimization recommendations' })
+      ] }),
+      error && /* @__PURE__ */ jsx("div", { className: "bg-red-500/10 border border-red-500/20 rounded-lg p-3 text-xs text-red-400", children: error }),
+      report && /* @__PURE__ */ jsx("div", { className: "prose prose-invert prose-xs max-w-none", children: renderMarkdown(report) })
+    ] })
+  ] });
+}
+var AGG_LABELS = {
+  count: "COUNT",
+  sum: "SUM",
+  avg: "AVG",
+  min: "MIN",
+  max: "MAX"
+};
+function aggregate(values, fn) {
+  const nums = values.map((v) => Number(v)).filter((n) => !isNaN(n));
+  switch (fn) {
+    case "count":
+      return String(values.length);
+    case "sum":
+      return nums.length ? nums.reduce((a, b) => a + b, 0).toFixed(2) : "0";
+    case "avg":
+      return nums.length ? (nums.reduce((a, b) => a + b, 0) / nums.length).toFixed(2) : "0";
+    case "min":
+      return nums.length ? String(Math.min(...nums)) : "-";
+    case "max":
+      return nums.length ? String(Math.max(...nums)) : "-";
+  }
+}
+function PivotTable({ result, onLoadQuery }) {
+  const [rowField, setRowField] = useState(null);
+  const [colField, setColField] = useState(null);
+  const [valueField, setValueField] = useState(null);
+  const [aggFunction, setAggFunction] = useState("count");
+  const fields = (result == null ? void 0 : result.fields) || [];
+  const rows = useMemo(() => (result == null ? void 0 : result.rows) || [], [result == null ? void 0 : result.rows]);
+  useEffect(() => {
+    if (fields.length >= 2 && !rowField) {
+      const strCol = fields.find((f) => {
+        var _a;
+        const sample = (_a = rows[0]) == null ? void 0 : _a[f];
+        return typeof sample === "string";
+      });
+      if (strCol) setRowField(strCol);
+      const numCol = fields.find((f) => {
+        var _a;
+        const sample = (_a = rows[0]) == null ? void 0 : _a[f];
+        return typeof sample === "number";
+      });
+      if (numCol) setValueField(numCol);
+    }
+  }, [fields.length]);
+  const pivotData = useMemo(() => {
+    var _a, _b;
+    if (!rowField || !rows.length) return null;
+    const groups = /* @__PURE__ */ new Map();
+    const colValues = /* @__PURE__ */ new Set();
+    for (const row of rows) {
+      const rowKey = String((_a = row[rowField]) != null ? _a : "NULL");
+      const colKey = colField ? String((_b = row[colField]) != null ? _b : "NULL") : "__all__";
+      const value = valueField ? row[valueField] : 1;
+      if (colField) colValues.add(colKey);
+      if (!groups.has(rowKey)) groups.set(rowKey, /* @__PURE__ */ new Map());
+      const colMap = groups.get(rowKey);
+      if (!colMap.has(colKey)) colMap.set(colKey, []);
+      colMap.get(colKey).push(value);
+    }
+    const colKeys = colField ? Array.from(colValues).sort() : ["__all__"];
+    const pivotRows = [];
+    for (const [rowKey, colMap] of groups) {
+      const values = /* @__PURE__ */ new Map();
+      for (const ck of colKeys) {
+        const vals = colMap.get(ck) || [];
+        values.set(ck, aggregate(vals, aggFunction));
+      }
+      pivotRows.push({ rowKey, values });
+    }
+    pivotRows.sort((a, b) => a.rowKey.localeCompare(b.rowKey));
+    return { colKeys, pivotRows };
+  }, [rows, rowField, colField, valueField, aggFunction]);
+  const generateSQL = useCallback(() => {
+    if (!rowField) return "";
+    const select = [`"${rowField}"`];
+    const groupBy = [`"${rowField}"`];
+    if (colField) {
+      const colKeys = (pivotData == null ? void 0 : pivotData.colKeys) || [];
+      for (const ck of colKeys) {
+        if (ck === "__all__") continue;
+        const valExpr = valueField ? `"${valueField}"` : "1";
+        select.push(
+          `${AGG_LABELS[aggFunction]}(CASE WHEN "${colField}" = '${ck.replace(/'/g, "''")}' THEN ${valExpr} END) AS "${ck}"`
+        );
+      }
+    } else {
+      const valExpr = valueField ? `"${valueField}"` : "*";
+      select.push(`${AGG_LABELS[aggFunction]}(${valExpr}) AS "${aggFunction}_value"`);
+    }
+    return `SELECT
+  ${select.join(",\n  ")}
+FROM your_table
+GROUP BY ${groupBy.join(", ")}
+ORDER BY ${groupBy.join(", ")};`;
+  }, [rowField, colField, valueField, aggFunction, pivotData]);
+  if (!result || rows.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col items-center justify-center opacity-30", children: [
+      /* @__PURE__ */ jsx(Columns3, { className: "w-8 h-8 mb-3" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Pivot Table" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500 mt-1", children: "Execute a query to create pivot tables" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-[#080808]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-white/5 bg-[#0a0a0a] flex-wrap", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 font-bold uppercase", children: "Rows:" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: rowField || "",
+            onChange: (e) => setRowField(e.target.value || null),
+            className: "bg-[#111] border border-white/10 rounded px-2 py-1 text-body text-zinc-300 outline-none",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+              fields.map((f) => /* @__PURE__ */ jsx("option", { value: f, children: f }, f))
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 font-bold uppercase", children: "Columns:" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: colField || "",
+            onChange: (e) => setColField(e.target.value || null),
+            className: "bg-[#111] border border-white/10 rounded px-2 py-1 text-body text-zinc-300 outline-none",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "None" }),
+              fields.filter((f) => f !== rowField).map((f) => /* @__PURE__ */ jsx("option", { value: f, children: f }, f))
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 font-bold uppercase", children: "Values:" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: valueField || "",
+            onChange: (e) => setValueField(e.target.value || null),
+            className: "bg-[#111] border border-white/10 rounded px-2 py-1 text-body text-zinc-300 outline-none",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Count" }),
+              fields.filter((f) => f !== rowField && f !== colField).map((f) => /* @__PURE__ */ jsx("option", { value: f, children: f }, f))
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: Object.keys(AGG_LABELS).map((fn) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setAggFunction(fn),
+          className: cn(
+            "px-1.5 py-0.5 rounded text-xs font-bold transition-colors",
+            aggFunction === fn ? "bg-blue-500/20 text-blue-400 border border-blue-500/20" : "text-zinc-600 hover:text-zinc-400"
+          ),
+          children: AGG_LABELS[fn]
+        },
+        fn
+      )) }),
+      onLoadQuery && rowField && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            const sql = generateSQL();
+            if (sql) onLoadQuery(sql);
+          },
+          className: "ml-auto flex items-center gap-1 px-2 py-1 rounded text-xs font-bold text-zinc-500 hover:text-blue-400 hover:bg-blue-500/10 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(ArrowRight, { className: "w-3 h-3" }),
+            " Generate SQL"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: pivotData && pivotData.pivotRows.length > 0 ? /* @__PURE__ */ jsxs("table", { className: "w-full text-body font-mono", children: [
+      /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-[#0d0d0d]", children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-2 text-zinc-500 border-b border-r border-white/5 font-bold uppercase tracking-wider", children: rowField }),
+        pivotData.colKeys.map((ck) => /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-2 text-zinc-500 border-b border-r border-white/5 font-bold", children: ck === "__all__" ? `${AGG_LABELS[aggFunction]}(${valueField || "*"})` : ck }, ck))
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: pivotData.pivotRows.map((row, i) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-blue-500/[0.03] border-b border-white/5", children: [
+        /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-zinc-300 border-r border-white/5 font-medium", children: row.rowKey }),
+        pivotData.colKeys.map((ck) => /* @__PURE__ */ jsx("td", { className: "px-3 py-1.5 text-right text-amber-500/90 border-r border-white/5", children: row.values.get(ck) || "0" }, ck))
+      ] }, i)) })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full opacity-30", children: [
+      /* @__PURE__ */ jsx(GripVertical, { className: "w-6 h-6 mb-2" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs", children: "Select row and value fields to build pivot" })
+    ] }) }),
+    pivotData && /* @__PURE__ */ jsxs("div", { className: "px-4 py-1.5 border-t border-white/5 bg-[#0a0a0a] text-xs text-zinc-500 font-mono", children: [
+      pivotData.pivotRows.length,
+      " groups \u2022 ",
+      pivotData.colKeys.length,
+      " columns \u2022 ",
+      AGG_LABELS[aggFunction],
+      " aggregation"
+    ] })
+  ] });
+}
+function DatabaseDocs({ schema, schemaContext, databaseType }) {
+  const [search, setSearch] = useState("");
+  const [aiDocs, setAiDocs] = useState("");
+  const [isAiLoading, setIsAiLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const filteredSchema = schema.filter(
+    (t) => {
+      var _a;
+      return t.name.toLowerCase().includes(search.toLowerCase()) || ((_a = t.columns) == null ? void 0 : _a.some((c) => c.name.toLowerCase().includes(search.toLowerCase())));
+    }
+  );
+  const generateAiDocs = async () => {
+    var _a;
+    setIsAiLoading(true);
+    setError(null);
+    setAiDocs("");
+    try {
+      let filteredSchemaStr = "";
+      if (schemaContext) {
+        try {
+          const tables = JSON.parse(schemaContext);
+          filteredSchemaStr = tables.slice(0, 50).map((t) => {
+            var _a2;
+            const cols = ((_a2 = t.columns) == null ? void 0 : _a2.map(
+              (c) => `${c.name} (${c.type}${c.isPrimary ? ", PK" : ""}${c.isNullable === false ? ", NOT NULL" : ""})`
+            ).join(", ")) || "";
+            return `Table: ${t.name} (${t.rowCount || 0} rows)
+Columns: ${cols}`;
+          }).join("\n\n");
+        } catch (e) {
+          filteredSchemaStr = schemaContext.substring(0, 5e3);
+        }
+      }
+      const response = await fetch("/api/ai/describe-schema", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          schemaContext: filteredSchemaStr,
+          databaseType,
+          mode: "full"
+        })
+      });
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err.error || "Documentation generation failed");
+      }
+      const reader = (_a = response.body) == null ? void 0 : _a.getReader();
+      if (!reader) throw new Error("No reader");
+      let full = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        full += new TextDecoder().decode(value);
+        setAiDocs(full);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setIsAiLoading(false);
+    }
+  };
+  const exportMarkdown = () => {
+    let md = `# Database Documentation
+
+`;
+    md += `**Type:** ${databaseType || "Unknown"}
+`;
+    md += `**Tables:** ${schema.length}
+
+`;
+    if (aiDocs) {
+      md += `## AI Analysis
+
+${aiDocs}
+
+---
+
+`;
+    }
+    md += `## Table Reference
+
+`;
+    for (const table of schema) {
+      md += `### ${table.name}
+
+`;
+      if (table.rowCount !== void 0) md += `Rows: ${table.rowCount.toLocaleString()}
+
+`;
+      if (table.columns && table.columns.length > 0) {
+        md += `| Column | Type | Primary | Nullable |
+|--------|------|---------|----------|
+`;
+        for (const col of table.columns) {
+          md += `| ${col.name} | ${col.type} | ${col.isPrimary ? "Yes" : ""} | ${col.nullable !== false ? "Yes" : "No"} |
+`;
+        }
+        md += "\n";
+      }
+    }
+    const blob = new Blob([md], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "database-docs.md";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const renderMarkdown = (text) => {
+    return text.split("\n").map((line, i) => {
+      if (line.startsWith("## ")) return /* @__PURE__ */ jsx("h2", { className: "text-sm font-bold text-zinc-200 mt-4 mb-2", children: line.slice(3) }, i);
+      if (line.startsWith("### ")) return /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-zinc-300 mt-3 mb-1", children: line.slice(4) }, i);
+      if (line.startsWith("- ")) {
+        const content = line.slice(2).replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
+        return /* @__PURE__ */ jsx("li", { className: "text-xs text-zinc-400 ml-4 leading-relaxed", dangerouslySetInnerHTML: { __html: content } }, i);
+      }
+      if (line.match(/^\d+\.\s/)) {
+        const content = line.replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
+        return /* @__PURE__ */ jsx("li", { className: "text-xs text-zinc-400 ml-4 leading-relaxed list-decimal", dangerouslySetInnerHTML: { __html: content } }, i);
+      }
+      if (line.trim()) {
+        const content = line.replace(/\*\*(.*?)\*\*/g, '<strong class="text-zinc-200">$1</strong>');
+        return /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-400 leading-relaxed", dangerouslySetInnerHTML: { __html: content } }, i);
+      }
+      return /* @__PURE__ */ jsx("div", { className: "h-1.5" }, i);
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-[#080808]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "p-1 rounded bg-teal-500/10", children: /* @__PURE__ */ jsx(FileText, { className: "w-3.5 h-3.5 text-teal-400" }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-teal-400 uppercase tracking-widest", children: "Database Docs" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-label text-zinc-500 font-mono", children: [
+          schema.length,
+          " tables"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: generateAiDocs,
+            disabled: isAiLoading,
+            className: cn(
+              "flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-bold transition-colors",
+              isAiLoading ? "bg-teal-600/20 text-teal-400 cursor-wait" : "bg-teal-600 hover:bg-teal-500 text-white"
+            ),
+            children: [
+              isAiLoading ? /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ jsx(Sparkles, { className: "w-3 h-3" }),
+              aiDocs ? "Regenerate" : "AI Describe"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: exportMarkdown,
+            className: "flex items-center gap-1 px-2.5 py-1 rounded-lg bg-white/5 text-zinc-400 text-xs font-bold hover:bg-white/10 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(Download, { className: "w-3 h-3" }),
+              " Export MD"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-b border-white/5 bg-[#0a0a0a]", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-zinc-500" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          placeholder: "Search tables or columns...",
+          className: "w-full bg-[#111] border border-white/10 rounded-lg pl-7 pr-3 py-1.5 text-xs text-zinc-200 placeholder:text-zinc-600 outline-none focus:border-teal-500/30"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-4 space-y-3", children: [
+      error && /* @__PURE__ */ jsx("div", { className: "bg-red-500/10 border border-red-500/20 rounded-lg p-3 text-xs text-red-400", children: error }),
+      (aiDocs || isAiLoading) && /* @__PURE__ */ jsxs("div", { className: "bg-teal-500/5 border border-teal-500/10 rounded-lg p-4 mb-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+          /* @__PURE__ */ jsx(Sparkles, { className: "w-3.5 h-3.5 text-teal-400" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-teal-400 uppercase tracking-wider", children: "AI-Generated Documentation" }),
+          isAiLoading && /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin text-teal-400" })
+        ] }),
+        aiDocs && /* @__PURE__ */ jsx("div", { className: "prose prose-invert prose-xs max-w-none", children: renderMarkdown(aiDocs) })
+      ] }),
+      /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider", children: "Table Reference" }),
+      filteredSchema.map((table) => {
+        var _a;
+        return /* @__PURE__ */ jsxs("div", { className: "bg-[#0a0a0a] border border-white/5 rounded-lg overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-zinc-200", children: table.name }),
+              table.rowCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-zinc-500 font-mono", children: [
+                table.rowCount.toLocaleString(),
+                " rows"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-zinc-600", children: [
+              ((_a = table.columns) == null ? void 0 : _a.length) || 0,
+              " columns"
+            ] })
+          ] }),
+          table.columns && table.columns.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-white/5", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-body", children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-zinc-500", children: [
+              /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-1 font-normal", children: "Column" }),
+              /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-1 font-normal", children: "Type" }),
+              /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-1 font-normal", children: "PK" }),
+              /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-1 font-normal", children: "Nullable" })
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: table.columns.map((col) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-white/[0.03] hover:bg-white/[0.02]", children: [
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-1 text-zinc-300 font-mono", children: col.name }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-1 text-zinc-500 font-mono", children: col.type }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-1", children: col.isPrimary && /* @__PURE__ */ jsx("span", { className: "text-amber-400 text-label font-bold", children: "PK" }) }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-1 text-zinc-600", children: col.nullable !== false ? "Yes" : "No" })
+            ] }, col.name)) })
+          ] }) })
+        ] }, table.name);
+      })
+    ] })
+  ] });
+}
+function QueryHistory({ onSelectQuery, activeConnectionId, refreshTrigger }) {
+  const [history, setHistory] = useState([]);
+  const [search, setSearch] = useState("");
+  const [filterStatus, setFilterStatus] = useState("all");
+  const [isGlobal, setIsGlobal] = useState(false);
+  const [sortField, setSortField] = useState("executedAt");
+  const [sortOrder, setSortOrder] = useState("desc");
+  useEffect(() => {
+    setHistory(storage.getHistory());
+  }, [refreshTrigger]);
+  const filteredHistory = useMemo(() => {
+    return history.filter((item) => {
+      var _a, _b;
+      const matchesSearch = item.query.toLowerCase().includes(search.toLowerCase()) || ((_a = item.connectionName) == null ? void 0 : _a.toLowerCase().includes(search.toLowerCase())) || ((_b = item.tabName) == null ? void 0 : _b.toLowerCase().includes(search.toLowerCase()));
+      const matchesStatus = filterStatus === "all" || item.status === filterStatus;
+      const matchesConnection = isGlobal || !activeConnectionId || item.connectionId === activeConnectionId;
+      return matchesSearch && matchesStatus && matchesConnection;
+    }).sort((a, b) => {
+      let valA = 0;
+      let valB = 0;
+      if (sortField === "executedAt") {
+        valA = a.executedAt ? new Date(a.executedAt).getTime() : 0;
+        valB = b.executedAt ? new Date(b.executedAt).getTime() : 0;
+      } else {
+        valA = a[sortField] || 0;
+        valB = b[sortField] || 0;
+      }
+      if (sortOrder === "asc") return valA > valB ? 1 : -1;
+      return valA < valB ? 1 : -1;
+    });
+  }, [history, search, filterStatus, isGlobal, activeConnectionId, sortField, sortOrder]);
+  const handleClearHistory = () => {
+    if (confirm("Are you sure you want to clear all history?")) {
+      storage.clearHistory();
+      setHistory([]);
+    }
+  };
+  const handleSort = (field) => {
+    if (sortField === field) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortField(field);
+      setSortOrder("desc");
+    }
+  };
+  const exportHistory = (format3) => {
+    let content = "";
+    let mimeType = "";
+    const fileName = `query_history_${(/* @__PURE__ */ new Date()).getTime()}.${format3}`;
+    if (format3 === "csv") {
+      const headers = ["Executed At", "Status", "Connection", "Tab", "Execution Time (ms)", "Rows", "Query", "Error"];
+      const rows = filteredHistory.map((item) => [
+        item.executedAt,
+        item.status,
+        item.connectionName || item.connectionId,
+        item.tabName || "",
+        item.executionTime,
+        item.rowCount || 0,
+        `"${item.query.replace(/"/g, '""')}"`,
+        `"${(item.errorMessage || "").replace(/"/g, '""')}"`
+      ].join(","));
+      content = [headers.join(","), ...rows].join("\n");
+      mimeType = "text/csv";
+    } else {
+      content = JSON.stringify(filteredHistory, null, 2);
+      mimeType = "application/json";
+    }
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-[#080808]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-white/5 bg-[#0a0a0a]/50 backdrop-blur-sm sticky top-0 z-10 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "p-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20", children: /* @__PURE__ */ jsx(History, { className: "w-4 h-4 text-emerald-400" }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-bold text-zinc-100 uppercase tracking-widest flex items-center gap-2", children: "Query History" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-zinc-500 font-medium", children: [
+              "Showing ",
+              filteredHistory.length,
+              " executions"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 text-xs font-bold uppercase tracking-widest text-zinc-400 hover:text-white gap-2", children: [
+              /* @__PURE__ */ jsx(Download, { className: "w-3.5 h-3.5" }),
+              " Export"
+            ] }) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "bg-[#0d0d0d] border-white/10 text-zinc-300", children: [
+              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => exportHistory("csv"), className: "text-xs cursor-pointer", children: "Export as CSV" }),
+              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => exportHistory("json"), className: "text-xs cursor-pointer", children: "Export as JSON" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: handleClearHistory,
+              className: "h-8 text-xs font-bold uppercase tracking-widest text-red-400/70 hover:text-red-400 hover:bg-red-400/10",
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5 mr-2" }),
+                " Clear"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-[240px]", children: [
+          /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: "Search by query, connection or tab...",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              className: "pl-9 h-9 bg-white/5 border-white/10 text-xs focus:ring-emerald-500/20 rounded-lg"
+            }
+          ),
+          search && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setSearch(""),
+              className: "absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-white",
+              children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-white/5 rounded-lg p-1 border border-white/10", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsGlobal(false),
+              className: cn(
+                "px-3 py-1.5 text-xs font-bold uppercase rounded-md transition-all",
+                !isGlobal ? "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20" : "text-zinc-500 hover:text-zinc-300"
+              ),
+              children: "Active Conn"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsGlobal(true),
+              className: cn(
+                "px-3 py-1.5 text-xs font-bold uppercase rounded-md transition-all",
+                isGlobal ? "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20" : "text-zinc-500 hover:text-zinc-300"
+              ),
+              children: "All Connections"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex bg-white/5 rounded-lg p-1 border border-white/10", children: ["all", "success", "error"].map((status) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setFilterStatus(status),
+            className: cn(
+              "px-3 py-1.5 text-xs font-bold uppercase rounded-md transition-all",
+              filterStatus === status ? "bg-white/10 text-white" : "text-zinc-500 hover:text-zinc-300"
+            ),
+            children: status
+          },
+          status
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto custom-scrollbar", children: filteredHistory.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col items-center justify-center opacity-20 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(History, { className: "w-16 h-16 mb-4 text-zinc-600" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "No history items found" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500 mt-1 uppercase tracking-widest", children: "Run some queries to see them here" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "min-w-[800px]", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-white/[0.02] border-b border-white/5 text-xs font-bold uppercase tracking-wider text-zinc-500", children: [
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 w-10 text-center", children: "Status" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 cursor-pointer hover:text-zinc-300 transition-colors group", onClick: () => handleSort("executedAt"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          "Executed At",
+          /* @__PURE__ */ jsx(ArrowUpDown, { className: cn("w-3 h-3 transition-opacity", sortField === "executedAt" ? "opacity-100 text-emerald-500" : "opacity-0 group-hover:opacity-100") })
+        ] }) }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3", children: "Source" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3", children: "SQL Query" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 cursor-pointer hover:text-zinc-300 transition-colors group", onClick: () => handleSort("executionTime"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          "Duration",
+          /* @__PURE__ */ jsx(ArrowUpDown, { className: cn("w-3 h-3 transition-opacity", sortField === "executionTime" ? "opacity-100 text-emerald-500" : "opacity-0 group-hover:opacity-100") })
+        ] }) }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 cursor-pointer hover:text-zinc-300 transition-colors group", onClick: () => handleSort("rowCount"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          "Rows",
+          /* @__PURE__ */ jsx(ArrowUpDown, { className: cn("w-3 h-3 transition-opacity", sortField === "rowCount" ? "opacity-100 text-emerald-500" : "opacity-0 group-hover:opacity-100") })
+        ] }) }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 w-20" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-white/5", children: filteredHistory.map((item) => /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          className: "hover:bg-white/[0.03] transition-colors group text-xs border-b border-white/5",
+          children: [
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-4 text-center", children: /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: item.status === "success" ? /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20", children: /* @__PURE__ */ jsx(CheckCircle2, { className: "w-3 h-3 text-emerald-500" }) }) : /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full bg-red-500/10 flex items-center justify-center border border-red-500/20", children: /* @__PURE__ */ jsx(AlertCircle, { className: "w-3 h-3 text-red-500" }) }) }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-200 font-medium", children: item.executedAt ? format(new Date(item.executedAt), "MMM d, HH:mm:ss") : "-" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 font-mono mt-0.5", children: item.executedAt ? format(new Date(item.executedAt), "yyyy") : "" })
+            ] }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-zinc-300", children: [
+                /* @__PURE__ */ jsx(Database, { className: "w-3 h-3 text-blue-400" }),
+                /* @__PURE__ */ jsx("span", { className: "font-semibold", children: item.connectionName || "Unknown" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-zinc-500 text-xs", children: [
+                /* @__PURE__ */ jsx(Hash, { className: "w-2.5 h-2.5" }),
+                /* @__PURE__ */ jsx("span", { children: item.tabName || "Default Tab" })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-4 max-w-md", children: /* @__PURE__ */ jsxs("div", { className: "bg-[#050505] border border-white/5 rounded-md p-2 relative group-hover:border-white/10 transition-colors", children: [
+              /* @__PURE__ */ jsx("pre", { className: "text-body font-mono text-zinc-400 line-clamp-2 break-all whitespace-pre-wrap leading-relaxed", children: item.query }),
+              item.errorMessage && /* @__PURE__ */ jsx("div", { className: "mt-2 pt-2 border-t border-red-500/10 text-xs text-red-400/80 font-mono italic", children: item.errorMessage })
+            ] }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxs("span", { className: cn(
+              "px-2 py-0.5 rounded text-xs font-mono font-bold",
+              item.executionTime > 500 ? "text-amber-400 bg-amber-400/10" : "text-zinc-400 bg-white/5"
+            ), children: [
+              item.executionTime,
+              "ms"
+            ] }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("span", { className: "text-zinc-400 font-mono text-xs", children: item.rowCount != null ? item.rowCount.toLocaleString() : "-" }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-4 text-right", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-8 w-8 p-0 hover:bg-emerald-500/10 hover:text-emerald-400",
+                onClick: () => onSelectQuery(item.query),
+                title: "Restore Query",
+                children: /* @__PURE__ */ jsx(RotateCcw, { className: "w-3.5 h-3.5" })
+              }
+            ) })
+          ]
+        },
+        item.id
+      )) })
+    ] }) }) })
+  ] });
+}
+function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }) {
+  const [queries, setQueries] = useState([]);
+  const [search, setSearch] = useState("");
+  useEffect(() => {
+    setQueries(storage.getSavedQueries());
+  }, [refreshTrigger]);
+  const filteredQueries = queries.filter((q) => {
+    const matchesSearch = q.name.toLowerCase().includes(search.toLowerCase()) || q.query.toLowerCase().includes(search.toLowerCase());
+    const matchesType = !connectionType || q.connectionType === connectionType;
+    return matchesSearch && matchesType;
+  });
+  const handleDelete = (id, e) => {
+    e.stopPropagation();
+    if (confirm("Are you sure you want to delete this saved query?")) {
+      storage.deleteSavedQuery(id);
+      setQueries(storage.getSavedQueries());
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-[#0a0a0a]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-white/5 flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-bold text-zinc-400 uppercase tracking-widest flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Bookmark, { className: "w-4 h-4" }),
+        " Saved Queries"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Search saved queries...",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            className: "pl-8 h-8 bg-white/5 border-white/10 text-xs focus:ring-blue-500/20"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto custom-scrollbar", children: filteredQueries.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col items-center justify-center opacity-20 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Bookmark, { className: "w-12 h-12 mb-4" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm italic", children: "No saved queries found" })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-px bg-white/5", children: filteredQueries.map((q) => {
+      var _a;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "bg-[#0a0a0a] p-4 hover:bg-white/[0.02] transition-colors group cursor-pointer",
+          onClick: () => onSelectQuery(q.query),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-2", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h4", { className: "text-xs font-bold text-blue-400 mb-1 group-hover:text-blue-300 transition-colors", children: q.name }),
+                q.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500 line-clamp-1", children: q.description })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 text-zinc-500 hover:text-white", children: /* @__PURE__ */ jsx(Edit3, { className: "w-3 h-3" }) }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-6 w-6 text-zinc-500 hover:text-red-400",
+                    onClick: (e) => handleDelete(q.id, e),
+                    children: /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "bg-[#050505] border border-white/5 rounded-md p-2 mb-3", children: /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono text-zinc-400 line-clamp-3", children: q.query }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 rounded bg-blue-500/10 border border-blue-500/20 text-label font-bold text-blue-400 uppercase tracking-tighter", children: q.connectionType }),
+                (_a = q.tags) == null ? void 0 : _a.map((tag) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-label text-zinc-500", children: [
+                  /* @__PURE__ */ jsx(Tag, { className: "w-2.5 h-2.5" }),
+                  " ",
+                  tag
+                ] }, tag))
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "text-label text-zinc-600 flex items-center gap-1 font-mono", children: [
+                /* @__PURE__ */ jsx(Calendar, { className: "w-2.5 h-2.5" }),
+                " ",
+                format(q.updatedAt, "MMM d, yyyy")
+              ] })
+            ] })
+          ]
+        },
+        q.id
+      );
+    }) }) })
+  ] });
+}
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge(_a) {
+  var _b = _a, {
+    className,
+    variant,
+    asChild = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "asChild"
+  ]);
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    __spreadValues({
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className)
+    }, props)
+  );
+}
+function useAllConnections() {
+  const [connections, setConnections] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      const userConns = storage.getConnections();
+      try {
+        const res = await fetch("/api/connections/managed");
+        if (res.ok) {
+          const { connections: managedConns } = await res.json();
+          if ((managedConns == null ? void 0 : managedConns.length) > 0 && !cancelled) {
+            const merged = [];
+            const addedIds = /* @__PURE__ */ new Set();
+            for (const mc of managedConns) {
+              merged.push(__spreadProps(__spreadValues({}, mc), { createdAt: new Date(mc.createdAt) }));
+              addedIds.add(mc.id);
+              if (mc.seedId) addedIds.add(`seed:${mc.seedId}`);
+            }
+            for (const uc of userConns) {
+              if (addedIds.has(uc.id)) continue;
+              if (uc.seedId && managedConns.some((mc) => mc.seedId === uc.seedId)) continue;
+              merged.push(uc);
+            }
+            setConnections(merged);
+            setLoading(false);
+            return;
+          }
+        }
+      } catch (e) {
+      }
+      if (!cancelled) {
+        setConnections(userConns);
+        setLoading(false);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return { connections, loading };
+}
+
+// src/lib/schema-diff/diff-engine.ts
+function diffColumns(sourceCols, targetCols) {
+  const diffs = [];
+  const sourceMap = new Map(sourceCols.map((c) => [c.name, c]));
+  const targetMap = new Map(targetCols.map((c) => [c.name, c]));
+  for (const [name, col] of targetMap) {
+    if (!sourceMap.has(name)) {
+      diffs.push({
+        action: "added",
+        columnName: name,
+        targetType: col.type,
+        targetNullable: col.nullable,
+        targetDefault: col.defaultValue,
+        targetIsPrimary: col.isPrimary,
+        changes: [`Added column "${name}" (${col.type})`]
+      });
+    }
+  }
+  for (const [name, col] of sourceMap) {
+    if (!targetMap.has(name)) {
+      diffs.push({
+        action: "removed",
+        columnName: name,
+        sourceType: col.type,
+        sourceNullable: col.nullable,
+        sourceDefault: col.defaultValue,
+        sourceIsPrimary: col.isPrimary,
+        changes: [`Removed column "${name}" (${col.type})`]
+      });
+    }
+  }
+  for (const [name, sourceCol] of sourceMap) {
+    const targetCol = targetMap.get(name);
+    if (!targetCol) continue;
+    const changes = [];
+    if (sourceCol.type.toLowerCase() !== targetCol.type.toLowerCase()) {
+      changes.push(`Type changed: ${sourceCol.type} \u2192 ${targetCol.type}`);
+    }
+    if (sourceCol.nullable !== targetCol.nullable) {
+      changes.push(`Nullable changed: ${sourceCol.nullable} \u2192 ${targetCol.nullable}`);
+    }
+    if ((sourceCol.defaultValue || "") !== (targetCol.defaultValue || "")) {
+      changes.push(`Default changed: ${sourceCol.defaultValue || "none"} \u2192 ${targetCol.defaultValue || "none"}`);
+    }
+    if (sourceCol.isPrimary !== targetCol.isPrimary) {
+      changes.push(`Primary key changed: ${sourceCol.isPrimary} \u2192 ${targetCol.isPrimary}`);
+    }
+    if (changes.length > 0) {
+      diffs.push({
+        action: "modified",
+        columnName: name,
+        sourceType: sourceCol.type,
+        targetType: targetCol.type,
+        sourceNullable: sourceCol.nullable,
+        targetNullable: targetCol.nullable,
+        sourceDefault: sourceCol.defaultValue,
+        targetDefault: targetCol.defaultValue,
+        sourceIsPrimary: sourceCol.isPrimary,
+        targetIsPrimary: targetCol.isPrimary,
+        changes
+      });
+    }
+  }
+  return diffs;
+}
+function diffIndexes(sourceIndexes, targetIndexes) {
+  const diffs = [];
+  const sourceMap = /* @__PURE__ */ new Map();
+  sourceIndexes.forEach((idx) => {
+    const key = idx.name || idx.columns.sort().join(",");
+    sourceMap.set(key, idx);
+  });
+  const targetMap = /* @__PURE__ */ new Map();
+  targetIndexes.forEach((idx) => {
+    const key = idx.name || idx.columns.sort().join(",");
+    targetMap.set(key, idx);
+  });
+  for (const [key, idx] of targetMap) {
+    if (!sourceMap.has(key)) {
+      diffs.push({
+        action: "added",
+        indexName: idx.name || key,
+        targetColumns: idx.columns,
+        targetUnique: idx.unique,
+        changes: [`Added index "${idx.name || key}" on (${idx.columns.join(", ")})`]
+      });
+    }
+  }
+  for (const [key, idx] of sourceMap) {
+    if (!targetMap.has(key)) {
+      diffs.push({
+        action: "removed",
+        indexName: idx.name || key,
+        sourceColumns: idx.columns,
+        sourceUnique: idx.unique,
+        changes: [`Removed index "${idx.name || key}"`]
+      });
+    }
+  }
+  for (const [key, sourceIdx] of sourceMap) {
+    const targetIdx = targetMap.get(key);
+    if (!targetIdx) continue;
+    const changes = [];
+    const sourceColStr = sourceIdx.columns.sort().join(",");
+    const targetColStr = targetIdx.columns.sort().join(",");
+    if (sourceColStr !== targetColStr) {
+      changes.push(`Columns changed: (${sourceIdx.columns.join(", ")}) \u2192 (${targetIdx.columns.join(", ")})`);
+    }
+    if (sourceIdx.unique !== targetIdx.unique) {
+      changes.push(`Unique changed: ${sourceIdx.unique} \u2192 ${targetIdx.unique}`);
+    }
+    if (changes.length > 0) {
+      diffs.push({
+        action: "modified",
+        indexName: sourceIdx.name || key,
+        sourceColumns: sourceIdx.columns,
+        targetColumns: targetIdx.columns,
+        sourceUnique: sourceIdx.unique,
+        targetUnique: targetIdx.unique,
+        changes
+      });
+    }
+  }
+  return diffs;
+}
+function diffForeignKeys(sourceFKs, targetFKs) {
+  const diffs = [];
+  const makeKey = (fk) => `${fk.columnName}\u2192${fk.referencedTable}.${fk.referencedColumn}`;
+  const sourceMap = new Map(sourceFKs.map((fk) => [makeKey(fk), fk]));
+  const targetMap = new Map(targetFKs.map((fk) => [makeKey(fk), fk]));
+  for (const [key, fk] of targetMap) {
+    if (!sourceMap.has(key)) {
+      diffs.push({
+        action: "added",
+        columnName: fk.columnName,
+        targetReferencedTable: fk.referencedTable,
+        targetReferencedColumn: fk.referencedColumn,
+        changes: [`Added FK: ${fk.columnName} \u2192 ${fk.referencedTable}(${fk.referencedColumn})`]
+      });
+    }
+  }
+  for (const [key, fk] of sourceMap) {
+    if (!targetMap.has(key)) {
+      diffs.push({
+        action: "removed",
+        columnName: fk.columnName,
+        sourceReferencedTable: fk.referencedTable,
+        sourceReferencedColumn: fk.referencedColumn,
+        changes: [`Removed FK: ${fk.columnName} \u2192 ${fk.referencedTable}(${fk.referencedColumn})`]
+      });
+    }
+  }
+  return diffs;
+}
+function diffSchemas(source, target) {
+  const sourceMap = new Map(source.map((t) => [t.name, t]));
+  const targetMap = new Map(target.map((t) => [t.name, t]));
+  const tables = [];
+  let added = 0, removed = 0, modified = 0;
+  for (const [name, table] of targetMap) {
+    if (!sourceMap.has(name)) {
+      tables.push({
+        action: "added",
+        tableName: name,
+        columns: table.columns.map((c) => ({
+          action: "added",
+          columnName: c.name,
+          targetType: c.type,
+          targetNullable: c.nullable,
+          targetDefault: c.defaultValue,
+          targetIsPrimary: c.isPrimary,
+          changes: [`Added column "${c.name}" (${c.type})`]
+        })),
+        indexes: table.indexes.map((idx) => ({
+          action: "added",
+          indexName: idx.name,
+          targetColumns: idx.columns,
+          targetUnique: idx.unique,
+          changes: [`Added index "${idx.name}"`]
+        })),
+        foreignKeys: (table.foreignKeys || []).map((fk) => ({
+          action: "added",
+          columnName: fk.columnName,
+          targetReferencedTable: fk.referencedTable,
+          targetReferencedColumn: fk.referencedColumn,
+          changes: [`Added FK: ${fk.columnName} \u2192 ${fk.referencedTable}(${fk.referencedColumn})`]
+        }))
+      });
+      added++;
+    }
+  }
+  for (const [name, table] of sourceMap) {
+    if (!targetMap.has(name)) {
+      tables.push({
+        action: "removed",
+        tableName: name,
+        columns: table.columns.map((c) => ({
+          action: "removed",
+          columnName: c.name,
+          sourceType: c.type,
+          sourceNullable: c.nullable,
+          sourceDefault: c.defaultValue,
+          sourceIsPrimary: c.isPrimary,
+          changes: [`Removed column "${c.name}"`]
+        })),
+        indexes: [],
+        foreignKeys: []
+      });
+      removed++;
+    }
+  }
+  for (const [name, sourceTable] of sourceMap) {
+    const targetTable = targetMap.get(name);
+    if (!targetTable) continue;
+    const columns = diffColumns(sourceTable.columns, targetTable.columns);
+    const indexes = diffIndexes(sourceTable.indexes, targetTable.indexes);
+    const foreignKeys = diffForeignKeys(sourceTable.foreignKeys || [], targetTable.foreignKeys || []);
+    if (columns.length > 0 || indexes.length > 0 || foreignKeys.length > 0) {
+      tables.push({
+        action: "modified",
+        tableName: name,
+        columns,
+        indexes,
+        foreignKeys
+      });
+      modified++;
+    }
+  }
+  return {
+    tables,
+    summary: { added, removed, modified },
+    hasChanges: tables.length > 0
+  };
+}
+
+// src/lib/schema-diff/migration-generator.ts
+function escapeIdentifier(name, dialect) {
+  switch (dialect) {
+    case "mysql":
+      return `\`${name}\``;
+    case "mssql":
+      return `[${name.replace(/\]/g, "]]")}]`;
+    case "oracle":
+    case "postgres":
+    case "sqlite":
+    default:
+      return `"${name}"`;
+  }
+}
+function generateColumnDef(col, dialect) {
+  const type = col.targetType || col.sourceType || "TEXT";
+  const nullable = col.targetNullable === false ? " NOT NULL" : "";
+  const defaultVal = col.targetDefault ? ` DEFAULT ${col.targetDefault}` : "";
+  return `${escapeIdentifier(col.columnName, dialect)} ${type}${nullable}${defaultVal}`;
+}
+function generateCreateTable(table, dialect) {
+  const lines = [];
+  const id = escapeIdentifier(table.tableName, dialect);
+  const colDefs = table.columns.filter((c) => c.action === "added").map((c) => `  ${generateColumnDef(c, dialect)}`);
+  const pkCols = table.columns.filter((c) => c.targetIsPrimary).map((c) => escapeIdentifier(c.columnName, dialect));
+  lines.push(`CREATE TABLE ${id} (`);
+  lines.push(colDefs.join(",\n"));
+  if (pkCols.length > 0) {
+    lines.push(`,  PRIMARY KEY (${pkCols.join(", ")})`);
+  }
+  lines.push(");");
+  table.indexes.filter((i) => i.action === "added").forEach((idx) => {
+    const unique = idx.targetUnique ? "UNIQUE " : "";
+    const cols = (idx.targetColumns || []).map((c) => escapeIdentifier(c, dialect)).join(", ");
+    lines.push(`CREATE ${unique}INDEX ${escapeIdentifier(idx.indexName, dialect)} ON ${id} (${cols});`);
+  });
+  table.foreignKeys.filter((fk) => fk.action === "added").forEach((fk) => {
+    lines.push(`ALTER TABLE ${id} ADD CONSTRAINT ${escapeIdentifier(`fk_${table.tableName}_${fk.columnName}`, dialect)} FOREIGN KEY (${escapeIdentifier(fk.columnName, dialect)}) REFERENCES ${escapeIdentifier(fk.targetReferencedTable || "", dialect)}(${escapeIdentifier(fk.targetReferencedColumn || "", dialect)});`);
+  });
+  return lines.join("\n");
+}
+function generateDropTable(table, dialect) {
+  return `DROP TABLE IF EXISTS ${escapeIdentifier(table.tableName, dialect)};`;
+}
+function generateAlterTable(table, dialect) {
+  const lines = [];
+  const id = escapeIdentifier(table.tableName, dialect);
+  lines.push(`-- Alter table: ${table.tableName}`);
+  table.columns.filter((c) => c.action === "added").forEach((col) => {
+    lines.push(`ALTER TABLE ${id} ADD COLUMN ${generateColumnDef(col, dialect)};`);
+  });
+  table.columns.filter((c) => c.action === "removed").forEach((col) => {
+    if (dialect === "sqlite") {
+      lines.push(`-- SQLite: Cannot drop column "${col.columnName}" directly. Requires table recreation.`);
+    } else {
+      lines.push(`ALTER TABLE ${id} DROP COLUMN ${escapeIdentifier(col.columnName, dialect)};`);
+    }
+  });
+  table.columns.filter((c) => c.action === "modified").forEach((col) => {
+    if (dialect === "sqlite") {
+      lines.push(`-- SQLite: Cannot alter column "${col.columnName}" type directly. Requires table recreation.`);
+    } else if (dialect === "mysql") {
+      const type = col.targetType || col.sourceType || "TEXT";
+      const nullable = col.targetNullable === false ? " NOT NULL" : " NULL";
+      const defaultVal = col.targetDefault ? ` DEFAULT ${col.targetDefault}` : "";
+      lines.push(`ALTER TABLE ${id} MODIFY COLUMN ${escapeIdentifier(col.columnName, dialect)} ${type}${nullable}${defaultVal};`);
+    } else if (dialect === "oracle") {
+      const type = col.targetType || col.sourceType || "VARCHAR2(255)";
+      const nullable = col.targetNullable === false ? " NOT NULL" : " NULL";
+      const defaultVal = col.targetDefault ? ` DEFAULT ${col.targetDefault}` : "";
+      lines.push(`ALTER TABLE ${id} MODIFY (${escapeIdentifier(col.columnName, dialect)} ${type}${defaultVal}${nullable});`);
+    } else if (dialect === "mssql") {
+      const type = col.targetType || col.sourceType || "NVARCHAR(MAX)";
+      const nullable = col.targetNullable === false ? " NOT NULL" : " NULL";
+      lines.push(`ALTER TABLE ${id} ALTER COLUMN ${escapeIdentifier(col.columnName, dialect)} ${type}${nullable};`);
+      if (col.sourceDefault !== col.targetDefault && col.targetDefault) {
+        lines.push(`ALTER TABLE ${id} ADD DEFAULT ${col.targetDefault} FOR ${escapeIdentifier(col.columnName, dialect)};`);
+      }
+    } else {
+      if (col.sourceType !== col.targetType) {
+        lines.push(`ALTER TABLE ${id} ALTER COLUMN ${escapeIdentifier(col.columnName, dialect)} TYPE ${col.targetType};`);
+      }
+      if (col.sourceNullable !== col.targetNullable) {
+        if (col.targetNullable) {
+          lines.push(`ALTER TABLE ${id} ALTER COLUMN ${escapeIdentifier(col.columnName, dialect)} DROP NOT NULL;`);
+        } else {
+          lines.push(`ALTER TABLE ${id} ALTER COLUMN ${escapeIdentifier(col.columnName, dialect)} SET NOT NULL;`);
+        }
+      }
+      if (col.sourceDefault !== col.targetDefault) {
+        if (col.targetDefault) {
+          lines.push(`ALTER TABLE ${id} ALTER COLUMN ${escapeIdentifier(col.columnName, dialect)} SET DEFAULT ${col.targetDefault};`);
+        } else {
+          lines.push(`ALTER TABLE ${id} ALTER COLUMN ${escapeIdentifier(col.columnName, dialect)} DROP DEFAULT;`);
+        }
+      }
+    }
+  });
+  table.indexes.filter((i) => i.action === "added").forEach((idx) => {
+    const unique = idx.targetUnique ? "UNIQUE " : "";
+    const cols = (idx.targetColumns || []).map((c) => escapeIdentifier(c, dialect)).join(", ");
+    lines.push(`CREATE ${unique}INDEX ${escapeIdentifier(idx.indexName, dialect)} ON ${id} (${cols});`);
+  });
+  table.indexes.filter((i) => i.action === "removed").forEach((idx) => {
+    if (dialect === "mysql") {
+      lines.push(`DROP INDEX ${escapeIdentifier(idx.indexName, dialect)} ON ${id};`);
+    } else {
+      lines.push(`DROP INDEX IF EXISTS ${escapeIdentifier(idx.indexName, dialect)};`);
+    }
+  });
+  table.foreignKeys.filter((fk) => fk.action === "added").forEach((fk) => {
+    const constraintName = escapeIdentifier(`fk_${table.tableName}_${fk.columnName}`, dialect);
+    lines.push(`ALTER TABLE ${id} ADD CONSTRAINT ${constraintName} FOREIGN KEY (${escapeIdentifier(fk.columnName, dialect)}) REFERENCES ${escapeIdentifier(fk.targetReferencedTable || "", dialect)}(${escapeIdentifier(fk.targetReferencedColumn || "", dialect)});`);
+  });
+  table.foreignKeys.filter((fk) => fk.action === "removed").forEach((fk) => {
+    const constraintName = escapeIdentifier(`fk_${table.tableName}_${fk.columnName}`, dialect);
+    if (dialect === "mysql") {
+      lines.push(`ALTER TABLE ${id} DROP FOREIGN KEY ${constraintName};`);
+    } else if (dialect === "sqlite") {
+      lines.push(`-- SQLite: Cannot drop foreign key directly. Requires table recreation.`);
+    } else {
+      lines.push(`ALTER TABLE ${id} DROP CONSTRAINT IF EXISTS ${constraintName};`);
+    }
+  });
+  return lines.join("\n");
+}
+function generateMigrationSQL(diff, dialect) {
+  if (!diff.hasChanges) {
+    return "-- No schema changes detected.";
+  }
+  const sections = [];
+  sections.push(`-- Migration generated at ${(/* @__PURE__ */ new Date()).toISOString()}`);
+  sections.push(`-- Dialect: ${dialect}`);
+  sections.push(`-- Changes: ${diff.summary.added} added, ${diff.summary.removed} removed, ${diff.summary.modified} modified`);
+  sections.push("");
+  if (dialect !== "sqlite") {
+    sections.push("BEGIN;");
+    sections.push("");
+  }
+  const droppedTables = diff.tables.filter((t) => t.action === "removed");
+  if (droppedTables.length > 0) {
+    sections.push("-- Drop removed tables");
+    droppedTables.forEach((t) => sections.push(generateDropTable(t, dialect)));
+    sections.push("");
+  }
+  const addedTables = diff.tables.filter((t) => t.action === "added");
+  if (addedTables.length > 0) {
+    sections.push("-- Create new tables");
+    addedTables.forEach((t) => {
+      sections.push(generateCreateTable(t, dialect));
+      sections.push("");
+    });
+  }
+  const modifiedTables = diff.tables.filter((t) => t.action === "modified");
+  if (modifiedTables.length > 0) {
+    sections.push("-- Modify existing tables");
+    modifiedTables.forEach((t) => {
+      sections.push(generateAlterTable(t, dialect));
+      sections.push("");
+    });
+  }
+  if (dialect !== "sqlite") {
+    sections.push("COMMIT;");
+  }
+  return sections.join("\n");
+}
+function SnapshotTimeline({ snapshots, onCompare, onDelete }) {
+  const [selected, setSelected] = useState([]);
+  const handleClick = (id) => {
+    setSelected((prev) => {
+      if (prev.includes(id)) {
+        return prev.filter((s) => s !== id);
+      }
+      if (prev.length >= 2) {
+        return [prev[1], id];
+      }
+      return [...prev, id];
+    });
+  };
+  const canCompare = selected.length === 2;
+  useEffect(() => {
+    if (canCompare) {
+      onCompare(selected[0], selected[1]);
+    }
+  }, [selected, canCompare, onCompare]);
+  if (snapshots.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4 text-zinc-600 text-xs", children: "No snapshots taken yet. Take a snapshot to start tracking schema changes." });
+  }
+  const sorted = [...snapshots].sort(
+    (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs uppercase text-zinc-500 font-bold", children: "Timeline" }),
+      canCompare && /* @__PURE__ */ jsx("span", { className: "text-xs text-blue-400", children: "Comparing 2 snapshots" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center overflow-x-auto pb-2 px-2 gap-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute top-[18px] left-4 right-4 h-[2px] bg-white/10" }),
+      sorted.map((snapshot, idx) => {
+        const isSelected = selected.includes(snapshot.id);
+        const date = new Date(snapshot.createdAt);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative flex flex-col items-center min-w-[100px] cursor-pointer group",
+            onClick: () => handleClick(snapshot.id),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: cn(
+                "w-4 h-4 rounded-full border-2 z-10 transition-all",
+                isSelected ? "bg-blue-500 border-blue-400 scale-125" : "bg-[#0d0d0d] border-white/20 hover:border-white/40"
+              ) }),
+              idx < sorted.length - 1 && /* @__PURE__ */ jsx("div", { className: "absolute top-[7px] left-[50%] w-full h-[2px] bg-white/10" }),
+              /* @__PURE__ */ jsxs("div", { className: cn(
+                "mt-2 text-center transition-colors",
+                isSelected ? "text-blue-400" : "text-zinc-500 group-hover:text-zinc-300"
+              ), children: [
+                /* @__PURE__ */ jsx("div", { className: "text-xs font-medium truncate max-w-[90px]", children: snapshot.label || snapshot.connectionName }),
+                /* @__PURE__ */ jsxs("div", { className: "text-label text-zinc-600", children: [
+                  date.toLocaleDateString(),
+                  " ",
+                  date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+                ] }),
+                /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-label mt-1", children: [
+                  snapshot.schema.length,
+                  " tables"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete(snapshot.id);
+                  },
+                  className: "absolute -top-2 -right-1 p-0.5 text-zinc-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity",
+                  children: /* @__PURE__ */ jsx(Trash2, { className: "w-2.5 h-2.5" })
+                }
+              )
+            ]
+          },
+          snapshot.id
+        );
+      })
+    ] })
+  ] });
+}
+function SchemaDiff({ schema, connection }) {
+  const [snapshots, setSnapshots] = useState(
+    () => storage.getSchemaSnapshots()
+  );
+  const [sourceId, setSourceId] = useState("current");
+  const [targetId, setTargetId] = useState("");
+  const [selectedTable, setSelectedTable] = useState(null);
+  const [showMigration, setShowMigration] = useState(false);
+  const [snapshotLabel, setSnapshotLabel] = useState("");
+  const [showLabelInput, setShowLabelInput] = useState(false);
+  const takeSnapshot = useCallback(() => {
+    if (!connection) return;
+    const snapshot = {
+      id: Date.now().toString(),
+      connectionId: connection.id,
+      connectionName: connection.name,
+      databaseType: connection.type,
+      schema: JSON.parse(JSON.stringify(schema)),
+      createdAt: /* @__PURE__ */ new Date(),
+      label: snapshotLabel.trim() || void 0
+    };
+    storage.saveSchemaSnapshot(snapshot);
+    setSnapshots(storage.getSchemaSnapshots());
+    setSnapshotLabel("");
+    setShowLabelInput(false);
+  }, [schema, connection, snapshotLabel]);
+  const deleteSnapshot = useCallback((id) => {
+    storage.deleteSchemaSnapshot(id);
+    setSnapshots(storage.getSchemaSnapshots());
+    if (sourceId === id) setSourceId("current");
+    if (targetId === id) setTargetId("");
+  }, [sourceId, targetId]);
+  const diff = useMemo(() => {
+    var _a, _b;
+    if (!targetId) return null;
+    const sourceSchema = sourceId === "current" ? schema : ((_a = snapshots.find((s) => s.id === sourceId)) == null ? void 0 : _a.schema) || [];
+    const targetSchema = targetId === "current" ? schema : ((_b = snapshots.find((s) => s.id === targetId)) == null ? void 0 : _b.schema) || [];
+    if (sourceId === targetId) return null;
+    return diffSchemas(sourceSchema, targetSchema);
+  }, [sourceId, targetId, schema, snapshots]);
+  const migrationSQL = useMemo(() => {
+    if (!diff || !diff.hasChanges) return "";
+    const dialect = (connection == null ? void 0 : connection.type) || "postgres";
+    return generateMigrationSQL(diff, dialect);
+  }, [diff, connection]);
+  const { connections: allConnections } = useAllConnections();
+  const [fetchingRemote, setFetchingRemote] = useState(false);
+  const fetchRemoteSchema = useCallback(async (connId) => {
+    const conn = allConnections.find((c) => c.id === connId);
+    if (!conn) return;
+    setFetchingRemote(true);
+    try {
+      const res = await fetch("/api/db/schema-snapshot", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(
+          conn.managed && conn.seedId ? { connectionId: `seed:${conn.seedId}` } : { connection: conn }
+        )
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+      const snapshot = {
+        id: `remote-${Date.now()}`,
+        connectionId: conn.id,
+        connectionName: conn.name,
+        databaseType: conn.type,
+        schema: data.schema,
+        createdAt: /* @__PURE__ */ new Date(),
+        label: `Live: ${conn.name}`
+      };
+      storage.saveSchemaSnapshot(snapshot);
+      setSnapshots(storage.getSchemaSnapshots());
+      setTargetId(snapshot.id);
+    } catch (err) {
+      console.error("Failed to fetch remote schema:", err);
+    } finally {
+      setFetchingRemote(false);
+    }
+  }, [allConnections]);
+  const getActionBadge = (action) => {
+    switch (action) {
+      case "added":
+        return /* @__PURE__ */ jsxs(Badge, { className: "bg-green-500/20 text-green-400 border-green-500/30 text-xs", children: [
+          /* @__PURE__ */ jsx(Plus, { className: "w-2.5 h-2.5 mr-0.5" }),
+          "Added"
+        ] });
+      case "removed":
+        return /* @__PURE__ */ jsxs(Badge, { className: "bg-red-500/20 text-red-400 border-red-500/30 text-xs", children: [
+          /* @__PURE__ */ jsx(Minus, { className: "w-2.5 h-2.5 mr-0.5" }),
+          "Removed"
+        ] });
+      case "modified":
+        return /* @__PURE__ */ jsxs(Badge, { className: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30 text-xs", children: [
+          /* @__PURE__ */ jsx(Edit3, { className: "w-2.5 h-2.5 mr-0.5" }),
+          "Modified"
+        ] });
+      default:
+        return null;
+    }
+  };
+  const formatSnapshotLabel = (s) => {
+    const date = new Date(s.createdAt).toLocaleString();
+    return `${s.label || s.connectionName} (${date})`;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-[#080808]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-white/5 bg-[#0a0a0a] flex-wrap", children: [
+      /* @__PURE__ */ jsx(GitCompare, { className: "w-4 h-4 text-rose-400" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-bold uppercase text-zinc-400 tracking-wider", children: "Schema Diff" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-white/10" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-600 uppercase", children: "Source" }),
+        /* @__PURE__ */ jsxs(Select, { value: sourceId, onValueChange: setSourceId, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 w-[180px] text-xs bg-white/5 border-white/10", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select source" }) }),
+          /* @__PURE__ */ jsxs(SelectContent, { className: "bg-[#111] border-white/10", children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: "current", className: "text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Database, { className: "w-3 h-3" }),
+              " Current Schema"
+            ] }) }),
+            snapshots.map((s) => /* @__PURE__ */ jsx(SelectItem, { value: s.id, className: "text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3" }),
+              " ",
+              formatSnapshotLabel(s)
+            ] }) }, s.id))
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-zinc-600 text-xs", children: "vs" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-600 uppercase", children: "Target" }),
+        /* @__PURE__ */ jsxs(Select, { value: targetId, onValueChange: (v) => {
+          if (v.startsWith("conn:")) {
+            fetchRemoteSchema(v.replace("conn:", ""));
+          } else {
+            setTargetId(v);
+          }
+        }, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 w-[180px] text-xs bg-white/5 border-white/10", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select target" }) }),
+          /* @__PURE__ */ jsxs(SelectContent, { className: "bg-[#111] border-white/10", children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: "current", className: "text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Database, { className: "w-3 h-3" }),
+              " Current Schema"
+            ] }) }),
+            snapshots.map((s) => /* @__PURE__ */ jsx(SelectItem, { value: s.id, className: "text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3" }),
+              " ",
+              formatSnapshotLabel(s)
+            ] }) }, s.id)),
+            allConnections.filter((c) => c.id !== (connection == null ? void 0 : connection.id)).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-label text-zinc-600 uppercase border-t border-white/5 mt-1", children: "Fetch from connection" }),
+              allConnections.filter((c) => c.id !== (connection == null ? void 0 : connection.id)).map((c) => /* @__PURE__ */ jsx(SelectItem, { value: `conn:${c.id}`, className: "text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(Database, { className: "w-3 h-3 text-blue-400" }),
+                " ",
+                c.name,
+                c.environment === "production" && /* @__PURE__ */ jsx(AlertTriangle, { className: "w-3 h-3 text-red-400" })
+              ] }) }, `conn:${c.id}`))
+            ] })
+          ] })
+        ] }),
+        fetchingRemote && /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 animate-pulse", children: "Fetching..." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      showLabelInput ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Label (optional)...",
+            value: snapshotLabel,
+            onChange: (e) => setSnapshotLabel(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && takeSnapshot(),
+            className: "h-7 px-2 text-xs bg-white/5 border border-white/10 rounded text-zinc-300 focus:outline-none focus:border-blue-500 w-32",
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-7 text-xs text-blue-400", onClick: takeSnapshot, children: "Save" }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "h-7 text-xs text-zinc-500", onClick: () => setShowLabelInput(false), children: "Cancel" })
+      ] }) : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "h-7 text-xs font-bold uppercase text-zinc-500 hover:text-white gap-1",
+          onClick: () => setShowLabelInput(true),
+          disabled: !connection,
+          children: [
+            /* @__PURE__ */ jsx(Camera, { className: "w-3 h-3" }),
+            " Snapshot"
+          ]
+        }
+      ),
+      (diff == null ? void 0 : diff.hasChanges) && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "h-7 text-xs font-bold uppercase text-zinc-500 hover:text-white gap-1",
+          onClick: () => setShowMigration(!showMigration),
+          children: [
+            /* @__PURE__ */ jsx(FileCode, { className: "w-3 h-3" }),
+            " ",
+            showMigration ? "Diff View" : "SQL Migration"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden flex", children: !targetId ? /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center text-zinc-600 gap-3", children: [
+      /* @__PURE__ */ jsx(GitCompare, { className: "w-10 h-10 opacity-30" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Select source and target to compare schemas" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-700", children: "Take a snapshot first, then compare with the current schema" }),
+      snapshots.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 w-full max-w-2xl px-4", children: /* @__PURE__ */ jsx(
+        SnapshotTimeline,
+        {
+          snapshots,
+          onCompare: (sourceId2, targetId2) => {
+            setSourceId(sourceId2);
+            setTargetId(targetId2);
+          },
+          onDelete: deleteSnapshot
+        }
+      ) })
+    ] }) : showMigration && migrationSQL ? /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children: /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono text-zinc-300 bg-[#0d0d0d] border border-white/10 rounded-lg p-4 overflow-auto whitespace-pre-wrap", children: migrationSQL }) }) : diff && diff.hasChanges ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-64 border-r border-white/5 overflow-auto", children: [
+        /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-white/5", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-zinc-500 uppercase px-2 mb-1", children: [
+          diff.summary.added,
+          " added, ",
+          diff.summary.removed,
+          " removed, ",
+          diff.summary.modified,
+          " modified"
+        ] }) }),
+        diff.tables.map((table) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setSelectedTable(table.tableName),
+            className: cn(
+              "w-full text-left px-3 py-2 text-xs flex items-center gap-2 hover:bg-white/5 transition-colors",
+              selectedTable === table.tableName && "bg-white/10"
+            ),
+            children: [
+              selectedTable === table.tableName ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3 text-zinc-500" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3 text-zinc-500" }),
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-300", children: table.tableName }),
+              /* @__PURE__ */ jsx("span", { className: "ml-auto", children: getActionBadge(table.action) })
+            ]
+          },
+          table.tableName
+        ))
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children: selectedTable ? /* @__PURE__ */ jsx(TableDiffDetail, { diff: diff.tables.find((t) => t.tableName === selectedTable) }) : /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center text-zinc-600 text-sm", children: "Select a table to view diff details" }) })
+    ] }) : diff && !diff.hasChanges ? /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-zinc-600 gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-sm", children: "No differences found between source and target" }) }) : /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-center text-zinc-600 gap-2", children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Cannot compare same schema with itself" })
+    ] }) })
+  ] });
+}
+function TableDiffDetail({ diff }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Database, { className: "w-4 h-4 text-zinc-400" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-bold text-zinc-200", children: diff.tableName }),
+      /* @__PURE__ */ jsx(Badge, { className: cn(
+        "text-xs",
+        diff.action === "added" && "bg-green-500/20 text-green-400",
+        diff.action === "removed" && "bg-red-500/20 text-red-400",
+        diff.action === "modified" && "bg-yellow-500/20 text-yellow-400"
+      ), children: diff.action })
+    ] }),
+    diff.columns.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-xs uppercase text-zinc-500 mb-2 font-bold", children: "Columns" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: diff.columns.map((col, i) => /* @__PURE__ */ jsxs("div", { className: cn(
+        "px-3 py-2 rounded text-xs flex items-center gap-2",
+        col.action === "added" && "bg-green-500/5 border border-green-500/10",
+        col.action === "removed" && "bg-red-500/5 border border-red-500/10",
+        col.action === "modified" && "bg-yellow-500/5 border border-yellow-500/10"
+      ), children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-zinc-300 min-w-[120px]", children: col.columnName }),
+        col.action === "modified" && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: col.changes.map((change, j) => /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500", children: change }, j)) }),
+        col.action === "added" && /* @__PURE__ */ jsx("span", { className: "text-xs text-green-400 font-mono", children: col.targetType }),
+        col.action === "removed" && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-400 font-mono", children: col.sourceType }),
+        /* @__PURE__ */ jsx("span", { className: "ml-auto", children: getActionIcon(col.action) })
+      ] }, i)) })
+    ] }),
+    diff.indexes.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-xs uppercase text-zinc-500 mb-2 font-bold", children: "Indexes" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: diff.indexes.map((idx, i) => /* @__PURE__ */ jsxs("div", { className: cn(
+        "px-3 py-2 rounded text-xs flex items-center gap-2",
+        idx.action === "added" && "bg-green-500/5 border border-green-500/10",
+        idx.action === "removed" && "bg-red-500/5 border border-red-500/10",
+        idx.action === "modified" && "bg-yellow-500/5 border border-yellow-500/10"
+      ), children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-zinc-300", children: idx.indexName }),
+        idx.changes.map((change, j) => /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500", children: change }, j)),
+        /* @__PURE__ */ jsx("span", { className: "ml-auto", children: getActionIcon(idx.action) })
+      ] }, i)) })
+    ] }),
+    diff.foreignKeys.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-xs uppercase text-zinc-500 mb-2 font-bold", children: "Foreign Keys" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: diff.foreignKeys.map((fk, i) => /* @__PURE__ */ jsxs("div", { className: cn(
+        "px-3 py-2 rounded text-xs flex items-center gap-2",
+        fk.action === "added" && "bg-green-500/5 border border-green-500/10",
+        fk.action === "removed" && "bg-red-500/5 border border-red-500/10"
+      ), children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-zinc-300", children: fk.columnName }),
+        fk.changes.map((change, j) => /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500", children: change }, j)),
+        /* @__PURE__ */ jsx("span", { className: "ml-auto", children: getActionIcon(fk.action) })
+      ] }, i)) })
+    ] })
+  ] });
+}
+function getActionIcon(action) {
+  switch (action) {
+    case "added":
+      return /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 text-green-400" });
+    case "removed":
+      return /* @__PURE__ */ jsx(Minus, { className: "w-3 h-3 text-red-400" });
+    case "modified":
+      return /* @__PURE__ */ jsx(Edit3, { className: "w-3 h-3 text-yellow-400" });
+    default:
+      return null;
+  }
+}
+function ChartDashboardLazy({ result }) {
+  const [savedCharts, setSavedCharts] = React.useState([]);
+  React.useEffect(() => {
+    const charts = storage.getSavedCharts();
+    if (charts.length > 0) setSavedCharts(charts);
+  }, []);
+  if (savedCharts.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col items-center justify-center bg-[#080808] text-zinc-500 gap-2", children: [
+      /* @__PURE__ */ jsx(LayoutDashboard, { className: "w-10 h-10 opacity-30" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No saved charts yet" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-600", children: "Save charts from the Charts tab to display them here" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto bg-[#080808] p-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: savedCharts.map((chart) => {
+    var _a;
+    return /* @__PURE__ */ jsxs("div", { className: "bg-[#0d0d0d] border border-white/10 rounded-lg p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-zinc-300", children: chart.name }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-600 uppercase", children: chart.chartType })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "text-xs text-zinc-500", children: [
+        chart.xAxis && /* @__PURE__ */ jsxs("span", { children: [
+          "X: ",
+          chart.xAxis
+        ] }),
+        ((_a = chart.yAxis) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-2", children: [
+          "Y: ",
+          chart.yAxis.join(", ")
+        ] })
+      ] }),
+      result ? /* @__PURE__ */ jsx("div", { className: "mt-2 h-[160px]", children: /* @__PURE__ */ jsx(DataCharts, { result }) }) : /* @__PURE__ */ jsx("div", { className: "mt-2 h-[100px] flex items-center justify-center text-zinc-600 text-xs", children: "Execute a query to see chart" })
+    ] }, chart.id);
+  }) }) });
+}
+function BottomPanel({
+  mode,
+  onSetMode,
+  currentTab,
+  schema,
+  schemaContext,
+  activeConnection,
+  metadata,
+  historyKey,
+  savedKey,
+  isNL2SQLOpen,
+  onSetIsNL2SQLOpen,
+  maskingEnabled,
+  onToggleMasking,
+  userRole,
+  maskingConfig,
+  editingEnabled,
+  pendingChanges,
+  onCellChange,
+  onApplyChanges,
+  onDiscardChanges,
+  onExecuteQuery,
+  onLoadQuery,
+  onLoadMore,
+  isLoadingMore,
+  onExportResults
+}) {
+  const tabs = [
+    { key: "results", label: "Results", icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "w-3 h-3" }), activeClass: "text-blue-400 border-blue-500 bg-white/5" },
+    { key: "explain", label: "Explain", icon: /* @__PURE__ */ jsx(Zap, { className: "w-3 h-3" }), activeClass: "text-amber-400 border-amber-500 bg-white/5" },
+    { key: "history", label: "History", icon: /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3" }), activeClass: "text-emerald-400 border-emerald-500 bg-white/5" },
+    { key: "saved", label: "Saved", icon: /* @__PURE__ */ jsx(Bookmark, { className: "w-3 h-3" }), activeClass: "text-purple-400 border-purple-500 bg-white/5" },
+    { key: "charts", label: "Charts", icon: /* @__PURE__ */ jsx(BarChart3, { className: "w-3 h-3" }), activeClass: "text-cyan-400 border-cyan-500 bg-white/5" },
+    { key: "nl2sql", label: "NL2SQL", icon: /* @__PURE__ */ jsx(Sparkles, { className: "w-3 h-3" }), activeClass: "text-violet-400 border-violet-500 bg-white/5" },
+    { key: "autopilot", label: "Autopilot", icon: /* @__PURE__ */ jsx(Zap, { className: "w-3 h-3" }), activeClass: "text-cyan-400 border-cyan-500 bg-white/5" },
+    { key: "pivot", label: "Pivot", icon: /* @__PURE__ */ jsx(Columns3, { className: "w-3 h-3" }), activeClass: "text-orange-400 border-orange-500 bg-white/5" },
+    { key: "docs", label: "Docs", icon: /* @__PURE__ */ jsx(FileText, { className: "w-3 h-3" }), activeClass: "text-teal-400 border-teal-500 bg-white/5" },
+    { key: "schemadiff", label: "Diff", icon: /* @__PURE__ */ jsx(GitCompare, { className: "w-3 h-3" }), activeClass: "text-rose-400 border-rose-500 bg-white/5" },
+    { key: "dashboard", label: "Dashboard", icon: /* @__PURE__ */ jsx(LayoutDashboard, { className: "w-3 h-3" }), activeClass: "text-indigo-400 border-indigo-500 bg-white/5" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-[#080808]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "h-9 bg-[#0a0a0a] border-b border-white/5 flex items-center justify-between px-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center h-full gap-1", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            onSetMode(tab.key);
+            if (tab.key === "nl2sql") onSetIsNL2SQLOpen(true);
+          },
+          className: cn(
+            "h-full px-3 text-xs font-bold uppercase transition-all border-b-2 flex items-center gap-2",
+            mode === tab.key ? tab.activeClass : "text-zinc-500 border-transparent hover:text-zinc-300"
+          ),
+          children: [
+            tab.icon,
+            " ",
+            tab.label
+          ]
+        },
+        tab.key
+      )) }),
+      currentTab.result && mode === "results" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono text-zinc-500 mr-2", children: [
+          currentTab.result.rowCount,
+          " rows \u2022 ",
+          currentTab.result.executionTime,
+          "ms"
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 text-xs font-bold uppercase text-zinc-500 hover:text-white gap-2", children: [
+            /* @__PURE__ */ jsx(Download, { className: "w-3 h-3" }),
+            " Export"
+          ] }) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "bg-[#0d0d0d] border-white/10 text-zinc-300", children: [
+            /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onExportResults("csv"), className: "text-xs cursor-pointer", children: "Export as CSV" }),
+            /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onExportResults("json"), className: "text-xs cursor-pointer", children: "Export as JSON" }),
+            /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onExportResults("sql-insert"), className: "text-xs cursor-pointer", children: "Export as SQL INSERT" }),
+            /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onExportResults("sql-ddl"), className: "text-xs cursor-pointer", children: "Export as DDL (CREATE TABLE)" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden relative", children: mode === "nl2sql" ? /* @__PURE__ */ jsx(
+      NL2SQLPanel,
+      {
+        isOpen: isNL2SQLOpen,
+        onClose: () => {
+          onSetIsNL2SQLOpen(false);
+          onSetMode("results");
+        },
+        onExecuteQuery,
+        onLoadQuery: (q) => {
+          onLoadQuery(q);
+          onSetMode("results");
+        },
+        schemaContext,
+        databaseType: activeConnection == null ? void 0 : activeConnection.type,
+        queryLanguage: metadata == null ? void 0 : metadata.capabilities.queryLanguage
+      }
+    ) : mode === "autopilot" ? /* @__PURE__ */ jsx(
+      AIAutopilotPanel,
+      {
+        connection: activeConnection,
+        schemaContext,
+        onExecuteQuery
+      }
+    ) : mode === "pivot" ? /* @__PURE__ */ jsx(
+      PivotTable,
+      {
+        result: currentTab.result,
+        onLoadQuery: (q) => {
+          onLoadQuery(q);
+          onSetMode("results");
+        }
+      }
+    ) : mode === "docs" ? /* @__PURE__ */ jsx(
+      DatabaseDocs,
+      {
+        schema,
+        schemaContext,
+        databaseType: activeConnection == null ? void 0 : activeConnection.type
+      }
+    ) : mode === "history" ? /* @__PURE__ */ jsx(
+      QueryHistory,
+      {
+        refreshTrigger: historyKey,
+        activeConnectionId: activeConnection == null ? void 0 : activeConnection.id,
+        onSelectQuery: (q) => {
+          onLoadQuery(q);
+          onSetMode("results");
+        }
+      }
+    ) : mode === "saved" ? /* @__PURE__ */ jsx(
+      SavedQueries,
+      {
+        refreshTrigger: savedKey,
+        connectionType: activeConnection == null ? void 0 : activeConnection.type,
+        onSelectQuery: (q) => {
+          onLoadQuery(q);
+          onSetMode("results");
+        }
+      }
+    ) : mode === "charts" ? /* @__PURE__ */ jsx(DataCharts, { result: currentTab.result }) : mode === "schemadiff" ? /* @__PURE__ */ jsx(SchemaDiff, { schema, connection: activeConnection }) : mode === "dashboard" ? /* @__PURE__ */ jsx(ChartDashboardLazy, { result: currentTab.result }) : currentTab.result ? mode === "explain" ? /* @__PURE__ */ jsx(
+      VisualExplain,
+      {
+        plan: currentTab.explainPlan,
+        query: currentTab.query,
+        schemaContext,
+        databaseType: activeConnection == null ? void 0 : activeConnection.type,
+        onLoadQuery: (q) => {
+          onLoadQuery(q);
+          onSetMode("results");
+        }
+      }
+    ) : /* @__PURE__ */ jsx(
+      ResultsGrid,
+      {
+        result: currentTab.result,
+        onLoadMore,
+        isLoadingMore,
+        maskingEnabled,
+        onToggleMasking,
+        userRole,
+        maskingConfig,
+        editingEnabled,
+        pendingChanges,
+        onCellChange,
+        onApplyChanges,
+        onDiscardChanges
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col items-center justify-center opacity-20 bg-[#0a0a0a]", children: [
+      /* @__PURE__ */ jsx(Terminal, { className: "w-12 h-12 mb-4" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Execute a query or check history" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-widest mt-2", children: "Ready to query" })
+    ] }) })
+  ] });
+}
+function useToast() {
+  const toast$1 = useCallback(({ title, description, variant }) => {
+    if (variant === "destructive") {
+      toast.error(title, { description });
+    } else {
+      toast.success(title, { description });
+    }
+  }, []);
+  return { toast: toast$1 };
+}
+
+// src/hooks/use-tab-manager.ts
+var DEFAULT_TAB = {
+  id: "default",
+  name: "Query 1",
+  query: "",
+  result: null,
+  isExecuting: false,
+  type: "sql"
+};
+var WORKSPACE_STORAGE_PREFIX = "libredb_workspace_tabs_v1";
+function useTabManager({
+  activeConnection,
+  metadata,
+  schema,
+  persistWorkspace
+}) {
+  const [tabs, setTabs] = useState([DEFAULT_TAB]);
+  const [activeTabId, setActiveTabId] = useState("default");
+  const [editingTabId, setEditingTabId] = useState(null);
+  const [editingTabName, setEditingTabName] = useState("");
+  const [isWorkspaceHydrated, setIsWorkspaceHydrated] = useState(false);
+  const workspaceKey = useMemo(
+    () => {
+      var _a;
+      return `${WORKSPACE_STORAGE_PREFIX}:${(_a = activeConnection == null ? void 0 : activeConnection.id) != null ? _a : "default"}`;
+    },
+    [activeConnection == null ? void 0 : activeConnection.id]
+  );
+  const shouldPersistWorkspace = persistWorkspace != null ? persistWorkspace : process.env.NODE_ENV !== "test";
+  const currentTab = tabs.find((t) => t.id === activeTabId) || tabs[0];
+  useEffect(() => {
+    setIsWorkspaceHydrated(false);
+    if (!shouldPersistWorkspace) return;
+    const storage2 = typeof globalThis !== "undefined" && "localStorage" in globalThis ? globalThis.localStorage : null;
+    if (!storage2) return;
+    try {
+      const raw = storage2.getItem(workspaceKey);
+      if (!raw) {
+        setTabs([DEFAULT_TAB]);
+        setActiveTabId(DEFAULT_TAB.id);
+        return;
+      }
+      const parsed = JSON.parse(raw);
+      if (!parsed || !Array.isArray(parsed.tabs) || parsed.tabs.length === 0) {
+        setTabs([DEFAULT_TAB]);
+        setActiveTabId(DEFAULT_TAB.id);
+        return;
+      }
+      const restoredTabs = parsed.tabs.map((tab) => ({
+        id: tab.id,
+        name: tab.name,
+        query: tab.query,
+        type: tab.type,
+        result: null,
+        isExecuting: false
+      }));
+      const hasActiveTab = restoredTabs.some((tab) => tab.id === parsed.activeTabId);
+      setTabs(restoredTabs);
+      setActiveTabId(hasActiveTab ? parsed.activeTabId : restoredTabs[0].id);
+    } catch (error) {
+      console.error("[useTabManager] Failed to restore workspace tabs:", error);
+      setTabs([DEFAULT_TAB]);
+      setActiveTabId(DEFAULT_TAB.id);
+    }
+  }, [workspaceKey, shouldPersistWorkspace]);
+  useEffect(() => {
+    if (!shouldPersistWorkspace || isWorkspaceHydrated) return;
+    setIsWorkspaceHydrated(true);
+  }, [tabs, activeTabId, shouldPersistWorkspace, isWorkspaceHydrated]);
+  useEffect(() => {
+    if (!shouldPersistWorkspace) return;
+    const storage2 = typeof globalThis !== "undefined" && "localStorage" in globalThis ? globalThis.localStorage : null;
+    if (!isWorkspaceHydrated || !storage2) return;
+    const timer = setTimeout(() => {
+      const serialized = {
+        activeTabId,
+        tabs: tabs.map((tab) => ({
+          id: tab.id,
+          name: tab.name,
+          query: tab.query,
+          type: tab.type
+        }))
+      };
+      storage2.setItem(workspaceKey, JSON.stringify(serialized));
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [tabs, activeTabId, workspaceKey, shouldPersistWorkspace, isWorkspaceHydrated]);
+  const updateTabById = useCallback((tabId, updates) => {
+    setTabs((prev) => prev.map((t) => t.id === tabId ? __spreadValues(__spreadValues({}, t), updates) : t));
+  }, []);
+  const updateCurrentTab = useCallback((updates) => {
+    updateTabById(activeTabId, updates);
+  }, [activeTabId, updateTabById]);
+  const addTab = useCallback(() => {
+    const newId = Math.random().toString(36).substring(7);
+    setTabs((prev) => [...prev, {
+      id: newId,
+      name: `Query ${prev.length + 1}`,
+      query: "",
+      result: null,
+      isExecuting: false,
+      type: "sql"
+    }]);
+    setActiveTabId(newId);
+  }, [activeConnection, metadata]);
+  const closeTab = useCallback((id, e) => {
+    e.stopPropagation();
+    setTabs((prev) => {
+      if (prev.length === 1) return prev;
+      const newTabs = prev.filter((t) => t.id !== id);
+      if (activeTabId === id && newTabs.length > 0) {
+        setActiveTabId(newTabs[newTabs.length - 1].id);
+      }
+      return newTabs;
+    });
+  }, [activeTabId]);
+  const handleTableClick = useCallback((tableName, executeQueryFn) => {
+    const newQuery = `SELECT * FROM ${tableName} LIMIT 50;`;
+    const newId = Math.random().toString(36).substring(7);
+    const newTab = {
+      id: newId,
+      name: tableName,
+      query: newQuery,
+      result: null,
+      isExecuting: false,
+      type: "sql"
+    };
+    setTabs((prev) => [...prev, newTab]);
+    setActiveTabId(newId);
+    setTimeout(() => executeQueryFn(newQuery, newId), 100);
+  }, [metadata]);
+  const handleGenerateSelect = useCallback((tableName) => {
+    const table = schema.find((t) => t.name === tableName);
+    const columns = (table == null ? void 0 : table.columns) || [];
+    const newQuery = `SELECT
+${columns.map((c) => `  ${c.name}`).join(",\n") || "  *"}
+FROM ${tableName}
+WHERE 1=1
+LIMIT 100;`;
+    const tabType = "sql";
+    const newId = Math.random().toString(36).substring(7);
+    setTabs((prev) => [...prev, {
+      id: newId,
+      name: `Query: ${tableName}`,
+      query: newQuery,
+      result: null,
+      isExecuting: false,
+      type: tabType
+    }]);
+    setActiveTabId(newId);
+  }, [metadata, schema]);
+  return {
+    tabs,
+    setTabs,
+    activeTabId,
+    setActiveTabId,
+    currentTab,
+    editingTabId,
+    setEditingTabId,
+    editingTabName,
+    setEditingTabName,
+    addTab,
+    closeTab,
+    updateCurrentTab,
+    updateTabById,
+    handleTableClick,
+    handleGenerateSelect
+  };
+}
+function useConnectionAdapter({
+  connections: externalConnections,
+  onSchemaFetch
+}) {
+  var _a;
+  const connections = useMemo(
+    () => externalConnections.map((c) => ({
+      id: c.id,
+      name: c.name,
+      type: c.type,
+      createdAt: /* @__PURE__ */ new Date(),
+      managed: true
+    })),
+    [externalConnections]
+  );
+  const [activeConnection, setActiveConnection] = useState(
+    (_a = connections[0]) != null ? _a : null
+  );
+  const [schema, setSchema] = useState([]);
+  const [isLoadingSchema, setIsLoadingSchema] = useState(false);
+  useEffect(() => {
+    if (connections.length === 0) {
+      setActiveConnection(null);
+      return;
+    }
+    if (activeConnection && connections.some((c) => c.id === activeConnection.id)) {
+      return;
+    }
+    setActiveConnection(connections[0]);
+  }, [connections]);
+  const fetchSchema = useCallback(
+    async (conn) => {
+      setIsLoadingSchema(true);
+      try {
+        const result = await onSchemaFetch(conn.id);
+        setSchema(result);
+      } catch (e) {
+        setSchema([]);
+      } finally {
+        setIsLoadingSchema(false);
+      }
+    },
+    [onSchemaFetch]
+  );
+  const tableNames = useMemo(() => schema.map((s) => s.name), [schema]);
+  const schemaContext = useMemo(() => JSON.stringify(schema), [schema]);
+  return {
+    connections,
+    setConnections: (() => {
+    }),
+    activeConnection,
+    setActiveConnection,
+    schema,
+    setSchema,
+    isLoadingSchema,
+    connectionPulse: null,
+    fetchSchema,
+    tableNames,
+    schemaContext
+  };
+}
+function useQueryAdapter({
+  activeConnection,
+  onQueryExecute,
+  tabs,
+  activeTabId,
+  currentTab,
+  setTabs,
+  fetchSchema: _fetchSchema,
+  features: _features
+}) {
+  const cancelledRef = useRef(false);
+  const [safetyCheckQuery, setSafetyCheckQuery] = useState(null);
+  const [unlimitedWarningOpen, setUnlimitedWarningOpen] = useState(false);
+  const [pendingUnlimitedQuery, setPendingUnlimitedQuery] = useState(null);
+  const [historyKey, setHistoryKey] = useState(0);
+  const [bottomPanelMode, setBottomPanelMode] = useState("results");
+  const { toast } = useToast();
+  const executeQuery = useCallback(async (overrideQuery, tabId, _isExplain = false) => {
+    const targetTabId = tabId || activeTabId;
+    const tabToExec = tabs.find((t) => t.id === targetTabId) || currentTab;
+    const queryToExecute = overrideQuery || tabToExec.query;
+    if (!activeConnection) {
+      toast({ title: "No Connection", description: "Select a connection first.", variant: "destructive" });
+      return;
+    }
+    if (!queryToExecute || queryToExecute.trim() === "") {
+      toast({ title: "Empty Query", description: "Enter a query to execute.", variant: "destructive" });
+      return;
+    }
+    if (isDangerousQuery(queryToExecute)) {
+      setSafetyCheckQuery(queryToExecute);
+      return;
+    }
+    cancelledRef.current = false;
+    setTabs((prev) => prev.map((t) => t.id === targetTabId ? __spreadProps(__spreadValues({}, t), {
+      isExecuting: true
+    }) : t));
+    setBottomPanelMode("results");
+    const startTime = Date.now();
+    try {
+      const result = await onQueryExecute(activeConnection.id, queryToExecute);
+      if (cancelledRef.current) return;
+      const executionTime = result.executionTime || Date.now() - startTime;
+      setTabs((prev) => prev.map((t) => {
+        if (t.id !== targetTabId) return t;
+        return __spreadProps(__spreadValues({}, t), {
+          result: {
+            rows: result.rows,
+            fields: result.fields,
+            rowCount: result.rowCount,
+            executionTime,
+            pagination: result.pagination
+          },
+          allRows: result.rows,
+          currentOffset: result.rows.length,
+          isExecuting: false,
+          isLoadingMore: false
+        });
+      }));
+      setHistoryKey((prev) => prev + 1);
+    } catch (error) {
+      if (cancelledRef.current) return;
+      setTabs((prev) => prev.map((t) => t.id === targetTabId ? __spreadProps(__spreadValues({}, t), {
+        isExecuting: false,
+        isLoadingMore: false
+      }) : t));
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      toast({ title: "Query Error", description: errorMessage, variant: "destructive" });
+    }
+  }, [activeConnection, tabs, currentTab, activeTabId, toast, onQueryExecute, setTabs]);
+  const forceExecuteQuery = useCallback((query) => {
+    setSafetyCheckQuery(null);
+    if (!activeConnection) {
+      toast({ title: "No Connection", description: "Select a connection first.", variant: "destructive" });
+      return;
+    }
+    if (!query || query.trim() === "") {
+      toast({ title: "Empty Query", description: "Enter a query to execute.", variant: "destructive" });
+      return;
+    }
+    cancelledRef.current = false;
+    setTabs((prev) => prev.map((t) => t.id === activeTabId ? __spreadProps(__spreadValues({}, t), {
+      isExecuting: true
+    }) : t));
+    setBottomPanelMode("results");
+    const startTime = Date.now();
+    onQueryExecute(activeConnection.id, query).then((result) => {
+      if (cancelledRef.current) return;
+      const executionTime = result.executionTime || Date.now() - startTime;
+      setTabs((prev) => prev.map((t) => {
+        if (t.id !== activeTabId) return t;
+        return __spreadProps(__spreadValues({}, t), {
+          result: {
+            rows: result.rows,
+            fields: result.fields,
+            rowCount: result.rowCount,
+            executionTime,
+            pagination: result.pagination
+          },
+          allRows: result.rows,
+          currentOffset: result.rows.length,
+          isExecuting: false,
+          isLoadingMore: false
+        });
+      }));
+      setHistoryKey((prev) => prev + 1);
+    }).catch((error) => {
+      if (cancelledRef.current) return;
+      setTabs((prev) => prev.map((t) => t.id === activeTabId ? __spreadProps(__spreadValues({}, t), {
+        isExecuting: false,
+        isLoadingMore: false
+      }) : t));
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      toast({ title: "Query Error", description: errorMessage, variant: "destructive" });
+    });
+  }, [activeConnection, activeTabId, toast, onQueryExecute, setTabs]);
+  const cancelQuery = useCallback(() => {
+    cancelledRef.current = true;
+    setTabs((prev) => prev.map((t) => t.isExecuting ? __spreadProps(__spreadValues({}, t), {
+      isExecuting: false,
+      isLoadingMore: false
+    }) : t));
+    toast({ title: "Query Cancelled", description: "Query execution was cancelled." });
+  }, [setTabs, toast]);
+  const handleLoadMore = useCallback(() => {
+    var _a, _b;
+    if (!((_b = (_a = currentTab.result) == null ? void 0 : _a.pagination) == null ? void 0 : _b.hasMore)) return;
+    if (!activeConnection) return;
+    const currentOffset = currentTab.currentOffset || currentTab.result.rows.length;
+    setTabs((prev) => prev.map((t) => t.id === currentTab.id ? __spreadProps(__spreadValues({}, t), {
+      isLoadingMore: true
+    }) : t));
+    onQueryExecute(activeConnection.id, currentTab.query, {
+      limit: 500,
+      offset: currentOffset
+    }).then((result) => {
+      if (cancelledRef.current) return;
+      setTabs((prev) => prev.map((t) => {
+        var _a2, _b2;
+        if (t.id !== currentTab.id) return t;
+        const existingRows = t.allRows || ((_a2 = t.result) == null ? void 0 : _a2.rows) || [];
+        const newAllRows = [...existingRows, ...result.rows];
+        return __spreadProps(__spreadValues({}, t), {
+          result: {
+            rows: newAllRows,
+            fields: result.fields,
+            rowCount: newAllRows.length,
+            executionTime: ((_b2 = t.result) == null ? void 0 : _b2.executionTime) || 0,
+            pagination: result.pagination
+          },
+          allRows: newAllRows,
+          currentOffset: currentOffset + result.rows.length,
+          isExecuting: false,
+          isLoadingMore: false
+        });
+      }));
+    }).catch((error) => {
+      if (cancelledRef.current) return;
+      setTabs((prev) => prev.map((t) => t.id === currentTab.id ? __spreadProps(__spreadValues({}, t), {
+        isExecuting: false,
+        isLoadingMore: false
+      }) : t));
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      toast({ title: "Load More Error", description: errorMessage, variant: "destructive" });
+    });
+  }, [currentTab, activeConnection, onQueryExecute, setTabs, toast]);
+  const handleUnlimitedQuery = useCallback(() => {
+    if (!pendingUnlimitedQuery) return;
+    if (!activeConnection) return;
+    const { query, tabId } = pendingUnlimitedQuery;
+    cancelledRef.current = false;
+    setTabs((prev) => prev.map((t) => t.id === tabId ? __spreadProps(__spreadValues({}, t), {
+      isExecuting: true
+    }) : t));
+    onQueryExecute(activeConnection.id, query, { unlimited: true }).then((result) => {
+      if (cancelledRef.current) return;
+      setTabs((prev) => prev.map((t) => {
+        if (t.id !== tabId) return t;
+        return __spreadProps(__spreadValues({}, t), {
+          result: {
+            rows: result.rows,
+            fields: result.fields,
+            rowCount: result.rowCount,
+            executionTime: result.executionTime,
+            pagination: result.pagination
+          },
+          allRows: result.rows,
+          currentOffset: result.rows.length,
+          isExecuting: false,
+          isLoadingMore: false
+        });
+      }));
+      setHistoryKey((prev) => prev + 1);
+    }).catch((error) => {
+      if (cancelledRef.current) return;
+      setTabs((prev) => prev.map((t) => t.id === tabId ? __spreadProps(__spreadValues({}, t), {
+        isExecuting: false,
+        isLoadingMore: false
+      }) : t));
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      toast({ title: "Query Error", description: errorMessage, variant: "destructive" });
+    });
+    setUnlimitedWarningOpen(false);
+    setPendingUnlimitedQuery(null);
+  }, [pendingUnlimitedQuery, activeConnection, onQueryExecute, setTabs, toast]);
+  return {
+    executeQuery,
+    forceExecuteQuery,
+    cancelQuery,
+    handleLoadMore,
+    handleUnlimitedQuery,
+    safetyCheckQuery,
+    setSafetyCheckQuery,
+    unlimitedWarningOpen,
+    setUnlimitedWarningOpen,
+    pendingUnlimitedQuery,
+    setPendingUnlimitedQuery,
+    historyKey,
+    bottomPanelMode,
+    setBottomPanelMode
+  };
+}
+
+// src/workspace/types.ts
+var DEFAULT_WORKSPACE_FEATURES = {
+  ai: false,
+  charts: true,
+  codeGenerator: true,
+  testDataGenerator: true,
+  schemaDiagram: true,
+  dataImport: true,
+  inlineEditing: false,
+  transactions: false,
+  connectionManagement: false,
+  dataMasking: false
+};
+function ResizablePanelGroup(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.PanelGroup,
+    __spreadValues({
+      "data-slot": "resizable-panel-group",
+      className: cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )
+    }, props)
+  );
+}
+function ResizablePanel(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, __spreadValues({ "data-slot": "resizable-panel" }, props));
+}
+function ResizableHandle(_a) {
+  var _b = _a, {
+    withHandle,
+    className
+  } = _b, props = __objRest(_b, [
+    "withHandle",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.PanelResizeHandle,
+    __spreadProps(__spreadValues({
+      "data-slot": "resizable-handle",
+      className: cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )
+    }, props), {
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border", children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-2.5" }) })
+    })
+  );
+}
+function AlertDialog(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, __spreadValues({ "data-slot": "alert-dialog" }, props));
+}
+function AlertDialogPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, __spreadValues({ "data-slot": "alert-dialog-portal" }, props));
+}
+function AlertDialogOverlay(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Overlay,
+    __spreadValues({
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )
+    }, props)
+  );
+}
+function AlertDialogContent(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      __spreadValues({
+        "data-slot": "alert-dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )
+      }, props)
+    )
+  ] });
+}
+function AlertDialogTitle(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Title,
+    __spreadValues({
+      "data-slot": "alert-dialog-title",
+      className: cn("text-lg font-semibold", className)
+    }, props)
+  );
+}
+function AlertDialogDescription(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Description,
+    __spreadValues({
+      "data-slot": "alert-dialog-description",
+      className: cn("text-muted-foreground text-sm", className)
+    }, props)
+  );
+}
+function AlertDialogAction(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Action,
+    __spreadValues({
+      className: cn(buttonVariants(), className)
+    }, props)
+  );
+}
+function AlertDialogCancel(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Cancel,
+    __spreadValues({
+      className: cn(buttonVariants({ variant: "outline" }), className)
+    }, props)
+  );
+}
+var STUDIO_SCOPED_CSS = `
+[data-studio-workspace] {
+  /* Dark theme \u2014 monochrome (black/white/gray) */
+  --background: #09090b;
+  --foreground: #fafafa;
+  --card: #09090b;
+  --card-foreground: #fafafa;
+  --popover: #09090b;
+  --popover-foreground: #fafafa;
+  --primary: #fafafa;
+  --primary-foreground: #09090b;
+  --secondary: #27272a;
+  --secondary-foreground: #fafafa;
+  --muted: #27272a;
+  --muted-foreground: #a1a1aa;
+  --accent: #27272a;
+  --accent-foreground: #fafafa;
+  --destructive: #dc2626;
+  --destructive-foreground: #fafafa;
+  --border: #27272a;
+  --input: #27272a;
+  --ring: #d4d4d8;
+  --radius: 0.5rem;
+  --chart-1: #e4e4e7;
+  --chart-2: #a1a1aa;
+  --chart-3: #71717a;
+  --chart-4: #52525b;
+  --chart-5: #3f3f46;
+
+  /* Font \u2014 Geist (inherited from host or fallback to system) */
+  font-family: var(--font-geist-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "rlig" 1, "calt" 1;
+  letter-spacing: -0.011em;
+}
+[data-studio-workspace] *,
+[data-studio-workspace] *::before,
+[data-studio-workspace] *::after {
+  font-family: inherit;
+}
+[data-studio-workspace] code,
+[data-studio-workspace] pre,
+[data-studio-workspace] kbd,
+[data-studio-workspace] .font-mono {
+  font-family: var(--font-geist-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
+}
+`;
+function useStudioTheme() {
+  useEffect(() => {
+    const id = "studio-workspace-theme";
+    if (document.getElementById(id)) return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = STUDIO_SCOPED_CSS;
+    document.head.appendChild(style);
+    return () => {
+      var _a;
+      (_a = document.getElementById(id)) == null ? void 0 : _a.remove();
+    };
+  }, []);
+}
+var NOOP_MASKING_CONFIG = {
+  enabled: false,
+  patterns: [],
+  roleSettings: {
+    admin: { canToggle: false, canReveal: false },
+    user: { canToggle: false, canReveal: false }
+  }
+};
+function StudioWorkspace({
+  connections: externalConnections,
+  currentUser,
+  onQueryExecute,
+  onSchemaFetch,
+  onSaveQuery: onSaveQueryProp,
+  // onLoadSavedQueries — reserved for future saved-queries panel integration
+  features: featuresProp,
+  className
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const queryEditorRef = useRef(null);
+  const { toast } = useToast();
+  const features = useMemo(
+    () => __spreadValues(__spreadValues({}, DEFAULT_WORKSPACE_FEATURES), featuresProp),
+    [featuresProp]
+  );
+  const conn = useConnectionAdapter({
+    connections: externalConnections,
+    onSchemaFetch
+  });
+  const tabMgr = useTabManager({
+    activeConnection: conn.activeConnection,
+    metadata: null,
+    schema: conn.schema
+  });
+  const queryExec = useQueryAdapter({
+    activeConnection: conn.activeConnection,
+    onQueryExecute,
+    tabs: tabMgr.tabs,
+    activeTabId: tabMgr.activeTabId,
+    currentTab: tabMgr.currentTab,
+    setTabs: tabMgr.setTabs,
+    fetchSchema: conn.fetchSchema,
+    features
+  });
+  useStudioTheme();
+  useEffect(() => {
+    if (conn.activeConnection) {
+      conn.fetchSchema(conn.activeConnection);
+    } else {
+      conn.setSchema([]);
+    }
+  }, [conn.activeConnection]);
+  const [showDiagram, setShowDiagram] = useState(false);
+  const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState(false);
+  const [savedKey, setSavedKey] = useState(0);
+  const [activeMobileTab, setActiveMobileTab] = useState("editor");
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
+  const [isNL2SQLOpen, setIsNL2SQLOpen] = useState(false);
+  const [profilerTable, setProfilerTable] = useState(null);
+  const [codeGenTable, setCodeGenTable] = useState(null);
+  const [testDataTable, setTestDataTable] = useState(null);
+  const handleSaveQuery = useCallback(async (name, description, tags) => {
+    if (!conn.activeConnection) return;
+    if (onSaveQueryProp) {
+      try {
+        await onSaveQueryProp({
+          name,
+          query: tabMgr.currentTab.query,
+          description,
+          connectionType: conn.activeConnection.type,
+          tags
+        });
+        setSavedKey((prev) => prev + 1);
+        toast({ title: "Query Saved", description: `"${name}" has been added to your saved queries.` });
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : "Failed to save query";
+        toast({ title: "Save Failed", description: msg, variant: "destructive" });
+      }
+    }
+  }, [conn.activeConnection, tabMgr.currentTab.query, onSaveQueryProp, toast]);
+  const exportResults = useCallback((format3) => {
+    if (!tabMgr.currentTab.result) return;
+    const data = tabMgr.currentTab.result.rows;
+    let content = "";
+    let mimeType = "text/plain";
+    let ext = format3;
+    if (format3 === "csv") {
+      const headers = Object.keys(data[0] || {}).join(",");
+      const rows = data.map((row) => Object.values(row).map((val) => `"${val}"`).join(",")).join("\n");
+      content = `${headers}
+${rows}`;
+      mimeType = "text/csv";
+      ext = "csv";
+    } else if (format3 === "json") {
+      content = JSON.stringify(data, null, 2);
+      mimeType = "application/json";
+      ext = "json";
+    } else if (format3 === "sql-insert") {
+      const tableName = tabMgr.currentTab.name.replace(/^Query[: ]*/, "") || "table_name";
+      const columns = Object.keys(data[0] || {});
+      const lines = data.map((row) => {
+        const values = columns.map((col) => {
+          const val = row[col];
+          if (val === null || val === void 0) return "NULL";
+          if (typeof val === "number" || typeof val === "boolean") return String(val);
+          return `'${String(val).replace(/'/g, "''")}'`;
+        });
+        return `INSERT INTO ${tableName} (${columns.join(", ")}) VALUES (${values.join(", ")});`;
+      });
+      content = lines.join("\n");
+      mimeType = "text/sql";
+      ext = "sql";
+    } else if (format3 === "sql-ddl") {
+      const tableName = tabMgr.currentTab.name.replace(/^Query[: ]*/, "") || "table_name";
+      const columns = Object.keys(data[0] || {});
+      const colDefs = columns.map((col) => {
+        var _a2;
+        const sampleVal = (_a2 = data[0]) == null ? void 0 : _a2[col];
+        let sqlType = "TEXT";
+        if (typeof sampleVal === "number") {
+          sqlType = Number.isInteger(sampleVal) ? "INTEGER" : "NUMERIC";
+        } else if (typeof sampleVal === "boolean") {
+          sqlType = "BOOLEAN";
+        } else if (sampleVal instanceof Date) {
+          sqlType = "TIMESTAMP";
+        }
+        return `  ${col} ${sqlType}`;
+      });
+      content = `CREATE TABLE ${tableName} (
+${colDefs.join(",\n")}
+);`;
+      mimeType = "text/sql";
+      ext = "sql";
+    }
+    const fileName = `query_result_export.${ext}`;
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    link.click();
+    URL.revokeObjectURL(url);
+  }, [tabMgr.currentTab]);
+  const onTableClick = useCallback((tableName) => {
+    tabMgr.handleTableClick(tableName, queryExec.executeQuery);
+  }, [tabMgr, queryExec.executeQuery]);
+  const noop = useCallback(() => {
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-studio-workspace": "",
+      className: cn("dark flex h-full w-full bg-[#050505] text-zinc-100 overflow-hidden font-sans select-none", className),
+      children: [
+        /* @__PURE__ */ jsxs(ResizablePanelGroup, { id: "workspace-main", direction: "horizontal", className: "h-full", children: [
+          /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 22, minSize: 15, maxSize: 35, className: "hidden md:block", children: /* @__PURE__ */ jsx(
+            Sidebar,
+            {
+              connections: conn.connections,
+              activeConnection: conn.activeConnection,
+              schema: conn.schema,
+              isLoadingSchema: conn.isLoadingSchema,
+              onSelectConnection: conn.setActiveConnection,
+              onDeleteConnection: noop,
+              onEditConnection: noop,
+              onAddConnection: noop,
+              onTableClick,
+              onGenerateSelect: tabMgr.handleGenerateSelect,
+              onCreateTableClick: void 0,
+              onShowDiagram: features.schemaDiagram ? () => setShowDiagram(true) : void 0,
+              isAdmin: false,
+              onOpenMaintenance: noop,
+              databaseType: (_a = conn.activeConnection) == null ? void 0 : _a.type,
+              metadata: null,
+              onProfileTable: features.codeGenerator ? (name) => setProfilerTable(name) : void 0,
+              onGenerateCode: features.codeGenerator ? (name) => setCodeGenTable(name) : void 0,
+              onGenerateTestData: features.testDataGenerator ? (name) => setTestDataTable(name) : void 0
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ResizableHandle, { className: "hidden md:flex w-1 bg-transparent hover:bg-blue-500/30 transition-colors" }),
+          /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 78, children: /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0 h-full bg-[#0a0a0a]", children: [
+            /* @__PURE__ */ jsx(
+              StudioTabBar,
+              {
+                tabs: tabMgr.tabs,
+                activeTabId: tabMgr.activeTabId,
+                editingTabId: tabMgr.editingTabId,
+                editingTabName: tabMgr.editingTabName,
+                onSetActiveTabId: tabMgr.setActiveTabId,
+                onSetEditingTabId: tabMgr.setEditingTabId,
+                onSetEditingTabName: tabMgr.setEditingTabName,
+                onSetTabs: tabMgr.setTabs,
+                onCloseTab: tabMgr.closeTab,
+                onAddTab: tabMgr.addTab
+              }
+            ),
+            /* @__PURE__ */ jsxs("main", { className: "flex-1 overflow-hidden relative", children: [
+              features.schemaDiagram && /* @__PURE__ */ jsx(AnimatePresence, { children: showDiagram && /* @__PURE__ */ jsx(SchemaDiagram, { schema: conn.schema, onClose: () => setShowDiagram(false) }) }),
+              activeMobileTab === "database" && /* @__PURE__ */ jsxs("div", { className: "md:hidden h-full bg-[#080808] overflow-auto p-4", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-between", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-bold text-zinc-300 uppercase tracking-widest", children: "Connections" }) }),
+                /* @__PURE__ */ jsx(
+                  ConnectionsList,
+                  {
+                    connections: conn.connections,
+                    activeConnection: conn.activeConnection,
+                    onSelectConnection: (c) => {
+                      conn.setActiveConnection(c);
+                      setActiveMobileTab("editor");
+                    },
+                    onDeleteConnection: noop,
+                    onAddConnection: noop
+                  }
+                )
+              ] }),
+              activeMobileTab === "schema" && /* @__PURE__ */ jsx("div", { className: "md:hidden h-full bg-[#080808] overflow-auto p-4", children: conn.activeConnection ? /* @__PURE__ */ jsx(
+                SchemaExplorer,
+                {
+                  schema: conn.schema,
+                  isLoadingSchema: conn.isLoadingSchema,
+                  onTableClick: (tableName) => {
+                    onTableClick(tableName);
+                    setActiveMobileTab("editor");
+                  },
+                  onGenerateSelect: (tableName) => {
+                    tabMgr.handleGenerateSelect(tableName);
+                    setActiveMobileTab("editor");
+                  },
+                  onCreateTableClick: void 0,
+                  isAdmin: false,
+                  onOpenMaintenance: noop,
+                  databaseType: (_b = conn.activeConnection) == null ? void 0 : _b.type,
+                  metadata: null,
+                  onProfileTable: features.codeGenerator ? (name) => setProfilerTable(name) : void 0,
+                  onGenerateCode: features.codeGenerator ? (name) => setCodeGenTable(name) : void 0,
+                  onGenerateTestData: features.testDataGenerator ? (name) => setTestDataTable(name) : void 0
+                }
+              ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-zinc-500", children: [
+                /* @__PURE__ */ jsx(Database, { className: "w-12 h-12 mb-4 opacity-30" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Select a connection first" })
+              ] }) }),
+              /* @__PURE__ */ jsx("div", { className: cn(
+                "h-full",
+                activeMobileTab !== "editor" && "hidden md:block"
+              ), children: /* @__PURE__ */ jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxs(ResizablePanelGroup, { id: "workspace-editor", direction: "vertical", children: [
+                /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 40, minSize: 20, children: /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col", children: [
+                  /* @__PURE__ */ jsx(
+                    QueryToolbar,
+                    {
+                      activeConnection: conn.activeConnection,
+                      metadata: null,
+                      isExecuting: tabMgr.currentTab.isExecuting,
+                      playgroundMode: false,
+                      transactionActive: false,
+                      editingEnabled: false,
+                      onSaveQuery: onSaveQueryProp ? () => setIsSaveQueryModalOpen(true) : noop,
+                      onExecuteQuery: () => queryExec.executeQuery(),
+                      onCancelQuery: queryExec.cancelQuery,
+                      onBeginTransaction: noop,
+                      onCommitTransaction: noop,
+                      onRollbackTransaction: noop,
+                      onTogglePlayground: noop,
+                      onToggleEditing: noop,
+                      onImport: features.dataImport ? () => setIsImportModalOpen(true) : noop
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 relative", children: /* @__PURE__ */ jsx(
+                    QueryEditor,
+                    {
+                      ref: queryEditorRef,
+                      value: tabMgr.currentTab.query,
+                      onContentChange: (val) => tabMgr.updateTabById(tabMgr.currentTab.id, { query: val }),
+                      language: tabMgr.currentTab.type === "mongodb" ? "json" : "sql",
+                      tables: conn.tableNames,
+                      databaseType: (_c = conn.activeConnection) == null ? void 0 : _c.type,
+                      schemaContext: conn.schemaContext,
+                      capabilities: void 0
+                    }
+                  ) })
+                ] }) }),
+                /* @__PURE__ */ jsx(ResizableHandle, { className: "h-1 bg-white/5 hover:bg-blue-500/20" }),
+                /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 60, minSize: 20, children: /* @__PURE__ */ jsx(
+                  BottomPanel,
+                  {
+                    mode: queryExec.bottomPanelMode,
+                    onSetMode: queryExec.setBottomPanelMode,
+                    currentTab: tabMgr.currentTab,
+                    schema: conn.schema,
+                    schemaContext: conn.schemaContext,
+                    activeConnection: conn.activeConnection,
+                    metadata: null,
+                    historyKey: queryExec.historyKey,
+                    savedKey,
+                    isNL2SQLOpen: features.ai ? isNL2SQLOpen : false,
+                    onSetIsNL2SQLOpen: features.ai ? setIsNL2SQLOpen : noop,
+                    maskingEnabled: false,
+                    onToggleMasking: void 0,
+                    userRole: currentUser == null ? void 0 : currentUser.role,
+                    maskingConfig: NOOP_MASKING_CONFIG,
+                    editingEnabled: false,
+                    pendingChanges: [],
+                    onCellChange: noop,
+                    onApplyChanges: noop,
+                    onDiscardChanges: noop,
+                    onExecuteQuery: (q) => queryExec.executeQuery(q),
+                    onLoadQuery: (q) => tabMgr.updateCurrentTab({ query: q }),
+                    onLoadMore: ((_e = (_d = tabMgr.currentTab.result) == null ? void 0 : _d.pagination) == null ? void 0 : _e.hasMore) ? queryExec.handleLoadMore : void 0,
+                    isLoadingMore: tabMgr.currentTab.isLoadingMore,
+                    onExportResults: exportResults
+                  }
+                ) })
+              ] }) }) })
+            ] })
+          ] }) })
+        ] }),
+        onSaveQueryProp && /* @__PURE__ */ jsx(
+          SaveQueryModal,
+          {
+            isOpen: isSaveQueryModalOpen,
+            onClose: () => setIsSaveQueryModalOpen(false),
+            onSave: handleSaveQuery,
+            defaultQuery: tabMgr.currentTab.query
+          }
+        ),
+        features.dataImport && /* @__PURE__ */ jsx(
+          DataImportModal,
+          {
+            isOpen: isImportModalOpen,
+            onClose: () => setIsImportModalOpen(false),
+            onImport: (sql) => queryExec.executeQuery(sql),
+            tables: conn.schema,
+            databaseType: (_f = conn.activeConnection) == null ? void 0 : _f.type
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          QuerySafetyDialog,
+          {
+            isOpen: !!queryExec.safetyCheckQuery,
+            query: queryExec.safetyCheckQuery || "",
+            schemaContext: conn.schemaContext,
+            databaseType: (_g = conn.activeConnection) == null ? void 0 : _g.type,
+            onClose: () => queryExec.setSafetyCheckQuery(null),
+            onProceed: () => {
+              if (queryExec.safetyCheckQuery) queryExec.forceExecuteQuery(queryExec.safetyCheckQuery);
+            },
+            onAnalyzeSafety: async () => ({
+              riskLevel: "high",
+              summary: "Potentially dangerous query detected",
+              warnings: [{
+                type: "destructive",
+                severity: "high",
+                message: "This query may modify or delete data",
+                detail: "Review carefully before proceeding."
+              }],
+              affectedRows: "unknown",
+              cascadeEffects: "unknown",
+              recommendation: "Review this query carefully before proceeding."
+            })
+          }
+        ),
+        features.codeGenerator && /* @__PURE__ */ jsx(
+          DataProfiler,
+          {
+            isOpen: !!profilerTable,
+            onClose: () => setProfilerTable(null),
+            tableName: profilerTable || "",
+            tableSchema: conn.schema.find((t) => t.name === profilerTable) || null,
+            connection: conn.activeConnection,
+            schemaContext: conn.schemaContext,
+            databaseType: (_h = conn.activeConnection) == null ? void 0 : _h.type
+          }
+        ),
+        features.codeGenerator && /* @__PURE__ */ jsx(
+          CodeGenerator,
+          {
+            isOpen: !!codeGenTable,
+            onClose: () => setCodeGenTable(null),
+            tableName: codeGenTable || "",
+            tableSchema: conn.schema.find((t) => t.name === codeGenTable) || null,
+            databaseType: (_i = conn.activeConnection) == null ? void 0 : _i.type
+          }
+        ),
+        features.testDataGenerator && /* @__PURE__ */ jsx(
+          TestDataGenerator,
+          {
+            isOpen: !!testDataTable,
+            onClose: () => setTestDataTable(null),
+            tableName: testDataTable || "",
+            tableSchema: conn.schema.find((t) => t.name === testDataTable) || null,
+            databaseType: (_j = conn.activeConnection) == null ? void 0 : _j.type,
+            queryLanguage: void 0,
+            onExecuteQuery: (q) => queryExec.executeQuery(q)
+          }
+        ),
+        /* @__PURE__ */ jsx(AlertDialog, { open: queryExec.unlimitedWarningOpen, onOpenChange: queryExec.setUnlimitedWarningOpen, children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: "bg-[#111] border-white/5 max-w-sm p-0 gap-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsx("div", { className: "px-6 pt-6 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500/20 to-red-500/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "w-5 h-5 text-amber-400" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx(AlertDialogTitle, { className: "text-[15px] font-semibold text-zinc-100 mb-1", children: "Load all results?" }),
+              /* @__PURE__ */ jsxs(AlertDialogDescription, { className: "text-[13px] text-zinc-500 leading-relaxed", children: [
+                "This may slow down your browser. Max ",
+                /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: "100K" }),
+                " rows will be loaded."
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "px-6 pb-6 flex gap-2", children: [
+            /* @__PURE__ */ jsx(AlertDialogCancel, { className: "flex-1 h-9 bg-white/5 border-0 text-zinc-400 text-[13px] font-medium hover:bg-white/10 hover:text-zinc-200", children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              AlertDialogAction,
+              {
+                onClick: queryExec.handleUnlimitedQuery,
+                className: "flex-1 h-9 bg-amber-600 border-0 text-white text-[13px] font-medium hover:bg-amber-500",
+                children: "Load All"
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+export { DEFAULT_WORKSPACE_FEATURES, StudioWorkspace };
+//# sourceMappingURL=workspace.mjs.map
+//# sourceMappingURL=workspace.mjs.map