@njeybe/nativ 2.1.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # 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
+
+- **Dual-Track Intake (Experience-First vs Data-First).** The `ui_specs.md` template can now start from either user experience (sketches and flows) or data structure (tables and entity relationships). Both paths lead to the same component map and style tile.
+- **Semantic Component Trees.** Components now organize into a hierarchical structure with semantic roles: layout containers, data display, input controls, feedback, and navigation. The component map in `ui_specs.md` reflects these roles.
+- **Stack-Aware Style Tiles.** Style tiles now include platform-specific variants. A web style tile shows how a design token adapts across desktop, tablet and mobile breakpoints. Flutter tiles show platform-native adaptations for iOS, Android and Cupertino.
+- **Contextual Typography.** The `ui_specs.md` template documents font scales in context: scale per platform, role (heading, body, caption, code), and how type tokens map to semantic roles in components. Font sizes, weights and line heights are specified per context, not globally.
+- **Mutation State Specs.** Every input component, button, and interactive element now carries a spec for its mutation states: default, hover, focus, disabled, loading, error and success. States are shown in the wireframe notes and in the component section.
+
 ## 2.1.0
 
 ### Added
@@ -24,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

@@ -129,6 +129,8 @@ Start in `warn`, look at the log, then switch to `block`. If a task genuinely ne
 
 **Planning levels.** The `.ai/ui_specs.md` template opens with a planning level: Quick (small fix, no design phase), Standard (new screen in an existing design) or Full (new app or redesign). It then walks through the design brief, users and top tasks, real content samples, user flows, design directions with a style tile, wireframes, a component map and one section per component. The architect and frontend/flutter guides were trimmed to match.
 
+**UI/UX design enhancements.** The template supports two intake approaches: Experience-First (start with user flows and wireframes) or Data-First (start with entity relationships and table schemas), both leading to the same component map. The component map now organizes components into semantic trees reflecting their roles in the interface (layout, data display, input, feedback, navigation). Style tiles are stack-aware, showing platform-specific token variants for web breakpoints and Flutter platform adaptations. Typography is specified in context with font scales per platform and semantic role, mapped directly to components. Every interactive element and input carries a mutation state spec: default, hover, focus, disabled, loading, error and success states, documented in wireframe notes and component sections.
+
 **Optional task fields.** A task can carry `specRefs` (anchors such as `ui_specs.md#appointment-list`), `complexity` (`simple`, `standard` or `complex`) and `acceptanceCriteria` ("done when" lines):
 
 ```bash
@@ -232,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;