@njeybe/nativ 2.6.0 → 2.7.0

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

@@ -1,7 +1,132 @@
-// 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'], ['running', 'Running'], ['ready', 'Ready'], ['blocked', 'Blocked'],
+    ['done', 'Done']];
+  var DOT = { completed: 'ok', in_progress: 'run', blocked: 'bad', ready: 'fg', waiting: 'faint' };
+  var LABEL = { completed: 'Done', in_progress: 'Running', blocked: 'Blocked', ready: 'Ready',
+    waiting: 'Waiting' };
+
+  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 */ }
+  }
+
+  // Same notion of ready as Home and the sidebar: pending and every dependency done.
+  function isReady(model, t) {
+    if (t.status !== 'pending') return false;
+    return t.isAvailable || t.deps.every(function (d) {
+      var dep = model.byId && model.byId[d];
+      return !dep || dep.status === 'completed';
+    });
+  }
+  function kindOf(model, t) {
+    if (t.status === 'pending') return isReady(model, t) ? 'ready' : 'waiting';
+    return t.status;
+  }
+  function matches(model, t, f) {
+    if (f === 'all') return true;
+    if (f === 'running') return t.status === 'in_progress';
+    if (f === 'blocked') return t.status === 'blocked';
+    if (f === 'done') return t.status === 'completed';
+    return isReady(model, t);
+  }
+
+  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;
+      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 k = kindOf(model, t);
+    var id = ui.esc(t.id);
+    var go = k === 'ready' ? '<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(t.agent || '') + '</span>' +
+      '<span class="c-status st-' + DOT[k] + '" role="cell"><i class="dot"></i>' + LABEL[k] + 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">' + 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.taskAction('logs', el.getAttribute('data-tid'));
+    });
+  }
 
   function head(m) {
     var lead = m ? ui.esc(m.name) : 'The work of one milestone, by state.';
@@ -76,15 +201,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.taskAction('logs', 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');

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

@@ -1,11 +1,11 @@
-// Board and history styles, scoped under the Tasks panel.
+// List, Board and history styles, scoped under the Tasks panel (Ink: 6px radius, 1px dividers).
 export const tasksCss = String.raw `#panel-tasks .board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
-#panel-tasks .col { background: var(--surface-2); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+#panel-tasks .col { background: var(--surface-2); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
 #panel-tasks .col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 2px; font-weight: 500; font-size: 13px; }
 #panel-tasks .col-head .count { margin-left: auto; background: var(--surface); border-radius: 999px; padding: 0 8px; font-size: 12px; color: var(--fg-2); }
-#panel-tasks .col-empty { font-size: 12.5px; color: var(--fg-3); padding: 14px 8px; text-align: center; border: 1px dashed var(--line-2); border-radius: 8px; }
-#panel-tasks .tcard { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 10px; text-align: left; width: 100%; cursor: pointer; }
-#panel-tasks .tcard:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
+#panel-tasks .col-empty { font-size: 12.5px; color: var(--fg-3); padding: 14px 8px; text-align: center; border: 1px dashed var(--line-2); border-radius: 6px; }
+#panel-tasks .tcard { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px; text-align: left; width: 100%; cursor: pointer; }
+#panel-tasks .tcard:hover { border-color: var(--line-2); }
 #panel-tasks .tcard.in_progress { border-color: color-mix(in srgb, var(--run) 45%, var(--line)); }
 #panel-tasks .tcard.blocked { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
 #panel-tasks .tcard .l1 { display: flex; align-items: center; gap: 6px; }
@@ -17,7 +17,7 @@ export const tasksCss = String.raw `#panel-tasks .board { display: grid; grid-te
 #panel-tasks .more { border: 0; background: none; color: var(--accent); font-size: 12.5px; padding: 6px; cursor: pointer; text-align: center; }
 #panel-tasks .more:hover { text-decoration: underline; }
 #panel-tasks .section-title { margin: 22px 0 8px; font-size: 15px; font-weight: 600; }
-#panel-tasks .hist { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
+#panel-tasks .hist { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
 #panel-tasks .hist-row { display: grid; grid-template-columns: 16px 34px minmax(0, 1fr) auto 70px 90px 60px; gap: 12px; align-items: center; padding: 9px 16px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; width: 100%; cursor: pointer; }
 #panel-tasks .hist > div:first-child .hist-row { border-top: 0; }
 #panel-tasks .hist-row:hover { background: var(--surface-2); }
@@ -28,6 +28,63 @@ export const tasksCss = String.raw `#panel-tasks .board { display: grid; grid-te
 #panel-tasks .hist-row .small { font-size: 12px; }
 #panel-tasks .hist-tasks { background: var(--surface-2); }
 #panel-tasks .hist-tasks .row-btn { padding-left: 46px; }
+#panel-tasks .tbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
+#panel-tasks .tfilters, #panel-tasks .tseg { display: flex; gap: 4px; }
+#panel-tasks .tseg { margin-left: auto; border: 1px solid var(--line); border-radius: 6px; padding: 2px; }
+#panel-tasks .tf, #panel-tasks .seg {
+  border: 1px solid transparent; background: none; color: var(--fg-2); border-radius: 6px;
+  padding: 4px 10px; font-size: 12.5px; cursor: pointer;
+}
+#panel-tasks .tf { border-color: var(--line); }
+#panel-tasks .tf .num { font-variant-numeric: tabular-nums; color: var(--fg-3); }
+#panel-tasks .tf.on, #panel-tasks .seg.on { background: var(--surface-2); color: var(--fg); border-color: var(--line-2); }
+#panel-tasks .tlist { border-top: 1px solid var(--line); }
+#panel-tasks .tg-head {
+  display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 8px; border: 0;
+  border-bottom: 1px solid var(--line); background: none; color: var(--fg); text-align: left;
+  cursor: pointer; font-weight: 600;
+}
+#panel-tasks .tg-head .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#panel-tasks .tg-head .num { font-variant-numeric: tabular-nums; font-weight: 400; font-size: 12px; }
+#panel-tasks .tg-head .chev { display: inline-grid; transition: transform .15s; }
+#panel-tasks .tg-head .chev svg { width: 14px; height: 14px; }
+#panel-tasks .tg-head[aria-expanded="true"] .chev { transform: rotate(90deg); }
+#panel-tasks .trow {
+  display: grid; grid-template-columns: 76px minmax(0, 1fr) 110px 150px 72px; gap: 12px;
+  align-items: center; height: 36px; padding: 0 8px; border-bottom: 1px solid var(--line);
+  font-size: 13px; cursor: pointer;
+}
+#panel-tasks .trow:hover, #panel-tasks .trow:focus-visible { background: var(--surface-2); }
+#panel-tasks .trow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+#panel-tasks .trow.thead { cursor: default; color: var(--fg-3); font-size: 12px; background: none; }
+#panel-tasks .trow .mono { font-variant-numeric: tabular-nums; font-size: 12px; }
+#panel-tasks .c-id { color: var(--fg-3); }
+#panel-tasks .c-title, #panel-tasks .c-agent { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#panel-tasks .c-agent { color: var(--fg-2); }
+#panel-tasks .c-time { text-align: right; color: var(--fg-2); }
+#panel-tasks .c-status { display: flex; align-items: center; gap: 6px; }
+#panel-tasks .c-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
+#panel-tasks .st-ok { color: var(--ok); }
+#panel-tasks .st-run { color: var(--run); }
+#panel-tasks .st-bad { color: var(--bad); }
+#panel-tasks .st-fg { color: var(--fg); }
+#panel-tasks .st-faint { color: var(--fg-3); }
+#panel-tasks .tdispatch {
+  display: none; margin-left: auto; border: 1px solid var(--line-2); background: var(--surface);
+  color: var(--fg); border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer;
+}
+#panel-tasks .trow:hover .tdispatch, #panel-tasks .trow:focus-within .tdispatch { display: inline-block; }
+#panel-tasks .tskel span { height: 10px; border-radius: 6px; background: var(--surface-2); }
+#panel-tasks .tempty { padding: 36px 16px; text-align: center; color: var(--fg-2); }
+#panel-tasks .tempty .btn { margin-top: 8px; }
+@media (max-width: 1024px) {
+  #panel-tasks .trow { grid-template-columns: 76px minmax(0, 1fr) 150px 72px; }
+  #panel-tasks .c-agent { display: none; }
+}
+@media (max-width: 768px) {
+  #panel-tasks .trow { grid-template-columns: 76px minmax(0, 1fr) 120px; }
+  #panel-tasks .c-time { display: none; }
+}
 @media (max-width: 1100px) { #panel-tasks .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 640px) {
   #panel-tasks .board { grid-template-columns: minmax(0, 1fr); }

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

@@ -1,31 +1,25 @@
-// Team page client script: one pure render, one table row per agent.
+// Team page client script: one pure render, one roster row per agent.
 export const teamScript = String.raw `  var esc = Studio.ui.esc;
-  var DASH = '–';
+  var DASH = '-';
 
   function head() {
-    return '<div class="page-head"><div><h1>Team</h1><p>Each agent in plain terms: what it did, how long it took, what it cost.</p></div></div>';
-  }
-
-  function sum(list) {
-    return list.reduce(function (total, n) { return total + n; }, 0);
+    return '<div class="page-head"><div><h1>Team</h1><p>Who is working on what, and how much each agent has finished.</p></div></div>';
   }
 
   function statsFor(key, tasks) {
     var done = tasks.filter(function (t) { return t.status === 'completed'; });
     var timed = done.filter(function (t) { return t.durationMs; });
-    var work = sum(timed.map(function (t) { return t.durationMs; }));
     var costs = tasks.filter(function (t) { return t.costUsd != null; });
     var stamps = tasks.map(function (t) { return t.status === 'in_progress' ? (t.startT || 0) : (t.endT || 0); });
     return {
       agent: key || null,
       total: tasks.length,
       done: done.length,
-      work: timed.length ? work : null,
-      avg: timed.length ? work / timed.length : null,
-      cost: costs.length ? sum(costs.map(function (t) { return t.costUsd; })) : null,
+      work: timed.length ? timed.reduce(function (n, t) { return n + t.durationMs; }, 0) : null,
+      cost: costs.length ? costs.reduce(function (n, t) { return n + t.costUsd; }, 0) : null,
+      blocked: tasks.filter(function (t) { return t.status === 'blocked'; }).length,
       last: Math.max.apply(null, [0].concat(stamps)) || null,
-      running: tasks.filter(function (t) { return t.status === 'in_progress'; })[0] || null,
-      stuck: tasks.filter(function (t) { return t.status === 'blocked'; })[0] || null
+      running: tasks.filter(function (t) { return t.status === 'in_progress'; })[0] || null
     };
   }
 
@@ -41,71 +35,74 @@ export const teamScript = String.raw `  var esc = Studio.ui.esc;
       .sort(function (a, b) { return b.total - a.total; });
   }
 
-  function chip(task, label) {
-    return '<button type="button" class="chip" data-task="' + esc(task.id) + '">' +
-      Studio.ui.statusIcon(task.status) + esc(label) + '</button>';
+  function currentTask(r) {
+    var t = r.running;
+    if (!t) return '<span class="idle">Idle</span>';
+    return '<button type="button" class="cur" data-act="team-open" data-tid="' + esc(t.id) +
+      '" title="' + esc(t.title || t.id) + '"><span class="mono">' + esc(t.id) + '</span>' +
+      '<span class="ttl">' + esc(t.title || '') + '</span></button>';
   }
 
-  function rightNow(r) {
-    if (r.running) return chip(r.running, r.running.id);
-    if (r.stuck) return chip(r.stuck, 'Stuck on ' + r.stuck.id);
-    return '<span class="faint">Idle</span>';
-  }
-
-  function shareBar(r, max) {
-    var info = Studio.agentInfo(r.agent);
-    var pct = max ? Math.round((r.total / max) * 100) : 0;
-    return '<div class="bar"><i style="width:' + pct + '%;background:var(' + info.token + ')"></i></div>';
+  function rate(r) {
+    var fin = r.done + r.blocked;
+    return fin ? Math.round((r.done / fin) * 100) + '%' : DASH;
   }
 
   function lastActive(r) {
     return r.last ? Studio.ui.when(r.last) : DASH;
   }
 
-  function row(r, max) {
-    return '<tr data-agent="' + esc(r.agent || 'unassigned') + '"><td>' + Studio.ui.agentChip(r.agent) + '</td>' +
-      '<td>' + rightNow(r) + '</td>' +
-      '<td class="r">' + r.done + '<span class="faint"> / ' + r.total + '</span></td>' +
-      '<td class="share">' + shareBar(r, max) + '</td>' +
-      '<td class="r">' + (r.avg == null ? DASH : esc(Studio.fmt.dur(r.avg))) + '</td>' +
-      '<td class="r">' + (r.work == null ? DASH : esc(Studio.fmt.dur(r.work))) + '</td>' +
-      '<td class="r">' + (r.cost == null ? DASH : esc(Studio.fmt.money(r.cost))) + '</td>' +
-      '<td class="r faint">' + lastActive(r) + '</td></tr>';
+  function row(r) {
+    var dot = r.running ? '<i class="run-dot"></i>' : '';
+    return '<tr data-agent="' + esc(r.agent || 'unassigned') + '"><td class="who">' + dot +
+      esc(r.agent || 'unassigned') + '</td>' +
+      '<td>' + currentTask(r) + '</td>' +
+      '<td class="mono r">' + r.done + '</td>' +
+      '<td class="mono r hide-sm">' + (r.work == null ? DASH : esc(Studio.fmt.dur(r.work))) + '</td>' +
+      '<td class="mono r hide-sm">' + (r.cost == null ? DASH : esc(Studio.fmt.money(r.cost))) + '</td>' +
+      '<td class="mono r hide-sm">' + rate(r) + '</td>' +
+      '<td class="mono r hide-sm">' + lastActive(r) + '</td></tr>';
   }
 
   function table(rows) {
-    var max = Math.max.apply(null, rows.map(function (r) { return r.total; }));
-    var cols = ['Agent', 'Right now', 'Tasks done', 'Share of work', 'Avg. time', 'Total time', 'Est. cost', 'Last active'];
-    var th = cols.map(function (c, i) {
-      var cls = i === 3 ? ' class="share"' : (i > 1 ? ' class="r"' : '');
-      return '<th' + cls + '>' + c + '</th>';
+    var cols = [['Agent', ''], ['Current task', ''], ['Tasks done', 'r'],
+      ['Time', 'r hide-sm'], ['Cost', 'r hide-sm'], ['Success rate', 'r hide-sm'], ['Last active', 'r hide-sm']];
+    var th = cols.map(function (c) {
+      var tip = c[0] === 'Success rate' ? ' title="Completed / (completed + blocked)"' : '';
+      return '<th' + tip + (c[1] ? ' class="' + c[1] + '"' : '') + '>' + c[0] + '</th>';
     }).join('');
-    return '<section class="panel table-wrap"><table><thead><tr>' + th + '</tr></thead><tbody>' +
-      rows.map(function (r) { return row(r, max); }).join('') + '</tbody></table></section>';
+    return '<div class="roster"><table><thead><tr>' + th + '</tr></thead><tbody>' +
+      rows.map(row).join('') + '</tbody></table></div>' + defs();
   }
 
   function defs() {
-    return '<section class="panel"><div class="panel-head"><h2>What these columns mean</h2></div><div class="panel-body defs">' +
-      '<div><b>Tasks done</b>: finished and checked, out of all tasks given to this agent.</div>' +
-      '<div><b>Avg. time</b>: from start to a passing check, for tasks that recorded timing.</div>' +
-      '<div><b>Est. cost</b>: estimated from token counts. The real bill is on Home under Spend.</div>' +
-      '<div><b>Right now</b>: the task this agent is working on, or the one it is stuck on.</div></div></section>';
+    var items = [['Tasks done', 'finished and checked by the gatekeeper.'],
+      ['Time', 'total time on completed tasks that recorded timing.'],
+      ['Cost', 'estimated from token counts; the real bill is on Home.'],
+      ['Current task', 'the task this agent is working on right now.']];
+    return '<details class="defs"><summary>What these columns mean</summary>' + items.map(function (i) {
+      return '<div><b>' + i[0] + '</b><span>' + i[1] + '</span></div>';
+    }).join('') + '</details>';
   }
 
   function skeleton() {
-    var bar = function (w) { return '<div class="skel" style="width:' + w + '"></div>'; };
-    var block = '<div class="skel-block">' + bar('100%') + bar('92%') + bar('74%') + '</div>';
-    return head() + block + block;
+    var line = function (w) {
+      return '<tr><td colspan="6"><div class="skel" style="width:' + w + '"></div></td></tr>';
+    };
+    var rows = ['92%', '78%', '86%', '70%'].map(line).join('');
+    return head() + '<div class="roster"><table><thead>' + line('100%') + '</thead><tbody>' +
+      rows + '</tbody></table></div>';
   }
 
   function render(ctx) {
     var rows = buildRows(ctx.model);
-    if (!rows.length) return head() + '<section class="panel">' + ctx.ui.empty('No tasks yet', 'Agents show up here once the plan has tasks.') + '</section>';
-    return head() + table(rows) + defs();
+    if (!rows.length) return head() + '<p class="empty">No agents have worked on this project yet.</p>';
+    return head() + table(rows);
   }
 
   Studio.registerPage('team', {
     deps: ['tasks', 'telemetry', 'runs'],
+    actions: { 'team-open': function (el) { Studio.taskAction('logs', el.getAttribute('data-tid')); } },
     render: render,
     skeleton: skeleton
   });

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

@@ -1,22 +1,23 @@
-// Team page styles, all scoped under #panel-team.
-export const teamCss = String.raw `#panel-team .page-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
-#panel-team .page-head h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
+// Team page styles, all scoped under #panel-team. Ink look: no cards, 1px dividers.
+export const teamCss = String.raw `#panel-team .page-head h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
 #panel-team .page-head p { margin: 4px 0 0; color: var(--fg-2); }
-#panel-team .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; margin-top: 16px; }
-#panel-team .panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
-#panel-team .panel-head h2 { font-size: 14px; font-weight: 600; margin: 0; }
-#panel-team .panel-body { padding: 14px 16px; }
-#panel-team .table-wrap { overflow-x: auto; }
-#panel-team table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
-#panel-team th { text-align: left; font-weight: 500; font-size: 12px; color: var(--fg-3); padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
-#panel-team td { padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
-#panel-team tr:last-child td { border-bottom: 0; }
-#panel-team td.r, #panel-team th.r { text-align: right; }
-#panel-team .share { width: 110px; }
-#panel-team .bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
-#panel-team .bar i { display: block; height: 100%; border-radius: 3px; }
-#panel-team .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 12px var(--mono); cursor: pointer; }
-#panel-team .chip:hover { background: var(--surface-2); }
-#panel-team .defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; font-size: 13px; color: var(--fg-2); }
-#panel-team .defs b { color: var(--fg); font-weight: 500; }
+#panel-team .roster { margin-top: 16px; overflow-x: auto; }
+#panel-team table { width: 100%; border-collapse: collapse; }
+#panel-team th { text-align: left; font-weight: 500; font-size: 12px; color: var(--fg-3); height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+#panel-team td { height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+#panel-team .r { text-align: right; }
+#panel-team .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+#panel-team .who { font-weight: 500; }
+#panel-team .run-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--run); margin-right: 8px; }
+#panel-team .idle { color: var(--fg-3); }
+#panel-team .cur { display: inline-flex; gap: 8px; max-width: 360px; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; cursor: pointer; }
+#panel-team .cur:hover .ttl { text-decoration: underline; }
+#panel-team .ttl { overflow: hidden; text-overflow: ellipsis; color: var(--fg-2); }
+#panel-team .empty { margin: 24px 0; color: var(--fg-3); }
+#panel-team .defs { margin-top: 24px; }
+#panel-team .defs summary { cursor: pointer; color: var(--fg-2); height: 36px; line-height: 36px; }
+#panel-team .defs div { display: flex; gap: 16px; height: 36px; align-items: center; border-bottom: 1px solid var(--line); }
+#panel-team .defs b { width: 120px; font-weight: 500; }
+#panel-team .defs span { color: var(--fg-2); }
+@media (max-width: 1023px) { #panel-team .hide-sm { display: none; } }
 `;

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

@@ -11,50 +11,62 @@ export const worktreesScript = String.raw `  // ─── View 3: Agent worktree
     return task ? task.status : null;
   }
 
-  function worktreeBadge(w, status) {
-    if (!w.isAgentWorktree) return '<span class="badge badge-neutral">Main workspace</span>';
-    if (status === 'completed') return '<span class="badge badge-success">Tests Passed (Ready to merge)</span>';
-    if (status === 'in_progress') return '<span class="badge badge-active">Agent working</span>';
-    if (status === 'blocked') return '<span class="badge badge-danger">Blocked</span>';
-    if (status === 'pending') return '<span class="badge badge-neutral">Pending</span>';
-    return '<span class="badge badge-neutral" title="No matching task in the master plan">Untracked</span>';
+  function wtStatus(w, status) {
+    if (!w.isAgentWorktree) return ['neutral', 'main'];
+    if (status === 'completed') return ['ok', 'ready to merge'];
+    if (status === 'in_progress') return ['run', 'agent working'];
+    if (status === 'blocked') return ['err', 'blocked'];
+    if (status === 'pending') return ['neutral', 'open'];
+    return ['neutral', 'stale'];
+  }
+
+  function wtChanges(w) {
+    var n = w.changedFiles != null ? w.changedFiles : w.files;
+    return n != null ? esc(String(n)) + ' files' : '<span class="muted">-</span>';
+  }
+
+  function wtActions(w, status) {
+    var id = esc(w.taskId);
+    var canMerge = w.mergeEligible != null ? !!w.mergeEligible : status === 'completed';
+    var why = w.mergeBlockedReason || 'Available once the task is completed';
+    var busy = pipe.busy['wt:' + w.taskId];
+    if (busy) {
+      return '<button class="btn small" type="button" disabled><span class="spinner" aria-hidden="true"></span>' +
+        (busy === 'merge' ? 'Merging...' : 'Deleting...') + '</button>';
+    }
+    return '<button class="btn small" type="button" data-act="wt-diff" data-key="' + id +
+      '" aria-label="Inspect diff for ' + id + '">View changes</button>' +
+      '<button class="btn small primary" type="button" data-act="wt-merge" data-key="' + id +
+      '" aria-label="Merge ' + id + ' to main"' + (canMerge ? '' : ' disabled title="' + esc(why) + '"') +
+      '>Merge</button>' +
+      '<button class="btn small danger" type="button" data-act="wt-remove" data-key="' + id +
+      '" aria-label="Delete workspace for ' + id + '">Remove</button>';
   }
 
   function worktreeRow(w) {
     var status = worktreeTaskStatus(w);
     var task = w.taskId ? taskById(w.taskId) : null;
-    // The server decides merge eligibility (and why not); fall back to the task status from the plan.
-    var canMerge = w.mergeEligible != null ? !!w.mergeEligible : status === 'completed';
-    var blockedWhy = w.mergeBlockedReason || 'Available once the task is completed';
-    var busy = w.taskId && pipe.busy['wt:' + w.taskId];
-    var actions = '<span class="muted">–</span>';
-    if (w.isAgentWorktree && w.taskId) {
-      actions = busy
-        ? '<button class="btn small" type="button" disabled><span class="spinner" aria-hidden="true"></span>' + (busy === 'merge' ? 'Merging…' : 'Deleting…') + '</button>'
-        : '<button class="btn small" type="button" data-act="wt-diff" data-key="' + esc(w.taskId) + '" aria-label="' + esc('Inspect diff for ' + w.taskId) + '">Inspect Diff</button>' +
-          '<button class="btn small primary" type="button" data-act="wt-merge" data-key="' + esc(w.taskId) + '"' + (canMerge ? '' : ' disabled title="' + esc(blockedWhy) + '"') + '>Merge to Main</button>' +
-          '<button class="btn small danger" type="button" data-act="wt-remove" data-key="' + esc(w.taskId) + '">Delete Workspace</button>';
-    }
-    return '<tr><td data-label="Branch"><code>' + esc(w.branch) + '</code></td>' +
-      '<td data-label="Task ID">' + (w.taskId ? '<div><code>' + esc(w.taskId) + '</code>' + (task ? '<div class="cell-sub" title="' + esc(task.title) + '">' + esc(task.title) + '</div>' : '') + '</div>' : '<span class="muted">–</span>') + '</td>' +
-      '<td data-label="Workspace Folder"><code class="path" title="' + esc(w.path) + '">' + esc(shortPath(w.path)) + '</code></td>' +
-      '<td data-label="Latest Commit"><code>' + esc(String(w.head || '').slice(0, 7) || '–') + '</code></td>' +
-      '<td data-label="Status">' + worktreeBadge(w, status) + '</td>' +
-      '<td data-label="Actions"><div class="row-actions">' + actions + '</div></td></tr>';
+    var st = wtStatus(w, status);
+    var actions = w.isAgentWorktree && w.taskId ? wtActions(w, status) : '<span class="muted">-</span>';
+    var title = task ? task.title : '';
+    return '<tr class="wt-row"><td class="wt-task">' + (w.taskId ? '<code>' + esc(w.taskId) + '</code>' : '') +
+      '<span class="wt-title" title="' + esc(title) + '">' + esc(title) + '</span></td>' +
+      '<td><code>' + esc(w.branch) + '</code></td>' +
+      '<td><span class="wt-dot" data-tone="' + st[0] + '"></span>' + esc(st[1]) + '</td>' +
+      '<td class="wt-num">' + wtChanges(w) + '</td>' +
+      '<td><div class="row-actions">' + actions + '</div></td></tr>';
   }
 
   function renderWorktrees() {
-    var head = panelHead('Agent Worktrees', 'Isolated git workspaces for tasks. Changes are tested automatically before merging into your main branch.');
-    if (!pipe.loaded.worktrees) return head + '<div class="card section" aria-hidden="true"><div class="skeleton"></div><div class="skeleton"></div><div class="skeleton short"></div></div>';
+    var head = panelHead('Worktrees', 'Isolated git workspaces for tasks.');
+    if (!pipe.loaded.worktrees) return head + '<div class="section" aria-hidden="true"><div class="skeleton"></div><div class="skeleton short"></div></div>';
     if (pipe.errors.worktrees && !pipe.worktrees.length) return head + errorCard('worktrees', pipe.errors.worktrees, 'worktrees');
-    var rows = pipe.worktrees.slice().sort(function (a, b) { return (a.isAgentWorktree ? 1 : 0) - (b.isAgentWorktree ? 1 : 0); });
-    if (!rows.some(function (w) { return w.isAgentWorktree; })) {
-      return head + staleNote('worktrees') + '<div class="card state"><div class="state-icon">' + ICON.branch + '</div><h2>No agent worktrees</h2>' +
-        '<p>Run <code>nativ worktree create &lt;taskId&gt;</code> to give an agent its own isolated workspace folder for an independent task.</p></div>';
-    }
-    return head + staleNote('worktrees') + '<div class="card wt-card"><table class="grid"><thead><tr>' +
-      '<th scope="col">Branch Name</th><th scope="col">Task ID</th><th scope="col">Workspace Folder</th><th scope="col">Latest Commit</th><th scope="col">Status</th><th scope="col">Actions</th>' +
-      '</tr></thead><tbody>' + rows.map(worktreeRow).join('') + '</tbody></table></div>';
+    var rows = pipe.worktrees.filter(function (w) { return w.isAgentWorktree; });
+    if (!rows.length) return head + staleNote('worktrees') + '<div class="state"><p>No worktrees open.</p></div>';
+    return head + staleNote('worktrees') + '<table class="grid wt-table"><thead><tr>' +
+      '<th scope="col">Task</th><th scope="col">Branch</th><th scope="col">Status</th>' +
+      '<th scope="col">Changes</th><th scope="col">Actions</th>' +
+      '</tr></thead><tbody>' + rows.map(worktreeRow).join('') + '</tbody></table>';
   }
 
   function confirmWorktree(action, taskId) {

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

@@ -1,15 +1,17 @@
 // Worktrees view styles.
-export const worktreesCss = String.raw `/* Agent worktrees */
-.wt-card { overflow: hidden; }
-table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
-table.grid th { padding: 10px 16px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap; }
+export const worktreesCss = String.raw `/* Worktrees table */
+table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
+table.grid th { height: 32px; padding: 0 12px; text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
 table.grid th:last-child { text-align: right; }
-table.grid td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
-table.grid tbody tr:last-child td { border-bottom: none; }
-table.grid tbody tr:hover td { background: var(--bg); }
-table.grid code { font-size: 12.5px; }
-.cell-sub { max-width: 280px; margin-top: 2px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.path { display: inline-block; max-width: 260px; vertical-align: bottom; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+table.grid td { height: 36px; padding: 0 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
+table.grid code { font-family: var(--mono); font-size: 12px; }
+.wt-task { display: flex; align-items: center; gap: 8px; height: 36px; max-width: 320px; }
+.wt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
+.wt-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+.wt-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--muted); }
+.wt-dot[data-tone="ok"] { background: var(--ok); }
+.wt-dot[data-tone="err"] { background: var(--danger); }
+.wt-dot[data-tone="run"] { background: var(--warn); }
 .row-actions { display: flex; justify-content: flex-end; gap: 6px; }
 
 `;