@njeybe/nativ 2.1.0 → 2.3.0

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

@@ -0,0 +1,9 @@
+import { formatScript } from './format.js';
+import { modelScript } from './model.js';
+import { sidebarViewScript } from './sidebar-view.js';
+import { paletteViewScript } from './palette-view.js';
+import { detailViewScript } from './detail-view.js';
+// Everything that needs no DOM; the test harness runs exactly this in node:vm.
+export const pureScript = [formatScript, modelScript, sidebarViewScript, paletteViewScript, detailViewScript].join('');
+/** Runs a page script in its own function scope with the Studio API. */
+export const wrapPage = (script) => `  (function (Studio) {\n${script}\n  })(Studio);\n`;

package/dist/server/studio-ui/shell/router.d.ts

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

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

@@ -0,0 +1,95 @@
+// Routing, shell-wide click handling, theme toggle and live timers.
+export const routerScript = String.raw `  // ─── Router and shell-wide events ──────────────────────────────────────────
+  function pageIds() { return Studio.order.map(function (p) { return p.id; }); }
+
+  function setView(view) {
+    Studio.state.view = view;
+    Studio.order.forEach(function (p) {
+      var el = $('panel-' + p.id);
+      if (el) el.hidden = p.id !== view;
+      if (p.id === view) $('crumb-view').textContent = p.label;
+    });
+    if (location.hash !== '#' + view && window.history && history.replaceState) history.replaceState(null, '', '#' + view);
+    paintChrome();
+    var def = Studio.pages[view];
+    if (def && def.onShow) def.onShow();
+    paintPage(view);
+  }
+
+  Studio.go = function (view, opts) {
+    opts = opts || {};
+    if (!Studio.pages[view]) return;
+    var S = Studio.state;
+    if (!opts.keepDetail) closeDetail(true);
+    if (opts.milestoneId) S.milestoneId = opts.milestoneId;
+    S.focusTaskId = opts.focusTaskId || null;
+    setView(view);
+    if (opts.scroll !== false) window.scrollTo(0, 0);
+  };
+
+  window.addEventListener('hashchange', function () {
+    var v = Studio.resolveHash(location.hash, pageIds());
+    if (v !== Studio.state.view) Studio.go(v);
+  });
+
+  function currentActions() {
+    var def = Studio.pages[Studio.state.view];
+    return (def && def.actions) || {};
+  }
+
+  $('main').addEventListener('click', function (e) {
+    var t = e.target;
+    var task = t.closest('[data-task]');
+    if (task) { openDetail(task.getAttribute('data-task')); return; }
+    var go = t.closest('[data-go]');
+    if (go) { Studio.go(go.getAttribute('data-go')); return; }
+    var ms = t.closest('[data-ms]');
+    if (ms) { Studio.go('tasks', { milestoneId: ms.getAttribute('data-ms') }); return; }
+    var act = t.closest('[data-act]');
+    if (!act || act.disabled) return;
+    var name = act.getAttribute('data-act');
+    var handler = currentActions()[name];
+    if (handler) handler(act, pageCtx($('panel-' + Studio.state.view)));
+    else if (name === 'retry' && PIPE_PATHS[act.getAttribute('data-key')]) fetchPipeline([act.getAttribute('data-key')]);
+  });
+  $('side-nav').addEventListener('click', function (e) {
+    var go = e.target.closest('[data-go]');
+    if (go) Studio.go(go.getAttribute('data-go'));
+  });
+
+  $('main').addEventListener('change', function (e) {
+    if (!e.target.hasAttribute || !e.target.hasAttribute('data-ms-select')) return;
+    Studio.state.milestoneId = e.target.value;
+    Studio.state.focusTaskId = null;
+    repaintFor(null);
+  });
+
+  $('banner-retry').addEventListener('click', function () {
+    fetchPipeline(ALL_PARTS);
+    connectEvents();
+  });
+
+  function applyTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    try { localStorage.setItem('nativ-studio:theme', theme); } catch (e) { /* private mode */ }
+  }
+  $('btn-theme').addEventListener('click', function () {
+    var root = document.documentElement;
+    var dark = window.matchMedia && matchMedia('(prefers-color-scheme: dark)').matches;
+    var cur = root.getAttribute('data-theme') || (dark ? 'dark' : 'light');
+    applyTheme(cur === 'dark' ? 'light' : 'dark');
+  });
+
+  // Live timers: any element with data-since counts up from that moment.
+  setInterval(function () {
+    var now = Studio.now();
+    document.querySelectorAll('[data-since]').forEach(function (el) {
+      el.textContent = fmt.dur(now - Number(el.getAttribute('data-since')));
+    });
+  }, 1000);
+
+  Studio.api = api;
+  Studio.postJson = postJson;
+  Studio.toast = function (message, kind) { toast(message, kind); };
+
+`;

package/dist/server/studio-ui/shell/sidebar-view.d.ts

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

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

@@ -0,0 +1,38 @@
+// Pure sidebar markup: grouped navigation with badges, and the workspace footer.
+export const sidebarViewScript = String.raw `  // ─── Sidebar markup (pure) ──────────────────────────────────────────────────
+  var NAV_GROUPS = [['now', 'Now'], ['project', 'Project'], ['system', 'System']];
+
+  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];
+    if (env.worktreeCount != null) badges.worktrees = ['', env.worktreeCount];
+    if (env.benchmarkText) badges.benchmarks = ['', env.benchmarkText];
+    return badges;
+  }
+
+  /** env = { model, view, worktreeCount, benchmarkText }. */
+  Studio.sidebarHtml = function (env) {
+    var badges = navBadges(env);
+    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) +
+        '<span class="nav-text">' + esc(p.label) + '</span>' +
+        (b ? '<span class="nav-badge' + (b[0] ? ' ' + b[0] : '') + '">' + esc(b[1]) + '</span>' : '') + '</button>';
+    };
+    var groups = NAV_GROUPS.map(function (g) {
+      var items = Studio.order.filter(function (p) { return p.group === g[0]; });
+      if (!items.length) return '';
+      return '<div class="nav-group"><div class="nav-glabel">' + g[1] + '</div>' + items.map(item).join('') + '</div>';
+    }).join('');
+    return '<nav class="nav" aria-label="Studio">' + groups + '</nav>';
+  };
+
+  /** 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>';
+  };
+
+`;

package/dist/server/studio-ui/shell/sync.d.ts

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

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

@@ -0,0 +1,120 @@
+// Live sync over the event stream.
+export const syncScript = String.raw `  // ─── Real-time sync: EventSource on /api/events ────────────────────────────
+  var live = { mode: 'connecting', es: null, retry: 0, timer: null, lastBeat: 0, sawBeat: false, opened: false };
+  var LIVE_TEXT = { connecting: 'Connecting', live: 'Live', offline: 'Reconnecting' };
+  // Keys are SSE event names on the wire; values are the pipeline slices each one invalidates.
+  var EVENT_PARTS = {
+    // .ai/escalation.json writes (circuit-breaker trips, resolutions) arrive as plan changes.
+    'plan_change': ['status', 'tasks', 'worktrees', 'escalations', 'triage'],
+    // The server also reports .ai/benchmark_report.json writes (e.g. a CLI "nativ bench") as telemetry changes.
+    'telemetry_change': ['status', 'benchmarks', 'telemetry'],
+    'benchmark_change': ['benchmarks'],
+    'worktree_change': ['worktrees']
+  };
+
+  function setLive(mode, detail) {
+    live.mode = mode;
+    var el = $('live');
+    el.setAttribute('data-state', mode);
+    $('live-label').textContent = LIVE_TEXT[mode];
+    el.title = detail || (mode === 'live' ? 'Receiving real-time updates from /api/events' : '');
+    paintChrome();
+  }
+
+  function flashLive() {
+    var dot = $('live-dot');
+    dot.classList.remove('flash');
+    void dot.offsetWidth;
+    dot.classList.add('flash');
+  }
+
+  // fs.watch fires several events per write; batch them into one refetch.
+  var queuedParts = {}, queueTimer = null;
+  function queueRefresh(parts) {
+    parts.forEach(function (p) { queuedParts[p] = true; });
+    clearTimeout(queueTimer);
+    queueTimer = setTimeout(function () {
+      var list = Object.keys(queuedParts);
+      queuedParts = {};
+      fetchPipeline(list);
+    }, 150);
+  }
+
+  function onStreamEvent(type) {
+    live.lastBeat = Date.now();
+    if (type === 'heartbeat' || type === 'ping') { live.sawBeat = true; return; }
+    var parts = EVENT_PARTS[type];
+    if (!parts) return;
+    flashLive();
+    queueRefresh(parts);
+    if (parts.indexOf('worktrees') !== -1) queueConsoleDiff();
+  }
+
+  function connectEvents() {
+    clearTimeout(live.timer);
+    if (typeof window.EventSource !== 'function') {
+      setLive('offline', 'This browser has no EventSource support; refreshing every 15 seconds instead.');
+      setInterval(function () { fetchPipeline(ALL_PARTS); }, 15000);
+      return;
+    }
+    if (live.es) live.es.close();
+    setLive('connecting');
+    var es = new EventSource('/api/events');
+    live.es = es;
+    es.onopen = function () {
+      live.retry = 0;
+      live.lastBeat = Date.now();
+      setLive('live');
+      // Catch up on anything written while the stream was down.
+      if (live.opened) queueRefresh(ALL_PARTS);
+      live.opened = true;
+    };
+    es.onerror = function () {
+      if (es.readyState === EventSource.CLOSED) scheduleReconnect();
+      else setLive('connecting', 'Reconnecting to /api/events');
+    };
+    // Unnamed events may carry the type in a JSON payload: { "type": "plan_change" }.
+    es.onmessage = function (e) {
+      var type = 'message';
+      try { type = JSON.parse(e.data).type || type; } catch (err) { /* plain-text payload */ }
+      onStreamEvent(type);
+    };
+    Object.keys(EVENT_PARTS).concat(['heartbeat', 'ping']).forEach(function (name) {
+      es.addEventListener(name, function () { onStreamEvent(name); });
+    });
+    // Runner events carry a payload, so they bypass the slice-invalidation table.
+    es.addEventListener('runner_status', function (e) {
+      live.lastBeat = Date.now();
+      flashLive();
+      onRunnerStatus(parseEventData(e));
+    });
+    es.addEventListener('runner_log', function (e) {
+      live.lastBeat = Date.now();
+      onRunnerLog(parseEventData(e));
+    });
+    // Native engine: one event per API turn with the delta and the run's running total.
+    es.addEventListener('runner_token_usage', function (e) {
+      live.lastBeat = Date.now();
+      flashLive();
+      onRunnerUsage(parseEventData(e));
+    });
+  }
+
+  function parseEventData(e) {
+    try { return JSON.parse(e.data); } catch (err) { return null; }
+  }
+
+  function scheduleReconnect() {
+    if (live.es) { live.es.close(); live.es = null; }
+    var delay = Math.min(30000, 1000 * Math.pow(2, live.retry++));
+    setLive('offline', 'Live stream unavailable; retrying in ' + Math.round(delay / 1000) + 's');
+    clearTimeout(live.timer);
+    live.timer = setTimeout(connectEvents, delay);
+  }
+
+  // Heartbeat watchdog: armed only once the server has shown it sends heartbeats.
+  setInterval(function () {
+    if (live.es && live.sawBeat && Date.now() - live.lastBeat > 45000) scheduleReconnect();
+  }, 15000);
+
+`;

package/dist/server/studio-ui/shell/toasts-format.d.ts

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

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

@@ -0,0 +1,89 @@
+// Toasts and formatting helpers.
+export const toastsFormatScript = String.raw `  // ─── Toasts ────────────────────────────────────────────────────────────────
+  function hintFor(message) {
+    var m = String(message || '');
+    if (/ECONNREFUSED|ETIMEDOUT|timeout|EHOSTUNREACH/i.test(m)) return 'Check that the database server is running and the host/port are reachable from this machine.';
+    if (/ENOTFOUND|getaddrinfo/i.test(m)) return 'The hostname could not be resolved. Verify the host in your connection string.';
+    if (/password|authentication|access denied/i.test(m)) return 'Credentials were rejected. Re-enter the connection string in Connection Settings.';
+    if (/unable to open database file/i.test(m)) return 'The SQLite file was not found. Check the path relative to where nativ was started.';
+    if (/not configured|NOT_CONNECTED/i.test(m)) return 'Open Connection Settings to connect a database.';
+    if (/default credentials|UNAUTHENTICATED|PERMISSION_DENIED/i.test(m)) return 'For Firestore, run "gcloud auth application-default login" or connect to the emulator instead.';
+    if (/Server selection timed out|MongoServerSelectionError/i.test(m)) return 'MongoDB did not respond. Check the host, port, and network access list.';
+    return '';
+  }
+
+  function toast(message, kind) {
+    var el = document.createElement('div');
+    el.className = 'toast' + (kind === 'ok' ? ' ok' : '');
+    var hint = kind === 'ok' ? '' : hintFor(message);
+    el.innerHTML = '<div class="t-body"><div>' + esc(message) + '</div>' + (hint ? '<div class="t-hint">' + esc(hint) + '</div>' : '') +
+      '</div><button type="button" aria-label="Dismiss">×</button>';
+    el.querySelector('button').addEventListener('click', function () { el.remove(); });
+    $('toasts').appendChild(el);
+    setTimeout(function () { el.remove(); }, kind === 'ok' ? 3500 : 8000);
+  }
+
+  function flashCopied(button) {
+    var wrap = button.parentElement;
+    var tip = wrap && wrap.querySelector('.tooltip');
+    if (!tip) return;
+    tip.classList.add('show');
+    setTimeout(function () { tip.classList.remove('show'); }, 1200);
+  }
+
+  function copyText(text, button) {
+    var done = function () { flashCopied(button); };
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(done, function () { fallbackCopy(text); done(); });
+    } else { fallbackCopy(text); done(); }
+  }
+
+  function fallbackCopy(text) {
+    var ta = document.createElement('textarea');
+    ta.value = text; ta.setAttribute('readonly', ''); ta.style.position = 'fixed'; ta.style.opacity = '0';
+    document.body.appendChild(ta); ta.select();
+    try { document.execCommand('copy'); } catch (e) { /* ignore */ }
+    ta.remove();
+  }
+
+  // ─── Formatting ────────────────────────────────────────────────────────────
+  function num(n) {
+    if (n == null || n === '' || isNaN(n)) return '–';
+    return Number(n).toLocaleString('en-US', { maximumFractionDigits: 3 });
+  }
+  function usd(n) {
+    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 < 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';
+  }
+  function clampPct(v) { return Math.max(0, Math.min(100, Math.round(Number(v) || 0))); }
+  /** Telemetry stores the gatekeeper pass rate as a 0..1 ratio; tolerate a 0..100 percentage too. */
+  function passRatePct(v) {
+    if (v == null || isNaN(v)) return null;
+    return clampPct(v <= 1 ? v * 100 : v);
+  }
+  function fmtDate(iso) {
+    var d = new Date(iso);
+    if (isNaN(d.getTime())) return String(iso);
+    try { return d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' }); } catch (e) { return d.toLocaleString(); }
+  }
+  function humanize(key) {
+    var words = String(key).replace(/[_-]+/g, ' ').replace(/([a-z0-9])([A-Z])/g, '$1 $2').toLowerCase();
+    words = words.replace(/ ms$/, ' (ms)').replace(/ usd$/, ' (USD)');
+    return words.charAt(0).toUpperCase() + words.slice(1);
+  }
+  function detailValue(v) {
+    if (typeof v === 'boolean') return v ? 'Yes' : 'No';
+    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);
+  }
+
+`;

package/dist/server/studio-ui/shell/triage.d.ts

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

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

@@ -0,0 +1,210 @@
+// Tier 1 strategist.
+export const triageScript = String.raw `  // ─── Tier 1 AI Strategist (/api/pipeline/triage/*, ui_specs.md §5) ─────────
+  /** Decision-card selection for the escalation on screen; survives re-renders from live updates. */
+  var t1Choice = { escalationId: null, index: 0, custom: '' };
+
+  /** "gemini-3.8-flash" -> "Gemini 3.8 Flash". */
+  function modelName(id) {
+    return String(id || 'gemini').split('-').map(function (w) { return w.charAt(0).toUpperCase() + w.slice(1); }).join(' ');
+  }
+  function triageRunningCount() { return Object.keys(pipe.triageRunning).length; }
+  /** Pending escalations whose stored Tier 1 verdict asks the product owner to decide. */
+  function awaitingDecision() {
+    return (pipe.escalations || []).filter(function (e) {
+      return e.status === 'pending_review' && e.triage && e.triage.classification === 'REQUIRE_HUMAN_DECISION';
+    });
+  }
+  function lastTriage() {
+    if (pipe.triageLast) return pipe.triageLast;
+    var newest = null;
+    (pipe.escalations || []).forEach(function (e) {
+      if (e.triage && (!newest || String(e.triage.evaluatedAt) > String(newest.evaluatedAt))) newest = e.triage;
+    });
+    return newest;
+  }
+
+  function renderTriageChip() {
+    var t = pipe.triage;
+    var model = (t && t.model) || 'gemini-3.8-flash';
+    var waiting = awaitingDecision().length;
+    var state = triageRunningCount() ? 'triaging' : waiting ? 'attention' : 'idle';
+    var chip = $('t1-chip');
+    chip.setAttribute('data-state', state);
+    chip.title = state === 'triaging' ? 'Tier 1 AI Strategist is assessing an escalation'
+      : state === 'attention' ? waiting + ' escalation' + (waiting === 1 ? ' needs' : 's need') + ' your decision' : 'Tier 1 AI Strategist';
+    $('t1-chip-model').textContent = modelName(model);
+    $('t1-model').textContent = model;
+    var last = lastTriage();
+    $('t1-latency').textContent = last ? fmtMs(last.latencyMs) + ' · ' + modelName(last.model || model) : 'No evaluations yet';
+    $('t1-key').textContent = pipe.errors.triage && !t ? 'Status unavailable' : !t ? 'Checking' : t.hasApiKey ? 'Configured' : 'Not set (offline rules)';
+    var sw = $('t1-auto');
+    var on = !!(t && t.autoTriageEnabled);
+    sw.setAttribute('aria-checked', String(on));
+    sw.textContent = on ? 'ON' : 'OFF';
+    sw.disabled = !t || !!pipe.busy.triageConfig;
+    var stats = (t && t.stats) || {};
+    $('t1-evaluated').textContent = num(stats.totalEvaluated || 0);
+    $('t1-resolved').textContent = num(stats.autoResolved || 0);
+    $('t1-human').textContent = num(stats.escalatedToHuman || 0);
+  }
+
+  function setTriageMenu(open) {
+    var menu = $('t1-menu');
+    if (menu.hidden === !open) return;
+    menu.hidden = !open;
+    $('t1-chip').setAttribute('aria-expanded', String(open));
+    if (!open) return;
+    renderTriageChip();
+    fetchPipeline(['triage']);
+    ($('t1-auto').disabled ? menu : $('t1-auto')).focus();
+  }
+
+  function setAutoTriage(enabled) {
+    if (pipe.busy.triageConfig) return;
+    pipe.busy.triageConfig = true;
+    renderTriageChip();
+    postJson('/api/pipeline/triage/config', { autoTriageEnabled: enabled }).then(function (body) {
+      pipe.triage = Object.assign({}, pipe.triage || {}, { autoTriageEnabled: !!(body.config && body.config.autoTriageEnabled) });
+      toast(enabled ? 'Autonomous Auto-Triage on: fixes Tier 1 proves safe are applied without asking' : 'Autonomous Auto-Triage off: every fix waits for your approval', 'ok');
+    }, function (e) {
+      toast('Could not change Autonomous Auto-Triage: ' + e.message);
+    }).then(function () {
+      pipe.busy.triageConfig = false;
+      renderTriageChip();
+      if (rc.tab === 'heal') renderHeal();
+    });
+  }
+
+  /** Asks the strategist to assess one escalation. The server stores the verdict on the escalation record. */
+  function runTriage(escalation) {
+    if (!escalation || pipe.triageRunning[escalation.id]) return;
+    var taskId = escalation.taskId;
+    pipe.triageRunning[escalation.id] = taskId;
+    rc.heal = { taskId: taskId, busy: true, result: null };
+    renderTriageChip();
+    renderHeal();
+    refreshUi([]);
+    postJson('/api/pipeline/triage/evaluate', { escalationId: escalation.id }).then(function (body) {
+      pipe.triageLast = { latencyMs: body.latencyMs, model: body.model };
+      t1Choice.escalationId = null; // a re-run may bring new options
+      rc.heal = { taskId: taskId, busy: false, result: null, triage: body, escalation: escalation };
+      if (body.autoPatchApplied) {
+        pipe.triageRecent[taskId] = Date.now();
+        setTimeout(function () { delete pipe.triageRecent[taskId]; }, 12000);
+        toast('Tier 1 auto-resolved ' + escalation.id + ' in ' + fmtMs(body.latencyMs), 'ok');
+      } else if (body.classification === 'REQUIRE_HUMAN_DECISION') {
+        toast(escalation.id + ' needs your decision', 'ok');
+      }
+      // A resolved escalation leaves the pending list; keep its stored verdict (applied patch, unblock) on screen.
+      return api('/api/pipeline/escalations?status=all').then(function (list) {
+        (list.escalations || []).some(function (e) {
+          if (e.id !== escalation.id) return false;
+          if (rc.heal && rc.heal.triage === body) rc.heal.escalation = e;
+          return true;
+        });
+      }, function () { /* the evaluate response is enough to render */ });
+    }, function (e) {
+      rc.heal = { taskId: taskId, busy: false, result: { ok: false, message: 'Tier 1 triage failed: ' + e.message } };
+      toast('Tier 1 triage failed for ' + escalation.id + ': ' + e.message);
+    }).then(function () {
+      delete pipe.triageRunning[escalation.id];
+      renderTriageChip();
+      renderHeal();
+      refreshUi([]);
+      return fetchPipeline(['escalations', 'triage', 'status', 'tasks', 'telemetry']);
+    });
+  }
+
+  /** Verdict for the console task: this tab's latest evaluation first, else the one stored on the escalation. */
+  function triageFor(escalation, heal) {
+    if (heal && heal.triage) {
+      var stored = heal.escalation || escalation;
+      return { verdict: (stored && stored.triage) || heal.triage, escalation: stored };
+    }
+    if (escalation && escalation.triage) return { verdict: escalation.triage, escalation: escalation };
+    return null;
+  }
+
+  function triageStrip(escalation, hasVerdict) {
+    var running = !!pipe.triageRunning[escalation.id];
+    var text = running ? 'is assessing this escalation' : hasVerdict ? 'has assessed this escalation. Run it again after the contracts change.'
+      : 'can assess this escalation: resolve a safe fix automatically or prepare a decision card for you.';
+    return '<div class="t1-strip' + (running ? ' is-triaging' : '') + '" role="status"><span>' + ICON.spark + '<strong>Tier 1 AI Strategist</strong> ' + esc(text) + '</span>' +
+      '<button class="rc-btn t1-run" type="button" data-heal="t1-run"' + (running ? ' disabled' : '') + '>' +
+      (running ? '<span class="spinner" aria-hidden="true"></span>Triaging…' : hasVerdict ? 'Re-run Triage' : 'Run Tier 1 Triage') + '</button></div>';
+  }
+
+  function triageVerdictHtml(v, escalation) {
+    var meta = modelName(v.model) + ' in ' + fmtMs(v.latencyMs);
+    if (v.classification === 'AUTO_RESOLVE' && v.autoPatchApplied) {
+      var patch = (v.resolution && v.resolution.patch) || (escalation.proposedPatch && escalation.proposedPatch.candidate);
+      var unblocked = v.unblockedTaskId || (escalation.resolution && escalation.resolution.unblockedTaskId);
+      return '<p class="t1-banner is-resolved" role="status">' + ICON.spark + esc('Auto-Resolved by Tier 1 AI Strategist (' + meta + ')') + '</p>' +
+        (patch ? '<section class="heal-section"><h4>Applied contract modification</h4><pre class="heal-patch">' + patchLine('+', patch) + '</pre></section>' : '') +
+        '<p class="heal-diag"><strong>Auto-unblocking:</strong> ' +
+        esc(unblocked ? 'Task ' + unblocked + ' is back in the queue and can be dispatched again.' : 'The task was not blocked, so nothing needed unblocking.') +
+        (v.reasoning ? ' ' + esc(v.reasoning) : '') + '</p>';
+    }
+    if (v.classification === 'AUTO_RESOLVE') {
+      var auto = !!(pipe.triage && pipe.triage.autoTriageEnabled);
+      var next = escalation.proposedPatch
+        ? 'Nothing was written yet. Approve the proposal below' + (auto ? '.' : ', or turn on Autonomous Auto-Triage and run triage again.')
+        : 'No contract change is needed. Approve below to unblock the task.';
+      return '<p class="t1-banner is-safe" role="status">' + ICON.spark + esc('Tier 1 AI Strategist: safe to resolve (' + meta + ')') + '</p>' +
+        '<p class="heal-diag">' + esc((v.reasoning ? v.reasoning + ' ' : '') + next) + '</p>';
+    }
+    return humanCardHtml(v, escalation, meta);
+  }
+
+  /** ui_specs.md §5.2: amber 4-part card. Options are selectable; the footer commits the choice. */
+  function humanCardHtml(v, escalation, meta) {
+    var card = v.humanCard || {};
+    var options = Array.isArray(card.options) ? card.options : [];
+    var recorded = escalation.humanDecision || null;
+    if (t1Choice.escalationId !== escalation.id) {
+      var pick = 0;
+      options.some(function (o, i) { if (o.recommended) { pick = i; return true; } return false; });
+      if (recorded) options.some(function (o, i) { if (o.id === recorded.optionId) { pick = i; return true; } return false; });
+      t1Choice = { escalationId: escalation.id, index: pick, custom: recorded && recorded.instructions ? recorded.instructions : '' };
+    }
+    var buttons = options.map(function (o, i) {
+      var label = String(o.label || 'Option ' + (i + 1));
+      var tag = o.recommended && !/recommended/i.test(label) ? ' (Recommended)' : '';
+      return '<button class="t1-opt' + (o.recommended ? ' is-recommended' : '') + '" type="button" role="radio" aria-checked="' + (t1Choice.index === i) + '"' +
+        ' tabindex="' + (t1Choice.index === i ? '0' : '-1') + '" data-t1-opt="' + i + '"><b>' + esc(label + tag) + '</b><span>' + esc(o.outcome || o.description || '') + '</span></button>';
+    }).join('');
+    return '<article class="t1-card" aria-label="Human decision required">' +
+      '<div class="t1-card-head"><span class="t1-badge">Human Decision Required</span><span class="heal-tag">' + esc(escalation.id) + '</span><span class="t1-meta">' + esc(meta) + '</span></div>' +
+      '<ol class="t1-parts">' +
+        '<li><h4>What is Happening?</h4><p>' + esc(card.symptom || escalation.summary || '') + '</p></li>' +
+        '<li><h4>Why is This Happening?</h4><p>' + esc(card.rootCause || '') + '</p></li>' +
+        '<li><h4>Who &amp; What is Affected?</h4><p>' + esc(card.blastRadius || '') + '</p></li>' +
+        '<li><h4>Actionable Options &amp; Trade-offs</h4>' +
+          '<div class="t1-options" role="radiogroup" aria-label="Decision options">' + buttons + '</div>' +
+          '<label class="t1-custom" for="t1-custom">Custom instructions (optional, used instead of the option above)' +
+          '<textarea id="t1-custom" maxlength="900" rows="2" placeholder="Tell the agent exactly what to do instead">' + esc(t1Choice.custom) + '</textarea></label>' +
+          (recorded ? '<p class="t1-decided">Recorded from the terminal: ' + esc(recorded.label || recorded.optionId) + '</p>' : '') +
+        '</li>' +
+      '</ol>' +
+    '</article>';
+  }
+
+  function decisionActions(escalation) {
+    return '<div class="heal-actions"><button class="rc-btn reject" type="button" data-heal="t1-dismiss">Dismiss Escalation</button>' +
+      '<button class="rc-btn approve" type="button" data-heal="t1-decide">' + (escalation.proposedPatch ? 'Apply Proposal &amp; Unblock' : 'Unblock with This Decision') + '</button></div>';
+  }
+
+  /** Sends the card choice (or custom instructions) as the resolution notes the unblocked agent reads. */
+  function commitDecision(decision) {
+    var escalation = rc.taskId ? escalationFor(rc.taskId) : null;
+    var tri = triageFor(escalation, rc.heal && rc.heal.taskId === rc.taskId ? rc.heal : null);
+    if (!escalation || !tri) return;
+    var options = (tri.verdict.humanCard && tri.verdict.humanCard.options) || [];
+    var chosen = options[t1Choice.index];
+    var custom = String(t1Choice.custom || '').trim();
+    var notes = custom ? 'Product owner instructions: ' + custom
+      : chosen ? 'Product owner chose "' + (chosen.label || chosen.id) + '": ' + (chosen.outcome || chosen.description || '') : '';
+    resolveEscalation(decision, notes.slice(0, 1000), decision === 'approve' ? 't1-decide' : 't1-dismiss');
+  }
+
+`;

package/dist/server/studio-ui/styles/console.d.ts

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