@njeybe/nativ 2.2.0 → 2.3.0

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

@@ -0,0 +1,231 @@
+// Database Studio event wiring.
+export const databaseEventsScript = String.raw `  // ─── Events: Database Studio ───────────────────────────────────────────────
+  function setDbTab(tab, focus) {
+    state.tab = tab;
+    renderDb();
+    if (focus) $('tab-' + tab).focus();
+    if (tab === 'data' && (!state.dataResult || state.dataResult.entity !== state.dataEntity)) {
+      fetchDataRecords();
+    }
+  }
+
+  document.querySelectorAll('.subtab').forEach(function (t) {
+    t.addEventListener('click', function () { setDbTab(t.getAttribute('data-tab')); });
+    t.addEventListener('keydown', function (e) {
+      var order = ['explorer', 'data', 'drift', 'sql'];
+      var i = order.indexOf(state.tab);
+      if (e.key === 'ArrowRight') { e.preventDefault(); setDbTab(order[(i + 1) % 4], true); }
+      else if (e.key === 'ArrowLeft') { e.preventDefault(); setDbTab(order[(i + 3) % 4], true); }
+      else if (e.key === 'Home') { e.preventDefault(); setDbTab('explorer', true); }
+      else if (e.key === 'End') { e.preventDefault(); setDbTab('sql', true); }
+    });
+  });
+
+  document.querySelectorAll('.env-seg-btn').forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      var mode = btn.getAttribute('data-env-mode');
+      if (mode) {
+        state.envMode = mode;
+        if (mode === 'prod') state.dataEnv = 'prod';
+        else if (mode === 'dev') state.dataEnv = 'dev';
+        state.dataResult = null;
+        renderDb();
+        if (state.tab === 'data') fetchDataRecords();
+      }
+    });
+  });
+
+  $('btn-settings').addEventListener('click', openSettings);
+  $('btn-export').addEventListener('click', function () {
+    var btn = $('btn-export');
+    var st = state.status || {};
+    var sourceEnv = st.dev && st.dev.connected ? 'dev' : (st.prod && st.prod.connected ? 'prod' : 'dev');
+    if (!window.confirm('Export the ' + sourceEnv.toUpperCase() + ' schema (structure only, no credentials or data) to .ai/db_schema.json?\nThis overwrites the tables in the current contract.')) return;
+    btn.disabled = true;
+    postJson('/api/export-contract', { sourceEnv: sourceEnv }).then(function (r) {
+      var n = r.exportedEntitiesCount != null ? r.exportedEntitiesCount : r.exportedTablesCount;
+      toast('Exported ' + n + ' ' + entityNoun(st[sourceEnv], true).toLowerCase() + ' to ' + r.filePath, 'ok');
+      if (state.diffTarget === 'contract') load(true);
+    }, function (e) { toast('Export failed: ' + e.message); }).then(function () { btn.disabled = false; });
+  });
+
+  $('view').addEventListener('input', function (e) {
+    if (e.target && e.target.id === 'search') {
+      state.search = e.target.value;
+      var pos = e.target.selectionStart;
+      renderDb();
+      var s = $('search');
+      if (s) { s.focus(); try { s.setSelectionRange(pos, pos); } catch (err) { /* ignore */ } }
+    }
+    if (e.target && e.target.id === 'data-search') {
+      state.dataSearch = e.target.value;
+      clearTimeout(state._dataSearchTimeout);
+      state._dataSearchTimeout = setTimeout(function () {
+        state.dataPage = 1;
+        fetchDataRecords();
+      }, 350);
+    }
+  });
+
+  $('view').addEventListener('change', function (e) {
+    if (e.target && e.target.id === 'diff-target') { state.diffTarget = e.target.value; load(false); }
+    if (e.target && e.target.id === 'data-entity-select') {
+      state.dataEntity = e.target.value;
+      state.dataPage = 1;
+      state.dataSort = '';
+      state.dataSearch = '';
+      state.dataResult = null;
+      fetchDataRecords();
+    }
+    if (e.target && e.target.id === 'data-limit-select') {
+      state.dataLimit = Number(e.target.value);
+      state.dataPage = 1;
+      fetchDataRecords();
+    }
+  });
+
+  $('view').addEventListener('mouseover', function (e) {
+    var el = e.target.closest && e.target.closest('[data-media]');
+    if (el) showThumb(el);
+  });
+  $('view').addEventListener('mouseout', function (e) {
+    var el = e.target.closest && e.target.closest('[data-media]');
+    if (el && !el.contains(e.relatedTarget)) hideThumb();
+  });
+  $('view').addEventListener('focusin', function (e) {
+    if (e.target.hasAttribute && e.target.hasAttribute('data-media')) showThumb(e.target);
+  });
+  $('view').addEventListener('focusout', hideThumb);
+  window.addEventListener('scroll', hideThumb, { passive: true });
+
+  $('view').addEventListener('click', function (e) {
+    var sortTh = e.target.closest('th.sortable');
+    if (sortTh) {
+      var col = sortTh.getAttribute('data-sort-col');
+      if (col) {
+        if (state.dataSort === col) {
+          state.dataOrder = state.dataOrder === 'asc' ? 'desc' : 'asc';
+        } else {
+          state.dataSort = col;
+          state.dataOrder = 'asc';
+        }
+        fetchDataRecords();
+        return;
+      }
+    }
+
+    var el = e.target.closest('button');
+    if (!el) return;
+    if (el.hasAttribute('data-media')) {
+      // Keep the <details> card from toggling when the badge sits in a summary row.
+      e.preventDefault();
+      openMedia(Number(el.getAttribute('data-media')));
+      return;
+    }
+    var action = el.getAttribute('data-action');
+    if (action === 'open-settings') openSettings();
+    else if (action === 'copy-sql') copyText(state.sql, el);
+    else if (action === 'edit-record') openEditRecordModal(Number(el.getAttribute('data-row')));
+    else if (action === 'delete-record') handleDeleteRecord(Number(el.getAttribute('data-row')));
+    else if (action === 'preview-url') {
+      var url = el.getAttribute('data-url');
+      $('media-title').textContent = 'Image Preview';
+      $('media-sub').textContent = url;
+      $('media-thumb').innerHTML = '<img src="' + esc(url) + '" style="max-width:100%;max-height:300px">';
+      $('media-details').innerHTML = '<dt>Source URL</dt><dd><code>' + esc(url) + '</code></dd>';
+      openDialog($('media-dialog'));
+    }
+    else if (action === 'view-json') {
+      var raw = el.getAttribute('data-raw');
+      toast(raw);
+    }
+
+    if (el.id === 'btn-insert-record') openInsertRecordModal();
+    else if (el.id === 'btn-data-refresh') fetchDataRecords();
+    else if (el.id === 'btn-page-prev') {
+      state.dataPage = Math.max(1, state.dataPage - 1);
+      fetchDataRecords();
+    }
+    else if (el.id === 'btn-page-next') {
+      state.dataPage++;
+      fetchDataRecords();
+    }
+
+    var envToggle = el.getAttribute('data-env-toggle');
+    if (envToggle) { state.mobileEnv = envToggle; renderDb(); }
+  });
+
+  $('btn-save-record').addEventListener('click', handleSaveRecordSubmit);
+
+  $('challenge-input').addEventListener('input', function (e) {
+    var val = e.target.value.trim();
+    var entity = state.pendingMutation ? state.pendingMutation.entity : '';
+    $('btn-confirm-challenge').disabled = (val !== entity);
+  });
+
+  $('btn-confirm-challenge').addEventListener('click', function () {
+    if (!state.pendingMutation) return;
+    var m = state.pendingMutation;
+    var inputVal = $('challenge-input').value.trim();
+    if (inputVal !== m.entity) return;
+    executeMutationDirect(m.action, m.entity, m.pk, m.payload, true, inputVal);
+  });
+
+  $('conn-form').addEventListener('click', function (e) {
+    var el = e.target.closest('button');
+    if (!el) return;
+    var toggle = el.getAttribute('data-toggle');
+    if (toggle) {
+      var input = $('url-' + toggle);
+      var show = input.type === 'password';
+      input.type = show ? 'text' : 'password';
+      el.textContent = show ? 'Hide' : 'Show';
+      el.setAttribute('aria-pressed', String(show));
+    }
+    var pingEnv = el.getAttribute('data-ping');
+    if (pingEnv) {
+      el.disabled = true;
+      ping(pingEnv).then(function (ok) { el.disabled = false; if (ok) load(false).then(renderModalStatus); });
+    }
+    var copyEnv = el.getAttribute('data-copy-masked');
+    if (copyEnv && state.status && state.status[copyEnv]) copyText(state.status[copyEnv].maskedUrl, el);
+  });
+
+  ['dev', 'prod'].forEach(function (env) {
+    $('engine-' + env).addEventListener('change', function () { setEngineMode(env); });
+    $('pengine-' + env).addEventListener('change', function () {
+      var port = $('pport-' + env);
+      // Swap the port only when it still holds the other engine's default.
+      if (!port.value.trim() || port.value.trim() === DEFAULT_PORT.mysql || port.value.trim() === DEFAULT_PORT.postgresql) {
+        port.value = DEFAULT_PORT[$('pengine-' + env).value];
+      }
+    });
+    document.querySelector('[data-xampp="' + env + '"]').addEventListener('click', function () { applyXamppDefaults(env); });
+  });
+
+  $('btn-save-conn').addEventListener('click', function () {
+    var envs = ['dev', 'prod'].filter(hasInput);
+    if (!envs.length) { $('conn-dialog').close(); return; }
+    var btn = $('btn-save-conn');
+    btn.disabled = true;
+    Promise.all(envs.map(ping)).then(function (results) {
+      btn.disabled = false;
+      load(false).then(renderModalStatus);
+      if (results.every(Boolean)) { $('conn-dialog').close(); toast('Connections saved to in-memory session', 'ok'); }
+    });
+  });
+
+  // Clear any typed secrets whenever the modal closes.
+  $('conn-dialog').addEventListener('close', function () {
+    ['dev', 'prod'].forEach(function (env) {
+      var input = $('url-' + env);
+      input.value = ''; input.type = 'password';
+      $('fsproject-' + env).value = '';
+      $('fsemu-' + env).value = '';
+      PARAM_FIELDS.forEach(function (f) { $(f + '-' + env).value = ''; });
+      var t = document.querySelector('[data-toggle="' + env + '"]');
+      if (t) { t.textContent = 'Show'; t.setAttribute('aria-pressed', 'false'); }
+    });
+  });
+
+`;

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

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

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

@@ -0,0 +1,183 @@
+// Database Studio explorer and media preview.
+export const databaseExplorerScript = String.raw `  // ─── Database Studio: explorer ─────────────────────────────────────────────
+  function diffBadges() {
+    var map = { dev: {}, prod: {} };
+    var d = state.diff;
+    if (!d) return map;
+    var lower = function (n) { return String(n).toLowerCase(); };
+    d.addedTables.forEach(function (t) { map.dev[lower(t.name)] = 'added'; });
+    d.alteredTables.forEach(function (t) { map.dev[lower(t.name)] = 'altered'; if (state.diffTargetUsed === 'prod') map.prod[lower(t.name)] = 'altered'; });
+    if (state.diffTargetUsed === 'prod') d.droppedTables.forEach(function (t) { map.prod[lower(t.name)] = 'dropped'; });
+    return map;
+  }
+
+  var BADGE_TEXT = { added: 'NEW TABLE', altered: 'ALTERED', dropped: 'DROPPED' };
+
+  /** IMAGE badge: hover shows a thumbnail tooltip, click opens the media modal. */
+  function mediaBadge(t, c) {
+    if (!c.isMedia) return '';
+    var i = mediaRegistry.push({ table: t.name, field: c.name, type: c.type, media: c.media || null }) - 1;
+    return '<button type="button" class="badge badge-media" data-media="' + i + '" aria-label="Preview image field ' + esc(c.name) + '">IMAGE</button>';
+  }
+
+  function tableCard(t, badge) {
+    var coll = isCollection(t);
+    var fkCols = {};
+    (t.foreignKeys || []).forEach(function (fk) { fkCols[String(fk.column).toLowerCase()] = fk; });
+    var rows = t.columns.map(function (c) {
+      var fk = fkCols[String(c.name).toLowerCase()];
+      var tags = (c.primaryKey ? '<span class="badge badge-pk">PK</span> ' : '') +
+        (fk ? '<span class="badge badge-fk" title="→ ' + esc(fk.referencedTable + '.' + fk.referencedColumn) + '">FK</span> ' : '') +
+        (c.isSubcollection ? '<span class="badge badge-subcol">SUBCOLLECTION</span> ' : '') +
+        mediaBadge(t, c);
+      var typeCell = esc(c.type) + (c.observedTypes ? ' <span class="muted">(' + esc(c.observedTypes.join(' | ')) + ')</span>' : '');
+      var lastCell = coll
+        ? (c.presence != null ? Math.round(c.presence * 100) + '%' : '<span class="muted">–</span>')
+        : (c.default == null ? '<span class="muted">NULL</span>' : esc(c.default));
+      return '<tr><td>' + (tags || '<span class="muted">–</span>') + '</td><td class="mono">' + esc(c.name) +
+        (fk ? ' <span class="muted">→ ' + esc(fk.referencedTable + '.' + fk.referencedColumn) + '</span>' : '') + '</td><td class="mono">' + typeCell +
+        '</td><td>' + (c.nullable ? 'YES' : '<b>NO</b>') + '</td><td class="mono">' + lastCell + '</td></tr>';
+    }).join('');
+    var idx = (t.indexes || []).length
+      ? '<div class="subhead">Indexes</div><ul class="idx-list">' + t.indexes.map(function (i) {
+          return '<li><code>' + esc(i.name) + '</code> (' + esc(i.columns.join(', ')) + ')' + (i.unique ? ' <span class="muted">unique</span>' : '') + '</li>';
+        }).join('') + '</ul>'
+      : '';
+    var docMeta = coll && (t.documentCount != null || t.sampledDocuments != null)
+      ? '<p class="desc">' + (t.documentCount != null ? '~' + t.documentCount + ' documents' : 'Document count unavailable') +
+        (t.sampledDocuments != null ? ' · fields inferred from ' + t.sampledDocuments + ' sampled' : '') + '</p>'
+      : '';
+    return '<details class="table-card"><summary><span class="tname">' + esc(t.name) + '</span>' +
+      (coll ? '<span class="badge badge-collection">COLLECTION</span>' : '') +
+      (badge ? '<span class="badge badge-' + badge + '">' + BADGE_TEXT[badge] + '</span>' : '') +
+      '<span class="ccount">' + t.columns.length + (coll ? ' fields' : ' cols') + '</span></summary><div class="table-body">' +
+      (t.description ? '<p class="desc">' + esc(t.description) + '</p>' : '') + docMeta +
+      '<table class="cols"><thead><tr><th scope="col">Key</th><th scope="col">' + (coll ? 'Field' : 'Name') + '</th><th scope="col">Type</th><th scope="col">Nullable</th><th scope="col">' +
+      (coll ? 'Presence' : 'Default') + '</th></tr></thead><tbody>' +
+      rows + '</tbody></table>' + idx + '</div></details>';
+  }
+
+  // ─── Database Studio: media preview ────────────────────────────────────────
+  var SOURCE_LABEL = { url: 'Image URL', gcs: 'Cloud Storage URI', base64: 'Base64 string', bytes: 'Binary (Bytes)' };
+
+  function thumbHtml(m) {
+    if (m && isPreviewableUrl(m.sampleUrl)) {
+      return '<img src="' + esc(m.sampleUrl) + '" alt="" loading="lazy" referrerpolicy="no-referrer" data-thumb>';
+    }
+    var why = !m ? 'No sample available'
+      : m.source === 'gcs' ? 'gs:// URIs need a signed URL to preview'
+      : (m.source === 'bytes' || m.source === 'base64') ? 'Binary preview withheld (metadata only)'
+      : 'No preview available';
+    return '<div class="ph">' + esc(why) + '</div>';
+  }
+
+  // Swap broken thumbnails (auth-protected URLs or blocked by the page's content policy) for a note.
+  document.addEventListener('error', function (e) {
+    var img = e.target;
+    if (img && img.tagName === 'IMG' && img.hasAttribute('data-thumb')) {
+      var ph = document.createElement('div');
+      ph.className = 'ph';
+      ph.textContent = 'Preview unavailable (URL needs auth, was redacted, or is blocked by the studio content policy)';
+      img.replaceWith(ph);
+    }
+  }, true);
+
+  function mediaSummary(m) {
+    if (!m) return '';
+    var parts = [m.mimeType || 'unknown type'];
+    if (m.width && m.height) parts.push(m.width + '×' + m.height);
+    if (m.sizeBytes != null) parts.push(formatBytes(m.sizeBytes));
+    return parts.join(' · ');
+  }
+
+  function showThumb(el) {
+    var entry = mediaRegistry[Number(el.getAttribute('data-media'))];
+    if (!entry) return;
+    var pop = $('thumb-pop');
+    pop.innerHTML = '<div class="thumb-box">' + thumbHtml(entry.media) + '</div><div class="thumb-meta"><b>' + esc(entry.table + '.' + entry.field) +
+      '</b><br>' + esc(mediaSummary(entry.media)) + '</div>';
+    pop.hidden = false;
+    // Place beside the badge so the field names in the row stay readable; flip left near the edge.
+    var r = el.getBoundingClientRect();
+    var w = pop.offsetWidth, h = pop.offsetHeight;
+    var left = r.right + 12 + w > window.innerWidth ? r.left - w - 12 : r.right + 12;
+    var top = Math.min(r.top + r.height / 2 - h / 2, window.innerHeight - h - 8);
+    pop.style.left = Math.max(8, left) + 'px';
+    pop.style.top = Math.max(8, top) + 'px';
+  }
+
+  function hideThumb() {
+    var pop = $('thumb-pop');
+    if (pop) { pop.hidden = true; pop.innerHTML = ''; }
+  }
+
+  function openMedia(index) {
+    var entry = mediaRegistry[index];
+    if (!entry) return;
+    hideThumb();
+    var m = entry.media;
+    $('media-title').textContent = entry.table + '.' + entry.field;
+    $('media-sub').textContent = (m ? SOURCE_LABEL[m.source] || m.source : 'Image field') + ' · ' + entry.type;
+    $('media-thumb').innerHTML = thumbHtml(m);
+    var rows = [];
+    if (m) {
+      if (m.sampleUrl) rows.push(['Sample ' + (m.source === 'gcs' ? 'URI' : 'URL'), '<code>' + esc(m.sampleUrl) + '</code>']);
+      rows.push(['MIME type', esc(m.mimeType || 'unknown')]);
+      rows.push(['Size', esc(m.sizeBytes != null ? formatBytes(m.sizeBytes) : 'unknown')]);
+      rows.push(['Dimensions', esc(m.width && m.height ? m.width + ' × ' + m.height + ' px' : 'unknown')]);
+      // Base64 is truncated to a short prefix server-side; render it as plain text only.
+      if (m.base64Head) rows.push(['Base64 (truncated)', '<code>' + esc(m.base64Head) + '</code>']);
+    }
+    $('media-details').innerHTML = rows.map(function (r) { return '<dt>' + esc(r[0]) + '</dt><dd>' + r[1] + '</dd>'; }).join('');
+    openDialog($('media-dialog'));
+  }
+
+  function paneHtml(env, tables, badges) {
+    var s = state.status && state.status[env];
+    var title = env === 'dev' ? 'Dev / Staging' : 'Production';
+    var q = state.search.trim().toLowerCase();
+    var filtered = tables.filter(function (t) {
+      if (!q) return true;
+      if (t.name.toLowerCase().indexOf(q) !== -1) return true;
+      return t.columns.some(function (c) { return c.name.toLowerCase().indexOf(q) !== -1; });
+    });
+    var body;
+    if (!s || !s.connected) {
+      body = '<div class="empty" style="padding:28px 12px"><p>' + esc(s && s.error ? s.error : 'No database connected.') + '</p>' +
+        '<button class="btn small" type="button" data-action="open-settings">Connect</button></div>';
+    } else if (!tables.length) {
+      body = '<p class="muted">Connected, but this database has no ' + entityNoun(s, true).toLowerCase() + ' yet.</p>';
+    } else if (!filtered.length) {
+      body = '<p class="muted">No ' + entityNoun(s, true).toLowerCase() + ' or fields match “' + esc(state.search) + '”.</p>';
+    } else {
+      body = filtered.map(function (t) { return tableCard(t, badges[t.name.toLowerCase()]); }).join('');
+    }
+    return '<section class="pane card" aria-labelledby="pane-' + env + '">' +
+      '<div class="pane-head"><h2 id="pane-' + env + '"><span class="dot ' + (s && s.connected ? 'on' : 'off') + '"></span>' + title + '</h2>' +
+      '<span class="meta">' + (s && s.connected ? esc(s.maskedUrl) : '') + '</span></div>' + body + '</section>';
+  }
+
+  function renderExplorer() {
+    var st = state.status || {};
+    if (!(st.dev && st.dev.connected) && !(st.prod && st.prod.connected)) {
+      return emptyState('No database connected', 'No database connected. Click Connection Settings to connect a local or remote database.');
+    }
+    var badges = diffBadges();
+    var panesHtml = '';
+    if (state.envMode === 'dev') {
+      panesHtml = '<div class="panes panes-full">' + paneHtml('dev', state.schema.devTables || [], badges.dev) + '</div>';
+    } else if (state.envMode === 'prod') {
+      panesHtml = '<div class="prod-banner"><span><b>Production Focus Active:</b> Browsing production schema and collections. Any data modifications require challenge phrase confirmation.</span>' +
+        '<span class="badge badge-prod">PROD</span></div>' +
+        '<div class="panes panes-full">' + paneHtml('prod', state.schema.prodTables || [], badges.prod) + '</div>';
+    } else {
+      panesHtml = '<div class="panes">' + paneHtml('dev', state.schema.devTables || [], badges.dev) + paneHtml('prod', state.schema.prodTables || [], badges.prod) + '</div>';
+    }
+
+    return '<div class="toolbar">' +
+      '<label class="sr-only" for="search">Search tables, collections and fields</label>' +
+      '<input class="input search" id="search" type="search" placeholder="Search tables, collections or fields…" value="' + esc(state.search) + '">' +
+      '</div>' + panesHtml;
+  }
+
+`;

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

@@ -0,0 +1,2 @@
+import type { PageModule } from '../types.js';
+export declare const databasePage: PageModule;

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

@@ -0,0 +1,28 @@
+import { ICON_PATHS } from '../../shell/icons.js';
+import { databaseCss } from './styles.js';
+import { databaseMarkup } from './markup.js';
+import { databaseStateScript, databaseRegisterScript } from './state.js';
+import { databaseDataScript } from './data-shell.js';
+import { databaseExplorerScript } from './explorer.js';
+import { databaseBrowserScript } from './browser.js';
+import { databaseDriftScript } from './drift.js';
+import { databaseConnectionScript } from './connection.js';
+import { databaseEventsScript } from './events.js';
+export const databasePage = {
+    id: 'database',
+    group: 'system',
+    label: 'Database',
+    icon: ICON_PATHS.database,
+    css: databaseCss,
+    markup: databaseMarkup,
+    script: [
+        databaseStateScript,
+        databaseDataScript,
+        databaseExplorerScript,
+        databaseBrowserScript,
+        databaseDriftScript,
+        databaseConnectionScript,
+        databaseEventsScript,
+        databaseRegisterScript,
+    ].join(''),
+};

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

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

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

@@ -0,0 +1,32 @@
+// Database Studio panel content; the shell supplies the surrounding section.
+export const databaseMarkup = String.raw `    <div class="panel-head">
+      <div class="panel-title">
+        <h1>Database Studio</h1>
+        <p class="lead">Schema inspector, live data browser, drift tracker and migration preview. Connection strings stay inside this local process.</p>
+      </div>
+      <div class="panel-actions">
+        <button class="btn" id="btn-settings" type="button">Connection Settings</button>
+        <button class="btn primary" id="btn-export" type="button">Export Contract</button>
+      </div>
+    </div>
+    <div class="telemetry" id="telemetry" aria-label="Database telemetry"></div>
+
+    <div class="env-toggle-bar">
+      <div class="env-segmented" role="group" aria-label="Environment Focus Mode">
+        <button type="button" class="env-seg-btn" data-env-mode="dev" aria-pressed="true">Staging / Dev</button>
+        <button type="button" class="env-seg-btn" data-env-mode="prod" aria-pressed="false">Production</button>
+        <button type="button" class="env-seg-btn" data-env-mode="split" aria-pressed="false">Split Comparison</button>
+      </div>
+    </div>
+
+    <div id="diagnostic-banner" aria-live="polite" hidden></div>
+
+    <nav class="tabs" role="tablist" aria-label="Database views">
+      <button class="subtab" role="tab" id="tab-explorer" aria-controls="view" data-tab="explorer">Schema &amp; Structure <span class="count" id="count-explorer">0</span></button>
+      <button class="subtab" role="tab" id="tab-data" aria-controls="view" data-tab="data">Live Data Browser <span class="count" id="count-data">0</span></button>
+      <button class="subtab" role="tab" id="tab-drift" aria-controls="view" data-tab="drift">Schema Changes (Live vs Blueprint) <span class="count" id="count-drift">0</span></button>
+      <button class="subtab" role="tab" id="tab-sql" aria-controls="view" data-tab="sql">Migration Script Preview <span class="count" id="count-sql">0</span></button>
+    </nav>
+
+    <div id="view" role="tabpanel" tabindex="-1"></div>
+`;

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

@@ -0,0 +1,2 @@
+export declare const databaseStateScript: string;
+export declare const databaseRegisterScript: string;

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

@@ -0,0 +1,57 @@
+// Database Studio state and small helpers, private to the Database page.
+export const databaseStateScript = String.raw `  var ENGINE_LABEL = { postgresql: 'PostgreSQL', mysql: 'MySQL', sqlite: 'SQLite', mongodb: 'MongoDB', firestore: 'Firebase Firestore' };
+  var NOSQL = { mongodb: true, firestore: true };
+  var state = {
+    tab: 'explorer',
+    envMode: 'dev',
+    dbStarted: false,
+    loading: true,
+    status: null,
+    schema: { devTables: [], prodTables: [] },
+    diff: null,
+    diffError: null,
+    diffTarget: 'prod',
+    search: '',
+    mobileEnv: 'dev',
+    sql: '',
+    scriptLang: 'sql',
+    dataEnv: 'dev',
+    dataEntity: '',
+    dataPage: 1,
+    dataLimit: 25,
+    dataSort: '',
+    dataOrder: 'asc',
+    dataSearch: '',
+    dataLoading: false,
+    dataResult: null,
+    dataError: null,
+    editingPk: null,
+    pendingMutation: null,
+    envInfo: null
+  };
+  // Media fields rendered in the current view, referenced by index from IMAGE badges.
+  var mediaRegistry = [];
+
+  function isCollection(t) { return !!t && t.entityType === 'collection'; }
+  function entityCount(s) { return s.entityCount != null ? s.entityCount : s.tableCount; }
+  function entityNoun(s, plural) {
+    var coll = s && (s.entityType === 'collection' || NOSQL[s.engine]);
+    return coll ? (plural ? 'Collections' : 'Collection') : (plural ? 'Tables' : 'Table');
+  }
+  /** Noun for drift views: collections when the compared Dev database is a document store. */
+  function driftNoun(plural) {
+    var dev = state.status && state.status.dev;
+    return entityNoun(dev, plural).toLowerCase();
+  }
+  function isPreviewableUrl(u) { return typeof u === 'string' && /^https?:\/\//i.test(u); }
+
+`;
+// Loads on first visit only: the page connects to live databases.
+export const databaseRegisterScript = String.raw `
+  Studio.registerPage('database', {
+    deps: [],
+    onShow: function () {
+      if (!state.dbStarted) { state.dbStarted = true; load(false); } else renderDb();
+    }
+  });
+`;

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

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