@njeybe/nativ 2.6.0 → 2.8.0

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

@@ -34,9 +34,9 @@ export const benchmarksScript = String.raw `  // ─── View 4: Synthetic ben
     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><h2 class="hero-title" 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>' +
+      '<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>' +
@@ -48,16 +48,17 @@ export const benchmarksScript = String.raw `  // ─── View 4: Synthetic ben
   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]); });
+    var cards = [], idle = [];
+    SCENARIOS.forEach(function (meta) {
+      known[meta.id] = true;
+      if (byId[meta.id]) cards.push(scenarioCard(meta.label, byId[meta.id])); else idle.push(meta.label);
+    });
     (r.scenarios || []).forEach(function (s) { if (!known[s.id]) cards.push(scenarioCard(s.name || s.id, s)); });
+    if (idle.length) cards.push('<p class="muted not-run">Not run: ' + idle.map(esc).join(', ') + '.</p>');
     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);
@@ -76,7 +77,7 @@ export const benchmarksScript = String.raw `  // ─── View 4: Synthetic ben
       '<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') +
+      progressBar(score, 'sc-' + s.id, label + ' score', passed ? '' : 'danger') +
       (details ? '<dl class="details">' + details + '</dl>' : '') + errors + '</article>';
   }
 

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

@@ -1,22 +1,27 @@
 // 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 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; padding: 22px 0; margin-bottom: 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; 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-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
+.not-run { margin: 0; padding: 12px 0; font-size: 13px; }
+.scenario .progress { height: 4px; }
 .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-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
+.scenario { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; transition: background .15s; }
+.scenario:hover { background: var(--surface-2); }
+.scenario.is-idle { color: var(--fg-3); }
 .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; }
+.metrics { display: inline-flex; font-variant-numeric: tabular-nums; }
+.metrics > * { padding: 0 16px; border-left: 1px solid var(--line); }
+.metrics > :first-child { padding-left: 0; border-left: 0; }
 .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); }

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

@@ -116,7 +116,7 @@ export const databaseBrowserScript = String.raw `  // ─── Database Studio:
     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>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>' +
@@ -168,7 +168,7 @@ export const databaseBrowserScript = String.raw `  // ─── Database Studio:
     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 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>';

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

@@ -3,10 +3,11 @@ export const databaseConnectionScript = String.raw `  // ─── Database Stud
   function renderModalStatus() {
     ['dev', 'prod'].forEach(function (env) {
       var s = state.status && state.status[env];
-      $('mdot-' + env).className = 'dot ' + (s && s.connected ? 'on' : 'off');
+      var unset = !s || /No (Dev|Prod) database configured/.test(s.error || '');
+      $('mdot-' + env).className = 'dot ' + (s && s.connected ? 'on' : unset ? '' : 'off');
       $('current-' + env).innerHTML = s && s.maskedUrl
         ? 'Current: <code>' + esc(s.maskedUrl) + '</code><span class="copy-wrap"><span class="tooltip">Copied!</span><button class="btn small" type="button" data-copy-masked="' + env + '">Copy</button></span>'
-        : 'Current: <span class="muted">not configured</span>';
+        : 'Current: <span class="muted">Not set up</span>';
     });
   }
 
@@ -139,8 +140,8 @@ export const databaseConnectionScript = String.raw `  // ─── Database Stud
       if (r.success) {
         var count = r.entityCount != null ? r.entityCount : r.tableCount;
         out.className = 'result ok';
-        out.textContent = 'Connected to ' + (ENGINE_LABEL[r.engine] || r.engine) + ' in ' + Math.round(r.pingMs) + 'ms · ' + count + ' ' +
-          entityNoun({ engine: r.engine }, true).toLowerCase() + ' · saved to session as ' + r.maskedUrl;
+        out.textContent = 'Connected to ' + (ENGINE_LABEL[r.engine] || r.engine) + ' in ' + Math.round(r.pingMs) + 'ms, ' + count + ' ' +
+          entityNoun({ engine: r.engine }, true).toLowerCase() + ', saved to session as ' + r.maskedUrl;
         $('url-' + env).value = '';
         $('ppass-' + env).value = '';
         return true;
@@ -148,7 +149,7 @@ export const databaseConnectionScript = String.raw `  // ─── Database Stud
       out.className = 'result err';
       out.textContent = 'Error: ' + (r.error || 'Connection failed');
       var hint = hintFor(r.error);
-      if (hint) out.textContent += ' — ' + hint;
+      if (hint) out.textContent += ': ' + hint;
       return false;
     }, function (e) {
       out.className = 'result err'; out.textContent = 'Error: ' + e.message; return false;

package/dist/server/studio-ui/pages/database/data-shell.js

@@ -1,5 +1,5 @@
 // Database Studio data loading and shell.
-export const databaseDataScript = String.raw `  // ─── View 5: Database Studio — data loading ────────────────────────────────
+export const databaseDataScript = String.raw `  // ─── View 5: Database Studio - data loading ────────────────────────────────
   function load(fresh) {
     state.loading = true;
     renderDb();
@@ -53,9 +53,12 @@ export const databaseDataScript = String.raw `  // ─── View 5: Database St
     var label = env.toUpperCase();
     if (!s) return '<span class="pill"><span class="dot"></span><b>' + label + ':</b> loading…</span>';
     if (!s.connected) {
-      var why = /No (Dev|Prod) database configured/.test(s.error || '') ? 'not configured' : 'offline';
-      return '<span class="pill" title="' + esc(s.error || '') + '"><span class="dot off"></span><b>' + label + ':</b> ' + why +
-        ' <span class="badge badge-offline">OFFLINE</span></span>';
+      if (/No (Dev|Prod) database configured/.test(s.error || '')) {
+        return '<span class="pill"><span class="dot"></span><b>' + label + ':</b> ' +
+          '<span class="badge badge-neutral">Not set up</span></span>';
+      }
+      return '<span class="pill" title="' + esc(s.error || '') + '"><span class="dot off"></span><b>' + label + ':</b> offline' +
+        ' <span class="badge badge-offline">Offline</span></span>';
     }
     var sourceBadge = s.synthesized && s.sourceKey
       ? ' <span class="badge badge-synth" title="Assembled in memory from fragmented .env keys">synthesized from ' + esc(keyFamily(s.sourceKey)) + '</span>'
@@ -63,7 +66,7 @@ export const databaseDataScript = String.raw `  // ─── View 5: Database St
         ? ' <span class="badge badge-source" title="Detected in ' + esc(s.exampleFile || '.env.example') + '">via ' + esc(s.sourceKey) + '</span>'
         : (s.sourceKey ? ' <span class="badge badge-source">via ' + esc(s.sourceKey) + '</span>' : '');
     return '<span class="pill" title="' + esc(s.maskedUrl) + '"><span class="dot on"></span><b>' + label + ':</b> ' +
-      esc(ENGINE_LABEL[s.engine] || s.engine) + (s.database ? ' · ' + esc(s.database) : '') + ' (' + Math.round(s.pingMs) + 'ms) – ' +
+      esc(ENGINE_LABEL[s.engine] || s.engine) + (s.database ? ', ' + esc(s.database) : '') + ' (' + Math.round(s.pingMs) + 'ms): ' +
       entityCount(s) + ' ' + entityNoun(s, true) + sourceBadge + ' <span class="badge badge-online">ONLINE</span></span>';
   }
 
@@ -97,15 +100,8 @@ export const databaseDataScript = String.raw `  // ─── View 5: Database St
             '<span class="diagnostic-tag">[DIAGNOSTIC]</span> ' +
             '<span class="diagnostic-msg">' + esc(suggestion) + '</span>' +
           '</div>' +
-          '<div class="diagnostic-actions">' +
-            '<button class="btn small" type="button" id="btn-diag-settings">Open Connection Settings</button>' +
-          '</div>' +
         '</div>';
         bannerEl.hidden = false;
-        var btnDiag = $('btn-diag-settings');
-        if (btnDiag) {
-          btnDiag.onclick = function () { openSettings(); };
-        }
       } else {
         bannerEl.innerHTML = '';
         bannerEl.hidden = true;
@@ -119,7 +115,7 @@ export const databaseDataScript = String.raw `  // ─── View 5: Database St
       : ((state.schema[activeEnv + 'Tables'] || []).length);
     $('count-data').textContent = String(dataCount);
     var d = state.diff && state.diff.summary;
-    $('count-drift').textContent = d ? String(d.addedTablesCount + d.alteredTablesCount + d.droppedTablesCount) : '–';
+    $('count-drift').textContent = d ? String(d.addedTablesCount + d.alteredTablesCount + d.droppedTablesCount) : '-';
     var script = state.diff ? generateScript(state.diff) : { text: '', lang: 'sql', count: 0 };
     state.sql = script.text;
     state.scriptLang = script.lang;
@@ -154,12 +150,11 @@ export const databaseDataScript = String.raw `  // ─── View 5: Database St
     return '<div class="sr-only">Loading database schema…</div><div class="panes" aria-busy="true">' + col + col + '</div>';
   }
 
-  var DB_ICON = '<svg class="icon empty-icon" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">' +
-    '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/><path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></svg>';
+  var DB_ICON = '<svg class="icon empty-icon" width="56" height="56" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">' +
+    '<path d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"/></svg>';
 
   function emptyState(title, text) {
-    return '<div class="empty card">' + DB_ICON + '<h3>' + esc(title) + '</h3><p>' + esc(text) + '</p>' +
-      '<button class="btn primary" type="button" data-action="open-settings">Connection Settings</button></div>';
+    return '<div class="empty card">' + DB_ICON + '<h3>' + esc(title) + '</h3><p>' + esc(text) + '</p></div>';
   }
 
 `;

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

@@ -15,7 +15,7 @@ export const databaseDriftScript = String.raw `  // ─── Database Studio: d
   }
 
   function colCell(c) {
-    if (!c) return '<span class="muted">—</span>';
+    if (!c) return '<span class="muted">-</span>';
     return esc(c.type) + (c.nullable ? '' : ' NOT NULL') + (c.default != null ? ' <span class="muted">DEFAULT</span> ' + esc(c.default) : '') +
       (c.primaryKey ? ' <span class="badge badge-pk">PK</span>' : '') + (c.isMedia ? ' <span class="badge badge-media">IMAGE</span>' : '') +
       (c.isSubcollection ? ' <span class="badge badge-subcol">SUBCOLLECTION</span>' : '');
@@ -292,7 +292,7 @@ export const databaseDriftScript = String.raw `  // ─── Database Studio: d
     var lang = state.scriptLang;
     var unit = lang === 'json' ? ' change(s)' : ' statement(s)';
     return '<div class="sql-wrap card"><div class="sql-head"><span class="muted"><span class="lang">' + LANG_LABEL[lang] + '</span>' +
-      (destructive ? '<span class="badge badge-dropped">DESTRUCTIVE</span> ' : '') + state.scriptCount + unit + ' · read-only preview</span>' +
+      (destructive ? '<span class="badge badge-dropped">DESTRUCTIVE</span> ' : '') + state.scriptCount + unit + ', read-only preview</span>' +
       '<span class="copy-wrap"><span class="tooltip">Copied!</span><button class="btn small" type="button" data-action="copy-sql">Copy ' +
       (lang === 'sql' ? 'SQL' : lang === 'js' ? 'Script' : 'JSON') + '</button></span></div>' +
       '<pre class="sql" tabindex="0" aria-label="Migration script (' + LANG_LABEL[lang] + ')"><code>' + highlightScript(state.sql, lang) + '</code></pre></div>';

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

@@ -123,8 +123,7 @@ export const databaseEventsScript = String.raw `  // ─── Events: Database
       return;
     }
     var action = el.getAttribute('data-action');
-    if (action === 'open-settings') openSettings();
-    else if (action === 'copy-sql') copyText(state.sql, el);
+    if (action === 'copy-sql') copyText(state.sql, el);
     else if (action === 'edit-record') openEditRecordModal(Number(el.getAttribute('data-row')));
     else if (action === 'delete-record') handleDeleteRecord(Number(el.getAttribute('data-row')));
     else if (action === 'preview-url') {

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

@@ -32,9 +32,9 @@ export const databaseExplorerScript = String.raw `  // ─── Database Studio
         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.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) +
+      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('');
@@ -45,7 +45,7 @@ export const databaseExplorerScript = String.raw `  // ─── Database Studio
       : '';
     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>'
+        (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>' : '') +
@@ -87,7 +87,7 @@ export const databaseExplorerScript = String.raw `  // ─── Database Studio
     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(' · ');
+    return parts.join(', ');
   }
 
   function showThumb(el) {
@@ -117,7 +117,7 @@ export const databaseExplorerScript = String.raw `  // ─── Database Studio
     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-sub').textContent = (m ? SOURCE_LABEL[m.source] || m.source : 'Image field') + ', ' + entry.type;
     $('media-thumb').innerHTML = thumbHtml(m);
     var rows = [];
     if (m) {
@@ -144,7 +144,7 @@ export const databaseExplorerScript = String.raw `  // ─── Database Studio
     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>';
+        '<p class="muted">Use Connection Settings at the top.</p></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) {

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

@@ -6,7 +6,7 @@ export const databaseCss = String.raw `/* Database Studio */
 .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-msg code { background: var(--surface); padding: 1px 6px; border-radius: var(--r-control); 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; }
@@ -18,7 +18,7 @@ export const databaseCss = String.raw `/* Database Studio */
 .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-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); 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; }
@@ -77,7 +77,7 @@ pre.sql { margin: 0; padding: 16px; overflow: auto; max-height: 70vh; background
 .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 { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--success); color: var(--accent-fg); 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; }
@@ -87,7 +87,7 @@ pre.sql { margin: 0; padding: 16px; overflow: auto; max-height: 70vh; background
 
 .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 { border: 1px solid transparent; background: transparent; padding: 4px 14px; border-radius: var(--r-control); 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); }
@@ -112,7 +112,7 @@ table.data-table tr:hover td { background: var(--bg); }
 .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 { padding: 1px 6px; font-size: 11px; border-radius: var(--r-control); 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/layout.js

@@ -1,5 +1,5 @@
 // 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 };
+export const flowLayoutScript = String.raw `  var FLOW = { W: 206, H: 74, GX: 52, GY: 10, PAD: 14, LX: 128, TOP: 30 };
 
   function flowAgentKey(t) { return t.agent || 'unassigned'; }
 

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

@@ -1,9 +1,9 @@
 // Flow page styles, all scoped under #panel-flow.
-export const flowCss = String.raw `#panel-flow .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
+export const flowCss = String.raw `#panel-flow .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; background: var(--surface); }
 #panel-flow .seg button { border: 0; background: none; padding: 0 12px; height: 30px; font-size: 13px; color: var(--fg-2); cursor: pointer; }
 #panel-flow .seg button + button { border-left: 1px solid var(--line); }
 #panel-flow .seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
-#panel-flow .fl-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; overflow: hidden; }
+#panel-flow .fl-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); min-width: 0; overflow: hidden; }
 #panel-flow .fl-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px; }
 #panel-flow .fl-bar .right { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-3); }
 #panel-flow .flow-wrap { overflow: auto; max-height: 72vh; position: relative; border-top: 1px solid var(--line); }
@@ -18,14 +18,14 @@ export const flowCss = String.raw `#panel-flow .seg { display: inline-flex; bord
 #panel-flow .lane-label { position: sticky; left: 0; width: 128px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border-right: 1px solid var(--line); height: 100%; z-index: 2; }
 #panel-flow .lane-label .faint { font-size: 11.5px; }
 #panel-flow .round-head { position: absolute; top: 0; height: 30px; display: flex; align-items: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
-#panel-flow .node { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; text-align: left; cursor: pointer; transition: opacity .15s, border-color .15s, box-shadow .15s; z-index: 1; }
+#panel-flow .node { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); text-align: left; cursor: pointer; transition: opacity .15s, border-color .15s, box-shadow .15s; z-index: 1; }
 #panel-flow .node:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
 #panel-flow .node.in_progress { border-color: color-mix(in srgb, var(--run) 50%, var(--line)); background: color-mix(in srgb, var(--run-soft) 55%, var(--surface)); }
 #panel-flow .node.blocked { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); background: color-mix(in srgb, var(--bad-soft) 55%, var(--surface)); }
 #panel-flow .node .l1 { display: flex; align-items: center; gap: 6px; }
 #panel-flow .node .l1 .d { margin-left: auto; font: 11px var(--mono); color: var(--fg-3); }
 #panel-flow .node .l1 .mono { font-size: 11px; }
-#panel-flow .node .title { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#panel-flow .node .title { font-size: 12.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 #panel-flow .canvas.focus .node:not(.hot) { opacity: .3; }
 #panel-flow .node.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 #panel-flow .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--fg-2); align-items: center; }

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

@@ -51,7 +51,7 @@ export const flowTimelineScript = String.raw `  function flowStat(k, v, s) {
     var cw = t.checkMs && t.status === 'completed' ? Math.min(w, t.checkMs * tm.sg.k) : 0;
     var lx = w > 64 ? x1 + 6 : x2 + 4;
     var took = (t.status === 'in_progress' ? 'running' : 'took ' + fmt.dur(t.durationMs)) + (t.checkMs ? ', check ' + fmt.dur(t.checkMs) : '');
-    var tip = ui.esc(t.id + ' · ' + t.title) + '
' + ui.esc(took);
+    var tip = ui.esc(t.id + ', ' + t.title) + '
' + ui.esc(took);
     return '<g><rect class="bar-w ' + ui.esc(t.status) + '" data-task="' + ui.esc(t.id) + '" data-row="' + row + '" x="' + x1 + '" y="' + by +
       '" width="' + w + '" height="21" rx="4"><title>' + tip + '</title></rect>' +
       (cw > 1 ? '<rect class="bar-c" x="' + (x2 - cw) + '" y="' + (by + 17) + '" width="' + cw + '" height="4" rx="1"/>' : '') +