@njeybe/nativ 2.6.0 → 2.8.0

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

@@ -38,6 +38,7 @@ export const consoleScript = String.raw `  // ─── Live runner console draw
 
   function rcStepper(run) {
     var status = run ? run.status : null;
+    if (!run) return '';
     var stage = RC_STAGE[status] != null ? RC_STAGE[status] : rc.stage;
     var settled = !!status && !RUN_ACTIVE[status];
     var failed = status === 'failed' || status === 'aborted';
@@ -57,16 +58,22 @@ export const consoleScript = String.raw `  // ─── Live runner console draw
   function syncConsole() {
     var run = rc.taskId ? runFor(rc.taskId) : null;
     var task = rc.taskId ? taskById(rc.taskId) : null;
-    $('rc-task').textContent = rc.taskId || '–';
+    $('rc-task').textContent = rc.taskId || '';
     $('rc-title').textContent = task ? task.title : '';
     $('rc-steps').innerHTML = rcStepper(run);
-    $('rc-abort').disabled = !isRunActive(run);
+    $('rc-abort').hidden = !isRunActive(run);
+    $('rc-steps').hidden = !run;
+    $('rc-foot').hidden = !run;
     $('rc-elapsed').textContent = mmss(elapsedOf(run) || 0);
+    $('rc-clock').textContent = $('rc-elapsed').textContent;
+    syncInspectorStatus(run);
     $('rc-bytes').textContent = formatBytes((run && run.logBytes) || 0);
-    var gate = 'Idle';
+    $('rc-bytes-wrap').hidden = !(run && run.logBytes > 0);
+    var gate = '';
     if (run && run.verification) gate = run.verification.success ? 'Passed' : 'Failed';
     else if (run && run.status === 'verifying') gate = 'Running';
     $('rc-gate').textContent = gate;
+    $('rc-gate-wrap').hidden = !gate;
     // Native runs report grounded usage; cli runs have none to show.
     var usage = run && run.usage;
     $('rc-spend-wrap').hidden = !usage;
@@ -79,7 +86,7 @@ export const consoleScript = String.raw `  // ─── Live runner console draw
     if (run && !isRunActive(run)) {
       exit = RUN_LABEL[run.status] || run.status;
       if (typeof run.exitCode === 'number') exit += ' (exit ' + run.exitCode + ')';
-      if (run.error) exit += ' · ' + run.error;
+      if (run.error) exit += ', ' + run.error;
     }
     $('rc-exit').textContent = exit;
   }
@@ -90,6 +97,7 @@ export const consoleScript = String.raw `  // ─── Live runner console draw
       var run = rc.taskId ? runFor(rc.taskId) : null;
       if (!rc.taskId || !isRunActive(run)) { clearInterval(rc.ticker); rc.ticker = null; return; }
       $('rc-elapsed').textContent = mmss(elapsedOf(run) || 0);
+      $('rc-clock').textContent = $('rc-elapsed').textContent;
     }, 1000);
   }
 
@@ -135,7 +143,7 @@ export const consoleScript = String.raw `  // ─── Live runner console draw
     $('rc-diff-files').innerHTML = (files || []).map(function (f) { return '<li title="' + esc(f) + '">' + esc(f) + '</li>'; }).join('');
     $('rc-diff-files').hidden = !(files && files.length);
     $('rc-diff-body').innerHTML = bodyHtml;
-    $('rc-diff-count').textContent = count == null ? '–' : String(count);
+    $('rc-diff-count').textContent = count == null ? '-' : String(count);
   }
 
   function loadConsoleDiff(taskId) {
@@ -145,7 +153,7 @@ export const consoleScript = String.raw `  // ─── Live runner console draw
     return api('/api/pipeline/worktrees/diff?taskId=' + encodeURIComponent(taskId)).then(function (body) {
       if (seq !== rc.diffSeq || rc.taskId !== taskId) return;
       var files = Array.isArray(body.filesChanged) ? body.filesChanged : [];
-      var summary = '<code>' + esc(body.branch || '') + '</code> · ' + (body.hasChanges ? files.length + ' uncommitted file' + (files.length === 1 ? '' : 's') : 'working tree clean');
+      var summary = '<code>' + esc(body.branch || '') + '</code>, ' + (body.hasChanges ? files.length + ' uncommitted file' + (files.length === 1 ? '' : 's') : 'working tree clean');
       setDiffState(summary, files, body.diff ? diffToHtml(body.diff) : '<span class="rc-empty">No uncommitted changes in this worktree yet.</span>', files.length);
     }, function (e) {
       if (seq !== rc.diffSeq || rc.taskId !== taskId) return;
@@ -191,4 +199,61 @@ export const consoleScript = String.raw `  // ─── Live runner console draw
     return ['logs', 'diff', 'heal'].filter(function (name) { return !$('rc-tab-' + name).hidden; });
   }
 
+  // Inspector header status: dot color follows the run state only.
+  function syncInspectorStatus(run) {
+    var task = rc.taskId ? taskById(rc.taskId) : null;
+    var bucket = Studio.status.runBucket(run) || (task ? Studio.status.bucket(task) : 'next');
+    var tone = { done: 'ok', stuck: 'err', running: 'run' }[bucket] || 'idle';
+    $('rc-status').setAttribute('data-tone', tone);
+    $('rc-status-text').textContent = Studio.status.word(bucket);
+  }
+
+  // Below 1024px the inspector is a modal sheet over the content.
+  function inspectorIsSheet() {
+    return window.matchMedia && window.matchMedia('(max-width: 1023px)').matches;
+  }
+
+  // Remembers the opener so closing hands focus back to it.
+  function rememberInspectorOpener() {
+    var drawer = $('runner-console-drawer');
+    var active = document.activeElement;
+    if (drawer.hidden && active && !drawer.contains(active)) rc.opener = active;
+  }
+
+  function applyInspectorMode() {
+    var drawer = $('runner-console-drawer');
+    var sheet = inspectorIsSheet() && !drawer.hidden;
+    if (sheet) drawer.setAttribute('aria-modal', 'true');
+    else drawer.removeAttribute('aria-modal');
+    drawer.setAttribute('role', sheet ? 'dialog' : 'region');
+    if ($('task-drawer').hidden) $('scrim').hidden = !sheet;
+  }
+
+  function restoreInspectorFocus() {
+    if ($('task-drawer').hidden) $('scrim').hidden = true;
+    var opener = rc.opener;
+    rc.opener = null;
+    if (opener && document.contains(opener) && opener.focus) opener.focus();
+  }
+
+  // Keeps Tab inside the sheet while it is modal.
+  function trapInspectorFocus(e) {
+    var drawer = $('runner-console-drawer');
+    if (e.key !== 'Tab' || drawer.hidden || !inspectorIsSheet()) return;
+    var items = Array.prototype.filter.call(
+      drawer.querySelectorAll('button, [href], [tabindex]:not([tabindex="-1"]), textarea, input'),
+      function (el) { return !el.disabled && el.offsetParent !== null; });
+    if (!items.length) return;
+    var first = items[0], last = items[items.length - 1];
+    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+  }
+
+  document.addEventListener('keydown', trapInspectorFocus);
+  document.addEventListener('click', function (e) {
+    var t = e.target && e.target.closest ? e.target.closest('#rc-open-diff') : null;
+    if (t) setConsoleTab('diff', true);
+  });
+  window.addEventListener('resize', applyInspectorMode);
+
 `;

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

@@ -6,14 +6,14 @@ export const coreScript = String.raw `<script>
   var $ = function (id) { return document.getElementById(id); };
 
   var ICON = {
-    spark: '<svg class="icon t1-spark" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.6 4.9 4.9 1.6-4.9 1.6L8 14.5l-1.6-4.9L1.5 8l4.9-1.6z"/></svg>',
-    check: '<svg class="icon" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg>',
-    x: '<svg class="icon" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/></svg>',
-    shield: '<svg class="icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 1.8l5.2 2.1v3.7c0 3.1-2.2 5.6-5.2 6.6-3-1-5.2-3.5-5.2-6.6V3.9z"/><path d="M5.6 8.1l1.7 1.7 3.2-3.3"/></svg>',
-    play: '<svg class="icon" width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.5 2.8v10.4L13 8z"/></svg>',
-    alert: '<svg class="icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.5v.01"/></svg>',
-    branch: '<svg class="icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="8" r="2"/><path d="M6 7v10M18 10c0 4-6 3-11.2 7.4"/></svg>',
-    gauge: '<svg class="icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M4 16a8 8 0 1 1 16 0"/><path d="M12 16l4-5"/></svg>'
+    spark: '<svg class="icon t1-spark" width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"/></svg>',
+    check: '<svg class="icon" width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg>',
+    x: '<svg class="icon" width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg>',
+    shield: '<svg class="icon" width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0ZM82.34,141.66a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32l-56,56a8,8,0,0,1-11.32,0Z"/></svg>',
+    play: '<svg class="icon" width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"/></svg>',
+    alert: '<svg class="icon" width="28" height="28" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"/></svg>',
+    branch: '<svg class="icon" width="28" height="28" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M232,64a32,32,0,1,0-40,31v17a8,8,0,0,1-8,8H96a23.84,23.84,0,0,0-8,1.38V95a32,32,0,1,0-16,0v66a32,32,0,1,0,16,0V144a8,8,0,0,1,8-8h88a24,24,0,0,0,24-24V95A32.06,32.06,0,0,0,232,64ZM64,64A16,16,0,1,1,80,80,16,16,0,0,1,64,64ZM96,192a16,16,0,1,1-16-16A16,16,0,0,1,96,192ZM200,80a16,16,0,1,1,16-16A16,16,0,0,1,200,80Z"/></svg>',
+    gauge: '<svg class="icon" width="28" height="28" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M207.06,72.67A111.24,111.24,0,0,0,128,40h-.4C66.07,40.21,16,91,16,153.13V176a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V152A111.25,111.25,0,0,0,207.06,72.67ZM224,176H119.71l54.76-75.3a8,8,0,0,0-12.94-9.42L99.92,176H32V153.13c0-3.08.15-6.12.43-9.13H56a8,8,0,0,0,0-16H35.27c10.32-38.86,44-68.24,84.73-71.66V80a8,8,0,0,0,16,0V56.33A96.14,96.14,0,0,1,221,128H200a8,8,0,0,0,0,16h23.67c.21,2.65.33,5.31.33,8Z"/></svg>'
   };
 
   function formatBytes(n) {

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

@@ -28,8 +28,8 @@ export const detailViewScript = String.raw `  // ─── Task detail panel (pu
     }
     if (t.status === 'in_progress') {
       var live = t.run && isRunActive(t.run);
-      return dBtn('task-logs', 'Open live logs', { busy: b }) +
-        dBtn('task-abort', 'Stop', { danger: true, busy: b, disabled: !live, title: live ? '' : 'No runner is attached to this task' });
+      return (t.run ? dBtn('task-logs', 'Watch live', { busy: b }) : '') +
+        (live ? dBtn('task-abort', 'Stop', { danger: true, busy: b }) : '');
     }
     if (t.status === 'pending' && !t.waitingOn.length) {
       return dBtn('task-start', 'Start', { primary: true, busy: b }) + dBtn('task-dispatch', 'Dispatch', { busy: b });
@@ -47,7 +47,7 @@ export const detailViewScript = String.raw `  // ─── Task detail panel (pu
 
   function detailFacts(t, model) {
     var m = model.milestones.filter(function (x) { return x.id === t.milestoneId; })[0];
-    var ms = m ? '<button type="button" class="chip" data-ms="' + esc(m.id) + '"><span class="mono">' + esc(m.id) + '</span>' + esc(m.short) + '</button>' : '–';
+    var ms = m ? '<button type="button" class="chip" data-ms="' + esc(m.id) + '"><span class="mono">' + esc(m.id) + '</span>' + esc(m.short) + '</button>' : '-';
     return '<dl class="kv"><dt>Milestone</dt><dd>' + ms + '</dd><dt>Agent</dt><dd>' + ui.agentChip(t.agent) + '</dd>' +
       '<dt>Started</dt><dd class="num">' + esc(fmt.full(t.startT)) + '</dd><dt>Took</dt><dd class="num">' + detailTook(t) + '</dd>' +
       '<dt>Est. cost</dt><dd class="num">' + esc(fmt.money(t.costUsd)) + '</dd></dl>';
@@ -73,7 +73,7 @@ export const detailViewScript = String.raw `  // ─── Task detail panel (pu
       chipList('Needs first', t.deps.length ? t.deps.map(function (d) { return depChip(model, d); }).join('') : '<span class="faint">Nothing. It can start right away.</span>') +
       chipList('Unblocks', t.children.length ? t.children.map(function (d) { return depChip(model, d); }).join('') : '<span class="faint">No later task depends on this.</span>') +
       chipList('Files it may change', files) +
-      '<div><div class="dlabel">How it is checked</div><div class="code">' + esc(t.verify || 'No check command.') + '</div></div>' +
+      '<div><div class="dlabel">How it is checked</div><div class="code wrap">' + esc(t.verify || 'No check command.') + '</div></div>' +
       '<div class="chips"><button type="button" class="btn" data-act="show-flow">' + ui.icon('flow') + 'Show in Flow</button></div></div>';
   };
 

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

@@ -25,9 +25,9 @@ export const dispatchScript = String.raw `  // ─── Autonomous dispatch: PO
     pipe.busy[key] = 'abort';
     refreshUi([]);
     postJson('/api/pipeline/tasks/abort', { taskId: taskId, reason: 'Aborted from Nativ Studio' }).then(function () {
-      toast('Abort signal sent to ' + taskId, 'ok');
+      toast('Stop signal sent to ' + taskId, 'ok');
     }, function (e) {
-      toast('Could not abort ' + taskId + ': ' + e.message);
+      toast('Could not stop ' + taskId + ': ' + e.message);
     }).then(function () {
       delete pipe.busy[key];
       return fetchPipeline(['status', 'tasks', 'runs']);
@@ -47,9 +47,9 @@ export const dispatchScript = String.raw `  // ─── Autonomous dispatch: PO
 
   function confirmAbort(taskId) {
     confirmDialog({
-      title: 'Abort agent run',
+      title: 'Stop agent run',
       body: 'Terminate the Claude process tree for ' + taskId + '? The isolated worktree and its branch are left in place so the partial work can be inspected.',
-      confirmLabel: 'Abort Run',
+      confirmLabel: 'Stop',
       danger: true
     }, function () { runAbort(taskId); });
   }
@@ -147,4 +147,23 @@ export const dispatchScript = String.raw `  // ─── Autonomous dispatch: PO
     runDispatch(id, opts);
   }
 
+  // ─── Top bar: Dispatch next ────────────────────────────────────────────────
+  var nextBtn = $('btn-dispatch-next'), nextId = null, nextSeen = null;
+  function syncDispatchNext() {
+    var m = Studio.model;
+    if (!m) return;
+    var t = m.tasks.filter(function (x) { return Studio.status.isReady(x); })[0];
+    var key = t ? t.id : '';
+    if (key === nextSeen) return;
+    nextSeen = key;
+    nextId = t ? t.id : null;
+    nextBtn.hidden = !t;
+    if (!t) return;
+    $('dispatch-next-label').textContent = 'Dispatch ' + t.id;
+    nextBtn.title = 'Open the dispatch dialog for ' + t.id;
+  }
+  nextBtn.addEventListener('click', function () { if (nextId) openDispatchDialog(nextId); });
+  Studio.onPaint(syncDispatchNext);
+  syncDispatchNext();
+
 `;

package/dist/server/studio-ui/shell/events-tools.js

@@ -8,6 +8,17 @@ export const eventsToolsScript = String.raw `  // ─── Events: live runner
   $('rc-clear').addEventListener('click', function () {
     $('rc-body').innerHTML = '<span class="rc-empty">Console cleared. New output will stream in here.</span>';
   });
+  function setMoreMenu(open) {
+    $('rc-more-menu').hidden = !open;
+    $('rc-more').setAttribute('aria-expanded', String(open));
+  }
+  $('rc-more').addEventListener('click', function () { setMoreMenu($('rc-more-menu').hidden); });
+  $('rc-more-menu').addEventListener('click', function (e) {
+    if (e.target.closest('#rc-open-diff')) setMoreMenu(false);
+  });
+  document.addEventListener('click', function (e) {
+    if (!$('rc-more-menu').hidden && !e.target.closest('.rc-more')) setMoreMenu(false);
+  });
   $('rc-abort').addEventListener('click', function () { if (rc.taskId) confirmAbort(rc.taskId); });
   document.querySelectorAll('.rc-tab').forEach(function (btn) {
     btn.addEventListener('click', function () { setConsoleTab(btn.getAttribute('data-rc-tab')); });
@@ -81,7 +92,11 @@ export const eventsToolsScript = String.raw `  // ─── Events: live runner
   $('rc-minimize').addEventListener('click', toggleConsoleMinimized);
   $('rc-close').addEventListener('click', closeConsole);
   $('runner-console-drawer').addEventListener('keydown', function (e) {
-    if (e.key === 'Escape') { e.stopPropagation(); closeConsole(); $('main').focus(); }
+    if (e.key !== 'Escape') return;
+    e.stopPropagation();
+    var opener = rc.opener;
+    closeConsole();
+    if (!(opener && document.contains(opener))) $('main').focus();
   });
 
   $('btn-confirm-ok').addEventListener('click', function () {

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

@@ -24,7 +24,34 @@ export const formatScript = String.raw `  // ─── Studio client core: state
     });
   }
 
-  var STATUS_LABEL = { completed: 'Done', in_progress: 'Running', pending: 'Up next', blocked: 'Stuck' };
+  var BUCKETS = [['next', 'Up next'], ['running', 'Running'], ['done', 'Done'], ['stuck', 'Stuck']];
+  var BUCKET_WORD = {};
+  BUCKETS.forEach(function (b) { BUCKET_WORD[b[0]] = b[1]; });
+  var STATUS_BUCKET = { completed: 'done', in_progress: 'running', pending: 'next', blocked: 'stuck' };
+  var STATUS_LABEL = {};
+  Object.keys(STATUS_BUCKET).forEach(function (k) { STATUS_LABEL[k] = BUCKET_WORD[STATUS_BUCKET[k]]; });
+  var RUN_BUCKET = { spawning_worktree: 'running', running: 'running', verifying: 'running',
+    merging: 'running', completed: 'done', failed: 'stuck', aborted: 'next' };
+
+  var status = {
+    buckets: BUCKETS,
+    isReady: function (t) {
+      return t.status === 'pending' && (!!t.isAvailable || !(t.waitingOn || []).length);
+    },
+    bucket: function (t) {
+      if (t.status === 'completed') return 'done';
+      if (t.status === 'in_progress') return t.stale ? 'next' : 'running';
+      if (t.status === 'blocked') return 'stuck';
+      return 'next';
+    },
+    runBucket: function (run) { return run ? (RUN_BUCKET[run.status] || null) : null; },
+    word: function (key) { return BUCKET_WORD[key] || STATUS_LABEL[key] || 'Unknown'; },
+    waitText: function (t) {
+      if (t.status !== 'pending' || status.isReady(t)) return '';
+      var n = (t.waitingOn || []).length;
+      return n === 1 ? 'Waits for 1 task' : 'Waits for ' + n + ' tasks';
+    }
+  };
   var AGENTS = {
     'backend': ['Backend', '--ag-backend'],
     'frontend': ['Frontend', '--ag-frontend'],
@@ -50,7 +77,7 @@ export const formatScript = String.raw `  // ─── Studio client core: state
 
   var fmt = {
     dur: function (ms) {
-      if (ms == null || isNaN(ms)) return '–';
+      if (ms == null || isNaN(ms)) return '-';
       var s = Math.round(ms / 1000);
       if (s < 60) return s + 's';
       if (s < 3600) return Math.floor(s / 60) + 'm ' + pad2(s % 60) + 's';
@@ -70,20 +97,19 @@ export const formatScript = String.raw `  // ─── Studio client core: state
       if (!t) return 'not recorded';
       return new Date(t).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' });
     },
-    money: function (v) { return v == null || isNaN(v) ? '–' : '$' + Number(v).toFixed(2); }
+    money: function (v) { return v == null || isNaN(v) ? '-' : '$' + Number(v).toFixed(2); }
   };
 
   /** Grounded spend is small per task: four decimals below a dollar. */
   function usdSpend(n) {
-    if (n == null || isNaN(n)) return '–';
+    if (n == null || isNaN(n)) return '-';
     n = Number(n);
     return '$' + (n >= 1 ? n.toFixed(2) : n.toFixed(4));
   }
 
-  /** Wraps inner SVG paths (24-unit box, stroke icon) in an svg element. */
+  /** Wraps inner SVG paths (256-unit box, fill icon) in an svg element. */
   function svgWrap(inner, width) {
-    return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="' + (width || 1.8) +
-      '" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + (inner || '') + '</svg>';
+    return '<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">' + (inner || '') + '</svg>';
   }
   function svgIcon(name, width) { return svgWrap(Studio.icons[name], width); }
 
@@ -119,7 +145,8 @@ export const formatScript = String.raw `  // ─── Studio client core: state
       if (!model) return '';
       var current = Studio.state.milestoneId;
       var opts = model.milestones.slice().reverse().map(function (m) {
-        var text = m.id + ' · ' + m.short + ' (' + m.done + '/' + m.total + ')' + (m.id === model.activeMilestoneId ? ' · active' : '');
+        var count = m.done + '/' + m.total + (m.id === model.activeMilestoneId ? ', active' : '');
+        var text = m.id + ' ' + m.short + ' (' + count + ')';
         return '<option value="' + esc(m.id) + '"' + (m.id === current ? ' selected' : '') + '>' + esc(text) + '</option>';
       }).join('');
       return '<select class="sel" data-ms-select aria-label="Milestone">' + opts + '</select>';
@@ -137,6 +164,7 @@ export const formatScript = String.raw `  // ─── Studio client core: state
 
   Studio.fmt = fmt;
   Studio.ui = ui;
+  Studio.status = status;
   Studio.agentInfo = agentInfo;
   Studio.statusLabel = function (status) { return STATUS_LABEL[status] || 'Unknown'; };
 

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

@@ -1,20 +1,28 @@
-// Inline SVG icon paths and status marks shared by the shell and every page.
+// Phosphor Regular (MIT) icon paths and status marks shared by the shell and pages.
 export const ICON_PATHS = {
-    home: '<path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/>',
-    tasks: '<rect x="3" y="4" width="5" height="16" rx="1.5"/><rect x="10" y="4" width="5" height="11" rx="1.5"/><rect x="17" y="4" width="4" height="7" rx="1.5"/>',
-    flow: '<rect x="2" y="4" width="6" height="5" rx="1.5"/><rect x="16" y="4" width="6" height="5" rx="1.5"/><rect x="9" y="15" width="6" height="5" rx="1.5"/><path d="M8 6.5h8M5 9v3.5a2.5 2.5 0 0 0 2.5 2.5H9m10-6v3.5a2.5 2.5 0 0 1-2.5 2.5H15"/>',
-    team: '<circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><circle cx="17.5" cy="9" r="2.5"/><path d="M16 14.2A5 5 0 0 1 22 19"/>',
-    worktrees: '<circle cx="6" cy="5" r="2.2"/><circle cx="6" cy="19" r="2.2"/><circle cx="18" cy="7" r="2.2"/><path d="M6 7.2v9.6M18 9.2c0 4-6 3-10.5 7.5"/>',
-    benchmarks: '<path d="M4 17a8 8 0 1 1 16 0"/><path d="m12 17 4-5"/>',
-    database: '<ellipse cx="12" cy="5.5" rx="7.5" ry="2.8"/><path d="M4.5 5.5v13c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8v-13M4.5 12c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8"/>',
-    search: '<circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/>',
-    sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>',
-    x: '<path d="M6 6l12 12M18 6 6 18"/>',
-    chev: '<path d="m9 6 6 6-6 6"/>',
+    home: '<path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"/>',
+    tasks: '<path d="M224,128a8,8,0,0,1-8,8H128a8,8,0,0,1,0-16h88A8,8,0,0,1,224,128ZM128,72h88a8,8,0,0,0,0-16H128a8,8,0,0,0,0,16Zm88,112H128a8,8,0,0,0,0,16h88a8,8,0,0,0,0-16ZM82.34,42.34,56,68.69,45.66,58.34A8,8,0,0,0,34.34,69.66l16,16a8,8,0,0,0,11.32,0l32-32A8,8,0,0,0,82.34,42.34Zm0,64L56,132.69,45.66,122.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32,0l32-32a8,8,0,0,0-11.32-11.32Zm0,64L56,196.69,45.66,186.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32,0l32-32a8,8,0,0,0-11.32-11.32Z"/>',
+    flow: '<path d="M245.66,74.34l-32-32a8,8,0,0,0-11.32,11.32L220.69,72H208c-49.33,0-61.05,28.12-71.38,52.92-9.38,22.51-16.92,40.59-49.48,42.84a40,40,0,1,0,.1,16c43.26-2.65,54.34-29.15,64.14-52.69C161.41,107,169.33,88,208,88h12.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,245.66,74.34ZM48,200a24,24,0,1,1,24-24A24,24,0,0,1,48,200Z"/>',
+    team: '<path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"/>',
+    worktrees: '<path d="M232,64a32,32,0,1,0-40,31v17a8,8,0,0,1-8,8H96a23.84,23.84,0,0,0-8,1.38V95a32,32,0,1,0-16,0v66a32,32,0,1,0,16,0V144a8,8,0,0,1,8-8h88a24,24,0,0,0,24-24V95A32.06,32.06,0,0,0,232,64ZM64,64A16,16,0,1,1,80,80,16,16,0,0,1,64,64ZM96,192a16,16,0,1,1-16-16A16,16,0,0,1,96,192ZM200,80a16,16,0,1,1,16-16A16,16,0,0,1,200,80Z"/>',
+    benchmarks: '<path d="M207.06,72.67A111.24,111.24,0,0,0,128,40h-.4C66.07,40.21,16,91,16,153.13V176a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V152A111.25,111.25,0,0,0,207.06,72.67ZM224,176H119.71l54.76-75.3a8,8,0,0,0-12.94-9.42L99.92,176H32V153.13c0-3.08.15-6.12.43-9.13H56a8,8,0,0,0,0-16H35.27c10.32-38.86,44-68.24,84.73-71.66V80a8,8,0,0,0,16,0V56.33A96.14,96.14,0,0,1,221,128H200a8,8,0,0,0,0,16h23.67c.21,2.65.33,5.31.33,8Z"/>',
+    database: '<path d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"/>',
+    search: '<path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/>',
+    sun: '<path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"/>',
+    x: '<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/>',
+    chev: '<path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/>',
+    play: '<path d="M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"/>',
+    stop: '<path d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,160H56V56H200V200Z"/>',
+    warning: '<path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/>',
+    check: '<path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"/>',
+    terminal: '<path d="M128,128a8,8,0,0,1-3,6.25l-40,32a8,8,0,1,1-10-12.5L107.19,128,75,102.25a8,8,0,1,1,10-12.5l40,32A8,8,0,0,1,128,128Zm48,24H136a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm56-96V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Z"/>',
+    pause: '<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM112,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0Z"/>',
+    moon: '<path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/>',
+    sidebar: '<path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,152H56a8,8,0,0,0,0-16H40V120H56a8,8,0,0,0,0-16H40V88H56a8,8,0,0,0,0-16H40V56H80V200H40Zm176,48H96V56H216V200Z"/>',
 };
 // Done check, up-next dashed ring and stuck alert; running is a pulsing dot.
 export const ST_SVG = {
-    completed: '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="currentColor" opacity=".15"/><path d="m5 8.2 2 2 4-4.4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-    pending: '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="2.5 2"/></svg>',
-    blocked: '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="currentColor" opacity=".15"/><path d="M8 4.5v4.2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="8" cy="11.3" r="1" fill="currentColor"/></svg>',
+    completed: '<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"/></svg>',
+    pending: '<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M96.26,37.05A8,8,0,0,1,102,27.29a104.11,104.11,0,0,1,52,0,8,8,0,0,1-2,15.75,8.15,8.15,0,0,1-2-.26,88.09,88.09,0,0,0-44,0A8,8,0,0,1,96.26,37.05ZM53.79,55.14a104.05,104.05,0,0,0-26,45,8,8,0,0,0,15.42,4.27,88,88,0,0,1,22-38.09A8,8,0,0,0,53.79,55.14ZM43.21,151.55a8,8,0,1,0-15.42,4.28,104.12,104.12,0,0,0,26,45,8,8,0,0,0,11.41-11.22A88.14,88.14,0,0,1,43.21,151.55ZM150,213.22a88,88,0,0,1-44,0,8,8,0,1,0-4,15.49,104.11,104.11,0,0,0,52,0,8,8,0,0,0-4-15.49ZM222.65,146a8,8,0,0,0-9.85,5.58,87.91,87.91,0,0,1-22,38.08,8,8,0,1,0,11.42,11.21,104,104,0,0,0,26-45A8,8,0,0,0,222.65,146Zm-9.86-41.54a8,8,0,0,0,15.42-4.28,104,104,0,0,0-26-45,8,8,0,1,0-11.41,11.22A88,88,0,0,1,212.79,104.45Z"/></svg>',
+    blocked: '<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"/></svg>',
 };

package/dist/server/studio-ui/shell/markup-head.js

@@ -1,5 +1,6 @@
 import { ICON_PATHS } from './icons.js';
-const svg = (name) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICON_PATHS[name]}</svg>`;
+import { wordmark } from './brand.js';
+const svg = (name) => `<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">${ICON_PATHS[name]}</svg>`;
 // Document head close, sidebar frame and top bar (needs version and project name).
 export function markupHead(version, projectName, projectHidden) {
     return String.raw `</head>
@@ -8,34 +9,38 @@ export function markupHead(version, projectName, projectHidden) {
 
 <div class="app">
 <aside class="side" aria-label="Studio navigation">
-  <div class="brand"><span class="logo">N</span><b>Nativ Studio</b><span class="ver">v${version}</span></div>
+  <div class="brand">${wordmark()}${wordmark({ rail: true })}<b>Studio</b></div>
   <div id="side-nav"></div>
   <div class="side-foot">
     <span class="foot-project" id="project-name"${projectHidden}>${projectName}</span>
     <div id="side-foot"></div>
+    <span class="ver">v${version}</span>
   </div>
 </aside>
 
 <div class="main">
 <header class="top">
   <span class="crumb">Studio / <b id="crumb-view">Home</b></span>
+  <span class="spacer" aria-hidden="true"></span>
   <div class="top-right">
-    <button class="btn" id="btn-find" type="button" aria-keyshortcuts="Control+K Meta+K">${svg('search')}<span>Find task</span><span class="kbd">Ctrl K</span></button>
+    <button class="btn" id="btn-find" type="button" aria-keyshortcuts="Control+K Meta+K">${svg('search')}<span>Find task</span><span class="kbd">Ctrl+K</span></button>
+    <button class="btn ghost" id="btn-theme" type="button" title="Switch light or dark" aria-label="Switch light or dark"><span class="ic-sun">${svg('sun')}</span><span class="ic-moon">${svg('moon')}</span></button>
+    <button class="btn primary" id="btn-dispatch-next" type="button" hidden>${svg('play')}<span id="dispatch-next-label">Dispatch</span></button>
     <div class="t1" id="t1">
-      <button class="t1-chip" id="t1-chip" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="t1-menu" data-state="idle" title="Tier 1 AI Strategist"><svg class="icon t1-spark" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.6 4.9 4.9 1.6-4.9 1.6L8 14.5l-1.6-4.9L1.5 8l4.9-1.6z"/></svg><span class="t1-chip-label">Tier 1 AI:</span><span class="t1-chip-model" id="t1-chip-model">Gemini 3.8 Flash</span><svg class="icon t1-caret" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
+      <button class="t1-chip" id="t1-chip" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="t1-menu" data-state="idle" title="Tier 1 AI Strategist"><svg class="icon t1-spark" width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"/></svg><span class="t1-chip-label">Tier 1 AI:</span><span class="t1-chip-model" id="t1-chip-model">Gemini 3.8 Flash</span><svg class="icon t1-caret" width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></button>
       <div class="t1-menu" id="t1-menu" role="dialog" aria-label="Tier 1 AI Strategist" tabindex="-1" hidden>
         <div class="t1-row"><span>Active model</span><code id="t1-model">gemini-3.8-flash</code></div>
         <div class="t1-row"><span>Last evaluation</span><b id="t1-latency">No evaluations yet</b></div>
         <div class="t1-row"><span>Gemini API key</span><b id="t1-key">Checking</b></div>
         <div class="t1-row"><span id="t1-auto-label">Autonomous Auto-Triage</span><button class="t1-switch" id="t1-auto" type="button" role="switch" aria-checked="false" aria-labelledby="t1-auto-label" title="When on, fixes Tier 1 proves safe are applied without asking" disabled>OFF</button></div>
-        <p class="t1-policy"><svg class="icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 1.8l5.2 2.1v3.7c0 3.1-2.2 5.6-5.2 6.6-3-1-5.2-3.5-5.2-6.6V3.9z"/><path d="M5.6 8.1l1.7 1.7 3.2-3.3"/></svg>Always halts on destructive database operations &amp; major API contract breaks.</p>
+        <p class="t1-policy"><svg class="icon" width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0ZM82.34,141.66a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32l-56,56a8,8,0,0,1-11.32,0Z"/></svg>Always halts on destructive database operations &amp; major API contract breaks.</p>
         <dl class="t1-stats"><div><dt>Evaluated</dt><dd id="t1-evaluated">0</dd></div><div><dt>Auto-resolved</dt><dd id="t1-resolved">0</dd></div><div><dt>Human-escalated</dt><dd id="t1-human">0</dd></div></dl>
       </div>
     </div>
-    <button class="btn ghost" id="btn-theme" type="button" title="Switch light or dark" aria-label="Switch light or dark">${svg('sun')}</button>
     <span class="live" id="live" data-state="connecting" role="status" aria-live="polite"><i class="live-dot" id="live-dot" aria-hidden="true"></i><span id="live-label">Connecting</span></span>
   </div>
 </header>
+<div id="pulse" class="pulse-strip" aria-live="polite"></div>
 <p class="banner" id="banner" role="alert" hidden>Studio lost contact with nativ. Retrying. <button class="btn small" id="banner-retry" type="button">Retry</button></p>
 
 <main class="page" id="main" tabindex="-1">

package/dist/server/studio-ui/shell/markup-tools.js

@@ -1,4 +1,8 @@
-// Console drawer, dialogs and other shell overlays.
+// Inspector pane, dialogs and other shell overlays.
+import { ICON_PATHS } from './icons.js';
+// Phosphor icon in the shared 256-unit format.
+const icon = (name) => '<svg class="icon" width="14" height="14" viewBox="0 0 256 256" fill="currentColor"'
+    + ' aria-hidden="true">' + ICON_PATHS[name] + '</svg>';
 export const markupTools = String.raw `</main>
 </div>
 </div>
@@ -8,21 +12,31 @@ export const markupTools = String.raw `</main>
 
 <section id="runner-console-drawer" aria-labelledby="rc-task" hidden>
   <header class="rc-head">
-    <code class="rc-task" id="rc-task">&#8211;</code>
+    <div class="rc-id-row">
+      <code class="rc-task" id="rc-task"></code>
+      <span class="rc-status" id="rc-status"><span class="rc-dot" aria-hidden="true"></span><span id="rc-status-text">Up next</span></span>
+      <code class="rc-clock" id="rc-clock">00:00</code>
+    </div>
     <span class="rc-title" id="rc-title"></span>
     <ol class="rc-steps" id="rc-steps" aria-label="Runner lifecycle"></ol>
     <div class="rc-controls">
-      <button class="rc-btn" type="button" id="rc-autoscroll" aria-pressed="true" aria-label="Toggle console auto-scroll">Auto-scroll</button>
-      <button class="rc-btn" type="button" id="rc-clear" aria-label="Clear the console buffer">Clear</button>
-      <button class="rc-btn danger" type="button" id="rc-abort" aria-label="Abort the running agent">Abort</button>
-      <button class="rc-btn" type="button" id="rc-minimize" aria-expanded="true" aria-controls="rc-body">Minimize</button>
+      <button class="rc-btn danger" type="button" id="rc-abort" aria-label="Stop the running agent" hidden>Stop</button>
+      <span class="rc-more">
+        <button class="rc-btn" type="button" id="rc-more" aria-haspopup="true" aria-expanded="false" aria-controls="rc-more-menu">More</button>
+        <div class="rc-menu" id="rc-more-menu" hidden>
+          <button class="rc-btn" type="button" id="rc-open-diff" aria-label="Open the worktree diff">Open diff</button>
+          <button class="rc-btn" type="button" id="rc-clear" aria-label="Clear the console buffer">Clear</button>
+          <button class="rc-btn" type="button" id="rc-autoscroll" aria-pressed="true" aria-label="Toggle console auto-scroll">Auto-scroll</button>
+        </div>
+      </span>
+      <button class="rc-btn" type="button" id="rc-minimize" aria-expanded="true" aria-controls="rc-body" aria-label="Collapse the inspector">Collapse</button>
       <button class="rc-btn" type="button" id="rc-close" aria-label="Close the runner console">Close</button>
     </div>
   </header>
   <div class="rc-tabs" role="tablist" aria-label="Console views">
-    <button class="rc-tab" type="button" role="tab" id="rc-tab-logs" data-rc-tab="logs" aria-controls="rc-body" aria-selected="true"><svg class="icon" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5l3.5 3.5L3 11.5M8.5 12h4.5"/></svg>Live Logs</button>
-    <button class="rc-tab" type="button" role="tab" id="rc-tab-diff" data-rc-tab="diff" aria-controls="rc-diff" aria-selected="false" tabindex="-1"><svg class="icon" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M5 2.5v6M2 5.5h6M8.5 12.5h5.5"/></svg>Worktree Changes <span class="rc-count" id="rc-diff-count">&#8211;</span></button>
-    <button class="rc-tab" type="button" role="tab" id="rc-tab-heal" data-rc-tab="heal" aria-controls="rc-heal" aria-selected="false" tabindex="-1" hidden><svg class="icon" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 1.8l5.2 2.1v3.7c0 3.1-2.2 5.6-5.2 6.6-3-1-5.2-3.5-5.2-6.6V3.9z"/><path d="M5.6 8.1l1.7 1.7 3.2-3.3"/></svg>Self-Healing Proposal <span class="rc-count is-proposal" id="rc-heal-count">1</span></button>
+    <button class="rc-tab" type="button" role="tab" id="rc-tab-logs" data-rc-tab="logs" aria-controls="rc-body" aria-selected="true">${icon('terminal')}Live Logs</button>
+    <button class="rc-tab" type="button" role="tab" id="rc-tab-diff" data-rc-tab="diff" aria-controls="rc-diff" aria-selected="false" tabindex="-1">${icon('worktrees')}Worktree Changes <span class="rc-count" id="rc-diff-count">-</span></button>
+    <button class="rc-tab" type="button" role="tab" id="rc-tab-heal" data-rc-tab="heal" aria-controls="rc-heal" aria-selected="false" tabindex="-1" hidden>${icon('check')}Self-Healing Proposal <span class="rc-count is-proposal" id="rc-heal-count">1</span></button>
   </div>
   <pre class="rc-body" id="rc-body" role="log" aria-live="polite" aria-label="Runner output" tabindex="0"></pre>
   <div class="rc-diff" id="rc-diff" role="tabpanel" aria-labelledby="rc-tab-diff" hidden>
@@ -34,12 +48,12 @@ export const markupTools = String.raw `</main>
     <pre class="rc-diff-body" id="rc-diff-body" aria-label="Unified diff" tabindex="0"></pre>
   </div>
   <div class="rc-heal" id="rc-heal" role="tabpanel" aria-labelledby="rc-tab-heal" tabindex="0" hidden></div>
-  <footer class="rc-foot">
+  <footer class="rc-foot" id="rc-foot" hidden>
     <span>Elapsed <strong id="rc-elapsed">00:00</strong></span>
-    <span>Output <strong id="rc-bytes">0 B</strong></span>
+    <span id="rc-bytes-wrap" hidden>Output <strong id="rc-bytes">0 B</strong></span>
     <span id="rc-spend-wrap" hidden>Spend <strong id="rc-spend">$0.0000</strong></span>
     <span id="rc-cache-wrap" hidden>Cache hit <strong id="rc-cache">0%</strong></span>
-    <span>Gatekeeper <strong id="rc-gate">Idle</strong></span>
+    <span id="rc-gate-wrap" hidden>Gatekeeper <strong id="rc-gate"></strong></span>
     <span id="rc-exit"></span>
   </footer>
 </section>
@@ -57,8 +71,8 @@ export const markupTools = String.raw `</main>
     <fieldset class="choice-group">
       <legend>Engine</legend>
       <div class="engine-options">
-        <label class="engine-option"><input type="radio" name="dispatch-engine" id="dispatch-engine-native" value="native" checked><svg class="icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 1.5L3.5 9H8l-1 5.5L12.5 7H8z"/></svg><span><b>Native Engine</b><span>Direct API, Prompt Caching &amp; Fast Streaming. Token spend is reported live.</span></span></label>
-        <label class="engine-option"><input type="radio" name="dispatch-engine" id="dispatch-engine-cli" value="cli"><svg class="icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="1.5" y="2.5" width="13" height="11" rx="1.5"/><path d="M4.5 6.5L6.5 8l-2 1.5M8.5 10h3"/></svg><span><b>CLI Terminal Pairing</b><span>Interactive Claude Code in a terminal shell, driven by the command below.</span></span></label>
+        <label class="engine-option"><input type="radio" name="dispatch-engine" id="dispatch-engine-native" value="native" checked>${icon('play')}<span><b>Native Engine</b><span>Direct API, Prompt Caching &amp; Fast Streaming. Token spend is reported live.</span></span></label>
+        <label class="engine-option"><input type="radio" name="dispatch-engine" id="dispatch-engine-cli" value="cli">${icon('terminal')}<span><b>CLI Terminal Pairing</b><span>Interactive Claude Code in a terminal shell, driven by the command below.</span></span></label>
       </div>
     </fieldset>
     <fieldset class="choice-group">
@@ -83,7 +97,7 @@ export const markupTools = String.raw `</main>
     <p class="field-error" id="dispatch-error" aria-live="polite"></p>
     <div class="modal-foot">
       <button class="btn" value="cancel" type="submit">Cancel</button>
-      <button class="btn primary" type="button" id="btn-launch-agent" aria-keyshortcuts="Control+Enter"><svg class="icon" width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.5 2.8v10.4L13 8z"/></svg>Launch Autonomous Runner <kbd>Ctrl+Enter</kbd></button>
+      <button class="btn primary" type="button" id="btn-launch-agent" aria-keyshortcuts="Control+Enter">${icon('play')}Launch Autonomous Runner <kbd>Ctrl+Enter</kbd></button>
     </div>
   </form>
 </dialog>