neural-loom 0.2.48 → 0.2.49

package/src/app/components/DbExplorer.tsx

@@ -0,0 +1,1279 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+interface DbConnectionProfile {
+  id: string;
+  name: string;
+  type: "sqlite" | "postgres" | "mysql";
+  filepath?: string; // sqlite
+  host?: string; // pg, mysql
+  port?: number; // pg, mysql
+  database?: string; // pg, mysql
+  username?: string; // pg, mysql
+  password?: string; // pg, mysql
+  ssl?: boolean; // pg
+  readOnly?: boolean;
+}
+
+interface TableSchema {
+  name: string;
+  type: string;
+}
+
+interface ColumnSchema {
+  name: string;
+  type: string;
+  nullable: boolean;
+  defaultValue?: string | null;
+  isPrimaryKey: boolean;
+  isForeignKey: boolean;
+  referencedTable?: string | null;
+  referencedColumn?: string | null;
+}
+
+interface DbExplorerProps {
+  workspaceRoot: string;
+}
+
+export default function DbExplorer({ workspaceRoot }: DbExplorerProps) {
+  // Connection state
+  const [profiles, setProfiles] = useState<{ global: DbConnectionProfile[]; workspace: DbConnectionProfile[] }>({
+    global: [],
+    workspace: [],
+  });
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [isActiveGlobal, setIsActiveGlobal] = useState<boolean>(true);
+
+  // Schema state
+  const [tables, setTables] = useState<TableSchema[]>([]);
+  const [expandedTable, setExpandedTable] = useState<string | null>(null);
+  const [tableColumns, setTableColumns] = useState<{ [tableName: string]: ColumnSchema[] }>({});
+  const [schemaLoading, setSchemaLoading] = useState(false);
+
+  // Query state
+  const [sql, setSql] = useState<string>("SELECT * FROM sqlite_master;");
+  const [queryLoading, setQueryLoading] = useState(false);
+  const [queryError, setQueryError] = useState<string | null>(null);
+  const [queryResult, setQueryResult] = useState<{
+    rows: any[];
+    fields: string[];
+    durationMs: number;
+    affectedRows?: number;
+  } | null>(null);
+
+  // Connection management modal state
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [isNewGlobal, setIsNewGlobal] = useState(false);
+  const [newProfile, setNewProfile] = useState<Partial<DbConnectionProfile>>({
+    id: "",
+    name: "",
+    type: "sqlite",
+    filepath: "./dev.db",
+    host: "localhost",
+    port: 5432,
+    database: "postgres",
+    username: "postgres",
+    password: "",
+    ssl: false,
+    readOnly: true,
+  });
+  const [profileSaving, setProfileSaving] = useState(false);
+  const [testStatus, setTestStatus] = useState<{ success?: boolean; message?: string } | null>(null);
+
+  // Fetch connection profiles
+  const fetchProfiles = async () => {
+    try {
+      const res = await fetch(`/api/sql/connections?root=${encodeURIComponent(workspaceRoot)}`);
+      if (res.ok) {
+        const data = await res.json();
+        if (data.success) {
+          setProfiles({
+            global: data.global || [],
+            workspace: data.workspace || [],
+          });
+          setActiveId(data.activeId);
+          setIsActiveGlobal(data.isActiveGlobal);
+        }
+      }
+    } catch (err) {
+      console.error("Failed to load connection profiles:", err);
+    }
+  };
+
+  // Fetch schema tables
+  const fetchSchema = async () => {
+    if (!activeId) {
+      setTables([]);
+      return;
+    }
+    setSchemaLoading(true);
+    try {
+      const res = await fetch(`/api/sql/schema?action=list_tables&root=${encodeURIComponent(workspaceRoot)}`);
+      if (res.ok) {
+        const data = await res.json();
+        if (data.success) {
+          setTables(data.tables || []);
+          setQueryError(null);
+        } else {
+          setQueryError(data.error || "Failed to load database schema.");
+        }
+      } else {
+        const data = await res.json();
+        setQueryError(data.error || "Failed to load database schema.");
+      }
+    } catch (err) {
+      console.error("Failed to load schema:", err);
+    } finally {
+      setSchemaLoading(false);
+    }
+  };
+
+  // Fetch table columns
+  const fetchTableColumns = async (tableName: string) => {
+    if (tableColumns[tableName]) {
+      setExpandedTable(expandedTable === tableName ? null : tableName);
+      return;
+    }
+    try {
+      const res = await fetch(
+        `/api/sql/schema?action=describe_table&table=${encodeURIComponent(tableName)}&root=${encodeURIComponent(
+          workspaceRoot
+        )}`
+      );
+      if (res.ok) {
+        const data = await res.json();
+        if (data.success) {
+          setTableColumns((prev) => ({ ...prev, [tableName]: data.columns }));
+          setExpandedTable(tableName);
+        }
+      }
+    } catch (err) {
+      console.error(`Failed to load columns for table ${tableName}:`, err);
+    }
+  };
+
+  useEffect(() => {
+    fetchProfiles();
+  }, [workspaceRoot]);
+
+  useEffect(() => {
+    fetchSchema();
+    setQueryResult(null);
+    setExpandedTable(null);
+    setTableColumns({});
+    
+    // Set query template based on active database type
+    const activeProfile = isActiveGlobal
+      ? profiles.global.find((p) => p.id === activeId)
+      : profiles.workspace.find((p) => p.id === activeId);
+    
+    if (activeProfile) {
+      if (activeProfile.type === "sqlite") {
+        setSql("SELECT name, type FROM sqlite_master WHERE type='table';");
+      } else {
+        setSql("SELECT * FROM information_schema.tables LIMIT 10;");
+      }
+    }
+  }, [activeId, isActiveGlobal, profiles.global.length, profiles.workspace.length]);
+
+  // Handle setting active profile
+  const handleSelectActive = async (id: string, isGlobal: boolean) => {
+    try {
+      const res = await fetch("/api/sql/connections", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "set_active",
+          profileId: id,
+          isGlobal,
+          root: workspaceRoot,
+        }),
+      });
+      if (res.ok) {
+        setActiveId(id);
+        setIsActiveGlobal(isGlobal);
+      }
+    } catch (err) {
+      console.error("Failed to set active profile:", err);
+    }
+  };
+
+  // Test connection profile
+  const handleTestConnection = async () => {
+    setTestStatus(null);
+    try {
+      const res = await fetch("/api/sql/connections", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "test",
+          profile: newProfile,
+          root: workspaceRoot,
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setTestStatus({ success: true, message: "Connection test successful!" });
+      } else {
+        setTestStatus({ success: false, message: data.error || "Connection test failed." });
+      }
+    } catch (err: any) {
+      setTestStatus({ success: false, message: err.message || "Failed to make test query." });
+    }
+  };
+
+  // Save connection profile
+  const handleSaveConnection = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newProfile.name || !newProfile.type) return;
+
+    setProfileSaving(true);
+    const profileId = newProfile.id || `profile_${Math.random().toString(36).substring(7)}`;
+    const finalProfile: DbConnectionProfile = {
+      ...newProfile,
+      id: profileId,
+      name: newProfile.name,
+      type: newProfile.type as any,
+    } as DbConnectionProfile;
+
+    try {
+      const res = await fetch("/api/sql/connections", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "save",
+          profile: finalProfile,
+          isGlobal: isNewGlobal,
+          root: workspaceRoot,
+        }),
+      });
+      if (res.ok) {
+        await fetchProfiles();
+        setShowAddModal(false);
+        // Automatically make it active if it is the only one
+        if (!activeId) {
+          handleSelectActive(profileId, isNewGlobal);
+        }
+      }
+    } catch (err) {
+      console.error("Failed to save profile:", err);
+    } finally {
+      setProfileSaving(false);
+    }
+  };
+
+  // Delete connection profile
+  const handleDeleteConnection = async (id: string, isGlobal: boolean) => {
+    if (!confirm("Are you sure you want to delete this connection profile?")) return;
+    try {
+      const res = await fetch("/api/sql/connections", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "delete",
+          profileId: id,
+          isGlobal,
+          root: workspaceRoot,
+        }),
+      });
+      if (res.ok) {
+        await fetchProfiles();
+        if (activeId === id) {
+          setActiveId(null);
+        }
+      }
+    } catch (err) {
+      console.error("Failed to delete connection profile:", err);
+    }
+  };
+
+  // Run SQL Query
+  const handleRunQuery = async () => {
+    if (!sql.trim() || !activeId) return;
+
+    setQueryLoading(true);
+    setQueryError(null);
+    setQueryResult(null);
+
+    try {
+      const res = await fetch("/api/sql/query", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sql: sql.trim(),
+          root: workspaceRoot,
+        }),
+      });
+
+      const data = await res.json();
+      if (res.ok && data.success) {
+        setQueryResult({
+          rows: data.rows || [],
+          fields: data.fields || [],
+          durationMs: data.durationMs || 0,
+          affectedRows: data.affectedRows,
+        });
+        // Proactively refresh schema if a table creation or DDL was run
+        const isDDL =
+          sql.toLowerCase().includes("create table") ||
+          sql.toLowerCase().includes("drop table") ||
+          sql.toLowerCase().includes("alter table");
+        if (isDDL) {
+          fetchSchema();
+        }
+      } else {
+        setQueryError(data.error || "Failed to execute query.");
+      }
+    } catch (err: any) {
+      setQueryError(err.message || "An unexpected error occurred during execution.");
+    } finally {
+      setQueryLoading(false);
+    }
+  };
+
+  const activeProfile = isActiveGlobal
+    ? profiles.global.find((p) => p.id === activeId)
+    : profiles.workspace.find((p) => p.id === activeId);
+
+  return (
+    <div style={styles.container}>
+      {/* Sidebar: Connections & Schemas */}
+      <div style={styles.sidebar}>
+        {/* Connection Profiles section */}
+        <div style={styles.section}>
+          <div style={styles.sectionHeader}>
+            <span style={styles.sectionTitle}>Connections</span>
+            <button
+              style={styles.addBtn}
+              onClick={() => {
+                setTestStatus(null);
+                setNewProfile({
+                  id: "",
+                  name: "",
+                  type: "sqlite",
+                  filepath: "./dev.db",
+                  host: "localhost",
+                  port: 5432,
+                  database: "postgres",
+                  username: "postgres",
+                  password: "",
+                  ssl: false,
+                  readOnly: true,
+                });
+                setIsNewGlobal(false);
+                setShowAddModal(true);
+              }}
+              title="Add Database Connection Profile"
+            >
+              ➕ Add
+            </button>
+          </div>
+
+          <div style={styles.profileList}>
+            {profiles.global.length === 0 && profiles.workspace.length === 0 && (
+              <div style={styles.emptyText}>No connections configured. Add one to start.</div>
+            )}
+
+            {profiles.workspace.length > 0 && (
+              <>
+                <div style={styles.groupHeader}>WORKSPACE CONNECTIONS</div>
+                {profiles.workspace.map((p) => (
+                  <div
+                    key={p.id}
+                    style={{
+                      ...styles.profileItem,
+                      ...(activeId === p.id && !isActiveGlobal ? styles.profileItemActive : {}),
+                    }}
+                    onClick={() => handleSelectActive(p.id, false)}
+                  >
+                    <div style={styles.profileMeta}>
+                      <span style={styles.profileName}>📁 {p.name}</span>
+                      <span style={styles.profileType}>{p.type}</span>
+                    </div>
+                    <button
+                      style={styles.deleteProfileBtn}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteConnection(p.id, false);
+                      }}
+                    >
+                      ✖
+                    </button>
+                  </div>
+                ))}
+              </>
+            )}
+
+            {profiles.global.length > 0 && (
+              <>
+                <div style={styles.groupHeader}>GLOBAL CONNECTIONS</div>
+                {profiles.global.map((p) => (
+                  <div
+                    key={p.id}
+                    style={{
+                      ...styles.profileItem,
+                      ...(activeId === p.id && isActiveGlobal ? styles.profileItemActive : {}),
+                    }}
+                    onClick={() => handleSelectActive(p.id, true)}
+                  >
+                    <div style={styles.profileMeta}>
+                      <span style={styles.profileName}>🌐 {p.name}</span>
+                      <span style={styles.profileType}>{p.type}</span>
+                    </div>
+                    <button
+                      style={styles.deleteProfileBtn}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteConnection(p.id, true);
+                      }}
+                    >
+                      ✖
+                    </button>
+                  </div>
+                ))}
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Database Tables tree view */}
+        <div style={{ ...styles.section, flex: 1, borderTop: "1px solid var(--border)" }}>
+          <div style={styles.sectionHeader}>
+            <span style={styles.sectionTitle}>Schema Tables</span>
+            {schemaLoading && <span style={styles.spinnerMini}></span>}
+          </div>
+
+          <div style={styles.tableList}>
+            {!activeId && <div style={styles.emptyText}>Select an active connection to view tables.</div>}
+            {activeId && tables.length === 0 && !schemaLoading && (
+              <div style={styles.emptyText}>No tables found in database schema.</div>
+            )}
+
+            {tables.map((t) => (
+              <div key={t.name} style={styles.tableTreeItem}>
+                <div style={styles.tableRow} onClick={() => fetchTableColumns(t.name)}>
+                  <span style={styles.tableIcon}>{t.type === "view" ? "👁️" : "📊"}</span>
+                  <span style={styles.tableName}>{t.name}</span>
+                  <span style={styles.tableChevron}>{expandedTable === t.name ? "▼" : "▶"}</span>
+                </div>
+
+                {expandedTable === t.name && tableColumns[t.name] && (
+                  <div style={styles.columnList}>
+                    {tableColumns[t.name].map((col) => (
+                      <div key={col.name} style={styles.columnItem}>
+                        <span style={styles.columnIcon}>
+                          {col.isPrimaryKey ? "🔑" : col.isForeignKey ? "🔗" : "▫"}
+                        </span>
+                        <span style={styles.columnName} title={col.type}>
+                          {col.name}
+                        </span>
+                        <span style={styles.columnType}>
+                          {col.type.toLowerCase().substring(0, 12)}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Main Panel: Query Editor & Data Results */}
+      <div style={styles.mainContent}>
+        {/* Connection status header */}
+        <div style={styles.statusBar}>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            <span style={styles.statusLabel}>Active Connection:</span>
+            {activeProfile ? (
+              <span style={styles.statusValue}>
+                {isActiveGlobal ? "🌐" : "📁"} {activeProfile.name} ({activeProfile.type})
+                {activeProfile.readOnly && <span style={styles.readOnlyBadge}>Read-Only</span>}
+              </span>
+            ) : (
+              <span style={{ ...styles.statusValue, color: "var(--danger)" }}>No Connection Selected</span>
+            )}
+          </div>
+
+          <button
+            style={{
+              ...styles.runBtn,
+              opacity: !activeId || queryLoading ? 0.6 : 1,
+              cursor: !activeId || queryLoading ? "not-allowed" : "pointer",
+            }}
+            onClick={handleRunQuery}
+            disabled={!activeId || queryLoading}
+          >
+            {queryLoading ? "⌛ Running..." : "⚡ Execute Query (F5)"}
+          </button>
+        </div>
+
+        {/* SQL Input Area */}
+        <div style={styles.editorArea}>
+          <textarea
+            style={styles.textarea}
+            value={sql}
+            onChange={(e) => setSql(e.target.value)}
+            placeholder="Write your SQL query script here..."
+            onKeyDown={(e) => {
+              if (e.key === "F5" || (e.ctrlKey && e.key === "Enter")) {
+                e.preventDefault();
+                handleRunQuery();
+              }
+            }}
+          />
+        </div>
+
+        {/* Results Viewer */}
+        <div style={styles.resultsArea}>
+          {queryError && (
+            <div style={styles.errorContainer}>
+              <h4 style={{ margin: "0 0 0.5rem 0", color: "var(--danger)" }}>⚠️ Execution Error</h4>
+              <pre style={styles.errorText}>{queryError}</pre>
+              {queryError.includes("not installed") && (
+                <div style={styles.driverPrompt}>
+                  <p style={{ margin: "0 0 0.5rem 0" }}>To resolve this, run this installer command in your workspace terminal:</p>
+                  <code style={styles.driverCode}>
+                    {activeProfile?.type === "sqlite"
+                      ? "npm install better-sqlite3"
+                      : activeProfile?.type === "postgres"
+                      ? "npm install pg"
+                      : "npm install mysql2"}
+                  </code>
+                </div>
+              )}
+            </div>
+          )}
+
+          {queryResult && (
+            <div style={styles.resultsWrapper}>
+              <div style={styles.resultsMeta}>
+                <span>
+                  Query completed.{" "}
+                  {queryResult.affectedRows !== undefined
+                    ? `Affected rows: ${queryResult.affectedRows}`
+                    : `Returned ${queryResult.rows.length} rows`}
+                </span>
+                <span>Duration: {queryResult.durationMs}ms</span>
+              </div>
+
+              {queryResult.rows.length > 0 ? (
+                <div style={styles.tableContainer}>
+                  <table style={styles.table}>
+                    <thead>
+                      <tr>
+                        {queryResult.fields.map((f) => (
+                          <th key={f} style={styles.th}>
+                            {f}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {queryResult.rows.map((row, idx) => (
+                        <tr key={idx} style={idx % 2 === 0 ? styles.trEven : styles.trOdd}>
+                          {queryResult.fields.map((f) => (
+                            <td key={f} style={styles.td}>
+                              {row[f] === null
+                                ? "NULL"
+                                : typeof row[f] === "object"
+                                ? JSON.stringify(row[f])
+                                : String(row[f])}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                queryResult.affectedRows === undefined && (
+                  <div style={styles.emptyResults}>Query executed successfully, but returned 0 results.</div>
+                )
+              )}
+            </div>
+          )}
+
+          {!queryError && !queryResult && !queryLoading && (
+            <div style={styles.emptyResults}>Write a query script and click Execute to view table records.</div>
+          )}
+
+          {queryLoading && (
+            <div style={styles.loadingWrapper}>
+              <span style={styles.spinnerLarge}></span>
+              <span style={{ color: "var(--muted)" }}>Running database statement...</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Add Connection Profile Modal */}
+      {showAddModal && (
+        <div style={styles.modalOverlay}>
+          <div style={styles.modalContent}>
+            <h3 style={{ margin: "0 0 1rem 0", display: "flex", justifyContent: "space-between" }}>
+              <span>🔌 Add Database Profile</span>
+              <span style={{ cursor: "pointer" }} onClick={() => setShowAddModal(false)}>
+                ✖
+              </span>
+            </h3>
+
+            <form onSubmit={handleSaveConnection}>
+              <div style={styles.formRow}>
+                <label style={styles.label}>Profile Name</label>
+                <input
+                  style={styles.input}
+                  type="text"
+                  required
+                  value={newProfile.name}
+                  onChange={(e) => setNewProfile((prev) => ({ ...prev, name: e.target.value }))}
+                  placeholder="e.g. Local Postgres, Dev SQLite"
+                />
+              </div>
+
+              <div style={styles.formRow}>
+                <label style={styles.label}>Scope Level</label>
+                <div style={{ display: "flex", gap: "1rem" }}>
+                  <label style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                    <input
+                      type="radio"
+                      checked={!isNewGlobal}
+                      onChange={() => setIsNewGlobal(false)}
+                    />
+                    Workspace Local
+                  </label>
+                  <label style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                    <input
+                      type="radio"
+                      checked={isNewGlobal}
+                      onChange={() => setIsNewGlobal(true)}
+                    />
+                    Global User Profile
+                  </label>
+                </div>
+              </div>
+
+              <div style={styles.formRow}>
+                <label style={styles.label}>Database Type</label>
+                <select
+                  style={styles.select}
+                  value={newProfile.type}
+                  onChange={(e) =>
+                    setNewProfile((prev) => ({
+                      ...prev,
+                      type: e.target.value as any,
+                      filepath: e.target.value === "sqlite" ? "./dev.db" : undefined,
+                    }))
+                  }
+                >
+                  <option value="sqlite">SQLite (Local File)</option>
+                  <option value="postgres">PostgreSQL</option>
+                  <option value="mysql">MySQL</option>
+                </select>
+              </div>
+
+              {newProfile.type === "sqlite" ? (
+                <div style={styles.formRow}>
+                  <label style={styles.label}>Database File Path</label>
+                  <input
+                    style={styles.input}
+                    type="text"
+                    required
+                    value={newProfile.filepath || ""}
+                    onChange={(e) => setNewProfile((prev) => ({ ...prev, filepath: e.target.value }))}
+                    placeholder="Relative (e.g. ./data/dev.db) or Absolute path"
+                  />
+                </div>
+              ) : (
+                <>
+                  <div style={{ display: "flex", gap: "1rem" }}>
+                    <div style={{ ...styles.formRow, flex: 3 }}>
+                      <label style={styles.label}>Host IP Address</label>
+                      <input
+                        style={styles.input}
+                        type="text"
+                        required
+                        value={newProfile.host || ""}
+                        onChange={(e) => setNewProfile((prev) => ({ ...prev, host: e.target.value }))}
+                        placeholder="localhost or IP"
+                      />
+                    </div>
+                    <div style={{ ...styles.formRow, flex: 1 }}>
+                      <label style={styles.label}>Port</label>
+                      <input
+                        style={styles.input}
+                        type="number"
+                        required
+                        value={newProfile.port || 0}
+                        onChange={(e) => setNewProfile((prev) => ({ ...prev, port: parseInt(e.target.value) }))}
+                      />
+                    </div>
+                  </div>
+
+                  <div style={styles.formRow}>
+                    <label style={styles.label}>Database Name</label>
+                    <input
+                      style={styles.input}
+                      type="text"
+                      required
+                      value={newProfile.database || ""}
+                      onChange={(e) => setNewProfile((prev) => ({ ...prev, database: e.target.value }))}
+                    />
+                  </div>
+
+                  <div style={{ display: "flex", gap: "1rem" }}>
+                    <div style={{ ...styles.formRow, flex: 1 }}>
+                      <label style={styles.label}>Username</label>
+                      <input
+                        style={styles.input}
+                        type="text"
+                        required
+                        value={newProfile.username || ""}
+                        onChange={(e) => setNewProfile((prev) => ({ ...prev, username: e.target.value }))}
+                      />
+                    </div>
+                    <div style={{ ...styles.formRow, flex: 1 }}>
+                      <label style={styles.label}>Password</label>
+                      <input
+                        style={styles.input}
+                        type="password"
+                        value={newProfile.password || ""}
+                        onChange={(e) => setNewProfile((prev) => ({ ...prev, password: e.target.value }))}
+                      />
+                    </div>
+                  </div>
+
+                  {newProfile.type === "postgres" && (
+                    <div style={styles.formRow}>
+                      <label style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                        <input
+                          type="checkbox"
+                          checked={!!newProfile.ssl}
+                          onChange={(e) => setNewProfile((prev) => ({ ...prev, ssl: e.target.checked }))}
+                        />
+                        Require SSL Secure Connection
+                      </label>
+                    </div>
+                  )}
+                </>
+              )}
+
+              <div style={styles.formRow}>
+                <label style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                  <input
+                    type="checkbox"
+                    checked={!!newProfile.readOnly}
+                    onChange={(e) => setNewProfile((prev) => ({ ...prev, readOnly: e.target.checked }))}
+                  />
+                  Enforce Read-Only Connection (Disable mutations)
+                </label>
+              </div>
+
+              {testStatus && (
+                <div
+                  style={{
+                    ...styles.testResult,
+                    backgroundColor: testStatus.success ? "rgba(16, 185, 129, 0.12)" : "rgba(239, 68, 68, 0.12)",
+                    border: testStatus.success ? "1px solid var(--success)" : "1px solid var(--danger)",
+                    color: testStatus.success ? "var(--success)" : "var(--danger)",
+                  }}
+                >
+                  {testStatus.message}
+                </div>
+              )}
+
+              <div style={styles.modalFooter}>
+                <button type="button" style={styles.testBtn} onClick={handleTestConnection}>
+                  🔍 Test Connection
+                </button>
+                <div style={{ display: "flex", gap: "0.5rem" }}>
+                  <button type="button" style={styles.cancelBtn} onClick={() => setShowAddModal(false)}>
+                    Cancel
+                  </button>
+                  <button type="submit" style={styles.saveBtn} disabled={profileSaving}>
+                    {profileSaving ? "Saving..." : "Save Profile"}
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Styling Object incorporating harmonized CSS dashboard rules
+const styles: { [key: string]: React.CSSProperties } = {
+  container: {
+    display: "flex",
+    height: "100%",
+    width: "100%",
+    backgroundColor: "#05070a",
+    color: "#cbd5e1",
+    fontSize: "0.875rem",
+    minHeight: 0,
+  },
+  sidebar: {
+    width: "280px",
+    borderRight: "1px solid var(--border)",
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 0,
+    backgroundColor: "rgba(10, 15, 24, 0.4)",
+    flexShrink: 0,
+  },
+  section: {
+    display: "flex",
+    flexDirection: "column",
+    padding: "1rem",
+    minHeight: 0,
+  },
+  sectionHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "0.75rem",
+  },
+  sectionTitle: {
+    fontWeight: 700,
+    letterSpacing: "0.05em",
+    textTransform: "uppercase",
+    fontSize: "0.75rem",
+    color: "var(--muted)",
+  },
+  addBtn: {
+    padding: "0.2rem 0.5rem",
+    borderRadius: "4px",
+    border: "1px solid var(--primary)",
+    backgroundColor: "transparent",
+    color: "var(--primary)",
+    fontSize: "0.7rem",
+    fontWeight: 600,
+    cursor: "pointer",
+  },
+  profileList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.4rem",
+    overflowY: "auto",
+    maxHeight: "220px",
+  },
+  groupHeader: {
+    fontSize: "0.65rem",
+    fontWeight: 600,
+    color: "var(--muted)",
+    marginTop: "0.5rem",
+    marginBottom: "0.2rem",
+    letterSpacing: "0.05em",
+  },
+  profileItem: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "0.5rem 0.6rem",
+    borderRadius: "6px",
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    border: "1px solid var(--border)",
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+  },
+  profileItemActive: {
+    backgroundColor: "rgba(109, 40, 217, 0.08)",
+    border: "1px solid var(--border-focus)",
+    boxShadow: "0 0 10px rgba(109, 40, 217, 0.1)",
+  },
+  profileMeta: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.15rem",
+    flex: 1,
+    minWidth: 0,
+  },
+  profileName: {
+    fontWeight: 600,
+    fontSize: "0.8rem",
+    color: "#fff",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+  profileType: {
+    fontSize: "0.7rem",
+    color: "var(--muted)",
+    textTransform: "uppercase",
+  },
+  deleteProfileBtn: {
+    background: "none",
+    border: "none",
+    color: "rgba(239, 68, 68, 0.4)",
+    cursor: "pointer",
+    fontSize: "0.75rem",
+    padding: "0.25rem",
+  },
+  tableList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25rem",
+    overflowY: "auto",
+    flex: 1,
+    minHeight: 0,
+  },
+  emptyText: {
+    fontSize: "0.75rem",
+    color: "var(--muted)",
+    textAlign: "center",
+    padding: "1rem 0",
+  },
+  tableTreeItem: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  tableRow: {
+    display: "flex",
+    alignItems: "center",
+    padding: "0.35rem 0.5rem",
+    borderRadius: "4px",
+    cursor: "pointer",
+    userSelect: "none",
+    transition: "background 0.2s ease",
+  },
+  tableIcon: {
+    marginRight: "0.4rem",
+    fontSize: "0.9rem",
+  },
+  tableName: {
+    flex: 1,
+    fontSize: "0.8rem",
+    color: "#e2e8f0",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+  tableChevron: {
+    fontSize: "0.6rem",
+    color: "var(--muted)",
+    marginLeft: "0.25rem",
+  },
+  columnList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.2rem",
+    paddingLeft: "1.5rem",
+    marginTop: "0.15rem",
+    borderLeft: "1px dashed rgba(255,255,255,0.06)",
+    marginLeft: "0.8rem",
+    marginBottom: "0.25rem",
+  },
+  columnItem: {
+    display: "flex",
+    alignItems: "center",
+    padding: "0.15rem 0.25rem",
+    fontSize: "0.75rem",
+  },
+  columnIcon: {
+    marginRight: "0.3rem",
+    fontSize: "0.7rem",
+  },
+  columnName: {
+    flex: 1,
+    color: "var(--muted)",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+  columnType: {
+    fontSize: "0.65rem",
+    color: "rgba(109, 40, 217, 0.75)",
+    fontFamily: "monospace",
+    paddingLeft: "0.5rem",
+  },
+  mainContent: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 0,
+    backgroundColor: "#05070a",
+  },
+  statusBar: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "0.75rem 1rem",
+    borderBottom: "1px solid var(--border)",
+    backgroundColor: "rgba(15, 23, 42, 0.3)",
+    flexShrink: 0,
+  },
+  statusLabel: {
+    fontSize: "0.75rem",
+    color: "var(--muted)",
+  },
+  statusValue: {
+    fontSize: "0.8rem",
+    fontWeight: 600,
+    color: "#fff",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.4rem",
+  },
+  readOnlyBadge: {
+    padding: "0.1rem 0.4rem",
+    borderRadius: "4px",
+    backgroundColor: "rgba(234, 179, 8, 0.12)",
+    color: "#eab308",
+    fontSize: "0.65rem",
+    fontWeight: 700,
+    border: "1px solid rgba(234, 179, 8, 0.2)",
+  },
+  runBtn: {
+    padding: "0.4rem 0.9rem",
+    borderRadius: "6px",
+    border: "none",
+    backgroundColor: "var(--primary)",
+    color: "#fff",
+    fontSize: "0.8rem",
+    fontWeight: 600,
+    transition: "all 0.2s ease",
+  },
+  editorArea: {
+    height: "180px",
+    borderBottom: "1px solid var(--border)",
+    position: "relative",
+    flexShrink: 0,
+  },
+  textarea: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#080c14",
+    border: "none",
+    resize: "none",
+    color: "#e2e8f0",
+    fontFamily: "monospace",
+    fontSize: "0.85rem",
+    padding: "1rem",
+    outline: "none",
+    lineHeight: "1.4",
+  },
+  resultsArea: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 0,
+    padding: "1rem",
+  },
+  errorContainer: {
+    padding: "1rem",
+    borderRadius: "8px",
+    backgroundColor: "rgba(239, 68, 68, 0.08)",
+    border: "1px solid rgba(239, 68, 68, 0.2)",
+    overflowY: "auto",
+  },
+  errorText: {
+    margin: 0,
+    fontFamily: "monospace",
+    fontSize: "0.8rem",
+    color: "#f87171",
+    whiteSpace: "pre-wrap",
+  },
+  driverPrompt: {
+    marginTop: "1rem",
+    padding: "0.75rem",
+    borderRadius: "6px",
+    backgroundColor: "rgba(0, 0, 0, 0.3)",
+    border: "1px solid var(--border)",
+  },
+  driverCode: {
+    display: "block",
+    padding: "0.5rem",
+    backgroundColor: "#090d16",
+    borderRadius: "4px",
+    fontFamily: "monospace",
+    fontSize: "0.8rem",
+    color: "var(--primary)",
+    border: "1px solid var(--border)",
+  },
+  resultsWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    minHeight: 0,
+  },
+  resultsMeta: {
+    display: "flex",
+    justifyContent: "space-between",
+    fontSize: "0.75rem",
+    color: "var(--muted)",
+    marginBottom: "0.5rem",
+  },
+  tableContainer: {
+    flex: 1,
+    overflow: "auto",
+    border: "1px solid var(--border)",
+    borderRadius: "6px",
+  },
+  table: {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontFamily: "monospace",
+    fontSize: "0.8rem",
+  },
+  th: {
+    padding: "0.5rem 0.75rem",
+    textAlign: "left",
+    backgroundColor: "#0f172a",
+    borderBottom: "1px solid var(--border)",
+    color: "#94a3b8",
+    fontWeight: 600,
+    position: "sticky",
+    top: 0,
+    zIndex: 1,
+  },
+  td: {
+    padding: "0.4rem 0.75rem",
+    borderBottom: "1px solid rgba(255, 255, 255, 0.03)",
+    color: "#cbd5e1",
+    whiteSpace: "nowrap",
+  },
+  trEven: {
+    backgroundColor: "transparent",
+  },
+  trOdd: {
+    backgroundColor: "rgba(255, 255, 255, 0.01)",
+  },
+  emptyResults: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "var(--muted)",
+    fontSize: "0.8rem",
+    textAlign: "center",
+  },
+  loadingWrapper: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "1rem",
+  },
+  spinnerLarge: {
+    width: "24px",
+    height: "24px",
+    border: "3px solid rgba(109, 40, 217, 0.15)",
+    borderTop: "3px solid var(--primary)",
+    borderRadius: "50%",
+    animation: "spin 1s linear infinite",
+  },
+  spinnerMini: {
+    width: "12px",
+    height: "12px",
+    border: "2px solid rgba(255, 255, 255, 0.1)",
+    borderTop: "2px solid var(--muted)",
+    borderRadius: "50%",
+    animation: "spin 1s linear infinite",
+  },
+  modalOverlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 999,
+  },
+  modalContent: {
+    width: "480px",
+    backgroundColor: "#0d131f",
+    borderRadius: "12px",
+    border: "1px solid var(--border-focus)",
+    padding: "1.5rem",
+    boxShadow: "0 4px 24px rgba(0, 0, 0, 0.5)",
+  },
+  formRow: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.35rem",
+    marginBottom: "1rem",
+  },
+  label: {
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    color: "var(--muted)",
+  },
+  input: {
+    padding: "0.5rem",
+    borderRadius: "6px",
+    border: "1px solid var(--border)",
+    backgroundColor: "#070a12",
+    color: "#fff",
+    outline: "none",
+    fontSize: "0.8rem",
+  },
+  select: {
+    padding: "0.5rem",
+    borderRadius: "6px",
+    border: "1px solid var(--border)",
+    backgroundColor: "#070a12",
+    color: "#fff",
+    outline: "none",
+    fontSize: "0.8rem",
+  },
+  testResult: {
+    padding: "0.5rem",
+    borderRadius: "6px",
+    fontSize: "0.75rem",
+    marginBottom: "1rem",
+  },
+  modalFooter: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "1.5rem",
+  },
+  testBtn: {
+    padding: "0.4rem 0.75rem",
+    borderRadius: "6px",
+    border: "1px solid var(--border)",
+    backgroundColor: "transparent",
+    color: "var(--muted)",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    cursor: "pointer",
+  },
+  cancelBtn: {
+    padding: "0.4rem 0.75rem",
+    borderRadius: "6px",
+    border: "none",
+    backgroundColor: "transparent",
+    color: "var(--muted)",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    cursor: "pointer",
+  },
+  saveBtn: {
+    padding: "0.4rem 0.75rem",
+    borderRadius: "6px",
+    border: "none",
+    backgroundColor: "var(--primary)",
+    color: "#fff",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    cursor: "pointer",
+  },
+};
+
+// Inject keyframe spinner directly for robustness
+if (typeof document !== "undefined") {
+  const style = document.createElement("style");
+  style.innerHTML = `
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  `;
+  document.head.appendChild(style);
+}