@njeybe/nativ 2.1.0 → 2.3.0

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>';
+  }
+
+`;

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

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

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

@@ -0,0 +1,301 @@
+// Database Studio drift and migration script.
+export const databaseDriftScript = String.raw `  // ─── Database Studio: drift ────────────────────────────────────────────────
+  function riskLevel(d) {
+    var s = d.summary;
+    if (s.hasDestructiveChanges || s.droppedTablesCount > 0) return 'HIGH';
+    if (s.alteredTablesCount > 0) return 'MEDIUM';
+    if (s.addedTablesCount > 0) return 'LOW';
+    return 'NONE';
+  }
+
+  function targetSelect() {
+    return '<div class="toolbar"><label for="diff-target" class="muted">Compare Dev against</label>' +
+      '<select class="input" id="diff-target"><option value="prod"' + (state.diffTarget === 'prod' ? ' selected' : '') + '>Production database</option>' +
+      '<option value="contract"' + (state.diffTarget === 'contract' ? ' selected' : '') + '>.ai/db_schema.json contract</option></select></div>';
+  }
+
+  function colCell(c) {
+    if (!c) return '<span class="muted">—</span>';
+    return esc(c.type) + (c.nullable ? '' : ' NOT NULL') + (c.default != null ? ' <span class="muted">DEFAULT</span> ' + esc(c.default) : '') +
+      (c.primaryKey ? ' <span class="badge badge-pk">PK</span>' : '') + (c.isMedia ? ' <span class="badge badge-media">IMAGE</span>' : '') +
+      (c.isSubcollection ? ' <span class="badge badge-subcol">SUBCOLLECTION</span>' : '');
+  }
+
+  function alteredTableHtml(t) {
+    var targetLabel = state.diffTargetUsed === 'contract' ? 'Contract' : 'Prod';
+    var rows = [];
+    t.addedColumns.forEach(function (c) { rows.push('<tr class="row-added"><td class="mono">' + esc(c.name) + '</td><td><span class="badge badge-added">ADDED</span></td><td class="before mono">' + colCell(null) + '</td><td class="after mono">' + colCell(c) + '</td></tr>'); });
+    t.alteredColumns.forEach(function (ch) { rows.push('<tr class="row-altered"><td class="mono">' + esc(ch.name) + '</td><td><span class="badge badge-altered">' + esc(ch.changedFields.join(', ').toUpperCase()) + '</span></td><td class="before mono">' + colCell(ch.before) + '</td><td class="after mono">' + colCell(ch.after) + '</td></tr>'); });
+    t.droppedColumns.forEach(function (c) { rows.push('<tr class="row-dropped"><td class="mono">' + esc(c.name) + '</td><td><span class="badge badge-dropped">DROPPED</span></td><td class="before mono">' + colCell(c) + '</td><td class="after mono">' + colCell(null) + '</td></tr>'); });
+    var extras = [];
+    t.addedIndexes.forEach(function (i) { extras.push('<span class="chip" style="border-color:var(--success)">+ index ' + esc(i.name) + '</span>'); });
+    t.droppedIndexes.forEach(function (i) { extras.push('<span class="chip" style="border-color:var(--danger)">− index ' + esc(i.name) + '</span>'); });
+    t.addedForeignKeys.forEach(function (f) { extras.push('<span class="chip" style="border-color:var(--success)">+ FK ' + esc(f.column + ' → ' + f.referencedTable + '.' + f.referencedColumn) + '</span>'); });
+    t.droppedForeignKeys.forEach(function (f) { extras.push('<span class="chip" style="border-color:var(--danger)">− FK ' + esc(f.column + ' → ' + f.referencedTable + '.' + f.referencedColumn) + '</span>'); });
+    return '<details class="table-card" open><summary><span class="tname">' + esc(t.name) + '</span><span class="badge badge-altered">ALTERED</span>' +
+      (t.isDestructive ? '<span class="badge badge-dropped">DESTRUCTIVE</span>' : '') + '</summary><div class="table-body">' +
+      (rows.length ? '<table class="cols diff-table"><thead><tr><th scope="col">Column</th><th scope="col">Change</th><th scope="col">' + targetLabel + ' (before)</th><th scope="col">Dev (after)</th></tr></thead><tbody>' + rows.join('') + '</tbody></table>' : '') +
+      (extras.length ? '<div class="subhead">Indexes &amp; constraints</div><div class="chip-list">' + extras.join('') + '</div>' : '') + '</div></details>';
+  }
+
+  function renderDrift() {
+    if (!state.diff) {
+      return targetSelect() + emptyState('Drift unavailable', state.diffError || 'Connect both databases to compute schema drift.');
+    }
+    var d = state.diff, s = d.summary, risk = riskLevel(d);
+    var targetLabel = state.diffTargetUsed === 'contract' ? 'the contract' : 'Prod';
+    var noun = driftNoun(true);
+    var html = targetSelect() + '<div class="summary-banner card" role="region" aria-label="Drift summary">' +
+      '<div class="stat"><div class="n" style="color:var(--success)">' + s.addedTablesCount + '</div><div class="l">Added ' + noun + '</div></div>' +
+      '<div class="stat"><div class="n" style="color:var(--active)">' + s.alteredTablesCount + '</div><div class="l">Altered ' + noun + '</div></div>' +
+      '<div class="stat"><div class="n" style="color:var(--danger)">' + s.droppedTablesCount + '</div><div class="l">Dropped ' + noun + '</div></div>' +
+      '<div class="stat"><div class="n muted">' + s.unchangedTablesCount + '</div><div class="l">Unchanged</div></div>' +
+      '<div class="stat"><div class="n risk-' + risk + '">' + risk + '</div><div class="l">Risk level</div></div></div>';
+
+    if (!s.addedTablesCount && !s.alteredTablesCount && !s.droppedTablesCount) {
+      return html + '<div class="empty card"><h3>In sync</h3><p>Dev matches ' + esc(targetLabel) + '. No drift detected.</p></div>';
+    }
+
+    if (d.addedTables.length) {
+      html += '<section class="section card"><h3><span class="badge badge-added">NEW TABLE</span> Added in Dev (' + d.addedTables.length + ')</h3>' +
+        d.addedTables.map(function (t) { return tableCard(t, 'added'); }).join('') + '</section>';
+    }
+    if (d.alteredTables.length) {
+      html += '<section class="section card"><h3><span class="badge badge-altered">ALTERED</span> Altered ' + noun + ' (' + d.alteredTables.length + ')</h3>' +
+        d.alteredTables.map(alteredTableHtml).join('') + '</section>';
+    }
+    if (d.droppedTables.length) {
+      html += '<section class="section card"><h3><span class="badge badge-dropped">DROPPED</span> Dropped in Dev (' + d.droppedTables.length + ')</h3>' +
+        '<div class="alert-danger" role="alert"><strong>High severity:</strong> these ' + noun + ' exist in ' + esc(targetLabel) +
+        ' but not in Dev. Applying this migration would permanently delete them and all their data.</div>' +
+        d.droppedTables.map(function (t) { return tableCard(t, 'dropped'); }).join('') + '</section>';
+    }
+    return html;
+  }
+
+  // ─── Migration script (SQL DDL / MongoDB shell / Firestore index JSON) ─────
+  function sqlDialect() {
+    var st = state.status || {};
+    if (state.diffTargetUsed === 'prod' && st.prod && st.prod.connected) return st.prod.engine;
+    return (st.dev && st.dev.engine) || 'postgresql';
+  }
+
+  function generateScript(d) {
+    var dialect = sqlDialect();
+    if (dialect === 'mongodb') { var js = generateMongo(d); return { text: js, lang: 'js', count: countStatements(js, 'js') }; }
+    if (dialect === 'firestore') return generateFirestore(d);
+    var sql = generateSql(d);
+    return { text: sql, lang: 'sql', count: countStatements(sql, 'sql') };
+  }
+
+  function generateMongo(d) {
+    var target = state.diffTargetUsed === 'contract' ? '.ai/db_schema.json' : 'Prod';
+    var coll = function (name) { return 'db.getCollection(' + JSON.stringify(name) + ')'; };
+    var keySpec = function (i) {
+      return '{ ' + i.columns.map(function (c) { return JSON.stringify(c) + ': 1'; }).join(', ') + ' }';
+    };
+    var createIdx = function (t, i) {
+      return coll(t) + '.createIndex(' + keySpec(i) + ', { name: ' + JSON.stringify(i.name) + (i.unique ? ', unique: true' : '') + ' });';
+    };
+    var out = [
+      '// Nativ migration preview: Dev → ' + target + ' (MongoDB shell)',
+      '// Generated from structural metadata only. Review carefully; nothing is executed automatically.',
+      ''
+    ];
+
+    d.addedTables.forEach(function (t) {
+      out.push('// [NEW COLLECTION] ' + t.name);
+      out.push('db.createCollection(' + JSON.stringify(t.name) + ');');
+      (t.indexes || []).forEach(function (i) { out.push(createIdx(t.name, i)); });
+      out.push('');
+    });
+
+    d.alteredTables.forEach(function (t) {
+      out.push('// [ALTERED] ' + t.name + (t.isDestructive ? '  [DESTRUCTIVE]' : ''));
+      t.droppedIndexes.forEach(function (i) { out.push(coll(t.name) + '.dropIndex(' + JSON.stringify(i.name) + ');'); });
+      t.addedColumns.forEach(function (c) {
+        if (c.isSubcollection) { out.push('// + subcollection ' + JSON.stringify(c.name) + ' (Firestore-only concept; model as a separate collection or embedded array in MongoDB)'); return; }
+        out.push('// + field ' + JSON.stringify(c.name) + ' (' + c.type + '): schemaless, no DDL needed. Optional backfill:');
+        out.push('// ' + coll(t.name) + '.updateMany({ ' + JSON.stringify(c.name) + ': { $exists: false } }, { $set: { ' + JSON.stringify(c.name) + ': null } });');
+      });
+      t.alteredColumns.forEach(function (ch) {
+        out.push('// ~ field ' + JSON.stringify(ch.name) + ': ' + ch.before.type + ' → ' + ch.after.type + ' (' + ch.changedFields.join(', ') + '); convert existing values with a data migration.');
+      });
+      t.droppedColumns.forEach(function (c) {
+        out.push('// [DESTRUCTIVE] removes field data from every document');
+        out.push(coll(t.name) + '.updateMany({}, { $unset: { ' + JSON.stringify(c.name) + ': "" } });');
+      });
+      t.addedIndexes.forEach(function (i) { out.push(createIdx(t.name, i)); });
+      out.push('');
+    });
+
+    d.droppedTables.forEach(function (t) {
+      out.push('// [DESTRUCTIVE: DROPPED] ' + t.name + ': permanently deletes the collection and all documents');
+      out.push(coll(t.name) + '.drop();');
+      out.push('');
+    });
+
+    if (!d.addedTables.length && !d.alteredTables.length && !d.droppedTables.length) out.push('// No schema drift. Nothing to migrate.');
+    return out.join('\n').replace(/\n+$/, '\n');
+  }
+
+  /** Firestore: deployable index definitions (firestore.indexes.json shape) plus a list of data-migration steps. */
+  function generateFirestore(d) {
+    var target = state.diffTargetUsed === 'contract' ? '.ai/db_schema.json' : 'Prod';
+    var indexes = [], fieldOverrides = [], steps = [], warnings = [];
+    var addIndex = function (collection, i) {
+      if (i.unique) warnings.push('Firestore has no unique indexes: enforce uniqueness of ' + collection + '.' + i.columns.join('+') + ' (' + i.name + ') in application code or security rules.');
+      if (i.columns.length > 1) {
+        indexes.push({ collectionGroup: collection, queryScope: 'COLLECTION', fields: i.columns.map(function (f) { return { fieldPath: f, order: 'ASCENDING' }; }) });
+      } else if (i.columns.length === 1) {
+        fieldOverrides.push({ collectionGroup: collection, fieldPath: i.columns[0], indexes: [{ order: 'ASCENDING', queryScope: 'COLLECTION' }] });
+      }
+    };
+
+    d.addedTables.forEach(function (t) {
+      steps.push({ op: 'createCollection', collection: t.name, note: 'Collections are created implicitly by the first document write.' });
+      (t.indexes || []).forEach(function (i) { addIndex(t.name, i); });
+    });
+    d.alteredTables.forEach(function (t) {
+      t.addedColumns.forEach(function (c) {
+        steps.push(c.isSubcollection
+          ? { op: 'addSubcollection', collection: t.name, subcollection: c.name }
+          : { op: 'addField', collection: t.name, field: c.name, type: c.type });
+      });
+      t.alteredColumns.forEach(function (ch) { steps.push({ op: 'changeField', collection: t.name, field: ch.name, from: ch.before.type, to: ch.after.type, changed: ch.changedFields }); });
+      t.droppedColumns.forEach(function (c) { steps.push({ op: 'deleteField', collection: t.name, field: c.name, destructive: true }); });
+      t.addedIndexes.forEach(function (i) { addIndex(t.name, i); });
+      t.droppedIndexes.forEach(function (i) { steps.push({ op: 'removeIndex', collection: t.name, index: i.name, fields: i.columns }); });
+    });
+    d.droppedTables.forEach(function (t) {
+      steps.push({ op: 'deleteCollection', collection: t.name, destructive: true, note: 'Permanently deletes every document (e.g. firebase firestore:delete --recursive).' });
+    });
+
+    var doc = {
+      _nativ: 'Preview Dev → ' + target + ' (Firestore). Nothing runs automatically.',
+      _deploy: 'indexes + fieldOverrides: firebase deploy --only firestore:indexes; dataMigrations: apply with a script',
+      indexes: indexes,
+      fieldOverrides: fieldOverrides,
+      dataMigrations: steps
+    };
+    if (warnings.length) doc.warnings = warnings;
+    return { text: JSON.stringify(doc, null, 2) + '\n', lang: 'json', count: indexes.length + fieldOverrides.length + steps.length };
+  }
+
+  function generateSql(d) {
+    var dialect = sqlDialect();
+    var BT = String.fromCharCode(96);
+    var q = function (name) {
+      return dialect === 'mysql' ? BT + String(name).split(BT).join(BT + BT) + BT : '"' + String(name).split('"').join('""') + '"';
+    };
+    var colDef = function (c) { return q(c.name) + ' ' + c.type + (c.nullable ? '' : ' NOT NULL') + (c.default != null ? ' DEFAULT ' + c.default : ''); };
+    var fkDef = function (f) { return 'CONSTRAINT ' + q(f.name) + ' FOREIGN KEY (' + q(f.column) + ') REFERENCES ' + q(f.referencedTable) + ' (' + q(f.referencedColumn) + ')' + (f.onDelete ? ' ON DELETE ' + f.onDelete : ''); };
+    var idxDef = function (t, i) { return 'CREATE ' + (i.unique ? 'UNIQUE ' : '') + 'INDEX ' + q(i.name) + ' ON ' + q(t) + ' (' + i.columns.map(q).join(', ') + ');'; };
+    var dropIdx = function (t, i) { return dialect === 'mysql' ? 'DROP INDEX ' + q(i.name) + ' ON ' + q(t) + ';' : 'DROP INDEX ' + q(i.name) + ';'; };
+    var target = state.diffTargetUsed === 'contract' ? '.ai/db_schema.json' : 'Prod';
+    var out = [
+      '-- Nativ migration preview: Dev → ' + target + ' (' + (ENGINE_LABEL[dialect] || dialect) + ' dialect)',
+      '-- Generated from structural metadata only. Review carefully; nothing is executed automatically.',
+      ''
+    ];
+
+    d.addedTables.forEach(function (t) {
+      var lines = t.columns.map(function (c) { return '  ' + colDef(c); });
+      var pks = t.columns.filter(function (c) { return c.primaryKey; }).map(function (c) { return q(c.name); });
+      if (pks.length) lines.push('  PRIMARY KEY (' + pks.join(', ') + ')');
+      (t.foreignKeys || []).forEach(function (f) { lines.push('  ' + fkDef(f)); });
+      out.push('-- [NEW TABLE] ' + t.name);
+      out.push('CREATE TABLE ' + q(t.name) + ' (\n' + lines.join(',\n') + '\n);');
+      (t.indexes || []).forEach(function (i) { out.push(idxDef(t.name, i)); });
+      out.push('');
+    });
+
+    d.alteredTables.forEach(function (t) {
+      var T = 'ALTER TABLE ' + q(t.name) + ' ';
+      out.push('-- [ALTERED] ' + t.name + (t.isDestructive ? '  [DESTRUCTIVE]' : ''));
+      t.droppedForeignKeys.forEach(function (f) {
+        if (dialect === 'sqlite') out.push('-- SQLite cannot drop constraints in place; rebuild ' + t.name + ' to remove FK ' + f.name);
+        else out.push(T + (dialect === 'mysql' ? 'DROP FOREIGN KEY ' : 'DROP CONSTRAINT ') + q(f.name) + ';');
+      });
+      t.droppedIndexes.forEach(function (i) { out.push(dropIdx(t.name, i)); });
+      t.addedColumns.forEach(function (c) { out.push(T + 'ADD COLUMN ' + colDef(c) + ';'); });
+      t.alteredColumns.forEach(function (ch) {
+        var c = ch.after, f = ch.changedFields;
+        if (dialect === 'mysql') { out.push(T + 'MODIFY COLUMN ' + colDef(c) + ';'); return; }
+        if (dialect === 'sqlite') { out.push('-- SQLite cannot ALTER COLUMN ' + t.name + '.' + c.name + ' (' + f.join(', ') + '); a table rebuild is required.'); return; }
+        if (f.indexOf('type') !== -1) out.push(T + 'ALTER COLUMN ' + q(c.name) + ' TYPE ' + c.type + ' USING ' + q(c.name) + '::' + c.type + ';');
+        if (f.indexOf('nullable') !== -1) out.push(T + 'ALTER COLUMN ' + q(c.name) + (c.nullable ? ' DROP NOT NULL;' : ' SET NOT NULL;'));
+        if (f.indexOf('default') !== -1) out.push(T + 'ALTER COLUMN ' + q(c.name) + (c.default == null ? ' DROP DEFAULT;' : ' SET DEFAULT ' + c.default + ';'));
+        if (f.indexOf('primaryKey') !== -1) out.push('-- Primary key membership changed for ' + t.name + '.' + c.name + '; recreate the PRIMARY KEY constraint manually.');
+      });
+      t.droppedColumns.forEach(function (c) { out.push('-- [DESTRUCTIVE] drops column data'); out.push(T + 'DROP COLUMN ' + q(c.name) + ';'); });
+      t.addedIndexes.forEach(function (i) { out.push(idxDef(t.name, i)); });
+      t.addedForeignKeys.forEach(function (f) {
+        if (dialect === 'sqlite') out.push('-- SQLite cannot add constraints in place; rebuild ' + t.name + ' to add FK ' + f.column + ' → ' + f.referencedTable);
+        else out.push(T + 'ADD ' + fkDef(f) + ';');
+      });
+      out.push('');
+    });
+
+    d.droppedTables.forEach(function (t) {
+      out.push('-- [DESTRUCTIVE: DROPPED] ' + t.name + ': permanently deletes the table and all rows');
+      out.push('DROP TABLE ' + q(t.name) + ';');
+      out.push('');
+    });
+
+    if (!d.addedTables.length && !d.alteredTables.length && !d.droppedTables.length) out.push('-- No schema drift. Nothing to migrate.');
+    return out.join('\n').replace(/\n+$/, '\n');
+  }
+
+  function countStatements(text, lang) {
+    if (!text) return 0;
+    var comment = lang === 'js' ? /^\s*\/\// : /^\s*--/;
+    return text.split('\n').filter(function (l) { return /;\s*$/.test(l) && !comment.test(l); }).length;
+  }
+
+  var JS_TOKEN = /(\/\/[^\n]*)|("(?:[^"\\\n]|\\.)*")|\b(db|getCollection|createCollection|createIndex|dropIndex|updateMany|drop|true|false|null)\b|(\$[A-Za-z]+)/g;
+  var JSON_TOKEN = /("(?:[^"\\\n]|\\.)*")(\s*:)?|\b(true|false|null)\b|(-?\d+(?:\.\d+)?)/g;
+
+  function highlightScript(text, lang) {
+    if (lang === 'sql') return highlightSql(text);
+    var html = esc(text).replace(/&quot;/g, '"').replace(/&#39;/g, "'");
+    if (lang === 'js') {
+      return html.replace(JS_TOKEN, function (m, comment, str, kw, op) {
+        if (comment) return '<span class="' + (/DESTRUCTIVE/.test(comment) ? 'd' : 'c') + '">' + comment + '</span>';
+        if (str) return '<span class="s">' + str + '</span>';
+        if (kw) return '<span class="k">' + kw + '</span>';
+        return '<span class="o">' + op + '</span>';
+      });
+    }
+    return html.replace(JSON_TOKEN, function (m, str, colon, lit, num) {
+      if (str) return colon ? '<span class="p">' + str + '</span>' + colon : '<span class="' + (/deleteField|deleteCollection/.test(str) ? 'd' : 's') + '">' + str + '</span>';
+      if (lit) return '<span class="' + (lit === 'true' ? 'n' : 'k') + '">' + lit + '</span>';
+      return '<span class="n">' + num + '</span>';
+    });
+  }
+
+  var LANG_LABEL = { sql: 'SQL DDL', js: 'MongoDB Shell', json: 'Firestore Index JSON' };
+
+  var SQL_TOKEN = /(--[^\n]*)|('(?:[^']|'')*')|\b(CREATE|TABLE|ALTER|ADD|DROP|COLUMN|CONSTRAINT|PRIMARY|FOREIGN|KEY|REFERENCES|ON|DELETE|INDEX|UNIQUE|NOT|NULL|DEFAULT|SET|TYPE|USING|MODIFY|CASCADE|RESTRICT|NO|ACTION)\b/g;
+
+  function highlightSql(sql) {
+    return esc(sql).replace(/&#39;/g, "'").replace(SQL_TOKEN, function (m, comment, str, kw) {
+      if (comment) return '<span class="' + (/DESTRUCTIVE/.test(comment) ? 'd' : 'c') + '">' + comment + '</span>';
+      if (str) return '<span class="s">' + str + '</span>';
+      return '<span class="k">' + kw + '</span>';
+    });
+  }
+
+  function renderSql() {
+    if (!state.diff) return emptyState('No migration to preview', state.diffError || 'Connect Dev and Prod to generate a migration script.');
+    var destructive = state.diff.summary.hasDestructiveChanges;
+    var lang = state.scriptLang;
+    var unit = lang === 'json' ? ' change(s)' : ' statement(s)';
+    return '<div class="sql-wrap card"><div class="sql-head"><span class="muted"><span class="lang">' + LANG_LABEL[lang] + '</span>' +
+      (destructive ? '<span class="badge badge-dropped">DESTRUCTIVE</span> ' : '') + state.scriptCount + unit + ' · read-only preview</span>' +
+      '<span class="copy-wrap"><span class="tooltip">Copied!</span><button class="btn small" type="button" data-action="copy-sql">Copy ' +
+      (lang === 'sql' ? 'SQL' : lang === 'js' ? 'Script' : 'JSON') + '</button></span></div>' +
+      '<pre class="sql" tabindex="0" aria-label="Migration script (' + LANG_LABEL[lang] + ')"><code>' + highlightScript(state.sql, lang) + '</code></pre></div>';
+  }
+
+`;

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

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