@njeybe/nativ 2.5.1 → 2.7.0

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; }
 
 `;

package/dist/server/studio-ui/shell/brand.d.ts

@@ -0,0 +1,4 @@
+export declare const WORDMARK_PATH: string;
+export declare function wordmark(opts?: {
+    rail?: boolean;
+}): string;

package/dist/server/studio-ui/shell/brand.js

@@ -0,0 +1,16 @@
+// The nativ wordmark: path from assets/brand/nativ-dark.svg, filled with currentColor.
+export const WORDMARK_PATH = 'M88.9141 114.148H69.6172V69.6172C69.6172 67.0938 69.1719 64.8424 68.2812 62.8633C67.4401 60.8346 66.2773 59.1029 64.793 57.668C63.3086 56.2331 61.5521 55.1445 59.5234 54.4023C57.5443 53.6107 55.3919 53.2148 53.0664 53.2148H19.2969V114.148H0V43.4922C0 42.1562 0.247396 40.9193 0.742188 39.7812C1.23698 38.5938 1.92969 37.5794 2.82031 36.7383C3.71094 35.8477 4.75 35.1549 5.9375 34.6602C7.125 34.1654 8.38672 33.918 9.72266 33.918H53.2148C55.6393 33.918 58.1875 34.1901 60.8594 34.7344C63.5807 35.2786 66.2526 36.1693 68.875 37.4062C71.5469 38.5938 74.0703 40.1276 76.4453 42.0078C78.8698 43.8385 80.9974 46.0898 82.8281 48.7617C84.7083 51.3841 86.1927 54.4271 87.2812 57.8906C88.3698 61.3542 88.9141 65.263 88.9141 69.6172V114.148' +
+    'ZM188.664 87.5781C188.664 90.25 188.194 93.1445 187.254 96.2617C186.314 99.3294 184.78 102.199 182.652 104.871C180.574 107.493 177.828 109.695 174.414 111.477C171.049 113.258 166.943 114.148 162.094 114.148H127.285C124.613 114.148 121.719 113.678 118.602 112.738C115.534 111.798 112.664 110.289 109.992 108.211C107.37 106.083 105.168 103.337 103.387 99.9727C101.605 96.5586 100.715 92.4271 100.715 87.5781C100.715 84.9062 101.185 82.0117 102.125 78.8945C103.065 75.7773 104.574 72.9076 106.652 70.2852C108.78 67.6133 111.526 65.3867 114.891 63.6055C118.305 61.8242 122.436 60.9336 127.285 60.9336H162.094V79.3398H127.285C124.663 79.3398 122.634 80.1562 121.199 81.7891C119.764 83.3724 119.047 85.3516 119.047 87.7266C119.047 90.25 119.863 92.2292 121.496 93.6641C123.178 95.0495 125.158 95.7422 127.434 95.7422H162.094C164.716 95.7422 166.745 94.9505 168.18 93.3672C169.615 91.7839 170.332 89.8047 170.332 87.4297V60.4883C170.332 57.9648 169.54 55.9609 167.957 54.4766C166.423 52.9922 164.469 52.25 162.094 52.25H119.715V33.918H162.094C164.766 33.918 167.635 34.388 170.703 35.3281C173.82 36.2682 176.69 37.8021 179.312 39.9297C181.984 42.0078 184.211 44.7539 185.992 48.168C187.773 51.5326 188.664 55.6393 188.664 60.4883V87.5781' +
+    'ZM277.801 53.2148H244.105V114.148H224.586V53.2148H199.5V33.918H224.586V7.71875H244.105V33.918H277.801V53.2148' +
+    'ZM310.086 17.4414H290.789V0H310.086V17.4414' +
+    'ZM310.086 114.148H290.789V33.918H310.086V114.148' +
+    'ZM424.383 33.918C422.206 40.6966 419.658 47.3763 416.738 53.957C413.819 60.5378 410.454 66.8216 406.645 72.8086C402.884 78.7461 398.654 84.263 393.953 89.3594C389.302 94.4062 384.132 98.7852 378.441 102.496C372.801 106.158 366.641 109.052 359.961 111.18C353.331 113.258 346.132 114.297 338.363 114.297C337.027 114.297 335.766 114.049 334.578 113.555C333.391 113.06 332.352 112.392 331.461 111.551C330.57 110.66 329.878 109.646 329.383 108.508C328.888 107.32 328.641 106.059 328.641 104.723V33.918H347.938V94.2578C352.638 94.2578 357.141 93.2435 361.445 91.2148C365.799 89.1862 369.906 86.5143 373.766 83.1992C377.625 79.8346 381.188 76.0247 384.453 71.7695C387.768 67.5143 390.712 63.1602 393.285 58.707C395.858 54.2044 398.035 49.8008 399.816 45.4961C401.647 41.1914 403.008 37.332 403.898 33.918H424.383' +
+    'Z';
+// Rail variant clips to the n glyph for the collapsed sidebar.
+export function wordmark(opts = {}) {
+    const rail = opts.rail === true;
+    const cls = rail ? 'wordmark is-rail' : 'wordmark';
+    const box = rail ? '0 0 90 115' : '0 0 425 115';
+    return '<svg class="' + cls + '" viewBox="' + box + '" role="img" aria-label="nativ" ' +
+        'focusable="false"><path fill="currentColor" d="' + WORDMARK_PATH + '"/></svg>';
+}

package/dist/server/studio-ui/shell/console.js

@@ -57,11 +57,13 @@ export const consoleScript = String.raw `  // ─── Live runner console draw
   function syncConsole() {
     var run = rc.taskId ? runFor(rc.taskId) : null;
     var task = rc.taskId ? taskById(rc.taskId) : null;
-    $('rc-task').textContent = rc.taskId || '–';
+    $('rc-task').textContent = rc.taskId || '';
     $('rc-title').textContent = task ? task.title : '';
     $('rc-steps').innerHTML = rcStepper(run);
     $('rc-abort').disabled = !isRunActive(run);
     $('rc-elapsed').textContent = mmss(elapsedOf(run) || 0);
+    $('rc-clock').textContent = $('rc-elapsed').textContent;
+    syncInspectorStatus(run);
     $('rc-bytes').textContent = formatBytes((run && run.logBytes) || 0);
     var gate = 'Idle';
     if (run && run.verification) gate = run.verification.success ? 'Passed' : 'Failed';
@@ -90,6 +92,7 @@ export const consoleScript = String.raw `  // ─── Live runner console draw
       var run = rc.taskId ? runFor(rc.taskId) : null;
       if (!rc.taskId || !isRunActive(run)) { clearInterval(rc.ticker); rc.ticker = null; return; }
       $('rc-elapsed').textContent = mmss(elapsedOf(run) || 0);
+      $('rc-clock').textContent = $('rc-elapsed').textContent;
     }, 1000);
   }
 
@@ -135,7 +138,7 @@ export const consoleScript = String.raw `  // ─── Live runner console draw
     $('rc-diff-files').innerHTML = (files || []).map(function (f) { return '<li title="' + esc(f) + '">' + esc(f) + '</li>'; }).join('');
     $('rc-diff-files').hidden = !(files && files.length);
     $('rc-diff-body').innerHTML = bodyHtml;
-    $('rc-diff-count').textContent = count == null ? '–' : String(count);
+    $('rc-diff-count').textContent = count == null ? '-' : String(count);
   }
 
   function loadConsoleDiff(taskId) {
@@ -191,4 +194,60 @@ export const consoleScript = String.raw `  // ─── Live runner console draw
     return ['logs', 'diff', 'heal'].filter(function (name) { return !$('rc-tab-' + name).hidden; });
   }
 
+  // Inspector header status: dot color follows the run state only.
+  function syncInspectorStatus(run) {
+    var st = run ? run.status : '';
+    var tone = !st ? 'idle' : st === 'completed' ? 'ok' : (st === 'failed' || st === 'aborted') ? 'err' : 'run';
+    $('rc-status').setAttribute('data-tone', tone);
+    $('rc-status-text').textContent = st ? (RUN_LABEL[st] || st) : 'Idle';
+  }
+
+  // Below 1024px the inspector is a modal sheet over the content.
+  function inspectorIsSheet() {
+    return window.matchMedia && window.matchMedia('(max-width: 1023px)').matches;
+  }
+
+  // Remembers the opener so closing hands focus back to it.
+  function rememberInspectorOpener() {
+    var drawer = $('runner-console-drawer');
+    var active = document.activeElement;
+    if (drawer.hidden && active && !drawer.contains(active)) rc.opener = active;
+  }
+
+  function applyInspectorMode() {
+    var drawer = $('runner-console-drawer');
+    var sheet = inspectorIsSheet() && !drawer.hidden;
+    if (sheet) drawer.setAttribute('aria-modal', 'true');
+    else drawer.removeAttribute('aria-modal');
+    drawer.setAttribute('role', sheet ? 'dialog' : 'region');
+    if ($('task-drawer').hidden) $('scrim').hidden = !sheet;
+  }
+
+  function restoreInspectorFocus() {
+    if ($('task-drawer').hidden) $('scrim').hidden = true;
+    var opener = rc.opener;
+    rc.opener = null;
+    if (opener && document.contains(opener) && opener.focus) opener.focus();
+  }
+
+  // Keeps Tab inside the sheet while it is modal.
+  function trapInspectorFocus(e) {
+    var drawer = $('runner-console-drawer');
+    if (e.key !== 'Tab' || drawer.hidden || !inspectorIsSheet()) return;
+    var items = Array.prototype.filter.call(
+      drawer.querySelectorAll('button, [href], [tabindex]:not([tabindex="-1"]), textarea, input'),
+      function (el) { return !el.disabled && el.offsetParent !== null; });
+    if (!items.length) return;
+    var first = items[0], last = items[items.length - 1];
+    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+  }
+
+  document.addEventListener('keydown', trapInspectorFocus);
+  document.addEventListener('click', function (e) {
+    var t = e.target && e.target.closest ? e.target.closest('#rc-open-diff') : null;
+    if (t) setConsoleTab('diff', true);
+  });
+  window.addEventListener('resize', applyInspectorMode);
+
 `;

package/dist/server/studio-ui/shell/core.js

@@ -6,14 +6,14 @@ export const coreScript = String.raw `<script>
   var $ = function (id) { return document.getElementById(id); };
 
   var ICON = {
-    spark: '<svg class="icon t1-spark" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5l1.6 4.9 4.9 1.6-4.9 1.6L8 14.5l-1.6-4.9L1.5 8l4.9-1.6z"/></svg>',
-    check: '<svg class="icon" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg>',
-    x: '<svg class="icon" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/></svg>',
-    shield: '<svg class="icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 1.8l5.2 2.1v3.7c0 3.1-2.2 5.6-5.2 6.6-3-1-5.2-3.5-5.2-6.6V3.9z"/><path d="M5.6 8.1l1.7 1.7 3.2-3.3"/></svg>',
-    play: '<svg class="icon" width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.5 2.8v10.4L13 8z"/></svg>',
-    alert: '<svg class="icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.5v.01"/></svg>',
-    branch: '<svg class="icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="8" r="2"/><path d="M6 7v10M18 10c0 4-6 3-11.2 7.4"/></svg>',
-    gauge: '<svg class="icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M4 16a8 8 0 1 1 16 0"/><path d="M12 16l4-5"/></svg>'
+    spark: '<svg class="icon t1-spark" width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"/></svg>',
+    check: '<svg class="icon" width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg>',
+    x: '<svg class="icon" width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg>',
+    shield: '<svg class="icon" width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0ZM82.34,141.66a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32l-56,56a8,8,0,0,1-11.32,0Z"/></svg>',
+    play: '<svg class="icon" width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"/></svg>',
+    alert: '<svg class="icon" width="28" height="28" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"/></svg>',
+    branch: '<svg class="icon" width="28" height="28" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M232,64a32,32,0,1,0-40,31v17a8,8,0,0,1-8,8H96a23.84,23.84,0,0,0-8,1.38V95a32,32,0,1,0-16,0v66a32,32,0,1,0,16,0V144a8,8,0,0,1,8-8h88a24,24,0,0,0,24-24V95A32.06,32.06,0,0,0,232,64ZM64,64A16,16,0,1,1,80,80,16,16,0,0,1,64,64ZM96,192a16,16,0,1,1-16-16A16,16,0,0,1,96,192ZM200,80a16,16,0,1,1,16-16A16,16,0,0,1,200,80Z"/></svg>',
+    gauge: '<svg class="icon" width="28" height="28" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M207.06,72.67A111.24,111.24,0,0,0,128,40h-.4C66.07,40.21,16,91,16,153.13V176a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V152A111.25,111.25,0,0,0,207.06,72.67ZM224,176H119.71l54.76-75.3a8,8,0,0,0-12.94-9.42L99.92,176H32V153.13c0-3.08.15-6.12.43-9.13H56a8,8,0,0,0,0-16H35.27c10.32-38.86,44-68.24,84.73-71.66V80a8,8,0,0,0,16,0V56.33A96.14,96.14,0,0,1,221,128H200a8,8,0,0,0,0,16h23.67c.21,2.65.33,5.31.33,8Z"/></svg>'
   };
 
   function formatBytes(n) {