@njeybe/nativ 2.2.0 → 2.3.1

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

@@ -0,0 +1,194 @@
+// Runner console drawer and worktree diff tab.
+export const consoleScript = String.raw `  // ─── Live runner console drawer ────────────────────────────────────────────
+  var RC_STEPS = ['Worktree', 'Claude', 'Verify', 'Merge'];
+  var RC_STAGE = { spawning_worktree: 0, running: 1, verifying: 2, merging: 3 };
+  var RC_MAX_NODES = 3000;
+  var rc = { taskId: null, autoscroll: true, minimized: false, stage: 0, ticker: null, backfilled: false, tab: 'logs', diffSeq: 0, diffTimer: null, heal: null };
+
+  /** Minimal SGR parser: escapes the chunk, then maps the colors agents actually emit. */
+  var ANSI_CLASS = {
+    '0': null, '39': null, '1': 'rc-bold', '2': 'rc-fg-muted', '90': 'rc-fg-muted',
+    '31': 'rc-fg-danger', '91': 'rc-fg-danger', '32': 'rc-fg-ok', '92': 'rc-fg-ok',
+    '33': 'rc-fg-warn', '93': 'rc-fg-warn', '34': 'rc-fg-info', '94': 'rc-fg-info',
+    '36': 'rc-fg-info', '96': 'rc-fg-info'
+  };
+  function ansiToHtml(text, fallbackClass) {
+    var out = '', open = 0, cls = fallbackClass || '';
+    var parts = String(text == null ? '' : text).split(/\x1b\[([0-9;]*)m/);
+    for (var i = 0; i < parts.length; i++) {
+      if (i % 2 === 1) {
+        var codes = parts[i].split(';');
+        for (var c = 0; c < codes.length; c++) {
+          var code = codes[c] || '0';
+          if (!Object.prototype.hasOwnProperty.call(ANSI_CLASS, code)) continue;
+          while (open > 0) { out += '</span>'; open--; }
+          cls = ANSI_CLASS[code] ? ANSI_CLASS[code] : (fallbackClass || '');
+        }
+        continue;
+      }
+      // Other CSI sequences (cursor moves, clears) carry no meaning in a log pane.
+      var chunk = parts[i].replace(/\x1b\[[0-9;?]*[A-Za-z]/g, '').replace(/\x1b\][^\x07\x1b]*(\x07|\x1b\\)/g, '');
+      if (!chunk) continue;
+      if (cls) { out += '<span class="' + cls + '">' + esc(chunk) + '</span>'; }
+      else out += esc(chunk);
+    }
+    while (open > 0) { out += '</span>'; open--; }
+    return out;
+  }
+
+  function rcStepper(run) {
+    var status = run ? run.status : null;
+    var stage = RC_STAGE[status] != null ? RC_STAGE[status] : rc.stage;
+    var settled = !!status && !RUN_ACTIVE[status];
+    var failed = status === 'failed' || status === 'aborted';
+    if (RC_STAGE[status] != null) rc.stage = stage;
+    return RC_STEPS.map(function (label, i) {
+      var cls = 'rc-step';
+      // Never dispatched (e.g. opened from a proposal banner): no phase is active.
+      if (!status) return '<li class="' + cls + '">' + esc(label) + '</li>';
+      if (status === 'completed') cls += ' is-done';
+      else if (settled && failed) cls += i < stage ? ' is-done' : (i === stage ? ' is-failed' : '');
+      else if (i < stage) cls += ' is-done';
+      else if (i === stage) cls += ' is-active';
+      return '<li class="' + cls + '">' + esc(label) + '</li>';
+    }).join('<li class="rc-sep" aria-hidden="true">&#8250;</li>');
+  }
+
+  function syncConsole() {
+    var run = rc.taskId ? runFor(rc.taskId) : null;
+    var task = rc.taskId ? taskById(rc.taskId) : null;
+    $('rc-task').textContent = rc.taskId || '–';
+    $('rc-title').textContent = task ? task.title : '';
+    $('rc-steps').innerHTML = rcStepper(run);
+    $('rc-abort').disabled = !isRunActive(run);
+    $('rc-elapsed').textContent = mmss(elapsedOf(run) || 0);
+    $('rc-bytes').textContent = formatBytes((run && run.logBytes) || 0);
+    var gate = 'Idle';
+    if (run && run.verification) gate = run.verification.success ? 'Passed' : 'Failed';
+    else if (run && run.status === 'verifying') gate = 'Running';
+    $('rc-gate').textContent = gate;
+    // Native runs report grounded usage; cli runs have none to show.
+    var usage = run && run.usage;
+    $('rc-spend-wrap').hidden = !usage;
+    $('rc-cache-wrap').hidden = !usage;
+    if (usage) {
+      $('rc-spend').textContent = usdSpend(usage.costUsd);
+      $('rc-cache').textContent = Math.round((Number(usage.cacheHitRate) || 0) * 100) + '%';
+    }
+    var exit = '';
+    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;
+    }
+    $('rc-exit').textContent = exit;
+  }
+
+  function rcTick() {
+    clearInterval(rc.ticker);
+    rc.ticker = setInterval(function () {
+      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);
+    }, 1000);
+  }
+
+  function appendConsole(html) {
+    var body = $('rc-body');
+    var stick = rc.autoscroll || body.scrollTop + body.clientHeight >= body.scrollHeight - 4;
+    var frag = document.createElement('span');
+    frag.innerHTML = html;
+    body.appendChild(frag);
+    while (body.childElementCount > RC_MAX_NODES) body.removeChild(body.firstChild);
+    if (stick) body.scrollTop = body.scrollHeight;
+  }
+
+  function loadConsoleLogs(taskId) {
+    return api('/api/pipeline/tasks/logs?taskId=' + encodeURIComponent(taskId) + '&tailLines=500').then(function (body) {
+      if (rc.taskId !== taskId) return;
+      $('rc-body').innerHTML = body.log ? ansiToHtml(body.log) : '<span class="rc-empty">No output captured yet.</span>';
+      $('rc-body').scrollTop = $('rc-body').scrollHeight;
+      rc.backfilled = true;
+      syncConsole();
+    }, function () {
+      if (rc.taskId !== taskId) return;
+      $('rc-body').innerHTML = '<span class="rc-empty">Waiting for the runner to emit output…</span>';
+      rc.backfilled = true;
+    });
+  }
+
+  // ─── Console tab 2: worktree git diff (GET /api/pipeline/worktrees/diff) ───
+  function diffToHtml(diff) {
+    return String(diff).split('\n').map(function (line) {
+      var cls = '';
+      if (/^(diff --git|\+\+\+ |--- )/.test(line)) cls = /^diff --git/.test(line) ? 'df-file' : 'df-meta';
+      else if (/^@@/.test(line)) cls = 'df-hunk';
+      else if (/^\+/.test(line)) cls = 'df-add';
+      else if (/^-/.test(line)) cls = 'df-del';
+      else if (/^(index |new file mode|deleted file mode|similarity |rename |Binary files)/.test(line)) cls = 'df-meta';
+      return cls ? '<span class="' + cls + '">' + esc(line) + '</span>' : esc(line) + '\n';
+    }).join('');
+  }
+
+  function setDiffState(summary, files, bodyHtml, count) {
+    $('rc-diff-summary').innerHTML = summary;
+    $('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);
+  }
+
+  function loadConsoleDiff(taskId) {
+    var seq = ++rc.diffSeq;
+    $('rc-diff-refresh').disabled = true;
+    if (!$('rc-diff-body').textContent) setDiffState('Loading worktree changes…', [], '<span class="rc-empty">Reading git status…</span>', null);
+    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');
+      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;
+      var missing = e.code === 'WORKTREE_NOT_FOUND';
+      setDiffState(missing ? 'No isolated worktree' : 'Could not load the diff',
+        [], '<span class="rc-empty">' + esc(missing ? 'This task has no agent worktree. Dispatch it with Isolated Worktree on, or run nativ worktree create ' + taskId + '.' : e.message) + '</span>', null);
+    }).then(function () {
+      if (seq === rc.diffSeq) $('rc-diff-refresh').disabled = false;
+    });
+  }
+
+  /** Throttled refresh (at most every 2s) while an agent streams output or git state changes. */
+  function queueConsoleDiff() {
+    if (!rc.taskId || rc.tab !== 'diff' || rc.minimized || rc.diffTimer) return;
+    var id = rc.taskId;
+    rc.diffTimer = setTimeout(function () {
+      rc.diffTimer = null;
+      if (rc.taskId === id && rc.tab === 'diff') loadConsoleDiff(id);
+    }, 2000);
+  }
+
+  function setConsoleTab(tab, focus) {
+    if (tab === 'heal' && $('rc-tab-heal').hidden) tab = 'logs';
+    rc.tab = tab;
+    ['logs', 'diff', 'heal'].forEach(function (name) {
+      var btn = $('rc-tab-' + name);
+      var on = name === tab;
+      btn.setAttribute('aria-selected', String(on));
+      btn.setAttribute('tabindex', on ? '0' : '-1');
+    });
+    $('rc-body').hidden = tab !== 'logs';
+    $('rc-diff').hidden = tab !== 'diff';
+    $('rc-heal').hidden = tab !== 'heal';
+    $('rc-autoscroll').hidden = tab !== 'logs';
+    $('rc-clear').hidden = tab !== 'logs';
+    if (tab === 'diff' && rc.taskId) loadConsoleDiff(rc.taskId);
+    if (tab === 'heal') renderHeal();
+    if (focus) $('rc-tab-' + tab).focus();
+  }
+
+  /** Console tabs in DOM order, skipping the proposal tab while it is hidden. */
+  function visibleConsoleTabs() {
+    return ['logs', 'diff', 'heal'].filter(function (name) { return !$('rc-tab-' + name).hidden; });
+  }
+
+`;

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

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

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

@@ -0,0 +1,50 @@
+// Script opening, DOM lookup, fetch helpers and the icons used by the kept tools.
+export const coreScript = String.raw `<script>
+(function () {
+  'use strict';
+
+  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>'
+  };
+
+  function formatBytes(n) {
+    if (n == null) return 'unknown';
+    if (n < 1024) return n + ' B';
+    if (n < 1048576) return (n / 1024).toFixed(1) + ' KB';
+    return (n / 1048576).toFixed(2) + ' MB';
+  }
+
+  function api(path, options) {
+    return fetch(path, options).then(function (res) {
+      return res.json().catch(function () { return {}; }).then(function (body) {
+        // DB routes answer { error: { code, message } }; pipeline routes answer { ok: false, error: "..." }.
+        if (!res.ok || body.ok === false) {
+          var message = typeof body.error === 'string' ? body.error : (body.error && body.error.message) || body.message;
+          var err = new Error(message || ('Request failed (' + res.status + ')'));
+          err.code = (body.error && body.error.code) || body.code;
+          err.status = res.status;
+          throw err;
+        }
+        return body;
+      });
+    });
+  }
+
+  function postJson(path, body) {
+    return api(path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+  }
+
+  function openDialog(dlg) {
+    if (typeof dlg.showModal === 'function') dlg.showModal(); else dlg.setAttribute('open', '');
+  }
+
+`;

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

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

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

@@ -0,0 +1,80 @@
+// Pure task detail panel markup: sections and actions depend on the task status.
+export const detailViewScript = String.raw `  // ─── Task detail panel (pure) ───────────────────────────────────────────────
+  var BUSY_LABEL = { 'task-start': 'Starting…', 'task-dispatch': 'Dispatching…', 'task-abort': 'Stopping…', 'task-ask': 'Asking…' };
+
+  function dBtn(act, label, opts) {
+    opts = opts || {};
+    var busy = opts.busy === act;
+    var off = opts.disabled || (opts.busy && !busy);
+    return '<button type="button" class="btn' + (opts.primary ? ' primary' : '') + (opts.danger ? ' danger' : '') + '" data-act="' + act + '"' +
+      (off || busy ? ' disabled' : '') + (opts.title ? ' title="' + esc(opts.title) + '"' : '') + '>' +
+      (busy ? '<span class="spinner" aria-hidden="true"></span>' + BUSY_LABEL[act] : esc(label)) + '</button>';
+  }
+
+  function depChip(model, id) {
+    var x = model.byId[id];
+    if (!x) return '<span class="chip mono">' + esc(id) + '</span>';
+    return '<button type="button" class="chip" data-task="' + esc(id) + '">' + ui.statusIcon(x.status) +
+      '<span class="mono">' + esc(id) + '</span></button>';
+  }
+
+  function detailActions(t, env) {
+    var b = env.busy ? 'task-' + env.busy : null;
+    if (t.status === 'blocked') {
+      var out = dBtn('task-output', 'Show check output', { primary: true, busy: b }) + dBtn('task-start', 'Try again', { busy: b });
+      if (t.hasProposal) return out + dBtn('task-proposal', 'Review proposal', { busy: b });
+      if (t.escalation) out += dBtn('task-ask', 'Ask the architect', { busy: env.triaging ? 'task-ask' : b });
+      return out;
+    }
+    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' });
+    }
+    if (t.status === 'pending' && !t.waitingOn.length) {
+      return dBtn('task-start', 'Start', { primary: true, busy: b }) + dBtn('task-dispatch', 'Dispatch', { busy: b });
+    }
+    return '';
+  }
+
+  function detailTook(t) {
+    if (t.status === 'in_progress' && t.startT) {
+      return '<span data-since="' + t.startT + '">' + fmt.dur(Studio.now() - t.startT) + '</span> so far';
+    }
+    var check = t.checkMs ? ' <span class="faint">(check ' + fmt.dur(t.checkMs) + ')</span>' : '';
+    return fmt.dur(t.durationMs) + check;
+  }
+
+  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>' : '–';
+    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>';
+  }
+
+  function chipList(label, html) { return '<div><div class="dlabel">' + label + '</div><div class="chips">' + html + '</div></div>'; }
+
+  /** env = { busy: running action key or null, triaging: bool }. Returns the drawer content. */
+  Studio.detailHtml = function (id, env) {
+    env = env || {};
+    var model = Studio.model, t = model && model.byId[id];
+    if (!t) return '';
+    var reason = t.status === 'blocked'
+      ? '<div class="reason">' + esc(t.reason || 'Paused after ' + (t.attempt || t.maxAttempts) + ' of ' + t.maxAttempts + ' attempts.') + '</div>' : '';
+    var step = t.status === 'in_progress'
+      ? '<div><div class="dlabel">Latest step</div><div class="code wrap">' + esc(t.latestLog || 'No output yet.') + '</div></div>' : '';
+    var actions = detailActions(t, env);
+    var files = t.files.map(function (f) { return '<span class="chip mono">' + esc(f) + '</span>'; }).join('') || '<span class="faint">None listed.</span>';
+    return '<div class="drawer-head">' + ui.statusIcon(t.status) + '<span class="mono faint">' + esc(t.id) + '</span>' +
+      ui.pill(t.status) + '<button type="button" class="btn ghost close" data-act="close-detail" aria-label="Close">' + ui.icon('x') + '</button></div>' +
+      '<div class="drawer-body"><h3>' + esc(t.title) + '</h3>' + reason + (actions ? '<div class="chips">' + actions + '</div>' : '') + step +
+      detailFacts(t, model) +
+      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 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/detail.d.ts

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

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

@@ -0,0 +1,83 @@
+// Task detail panel: opens from any data-task, closes with Esc, returns focus to its opener.
+export const detailScript = String.raw `  // ─── Task detail panel ─────────────────────────────────────────────────────
+  var detail = { opener: null, html: '' };
+
+  function detailEnv(id) {
+    var esc1 = escalationFor(id);
+    return { busy: Studio.busyAction(id), triaging: !!(esc1 && pipe.triageRunning[esc1.id]) };
+  }
+
+  function showDetail(id) {
+    var drawer = $('task-drawer');
+    var html = Studio.detailHtml(id, detailEnv(id));
+    var memo = focusMemo(drawer);
+    if (html !== detail.html) { drawer.innerHTML = html; detail.html = html; restoreFocus(drawer, memo); }
+    drawer.hidden = false;
+    $('scrim').hidden = false;
+  }
+
+  function openDetail(id) {
+    if (!Studio.model || !Studio.model.byId[id]) return;
+    if (!Studio.state.detailTaskId) detail.opener = document.activeElement;
+    Studio.state.detailTaskId = id;
+    showDetail(id);
+    if (!$('task-drawer').contains(document.activeElement)) {
+      var close = $('task-drawer').querySelector('[data-act="close-detail"]');
+      if (close) close.focus();
+    }
+  }
+  Studio.openTask = openDetail;
+
+  /** Re-renders the open panel after a model change; closes it if the task disappeared. */
+  function refreshDetail() {
+    var id = Studio.state.detailTaskId;
+    if (!id) return;
+    if (!Studio.model || !Studio.model.byId[id]) closeDetail(false);
+    else showDetail(id);
+  }
+
+  function closeDetail(quiet) {
+    var S = Studio.state;
+    var wasOpen = !!S.detailTaskId;
+    S.detailTaskId = null;
+    $('task-drawer').hidden = true;
+    $('scrim').hidden = true;
+    $('task-drawer').innerHTML = '';
+    detail.html = '';
+    var hadFocus = !!S.focusTaskId;
+    S.focusTaskId = null;
+    if (quiet) return;
+    if (hadFocus) repaintFor(null);
+    var opener = detail.opener;
+    detail.opener = null;
+    if (wasOpen && opener && document.body.contains(opener) && opener.focus) opener.focus();
+  }
+  Studio.closeDetail = function () { closeDetail(false); };
+
+  $('scrim').addEventListener('click', function () { closeDetail(false); });
+  $('task-drawer').addEventListener('click', function (e) {
+    var t = e.target;
+    var task = t.closest('[data-task]');
+    if (task) { openDetail(task.getAttribute('data-task')); 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 id = Studio.state.detailTaskId;
+    if (name === 'close-detail') closeDetail(false);
+    else if (name === 'show-flow') Studio.taskAction('flow', id);
+    else if (name.indexOf('task-') === 0) Studio.taskAction(name.slice(5), id);
+  });
+
+  // Keep Tab inside the panel while it is open.
+  $('task-drawer').addEventListener('keydown', function (e) {
+    if (e.key !== 'Tab') return;
+    var items = $('task-drawer').querySelectorAll('button:not([disabled]), [href], select, input');
+    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(); }
+  });
+
+`;

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

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

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

@@ -0,0 +1,150 @@
+// Dispatch requests and the dispatch modal.
+export const dispatchScript = String.raw `  // ─── Autonomous dispatch: POST /tasks/dispatch and /tasks/abort ────────────
+  function runDispatch(taskId, customOptions) {
+    var key = 'task:' + taskId;
+    if (pipe.busy[key]) return;
+    pipe.busy[key] = 'dispatch';
+    refreshUi([]);
+    var payload = Object.assign({ taskId: taskId }, customOptions || {});
+    postJson('/api/pipeline/tasks/dispatch', payload).then(function (body) {
+      upsertRun(body && body.run);
+      var engine = body && body.run && body.run.engine === 'native' ? 'native engine' : 'CLI runner';
+      toast('Dispatched ' + taskId + ' to the ' + engine, 'ok');
+      openConsole(taskId, true);
+    }, function (e) {
+      toast('Could not dispatch ' + taskId + ': ' + e.message);
+    }).then(function () {
+      delete pipe.busy[key];
+      return fetchPipeline(['status', 'tasks', 'runs', 'worktrees']);
+    });
+  }
+
+  function runAbort(taskId) {
+    var key = 'task:' + taskId;
+    if (pipe.busy[key]) return;
+    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');
+    }, function (e) {
+      toast('Could not abort ' + taskId + ': ' + e.message);
+    }).then(function () {
+      delete pipe.busy[key];
+      return fetchPipeline(['status', 'tasks', 'runs']);
+    });
+  }
+
+  var pendingConfirm = null;
+  function confirmDialog(opts, onConfirm) {
+    $('confirm-title').textContent = opts.title;
+    $('confirm-body').textContent = opts.body;
+    var ok = $('btn-confirm-ok');
+    ok.textContent = opts.confirmLabel;
+    ok.className = 'btn ' + (opts.danger ? 'danger-solid' : 'primary');
+    pendingConfirm = onConfirm;
+    openDialog($('confirm-dialog'));
+  }
+
+  function confirmAbort(taskId) {
+    confirmDialog({
+      title: 'Abort 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',
+      danger: true
+    }, function () { runAbort(taskId); });
+  }
+
+  // ─── Intelligent dispatch modal (#dispatch-dialog) ─────────────────────────
+  var pendingDispatch = null;
+
+  /** Mirrors buildDefaultClaudeCommand() in agent-supervisor.ts so the preview matches what the server runs. */
+  function defaultClaudeCommand(t) {
+    // The task prompt goes to the agent on stdin, so it is not part of the command.
+    return 'claude -p --output-format stream-json --verbose ' +
+      '--permission-mode acceptEdits --settings ".nativ/runs/permissions/' + t.id + '.json"';
+  }
+
+  function syncDispatchSwitches() {
+    var isolated = $('dispatch-worktree').checked;
+    var merge = $('dispatch-merge');
+    merge.disabled = !isolated || !$('dispatch-verify-gate').checked;
+    if (merge.disabled) merge.checked = false;
+  }
+
+  function checkedValue(name) {
+    var el = document.querySelector('input[name="' + name + '"]:checked');
+    return el ? el.value : '';
+  }
+
+  /**
+   * Current Claude models reject a fixed thinking budget, so the native engine maps it onto an
+   * effort level (same buckets as thinkingBudgetToEffort in agent-supervisor.ts). Say so here
+   * rather than implying an exact token cap.
+   */
+  function budgetHint(engine, budget) {
+    if (engine === 'cli') {
+      return budget ? 'Passed to Claude Code as MAX_THINKING_TOKENS=' + budget + '.' : 'Claude Code chooses its own thinking budget.';
+    }
+    if (!budget) return 'Runs at low effort, the fastest setting (Claude Opus 5.5 cannot switch thinking off entirely).';
+    var effort = budget <= 2048 ? 'medium' : budget <= 8192 ? 'high' : budget <= 32768 ? 'xhigh' : 'max';
+    return 'Runs at ' + effort + ' effort: the native engine maps token budgets onto effort levels.';
+  }
+
+  function syncDispatchEngine() {
+    var engine = checkedValue('dispatch-engine') || 'native';
+    $('dispatch-command-field').hidden = engine !== 'cli';
+    $('dispatch-budget-hint').textContent = budgetHint(engine, Number(checkedValue('dispatch-budget')) || 0);
+  }
+
+  function openDispatchDialog(taskId) {
+    var t = taskById(taskId);
+    if (!t) { runDispatch(taskId); return; }
+    var files = t.targetFiles || [];
+    pendingDispatch = { taskId: t.id, preview: defaultClaudeCommand(t) };
+    $('dispatch-task-id').textContent = t.id;
+    $('dispatch-agent').textContent = t.assignedSubagent || 'unassigned';
+    $('dispatch-task-title').textContent = t.title || '';
+    $('dispatch-files').innerHTML = files.map(function (f) { return '<li class="file" title="' + esc(f) + '">' + esc(f) + '</li>'; }).join('');
+    $('dispatch-files').hidden = !files.length;
+    $('dispatch-verify').innerHTML = t.verificationCommand ? '<span class="cmd-label">Test command: </span>' + esc(t.verificationCommand) : 'no test command';
+    $('dispatch-command').value = pendingDispatch.preview;
+    $('dispatch-engine-native').checked = true;
+    $('dispatch-budget-none').checked = true;
+    syncDispatchEngine();
+    $('dispatch-worktree').checked = true;
+    $('dispatch-verify-gate').checked = !!t.verificationCommand;
+    $('dispatch-verify-gate').disabled = !t.verificationCommand;
+    $('dispatch-merge').checked = false;
+    $('dispatch-error').textContent = '';
+    syncDispatchSwitches();
+    openDialog($('dispatch-dialog'));
+    $('btn-launch-agent').focus();
+  }
+
+  function launchDispatch() {
+    if (!pendingDispatch) return;
+    var engine = checkedValue('dispatch-engine') || 'native';
+    var budget = Number(checkedValue('dispatch-budget')) || 0;
+    var command = $('dispatch-command').value.trim();
+    if (engine === 'cli' && !command) {
+      $('dispatch-error').textContent = 'Enter a runner command, or reopen the dialog to restore the generated one.';
+      $('dispatch-command').focus();
+      return;
+    }
+    var opts = {
+      runnerEngine: engine,
+      useWorktree: $('dispatch-worktree').checked,
+      verify: $('dispatch-verify-gate').checked,
+      autoMerge: $('dispatch-merge').checked
+    };
+    // Always sent: 0 ("None") asks for the least thinking, which differs from leaving the model default.
+    opts.thinkingBudget = budget;
+    // An untouched preview is the server's own default, which may be overridden by NATIV_RUNNER_COMMAND.
+    if (engine === 'cli' && command !== pendingDispatch.preview) opts.runnerCommand = command;
+    var id = pendingDispatch.taskId;
+    pendingDispatch = null;
+    $('dispatch-dialog').close();
+    runDispatch(id, opts);
+  }
+
+`;

package/dist/server/studio-ui/shell/events-tools.d.ts

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