@njeybe/nativ 2.1.0 → 2.3.0

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,156 @@
+// 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) {
+    var prompt = [
+      'Execute task ' + t.id + ' (' + t.title + ').',
+      t.description ? 'Description: ' + t.description + '.' : '',
+      t.verificationCommand ? 'Verify your work using: ' + t.verificationCommand + '.' : '',
+      'Start by running: nativ task start ' + t.id + '. When finished and verified, run: nativ task complete ' + t.id + '.',
+      'If blocked, follow the Human-Centric Communication Protocol in CLAUDE.md: explain the user experience symptom, root cause in plain English, and clear options without technical jargon.'
+    ].filter(Boolean).join(' ');
+    // No permission bypass: acceptEdits plus the per-task allowlist the server writes to .nativ/runs/permissions/<task>.json.
+    return 'claude -p "' + prompt.replace(/"/g, '\\"') + '" --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;

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

@@ -0,0 +1,94 @@
+// Console, strategist chip and dispatch modal event wiring.
+export const eventsToolsScript = String.raw `  // ─── Events: live runner console drawer ────────────────────────────────────
+  $('rc-autoscroll').addEventListener('click', function () {
+    rc.autoscroll = !rc.autoscroll;
+    this.setAttribute('aria-pressed', String(rc.autoscroll));
+    if (rc.autoscroll) $('rc-body').scrollTop = $('rc-body').scrollHeight;
+  });
+  $('rc-clear').addEventListener('click', function () {
+    $('rc-body').innerHTML = '<span class="rc-empty">Console cleared. New output will stream in here.</span>';
+  });
+  $('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')); });
+    btn.addEventListener('keydown', function (e) {
+      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+      e.preventDefault();
+      var tabs = visibleConsoleTabs();
+      var i = tabs.indexOf(rc.tab);
+      setConsoleTab(tabs[(i + (e.key === 'ArrowRight' ? 1 : tabs.length - 1)) % tabs.length], true);
+    });
+  });
+  $('rc-diff-refresh').addEventListener('click', function () { if (rc.taskId) loadConsoleDiff(rc.taskId); });
+  $('rc-heal').addEventListener('click', function (e) {
+    var opt = e.target.closest('[data-t1-opt]');
+    if (opt) {
+      t1Choice.index = Number(opt.getAttribute('data-t1-opt'));
+      $('rc-heal').querySelectorAll('[data-t1-opt]').forEach(function (b) {
+        b.setAttribute('aria-checked', String(b === opt));
+        b.tabIndex = b === opt ? 0 : -1;
+      });
+      return;
+    }
+    var btn = e.target.closest('[data-heal]');
+    if (!btn || btn.disabled) return;
+    var what = btn.getAttribute('data-heal');
+    if (what === 'retry') { pipe.loaded.escalations = false; renderHeal(); fetchPipeline(['escalations']); }
+    else if (what === 't1-run') runTriage(rc.taskId ? escalationFor(rc.taskId) : null);
+    else if (what === 't1-decide') commitDecision('approve');
+    else if (what === 't1-dismiss') commitDecision('reject');
+    else resolveEscalation(what);
+  });
+  $('rc-heal').addEventListener('input', function (e) {
+    if (e.target.id === 't1-custom') t1Choice.custom = e.target.value;
+  });
+  // Decision options form a radio group: arrow keys move the selection.
+  $('rc-heal').addEventListener('keydown', function (e) {
+    var opt = e.target.closest && e.target.closest('[data-t1-opt]');
+    if (!opt || ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].indexOf(e.key) === -1) return;
+    e.preventDefault();
+    var all = Array.prototype.slice.call($('rc-heal').querySelectorAll('[data-t1-opt]'));
+    var step = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : all.length - 1;
+    var next = all[(all.indexOf(opt) + step) % all.length];
+    next.click();
+    next.focus();
+  });
+
+  // ─── Events: Tier 1 strategist chip ────────────────────────────────────────
+  $('t1-chip').addEventListener('click', function () { setTriageMenu($('t1-menu').hidden); });
+  $('t1-auto').addEventListener('click', function () { setAutoTriage(!(pipe.triage && pipe.triage.autoTriageEnabled)); });
+  document.addEventListener('click', function (e) {
+    if (!$('t1-menu').hidden && !e.target.closest('#t1')) setTriageMenu(false);
+  });
+  $('t1').addEventListener('keydown', function (e) {
+    if (e.key !== 'Escape' || $('t1-menu').hidden) return;
+    e.stopPropagation();
+    setTriageMenu(false);
+    $('t1-chip').focus();
+  });
+
+  // ─── Events: dispatch modal ────────────────────────────────────────────────
+  document.querySelectorAll('input[name="dispatch-engine"], input[name="dispatch-budget"]').forEach(function (input) {
+    input.addEventListener('change', syncDispatchEngine);
+  });
+  $('dispatch-worktree').addEventListener('change', syncDispatchSwitches);
+  $('dispatch-verify-gate').addEventListener('change', syncDispatchSwitches);
+  $('btn-launch-agent').addEventListener('click', launchDispatch);
+  $('dispatch-dialog').addEventListener('keydown', function (e) {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); launchDispatch(); }
+  });
+  $('dispatch-dialog').addEventListener('close', function () { pendingDispatch = null; });
+  $('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(); }
+  });
+
+  $('btn-confirm-ok').addEventListener('click', function () {
+    var fn = pendingConfirm;
+    pendingConfirm = null;
+    $('confirm-dialog').close();
+    if (fn) fn();
+  });
+
+`;

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

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

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

@@ -0,0 +1,151 @@
+import { ICON_PATHS, ST_SVG } from './icons.js';
+// Pure client core: the Studio object, formatting and small html helpers. No DOM access.
+export const formatScript = String.raw `  // ─── Studio client core: state, formatting and html helpers (pure) ─────────
+  var Studio = {
+    pages: {},
+    order: [],
+    model: null,
+    state: { view: 'home', milestoneId: null, focusTaskId: null, detailTaskId: null },
+    icons: ${JSON.stringify(ICON_PATHS)},
+    stSvg: ${JSON.stringify(ST_SVG)},
+    now: function () { return Date.now(); },
+    registerPage: function (id, def) { Studio.pages[id] = def || {}; },
+    go: function () {},
+    openTask: function () {},
+    closeDetail: function () {},
+    repaint: function () {},
+    toast: function () {},
+    taskAction: function () {}
+  };
+
+  function esc(value) {
+    return String(value == null ? '' : value).replace(/[&<>"']/g, function (ch) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch];
+    });
+  }
+
+  var STATUS_LABEL = { completed: 'Done', in_progress: 'Running', pending: 'Up next', blocked: 'Stuck' };
+  var AGENTS = {
+    'backend': ['Backend', '--ag-backend'],
+    'frontend': ['Frontend', '--ag-frontend'],
+    'qa-tester': ['QA tester', '--ag-qa'],
+    'flutter-developer': ['Flutter', '--ag-flutter'],
+    'architect': ['Architect', '--ag-architect'],
+    'devops-agent': ['DevOps', '--ag-devops'],
+    'database': ['Database', '--ag-database'],
+    'security-auditor': ['Security', '--ag-security'],
+    'db-migration': ['DB migration', '--ag-database'],
+    'backend-agent': ['Backend', '--ag-backend'],
+    'frontend-agent': ['Frontend', '--ag-frontend'],
+    'qa-agent': ['QA tester', '--ag-qa'],
+    'database-agent': ['Database', '--ag-database']
+  };
+  /** Label and colour token for an agent id; unknown ids keep their raw id and the neutral colour. */
+  function agentInfo(id) {
+    var known = AGENTS[id];
+    return known ? { label: known[0], token: known[1] } : { label: String(id || 'unassigned'), token: '--fg-3' };
+  }
+
+  function pad2(n) { return (n < 10 ? '0' : '') + n; }
+
+  var fmt = {
+    dur: function (ms) {
+      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';
+      return Math.floor(s / 3600) + 'h ' + pad2(Math.floor((s % 3600) / 60)) + 'm';
+    },
+    ago: function (t) {
+      if (!t) return 'time not recorded';
+      var s = Math.round((Studio.now() - t) / 1000);
+      if (s < 45) return 'just now';
+      if (s < 3600) return Math.round(s / 60) + 'm ago';
+      if (s < 86400) return Math.round(s / 3600) + 'h ago';
+      return Math.round(s / 86400) + 'd ago';
+    },
+    clock: function (t) { return new Date(t).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); },
+    day: function (t) { return new Date(t).toLocaleDateString([], { month: 'short', day: 'numeric' }); },
+    full: function (t) {
+      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); }
+  };
+
+  /** Grounded spend is small per task: four decimals below a dollar. */
+  function usdSpend(n) {
+    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. */
+  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>';
+  }
+  function svgIcon(name, width) { return svgWrap(Studio.icons[name], width); }
+
+  var ui = {
+    esc: esc,
+    icon: svgIcon,
+    svg: svgWrap,
+    statusIcon: function (status) {
+      var label = STATUS_LABEL[status] || 'Unknown';
+      var mark = status === 'in_progress' ? '<span class="pulse"></span>' : (Studio.stSvg[status] || Studio.stSvg.pending);
+      return '<span class="st ' + esc(status) + '" title="' + esc(label) + '">' + mark + '</span>';
+    },
+    agentChip: function (agent) {
+      var info = agentInfo(agent);
+      return '<span class="agent" style="--c:var(' + info.token + ')"><i></i>' + esc(info.label) + '</span>';
+    },
+    pill: function (status, text) {
+      return '<span class="status-pill ' + esc(status) + '">' + esc(text || STATUS_LABEL[status] || status) + '</span>';
+    },
+    when: function (t) {
+      if (!t) return '<time title="not recorded">time not recorded</time>';
+      return '<time datetime="' + new Date(t).toISOString() + '" title="' + esc(fmt.full(t)) + '">' + esc(fmt.ago(t)) + '</time>';
+    },
+    taskRow: function (task, rightText) {
+      var right = rightText != null ? rightText : (task.endT ? fmt.ago(task.endT) : '');
+      return '<button type="button" class="row-btn" data-task="' + esc(task.id) + '">' + ui.statusIcon(task.status) +
+        '<span class="mono faint hide-sm">' + esc(task.id) + '</span><span class="t">' + esc(task.title) + '</span>' +
+        '<span class="hide-sm">' + ui.agentChip(task.agent) + '</span>' +
+        '<span class="faint num row-right">' + esc(right) + '</span></button>';
+    },
+    milestoneSelect: function () {
+      var model = Studio.model;
+      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' : '');
+        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>';
+    },
+    empty: function (title, text) {
+      return '<div class="ui-empty"><b>' + esc(title) + '</b>' + esc(text || '') + '</div>';
+    },
+    skeleton: function () {
+      var bar = function (w) { return '<div class="skel" style="width:' + w + '"></div>'; };
+      return '<div class="skel-head">' + bar('180px') + bar('320px') + '</div>' +
+        '<div class="skel-block">' + bar('100%') + bar('92%') + bar('74%') + '</div>' +
+        '<div class="skel-block">' + bar('100%') + bar('88%') + bar('60%') + '</div>';
+    }
+  };
+
+  Studio.fmt = fmt;
+  Studio.ui = ui;
+  Studio.agentInfo = agentInfo;
+  Studio.statusLabel = function (status) { return STATUS_LABEL[status] || 'Unknown'; };
+
+  var OLD_HASHES = { overview: 'home', canvas: 'flow', pods: 'team' };
+  /** Turns a location hash into a page id; old hashes redirect, unknown ones fall back to Home. */
+  Studio.resolveHash = function (hash, ids) {
+    var h = String(hash || '').replace(/^#/, '');
+    if (OLD_HASHES[h]) h = OLD_HASHES[h];
+    return ids.indexOf(h) !== -1 ? h : 'home';
+  };
+
+`;

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

@@ -0,0 +1,2 @@
+export declare const ICON_PATHS: Record<string, string>;
+export declare const ST_SVG: Record<string, string>;

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

@@ -0,0 +1,20 @@
+// Inline SVG icon paths and status marks shared by the shell and every page.
+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"/>',
+};
+// 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>',
+};

package/dist/server/studio-ui/shell/markup-head.d.ts

@@ -0,0 +1 @@
+export declare function markupHead(version: string, projectName: string, projectHidden: string): string;