@yemi33/minions 0.1.2110 → 0.1.2111

package/dashboard/js/command-center.js

@@ -555,8 +555,8 @@ function ccSwitchTab(id) {
       var label = 'Thinking...';
       for (var pi = phases.length - 1; pi >= 0; pi--) { if (ms >= phases[pi][0]) { label = phases[pi][1]; break; } }
       var secs = Math.floor(ms / 1000);
-      html += '<div style="margin-top:' + (text ? '6px' : '0') + ';display:flex;align-items:center;gap:6px"><span style="color:var(--muted);font-size:11px">' + label + '</span>' + dotPulse + '<span style="margin-left:auto;font-size:10px;color:var(--muted)">' + secs + 's</span>' +
-        '<button onclick="ccAbort()" style="font-size:9px;padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--red);cursor:pointer;margin-left:4px">Stop</button></div>';
+      html += '<div style="margin-top:' + (text ? '6px' : '0') + ';display:flex;align-items:center;gap:6px"><span style="color:var(--muted);font-size:var(--text-base)">' + label + '</span>' + dotPulse + '<span style="margin-left:auto;font-size:var(--text-sm);color:var(--muted)">' + secs + 's</span>' +
+        '<button onclick="ccAbort()" style="font-size:var(--text-xs);padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--red);cursor:pointer;margin-left:4px">Stop</button></div>';
       return html;
     }
     ccAddMessage('assistant', _restoreStreamHtml(), true);
@@ -742,10 +742,10 @@ function ccRestoreMessages() {
       var elapsed = Date.now() - sendingState.startedAt;
       var thinking = document.createElement('div');
       thinking.id = 'cc-thinking';
-      thinking.style.cssText = 'padding:8px 12px;border-radius:8px;font-size:11px;color:var(--muted);align-self:flex-start;display:flex;align-items:center;gap:8px';
+      thinking.style.cssText = 'padding:8px 12px;border-radius:8px;font-size:var(--text-base);color:var(--muted);align-self:flex-start;display:flex;align-items:center;gap:8px';
       // eslint-disable-next-line no-unsanitized/property -- reason: composed from elapsed timer and compile-time thinking UI strings (no user data flows in)
-      thinking.innerHTML = '<span class="dot-pulse" style="display:inline-flex;gap:3px"><span style="width:4px;height:4px;background:var(--blue);border-radius:50%;animation:dotPulse 1.2s infinite"></span><span style="width:4px;height:4px;background:var(--blue);border-radius:50%;animation:dotPulse 1.2s infinite;animation-delay:0.2s"></span><span style="width:4px;height:4px;background:var(--blue);border-radius:50%;animation:dotPulse 1.2s infinite;animation-delay:0.4s"></span></span> <span id="cc-thinking-text">Still working...</span> <span id="cc-thinking-time" style="font-size:10px;color:var(--border)">' + Math.floor(elapsed / 1000) + 's</span>' +
-        ' <button onclick="ccNewTab()" style="font-size:9px;padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--red);cursor:pointer">Reset</button>';
+      thinking.innerHTML = '<span class="dot-pulse" style="display:inline-flex;gap:3px"><span style="width:4px;height:4px;background:var(--blue);border-radius:50%;animation:dotPulse 1.2s infinite"></span><span style="width:4px;height:4px;background:var(--blue);border-radius:50%;animation:dotPulse 1.2s infinite;animation-delay:0.2s"></span><span style="width:4px;height:4px;background:var(--blue);border-radius:50%;animation:dotPulse 1.2s infinite;animation-delay:0.4s"></span></span> <span id="cc-thinking-text">Still working...</span> <span id="cc-thinking-time" style="font-size:var(--text-sm);color:var(--border)">' + Math.floor(elapsed / 1000) + 's</span>' +
+        ' <button onclick="ccNewTab()" style="font-size:var(--text-xs);padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--red);cursor:pointer">Reset</button>';
       el.appendChild(thinking);
       el.scrollTop = el.scrollHeight;
       // Update timer
@@ -831,7 +831,7 @@ function ccAddMessage(role, html, skipSave, targetTabId, meta) {
       div.setAttribute('data-cc-message-id', messageId);
     }
     if (meta && meta.retryId) div.setAttribute('data-cc-retry-id', meta.retryId);
-    div.style.cssText = 'padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.6;max-width:95%;' +
+    div.style.cssText = 'padding:8px 12px;border-radius:8px;font-size:var(--text-md);line-height:1.6;max-width:95%;' +
       (isUser ? 'background:var(--blue);color:#fff;align-self:flex-end' : isSystem ? 'align-self:center;max-width:100%' : isAction ? 'align-self:flex-start;padding:2px 0' : 'background:var(--surface2);color:var(--text);align-self:flex-start;border:1px solid var(--border);position:relative');
     // eslint-disable-next-line no-unsanitized/property -- reason: renderMd()/escHtml() call sites escape user-controlled message HTML before ccAddMessage() assigns it (see dashboard/js/utils.js)
     div.innerHTML = (isAssistant && !html.includes('color:var(--red)') && !html.includes('cc-queued-pill') ? llmCopyBtn() : '') + html;
@@ -908,9 +908,9 @@ function _renderQueueIndicator() {
   queue.forEach(function(m) {
     var el = document.createElement('div');
     el.className = 'cc-queue-item';
-    el.style.cssText = 'padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.6;max-width:95%;align-self:flex-end;background:var(--blue);color:#fff;opacity:0.5;order:9999';
+    el.style.cssText = 'padding:8px 12px;border-radius:8px;font-size:var(--text-md);line-height:1.6;max-width:95%;align-self:flex-end;background:var(--blue);color:#fff;opacity:0.5;order:9999';
     // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; queued message text wrapped in escHtml() (fields: m.message)
-    el.innerHTML = escHtml(typeof m === 'string' ? m : m.message) + '<div style="font-size:9px;opacity:0.7;font-style:italic;margin-top:2px">queued</div>';
+    el.innerHTML = escHtml(typeof m === 'string' ? m : m.message) + '<div style="font-size:var(--text-xs);opacity:0.7;font-style:italic;margin-top:2px">queued</div>';
     msgs.appendChild(el);
   });
   if (msgs.scrollHeight - msgs.scrollTop - msgs.clientHeight < 150) msgs.scrollTop = msgs.scrollHeight;
@@ -983,7 +983,7 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
   var tabSessionId = activeTab ? activeTab.sessionId : null;
 
   // Show thinking immediately — before fetch starts
-  addMsg('assistant', '<span style="color:var(--muted);font-size:11px">Thinking...</span>', true);
+  addMsg('assistant', '<span style="color:var(--muted);font-size:var(--text-base)">Thinking...</span>', true);
   var msgs = document.getElementById('cc-messages');
   var streamDiv = msgs.lastElementChild;
   if (streamDiv) streamDiv.setAttribute('data-stream-tab', activeTabId);
@@ -1004,8 +1004,8 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
         if (elapsed >= phases[pi][0]) { label = phases[pi][1]; break; }
       }
       var secs = Math.floor(elapsed / 1000);
-      return '<div style="display:flex;align-items:center;gap:6px"><span style="color:var(--muted);font-size:11px">' + label + '</span>' + dotPulse + '<span style="margin-left:auto;font-size:10px;color:var(--muted)">' + secs + 's</span>' +
-        '<button onclick="ccAbort()" style="font-size:9px;padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--red);cursor:pointer;margin-left:4px">Stop</button></div>';
+      return '<div style="display:flex;align-items:center;gap:6px"><span style="color:var(--muted);font-size:var(--text-base)">' + label + '</span>' + dotPulse + '<span style="margin-left:auto;font-size:var(--text-sm);color:var(--muted)">' + secs + 's</span>' +
+        '<button onclick="ccAbort()" style="font-size:var(--text-xs);padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--red);cursor:pointer;margin-left:4px">Stop</button></div>';
     }
     function updateStreamDiv() {
       // Skip DOM updates if user switched to a different tab (restore interval handles that tab)
@@ -1023,7 +1023,7 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
         html += renderMd(streamedText);
       }
       if (streamStatusNote) {
-        html += '<div style="margin-top:6px;font-size:10px;color:var(--muted)">' + escHtml(streamStatusNote) + '</div>';
+        html += '<div style="margin-top:6px;font-size:var(--text-sm);color:var(--muted)">' + escHtml(streamStatusNote) + '</div>';
       }
       html += '<div style="margin-top:' + (streamedText ? '6px' : '0') + '">' + _getThinkingHtml() + '</div>';
       // eslint-disable-next-line no-unsanitized/property -- reason: renderMd() and renderToolChip() escape streamed text/tool fields before assembling live stream HTML
@@ -1034,15 +1034,15 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
     }
     function _ccElapsedFooter(label) {
       var seconds = Math.round((Date.now() - ccStartTime) / 1000);
-      return '<div style="font-size:9px;color:var(--muted);margin-top:6px;display:flex;justify-content:flex-end;padding-right:30px">' + label.replace('{seconds}', seconds) + '</div>';
+      return '<div style="font-size:var(--text-xs);color:var(--muted);margin-top:6px;display:flex;justify-content:flex-end;padding-right:30px">' + label.replace('{seconds}', seconds) + '</div>';
     }
     function _ccRetryControls(retryRequest, extraHtml, showReload) {
       var retryTabId = retryRequest && retryRequest.tabId ? retryRequest.tabId : activeTabId;
       var retryId = retryRequest && retryRequest.id ? retryRequest.id : '';
       return (extraHtml || '') +
-        '<button onclick="ccRetryLast(' + _ccJsArg(retryTabId) + ',' + _ccJsArg(retryId) + ')" style="margin-top:6px;padding:4px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--blue);cursor:pointer;font-size:11px">Retry</button>' +
-        (showReload ? ' <button onclick="ccRestartMinions(this)" style="margin-top:6px;padding:4px 12px;background:var(--orange);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:11px">Restart Minions</button>' : '') +
-        ' <button onclick="ccNewTab()" style="margin-top:6px;padding:4px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--muted);cursor:pointer;font-size:11px">New Session</button>';
+        '<button onclick="ccRetryLast(' + _ccJsArg(retryTabId) + ',' + _ccJsArg(retryId) + ')" style="margin-top:6px;padding:4px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--blue);cursor:pointer;font-size:var(--text-base)">Retry</button>' +
+        (showReload ? ' <button onclick="ccRestartMinions(this)" style="margin-top:6px;padding:4px 12px;background:var(--orange);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:var(--text-base)">Restart Minions</button>' : '') +
+        ' <button onclick="ccNewTab()" style="margin-top:6px;padding:4px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--muted);cursor:pointer;font-size:var(--text-base)">New Session</button>';
     }
     // Start phase timer immediately so thinking text updates while waiting for SSE
     var phaseTimer = setInterval(updateStreamDiv, 1000);
@@ -1125,7 +1125,7 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
           } else {
             resetText = 'Minions was updated — started a fresh session with latest context.';
           }
-          addMsg('system', '<div style="text-align:center;padding:6px 12px;font-size:11px;color:var(--muted);background:var(--surface2);border-radius:6px;margin:4px 0">' + resetText + '</div>', false, activeTabId);
+          addMsg('system', '<div style="text-align:center;padding:6px 12px;font-size:var(--text-base);color:var(--muted);background:var(--surface2);border-radius:6px;margin:4px 0">' + resetText + '</div>', false, activeTabId);
         }
         var finalText = _ccMergeStreamText(streamedText, evt.text || '');
         if (evt.actions && evt.actions.length > 0) _tagServerExecuted(evt.actions, evt.actionResults);
@@ -1159,7 +1159,7 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
           // Issue #1834: server saw ===ACTIONS=== but couldn't parse the JSON.
           // Surface as an inline warning so the user knows actions were dropped
           // (was previously silent — appeared as "actions failed" with no signal).
-          addMsg('system', '<div style="padding:6px 12px;font-size:11px;color:var(--red);background:var(--surface2);border-radius:6px;margin:4px 0">⚠️ Actions block emitted but JSON could not be parsed — no actions were executed. Resend or rephrase. (' + escHtml(String(evt.actionParseError).slice(0, 200)) + ')</div>', false, activeTabId);
+          addMsg('system', '<div style="padding:6px 12px;font-size:var(--text-base);color:var(--red);background:var(--surface2);border-radius:6px;margin:4px 0">⚠️ Actions block emitted but JSON could not be parsed — no actions were executed. Resend or rephrase. (' + escHtml(String(evt.actionParseError).slice(0, 200)) + ')</div>', false, activeTabId);
         }
       } else if (evt.type === 'error') {
         terminalEventSeen = true;
@@ -1174,12 +1174,12 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
         var ccErrCode = typeof evt.code === 'string' ? evt.code : '';
         var ccRetry = _ccStoreRetryRequest(activeTab, activeTabId, message);
         var codeChip = ccErrCode
-          ? '<span style="display:inline-block;margin-left:6px;padding:1px 6px;font-size:9px;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:3px;font-family:monospace">' + escHtml(ccErrCode) + '</span>'
+          ? '<span style="display:inline-block;margin-left:6px;padding:1px 6px;font-size:var(--text-xs);color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:3px;font-family:monospace">' + escHtml(ccErrCode) + '</span>'
           : '';
         var availList = Array.isArray(evt.availableModels) && evt.availableModels.length
-          ? '<div style="font-size:10px;color:var(--muted);margin-top:6px">Available models: ' + escHtml(evt.availableModels.slice(0, 8).join(', ')) + (evt.availableModels.length > 8 ? '…' : '') + '</div>'
+          ? '<div style="font-size:var(--text-sm);color:var(--muted);margin-top:6px">Available models: ' + escHtml(evt.availableModels.slice(0, 8).join(', ')) + (evt.availableModels.length > 8 ? '…' : '') + '</div>'
           : '';
-        var errorBubble = '<div class="cc-error" role="alert" aria-live="assertive" style="padding:8px 12px;background:rgba(220,80,80,0.08);border-left:3px solid var(--red);border-radius:4px;color:var(--red);font-size:12px"><strong>Error</strong>' + codeChip + '<div style="margin-top:4px;color:var(--text)">' + escHtml(ccErrMsg) + '</div>' + availList + '</div>';
+        var errorBubble = '<div class="cc-error" role="alert" aria-live="assertive" style="padding:8px 12px;background:rgba(220,80,80,0.08);border-left:3px solid var(--red);border-radius:4px;color:var(--red);font-size:var(--text-md)"><strong>Error</strong>' + codeChip + '<div style="margin-top:4px;color:var(--text)">' + escHtml(ccErrMsg) + '</div>' + availList + '</div>';
         addMsg('assistant', errorBubble + _ccRetryControls(ccRetry, '', false), false, { retryId: ccRetry.id });
       }
     }
@@ -1261,7 +1261,7 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
       if (!consume.interrupted) break;
       if (!consume.reconnectable || reconnectAttempts >= 2) {
         _cleanupStreamDiv();
-        var streamEndedHint = '<div style="font-size:10px;color:var(--muted);margin-top:4px">The response stream ended before completion. Retry to resend the interrupted message.</div>';
+        var streamEndedHint = '<div style="font-size:var(--text-sm);color:var(--muted);margin-top:4px">The response stream ended before completion. Retry to resend the interrupted message.</div>';
         var streamEndedRetry = _ccStoreRetryRequest(activeTab, activeTabId, message);
         if (streamedText) {
           addMsg('assistant', renderMd(streamedText) + _ccElapsedFooter('Stream interrupted after {seconds}s') + _ccRetryControls(streamEndedRetry, streamEndedHint, false), false, { retryId: streamEndedRetry.id });
@@ -1274,8 +1274,8 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
       if (!reconnectHealth.reachable || reconnectHealth.restarted) {
         _cleanupStreamDiv();
         var reconnectHint = reconnectHealth.restarted
-          ? '<div style="font-size:10px;color:var(--muted);margin-top:4px">Dashboard restarted while this response was streaming. Restart Minions to reconnect to the new instance.</div>'
-          : '<div style="font-size:10px;color:var(--muted);margin-top:4px">The request stream was interrupted, but the dashboard is still reachable. Retry or start a new session.</div>';
+          ? '<div style="font-size:var(--text-sm);color:var(--muted);margin-top:4px">Dashboard restarted while this response was streaming. Restart Minions to reconnect to the new instance.</div>'
+          : '<div style="font-size:var(--text-sm);color:var(--muted);margin-top:4px">The request stream was interrupted, but the dashboard is still reachable. Retry or start a new session.</div>';
         var reconnectRetry = _ccStoreRetryRequest(activeTab, activeTabId, message);
         addMsg('assistant', (streamedText ? renderMd(streamedText) + _ccElapsedFooter('Stream interrupted after {seconds}s') : '') +
           _ccRetryControls(reconnectRetry, reconnectHint, reconnectHealth.restarted), false, { retryId: reconnectRetry.id });
@@ -1296,7 +1296,7 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
       if (streamedText) {
         addMsg('assistant', renderMd(streamedText) + _ccElapsedFooter('Stopped after {seconds}s'));
       } else {
-        addMsg('assistant', '<span style="color:var(--red);font-size:11px">Stopped</span>');
+        addMsg('assistant', '<span style="color:var(--red);font-size:var(--text-base)">Stopped</span>');
       }
     } else {
       var isNetworkError = _ccIsReconnectableStreamError(e);
@@ -1304,10 +1304,10 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
       var connectionHint = '';
       if (isNetworkError) {
         connectionHint = dashboardHealth.restarted
-          ? '<div style="font-size:10px;color:var(--muted);margin-top:4px">Dashboard restarted while this response was streaming. Restart Minions to reconnect to the new instance.</div>'
+          ? '<div style="font-size:var(--text-sm);color:var(--muted);margin-top:4px">Dashboard restarted while this response was streaming. Restart Minions to reconnect to the new instance.</div>'
           : dashboardHealth.reachable
-            ? '<div style="font-size:10px;color:var(--muted);margin-top:4px">The request stream was interrupted, but the dashboard is still reachable. Retry or start a new session.</div>'
-            : '<div style="font-size:10px;color:var(--muted);margin-top:4px">Dashboard connection lost. Restart Minions to reconnect.</div>';
+            ? '<div style="font-size:var(--text-sm);color:var(--muted);margin-top:4px">The request stream was interrupted, but the dashboard is still reachable. Retry or start a new session.</div>'
+            : '<div style="font-size:var(--text-sm);color:var(--muted);margin-top:4px">Dashboard connection lost. Restart Minions to reconnect.</div>';
       }
       var errorRetry = _ccStoreRetryRequest(activeTab, activeTabId, message);
       // W-mpmwxni2000c25c7-d — if the thrower attached a parsed CC error
@@ -1319,12 +1319,12 @@ async function _ccDoSend(message, skipUserMsg, forceTabId, intentMetadata) {
       var errorRendered;
       if (ccEnv) {
         var ccCodeChip = ccEnv.code
-          ? '<span style="display:inline-block;margin-left:6px;padding:1px 6px;font-size:9px;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:3px;font-family:monospace">' + escHtml(ccEnv.code) + '</span>'
+          ? '<span style="display:inline-block;margin-left:6px;padding:1px 6px;font-size:var(--text-xs);color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:3px;font-family:monospace">' + escHtml(ccEnv.code) + '</span>'
           : '';
         var ccAvail = Array.isArray(ccEnv.availableModels) && ccEnv.availableModels.length
-          ? '<div style="font-size:10px;color:var(--muted);margin-top:6px">Available models: ' + escHtml(ccEnv.availableModels.slice(0, 8).join(', ')) + (ccEnv.availableModels.length > 8 ? '…' : '') + '</div>'
+          ? '<div style="font-size:var(--text-sm);color:var(--muted);margin-top:6px">Available models: ' + escHtml(ccEnv.availableModels.slice(0, 8).join(', ')) + (ccEnv.availableModels.length > 8 ? '…' : '') + '</div>'
           : '';
-        errorRendered = '<div class="cc-error" role="alert" aria-live="assertive" style="padding:8px 12px;background:rgba(220,80,80,0.08);border-left:3px solid var(--red);border-radius:4px;color:var(--red);font-size:12px"><strong>Error</strong>' + ccCodeChip + '<div style="margin-top:4px;color:var(--text)">' + escHtml(ccEnv.message) + '</div>' + ccAvail + '</div>';
+        errorRendered = '<div class="cc-error" role="alert" aria-live="assertive" style="padding:8px 12px;background:rgba(220,80,80,0.08);border-left:3px solid var(--red);border-radius:4px;color:var(--red);font-size:var(--text-md)"><strong>Error</strong>' + ccCodeChip + '<div style="margin-top:4px;color:var(--text)">' + escHtml(ccEnv.message) + '</div>' + ccAvail + '</div>';
       } else {
         errorRendered = '<span style="color:var(--red)">Error: ' + escHtml(e.message) + '</span>';
       }
@@ -1421,7 +1421,7 @@ function _ccActionResultType(action, result) {
   return String((result && result.type) || (action && action.type) || 'action').trim() || 'action';
 }
 
-var CC_ACTION_CHIP_STYLE = 'display:block;width:fit-content;max-width:100%;padding:4px 10px;margin:4px 0 0 0;border-radius:4px;font-size:10px;border:1px dashed var(--border);background:var(--surface)';
+var CC_ACTION_CHIP_STYLE = 'display:block;width:fit-content;max-width:100%;padding:4px 10px;margin:4px 0 0 0;border-radius:4px;font-size:var(--text-sm);border:1px dashed var(--border);background:var(--surface)';
 
 function _ccActionResultLine(action, result) {
   var type = _ccActionResultType(action, result);
@@ -1486,7 +1486,7 @@ function _tagServerExecuted(actions, actionResults) {
 async function ccExecuteAction(action, targetTabId, opts) {
   action = _ccNormalizeDispatchAction(action);
   var status = document.createElement('div');
-  status.style.cssText = 'padding:4px 10px;border-radius:4px;font-size:10px;align-self:flex-start;border:1px dashed var(--border);color:var(--muted)';
+  status.style.cssText = 'padding:4px 10px;border-radius:4px;font-size:var(--text-sm);align-self:flex-start;border:1px dashed var(--border);color:var(--muted)';
 
   // Server-executed actions: just show status, don't re-fire the API
   if (action._serverExecuted) {
@@ -1501,8 +1501,8 @@ async function ccExecuteAction(action, targetTabId, opts) {
       var successLabel = serverActionType === 'dispatch' ? 'Dispatched' : serverActionType;
       // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; label and warning wrapped in escHtml(), success label is a normalized server action type (fields: label, action._serverWarning)
       status.innerHTML = '&#10003; ' + escHtml(successLabel) + ': <strong>' + label + '</strong>' +
-        (action._serverDuplicate ? '<div style="font-size:10px;color:var(--orange);margin-top:2px">Already existed from a previous request; no duplicate work item was created.</div>' : '') +
-        (action._serverWarning ? '<div style="font-size:10px;color:var(--muted);margin-top:2px">' + escHtml(action._serverWarning) + '</div>' : '');
+        (action._serverDuplicate ? '<div style="font-size:var(--text-sm);color:var(--orange);margin-top:2px">Already existed from a previous request; no duplicate work item was created.</div>' : '') +
+        (action._serverWarning ? '<div style="font-size:var(--text-sm);color:var(--muted);margin-top:2px">' + escHtml(action._serverWarning) + '</div>' : '');
       status.style.color = 'var(--green)';
     }
     if (opts && opts.originMessageId && _ccAppendHtmlToMessage(targetTabId || _ccActiveTabId, opts.originMessageId, status.outerHTML)) {
@@ -1832,7 +1832,7 @@ async function ccExecuteAction(action, targetTabId, opts) {
         var prLinkData = await prLinkRes.json().catch(function() { return {}; });
         // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; PR URL and server message wrapped in escHtml() (fields: action.url, prLinkData.message)
         status.innerHTML = '&#10003; PR linked: <strong>' + escHtml(action.url) + '</strong>' +
-          (prLinkData.message ? '<div style="font-size:11px;color:var(--muted);margin-top:4px">' + escHtml(prLinkData.message) + '</div>' : '');
+          (prLinkData.message ? '<div style="font-size:var(--text-base);color:var(--muted);margin-top:4px">' + escHtml(prLinkData.message) + '</div>' : '');
         status.style.color = 'var(--green)';
         break;
       }

package/dashboard/js/detail-panel.js

@@ -98,17 +98,17 @@ function renderDetailContent(detail, tab) {
     el.innerHTML =
       '<div id="live-chat" style="display:flex;flex-direction:column;height:60vh">' +
         '<div id="live-terminal-banner"></div>' +
-        '<div id="live-messages" style="flex:1;overflow-y:auto;padding:8px;font-size:11px;line-height:1.6;display:flex;flex-direction:column"></div>' +
+        '<div id="live-messages" style="flex:1;overflow-y:auto;padding:8px;font-size:var(--text-base);line-height:1.6;display:flex;flex-direction:column"></div>' +
         '<div id="live-status-bar" style="padding:4px 8px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--border)">' +
-          '<span class="pulse"></span><span id="live-status-label" style="font-size:11px;color:var(--green)">Streaming live</span>' +
-          '<span id="live-runtime" style="font-size:10px;color:var(--muted)" data-started="' + (startedAt || '') + '"></span>' +
-          '<button class="pr-pager-btn" onclick="refreshLiveOutput()" style="font-size:10px">Refresh</button>' +
+          '<span class="pulse"></span><span id="live-status-label" style="font-size:var(--text-base);color:var(--green)">Streaming live</span>' +
+          '<span id="live-runtime" style="font-size:var(--text-sm);color:var(--muted)" data-started="' + (startedAt || '') + '"></span>' +
+          '<button class="pr-pager-btn" onclick="refreshLiveOutput()" style="font-size:var(--text-sm)">Refresh</button>' +
         '</div>' +
         '<div id="live-steer-bar" style="display:flex;gap:8px;padding:8px;border-top:1px solid var(--border)">' +
           '<input id="live-steer-input" type="text" placeholder="Message this agent — ask for status, give context, or redirect..." ' +
-            'style="flex:1;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:12px;font-family:inherit" ' +
+            'style="flex:1;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-md);font-family:inherit" ' +
             'onkeydown="if(event.key===\'Enter\')sendSteering()" />' +
-          '<button onclick="sendSteering()" style="padding:6px 12px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:11px">Send</button>' +
+          '<button onclick="sendSteering()" style="padding:6px 12px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-base)">Send</button>' +
         '</div>' +
       '</div>';
     startLiveStream(currentAgentId);
@@ -117,12 +117,12 @@ function renderDetailContent(detail, tab) {
     // eslint-disable-next-line no-unsanitized/property -- reason: renderMd() escapes charter display content and escHtml() escapes textarea content before assembling HTML (see dashboard/js/utils.js)
     el.innerHTML =
       '<div style="display:flex;gap:6px;margin-bottom:8px">' +
-        '<button class="pr-pager-btn" id="charter-edit-btn" style="font-size:10px;padding:2px 10px" onclick="_toggleCharterEdit()">Edit</button>' +
-        '<button class="pr-pager-btn" id="charter-save-btn" style="font-size:10px;padding:2px 10px;color:var(--green);border-color:var(--green);display:none" onclick="_saveCharter()">Save</button>' +
-        '<button class="pr-pager-btn" id="charter-cancel-btn" style="font-size:10px;padding:2px 10px;display:none" onclick="_cancelCharterEdit()">Cancel</button>' +
+        '<button class="pr-pager-btn" id="charter-edit-btn" style="font-size:var(--text-sm);padding:2px 10px" onclick="_toggleCharterEdit()">Edit</button>' +
+        '<button class="pr-pager-btn" id="charter-save-btn" style="font-size:var(--text-sm);padding:2px 10px;color:var(--green);border-color:var(--green);display:none" onclick="_saveCharter()">Save</button>' +
+        '<button class="pr-pager-btn" id="charter-cancel-btn" style="font-size:var(--text-sm);padding:2px 10px;display:none" onclick="_cancelCharterEdit()">Cancel</button>' +
       '</div>' +
       '<div id="charter-view" class="section">' + renderMd(charterContent || 'No charter found. Click Edit to create one.') + '</div>' +
-      '<textarea id="charter-editor" style="display:none;width:100%;min-height:300px;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:Consolas,monospace;font-size:12px;resize:vertical">' + escHtml(charterContent) + '</textarea>';
+      '<textarea id="charter-editor" style="display:none;width:100%;min-height:300px;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:Consolas,monospace;font-size:var(--text-md);resize:vertical">' + escHtml(charterContent) + '</textarea>';
     _charterRawCache = charterContent;
   } else if (tab === 'history') {
     let html = '';
@@ -136,8 +136,8 @@ function renderDetailContent(detail, tab) {
         html += '<tr>' +
           '<td style="max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escHtml(d.task) + '">' + escHtml(d.task.slice(0, 80)) + '</td>' +
           '<td><span class="dispatch-type ' + d.type + '">' + escHtml(d.type) + '</span></td>' +
-          '<td style="color:' + color + '"' + reason + '>' + escHtml(d.result) + (isError && d.reason ? ' <span style="font-size:10px;color:var(--muted)">(' + escHtml(d.reason.slice(0, 50)) + ')</span>' : '') + '</td>' +
-          '<td style="font-size:10px;color:var(--muted)">' + (d.completed_at ? formatLocalDateTime(d.completed_at) : '') + '</td>' +
+          '<td style="color:' + color + '"' + reason + '>' + escHtml(d.result) + (isError && d.reason ? ' <span style="font-size:var(--text-sm);color:var(--muted)">(' + escHtml(d.reason.slice(0, 50)) + ')</span>' : '') + '</td>' +
+          '<td style="font-size:var(--text-sm);color:var(--muted)">' + (d.completed_at ? formatLocalDateTime(d.completed_at) : '') + '</td>' +
         '</tr>';
       });
       html += '</tbody></table>';

package/dashboard/js/fre.js

@@ -92,7 +92,7 @@ function renderFre(statusOrProjects) {
     'border:1px solid var(--blue)',
     'border-radius:var(--radius-lg)',
     'color:var(--text)',
-    'font-size:13px',
+    'font-size:var(--text-lg)',
     'box-shadow:var(--shadow-md)',
   ].join(';');
 
@@ -116,7 +116,7 @@ function renderFre(statusOrProjects) {
     'background:var(--blue)',
     'color:#fff',
     'font-weight:700',
-    'font-size:11px',
+    'font-size:var(--text-base)',
     'flex-shrink:0',
   ].join(';');
 
@@ -127,7 +127,7 @@ function renderFre(statusOrProjects) {
     'border:none',
     'border-radius:var(--radius-sm)',
     'cursor:pointer',
-    'font-size:12px',
+    'font-size:var(--text-md)',
     'font-weight:600',
     'margin-top:8px',
   ].join(';');
@@ -139,7 +139,7 @@ function renderFre(statusOrProjects) {
     'border:1px solid var(--blue)',
     'border-radius:var(--radius-sm)',
     'cursor:pointer',
-    'font-size:12px',
+    'font-size:var(--text-md)',
     'font-weight:600',
     'margin-top:8px',
   ].join(';');
@@ -149,7 +149,7 @@ function renderFre(statusOrProjects) {
     'border:none',
     'color:var(--muted)',
     'cursor:pointer',
-    'font-size:11px',
+    'font-size:var(--text-base)',
     'padding:2px 8px',
   ].join(';');
 
@@ -162,17 +162,17 @@ function renderFre(statusOrProjects) {
   mount.innerHTML =
     '<div id="fre-card" style="' + cardStyle + '">' +
       '<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">' +
-        '<div style="font-size:15px;font-weight:700;color:var(--blue)">&#x1F44B; Welcome to Minions</div>' +
+        '<div style="font-size:var(--text-xl);font-weight:700;color:var(--blue)">&#x1F44B; Welcome to Minions</div>' +
         '<button onclick="dismissFre()" style="' + dismissBtn + '" title="Hide this banner — clear localStorage.minions_fre_dismissed to re-show">Dismiss</button>' +
       '</div>' +
-      '<div style="color:var(--muted);font-size:12px;margin-bottom:12px">Two quick steps to get your fleet ready.</div>' +
+      '<div style="color:var(--muted);font-size:var(--text-md);margin-bottom:12px">Two quick steps to get your fleet ready.</div>' +
       '<div style="display:flex;flex-direction:column;gap:10px">' +
 
         '<div style="' + stepBox + '">' +
           '<span style="' + stepNum + '">1</span>' +
           '<div style="flex:1">' +
             '<div style="font-weight:600;margin-bottom:2px">Pick your runtime CLI</div>' +
-            '<div style="color:var(--muted);font-size:12px;line-height:1.5">' +
+            '<div style="color:var(--muted);font-size:var(--text-md);line-height:1.5">' +
               'Minions spawns agents through this CLI. Switch via Settings &rarr; Engine &rarr; Default CLI (<code>claude</code> or <code>copilot</code>). ' +
               'Currently: <code style="background:var(--bg);padding:1px 6px;border-radius:3px;color:var(--text)">' + safeRuntime + '</code>' +
             '</div>' +
@@ -184,7 +184,7 @@ function renderFre(statusOrProjects) {
           '<span style="' + stepNum + '">2</span>' +
           '<div style="flex:1">' +
             '<div style="font-weight:600;margin-bottom:2px">Add your first project</div>' +
-            '<div style="color:var(--muted);font-size:12px;line-height:1.5">' +
+            '<div style="color:var(--muted);font-size:var(--text-md);line-height:1.5">' +
               'Projects map a local git worktree to a remote repo. Without a project, agents have nowhere to run.' +
             '</div>' +
             '<button onclick="addProject()" style="' + btnPrimary + '">+ Add Project</button>' +

package/dashboard/js/live-stream.js

@@ -160,8 +160,8 @@ async function sendSteering() {
   const el = document.getElementById('live-messages');
   if (el) {
     // eslint-disable-next-line no-unsanitized/method -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: steering message)
-    el.insertAdjacentHTML('beforeend', '<div style="align-self:flex-end;background:var(--blue);color:#fff;padding:6px 12px;border-radius:12px 12px 2px 12px;max-width:80%;margin:4px 0;font-size:12px">' + escHtml(message) +
-      '<div id="steer-pending" style="font-size:9px;opacity:0.7;margin-top:2px">\u2197 Sending...</div></div>');
+    el.insertAdjacentHTML('beforeend', '<div style="align-self:flex-end;background:var(--blue);color:#fff;padding:6px 12px;border-radius:12px 12px 2px 12px;max-width:80%;margin:4px 0;font-size:var(--text-md)">' + escHtml(message) +
+      '<div id="steer-pending" style="font-size:var(--text-xs);opacity:0.7;margin-top:2px">\u2197 Sending...</div></div>');
     el.scrollTop = el.scrollHeight;
   }
   showToast('cmd-toast', 'Steering message sent to ' + currentAgentId, true);

package/dashboard/js/modal-qa.js

@@ -297,16 +297,16 @@ function _qaBuildUserMessageHtml(message, selection) {
 
 function _qaBuildQueuedHtml(message) {
   const preview = escHtml(message.length > 60 ? message.slice(0, 57) + '...' : message);
-  return '<div class="qa-queued-item" style="color:var(--muted);font-size:10px;padding:4px 8px">Queued: "' + preview + '"</div>';
+  return '<div class="qa-queued-item" style="color:var(--muted);font-size:var(--text-sm);padding:4px 8px">Queued: "' + preview + '"</div>';
 }
 
 function _qaBuildLoadingHtml(loadingId, queueCount) {
-  const qaQueueBadge = queueCount > 0 ? ' <span style="font-size:9px;color:var(--muted);background:var(--surface);padding:1px 5px;border-radius:8px;border:1px solid var(--border)">+' + queueCount + ' queued</span>' : '';
+  const qaQueueBadge = queueCount > 0 ? ' <span style="font-size:var(--text-xs);color:var(--muted);background:var(--surface);padding:1px 5px;border-radius:8px;border:1px solid var(--border)">+' + queueCount + ' queued</span>' : '';
   return '<div class="modal-qa-loading" id="' + loadingId + '">' +
     '<div class="dot-pulse"><span></span><span></span><span></span></div> ' +
     '<span id="' + loadingId + '-text">Thinking...</span> ' +
-    '<span id="' + loadingId + '-time" style="font-size:10px;color:var(--muted)"></span>' +
-    ' <button onclick="qaAbort()" style="font-size:9px;padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--red);cursor:pointer">Stop</button>' +
+    '<span id="' + loadingId + '-time" style="font-size:var(--text-sm);color:var(--muted)"></span>' +
+    ' <button onclick="qaAbort()" style="font-size:var(--text-xs);padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--red);cursor:pointer">Stop</button>' +
     qaQueueBadge + '</div>';
 }
 
@@ -320,17 +320,17 @@ function _qaBuildRawErrorHtml(err) {
   if (err.errorClass) meta.push('class: ' + escHtml(String(err.errorClass)));
   if (err.code !== null && err.code !== undefined) meta.push('exit: ' + escHtml(String(err.code)));
   const metaLine = meta.length
-    ? '<div style="font-size:10px;color:var(--muted);margin-bottom:4px">' + meta.join(' · ') + '</div>'
+    ? '<div style="font-size:var(--text-sm);color:var(--muted);margin-bottom:4px">' + meta.join(' · ') + '</div>'
     : '';
   const adapterMessage = err.errorMessage
-    ? '<div style="font-size:11px;color:var(--text);margin-bottom:6px;white-space:pre-wrap">' + escHtml(String(err.errorMessage)) + '</div>'
+    ? '<div style="font-size:var(--text-base);color:var(--text);margin-bottom:6px;white-space:pre-wrap">' + escHtml(String(err.errorMessage)) + '</div>'
     : '';
   const stderrText = err.stderr ? String(err.stderr) : '';
   const stderrBlock = stderrText
-    ? '<pre style="margin:0;padding:6px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;font-size:11px;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto">' + escHtml(stderrText) + '</pre>'
-    : '<div style="font-size:11px;color:var(--muted)">(no stderr captured)</div>';
+    ? '<pre style="margin:0;padding:6px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;font-size:var(--text-base);white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto">' + escHtml(stderrText) + '</pre>'
+    : '<div style="font-size:var(--text-base);color:var(--muted)">(no stderr captured)</div>';
   return '<details class="modal-qa-raw-error" style="margin:6px 0 12px;padding:6px 8px;border:1px solid var(--red);border-radius:4px;background:var(--surface)">' +
-    '<summary style="cursor:pointer;font-size:11px;color:var(--red)">Raw error output</summary>' +
+    '<summary style="cursor:pointer;font-size:var(--text-base);color:var(--red)">Raw error output</summary>' +
     '<div style="margin-top:6px">' + metaLine + adapterMessage + stderrBlock + '</div>' +
     '</details>';
 }
@@ -344,7 +344,7 @@ function _qaBuildAssistantHtml(text, opts) {
   return '<div class="modal-qa-a" style="' + style + '">' +
     (opts?.isError ? '' : llmCopyBtn()) +
     body +
-    '<div style="font-size:9px;color:var(--muted);margin-top:4px;text-align:right;' + pad + '">' + opts.elapsed + 's</div>' +
+    '<div style="font-size:var(--text-xs);color:var(--muted);margin-top:4px;text-align:right;' + pad + '">' + opts.elapsed + 's</div>' +
     '</div>';
 }
 
@@ -366,20 +366,20 @@ function _qaBuildActionFeedbackHtml(actionFeedback) {
   if (!Array.isArray(actionFeedback) || actionFeedback.length === 0) return '';
   return actionFeedback.map(function(item) {
     const type = escHtml(item.type || 'dispatch');
-    const baseStyle = 'padding:4px 10px;border-radius:4px;font-size:10px;align-self:flex-start;border:1px dashed var(--border);margin:4px 0;';
+    const baseStyle = 'padding:4px 10px;border-radius:4px;font-size:var(--text-sm);align-self:flex-start;border:1px dashed var(--border);margin:4px 0;';
     if (item.error) {
       return '<div class="modal-qa-action-feedback" style="' + baseStyle + 'color:var(--red)">&#10007; ' + type + ' failed: ' + escHtml(item.error) + '</div>';
     }
     const label = escHtml(item.id || item.duplicateOf || '');
     const verb = item.type === 'dispatch' ? 'Dispatched' : type;
-    const duplicate = item.duplicate ? '<div style="font-size:10px;color:var(--orange);margin-top:2px">Already existed from a previous request; no duplicate work item was created.</div>' : '';
-    const warning = item.warning ? '<div style="font-size:10px;color:var(--muted);margin-top:2px">' + escHtml(item.warning) + '</div>' : '';
+    const duplicate = item.duplicate ? '<div style="font-size:var(--text-sm);color:var(--orange);margin-top:2px">Already existed from a previous request; no duplicate work item was created.</div>' : '';
+    const warning = item.warning ? '<div style="font-size:var(--text-sm);color:var(--muted);margin-top:2px">' + escHtml(item.warning) + '</div>' : '';
     return '<div class="modal-qa-action-feedback" style="' + baseStyle + 'color:var(--green)">&#10003; ' + verb + ': <strong>' + label + '</strong>' + duplicate + warning + '</div>';
   }).join('');
 }
 
 function _qaBuildLiveProgressHtml(loadingId, label, elapsedSeconds, streamedText, toolsUsed, queueCount) {
-  const qaQueueBadge = queueCount > 0 ? ' <span style="font-size:9px;color:var(--muted);background:var(--surface);padding:1px 5px;border-radius:8px;border:1px solid var(--border)">+' + queueCount + ' queued</span>' : '';
+  const qaQueueBadge = queueCount > 0 ? ' <span style="font-size:var(--text-xs);color:var(--muted);background:var(--surface);padding:1px 5px;border-radius:8px;border:1px solid var(--border)">+' + queueCount + ' queued</span>' : '';
   // Wrap in a column-flex container so chain-of-thought (tool calls) stack
   // vertically on top and the progress block sits at the bottom. Overrides the
   // parent .modal-qa-loading row-flex (which is right for the simple
@@ -390,7 +390,7 @@ function _qaBuildLiveProgressHtml(loadingId, label, elapsedSeconds, streamedText
     toolsUsed.forEach(function(t) {
       const name = typeof t === 'string' ? t : t.name;
       const input = typeof t === 'string' ? {} : (t.input || {});
-      html += '<div style="color:var(--muted);font-size:10px;font-family:monospace;display:flex;align-items:flex-start;gap:6px"><span style="flex-shrink:0">&#9679;</span><span style="word-break:break-all">' + formatToolSummary(name, input) + '</span></div>';
+      html += '<div style="color:var(--muted);font-size:var(--text-sm);font-family:monospace;display:flex;align-items:flex-start;gap:6px"><span style="flex-shrink:0">&#9679;</span><span style="word-break:break-all">' + formatToolSummary(name, input) + '</span></div>';
     });
     html += '</div>';
   }
@@ -398,8 +398,8 @@ function _qaBuildLiveProgressHtml(loadingId, label, elapsedSeconds, streamedText
   html += '<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">' +
     '<span class="dot-pulse"><span></span><span></span><span></span></span>' +
     '<span id="' + loadingId + '-text">' + escHtml(label) + '</span>' +
-    '<span id="' + loadingId + '-time" style="font-size:10px;color:var(--muted)">' + elapsedSeconds + 's</span>' +
-    '<button onclick="qaAbort()" style="font-size:9px;padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--red);cursor:pointer">Stop</button>' +
+    '<span id="' + loadingId + '-time" style="font-size:var(--text-sm);color:var(--muted)">' + elapsedSeconds + 's</span>' +
+    '<button onclick="qaAbort()" style="font-size:var(--text-xs);padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--red);cursor:pointer">Stop</button>' +
     qaQueueBadge +
   '</div>';
   html += '</div>';

package/dashboard/js/qa.js

@@ -1133,17 +1133,17 @@ function _qaInstallModalStyle() {
     '  padding: 12px 16px; border-bottom: 1px solid var(--border, #ddd);',
     '}',
     '.qa-modal-title { font-weight: 600; }',
-    '.qa-modal-close { font-size: 20px; padding: 0 8px; }',
+    '.qa-modal-close { font-size:var(--text-stat); padding: 0 8px; }',
     '.qa-modal-meta {',
     '  display: flex; gap: 12px; flex-wrap: wrap;',
     '  padding: 8px 16px; border-bottom: 1px solid var(--border, #ddd);',
-    '  font-size: 12px; color: var(--muted, #666);',
+    '  font-size:var(--text-md); color: var(--muted, #666);',
     '}',
     '.qa-modal-meta-item { white-space: nowrap; }',
     '.qa-modal-body { flex: 1; overflow: auto; padding: 12px 16px; }',
     '.qa-modal-code {',
     '  font-family: ui-monospace, Menlo, Consolas, monospace;',
-    '  font-size: 12px; line-height: 1.5;',
+    '  font-size:var(--text-md); line-height: 1.5;',
     '  background: var(--surface2, #f6f6f6);',
     '  border: 1px solid var(--border, #ddd);',
     '  border-radius: 4px; padding: 12px;',

package/dashboard/js/refresh.js

@@ -414,7 +414,7 @@ function _processStatusUpdate(data, opts) {
   const autoEl = document.getElementById('auto-approve-badge');
   // eslint-disable-next-line no-unsanitized/property -- reason: composed from compile-time constants (no user data flows in)
   if (autoEl) autoEl.innerHTML = data.autoMode?.approvePlans
-    ? '<span style="font-size:9px;font-weight:600;padding:1px 6px;border-radius:3px;background:rgba(63,185,80,0.15);color:var(--green);border:1px solid rgba(63,185,80,0.3)">AUTO-APPROVE</span>'
+    ? '<span style="font-size:var(--text-xs);font-weight:600;padding:1px 6px;border-radius:3px;background:rgba(63,185,80,0.15);color:var(--green);border:1px solid rgba(63,185,80,0.3)">AUTO-APPROVE</span>'
     : '';
   const ccLabelEl = document.getElementById('cmd-powered-by');
   if (ccLabelEl) ccLabelEl.textContent = _formatCcPowerLabel(data.autoMode);
@@ -1338,7 +1338,7 @@ window.MinionsRefresh = { refresh };
     chip.title = 'Open dashboard refresh diagnostics';
     // Bottom-LEFT (not right) to avoid overlapping the Command Center Send
     // button when the CC drawer is open (the drawer covers the right edge).
-    chip.style.cssText = 'position:fixed;left:12px;bottom:12px;z-index:9999;background:var(--surface,#222);color:var(--muted,#aaa);border:1px solid var(--border,#444);border-radius:10px;padding:3px 8px;font-size:10px;font-family:inherit;cursor:pointer;opacity:0.75';
+    chip.style.cssText = 'position:fixed;left:12px;bottom:12px;z-index:9999;background:var(--surface,#222);color:var(--muted,#aaa);border:1px solid var(--border,#444);border-radius:10px;padding:3px 8px;font-size:var(--text-sm);font-family:inherit;cursor:pointer;opacity:0.75';
     chip.addEventListener('click', _openRefreshDiagModal);
     document.body.appendChild(chip);
   } catch { /* DOM may not be ready in unusual test embeds */ }
@@ -1354,18 +1354,18 @@ function _openRefreshDiagModal() {
   overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px';
   overlay.addEventListener('click', function(e) { if (e.target === overlay) overlay.remove(); });
   const panel = document.createElement('div');
-  panel.style.cssText = 'background:var(--surface,#1c1c1c);color:var(--text,#ddd);border:1px solid var(--border,#444);border-radius:8px;max-width:1200px;max-height:80vh;width:100%;display:flex;flex-direction:column;overflow:hidden;font-family:inherit;font-size:11px';
+  panel.style.cssText = 'background:var(--surface,#1c1c1c);color:var(--text,#ddd);border:1px solid var(--border,#444);border-radius:8px;max-width:1200px;max-height:80vh;width:100%;display:flex;flex-direction:column;overflow:hidden;font-family:inherit;font-size:var(--text-base)';
   const head = document.createElement('div');
   head.style.cssText = 'padding:10px 14px;border-bottom:1px solid var(--border,#444);display:flex;align-items:center;justify-content:space-between;gap:8px';
   const title = document.createElement('div');
-  title.style.cssText = 'font-weight:700;color:var(--blue,#58a6ff);font-size:13px';
+  title.style.cssText = 'font-weight:700;color:var(--blue,#58a6ff);font-size:var(--text-lg)';
   title.textContent = 'Refresh diagnostics — ' + entries.length + ' / ' + _DIAG_RING_SIZE + ' entries';
   const actions = document.createElement('div');
   actions.style.cssText = 'display:flex;gap:6px';
   const sendBtn = document.createElement('button');
   sendBtn.type = 'button';
   sendBtn.textContent = 'Send to engine';
-  sendBtn.style.cssText = 'background:var(--blue,#1f6feb);color:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:11px;cursor:pointer';
+  sendBtn.style.cssText = 'background:var(--blue,#1f6feb);color:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:var(--text-base);cursor:pointer';
   sendBtn.addEventListener('click', function() {
     sendBtn.disabled = true;
     sendBtn.textContent = 'Sending…';
@@ -1384,12 +1384,12 @@ function _openRefreshDiagModal() {
   const clearBtn = document.createElement('button');
   clearBtn.type = 'button';
   clearBtn.textContent = 'Clear';
-  clearBtn.style.cssText = 'background:none;color:var(--muted,#aaa);border:1px solid var(--border,#444);border-radius:4px;padding:4px 10px;font-size:11px;cursor:pointer';
+  clearBtn.style.cssText = 'background:none;color:var(--muted,#aaa);border:1px solid var(--border,#444);border-radius:4px;padding:4px 10px;font-size:var(--text-base);cursor:pointer';
   clearBtn.addEventListener('click', function() { window._refreshDiagnosticsClear(); overlay.remove(); });
   const closeBtn = document.createElement('button');
   closeBtn.type = 'button';
   closeBtn.textContent = 'Close';
-  closeBtn.style.cssText = 'background:none;color:var(--muted,#aaa);border:1px solid var(--border,#444);border-radius:4px;padding:4px 10px;font-size:11px;cursor:pointer';
+  closeBtn.style.cssText = 'background:none;color:var(--muted,#aaa);border:1px solid var(--border,#444);border-radius:4px;padding:4px 10px;font-size:var(--text-base);cursor:pointer';
   closeBtn.addEventListener('click', function() { overlay.remove(); });
   actions.appendChild(sendBtn);
   actions.appendChild(clearBtn);
@@ -1407,7 +1407,7 @@ function _openRefreshDiagModal() {
 
 function _renderRefreshDiagTable(entries) {
   const table = document.createElement('table');
-  table.style.cssText = 'width:100%;border-collapse:collapse;font-family:monospace;font-size:11px';
+  table.style.cssText = 'width:100%;border-collapse:collapse;font-family:monospace;font-size:var(--text-base)';
   const cols = ['ts', 'kind', 'gap', 'vis', 'status', 'etag↓', 'bytes', 'cacheV', 'wi', 'wiΔ', 'changed', 'render(ms)', 'note'];
   const thead = document.createElement('thead');
   const trh = document.createElement('tr');