@staix/agent-hub 0.13.0 → 0.15.0

package/src/ui/index.html

@@ -201,6 +201,15 @@ details.settings-group{border-bottom:1px solid var(--line)}
 details.settings-group>summary{background:var(--panel-soft)}
 details.settings-group .row{border-bottom:1px dashed var(--line)}
 details.settings-group .row:last-child{border-bottom:0}
+/* Structure (#689): instances, lifecycle and the executable keys. Tier 3 is text only: no control, a command to run in the console. */
+.structure-group .row{padding:var(--space-3) var(--space-4)}
+.structure-instance,.structure-sdlc,.structure-add,.structure-backups{border-bottom:1px dashed var(--line)}
+.structure-tier3{background:var(--panel-soft);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-surface);padding:var(--space-3) var(--space-4);margin:var(--space-3) var(--space-4)}
+.structure-tier3 code{display:block;overflow-wrap:anywhere;color:var(--muted)}
+.structure-group button,.structure-group input,.structure-group select{min-height:44px}
+.structure-field{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:var(--space-2);align-items:center;margin:var(--space-2) 0}
+.structure-diff{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--panel-soft);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);margin:var(--space-2) 0}
+.structure-error{color:var(--red);background:var(--red-soft);border:1px solid var(--red);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);margin:var(--space-2) 0}
 /* Peer colours: the registry's hue, one variant per theme, generated by peer-palette.ts */
 /* PEER_PALETTE_CSS */
 
@@ -233,7 +242,7 @@ details.settings-group .row:last-child{border-bottom:0}
 .board-unknown{padding:var(--space-3) var(--space-4);color:var(--amber)}
 @media(max-width:1100px){.board-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media(max-width:900px){.stack{gap:var(--space-4)}.stream{height:300px}footer{padding:var(--space-4)}}
-@media(max-width:600px){.split{grid-template-columns:minmax(0,1fr)}.board-columns{grid-template-columns:1fr;padding:var(--space-3)}.board-toolbar{align-items:stretch}.board-toolbar select{max-width:none;width:100%}.board-toolbar label{width:100%}}
+@media(max-width:600px){.structure-field{grid-template-columns:minmax(0,1fr)}.structure-tier3{margin:var(--space-3)}.split{grid-template-columns:minmax(0,1fr)}.board-columns{grid-template-columns:1fr;padding:var(--space-3)}.board-toolbar{align-items:stretch}.board-toolbar select{max-width:none;width:100%}.board-toolbar label{width:100%}}
 /* Reduced motion (#469 R6): one rule for the whole page. Every transition and animation is off, whatever rule declares it. */
 @media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
 
@@ -325,6 +334,13 @@ main>.stack{margin-top:var(--space-6)}
 .plan-block form,.plan-block .content{padding:0}
 /* A group is a plain heading and its lines: the global section{} box rule must not wrap each one in a card. */
 .detail-group{margin:var(--space-4) 0;border:0;background:none;border-radius:0;overflow:visible}
+.code-symbols{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
+.code-symbol{font-family:var(--font-mono);font-size:var(--text-sm);overflow-wrap:anywhere;text-align:left;min-height:44px;min-width:44px}
+button.code-symbol{background:var(--panel-soft);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--space-1) var(--space-2)}
+button.code-symbol:hover{background:var(--hover)}
+button.code-symbol.unplanned{color:var(--amber);background:var(--amber-soft);border-color:var(--amber)}
+button.code-symbol.unplanned:hover{background:var(--hover)}
+span.code-symbol.untouched{color:var(--muted)}
 .detail-heading{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 var(--space-2);border-bottom:1px solid var(--line);padding-bottom:var(--space-1)}
 #task-detail-dialog::backdrop{background:var(--scrim)}
 .dialog-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
@@ -357,6 +373,34 @@ main[data-stale]>:not(#notice):not(#disconnected){opacity:.6;transition:opacity
 .skeleton-bar{display:block;height:var(--space-4);border-radius:var(--radius-control);background:var(--line)}
 .skeleton-tall{height:var(--space-8)}
 @media(max-width:600px){.skeleton-board{flex-direction:column}}
+/* Usage view */
+.usage-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}
+.usage-stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-surface);padding:var(--space-4)}
+.usage-stat-label{display:block;font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1)}
+.usage-stat-value{display:block;font-size:var(--text-xl);font-weight:700;font-family:var(--font-mono);color:var(--ink)}
+.usage-stat-sub{display:block;font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-1)}
+.usage-block{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-surface);padding:var(--space-4);margin-bottom:var(--space-4);min-width:0}
+.usage-block h3{font-size:var(--text-base);margin:0 0 var(--space-3)}
+.usage-chart-wrap{overflow-x:auto;padding-bottom:var(--space-2)}
+.usage-daily-bars{display:flex;align-items:flex-end;gap:var(--space-3);min-height:180px;padding:var(--space-2) 0}
+.usage-day-col{display:flex;flex-direction:column;align-items:center;flex:1 1 0;min-width:48px}
+.usage-stacked-bar{width:100%;max-width:40px;height:140px;background:var(--panel-soft);border:1px solid var(--line);border-radius:var(--radius-control);display:flex;flex-direction:column-reverse;overflow:hidden}
+.usage-bar-segment{width:100%}
+.usage-day-label{font-size:var(--text-xs);color:var(--muted);font-family:var(--font-mono);margin-top:var(--space-2);white-space:nowrap}
+.usage-day-total{font-size:var(--text-xs);color:var(--ink);font-family:var(--font-mono);margin-bottom:var(--space-1);white-space:nowrap}
+.usage-legend{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line)}
+.usage-legend-item{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--ink)}
+.usage-table-wrap{overflow-x:auto;max-width:100%}
+.usage-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);text-align:left}
+.usage-table th,.usage-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);white-space:nowrap}
+.usage-table th{font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;background:var(--panel-soft)}
+.usage-table tr:hover td{background:var(--hover)}
+.usage-table .num{font-family:var(--font-mono);text-align:right}
+.usage-tag{display:inline-block;padding:1px var(--space-2);border-radius:var(--radius-control);font-size:var(--text-xs);font-family:var(--font-mono)}
+.usage-tag.pii{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber)}
+.meta.usage-behind{color:var(--amber);background:var(--amber-soft);border:1px solid var(--amber);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3)}
+.usage-paused-alert{border:1px solid var(--amber);background:var(--amber-soft);color:var(--amber);padding:var(--space-3);border-radius:var(--radius-control);margin-bottom:var(--space-3);font-size:var(--text-sm)}
+@media(max-width:600px){.usage-summary-grid{grid-template-columns:1fr}}
 </style>
 </head>
 <body>
@@ -404,7 +448,45 @@ main[data-stale]>:not(#notice):not(#disconnected){opacity:.6;transition:opacity
 <section id="projects-panel" aria-labelledby="projects-title" data-view="agents" hidden><div class="section-head"><h2 id="projects-title">Projects</h2><span id="project-count" class="meta"></span></div><div id="projects"></div></section>
 <section aria-labelledby="peers-title" data-view="agents" hidden><div class="section-head"><h2 id="peers-title">Peers &amp; queues</h2><span id="peer-count" class="meta"></span></div><div id="peers"><div class="skeleton" aria-hidden="true"><span class="skeleton-bar skeleton-tall"></span><span class="skeleton-bar skeleton-tall"></span><span class="skeleton-bar skeleton-tall"></span></div><p class="empty">Loading peers...</p></div></section>
 <section aria-labelledby="permissions-title" data-view="agents" hidden><div class="section-head"><h2 id="permissions-title">Pending approvals</h2><span id="permission-count" class="meta"></span></div><div id="permissions"></div></section>
-<section aria-labelledby="budget-title" data-view="agents" hidden><div class="section-head"><h2 id="budget-title">Usage budgets</h2></div><div id="budget"></div></section>
+<section aria-labelledby="budget-title" data-view="agents" hidden><div class="section-head"><h2 id="budget-title">Usage budgets</h2></div><div id="budget"></div>
+<div id="usage-content" class="content">
+<div class="usage-summary-grid">
+  <div class="usage-stat-card"><span class="usage-stat-label">Lifetime Tokens</span><span id="usage-lifetime-total" class="usage-stat-value">-</span><span id="usage-lifetime-total-sub" class="usage-stat-sub"></span></div>
+  <div class="usage-stat-card"><span class="usage-stat-label">Without Cache</span><span id="usage-lifetime-nocache" class="usage-stat-value">-</span><span id="usage-lifetime-nocache-sub" class="usage-stat-sub"></span></div>
+  <div class="usage-stat-card"><span class="usage-stat-label">Cache Reads</span><span id="usage-lifetime-cache" class="usage-stat-value">-</span><span id="usage-lifetime-cache-sub" class="usage-stat-sub"></span></div>
+</div>
+<p id="usage-coverage-note" class="meta">Coverage: Jcode and Kimi (prior to #285) report hub-counted increments; unrecorded sources are noted as unknown.</p>
+
+<div class="usage-block">
+  <div class="section-subhead"><h3>Daily tokens per peer</h3><span id="usage-daily-meta" class="meta"></span></div>
+  <div class="usage-chart-wrap"><div id="usage-daily-chart" class="usage-daily-bars"></div></div>
+  <div id="usage-daily-legend" class="usage-legend"></div>
+</div>
+
+<div class="usage-block">
+  <div class="section-subhead"><h3>Limits &amp; quota timeline</h3></div>
+  <div id="usage-paused-alert" class="usage-paused-alert" hidden></div>
+  <div id="usage-budget-windows" class="budget-grid"></div>
+  <p id="usage-limits-note" class="meta" hidden></p>
+  <div class="usage-table-wrap">
+    <table class="usage-table">
+      <thead><tr><th>Time</th><th>Event</th><th>Peer</th><th>Window</th><th>Detail</th></tr></thead>
+      <tbody id="usage-limits-tbody"></tbody>
+    </table>
+  </div>
+</div>
+
+<div class="usage-block">
+  <div class="section-subhead"><h3>Task tokens</h3><span id="usage-task-count" class="meta"></span></div>
+  <div class="usage-table-wrap">
+    <table id="usage-task-table" class="usage-table">
+      <thead><tr><th>Task</th><th>State</th><th>Owner</th><th>PR</th><th class="num">Input</th><th class="num">Output</th><th class="num">Cache read</th><th class="num">Cache write</th><th class="num">Total</th></tr></thead>
+      <tbody id="usage-task-tbody"></tbody>
+    </table>
+  </div>
+</div>
+</div>
+</section>
 <section aria-labelledby="bench-title" data-view="agents" hidden><div class="section-head"><h2 id="bench-title">Benchmarks</h2><span id="bench-count" class="meta"></span></div><div id="bench"></div></section>
 </div>
 </main>
@@ -790,6 +872,105 @@ function settingRow(row, raise) {
   actions.append(save); if (row.type === 'roles') { const inherit = el('button', 'Use profile/shared roles'); inherit.type = 'button'; inherit.dataset.mutation = 'project'; inherit.disabled = managerMode && !snapshotValid; inherit.setAttribute('aria-label', 'Inherit ' + row.label); inherit.addEventListener('click', async () => { out.textContent = 'Restoring inherited role guidance...'; const accepted = await action({action:'setting',key:row.key,value:null}, inherit); out.textContent = accepted ? 'Inherited selection saved. Applies at the next peer start.' : $('notice').textContent; }); actions.append(inherit); } node.append(actions, out);
   return node;
 }
+/* Structure (#689): tier 2 edits inside a settings session; tier 3 keys are text only, with the console command that changes them. */
+const STRUCTURE_FIELDS = [['kind', 'text'], ['roles', 'text'], ['start_mode', 'text'], ['review_mode', 'text'], ['worktree', 'text'], ['permission_mode', 'text'], ['readOnly', 'text']];
+const structureState = {revision: {}, lines: [], error: '', field: '', tier: 0, preview: null};
+const structureList = (text) => String(text).split(',').map((item) => item.trim()).filter(Boolean);
+function structureField(form, name, label, placeholder) {
+  const row = el('div', undefined, 'structure-field'), input = el('input'), id = 'structure-' + name;
+  const title = el('label', label, 'meta'); title.htmlFor = id; input.id = id; input.type = 'text'; input.placeholder = placeholder || ''; input.setAttribute('aria-label', label);
+  row.append(title, input); form.append(row); return input;
+}
+function structureResult(box, out) {
+  box.replaceChildren();
+  if (structureState.error) box.append(el('p', structureState.error + (structureState.field ? ' (' + structureState.field + ')' : ''), 'structure-error'));
+  if (structureState.lines.length) box.append(el('pre', structureState.lines.join('\n'), 'structure-diff'));
+  if (out) out(box);
+}
+function structureForm(cls, title, build, file, edit, raise) {
+  const form = el('div', undefined, cls), head = el('p', title, 'label'), fields = {}, result = el('div');
+  form.append(head);
+  build(form, fields);
+  const preview = el('button', 'Preview change', 'primary'); preview.type = 'button'; preview.dataset.mutation = 'project';
+  const reason = structureField(form, 'reason', 'Reason (recorded with the change)', 'why this change');
+  const actions = el('div', undefined, 'actions'); actions.append(preview);
+  form.append(actions, result);
+  const body = () => { const set = fields.set(); return set ? {file, revision: edit.revisions[file], set} : null; };
+  preview.addEventListener('click', async () => {
+    structureState.error = ''; structureState.field = ''; structureState.lines = [];
+    const request = body();
+    if (!request) { if (!structureState.error) structureState.error = 'Give a mode or the required checks.'; structureResult(result); return; }
+    try {
+      const reply = await post('/action', {action:'config_edit_preview', edit: request});
+      if (reply.ok === false) { structureState.error = reply.error || 'The hub refused this change.'; structureState.field = reply.field || ''; }
+      else { structureState.lines = (reply.lines || []).map(String); structureState.tier = reply.tier || 2; }
+    } catch (error) { structureState.error = error.message; }
+    structureResult(result, (box) => {
+      if (structureState.error || structureState.tier === 3) { if (!structureState.error) box.append(el('p', 'This key runs code or locates secrets: change it in the console, never here.', 'structure-error')); return; }
+      const write = el('button', 'Write change', 'primary'); write.type = 'button'; write.dataset.mutation = 'project';
+      write.addEventListener('click', async () => {
+        if (!reason.value.trim()) { notice('Give a reason before writing.', true); return; }
+        const done = await action({action:'config_edit_apply', edit: request, reason: reason.value.trim()}, write);
+        if (done) { structureState.lines = []; structureResult(result); }
+      });
+      box.append(write);
+    });
+  });
+  return form;
+}
+function renderStructure(target, edit, raise) {
+  const group = el('div', undefined, 'structure-group'), head = el('div', undefined, 'row-head');
+  head.append(el('span', 'Structure', 'label'));
+  if (edit.sdlc && edit.sdlc.pending) head.append(badge('restart pending', 'warn'));
+  group.append(head);
+  if (!raise) group.append(el('p', 'Read only here. Open a settings session with ahub ui --settings to change instances, review, snapshots, approvals and the lifecycle.', 'meta'));
+  for (const instance of edit.instances || []) {
+    const row = el('div', undefined, 'structure-instance'), line = Object.entries(instance.fields).map(([key, value]) => key + ': ' + (Array.isArray(value) ? value.join(', ') : String(value))).join(' / ');
+    row.append(el('p', instance.id, 'label'), el('p', line || 'no tier 2 fields set', 'meta'));
+    if (instance.tier3.length) row.append(el('p', instance.tier3.join(', ') + ': set in the console', 'meta'));
+    group.append(row);
+  }
+  for (const block of edit.blocks || []) group.append(el('p', block.path + ': ' + settingText(block.value), 'meta'));
+  const lifecycle = el('div', undefined, 'structure-sdlc');
+  lifecycle.append(el('p', 'Lifecycle (sdlc.toml): ' + edit.sdlc.mode + '; required checks: ' + (edit.sdlc.requiredChecks.length ? edit.sdlc.requiredChecks.join(', ') : 'none'), 'meta'));
+  group.append(lifecycle);
+  if (raise) {
+    lifecycle.append(structureForm('structure-sdlc-form', 'Change the lifecycle', (form, fields) => {
+      const mode = structureField(form, 'sdlc-mode', 'sdlc mode (off, advise, enforce)', edit.sdlc.mode), checks = structureField(form, 'sdlc-checks', 'required checks, comma list', edit.sdlc.requiredChecks.join(', '));
+      fields.set = () => { const set = []; if (mode.value.trim()) set.push({path:['mode'], value: mode.value.trim()}); if (checks.value.trim()) set.push({path:['required_checks'], value: structureList(checks.value)}); return set.length ? set : null; };
+    }, 'sdlc.toml', edit, raise));
+    const add = structureForm('structure-add', 'Add an instance, or change one field of an existing one (type clear to remove a field)', (form, fields) => {
+      const id = structureField(form, 'id', 'instance id, <kind>-<name>', 'codex-review');
+      const inputs = {}; for (const [name] of STRUCTURE_FIELDS) inputs[name] = structureField(form, name, name + (name === 'roles' ? ' (comma list)' : name === 'readOnly' ? ' (true or false)' : ''), '');
+      const convert = (name, text) => name === 'roles' ? structureList(text) : name === 'readOnly' ? text === 'true' : text;
+      fields.set = () => {
+        const name = id.value.trim(), known = (edit.known || []).includes(name), typed = [];
+        for (const [field] of STRUCTURE_FIELDS) { const text = inputs[field].value.trim(); if (text) typed.push([field, text]); }
+        if (!name) { structureState.error = 'An instance needs an id and a kind.'; return null; }
+        // readOnly is exactly true or false: anything else is the person's typo, never a silent false.
+        if (typed.some(([field, text]) => field === 'readOnly' && text !== 'true' && text !== 'false' && text !== 'clear')) { structureState.error = 'readOnly is true or false.'; return null; }
+        if (known) {
+          // An existing instance changes leaf by leaf: a field left blank keeps its value, and a tier 3 field it holds is never part of the request.
+          if (!typed.length) { structureState.error = 'Type the field to change, or clear to remove it.'; return null; }
+          return typed.map(([field, text]) => ({path:['instances', name, field], value: text === 'clear' ? null : convert(field, text)}));
+        }
+        const value = {}; for (const [field, text] of typed) { if (text !== 'clear') value[field] = convert(field, text); }
+        if (!value.kind) { structureState.error = 'An instance needs an id and a kind.'; return null; }
+        return [{path:['instances', name], value}];
+      };
+    }, 'config.local.json', edit, raise);
+    group.append(add);
+  }
+  const tier3 = el('div', undefined, 'structure-tier3');
+  tier3.append(el('p', 'Executable and secret-locating keys', 'label'), el('p', "Changing one runs code with the daemon's rights or chooses where secrets are read from. It is never done from a browser: use the console command.", 'meta'));
+  for (const item of edit.tier3 || []) { tier3.append(el('p', item.key + (item.set ? ' (set)' : ' (not set)'), 'meta'), el('code', item.command)); }
+  group.append(tier3);
+  const backups = el('div', undefined, 'structure-backups');
+  backups.append(el('p', 'Backups (the last ' + (edit.backups || []).length + ')', 'label'));
+  for (const item of edit.backups || []) backups.append(el('p', new Date(item.at).toISOString() + ' ' + item.file + ' ' + item.bytes + ' bytes', 'meta'));
+  group.append(backups);
+  target.append(group);
+}
 const settingSlots = new Map();
 function setText(node, text) { if (node.textContent !== text) node.textContent = text; }
 function renderSettings(settings, roster = []) {
@@ -803,6 +984,7 @@ function renderSettings(settings, roster = []) {
     settingSlots.clear();
     const reload = el('div', undefined, 'settings-reload'); settingSlots.set('$reload', { node: reload, signature: null }); target.append(reload);
     const undo = el('div'); settingSlots.set('', { node: undo, signature: null }); target.append(undo);
+    const structure = el('div'); settingSlots.set('$structure', { node: structure, signature: null }); target.append(structure);
     for (const group of SETTING_GROUPS) {
       const rows = settings.rows.filter((row) => row.group === group);
       if (!rows.length) continue;
@@ -830,6 +1012,11 @@ function renderSettings(settings, roster = []) {
       }
     }
   }
+  const structureSlot = settingSlots.get('$structure'), structureSignature = JSON.stringify([settings.configEdit, raise]);
+  if (structureSlot && structureSlot.signature !== structureSignature) {
+    structureSlot.signature = structureSignature; structureSlot.node.replaceChildren();
+    if (settings.configEdit && Array.isArray(settings.configEdit.instances)) renderStructure(structureSlot.node, settings.configEdit, raise);
+  }
   const undoSlot = settingSlots.get(''), undoKey = settings.undo || '';
   if (undoSlot && undoSlot.signature !== undoKey) {
     undoSlot.signature = undoKey; undoSlot.node.replaceChildren();
@@ -1028,6 +1215,37 @@ function dropTarget(node, accepted, payload) {
     void action({...payload, id:card.id});
   });
 }
+// #684 2c: the sheet's Code group. The hub classified the symbols (`task.codeGroup`, absent for a private task, so nothing renders for one);
+// the page only draws them. A symbol is a button that opens the Memory tab with its canonical node (`symbol:<name>@<path>`) as the graph start.
+function codeGroupSection(task) {
+  const group = task.codeGroup;
+  if (!group) return null;
+  const section = el('section', undefined, 'detail-group code-group'); section.append(el('h4', 'Code', 'detail-heading'));
+  if (group.state !== 'known') { section.append(el('p', 'unknown (no code facts)', 'meta')); return section; }
+  const list = el('ul', undefined, 'code-symbols');
+  for (const symbol of group.symbols || []) {
+    const item = el('li'), open = el('button', symbol.name, 'code-symbol ' + symbol.mark);
+    open.type = 'button'; open.dataset.symbolNode = symbol.id; open.title = symbol.path + ' (' + symbol.mark + '); open in Memory';
+    open.setAttribute('aria-label', symbol.name + ' in ' + symbol.path + ', ' + symbol.mark + '; open in Memory');
+    open.addEventListener('click', () => openMemoryAt(symbol.id));
+    item.append(open, el('span', ' ' + symbol.mark + ' / ' + symbol.path, 'meta'));
+    list.append(item);
+  }
+  for (const name of group.untouched || []) { const item = el('li'); item.append(el('span', name, 'code-symbol untouched'), el('span', ' untouched (planned, nothing changed under it)', 'meta')); list.append(item); }
+  if (list.children.length) section.append(list); else section.append(el('p', 'none observed', 'meta'));
+  const counts = group.counts || { matching: 0, unplanned: 0, untouched: 0 };
+  const note = counts.matching + ' matching, ' + counts.unplanned + ' unplanned, ' + counts.untouched + ' untouched' + (group.head ? ' at ' + group.head : '');
+  section.append(el('p', note + (group.more ? '; ' + group.more + ' more not shown' : '')
+    + (group.planWithheld ? '; ' + group.planWithheld + ' plan name' + (group.planWithheld === 1 ? ' is' : 's are') + ' withheld, so a symbol marked unplanned may be in the plan' : '')
+    + (group.complete ? '' : '; incomplete: an untouched symbol may have changed, and a symbol marked unplanned may be in the plan')
+    + '; advisory: deleted symbols are not reported', 'meta'));
+  return section;
+}
+function openMemoryAt(node) {
+  if (typeof node !== 'string' || !node.startsWith('symbol:')) return;
+  memoryQuery.node = node; memoryQuery.q = ''; $('memory-q').value = '';
+  closeTaskDetail(); switchView('memory'); rerenderMemory();
+}
 function taskDetail(task, card, stage, ids, overdue) {
   const row = el('article', undefined, 'task-detail'), head = el('div', undefined, 'row-head');
   row.setAttribute('aria-label', '#' + task.id + ' ' + task.title + ', ' + task.state.replaceAll('_', ' ') + ', owner ' + (task.owner || 'unassigned') + ', priority P' + card.priority);
@@ -1058,6 +1276,7 @@ function taskDetail(task, card, stage, ids, overdue) {
   if(task.external?.provider==='github'){const source=el('a','GitHub #'+task.external.issue);source.href=task.external.url;source.rel='noreferrer';source.target='_blank';links.append(source);}
   if(task.pinned)links.append(el('p','Pinned','meta'));
   if (links.children.length > 1) row.append(links);
+  const code = codeGroupSection(task); if (code) row.append(code);
   const controls = el('div', undefined, 'actions');
   if (card.pull && boardViewState?.snapshot.boardCapabilities?.backlog===true) controls.append(boardButton('Pull into To Do', {action:'backlog_pull',id:task.id}));
   if (card.pull && boardViewState?.snapshot.planningCapabilities?.wipPull===true) controls.append(boardButton('Pull within WIP', {action:'planner_pull',id:task.id,revision:task.planningRevision ?? 0,reason:'person requested a WIP-constrained pull'}));
@@ -1228,6 +1447,171 @@ function renderNeedsAttention(snapshot) {
   const approvals=$('agents-approval-count');approvals.textContent=approvalCount?'('+approvalCount+')':'';approvals.hidden=!approvalCount;
   const title=value?.act?'('+value.act+') agent-hub':attentionBaseTitle;if(document.title!==title)document.title=title;
 }
+function formatCounter(c, exact) {
+  if (!c || c.value === null || c.value === undefined) return 'unknown';
+  const val = c.value;
+  let str;
+  if (exact || Math.abs(val) < 1000) str = String(val);
+  else if (val >= 1e7) str = Math.round(val / 1e6) + 'M';
+  else if (val >= 1e6) str = (val / 1e6).toFixed(1) + 'M';
+  else if (val >= 1e4) str = Math.round(val / 1e3) + 'k';
+  else str = (val / 1e3).toFixed(1) + 'k';
+  const tag = c.source === 'count' ? 'hub' : c.source === 'partial' ? 'at least' : c.source;
+  return str + (tag && tag !== 'native' ? ' (' + tag + ')' : '');
+}
+const USAGE_LIMIT_ROWS = 20;
+const USAGE_COVERAGE_NOTE = 'Coverage: Jcode and Kimi (prior to #285) report hub-counted increments; unrecorded sources are noted as unknown.';
+function renderUsage(usage, tasks, budget) {
+  if (!usage) return;
+  // A failed read is not a hidden view: replace the old figures with an explicit state so stale totals are never shown as current.
+  if (usage.unavailable === true) {
+    for (const id of ['usage-lifetime-total', 'usage-lifetime-nocache', 'usage-lifetime-cache']) $(id).textContent = 'unavailable';
+    for (const id of ['usage-lifetime-total-sub']) $(id).textContent = '';
+    $('usage-coverage-note').textContent = USAGE_COVERAGE_NOTE + ' The usage roll-up could not be read just now; the figures were cleared and will return on the next poll.';
+    $('usage-coverage-note').classList.toggle('usage-behind', true);
+    $('usage-daily-chart').replaceChildren(el('p', 'Usage unavailable.', 'empty'));
+    $('usage-daily-legend').replaceChildren();
+    $('usage-paused-alert').hidden = true;
+    $('usage-limits-tbody').replaceChildren();
+    $('usage-task-tbody').replaceChildren();
+    $('usage-task-count').textContent = 'unavailable';
+    return;
+  }
+  // #683 U4: a roll-up that has not folded the whole log gives lower bounds; say so rather than show the folded part as the whole.
+  const coverage = $('usage-coverage-note');
+  coverage.textContent = USAGE_COVERAGE_NOTE + (usage.behind === true ? ' Still folding the event log: figures are a lower bound until it catches up.' : '');
+  coverage.classList.toggle('usage-behind', usage.behind === true);
+  const total = usage.total;
+  if (total) {
+    const overall = total.overall;
+    $('usage-lifetime-total').textContent = formatCounter(overall?.tokens);
+    const unknownPeers = total.unknownPeers?.tokens || [];
+    $('usage-lifetime-total-sub').textContent = unknownPeers.length ? 'Unknown: ' + unknownPeers.join(', ') : (total.since ? 'Since ' + total.since.slice(0, 10) : '');
+    $('usage-lifetime-nocache').textContent = formatCounter(overall?.withoutCache);
+    $('usage-lifetime-cache').textContent = formatCounter(overall?.cacheRead);
+  }
+  const daily = usage.daily;
+  const chart = $('usage-daily-chart'), legend = $('usage-daily-legend');
+  if (daily && daily.days && daily.days.length) {
+    chart.replaceChildren();
+    let maxDay = 1;
+    for (const d of daily.days) {
+      if (d.total?.value && d.total.value > maxDay) maxDay = d.total.value;
+    }
+    for (const d of daily.days) {
+      const col = el('div', undefined, 'usage-day-col');
+      col.append(el('span', d.empty === true ? 'no record' : formatCounter(d.total), 'usage-day-total'));
+      const bar = el('div', undefined, 'usage-stacked-bar');
+      bar.title = d.day + ': ' + (d.empty === true ? 'no record' : formatCounter(d.total));
+      for (const p of daily.peers || []) {
+        const c = d.peers[p];
+        if (c && c.value && c.value > 0) {
+          const seg = el('div', undefined, 'usage-bar-segment peer-' + p);
+          const pct = Math.max(2, Math.round((c.value / maxDay) * 100));
+          seg.style.height = pct + '%';
+          seg.style.backgroundColor = 'var(--peer-color)';
+          seg.title = p + ': ' + formatCounter(c);
+          bar.append(seg);
+        }
+      }
+      col.append(bar, el('span', d.day.slice(5), 'usage-day-label'));
+      chart.append(col);
+    }
+    legend.replaceChildren();
+    for (const p of daily.peers || []) {
+      const item = el('span', undefined, 'usage-legend-item peer-' + p);
+      const dot = el('span', undefined, 'peer-color-dot peer-' + p);
+      dot.style.backgroundColor = 'var(--peer-color)';
+      item.append(dot, el('span', p));
+      legend.append(item);
+    }
+  } else {
+    chart.replaceChildren(el('p', 'No daily token records yet.', 'empty'));
+    legend.replaceChildren();
+  }
+
+  const limits = usage.limits;
+  const pausedAlert = $('usage-paused-alert');
+  if (limits?.open?.length) {
+    pausedAlert.hidden = false;
+    pausedAlert.textContent = 'Active budget pauses: ' + limits.open.map(p => p.peer + ' (' + p.window + (p.resetsAt ? ', resets ' + rel(p.resetsAt) : '') + ')').join('; ');
+  } else {
+    pausedAlert.hidden = true;
+  }
+
+  const limitsTbody = $('usage-limits-tbody');
+  limitsTbody.replaceChildren();
+  const history = limits?.history || [];
+  // The timeline shows the newest rows only: say how many older events it leaves out, from the hub's bound and from this view's.
+  const hidden = Math.max(0, history.length - USAGE_LIMIT_ROWS) + (Number.isFinite(limits?.omitted) ? limits.omitted : 0);
+  const limitsNote = $('usage-limits-note');
+  limitsNote.hidden = hidden === 0;
+  limitsNote.textContent = hidden === 0 ? '' : 'Showing the newest ' + Math.min(history.length, USAGE_LIMIT_ROWS) + ' limit events; ' + hidden + ' older ' + (hidden === 1 ? 'event is' : 'events are') + ' not shown (ahub usage limits lists them).';
+  if (history.length) {
+    for (const h of history.slice(-USAGE_LIMIT_ROWS).reverse()) {
+      const tr = el('tr');
+      const timeCell = el('td', time(Date.parse(h.at)));
+      timeCell.title = h.at;
+      const typeCell = el('td', h.type.replace(/^budget_/, '').replace(/^quota_/, ''));
+      const peerCell = el('td', h.peer);
+      const winCell = el('td', h.window);
+      let detailText = '';
+      if (h.detail) {
+        if (h.detail.resetsAt) detailText += 'resets ' + rel(Number(h.detail.resetsAt)) + ' ';
+        if (h.detail.used !== undefined) detailText += Math.round(Number(h.detail.used) * 100) + '% ';
+        if (h.detail.cause) detailText += '(' + h.detail.cause + ')';
+      }
+      const detailCell = el('td', detailText.trim() || '-');
+      tr.append(timeCell, typeCell, peerCell, winCell, detailCell);
+      limitsTbody.append(tr);
+    }
+  } else {
+    const tr = el('tr');
+    const td = el('td', 'No limit events recorded yet.', 'empty');
+    td.colSpan = 5;
+    tr.append(td);
+    limitsTbody.append(tr);
+  }
+
+  const taskTbody = $('usage-task-tbody');
+  taskTbody.replaceChildren();
+  const usageTasks = usage.tasks || [];
+  const taskUsageMap = new Map(usageTasks.map(t => [t.id, t]));
+  const boardTasks = tasks || [];
+  const taskIds = new Set([...boardTasks.map(t => t.id), ...usageTasks.map(t => t.id)]);
+  const sortedIds = [...taskIds].sort((a, b) => b - a);
+  let taskCount = 0;
+  for (const id of sortedIds) {
+    if (id === 0) continue;
+    const bt = boardTasks.find(t => t.id === id);
+    const ut = taskUsageMap.get(id);
+    // A PII task's public title is exactly "[pii]" (Tasks.publicView), so the board row alone marks it even when it has no usage rows.
+    const pii = ut?.pii === true || bt?.title === '[pii]';
+    const tr = el('tr');
+    const taskCell = el('td');
+    if (pii) {
+      taskCell.append(el('span', '#' + id + ' [pii]', 'usage-tag pii'));
+    } else {
+      taskCell.textContent = '#' + id + (bt?.title ? ' ' + bt.title : '');
+    }
+    const stateCell = el('td', bt?.state ? bt.state.replaceAll('_', ' ') : '-');
+    const ownerCell = el('td', bt?.owner || '-');
+    const prNum = bt?.lifecycle?.pr || bt?.sdlc?.pr;
+    const prCell = el('td', prNum ? '#' + prNum : (bt?.refs?.branch || '-'));
+
+    const inputCell = el('td', formatCounter(ut?.input), 'num');
+    const outputCell = el('td', formatCounter(ut?.output), 'num');
+    const crCell = el('td', formatCounter(ut?.cacheRead), 'num');
+    const cwCell = el('td', formatCounter(ut?.cacheWrite), 'num');
+    // `total` is a Counter object even when nothing native was reported, so choose by its value: a tokens-only task (Jcode, older Kimi) falls back to the hub's count.
+    const totalCell = el('td', formatCounter(ut?.total?.value != null ? ut.total : ut?.counted), 'num');
+
+    tr.append(taskCell, stateCell, ownerCell, prCell, inputCell, outputCell, crCell, cwCell, totalCell);
+    taskTbody.append(tr);
+    taskCount++;
+  }
+  $('usage-task-count').textContent = taskCount + ' tasks';
+}
 function render(snapshot) {
   renderNeedsAttention(snapshot);
   const peers = Object.fromEntries(Object.entries(snapshot.status.peers || {}).map(([id, peer]) => [id, {...peer, ...(snapshot.status.roleInfo || {})[id]}])), ids = Object.keys(peers), starts = Array.isArray(snapshot.starts) ? snapshot.starts : [];
@@ -1309,6 +1693,7 @@ function render(snapshot) {
   renderBench(snapshot.bench);
   renderMemory(snapshot.memory);
   renderSettings(snapshot.settings, snapshot.roster);
+  renderUsage(snapshot.usage, snapshot.tasks, snapshot.budget);
   const stream = $('stream');
   if (!eventCount) { stream.replaceChildren(); empty(stream, 'No activity yet.'); }
   for (const entry of snapshot.events || []) {
@@ -1333,7 +1718,7 @@ async function poll() {
   const captured = context();
   if (managerMode && (!captured.projectId || !captured.instanceId)) { if (!stopped) timer = setTimeout(poll, 1000); return; }
   try {
-    const input = {after:cursor, memory:memoryInput()}; if (managerMode) { input.projectId = captured.projectId; input.instanceId = captured.instanceId; }
+    const input = {after:cursor, memory:memoryInput(), view:currentView}; if (managerMode) { input.projectId = captured.projectId; input.instanceId = captured.instanceId; }
     const result = await post('/snapshot', input);
     if (!managerMode || (result.projectId === captured.projectId && result.instanceId === captured.instanceId && captured.generation === viewGeneration)) {
       snapshotValid = true; lastSnapshot = result; lastSnapshotAt = Date.now(); render(result); setConnection('Live / updated ' + new Date().toLocaleTimeString(), 'live'); setDisconnected(false);