@njeybe/nativ 2.1.0 → 2.3.0

package/dist/server/studio-ui/pages/flow/timeline-view.js

@@ -0,0 +1,92 @@
+// What happened view: SVG bars from real times, squeezed pauses, summary figures.
+export const flowTimelineScript = String.raw `  function flowStat(k, v, s) {
+    return '<div><span class="k">' + k + '</span><span class="v">' + v + '</span><span class="s">' + s + '</span></div>';
+  }
+
+  function flowStats(s) {
+    return '<div class="stats">' +
+      flowStat('Start to finish', ui.esc(fmt.dur(s.span)), ui.esc(fmt.day(s.start) + ', ' + fmt.clock(s.start))) +
+      flowStat('Agents busy', s.busyPct + '%', ui.esc(fmt.dur(s.busyMs)) + ' of work time') +
+      flowStat('Most at once', s.peak, s.peak > 1 ? 'tasks ran side by side' : 'tasks ran one at a time') +
+      flowStat('Longest pause', s.longest ? ui.esc(fmt.dur(s.longest)) : 'none', s.longestAt ? 'from ' + ui.esc(fmt.clock(s.longestAt)) : 'no idle stretch') +
+      '</div>';
+  }
+
+  function flowTicks(tm) {
+    var sg = tm.sg, top = TL.TOPY - 6, out = '';
+    var nice = [1, 2, 5, 10, 15, 30, 60, 120, 240].map(function (v) { return v * 60000; });
+    var step = nice.filter(function (v) { return v * sg.k >= 80; })[0] || nice[nice.length - 1];
+    sg.segs.filter(function (s) { return !s.gap; }).forEach(function (s) {
+      out += '<line class="grid" x1="' + s.x0 + '" x2="' + s.x0 + '" y1="' + top + '" y2="' + tm.height + '"/><text x="' + (s.x0 + 3) + '" y="14">' + ui.esc(fmt.clock(s.t0)) + '</text>';
+      for (var t = Math.ceil(s.t0 / step) * step; t < s.t1; t += step) {
+        var tx = sg.X(t);
+        if (tx - s.x0 > 44) out += '<line class="grid" x1="' + tx + '" x2="' + tx + '" y1="' + top + '" y2="' + tm.height + '"/><text x="' + (tx + 3) + '" y="14">' + ui.esc(fmt.clock(t)) + '</text>';
+      }
+    });
+    return out;
+  }
+
+  function flowGaps(tm) {
+    var top = TL.TOPY - 6;
+    return tm.sg.segs.filter(function (s) { return s.gap; }).map(function (s) {
+      var mid = s.x0 + TL.GW / 2;
+      return '<g class="gap-g" data-gap="' + (s.t1 - s.t0) + '"><rect class="gap" x="' + s.x0 + '" y="' + top + '" width="' + TL.GW + '" height="' + (tm.height - top) +
+        '"/><line class="gap-line" x1="' + mid + '" x2="' + mid + '" y1="' + top + '" y2="' + tm.height + '"/><text x="' + mid + '" y="26" text-anchor="middle">+' +
+        ui.esc(fmt.dur(s.t1 - s.t0).split(' ')[0]) + '</text></g>';
+    }).join('');
+  }
+
+  function flowLaneBands(tm) {
+    return tm.lanes.map(function (l, i) {
+      return (i % 2 ? '<rect class="band" x="0" y="' + l.y + '" width="' + tm.width + '" height="' + l.h + '"/>' : '') +
+        '<line class="grid" x1="0" x2="' + tm.width + '" y1="' + l.y + '" y2="' + l.y + '"/><text class="lane-t" x="12" y="' + (l.y + 20) + '">' +
+        ui.esc(Studio.agentInfo(l.key === 'unassigned' ? null : l.key).label) + '</text>';
+    }).join('');
+  }
+
+  function flowBar(t, lane, tm) {
+    var X = tm.sg.X;
+    var x1 = X(t.startT), x2 = Math.max(X(flowEnd(t, tm.now)), x1 + 4), w = x2 - x1;
+    var row = lane.place[t.id], by = lane.y + 6 + row * TL.ROWH;
+    var cw = t.checkMs && t.status === 'completed' ? Math.min(w, t.checkMs * tm.sg.k) : 0;
+    var lx = w > 64 ? x1 + 6 : x2 + 4;
+    var took = (t.status === 'in_progress' ? 'running' : 'took ' + fmt.dur(t.durationMs)) + (t.checkMs ? ', check ' + fmt.dur(t.checkMs) : '');
+    var tip = ui.esc(t.id + ' · ' + t.title) + '&#10;' + ui.esc(took);
+    return '<g><rect class="bar-w ' + ui.esc(t.status) + '" data-task="' + ui.esc(t.id) + '" data-row="' + row + '" x="' + x1 + '" y="' + by +
+      '" width="' + w + '" height="21" rx="4"><title>' + tip + '</title></rect>' +
+      (cw > 1 ? '<rect class="bar-c" x="' + (x2 - cw) + '" y="' + (by + 17) + '" width="' + cw + '" height="4" rx="1"/>' : '') +
+      '<text class="bar-l" x="' + lx + '" y="' + (by + 15) + '">' + ui.esc(t.id) + '</text></g>';
+  }
+
+  function flowLegendTl() {
+    return '<div class="legend"><span><svg width="22" height="10"><rect x="0" y="0" width="22" height="10" rx="3" fill="color-mix(in srgb, var(--ok) 30%, var(--surface))" stroke="var(--ok)"/></svg>Work</span>' +
+      '<span><svg width="22" height="10"><rect x="0" y="6" width="22" height="4" rx="1" fill="var(--ok)"/></svg>Check at the end</span>' +
+      '<span><svg width="16" height="12"><rect x="0" y="0" width="16" height="12" fill="var(--surface-2)"/><line x1="8" x2="8" y1="0" y2="12" stroke="var(--line-2)" stroke-dasharray="2 2"/></svg>Long pause, squeezed</span></div>';
+  }
+
+  function flowUntimed(list) {
+    if (!list.length) return '';
+    return '<div class="fl-untimed">Not on the timeline: ' + list.map(function (t) {
+      return '<button type="button" class="mono" data-task="' + ui.esc(t.id) + '">' + ui.esc(t.id) + '</button> (' + ui.esc(Studio.statusLabel(t.status).toLowerCase()) + ')';
+    }).join(', ') + '</div>';
+  }
+
+  function flowTimeline(m, ctx) {
+    var tm = flowTimeModel(m, Studio.now(), ctx.width);
+    if (!tm) {
+      return '<section class="fl-panel" data-mode="timeline">' + ui.empty('No timing recorded for ' + m.id,
+        'These tasks ran before Studio started recording start and finish times. The Plan view still shows how they connect.') + '</section>';
+    }
+    var nowLine = tm.timed.some(function (t) { return t.status === 'in_progress'; })
+      ? '<line class="now-line" x1="' + tm.sg.X(tm.now) + '" x2="' + tm.sg.X(tm.now) + '" y1="' + (TL.TOPY - 6) + '" y2="' + tm.height + '"/>' : '';
+    var bars = tm.lanes.map(function (l) {
+      return l.tasks.map(function (t) { return flowBar(t, l, tm); }).join('');
+    }).join('');
+    return '<section class="fl-panel" data-mode="timeline">' + flowStats(tm.sum) +
+      '<div class="fl-bar">' + flowLegendTl() + '<span class="right">Click a bar for details</span></div>' +
+      '<div class="flow-wrap"><svg class="tl" width="' + tm.width + '" height="' + tm.height + '" viewBox="0 0 ' + tm.width + ' ' + tm.height + '">' +
+      '<defs><pattern id="fl-stripes" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect class="stripe-a" width="8" height="8"/><rect class="stripe-b" width="4" height="8"/></pattern></defs>' +
+      flowLaneBands(tm) + flowGaps(tm) + flowTicks(tm) + nowLine + bars + '</svg></div>' + flowUntimed(tm.untimed) + '</section>';
+  }
+
+`;

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

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

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

@@ -0,0 +1,11 @@
+import { ICON_PATHS } from '../../shell/icons.js';
+import { homeCss } from './styles.js';
+import { homeScript } from './script.js';
+export const homePage = {
+    id: 'home',
+    group: 'now',
+    label: 'Home',
+    icon: ICON_PATHS.home,
+    css: homeCss,
+    script: homeScript,
+};

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

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

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

@@ -0,0 +1,160 @@
+// Home page client script: one pure render from the shared model.
+export const homeScript = String.raw `  var esc = Studio.ui.esc;
+  var RECENT_CAP = 6;
+
+  function head() {
+    return '<div class="page-head"><div><h1>Home</h1><p>What needs you, what is running, and what just finished.</p></div></div>';
+  }
+
+  function panel(title, right, body) {
+    return '<section class="panel"><div class="panel-head"><h2>' + esc(title) + '</h2>' + right + '</div>' + body + '</section>';
+  }
+  function rightText(text) { return '<span class="right">' + esc(text) + '</span>'; }
+
+  function actBtn(act, id, label, busy) {
+    var on = busy === act.slice(5);
+    return '<button type="button" class="btn" data-act="' + act + '" data-id="' + esc(id) + '"' + (busy ? ' disabled' : '') + '>' +
+      (on ? '<span class="spinner" aria-hidden="true"></span>' : '') + esc(label) + '</button>';
+  }
+
+  function needReason(item) {
+    var t = item.task;
+    if (t.status === 'blocked') return t.reason || 'Paused after 3 attempts.';
+    var e = item.escalation || {};
+    return e.reason || e.summary || e.details || 'Waiting for your decision.';
+  }
+
+  function needItem(item) {
+    var t = item.task;
+    var busy = Studio.busyAction ? Studio.busyAction(t.id) : null;
+    var stuck = t.status === 'blocked';
+    var out = '<button type="button" class="btn primary" data-task="' + esc(t.id) + '">' + (stuck ? 'See what failed' : 'Open task') + '</button>';
+    if (stuck) out += actBtn('home-start', t.id, 'Try again', busy);
+    if (item.hasProposal) out += actBtn('home-proposal', t.id, 'Review proposal', busy);
+    else if (item.escalation) out += actBtn('home-ask', t.id, 'Ask the architect', busy);
+    return '<div class="need" data-need="' + esc(t.id) + '">' + Studio.ui.statusIcon('blocked') + '<div class="body">' +
+      '<div><span class="mono faint">' + esc(t.id) + '</span> · ' + Studio.ui.agentChip(t.agent) + '</div>' +
+      '<b style="font-weight:500">' + esc(t.title) + '</b><span class="why">' + esc(needReason(item)) + '</span>' +
+      '<div class="row">' + out + '</div></div></div>';
+  }
+
+  function needsPanel(model) {
+    var n = model.needsYou;
+    var body = n.length ? n.map(needItem).join('') :
+      '<div class="calm">' + Studio.ui.statusIcon('completed') + 'Nothing needs you. No stuck tasks, questions or proposals.</div>';
+    var right = n.length ? n.length + (n.length === 1 ? ' item' : ' items') : 'All clear';
+    return panel('Needs you', rightText(right), '<div class="panel-body">' + body + '</div>');
+  }
+
+  function lastFinished(model) {
+    var done = model.tasks.filter(function (t) { return t.status === 'completed'; });
+    var timed = done.filter(function (t) { return t.endT; }).sort(function (a, b) { return b.endT - a.endT; });
+    return timed[0] || done[done.length - 1] || null;
+  }
+
+  function idleText(model) {
+    var last = lastFinished(model);
+    if (!last) return 'No agent is working. Last finished nothing yet.';
+    var when = last.endT ? ' ' + esc(Studio.fmt.ago(last.endT)) : '';
+    return 'No agent is working. Last finished <span class="mono">' + esc(last.id) + '</span>' + when + '.';
+  }
+
+  function nowItem(t) {
+    var timer = t.startT ? '<span class="timer" data-since="' + t.startT + '">' + Studio.fmt.dur(Studio.now() - t.startT) + '</span>' : '';
+    return '<button type="button" class="now" data-task="' + esc(t.id) + '"><div class="l1">' + Studio.ui.statusIcon('in_progress') +
+      Studio.ui.agentChip(t.agent) + timer + '</div><div class="title">' + esc(t.title) + '</div>' +
+      (t.latestLog ? '<div class="log">' + esc(t.latestLog) + '</div>' : '') + '</button>';
+  }
+
+  function nowPanel(model) {
+    var r = model.running;
+    var body = r.length ? r.map(nowItem).join('') : '<div class="calm">' + idleText(model) + '</div>';
+    return panel('Right now', rightText(r.length ? r.length + ' working' : 'Idle'), '<div class="panel-body">' + body + '</div>');
+  }
+
+  function figure(k, value, total, sub) {
+    return '<div><span class="k">' + esc(k) + '</span><span class="v">' + esc(value) +
+      (total == null ? '' : '<small> / ' + esc(total) + '</small>') + '</span><span class="s">' + esc(sub) + '</span></div>';
+  }
+
+  function spendNote(s) {
+    var parts = [];
+    if (s.cacheHitRate != null) parts.push((s.cacheHitRate * 100).toFixed(1) + '% cached');
+    if (s.cacheSavingsUsd != null) parts.push('saved about ' + Studio.fmt.money(s.cacheSavingsUsd));
+    return parts.length ? parts.join(', ') : 'no spend recorded';
+  }
+
+  function stripPanel(model) {
+    var s = model.summary;
+    var left = s.tasksLeft ? s.tasksLeft + ' left' : 'all done';
+    var have = s.contractsPresent;
+    var plan = have == null ? 'not checked' : (have >= s.contractsTotal ? 'all present and intact' : (s.contractsTotal - have) + ' missing');
+    return '<section class="panel strip">' +
+      figure('Milestones', s.milestonesDone, s.milestonesTotal, 'finished') +
+      figure('Tasks', s.tasksDone, s.tasksTotal, left) +
+      figure('Spend', Studio.fmt.money(s.spendUsd), null, spendNote(s)) +
+      figure('Plan files', have == null ? '–' : have, s.contractsTotal, plan) + '</section>';
+  }
+
+  function recentTasks(model) {
+    return model.tasks.filter(function (t) { return t.status === 'completed' && t.endT; })
+      .sort(function (a, b) { return b.endT - a.endT; }).slice(0, RECENT_CAP);
+  }
+
+  function finishedRow(t) {
+    return '<button type="button" class="row-btn" data-task="' + esc(t.id) + '">' + Studio.ui.statusIcon(t.status) +
+      '<span class="mono faint hide-sm">' + esc(t.id) + '</span><span class="t">' + esc(t.title) + '</span>' +
+      '<span class="hide-sm">' + Studio.ui.agentChip(t.agent) + '</span>' +
+      '<span class="faint num row-right">' + Studio.ui.when(t.endT) + '</span></button>';
+  }
+
+  function finishedPanel(model) {
+    var list = recentTasks(model);
+    var body = list.length ? '<div class="list">' + list.map(finishedRow).join('') + '</div>' :
+      Studio.ui.empty('Nothing has finished yet.', '');
+    var btn = '<button type="button" class="btn ghost right" data-go="tasks">Open Tasks</button>';
+    return panel('Just finished', btn, body);
+  }
+
+  function msRow(m) {
+    var pct = m.total ? Math.round((m.done / m.total) * 100) : 0;
+    return '<button type="button" class="ms-row" data-ms="' + esc(m.id) + '"><span class="mono faint">' + esc(m.id) + '</span>' +
+      '<span class="t" title="' + esc(m.name) + '">' + esc(m.short) + '</span>' +
+      '<span class="bar"><i style="width:' + pct + '%"></i></span>' +
+      '<span class="num faint" style="font-size:12px;text-align:right">' + m.done + '/' + m.total + '</span></button>';
+  }
+
+  function milestonesPanel(model) {
+    var list = model.milestones.slice().reverse();
+    var body = list.length ? '<div class="list">' + list.map(msRow).join('') + '</div>' :
+      Studio.ui.empty('No milestones yet.', 'The plan has no milestones.');
+    return panel('Milestones', rightText('newest first'), body);
+  }
+
+  function skeleton() {
+    var bar = function (w) { return '<div class="skel" style="width:' + w + '"></div>'; };
+    var block = '<div class="skel-block">' + bar('40%') + bar('100%') + bar('80%') + '</div>';
+    return head() + '<div class="home-top">' + block + block + '</div>' +
+      '<div class="skel-strip">' + block + block + block + block + '</div>' +
+      '<div class="home-top">' + block + block + '</div>';
+  }
+
+  function render(ctx) {
+    var model = ctx.model;
+    return head() +
+      '<div class="home-top">' + needsPanel(model) + nowPanel(model) + '</div>' +
+      stripPanel(model) +
+      '<div class="home-top">' + finishedPanel(model) + milestonesPanel(model) + '</div>';
+  }
+
+  function forward(name) {
+    return function (el) { Studio.taskAction(name, el.getAttribute('data-id')); };
+  }
+
+  Studio.registerPage('home', {
+    deps: ['status', 'tasks', 'telemetry', 'runs', 'escalations'],
+    render: render,
+    skeleton: skeleton,
+    actions: { 'home-start': forward('start'), 'home-proposal': forward('proposal'), 'home-ask': forward('ask') }
+  });
+`;

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

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

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

@@ -0,0 +1,48 @@
+// Home page styles, all scoped under #panel-home.
+export const homeCss = String.raw `#panel-home .page-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
+#panel-home .page-head h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
+#panel-home .page-head p { margin: 4px 0 0; color: var(--fg-2); }
+#panel-home .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
+#panel-home .panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
+#panel-home .panel-head h2 { font-size: 14px; font-weight: 600; margin: 0; }
+#panel-home .panel-head .right { margin-left: auto; font-size: 12.5px; color: var(--fg-3); }
+#panel-home .panel-body { padding: 14px 16px; }
+#panel-home .home-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
+#panel-home .need { display: flex; gap: 12px; padding: 12px; border-radius: 10px; background: var(--bad-soft); }
+#panel-home .need + .need { margin-top: 8px; }
+#panel-home .need .body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+#panel-home .need .why { font-size: 13px; color: var(--fg-2); overflow-wrap: anywhere; }
+#panel-home .need .row { display: flex; gap: 8px; flex-wrap: wrap; }
+#panel-home .calm { display: flex; align-items: center; gap: 10px; color: var(--fg-2); padding: 6px 0; }
+#panel-home .calm .st { color: var(--ok); }
+#panel-home .now { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
+#panel-home .now:hover { background: var(--surface-2); }
+#panel-home .now + .now { margin-top: 8px; }
+#panel-home .now .l1 { display: flex; align-items: center; gap: 8px; }
+#panel-home .now .timer { margin-left: auto; font: 12px var(--mono); color: var(--run); }
+#panel-home .now .log { font: 11.5px var(--mono); color: var(--fg-2); background: var(--surface-2); padding: 6px 8px; border-radius: 6px; overflow-wrap: anywhere; }
+#panel-home .strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
+#panel-home .strip > div { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
+#panel-home .strip > div + div { border-left: 1px solid var(--line); }
+#panel-home .strip .k { font-size: 12px; color: var(--fg-3); }
+#panel-home .strip .v { font-size: 22px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
+#panel-home .strip .v small { font-size: 13px; font-weight: 400; color: var(--fg-3); }
+#panel-home .strip .s { font-size: 12px; color: var(--fg-2); }
+#panel-home .list .row-btn:first-child, #panel-home .list .ms-row:first-child { border-top: 0; }
+#panel-home .ms-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 120px 64px; 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-home .ms-row:hover { background: var(--surface-2); }
+#panel-home .ms-row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#panel-home .bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
+#panel-home .bar i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
+#panel-home .row-right { text-align: right; font-size: 12px; }
+#panel-home .skel-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
+@media (max-width: 900px) {
+  #panel-home .home-top { grid-template-columns: minmax(0, 1fr); }
+  #panel-home .strip, #panel-home .skel-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  #panel-home .strip > div:nth-child(3) { border-left: 0; }
+}
+@media (max-width: 760px) {
+  #panel-home .ms-row { grid-template-columns: 34px minmax(0, 1fr) 64px; }
+  #panel-home .ms-row .bar { display: none; }
+}
+`;

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

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

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

@@ -0,0 +1,17 @@
+import { homePage } from './home/index.js';
+import { tasksPage } from './tasks/index.js';
+import { flowPage } from './flow/index.js';
+import { teamPage } from './team/index.js';
+import { worktreesPage } from './worktrees/index.js';
+import { benchmarksPage } from './benchmarks/index.js';
+import { databasePage } from './database/index.js';
+// Order here is the order of the sidebar and the palette.
+export const pages = [
+    homePage,
+    tasksPage,
+    flowPage,
+    teamPage,
+    worktreesPage,
+    benchmarksPage,
+    databasePage,
+];

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

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

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

@@ -0,0 +1,11 @@
+import { ICON_PATHS } from '../../shell/icons.js';
+import { tasksScript } from './script.js';
+import { tasksCss } from './styles.js';
+export const tasksPage = {
+    id: 'tasks',
+    group: 'now',
+    label: 'Tasks',
+    icon: ICON_PATHS.tasks,
+    css: tasksCss,
+    script: tasksScript,
+};

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

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

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;