@njeybe/nativ 2.6.0 → 2.7.0

package/dist/server/studio-ui/shell/router.js

@@ -88,6 +88,31 @@ export const routerScript = String.raw `  // ─── Router and shell-wide eve
     });
   }, 1000);
 
+  // Active milestone: the one with running tasks, else the highest-index one.
+  Studio.activeMilestone = function (model) {
+    var list = (model && model.milestones) || [];
+    var run = list.filter(function (m) {
+      return m.tasks.some(function (t) { return t.status === 'in_progress'; });
+    });
+    var pool = run.length ? run : list;
+    return pool.length ? pool[pool.length - 1] : null;
+  };
+
+  var autoNavDone = false;
+  Studio.autoNav = function () {
+    if (autoNavDone || !pipe.loaded.tasks || !Studio.model) return;
+    var ms = Studio.activeMilestone(Studio.model);
+    if (!ms) return;
+    autoNavDone = true;
+    var S = Studio.state;
+    var opts = { milestoneId: ms.id, keepDetail: true, scroll: false };
+    if (!S.view) Studio.go('tasks', opts);
+    else { S.milestoneId = ms.id; paintPage(S.view); }
+    var el = document.querySelector('[data-milestone="' + cssEsc(ms.id) + '"], [data-ms-group="' + cssEsc(ms.id) + '"]');
+    if (el && el.scrollIntoView) el.scrollIntoView({ block: 'start' });
+  };
+  if (typeof Studio.onPaint === 'function') { Studio.onPaint(function () { Studio.autoNav(); }); }
+
   Studio.api = api;
   Studio.postJson = postJson;
   Studio.toast = function (message, kind) { toast(message, kind); };

package/dist/server/studio-ui/shell/sidebar-view.js

@@ -5,7 +5,9 @@ export const sidebarViewScript = String.raw `  // ─── Sidebar markup (pure
   function navBadges(env) {
     var badges = {}, model = env.model;
     if (model && model.needsYou.length) badges.home = ['warn', model.needsYou.length];
-    if (model && model.running.length) badges.tasks = ['run', model.running.length];
+    var ready = model ? model.tasks.filter(function (t) { return t.status === 'pending' && t.isAvailable; }).length : 0;
+    var active = model ? model.running.length + ready : 0;
+    if (active) badges.tasks = [model.running.length ? 'run' : '', active];
     if (env.worktreeCount != null) badges.worktrees = ['', env.worktreeCount];
     if (env.benchmarkText) badges.benchmarks = ['', env.benchmarkText];
     return badges;
@@ -17,7 +19,8 @@ export const sidebarViewScript = String.raw `  // ─── Sidebar markup (pure
     var item = function (p) {
       var b = badges[p.id];
       return '<button type="button" class="nav-item" data-go="' + esc(p.id) + '"' +
-        (env.view === p.id ? ' aria-current="page"' : '') + '>' + ui.svg(p.icon) +
+        (env.view === p.id ? ' aria-current="page"' : '') +
+        ' aria-label="' + esc(p.label) + '" title="' + esc(p.label) + '"' + '>' + ui.svg(p.icon) +
         '<span class="nav-text">' + esc(p.label) + '</span>' +
         (b ? '<span class="nav-badge' + (b[0] ? ' ' + b[0] : '') + '">' + esc(b[1]) + '</span>' : '') + '</button>';
     };
@@ -32,7 +35,7 @@ export const sidebarViewScript = String.raw `  // ─── Sidebar markup (pure
   /** env = { root, branch }. */
   Studio.sideFootHtml = function (env) {
     return '<span>Workspace</span><span class="mono" id="sb-root" title="' + esc(env.root || '') + '">' +
-      esc(env.root || '–') + '</span><span>branch <span class="mono" id="sb-branch-name">' + esc(env.branch || '–') + '</span></span>';
+      esc(env.root || '-') + '</span><span>branch <span class="mono" id="sb-branch-name">' + esc(env.branch || '-') + '</span></span>';
   };
 
 `;

package/dist/server/studio-ui/shell/toasts-format.js

@@ -48,16 +48,16 @@ export const toastsFormatScript = String.raw `  // ─── Toasts ────
 
   // ─── Formatting ────────────────────────────────────────────────────────────
   function num(n) {
-    if (n == null || n === '' || isNaN(n)) return '–';
+    if (n == null || n === '' || isNaN(n)) return '-';
     return Number(n).toLocaleString('en-US', { maximumFractionDigits: 3 });
   }
   function usd(n) {
-    if (n == null || isNaN(n)) return '–';
+    if (n == null || isNaN(n)) return '-';
     n = Number(n);
     return '$' + (n >= 100 ? n.toFixed(0) : n >= 1 ? n.toFixed(2) : n.toFixed(3));
   }
   function fmtMs(ms) {
-    if (ms == null || isNaN(ms)) return '–';
+    if (ms == null || isNaN(ms)) return '-';
     if (ms < 1000) return Math.round(ms) + ' ms';
     if (ms < 60000) return (ms / 1000).toFixed(2) + ' s';
     return Math.floor(ms / 60000) + 'm ' + Math.round((ms % 60000) / 1000) + 's';
@@ -83,7 +83,7 @@ export const toastsFormatScript = String.raw `  // ─── Toasts ────
     if (typeof v === 'number') return num(v);
     if (Array.isArray(v)) return v.map(String).join(', ');
     if (v && typeof v === 'object') return JSON.stringify(v);
-    return String(v == null ? '–' : v);
+    return String(v == null ? '-' : v);
   }
 
 `;

package/dist/server/studio-ui/styles/console.js

@@ -1,20 +1,37 @@
 // Runner console drawer and proposal review styles.
-export const consoleCss = String.raw `/* Live runner console drawer */
-body.has-console { padding-bottom: min(58vh, 520px); }
-body.has-console-min { padding-bottom: 56px; }
-#runner-console-drawer { position: fixed; inset: auto 0 0 var(--sidebar-w); z-index: 60; display: flex; flex-direction: column; max-height: min(58vh, 520px); background: var(--term-bg); color: var(--term-text); border-top: 1px solid var(--chip-border); box-shadow: var(--shadow-float); animation: rc-slide-up .28s cubic-bezier(.2, .8, .2, 1); }
+export const consoleCss = String.raw `/* Runner inspector: right pane at 1024px and up, modal sheet below. */
+#runner-console-drawer { position: fixed; top: var(--inspector-top, 96px); right: 0; bottom: 0; z-index: 30; width: 320px; display: flex; flex-direction: column; background: var(--term-bg); color: var(--term-text); border-left: 1px solid var(--line); transition: width .2s ease; }
 #runner-console-drawer[hidden] { display: none; }
-#runner-console-drawer.is-min .rc-body, #runner-console-drawer.is-min .rc-foot { display: none; }
-@keyframes rc-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
-.rc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--term-line); }
+/* Content reflows beside the pane instead of sitting under it. */
+body.has-console main, body:has(#runner-console-drawer:not([hidden])) main { margin-right: 320px; }
+body.has-console-min main { margin-right: 56px; }
+@media (min-width: 1280px) {
+  #runner-console-drawer { width: 360px; }
+  body.has-console main, body:has(#runner-console-drawer:not([hidden])) main { margin-right: 360px; }
+}
+#runner-console-drawer.is-min { width: 56px; overflow: hidden; }
+#runner-console-drawer.is-min .rc-body, #runner-console-drawer.is-min .rc-foot, #runner-console-drawer.is-min .rc-title, #runner-console-drawer.is-min .rc-steps, #runner-console-drawer.is-min .rc-status, #runner-console-drawer.is-min .rc-clock { display: none; }
+@media (max-width: 1023px) {
+  #runner-console-drawer { top: 0; width: min(420px, 92vw); max-width: 92vw; z-index: 40; border-radius: 6px 0 0 6px; box-shadow: var(--shadow); }
+  body.has-console main, body.has-console-min main, body:has(#runner-console-drawer:not([hidden])) main { margin-right: 0; }
+}
+/* The task detail dialog stays modal above the inspector. */
+#task-drawer { z-index: 45; }
+.rc-id-row { display: flex; align-items: center; gap: 10px; width: 100%; }
+.rc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--term-muted); }
+.rc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--term-muted); }
+.rc-status[data-tone="ok"] .rc-dot { background: var(--ok); }
+.rc-status[data-tone="err"] .rc-dot { background: var(--danger); }
+.rc-status[data-tone="run"] .rc-dot { background: var(--warn); }
+.rc-clock { margin-left: auto; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--term-muted); }
 .rc-task { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
-.rc-title { font-size: 12.5px; color: var(--term-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
-.rc-steps { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 0; list-style: none; }
+.rc-title { font-size: 12.5px; color: var(--term-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; flex: 1 1 100%; }
+.rc-steps { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
 .rc-step { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: 11px; color: var(--term-muted); border: 1px solid var(--term-line); border-radius: var(--r-control); }
 .rc-step.is-done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
 .rc-step.is-active { color: var(--term-text); background: color-mix(in srgb, var(--primary) 32%, transparent); border-color: var(--primary); }
 .rc-step.is-failed { color: var(--term-text); background: color-mix(in srgb, var(--danger) 32%, transparent); border-color: var(--danger); }
-.rc-controls { display: flex; gap: 6px; flex: none; }
+.rc-controls { display: flex; gap: 6px; flex-wrap: wrap; }
 .rc-btn { padding: 5px 9px; font: 500 11px/1 var(--font); color: var(--term-text); background: transparent; border: 1px solid var(--term-line); border-radius: var(--r-control); cursor: pointer; }
 .rc-btn:hover { background: color-mix(in srgb, var(--term-muted) 22%, transparent); }
 .rc-btn:disabled { opacity: .45; cursor: not-allowed; }
@@ -22,7 +39,7 @@ body.has-console-min { padding-bottom: 56px; }
 .rc-btn.danger { color: var(--term-text); border-color: var(--danger); }
 .rc-btn.danger:hover { background: color-mix(in srgb, var(--danger) 30%, transparent); }
 .rc-btn:focus-visible { outline: 2px solid var(--term-text); outline-offset: 2px; }
-.rc-body { flex: 1 1 auto; min-height: 120px; margin: 0; padding: 10px 14px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
+.rc-body { flex: 1 1 auto; min-height: 120px; margin: 0; padding: 10px 14px; overflow: auto; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
 .rc-body:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
 .rc-empty { color: var(--term-muted); }
 .rc-fg-muted { color: var(--term-muted); }
@@ -31,10 +48,10 @@ body.has-console-min { padding-bottom: 56px; }
 .rc-fg-info { color: var(--accent); }
 .rc-fg-danger { color: color-mix(in srgb, var(--danger) 55%, #fff); }
 .rc-bold { font-weight: 700; }
-.rc-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 7px 14px; font-size: 11.5px; color: var(--term-muted); border-top: 1px solid var(--term-line); }
+.rc-foot { font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 7px 14px; font-size: 11.5px; color: var(--term-muted); border-top: 1px solid var(--term-line); }
 .rc-foot strong { font-family: var(--mono); font-weight: 600; color: var(--term-text); }
 #runner-console-drawer.is-min .rc-tabs { display: none; }
-.rc-tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--term-line); }
+.rc-tabs { display: flex; gap: 2px; padding: 0 10px; overflow-x: auto; border-bottom: 1px solid var(--line); }
 .rc-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font: 500 12px/1 var(--font); color: var(--term-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
 .rc-tab:hover { color: var(--term-text); }
 .rc-tab[aria-selected="true"] { color: var(--term-text); border-bottom-color: var(--primary); }
@@ -80,4 +97,7 @@ body.has-console-min { padding-bottom: 56px; }
 .heal-result.is-error { color: color-mix(in srgb, var(--danger) 55%, #fff); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
 .heal-skel { height: 12px; margin: 8px 0; border-radius: 4px; background: var(--term-line); animation: blink 1.4s ease-in-out infinite; }
 @media (max-width: 768px) { .heal-grid { grid-template-columns: 1fr; } }
+@media (prefers-reduced-motion: reduce) {
+  #runner-console-drawer, #runner-console-drawer * { transition: none !important; animation: none !important; }
+}
 `;

package/dist/server/studio-ui/styles/dialogs.js

@@ -2,7 +2,7 @@
 export const dialogsCss = String.raw `/* Toasts */
 /* Bottom-right so notifications never cover the sticky header and navigation. */
 .toast-host { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
-.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; font-size: 13.5px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: var(--r-card); box-shadow: var(--shadow-float); animation: toast-in .18s ease-out; }
+.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--danger); border-radius: var(--r-card); box-shadow: var(--shadow); animation: toast-in .18s ease-out; }
 .toast.ok { border-left-color: var(--success); }
 .toast .t-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
 .toast .t-hint { color: var(--muted); font-size: 12.5px; }
@@ -12,8 +12,8 @@ export const dialogsCss = String.raw `/* Toasts */
 /* Dialogs */
 dialog { border: none; padding: 0; background: transparent; color: var(--text); width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
 dialog.narrow { width: min(460px, calc(100vw - 32px)); }
-dialog::backdrop { background: rgb(10 10 20 / 0.4); backdrop-filter: blur(2px); }
-.modal { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-float); }
+dialog::backdrop { background: color-mix(in srgb, var(--text) 40%, transparent); backdrop-filter: blur(2px); }
+.modal { padding: 22px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--shadow); }
 .modal h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
 .modal .lead { color: var(--muted); margin: 0 0 16px; font-size: 14px; line-height: 1.55; }
 .field { margin-bottom: 16px; }
@@ -112,7 +112,7 @@ textarea.cmd-preview { min-height: 92px; font-family: var(--mono); font-size: 12
 .switch-text { display: flex; flex-direction: column; font-size: 13.5px; }
 .switch-text b { font-weight: 600; }
 .switch-text span { font-size: 12.5px; color: var(--muted); }
-kbd { padding: 0 5px; font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--chip); border: 1px solid var(--chip-border); border-radius: 4px; }
+kbd { padding: 0 5px; font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--chip); border: 1px solid var(--chip-border); border-radius: var(--r-control); }
 .btn.primary kbd { color: var(--accent-fg); background: transparent; border-color: color-mix(in srgb, var(--accent-fg) 45%, transparent); }
 
 `;

package/dist/server/studio-ui/styles/responsive.js

@@ -1,5 +1,13 @@
 // Responsive rules for the kept pages and dialogs.
 export const responsiveCss = String.raw `/* Responsive */
+@media (max-width: 1023px) and (min-width: 761px) {
+  :root { --sidebar-w: 56px; }
+  .side { padding: 16px 8px; align-items: center; }
+  .brand { padding: 0; justify-content: center; }
+  .brand .wordmark { height: 16px; width: 16px; overflow: hidden; }
+  .brand b, .brand .ver, .nav-glabel, .nav-text, .nav-badge, .side-foot { display: none; }
+  .nav-item { justify-content: center; padding: 6px; width: 40px; }
+}
 @media (max-width: 900px) {
   #runner-console-drawer { inset: auto 0 0 0; }
   .panes { grid-template-columns: 1fr; }

package/dist/server/studio-ui/styles/shell.js

@@ -3,16 +3,17 @@ export const shellCss = String.raw `/* Layout */
 .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
 .side { border-right: 1px solid var(--line); background: var(--surface); padding: 16px 12px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
 .brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
-.logo { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
+.wordmark { height: 18px; width: auto; color: var(--fg); display: block; flex: none; }
+.wordmark.is-rail { height: 16px; }
 .brand b { font-weight: 600; white-space: nowrap; }
-.brand .ver { margin-left: auto; font: 11px var(--mono); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.side-foot .ver { font: 11px var(--mono); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .nav { display: flex; flex-direction: column; gap: 14px; }
 .nav-group { display: flex; flex-direction: column; gap: 2px; }
 .nav-glabel { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); padding: 0 8px 4px; }
 .nav-item { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 7px 8px; border-radius: 7px; border: 0; background: none; text-align: left; color: var(--fg-2); width: 100%; cursor: pointer; transition: background .15s, color .15s; }
-.nav-item svg { width: 16px; height: 16px; flex: none; }
+.nav-item svg { width: 20px; height: 20px; flex: none; }
 .nav-item:hover { background: var(--surface-2); color: var(--fg); }
-.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
+.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--fg); font-weight: 600; }
 .nav-badge { margin-left: auto; font: 500 11px var(--font); font-variant-numeric: tabular-nums; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2); text-align: center; }
 .nav-badge.warn { background: var(--warn-soft); color: var(--warn); }
 .nav-badge.run { background: var(--run-soft); color: var(--run); }
@@ -27,6 +28,24 @@ export const shellCss = String.raw `/* Layout */
 .top-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
 .btn.ghost { background: none; border-color: transparent; color: var(--fg-2); box-shadow: none; }
 .btn.ghost:hover { background: var(--surface-2); }
+#btn-dispatch-next[disabled] { opacity: .55; cursor: not-allowed; }
+.spacer { flex: 1; }
+.ic-sun, .ic-moon { display: inline-flex; }
+.ic-moon { display: none; }
+:root[data-theme="light"] .ic-sun { display: none; }
+:root[data-theme="light"] .ic-moon { display: inline-flex; }
+@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ic-sun { display: none; } :root:not([data-theme="dark"]) .ic-moon { display: inline-flex; } }
+.pulse-strip { min-height: 32px; height: auto; width: auto; border-radius: 0; background: none; box-shadow: none; animation: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; padding: 0 24px; border-bottom: 1px solid var(--line); font: 12.5px var(--mono); color: var(--fg-2); }
+#pulse .num { font-variant-numeric: tabular-nums; }
+#pulse .pulse-ms { color: var(--fg); padding-right: 20px; border-right: 1px solid var(--line); }
+#pulse .pulse-item { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
+#pulse .pulse-item.zero, #pulse .pulse-note.loading { color: var(--fg-3); }
+#pulse .pulse-item.run { color: var(--run); } #pulse .pulse-item.bad { color: var(--bad); } #pulse .pulse-item.warn, #pulse .pulse-note.offline { color: var(--warn); }
+#pulse .pdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+#pulse .pulse-item.run .pdot { animation: blink 1.6s infinite; }
+@media (max-width: 1023px) { .pulse-strip { padding-top: 4px; padding-bottom: 4px; gap: 0 16px; } #pulse .pulse-ms { flex-basis: 100%; border-right: 0; padding-right: 0; } }
+.wordmark.is-rail { display: none; }
+@media (max-width: 1023px) { .wordmark { display: none; } .wordmark.is-rail { display: block; } }
 .btn svg { width: 14px; height: 14px; }
 .kbd { font: 11px var(--mono); padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--fg-3); }
 .live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); }
@@ -113,5 +132,5 @@ export const shellCss = String.raw `/* Layout */
   .drawer { width: 100%; }
   #runner-console-drawer { inset: auto 0 0 0; }
 }
-@media (prefers-reduced-motion: reduce) { .pulse, .live-dot.flash { animation: none; } * { transition: none !important; } }
+@media (prefers-reduced-motion: reduce) { .pulse, .live-dot.flash, #pulse .pdot { animation: none !important; } * { transition: none !important; } }
 `;

package/dist/server/studio-ui/styles/strategist.js

@@ -12,30 +12,30 @@ export const strategistCss = String.raw `/* Tier 1 AI Strategist (ui_specs.md §
 .t1-chip-label { color: var(--muted); }
 .t1-caret { color: var(--muted); transition: transform .15s; }
 .t1-chip[aria-expanded="true"] .t1-caret { transform: rotate(180deg); }
-.t1-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 300px; padding: 12px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-float); }
+.t1-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 300px; padding: 12px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: var(--shadow); }
 .t1-menu:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
 .t1-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; color: var(--muted); }
 .t1-row b, .t1-row code { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
 .t1-row code { font-family: var(--mono); font-size: 12px; }
-.t1-switch { position: relative; width: 54px; height: 24px; padding: 0 8px; font: 600 10.5px/22px var(--mono); color: var(--muted); text-align: right; background: var(--chip); border: 1px solid var(--chip-border); border-radius: 12px; cursor: pointer; transition: background .15s, border-color .15s; }
+.t1-switch { position: relative; width: 54px; height: 24px; padding: 0 8px; font: 600 10.5px/22px var(--mono); color: var(--muted); text-align: right; background: var(--chip); border: 1px solid var(--chip-border); border-radius: var(--r-control); cursor: pointer; transition: background .15s, border-color .15s; }
 .t1-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transition: transform .15s; }
-.t1-switch[aria-checked="true"] { color: #fff; text-align: left; background: var(--success); border-color: var(--success); }
+.t1-switch[aria-checked="true"] { color: var(--accent-fg); text-align: left; background: var(--success); border-color: var(--success); }
 .t1-switch[aria-checked="true"]::before { transform: translateX(30px); }
 .t1-switch:disabled { opacity: .5; cursor: not-allowed; }
 .t1-policy { display: flex; gap: 6px; margin: 8px 0; padding: 8px; line-height: 1.45; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-control); }
 .t1-policy .icon { flex: none; margin-top: 1px; color: var(--success); }
 .t1-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
-.t1-stats div { min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-control); }
+.t1-stats div { min-width: 0; padding: 6px 8px; border: 0; border-left: 1px solid var(--line); border-radius: 0; font-variant-numeric: tabular-nums; }
 .t1-stats dt { font-size: 11px; color: var(--muted); }
 .t1-stats dd { margin: 2px 0 0; font: 600 15px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
 .t1-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 10px; color: var(--term-muted); border: 1px solid var(--term-line); border-radius: var(--r-control); }
 .t1-strip > span { display: inline-flex; align-items: center; gap: 6px; }
 .t1-strip strong { color: var(--term-text); font-weight: 600; }
 .t1-strip.is-triaging { border-color: color-mix(in srgb, var(--active) 60%, transparent); background: color-mix(in srgb, var(--active) 14%, transparent); }
-.rc-btn.t1-run { color: #fff; background: var(--active); border-color: var(--active); }
-.rc-btn.t1-run:hover:not(:disabled) { background: color-mix(in srgb, var(--active) 88%, #000); }
+.rc-btn.t1-run { color: var(--accent-fg); background: var(--active); border-color: var(--active); }
+.rc-btn.t1-run:hover:not(:disabled) { background: color-mix(in srgb, var(--active) 88%, var(--text)); }
 .t1-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px; font-weight: 600; border-radius: var(--r-control); }
-.t1-banner.is-resolved { color: #fff; background: var(--success); }
+.t1-banner.is-resolved { color: var(--accent-fg); background: var(--success); }
 .t1-banner.is-safe { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
 .t1-card { margin: 0 0 12px; padding: 12px 12px 12px 16px; border: 1px solid var(--term-line); border-left: 4px solid var(--proposal); border-radius: var(--r-card); }
 .t1-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
@@ -53,10 +53,10 @@ export const strategistCss = String.raw `/* Tier 1 AI Strategist (ui_specs.md §
 .t1-opt:hover { border-color: var(--term-text); }
 .t1-opt.is-recommended { background: var(--primary); border-color: var(--primary); }
 .t1-opt.is-recommended:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
-.t1-opt.is-recommended span { color: color-mix(in srgb, #fff 82%, var(--primary)); }
+.t1-opt.is-recommended span { color: color-mix(in srgb, var(--accent-fg) 82%, var(--primary)); }
 .t1-opt[aria-checked="true"] { box-shadow: 0 0 0 2px var(--term-bg), 0 0 0 4px var(--proposal); }
 .t1-custom { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--term-muted); }
-.t1-custom textarea { width: 100%; box-sizing: border-box; min-height: 52px; padding: 6px 8px; font: 12.5px/1.45 var(--font); color: var(--term-text); background: rgb(148 163 184 / 0.08); border: 1px solid var(--term-line); border-radius: var(--r-control); resize: vertical; }
+.t1-custom textarea { width: 100%; box-sizing: border-box; min-height: 52px; padding: 6px 8px; font: 12.5px/1.45 var(--font); color: var(--term-text); background: color-mix(in srgb, var(--term-text) 8%, transparent); border: 1px solid var(--term-line); border-radius: var(--r-control); resize: vertical; }
 .t1-custom textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
 .t1-decided { margin: 8px 0 0; font-size: 12px; color: var(--term-muted); }
 @media (prefers-reduced-motion: reduce) { .t1-chip[data-state="triaging"] .t1-spark { animation: none; } }
@@ -65,7 +65,7 @@ export const strategistCss = String.raw `/* Tier 1 AI Strategist (ui_specs.md §
   .t1-menu { position: fixed; top: 56px; left: 16px; right: 16px; width: auto; }
 }
 .df-add { display: block; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
-.df-del { display: block; color: color-mix(in srgb, var(--danger) 55%, #fff); background: color-mix(in srgb, var(--danger) 14%, transparent); }
+.df-del { display: block; color: color-mix(in srgb, var(--danger) 55%, var(--accent-fg)); background: color-mix(in srgb, var(--danger) 14%, transparent); }
 .df-hunk { display: block; color: var(--accent); }
 .df-file { display: block; margin-top: 8px; font-weight: 700; color: var(--term-text); }
 .df-meta { display: block; color: var(--term-muted); }

package/dist/server/studio-ui/styles/tokens-base.js

@@ -1,26 +1,26 @@
 // Design tokens (light, dark, old-name aliases), base rules and shared legacy components.
-const DARK = `--bg: #0e0e13; --surface: #16161d; --surface-2: #1d1d26; --line: #2a2a36; --line-2: #383847;
-  --fg: #ececf2; --fg-2: #a4a4b7; --fg-3: #6e6e82;
-  --accent: #8e8aff; --accent-soft: #23224a; --accent-fg: #0e0e13;
-  --ok: #4ade80; --ok-soft: #13281b; --run: #60a5fa; --run-soft: #142238;
-  --bad: #f87171; --bad-soft: #341617; --warn: #fbbf24; --warn-soft: #2f2410;
-  --ag-backend: #38bdf8; --ag-frontend: #a78bfa; --ag-qa: #fbbf24; --ag-flutter: #2dd4bf;
-  --ag-architect: #8e8aff; --ag-devops: #94a3b8; --ag-database: #34d399; --ag-security: #f87171;
-  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35); color-scheme: dark;`;
+const DARK = `--bg: #0f0f0f; --surface: #1a1a1a; --surface-2: #242424; --line: #303030; --line-2: #3d3d3d;
+  --fg: #ececee; --fg-2: #a1a1aa; --fg-3: #8b8b94;
+  --accent: #ececee; --accent-soft: #1d1d21; --accent-fg: #0f0f0f;
+  --ok: #4ade80; --ok-soft: #12261a; --run: #60a5fa; --run-soft: #121d33;
+  --bad: #f87171; --bad-soft: #2c1414; --warn: #fbbf24; --warn-soft: #2a210b;
+  --ag-backend: var(--fg-3); --ag-frontend: var(--fg-3); --ag-qa: var(--fg-3); --ag-flutter: var(--fg-3);
+  --ag-architect: var(--fg-3); --ag-devops: var(--fg-3); --ag-database: var(--fg-3); --ag-security: var(--fg-3);
+  --shadow: 0 8px 24px color-mix(in srgb, var(--fg) 12%, transparent); color-scheme: dark;`;
 export const tokensBaseCss = String.raw `:root {
-  --bg: #f6f6f9;
-  --surface: #ffffff;
-  --surface-2: #f0f0f5;
-  --line: #e3e3ea; --line-2: #d2d2dc;
-  --fg: #16161f; --fg-2: #54546a; --fg-3: #8b8b9e;
-  --accent: #4f46e5; --accent-soft: #eeeefe; --accent-fg: #ffffff;
-  --ok: #15803d; --ok-soft: #e7f5ec;
-  --run: #2563eb; --run-soft: #e7eefd;
-  --bad: #dc2626; --bad-soft: #fdecec;
-  --warn: #b45309; --warn-soft: #fcf2e1;
-  --ag-backend: #0284c7; --ag-frontend: #7c3aed; --ag-qa: #d97706; --ag-flutter: #0d9488;
-  --ag-architect: #4f46e5; --ag-devops: #64748b; --ag-database: #059669; --ag-security: #dc2626;
-  --shadow: 0 1px 2px rgba(22,22,40,.05), 0 4px 16px rgba(22,22,40,.06);
+  --bg: #f5f5f5;
+  --surface: #fafafa;
+  --surface-2: #efefef;
+  --line: #e4e4e7; --line-2: #d4d4d8;
+  --fg: #18181b; --fg-2: #52525b; --fg-3: #6b6b74;
+  --accent: #18181b; --accent-soft: #ededf0; --accent-fg: #fafafa;
+  --ok: #15803d; --ok-soft: #e7f4ec;
+  --run: #1d4ed8; --run-soft: #e8eefc;
+  --bad: #b91c1c; --bad-soft: #fbeaea;
+  --warn: #a1500a; --warn-soft: #fbf0e4;
+  --ag-backend: var(--fg-3); --ag-frontend: var(--fg-3); --ag-qa: var(--fg-3); --ag-flutter: var(--fg-3);
+  --ag-architect: var(--fg-3); --ag-devops: var(--fg-3); --ag-database: var(--fg-3); --ag-security: var(--fg-3);
+  --shadow: 0 8px 24px color-mix(in srgb, var(--fg) 12%, transparent);
   --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, Menlo, monospace;
   color-scheme: light;
@@ -35,8 +35,8 @@ export const tokensBaseCss = String.raw `:root {
   --warn-bg: var(--warn-soft);
   --proposal: var(--warn); --proposal-bg: var(--warn-soft); --proposal-line: color-mix(in srgb, var(--warn) 40%, var(--surface));
   --chip: var(--surface-2); --chip-border: var(--line-2);
-  --term-bg: #0f172a; --term-text: #f8fafc; --term-muted: #94a3b8; --term-line: rgb(148 163 184 / 0.28);
-  --r-control: 7px; --r-card: 12px;
+  --term-bg: var(--surface); --term-text: var(--fg); --term-muted: var(--fg-3); --term-line: rgb(148 163 184 / 0.28);
+  --r-control: 6px; --r-card: 6px;
   --shadow-float: 0 12px 32px -8px rgb(15 23 42 / 0.25), 0 2px 6px -2px rgb(15 23 42 / 0.1);
   --sidebar-w: 224px;
 }

package/dist/server/studio-ui.js

@@ -26,6 +26,7 @@ import { consoleScript } from './studio-ui/shell/console.js';
 import { triageScript } from './studio-ui/shell/triage.js';
 import { proposalsScript } from './studio-ui/shell/proposals.js';
 import { syncScript } from './studio-ui/shell/sync.js';
+import { pulseScript } from './studio-ui/shell/pulse.js';
 import { routerScript } from './studio-ui/shell/router.js';
 import { detailScript } from './studio-ui/shell/detail.js';
 import { paletteScript } from './studio-ui/shell/palette.js';
@@ -55,6 +56,7 @@ const BODY = [
     proposalsScript,
     ...pages.map((p) => wrapPage(p.script)),
     syncScript,
+    pulseScript,
     routerScript,
     detailScript,
     paletteScript,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@njeybe/nativ",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Role-based multi-agent workflow harness: Claude Code by default, other AI agents pluggable",
   "type": "module",
   "main": "dist/index.js",

package/plugin/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "nativ",
   "displayName": "nativ",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Role-based multi-agent workflow for Claude Code: architect, worker, verifier and explorer agents, task-scope enforcement, and the nativ MCP server.",
   "author": {
     "name": "JB Natividad"

package/plugin/agents/architect.md

@@ -13,12 +13,12 @@ Your job is design, not implementation. You turn a feature request or an escalat
 
 ## How you work
 
-1. Orient: read `.ai/context.md` and `.ai/codebase_map.md` if it exists, then only the contract you are changing. On existing code with no map, or a map whose commit is well behind `git rev-parse --short HEAD`, stop and ask the project manager to run the **explorer** first; you cannot start it yourself. When its report comes back, save it unchanged as `.ai/codebase_map.md` (Claude Code asks the human first) and design from it. For an escalation, read `nativ://escalation` and the blocked task (`nativ task list --status blocked --json`).
+1. Orient: read `.ai/context.md` and `.ai/codebase_map.md` if it exists, then only the contract you are changing. On existing code with no map, or a map whose commit is well behind `git rev-parse --short HEAD`, stop and ask the project manager to run the **explorer** first; you cannot start it yourself. Save its report unchanged as `.ai/codebase_map.md` (Claude Code asks the human first) and design from it. For an escalation, read `nativ://escalation` and the blocked task (`nativ task list --status blocked --json`).
 2. **Pick the design track first** and record it in `.ai/ui_specs.md` under Planning Level. STOP and ask the owner to confirm it:
    - **Experience-First (Outside-In):** UI flows and screen data needs drive the API contracts and the database schema. Order: UI specs, then API contracts, then database schema.
    - **Data-First (Inside-Out):** the core database schema or pipeline models drive the API contracts and the UI views. Order: database schema, then API contracts, then UI specs.
 
-   Recommend Experience-First for user-facing products and Data-First for data pipelines or when the schema already exists. Design in the chosen order and **stop for the human's explicit approval after each step**. Do not start the next until the previous is approved.
+   Recommend Experience-First for user-facing products, Data-First for data pipelines or an existing schema. Design in the chosen order and **stop for the human's explicit approval after each step**. Do not start the next until the previous is approved.
 3. Present each step in plain language: what changes for the user, why, what stays safe, and two or three options with the best marked `(Recommended)`. No raw stack traces.
 4. After approval, write the contract. Claude Code will ask the human to confirm every write under `.ai/`; that prompt is the approval gate, so never try to route around it.
 5. Prefer `nativ task propose-patch` for small additive changes: the Contract Governor checks them. Any `[DROPPED]` or `[DESTRUCTIVE]` change needs the human's explicit yes first.
@@ -27,21 +27,20 @@ Your job is design, not implementation. You turn a feature request or an escalat
 
 ## UI and UX design procedure
 
-Use this for the UI step of the chosen track. Keep every message compact. Write the result into `.ai/ui_specs.md` under its existing headings.
+Use this for the UI step of the chosen track. Write the result into `.ai/ui_specs.md` under its existing headings.
 
 1. **Planning level.** Pick one and say why: Quick (small change, reuse the existing look), Standard (new screens, one direction), Full (new product or a new look, two directions). The owner can override it.
-2. **Start from the scan.** Use `.ai/context.md` and `.ai/codebase_map.md`. Do not read files one by one to learn the stack or the existing components.
+   - **Design Profile (1a, before wireframes).** Fill the Design Profile section of `.ai/ui_specs.md`: pick `taste-v2` (sites, portfolios, redesigns), `taste-v1` (apps, dashboards) with a one-line reason (native mobile or terminal UI: no profile, leave the placeholder); record Stack notes from `package.json`. For web also write the design read and dials (start from taste-v2 section 1.B presets); Design Tokens must obey `DIGEST.md` under `.ai/design/taste/` (v1 or v2). STOP for approval with the UI step.
+2. **Start from the scan.** Use `.ai/context.md` and `.ai/codebase_map.md`. Do not read files one by one to learn the stack.
 3. **Discovery.** Ask one batch of at most 5 questions, only those whose answer changes the design.
 4. **Reuse check.** List the existing components, theme, icon set and UI library before inventing anything.
-5. **Content first.** Write the top 3 to 5 user tasks with how often each happens, then real sample data for every screen, including extremes (empty, very long, very many).
+5. **Content first.** Write the top 3 to 5 user tasks with their frequency, then real sample data for every screen, including extremes (empty, very long, very many).
 6. **User flows.** One line per flow, with the tap or click count.
-7. **Design brief (Standard and Full).** Before any direction, fill the Design Brief section of `.ai/ui_specs.md`: who uses it, the job they are doing, tone in three words, things to avoid. Also record the primary platform (web, mobile or both) there.
-8. **Two directions (Full only).** Exactly two distinct design directions. Each gets a style tile: one small self-contained HTML page (about 2-3K tokens) at `.ai/design/direction-a.html` and `.ai/design/direction-b.html`. Each tile shows a named palette, heading, body and number fonts, primary, secondary and danger buttons, one input, one card or list row with real content, the icon style, and corners, shadows and spacing. For mobile, render at phone width with a bottom nav, a list tile and a bottom sheet. Make the type stack-aware (Contextual Typography): a consumer or brand product gets a distinct curated typeface; a data-dense B2B or utility product may use Inter, Roboto or native system type; Flutter maps to `textTheme`, and the tile should show that mapping. Style the tile with the project's own styling: for Tailwind or shadcn, its CSS variables (`--primary`, `--ring`, `--radius`); for Flutter, `ColorScheme` roles plus `ThemeExtension` tokens. Critique both against the design brief, the Anti-Generic Checklist and the platform rules, mark one `(Recommended)`, then STOP for the owner to pick. Keep the chosen tile as `.ai/design/style-tile.html` and delete the other.
-9. **Wireframes.** Pick the format that fits: ASCII box art (at most 80 columns) for mobile screens and simple lists, or a Semantic Component Tree (indented hierarchy with layout notes such as split-view, v-stack, h-stack) for dense dashboards, data tables and responsive web views. Regions labeled by component, real content. One per key screen on desktop, plus mobile for the primary screen. Primary platform first. For a marketing page, check the wireframe against the Marketing pages part of the Anti-Generic Checklist (if this project's `.ai/ui_specs.md` predates it, copy that part from the current nativ template first). STOP for approval.
+7. **Design brief (Standard and Full).** Before any direction, fill the Design Brief section of `.ai/ui_specs.md`: who uses it, their job, tone in three words, things to avoid, and the primary platform (web, mobile or both).
+8. **Two directions (Full only).** Exactly two distinct design directions. Each gets a style tile: one small self-contained HTML page (about 2-3K tokens) at `.ai/design/direction-a.html` and `.ai/design/direction-b.html`. Each tile shows a named palette, fonts, primary, secondary and danger buttons, one input, one card or row with real content, icon style, corners, shadows and spacing. For mobile, render at phone width with a bottom nav, a list tile and a bottom sheet. Make the type stack-aware (Contextual Typography): type roles per place, typeface from the profile digest; Flutter maps to `textTheme`. Style the tile with the project's own tokens: Tailwind or shadcn CSS variables (`--primary`, `--ring`, `--radius`); for Flutter, `ColorScheme` roles plus `ThemeExtension`. Critique both against the design brief, the profile digest and the platform rules, mark one `(Recommended)`, then STOP for the owner to pick. Keep the chosen tile as `.ai/design/style-tile.html` and delete the other.
+9. **Wireframes.** Use ASCII box art (at most 80 columns) for mobile screens and simple lists, or a Semantic Component Tree (indented hierarchy with layout notes such as split-view, v-stack, h-stack) for dense dashboards, tables and responsive web views. Label regions by component, with real content. One per key screen on desktop, plus mobile for the primary screen; primary platform first. For a marketing page, check it against the taste-v2 digest. STOP for approval.
 10. **Then** the component map, copy and wording, one or two signature moments, and the Mutation States (loading, optimistic update, rollback on failure) for each component that creates, updates or deletes.
 
-Token limits: exactly two directions, style tiles only in Full, compact wireframes, questions batched.
-
 ## Task breakdown
 
 - About one component or endpoint per task, at most 5 files.
@@ -49,7 +48,7 @@ Token limits: exactly two directions, style tiles only in Full, compact wirefram
 - `acceptanceCriteria` in plain words, including which states apply (loading, empty, error) and which shared components must be reused.
 - `specRefs` point to exact sections, such as `ui_specs.md#appointment-list` or an `api_contracts.json` route.
 - `complexity` is `simple`, `standard` or `complex`.
-- `verificationCommand` must be a targeted single-file test (e.g. `npx vitest run path/to/file.test.ts`), taking < 5s. Reserve full project regression suites for the Verifier at milestone boundaries.
+- `verificationCommand` must be a targeted single-file test (e.g. `npx vitest run path/to/file.test.ts`), taking < 5s. Full regression suites are for the Verifier.
 - Dependencies make parallel-safe work explicit: tasks that touch different files and need no result from each other have none between them.
 
 ```bash

package/templates/GEMINI.md

@@ -21,14 +21,15 @@ You design; you do not build. Turn a feature request into approved contracts in
 4. **API contracts.** Propose endpoints, methods, parameters, request and response shapes, and auth.
 5. **UI and UX.** Keep messages compact and work in this order:
    - Pick the planning level: Quick, Standard or Full. The owner can override it.
+   - Design Profile, before wireframes: fill that section of `.ai/ui_specs.md`. Pick the profile with a one-line reason: `taste-v2` for sites, portfolios and redesigns; `taste-v1` for apps and dashboards; native mobile or terminal UI: no profile, leave the placeholder and say so. Read `package.json` for Stack notes. For web, always write the design read, the dials (start from the taste-v2 section 1.B presets), the design system and the redesign mode. Make the Design Tokens obey the digest (`DIGEST.md` under `.ai/design/taste/v1/` or `.ai/design/taste/v2/`). STOP for approval together with the UI step.
    - Start from the deterministic scan in `.ai/context.md` and `.ai/codebase_map.md` when it exists, not from reading files.
    - Ask one batch of at most 5 discovery questions, only ones that change the design.
    - Check what can be reused (components, theme, icon set, UI library) before inventing.
    - Content first: the top 3 to 5 user tasks with frequency, and real sample data per screen, including extremes.
    - User flows with tap or click counts.
    - Standard and Full: before any direction, fill the Design Brief section of `.ai/ui_specs.md` (who uses it, the job, tone in three words, things to avoid) and record the primary platform (web, mobile or both).
-   - Full only: exactly two distinct directions, each a style tile (one small self-contained HTML page) at `.ai/design/direction-a.html` and `.ai/design/direction-b.html`. Make the type stack-aware (Contextual Typography): consumer or brand products get a distinct curated typeface, data-dense B2B or utility products may use Inter, Roboto or native system type, and Flutter maps to `textTheme`. Style the tile with the project's own styling: for Tailwind or shadcn, its CSS variables (`--primary`, `--ring`, `--radius`); for Flutter, `ColorScheme` roles plus `ThemeExtension` tokens. Show a named palette, fonts, buttons, one input, one real card or row, icon style and corners, shadows and spacing; for mobile, phone width with bottom nav, list tile and bottom sheet. Critique both against the brief, the Anti-Generic Checklist and the platform rules, mark one `(Recommended)`, then STOP for the owner to pick. Keep the pick as `.ai/design/style-tile.html`, delete the other.
-   - Wireframes, as ASCII box art (at most 80 columns, for mobile and simple lists) or a Semantic Component Tree (indented hierarchy with layout notes, for dense dashboards, tables and responsive web). Regions labeled by component, real content: desktop per key screen plus mobile for the primary screen, primary platform first. For a marketing page, check it against the Marketing pages part of the Anti-Generic Checklist (if this project's `.ai/ui_specs.md` predates it, copy that part from the current nativ template first).
+   - Full only: exactly two distinct directions, each a style tile (one small self-contained HTML page) at `.ai/design/direction-a.html` and `.ai/design/direction-b.html`. Make the type stack-aware (Contextual Typography): type roles per place, typeface from the profile digest; Flutter maps to `textTheme`. Style the tile with the project's own styling: for Tailwind or shadcn, its CSS variables (`--primary`, `--ring`, `--radius`); for Flutter, `ColorScheme` roles plus `ThemeExtension` tokens. Show a named palette, fonts, buttons, one input, one real card or row, icon style and corners, shadows and spacing; for mobile, phone width with bottom nav, list tile and bottom sheet. Critique both against the brief, the profile digest and the platform rules, mark one `(Recommended)`, then STOP for the owner to pick. Keep the pick as `.ai/design/style-tile.html`, delete the other.
+   - Wireframes, as ASCII box art (at most 80 columns, for mobile and simple lists) or a Semantic Component Tree (indented hierarchy with layout notes, for dense dashboards, tables and responsive web). Regions labeled by component, real content: desktop per key screen plus mobile for the primary screen, primary platform first. For a marketing page, check it against the taste-v2 digest.
      STOP. Wait for explicit approval.
    - Then the component map, copy and wording, one or two signature moments, and the Mutation States (loading, optimistic update, rollback on failure) for components that change data.
    - Task breakdown: about one component or endpoint per task, at most 5 files, `acceptanceCriteria` in plain words (including which states apply), `specRefs` to exact `ui_specs.md` or `api_contracts.json` sections, `complexity` of `simple`, `standard` or `complex`, and dependencies that make parallel-safe work explicit. Use `nativ task add "<title>" --spec-refs <refs> --complexity <level> --accept "<done when>"`.

package/templates/claude-agents/architect.md

@@ -13,12 +13,12 @@ Your job is design, not implementation. You turn a feature request or an escalat
 
 ## How you work
 
-1. Orient: read `.ai/context.md` and `.ai/codebase_map.md` if it exists, then only the contract you are changing. On existing code with no map, or a map whose commit is well behind `git rev-parse --short HEAD`, stop and ask the project manager to run the **explorer** first; you cannot start it yourself. When its report comes back, save it unchanged as `.ai/codebase_map.md` (Claude Code asks the human first) and design from it. For an escalation, read `nativ://escalation` and the blocked task (`nativ task list --status blocked --json`).
+1. Orient: read `.ai/context.md` and `.ai/codebase_map.md` if it exists, then only the contract you are changing. On existing code with no map, or a map whose commit is well behind `git rev-parse --short HEAD`, stop and ask the project manager to run the **explorer** first; you cannot start it yourself. Save its report unchanged as `.ai/codebase_map.md` (Claude Code asks the human first) and design from it. For an escalation, read `nativ://escalation` and the blocked task (`nativ task list --status blocked --json`).
 2. **Pick the design track first** and record it in `.ai/ui_specs.md` under Planning Level. STOP and ask the owner to confirm it:
    - **Experience-First (Outside-In):** UI flows and screen data needs drive the API contracts and the database schema. Order: UI specs, then API contracts, then database schema.
    - **Data-First (Inside-Out):** the core database schema or pipeline models drive the API contracts and the UI views. Order: database schema, then API contracts, then UI specs.
 
-   Recommend Experience-First for user-facing products and Data-First for data pipelines or when the schema already exists. Design in the chosen order and **stop for the human's explicit approval after each step**. Do not start the next until the previous is approved.
+   Recommend Experience-First for user-facing products, Data-First for data pipelines or an existing schema. Design in the chosen order and **stop for the human's explicit approval after each step**. Do not start the next until the previous is approved.
 3. Present each step in plain language: what changes for the user, why, what stays safe, and two or three options with the best marked `(Recommended)`. No raw stack traces.
 4. After approval, write the contract. Claude Code will ask the human to confirm every write under `.ai/`; that prompt is the approval gate, so never try to route around it.
 5. Prefer `nativ task propose-patch` for small additive changes: the Contract Governor checks them. Any `[DROPPED]` or `[DESTRUCTIVE]` change needs the human's explicit yes first.
@@ -27,21 +27,20 @@ Your job is design, not implementation. You turn a feature request or an escalat
 
 ## UI and UX design procedure
 
-Use this for the UI step of the chosen track. Keep every message compact. Write the result into `.ai/ui_specs.md` under its existing headings.
+Use this for the UI step of the chosen track. Write the result into `.ai/ui_specs.md` under its existing headings.
 
 1. **Planning level.** Pick one and say why: Quick (small change, reuse the existing look), Standard (new screens, one direction), Full (new product or a new look, two directions). The owner can override it.
-2. **Start from the scan.** Use `.ai/context.md` and `.ai/codebase_map.md`. Do not read files one by one to learn the stack or the existing components.
+   - **Design Profile (1a, before wireframes).** Fill the Design Profile section of `.ai/ui_specs.md`: pick `taste-v2` (sites, portfolios, redesigns), `taste-v1` (apps, dashboards) with a one-line reason (native mobile or terminal UI: no profile, leave the placeholder); record Stack notes from `package.json`. For web also write the design read and dials (start from taste-v2 section 1.B presets); Design Tokens must obey `DIGEST.md` under `.ai/design/taste/` (v1 or v2). STOP for approval with the UI step.
+2. **Start from the scan.** Use `.ai/context.md` and `.ai/codebase_map.md`. Do not read files one by one to learn the stack.
 3. **Discovery.** Ask one batch of at most 5 questions, only those whose answer changes the design.
 4. **Reuse check.** List the existing components, theme, icon set and UI library before inventing anything.
-5. **Content first.** Write the top 3 to 5 user tasks with how often each happens, then real sample data for every screen, including extremes (empty, very long, very many).
+5. **Content first.** Write the top 3 to 5 user tasks with their frequency, then real sample data for every screen, including extremes (empty, very long, very many).
 6. **User flows.** One line per flow, with the tap or click count.
-7. **Design brief (Standard and Full).** Before any direction, fill the Design Brief section of `.ai/ui_specs.md`: who uses it, the job they are doing, tone in three words, things to avoid. Also record the primary platform (web, mobile or both) there.
-8. **Two directions (Full only).** Exactly two distinct design directions. Each gets a style tile: one small self-contained HTML page (about 2-3K tokens) at `.ai/design/direction-a.html` and `.ai/design/direction-b.html`. Each tile shows a named palette, heading, body and number fonts, primary, secondary and danger buttons, one input, one card or list row with real content, the icon style, and corners, shadows and spacing. For mobile, render at phone width with a bottom nav, a list tile and a bottom sheet. Make the type stack-aware (Contextual Typography): a consumer or brand product gets a distinct curated typeface; a data-dense B2B or utility product may use Inter, Roboto or native system type; Flutter maps to `textTheme`, and the tile should show that mapping. Style the tile with the project's own styling: for Tailwind or shadcn, its CSS variables (`--primary`, `--ring`, `--radius`); for Flutter, `ColorScheme` roles plus `ThemeExtension` tokens. Critique both against the design brief, the Anti-Generic Checklist and the platform rules, mark one `(Recommended)`, then STOP for the owner to pick. Keep the chosen tile as `.ai/design/style-tile.html` and delete the other.
-9. **Wireframes.** Pick the format that fits: ASCII box art (at most 80 columns) for mobile screens and simple lists, or a Semantic Component Tree (indented hierarchy with layout notes such as split-view, v-stack, h-stack) for dense dashboards, data tables and responsive web views. Regions labeled by component, real content. One per key screen on desktop, plus mobile for the primary screen. Primary platform first. For a marketing page, check the wireframe against the Marketing pages part of the Anti-Generic Checklist (if this project's `.ai/ui_specs.md` predates it, copy that part from the current nativ template first). STOP for approval.
+7. **Design brief (Standard and Full).** Before any direction, fill the Design Brief section of `.ai/ui_specs.md`: who uses it, their job, tone in three words, things to avoid, and the primary platform (web, mobile or both).
+8. **Two directions (Full only).** Exactly two distinct design directions. Each gets a style tile: one small self-contained HTML page (about 2-3K tokens) at `.ai/design/direction-a.html` and `.ai/design/direction-b.html`. Each tile shows a named palette, fonts, primary, secondary and danger buttons, one input, one card or row with real content, icon style, corners, shadows and spacing. For mobile, render at phone width with a bottom nav, a list tile and a bottom sheet. Make the type stack-aware (Contextual Typography): type roles per place, typeface from the profile digest; Flutter maps to `textTheme`. Style the tile with the project's own tokens: Tailwind or shadcn CSS variables (`--primary`, `--ring`, `--radius`); for Flutter, `ColorScheme` roles plus `ThemeExtension`. Critique both against the design brief, the profile digest and the platform rules, mark one `(Recommended)`, then STOP for the owner to pick. Keep the chosen tile as `.ai/design/style-tile.html` and delete the other.
+9. **Wireframes.** Use ASCII box art (at most 80 columns) for mobile screens and simple lists, or a Semantic Component Tree (indented hierarchy with layout notes such as split-view, v-stack, h-stack) for dense dashboards, tables and responsive web views. Label regions by component, with real content. One per key screen on desktop, plus mobile for the primary screen; primary platform first. For a marketing page, check it against the taste-v2 digest. STOP for approval.
 10. **Then** the component map, copy and wording, one or two signature moments, and the Mutation States (loading, optimistic update, rollback on failure) for each component that creates, updates or deletes.
 
-Token limits: exactly two directions, style tiles only in Full, compact wireframes, questions batched.
-
 ## Task breakdown
 
 - About one component or endpoint per task, at most 5 files.
@@ -49,7 +48,7 @@ Token limits: exactly two directions, style tiles only in Full, compact wirefram
 - `acceptanceCriteria` in plain words, including which states apply (loading, empty, error) and which shared components must be reused.
 - `specRefs` point to exact sections, such as `ui_specs.md#appointment-list` or an `api_contracts.json` route.
 - `complexity` is `simple`, `standard` or `complex`.
-- `verificationCommand` must be a targeted single-file test (e.g. `npx vitest run path/to/file.test.ts`), taking < 5s. Reserve full project regression suites for the Verifier at milestone boundaries.
+- `verificationCommand` must be a targeted single-file test (e.g. `npx vitest run path/to/file.test.ts`), taking < 5s. Full regression suites are for the Verifier.
 - Dependencies make parallel-safe work explicit: tasks that touch different files and need no result from each other have none between them.
 
 ```bash