@njeybe/nativ 2.2.0 → 2.3.1

package/dist/server/studio-ui/pages/database/browser.js

@@ -0,0 +1,326 @@
+// Database Studio live data browser.
+export const databaseBrowserScript = String.raw `  // ─── Database Studio: live data browser ────────────────────────────────────
+  function renderDataCell(val, colName) {
+    if (val === null || val === undefined) return '<td class="mono muted">NULL</td>';
+    if (typeof val === 'boolean') return '<td class="mono"><b>' + (val ? 'TRUE' : 'FALSE') + '</b></td>';
+    if (typeof val === 'string') {
+      var isImgUrl = /^https?:\/\//i.test(val) && /\.(png|jpe?g|gif|webp|svg|avif|bmp|ico)/i.test(val);
+      var isDataImg = /^data:image\//i.test(val);
+      if (isImgUrl || isDataImg) {
+        return '<td><button type="button" class="cell-preview-btn" data-action="preview-url" data-url="' + esc(val) + '">Preview Image</button> <span class="mono muted" style="font-size:11px">' + esc(val.length > 28 ? val.slice(0, 28) + '…' : val) + '</span></td>';
+      }
+      var displayStr = val.length > 50 ? val.slice(0, 50) + '…' : val;
+      return '<td class="mono" title="' + esc(val) + '">' + esc(displayStr) + '</td>';
+    }
+    if (typeof val === 'object') {
+      var json = JSON.stringify(val);
+      var display = json.length > 40 ? json.slice(0, 40) + '…' : json;
+      return '<td class="mono cell-expandable" title="Click to expand JSON" data-action="view-json" data-raw="' + esc(json) + '">' + esc(display) + '</td>';
+    }
+    return '<td class="mono">' + esc(String(val)) + '</td>';
+  }
+
+  function renderData() {
+    var activeEnv = state.envMode === 'prod' ? 'prod' : 'dev';
+    state.dataEnv = activeEnv;
+    var s = state.status && state.status[activeEnv];
+    if (!s || !s.connected) {
+      return emptyState((activeEnv === 'dev' ? 'Dev / Staging' : 'Production') + ' database not connected',
+        'Please connect the ' + (activeEnv === 'dev' ? 'Dev' : 'Prod') + ' database in Connection Settings to browse and edit live data.');
+    }
+
+    var tables = state.schema[activeEnv + 'Tables'] || [];
+    if (!tables.length) {
+      return '<div class="empty card"><p>No ' + entityNoun(s, true).toLowerCase() + ' found in this database.</p></div>';
+    }
+
+    if (!state.dataEntity || !tables.some(function (t) { return t.name === state.dataEntity; })) {
+      state.dataEntity = tables[0].name;
+    }
+
+    var currentTable = tables.find(function (t) { return t.name === state.dataEntity; }) || tables[0];
+    var isColl = isCollection(currentTable);
+
+    var entityOptions = tables.map(function (t) {
+      var sel = t.name === state.dataEntity ? ' selected' : '';
+      return '<option value="' + esc(t.name) + '"' + sel + '>' + esc(t.name) + (isCollection(t) ? ' (collection)' : '') + '</option>';
+    }).join('');
+
+    var limitOptions = [25, 50, 100].map(function (n) {
+      var sel = state.dataLimit === n ? ' selected' : '';
+      return '<option value="' + n + '"' + sel + '>' + n + ' / page</option>';
+    }).join('');
+
+    var prodBannerHtml = activeEnv === 'prod'
+      ? '<div class="prod-banner"><span><b>Production Safeguard Active:</b> Operating on live production data. All mutations require strict challenge phrase confirmation and are recorded to .nativ/prod_audit.log.</span><span class="badge badge-prod">PROD</span></div>'
+      : '';
+
+    var toolbar = '<div class="data-toolbar">' +
+      '<div class="data-controls">' +
+        '<select class="input" id="data-entity-select" aria-label="Table or collection" style="min-width:180px;font-weight:600">' + entityOptions + '</select>' +
+        '<input class="input" id="data-search" type="search" aria-label="Search records" placeholder="Search records in ' + esc(state.dataEntity) + '…" value="' + esc(state.dataSearch) + '" style="min-width:200px">' +
+        '<select class="input" id="data-limit-select" aria-label="Rows per page">' + limitOptions + '</select>' +
+        '<button class="btn" type="button" id="btn-data-refresh">Refresh</button>' +
+      '</div>' +
+      '<button class="btn primary" type="button" id="btn-insert-record">+ Insert ' + (isColl ? 'Document' : 'Record') + '</button>' +
+    '</div>';
+
+    if (state.dataLoading) {
+      return prodBannerHtml + toolbar + '<div class="card" style="padding:48px 24px;text-align:center"><div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div></div>';
+    }
+
+    if (state.dataError) {
+      return prodBannerHtml + toolbar + '<div class="alert-danger" style="margin-top:12px"><strong>Query error:</strong> ' + esc(state.dataError) + '</div>';
+    }
+
+    var res = state.dataResult;
+    if (!res || !res.rows || res.entity !== state.dataEntity) {
+      setTimeout(function () { fetchDataRecords(); }, 10);
+      return prodBannerHtml + toolbar + '<div class="card" style="padding:48px 24px;text-align:center"><p class="muted">Loading records for ' + esc(state.dataEntity) + '…</p></div>';
+    }
+
+    var pk = res.primaryKey || 'id';
+    var schemaCols = currentTable.columns.map(function (c) { return c.name; });
+    var allKeys = new Set(schemaCols);
+    res.rows.forEach(function (r) { Object.keys(r).forEach(function (k) { allKeys.add(k); }); });
+    var displayCols = [pk];
+    allKeys.forEach(function (k) { if (k !== pk) displayCols.push(k); });
+
+    var thead = '<tr><th class="th-actions" style="width:115px">Actions</th>' + displayCols.map(function (col) {
+      var isSorted = state.dataSort === col;
+      var sortIcon = isSorted ? (state.dataOrder === 'desc' ? ' ▼' : ' ▲') : '';
+      return '<th class="sortable" data-sort-col="' + esc(col) + '">' + esc(col) +
+        (col === pk ? ' <span class="badge badge-pk">PK</span>' : '') +
+        '<span class="th-sort-icon">' + sortIcon + '</span></th>';
+    }).join('') + '</tr>';
+
+    var tbody = '';
+    if (res.rows.length === 0) {
+      tbody = '<tr><td colspan="' + (displayCols.length + 1) + '" style="text-align:center;padding:32px;color:var(--muted)">No records found' +
+        (state.dataSearch ? ' matching "' + esc(state.dataSearch) + '"' : '') + '.</td></tr>';
+    } else {
+      tbody = res.rows.map(function (row, rowIdx) {
+        var actions = '<td class="td-actions">' +
+          '<button class="btn small" type="button" data-action="edit-record" data-row="' + rowIdx + '">Edit</button>' +
+          '<button class="btn small btn-danger" type="button" data-action="delete-record" data-row="' + rowIdx + '">Delete</button>' +
+        '</td>';
+
+        var cells = displayCols.map(function (c) {
+          return renderDataCell(row[c], c);
+        }).join('');
+
+        return '<tr>' + actions + cells + '</tr>';
+      }).join('');
+    }
+
+    var start = res.totalCount === 0 ? 0 : (res.page - 1) * res.limit + 1;
+    var end = Math.min(res.page * res.limit, res.totalCount);
+    var pagination = '<div class="pagination-bar">' +
+      '<div>Showing ' + start + '–' + end + ' of ' + res.totalCount + ' ' + (isColl ? 'documents' : 'records') + '</div>' +
+      '<div class="pagination-ctrls">' +
+        '<button class="btn small" type="button" id="btn-page-prev"' + (res.page <= 1 ? ' disabled' : '') + '>Previous</button>' +
+        '<span>Page ' + res.page + ' of ' + Math.max(1, res.totalPages) + '</span>' +
+        '<button class="btn small" type="button" id="btn-page-next"' + (res.page >= res.totalPages ? ' disabled' : '') + '>Next</button>' +
+      '</div>' +
+    '</div>';
+
+    return prodBannerHtml + toolbar + '<div class="data-grid-wrap"><table class="data-table"><thead>' + thead + '</thead><tbody>' + tbody + '</tbody></table></div>' + pagination;
+  }
+
+  function fetchDataRecords() {
+    if (!state.dataEntity) return;
+    state.dataLoading = true;
+    state.dataError = null;
+    renderDb();
+
+    var params = [
+      'env=' + encodeURIComponent(state.dataEnv),
+      'entity=' + encodeURIComponent(state.dataEntity),
+      'page=' + state.dataPage,
+      'limit=' + state.dataLimit
+    ];
+    if (state.dataSort) params.push('sort=' + encodeURIComponent(state.dataSort));
+    if (state.dataOrder) params.push('order=' + encodeURIComponent(state.dataOrder));
+    if (state.dataSearch) params.push('search=' + encodeURIComponent(state.dataSearch));
+
+    api('/api/data?' + params.join('&')).then(function (res) {
+      state.dataResult = res;
+      state.dataLoading = false;
+      renderDb();
+    }, function (err) {
+      state.dataError = err.message;
+      state.dataLoading = false;
+      renderDb();
+    });
+  }
+
+  function openInsertRecordModal() {
+    var tables = state.schema[state.dataEnv + 'Tables'] || [];
+    var table = tables.find(function (t) { return t.name === state.dataEntity; }) || { columns: [] };
+    var isColl = isCollection(table);
+
+    $('record-title').textContent = 'Insert ' + (isColl ? 'Document' : 'Record') + ' into ' + state.dataEntity;
+    $('record-lead').textContent = 'Target Environment: ' + state.dataEnv.toUpperCase() + '. Specify column values below:';
+    $('btn-save-record').textContent = 'Insert ' + (isColl ? 'Document' : 'Record');
+    state.editingPk = null;
+
+    var html = '';
+    table.columns.forEach(function (col) {
+      var isPk = col.primaryKey;
+      var fieldLabel = esc(col.name) + (isPk ? ' (Primary Key - Optional/Auto)' : '');
+      var placeholder = col.type + (col.default ? ' · default: ' + col.default : '');
+      var isLong = /json|map|array|text/i.test(col.type);
+      if (isLong) {
+        html += '<div class="field field-full"><label><b>' + fieldLabel + '</b></label><textarea class="input" name="' + esc(col.name) + '" placeholder="' + esc(placeholder) + '"></textarea></div>';
+      } else {
+        html += '<div class="field"><label><b>' + fieldLabel + '</b></label><input class="input" type="text" name="' + esc(col.name) + '" placeholder="' + esc(placeholder) + '"></div>';
+      }
+    });
+    $('record-fields').innerHTML = html || '<p class="muted">No schema columns defined.</p>';
+    openDialog($('record-dialog'));
+  }
+
+  function openEditRecordModal(rowIndex) {
+    if (!state.dataResult || !state.dataResult.rows[rowIndex]) return;
+    var row = state.dataResult.rows[rowIndex];
+    var pkCol = state.dataResult.primaryKey || 'id';
+    var pkVal = row[pkCol];
+    state.editingPk = pkVal;
+
+    var tables = state.schema[state.dataEnv + 'Tables'] || [];
+    var table = tables.find(function (t) { return t.name === state.dataEntity; }) || { columns: [] };
+    var isColl = isCollection(table);
+
+    $('record-title').textContent = 'Edit ' + (isColl ? 'Document' : 'Record') + ' (' + pkCol + ' = ' + pkVal + ')';
+    $('record-lead').textContent = 'Target Environment: ' + state.dataEnv.toUpperCase() + '. Primary key is locked for single-record isolation:';
+    $('btn-save-record').textContent = 'Save Changes';
+
+    var html = '';
+    html += '<div class="field field-full"><label><b>' + esc(pkCol) + ' (Primary Key - Locked)</b></label><input class="input" type="text" name="' + esc(pkCol) + '" value="' + esc(pkVal) + '" disabled style="opacity:.65"></div>';
+
+    var displayedCols = new Set([pkCol]);
+    table.columns.forEach(function (col) {
+      if (col.name === pkCol) return;
+      displayedCols.add(col.name);
+      var val = row[col.name];
+      var valStr = val == null ? '' : typeof val === 'object' ? JSON.stringify(val) : String(val);
+      var isLong = /json|map|array|text/i.test(col.type) || valStr.length > 50;
+      if (isLong) {
+        html += '<div class="field field-full"><label><b>' + esc(col.name) + ' (' + esc(col.type) + ')</b></label><textarea class="input" name="' + esc(col.name) + '">' + esc(valStr) + '</textarea></div>';
+      } else {
+        html += '<div class="field"><label><b>' + esc(col.name) + ' (' + esc(col.type) + ')</b></label><input class="input" type="text" name="' + esc(col.name) + '" value="' + esc(valStr) + '"></div>';
+      }
+    });
+
+    Object.keys(row).forEach(function (k) {
+      if (displayedCols.has(k)) return;
+      var val = row[k];
+      var valStr = val == null ? '' : typeof val === 'object' ? JSON.stringify(val) : String(val);
+      html += '<div class="field"><label><b>' + esc(k) + '</b></label><input class="input" type="text" name="' + esc(k) + '" value="' + esc(valStr) + '"></div>';
+    });
+
+    $('record-fields').innerHTML = html;
+    openDialog($('record-dialog'));
+  }
+
+  function parseInputValue(raw) {
+    if (raw === '') return null;
+    if (raw === 'true') return true;
+    if (raw === 'false') return false;
+    if (/^-?\d+$/.test(raw)) return parseInt(raw, 10);
+    if (/^-?\d+\.\d+$/.test(raw)) return parseFloat(raw);
+    if ((raw.startsWith('{') && raw.endsWith('}')) || (raw.startsWith('[') && raw.endsWith(']'))) {
+      try { return JSON.parse(raw); } catch (e) { return raw; }
+    }
+    return raw;
+  }
+
+  function handleSaveRecordSubmit() {
+    var form = $('record-form');
+    var inputs = form.querySelectorAll('input, textarea');
+    var data = {};
+    inputs.forEach(function (inp) {
+      if (inp.name && !inp.disabled) {
+        var v = inp.value.trim();
+        if (v !== '') data[inp.name] = parseInputValue(v);
+      }
+    });
+
+    if (state.editingPk !== null) {
+      dispatchMutation('UPDATE', state.dataEntity, state.editingPk, { updates: data });
+    } else {
+      dispatchMutation('INSERT', state.dataEntity, null, { record: data });
+    }
+  }
+
+  function handleDeleteRecord(rowIndex) {
+    if (!state.dataResult || !state.dataResult.rows[rowIndex]) return;
+    var row = state.dataResult.rows[rowIndex];
+    var pkCol = state.dataResult.primaryKey || 'id';
+    var pkVal = row[pkCol];
+    if (pkVal === undefined || pkVal === null) return;
+
+    if (state.dataEnv === 'prod') {
+      dispatchMutation('DELETE', state.dataEntity, pkVal, {});
+    } else {
+      if (window.confirm('Delete record ' + pkVal + ' from ' + state.dataEntity + '?')) {
+        api('/api/data', {
+          method: 'DELETE',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ env: state.dataEnv, entity: state.dataEntity, primaryKey: pkVal })
+        }).then(function () {
+          toast('Record deleted successfully', 'ok');
+          fetchDataRecords();
+        }, function (err) {
+          toast('Delete failed: ' + err.message);
+        });
+      }
+    }
+  }
+
+  function dispatchMutation(action, entity, pk, payload) {
+    if (state.dataEnv === 'prod') {
+      state.pendingMutation = { action: action, entity: entity, pk: pk, payload: payload };
+      $('challenge-desc').textContent = 'Action: ' + action + ' on entity "' + entity + '"' + (pk != null ? ' (PK: ' + pk + ')' : '') + '.';
+      $('challenge-target-name').textContent = entity;
+      var input = $('challenge-input');
+      input.value = '';
+      $('btn-confirm-challenge').disabled = true;
+      openDialog($('challenge-dialog'));
+      input.focus();
+    } else {
+      executeMutationDirect(action, entity, pk, payload, false, '');
+    }
+  }
+
+  function executeMutationDirect(action, entity, pk, payload, confirmProd, challengePhrase) {
+    var method = action === 'INSERT' ? 'POST' : action === 'UPDATE' ? 'PUT' : 'DELETE';
+    var body = Object.assign({
+      env: state.dataEnv,
+      entity: entity
+    }, payload);
+    if (pk != null) body.primaryKey = pk;
+    if (confirmProd) {
+      body.confirmProd = true;
+      body.challengePhrase = challengePhrase;
+    }
+
+    api('/api/data', {
+      method: method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    }).then(function () {
+      if (confirmProd) {
+        toast('Production ' + action.toLowerCase() + ' executed. Logged to .nativ/prod_audit.log', 'ok');
+        $('challenge-dialog').close();
+      } else {
+        toast(action + ' executed successfully', 'ok');
+      }
+      $('record-dialog').close();
+      fetchDataRecords();
+    }, function (err) {
+      toast(action + ' failed: ' + err.message);
+    });
+  }
+
+`;

package/dist/server/studio-ui/pages/database/connection.d.ts

@@ -0,0 +1 @@
+export declare const databaseConnectionScript: string;

package/dist/server/studio-ui/pages/database/connection.js

@@ -0,0 +1,158 @@
+// Database Studio connection modal.
+export const databaseConnectionScript = String.raw `  // ─── Database Studio: connection modal ─────────────────────────────────────
+  function renderModalStatus() {
+    ['dev', 'prod'].forEach(function (env) {
+      var s = state.status && state.status[env];
+      $('mdot-' + env).className = 'dot ' + (s && s.connected ? 'on' : 'off');
+      $('current-' + env).innerHTML = s && s.maskedUrl
+        ? 'Current: <code>' + esc(s.maskedUrl) + '</code><span class="copy-wrap"><span class="tooltip">Copied!</span><button class="btn small" type="button" data-copy-masked="' + env + '">Copy</button></span>'
+        : 'Current: <span class="muted">not configured</span>';
+    });
+  }
+
+  function renderTemplateChips() {
+    var host = $('conn-template-chips');
+    if (!host) return;
+    if (!state.envInfo || !state.envInfo.templateFound || !state.envInfo.detectedKeys || state.envInfo.detectedKeys.length === 0) {
+      host.innerHTML = '';
+      host.hidden = true;
+      return;
+    }
+    var html = '<div class="template-helper-box">' +
+      '<div class="template-helper-label">Discovered in <code>' + esc(state.envInfo.templateFile || '.env.example') + '</code>:</div>' +
+      '<div class="template-chips">';
+    state.envInfo.detectedKeys.forEach(function (dk) {
+      var eng = dk.engine ? ' (' + (ENGINE_LABEL[dk.engine] || dk.engine) + ')' : '';
+      var statusDot = dk.isConfiguredInEnv ? '<span class="chip-dot on"></span>' : '<span class="chip-dot off"></span>';
+      var title = dk.isConfiguredInEnv ? 'Configured in .env' : 'Missing in .env';
+      html += '<button type="button" class="btn small template-chip" data-template-key="' + esc(dk.key) + '" data-template-engine="' + esc(dk.engine || '') + '" data-template-env="' + esc(dk.targetEnv) + '" title="' + title + '">' +
+        statusDot + esc(dk.key) + eng +
+      '</button>';
+    });
+    html += '</div></div>';
+    host.innerHTML = html;
+    host.hidden = false;
+
+    host.querySelectorAll('.template-chip').forEach(function (btn) {
+      btn.onclick = function () {
+        var key = btn.getAttribute('data-template-key');
+        var eng = btn.getAttribute('data-template-engine');
+        var targetEnv = btn.getAttribute('data-template-env') || 'dev';
+        // Fragmented component keys (DB_HOST, DB_PORT, ...) map to the parameter form, not a URL.
+        var isComponent = /(^|_)(HOST|HOSTNAME|SERVER|PORT|USER|USERNAME|PASS|PASSWORD|DATABASE|NAME|CONNECTION|DRIVER)$/i.test(key) && eng !== 'mongodb' && eng !== 'firestore' && eng !== 'sqlite';
+        $('engine-' + targetEnv).value = eng === 'firestore' ? 'firestore' : isComponent ? 'form' : 'url';
+        setEngineMode(targetEnv);
+        if (isComponent) {
+          if (eng === 'mysql' || eng === 'postgresql') $('pengine-' + targetEnv).value = eng;
+          $('phost-' + targetEnv).focus();
+        } else {
+          $((eng === 'firestore' ? 'fsproject-' : 'url-') + targetEnv).focus();
+        }
+        toast('Selected ' + key + ' for ' + targetEnv.toUpperCase());
+      };
+    });
+  }
+
+  function openSettings() {
+    renderModalStatus();
+    renderTemplateChips();
+    ['dev', 'prod'].forEach(function (env) { $('result-' + env).textContent = ''; $('result-' + env).className = 'result'; });
+    openDialog($('conn-dialog'));
+  }
+
+  function isFirestoreMode(env) { return $('engine-' + env).value === 'firestore'; }
+  function isFormMode(env) { return $('engine-' + env).value === 'form'; }
+
+  var PARAM_FIELDS = ['phost', 'pport', 'puser', 'ppass', 'pdb'];
+  var DEFAULT_PORT = { mysql: '3306', postgresql: '5432' };
+
+  function setEngineMode(env) {
+    var fs = isFirestoreMode(env);
+    var form = isFormMode(env);
+    $('url-' + env).hidden = fs || form;
+    document.querySelector('[data-toggle="' + env + '"]').hidden = fs || form;
+    $('fsproject-' + env).hidden = !fs;
+    $('fsemu-' + env).hidden = !fs;
+    $('params-' + env).hidden = !form;
+    $('result-' + env).textContent = '';
+  }
+
+  /** Quick-fill for a stock XAMPP install: MySQL on 127.0.0.1:3306 as root with an empty password. */
+  function applyXamppDefaults(env) {
+    $('engine-' + env).value = 'form';
+    setEngineMode(env);
+    $('pengine-' + env).value = 'mysql';
+    $('phost-' + env).value = '127.0.0.1';
+    $('pport-' + env).value = '3306';
+    $('puser-' + env).value = 'root';
+    $('ppass-' + env).value = '';
+    $('pdb-' + env).focus();
+  }
+
+  function hasInput(env) {
+    if (isFirestoreMode(env)) return !!$('fsproject-' + env).value.trim();
+    if (isFormMode(env)) return !!$('phost-' + env).value.trim();
+    return !!$('url-' + env).value.trim();
+  }
+
+  /** Parameter form: sent as the contract's components payload; the server assembles the URL in memory. */
+  function componentsBody(env) {
+    var engine = $('pengine-' + env).value;
+    var host = $('phost-' + env).value.trim();
+    var port = $('pport-' + env).value.trim() || DEFAULT_PORT[engine];
+    if (!host) return { error: 'Enter a host, e.g. 127.0.0.1.' };
+    if (!/^[A-Za-z0-9._:\[\]-]{1,253}$/.test(host)) return { error: 'Host must be a hostname or IP address.' };
+    if (!/^\d{1,5}$/.test(port) || +port < 1 || +port > 65535) return { error: 'Port must be a number between 1 and 65535.' };
+    var components = { engine: engine, host: host, port: +port };
+    var user = $('puser-' + env).value.trim();
+    var password = $('ppass-' + env).value;
+    var database = $('pdb-' + env).value.trim();
+    if (user) components.user = user;
+    if (password) components.password = password;
+    if (database) components.database = database;
+    return { body: { env: env, engine: engine, components: components } };
+  }
+
+  /** Builds the /api/connect body. Firestore is sent as a firestore:// URL plus the contract's firestoreConfig. */
+  function connectBody(env) {
+    if (isFormMode(env)) return componentsBody(env);
+    if (!isFirestoreMode(env)) {
+      var url = $('url-' + env).value.trim();
+      return url ? { body: { env: env, connectionUrl: url } } : { error: 'Enter a connection string first.' };
+    }
+    var projectId = $('fsproject-' + env).value.trim();
+    var emulatorHost = $('fsemu-' + env).value.trim();
+    if (!/^[a-z0-9][a-z0-9-]{2,62}$/.test(projectId)) return { error: 'Enter a valid Firestore project ID (lowercase letters, digits, hyphens).' };
+    if (emulatorHost && !/^[A-Za-z0-9.\-\[\]:]+:\d{2,5}$/.test(emulatorHost)) return { error: 'Emulator host must look like localhost:8080.' };
+    var firestoreUrl = 'firestore://' + encodeURIComponent(projectId) + (emulatorHost ? '?emulator=' + emulatorHost : '');
+    var config = { projectId: projectId };
+    if (emulatorHost) config.emulatorHost = emulatorHost;
+    return { body: { env: env, engine: 'firestore', connectionUrl: firestoreUrl, firestoreConfig: config } };
+  }
+
+  function ping(env) {
+    var out = $('result-' + env);
+    var req = connectBody(env);
+    if (req.error) { out.className = 'result err'; out.textContent = req.error; return Promise.resolve(false); }
+    out.className = 'result'; out.textContent = 'Testing connection…';
+    return postJson('/api/connect', req.body).then(function (r) {
+      if (r.success) {
+        var count = r.entityCount != null ? r.entityCount : r.tableCount;
+        out.className = 'result ok';
+        out.textContent = 'Connected to ' + (ENGINE_LABEL[r.engine] || r.engine) + ' in ' + Math.round(r.pingMs) + 'ms · ' + count + ' ' +
+          entityNoun({ engine: r.engine }, true).toLowerCase() + ' · saved to session as ' + r.maskedUrl;
+        $('url-' + env).value = '';
+        $('ppass-' + env).value = '';
+        return true;
+      }
+      out.className = 'result err';
+      out.textContent = 'Error: ' + (r.error || 'Connection failed');
+      var hint = hintFor(r.error);
+      if (hint) out.textContent += ' — ' + hint;
+      return false;
+    }, function (e) {
+      out.className = 'result err'; out.textContent = 'Error: ' + e.message; return false;
+    });
+  }
+
+`;

package/dist/server/studio-ui/pages/database/data-shell.d.ts

@@ -0,0 +1 @@
+export declare const databaseDataScript: string;

package/dist/server/studio-ui/pages/database/data-shell.js

@@ -0,0 +1,165 @@
+// Database Studio data loading and shell.
+export const databaseDataScript = String.raw `  // ─── View 5: Database Studio — data loading ────────────────────────────────
+  function load(fresh) {
+    state.loading = true;
+    renderDb();
+    var q = fresh ? '?refresh=1' : '';
+    var diffPath = '/api/diff?target=' + state.diffTarget + (fresh ? '&refresh=1' : '');
+    return Promise.all([
+      api('/api/status' + q).catch(function (e) { toast(e.message); return null; }),
+      api('/api/schema' + q).catch(function (e) { toast(e.message); return { devTables: [], prodTables: [] }; }),
+      api(diffPath).then(function (d) { state.diffError = null; return d; }, function (e) { state.diffError = e.message; return null; }),
+      api('/api/env-info').catch(function () { return null; })
+    ]).then(function (results) {
+      state.status = results[0];
+      state.schema = results[1];
+      state.diff = results[2];
+      state.envInfo = results[3];
+      state.diffTargetUsed = state.diffTarget;
+      state.loading = false;
+      if (state.status) {
+        ['dev', 'prod'].forEach(function (env) {
+          var s = state.status[env];
+          if (s && !s.connected && s.error && !/No (Dev|Prod) database configured/.test(s.error)) {
+            toast((env === 'dev' ? 'Dev' : 'Prod') + ' connection failed: ' + s.error);
+          }
+        });
+      }
+      renderDb();
+    });
+  }
+
+  // ─── Database Studio: shell ────────────────────────────────────────────────
+  /** DB_HOST -> DB_*, PROD_DB_HOST -> PROD_DB_*, PGHOST -> PG*. */
+  function keyFamily(key) {
+    var m = /^(.*_)[^_]*$/.exec(key);
+    return m ? m[1] + '*' : key.slice(0, 2) + '*';
+  }
+
+  /** Local-stack hint when fragmented DB_* keys resolve to a server that refuses connections. */
+  function fragmentedDiagnostic(s) {
+    var cfg = state.envInfo && state.envInfo.fragmentedConfig;
+    if (!s || s.connected || !s.synthesized || !cfg) return '';
+    if (!/ECONNREFUSED|ETIMEDOUT|EHOSTUNREACH/i.test(s.error || '')) return '';
+    var keys = cfg.sourceKeys.filter(function (k) { return /HOST|DATABASE|_DB$|DB_NAME$/.test(k); });
+    var label = ENGINE_LABEL[cfg.engine] || cfg.engine;
+    var action = cfg.engine === 'mysql'
+      ? 'Ensure MySQL is started in XAMPP Control Panel.'
+      : 'Ensure the PostgreSQL service is running on ' + cfg.host + ':' + cfg.port + '.';
+    return 'Detected fragmented ' + label + ' config (' + (keys.length ? keys : cfg.sourceKeys).join(', ') + '). ' + action;
+  }
+
+  function statusPill(env, s) {
+    var label = env.toUpperCase();
+    if (!s) return '<span class="pill"><span class="dot"></span><b>' + label + ':</b> loading…</span>';
+    if (!s.connected) {
+      var why = /No (Dev|Prod) database configured/.test(s.error || '') ? 'not configured' : 'offline';
+      return '<span class="pill" title="' + esc(s.error || '') + '"><span class="dot off"></span><b>' + label + ':</b> ' + why +
+        ' <span class="badge badge-offline">OFFLINE</span></span>';
+    }
+    var sourceBadge = s.synthesized && s.sourceKey
+      ? ' <span class="badge badge-synth" title="Assembled in memory from fragmented .env keys">synthesized from ' + esc(keyFamily(s.sourceKey)) + '</span>'
+      : s.detectedFromExample && s.sourceKey
+        ? ' <span class="badge badge-source" title="Detected in ' + esc(s.exampleFile || '.env.example') + '">via ' + esc(s.sourceKey) + '</span>'
+        : (s.sourceKey ? ' <span class="badge badge-source">via ' + esc(s.sourceKey) + '</span>' : '');
+    return '<span class="pill" title="' + esc(s.maskedUrl) + '"><span class="dot on"></span><b>' + label + ':</b> ' +
+      esc(ENGINE_LABEL[s.engine] || s.engine) + (s.database ? ' · ' + esc(s.database) : '') + ' (' + Math.round(s.pingMs) + 'ms) – ' +
+      entityCount(s) + ' ' + entityNoun(s, true) + sourceBadge + ' <span class="badge badge-online">ONLINE</span></span>';
+  }
+
+  function renderDbShell() {
+    var st = state.status || {};
+    $('telemetry').innerHTML = statusPill('dev', st.dev) + statusPill('prod', st.prod);
+
+    var bannerEl = $('diagnostic-banner');
+    if (bannerEl) {
+      var devS = st.dev;
+      var prodS = st.prod;
+      var activeS = state.envMode === 'prod' ? prodS : devS;
+      var suggestion = fragmentedDiagnostic(activeS) || fragmentedDiagnostic(devS) ||
+        (activeS && !activeS.connected && activeS.suggestion) ||
+        (devS && !devS.connected && devS.suggestion) ||
+        (prodS && !prodS.connected && prodS.suggestion);
+
+      if (!suggestion && state.envInfo && state.envInfo.missingKeys && state.envInfo.missingKeys.length > 0) {
+        var missingForActive = state.envInfo.missingKeys.find(function (k) {
+          return k.targetEnv === (state.envMode === 'prod' ? 'prod' : 'dev');
+        }) || state.envInfo.missingKeys[0];
+        if (missingForActive && ((missingForActive.targetEnv === 'dev' && (!devS || !devS.connected)) || (missingForActive.targetEnv === 'prod' && (!prodS || !prodS.connected)))) {
+          var engLabel = missingForActive.engine ? ' (' + (ENGINE_LABEL[missingForActive.engine] || missingForActive.engine) + ')' : '';
+          suggestion = 'Detected "' + missingForActive.key + '"' + engLabel + ' in ' + (state.envInfo.templateFile || '.env.example') + ', but it is not set in your .env file.';
+        }
+      }
+
+      if (suggestion && ((!devS || !devS.connected) || (!prodS || !prodS.connected))) {
+        bannerEl.innerHTML = '<div class="diagnostic-banner">' +
+          '<div class="diagnostic-content">' +
+            '<span class="diagnostic-tag">[DIAGNOSTIC]</span> ' +
+            '<span class="diagnostic-msg">' + esc(suggestion) + '</span>' +
+          '</div>' +
+          '<div class="diagnostic-actions">' +
+            '<button class="btn small" type="button" id="btn-diag-settings">Open Connection Settings</button>' +
+          '</div>' +
+        '</div>';
+        bannerEl.hidden = false;
+        var btnDiag = $('btn-diag-settings');
+        if (btnDiag) {
+          btnDiag.onclick = function () { openSettings(); };
+        }
+      } else {
+        bannerEl.innerHTML = '';
+        bannerEl.hidden = true;
+      }
+    }
+
+    $('count-explorer').textContent = String((state.schema.devTables || []).length + (state.schema.prodTables || []).length);
+    var activeEnv = state.envMode === 'prod' ? 'prod' : 'dev';
+    var dataCount = state.dataResult && state.dataResult.totalCount != null
+      ? state.dataResult.totalCount
+      : ((state.schema[activeEnv + 'Tables'] || []).length);
+    $('count-data').textContent = String(dataCount);
+    var d = state.diff && state.diff.summary;
+    $('count-drift').textContent = d ? String(d.addedTablesCount + d.alteredTablesCount + d.droppedTablesCount) : '–';
+    var script = state.diff ? generateScript(state.diff) : { text: '', lang: 'sql', count: 0 };
+    state.sql = script.text;
+    state.scriptLang = script.lang;
+    state.scriptCount = script.count;
+    $('count-sql').textContent = String(script.count);
+    document.querySelectorAll('.subtab').forEach(function (t) {
+      var active = t.getAttribute('data-tab') === state.tab;
+      t.setAttribute('aria-selected', active ? 'true' : 'false');
+      t.setAttribute('tabindex', active ? '0' : '-1');
+    });
+    document.querySelectorAll('.env-seg-btn').forEach(function (btn) {
+      var m = btn.getAttribute('data-env-mode');
+      btn.setAttribute('aria-pressed', String(m === state.envMode));
+    });
+    $('view').setAttribute('aria-labelledby', 'tab-' + state.tab);
+  }
+
+  function renderDb() {
+    renderDbShell();
+    mediaRegistry = [];
+    hideThumb();
+    var view = $('view');
+    if (state.loading) { view.innerHTML = dbSkeleton(); return; }
+    if (state.tab === 'explorer') view.innerHTML = renderExplorer();
+    else if (state.tab === 'data') view.innerHTML = renderData();
+    else if (state.tab === 'drift') view.innerHTML = renderDrift();
+    else view.innerHTML = renderSql();
+  }
+
+  function dbSkeleton() {
+    var col = '<div class="pane card">' + '<div class="skeleton short"></div><div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div></div>';
+    return '<div class="sr-only">Loading database schema…</div><div class="panes" aria-busy="true">' + col + col + '</div>';
+  }
+
+  var DB_ICON = '<svg class="icon empty-icon" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">' +
+    '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/><path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></svg>';
+
+  function emptyState(title, text) {
+    return '<div class="empty card">' + DB_ICON + '<h3>' + esc(title) + '</h3><p>' + esc(text) + '</p>' +
+      '<button class="btn primary" type="button" data-action="open-settings">Connection Settings</button></div>';
+  }
+
+`;