@yemi33/minions 0.1.2109 → 0.1.2111

package/dashboard/js/render-watches.js

@@ -172,25 +172,25 @@ function renderWatches(watchesData, opts) {
       '<td><span class="pr-id">' + escHtml(w.id) + '</span></td>' +
       '<td style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escHtml(w.description || w.target) + '">' + escHtml(w.target) + '</td>' +
       '<td><span class="dispatch-type explore">' + escHtml(targetLabel) + '</span></td>' +
-      '<td><span style="font-size:11px;color:var(--blue)">' + escHtml(condLabel) + '</span></td>' +
-      '<td><span style="font-size:10px">' + actionLabel + '</span></td>' +
-      '<td><span style="font-size:10px;color:var(--muted)">' + escHtml(_intervalToHuman(w.interval)) + '</span></td>' +
+      '<td><span style="font-size:var(--text-base);color:var(--blue)">' + escHtml(condLabel) + '</span></td>' +
+      '<td><span style="font-size:var(--text-sm)">' + actionLabel + '</span></td>' +
+      '<td><span style="font-size:var(--text-sm);color:var(--muted)">' + escHtml(_intervalToHuman(w.interval)) + '</span></td>' +
       '<td><span class="pr-agent">' + escHtml(w.owner || 'human') + '</span></td>' +
       '<td>' + statusBadge + '</td>' +
-      '<td title="Last triggered: ' + escHtml(lastTriggered) + '"><span style="font-size:11px">' + escHtml(triggerInfo) + '</span></td>' +
+      '<td title="Last triggered: ' + escHtml(lastTriggered) + '"><span style="font-size:var(--text-base)">' + escHtml(triggerInfo) + '</span></td>' +
       '<td><span class="pr-date">' + escHtml(lastChecked) + '</span></td>' +
       '<td style="white-space:nowrap">';
 
     // Pause/Resume button (F7: marks as `disabled` while POST in flight)
     var pauseBusyCls = _watchToggleInFlight.has(w.id) ? ' disabled' : '';
     if (w.status === 'active') {
-      html += '<button class="pr-pager-btn' + pauseBusyCls + '" style="font-size:9px;padding:1px 6px;color:var(--yellow);border-color:var(--yellow);margin-right:4px" onclick="event.stopPropagation();toggleWatchPause(\'' + escHtml(w.id) + '\',true)" title="Pause">&#x23F8;</button>';
+      html += '<button class="pr-pager-btn' + pauseBusyCls + '" style="font-size:var(--text-xs);padding:1px 6px;color:var(--yellow);border-color:var(--yellow);margin-right:4px" onclick="event.stopPropagation();toggleWatchPause(\'' + escHtml(w.id) + '\',true)" title="Pause">&#x23F8;</button>';
     } else if (w.status === 'paused') {
-      html += '<button class="pr-pager-btn' + pauseBusyCls + '" style="font-size:9px;padding:1px 6px;color:var(--green);border-color:var(--green);margin-right:4px" onclick="event.stopPropagation();toggleWatchPause(\'' + escHtml(w.id) + '\',false)" title="Resume">&#x25B6;</button>';
+      html += '<button class="pr-pager-btn' + pauseBusyCls + '" style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border-color:var(--green);margin-right:4px" onclick="event.stopPropagation();toggleWatchPause(\'' + escHtml(w.id) + '\',false)" title="Resume">&#x25B6;</button>';
     }
 
     // Delete button
-    html += '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--red);border-color:var(--red)" onclick="event.stopPropagation();deleteWatch(\'' + escHtml(w.id) + '\')" title="Delete">&#x2715;</button>';
+    html += '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--red);border-color:var(--red)" onclick="event.stopPropagation();deleteWatch(\'' + escHtml(w.id) + '\')" title="Delete">&#x2715;</button>';
     html += '</td></tr>';
   }
 
@@ -226,18 +226,18 @@ function _renderWatchActionDetail(action) {
     if (action.length === 0) return '';
     var stepHtml = action.map(function(step, i) {
       return '<div style="margin-top:4px;padding:8px;background:var(--surface2);border-radius:4px">' +
-        '<div style="font-size:11px;color:var(--muted)">Step ' + (i + 1) + '</div>' +
-        '<div style="font-size:12px"><strong>Type:</strong> <span class="dispatch-type explore">' + escHtml(step && step.type ? step.type : '?') + '</span></div>' +
-        (step && step.guard && step.guard.expr ? '<div style="font-size:11px;margin-top:2px"><strong>Guard:</strong> <code>' + escHtml(step.guard.expr) + '</code></div>' : '') +
-        (step && step.params && Object.keys(step.params).length ? '<div style="margin-top:4px;font-size:11px;font-family:monospace;white-space:pre-wrap">' + escHtml(JSON.stringify(step.params, null, 2)) + '</div>' : '') +
+        '<div style="font-size:var(--text-base);color:var(--muted)">Step ' + (i + 1) + '</div>' +
+        '<div style="font-size:var(--text-md)"><strong>Type:</strong> <span class="dispatch-type explore">' + escHtml(step && step.type ? step.type : '?') + '</span></div>' +
+        (step && step.guard && step.guard.expr ? '<div style="font-size:var(--text-base);margin-top:2px"><strong>Guard:</strong> <code>' + escHtml(step.guard.expr) + '</code></div>' : '') +
+        (step && step.params && Object.keys(step.params).length ? '<div style="margin-top:4px;font-size:var(--text-base);font-family:monospace;white-space:pre-wrap">' + escHtml(JSON.stringify(step.params, null, 2)) + '</div>' : '') +
         '</div>';
     }).join('');
     return '<div><strong style="color:var(--muted)">Follow-up Action Chain (' + action.length + ' step' + (action.length === 1 ? '' : 's') + '):</strong>' + stepHtml + '</div>';
   }
   if (action.type) {
     return '<div><strong style="color:var(--muted)">Follow-up Action:</strong> <span class="dispatch-type explore">' + escHtml(action.type) + '</span>' +
-      (action.guard && action.guard.expr ? '<div style="font-size:11px;margin-top:2px"><strong>Guard:</strong> <code>' + escHtml(action.guard.expr) + '</code></div>' : '') +
-      (action.params && Object.keys(action.params).length ? '<div style="margin-top:4px;padding:8px;background:var(--surface2);border-radius:4px;font-size:11px;font-family:monospace;white-space:pre-wrap">' + escHtml(JSON.stringify(action.params, null, 2)) + '</div>' : '') +
+      (action.guard && action.guard.expr ? '<div style="font-size:var(--text-base);margin-top:2px"><strong>Guard:</strong> <code>' + escHtml(action.guard.expr) + '</code></div>' : '') +
+      (action.params && Object.keys(action.params).length ? '<div style="margin-top:4px;padding:8px;background:var(--surface2);border-radius:4px;font-size:var(--text-base);font-family:monospace;white-space:pre-wrap">' + escHtml(JSON.stringify(action.params, null, 2)) + '</div>' : '') +
       '</div>';
   }
   return '';
@@ -248,7 +248,7 @@ function _renderWatchActionDetail(action) {
 function _renderWatchRequiresDetail(requires) {
   if (!Array.isArray(requires) || requires.length === 0) return '';
   var rows = requires.map(function(r, i) {
-    return '<div style="margin-top:4px;padding:6px 8px;background:var(--surface2);border-radius:4px;font-size:11px">' +
+    return '<div style="margin-top:4px;padding:6px 8px;background:var(--surface2);border-radius:4px;font-size:var(--text-base)">' +
       '<span style="color:var(--muted)">[' + (i + 1) + ']</span> ' +
       escHtml(r && r.target ? r.target : '?') +
       ' <span class="dispatch-type explore">' + escHtml(r && r.targetType ? r.targetType : '?') + '</span>' +
@@ -267,7 +267,7 @@ function _renderWatchRequiresDetail(requires) {
 // watches that were created before Phase 6.2 don't show a half-empty table.
 function _renderWatchHistoryDetail(history) {
   if (!Array.isArray(history) || history.length === 0) {
-    return '<div style="color:var(--muted);font-style:italic;font-size:11px">no history yet — watch has not been checked, or pre-dates the history feature</div>';
+    return '<div style="color:var(--muted);font-style:italic;font-size:var(--text-base)">no history yet — watch has not been checked, or pre-dates the history feature</div>';
   }
   // Render newest-first for readability — the engine stores oldest-first.
   var entries = history.slice().reverse();
@@ -285,7 +285,7 @@ function _renderWatchHistoryDetail(history) {
     '</tr>';
   }).join('');
   return '<div><strong style="color:var(--muted)">Evaluation History (' + history.length + ' check' + (history.length === 1 ? '' : 's') + ', newest first):</strong>' +
-    '<table style="margin-top:4px;font-size:11px;border-collapse:collapse;width:100%"><tbody>' + rows + '</tbody></table>' +
+    '<table style="margin-top:4px;font-size:var(--text-base);border-collapse:collapse;width:100%"><tbody>' + rows + '</tbody></table>' +
     '</div>';
 }
 
@@ -302,12 +302,12 @@ function openWatchDetail(id) {
   // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: watch description/target/id)
   document.getElementById('modal-title').innerHTML = escHtml(w.description || w.target) +
     ' <div style="display:flex;gap:4px;margin-top:4px">' +
-      (w.status === 'active' ? '<button class="pr-pager-btn" style="font-size:10px;padding:2px 10px;color:var(--yellow)" onclick="toggleWatchPause(\'' + escHtml(w.id) + '\',true);closeModal()">Pause</button>' : '') +
-      (w.status === 'paused' ? '<button class="pr-pager-btn" style="font-size:10px;padding:2px 10px;color:var(--green)" onclick="toggleWatchPause(\'' + escHtml(w.id) + '\',false);closeModal()">Resume</button>' : '') +
-      '<button class="pr-pager-btn" style="font-size:10px;padding:2px 10px;color:var(--red)" onclick="deleteWatch(\'' + escHtml(w.id) + '\');closeModal()">Delete</button>' +
+      (w.status === 'active' ? '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 10px;color:var(--yellow)" onclick="toggleWatchPause(\'' + escHtml(w.id) + '\',true);closeModal()">Pause</button>' : '') +
+      (w.status === 'paused' ? '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 10px;color:var(--green)" onclick="toggleWatchPause(\'' + escHtml(w.id) + '\',false);closeModal()">Resume</button>' : '') +
+      '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 10px;color:var(--red)" onclick="deleteWatch(\'' + escHtml(w.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(w.id) + '</div>' +
     '<div><strong style="color:var(--muted)">Target:</strong> ' + escHtml(w.target) + '</div>' +
     '<div><strong style="color:var(--muted)">Target Type:</strong> <span class="dispatch-type explore">' + escHtml(targetLabel) + '</span></div>' +
@@ -330,14 +330,14 @@ function openWatchDetail(id) {
     '<div><strong style="color:var(--muted)">Created:</strong> ' + escHtml(createdAt) + '</div>' +
     '<div><strong style="color:var(--muted)">Last Checked:</strong> ' + escHtml(lastChecked) + '</div>' +
     '<div><strong style="color:var(--muted)">Last Triggered:</strong> ' + escHtml(lastTriggered) + '</div>' +
-    (w._lastTriggerMessage ? '<div><strong style="color:var(--muted)">Last Trigger Message:</strong><div style="margin-top:4px;padding:8px;background:var(--surface2);border-radius:4px;font-size:11px">' + escHtml(w._lastTriggerMessage) + '</div></div>' : '') +
+    (w._lastTriggerMessage ? '<div><strong style="color:var(--muted)">Last Trigger Message:</strong><div style="margin-top:4px;padding:8px;background:var(--surface2);border-radius:4px;font-size:var(--text-base)">' + escHtml(w._lastTriggerMessage) + '</div></div>' : '') +
     (w.project ? '<div><strong style="color:var(--muted)">Project:</strong> ' + escHtml(w.project) + '</div>' : '') +
     (w.description ? '<div><strong style="color:var(--muted)">Description:</strong> ' + escHtml(w.description) + '</div>' : '') +
     // P-w15f1d4b — Phase 7.2: reserve a placeholder for the lazily-fetched
     // evaluation history table. The fetch below populates it once
     // /api/watches/:id/history resolves; failures fall back to the inline
     // _history copy from /api/watches (best-effort) or a "no history" hint.
-    '<div id="watch-history-' + escHtml(w.id) + '"><div style="color:var(--muted);font-style:italic;font-size:11px">Loading history…</div></div>' +
+    '<div id="watch-history-' + escHtml(w.id) + '"><div style="color:var(--muted);font-style:italic;font-size:var(--text-base)">Loading history…</div></div>' +
   '</div>';
 
   // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escHtml() by watch detail renderers (fields: watch id/target/owner/description/action params/requires/history/result messages)
@@ -459,29 +459,29 @@ function _watchFormHtml() {
   var projOpts = '<option value="">Any</option>' + (cmdProjects || []).map(function(p) { return '<option value="' + escHtml(p.name) + '">' + escHtml(p.name) + '</option>'; }).join('');
 
   return '<div style="display:flex;flex-direction:column;gap:12px;font-family:inherit">' +
-    '<div id="watch-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="watch-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)">Target (e.g. PR number, work item ID, meeting/plan/schedule/pipeline/dispatch/agent ID)<input id="watch-edit-target" placeholder="e.g. 1057, W-abc123, M-xyz, schedule-42" style="' + inputStyle + '"></label>' +
     '<label style="color:var(--text);font-size:var(--text-md)">Target Type<select id="watch-edit-target-type" style="' + inputStyle + '" onchange="_updateWatchConditionOptions()">' + ttOpts + '</select></label>' +
     '<label style="color:var(--text);font-size:var(--text-md)">Condition<select id="watch-edit-condition" style="' + inputStyle + '">' + condOpts + '</select></label>' +
-    '<label style="color:var(--text);font-size:var(--text-md)">Check Interval <span style="font-size:10px;color:var(--muted)">(e.g. 5m, 15m, 1h — default 5m)</span><input id="watch-edit-interval" placeholder="5m" style="' + inputStyle + '"></label>' +
+    '<label style="color:var(--text);font-size:var(--text-md)">Check Interval <span style="font-size:var(--text-sm);color:var(--muted)">(e.g. 5m, 15m, 1h — default 5m)</span><input id="watch-edit-interval" placeholder="5m" style="' + inputStyle + '"></label>' +
     '<label style="color:var(--text);font-size:var(--text-md)">Owner (who gets notified)<select id="watch-edit-owner" style="' + inputStyle + '">' + agentOpts + '</select></label>' +
     '<label style="color:var(--text);font-size:var(--text-md)">Project<select id="watch-edit-project" style="' + inputStyle + '">' + projOpts + '</select></label>' +
     '<label style="color:var(--text);font-size:var(--text-md)">Description<input id="watch-edit-desc" placeholder="Optional description" style="' + inputStyle + '"></label>' +
-    '<label style="color:var(--text);font-size:var(--text-md)">Stop After N Triggers <span style="font-size:10px;color:var(--muted)">(0 = run forever, 1 = expire on first match)</span><input id="watch-edit-stop-after" type="number" value="0" min="0" style="' + inputStyle + '"></label>' +
+    '<label style="color:var(--text);font-size:var(--text-md)">Stop After N Triggers <span style="font-size:var(--text-sm);color:var(--muted)">(0 = run forever, 1 = expire on first match)</span><input id="watch-edit-stop-after" type="number" value="0" min="0" style="' + inputStyle + '"></label>' +
     '<label style="color:var(--text);font-size:var(--text-md)">On Each Poll (if condition not met)<select id="watch-edit-on-not-met" style="' + inputStyle + '"><option value="">None — do nothing</option><option value="notify">Notify — write to inbox each poll</option></select></label>' +
     // P-w14e7a8c — Phase 7.1: action chain editor (step list + add/remove)
     '<div style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;display:flex;flex-direction:column;gap:8px">' +
       '<div style="color:var(--text);font-size:var(--text-md);display:flex;align-items:center;justify-content:space-between">' +
-        '<span>Follow-up Action(s) <span style="font-size:10px;color:var(--muted)">(runs after the inbox notification when the watch fires; 1 step = single, 2+ = chain)</span></span>' +
-        '<button type="button" class="pr-pager-btn" style="font-size:10px;padding:2px 8px;color:var(--green);border-color:var(--green)" onclick="_addWatchStepRow()">+ Add step</button>' +
+        '<span>Follow-up Action(s) <span style="font-size:var(--text-sm);color:var(--muted)">(runs after the inbox notification when the watch fires; 1 step = single, 2+ = chain)</span></span>' +
+        '<button type="button" class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 8px;color:var(--green);border-color:var(--green)" onclick="_addWatchStepRow()">+ Add step</button>' +
       '</div>' +
       '<div id="watch-edit-steps"></div>' +
     '</div>' +
     // P-w14e7a8c — Phase 7.1: requires editor (cross-target AND-join rows)
     '<div style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;display:flex;flex-direction:column;gap:8px">' +
       '<div style="color:var(--text);font-size:var(--text-md);display:flex;align-items:center;justify-content:space-between">' +
-        '<span>Requires <span style="font-size:10px;color:var(--muted)">(cross-target AND-join — every requirement must also be true to fire)</span></span>' +
-        '<button type="button" class="pr-pager-btn" style="font-size:10px;padding:2px 8px;color:var(--green);border-color:var(--green)" onclick="_addRequireRow()">+ Add requirement</button>' +
+        '<span>Requires <span style="font-size:var(--text-sm);color:var(--muted)">(cross-target AND-join — every requirement must also be true to fire)</span></span>' +
+        '<button type="button" class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 8px;color:var(--green);border-color:var(--green)" onclick="_addRequireRow()">+ Add requirement</button>' +
       '</div>' +
       '<div id="watch-edit-requires"></div>' +
     '</div>' +
@@ -518,12 +518,12 @@ function _addWatchStepRow(initial) {
   row.innerHTML =
     '<div style="display:flex;align-items:center;justify-content:space-between;gap:8px">' +
       '<select id="watch-step-' + idx + '-type" style="' + inputStyle + ';margin-top:0;flex:1" onchange="_updateWatchStepParamsHint(' + idx + ')">' + actionOpts + '</select>' +
-      '<button type="button" class="pr-pager-btn" style="font-size:10px;padding:2px 8px;color:var(--red);border-color:var(--red)" onclick="_removeWatchStepRow(' + idx + ')">Remove</button>' +
+      '<button type="button" class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 8px;color:var(--red);border-color:var(--red)" onclick="_removeWatchStepRow(' + idx + ')">Remove</button>' +
     '</div>' +
-    '<label style="color:var(--text);font-size:11px">Params (JSON) <span style="font-size:10px;color:var(--muted)" id="watch-step-' + idx + '-params-hint"></span>' +
+    '<label style="color:var(--text);font-size:var(--text-base)">Params (JSON) <span style="font-size:var(--text-sm);color:var(--muted)" id="watch-step-' + idx + '-params-hint"></span>' +
       '<textarea id="watch-step-' + idx + '-params" rows="3" placeholder=\'{"title": "Re-check {{target}} after merge"}\' style="' + inputStyle + ';font-family:monospace"></textarea>' +
     '</label>' +
-    '<label style="color:var(--text);font-size:11px">Guard expression <span style="font-size:10px;color:var(--muted)">(optional — skip step if expr is false; e.g. <code>newState.mergeable === true</code>)</span>' +
+    '<label style="color:var(--text);font-size:var(--text-base)">Guard expression <span style="font-size:var(--text-sm);color:var(--muted)">(optional — skip step if expr is false; e.g. <code>newState.mergeable === true</code>)</span>' +
       '<input id="watch-step-' + idx + '-guard" placeholder="" style="' + inputStyle + ';font-family:monospace">' +
     '</label>';
   container.appendChild(row);
@@ -579,10 +579,10 @@ function _addRequireRow(initial) {
   row.style.cssText = 'display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:6px;align-items:end';
   // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: target type registry values/labels)
   row.innerHTML =
-    '<label style="color:var(--text);font-size:11px;margin:0">Target<input id="watch-require-' + idx + '-target" placeholder="e.g. PR-123, pipeline-X" style="' + inputStyle + '"></label>' +
-    '<label style="color:var(--text);font-size:11px;margin:0">Target Type<select id="watch-require-' + idx + '-target-type" style="' + inputStyle + '" onchange="_updateRequireConditionOptions(' + idx + ')">' + ttOpts + '</select></label>' +
-    '<label style="color:var(--text);font-size:11px;margin:0">Condition<select id="watch-require-' + idx + '-condition" style="' + inputStyle + '"></select></label>' +
-    '<button type="button" class="pr-pager-btn" style="font-size:10px;padding:6px 8px;color:var(--red);border-color:var(--red)" onclick="_removeRequireRow(' + idx + ')">Remove</button>';
+    '<label style="color:var(--text);font-size:var(--text-base);margin:0">Target<input id="watch-require-' + idx + '-target" placeholder="e.g. PR-123, pipeline-X" style="' + inputStyle + '"></label>' +
+    '<label style="color:var(--text);font-size:var(--text-base);margin:0">Target Type<select id="watch-require-' + idx + '-target-type" style="' + inputStyle + '" onchange="_updateRequireConditionOptions(' + idx + ')">' + ttOpts + '</select></label>' +
+    '<label style="color:var(--text);font-size:var(--text-base);margin:0">Condition<select id="watch-require-' + idx + '-condition" style="' + inputStyle + '"></select></label>' +
+    '<button type="button" class="pr-pager-btn" style="font-size:var(--text-sm);padding:6px 8px;color:var(--red);border-color:var(--red)" onclick="_removeRequireRow(' + idx + ')">Remove</button>';
   container.appendChild(row);
   if (initTarget) document.getElementById('watch-require-' + idx + '-target').value = initTarget;
   if (initTT) document.getElementById('watch-require-' + idx + '-target-type').value = initTT;
@@ -625,7 +625,7 @@ function _updateWatchConditionOptions() {
 
 function _renderCreateWatchModal() {
   document.getElementById('modal-title').innerHTML = 'Create Watch' +
-    ' <button class="pr-pager-btn" style="font-size:10px;padding:2px 12px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="submitWatch()">Create</button>';
+    ' <button class="pr-pager-btn" style="font-size:var(--text-sm);padding:2px 12px;color:var(--green);border-color:var(--green);margin-left:8px" onclick="submitWatch()">Create</button>';
   // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escHtml() by _watchFormHtml() (fields: target/action registries, project names, agent ids/names)
   document.getElementById('modal-body').innerHTML = _watchFormHtml();
   document.getElementById('modal-body').style.whiteSpace = 'normal';

package/dashboard/js/render-work-items.js

@@ -87,15 +87,15 @@ function getWiRetryState(id) {
 function wiRetryBtn(item) {
   const rs = getWiRetryState(item.id);
   if (rs && rs.status === 'pending') {
-    return '<span style="font-size:9px;padding:1px 6px;color:var(--yellow);border:1px solid rgba(210,153,34,0.35);background:rgba(210,153,34,0.1);border-radius:3px;cursor:wait;margin-left:4px">Retrying\u2026</span>';
+    return '<span style="font-size:var(--text-xs);padding:1px 6px;color:var(--yellow);border:1px solid rgba(210,153,34,0.35);background:rgba(210,153,34,0.1);border-radius:3px;cursor:wait;margin-left:4px">Retrying\u2026</span>';
   }
   if (rs && rs.status === 'done') {
-    return '<span style="font-size:9px;padding:1px 6px;color:var(--green);border:1px solid rgba(63,185,80,0.35);background:rgba(63,185,80,0.1);border-radius:3px;margin-left:4px">Requeued</span>';
+    return '<span style="font-size:var(--text-xs);padding:1px 6px;color:var(--green);border:1px solid rgba(63,185,80,0.35);background:rgba(63,185,80,0.1);border-radius:3px;margin-left:4px">Requeued</span>';
   }
   if (rs && rs.status === 'error') {
-    return '<span style="font-size:9px;padding:1px 6px;color:var(--red);border:1px solid rgba(248,81,73,0.35);background:rgba(248,81,73,0.1);border-radius:3px;margin-left:4px;cursor:pointer" title="' + escapeHtml(rs.message || 'Retry failed') + ' — click to try again" onclick="event.stopPropagation();retryWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')">Retry failed</span>';
+    return '<span style="font-size:var(--text-xs);padding:1px 6px;color:var(--red);border:1px solid rgba(248,81,73,0.35);background:rgba(248,81,73,0.1);border-radius:3px;margin-left:4px;cursor:pointer" title="' + escapeHtml(rs.message || 'Retry failed') + ' — click to try again" onclick="event.stopPropagation();retryWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')">Retry failed</span>';
   }
-  return '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--yellow);border-color:var(--yellow);margin-left:4px" onclick="event.stopPropagation();retryWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')">Retry</button>';
+  return '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--yellow);border-color:var(--yellow);margin-left:4px" onclick="event.stopPropagation();retryWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')">Retry</button>';
 }
 
 function wiRow(item) {
@@ -106,9 +106,9 @@ function wiRow(item) {
   const typeBadge = (t) => '<span class="dispatch-type ' + (t || 'implement') + '">' + escapeHtml(t || 'implement') + '</span>';
   const priBadge = (p) => '<span class="prd-item-priority ' + (p || '') + '">' + escapeHtml(p || 'medium') + '</span>';
   const prLink = item._pr
-    ? '<a class="pr-title" href="' + escapeHtml(item._prUrl || '#') + '" target="_blank" style="font-size:10px">' + escapeHtml(item._pr) + '</a>'
+    ? '<a class="pr-title" href="' + escapeHtml(item._prUrl || '#') + '" target="_blank" style="font-size:var(--text-sm)">' + escapeHtml(item._pr) + '</a>'
     : (item.branchStrategy === 'shared-branch' && item.status === 'done')
-      ? '<span style="font-size:9px;color:var(--muted)" title="Part of shared branch — aggregate PR created at verify stage">shared branch</span>'
+      ? '<span style="font-size:var(--text-xs);color:var(--muted)" title="Part of shared branch — aggregate PR created at verify stage">shared branch</span>'
       : '<span style="color:var(--muted)">—</span>';
   // PR follow-up chip (W-mpej3cox00099466) — surfaced when the WI was spun
   // off from a PR comment via meta.pr_followup. Links to the parent PR.
@@ -118,21 +118,21 @@ function wiRow(item) {
     var prRef = prFollowup.parent_pr_id || prFollowup.parent_pr_url;
     var prNumMatch = String(prRef).match(/(\d+)(?!.*\d)/);
     var prLabel = prNumMatch ? ('PR #' + prNumMatch[1]) : 'parent PR';
-    followupChip = ' <a class="pr-badge draft" style="font-size:8px;text-decoration:none" target="_blank" rel="noopener" href="' + escapeHtml(prFollowup.parent_pr_url) + '" title="Follow-up dispatched from ' + escapeHtml(prRef) + (prFollowup.parent_comment_author ? ' by ' + escapeHtml(prFollowup.parent_comment_author) : '') + '" onclick="event.stopPropagation()">&#8617; from ' + escapeHtml(prLabel) + '</a>';
+    followupChip = ' <a class="pr-badge draft" style="font-size:var(--text-xs);text-decoration:none" target="_blank" rel="noopener" href="' + escapeHtml(prFollowup.parent_pr_url) + '" title="Follow-up dispatched from ' + escapeHtml(prRef) + (prFollowup.parent_comment_author ? ' by ' + escapeHtml(prFollowup.parent_comment_author) : '') + '" onclick="event.stopPropagation()">&#8617; from ' + escapeHtml(prLabel) + '</a>';
   }
   return '<tr data-wi-id="' + escapeHtml(item.id) + '" style="cursor:pointer" onclick="if(shouldIgnoreSelectionClick(event))return;openWorkItemDetail(\'' + escapeHtml(item.id) + '\')">' +
     '<td><span class="pr-id">' + escapeHtml(item.id || '') + '</span></td>' +
     '<td style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escapeHtml((item.title || '').slice(0, 200)) + '">' + escapeHtml(item.title || '') + followupChip + '</td>' +
-    '<td><span style="font-size:10px;color:var(--muted)">' + escapeHtml(item._source || '') + '</span>' +
-      (item.scope === 'fan-out' ? ' <span class="pr-badge ' + (item.status === 'done' || item.status === 'failed' ? 'draft' : 'building') + '" style="font-size:8px">fan-out</span>' : '') + '</td>' +
+    '<td><span style="font-size:var(--text-sm);color:var(--muted)">' + escapeHtml(item._source || '') + '</span>' +
+      (item.scope === 'fan-out' ? ' <span class="pr-badge ' + (item.status === 'done' || item.status === 'failed' ? 'draft' : 'building') + '" style="font-size:var(--text-xs)">fan-out</span>' : '') + '</td>' +
     '<td>' + typeBadge(item.type) + '</td>' +
     '<td>' + priBadge(item.priority) + '</td>' +
     '<td>' + statusBadge(item.status || 'pending') +
-      (item._reopened ? ' <span style="font-size:9px;color:var(--purple);margin-left:4px" title="This item was reopened from a previously completed state">reopened</span>' : '') +
-      (item._pendingReason && item.status === 'pending' && item._pendingReason !== 'already_dispatched' ? ' <span style="font-size:9px;color:var(--muted);margin-left:4px" title="Pending reason: ' + escapeHtml(item._pendingReason) + '">' + escapeHtml(item._pendingReason.replace(/_/g, ' ')) + '</span>' : '') +
-      (item._pendingReason === 'already_dispatched' && item.status === 'pending' ? ' <span style="font-size:9px;color:var(--blue);margin-left:4px" title="In dispatch queue, waiting to be assigned">queued</span>' : '') +
+      (item._reopened ? ' <span style="font-size:var(--text-xs);color:var(--purple);margin-left:4px" title="This item was reopened from a previously completed state">reopened</span>' : '') +
+      (item._pendingReason && item.status === 'pending' && item._pendingReason !== 'already_dispatched' ? ' <span style="font-size:var(--text-xs);color:var(--muted);margin-left:4px" title="Pending reason: ' + escapeHtml(item._pendingReason) + '">' + escapeHtml(item._pendingReason.replace(/_/g, ' ')) + '</span>' : '') +
+      (item._pendingReason === 'already_dispatched' && item.status === 'pending' ? ' <span style="font-size:var(--text-xs);color:var(--blue);margin-left:4px" title="In dispatch queue, waiting to be assigned">queued</span>' : '') +
       (item._managedSpawnPartial && Array.isArray(item._managedSpawnPartial.failed) && item._managedSpawnPartial.failed.length
-        ? ' <span style="font-size:9px;color:var(--yellow);margin-left:4px;border:1px solid var(--yellow);padding:0 4px;border-radius:6px" title="managed-spawn: '
+        ? ' <span style="font-size:var(--text-xs);color:var(--yellow);margin-left:4px;border:1px solid var(--yellow);padding:0 4px;border-radius:6px" title="managed-spawn: '
             + escapeHtml(((item._managedSpawnPartial.healthy || []).length) + '/' + (((item._managedSpawnPartial.healthy || []).length) + item._managedSpawnPartial.failed.length))
             + ' healthy — failed: '
             + escapeHtml(item._managedSpawnPartial.failed.map(function(f){ return (f && f.name) || '?'; }).join(', '))
@@ -140,18 +140,18 @@ function wiRow(item) {
             + escapeHtml(((item._managedSpawnPartial.healthy || []).length) + '/' + (((item._managedSpawnPartial.healthy || []).length) + item._managedSpawnPartial.failed.length))
             + ' healthy</span>'
         : '') +
-      (item._skipReason && item.status === 'pending' ? ' <span style="font-size:9px;color:var(--yellow);margin-left:4px" title="Dispatch blocked: ' + escapeHtml(item._skipReason) + (item._blockedBy ? ' (by ' + escapeHtml(item._blockedBy) + ')' : '') + '">' + escapeHtml(item._skipReason.replace(/_/g, ' ')) + (item._blockedBy ? ' <span style="color:var(--muted)">(' + escapeHtml(item._blockedBy) + ')</span>' : '') + '</span>' : '') +
+      (item._skipReason && item.status === 'pending' ? ' <span style="font-size:var(--text-xs);color:var(--yellow);margin-left:4px" title="Dispatch blocked: ' + escapeHtml(item._skipReason) + (item._blockedBy ? ' (by ' + escapeHtml(item._blockedBy) + ')' : '') + '">' + escapeHtml(item._skipReason.replace(/_/g, ' ')) + (item._blockedBy ? ' <span style="color:var(--muted)">(' + escapeHtml(item._blockedBy) + ')</span>' : '') + '</span>' : '') +
       (item.status === 'failed' ? ' ' + wiRetryBtn(item) : '') +
     '</td>' +
     '<td>' +
       (item.completedAgents && item.completedAgents.length > 0
         ? '<span class="pr-agent">' + escapeHtml(item.completedAgents.join(', ')) + '</span>'
         : '<span class="pr-agent">' + escapeHtml(item.dispatched_to || item.agent || '—') + '</span>') +
-      (item.failReason ? '<span style="display:block;font-size:9px;color:var(--red)" title="' + escapeHtml(item.failReason) + '">' + escapeHtml(item.failReason.slice(0, 30)) + '</span>' : '') +
+      (item.failReason ? '<span style="display:block;font-size:var(--text-xs);color:var(--red)" title="' + escapeHtml(item.failReason) + '">' + escapeHtml(item.failReason.slice(0, 30)) + '</span>' : '') +
     '</td>' +
     '<td>' + prLink + '</td>' +
     '<td><span class="pr-date">' + escapeHtml((item.created || '').slice(0, 16).replace('T', ' ')) + '</span></td>' +
-    '<td style="white-space:nowrap;font-size:9px;color:var(--muted)">' +
+    '<td style="white-space:nowrap;font-size:var(--text-xs);color:var(--muted)">' +
       (function() {
         // /api/status slims the full arrays into integer counts
         // (dashboard.js:1796-1797: referencesCount / acceptanceCriteriaCount).
@@ -168,11 +168,11 @@ function wiRow(item) {
       })() +
     '</td>' +
     '<td style="white-space:nowrap">' +
-      ((item.status === 'pending' || item.status === 'failed') ? '<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();editWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Edit work item">&#x270E;</button>' : '') +
-      ((item.status === 'done' || item.status === 'failed') ? '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--muted);border-color:var(--border);margin-right:4px" onclick="event.stopPropagation();archiveWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Archive work item">&#x1F4E6;</button>' : '') +
-      ((item.status === 'done' || item.status === 'failed') && !item._humanFeedback ? '<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();feedbackWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Give feedback">&#x1F44D;&#x1F44E;</button>' : (item._humanFeedback ? '<span style="font-size:9px" title="Feedback given">' + (item._humanFeedback.rating === 'up' ? '&#x1F44D;' : '&#x1F44E;') + '</span> ' : '')) +
-      ((item.status === 'pending' || item.status === 'dispatched' || item.status === 'queued' || item.status === 'failed') ? '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--orange);border-color:var(--orange);margin-right:4px" onclick="event.stopPropagation();cancelWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Cancel work item and kill agent">&#x1F6AB;</button>' : '') +
-      '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--red);border-color:var(--red)" onclick="event.stopPropagation();deleteWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Delete work item and kill agent">&#x2715;</button>' +
+      ((item.status === 'pending' || item.status === 'failed') ? '<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();editWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Edit work item">&#x270E;</button>' : '') +
+      ((item.status === 'done' || item.status === 'failed') ? '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--muted);border-color:var(--border);margin-right:4px" onclick="event.stopPropagation();archiveWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Archive work item">&#x1F4E6;</button>' : '') +
+      ((item.status === 'done' || item.status === 'failed') && !item._humanFeedback ? '<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();feedbackWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Give feedback">&#x1F44D;&#x1F44E;</button>' : (item._humanFeedback ? '<span style="font-size:var(--text-xs)" title="Feedback given">' + (item._humanFeedback.rating === 'up' ? '&#x1F44D;' : '&#x1F44E;') + '</span> ' : '')) +
+      ((item.status === 'pending' || item.status === 'dispatched' || item.status === 'queued' || item.status === 'failed') ? '<button class="pr-pager-btn" style="font-size:var(--text-xs);padding:1px 6px;color:var(--orange);border-color:var(--orange);margin-right:4px" onclick="event.stopPropagation();cancelWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Cancel work item and kill agent">&#x1F6AB;</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();deleteWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Delete work item and kill agent">&#x2715;</button>' +
     '</td>' +
   '</tr>';
 }
@@ -393,7 +393,7 @@ async function toggleWorkItemArchive() {
     const items = await fetch('/api/work-items/archive').then(r => r.json());
     if (!items.length) { el.innerHTML = '<p class="empty">No archived work items.</p>'; return; }
     // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escapeHtml() (fields: archived work item id/title/type/status/agent)
-    el.innerHTML = '<div style="font-size:10px;color:var(--muted);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Archived (' + items.length + ')</div>' +
+    el.innerHTML = '<div style="font-size:var(--text-sm);color:var(--muted);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Archived (' + items.length + ')</div>' +
       '<div class="pr-table-wrap"><table class="pr-table"><thead><tr><th>ID</th><th>Title</th><th>Type</th><th>Status</th><th>Agent</th><th>Archived</th></tr></thead><tbody>' +
       items.map(function(i) {
         return '<tr style="opacity:0.6">' +
@@ -447,8 +447,8 @@ function feedbackWorkItem(id, source) {
   document.getElementById('modal-body').innerHTML =
     '<div style="display:flex;flex-direction:column;gap:16px">' +
       '<div style="display:flex;gap:16px;justify-content:center">' +
-        '<button id="fb-up" onclick="_selectRating(\'up\')" style="font-size:36px;background:none;border:2px solid var(--border);border-radius:12px;padding:12px 20px;cursor:pointer;transition:all 0.2s">&#x1F44D;</button>' +
-        '<button id="fb-down" onclick="_selectRating(\'down\')" style="font-size:36px;background:none;border:2px solid var(--border);border-radius:12px;padding:12px 20px;cursor:pointer;transition:all 0.2s">&#x1F44E;</button>' +
+        '<button id="fb-up" onclick="_selectRating(\'up\')" style="font-size:var(--text-display);background:none;border:2px solid var(--border);border-radius:12px;padding:12px 20px;cursor:pointer;transition:all 0.2s">&#x1F44D;</button>' +
+        '<button id="fb-down" onclick="_selectRating(\'down\')" style="font-size:var(--text-display);background:none;border:2px solid var(--border);border-radius:12px;padding:12px 20px;cursor:pointer;transition:all 0.2s">&#x1F44E;</button>' +
       '</div>' +
       '<textarea id="feedback-comment" rows="3" style="width:100%;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;resize:vertical" placeholder="What was good or needs improvement?"></textarea>' +
       '<div style="display:flex;justify-content:flex-end;gap:8px">' +
@@ -587,14 +587,14 @@ async function _submitCreateWorkItem(e) {
 }
 
 function _wiRenderDetail(item) {
-  const field = (label, value) => value ? '<div style="margin-bottom:8px"><span style="color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:0.5px">' + label + '</span><div style="margin-top:2px">' + value + '</div></div>' : '';
+  const field = (label, value) => value ? '<div style="margin-bottom:8px"><span style="color:var(--muted);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:0.5px">' + label + '</span><div style="margin-top:2px">' + value + '</div></div>' : '';
   const badge = (cls, text) => '<span class="pr-badge ' + cls + '">' + escapeHtml(text) + '</span>';
   const statusCls = item.status === 'failed' ? 'rejected' : item.status === 'dispatched' ? 'building' : item.status === 'done' ? 'approved' : 'active';
 
-  let html = '<div style="display:flex;flex-direction:column;gap:4px;font-size:13px">';
+  let html = '<div style="display:flex;flex-direction:column;gap:4px;font-size:var(--text-lg)">';
   html += '<div style="display:flex;gap:8px;align-items:center;margin-bottom:8px">' +
     badge(statusCls, item.status || 'pending') +
-    (item._reopened ? ' <span style="font-size:9px;color:var(--purple);margin-left:4px" title="This item was reopened from a previously completed state">reopened</span>' : '') + ' ' +
+    (item._reopened ? ' <span style="font-size:var(--text-xs);color:var(--purple);margin-left:4px" title="This item was reopened from a previously completed state">reopened</span>' : '') + ' ' +
     '<span class="dispatch-type ' + (item.type || 'implement') + '">' + escapeHtml(item.type || 'implement') + '</span>' +
     '<span class="prd-item-priority ' + (item.priority || '') + '">' + escapeHtml(item.priority || 'medium') + '</span>' +
     '</div>';
@@ -611,7 +611,7 @@ function _wiRenderDetail(item) {
   } else {
     _descHtml = escapeHtml(item.title || '—');
   }
-  html += field('Description', '<div id="wi-detail-desc" style="font-size:12px;max-height:320px;overflow-y:auto;padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm)">' + _descHtml + '</div>');
+  html += field('Description', '<div id="wi-detail-desc" style="font-size:var(--text-md);max-height:320px;overflow-y:auto;padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm)">' + _descHtml + '</div>');
   html += field('Agent', escapeHtml(item.dispatched_to || item.agent || 'Auto'));
   html += field('Source', escapeHtml(item._source || 'central'));
   if (item.created) html += field('Created', escapeHtml(formatLocalDateTime(item.created)));
@@ -623,7 +623,7 @@ function _wiRenderDetail(item) {
     var _msp = item._managedSpawnPartial;
     var _mspHealthy = Array.isArray(_msp.healthy) ? _msp.healthy : [];
     var _mspTotal = _mspHealthy.length + _msp.failed.length;
-    var _mspBody = '<div style="color:var(--yellow);font-size:11px;margin-bottom:6px">'
+    var _mspBody = '<div style="color:var(--yellow);font-size:var(--text-base);margin-bottom:6px">'
       + escapeHtml(_mspHealthy.length + '/' + _mspTotal) + ' specs healthy. Failed: '
       + escapeHtml(_msp.failed.map(function(f){ return (f && f.name) || '?'; }).join(', '))
       + (_msp.evaluated_at ? ' <span style="color:var(--muted)">(evaluated ' + escapeHtml(_msp.evaluated_at) + ')</span>' : '')
@@ -632,8 +632,8 @@ function _wiRenderDetail(item) {
       var name = escapeHtml((f && f.name) || '?');
       var reason = escapeHtml((f && f.reason) || 'unknown');
       var tail = (f && f.log_tail) || '';
-      return '<details style="margin-bottom:6px"><summary style="cursor:pointer;font-size:11px"><strong>' + name + '</strong> — ' + reason + '</summary>'
-        + '<pre style="font-size:10px;max-height:240px;overflow:auto;padding:6px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);margin:4px 0 0 0">'
+      return '<details style="margin-bottom:6px"><summary style="cursor:pointer;font-size:var(--text-base)"><strong>' + name + '</strong> — ' + reason + '</summary>'
+        + '<pre style="font-size:var(--text-sm);max-height:240px;overflow:auto;padding:6px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);margin:4px 0 0 0">'
         + escapeHtml(tail || '(no log tail captured)')
         + '</pre></details>';
     }).join('');
@@ -659,7 +659,7 @@ function _wiRenderDetail(item) {
   }
   var refs = Array.isArray(item.references) ? item.references.filter(r => r && typeof r === 'object' && r.url) : [];
   if (refs.length) {
-    html += field('References', refs.map(r => '<a href="' + escapeHtml(r.url) + '" target="_blank" style="color:var(--blue)">' + escapeHtml(r.title || r.url) + '</a>' + (r.type ? ' <span style="color:var(--muted);font-size:10px">(' + escapeHtml(r.type) + ')</span>' : '')).join('<br>'));
+    html += field('References', refs.map(r => '<a href="' + escapeHtml(r.url) + '" target="_blank" style="color:var(--blue)">' + escapeHtml(r.title || r.url) + '</a>' + (r.type ? ' <span style="color:var(--muted);font-size:var(--text-sm)">(' + escapeHtml(r.type) + ')</span>' : '')).join('<br>'));
   } else if (item.referencesCount > 0) {
     html += field('References', '<span style="color:var(--muted)">' + item.referencesCount + ' reference(s) — loading…</span>');
   }
@@ -669,7 +669,7 @@ function _wiRenderDetail(item) {
   // Artifacts — output log, branch, skills, etc.
   var arts = item._artifacts || {};
   var artPills = '';
-  var pillStyle = 'display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:10px;cursor:pointer;background:var(--surface2);border:1px solid var(--border);color:var(--text)';
+  var pillStyle = 'display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:var(--text-sm);cursor:pointer;background:var(--surface2);border:1px solid var(--border);color:var(--text)';
   // Output log pill removed — raw stream-json output is not human-readable
   var artBackFn = "pushModalBack(function(){openWorkItemDetail('" + escapeHtml(item.id) + "')});";
   if (arts.branch) artPills += '<span style="' + pillStyle + ';cursor:default">🌿 ' + escapeHtml(arts.branch) + '</span> ';
@@ -687,7 +687,7 @@ function _wiRenderDetail(item) {
         artPills += '<span onclick="' + artBackFn + 'kbOpenItem(\'' + escapeHtml(kbCat) + '\',\'' + escapeHtml(kbFile) + '\')" style="' + pillStyle + '">📚 ' + escapeHtml(kbLabel) + '</span> ';
       } else if (noteFile.startsWith('archive:')) {
         var archLabel = noteFile.slice(8).replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-/, '').slice(0, 30);
-        artPills += '<span onclick="' + artBackFn + 'openInboxNote(\'' + escapeHtml(noteFile.slice(8)) + '\')" style="' + pillStyle + ';opacity:0.7">📄 ' + escapeHtml(archLabel) + ' <span style="font-size:8px">(archived)</span></span> ';
+        artPills += '<span onclick="' + artBackFn + 'openInboxNote(\'' + escapeHtml(noteFile.slice(8)) + '\')" style="' + pillStyle + ';opacity:0.7">📄 ' + escapeHtml(archLabel) + ' <span style="font-size:var(--text-xs)">(archived)</span></span> ';
       } else {
         var noteLabel = noteFile.replace(/\.md$/, '').slice(0, 30);
         artPills += '<span onclick="' + artBackFn + 'openInboxNote(\'' + escapeHtml(noteFile) + '\')" style="' + pillStyle + '">📝 ' + escapeHtml(noteLabel) + '</span> ';

package/dashboard/js/utils.js

@@ -247,7 +247,7 @@ function _renderMdCore(s) {
   // 1. Extract code blocks and inline code into placeholders (protect from other transforms)
   const codeSlots = [];
   html = html.replace(/```(\w*)\n([\s\S]*?)```/g, function(_, lang, code) {
-    codeSlots.push('<pre style="background:var(--bg);padding:8px;border-radius:4px;overflow-x:auto;font-size:11px;margin:4px 0"><code>' + code + '</code></pre>');
+    codeSlots.push('<pre style="background:var(--bg);padding:8px;border-radius:4px;overflow-x:auto;font-size:var(--text-base);margin:4px 0"><code>' + code + '</code></pre>');
     return '\x00CB' + (codeSlots.length - 1) + '\x00';
   });
 
@@ -343,7 +343,7 @@ function _renderMdCore(s) {
         i++;
       }
       i--; // back up one since the for loop will increment
-      var tableHtml = '<div class="md-table-wrap"><table style="font-size:11px"><thead><tr>';
+      var tableHtml = '<div class="md-table-wrap"><table style="font-size:var(--text-base)"><thead><tr>';
       if (tableRows.length > 0) {
         tableRows[0].forEach(function(c) { tableHtml += '<th>' + c + '</th>'; });
         tableHtml += '</tr></thead><tbody>';
@@ -446,7 +446,7 @@ function _renderMdChunked(fullText) {
   var uid = '_mdChunk' + (++_mdChunkUid);
   if (chunks.length <= 1) return firstHtml;
 
-  var sentinel = '<div id="' + uid + '" style="padding:12px 0;color:var(--muted);font-size:11px">Loading more content...</div>';
+  var sentinel = '<div id="' + uid + '" style="padding:12px 0;color:var(--muted);font-size:var(--text-base)">Loading more content...</div>';
 
   setTimeout(function() {
     var el = document.getElementById(uid);
@@ -493,7 +493,7 @@ function openBugReport() {
   var container = document.createElement('div');
   container.style.cssText = 'display:flex;flex-direction:column;gap:12px';
   var intro = document.createElement('p');
-  intro.style.cssText = 'color:var(--muted);font-size:12px;margin:0';
+  intro.style.cssText = 'color:var(--muted);font-size:var(--text-md);margin:0';
   intro.textContent = 'File a bug on the Minions repo (yemi33/minions).';
 
   var titleLabel = document.createElement('label');
@@ -559,7 +559,7 @@ async function submitBugReport() {
     var container = document.createElement('div');
     container.style.cssText = 'padding:24px;text-align:center';
     var icon = document.createElement('div');
-    icon.style.cssText = 'font-size:32px;margin-bottom:12px';
+    icon.style.cssText = 'font-size:var(--text-display);margin-bottom:12px';
     icon.textContent = '\u{1F41B}';
     var heading = document.createElement('div');
     heading.style.cssText = 'color:var(--green);font-weight:600;margin-bottom:8px';
@@ -571,12 +571,12 @@ async function submitBugReport() {
       link.href = safeUrl(d.url);
       link.target = '_blank';
       link.rel = 'noopener noreferrer';
-      link.style.cssText = 'color:var(--blue);font-size:13px';
+      link.style.cssText = 'color:var(--blue);font-size:var(--text-lg)';
       link.textContent = 'View issue on GitHub';
       container.appendChild(link);
     } else {
       var msg = document.createElement('span');
-      msg.style.cssText = 'color:var(--muted);font-size:12px';
+      msg.style.cssText = 'color:var(--muted);font-size:var(--text-md)';
       msg.textContent = 'Issue created on yemi33/minions';
       container.appendChild(msg);
     }
@@ -596,7 +596,7 @@ async function submitBugReport() {
     if (!errDiv) {
       errDiv = document.createElement('div');
       errDiv.id = 'bug-error';
-      errDiv.style.cssText = 'color:var(--red);font-size:12px;padding:8px;background:rgba(248,81,73,0.1);border-radius:4px';
+      errDiv.style.cssText = 'color:var(--red);font-size:var(--text-md);padding:8px;background:rgba(248,81,73,0.1);border-radius:4px';
       btn?.parentElement?.parentElement?.appendChild(errDiv);
     }
     errDiv.textContent = 'Error: ' + e.message;