@njeybe/nativ 2.2.0 → 2.3.1

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;

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

@@ -0,0 +1,118 @@
+// Database Studio view styles.
+export const databaseCss = String.raw `/* Database Studio */
+.telemetry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
+.pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); box-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pill b { font-weight: 600; }
+.diagnostic-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; margin: 12px 0 16px; background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: var(--r-control); }
+.diagnostic-content { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
+.diagnostic-tag { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--danger); background: var(--surface); border: 1px solid var(--danger-line); padding: 0 7px; border-radius: var(--r-control); }
+.diagnostic-msg code { background: var(--surface); padding: 1px 6px; border-radius: 4px; font-family: var(--mono); }
+.diagnostic-actions { display: flex; gap: 8px; }
+.template-helper-box { background: var(--active-bg); border: 1px solid var(--active-line); border-radius: var(--r-control); padding: 12px 14px; margin-bottom: 16px; }
+.template-helper-label { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
+.template-helper-label code { color: var(--active); font-weight: 600; }
+.template-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+.template-chip { font-family: var(--mono); font-size: 12.5px; }
+.template-chip:hover { border-color: var(--active); }
+.chip-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
+.chip-dot.on { background: var(--success); }
+.chip-dot.off { background: var(--danger); }
+
+.thumb-pop { position: fixed; z-index: 60; width: 220px; padding: 8px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-float); pointer-events: none; }
+.thumb-box { display: grid; place-items: center; min-height: 120px; max-height: 200px; overflow: hidden; border-radius: var(--r-control); background: repeating-conic-gradient(var(--chip) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px; }
+.thumb-box img { max-width: 100%; max-height: 200px; display: block; }
+.thumb-box .ph { color: var(--muted); font-size: 12px; text-align: center; padding: 12px; }
+.thumb-meta { margin-top: 6px; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
+.media-modal .thumb-box { min-height: 220px; max-height: 360px; }
+.media-modal .thumb-box img { max-height: 360px; }
+.media-modal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 14px 0 0; font-size: 13px; }
+.media-modal dt { color: var(--muted); }
+.media-modal dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.media-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
+
+.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
+.input { min-height: 32px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); min-width: 0; }
+.input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
+textarea.input { width: 100%; resize: vertical; line-height: 1.5; }
+.search { flex: 1; min-width: 180px; max-width: 420px; }
+.panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.panes-full { grid-template-columns: 1fr; }
+.pane { padding: 16px; min-width: 0; }
+.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
+.pane-head h2 { margin: 0; font-size: 15.5px; display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
+.pane-head .meta { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.table-card { border: 1px solid var(--border); border-radius: var(--r-control); margin-bottom: 8px; background: var(--surface); }
+.table-card > summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; align-items: center; gap: 8px; border-radius: var(--r-control); }
+.table-card > summary::-webkit-details-marker { display: none; }
+.table-card > summary:hover { background: var(--bg); }
+.table-card > summary::before { content: "\25B8"; color: var(--muted); transition: transform .15s; }
+.table-card[open] > summary::before { transform: rotate(90deg); }
+.table-card .tname { font-family: var(--mono); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
+.table-card .ccount { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
+.table-body { padding: 0 12px 12px; overflow-x: auto; }
+.desc { color: var(--muted); margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
+table.cols { width: 100%; border-collapse: collapse; font-size: 13px; }
+table.cols th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12.5px; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
+table.cols td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
+table.cols td.mono { white-space: nowrap; }
+.subhead { font-size: 12.5px; color: var(--muted); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .05em; }
+.idx-list { margin: 0; padding-left: 18px; font-size: 13px; }
+
+.summary-banner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 16px; margin-bottom: 16px; }
+.stat { padding: 4px 8px; }
+.stat .n { font-size: 26px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
+.stat .l { color: var(--muted); font-size: 12.5px; }
+.risk-HIGH { color: var(--danger); } .risk-MEDIUM { color: var(--active); } .risk-LOW { color: var(--success); } .risk-NONE { color: var(--muted); }
+.alert-danger { border: 1px solid var(--danger-line); background: var(--danger-bg); border-radius: var(--r-control); padding: 10px 12px; margin-bottom: 12px; }
+.alert-danger strong { color: var(--danger); }
+.diff-table td.before { color: var(--danger); } .diff-table td.after { color: var(--success); }
+.row-added td { background: var(--success-bg); } .row-dropped td { background: var(--danger-bg); } .row-altered td { background: var(--active-bg); }
+.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
+.chip { font-family: var(--mono); font-size: 12px; padding: 1px 8px; border-radius: var(--r-control); border: 1px solid var(--chip-border); background: var(--chip); }
+
+.sql-wrap { position: relative; padding: 0; overflow: hidden; }
+.sql-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
+pre.sql { margin: 0; padding: 16px; overflow: auto; max-height: 70vh; background: var(--bg); font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre; }
+.sql .k { color: var(--primary); font-weight: 600; } .sql .s { color: var(--success); } .sql .c { color: var(--muted); font-style: italic; } .sql .d { color: var(--danger); font-weight: 700; }
+.sql .p { color: var(--active); } .sql .n { color: var(--active); font-weight: 600; } .sql .o { color: var(--primary); }
+.lang { font-family: var(--mono); font-size: 11px; padding: 0 7px; border-radius: var(--r-control); border: 1px solid var(--primary-line); background: var(--primary-tint); color: var(--primary); margin-right: 6px; }
+.copy-wrap { position: relative; display: inline-flex; }
+.tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--success); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-control); pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; }
+.tooltip.show { opacity: 1; }
+
+.empty { text-align: center; padding: 48px 24px; }
+.empty .empty-icon { color: var(--primary); margin: 0 auto 12px; }
+.empty h3 { margin: 0 0 6px; font-size: 16px; }
+.empty p { color: var(--muted); margin: 0 0 16px; font-size: 15px; line-height: 1.55; }
+
+.env-toggle-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 6px; }
+.env-segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--chip); border: 1px solid var(--border); border-radius: var(--r-control); }
+.env-seg-btn { border: 1px solid transparent; background: transparent; padding: 4px 14px; border-radius: 5px; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; transition: all .15s ease; }
+.env-seg-btn:hover { color: var(--text); }
+.env-seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--primary); border-color: var(--border); box-shadow: var(--shadow); }
+.env-seg-btn[data-env-mode="prod"][aria-pressed="true"] { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
+.prod-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: var(--r-control); border: 1px solid var(--danger-line); background: var(--danger-bg); font-size: 13px; margin-bottom: 14px; }
+.prod-banner b { color: var(--danger); font-weight: 600; }
+
+.tabs { display: flex; gap: 4px; margin: 16px 0; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; }
+.subtab { background: none; border: none; padding: 10px 12px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
+.subtab:hover { color: var(--text); }
+.subtab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
+
+.data-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
+.data-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1; min-width: 0; }
+.data-grid-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 14px; min-height: 240px; }
+table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
+table.data-table th { background: var(--bg); color: var(--muted); font-weight: 600; font-size: 12.5px; padding: 10px 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; white-space: nowrap; user-select: none; }
+table.data-table th.sortable { cursor: pointer; }
+table.data-table th.sortable:hover { color: var(--text); background: var(--chip); }
+table.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
+table.data-table tr:hover td { background: var(--bg); }
+.th-sort-icon { font-size: 10px; margin-left: 4px; color: var(--primary); }
+.td-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
+.pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; font-size: 13px; color: var(--muted); }
+.pagination-ctrls { display: flex; align-items: center; gap: 8px; }
+.cell-preview-btn { padding: 1px 6px; font-size: 11px; border-radius: 4px; border: 1px solid var(--primary-line); color: var(--primary); background: var(--primary-tint); cursor: pointer; }
+.cell-preview-btn:hover { background: var(--surface); }
+
+`;

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

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

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

@@ -0,0 +1,11 @@
+import { ICON_PATHS } from '../../shell/icons.js';
+import { flowScript } from './script.js';
+import { flowCss } from './styles.js';
+export const flowPage = {
+    id: 'flow',
+    group: 'now',
+    label: 'Flow',
+    icon: ICON_PATHS.flow,
+    css: flowCss,
+    script: flowScript,
+};

package/dist/server/studio-ui/pages/flow/layout.d.ts

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

package/dist/server/studio-ui/pages/flow/layout.js

@@ -0,0 +1,105 @@
+// Plan layout: rounds, lanes, links and the highlight set. Pure, no DOM.
+export const flowLayoutScript = String.raw `  var FLOW = { W: 206, H: 58, GX: 52, GY: 10, PAD: 14, LX: 128, TOP: 30 };
+
+  function flowAgentKey(t) { return t.agent || 'unassigned'; }
+
+  function flowGraph(m) {
+    var ids = {};
+    m.tasks.forEach(function (t) { ids[t.id] = t; });
+    var depsIn = function (id) {
+      return ids[id].deps.filter(function (d) { return ids[d] && d !== id; });
+    };
+    var depth = {}, anc = {};
+    function getD(id, seen) {
+      if (depth[id] != null) return depth[id];
+      if (seen[id]) return 0;
+      seen[id] = true;
+      var d = 0;
+      depsIn(id).forEach(function (p) { d = Math.max(d, 1 + getD(p, seen)); });
+      delete seen[id];
+      depth[id] = d;
+      return d;
+    }
+    function getA(id, seen) {
+      if (anc[id]) return anc[id];
+      if (seen[id]) return {};
+      seen[id] = true;
+      var out = {};
+      depsIn(id).forEach(function (p) {
+        out[p] = true;
+        var up = getA(p, seen);
+        Object.keys(up).forEach(function (k) { out[k] = true; });
+      });
+      delete seen[id];
+      anc[id] = out;
+      return out;
+    }
+    m.tasks.forEach(function (t) { getD(t.id, {}); getA(t.id, {}); });
+    var edges = [], kids = {};
+    m.tasks.forEach(function (t) {
+      depsIn(t.id).forEach(function (d) {
+        var implied = depsIn(t.id).some(function (e) { return e !== d && getA(e, {})[d]; });
+        edges.push({ from: d, to: t.id, implied: implied });
+        (kids[d] = kids[d] || []).push(t.id);
+      });
+    });
+    return { depth: depth, anc: function (id) { return getA(id, {}); }, edges: edges, kids: kids };
+  }
+
+  function flowPlace(m, g) {
+    var lanes = [], cells = {};
+    m.tasks.forEach(function (t) {
+      var a = flowAgentKey(t);
+      if (lanes.indexOf(a) === -1) lanes.push(a);
+      var k = a + '|' + g.depth[t.id];
+      (cells[k] = cells[k] || []).push(t);
+    });
+    var rounds = Math.max.apply(null, m.tasks.map(function (t) { return g.depth[t.id]; })) + 1;
+    var laneY = {}, laneH = {}, y = FLOW.TOP;
+    lanes.forEach(function (l) {
+      var stack = 1;
+      for (var r = 0; r < rounds; r++) stack = Math.max(stack, (cells[l + '|' + r] || []).length);
+      laneY[l] = y;
+      laneH[l] = FLOW.PAD * 2 + stack * FLOW.H + (stack - 1) * FLOW.GY;
+      y += laneH[l];
+    });
+    var pos = {};
+    Object.keys(cells).forEach(function (k) {
+      var bits = k.split('|'), r = Number(bits[1]);
+      cells[k].forEach(function (t, i) {
+        pos[t.id] = { x: FLOW.LX + 20 + r * (FLOW.W + FLOW.GX), y: laneY[bits[0]] + FLOW.PAD + i * (FLOW.H + FLOW.GY), round: r + 1 };
+      });
+    });
+    return { lanes: lanes, laneY: laneY, laneH: laneH, pos: pos, rounds: rounds,
+      width: FLOW.LX + 20 + rounds * (FLOW.W + FLOW.GX), height: y };
+  }
+
+  /** Everything the Plan view draws for one milestone. */
+  function flowLayout(m) {
+    var g = flowGraph(m);
+    var L = flowPlace(m, g);
+    L.edges = g.edges;
+    L.kids = g.kids;
+    L.anc = g.anc;
+    L.hidden = g.edges.filter(function (e) { return e.implied; }).length;
+    return L;
+  }
+
+  /** The task, everything it needs and everything it unblocks, or null when it is not drawn. */
+  function flowFocusSet(L, id) {
+    if (!id || !L.pos[id]) return null;
+    var hot = {}, down = {}, stack = [id];
+    hot[id] = true;
+    Object.keys(L.anc(id)).forEach(function (k) { hot[k] = true; });
+    while (stack.length) {
+      (L.kids[stack.pop()] || []).forEach(function (c) {
+        if (down[c]) return;
+        down[c] = true;
+        hot[c] = true;
+        stack.push(c);
+      });
+    }
+    return hot;
+  }
+
+`;

package/dist/server/studio-ui/pages/flow/plan-view.d.ts

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

package/dist/server/studio-ui/pages/flow/plan-view.js

@@ -0,0 +1,67 @@
+// Plan view: swimlanes per agent, one column per round, bezier links inside the milestone.
+export const flowPlanScript = String.raw `  function flowWires(L, hot, showAll) {
+    return L.edges.filter(function (e) { return showAll || !e.implied; }).map(function (e) {
+      var a = L.pos[e.from], b = L.pos[e.to];
+      var x1 = a.x + FLOW.W, y1 = a.y + FLOW.H / 2, x2 = b.x, y2 = b.y + FLOW.H / 2;
+      var dx = Math.max(28, (x2 - x1) / 2);
+      var on = hot && hot[e.from] && hot[e.to];
+      return '<path class="wire' + (on ? ' hot' : '') + (e.implied ? ' implied' : '') + '" data-from="' + ui.esc(e.from) +
+        '" data-to="' + ui.esc(e.to) + '" d="M' + x1 + ' ' + y1 + ' C' + (x1 + dx) + ' ' + y1 + ', ' + (x2 - dx) + ' ' + y2 + ', ' + x2 + ' ' + y2 + '"/>';
+    }).join('');
+  }
+
+  function flowBands(m, L) {
+    return L.lanes.map(function (l) {
+      var count = m.tasks.filter(function (t) { return flowAgentKey(t) === l; }).length;
+      return '<div class="lane-band" data-lane="' + ui.esc(l) + '" style="top:' + L.laneY[l] + 'px;height:' + L.laneH[l] + 'px">' +
+        '<div class="lane-label">' + ui.agentChip(l === 'unassigned' ? null : l) + '<span class="faint">' + count + (count === 1 ? ' task' : ' tasks') + '</span></div></div>';
+    }).join('');
+  }
+
+  function flowRoundHeads(L) {
+    var out = '';
+    for (var r = 0; r < L.rounds; r++) {
+      out += '<div class="round-head" style="left:' + (FLOW.LX + 20 + r * (FLOW.W + FLOW.GX)) + 'px">Round ' + (r + 1) + '</div>';
+    }
+    return out;
+  }
+
+  function flowNodeTime(t) {
+    if (t.status === 'in_progress' && t.startT) return '<span data-since="' + t.startT + '">' + ui.esc(fmt.dur(Studio.now() - t.startT)) + '</span>';
+    return t.durationMs ? ui.esc(fmt.dur(t.durationMs)) : '';
+  }
+
+  function flowNodes(m, L, hot, focusId) {
+    return m.tasks.map(function (t) {
+      var p = L.pos[t.id];
+      var cls = 'node ' + t.status + (hot && hot[t.id] ? ' hot' : '') + (focusId === t.id ? ' sel' : '');
+      return '<button type="button" class="' + ui.esc(cls) + '" data-act="flow-focus" data-key="' + ui.esc(t.id) + '" data-id="' + ui.esc(t.id) +
+        '" data-round="' + p.round + '" aria-pressed="' + (focusId === t.id) + '" title="' + ui.esc(t.title) + '" style="left:' + p.x + 'px;top:' + p.y +
+        'px;width:' + FLOW.W + 'px;height:' + FLOW.H + 'px"><div class="l1">' + ui.statusIcon(t.status) + '<span class="mono faint">' + ui.esc(t.id) +
+        '</span><span class="d">' + flowNodeTime(t) + '</span></div><div class="title">' + ui.esc(t.title) + '</div></button>';
+    }).join('');
+  }
+
+  function flowLegend() {
+    var one = function (s) { return '<span>' + ui.statusIcon(s) + Studio.statusLabel(s) + '</span>'; };
+    return '<div class="legend">' + ['completed', 'in_progress', 'pending', 'blocked'].map(one).join('') + '</div>';
+  }
+
+  function flowPlanTools(L, hot, view) {
+    var hint = hot ? '<button type="button" class="btn ghost" data-act="flow-clear">Clear highlight</button>'
+      : '<span>Click a task to light up what it needs and what it unblocks</span>';
+    var implied = L.hidden ? '<label class="check"><input type="checkbox" data-act="flow-implied"' + (view.implied ? ' checked' : '') +
+      '> Show ' + L.hidden + ' implied link' + (L.hidden > 1 ? 's' : '') + '</label>' : '';
+    return '<div class="fl-bar">' + flowLegend() + '<span class="right">' + hint + implied + '</span></div>';
+  }
+
+  function flowPlan(m, focusId, view) {
+    var L = flowLayout(m);
+    var hot = flowFocusSet(L, focusId);
+    return '<section class="fl-panel" data-mode="plan">' + flowPlanTools(L, hot, view) +
+      '<div class="flow-wrap"><div class="canvas' + (hot ? ' focus' : '') + '" style="width:' + L.width + 'px;height:' + (L.height + 10) + 'px">' +
+      flowBands(m, L) + flowRoundHeads(L) + '<svg class="wires" width="' + L.width + '" height="' + L.height + '">' +
+      flowWires(L, hot, view.implied) + '</svg>' + flowNodes(m, L, hot, hot ? focusId : null) + '</div></div></section>';
+  }
+
+`;