@njeybe/nativ 2.2.0 → 2.3.1

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

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

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

@@ -0,0 +1,61 @@
+import { flowLayoutScript } from './layout.js';
+import { flowPlanScript } from './plan-view.js';
+import { flowTimeModelScript } from './timeline-model.js';
+import { flowTimelineScript } from './timeline-view.js';
+// Flow page: registration, header and click handling. Views live in the sibling files.
+const flowMainScript = String.raw `  var ui = Studio.ui, fmt = Studio.fmt;
+  var view = { mode: 'plan', implied: false };
+
+  function flowHead(m) {
+    var seg = function (mode, label) {
+      return '<button type="button" data-act="flow-mode" data-mode="' + mode + '" aria-pressed="' + (view.mode === mode) + '">' + label + '</button>';
+    };
+    return '<div class="panel-head"><div class="panel-title"><h1>Flow</h1><p class="lead">' +
+      (m ? ui.esc(m.name) : 'How the work in one milestone connects and how it actually ran.') + '</p></div>' +
+      '<div class="panel-actions">' + ui.milestoneSelect() + '<div class="seg" role="group" aria-label="Flow view">' +
+      seg('plan', 'Plan') + seg('timeline', 'What happened') + '</div></div></div>';
+  }
+
+  function flowShowFocus() {
+    var id = Studio.state.focusTaskId;
+    if (!id || typeof document === 'undefined') return;
+    setTimeout(function () {
+      var el = document.querySelector('#panel-flow [data-id="' + String(id).replace(/["\\]/g, '') + '"]');
+      if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest', inline: 'center' });
+    }, 0);
+  }
+
+  Studio.registerPage('flow', {
+    deps: ['tasks', 'telemetry', 'runs'],
+    onShow: flowShowFocus,
+    render: function (ctx) {
+      var wanted = ctx.state.milestoneId || ctx.model.activeMilestoneId;
+      var m = ctx.model.milestones.filter(function (x) { return x.id === wanted; })[0];
+      if (!m) return flowHead(null) + ui.empty('No milestones yet', 'Add tasks to the plan to see them here.');
+      if (ctx.state.focusTaskId) view.mode = 'plan';
+      var body = !m.tasks.length ? ui.empty('This milestone has no tasks yet.', '')
+        : view.mode === 'plan' ? flowPlan(m, ctx.state.focusTaskId, view) : flowTimeline(m, ctx);
+      return flowHead(m) + body;
+    },
+    actions: {
+      'flow-mode': function (el) {
+        view.mode = el.getAttribute('data-mode') === 'timeline' ? 'timeline' : 'plan';
+        Studio.state.focusTaskId = null;
+        Studio.repaint('flow');
+      },
+      'flow-focus': function (el) {
+        var id = el.getAttribute('data-id');
+        if (Studio.state.focusTaskId === id) { Studio.closeDetail(); return; }
+        Studio.state.focusTaskId = id;
+        Studio.openTask(id);
+        Studio.repaint('flow');
+      },
+      'flow-clear': function () { Studio.closeDetail(); },
+      'flow-implied': function (el) {
+        view.implied = !!el.checked;
+        Studio.repaint('flow');
+      }
+    }
+  });
+`;
+export const flowScript = [flowLayoutScript, flowPlanScript, flowTimeModelScript, flowTimelineScript, flowMainScript].join('');

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

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

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

@@ -0,0 +1,59 @@
+// Flow page styles, all scoped under #panel-flow.
+export const flowCss = String.raw `#panel-flow .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
+#panel-flow .seg button { border: 0; background: none; padding: 0 12px; height: 30px; font-size: 13px; color: var(--fg-2); cursor: pointer; }
+#panel-flow .seg button + button { border-left: 1px solid var(--line); }
+#panel-flow .seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
+#panel-flow .fl-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; overflow: hidden; }
+#panel-flow .fl-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px; }
+#panel-flow .fl-bar .right { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-3); }
+#panel-flow .flow-wrap { overflow: auto; max-height: 72vh; position: relative; border-top: 1px solid var(--line); }
+#panel-flow .canvas { position: relative; }
+#panel-flow .canvas svg.wires { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
+#panel-flow .wire { fill: none; stroke: var(--line-2); stroke-width: 1.5; transition: opacity .15s, stroke .15s; }
+#panel-flow .wire.implied { stroke-dasharray: 4 4; }
+#panel-flow .wire.hot { stroke: var(--accent); stroke-width: 2; }
+#panel-flow .canvas.focus .wire:not(.hot) { opacity: .15; }
+#panel-flow .lane-band { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
+#panel-flow .lane-band:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
+#panel-flow .lane-label { position: sticky; left: 0; width: 128px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border-right: 1px solid var(--line); height: 100%; z-index: 2; }
+#panel-flow .lane-label .faint { font-size: 11.5px; }
+#panel-flow .round-head { position: absolute; top: 0; height: 30px; display: flex; align-items: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
+#panel-flow .node { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; text-align: left; cursor: pointer; transition: opacity .15s, border-color .15s, box-shadow .15s; z-index: 1; }
+#panel-flow .node:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
+#panel-flow .node.in_progress { border-color: color-mix(in srgb, var(--run) 50%, var(--line)); background: color-mix(in srgb, var(--run-soft) 55%, var(--surface)); }
+#panel-flow .node.blocked { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); background: color-mix(in srgb, var(--bad-soft) 55%, var(--surface)); }
+#panel-flow .node .l1 { display: flex; align-items: center; gap: 6px; }
+#panel-flow .node .l1 .d { margin-left: auto; font: 11px var(--mono); color: var(--fg-3); }
+#panel-flow .node .l1 .mono { font-size: 11px; }
+#panel-flow .node .title { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#panel-flow .canvas.focus .node:not(.hot) { opacity: .3; }
+#panel-flow .node.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+#panel-flow .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--fg-2); align-items: center; }
+#panel-flow .legend span { display: inline-flex; align-items: center; gap: 6px; }
+#panel-flow .check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); }
+#panel-flow .stats { display: flex; flex-wrap: wrap; }
+#panel-flow .stats > div { padding: 12px 16px; display: flex; flex-direction: column; gap: 1px; min-width: 140px; }
+#panel-flow .stats > div + div { border-left: 1px solid var(--line); }
+#panel-flow .stats .k { font-size: 12px; color: var(--fg-3); }
+#panel-flow .stats .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
+#panel-flow .stats .s { font-size: 12px; color: var(--fg-2); }
+#panel-flow svg.tl { display: block; }
+#panel-flow svg.tl text { font-family: var(--font); font-size: 11px; fill: var(--fg-3); }
+#panel-flow svg.tl .lane-t { fill: var(--fg); font-weight: 500; font-size: 12px; }
+#panel-flow svg.tl .grid { stroke: var(--line); stroke-width: 1; }
+#panel-flow svg.tl .band { fill: var(--surface-2); opacity: .5; }
+#panel-flow svg.tl .gap { fill: var(--surface-2); }
+#panel-flow svg.tl .gap-line { stroke: var(--line-2); stroke-dasharray: 3 3; }
+#panel-flow svg.tl .bar-w { fill: color-mix(in srgb, var(--ok) 30%, var(--surface)); stroke: var(--ok); stroke-width: 1; cursor: pointer; }
+#panel-flow svg.tl .bar-c { fill: var(--ok); pointer-events: none; }
+#panel-flow svg.tl .bar-w.in_progress { fill: url(#fl-stripes); stroke: var(--run); }
+#panel-flow svg.tl .bar-w.blocked { fill: color-mix(in srgb, var(--bad) 22%, var(--surface)); stroke: var(--bad); }
+#panel-flow svg.tl .bar-w:hover { stroke-width: 2; }
+#panel-flow svg.tl .bar-l { fill: var(--fg); font-size: 11px; pointer-events: none; font-family: var(--mono); }
+#panel-flow svg.tl .now-line { stroke: var(--run); stroke-width: 1.5; }
+#panel-flow svg.tl .stripe-a { fill: var(--run-soft); }
+#panel-flow svg.tl .stripe-b { fill: color-mix(in srgb, var(--run) 30%, var(--surface)); }
+#panel-flow .fl-untimed { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-3); }
+#panel-flow .fl-untimed button { border: 0; background: none; padding: 0; color: var(--fg-2); cursor: pointer; }
+#panel-flow .fl-untimed button:hover { text-decoration: underline; }
+`;

package/dist/server/studio-ui/pages/flow/timeline-model.d.ts

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

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

@@ -0,0 +1,95 @@
+// Timeline numbers: bar times, squeezed idle gaps, agent rows and summary figures. Pure.
+export const flowTimeModelScript = String.raw `  var TL = { GAP: 15 * 60000, MIN_BAR: 15000, LW: 130, GW: 40, ROWH: 30, TOPY: 30 };
+
+  function flowEnd(t, now) {
+    if (t.status === 'in_progress') return Math.max(now, t.startT + 1000);
+    if (t.endT && t.endT > t.startT) return t.endT;
+    return t.startT + (t.durationMs || TL.MIN_BAR);
+  }
+
+  /** Merges sorted [start, end] pairs; touching within slack counts as one stretch. */
+  function flowMerge(iv, slack) {
+    var out = [];
+    iv.forEach(function (p) {
+      var last = out[out.length - 1];
+      if (last && p[0] - last[1] <= slack) last[1] = Math.max(last[1], p[1]);
+      else out.push([p[0], p[1]]);
+    });
+    return out;
+  }
+
+  function flowSummary(timed, now) {
+    var iv = timed.map(function (t) { return [t.startT, flowEnd(t, now)]; }).sort(function (a, b) { return a[0] - b[0]; });
+    var busy = flowMerge(iv, 0);
+    var busyMs = busy.reduce(function (s, p) { return s + p[1] - p[0]; }, 0);
+    var last = Math.max.apply(null, iv.map(function (p) { return p[1]; }));
+    var span = last - iv[0][0];
+    var longest = 0, at = null;
+    for (var i = 1; i < busy.length; i++) {
+      var g = busy[i][0] - busy[i - 1][1];
+      if (g > longest) { longest = g; at = busy[i - 1][1]; }
+    }
+    var peak = 0;
+    iv.forEach(function (p) {
+      var c = iv.filter(function (o) { return o[0] <= p[0] && o[1] > p[0]; }).length;
+      peak = Math.max(peak, c);
+    });
+    return { iv: iv, start: iv[0][0], span: span, busyMs: busyMs, busyPct: Math.round(busyMs / (span || 1) * 100),
+      peak: peak, longest: longest, longestAt: at };
+  }
+
+  /** Time segments left to right: real stretches plus fixed-width bands for idle gaps over 15 minutes. */
+  function flowSegments(iv, width) {
+    var merged = flowMerge(iv, TL.GAP);
+    var plotW = width - TL.LW - 24 - (merged.length - 1) * TL.GW;
+    var active = merged.reduce(function (s, p) { return s + p[1] - p[0]; }, 0) || 1;
+    var k = Math.max(plotW, 120) / active, segs = [], x = TL.LW;
+    merged.forEach(function (p, i) {
+      if (i) {
+        segs.push({ gap: true, t0: merged[i - 1][1], t1: p[0], x0: x, x1: x + TL.GW });
+        x += TL.GW;
+      }
+      segs.push({ t0: p[0], t1: p[1], x0: x, x1: x + (p[1] - p[0]) * k });
+      x += (p[1] - p[0]) * k;
+    });
+    var X = function (t) {
+      var s = segs.filter(function (q) { return t >= q.t0 && t <= q.t1; })[0] || (t < segs[0].t0 ? segs[0] : segs[segs.length - 1]);
+      var scale = s.gap ? TL.GW / (s.t1 - s.t0) : k;
+      return s.x0 + Math.max(0, Math.min(t, s.t1) - s.t0) * scale;
+    };
+    return { segs: segs, k: k, X: X, right: x };
+  }
+
+  /** Overlapping tasks of one agent go on extra rows. */
+  function flowRows(list, now) {
+    var rows = [], place = {};
+    list.slice().sort(function (a, b) { return a.startT - b.startT; }).forEach(function (t) {
+      var r = 0;
+      while (r < rows.length && rows[r] > t.startT) r++;
+      rows[r] = flowEnd(t, now);
+      place[t.id] = r;
+    });
+    return { count: Math.max(1, rows.length), place: place };
+  }
+
+  function flowTimeModel(m, now, outer) {
+    var timed = m.tasks.filter(function (t) { return t.startT; });
+    if (!timed.length) return null;
+    var sum = flowSummary(timed, now);
+    var width = Math.max(760, (outer || 1000) - 2);
+    var sg = flowSegments(sum.iv, width);
+    var lanes = [], y = TL.TOPY;
+    m.tasks.forEach(function (t) {
+      var a = flowAgentKey(t);
+      if (lanes.some(function (l) { return l.key === a; })) return;
+      var list = timed.filter(function (o) { return flowAgentKey(o) === a; });
+      if (!list.length) return;
+      var rows = flowRows(list, now);
+      lanes.push({ key: a, y: y, h: rows.count * TL.ROWH + 12, place: rows.place, tasks: list });
+      y += rows.count * TL.ROWH + 12;
+    });
+    return { timed: timed, untimed: m.tasks.filter(function (t) { return !t.startT; }), sum: sum, sg: sg,
+      lanes: lanes, width: width, height: y + 8, now: now };
+  }
+
+`;

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

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

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;