@yemi33/minions 0.1.2109 → 0.1.2111

package/dashboard/js/render-prs.js

@@ -110,11 +110,11 @@ function prRow(pr) {
   const prId = pr.id || '—';
   const pendingReason = pr._pendingReason ? String(pr._pendingReason) : '';
   const pendingReasonHtml = pendingReason
-    ? '<div style="font-size:9px;color:var(--muted);margin-top:2px" title="Pending reason: ' + escapeHtml(pendingReason) + '">' + escapeHtml(pendingReason.replace(/_/g, ' ')) + '</div>'
+    ? '<div style="font-size:var(--text-xs);color:var(--muted);margin-top:2px" title="Pending reason: ' + escapeHtml(pendingReason) + '">' + escapeHtml(pendingReason.replace(/_/g, ' ')) + '</div>'
     : '';
   var followupCount = _countPrFollowups(pr);
   var followupChip = followupCount > 0
-    ? ' <span class="pr-badge draft" style="font-size:8px" title="' + followupCount + ' follow-up work item(s) dispatched from comments on this PR">+' + followupCount + ' follow-up' + (followupCount === 1 ? '' : 's') + '</span>'
+    ? ' <span class="pr-badge draft" style="font-size:var(--text-xs)" title="' + followupCount + ' follow-up work item(s) dispatched from comments on this PR">+' + followupCount + ' follow-up' + (followupCount === 1 ? '' : 's') + '</span>'
     : '';
   // Issue #2969 — paused-cause chip(s). Prefer the API-enriched _pausedCauses
   // field; fall back to deriving from _noOpFixes for the /state/ disk-fetch
@@ -135,7 +135,7 @@ function prRow(pr) {
         + (rec.reason || 'unknown') + '. Click to resume (clears _noOpFixes['
         + cause + '] so the next discovery pass can re-dispatch).';
       return ' <button class="pr-badge rejected pr-paused-chip" '
-        + 'style="font-size:8px;cursor:pointer;border:none" '
+        + 'style="font-size:var(--text-xs);cursor:pointer;border:none" '
         + 'title="' + escapeHtml(titleAttr) + '" '
         + 'data-pr-id="' + escapeHtml(String(pr.id || '')) + '" '
         + 'data-pr-cause="' + escapeHtml(cause) + '" '
@@ -151,7 +151,7 @@ function prRow(pr) {
       ? '<span class="pr-agent" style="color:var(--muted)" title="Vote pending confirmation">' + escapeHtml(sq.reviewer) + '…</span>'
       : pr.reviewedBy && pr.reviewedBy.length
         ? '<span class="pr-agent" title="' + escapeHtml(pr.reviewedBy.join(', ')) + '">' + escapeHtml(pr.reviewedBy.join(', ')) + '</span>'
-        : '<span style="color:var(--muted);font-size:11px">—</span>';
+        : '<span style="color:var(--muted);font-size:var(--text-base)">—</span>';
   const createdLabel = (pr.created || '—').slice(0, 16).replace('T', ' ');
   // Per-row auto-observe toggle (W-mpmwxkzm0009ba0b). _contextOnly === true
   // means the engine polls status/comments but does NOT dispatch review/fix
@@ -201,9 +201,9 @@ function prRow(pr) {
     '<td>' + reviewerCell + '</td>' +
     '<td><span class="pr-badge ' + buildClass + '" title="' + escapeHtml(buildTitle || buildLabel) + '">' + escapeHtml(buildLabel) + '</span></td>' +
     '<td><span class="pr-badge ' + statusClass + '" title="' + escapeHtml(statusLabel) + '">' + escapeHtml(statusLabel) + '</span></td>' +
-    '<td>' + (observeBtn || '<span style="color:var(--muted);font-size:11px">—</span>') + '</td>' +
+    '<td>' + (observeBtn || '<span style="color:var(--muted);font-size:var(--text-base)">—</span>') + '</td>' +
     '<td><span class="pr-date" title="' + escapeHtml(createdLabel) + '">' + escapeHtml(createdLabel) + '</span></td>' +
-    '<td><button class="pr-pager-btn" style="font-size:9px;padding:1px 5px;color:var(--red);border-color:var(--red)" data-pr-id="' + escapeHtml(String(prId)) + '" onclick="event.stopPropagation();unlinkPr(this.dataset.prId)" title="Remove from tracking">x</button></td>' +
+    '<td><button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 5px;color:var(--red);border-color:var(--red)" data-pr-id="' + escapeHtml(String(prId)) + '" onclick="event.stopPropagation();unlinkPr(this.dataset.prId)" title="Remove from tracking">x</button></td>' +
     '</tr>';
 }
 
@@ -305,8 +305,8 @@ function openModal(i) {
   document.getElementById('modal-title').textContent = item.name;
   // eslint-disable-next-line no-unsanitized/property -- reason: renderMd() escapes item.content before assembling HTML; item.name is wrapped in escapeHtml() (see dashboard/js/utils.js)
   document.getElementById('modal-body').innerHTML =
-    '<div style="margin-bottom:12px"><button class="pr-pager-btn" style="font-size:10px;padding:3px 10px" onclick="promoteToKB(\'' + escapeHtml(item.name) + '\')">Add to Knowledge Base</button></div>' +
-    '<div style="font-size:12px;line-height:1.7;color:var(--muted)">' + renderMd(item.content) + '</div>';
+    '<div style="margin-bottom:12px"><button class="pr-pager-btn" style="font-size:var(--text-sm);padding:3px 10px" onclick="promoteToKB(\'' + escapeHtml(item.name) + '\')">Add to Knowledge Base</button></div>' +
+    '<div style="font-size:var(--text-md);line-height:1.7;color:var(--muted)">' + renderMd(item.content) + '</div>';
   _modalDocContext = { title: item.name, content: item.content, selection: '' };
   _modalFilePath = 'notes/inbox/' + item.name; showModalQa();
   // Clear notification badge when opening this document
@@ -327,7 +327,7 @@ function openAddPrModal() {
   // added any project yet. We still allow the link (read-only tracking is valid),
   // but warn that auto-fix / auto-review can't dispatch without a project worktree.
   const noProjectsWarning = projects.length === 0
-    ? '<div id="pr-link-no-projects-warning" style="padding:8px 12px;background:rgba(210,153,34,0.15);border:1px solid rgba(210,153,34,0.3);border-radius:var(--radius-sm);color:var(--yellow);font-size:11px;line-height:1.5;margin-bottom:4px">' +
+    ? '<div id="pr-link-no-projects-warning" style="padding:8px 12px;background:rgba(210,153,34,0.15);border:1px solid rgba(210,153,34,0.3);border-radius:var(--radius-sm);color:var(--yellow);font-size:var(--text-base);line-height:1.5;margin-bottom:4px">' +
         '<div style="font-weight:700;margin-bottom:2px">&#x26A0; No project configured.</div>' +
         '<div style="color:var(--text)">This PR will be tracked, but auto-fix and auto-review cannot dispatch against it &mdash; agents need a project worktree to operate in. Add a project first (Projects tab) to enable automation.</div>' +
       '</div>'
@@ -346,7 +346,7 @@ function openAddPrModal() {
         '<input type="checkbox" id="pr-link-observe" style="width:16px;height:16px;accent-color:var(--blue)">' +
         '<span>Auto-observe <span style="color:var(--muted);font-weight:400">(monitor builds, resolve comments, fix failures)</span></span>' +
       '</label>' +
-      '<div style="font-size:11px;color:var(--muted);margin-top:-4px;padding-left:24px">Off = context only (e.g. teammate\'s PR). On = agents actively monitor and fix issues.</div>' +
+      '<div style="font-size:var(--text-base);color:var(--muted);margin-top:-4px;padding-left:24px">Off = context only (e.g. teammate\'s PR). On = agents actively monitor and fix issues.</div>' +
       '<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:8px">' +
         '<button onclick="closeModal()" class="pr-pager-btn">Cancel</button>' +
         '<button onclick="_submitLinkPr(event)" style="padding:6px 16px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer">Link PR</button>' +

package/dashboard/js/render-schedules.js

@@ -240,8 +240,8 @@ const _SLOT_COLORS = {
 function _renderViewToggle() {
   const isList = _schedViewMode === 'list';
   return '<div style="display:flex;gap:4px;margin-bottom:8px">' +
-    '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;' + (isList ? 'background:var(--blue);color:#fff;border-color:var(--blue)' : '') + '" onclick="_schedSetView(\'list\')">List</button>' +
-    '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;' + (!isList ? 'background:var(--blue);color:#fff;border-color:var(--blue)' : '') + '" onclick="_schedSetView(\'calendar\')">Calendar</button>' +
+    '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;' + (isList ? 'background:var(--blue);color:#fff;border-color:var(--blue)' : '') + '" onclick="_schedSetView(\'list\')">List</button>' +
+    '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;' + (!isList ? 'background:var(--blue);color:#fff;border-color:var(--blue)' : '') + '" onclick="_schedSetView(\'calendar\')">Calendar</button>' +
   '</div>';
 }
 
@@ -299,7 +299,7 @@ function _renderScheduleCalendar(schedules) {
         html += '<div class="sched-cal-slot" style="background:' + colors.bg + ';border-left-color:' + colors.border + ';color:' + colors.text + ';opacity:' + opacity + '" ' +
           'onclick="if(shouldIgnoreSelectionClick(event))return;openScheduleDetail(\'' + escHtml(s.id) + '\')" title="' + escHtml(s.title + ' — ' + timeLabel + ' — ' + (s.type || 'implement')) + '">' +
           '<span style="font-weight:600;' + strikeStyle + '">' + escHtml((s.title || s.id).slice(0, 25)) + '</span>' +
-          '<span style="font-size:9px;opacity:0.7"> ' + timeLabel + '</span>' +
+          '<span style="font-size:var(--text-xs);opacity:0.7"> ' + timeLabel + '</span>' +
         '</div>';
       }
       if (cellSlots.length === 0) html += '&nbsp;';
@@ -345,17 +345,17 @@ function renderSchedules(schedules, opts) {
       html += '<tr data-sched-id="' + escHtml(s.id || '') + '" style="cursor:pointer" onclick="if(shouldIgnoreSelectionClick(event))return;openScheduleDetail(\'' + escHtml(s.id) + '\')">' +
         '<td><span class="pr-id">' + escHtml(s.id || '') + '</span></td>' +
         '<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escHtml(s.title || '') + '">' + escHtml(s.title || '') + '</td>' +
-        '<td><span title="' + escHtml(s.cron || '') + '" style="font-size:11px;color:var(--blue)">' + escHtml(humanCron) + '</span></td>' +
+        '<td><span title="' + escHtml(s.cron || '') + '" style="font-size:var(--text-base);color:var(--blue)">' + escHtml(humanCron) + '</span></td>' +
         '<td>' + typeBadge + '</td>' +
-        '<td><span style="font-size:10px;color:var(--muted)">' + escHtml(s.project || '') + '</span></td>' +
+        '<td><span style="font-size:var(--text-sm);color:var(--muted)">' + escHtml(s.project || '') + '</span></td>' +
         '<td><span class="pr-agent">' + escHtml(s.agent || 'auto') + '</span></td>' +
         '<td>' + enabledBadge + '</td>' +
         '<td><span class="pr-date">' + escHtml(lastRun) + '</span></td>' +
         '<td style="white-space:nowrap">' +
-          '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--green);border-color:var(--green);margin-right:4px" onclick="event.stopPropagation();runScheduleNow(\'' + escHtml(s.id) + '\',this)" title="Run now">Run now</button>' +
-          '<button class="pr-pager-btn' + (_schedToggleInFlight.has(s.id) ? ' disabled' : '') + '" style="font-size:9px;padding:1px 6px;color:' + (s.enabled ? 'var(--yellow)' : 'var(--green)') + ';border-color:' + (s.enabled ? 'var(--yellow)' : 'var(--green)') + ';margin-right:4px" onclick="event.stopPropagation();toggleScheduleEnabled(\'' + escHtml(s.id) + '\',' + !s.enabled + ')" title="' + (s.enabled ? 'Disable' : 'Enable') + '">' + (s.enabled ? '&#x23F8;' : '&#x25B6;') + '</button>' +
-          '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--blue);border-color:var(--blue);margin-right:4px" onclick="event.stopPropagation();openEditScheduleModal(\'' + escHtml(s.id) + '\')" title="Edit">&#x270E;</button>' +
-          '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--red);border-color:var(--red)" onclick="event.stopPropagation();deleteSchedule(\'' + escHtml(s.id) + '\')" title="Delete">&#x2715;</button>' +
+          '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-right:4px" onclick="event.stopPropagation();runScheduleNow(\'' + escHtml(s.id) + '\',this)" title="Run now">Run now</button>' +
+          '<button class="pr-pager-btn' + (_schedToggleInFlight.has(s.id) ? ' disabled' : '') + '" style="font-size:var(--text-xs);padding:1px 6px;color:' + (s.enabled ? 'var(--yellow)' : 'var(--green)') + ';border-color:' + (s.enabled ? 'var(--yellow)' : 'var(--green)') + ';margin-right:4px" onclick="event.stopPropagation();toggleScheduleEnabled(\'' + escHtml(s.id) + '\',' + !s.enabled + ')" title="' + (s.enabled ? 'Disable' : 'Enable') + '">' + (s.enabled ? '&#x23F8;' : '&#x25B6;') + '</button>' +
+          '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--blue);border-color:var(--blue);margin-right:4px" onclick="event.stopPropagation();openEditScheduleModal(\'' + escHtml(s.id) + '\')" title="Edit">&#x270E;</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();deleteSchedule(\'' + escHtml(s.id) + '\')" title="Delete">&#x2715;</button>' +
         '</td>' +
       '</tr>';
     }
@@ -390,15 +390,15 @@ function openScheduleDetail(id) {
   // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: schedule title, schedule id)
   document.getElementById('modal-title').innerHTML = escHtml(s.title || s.id) +
     ' <div style="display:flex;gap:4px;margin-top:4px">' +
-      '<button class="pr-pager-btn" style="font-size:10px;padding:2px 10px;color:var(--green)" onclick="runScheduleNow(\'' + escHtml(s.id) + '\',this)">Run now</button>' +
-      '<button class="pr-pager-btn" style="font-size:10px;padding:2px 10px;color:var(--blue)" onclick="closeModal();openEditScheduleModal(\'' + escHtml(s.id) + '\')">Edit</button>' +
-      '<button class="pr-pager-btn" style="font-size:10px;padding:2px 10px;color:' + (s.enabled ? 'var(--yellow)' : 'var(--green)') + '" onclick="toggleScheduleEnabled(\'' + escHtml(s.id) + '\',' + !s.enabled + ');closeModal()">' + (s.enabled ? 'Disable' : 'Enable') + '</button>' +
-      '<button class="pr-pager-btn" style="font-size:10px;padding:2px 10px;color:var(--red)" onclick="deleteSchedule(\'' + escHtml(s.id) + '\');closeModal()">Delete</button>' +
+      '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 10px;color:var(--green)" onclick="runScheduleNow(\'' + escHtml(s.id) + '\',this)">Run now</button>' +
+      '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 10px;color:var(--blue)" onclick="closeModal();openEditScheduleModal(\'' + escHtml(s.id) + '\')">Edit</button>' +
+      '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 10px;color:' + (s.enabled ? 'var(--yellow)' : 'var(--green)') + '" onclick="toggleScheduleEnabled(\'' + escHtml(s.id) + '\',' + !s.enabled + ');closeModal()">' + (s.enabled ? 'Disable' : 'Enable') + '</button>' +
+      '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 10px;color:var(--red)" onclick="deleteSchedule(\'' + escHtml(s.id) + '\');closeModal()">Delete</button>' +
     '</div>';
 
-  var body = '<div style="display:flex;flex-direction:column;gap:10px;font-size:12px;line-height:1.6">' +
+  var body = '<div style="display:flex;flex-direction:column;gap:10px;font-size:var(--text-md);line-height:1.6">' +
     '<div><strong style="color:var(--muted)">ID:</strong> ' + escHtml(s.id) + '</div>' +
-    '<div><strong style="color:var(--muted)">Schedule:</strong> <span style="color:var(--blue)">' + escHtml(humanCron) + '</span> <code style="background:var(--bg);padding:1px 4px;border-radius:3px;font-size:10px">' + escHtml(s.cron || '') + '</code></div>' +
+    '<div><strong style="color:var(--muted)">Schedule:</strong> <span style="color:var(--blue)">' + escHtml(humanCron) + '</span> <code style="background:var(--bg);padding:1px 4px;border-radius:3px;font-size:var(--text-sm)">' + escHtml(s.cron || '') + '</code></div>' +
     '<div><strong style="color:var(--muted)">Type:</strong> <span class="dispatch-type ' + escHtml(s.type || 'implement') + '">' + escHtml(s.type || 'implement') + '</span></div>' +
     '<div><strong style="color:var(--muted)">Priority:</strong> ' + escHtml(s.priority || 'medium') + '</div>' +
     '<div><strong style="color:var(--muted)">Project:</strong> ' + escHtml(s.project || 'any') + '</div>' +
@@ -426,9 +426,9 @@ function _scheduleFormHtml(sched, isEdit) {
   const agentOpts = '<option value="">Auto</option>' + (cmdAgents || []).map(a => '<option value="' + escHtml(a.id) + '"' + (sched.agent === a.id ? ' selected' : '') + '>' + escHtml(a.name) + '</option>').join('');
 
   const inputStyle = 'display:block;width:100%;margin-top:4px;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-md);font-family:inherit';
-  const pillStyle = 'display:inline-block;padding:4px 10px;margin:2px;border:1px solid var(--border);border-radius:12px;cursor:pointer;font-size:11px;color:var(--text);background:var(--bg);user-select:none;transition:all 0.15s';
+  const pillStyle = 'display:inline-block;padding:4px 10px;margin:2px;border:1px solid var(--border);border-radius:12px;cursor:pointer;font-size:var(--text-base);color:var(--text);background:var(--bg);user-select:none;transition:all 0.15s';
   const pillActiveExtra = 'background:var(--blue);color:#fff;border-color:var(--blue)';
-  const linkStyle = 'font-size:10px;color:var(--blue);cursor:pointer;text-decoration:underline;margin-right:8px';
+  const linkStyle = 'font-size:var(--text-sm);color:var(--blue);cursor:pointer;text-decoration:underline;margin-right:8px';
 
   // Parse existing cron for picker defaults
   const picker = _parseCronToPicker(sched.cron || '');
@@ -458,14 +458,14 @@ function _scheduleFormHtml(sched, isEdit) {
   // ID section: auto-generated for create, read-only label for edit
   let idSection = '';
   if (isEdit) {
-    idSection = '<div style="color:var(--muted);font-size:11px;margin-bottom:4px">ID: <strong style="color:var(--text)">' + escHtml(sched.id || '') + '</strong></div>';
+    idSection = '<div style="color:var(--muted);font-size:var(--text-base);margin-bottom:4px">ID: <strong style="color:var(--text)">' + escHtml(sched.id || '') + '</strong></div>';
   } else {
-    idSection = '<div id="sched-auto-id" style="color:var(--muted);font-size:11px;margin-bottom:4px">ID: <strong style="color:var(--text)">auto-generated from title</strong></div>';
+    idSection = '<div id="sched-auto-id" style="color:var(--muted);font-size:var(--text-base);margin-bottom:4px">ID: <strong style="color:var(--text)">auto-generated from title</strong></div>';
   }
 
   return '<div style="display:flex;flex-direction:column;gap:12px;font-family:inherit">' +
     idSection +
-    '<div id="sched-form-error" style="display:none;color:var(--red);font-size:12px;padding:6px 10px;background:rgba(255,50,50,0.1);border-radius:var(--radius-sm)"></div>' +
+    '<div id="sched-form-error" style="display:none;color:var(--red);font-size:var(--text-md);padding:6px 10px;background:rgba(255,50,50,0.1);border-radius:var(--radius-sm)"></div>' +
     '<label style="color:var(--text);font-size:var(--text-md)">Title' +
       '<input id="sched-edit-title" value="' + escHtml(sched.title || '') + '" style="' + inputStyle + '"' +
       (!isEdit ? " oninput=\"(function(v){var el=document.querySelector('#sched-auto-id strong');if(el)el.textContent=v?window._generateScheduleId(v):'auto-generated from title'})(this.value)\"" : '') + '>' +
@@ -487,11 +487,11 @@ function _scheduleFormHtml(sched, isEdit) {
     '<div id="sched-cron-nl" style="display:none">' +
       '<label style="color:var(--text);font-size:var(--text-md)">Schedule (natural language)</label>' +
       '<textarea id="sched-nl-input" rows="2" placeholder="every weekday at 9am" style="' + inputStyle + ';resize:vertical;margin-top:4px"></textarea>' +
-      '<button onclick="_parseNaturalCron()" style="margin-top:6px;padding:4px 12px;font-size:11px;background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer">Parse \u2192</button>' +
-      '<div id="sched-nl-error" style="color:var(--red);font-size:11px;margin-top:4px"></div>' +
+      '<button onclick="_parseNaturalCron()" style="margin-top:6px;padding:4px 12px;font-size:var(--text-base);background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer">Parse \u2192</button>' +
+      '<div id="sched-nl-error" style="color:var(--red);font-size:var(--text-base);margin-top:4px"></div>' +
     '</div>' +
     '<div style="margin-top:2px">' +
-      '<span id="sched-cron-preview" style="font-size:11px;color:var(--blue)">\u2192 cron: ' + escHtml(computedCron) + '</span>' +
+      '<span id="sched-cron-preview" style="font-size:var(--text-base);color:var(--blue)">\u2192 cron: ' + escHtml(computedCron) + '</span>' +
       '<br><span id="sched-cron-mode-toggle" style="' + linkStyle + ';margin-top:4px;display:inline-block" onclick="_toggleCronMode()">Use natural language</span>' +
     '</div>' +
     '<div style="display:flex;gap:12px">' +

package/dashboard/js/render-skills.js

@@ -63,7 +63,7 @@ function renderSkills(skills) {
   let html = '<div style="display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap">';
   for (const t of tabs) {
     const active = _skillsTab === t.key;
-    html += '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;' +
+    html += '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px;' +
       (active ? 'background:var(--green);color:#fff;border-color:var(--green)' : '') +
       '" onclick="_skillsSelectTab(' + _jsArg(t.key) + ')">' + escHtml(t.label) + '</button>';
   }
@@ -73,7 +73,7 @@ function renderSkills(skills) {
   // native locations (~/.claude/skills, ~/.copilot/skills, plugin skills) are
   // only visible to that runtime. The "agent" tab (~/.agents/skills) is the
   // cross-runtime portable bucket and IS visible to every runtime.
-  html += '<div style="font-size:9px;color:var(--muted);margin-bottom:8px;line-height:1.4">' +
+  html += '<div style="font-size:var(--text-xs);color:var(--muted);margin-bottom:8px;line-height:1.4">' +
     'Skills are reference docs agents read on demand — they are not injected wholesale into prompts. ' +
     'Each tab reflects what the matching runtime would see; runtime-native skills are NOT cross-visible. ' +
     'The agent tab (~/.agents/skills) is the cross-runtime portable bucket — visible to every runtime.' +
@@ -90,10 +90,10 @@ function renderSkills(skills) {
   html += '<div style="display:flex;flex-direction:column;gap:6px">';
   for (const r of page) {
     const meta = _skillMetaOf(r.source);
-    const autoTag = r.autoGenerated ? '<span style="font-size:8px;background:rgba(63,185,80,0.15);color:var(--green);padding:1px 4px;border-radius:3px;margin-left:4px">auto</span>' : '';
+    const autoTag = r.autoGenerated ? '<span style="font-size:var(--text-xs);background:rgba(63,185,80,0.15);color:var(--green);padding:1px 4px;border-radius:3px;margin-left:4px">auto</span>' : '';
     html += '<div class="inbox-item" onclick="openSkill(' + _jsArg(r.file) + ',' + _jsArg(r.source || 'claude-code') + ',' + _jsArg(r.dir || '') + ')" style="border-left-color:var(--green)">' +
       '<div class="inbox-name"><span style="color:var(--green);font-weight:600">' + meta.icon + ' ' + escHtml(r.name) + '</span>' + autoTag +
-        '<span style="font-size:9px;color:var(--muted);margin-left:auto">' + escHtml(meta.label) + '</span>' +
+        '<span style="font-size:var(--text-xs);color:var(--muted);margin-left:auto">' + escHtml(meta.label) + '</span>' +
       '</div>' +
       (r.description ? '<div class="inbox-preview" style="color:var(--text)">' + escHtml(r.description) + '</div>' : '') +
     '</div>';
@@ -103,11 +103,11 @@ function renderSkills(skills) {
   // Pagination controls
   if (totalPages > 1) {
     html += '<div style="display:flex;align-items:center;gap:8px;margin-top:6px;justify-content:center">';
-    html += '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" ' +
+    html += '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px" ' +
       (_skillsPage === 0 ? 'disabled' : '') +
       ' onclick="_skillsPage--;renderSkills(window._lastSkills)">&laquo;</button>';
-    html += '<span style="font-size:10px;color:var(--muted)">' + (_skillsPage + 1) + ' / ' + totalPages + '</span>';
-    html += '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" ' +
+    html += '<span style="font-size:var(--text-sm);color:var(--muted)">' + (_skillsPage + 1) + ' / ' + totalPages + '</span>';
+    html += '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:2px 8px" ' +
       (_skillsPage >= totalPages - 1 ? 'disabled' : '') +
       ' onclick="_skillsPage++;renderSkills(window._lastSkills)">&raquo;</button>';
     html += '</div>';

package/dashboard/js/render-utils.js

@@ -15,7 +15,7 @@ function renderToolChip(t) {
   var input = typeof t === 'string' ? {} : (t.input || {});
   var status = typeof t === 'string' ? null : (t.status || null);
   var style = _CC_TOOL_CHIP_STYLE[status] || _CC_TOOL_CHIP_STYLE.pending;
-  return '<div style="color:' + style.color + ';font-size:10px;font-family:monospace">'
+  return '<div style="color:' + style.color + ';font-size:var(--text-sm);font-family:monospace">'
     + '<span style="flex-shrink:0">' + style.marker + '</span> '
     + formatToolSummary(name, input)
     + '</div>';
@@ -91,25 +91,25 @@ function _renderJsonObj(obj, state) {
 
   function assistantBubbleHtml(text) {
     return '<div style="display:flex;align-items:baseline;gap:6px;margin:4px 0">' +
-      '<span style="color:var(--muted);font-size:10px;flex-shrink:0">&#9679;</span>' +
-      '<div style="background:var(--surface2);padding:8px 12px;border-radius:12px 12px 12px 2px;max-width:90%;font-size:12px;word-break:break-word">' + renderMd(text) + '</div>' +
+      '<span style="color:var(--muted);font-size:var(--text-sm);flex-shrink:0">&#9679;</span>' +
+      '<div style="background:var(--surface2);padding:8px 12px;border-radius:12px 12px 12px 2px;max-width:90%;font-size:var(--text-md);word-break:break-word">' + renderMd(text) + '</div>' +
       '</div>';
   }
   function toolUseHtml(name, input) {
     var summary = formatToolSummary(name || 'tool', input || {});
     var rawJson = escHtml(JSON.stringify(input || {}, null, 2).slice(0, 500));
-    return '<div style="display:flex;align-items:center;gap:4px;margin:2px 0;font-size:10px;color:var(--muted);font-family:monospace">' +
+    return '<div style="display:flex;align-items:center;gap:4px;margin:2px 0;font-size:var(--text-sm);color:var(--muted);font-family:monospace">' +
         '<span style="flex-shrink:0">&#9679;</span>' +
         '<span>' + summary + '</span>' +
         '<span style="cursor:pointer;opacity:0.6;margin-left:4px" onclick="var t=this.parentElement.nextElementSibling;t.style.display=t.style.display===\'none\'?\'block\':\'none\';this.textContent=t.style.display===\'none\'?\'[+]\':\'[-]\'">[+]</span>' +
       '</div>' +
-      '<div style="display:none;background:var(--bg);padding:4px 8px;border-radius:4px;margin:0 0 4px 16px;font-size:10px;font-family:monospace;white-space:pre-wrap;max-height:200px;overflow-y:auto;color:var(--muted)">' + rawJson + '</div>';
+      '<div style="display:none;background:var(--bg);padding:4px 8px;border-radius:4px;margin:0 0 4px 16px;font-size:var(--text-sm);font-family:monospace;white-space:pre-wrap;max-height:200px;overflow-y:auto;color:var(--muted)">' + rawJson + '</div>';
   }
   function toolResultHtml(text) {
     if (!text || text.length <= 10) return '';
     var truncated = text.length > 3000;
     var displayText = truncated ? text.slice(0, 3000) + '...' : text;
-    return '<div style="background:var(--surface);border-left:2px solid var(--border);padding:2px 8px;margin:0 0 2px 16px;font-size:9px;font-family:monospace;color:var(--muted);max-height:160px;overflow-y:auto;white-space:pre-wrap;cursor:pointer" onclick="this.style.maxHeight=this.style.maxHeight===\'160px\'?\'none\':\'160px\'">' + escHtml(displayText) + '</div>';
+    return '<div style="background:var(--surface);border-left:2px solid var(--border);padding:2px 8px;margin:0 0 2px 16px;font-size:var(--text-xs);font-family:monospace;color:var(--muted);max-height:160px;overflow-y:auto;white-space:pre-wrap;cursor:pointer" onclick="this.style.maxHeight=this.style.maxHeight===\'160px\'?\'none\':\'160px\'">' + escHtml(displayText) + '</div>';
   }
   function toolKey(name, input) {
     try { return String(name || 'tool') + '|' + JSON.stringify(input || {}); }
@@ -121,7 +121,7 @@ function _renderJsonObj(obj, state) {
     for (var i = 0; i < content.length; i++) {
       var block = content[i];
       if (block.type === 'thinking') {
-        parts.push('<div style="font-size:10px;color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
+        parts.push('<div style="font-size:var(--text-sm);color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
       }
       if (block.type === 'text' && block.text) {
         parts.push(assistantBubbleHtml(block.text));
@@ -144,7 +144,7 @@ function _renderJsonObj(obj, state) {
 
   if (obj.type === 'assistant.message_delta' && typeof obj.data?.deltaContent === 'string') {
     if (state.copilotReasoningPending) {
-      parts.push('<div style="font-size:10px;color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
+      parts.push('<div style="font-size:var(--text-sm);color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
       state.copilotReasoningPending = false;
     }
     state.copilotDeltaBuffer += obj.data.deltaContent;
@@ -152,7 +152,7 @@ function _renderJsonObj(obj, state) {
 
   if (obj.type === 'assistant.message') {
     if (state.copilotReasoningPending) {
-      parts.push('<div style="font-size:10px;color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
+      parts.push('<div style="font-size:var(--text-sm);color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
       state.copilotReasoningPending = false;
     }
     state.copilotDeltaBuffer = '';
@@ -221,13 +221,13 @@ function renderAgentOutput(text) {
 
   function flushCopilotPending() {
     if (state.copilotReasoningPending) {
-      fragments.push('<div style="font-size:10px;color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
+      fragments.push('<div style="font-size:var(--text-sm);color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
       state.copilotReasoningPending = false;
     }
     if (state.copilotDeltaBuffer) {
       fragments.push('<div style="display:flex;align-items:baseline;gap:6px;margin:4px 0">' +
-        '<span style="color:var(--muted);font-size:10px;flex-shrink:0">&#9679;</span>' +
-        '<div style="background:var(--surface2);padding:8px 12px;border-radius:12px 12px 12px 2px;max-width:90%;font-size:12px;word-break:break-word">' + renderMd(state.copilotDeltaBuffer) + '</div>' +
+        '<span style="color:var(--muted);font-size:var(--text-sm);flex-shrink:0">&#9679;</span>' +
+        '<div style="background:var(--surface2);padding:8px 12px;border-radius:12px 12px 12px 2px;max-width:90%;font-size:var(--text-md);word-break:break-word">' + renderMd(state.copilotDeltaBuffer) + '</div>' +
         '</div>');
       state.copilotDeltaBuffer = '';
     }
@@ -253,16 +253,16 @@ function renderAgentOutput(text) {
     // Human steering
     if (trimmed.startsWith('[human-steering]')) {
       var msg = trimmed.replace('[human-steering] ', '');
-      fragments.push('<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">' +
+      fragments.push('<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)">' +
         '<span style="margin-right:4px">❯</span>' + escHtml(msg) +
-        '<div style="font-size:9px;opacity:0.7;margin-top:2px">\u2713 Queued</div></div>');
+        '<div style="font-size:var(--text-xs);opacity:0.7;margin-top:2px">\u2713 Queued</div></div>');
       continue;
     }
 
     // Steering failed
     if (trimmed.startsWith('[steering-failed]')) {
       var failMsg = trimmed.replace('[steering-failed] ', '');
-      fragments.push('<div style="background:rgba(248,81,73,0.1);border:1px solid var(--red);color:var(--red);padding:6px 12px;border-radius:8px;margin:4px 0;font-size:11px">\u26A0 ' + escHtml(failMsg) + '</div>');
+      fragments.push('<div style="background:rgba(248,81,73,0.1);border:1px solid var(--red);color:var(--red);padding:6px 12px;border-radius:8px;margin:4px 0;font-size:var(--text-base)">\u26A0 ' + escHtml(failMsg) + '</div>');
       continue;
     }
 
@@ -293,10 +293,10 @@ function renderAgentOutput(text) {
 
     // Stderr
     if (trimmed.startsWith('[stderr]')) {
-      fragments.push('<div style="font-size:9px;color:var(--red);font-family:monospace;padding:1px 4px">' + escHtml(trimmed) + '</div>');
+      fragments.push('<div style="font-size:var(--text-xs);color:var(--red);font-family:monospace;padding:1px 4px">' + escHtml(trimmed) + '</div>');
     } else {
       // Plain text fallback
-      fragments.push('<div style="font-size:10px;color:var(--muted);font-family:monospace;padding:1px 4px">' + escHtml(trimmed) + '</div>');
+      fragments.push('<div style="font-size:var(--text-sm);color:var(--muted);font-family:monospace;padding:1px 4px">' + escHtml(trimmed) + '</div>');
     }
   }
 
@@ -340,15 +340,15 @@ function renderTerminalBanner(event) {
     headline = glyph + ' Task ended with ' + escHtml(String(reasonWord));
   }
   var extra = '';
-  if (event.summary) extra += '<div style="font-size:11px;margin-top:4px;opacity:0.9">' + escHtml(event.summary) + '</div>';
+  if (event.summary) extra += '<div style="font-size:var(--text-base);margin-top:4px;opacity:0.9">' + escHtml(event.summary) + '</div>';
   if (event.reason && event.reason !== event.summary) {
-    extra += '<div style="font-size:10px;margin-top:2px;opacity:0.75">' + escHtml(event.reason) + '</div>';
+    extra += '<div style="font-size:var(--text-sm);margin-top:2px;opacity:0.75">' + escHtml(event.reason) + '</div>';
   }
   if (event.prUrl) {
     var safeUrl = encodeURI(String(event.prUrl));
-    extra += '<div style="font-size:11px;margin-top:4px"><a href="' + escHtml(safeUrl) + '" target="_blank" rel="noopener" style="color:' + color + '">' + escHtml(event.prUrl) + '</a></div>';
+    extra += '<div style="font-size:var(--text-base);margin-top:4px"><a href="' + escHtml(safeUrl) + '" target="_blank" rel="noopener" style="color:' + color + '">' + escHtml(event.prUrl) + '</a></div>';
   }
-  return '<div style="background:' + bg + ';border:1px solid ' + color + ';padding:8px 12px;border-radius:8px;margin:8px 0;font-size:12px;color:' + color + '">' +
+  return '<div style="background:' + bg + ';border:1px solid ' + color + ';padding:8px 12px;border-radius:8px;margin:8px 0;font-size:var(--text-md);color:' + color + '">' +
     headline + extra +
     '</div>';
 }
@@ -399,7 +399,7 @@ function renderPager(opts) {
 function pinButton(pinKey, pinned, source, opts) {
   var extraStyle = (opts && opts.extraStyle) || '';
   return '<button class="pr-pager-btn pin-btn' + (pinned ? ' pinned' : '') +
-    '" style="font-size:9px;padding:2px 8px;' + extraStyle +
+    '" style="font-size:var(--text-xs);padding:2px 8px;' + extraStyle +
     '" data-pin-key="' + escHtml(pinKey) +
     '" onclick="event.stopPropagation();_togglePinAndRefresh(this.dataset.pinKey,\'' + source + '\')">' +
     (pinned ? 'Unpin' : 'Pin') + '</button>';