@njeybe/nativ 2.6.0 → 2.8.0

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>';
   }
 
@@ -21,130 +24,140 @@ export const homeScript = String.raw `  var esc = Studio.ui.esc;
     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.';
+    return e.reason || e.summary || e.details || 'Needs 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 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 needsPanel(model) {
+  function decisionQueue(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>');
+    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 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 readyTasks(model) {
+    return model.tasks.filter(Studio.status.isReady);
   }
 
-  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 dispatchBtn(id, label, cls) {
+    return '<button type="button" class="btn' + (cls ? ' ' + cls : '') + '" data-act="home-dispatch" data-id="' +
+      esc(id) + '">' + esc(label) + '</button>';
   }
 
-  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 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(Studio.agentInfo(t.agent).label) + '</span>';
   }
 
-  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 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">Running</span>' +
+      '<span class="mono num timer"' + since + '</span></div>';
+    var log = '<span class="mono log">' + esc(t.latestLog || '') + '</span>';
+    var watch = t.run ? '<button type="button" class="btn" data-act="home-console" data-id="' +
+      esc(t.id) + '">Watch live</button>' : '';
+    return row + '<div class="row sub-row">' + log + watch + '</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 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 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 nextRow(t) {
+    var end = Studio.status.isReady(t) ? dispatchBtn(t.id, 'Dispatch') :
+      '<span class="wait">' + esc(Studio.status.waitText(t)) + '</span>';
+    return '<div class="row next-row">' + taskCells(t) + end + '</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 upNext(model) {
+    var list = model.tasks.filter(function (t) { return t.status === 'pending'; });
+    var ready = list.filter(Studio.status.isReady);
+    var waiting = list.filter(function (t) { return !Studio.status.isReady(t); });
+    var rows = ready.concat(waiting).slice(0, UP_NEXT_CAP);
+    var body = rows.length ? rows.map(nextRow).join('') :
+      '<div class="row calm">Nothing is waiting.</div>';
+    return section('next', 'Up next', '', body);
   }
 
-  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 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;
+    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 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>';
+  // One event per task that has started or finished; the state word comes from its status now.
+  function activityEvents(model) {
+    var out = [];
+    model.tasks.forEach(function (t) {
+      var at = t.status === 'completed' ? (t.endT || t.startT) : t.startT;
+      if (at) out.push({ at: at, task: t });
+    });
+    return out.sort(function (a, b) { return b.at - a.at; }).slice(0, ACTIVITY_CAP);
   }
 
-  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 activityState(t) {
+    var word = Studio.status.word(Studio.status.bucket(t));
+    var took = t.status === 'completed' && t.durationMs ? ', took ' + Studio.fmt.dur(t.durationMs) : '';
+    return word + took;
   }
 
-  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 activityRow(e) {
+    var t = e.task;
+    return '<div class="row act-row" data-event="' + esc(t.id) + '"><span class="mono num when">' +
+      Studio.ui.when(e.at) + '</span><button type="button" class="t link" data-task="' + esc(t.id) + '">' +
+      esc(t.title) + '</button><span class="state">' + esc(activityState(t)) + '</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 +168,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,32 @@
-// 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 { 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; }
+#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 .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 .agent { display: none; }
 }
 `;

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

@@ -1,11 +1,119 @@
-// Tasks page: one milestone as four columns, then the other milestones as a history list.
+// Tasks page: a grouped list by default, or one milestone as four columns (Board).
 export const tasksScript = String.raw `  var ui = Studio.ui;
   var CAP = 5;
-  var view = { lastMs: null, showAll: false, open: {} };
+  var view = { lastMs: null, showAll: false, open: {}, mode: null, filter: 'all', groups: {} };
+  var KEY = 'nativ-studio:tasks-view';
+  var FILTERS = [['all', 'All']].concat(Studio.status.buckets);
+
+  function readMode() {
+    try { return localStorage.getItem(KEY) === 'board' ? 'board' : 'list'; } catch (e) { return 'list'; }
+  }
+  function saveMode(mode) {
+    try { localStorage.setItem(KEY, mode); } catch (e) { /* private mode */ }
+  }
+
+  function matches(model, t, f) {
+    return f === 'all' || Studio.status.bucket(t) === f;
+  }
+
+  function toolbar(model) {
+    var chips = FILTERS.map(function (f) {
+      var on = view.filter === f[0];
+      var n = model.tasks.filter(function (t) { return matches(model, t, f[0]); }).length;
+      if (!n && !on && f[0] !== 'all') return '';
+      return '<button type="button" class="tf' + (on ? ' on' : '') + '" data-act="tasks-filter" data-filter="' +
+        f[0] + '" aria-pressed="' + on + '">' + f[1] + ' <span class="num">' + n + '</span></button>';
+    }).join('');
+    var seg = ['list', 'board'].map(function (m) {
+      var on = view.mode === m;
+      return '<button type="button" class="seg' + (on ? ' on' : '') + '" data-act="tasks-view" data-mode="' +
+        m + '" aria-pressed="' + on + '">' + (m === 'list' ? 'List' : 'Board') + '</button>';
+    }).join('');
+    return '<div class="tbar"><div class="tfilters" role="group" aria-label="Filter tasks">' + chips +
+      '</div><div class="tseg" role="group" aria-label="View">' + seg + '</div></div>';
+  }
+
+  function timeOf(t, fmt) {
+    if (t.status === 'in_progress' && t.startT) return fmt.dur(Studio.now() - t.startT);
+    return t.durationMs ? fmt.dur(t.durationMs) : '';
+  }
+
+  // Rows use data-tid, not data-task, so the nested Dispatch button gets its own click.
+  function listRow(model, t, fmt) {
+    var bucket = Studio.status.bucket(t);
+    var wait = Studio.status.waitText(t);
+    var id = ui.esc(t.id);
+    var go = Studio.status.isReady(t) ? '<button type="button" class="tdispatch" data-act="tasks-dispatch" data-tid="' +
+      id + '">Dispatch</button>' : '';
+    return '<div class="trow" role="row" tabindex="0" data-act="tasks-open" data-tid="' + id + '">' +
+      '<span class="c-id mono" role="cell">' + id + '</span>' +
+      '<span class="c-title" role="cell" title="' + ui.esc(t.title) + '">' + ui.esc(t.title) + '</span>' +
+      '<span class="c-agent" role="cell">' + ui.esc(Studio.agentInfo(t.agent).label) + '</span>' +
+      '<span class="c-status st-' + bucket + '" role="cell">' + Studio.status.word(bucket) +
+      (wait ? ' <span class="faint">' + ui.esc(wait) + '</span>' : '') + go + '</span>' +
+      '<span class="c-time mono" role="cell">' + ui.esc(timeOf(t, fmt)) + '</span></div>';
+  }
+
+  function isOpen(m) {
+    if (view.groups[m.id] != null) return view.groups[m.id];
+    return !(m.total > 0 && m.done === m.total);
+  }
+
+  var THEAD = '<div class="trow thead" role="row"><span role="columnheader">Id</span>' +
+    '<span role="columnheader">Task</span><span class="c-agent" role="columnheader">Agent</span>' +
+    '<span role="columnheader">Status</span><span class="c-time" role="columnheader">Time</span></div>';
+
+  function group(model, m, rows, fmt) {
+    var open = isOpen(m);
+    var body = open ? THEAD + rows.map(function (t) { return listRow(model, t, fmt); }).join('') : '';
+    return '<section class="tgroup" role="table" aria-label="' + ui.esc(m.name) + '">' +
+      '<button type="button" class="tg-head" data-act="tasks-group" data-group="' + ui.esc(m.id) +
+      '" aria-expanded="' + open + '"><span class="chev">' + ui.icon('chev', 2) + '</span>' +
+      '<span class="mono faint">' + ui.esc(m.id) + '</span><span class="t" title="' + ui.esc(m.name) + '">' + ui.esc(m.name) + '</span>' +
+      '<span class="num faint">' + m.done + ' of ' + m.total + '</span></button>' + body + '</section>';
+  }
+
+  function list(model, fmt) {
+    var html = model.milestones.map(function (m) {
+      var rows = m.tasks.filter(function (t) { return matches(model, t, view.filter); });
+      return rows.length ? group(model, m, rows, fmt) : '';
+    }).join('');
+    if (html) return '<div class="tlist">' + html + '</div>';
+    return '<div class="tempty"><p>No tasks match this filter.</p>' +
+      '<button type="button" class="btn" data-act="tasks-clear">Clear filter</button></div>';
+  }
+
+  function skeleton() {
+    var row = '<div class="trow tskel"><span></span><span></span><span></span><span></span><span></span></div>';
+    return '<div class="panel-head"><div class="panel-title"><h1>Tasks</h1></div></div>' +
+      '<div class="tlist">' + row + row + row + row + row + '</div>';
+  }
+
+  // The pulse strip leaves a filter on Studio.taskFilter; use it once.
+  function takeFilter() {
+    var f = Studio.taskFilter;
+    if (f && FILTERS.some(function (x) { return x[0] === f; })) view.filter = f;
+    Studio.taskFilter = null;
+  }
+
+  function onlyFiltered(model, m) {
+    var copy = Object.assign({}, m);
+    copy.tasks = m.tasks.filter(function (t) { return matches(model, t, view.filter); });
+    return copy;
+  }
+
+  if (typeof document !== 'undefined' && document.addEventListener) {
+    document.addEventListener('keydown', function (e) {
+      var el = e.target;
+      if (e.key !== 'Enter' || !el || !el.matches || !el.matches('.trow[data-tid]')) return;
+      e.preventDefault();
+      Studio.openTask(el.getAttribute('data-tid'));
+    });
+  }
 
   function head(m) {
     var lead = m ? ui.esc(m.name) : 'The work of one milestone, by state.';
-    return '<div class="panel-head"><div class="panel-title"><h1>Tasks</h1><p class="lead">' + lead + '</p></div>' +
+    return '<div class="panel-head"><div class="panel-title"><h1>Tasks</h1><p class="lead" title="' + lead + '">' + lead + '</p></div>' +
       '<div class="panel-actions">' + ui.milestoneSelect() + '</div></div>';
   }
 
@@ -13,7 +121,8 @@ export const tasksScript = String.raw `  var ui = Studio.ui;
 
   function metaHtml(t, fmt) {
     if (t.status === 'completed') {
-      return '<span>' + ui.esc(fmt.ago(t.endT)) + '</span>' + (t.durationMs ? '<span>took ' + ui.esc(fmt.dur(t.durationMs)) + '</span>' : '');
+      var took = t.durationMs ? '<span>took ' + ui.esc(fmt.dur(t.durationMs)) + '</span>' : '';
+      return '<span>' + ui.esc(fmt.ago(t.endT)) + '</span>' + took;
     }
     if (t.status === 'in_progress') {
       var live = t.startT ? '<span data-since="' + t.startT + '">' + fmt.dur(Studio.now() - t.startT) + '</span>' : '';
@@ -22,7 +131,7 @@ export const tasksScript = String.raw `  var ui = Studio.ui;
     if (t.status === 'blocked') {
       return '<span class="bad">Paused after ' + (t.attempt || t.maxAttempts) + ' of ' + t.maxAttempts + ' attempts</span>';
     }
-    if (t.waitingOn.length) return '<span>Waiting on ' + t.waitingOn.map(ui.esc).join(', ') + '</span>';
+    if (t.waitingOn.length && !t.stale) return '<span>Waits for ' + t.waitingOn.map(ui.esc).join(', ') + '</span>';
     return '<span>Ready to start</span>';
   }
 
@@ -32,8 +141,9 @@ export const tasksScript = String.raw `  var ui = Studio.ui;
       '<div class="title">' + ui.esc(t.title) + '</div><div class="meta">' + metaHtml(t, fmt) + '</div></button>';
   }
 
-  function column(label, status, list, shown, empty, extra, fmt) {
-    var body = shown.length ? shown.map(function (t) { return card(t, fmt); }).join('') : '<div class="col-empty">' + empty + '</div>';
+  function column(label, status, list, shown, extra, fmt) {
+    var body = shown.length ? shown.map(function (t) { return card(t, fmt); }).join('')
+      : '<p class="col-empty">None</p>';
     return '<div class="col" data-col="' + status + '"><div class="col-head">' + ui.statusIcon(status) + label +
       '<span class="count">' + list.length + '</span></div>' + body + (extra || '') + '</div>';
   }
@@ -44,12 +154,12 @@ export const tasksScript = String.raw `  var ui = Studio.ui;
     var shown = view.showAll ? done : done.slice(0, CAP);
     var more = done.length > CAP
       ? '<button type="button" class="more" data-act="tasks-more">' + (view.showAll ? 'Show fewer' : 'Show all ' + done.length) + '</button>' : '';
-    var up = by('pending'), run = by('in_progress'), stuck = by('blocked');
-    return '<div class="board">' +
-      column('Up next', 'pending', up, up, 'Nothing queued', '', fmt) +
-      column('Running', 'in_progress', run, run, 'No task is running', '', fmt) +
-      column('Just finished', 'completed', done, shown, 'Nothing finished yet', more, fmt) +
-      column('Stuck', 'blocked', stuck, stuck, 'Nothing is stuck', '', fmt) + '</div>';
+    var lanes = [['Up next', 'pending', by('pending'), null], ['Running', 'in_progress', by('in_progress'), null],
+      ['Done', 'completed', done, shown], ['Stuck', 'blocked', by('blocked'), null]];
+    var cols = lanes.map(function (l) {
+      return column(l[0], l[1], l[2], l[3] || l[2], l[1] === 'completed' ? more : '', fmt);
+    }).join('');
+    return '<div class="board">' + cols + '</div>';
   }
 
   function histRow(m, fmt) {
@@ -76,15 +186,37 @@ export const tasksScript = String.raw `  var ui = Studio.ui;
 
   Studio.registerPage('tasks', {
     deps: ['tasks', 'runs', 'escalations'],
+    skeleton: skeleton,
     render: function (ctx) {
       var model = ctx.model;
+      if (!view.mode) view.mode = ctx.state.tasksView || readMode();
+      takeFilter();
+      if (!model.milestones.length) {
+        return head(null) + '<div class="tempty"><p>No plan yet. Ask the architect to design one.</p></div>';
+      }
+      if (view.mode === 'list') return head(null) + toolbar(model) + list(model, ctx.fmt);
       var wanted = ctx.state.milestoneId || model.activeMilestoneId;
       var m = model.milestones.filter(function (x) { return x.id === wanted; })[0];
       if (!m) return head(null) + ui.empty('No milestones yet', 'Add tasks to the plan to see them here.');
       if (view.lastMs !== m.id) { view.lastMs = m.id; view.showAll = false; }
-      return head(m) + board(m, ctx.fmt) + others(model, m, ctx.fmt);
+      return head(m) + toolbar(model) + board(onlyFiltered(model, m), ctx.fmt) + others(model, m, ctx.fmt);
     },
     actions: {
+      'tasks-view': function (el) {
+        view.mode = el.getAttribute('data-mode');
+        saveMode(view.mode);
+        Studio.repaint('tasks');
+      },
+      'tasks-filter': function (el) { view.filter = el.getAttribute('data-filter'); Studio.repaint('tasks'); },
+      'tasks-clear': function () { view.filter = 'all'; Studio.repaint('tasks'); },
+      'tasks-open': function (el) { Studio.openTask(el.getAttribute('data-tid')); },
+      'tasks-dispatch': function (el) { Studio.taskAction('dispatch', el.getAttribute('data-tid')); },
+      'tasks-group': function (el, ctx) {
+        var id = el.getAttribute('data-group');
+        var m = ctx.model.milestones.filter(function (x) { return x.id === id; })[0];
+        view.groups[id] = !(m && isOpen(m));
+        Studio.repaint('tasks');
+      },
       'tasks-more': function () { view.showAll = !view.showAll; Studio.repaint('tasks'); },
       'tasks-hist': function (el) {
         var id = el.getAttribute('data-ms-id');