@njeybe/nativ 2.6.0 → 2.7.0

package/dist/server/studio-ui/pages/database/data-shell.js

@@ -1,5 +1,5 @@
 // Database Studio data loading and shell.
-export const databaseDataScript = String.raw `  // ─── View 5: Database Studio — data loading ────────────────────────────────
+export const databaseDataScript = String.raw `  // ─── View 5: Database Studio - data loading ────────────────────────────────
   function load(fresh) {
     state.loading = true;
     renderDb();
@@ -63,7 +63,7 @@ export const databaseDataScript = String.raw `  // ─── View 5: Database St
         ? ' <span class="badge badge-source" title="Detected in ' + esc(s.exampleFile || '.env.example') + '">via ' + esc(s.sourceKey) + '</span>'
         : (s.sourceKey ? ' <span class="badge badge-source">via ' + esc(s.sourceKey) + '</span>' : '');
     return '<span class="pill" title="' + esc(s.maskedUrl) + '"><span class="dot on"></span><b>' + label + ':</b> ' +
-      esc(ENGINE_LABEL[s.engine] || s.engine) + (s.database ? ' · ' + esc(s.database) : '') + ' (' + Math.round(s.pingMs) + 'ms) – ' +
+      esc(ENGINE_LABEL[s.engine] || s.engine) + (s.database ? ' · ' + esc(s.database) : '') + ' (' + Math.round(s.pingMs) + 'ms): ' +
       entityCount(s) + ' ' + entityNoun(s, true) + sourceBadge + ' <span class="badge badge-online">ONLINE</span></span>';
   }
 
@@ -119,7 +119,7 @@ export const databaseDataScript = String.raw `  // ─── View 5: Database St
       : ((state.schema[activeEnv + 'Tables'] || []).length);
     $('count-data').textContent = String(dataCount);
     var d = state.diff && state.diff.summary;
-    $('count-drift').textContent = d ? String(d.addedTablesCount + d.alteredTablesCount + d.droppedTablesCount) : '–';
+    $('count-drift').textContent = d ? String(d.addedTablesCount + d.alteredTablesCount + d.droppedTablesCount) : '-';
     var script = state.diff ? generateScript(state.diff) : { text: '', lang: 'sql', count: 0 };
     state.sql = script.text;
     state.scriptLang = script.lang;
@@ -154,8 +154,8 @@ export const databaseDataScript = String.raw `  // ─── View 5: Database St
     return '<div class="sr-only">Loading database schema…</div><div class="panes" aria-busy="true">' + col + col + '</div>';
   }
 
-  var DB_ICON = '<svg class="icon empty-icon" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">' +
-    '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/><path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></svg>';
+  var DB_ICON = '<svg class="icon empty-icon" width="56" height="56" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">' +
+    '<path d="M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z"/></svg>';
 
   function emptyState(title, text) {
     return '<div class="empty card">' + DB_ICON + '<h3>' + esc(title) + '</h3><p>' + esc(text) + '</p>' +

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

@@ -15,7 +15,7 @@ export const databaseDriftScript = String.raw `  // ─── Database Studio: d
   }
 
   function colCell(c) {
-    if (!c) return '<span class="muted">—</span>';
+    if (!c) return '<span class="muted">-</span>';
     return esc(c.type) + (c.nullable ? '' : ' NOT NULL') + (c.default != null ? ' <span class="muted">DEFAULT</span> ' + esc(c.default) : '') +
       (c.primaryKey ? ' <span class="badge badge-pk">PK</span>' : '') + (c.isMedia ? ' <span class="badge badge-media">IMAGE</span>' : '') +
       (c.isSubcollection ? ' <span class="badge badge-subcol">SUBCOLLECTION</span>' : '');

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

@@ -32,9 +32,9 @@ export const databaseExplorerScript = String.raw `  // ─── Database Studio
         mediaBadge(t, c);
       var typeCell = esc(c.type) + (c.observedTypes ? ' <span class="muted">(' + esc(c.observedTypes.join(' | ')) + ')</span>' : '');
       var lastCell = coll
-        ? (c.presence != null ? Math.round(c.presence * 100) + '%' : '<span class="muted">–</span>')
+        ? (c.presence != null ? Math.round(c.presence * 100) + '%' : '<span class="muted">-</span>')
         : (c.default == null ? '<span class="muted">NULL</span>' : esc(c.default));
-      return '<tr><td>' + (tags || '<span class="muted">–</span>') + '</td><td class="mono">' + esc(c.name) +
+      return '<tr><td>' + (tags || '<span class="muted">-</span>') + '</td><td class="mono">' + esc(c.name) +
         (fk ? ' <span class="muted">→ ' + esc(fk.referencedTable + '.' + fk.referencedColumn) + '</span>' : '') + '</td><td class="mono">' + typeCell +
         '</td><td>' + (c.nullable ? 'YES' : '<b>NO</b>') + '</td><td class="mono">' + lastCell + '</td></tr>';
     }).join('');

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

@@ -6,7 +6,7 @@ export const databaseCss = String.raw `/* Database Studio */
 .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-msg code { background: var(--surface); padding: 1px 6px; border-radius: var(--r-control); 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; }
@@ -18,7 +18,7 @@ export const databaseCss = String.raw `/* Database Studio */
 .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-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); 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; }
@@ -77,7 +77,7 @@ pre.sql { margin: 0; padding: 16px; overflow: auto; max-height: 70vh; background
 .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 { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--success); color: var(--accent-fg); 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; }
@@ -87,7 +87,7 @@ pre.sql { margin: 0; padding: 16px; overflow: auto; max-height: 70vh; background
 
 .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 { border: 1px solid transparent; background: transparent; padding: 4px 14px; border-radius: var(--r-control); 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); }
@@ -112,7 +112,7 @@ table.data-table tr:hover td { background: var(--bg); }
 .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 { padding: 1px 6px; font-size: 11px; border-radius: var(--r-control); 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/styles.js

@@ -1,9 +1,9 @@
 // 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); }
+export const flowCss = String.raw `#panel-flow .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-control); 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-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); 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); }
@@ -18,7 +18,7 @@ export const flowCss = String.raw `#panel-flow .seg { display: inline-flex; bord
 #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 { 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: var(--r-control); 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)); }

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

@@ -1,19 +1,22 @@
-// Home page client script: one pure render from the shared model.
+// Home page client script: one pure render from the shared model, sections stacked top to bottom.
 export const homeScript = String.raw `  var esc = Studio.ui.esc;
-  var RECENT_CAP = 6;
+  var UP_NEXT_CAP = 6;
+  var ACTIVITY_CAP = 8;
 
   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>';
+    return '<div class="page-head"><h1>Home</h1></div>';
   }
 
-  function panel(title, right, body) {
-    return '<section class="panel"><div class="panel-head"><h2>' + esc(title) + '</h2>' + right + '</div>' + body + '</section>';
+  function section(key, title, right, body) {
+    return '<section class="home-sec" data-sec="' + key + '"><div class="sec-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) {
+  function actBtn(act, id, label, busy, cls) {
     var on = busy === act.slice(5);
-    return '<button type="button" class="btn" data-act="' + act + '" data-id="' + esc(id) + '"' + (busy ? ' disabled' : '') + '>' +
+    return '<button type="button" class="btn' + (cls ? ' ' + cls : '') + '" data-act="' + act +
+      '" data-id="' + esc(id) + '"' + (busy ? ' disabled' : '') + '>' +
       (on ? '<span class="spinner" aria-hidden="true"></span>' : '') + esc(label) + '</button>';
   }
 
@@ -24,127 +27,140 @@ export const homeScript = String.raw `  var esc = Studio.ui.esc;
     return e.reason || e.summary || e.details || 'Waiting for your decision.';
   }
 
-  function needItem(item) {
+  function needActions(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>';
+    var out = '<button type="button" class="btn" 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>';
+    if (item.hasProposal) out += actBtn('home-proposal', t.id, 'Review proposal', busy, 'primary');
+    else if (item.escalation) out += actBtn('home-ask', t.id, 'Ask the architect', busy, 'primary');
+    return out;
   }
 
-  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 needItem(item) {
+    var t = item.task;
+    return '<div class="need" data-need="' + esc(t.id) + '"><div class="body">' +
+      '<div class="l1"><b>Human Decision Required</b><span class="mono">' + esc(t.id) + '</span></div>' +
+      '<span class="why">' + esc(needReason(item)) + '</span></div>' +
+      '<div class="acts">' + needActions(item) + '</div></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 decisionQueue(model) {
+    var n = model.needsYou;
+    if (!n.length) return '';
+    var count = n.length + (n.length === 1 ? ' item' : ' items');
+    return '<section class="home-sec decisions" data-sec="decisions"><div class="sec-head"><h2>Decisions</h2>' +
+      rightText(count) + '</div>' + n.map(needItem).join('') + '</section>';
   }
 
-  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 isReady(model, t) {
+    if (t.status !== 'pending') return false;
+    return t.isAvailable || t.deps.every(function (d) {
+      var dep = model.byId[d];
+      return !dep || dep.status === 'completed';
+    });
   }
 
-  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 readyTasks(model) {
+    return model.tasks.filter(function (t) { return isReady(model, t); });
   }
 
-  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 dispatchBtn(id, label, cls) {
+    return '<button type="button" class="btn' + (cls ? ' ' + cls : '') + '" data-act="home-dispatch" data-id="' +
+      esc(id) + '">' + esc(label) + '</button>';
   }
 
-  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 taskCells(t) {
+    return '<span class="mono id">' + esc(t.id) + '</span>' +
+      '<button type="button" class="t link" data-task="' + esc(t.id) + '">' + esc(t.title) + '</button>' +
+      '<span class="agent">' + esc(t.agent || '') + '</span>';
   }
 
-  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 runRow(t) {
+    var since = t.startT ? ' data-since="' + t.startT + '">' + Studio.fmt.dur(Studio.now() - t.startT) : '>';
+    var row = '<div class="row run-row">' + taskCells(t) +
+      '<span class="state"><i class="dot run"></i>Running</span>' +
+      '<span class="mono num timer"' + since + '</span></div>';
+    var log = '<span class="mono log">' + esc(t.latestLog || '') + '</span>';
+    return row + '<div class="row sub-row">' + log + '<button type="button" class="btn" data-act="home-console"' +
+      ' data-id="' + esc(t.id) + '">Open console</button></div>';
   }
 
-  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 nowRunning(model) {
+    var r = model.running;
+    if (r.length) return section('running', 'Now running', rightText(r.length + ' running'), r.map(runRow).join(''));
+    var next = readyTasks(model)[0];
+    var btn = next ? dispatchBtn(next.id, 'Dispatch ' + next.id, 'primary') : '';
+    return section('running', 'Now running', '', '<div class="row calm"><span>No agent is running.</span>' + btn + '</div>');
   }
 
-  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 waitOn(model, t) {
+    var open = t.deps.filter(function (d) { var x = model.byId[d]; return x && x.status !== 'completed'; });
+    return open[0] || '';
   }
 
-  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 nextRow(model, t) {
+    var end = isReady(model, t) ? dispatchBtn(t.id, 'Dispatch') :
+      '<span class="wait">waits <span class="mono">' + esc(waitOn(model, t)) + '</span></span>';
+    return '<div class="row next-row">' + taskCells(t) + end + '</div>';
   }
 
-  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 upNext(model) {
+    var list = model.tasks.filter(function (t) { return t.status === 'pending'; });
+    var ready = list.filter(function (t) { return isReady(model, t); });
+    var waiting = list.filter(function (t) { return !isReady(model, t); });
+    var rows = ready.concat(waiting).slice(0, UP_NEXT_CAP);
+    var body = rows.length ? rows.map(function (t) { return nextRow(model, t); }).join('') :
+      '<div class="row calm">Nothing is waiting.</div>';
+    return section('next', 'Up next', '', body);
   }
 
-  function msRow(m) {
+  function milestoneProgress(model) {
+    var m = model.milestones.filter(function (x) { return x.id === model.activeMilestoneId; })[0];
+    if (!m) return '';
     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>';
+    var body = '<div class="row ms-row" data-ms="' + esc(m.id) + '"><span class="mono id">' + esc(m.id) + '</span>' +
+      '<span class="t">' + esc(m.name) + '</span><span class="mono num">' + m.done + ' of ' + m.total + '</span></div>' +
+      '<div class="progress"><i style="width:' + pct + '%"></i></div>';
+    return section('milestone', 'Milestone', '', body);
+  }
+
+  function activityEvents(model) {
+    var out = [];
+    model.tasks.forEach(function (t) {
+      if (t.endT) out.push({ at: t.endT, id: t.id, what: 'completed' });
+      if (t.startT) out.push({ at: t.startT, id: t.id, what: 'started' });
+    });
+    return out.sort(function (a, b) { return b.at - a.at; }).slice(0, ACTIVITY_CAP);
+  }
+
+  function activityRow(e) {
+    return '<div class="row act-row" data-event="' + esc(e.id) + '"><span class="mono num when">' +
+      Studio.ui.when(e.at) + '</span><span class="mono id">' + esc(e.id) + '</span><span>' + e.what + '</span></div>';
   }
 
-  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 recentActivity(model) {
+    var list = activityEvents(model);
+    var body = list.length ? list.map(activityRow).join('') : '<div class="row calm">Nothing has happened yet.</div>';
+    return section('activity', 'Recent activity', '', 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>';
+    var row = '<div class="row skel-row"><div class="skel"></div></div>';
+    return '<div class="home">' + head() + '<section class="home-sec" aria-busy="true">' +
+      row + row + row + row + '</section></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>';
+    if (!model.milestones.length) {
+      return '<div class="home">' + head() +
+        '<div class="row calm">No plan yet. Ask the architect to design one.</div></div>';
+    }
+    return '<div class="home">' + head() + decisionQueue(model) + nowRunning(model) + upNext(model) +
+      milestoneProgress(model) + recentActivity(model) + '</div>';
   }
 
   function forward(name) {
@@ -155,6 +171,9 @@ export const homeScript = String.raw `  var esc = Studio.ui.esc;
     deps: ['status', 'tasks', 'telemetry', 'runs', 'escalations'],
     render: render,
     skeleton: skeleton,
-    actions: { 'home-start': forward('start'), 'home-proposal': forward('proposal'), 'home-ask': forward('ask') }
+    actions: {
+      'home-start': forward('start'), 'home-proposal': forward('proposal'), 'home-ask': forward('ask'),
+      'home-console': forward('logs'), 'home-dispatch': forward('dispatch')
+    }
   });
 `;

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

@@ -1,48 +1,36 @@
-// 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; }
+// Home page styles, all scoped under #panel-home. Ink: flat sections, one raised decision surface.
+export const homeCss = String.raw `#panel-home .home { max-width: 960px; display: flex; flex-direction: column; }
+#panel-home .page-head h1 { font-size: 22px; font-weight: 600; margin: 0 0 12px; letter-spacing: -.01em; }
+#panel-home .home-sec { border-top: 1px solid var(--line); padding: 12px 0; min-width: 0; }
+#panel-home .sec-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
+#panel-home .sec-head h2 { font-size: 13px; font-weight: 600; margin: 0; color: var(--fg-2); }
+#panel-home .sec-head .right { margin-left: auto; font-size: 12px; color: var(--fg-3); }
+#panel-home .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+#panel-home .row { display: flex; align-items: center; gap: 12px; min-height: 36px; border-bottom: 1px solid var(--line); }
+#panel-home .row:last-child { border-bottom: 0; }
+#panel-home .row .id { width: 72px; flex: none; color: var(--fg-2); font-size: 12px; }
+#panel-home .row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#panel-home .link { background: none; border: 0; padding: 0; text-align: left; color: var(--fg); cursor: pointer; font: inherit; }
+#panel-home .agent { width: 96px; flex: none; color: var(--fg-2); font-size: 12.5px; }
+#panel-home .state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
+#panel-home .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); }
+#panel-home .dot.run { background: var(--run); }
+#panel-home .timer { width: 64px; text-align: right; font-size: 12px; }
+#panel-home .sub-row .log { flex: 1; min-width: 0; font-size: 12px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#panel-home .wait { color: var(--fg-3); font-size: 12.5px; }
+#panel-home .calm { color: var(--fg-2); justify-content: space-between; }
+#panel-home .decisions { background: var(--surface); border: 0; border-left: 3px solid var(--warn); border-radius: 6px; box-shadow: var(--shadow); padding: 8px 16px; margin-bottom: 12px; }
+#panel-home .need { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
+#panel-home .need .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+#panel-home .need .l1 { display: flex; gap: 8px; align-items: baseline; }
 #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; }
+#panel-home .need .acts { display: flex; gap: 8px; flex-wrap: wrap; }
+#panel-home .progress { height: 4px; border-bottom: 1px solid var(--line); }
+#panel-home .progress i { display: block; height: 4px; background: var(--fg); border-radius: 2px; }
+#panel-home .act-row .when { width: 72px; flex: none; font-size: 12px; color: var(--fg-3); }
+#panel-home .skel-row .skel { height: 12px; width: 100%; border-radius: 6px; background: var(--surface-2); }
+@media (max-width: 1024px) {
+  #panel-home .home { max-width: none; }
+  #panel-home .agent { display: none; }
 }
 `;