@njeybe/nativ 2.2.0 → 2.3.1

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

@@ -0,0 +1,96 @@
+// Tasks page: one milestone as four columns, then the other milestones as a history list.
+export const tasksScript = String.raw `  var ui = Studio.ui;
+  var CAP = 5;
+  var view = { lastMs: null, showAll: false, open: {} };
+
+  function head(m) {
+    var lead = m ? ui.esc(m.name) : 'The work of one milestone, by state.';
+    return '<div class="panel-head"><div class="panel-title"><h1>Tasks</h1><p class="lead">' + lead + '</p></div>' +
+      '<div class="panel-actions">' + ui.milestoneSelect() + '</div></div>';
+  }
+
+  function byNewest(a, b) { return (b.endT || 0) - (a.endT || 0); }
+
+  function metaHtml(t, fmt) {
+    if (t.status === 'completed') {
+      return '<span>' + ui.esc(fmt.ago(t.endT)) + '</span>' + (t.durationMs ? '<span>took ' + ui.esc(fmt.dur(t.durationMs)) + '</span>' : '');
+    }
+    if (t.status === 'in_progress') {
+      var live = t.startT ? '<span data-since="' + t.startT + '">' + fmt.dur(Studio.now() - t.startT) + '</span>' : '';
+      return '<span class="run">Running ' + live + '</span><span>attempt ' + (t.attempt || 1) + ' of ' + t.maxAttempts + '</span>';
+    }
+    if (t.status === 'blocked') {
+      return '<span class="bad">Paused after ' + (t.attempt || t.maxAttempts) + ' of ' + t.maxAttempts + ' attempts</span>';
+    }
+    if (t.waitingOn.length) return '<span>Waiting on ' + t.waitingOn.map(ui.esc).join(', ') + '</span>';
+    return '<span>Ready to start</span>';
+  }
+
+  function card(t, fmt) {
+    return '<button type="button" class="tcard ' + ui.esc(t.status) + '" data-task="' + ui.esc(t.id) + '">' +
+      '<div class="l1">' + ui.statusIcon(t.status) + '<span class="mono faint">' + ui.esc(t.id) + '</span>' + ui.agentChip(t.agent) + '</div>' +
+      '<div class="title">' + ui.esc(t.title) + '</div><div class="meta">' + metaHtml(t, fmt) + '</div></button>';
+  }
+
+  function column(label, status, list, shown, empty, extra, fmt) {
+    var body = shown.length ? shown.map(function (t) { return card(t, fmt); }).join('') : '<div class="col-empty">' + empty + '</div>';
+    return '<div class="col" data-col="' + status + '"><div class="col-head">' + ui.statusIcon(status) + label +
+      '<span class="count">' + list.length + '</span></div>' + body + (extra || '') + '</div>';
+  }
+
+  function board(m, fmt) {
+    var by = function (s) { return m.tasks.filter(function (t) { return t.status === s; }); };
+    var done = by('completed').reverse().sort(byNewest);
+    var shown = view.showAll ? done : done.slice(0, CAP);
+    var more = done.length > CAP
+      ? '<button type="button" class="more" data-act="tasks-more">' + (view.showAll ? 'Show fewer' : 'Show all ' + done.length) + '</button>' : '';
+    var up = by('pending'), run = by('in_progress'), stuck = by('blocked');
+    return '<div class="board">' +
+      column('Up next', 'pending', up, up, 'Nothing queued', '', fmt) +
+      column('Running', 'in_progress', run, run, 'No task is running', '', fmt) +
+      column('Just finished', 'completed', done, shown, 'Nothing finished yet', more, fmt) +
+      column('Stuck', 'blocked', stuck, stuck, 'Nothing is stuck', '', fmt) + '</div>';
+  }
+
+  function histRow(m, fmt) {
+    var open = !!view.open[m.id];
+    var full = m.total > 0 && m.done === m.total;
+    var tasks = open ? '<div class="hist-tasks">' + m.tasks.slice().reverse().sort(byNewest).map(function (t) {
+      return ui.taskRow(t, t.durationMs ? fmt.dur(t.durationMs) : '');
+    }).join('') + '</div>' : '';
+    return '<div><button type="button" class="hist-row" data-act="tasks-hist" data-ms-id="' + ui.esc(m.id) + '" aria-expanded="' + open + '">' +
+      '<span class="chev">' + ui.icon('chev', 2) + '</span><span class="mono faint">' + ui.esc(m.id) + '</span>' +
+      '<span class="t">' + ui.esc(m.short) + '</span>' +
+      '<span class="status-pill ' + (full ? 'completed' : 'in_progress') + '">' + m.done + '/' + m.total + '</span>' +
+      '<span class="faint num small">' + (m.lastEndT ? ui.esc(fmt.day(m.lastEndT)) : 'no timing') + '</span>' +
+      '<span class="faint num small">' + (m.workMs ? ui.esc(fmt.dur(m.workMs)) + ' work' : '') + '</span>' +
+      '<span class="faint num small">' + (m.costUsd != null ? ui.esc(fmt.money(m.costUsd)) : '') + '</span></button>' + tasks + '</div>';
+  }
+
+  function others(model, current, fmt) {
+    var list = model.milestones.filter(function (m) { return m.id !== current.id; }).reverse();
+    if (!list.length) return '';
+    return '<h2 class="section-title">Other milestones</h2><section class="hist">' +
+      list.map(function (m) { return histRow(m, fmt); }).join('') + '</section>';
+  }
+
+  Studio.registerPage('tasks', {
+    deps: ['tasks', 'runs', 'escalations'],
+    render: function (ctx) {
+      var model = ctx.model;
+      var wanted = ctx.state.milestoneId || model.activeMilestoneId;
+      var m = model.milestones.filter(function (x) { return x.id === wanted; })[0];
+      if (!m) return head(null) + ui.empty('No milestones yet', 'Add tasks to the plan to see them here.');
+      if (view.lastMs !== m.id) { view.lastMs = m.id; view.showAll = false; }
+      return head(m) + board(m, ctx.fmt) + others(model, m, ctx.fmt);
+    },
+    actions: {
+      'tasks-more': function () { view.showAll = !view.showAll; Studio.repaint('tasks'); },
+      'tasks-hist': function (el) {
+        var id = el.getAttribute('data-ms-id');
+        view.open[id] = !view.open[id];
+        Studio.repaint('tasks');
+      }
+    }
+  });
+`;

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

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

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

@@ -0,0 +1,37 @@
+// Board and history styles, scoped under the Tasks panel.
+export const tasksCss = String.raw `#panel-tasks .board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
+#panel-tasks .col { background: var(--surface-2); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+#panel-tasks .col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 2px; font-weight: 500; font-size: 13px; }
+#panel-tasks .col-head .count { margin-left: auto; background: var(--surface); border-radius: 999px; padding: 0 8px; font-size: 12px; color: var(--fg-2); }
+#panel-tasks .col-empty { font-size: 12.5px; color: var(--fg-3); padding: 14px 8px; text-align: center; border: 1px dashed var(--line-2); border-radius: 8px; }
+#panel-tasks .tcard { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 10px; text-align: left; width: 100%; cursor: pointer; }
+#panel-tasks .tcard:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
+#panel-tasks .tcard.in_progress { border-color: color-mix(in srgb, var(--run) 45%, var(--line)); }
+#panel-tasks .tcard.blocked { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
+#panel-tasks .tcard .l1 { display: flex; align-items: center; gap: 6px; }
+#panel-tasks .tcard .l1 .agent { margin-left: auto; }
+#panel-tasks .tcard .title { font-size: 13px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+#panel-tasks .tcard .meta { font-size: 12px; color: var(--fg-3); display: flex; gap: 8px; flex-wrap: wrap; }
+#panel-tasks .tcard .meta .run { color: var(--run); }
+#panel-tasks .tcard .meta .bad { color: var(--bad); }
+#panel-tasks .more { border: 0; background: none; color: var(--accent); font-size: 12.5px; padding: 6px; cursor: pointer; text-align: center; }
+#panel-tasks .more:hover { text-decoration: underline; }
+#panel-tasks .section-title { margin: 22px 0 8px; font-size: 15px; font-weight: 600; }
+#panel-tasks .hist { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
+#panel-tasks .hist-row { display: grid; grid-template-columns: 16px 34px minmax(0, 1fr) auto 70px 90px 60px; gap: 12px; align-items: center; padding: 9px 16px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; width: 100%; cursor: pointer; }
+#panel-tasks .hist > div:first-child .hist-row { border-top: 0; }
+#panel-tasks .hist-row:hover { background: var(--surface-2); }
+#panel-tasks .hist-row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#panel-tasks .hist-row .chev { display: inline-grid; transition: transform .15s; }
+#panel-tasks .hist-row .chev svg { width: 14px; height: 14px; }
+#panel-tasks .hist-row[aria-expanded="true"] .chev { transform: rotate(90deg); }
+#panel-tasks .hist-row .small { font-size: 12px; }
+#panel-tasks .hist-tasks { background: var(--surface-2); }
+#panel-tasks .hist-tasks .row-btn { padding-left: 46px; }
+@media (max-width: 1100px) { #panel-tasks .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 640px) {
+  #panel-tasks .board { grid-template-columns: minmax(0, 1fr); }
+  #panel-tasks .hist-row { grid-template-columns: 16px 34px minmax(0, 1fr) auto; }
+  #panel-tasks .hist-row .small { display: none; }
+}
+`;

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

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

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

@@ -0,0 +1,11 @@
+import { ICON_PATHS } from '../../shell/icons.js';
+import { teamScript } from './script.js';
+import { teamCss } from './styles.js';
+export const teamPage = {
+    id: 'team',
+    group: 'project',
+    label: 'Team',
+    icon: ICON_PATHS.team,
+    css: teamCss,
+    script: teamScript,
+};

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

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

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;