@njeybe/nativ 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 2.3.0
+
+### Changed
+
+- **Studio redesign.** New Home, Tasks, Flow and Team pages focused on what needs you, what
+  finished, how the work connects, and how each agent is doing. Ctrl+K command palette to find
+  any task, a detail panel to read and act on one task, and light and dark themes.
+
+### Removed
+
+- Agent Cockpits and Workflow Canvas pages and the simulation controls in the UI. The
+  simulation server endpoints remain for now and will be removed in a later cleanup.
+
 ## 2.2.0
 
 ### Added
@@ -34,7 +47,7 @@
 
 Documentation and package metadata only; no behaviour changes.
 
-- **npm is the only install path.** The source repository is private, so the instructions for `npm install -g github:…` and for adding the plugin marketplace were removed from the README and the installation guide. `nativ setup` is the complete route: it writes the agents, the enforcement hook, the MCP entry and the permission rules, which a plugin cannot ship.
+- **npm is the only install path.** The source repository is private, so the instructions for `npm install -g github:...` and for adding the plugin marketplace were removed from the README and the installation guide. `nativ setup` is the complete route: it writes the agents, the enforcement hook, the MCP entry and the permission rules, which a plugin cannot ship.
 - The plugin files still ship inside the package (`plugin/`) and can be tried for one session with `claude --plugin-dir`.
 - `package.json` no longer declares `repository`, `homepage` or `bugs`, so the npm page has no dead links.
 - The 2.0.0 entry below still mentions the plugin marketplace; that route is not available outside the private repository.

package/README.md

@@ -234,6 +234,21 @@ nativ bench --scenario concurrency --concurrency 8
 nativ bench --json
 ```
 
+### Studio
+
+`nativ studio` runs a local dashboard at http://localhost:4983 with live updates. It loads
+nothing from the internet and runs under a strict content security policy. The sidebar
+groups pages by role.
+
+**Home** shows what needs you, what's running now, and what just finished.
+**Tasks** displays one milestone at a time, sorted newest completed first.
+**Flow** shows how the work connects and visualizes how the run really happened.
+**Team** lists each agent's activity in plain terms: tasks done, time spent, cost.
+**Worktrees, Benchmarks, Database** are system tools for branches, performance and schemas.
+
+Press Ctrl+K (or Cmd+K or /) to find any task by id, title, agent or file name. The theme
+toggle switches between light and dark; your choice is saved locally.
+
 ### Database studio and schema telemetry (masked, structure only)
 
 ```bash

package/dist/server/studio-ui/document.d.ts

@@ -0,0 +1,3 @@
+export declare function escapeHtml(value: string): string;
+export declare const documentStart: string;
+export declare const styleEnd = "</style>\n";

package/dist/server/studio-ui/document.js

@@ -0,0 +1,22 @@
+export function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch]);
+}
+// Runs before first paint so a saved theme never flashes the wrong colours.
+const themeScript = String.raw `(function () {
+  try {
+    var t = localStorage.getItem('nativ-studio:theme');
+    if (t === 'dark' || t === 'light') document.documentElement.setAttribute('data-theme', t);
+  } catch (e) { /* storage blocked */ }
+})();`;
+// Opening of the document up to the style block; the CSS chunks follow it.
+export const documentStart = String.raw `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title>Nativ Studio</title>
+<script>${themeScript}</script>
+<style>
+`;
+export const styleEnd = '</style>\n';

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

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

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

@@ -0,0 +1,11 @@
+import { ICON_PATHS } from '../../shell/icons.js';
+import { benchmarksCss } from './styles.js';
+import { benchmarksScript } from './script.js';
+export const benchmarksPage = {
+    id: 'benchmarks',
+    group: 'system',
+    label: 'Benchmarks',
+    icon: ICON_PATHS.benchmarks,
+    css: benchmarksCss,
+    script: benchmarksScript,
+};

package/dist/server/studio-ui/pages/benchmarks/script.d.ts

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

package/dist/server/studio-ui/pages/benchmarks/script.js

@@ -0,0 +1,104 @@
+// Benchmarks view script.
+export const benchmarksScript = String.raw `  // ─── View 4: Synthetic benchmarks ──────────────────────────────────────────
+  var SCENARIOS = [
+    { id: 'concurrency', label: 'Multi-Agent Concurrency' },
+    { id: 'telemetry', label: 'Telemetry Engine' },
+    { id: 'governor', label: 'Governor Invariants' },
+    { id: 'verification', label: 'Gatekeeper' },
+    { id: 'e2e_pipeline', label: 'E2E Lifecycle' }
+  ];
+
+  function renderBenchmarks() {
+    var running = !!pipe.busy.bench;
+    var runBtn = '<button class="btn primary" type="button" data-act="bench-run"' + (running ? ' disabled' : '') + '>' +
+      (running ? '<span class="spinner" aria-hidden="true"></span>Running…' : ICON.play + 'Run Benchmark') + '</button>';
+    var head = panelHead('Synthetic Benchmarks', 'Sandboxed stress runs of plan locking, telemetry, the contract governor, the verification gatekeeper and the full agent lifecycle.', runBtn);
+    if (!pipe.loaded.benchmarks) return head + '<div class="card section" aria-hidden="true"><div class="skeleton tall"></div></div><div class="scenario-grid" aria-hidden="true">' + skeletonCards(5, 'scenario') + '</div>';
+    if (pipe.errors.benchmarks && !pipe.report) return head + errorCard('benchmark report', pipe.errors.benchmarks, 'benchmarks');
+    var r = pipe.report;
+    if (!r) {
+      return head + '<div class="card state" aria-busy="' + running + '"><div class="state-icon">' + (running ? '<span class="spinner" aria-hidden="true"></span>' : ICON.gauge) + '</div>' +
+        '<h2>' + (running ? 'Running benchmark matrix…' : 'No benchmark report yet') + '</h2>' +
+        '<p>' + (running ? 'Scenarios run in throwaway sandboxes; this usually takes a few seconds.' : 'Run the synthetic matrix to measure throughput and score all five pipeline scenarios. Results are cached in .ai/benchmark_report.json.') + '</p></div>';
+    }
+    return head + staleNote('benchmarks') + benchHero(r, running) + '<div class="scenario-grid">' + scenarioCards(r) + '</div>';
+  }
+
+  function benchHero(r, running) {
+    var s = r.summary || {};
+    var env = r.environment || {};
+    var meta = [];
+    if (r.timestamp) meta.push('Ran ' + esc(fmtDate(r.timestamp)));
+    if (env.platform) meta.push(esc(env.platform + (env.arch ? ' ' + env.arch : '')));
+    if (env.nodeVersion) meta.push('Node ' + esc(env.nodeVersion));
+    if (env.cpuCount) meta.push(env.cpuCount + ' CPUs');
+    var score = clampPct(s.score);
+    return '<section class="card hero' + (running ? ' is-running' : '') + '" aria-labelledby="hero-h" aria-busy="' + running + '">' +
+      '<div><h2 class="eyebrow" id="hero-h">Average throughput</h2>' +
+      '<div class="hero-value">' + num(Math.round(s.averageThroughputOpsPerSec || 0)) + '<span class="badge badge-accent">ops/sec</span></div>' +
+      '<p class="hero-meta">' + meta.join(' · ') + '</p></div>' +
+      '<dl class="hero-stats">' +
+        '<div><dt>Score</dt><dd class="' + (score < 100 ? 'text-danger' : '') + '">' + score + '%</dd></div>' +
+        '<div><dt>Scenarios passed</dt><dd>' + num(s.passedScenarios) + '/' + num(s.totalScenarios) + '</dd></div>' +
+        '<div><dt>Total duration</dt><dd>' + fmtMs(s.totalDurationMs) + '</dd></div>' +
+        '<div><dt>Operations</dt><dd>' + num(s.totalOperations) + '</dd></div>' +
+      '</dl></section>';
+  }
+
+  function scenarioCards(r) {
+    var byId = {}, known = {};
+    (r.scenarios || []).forEach(function (s) { byId[s.id] = s; });
+    var cards = SCENARIOS.map(function (meta) { known[meta.id] = true; return scenarioCard(meta.label, byId[meta.id]); });
+    (r.scenarios || []).forEach(function (s) { if (!known[s.id]) cards.push(scenarioCard(s.name || s.id, s)); });
+    return cards.join('');
+  }
+
+  function scenarioCard(label, s) {
+    if (!s) {
+      return '<article class="card scenario is-idle"><header class="scenario-head"><h3>' + esc(label) + '</h3><span class="badge badge-neutral">Not run</span></header>' +
+        '<p class="muted">Not part of the last run. Run the full matrix to score it.</p></article>';
+    }
+    var total = (s.assertionsPassed || 0) + (s.assertionsFailed || 0);
+    var passed = s.status === 'passed';
+    var score = total ? Math.round((s.assertionsPassed || 0) / total * 100) : (passed ? 100 : 0);
+    var details = Object.keys(s.details || {}).slice(0, 4).map(function (k) {
+      var v = s.details[k];
+      // Lists (e.g. invariant names) get a full-width row of chips instead of a cramped value column.
+      if (Array.isArray(v)) {
+        return '<dt class="wide">' + esc(humanize(k)) + '</dt><dd class="wide">' + v.map(function (item) { return '<span class="chip">' + esc(detailValue(item)) + '</span>'; }).join('') + '</dd>';
+      }
+      return '<dt>' + esc(humanize(k)) + '</dt><dd>' + esc(detailValue(v)) + '</dd>';
+    }).join('');
+    var errors = (s.errors || []).length ? '<ul class="scenario-errors">' + s.errors.map(function (e) { return '<li>' + esc(e) + '</li>'; }).join('') + '</ul>' : '';
+    return '<article class="card scenario"><header class="scenario-head"><h3>' + esc(label) + '</h3>' +
+      '<span class="badge badge-' + (passed ? 'success' : 'danger') + '">' + (passed ? 'Passed' : 'Failed') + '</span></header>' +
+      (s.name && s.name !== label ? '<p class="scenario-sub">' + esc(s.name) + '</p>' : '') +
+      '<div class="metrics"><div><span class="metric-v">' + score + '%</span><span class="metric-l">Score</span></div>' +
+      '<div><span class="metric-v">' + fmtMs(s.durationMs) + '</span><span class="metric-l">Latency</span></div>' +
+      '<div><span class="metric-v">' + num(Math.round(s.throughputOpsPerSec || 0)) + '</span><span class="metric-l">ops/sec</span></div></div>' +
+      progressBar(score, 'sc-' + s.id, label + ' score', passed ? 'success' : 'danger') +
+      (details ? '<dl class="details">' + details + '</dl>' : '') + errors + '</article>';
+  }
+
+  function runBenchmark() {
+    if (pipe.busy.bench) return;
+    pipe.busy.bench = true;
+    repaint('benchmarks');
+    postJson('/api/pipeline/benchmarks/run', {}).then(function (r) {
+      if (r.report) { pipe.report = r.report; pipe.errors.benchmarks = null; pipe.loaded.benchmarks = true; }
+      var s = r.report && r.report.summary;
+      toast('Benchmark finished' + (s ? ': score ' + clampPct(s.score) + '%, ' + s.passedScenarios + '/' + s.totalScenarios + ' scenarios passed' : ''), 'ok');
+    }, function (e) {
+      toast('Benchmark run failed: ' + e.message);
+    }).then(function () {
+      pipe.busy.bench = false;
+      repaint('benchmarks');
+    });
+  }
+
+  Studio.registerPage('benchmarks', {
+    deps: ['benchmarks'],
+    render: function () { return renderBenchmarks(); },
+    actions: { 'bench-run': function () { runBenchmark(); } }
+  });
+`;

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

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

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

@@ -0,0 +1,30 @@
+// Benchmarks view styles.
+export const benchmarksCss = String.raw `/* Benchmarks */
+.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; padding: 22px; margin-bottom: 16px; transition: opacity .2s; }
+.hero.is-running { opacity: .6; }
+.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.hero-value { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 40px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
+.hero-value .badge { font-size: 12px; letter-spacing: 0; }
+.hero-meta { margin: 0; font-size: 13.5px; color: var(--muted); }
+.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(96px, auto)); gap: 4px 28px; margin: 0; }
+.hero-stats dt { font-size: 12.5px; color: var(--muted); }
+.hero-stats dd { margin: 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.scenario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
+.scenario { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; }
+.scenario.is-idle { box-shadow: none; border-style: dashed; }
+.scenario-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.scenario-head h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
+.scenario-sub { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
+.scenario p { margin: 0; font-size: 13.5px; line-height: 1.5; }
+.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+.metric-v { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.metric-l { display: block; font-size: 12px; color: var(--muted); }
+.details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; padding-top: 10px; font-size: 12.5px; border-top: 1px solid var(--border); }
+.details dt { color: var(--muted); }
+.details dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
+.details .wide { grid-column: 1 / -1; }
+.details dd.wide { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; text-align: left; }
+.details dd.wide .chip { font-size: 11px; }
+.scenario-errors { margin: 0; padding: 8px 10px 8px 26px; font-size: 12.5px; color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: var(--r-control); }
+
+`;

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

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

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

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

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

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