@njeybe/nativ 2.2.0 → 2.3.0

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

@@ -0,0 +1,118 @@
+// Database Studio view styles.
+export const databaseCss = String.raw `/* Database Studio */
+.telemetry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
+.pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); box-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pill b { font-weight: 600; }
+.diagnostic-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; margin: 12px 0 16px; background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: var(--r-control); }
+.diagnostic-content { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
+.diagnostic-tag { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--danger); background: var(--surface); border: 1px solid var(--danger-line); padding: 0 7px; border-radius: var(--r-control); }
+.diagnostic-msg code { background: var(--surface); padding: 1px 6px; border-radius: 4px; font-family: var(--mono); }
+.diagnostic-actions { display: flex; gap: 8px; }
+.template-helper-box { background: var(--active-bg); border: 1px solid var(--active-line); border-radius: var(--r-control); padding: 12px 14px; margin-bottom: 16px; }
+.template-helper-label { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
+.template-helper-label code { color: var(--active); font-weight: 600; }
+.template-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+.template-chip { font-family: var(--mono); font-size: 12.5px; }
+.template-chip:hover { border-color: var(--active); }
+.chip-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
+.chip-dot.on { background: var(--success); }
+.chip-dot.off { background: var(--danger); }
+
+.thumb-pop { position: fixed; z-index: 60; width: 220px; padding: 8px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-float); pointer-events: none; }
+.thumb-box { display: grid; place-items: center; min-height: 120px; max-height: 200px; overflow: hidden; border-radius: var(--r-control); background: repeating-conic-gradient(var(--chip) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px; }
+.thumb-box img { max-width: 100%; max-height: 200px; display: block; }
+.thumb-box .ph { color: var(--muted); font-size: 12px; text-align: center; padding: 12px; }
+.thumb-meta { margin-top: 6px; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
+.media-modal .thumb-box { min-height: 220px; max-height: 360px; }
+.media-modal .thumb-box img { max-height: 360px; }
+.media-modal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 14px 0 0; font-size: 13px; }
+.media-modal dt { color: var(--muted); }
+.media-modal dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.media-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
+
+.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
+.input { min-height: 32px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); min-width: 0; }
+.input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
+textarea.input { width: 100%; resize: vertical; line-height: 1.5; }
+.search { flex: 1; min-width: 180px; max-width: 420px; }
+.panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.panes-full { grid-template-columns: 1fr; }
+.pane { padding: 16px; min-width: 0; }
+.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
+.pane-head h2 { margin: 0; font-size: 15.5px; display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
+.pane-head .meta { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.table-card { border: 1px solid var(--border); border-radius: var(--r-control); margin-bottom: 8px; background: var(--surface); }
+.table-card > summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; align-items: center; gap: 8px; border-radius: var(--r-control); }
+.table-card > summary::-webkit-details-marker { display: none; }
+.table-card > summary:hover { background: var(--bg); }
+.table-card > summary::before { content: "\25B8"; color: var(--muted); transition: transform .15s; }
+.table-card[open] > summary::before { transform: rotate(90deg); }
+.table-card .tname { font-family: var(--mono); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
+.table-card .ccount { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
+.table-body { padding: 0 12px 12px; overflow-x: auto; }
+.desc { color: var(--muted); margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
+table.cols { width: 100%; border-collapse: collapse; font-size: 13px; }
+table.cols th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12.5px; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
+table.cols td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
+table.cols td.mono { white-space: nowrap; }
+.subhead { font-size: 12.5px; color: var(--muted); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .05em; }
+.idx-list { margin: 0; padding-left: 18px; font-size: 13px; }
+
+.summary-banner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 16px; margin-bottom: 16px; }
+.stat { padding: 4px 8px; }
+.stat .n { font-size: 26px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
+.stat .l { color: var(--muted); font-size: 12.5px; }
+.risk-HIGH { color: var(--danger); } .risk-MEDIUM { color: var(--active); } .risk-LOW { color: var(--success); } .risk-NONE { color: var(--muted); }
+.alert-danger { border: 1px solid var(--danger-line); background: var(--danger-bg); border-radius: var(--r-control); padding: 10px 12px; margin-bottom: 12px; }
+.alert-danger strong { color: var(--danger); }
+.diff-table td.before { color: var(--danger); } .diff-table td.after { color: var(--success); }
+.row-added td { background: var(--success-bg); } .row-dropped td { background: var(--danger-bg); } .row-altered td { background: var(--active-bg); }
+.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
+.chip { font-family: var(--mono); font-size: 12px; padding: 1px 8px; border-radius: var(--r-control); border: 1px solid var(--chip-border); background: var(--chip); }
+
+.sql-wrap { position: relative; padding: 0; overflow: hidden; }
+.sql-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
+pre.sql { margin: 0; padding: 16px; overflow: auto; max-height: 70vh; background: var(--bg); font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre; }
+.sql .k { color: var(--primary); font-weight: 600; } .sql .s { color: var(--success); } .sql .c { color: var(--muted); font-style: italic; } .sql .d { color: var(--danger); font-weight: 700; }
+.sql .p { color: var(--active); } .sql .n { color: var(--active); font-weight: 600; } .sql .o { color: var(--primary); }
+.lang { font-family: var(--mono); font-size: 11px; padding: 0 7px; border-radius: var(--r-control); border: 1px solid var(--primary-line); background: var(--primary-tint); color: var(--primary); margin-right: 6px; }
+.copy-wrap { position: relative; display: inline-flex; }
+.tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--success); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-control); pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; }
+.tooltip.show { opacity: 1; }
+
+.empty { text-align: center; padding: 48px 24px; }
+.empty .empty-icon { color: var(--primary); margin: 0 auto 12px; }
+.empty h3 { margin: 0 0 6px; font-size: 16px; }
+.empty p { color: var(--muted); margin: 0 0 16px; font-size: 15px; line-height: 1.55; }
+
+.env-toggle-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 6px; }
+.env-segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--chip); border: 1px solid var(--border); border-radius: var(--r-control); }
+.env-seg-btn { border: 1px solid transparent; background: transparent; padding: 4px 14px; border-radius: 5px; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; transition: all .15s ease; }
+.env-seg-btn:hover { color: var(--text); }
+.env-seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--primary); border-color: var(--border); box-shadow: var(--shadow); }
+.env-seg-btn[data-env-mode="prod"][aria-pressed="true"] { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
+.prod-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: var(--r-control); border: 1px solid var(--danger-line); background: var(--danger-bg); font-size: 13px; margin-bottom: 14px; }
+.prod-banner b { color: var(--danger); font-weight: 600; }
+
+.tabs { display: flex; gap: 4px; margin: 16px 0; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; }
+.subtab { background: none; border: none; padding: 10px 12px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
+.subtab:hover { color: var(--text); }
+.subtab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
+
+.data-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
+.data-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1; min-width: 0; }
+.data-grid-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 14px; min-height: 240px; }
+table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
+table.data-table th { background: var(--bg); color: var(--muted); font-weight: 600; font-size: 12.5px; padding: 10px 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; white-space: nowrap; user-select: none; }
+table.data-table th.sortable { cursor: pointer; }
+table.data-table th.sortable:hover { color: var(--text); background: var(--chip); }
+table.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
+table.data-table tr:hover td { background: var(--bg); }
+.th-sort-icon { font-size: 10px; margin-left: 4px; color: var(--primary); }
+.td-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
+.pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; font-size: 13px; color: var(--muted); }
+.pagination-ctrls { display: flex; align-items: center; gap: 8px; }
+.cell-preview-btn { padding: 1px 6px; font-size: 11px; border-radius: 4px; border: 1px solid var(--primary-line); color: var(--primary); background: var(--primary-tint); cursor: pointer; }
+.cell-preview-btn:hover { background: var(--surface); }
+
+`;

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

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

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

@@ -0,0 +1,11 @@
+import { ICON_PATHS } from '../../shell/icons.js';
+import { flowScript } from './script.js';
+import { flowCss } from './styles.js';
+export const flowPage = {
+    id: 'flow',
+    group: 'now',
+    label: 'Flow',
+    icon: ICON_PATHS.flow,
+    css: flowCss,
+    script: flowScript,
+};

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

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

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

@@ -0,0 +1,105 @@
+// Plan layout: rounds, lanes, links and the highlight set. Pure, no DOM.
+export const flowLayoutScript = String.raw `  var FLOW = { W: 206, H: 58, GX: 52, GY: 10, PAD: 14, LX: 128, TOP: 30 };
+
+  function flowAgentKey(t) { return t.agent || 'unassigned'; }
+
+  function flowGraph(m) {
+    var ids = {};
+    m.tasks.forEach(function (t) { ids[t.id] = t; });
+    var depsIn = function (id) {
+      return ids[id].deps.filter(function (d) { return ids[d] && d !== id; });
+    };
+    var depth = {}, anc = {};
+    function getD(id, seen) {
+      if (depth[id] != null) return depth[id];
+      if (seen[id]) return 0;
+      seen[id] = true;
+      var d = 0;
+      depsIn(id).forEach(function (p) { d = Math.max(d, 1 + getD(p, seen)); });
+      delete seen[id];
+      depth[id] = d;
+      return d;
+    }
+    function getA(id, seen) {
+      if (anc[id]) return anc[id];
+      if (seen[id]) return {};
+      seen[id] = true;
+      var out = {};
+      depsIn(id).forEach(function (p) {
+        out[p] = true;
+        var up = getA(p, seen);
+        Object.keys(up).forEach(function (k) { out[k] = true; });
+      });
+      delete seen[id];
+      anc[id] = out;
+      return out;
+    }
+    m.tasks.forEach(function (t) { getD(t.id, {}); getA(t.id, {}); });
+    var edges = [], kids = {};
+    m.tasks.forEach(function (t) {
+      depsIn(t.id).forEach(function (d) {
+        var implied = depsIn(t.id).some(function (e) { return e !== d && getA(e, {})[d]; });
+        edges.push({ from: d, to: t.id, implied: implied });
+        (kids[d] = kids[d] || []).push(t.id);
+      });
+    });
+    return { depth: depth, anc: function (id) { return getA(id, {}); }, edges: edges, kids: kids };
+  }
+
+  function flowPlace(m, g) {
+    var lanes = [], cells = {};
+    m.tasks.forEach(function (t) {
+      var a = flowAgentKey(t);
+      if (lanes.indexOf(a) === -1) lanes.push(a);
+      var k = a + '|' + g.depth[t.id];
+      (cells[k] = cells[k] || []).push(t);
+    });
+    var rounds = Math.max.apply(null, m.tasks.map(function (t) { return g.depth[t.id]; })) + 1;
+    var laneY = {}, laneH = {}, y = FLOW.TOP;
+    lanes.forEach(function (l) {
+      var stack = 1;
+      for (var r = 0; r < rounds; r++) stack = Math.max(stack, (cells[l + '|' + r] || []).length);
+      laneY[l] = y;
+      laneH[l] = FLOW.PAD * 2 + stack * FLOW.H + (stack - 1) * FLOW.GY;
+      y += laneH[l];
+    });
+    var pos = {};
+    Object.keys(cells).forEach(function (k) {
+      var bits = k.split('|'), r = Number(bits[1]);
+      cells[k].forEach(function (t, i) {
+        pos[t.id] = { x: FLOW.LX + 20 + r * (FLOW.W + FLOW.GX), y: laneY[bits[0]] + FLOW.PAD + i * (FLOW.H + FLOW.GY), round: r + 1 };
+      });
+    });
+    return { lanes: lanes, laneY: laneY, laneH: laneH, pos: pos, rounds: rounds,
+      width: FLOW.LX + 20 + rounds * (FLOW.W + FLOW.GX), height: y };
+  }
+
+  /** Everything the Plan view draws for one milestone. */
+  function flowLayout(m) {
+    var g = flowGraph(m);
+    var L = flowPlace(m, g);
+    L.edges = g.edges;
+    L.kids = g.kids;
+    L.anc = g.anc;
+    L.hidden = g.edges.filter(function (e) { return e.implied; }).length;
+    return L;
+  }
+
+  /** The task, everything it needs and everything it unblocks, or null when it is not drawn. */
+  function flowFocusSet(L, id) {
+    if (!id || !L.pos[id]) return null;
+    var hot = {}, down = {}, stack = [id];
+    hot[id] = true;
+    Object.keys(L.anc(id)).forEach(function (k) { hot[k] = true; });
+    while (stack.length) {
+      (L.kids[stack.pop()] || []).forEach(function (c) {
+        if (down[c]) return;
+        down[c] = true;
+        hot[c] = true;
+        stack.push(c);
+      });
+    }
+    return hot;
+  }
+
+`;

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

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

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

@@ -0,0 +1,67 @@
+// Plan view: swimlanes per agent, one column per round, bezier links inside the milestone.
+export const flowPlanScript = String.raw `  function flowWires(L, hot, showAll) {
+    return L.edges.filter(function (e) { return showAll || !e.implied; }).map(function (e) {
+      var a = L.pos[e.from], b = L.pos[e.to];
+      var x1 = a.x + FLOW.W, y1 = a.y + FLOW.H / 2, x2 = b.x, y2 = b.y + FLOW.H / 2;
+      var dx = Math.max(28, (x2 - x1) / 2);
+      var on = hot && hot[e.from] && hot[e.to];
+      return '<path class="wire' + (on ? ' hot' : '') + (e.implied ? ' implied' : '') + '" data-from="' + ui.esc(e.from) +
+        '" data-to="' + ui.esc(e.to) + '" d="M' + x1 + ' ' + y1 + ' C' + (x1 + dx) + ' ' + y1 + ', ' + (x2 - dx) + ' ' + y2 + ', ' + x2 + ' ' + y2 + '"/>';
+    }).join('');
+  }
+
+  function flowBands(m, L) {
+    return L.lanes.map(function (l) {
+      var count = m.tasks.filter(function (t) { return flowAgentKey(t) === l; }).length;
+      return '<div class="lane-band" data-lane="' + ui.esc(l) + '" style="top:' + L.laneY[l] + 'px;height:' + L.laneH[l] + 'px">' +
+        '<div class="lane-label">' + ui.agentChip(l === 'unassigned' ? null : l) + '<span class="faint">' + count + (count === 1 ? ' task' : ' tasks') + '</span></div></div>';
+    }).join('');
+  }
+
+  function flowRoundHeads(L) {
+    var out = '';
+    for (var r = 0; r < L.rounds; r++) {
+      out += '<div class="round-head" style="left:' + (FLOW.LX + 20 + r * (FLOW.W + FLOW.GX)) + 'px">Round ' + (r + 1) + '</div>';
+    }
+    return out;
+  }
+
+  function flowNodeTime(t) {
+    if (t.status === 'in_progress' && t.startT) return '<span data-since="' + t.startT + '">' + ui.esc(fmt.dur(Studio.now() - t.startT)) + '</span>';
+    return t.durationMs ? ui.esc(fmt.dur(t.durationMs)) : '';
+  }
+
+  function flowNodes(m, L, hot, focusId) {
+    return m.tasks.map(function (t) {
+      var p = L.pos[t.id];
+      var cls = 'node ' + t.status + (hot && hot[t.id] ? ' hot' : '') + (focusId === t.id ? ' sel' : '');
+      return '<button type="button" class="' + ui.esc(cls) + '" data-act="flow-focus" data-key="' + ui.esc(t.id) + '" data-id="' + ui.esc(t.id) +
+        '" data-round="' + p.round + '" aria-pressed="' + (focusId === t.id) + '" title="' + ui.esc(t.title) + '" style="left:' + p.x + 'px;top:' + p.y +
+        'px;width:' + FLOW.W + 'px;height:' + FLOW.H + 'px"><div class="l1">' + ui.statusIcon(t.status) + '<span class="mono faint">' + ui.esc(t.id) +
+        '</span><span class="d">' + flowNodeTime(t) + '</span></div><div class="title">' + ui.esc(t.title) + '</div></button>';
+    }).join('');
+  }
+
+  function flowLegend() {
+    var one = function (s) { return '<span>' + ui.statusIcon(s) + Studio.statusLabel(s) + '</span>'; };
+    return '<div class="legend">' + ['completed', 'in_progress', 'pending', 'blocked'].map(one).join('') + '</div>';
+  }
+
+  function flowPlanTools(L, hot, view) {
+    var hint = hot ? '<button type="button" class="btn ghost" data-act="flow-clear">Clear highlight</button>'
+      : '<span>Click a task to light up what it needs and what it unblocks</span>';
+    var implied = L.hidden ? '<label class="check"><input type="checkbox" data-act="flow-implied"' + (view.implied ? ' checked' : '') +
+      '> Show ' + L.hidden + ' implied link' + (L.hidden > 1 ? 's' : '') + '</label>' : '';
+    return '<div class="fl-bar">' + flowLegend() + '<span class="right">' + hint + implied + '</span></div>';
+  }
+
+  function flowPlan(m, focusId, view) {
+    var L = flowLayout(m);
+    var hot = flowFocusSet(L, focusId);
+    return '<section class="fl-panel" data-mode="plan">' + flowPlanTools(L, hot, view) +
+      '<div class="flow-wrap"><div class="canvas' + (hot ? ' focus' : '') + '" style="width:' + L.width + 'px;height:' + (L.height + 10) + 'px">' +
+      flowBands(m, L) + flowRoundHeads(L) + '<svg class="wires" width="' + L.width + '" height="' + L.height + '">' +
+      flowWires(L, hot, view.implied) + '</svg>' + flowNodes(m, L, hot, hot ? focusId : null) + '</div></div></section>';
+  }
+
+`;

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;