@njeybe/nativ 2.2.0 → 2.3.0

package/dist/server/studio-ui/pages/team/script.js

@@ -0,0 +1,112 @@
+// Team page client script: one pure render, one table row per agent.
+export const teamScript = String.raw `  var esc = Studio.ui.esc;
+  var DASH = '–';
+
+  function head() {
+    return '<div class="page-head"><div><h1>Team</h1><p>Each agent in plain terms: what it did, how long it took, what it cost.</p></div></div>';
+  }
+
+  function sum(list) {
+    return list.reduce(function (total, n) { return total + n; }, 0);
+  }
+
+  function statsFor(key, tasks) {
+    var done = tasks.filter(function (t) { return t.status === 'completed'; });
+    var timed = done.filter(function (t) { return t.durationMs; });
+    var work = sum(timed.map(function (t) { return t.durationMs; }));
+    var costs = tasks.filter(function (t) { return t.costUsd != null; });
+    var stamps = tasks.map(function (t) { return t.status === 'in_progress' ? (t.startT || 0) : (t.endT || 0); });
+    return {
+      agent: key || null,
+      total: tasks.length,
+      done: done.length,
+      work: timed.length ? work : null,
+      avg: timed.length ? work / timed.length : null,
+      cost: costs.length ? sum(costs.map(function (t) { return t.costUsd; })) : null,
+      last: Math.max.apply(null, [0].concat(stamps)) || null,
+      running: tasks.filter(function (t) { return t.status === 'in_progress'; })[0] || null,
+      stuck: tasks.filter(function (t) { return t.status === 'blocked'; })[0] || null
+    };
+  }
+
+  function buildRows(model) {
+    var groups = {};
+    var order = [];
+    model.tasks.forEach(function (t) {
+      var key = t.agent || '';
+      if (!groups[key]) { groups[key] = []; order.push(key); }
+      groups[key].push(t);
+    });
+    return order.map(function (k) { return statsFor(k, groups[k]); })
+      .sort(function (a, b) { return b.total - a.total; });
+  }
+
+  function chip(task, label) {
+    return '<button type="button" class="chip" data-task="' + esc(task.id) + '">' +
+      Studio.ui.statusIcon(task.status) + esc(label) + '</button>';
+  }
+
+  function rightNow(r) {
+    if (r.running) return chip(r.running, r.running.id);
+    if (r.stuck) return chip(r.stuck, 'Stuck on ' + r.stuck.id);
+    return '<span class="faint">Idle</span>';
+  }
+
+  function shareBar(r, max) {
+    var info = Studio.agentInfo(r.agent);
+    var pct = max ? Math.round((r.total / max) * 100) : 0;
+    return '<div class="bar"><i style="width:' + pct + '%;background:var(' + info.token + ')"></i></div>';
+  }
+
+  function lastActive(r) {
+    return r.last ? Studio.ui.when(r.last) : DASH;
+  }
+
+  function row(r, max) {
+    return '<tr data-agent="' + esc(r.agent || 'unassigned') + '"><td>' + Studio.ui.agentChip(r.agent) + '</td>' +
+      '<td>' + rightNow(r) + '</td>' +
+      '<td class="r">' + r.done + '<span class="faint"> / ' + r.total + '</span></td>' +
+      '<td class="share">' + shareBar(r, max) + '</td>' +
+      '<td class="r">' + (r.avg == null ? DASH : esc(Studio.fmt.dur(r.avg))) + '</td>' +
+      '<td class="r">' + (r.work == null ? DASH : esc(Studio.fmt.dur(r.work))) + '</td>' +
+      '<td class="r">' + (r.cost == null ? DASH : esc(Studio.fmt.money(r.cost))) + '</td>' +
+      '<td class="r faint">' + lastActive(r) + '</td></tr>';
+  }
+
+  function table(rows) {
+    var max = Math.max.apply(null, rows.map(function (r) { return r.total; }));
+    var cols = ['Agent', 'Right now', 'Tasks done', 'Share of work', 'Avg. time', 'Total time', 'Est. cost', 'Last active'];
+    var th = cols.map(function (c, i) {
+      var cls = i === 3 ? ' class="share"' : (i > 1 ? ' class="r"' : '');
+      return '<th' + cls + '>' + c + '</th>';
+    }).join('');
+    return '<section class="panel table-wrap"><table><thead><tr>' + th + '</tr></thead><tbody>' +
+      rows.map(function (r) { return row(r, max); }).join('') + '</tbody></table></section>';
+  }
+
+  function defs() {
+    return '<section class="panel"><div class="panel-head"><h2>What these columns mean</h2></div><div class="panel-body defs">' +
+      '<div><b>Tasks done</b>: finished and checked, out of all tasks given to this agent.</div>' +
+      '<div><b>Avg. time</b>: from start to a passing check, for tasks that recorded timing.</div>' +
+      '<div><b>Est. cost</b>: estimated from token counts. The real bill is on Home under Spend.</div>' +
+      '<div><b>Right now</b>: the task this agent is working on, or the one it is stuck on.</div></div></section>';
+  }
+
+  function skeleton() {
+    var bar = function (w) { return '<div class="skel" style="width:' + w + '"></div>'; };
+    var block = '<div class="skel-block">' + bar('100%') + bar('92%') + bar('74%') + '</div>';
+    return head() + block + block;
+  }
+
+  function render(ctx) {
+    var rows = buildRows(ctx.model);
+    if (!rows.length) return head() + '<section class="panel">' + ctx.ui.empty('No tasks yet', 'Agents show up here once the plan has tasks.') + '</section>';
+    return head() + table(rows) + defs();
+  }
+
+  Studio.registerPage('team', {
+    deps: ['tasks', 'telemetry', 'runs'],
+    render: render,
+    skeleton: skeleton
+  });
+`;

package/dist/server/studio-ui/pages/team/styles.d.ts

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

package/dist/server/studio-ui/pages/team/styles.js

@@ -0,0 +1,22 @@
+// Team page styles, all scoped under #panel-team.
+export const teamCss = String.raw `#panel-team .page-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
+#panel-team .page-head h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
+#panel-team .page-head p { margin: 4px 0 0; color: var(--fg-2); }
+#panel-team .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; margin-top: 16px; }
+#panel-team .panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
+#panel-team .panel-head h2 { font-size: 14px; font-weight: 600; margin: 0; }
+#panel-team .panel-body { padding: 14px 16px; }
+#panel-team .table-wrap { overflow-x: auto; }
+#panel-team table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
+#panel-team th { text-align: left; font-weight: 500; font-size: 12px; color: var(--fg-3); padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+#panel-team td { padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+#panel-team tr:last-child td { border-bottom: 0; }
+#panel-team td.r, #panel-team th.r { text-align: right; }
+#panel-team .share { width: 110px; }
+#panel-team .bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
+#panel-team .bar i { display: block; height: 100%; border-radius: 3px; }
+#panel-team .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 12px var(--mono); cursor: pointer; }
+#panel-team .chip:hover { background: var(--surface-2); }
+#panel-team .defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; font-size: 13px; color: var(--fg-2); }
+#panel-team .defs b { color: var(--fg); font-weight: 500; }
+`;

package/dist/server/studio-ui/pages/types.d.ts

@@ -0,0 +1,13 @@
+export interface PageModule {
+    id: string;
+    group: 'now' | 'project' | 'system';
+    label: string;
+    /** Inner SVG markup for a 24-unit viewBox (stroke icon). */
+    icon: string;
+    /** Styles scoped under #panel-<id>. */
+    css: string;
+    /** Client script; the shell wraps it in its own function scope and passes Studio. */
+    script: string;
+    /** Static markup placed inside the page panel before the first paint. */
+    markup?: string;
+}

package/dist/server/studio-ui/pages/types.js

@@ -0,0 +1 @@
+export {};

package/dist/server/studio-ui/pages/worktrees/index.d.ts

@@ -0,0 +1,2 @@
+import type { PageModule } from '../types.js';
+export declare const worktreesPage: PageModule;

package/dist/server/studio-ui/pages/worktrees/index.js

@@ -0,0 +1,11 @@
+import { ICON_PATHS } from '../../shell/icons.js';
+import { worktreesCss } from './styles.js';
+import { worktreesScript } from './script.js';
+export const worktreesPage = {
+    id: 'worktrees',
+    group: 'project',
+    label: 'Worktrees',
+    icon: ICON_PATHS.worktrees,
+    css: worktreesCss,
+    script: worktreesScript,
+};

package/dist/server/studio-ui/pages/worktrees/script.d.ts

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

package/dist/server/studio-ui/pages/worktrees/script.js

@@ -0,0 +1,104 @@
+// Worktrees view script.
+export const worktreesScript = String.raw `  // ─── View 3: Agent worktrees ───────────────────────────────────────────────
+  function shortPath(p) {
+    var parts = String(p || '').split(/[\\/]+/).filter(Boolean);
+    return parts.length > 2 ? '…/' + parts.slice(-2).join('/') : String(p || '');
+  }
+
+  function worktreeTaskStatus(w) {
+    if (w.taskStatus) return w.taskStatus;
+    var task = w.taskId ? taskById(w.taskId) : null;
+    return task ? task.status : null;
+  }
+
+  function worktreeBadge(w, status) {
+    if (!w.isAgentWorktree) return '<span class="badge badge-neutral">Main workspace</span>';
+    if (status === 'completed') return '<span class="badge badge-success">Tests Passed (Ready to merge)</span>';
+    if (status === 'in_progress') return '<span class="badge badge-active">Agent working</span>';
+    if (status === 'blocked') return '<span class="badge badge-danger">Blocked</span>';
+    if (status === 'pending') return '<span class="badge badge-neutral">Pending</span>';
+    return '<span class="badge badge-neutral" title="No matching task in the master plan">Untracked</span>';
+  }
+
+  function worktreeRow(w) {
+    var status = worktreeTaskStatus(w);
+    var task = w.taskId ? taskById(w.taskId) : null;
+    // The server decides merge eligibility (and why not); fall back to the task status from the plan.
+    var canMerge = w.mergeEligible != null ? !!w.mergeEligible : status === 'completed';
+    var blockedWhy = w.mergeBlockedReason || 'Available once the task is completed';
+    var busy = w.taskId && pipe.busy['wt:' + w.taskId];
+    var actions = '<span class="muted">–</span>';
+    if (w.isAgentWorktree && w.taskId) {
+      actions = busy
+        ? '<button class="btn small" type="button" disabled><span class="spinner" aria-hidden="true"></span>' + (busy === 'merge' ? 'Merging…' : 'Deleting…') + '</button>'
+        : '<button class="btn small" type="button" data-act="wt-diff" data-key="' + esc(w.taskId) + '" aria-label="' + esc('Inspect diff for ' + w.taskId) + '">Inspect Diff</button>' +
+          '<button class="btn small primary" type="button" data-act="wt-merge" data-key="' + esc(w.taskId) + '"' + (canMerge ? '' : ' disabled title="' + esc(blockedWhy) + '"') + '>Merge to Main</button>' +
+          '<button class="btn small danger" type="button" data-act="wt-remove" data-key="' + esc(w.taskId) + '">Delete Workspace</button>';
+    }
+    return '<tr><td data-label="Branch"><code>' + esc(w.branch) + '</code></td>' +
+      '<td data-label="Task ID">' + (w.taskId ? '<div><code>' + esc(w.taskId) + '</code>' + (task ? '<div class="cell-sub" title="' + esc(task.title) + '">' + esc(task.title) + '</div>' : '') + '</div>' : '<span class="muted">–</span>') + '</td>' +
+      '<td data-label="Workspace Folder"><code class="path" title="' + esc(w.path) + '">' + esc(shortPath(w.path)) + '</code></td>' +
+      '<td data-label="Latest Commit"><code>' + esc(String(w.head || '').slice(0, 7) || '–') + '</code></td>' +
+      '<td data-label="Status">' + worktreeBadge(w, status) + '</td>' +
+      '<td data-label="Actions"><div class="row-actions">' + actions + '</div></td></tr>';
+  }
+
+  function renderWorktrees() {
+    var head = panelHead('Agent Worktrees', 'Isolated git workspaces for tasks. Changes are tested automatically before merging into your main branch.');
+    if (!pipe.loaded.worktrees) return head + '<div class="card section" aria-hidden="true"><div class="skeleton"></div><div class="skeleton"></div><div class="skeleton short"></div></div>';
+    if (pipe.errors.worktrees && !pipe.worktrees.length) return head + errorCard('worktrees', pipe.errors.worktrees, 'worktrees');
+    var rows = pipe.worktrees.slice().sort(function (a, b) { return (a.isAgentWorktree ? 1 : 0) - (b.isAgentWorktree ? 1 : 0); });
+    if (!rows.some(function (w) { return w.isAgentWorktree; })) {
+      return head + staleNote('worktrees') + '<div class="card state"><div class="state-icon">' + ICON.branch + '</div><h2>No agent worktrees</h2>' +
+        '<p>Run <code>nativ worktree create &lt;taskId&gt;</code> to give an agent its own isolated workspace folder for an independent task.</p></div>';
+    }
+    return head + staleNote('worktrees') + '<div class="card wt-card"><table class="grid"><thead><tr>' +
+      '<th scope="col">Branch Name</th><th scope="col">Task ID</th><th scope="col">Workspace Folder</th><th scope="col">Latest Commit</th><th scope="col">Status</th><th scope="col">Actions</th>' +
+      '</tr></thead><tbody>' + rows.map(worktreeRow).join('') + '</tbody></table></div>';
+  }
+
+  function confirmWorktree(action, taskId) {
+    var w = null;
+    pipe.worktrees.some(function (x) { if (x.taskId === taskId) { w = x; return true; } return false; });
+    var branch = w ? w.branch : 'agent/task-' + taskId;
+    if (action === 'merge') {
+      confirmDialog({
+        title: 'Merge to Main',
+        body: 'Merge ' + branch + ' into the main workspace? Automated tests will run first and reject the merge if tests fail.',
+        confirmLabel: 'Merge to Main'
+      }, function () { runWorktreeAction('merge', taskId); });
+    } else {
+      confirmDialog({
+        title: 'Delete workspace',
+        body: 'Remove the workspace folder for ' + taskId + ' and delete branch ' + branch + '? Uncommitted work will be removed.',
+        confirmLabel: 'Delete Workspace',
+        danger: true
+      }, function () { runWorktreeAction('remove', taskId); });
+    }
+  }
+
+  function runWorktreeAction(action, taskId) {
+    var key = 'wt:' + taskId;
+    if (pipe.busy[key]) return;
+    pipe.busy[key] = action;
+    repaint('worktrees');
+    postJson('/api/pipeline/worktrees/action', { action: action, taskId: taskId }).then(function (r) {
+      toast(r.message || (action === 'merge' ? 'Merged workspace for ' : 'Deleted workspace for ') + taskId, 'ok');
+    }, function (e) {
+      toast((action === 'merge' ? 'Merge rejected for ' : 'Could not delete workspace for ') + taskId + ': ' + e.message);
+    }).then(function () {
+      delete pipe.busy[key];
+      return fetchPipeline(['worktrees', 'tasks', 'status']);
+    });
+  }
+
+  Studio.registerPage('worktrees', {
+    deps: ['worktrees', 'tasks'],
+    render: function () { return renderWorktrees(); },
+    actions: {
+      'wt-diff': function (el) { openConsole(el.getAttribute('data-key'), false, 'diff'); },
+      'wt-merge': function (el) { confirmWorktree('merge', el.getAttribute('data-key')); },
+      'wt-remove': function (el) { confirmWorktree('remove', el.getAttribute('data-key')); }
+    }
+  });
+`;

package/dist/server/studio-ui/pages/worktrees/styles.d.ts

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

package/dist/server/studio-ui/pages/worktrees/styles.js

@@ -0,0 +1,15 @@
+// Worktrees view styles.
+export const worktreesCss = String.raw `/* Agent worktrees */
+.wt-card { overflow: hidden; }
+table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
+table.grid th { padding: 10px 16px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap; }
+table.grid th:last-child { text-align: right; }
+table.grid td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
+table.grid tbody tr:last-child td { border-bottom: none; }
+table.grid tbody tr:hover td { background: var(--bg); }
+table.grid code { font-size: 12.5px; }
+.cell-sub { max-width: 280px; margin-top: 2px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.path { display: inline-block; max-width: 260px; vertical-align: bottom; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
+
+`;

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

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

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

@@ -0,0 +1,49 @@
+// Task actions behind the detail panel and the pages: start, dispatch, stop, logs, proposals.
+export const actionsScript = String.raw `  // ─── Task actions ──────────────────────────────────────────────────────────
+  /** Plain-language failure text: no stack, one closing period. */
+  function plainFail(what, e) {
+    return what + ': ' + String((e && e.message) || 'unknown error').replace(/[.\s]+$/, '') + '.';
+  }
+
+  function runTaskAction(action, taskId) {
+    var key = 'task:' + taskId;
+    if (pipe.busy[key]) return;
+    pipe.busy[key] = action;
+    refreshUi([]);
+    postJson('/api/pipeline/tasks/action', { action: action, taskId: taskId }).then(function () {
+      toast('Started ' + taskId, 'ok');
+    }, function (e) {
+      toast(plainFail('Could not start ' + taskId, e));
+    }).then(function () {
+      delete pipe.busy[key];
+      return fetchPipeline(['status', 'tasks', 'worktrees']);
+    });
+  }
+
+  function askArchitect(taskId) {
+    var escalation = escalationFor(taskId);
+    if (!escalation) { toast('There is nothing waiting for the architect on ' + taskId + '.'); return; }
+    openConsole(taskId, true, 'heal');
+    runTriage(escalation);
+  }
+
+  var TASK_ACTIONS = {
+    start: function (id) { runTaskAction('start', id); },
+    dispatch: function (id) { openDispatchDialog(id); },
+    abort: function (id) { confirmAbort(id); },
+    logs: function (id) { openConsole(id, false, 'logs'); },
+    output: function (id) { openConsole(id, false, 'logs'); },
+    proposal: function (id) { openConsole(id, false, 'heal'); },
+    ask: askArchitect,
+    flow: function (id) {
+      var t = Studio.model && Studio.model.byId[id];
+      if (t) Studio.go('flow', { milestoneId: t.milestoneId, focusTaskId: id, keepDetail: true });
+    }
+  };
+  Studio.taskAction = function (name, taskId) {
+    if (TASK_ACTIONS[name]) TASK_ACTIONS[name](taskId);
+  };
+  /** Name of the action running for a task, or null. */
+  Studio.busyAction = function (taskId) { return pipe.busy['task:' + taskId] || null; };
+
+`;

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

@@ -0,0 +1,2 @@
+import type { PageModule } from '../pages/types.js';
+export declare function bootScript(pages: PageModule[]): string;

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

@@ -0,0 +1,13 @@
+// Startup: pages register, the first view opens, data loads and the live stream connects.
+export function bootScript(pages) {
+    const order = JSON.stringify(pages.map((p) => ({ id: p.id, group: p.group, label: p.label, icon: p.icon })));
+    return String.raw `  // ─── Boot ──────────────────────────────────────────────────────────────────
+  Studio.order = ${order};
+  setView(Studio.resolveHash(location.hash, pageIds()));
+  fetchPipeline(ALL_PARTS);
+  connectEvents();
+})();
+</script>
+</body>
+</html>`;
+}

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

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

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;