@njeybe/nativ 2.2.0 → 2.3.0

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

@@ -0,0 +1,154 @@
+// Painting: pages, sidebar, banner, plus small fragments the kept pages still use.
+export const paintScript = String.raw `  // ─── Painting ──────────────────────────────────────────────────────────────
+  function cssEsc(v) { return window.CSS && CSS.escape ? CSS.escape(v) : String(v).replace(/["\\]/g, '\\$&'); }
+
+  function focusMemo(root) {
+    var el = document.activeElement;
+    if (!el || el === document.body || el === root || !root.contains(el)) return null;
+    var sel = null;
+    if (el.id) sel = '#' + cssEsc(el.id);
+    else if (el.getAttribute('data-act')) {
+      sel = '[data-act="' + cssEsc(el.getAttribute('data-act')) + '"]';
+      if (el.getAttribute('data-key')) sel += '[data-key="' + cssEsc(el.getAttribute('data-key')) + '"]';
+    } else if (el.hasAttribute('data-ms-select')) sel = '[data-ms-select]';
+    return sel ? { sel: sel, start: el.selectionStart, end: el.selectionEnd } : null;
+  }
+
+  function restoreFocus(root, memo) {
+    if (!memo) return;
+    var el = root.querySelector(memo.sel);
+    if (!el || el.disabled) return;
+    el.focus({ preventScroll: true });
+    if (memo.start != null && typeof el.setSelectionRange === 'function') {
+      try { el.setSelectionRange(memo.start, memo.end); } catch (e) { /* ignore */ }
+    }
+  }
+
+  /** A page is loading until every server slice it depends on has answered once. */
+  function isPageLoading(def) {
+    return (def.deps || []).some(function (d) { return PIPE_PATHS[d] && !pipe.loaded[d]; });
+  }
+
+  function pageCtx(panel) {
+    return { model: Studio.model, state: Studio.state, fmt: fmt, ui: ui, width: panel ? panel.clientWidth : 0 };
+  }
+
+  /** Renders one page into its panel; keeps focus and skips the write when nothing changed. */
+  function paintPage(id) {
+    var def = Studio.pages[id];
+    var panel = $('panel-' + id);
+    if (!def || !panel || !def.render) return;
+    var ctx = pageCtx(panel);
+    var html = isPageLoading(def) || !Studio.model ? (def.skeleton ? def.skeleton(ctx) : ui.skeleton()) : def.render(ctx);
+    panel.setAttribute('aria-busy', String(isPageLoading(def)));
+    if (panel.__html === html) return;
+    var memo = focusMemo(panel);
+    panel.innerHTML = html;
+    panel.__html = html;
+    restoreFocus(panel, memo);
+  }
+
+  /** Repaints a page (kept pages call this after their own state changes). */
+  function repaint(view) {
+    if (Studio.state.view !== view) return;
+    paintPage(view);
+    paintChrome();
+  }
+  Studio.repaint = function (id) { paintPage(id || Studio.state.view); };
+
+  function repaintFor(parts) {
+    var id = Studio.state.view;
+    var def = Studio.pages[id];
+    if (!def || !def.render) return;
+    if (!parts || (def.deps || []).some(function (d) { return parts.indexOf(d) !== -1; })) paintPage(id);
+  }
+
+  function paintChrome() {
+    var side = $('side-nav');
+    var main = mainWorktree();
+    var agents = pipe.worktrees.filter(function (w) { return w.isAgentWorktree; }).length;
+    var s = pipe.report && pipe.report.summary;
+    var navHtml = Studio.sidebarHtml({
+      model: Studio.model, view: Studio.state.view,
+      worktreeCount: pipe.loaded.worktrees && !pipe.errors.worktrees ? agents : null,
+      benchmarkText: s ? compactNum(Number(s.averageThroughputOpsPerSec) || 0) : ''
+    });
+    if (side.__html !== navHtml) { side.innerHTML = navHtml; side.__html = navHtml; }
+    var foot = $('side-foot');
+    var footHtml = Studio.sideFootHtml({ root: main ? String(main.path || '') : '', branch: main ? (main.branch || 'detached') : '' });
+    if (foot.__html !== footHtml) { foot.innerHTML = footHtml; foot.__html = footHtml; }
+    var lost = !!(pipe.errors.tasks || pipe.errors.status) || live.mode === 'offline';
+    $('banner').hidden = !lost;
+  }
+
+  /** One entry point after data or state changes: model, sidebar, current page, panel, palette. */
+  function refreshUi(parts) {
+    rebuildModel();
+    paintChrome();
+    repaintFor(parts);
+    refreshDetail();
+    refreshPalette();
+    backfillLogs();
+  }
+
+  var uiTimer = null, uiParts = {};
+  function queueUiRefresh(parts) {
+    parts.forEach(function (p) { uiParts[p] = true; });
+    if (uiTimer) return;
+    uiTimer = setTimeout(function () {
+      var list = Object.keys(uiParts);
+      uiParts = {};
+      uiTimer = null;
+      refreshUi(list);
+    }, 250);
+  }
+
+  /** Newest output line per task comes from the live stream and, once, from the log tail. */
+  function feedLogTail(entry) {
+    pipe.logTail[entry.taskId] = ((pipe.logTail[entry.taskId] || '') + (entry.chunk || '')).slice(-2000);
+    queueUiRefresh(['logs']);
+  }
+  var logAsked = {};
+  function backfillLogs() {
+    if (!Studio.model) return;
+    Studio.model.running.forEach(function (t) {
+      if (logAsked[t.id] || pipe.logTail[t.id] != null) return;
+      logAsked[t.id] = true;
+      api('/api/pipeline/tasks/logs?taskId=' + encodeURIComponent(t.id) + '&tailLines=20').then(function (body) {
+        pipe.logTail[t.id] = body.log || '';
+        queueUiRefresh(['logs']);
+      }, function () { /* no log yet */ });
+    });
+  }
+
+  // Fragments the kept pages (Worktrees, Benchmarks) still use.
+  function panelHead(title, lead, actions) {
+    return '<div class="panel-head"><div class="panel-title"><h1>' + title + '</h1>' + (lead ? '<p class="lead">' + lead + '</p>' : '') + '</div>' +
+      (actions ? '<div class="panel-actions">' + actions + '</div>' : '') + '</div>';
+  }
+
+  function progressBar(pct, key, label, tone) {
+    return '<div class="progress' + (tone ? ' ' + tone : '') + '" role="progressbar" aria-label="' + esc(label) + '" aria-valuemin="0" aria-valuemax="100" aria-valuenow="' + pct + '">' +
+      '<span style="width:' + pct + '%"></span></div>';
+  }
+
+  function errorCard(what, message, part) {
+    var missing = /No route for|NOT_FOUND|\(404\)/.test(message || '');
+    return '<div class="card state state-error" role="alert"><div class="state-icon">' + ICON.alert + '</div>' +
+      '<h2>Could not load ' + esc(what) + '</h2><p>' + esc(message) + '</p>' +
+      (missing ? '<p>This studio server does not expose the pipeline API yet. Restart it with a nativ build that includes the Mission Control endpoints.</p>' : '') +
+      '<button class="btn" type="button" data-act="retry" data-key="' + part + '">Retry</button></div>';
+  }
+
+  /** Data is still shown after a failed live refresh; say so instead of silently going stale. */
+  function staleNote(part) {
+    return pipe.errors[part] ? '<p class="notice" role="status">Showing the last synced data. Refresh failed: ' + esc(pipe.errors[part]) + '</p>' : '';
+  }
+
+  function skeletonCards(n, cls) {
+    var out = '';
+    for (var i = 0; i < n; i++) out += '<div class="card ' + (cls || 'kpi') + '"><div class="skeleton short"></div><div class="skeleton"></div><div class="skeleton"></div></div>';
+    return out;
+  }
+
+`;

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

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

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

@@ -0,0 +1,60 @@
+// Pure command palette logic: what a query finds and how the list is drawn.
+export const paletteViewScript = String.raw `  // ─── Command palette (pure) ─────────────────────────────────────────────────
+  var PALETTE_MAX = 9;
+
+  function taskHaystack(t) {
+    var info = agentInfo(t.agent);
+    return [t.id, t.title, t.agent || '', info.label].concat(t.files).join(' ').toLowerCase();
+  }
+
+  function emptyQueryTasks(model) {
+    var done = model.tasks.filter(function (t) { return t.status === 'completed'; });
+    var timed = done.filter(function (t) { return t.endT; }).sort(function (a, b) { return b.endT - a.endT; });
+    var rest = done.filter(function (t) { return !t.endT; }).reverse();
+    return model.running.concat(model.stuck, timed, rest);
+  }
+
+  function matchRank(t, q) {
+    var id = t.id.toLowerCase();
+    return id === q ? 0 : id.indexOf(q) === 0 ? 1 : 2;
+  }
+
+  /** Pages first ("Go to Flow"), then tasks matching id, title, agent id, agent label or any file. */
+  Studio.paletteItems = function (query) {
+    var model = Studio.model;
+    var q = String(query || '').replace(/^\s+|\s+$/g, '').toLowerCase();
+    var pages = q ? Studio.order.filter(function (p) { return p.label.toLowerCase().indexOf(q) !== -1; })
+      .map(function (p) { return { page: p }; }) : [];
+    var tasks = [];
+    if (model) {
+      tasks = q ? model.tasks.filter(function (t) { return taskHaystack(t).indexOf(q) !== -1; })
+        .sort(function (a, b) { return matchRank(a, q) - matchRank(b, q); }) : emptyQueryTasks(model);
+    }
+    return pages.concat(tasks.map(function (t) { return { task: t }; })).slice(0, PALETTE_MAX);
+  };
+
+  Studio.paletteFrame = function () {
+    return '<div class="pal" role="dialog" aria-label="Find a task" aria-modal="true">' +
+      '<input id="pal-q" type="text" placeholder="Search by task id, title, agent or file" autocomplete="off" ' +
+      'role="combobox" aria-expanded="true" aria-controls="pal-list" aria-label="Find a task">' +
+      '<ul id="pal-list" role="listbox"></ul>' +
+      '<div class="hint"><span>Up and down to move</span><span>Enter to open</span><span>Esc to close</span></div></div>';
+  };
+
+  /** Rows for the listbox; sel is the highlighted index. */
+  Studio.paletteListHtml = function (items, sel, query) {
+    if (!items.length) {
+      return '<li class="faint pal-none">No task matches. Try an id like task-31 or a file name.</li>';
+    }
+    return items.map(function (it, i) {
+      var on = ' role="option" id="pal-opt-' + i + '" data-i="' + i + '" aria-selected="' + (i === sel) + '">';
+      if (it.page) {
+        return '<li' + on + '<span class="pal-ico">' + ui.svg(it.page.icon) + '</span><span class="t">Go to ' + esc(it.page.label) + '</span></li>';
+      }
+      var t = it.task;
+      return '<li' + on + ui.statusIcon(t.status) + '<span class="mono faint hide-sm">' + esc(t.id) + '</span>' +
+        '<span class="t">' + esc(t.title) + '</span><span class="hide-sm">' + ui.agentChip(t.agent) + '</span></li>';
+    }).join('');
+  };
+
+`;

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

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

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

@@ -0,0 +1,80 @@
+// Command palette: Ctrl+K / Cmd+K / "/" to open, arrows and Enter to pick, Esc to close.
+export const paletteScript = String.raw `  // ─── Command palette ───────────────────────────────────────────────────────
+  var pal = { open: false, sel: 0, items: [], opener: null };
+
+  function drawPalette() {
+    var q = $('pal-q');
+    pal.items = Studio.paletteItems(q ? q.value : '');
+    if (pal.sel >= pal.items.length) pal.sel = 0;
+    $('pal-list').innerHTML = Studio.paletteListHtml(pal.items, pal.sel);
+    if (q) q.setAttribute('aria-activedescendant', pal.items.length ? 'pal-opt-' + pal.sel : '');
+    var cur = $('pal-opt-' + pal.sel);
+    if (cur && cur.scrollIntoView) cur.scrollIntoView({ block: 'nearest' });
+  }
+
+  function openPalette() {
+    if (pal.open) return;
+    pal.open = true;
+    pal.sel = 0;
+    pal.opener = document.activeElement;
+    $('pal').innerHTML = Studio.paletteFrame();
+    $('pal').hidden = false;
+    drawPalette();
+    $('pal-q').focus();
+  }
+
+  function closePalette() {
+    if (!pal.open) return;
+    pal.open = false;
+    $('pal').hidden = true;
+    $('pal').innerHTML = '';
+    if (pal.opener && document.body.contains(pal.opener) && pal.opener.focus) pal.opener.focus();
+  }
+
+  function refreshPalette() { if (pal.open) drawPalette(); }
+
+  function pickPalette(i) {
+    var it = pal.items[i];
+    if (!it) return;
+    pal.opener = null;
+    closePalette();
+    if (it.page) { Studio.go(it.page.id); return; }
+    Studio.state.milestoneId = it.task.milestoneId;
+    openDetail(it.task.id);
+    repaintFor(null);
+  }
+
+  $('btn-find').addEventListener('click', openPalette);
+  $('pal').addEventListener('click', function (e) {
+    var li = e.target.closest('li[data-i]');
+    if (li) { pickPalette(Number(li.getAttribute('data-i'))); return; }
+    if (e.target.id === 'pal') closePalette();
+  });
+  $('pal').addEventListener('input', function () { pal.sel = 0; drawPalette(); });
+
+  function typingInField() {
+    var a = document.activeElement;
+    return !!a && /^(input|select|textarea)$/i.test(a.tagName);
+  }
+
+  document.addEventListener('keydown', function (e) {
+    if ((e.ctrlKey || e.metaKey) && String(e.key).toLowerCase() === 'k') {
+      e.preventDefault();
+      if (pal.open) closePalette(); else openPalette();
+      return;
+    }
+    if (e.key === '/' && !pal.open && !typingInField() && !e.ctrlKey && !e.metaKey) { e.preventDefault(); openPalette(); return; }
+    if (pal.open) {
+      var n = Math.max(1, pal.items.length);
+      if (e.key === 'Escape') { e.preventDefault(); closePalette(); }
+      else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        pal.sel = (pal.sel + (e.key === 'ArrowDown' ? 1 : -1) + n) % n;
+        drawPalette();
+      } else if (e.key === 'Enter') { e.preventDefault(); pickPalette(pal.sel); }
+      return;
+    }
+    if (e.key === 'Escape' && Studio.state.detailTaskId && !document.querySelector('dialog[open]')) closeDetail(false);
+  });
+
+`;

package/dist/server/studio-ui/shell/pipeline-state.d.ts

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

package/dist/server/studio-ui/shell/pipeline-state.js

@@ -0,0 +1,152 @@
+// Pipeline data store, fetching, and the model rebuild that follows every change.
+export const pipelineStateScript = String.raw `  // ─── Pipeline state ────────────────────────────────────────────────────────
+  var PIPE_PATHS = {
+    status: '/api/pipeline/status',
+    tasks: '/api/pipeline/tasks',
+    worktrees: '/api/pipeline/worktrees',
+    benchmarks: '/api/pipeline/benchmarks',
+    runs: '/api/pipeline/tasks/runs',
+    telemetry: '/api/pipeline/telemetry/detailed',
+    escalations: '/api/pipeline/escalations?status=pending_review',
+    triage: '/api/pipeline/triage/status'
+  };
+  var ALL_PARTS = ['status', 'tasks', 'worktrees', 'benchmarks', 'runs', 'telemetry', 'escalations', 'triage'];
+  var REDUCED_MOTION = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : { matches: false };
+
+  var pipe = {
+    status: null,
+    milestones: [],
+    worktrees: [],
+    runs: [],
+    report: null,
+    telemetry: null,
+    escalations: [],
+    triage: null,
+    triageRunning: {},
+    triageRecent: {},
+    triageLast: null,
+    logTail: {},
+    loaded: {},
+    errors: {},
+    busy: {},
+    syncedAt: null
+  };
+
+  function allTasks() {
+    var out = [];
+    (pipe.milestones || []).forEach(function (m) { (m.tasks || []).forEach(function (t) { out.push(t); }); });
+    return out;
+  }
+  function taskById(id) {
+    var found = null;
+    allTasks().some(function (t) { if (t.id === id) { found = t; return true; } return false; });
+    return found;
+  }
+
+  function setProjectName(name) {
+    if (!name) return;
+    var el = $('project-name');
+    if (el) { el.textContent = name; el.hidden = false; }
+    document.title = 'Nativ Studio · ' + name;
+  }
+
+  function fetchPipeline(parts) {
+    return Promise.all(parts.map(function (part) {
+      return api(PIPE_PATHS[part]).then(function (body) {
+        applyPipeline(part, body);
+        pipe.errors[part] = null;
+      }, function (e) {
+        pipe.errors[part] = e.message;
+      }).then(function () { pipe.loaded[part] = true; });
+    })).then(function () {
+      pipe.syncedAt = new Date();
+      refreshUi(parts);
+    });
+  }
+
+  function applyPipeline(part, body) {
+    if (part === 'status') {
+      pipe.status = body.pipeline || null;
+      if (pipe.status) setProjectName(pipe.status.projectName);
+    } else if (part === 'tasks') {
+      pipe.milestones = Array.isArray(body.milestones) ? body.milestones : [];
+      setProjectName(body.projectName);
+    } else if (part === 'worktrees') {
+      pipe.worktrees = Array.isArray(body.worktrees) ? body.worktrees : [];
+    } else if (part === 'runs') {
+      pipe.runs = Array.isArray(body.runs) ? body.runs : [];
+    } else if (part === 'benchmarks') {
+      pipe.report = body.report || null;
+    } else if (part === 'telemetry') {
+      pipe.telemetry = { summary: body.summary || {}, taskBreakdowns: Array.isArray(body.taskBreakdowns) ? body.taskBreakdowns : [] };
+    } else if (part === 'escalations') {
+      pipe.escalations = Array.isArray(body.escalations) ? body.escalations : [];
+      syncHealTab();
+      renderTriageChip();
+    } else if (part === 'triage') {
+      pipe.triage = body;
+      renderTriageChip();
+    }
+  }
+
+  /** Rebuilds the client model from the raw slices. */
+  function rebuildModel() {
+    Studio.setModel(buildModel({
+      milestones: pipe.milestones,
+      status: pipe.status,
+      telemetry: pipe.telemetry,
+      runs: pipe.runs,
+      escalations: pipe.escalations,
+      logTail: pipe.logTail
+    }));
+  }
+
+  /** Newest pending escalation for a task (the list arrives newest first). */
+  function escalationFor(taskId) {
+    var found = null;
+    (pipe.escalations || []).some(function (e) { if (e.taskId === taskId && e.status === 'pending_review') { found = e; return true; } return false; });
+    return found;
+  }
+
+  /** The main (non-agent) worktree is the workspace root and carries the active branch. */
+  function mainWorktree() {
+    var main = null;
+    pipe.worktrees.some(function (w) { if (!w.isAgentWorktree) { main = w; return true; } return false; });
+    return main;
+  }
+
+  /** 1234 becomes "1.2k" so the sidebar badge stays small. */
+  function compactNum(n) {
+    if (!isFinite(n)) return '–';
+    if (n >= 1e6) return (n / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
+    if (n >= 1e3) return (n / 1e3).toFixed(1).replace(/\.0$/, '') + 'k';
+    return String(Math.round(n));
+  }
+
+  /** Newest Just-finished style helpers live in pages; here only what the runner tools need. */
+  var RUN_LABEL = {
+    spawning_worktree: 'Worktree', running: 'Claude Running', verifying: 'Verifying', merging: 'Merging',
+    completed: 'Run completed', failed: 'Run failed', aborted: 'Run aborted'
+  };
+  function runFor(taskId) {
+    var found = null;
+    (pipe.runs || []).some(function (r) { if (r.taskId === taskId) { found = r; return true; } return false; });
+    return found;
+  }
+  function upsertRun(run) {
+    if (!run || !run.taskId) return;
+    pipe.runs = [run].concat((pipe.runs || []).filter(function (r) { return r.taskId !== run.taskId; }));
+  }
+  function elapsedOf(run) {
+    if (!run || !run.startedAt) return null;
+    var ms = isRunActive(run) ? Date.now() - Date.parse(run.startedAt) : run.durationMs;
+    return typeof ms === 'number' && isFinite(ms) && ms >= 0 ? ms : null;
+  }
+  /** mm:ss elapsed time shown in the console drawer. */
+  function mmss(ms) {
+    var total = Math.floor((ms || 0) / 1000);
+    var mm = Math.floor(total / 60), ss = total % 60;
+    return (mm < 10 ? '0' : '') + mm + ':' + (ss < 10 ? '0' : '') + ss;
+  }
+
+`;

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

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

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

@@ -0,0 +1,197 @@
+// Self-healing proposal review.
+export const proposalsScript = String.raw `  // ─── Console tab 3: self-healing proposal review (/api/pipeline/escalations) ─
+  /** Shows the tab only while the console's task has a pending escalation; keeps the panel in sync. */
+  function syncHealTab() {
+    var escalation = rc.taskId ? escalationFor(rc.taskId) : null;
+    // Keep the tab while a just-finished resolution is still on screen.
+    var show = !!escalation || !!(rc.heal && (rc.heal.result || rc.heal.triage) && rc.heal.taskId === rc.taskId);
+    $('rc-tab-heal').hidden = !show;
+    $('rc-heal-count').hidden = !(escalation && escalation.proposedPatch);
+    if (!show && rc.tab === 'heal') setConsoleTab('logs');
+    else if (rc.tab === 'heal') renderHeal();
+  }
+
+  function patchLine(sign, p) {
+    if (!p) return '';
+    var value = p.value === undefined ? '' : ' ' + JSON.stringify(p.value);
+    return '<span class="' + (sign === '-' ? 'df-del' : 'df-add') + '">' + sign + ' ' + esc(p.operation + ' ' + p.path + value) + '</span>';
+  }
+
+  function healBody(escalation, opts) {
+    var withActions = !(opts && opts.actions === false);
+    var p = escalation.proposedPatch;
+    var diag = '<p class="heal-diag"><strong>' + esc(escalation.summary || 'Escalated') + '</strong>' +
+      (escalation.details ? '<br>' + esc(escalation.details) : '') + '</p>';
+    if (!p) {
+      return '<div class="heal-head"><h3>No automatic fix could be proven</h3><span class="heal-tag">' + esc(escalation.id) + '</span></div>' + diag +
+        '<p class="heal-diag">' + esc(escalation.recommendedAction || 'Review the affected contracts, then unblock the task or dismiss the escalation.') + '</p>' +
+        (withActions ? '<div class="heal-actions"><button class="rc-btn reject" type="button" data-heal="reject">Dismiss</button>' +
+        '<button class="rc-btn approve" type="button" data-heal="approve">Approve &amp; Unblock Task</button></div>' : '');
+    }
+    var proof = p.verificationProof || {};
+    var verdict = proof.passed
+      ? '<span class="heal-verdict pass">' + ICON.check + 'PASSED in sandbox</span>'
+      : '<span class="heal-verdict fail">' + ICON.x + 'NOT VERIFIED</span>';
+    var patch = p.kind === 'restore_tests'
+      ? (p.files || []).map(function (f) { return '<span class="df-add">+ restore ' + esc(f) + '</span>'; }).join('') +
+        (p.commands || []).map(function (c) { return '<span class="df-meta">$ ' + esc(c) + '</span>'; }).join('')
+      : patchLine('-', p.original) + patchLine('+', p.candidate);
+    var checks = (proof.checks || []).map(function (c) {
+      return '<li><span class="' + (c.passed ? 'ok' : 'bad') + '">' + (c.passed ? ICON.check : ICON.x) + '</span><span><b>' + esc(c.name) + '</b> ' + esc(c.detail) + '</span></li>';
+    }).join('');
+    return '<div class="heal-head"><h3>' + esc(humanize(p.strategy || 'proposal')) + '</h3><span class="heal-tag">' + esc(p.proposalId || escalation.id) + '</span>' + verdict + '</div>' +
+      diag + '<p class="heal-diag">' + esc(p.rationale || '') + '</p>' +
+      '<div class="heal-grid">' +
+        '<section class="heal-section"><h4>' + (p.kind === 'restore_tests' ? 'Restoration plan' : 'Rejected change &#8594; proposed change') + '</h4><pre class="heal-patch">' + patch + '</pre></section>' +
+        '<section class="heal-section"><h4>Isolated verification</h4><ul class="heal-checks">' + (checks || '<li>No checks recorded.</li>') + '</ul></section>' +
+      '</div>' +
+      (withActions ? '<div class="heal-actions"><button class="rc-btn reject" type="button" data-heal="reject">Reject Proposal</button>' +
+      '<button class="rc-btn approve" type="button" data-heal="approve"' + (proof.passed ? '' : ' disabled title="Only sandbox-verified proposals can be applied"') + '>Approve &amp; Apply Patch</button></div>' : '');
+  }
+
+  function renderHeal() {
+    var panel = $('rc-heal');
+    // Live updates must not wipe instructions while they are being typed.
+    if (document.activeElement && document.activeElement.id === 't1-custom' && panel.contains(document.activeElement)) return;
+    var heal = rc.heal && rc.heal.taskId === rc.taskId ? rc.heal : null;
+    var result = heal && heal.result ? '<p class="heal-result' + (heal.result.ok ? '' : ' is-error') + '" role="status">' + esc(heal.result.message) + '</p>' : '';
+    if (!pipe.loaded.escalations) { panel.innerHTML = '<div class="heal-skel"></div><div class="heal-skel"></div><div class="heal-skel" style="width:60%"></div>'; return; }
+    if (pipe.errors.escalations && !pipe.escalations.length) {
+      panel.innerHTML = '<p class="heal-result is-error">Could not load escalations: ' + esc(pipe.errors.escalations) + '</p>' +
+        '<div class="heal-actions"><button class="rc-btn" type="button" data-heal="retry">Retry</button></div>';
+      return;
+    }
+    var escalation = escalationFor(rc.taskId);
+    var tri = triageFor(escalation, heal);
+    if (!escalation && !tri) {
+      panel.innerHTML = result || '<p class="heal-diag">No pending proposal for this task. When the circuit breaker trips on a third failed attempt, a sandbox-verified fix appears here for review.</p>';
+      return;
+    }
+    var html = result;
+    if (escalation) html += triageStrip(escalation, !!tri);
+    if (tri) html += triageVerdictHtml(tri.verdict, tri.escalation);
+    if (escalation) {
+      var deciding = !!tri && tri.verdict.classification === 'REQUIRE_HUMAN_DECISION' && tri.escalation.id === escalation.id;
+      html += healBody(escalation, { actions: !deciding }) + (deciding ? decisionActions(escalation) : '');
+    }
+    panel.innerHTML = html;
+    if (heal && heal.busy) panel.querySelectorAll('[data-heal]').forEach(function (b) { b.disabled = true; });
+  }
+
+  /** One click resolves: approve applies the proposal and unblocks the task, reject dismisses it. */
+  function resolveEscalation(decision, notes, buttonKey) {
+    var escalation = rc.taskId ? escalationFor(rc.taskId) : null;
+    if (!escalation || (rc.heal && rc.heal.busy)) return;
+    var taskId = rc.taskId;
+    rc.heal = { taskId: taskId, busy: true, result: null };
+    renderHeal();
+    var btn = $('rc-heal').querySelector('[data-heal="' + (buttonKey || decision) + '"]');
+    if (btn) btn.innerHTML = '<span class="spinner" aria-hidden="true"></span>' + (decision === 'approve' ? 'Applying…' : 'Rejecting…');
+    var payload = { escalationId: escalation.id, decision: decision };
+    if (notes) payload.notes = notes;
+    postJson('/api/pipeline/escalations/resolve', payload).then(function (body) {
+      rc.heal = { taskId: taskId, busy: false, result: { ok: true, message: body.message || 'Escalation resolved.' } };
+      toast(body.message || 'Escalation resolved', 'ok');
+    }, function (e) {
+      rc.heal = { taskId: taskId, busy: false, result: { ok: false, message: e.message } };
+      toast('Could not ' + decision + ' ' + escalation.id + ': ' + e.message);
+    }).then(function () {
+      renderHeal();
+      return fetchPipeline(['escalations', 'status', 'tasks', 'telemetry', 'triage']);
+    });
+  }
+
+  /** Per-turn usage from the native engine: fold the running total into the run record. */
+  function onRunnerUsage(event) {
+    if (!event || !event.taskId || !event.total) return;
+    var run = runFor(event.taskId);
+    if (run && (!event.runId || run.runId === event.runId)) run.usage = event.total;
+    if (rc.taskId === event.taskId) syncConsole();
+  }
+
+  function openConsole(taskId, quiet, tab) {
+    var drawer = $('runner-console-drawer');
+    if (rc.taskId !== taskId) {
+      rc.taskId = taskId;
+      rc.backfilled = false;
+      rc.stage = 0;
+      rc.diffSeq++;
+      rc.heal = null;
+      setDiffState('Uncommitted changes in the task worktree', [], '', null);
+      // The run list includes restored history, so no run means no log to fetch (the server would 400).
+      if (runFor(taskId)) {
+        $('rc-body').innerHTML = '<span class="rc-empty">Loading runner output…</span>';
+        loadConsoleLogs(taskId);
+      } else {
+        $('rc-body').innerHTML = '<span class="rc-empty">No runner has been dispatched for this task yet.</span>';
+        rc.backfilled = true;
+      }
+    }
+    rc.minimized = false;
+    drawer.hidden = false;
+    drawer.classList.remove('is-min');
+    $('rc-minimize').textContent = 'Minimize';
+    $('rc-minimize').setAttribute('aria-expanded', 'true');
+    document.body.classList.add('has-console');
+    document.body.classList.remove('has-console-min');
+    syncConsole();
+    syncHealTab();
+    rcTick();
+    setConsoleTab(tab || rc.tab);
+    if (!quiet) (rc.tab === 'diff' ? $('rc-diff-body') : rc.tab === 'heal' ? $('rc-heal') : $('rc-body')).focus();
+  }
+
+  function closeConsole() {
+    rc.taskId = null;
+    clearInterval(rc.ticker);
+    rc.ticker = null;
+    clearTimeout(rc.diffTimer);
+    rc.diffTimer = null;
+    $('runner-console-drawer').hidden = true;
+    document.body.classList.remove('has-console', 'has-console-min');
+  }
+
+  function toggleConsoleMinimized() {
+    rc.minimized = !rc.minimized;
+    var drawer = $('runner-console-drawer');
+    drawer.classList.toggle('is-min', rc.minimized);
+    document.body.classList.toggle('has-console', !rc.minimized);
+    document.body.classList.toggle('has-console-min', rc.minimized);
+    var btn = $('rc-minimize');
+    btn.textContent = rc.minimized ? 'Expand' : 'Minimize';
+    btn.setAttribute('aria-expanded', String(!rc.minimized));
+    if (!rc.minimized && rc.tab === 'diff' && rc.taskId) loadConsoleDiff(rc.taskId);
+  }
+
+  function onRunnerStatus(run) {
+    if (!run || !run.taskId) return;
+    upsertRun(run);
+    if (rc.taskId === run.taskId) {
+      syncConsole();
+      if (isRunActive(run)) rcTick();
+      queueConsoleDiff();
+    }
+    refreshUi(['runs']);
+    if (!RUN_ACTIVE[run.status]) {
+      var statusMsg = (RUN_LABEL[run.status] || run.status) + ': ' + run.taskId;
+      if (run.error && run.status !== 'completed') statusMsg += ' (' + run.error + ')';
+      toast(statusMsg, run.status === 'completed' ? 'ok' : 'err');
+      // The agent may have moved the task through "nativ task complete" while it ran.
+      queueRefresh(['status', 'tasks', 'worktrees', 'runs']);
+    }
+  }
+
+  function onRunnerLog(entry) {
+    if (!entry || !entry.taskId) return;
+    var run = runFor(entry.taskId);
+    if (run) run.logBytes = (run.logBytes || 0) + (entry.chunk ? entry.chunk.length : 0);
+    feedLogTail(entry);
+    if (rc.taskId !== entry.taskId || !rc.backfilled) return;
+    var empty = $('rc-body').querySelector('.rc-empty');
+    if (empty) $('rc-body').innerHTML = '';
+    appendConsole(ansiToHtml(entry.chunk, entry.stream === 'stderr' ? 'rc-fg-warn' : ''));
+    $('rc-bytes').textContent = formatBytes((run && run.logBytes) || 0);
+    queueConsoleDiff();
+  }
+
+`;

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

@@ -0,0 +1,3 @@
+export declare const pureScript: string;
+/** Runs a page script in its own function scope with the Studio API. */
+export declare const wrapPage: (script: string) => string;