@yemi33/minions 0.1.2109 → 0.1.2111

package/dashboard/js/render-agents.js

@@ -32,7 +32,7 @@ function _runtimeTagHtml(runtime) {
   }
   // Unknown runtime — fall back to a small text pill so the user still sees something
   const fallback = runtime || 'unknown';
-  return '<span class="agent-runtime-tag" title="Runtime: ' + escapeHtml(fallback) + '" style="font-size:9px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:1px 5px;margin-left:6px;border:1px solid var(--muted);border-radius:3px;color:var(--muted);background:transparent">' + escapeHtml(fallback) + '</span>';
+  return '<span class="agent-runtime-tag" title="Runtime: ' + escapeHtml(fallback) + '" style="font-size:var(--text-xs);font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:1px 5px;margin-left:6px;border:1px solid var(--muted);border-radius:3px;color:var(--muted);background:transparent">' + escapeHtml(fallback) + '</span>';
 }
 
 // W-mpmwxk4y00053271 — compact text chip showing the resolved model next to
@@ -41,7 +41,7 @@ function _runtimeTagHtml(runtime) {
 // "The model is really critical piece of information to me as a user."
 function _modelChipHtml(model) {
   if (!model || typeof model !== 'string') return '';
-  return '<span class="agent-model-tag" title="Model: ' + escapeHtml(model) + '" style="font-size:9px;font-weight:600;letter-spacing:0.4px;padding:1px 5px;margin-left:4px;border:1px solid var(--muted);border-radius:3px;color:var(--muted);background:transparent">' + escapeHtml(model) + '</span>';
+  return '<span class="agent-model-tag" title="Model: ' + escapeHtml(model) + '" style="font-size:var(--text-xs);font-weight:600;letter-spacing:0.4px;padding:1px 5px;margin-left:4px;border:1px solid var(--muted);border-radius:3px;color:var(--muted);background:transparent">' + escapeHtml(model) + '</span>';
 }
 
 function renderAgents(agents) {
@@ -59,12 +59,12 @@ function renderAgents(agents) {
       <div class="agent-action" title="${escapeHtml(a.lastAction)}">${escapeHtml(a.lastAction)}</div>
       ${(function() {
         var s = a.started_at, c = a.completed_at;
-        if (s && c) { var d = new Date(c) - new Date(s); if (d > 0) { var sec = Math.floor(d/1000)%60, min = Math.floor(d/60000)%60, hr = Math.floor(d/3600000); return '<div style="font-size:9px;color:var(--muted)">Last run: ' + (hr > 0 ? hr + 'h ' : '') + min + 'm ' + sec + 's</div>'; } }
-        if (s && a.status === 'working') return '<div class="agent-runtime-tick" data-started="' + s + '" style="font-size:9px;color:var(--yellow)"></div>';
+        if (s && c) { var d = new Date(c) - new Date(s); if (d > 0) { var sec = Math.floor(d/1000)%60, min = Math.floor(d/60000)%60, hr = Math.floor(d/3600000); return '<div style="font-size:var(--text-xs);color:var(--muted)">Last run: ' + (hr > 0 ? hr + 'h ' : '') + min + 'm ' + sec + 's</div>'; } }
+        if (s && a.status === 'working') return '<div class="agent-runtime-tick" data-started="' + s + '" style="font-size:var(--text-xs);color:var(--yellow)"></div>';
         return '';
       })()}
-      ${a._blockingToolCall ? `<div style="margin-top:4px;padding:4px 8px;background:rgba(130,160,210,0.13);border:1px solid rgba(130,160,210,0.3);border-radius:4px;font-size:10px;color:var(--muted)">&#x23F3; Blocking tool call (${escapeHtml(a._blockingToolCall.tool)}) &mdash; silent ${Math.round(a._blockingToolCall.silentMs/60000)}min, timeout in ${Math.round(a._blockingToolCall.remainingMs/60000)}min</div>` : ''}
-      ${a._warning ? `<div style="margin-top:4px;padding:4px 8px;background:rgba(210,153,34,0.15);border:1px solid rgba(210,153,34,0.3);border-radius:4px;font-size:10px;color:var(--yellow)">&#x26A0; ${escapeHtml(a._warning)}</div>` : ''}
+      ${a._blockingToolCall ? `<div style="margin-top:4px;padding:4px 8px;background:rgba(130,160,210,0.13);border:1px solid rgba(130,160,210,0.3);border-radius:4px;font-size:var(--text-sm);color:var(--muted)">&#x23F3; Blocking tool call (${escapeHtml(a._blockingToolCall.tool)}) &mdash; silent ${Math.round(a._blockingToolCall.silentMs/60000)}min, timeout in ${Math.round(a._blockingToolCall.remainingMs/60000)}min</div>` : ''}
+      ${a._warning ? `<div style="margin-top:4px;padding:4px 8px;background:rgba(210,153,34,0.15);border:1px solid rgba(210,153,34,0.3);border-radius:4px;font-size:var(--text-sm);color:var(--yellow)">&#x26A0; ${escapeHtml(a._warning)}</div>` : ''}
       ${a.resultSummary ? `<div class="agent-result" title="${escapeHtml(a.resultSummary)}">${renderMd(a.resultSummary.slice(0, 200))}${a.resultSummary.length > 200 ? '...' : ''}</div>` : ''}
     </div>
   `).join('');
@@ -99,7 +99,7 @@ async function openAgentDetail(id) {
     runtimeSpan.innerHTML = runtimeMeta.svg.replace('width="13"', 'width="18"').replace('height="13"', 'height="18"');
     runtimeSpan.setAttribute('aria-label', runtimeMeta.label + ' runtime');
   } else {
-    runtimeSpan.style.cssText += ';font-size:10px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:2px 6px;border:1px solid var(--muted);border-radius:3px;color:var(--muted)';
+    runtimeSpan.style.cssText += ';font-size:var(--text-sm);font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:2px 6px;border:1px solid var(--muted);border-radius:3px;color:var(--muted)';
     runtimeSpan.textContent = agent.runtime || 'unknown';
   }
   // W-mpmwxk4y00053271 — mirror the model chip the card shows so the detail
@@ -109,7 +109,7 @@ async function openAgentDetail(id) {
     ? (() => {
         const s = document.createElement('span');
         s.title = 'Model: ' + agent.model;
-        s.style.cssText = 'display:inline-block;margin-left:6px;font-size:10px;font-weight:600;letter-spacing:0.4px;padding:2px 6px;border:1px solid var(--muted);border-radius:3px;color:var(--muted)';
+        s.style.cssText = 'display:inline-block;margin-left:6px;font-size:var(--text-sm);font-weight:600;letter-spacing:0.4px;padding:2px 6px;border:1px solid var(--muted);border-radius:3px;color:var(--muted)';
         s.textContent = agent.model;
         return s;
       })()
@@ -127,8 +127,8 @@ async function openAgentDetail(id) {
   document.getElementById('detail-status-line').innerHTML =
     '<span class="status-badge ' + badgeClass + '">' + agent.status.toUpperCase() + '</span> ' +
     '<span style="color:var(--muted)">' + escapeHtml(agent.lastAction) + '</span>' +
-    (agent._blockingToolCall ? '<div style="margin-top:4px;padding:4px 8px;background:rgba(130,160,210,0.13);border:1px solid rgba(130,160,210,0.3);border-radius:4px;font-size:11px;color:var(--muted)">&#x23F3; Blocking tool call (' + escapeHtml(agent._blockingToolCall.tool) + ') &mdash; silent ' + Math.round(agent._blockingToolCall.silentMs/60000) + 'min, timeout in ' + Math.round(agent._blockingToolCall.remainingMs/60000) + 'min</div>' : '') +
-    (agent.resultSummary ? '<div style="margin-top:4px;font-size:11px;color:var(--text);line-height:1.4">' + renderMd(agent.resultSummary.slice(0, 300)) + '</div>' : '');
+    (agent._blockingToolCall ? '<div style="margin-top:4px;padding:4px 8px;background:rgba(130,160,210,0.13);border:1px solid rgba(130,160,210,0.3);border-radius:4px;font-size:var(--text-base);color:var(--muted)">&#x23F3; Blocking tool call (' + escapeHtml(agent._blockingToolCall.tool) + ') &mdash; silent ' + Math.round(agent._blockingToolCall.silentMs/60000) + 'min, timeout in ' + Math.round(agent._blockingToolCall.remainingMs/60000) + 'min</div>' : '') +
+    (agent.resultSummary ? '<div style="margin-top:4px;font-size:var(--text-base);color:var(--text);line-height:1.4">' + renderMd(agent.resultSummary.slice(0, 300)) + '</div>' : '');
 
   // Show panel immediately with loading state — don't wait for API
   document.getElementById('detail-content').innerHTML = '<div style="padding:24px;text-align:center;color:var(--muted)">Loading...</div>';
@@ -143,8 +143,8 @@ async function openAgentDetail(id) {
     document.getElementById('detail-content').innerHTML =
       '<div style="padding:24px;text-align:center">' +
         '<div style="color:var(--red);margin-bottom:12px">Error loading agent detail: ' + escapeHtml(e.message) + '</div>' +
-        '<button data-agent-id="' + escapeHtml(id) + '" onclick="openAgentDetail(this.dataset.agentId)" style="padding:6px 16px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:12px">Retry</button>' +
-        ' <button onclick="closeDetail()" style="padding:6px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:12px;color:var(--text)">Close</button>' +
+        '<button data-agent-id="' + escapeHtml(id) + '" onclick="openAgentDetail(this.dataset.agentId)" style="padding:6px 16px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-md)">Retry</button>' +
+        ' <button onclick="closeDetail()" style="padding:6px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-md);color:var(--text)">Close</button>' +
       '</div>';
   }
 

package/dashboard/js/render-dispatch.js

@@ -272,21 +272,21 @@ function renderDispatch(dispatch, opts) {
   const activeEl = document.getElementById('dispatch-active');
   if ((dispatch.active || []).length > 0) {
     // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: dispatch type, agent, task)
-    activeEl.innerHTML = '<div style="font-size:11px;color:var(--green);margin-bottom:6px;font-weight:600">ACTIVE</div><div class="dispatch-list">' +
+    activeEl.innerHTML = '<div style="font-size:var(--text-base);color:var(--green);margin-bottom:6px;font-weight:600">ACTIVE</div><div class="dispatch-list">' +
       dispatch.active.map(d => dispatchItemHtml(d,
         '<span class="dispatch-time">' + shortTime(d.started_at) + '</span>'
       )).join('') + '</div>';
   } else {
-    activeEl.innerHTML = '<div style="color:var(--muted);font-size:11px;margin-bottom:8px">No active dispatches</div>';
+    activeEl.innerHTML = '<div style="color:var(--muted);font-size:var(--text-base);margin-bottom:8px">No active dispatches</div>';
   }
 
   // Pending
   const pendingEl = document.getElementById('dispatch-pending');
   if ((dispatch.pending || []).length > 0) {
     // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: dispatch type, agent, task, skip reason)
-    pendingEl.innerHTML = '<div style="font-size:11px;color:var(--yellow);margin:8px 0 6px;font-weight:600">PENDING</div><div class="dispatch-list">' +
+    pendingEl.innerHTML = '<div style="font-size:var(--text-base);color:var(--yellow);margin:8px 0 6px;font-weight:600">PENDING</div><div class="dispatch-list">' +
       dispatch.pending.map(d => dispatchItemHtml(d,
-        d.skipReason ? '<span style="font-size:9px;color:var(--muted);margin-left:6px" title="' + escHtml(d.skipReason) + '">' + escHtml(d.skipReason.replace(/_/g, ' ')) + '</span>' : ''
+        d.skipReason ? '<span style="font-size:var(--text-xs);color:var(--muted);margin-left:6px" title="' + escHtml(d.skipReason) + '">' + escHtml(d.skipReason.replace(/_/g, ' ')) + '</span>' : ''
       )).join('') + '</div>';
   } else {
     pendingEl.innerHTML = '';
@@ -317,7 +317,7 @@ function renderDispatch(dispatch, opts) {
           ? ' <button class="error-details-btn" data-agent="' + escHtml(agentId) + '" data-reason="' + escHtml(d.reason || 'No reason recorded') + '" data-task="' + escHtml((d.task || '').slice(0, 100)) + '" onclick="showErrorDetails(this.dataset.agent, this.dataset.reason, this.dataset.task)" title="View error details">details</button>'
           : '';
         return '<tr>' +
-          '<td style="font-family:Consolas;font-size:10px" title="' + escHtml(d.id || '') + '">' + escHtml(d.id || '') + '</td>' +
+          '<td style="font-family:Consolas;font-size:var(--text-sm)" title="' + escHtml(d.id || '') + '">' + escHtml(d.id || '') + '</td>' +
           '<td><span class="dispatch-type ' + (d.type || '') + '">' + escHtml(d.type || '') + '</span></td>' +
           '<td>' + escHtml(d.agentName || d.agent || '') + '</td>' +
           '<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + escHtml((d.task || '').slice(0, 60)) + '</td>' +
@@ -452,7 +452,7 @@ function renderVersionBanner(version) {
 
   const v = version.dashboardRunning || version.running || version.disk || '?';
   const commitLabel = version.dashboardRunningCommit ? ' (' + version.dashboardRunningCommit + ')' : '';
-  const warnStyle = 'font-size:9px;padding:2px 8px;background:rgba(210,153,34,0.15);border:1px solid rgba(210,153,34,0.3);border-radius:4px;color:var(--yellow);cursor:help';
+  const warnStyle = 'font-size:var(--text-xs);padding:2px 8px;background:rgba(210,153,34,0.15);border:1px solid rgba(210,153,34,0.3);border-radius:4px;color:var(--yellow);cursor:help';
 
   // During the post-restart grace window the old engine's reported codeVersion
   // can still be in the cached payload — silently swallow the engineStale flag
@@ -474,11 +474,11 @@ function renderVersionBanner(version) {
     el.textContent = '\u26A0 Dashboard running v' + (version.dashboardRunning || '?') + ' — disk has v' + (version.disk || '?') + '. Run: minions restart';
     el.title = 'The dashboard process is running older code. Run: minions restart';
   } else if (version.updateAvailable) {
-    el.style.cssText = 'font-size:9px;padding:2px 8px;background:rgba(63,185,80,0.1);border:1px solid rgba(63,185,80,0.3);border-radius:4px;color:var(--green);cursor:help';
+    el.style.cssText = 'font-size:var(--text-xs);padding:2px 8px;background:rgba(63,185,80,0.1);border:1px solid rgba(63,185,80,0.3);border-radius:4px;color:var(--green);cursor:help';
     el.textContent = 'v' + v + commitLabel + ' — v' + version.latest + ' available. Run: minions update or npm install -g @yemi33/minions@latest';
     el.title = 'A newer version is available on npm. Run minions update to upgrade and restart.';
   } else {
-    el.style.cssText = 'font-size:9px;color:var(--muted)';
+    el.style.cssText = 'font-size:var(--text-xs);color:var(--muted)';
     el.textContent = 'v' + v + commitLabel;
     el.title = 'Minions v' + v + (version.latest ? ' (latest)' : '');
   }

package/dashboard/js/render-inbox.js

@@ -111,9 +111,9 @@ function renderInbox(inbox, opts) {
       <div class="inbox-preview" onclick="openModal(${idx})" style="cursor:pointer">${escapeHtml(item.content.slice(0,200))}</div>
       <div style="display:flex;gap:6px;margin-top:6px;align-items:center">
         ${pinButton(pk, pinned, 'inbox')}
-        <button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" data-inbox-name="${escapeHtml(item.name)}" onclick="event.stopPropagation();promoteToKB(this.dataset.inboxName)">Add to Knowledge Base</button>
-        <button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" data-inbox-name="${escapeHtml(item.name)}" onclick="event.stopPropagation();openInboxInExplorer(this.dataset.inboxName)">Open in Explorer</button>
-        <button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;color:var(--red)" data-inbox-name="${escapeHtml(item.name)}" onclick="event.stopPropagation();deleteInboxItem(this.dataset.inboxName)">Delete</button>
+        <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px" data-inbox-name="${escapeHtml(item.name)}" onclick="event.stopPropagation();promoteToKB(this.dataset.inboxName)">Add to Knowledge Base</button>
+        <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px" data-inbox-name="${escapeHtml(item.name)}" onclick="event.stopPropagation();openInboxInExplorer(this.dataset.inboxName)">Open in Explorer</button>
+        <button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;color:var(--red)" data-inbox-name="${escapeHtml(item.name)}" onclick="event.stopPropagation();deleteInboxItem(this.dataset.inboxName)">Delete</button>
       </div>
     </div>`;
   }).join('');
@@ -137,10 +137,10 @@ function promoteToKB(name) {
     { id: 'reviews', label: 'Reviews' },
   ];
   const picker = '<div style="padding:16px 20px">' +
-    '<p style="font-size:13px;color:var(--text);margin-bottom:12px">Choose a category for <strong>' + escapeHtml(name) + '</strong>:</p>' +
+    '<p style="font-size:var(--text-lg);color:var(--text);margin-bottom:12px">Choose a category for <strong>' + escapeHtml(name) + '</strong>:</p>' +
     '<div style="display:flex;flex-direction:column;gap:8px">' +
     categories.map(c =>
-      '<button class="pr-pager-btn" style="font-size:12px;padding:8px 16px;text-align:left" onclick="doPromoteToKB(\'' + escapeHtml(name) + '\',\'' + c.id + '\')">' + c.label + '</button>'
+      '<button class="pr-pager-btn" style="font-size:var(--text-md);padding:8px 16px;text-align:left" onclick="doPromoteToKB(\'' + escapeHtml(name) + '\',\'' + c.id + '\')">' + c.label + '</button>'
     ).join('') +
     '</div></div>';
   document.getElementById('modal-title').textContent = 'Add to Knowledge Base';

package/dashboard/js/render-managed.js

@@ -87,22 +87,22 @@ function _renderManagedTable(items) {
     const ttlColor = (s.ttl_expires_at && s.ttl_expires_at - Date.now() < 5 * 60 * 1000) ? 'var(--yellow)' : 'var(--muted)';
     const nameAttr = encodeURIComponent(s.name || '');
     return '<tr>' +
-      '<td style="padding:4px 8px;font-family:monospace;font-size:11px">' + escHtml(s.name || '') + '</td>' +
-      '<td style="padding:4px 8px;font-family:monospace;font-size:11px">' + (s.pid || '') + '</td>' +
-      '<td style="padding:4px 8px;font-size:11px">' + healthBadge + '</td>' +
-      '<td style="padding:4px 8px;font-size:11px;font-family:monospace">' + escHtml(ports) + '</td>' +
-      '<td style="padding:4px 8px;font-size:10px;color:var(--muted);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escHtml(_fmtAttrs(s.attrs).replace(/<[^>]+>/g, '')) + '">' + _fmtAttrs(s.attrs) + '</td>' +
-      '<td style="padding:4px 8px;font-size:11px;color:var(--muted)">' + escHtml(uptime) + '</td>' +
-      '<td style="padding:4px 8px;font-size:11px;color:' + ttlColor + '">' + escHtml(ttl) + '</td>' +
+      '<td style="padding:4px 8px;font-family:monospace;font-size:var(--text-base)">' + escHtml(s.name || '') + '</td>' +
+      '<td style="padding:4px 8px;font-family:monospace;font-size:var(--text-base)">' + (s.pid || '') + '</td>' +
+      '<td style="padding:4px 8px;font-size:var(--text-base)">' + healthBadge + '</td>' +
+      '<td style="padding:4px 8px;font-size:var(--text-base);font-family:monospace">' + escHtml(ports) + '</td>' +
+      '<td style="padding:4px 8px;font-size:var(--text-sm);color:var(--muted);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escHtml(_fmtAttrs(s.attrs).replace(/<[^>]+>/g, '')) + '">' + _fmtAttrs(s.attrs) + '</td>' +
+      '<td style="padding:4px 8px;font-size:var(--text-base);color:var(--muted)">' + escHtml(uptime) + '</td>' +
+      '<td style="padding:4px 8px;font-size:var(--text-base);color:' + ttlColor + '">' + escHtml(ttl) + '</td>' +
       '<td style="padding:4px 8px;text-align:right;white-space:nowrap">' +
-        '<button onclick="openManagedLog(decodeURIComponent(\'' + nameAttr + '\'))" style="font-size:10px;padding:2px 6px;margin-right:4px;border:1px solid var(--border);background:var(--surface);color:var(--fg);border-radius:3px;cursor:pointer">Log</button>' +
-        '<button onclick="restartManagedSpec(decodeURIComponent(\'' + nameAttr + '\'))" style="font-size:10px;padding:2px 6px;margin-right:4px;border:1px solid var(--blue);background:transparent;color:var(--blue);border-radius:3px;cursor:pointer">Restart</button>' +
-        '<button onclick="killManagedSpec(decodeURIComponent(\'' + nameAttr + '\'))" style="font-size:10px;padding:2px 6px;border:1px solid var(--red);background:transparent;color:var(--red);border-radius:3px;cursor:pointer">Kill</button>' +
+        '<button onclick="openManagedLog(decodeURIComponent(\'' + nameAttr + '\'))" style="font-size:var(--text-sm);padding:2px 6px;margin-right:4px;border:1px solid var(--border);background:var(--surface);color:var(--fg);border-radius:3px;cursor:pointer">Log</button>' +
+        '<button onclick="restartManagedSpec(decodeURIComponent(\'' + nameAttr + '\'))" style="font-size:var(--text-sm);padding:2px 6px;margin-right:4px;border:1px solid var(--blue);background:transparent;color:var(--blue);border-radius:3px;cursor:pointer">Restart</button>' +
+        '<button onclick="killManagedSpec(decodeURIComponent(\'' + nameAttr + '\'))" style="font-size:var(--text-sm);padding:2px 6px;border:1px solid var(--red);background:transparent;color:var(--red);border-radius:3px;cursor:pointer">Kill</button>' +
       '</td>' +
       '</tr>';
   }).join('');
   return '<table style="width:100%;border-collapse:collapse;margin-bottom:8px">' +
-    '<thead><tr style="text-align:left;font-size:10px;color:var(--muted);text-transform:uppercase">' +
+    '<thead><tr style="text-align:left;font-size:var(--text-sm);color:var(--muted);text-transform:uppercase">' +
       '<th style="padding:4px 8px">name</th>' +
       '<th style="padding:4px 8px">pid</th>' +
       '<th style="padding:4px 8px">health</th>' +
@@ -165,7 +165,7 @@ async function renderManagedProcesses() {
       const group = groups[proj];
       group.sort(function (a, b) { return (a.name || '').localeCompare(b.name || ''); });
       return '<div style="border:1px solid var(--border);border-radius:4px;padding:8px;margin-bottom:8px;background:var(--surface2)">' +
-        '<div style="font-weight:600;font-size:11px;margin-bottom:6px">' + escHtml(proj) +
+        '<div style="font-weight:600;font-size:var(--text-base);margin-bottom:6px">' + escHtml(proj) +
           ' <span style="color:var(--muted);font-weight:400">(' + group.length + ')</span>' +
         '</div>' +
         _renderManagedTable(group) +
@@ -235,11 +235,11 @@ function _ensureManagedLogModal() {
   const tpl = '' +
     '<div style="background:var(--bg);border:1px solid var(--border);border-radius:6px;width:100%;max-width:1100px;height:80vh;display:flex;flex-direction:column">' +
       '<div style="display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border)">' +
-        '<div id="managed-log-title" style="flex:1;font-weight:600;font-size:12px;font-family:monospace">Managed log</div>' +
-        '<div id="managed-log-status" style="font-size:10px;color:var(--muted);margin-right:12px">connecting...</div>' +
-        '<button id="managed-log-close-btn" style="font-size:10px;padding:4px 10px;border:1px solid var(--border);background:transparent;color:var(--fg);border-radius:3px;cursor:pointer">Close</button>' +
+        '<div id="managed-log-title" style="flex:1;font-weight:600;font-size:var(--text-md);font-family:monospace">Managed log</div>' +
+        '<div id="managed-log-status" style="font-size:var(--text-sm);color:var(--muted);margin-right:12px">connecting...</div>' +
+        '<button id="managed-log-close-btn" style="font-size:var(--text-sm);padding:4px 10px;border:1px solid var(--border);background:transparent;color:var(--fg);border-radius:3px;cursor:pointer">Close</button>' +
       '</div>' +
-      '<pre id="managed-log-body" style="flex:1;overflow:auto;margin:0;padding:8px 12px;font-family:monospace;font-size:11px;white-space:pre-wrap;word-break:break-all;background:var(--surface2)"></pre>' +
+      '<pre id="managed-log-body" style="flex:1;overflow:auto;margin:0;padding:8px 12px;font-family:monospace;font-size:var(--text-base);white-space:pre-wrap;word-break:break-all;background:var(--surface2)"></pre>' +
     '</div>';
   const frag = document.createRange().createContextualFragment(tpl);
   overlay.appendChild(frag);

package/dashboard/js/render-meetings.js

@@ -89,7 +89,7 @@ function renderMeetings(meetings, opts) {
   if (visible.length === 0) {
     el.innerHTML = '<p class="empty">No active meetings.</p>';
     // eslint-disable-next-line no-unsanitized/method -- reason: composed from internal archived count and fixed toggle markup (no user data flows in)
-    if (archived.length) el.insertAdjacentHTML('beforeend', '<div style="text-align:center;margin-top:8px"><button class="pr-pager-btn" style="font-size:10px" onclick="_toggleArchivedMeetings()">Show ' + archived.length + ' archived</button></div>');
+    if (archived.length) el.insertAdjacentHTML('beforeend', '<div style="text-align:center;margin-top:8px"><button class="pr-pager-btn" style="font-size:var(--text-sm)" onclick="_toggleArchivedMeetings()">Show ' + archived.length + ' archived</button></div>');
     _mtgTotalPages = 1;
     restoreDashboardScrollState(el, scrollState);
     return;
@@ -109,7 +109,7 @@ function renderMeetings(meetings, opts) {
       const hasFindings = m.findings?.[p];
       const hasDebate = m.debate?.[p];
       const icon = m.status === 'completed' ? '✓' : m.status === 'debating' ? (hasDebate ? '✓' : (hasFindings ? '⏳' : '○')) : (hasFindings ? '✓' : '⏳');
-      return '<span style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-size:10px">' + icon + ' ' + escHtml(p) + '</span>';
+      return '<span style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-size:var(--text-sm)">' + icon + ' ' + escHtml(p) + '</span>';
     }).join(' ');
 
     const dt = m.completedAt || m.createdAt;
@@ -117,18 +117,18 @@ function renderMeetings(meetings, opts) {
 
     return '<div data-file="meetings/' + escHtml(m.id) + '.json" style="background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin-bottom:8px;cursor:pointer;position:relative" onclick="if(shouldIgnoreSelectionClick(event))return;openMeetingDetail(\'' + escHtml(m.id) + '\')">' +
       '<div style="display:flex;justify-content:space-between;align-items:center">' +
-        '<strong style="font-size:13px">' + escHtml(m.title) + '</strong>' +
+        '<strong style="font-size:var(--text-lg)">' + escHtml(m.title) + '</strong>' +
         '<div style="display:flex;align-items:center;gap:8px">' +
-          '<span style="color:' + statusColor + ';font-size:11px;font-weight:600">' + statusLabel + '</span>' +
+          '<span style="color:' + statusColor + ';font-size:var(--text-base);font-weight:600">' + statusLabel + '</span>' +
           (m.status === 'archived'
-            ? '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px" onclick="event.stopPropagation();_unarchiveMeeting(\'' + escHtml(m.id) + '\')">Unarchive</button>'
-            : (m.status === 'completed' ? '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px" onclick="event.stopPropagation();_archiveMeeting(\'' + escHtml(m.id) + '\')">Archive</button>' : '')) +
-          '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--red);border-color:var(--red)" onclick="event.stopPropagation();_deleteMeeting(\'' + escHtml(m.id) + '\')">Delete</button>' +
+            ? '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px" onclick="event.stopPropagation();_unarchiveMeeting(\'' + escHtml(m.id) + '\')">Unarchive</button>'
+            : (m.status === 'completed' ? '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px" onclick="event.stopPropagation();_archiveMeeting(\'' + escHtml(m.id) + '\')">Archive</button>' : '')) +
+          '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--red);border-color:var(--red)" onclick="event.stopPropagation();_deleteMeeting(\'' + escHtml(m.id) + '\')">Delete</button>' +
         '</div>' +
       '</div>' +
-      (timeStr ? '<div style="margin-top:4px;font-size:10px;color:var(--muted)">' + escHtml(timeStr) + '</div>' : '') +
+      (timeStr ? '<div style="margin-top:4px;font-size:var(--text-sm);color:var(--muted)">' + escHtml(timeStr) + '</div>' : '') +
       '<div style="margin-top:6px;display:flex;gap:6px;flex-wrap:wrap">' + participantBadges + '</div>' +
-      '<div style="margin-top:6px;font-size:11px;color:var(--muted)">' + escHtml((m.agenda || '').slice(0, 100)) + (m.agenda?.length > 100 ? '...' : '') + '</div>' +
+      '<div style="margin-top:6px;font-size:var(--text-base);color:var(--muted)">' + escHtml((m.agenda || '').slice(0, 100)) + (m.agenda?.length > 100 ? '...' : '') + '</div>' +
     '</div>';
   }).join('');
 
@@ -144,7 +144,7 @@ function renderMeetings(meetings, opts) {
 
   if (archived.length > 0) {
     // eslint-disable-next-line no-unsanitized/method -- reason: composed from internal archived count and fixed toggle label (no user data flows in)
-    el.insertAdjacentHTML('beforeend', '<div style="text-align:center;margin-top:8px"><button class="pr-pager-btn" style="font-size:10px" onclick="_toggleArchivedMeetings()">' +
+    el.insertAdjacentHTML('beforeend', '<div style="text-align:center;margin-top:8px"><button class="pr-pager-btn" style="font-size:var(--text-sm)" onclick="_toggleArchivedMeetings()">' +
       (_showArchived ? 'Hide' : 'Show') + ' ' + archived.length + ' archived</button></div>');
   }
   restoreDashboardScrollState(el, scrollState);
@@ -193,35 +193,35 @@ function _renderMeetingDetail(m) {
       // Status bar
       html += '<div style="display:flex;justify-content:space-between;align-items:center">' +
         '<span style="color:' + (statusColors[m.status] || 'var(--muted)') + ';font-weight:600">' + (statusLabels[m.status] || m.status) + '</span>' +
-        '<span style="font-size:10px;color:var(--muted)">' + escHtml(m.createdAt?.slice(0, 16).replace('T', ' ') || '') + '</span>' +
+        '<span style="font-size:var(--text-sm);color:var(--muted)">' + escHtml(m.createdAt?.slice(0, 16).replace('T', ' ') || '') + '</span>' +
       '</div>';
 
       // Agenda — render markdown-like formatting
-      html += '<div style="background:var(--surface2);padding:8px 12px;border-radius:6px;font-size:12px;white-space:pre-wrap;line-height:1.6">' +
+      html += '<div style="background:var(--surface2);padding:8px 12px;border-radius:6px;font-size:var(--text-md);white-space:pre-wrap;line-height:1.6">' +
         '<strong>Agenda:</strong>\n' + renderMd(m.agenda || '') + '</div>';
 
       // Per-agent panels
       for (const agent of (m.participants || [])) {
         html += '<div style="border:1px solid var(--border);border-radius:6px;overflow:hidden">';
-        html += '<div style="background:var(--surface2);padding:6px 12px;font-weight:600;font-size:12px">' + escHtml(agent) + '</div>';
+        html += '<div style="background:var(--surface2);padding:6px 12px;font-weight:600;font-size:var(--text-md)">' + escHtml(agent) + '</div>';
 
         // Findings
         if (m.findings?.[agent]) {
-          html += '<div style="padding:8px 12px;font-size:11px;border-bottom:1px solid var(--border)">' +
-            '<div style="color:var(--muted);font-size:10px;margin-bottom:4px">Round 1 — Findings</div>' +
+          html += '<div style="padding:8px 12px;font-size:var(--text-base);border-bottom:1px solid var(--border)">' +
+            '<div style="color:var(--muted);font-size:var(--text-sm);margin-bottom:4px">Round 1 — Findings</div>' +
             '<div class="meeting-scroll-panel" style="word-break:break-word;max-height:300px;overflow-y:auto">' + renderMd(m.findings[agent].content || '') + '</div></div>';
         }
 
         // Debate
         if (m.debate?.[agent]) {
-          html += '<div style="padding:8px 12px;font-size:11px;border-bottom:1px solid var(--border)">' +
-            '<div style="color:var(--muted);font-size:10px;margin-bottom:4px">Round 2 — Debate</div>' +
+          html += '<div style="padding:8px 12px;font-size:var(--text-base);border-bottom:1px solid var(--border)">' +
+            '<div style="color:var(--muted);font-size:var(--text-sm);margin-bottom:4px">Round 2 — Debate</div>' +
             '<div class="meeting-scroll-panel" style="word-break:break-word;max-height:300px;overflow-y:auto">' + renderMd(m.debate[agent].content || '') + '</div></div>';
         }
 
         // Status
         if (!m.findings?.[agent] && m.status !== 'completed') {
-          html += '<div style="padding:6px 12px;font-size:10px;color:var(--muted)">⏳ Waiting...</div>';
+          html += '<div style="padding:6px 12px;font-size:var(--text-sm);color:var(--muted)">⏳ Waiting...</div>';
         }
 
         html += '</div>';
@@ -230,45 +230,45 @@ function _renderMeetingDetail(m) {
       // Conclusion
       if (m.conclusion) {
         html += '<div style="background:rgba(63,185,80,0.08);border:1px solid var(--green);border-radius:6px;padding:10px 14px">' +
-          '<div style="color:var(--green);font-weight:600;font-size:12px;margin-bottom:6px">Conclusion (by ' + escHtml(m.conclusion.agent || '?') + ')</div>' +
-          '<div class="meeting-scroll-panel" style="font-size:12px;word-break:break-word;max-height:400px;overflow-y:auto">' + renderMd(m.conclusion.content || '') + '</div></div>';
+          '<div style="color:var(--green);font-weight:600;font-size:var(--text-md);margin-bottom:6px">Conclusion (by ' + escHtml(m.conclusion.agent || '?') + ')</div>' +
+          '<div class="meeting-scroll-panel" style="font-size:var(--text-md);word-break:break-word;max-height:400px;overflow-y:auto">' + renderMd(m.conclusion.content || '') + '</div></div>';
       }
 
       // Human notes
       if (m.humanNotes?.length > 0) {
         html += '<div style="border-top:1px solid var(--border);padding-top:8px">' +
-          '<div style="color:var(--muted);font-size:10px;margin-bottom:4px">Human Notes</div>' +
-          m.humanNotes.map(n => '<div style="font-size:11px;margin-bottom:2px">• ' + escHtml(n) + '</div>').join('') +
+          '<div style="color:var(--muted);font-size:var(--text-sm);margin-bottom:4px">Human Notes</div>' +
+          m.humanNotes.map(n => '<div style="font-size:var(--text-base);margin-bottom:2px">• ' + escHtml(n) + '</div>').join('') +
         '</div>';
       }
 
       // Actions
       if (m.status === 'archived') {
         html += '<div style="display:flex;gap:8px;border-top:1px solid var(--border);padding-top:8px">' +
-          '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" onclick="_unarchiveMeeting(\'' + escHtml(m.id) + '\')">Unarchive</button>' +
-          '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;color:var(--red);border-color:var(--red)" onclick="_deleteMeeting(\'' + escHtml(m.id) + '\')">Delete</button>' +
+          '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px" onclick="_unarchiveMeeting(\'' + escHtml(m.id) + '\')">Unarchive</button>' +
+          '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;color:var(--red);border-color:var(--red)" onclick="_deleteMeeting(\'' + escHtml(m.id) + '\')">Delete</button>' +
         '</div>';
       } else if (m.status === 'completed') {
         const linkedPlan = _findLinkedPlan(m);
         html += '<div style="display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:8px">' +
           (linkedPlan
-            ? '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;color:var(--blue);border-color:var(--blue)" onclick="_viewPlanWithBack(\'' + escHtml(linkedPlan.file) + '\',\'' + escHtml(m.id) + '\')">View Plan</button>' +
-              '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;color:var(--green);border-color:var(--green)" onclick="_createPlanFromMeeting(\'' + escHtml(m.id) + '\',this)">New Plan</button>'
-            : '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;color:var(--green);border-color:var(--green)" onclick="_createPlanFromMeeting(\'' + escHtml(m.id) + '\',this)">Create Plan from Meeting</button>') +
-          '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" onclick="_archiveMeeting(\'' + escHtml(m.id) + '\')">Archive</button>' +
-          '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;color:var(--red);border-color:var(--red)" onclick="_deleteMeeting(\'' + escHtml(m.id) + '\')">Delete</button>' +
+            ? '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;color:var(--blue);border-color:var(--blue)" onclick="_viewPlanWithBack(\'' + escHtml(linkedPlan.file) + '\',\'' + escHtml(m.id) + '\')">View Plan</button>' +
+              '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;color:var(--green);border-color:var(--green)" onclick="_createPlanFromMeeting(\'' + escHtml(m.id) + '\',this)">New Plan</button>'
+            : '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;color:var(--green);border-color:var(--green)" onclick="_createPlanFromMeeting(\'' + escHtml(m.id) + '\',this)">Create Plan from Meeting</button>') +
+          '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px" onclick="_archiveMeeting(\'' + escHtml(m.id) + '\')">Archive</button>' +
+          '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;color:var(--red);border-color:var(--red)" onclick="_deleteMeeting(\'' + escHtml(m.id) + '\')">Delete</button>' +
         '</div>' +
         '<div id="meeting-plan-toast" class="cmd-toast cmd-toast-inline" style="margin-top:6px"></div>' +
-        '<div style="font-size:9px;color:var(--muted);margin-top:4px">Use the Q&amp;A below to discuss action items' + (linkedPlan ? '' : ', then create a plan to execute them') + '.</div>';
+        '<div style="font-size:var(--text-xs);color:var(--muted);margin-top:4px">Use the Q&amp;A below to discuss action items' + (linkedPlan ? '' : ', then create a plan to execute them') + '.</div>';
       } else {
         html += '<div style="display:flex;gap:8px;border-top:1px solid var(--border);padding-top:8px">' +
-          '<input id="meeting-note-input" type="text" placeholder="Add context for all agents..." style="flex:1;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:12px" onkeydown="if(event.key===\'Enter\')_submitMeetingNote(\'' + escHtml(m.id) + '\')">' +
-          '<button onclick="_submitMeetingNote(\'' + escHtml(m.id) + '\',this)" style="padding:6px 12px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:11px">Add Note</button>' +
+          '<input id="meeting-note-input" type="text" placeholder="Add context for all agents..." style="flex:1;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-md)" onkeydown="if(event.key===\'Enter\')_submitMeetingNote(\'' + escHtml(m.id) + '\')">' +
+          '<button onclick="_submitMeetingNote(\'' + escHtml(m.id) + '\',this)" style="padding:6px 12px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-base)">Add Note</button>' +
         '</div>' +
         '<div style="display:flex;gap:8px;margin-top:4px">' +
-          '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;color:var(--yellow);border-color:var(--yellow)" onclick="_advanceMeeting(\'' + escHtml(m.id) + '\',this)">Skip to Next Round</button>' +
-          '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;color:var(--red);border-color:var(--red)" onclick="_endMeeting(\'' + escHtml(m.id) + '\',this)">End Meeting</button>' +
-          '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;color:var(--red);border-color:var(--red)" onclick="_deleteMeeting(\'' + escHtml(m.id) + '\')">Delete</button>' +
+          '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;color:var(--yellow);border-color:var(--yellow)" onclick="_advanceMeeting(\'' + escHtml(m.id) + '\',this)">Skip to Next Round</button>' +
+          '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;color:var(--red);border-color:var(--red)" onclick="_endMeeting(\'' + escHtml(m.id) + '\',this)">End Meeting</button>' +
+          '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;color:var(--red);border-color:var(--red)" onclick="_deleteMeeting(\'' + escHtml(m.id) + '\')">Delete</button>' +
         '</div>';
       }
 
@@ -465,7 +465,7 @@ function _viewPlanWithBack(file, meetingId) {
     if (title && !title.querySelector('.mtg-back-btn')) {
       const back = document.createElement('button');
       back.className = 'pr-pager-btn mtg-back-btn';
-      back.style.cssText = 'font-size:9px;padding:2px 8px;margin-right:8px;vertical-align:middle';
+      back.style.cssText = 'font-size:var(--text-xs);padding:2px 8px;margin-right:8px;vertical-align:middle';
       back.textContent = '\u2190 Back to Meeting';
       back.onclick = function() { openMeetingDetail(meetingId); };
       title.prepend(back);

package/dashboard/js/render-other.js

@@ -6,7 +6,7 @@ function renderProjects(projects) {
   if (!visible.length) {
     list.innerHTML = '<span style="color:var(--muted);font-style:italic">No projects linked.</span>' +
       '<span onclick="addProject()" style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:3px 10px;color:var(--green);font-weight:500;cursor:pointer;border-style:dashed;margin-left:8px">+ Add Project</span>' +
-      '<span onclick="openScanProjectsModal()" style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:3px 10px;color:var(--blue);font-weight:500;cursor:pointer;border-style:dashed;font-size:10px">Scan</span>';
+      '<span onclick="openScanProjectsModal()" style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:3px 10px;color:var(--blue);font-weight:500;cursor:pointer;border-style:dashed;font-size:var(--text-sm)">Scan</span>';
     return;
   }
   // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: project name, path, branch metadata)
@@ -18,7 +18,7 @@ function renderProjects(projects) {
     '</span>'
   ).join('') +
   '<span onclick="addProject()" style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:3px 10px;color:var(--muted);font-weight:500;cursor:pointer;border-style:dashed">+ Add</span>' +
-  '<span onclick="openScanProjectsModal()" style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:3px 10px;color:var(--blue);font-weight:500;cursor:pointer;border-style:dashed;font-size:10px">Scan</span>';
+  '<span onclick="openScanProjectsModal()" style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:3px 10px;color:var(--blue);font-weight:500;cursor:pointer;border-style:dashed;font-size:var(--text-sm)">Scan</span>';
 
 }
 
@@ -141,13 +141,13 @@ function renderMcpServers(servers) {
   // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: server source, status, args, command, name)
   el.innerHTML = '<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px">' +
     servers.map(s =>
-      '<div style="font-size:11px;padding:5px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text)" title="' + escHtml([s.source, s.status, s.args || s.command].filter(Boolean).join(' · ')) + '">' +
+      '<div style="font-size:var(--text-base);padding:5px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text)" title="' + escHtml([s.source, s.status, s.args || s.command].filter(Boolean).join(' · ')) + '">' +
         escHtml(s.name) +
         (s.source ? ' <span style="color:var(--muted)">(' + escHtml(s.source) + ')</span>' : '') +
       '</div>'
     ).join('') +
   '</div>' +
-  '<p style="font-size:10px;color:var(--muted);margin:0">Mirrors <code style="color:var(--blue)">claude mcp list</code> + <code style="color:var(--blue)">copilot mcp list --json</code>, plus workspace <code>.mcp.json</code> from each registered project. Cached ~5 min.</p>';
+  '<p style="font-size:var(--text-sm);color:var(--muted);margin:0">Mirrors <code style="color:var(--blue)">claude mcp list</code> + <code style="color:var(--blue)">copilot mcp list --json</code>, plus workspace <code>.mcp.json</code> from each registered project. Cached ~5 min.</p>';
 }
 
 function renderMetrics(metrics) {
@@ -247,7 +247,7 @@ function renderLlmPerf(metrics) {
   if (perTask.length > 0) {
     // Visual divider + caption row to distinguish per-call (above) from
     // per-task (below) — column units differ.
-    html += '<tr><td colspan="5" style="border-top:2px solid var(--border);padding-top:6px;font-size:10px;color:var(--muted);font-style:italic">— per agent task (calls = dispatched work items, time = wall-clock of agent process) —</td></tr>';
+    html += '<tr><td colspan="5" style="border-top:2px solid var(--border);padding-top:6px;font-size:var(--text-sm);color:var(--muted);font-style:italic">— per agent task (calls = dispatched work items, time = wall-clock of agent process) —</td></tr>';
     for (const [type, m] of perTask) {
       html += renderRow(type + ' (per task)', m);
     }
@@ -330,7 +330,7 @@ function renderTokenUsage(metrics) {
   const days = Object.keys(daily).sort().slice(-14);
   if (days.length > 1) {
     const maxCost = Math.max(...days.map(d => daily[d].costUsd || 0), 0.01);
-    html += '<div style="font-size:10px;color:var(--muted);margin:8px 0 4px">Daily Cost (last ' + days.length + ' days)</div>';
+    html += '<div style="font-size:var(--text-sm);color:var(--muted);margin:8px 0 4px">Daily Cost (last ' + days.length + ' days)</div>';
     html += '<div class="token-chart">';
     for (const day of days) {
       const d = daily[day];
@@ -365,7 +365,7 @@ function renderTokenUsage(metrics) {
   }
   var agentsWithUsage = tokenRows.filter(function(a) { return (a[1].totalCostUsd || 0) > 0; });
   if (agentsWithUsage.length > 0) {
-    html += '<div style="font-size:10px;color:var(--muted);margin:12px 0 4px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Agent Usage</div>';
+    html += '<div style="font-size:var(--text-sm);color:var(--muted);margin:12px 0 4px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Agent Usage</div>';
     html += '<table class="token-agent-table"><thead><tr><th style="width:20%">Agent</th><th style="width:10%">Model</th><th style="width:14%">Cost</th><th style="width:14%">Input</th><th style="width:14%">Output</th><th style="width:14%">Cache</th><th style="width:14%">$/task</th></tr></thead><tbody>';
     for (const [id, m] of agentsWithUsage.sort((a, b) => (b[1].totalCostUsd || 0) - (a[1].totalCostUsd || 0))) {
       const tasks = (m.tasksCompleted || 0) + (m.tasksErrored || 0);
@@ -373,7 +373,7 @@ function renderTokenUsage(metrics) {
       const modelLabel = (m.model || '').replace(/^claude-/, '').replace(/\[.*\]$/, '') || '-';
       html += '<tr>' +
         '<td style="font-weight:600">' + escHtml(id) + '</td>' +
-        '<td style="color:var(--muted);font-size:10px">' + escHtml(modelLabel) + '</td>' +
+        '<td style="color:var(--muted);font-size:var(--text-sm)">' + escHtml(modelLabel) + '</td>' +
         '<td>' + fmtCost(m.totalCostUsd || 0) + '</td>' +
         '<td>' + fmtTokens(m.totalInputTokens || 0) + '</td>' +
         '<td>' + fmtTokens(m.totalOutputTokens || 0) + '</td>' +
@@ -388,7 +388,7 @@ function renderTokenUsage(metrics) {
   const engineEntries = Object.entries(engine).filter(([, e]) => (e.costUsd || 0) > 0 || (e.calls || 0) > 0);
   if (engineEntries.length > 0) {
     const labels = { 'consolidation': 'Consolidation', 'command-center': 'Command Center', 'doc-chat': 'Doc Chat', 'kb-sweep': 'KB Sweep', 'schedule-parse': 'Schedule Parse' };
-    html += '<div style="font-size:10px;color:var(--muted);margin:12px 0 4px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Engine Usage</div>';
+    html += '<div style="font-size:var(--text-sm);color:var(--muted);margin:12px 0 4px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Engine Usage</div>';
     html += '<table class="token-agent-table"><thead><tr><th style="width:20%">Operation</th><th style="width:10%">Calls</th><th style="width:14%">Cost</th><th style="width:14%">Input</th><th style="width:14%">Output</th><th style="width:14%">Cache</th><th style="width:14%">$/call</th></tr></thead><tbody>';
     for (const [cat, e] of engineEntries.sort((a, b) => (b[1].costUsd || 0) - (a[1].costUsd || 0))) {
       const perCall = (e.calls || 0) > 0 ? fmtCost((e.costUsd || 0) / e.calls) : '-';
@@ -424,7 +424,7 @@ async function openScanProjectsModal() {
         '</label>' +
         '<button onclick="_runProjectScan()" style="padding:6px 16px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap">Scan</button>' +
       '</div>' +
-      '<div id="scan-results" style="color:var(--muted);font-size:12px">Click Scan to find git repos in the directory.</div>' +
+      '<div id="scan-results" style="color:var(--muted);font-size:var(--text-md)">Click Scan to find git repos in the directory.</div>' +
       '<div class="cmd-toast" id="scan-toast" style="margin-top:0"></div>' +
     '</div>';
   document.getElementById('modal-body').style.whiteSpace = 'normal';
@@ -451,27 +451,27 @@ async function _runProjectScan() {
     // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: scan path)
     if (repos.length === 0) { resultsEl.innerHTML = '<span style="color:var(--muted)">No git repos found in ' + escHtml(scanPath) + '</span>'; return; }
 
-    var html = '<div style="margin-bottom:8px;font-size:11px;color:var(--muted)">' + repos.length + ' repos found — select to add:</div>';
+    var html = '<div style="margin-bottom:8px;font-size:var(--text-base);color:var(--muted)">' + repos.length + ' repos found — select to add:</div>';
     html += '<div style="max-height:400px;overflow-y:auto;display:flex;flex-direction:column;gap:4px">';
     repos.forEach(function(r, i) {
       var linked = r.linked;
-      var hostBadge = '<span style="font-size:9px;padding:1px 5px;border-radius:3px;background:' +
+      var hostBadge = '<span style="font-size:var(--text-xs);padding:1px 5px;border-radius:3px;background:' +
         (r.host === 'GitHub' ? 'rgba(88,166,255,0.15);color:var(--blue)' : r.host === 'ADO' ? 'rgba(188,140,255,0.15);color:var(--purple)' : 'var(--surface2);color:var(--muted)') +
         '">' + escHtml(r.host) + '</span>';
       html += '<label style="display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;cursor:' + (linked ? 'default' : 'pointer') + ';opacity:' + (linked ? '0.5' : '1') + '">' +
         '<input type="checkbox" data-scan-idx="' + i + '" ' + (linked ? 'disabled checked' : '') + ' style="accent-color:var(--blue);width:16px;height:16px">' +
         '<div style="flex:1;min-width:0">' +
-          '<div style="font-weight:600;font-size:12px">' + escHtml(r.name) + ' ' + hostBadge + (linked ? ' <span style="font-size:9px;color:var(--green)">linked</span>' : '') + '</div>' +
-          '<div style="font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + escHtml(r.path) + '</div>' +
-          (r.description ? '<div style="font-size:10px;color:var(--muted)">' + escHtml(r.description) + '</div>' : '') +
+          '<div style="font-weight:600;font-size:var(--text-md)">' + escHtml(r.name) + ' ' + hostBadge + (linked ? ' <span style="font-size:var(--text-xs);color:var(--green)">linked</span>' : '') + '</div>' +
+          '<div style="font-size:var(--text-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + escHtml(r.path) + '</div>' +
+          (r.description ? '<div style="font-size:var(--text-sm);color:var(--muted)">' + escHtml(r.description) + '</div>' : '') +
         '</div>' +
       '</label>';
     });
     html += '</div>';
     html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-top:8px">' +
       '<div style="display:flex;gap:8px">' +
-        '<span onclick="_scanSelectAll()" style="font-size:10px;color:var(--blue);cursor:pointer;text-decoration:underline">Select all</span>' +
-        '<span onclick="_scanSelectNone()" style="font-size:10px;color:var(--muted);cursor:pointer;text-decoration:underline">Clear</span>' +
+        '<span onclick="_scanSelectAll()" style="font-size:var(--text-sm);color:var(--blue);cursor:pointer;text-decoration:underline">Select all</span>' +
+        '<span onclick="_scanSelectNone()" style="font-size:var(--text-sm);color:var(--muted);cursor:pointer;text-decoration:underline">Clear</span>' +
       '</div>' +
       '<button onclick="_addSelectedProjects()" style="padding:6px 16px;background:var(--green);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer">Add Selected</button>' +
     '</div>';
@@ -612,8 +612,8 @@ async function renderKeepProcesses() {
       if (!it.valid) {
         return '<div style="border:1px solid var(--border);border-radius:4px;padding:8px;margin-bottom:8px;background:var(--surface2)">' +
           '<div style="color:var(--red);font-weight:600">' + escHtml(it.agentId) + ' INVALID</div>' +
-          '<div style="font-size:11px;color:var(--muted)">reason: ' + escHtml(it.reason || '?') + '</div>' +
-          '<div style="font-size:10px;color:var(--muted)">file: ' + escHtml(it.filePath || '') + '</div>' +
+          '<div style="font-size:var(--text-base);color:var(--muted)">reason: ' + escHtml(it.reason || '?') + '</div>' +
+          '<div style="font-size:var(--text-sm);color:var(--muted)">file: ' + escHtml(it.filePath || '') + '</div>' +
           '</div>';
       }
       const pidRows = (it.pids || []).map(function (p) {
@@ -622,10 +622,10 @@ async function renderKeepProcesses() {
           : '<span style="color:var(--muted)">○</span> dead';
         return '<tr>' +
           '<td style="padding:2px 8px;font-family:monospace">' + p.pid + '</td>' +
-          '<td style="padding:2px 8px;font-size:11px">' + aliveBadge + '</td>' +
+          '<td style="padding:2px 8px;font-size:var(--text-base)">' + aliveBadge + '</td>' +
           '<td style="padding:2px 8px;text-align:right">' +
             (p.alive
-              ? '<button onclick="killKeepPid(\'' + escHtml(it.agentId) + '\',' + p.pid + ')" style="font-size:10px;padding:2px 6px;color:var(--red);border:1px solid var(--red);background:transparent;border-radius:3px;cursor:pointer">Kill now</button>'
+              ? '<button onclick="killKeepPid(\'' + escHtml(it.agentId) + '\',' + p.pid + ')" style="font-size:var(--text-sm);padding:2px 6px;color:var(--red);border:1px solid var(--red);background:transparent;border-radius:3px;cursor:pointer">Kill now</button>'
               : '') +
           '</td>' +
           '</tr>';
@@ -635,8 +635,8 @@ async function renderKeepProcesses() {
         '<div style="font-weight:600">' + escHtml(it.agentId) +
           (it.wi_id ? ' <span style="color:var(--muted);font-weight:400">(' + escHtml(it.wi_id) + ')</span>' : '') +
         '</div>' +
-        '<div style="font-size:11px;color:var(--muted)">' + escHtml(it.purpose || '(no purpose set)') + portsLine + '</div>' +
-        '<div style="font-size:10px;color:var(--muted)">cwd: ' + escHtml(it.cwd || '?') +
+        '<div style="font-size:var(--text-base);color:var(--muted)">' + escHtml(it.purpose || '(no purpose set)') + portsLine + '</div>' +
+        '<div style="font-size:var(--text-sm);color:var(--muted)">cwd: ' + escHtml(it.cwd || '?') +
           ' expires in ' + (it.expires_in_minutes != null ? it.expires_in_minutes : '?') + 'min age ' + (it.age_minutes != null ? it.age_minutes : '?') + 'min</div>' +
         '<table style="margin-top:6px;width:100%;border-collapse:collapse">' + pidRows + '</table>' +
         '</div>';