@yemi33/minions 0.1.2150 → 0.1.2152

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/bin/minions.js +99 -6
  2. package/dashboard/docs/typography-audit.md +128 -0
  3. package/dashboard/docs/typography.md +114 -0
  4. package/dashboard/js/render-agents.js +1 -1
  5. package/dashboard/js/utils.js +1 -1
  6. package/dashboard/slim/body.html +2 -2
  7. package/dashboard/slim/styles.css +112 -77
  8. package/dashboard/styles.css +37 -3
  9. package/engine/cli.js +5 -3
  10. package/engine/dispatch.js +26 -1
  11. package/engine/lifecycle.js +89 -0
  12. package/package.json +6 -1
package/dashboard/slim/styles.css CHANGED
@@ -22,8 +22,38 @@
22
22
  --amber: #d29922;
23
23
  --red: #f85149;
24
24
  --radius: 6px;
25
+
26
+ /* Typography — mirrors dashboard/styles.css :root tokens
27
+ (W-mq1c8og40003a7cf). Slim ships its CSS independently
28
+ (template-baked into slim/layout.html), so we duplicate the
29
+ token VALUES here verbatim — see dashboard/docs/typography.md.
30
+ A tripwire test asserts the slim and main tokens stay in
31
+ sync (test/unit/dashboard-font-size-tokens.test.js). */
32
+ --text-xs: 10px; --text-sm: 11px; --text-base: 12px;
33
+ --text-md: 13px; --text-lg: 14px; --text-xl: 16px; --text-2xl: 18px;
34
+ --text-stat: 22px; --text-stat-lg: 28px; --text-display: 32px;
35
+ --text-role-display: var(--text-display);
36
+ --text-heading: var(--text-2xl);
37
+ --text-subheading: var(--text-xl);
38
+ --text-body: var(--text-lg);
39
+ --text-meta: var(--text-md);
40
+ --text-caption: var(--text-base);
41
+ --text-micro: var(--text-sm);
42
+ --text-code: 0.9em;
25
43
  }
26
44
 
45
+ /* Typography utility classes — see dashboard/styles.css for the
46
+ canonical declarations; slim duplicates because the two
47
+ stylesheets are served independently. */
48
+ .text-display { font-size: var(--text-role-display); }
49
+ .text-heading { font-size: var(--text-heading); }
50
+ .text-subheading { font-size: var(--text-subheading); }
51
+ .text-body { font-size: var(--text-body); }
52
+ .text-meta { font-size: var(--text-meta); }
53
+ .text-caption { font-size: var(--text-caption); }
54
+ .text-micro { font-size: var(--text-micro); }
55
+ .text-code { font-size: var(--text-code); }
56
+
27
57
  * { box-sizing: border-box; }
28
58
 
29
59
  /* Typography baseline (slim UX foundation phase).
@@ -41,7 +71,7 @@
41
71
  background: var(--bg);
42
72
  color: var(--text);
43
73
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
44
- font-size: 16px;
74
+ font-size: var(--text-xl);
45
75
  line-height: 1.5;
46
76
  }
47
77
 
@@ -89,7 +119,8 @@
89
119
  }
90
120
  .topbar-title {
91
121
  font-weight: 600;
92
- font-size: 15px;
122
+ /* Rounded from 15px → 14px (--text-lg) in W-mq1c8og40003a7cf typography centralization. */
123
+ font-size: var(--text-lg);
93
124
  color: var(--text);
94
125
  letter-spacing: 0.3px;
95
126
  }
@@ -97,7 +128,7 @@
97
128
  display: inline-block;
98
129
  margin-left: 8px;
99
130
  padding: 1px 6px;
100
- font-size: 12px;
131
+ font-size: var(--text-base);
101
132
  font-weight: 700;
102
133
  letter-spacing: 0.5px;
103
134
  color: var(--blue);
@@ -125,7 +156,8 @@
125
156
  border: none;
126
157
  cursor: pointer;
127
158
  color: var(--muted);
128
- font-size: 20px;
159
+ /* Rounded from 20px → 18px (--text-2xl) in W-mq1c8og40003a7cf typography centralization. */
160
+ font-size: var(--text-2xl);
129
161
  line-height: 1;
130
162
  padding: 6px 10px;
131
163
  border-radius: var(--radius);
@@ -164,7 +196,7 @@
164
196
  }
165
197
  .panel-header {
166
198
  padding: 9px 14px;
167
- font-size: 12px;
199
+ font-size: var(--text-base);
168
200
  font-weight: 700;
169
201
  letter-spacing: 0.7px;
170
202
  text-transform: uppercase;
@@ -180,7 +212,7 @@
180
212
  letter-spacing: 0;
181
213
  font-weight: 400;
182
214
  color: var(--muted);
183
- font-size: 12px;
215
+ font-size: var(--text-base);
184
216
  }
185
217
  .panel-body {
186
218
  flex: 1;
@@ -191,7 +223,7 @@
191
223
  .panel-placeholder {
192
224
  color: var(--muted);
193
225
  font-style: italic;
194
- font-size: 14px;
226
+ font-size: var(--text-lg);
195
227
  }
196
228
 
197
229
  .panel-actions { grid-area: actions; }
@@ -223,7 +255,7 @@
223
255
  }
224
256
  .chat-empty {
225
257
  color: var(--muted);
226
- font-size: 14px;
258
+ font-size: var(--text-lg);
227
259
  font-style: italic;
228
260
  text-align: center;
229
261
  margin-top: 24px;
@@ -234,7 +266,7 @@
234
266
  border-radius: var(--radius);
235
267
  white-space: pre-wrap;
236
268
  word-wrap: break-word;
237
- font-size: 16px;
269
+ font-size: var(--text-xl);
238
270
  }
239
271
  .chat-msg.user {
240
272
  align-self: flex-end;
@@ -251,7 +283,7 @@
251
283
  align-self: center;
252
284
  background: transparent;
253
285
  color: var(--muted);
254
- font-size: 13px;
286
+ font-size: var(--text-md);
255
287
  font-style: italic;
256
288
  }
257
289
  .chat-msg.error {
@@ -259,7 +291,7 @@
259
291
  background: rgba(248, 81, 73, 0.1);
260
292
  color: var(--red);
261
293
  border: 1px solid var(--red);
262
- font-size: 14px;
294
+ font-size: var(--text-lg);
263
295
  }
264
296
  .chat-input-wrap {
265
297
  display: flex;
@@ -290,14 +322,14 @@
290
322
  max-width: 800px;
291
323
  margin-left: auto;
292
324
  margin-right: auto;
293
- font-size: 12px;
325
+ font-size: var(--text-base);
294
326
  color: var(--muted);
295
327
  }
296
328
  .chat-context-strip .context-label {
297
329
  text-transform: uppercase;
298
330
  letter-spacing: 0.5px;
299
331
  font-weight: 700;
300
- font-size: 12px;
332
+ font-size: var(--text-base);
301
333
  }
302
334
  .chat-context-strip select {
303
335
  background: var(--bg);
@@ -306,7 +338,7 @@
306
338
  border-radius: var(--radius);
307
339
  padding: 4px 8px;
308
340
  font-family: inherit;
309
- font-size: 12px;
341
+ font-size: var(--text-base);
310
342
  cursor: pointer;
311
343
  }
312
344
  .chat-context-strip select:focus { outline: none; border-color: var(--blue); }
@@ -324,7 +356,7 @@
324
356
  border: 1px solid var(--border);
325
357
  border-radius: var(--radius);
326
358
  padding: 3px 9px;
327
- font-size: 12px;
359
+ font-size: var(--text-base);
328
360
  cursor: pointer;
329
361
  line-height: 1;
330
362
  }
@@ -339,7 +371,7 @@
339
371
  color: var(--text);
340
372
  border: 1px solid var(--border);
341
373
  border-radius: var(--radius);
342
- font-size: 16px;
374
+ font-size: var(--text-xl);
343
375
  font-family: inherit;
344
376
  resize: none;
345
377
  /* >= 2 lines visible by default. 16px font * 1.5 line-height = 24px/line,
@@ -354,7 +386,7 @@
354
386
  color: #fff;
355
387
  border: none;
356
388
  border-radius: var(--radius);
357
- font-size: 14px;
389
+ font-size: var(--text-lg);
358
390
  font-weight: 600;
359
391
  cursor: pointer;
360
392
  align-self: flex-end;
@@ -367,7 +399,7 @@
367
399
  color: var(--red);
368
400
  border: 1px solid var(--border);
369
401
  border-radius: var(--radius);
370
- font-size: 13px;
402
+ font-size: var(--text-md);
371
403
  cursor: pointer;
372
404
  align-self: flex-end;
373
405
  display: none;
@@ -413,7 +445,7 @@
413
445
  }
414
446
  .chat-tool {
415
447
  color: var(--muted);
416
- font-size: 12px;
448
+ font-size: var(--text-base);
417
449
  line-height: 1.5;
418
450
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
419
451
  white-space: nowrap;
@@ -425,7 +457,7 @@
425
457
  /* Tool-calls modal: full list, wrapped so long commands are readable. */
426
458
  .tools-modal-line {
427
459
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
428
- font-size: 12px;
460
+ font-size: var(--text-base);
429
461
  color: var(--text);
430
462
  padding: 5px 0;
431
463
  border-bottom: 1px solid var(--border);
@@ -434,7 +466,7 @@
434
466
  }
435
467
  .tools-modal-line::before { content: "● "; color: var(--muted); }
436
468
  .tools-modal-line:last-child { border-bottom: none; }
437
- .tools-modal-empty { color: var(--muted); font-style: italic; font-size: 13px; }
469
+ .tools-modal-empty { color: var(--muted); font-style: italic; font-size: var(--text-md); }
438
470
  /* Wide enough to span the Actions + Status columns (820 + 10 gap + 548). */
439
471
  #slim-tools-modal .modal {
440
472
  width: 1378px;
@@ -458,13 +490,13 @@
458
490
  a.tile-item:hover { border-color: var(--blue); }
459
491
  .tile-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
460
492
  .tile-item-title {
461
- font-size: 14px; font-weight: 600; color: var(--text);
493
+ font-size: var(--text-lg); font-weight: 600; color: var(--text);
462
494
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
463
495
  }
464
- .tile-item-meta { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-word; }
496
+ .tile-item-meta { font-size: var(--text-base); color: var(--muted); margin-top: 3px; word-break: break-word; }
465
497
  .tile-chip {
466
498
  flex: 0 0 auto;
467
- font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
499
+ font-size: var(--text-base); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
468
500
  padding: 1px 7px; border-radius: 10px;
469
501
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
470
502
  }
@@ -472,7 +504,7 @@
472
504
  .tile-chip.amber { background: rgba(210, 153, 34, 0.15); color: var(--amber); border-color: var(--amber); }
473
505
  .tile-chip.red { background: rgba(248, 81, 73, 0.15); color: var(--red); border-color: var(--red); }
474
506
  .tile-chip.blue { background: rgba(88, 166, 255, 0.12); color: var(--blue); border-color: var(--blue); }
475
- .tile-empty { color: var(--muted); font-style: italic; font-size: 13px; }
507
+ .tile-empty { color: var(--muted); font-style: italic; font-size: var(--text-md); }
476
508
 
477
509
  /* Pinned-context list rows (slim-pinned-modal). */
478
510
  .pinned-row {
@@ -499,7 +531,7 @@
499
531
 
500
532
  .chat-thinking {
501
533
  color: var(--muted);
502
- font-size: 13px;
534
+ font-size: var(--text-md);
503
535
  font-style: italic;
504
536
  }
505
537
  .chat-thinking-dots {
@@ -526,7 +558,7 @@
526
558
  align-self: flex-start;
527
559
  padding: 5px 11px;
528
560
  border-radius: 4px;
529
- font-size: 12px;
561
+ font-size: var(--text-base);
530
562
  border: 1px dashed var(--border);
531
563
  color: var(--muted);
532
564
  }
@@ -543,14 +575,14 @@
543
575
  background: var(--bg);
544
576
  padding: 1px 4px;
545
577
  border-radius: 3px;
546
- font-size: 0.9em;
578
+ font-size: var(--text-code);
547
579
  }
548
580
  .chat-msg.assistant pre {
549
581
  background: var(--bg);
550
582
  padding: 10px;
551
583
  border-radius: 4px;
552
584
  overflow-x: auto;
553
- font-size: 14px;
585
+ font-size: var(--text-lg);
554
586
  margin: 6px 0;
555
587
  }
556
588
  .chat-msg.assistant pre code { background: none; padding: 0; }
@@ -577,7 +609,7 @@
577
609
  border-radius: var(--radius);
578
610
  padding: 10px 12px;
579
611
  cursor: pointer;
580
- font-size: 13px;
612
+ font-size: var(--text-md);
581
613
  font-family: inherit;
582
614
  display: flex;
583
615
  flex-direction: column;
@@ -602,28 +634,28 @@
602
634
  .act-ic-link { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M9%207C9.55228%207%2010%207.44772%2010%208C10%208.51284%209.61396%208.93551%209.11662%208.99327L9%209H7C5.34315%209%204%2010.3431%204%2012C4%2013.5977%205.24892%2014.9037%206.82373%2014.9949L7%2015H9C9.55228%2015%2010%2015.4477%2010%2016C10%2016.5128%209.61396%2016.9355%209.11662%2016.9933L9%2017H7C4.23858%2017%202%2014.7614%202%2012C2%209.31125%204.12231%207.11818%206.78311%207.00462L7%207H9ZM17%207C19.7614%207%2022%209.23858%2022%2012C22%2014.6888%2019.8777%2016.8818%2017.2169%2016.9954L17%2017H15C14.4477%2017%2014%2016.5523%2014%2016C14%2015.4872%2014.386%2015.0645%2014.8834%2015.0067L15%2015H17C18.6569%2015%2020%2013.6569%2020%2012C20%2010.4023%2018.7511%209.09634%2017.1763%209.00509L17%209H15C14.4477%209%2014%208.55228%2014%208C14%207.48716%2014.386%207.06449%2014.8834%207.00673L15%207H17ZM7%2011H17C17.5523%2011%2018%2011.4477%2018%2012C18%2012.5128%2017.614%2012.9355%2017.1166%2012.9933L17%2013H7C6.44772%2013%206%2012.5523%206%2012C6%2011.4872%206.38604%2011.0645%206.88338%2011.0067L7%2011H17H7Z%22%20fill%3D%22%23212121%22%2F%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M9%207C9.55228%207%2010%207.44772%2010%208C10%208.51284%209.61396%208.93551%209.11662%208.99327L9%209H7C5.34315%209%204%2010.3431%204%2012C4%2013.5977%205.24892%2014.9037%206.82373%2014.9949L7%2015H9C9.55228%2015%2010%2015.4477%2010%2016C10%2016.5128%209.61396%2016.9355%209.11662%2016.9933L9%2017H7C4.23858%2017%202%2014.7614%202%2012C2%209.31125%204.12231%207.11818%206.78311%207.00462L7%207H9ZM17%207C19.7614%207%2022%209.23858%2022%2012C22%2014.6888%2019.8777%2016.8818%2017.2169%2016.9954L17%2017H15C14.4477%2017%2014%2016.5523%2014%2016C14%2015.4872%2014.386%2015.0645%2014.8834%2015.0067L15%2015H17C18.6569%2015%2020%2013.6569%2020%2012C20%2010.4023%2018.7511%209.09634%2017.1763%209.00509L17%209H15C14.4477%209%2014%208.55228%2014%208C14%207.48716%2014.386%207.06449%2014.8834%207.00673L15%207H17ZM7%2011H17C17.5523%2011%2018%2011.4477%2018%2012C18%2012.5128%2017.614%2012.9355%2017.1166%2012.9933L17%2013H7C6.44772%2013%206%2012.5523%206%2012C6%2011.4872%206.38604%2011.0645%206.88338%2011.0067L7%2011H17H7Z%22%20fill%3D%22%23212121%22%2F%3E%20%3C%2Fsvg%3E"); }
603
635
  .act-ic-pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M21.0682%207.75765L16.2425%202.93189C14.9152%201.60462%2012.6777%201.96772%2011.8382%203.6466L9.40281%208.51748C9.31512%208.69287%209.16223%208.82694%208.97688%208.89096L4.81061%2010.3302C3.93791%2010.6317%203.682%2011.7427%204.33487%2012.3956L7.43936%2015.5001L3.00008%2019.9394L3%2021.0001H4.06074L8.50002%2016.5607L11.6045%2019.6653C12.2574%2020.3181%2013.3684%2020.0622%2013.6699%2019.1895L15.1092%2015.0232C15.1732%2014.8379%2015.3073%2014.685%2015.4826%2014.5973L20.3535%2012.1619C22.0324%2011.3224%2022.3955%209.08491%2021.0682%207.75765Z%22%20fill%3D%22%23212121%22%2F%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M21.0682%207.75765L16.2425%202.93189C14.9152%201.60462%2012.6777%201.96772%2011.8382%203.6466L9.40281%208.51748C9.31512%208.69287%209.16223%208.82694%208.97688%208.89096L4.81061%2010.3302C3.93791%2010.6317%203.682%2011.7427%204.33487%2012.3956L7.43936%2015.5001L3.00008%2019.9394L3%2021.0001H4.06074L8.50002%2016.5607L11.6045%2019.6653C12.2574%2020.3181%2013.3684%2020.0622%2013.6699%2019.1895L15.1092%2015.0232C15.1732%2014.8379%2015.3073%2014.685%2015.4826%2014.5973L20.3535%2012.1619C22.0324%2011.3224%2022.3955%209.08491%2021.0682%207.75765Z%22%20fill%3D%22%23212121%22%2F%3E%20%3C%2Fsvg%3E"); }
604
636
  .link-pr-btn .link-pr-label { font-weight: 600; }
605
- .link-pr-btn .link-pr-sub { font-size: 12px; color: var(--muted); }
637
+ .link-pr-btn .link-pr-sub { font-size: var(--text-base); color: var(--muted); }
606
638
 
607
639
  /* Link-PR dialog fields + the "+ Link PR" chip (tile corner + modal header). */
608
- .linkpr-label { display: block; color: var(--text); font-size: 13px; margin-bottom: 10px; }
640
+ .linkpr-label { display: block; color: var(--text); font-size: var(--text-md); margin-bottom: 10px; }
609
641
  .linkpr-input {
610
642
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
611
643
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
612
- color: var(--text); font-size: 13px; font-family: inherit; resize: vertical;
644
+ color: var(--text); font-size: var(--text-md); font-family: inherit; resize: vertical;
613
645
  }
614
646
  .linkpr-input:focus { outline: none; border-color: var(--blue); }
615
- .linkpr-check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; cursor: pointer; margin-bottom: 4px; }
647
+ .linkpr-check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: var(--text-md); cursor: pointer; margin-bottom: 4px; }
616
648
  .linkpr-check input { width: 16px; height: 16px; accent-color: var(--blue); }
617
649
  .linkpr-hint-inline { color: var(--muted); font-weight: 400; }
618
- .linkpr-hint { font-size: 12px; color: var(--muted); padding-left: 24px; }
650
+ .linkpr-hint { font-size: var(--text-base); color: var(--muted); padding-left: 24px; }
619
651
  .linkpr-warning {
620
652
  padding: 8px 12px; margin-bottom: 10px;
621
653
  background: rgba(210, 153, 34, 0.15); border: 1px solid rgba(210, 153, 34, 0.3);
622
- border-radius: var(--radius); font-size: 13px; line-height: 1.5; color: var(--text);
654
+ border-radius: var(--radius); font-size: var(--text-md); line-height: 1.5; color: var(--text);
623
655
  }
624
656
  .linkpr-warning-title { font-weight: 700; margin-bottom: 2px; color: var(--amber); }
625
657
  .linkpr-chip {
626
- font-size: 12px; font-weight: 600;
658
+ font-size: var(--text-base); font-weight: 600;
627
659
  padding: 1px 8px; border-radius: 10px;
628
660
  background: rgba(63, 185, 80, 0.12); color: var(--green); border: 1px solid var(--green);
629
661
  cursor: pointer; font-family: inherit;
@@ -671,7 +703,7 @@
671
703
  background: rgba(248, 81, 73, 0.08);
672
704
  }
673
705
  .cockpit-label {
674
- font-size: 12px;
706
+ font-size: var(--text-base);
675
707
  font-weight: 700;
676
708
  letter-spacing: 0.6px;
677
709
  text-transform: uppercase;
@@ -692,14 +724,14 @@
692
724
  .lit-amber .cockpit-dot { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
693
725
  .lit-red .cockpit-dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
694
726
  .cockpit-value {
695
- font-size: 22px;
727
+ font-size: var(--text-stat);
696
728
  font-weight: 700;
697
729
  color: var(--text);
698
730
  line-height: 1;
699
731
  }
700
732
  .cockpit-value.dim { color: var(--muted); }
701
733
  .cockpit-detail {
702
- font-size: 12px;
734
+ font-size: var(--text-base);
703
735
  color: var(--muted);
704
736
  line-height: 1.3;
705
737
  min-height: 14px;
@@ -726,7 +758,7 @@
726
758
  .member-empty {
727
759
  grid-column: 1 / -1;
728
760
  color: var(--muted);
729
- font-size: 13px;
761
+ font-size: var(--text-md);
730
762
  font-style: italic;
731
763
  }
732
764
  .member-card {
@@ -750,9 +782,10 @@
750
782
  .member-card.working { border-color: rgba(210, 153, 34, 0.6); }
751
783
  .member-card.done { border-color: rgba(63, 185, 80, 0.6); }
752
784
  .member-card.error { border-color: rgba(248, 81, 73, 0.6); }
753
- .member-emoji { font-size: 24px; line-height: 1; }
785
+ /* Rounded from 24px → 22px (--text-stat) in W-mq1c8og40003a7cf typography centralization. Emoji glyph; 2px diff is visually negligible. */
786
+ .member-emoji { font-size: var(--text-stat); line-height: 1; }
754
787
  .member-name {
755
- font-size: 13px;
788
+ font-size: var(--text-md);
756
789
  font-weight: 600;
757
790
  line-height: 1.2;
758
791
  color: var(--text);
@@ -762,7 +795,7 @@
762
795
  white-space: nowrap;
763
796
  }
764
797
  .member-role {
765
- font-size: 12px;
798
+ font-size: var(--text-base);
766
799
  line-height: 1.2;
767
800
  color: var(--muted);
768
801
  max-width: 100%;
@@ -774,7 +807,7 @@
774
807
  status-badge but tuned to the slim token palette. */
775
808
  .member-status {
776
809
  margin-top: 2px;
777
- font-size: 12px;
810
+ font-size: var(--text-base);
778
811
  font-weight: 700;
779
812
  letter-spacing: 0.5px;
780
813
  text-transform: uppercase;
@@ -812,19 +845,21 @@
812
845
  gap: 12px;
813
846
  margin-bottom: 14px;
814
847
  }
815
- .agent-detail-emoji { font-size: 34px; line-height: 1; }
816
- .agent-detail-name { font-size: 17px; font-weight: 600; color: var(--text); }
817
- .agent-detail-role { font-size: 13px; color: var(--muted); }
848
+ /* Rounded from 34px → 32px (--text-display) in W-mq1c8og40003a7cf typography centralization. Emoji glyph; 2px diff is visually negligible. */
849
+ .agent-detail-emoji { font-size: var(--text-display); line-height: 1; }
850
+ /* Rounded from 17px → 18px (--text-2xl) in W-mq1c8og40003a7cf typography centralization. */
851
+ .agent-detail-name { font-size: var(--text-2xl); font-weight: 600; color: var(--text); }
852
+ .agent-detail-role { font-size: var(--text-md); color: var(--muted); }
818
853
  .agent-detail-row { margin-bottom: 12px; }
819
854
  .agent-detail-key {
820
- font-size: 12px;
855
+ font-size: var(--text-base);
821
856
  font-weight: 700;
822
857
  letter-spacing: 0.5px;
823
858
  text-transform: uppercase;
824
859
  color: var(--muted);
825
860
  margin-bottom: 3px;
826
861
  }
827
- .agent-detail-val { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
862
+ .agent-detail-val { font-size: var(--text-md); color: var(--text); white-space: pre-wrap; word-break: break-word; }
828
863
  .agent-detail-val.muted { color: var(--muted); font-style: italic; }
829
864
 
830
865
  /* ── History panel: event log ─────────────────────────────── */
@@ -851,27 +886,27 @@
851
886
  justify-content: space-between;
852
887
  align-items: baseline;
853
888
  gap: 8px;
854
- font-size: 13px;
889
+ font-size: var(--text-md);
855
890
  }
856
891
  .history-kind {
857
892
  font-weight: 700;
858
893
  letter-spacing: 0.4px;
859
894
  text-transform: uppercase;
860
- font-size: 12px;
895
+ font-size: var(--text-base);
861
896
  color: var(--muted);
862
897
  }
863
898
  .history-time {
864
- font-size: 12px;
899
+ font-size: var(--text-base);
865
900
  color: var(--muted);
866
901
  white-space: nowrap;
867
902
  }
868
903
  .history-title {
869
- font-size: 13px;
904
+ font-size: var(--text-md);
870
905
  color: var(--text);
871
906
  word-break: break-word;
872
907
  }
873
908
  .history-meta {
874
- font-size: 12px;
909
+ font-size: var(--text-base);
875
910
  color: var(--muted);
876
911
  word-break: break-word;
877
912
  }
@@ -879,7 +914,7 @@
879
914
  .history-empty {
880
915
  color: var(--muted);
881
916
  font-style: italic;
882
- font-size: 13px;
917
+ font-size: var(--text-md);
883
918
  }
884
919
 
885
920
  /* ╔══════════════════════════════════════════════════════════════════╗
@@ -941,7 +976,7 @@
941
976
  justify-content: center;
942
977
  gap: 4px;
943
978
  color: var(--muted);
944
- font-size: 12px;
979
+ font-size: var(--text-base);
945
980
  }
946
981
  .completions-card-body-top {
947
982
  /* parent grid cell (col 2, row 1) — wraps title and optional
@@ -958,7 +993,7 @@
958
993
  relative time so the rail's bottom row reads as a single quiet line:
959
994
  `✓ · 8h ago`. */
960
995
  .completions-card-status-icon {
961
- font-size: 12px;
996
+ font-size: var(--text-base);
962
997
  line-height: 1;
963
998
  color: var(--muted);
964
999
  }
@@ -1036,7 +1071,7 @@
1036
1071
  but a larger font so it reads as the rail's primary type marker. */
1037
1072
  .completions-card-type-word {
1038
1073
  font-family: 'Consolas', 'Courier New', monospace;
1039
- font-size: 14px;
1074
+ font-size: var(--text-lg);
1040
1075
  font-weight: 700;
1041
1076
  letter-spacing: 0.5px;
1042
1077
  line-height: 1;
@@ -1049,12 +1084,12 @@
1049
1084
  cursor: help;
1050
1085
  }
1051
1086
  .completions-card-time {
1052
- font-size: 12px;
1087
+ font-size: var(--text-base);
1053
1088
  color: var(--muted);
1054
1089
  white-space: nowrap;
1055
1090
  }
1056
1091
  .completions-card-title {
1057
- font-size: 16px;
1092
+ font-size: var(--text-xl);
1058
1093
  color: var(--text);
1059
1094
  line-height: 1.35;
1060
1095
  /* Always reserve two lines so cards have a consistent vertical
@@ -1070,7 +1105,7 @@
1070
1105
  /* Byline — "Agent · Role" under the title. Quiet (muted, small) so the
1071
1106
  title stays primary, but always present so every row names its owner. */
1072
1107
  .completions-card-byline {
1073
- font-size: 12px;
1108
+ font-size: var(--text-base);
1074
1109
  color: var(--muted);
1075
1110
  white-space: nowrap;
1076
1111
  overflow: hidden;
@@ -1078,7 +1113,7 @@
1078
1113
  min-width: 0;
1079
1114
  }
1080
1115
  .completions-card-fail-line {
1081
- font-size: 12px;
1116
+ font-size: var(--text-base);
1082
1117
  color: var(--red);
1083
1118
  word-break: break-word;
1084
1119
  }
@@ -1092,7 +1127,7 @@
1092
1127
  above the chips is supplied by the parent card grid's row gap. */
1093
1128
  .completions-card-lineage {
1094
1129
  grid-column: 2; /* cell 2,2 of the parent card grid */
1095
- font-size: 12px;
1130
+ font-size: var(--text-base);
1096
1131
  color: var(--muted);
1097
1132
  display: grid;
1098
1133
  grid-template-columns: 1fr 1fr 1fr;
@@ -1101,7 +1136,7 @@
1101
1136
  }
1102
1137
  .completions-card-chip {
1103
1138
  font-family: 'Consolas', 'Courier New', monospace;
1104
- font-size: 12px;
1139
+ font-size: var(--text-base);
1105
1140
  background: var(--bg);
1106
1141
  border: 1px solid var(--border);
1107
1142
  border-radius: 3px;
@@ -1146,7 +1181,7 @@
1146
1181
  .completions-modal-section { margin-bottom: 14px; }
1147
1182
  .completions-modal-section:last-child { margin-bottom: 0; }
1148
1183
  .completions-modal-label {
1149
- font-size: 12px;
1184
+ font-size: var(--text-base);
1150
1185
  font-weight: 700;
1151
1186
  letter-spacing: 0.4px;
1152
1187
  text-transform: uppercase;
@@ -1154,14 +1189,14 @@
1154
1189
  margin-bottom: 4px;
1155
1190
  }
1156
1191
  .completions-modal-value {
1157
- font-size: 13px;
1192
+ font-size: var(--text-md);
1158
1193
  color: var(--text);
1159
1194
  word-break: break-word;
1160
1195
  white-space: pre-wrap;
1161
1196
  }
1162
1197
  .completions-modal-report {
1163
1198
  font-family: 'Consolas', 'Courier New', monospace;
1164
- font-size: 12px;
1199
+ font-size: var(--text-base);
1165
1200
  background: var(--bg);
1166
1201
  border: 1px solid var(--border);
1167
1202
  border-radius: var(--radius);
@@ -1209,9 +1244,9 @@
1209
1244
  padding: 12px 16px;
1210
1245
  border-bottom: 1px solid var(--border);
1211
1246
  }
1212
- .modal-header h3 { margin: 0; font-size: 16px; color: var(--blue); }
1247
+ .modal-header h3 { margin: 0; font-size: var(--text-xl); color: var(--blue); }
1213
1248
  .modal-body { padding: 14px 18px; overflow-y: auto; }
1214
- .modal-body p { color: var(--muted); margin: 4px 0 12px; font-size: 13px; }
1249
+ .modal-body p { color: var(--muted); margin: 4px 0 12px; font-size: var(--text-md); }
1215
1250
  .modal-footer {
1216
1251
  padding: 10px 16px;
1217
1252
  border-top: 1px solid var(--border);
@@ -1226,7 +1261,7 @@
1226
1261
  border: none;
1227
1262
  border-radius: var(--radius);
1228
1263
  cursor: pointer;
1229
- font-size: 13px;
1264
+ font-size: var(--text-md);
1230
1265
  font-weight: 600;
1231
1266
  }
1232
1267
  .btn-secondary {
@@ -1236,7 +1271,7 @@
1236
1271
  border: 1px solid var(--border);
1237
1272
  border-radius: var(--radius);
1238
1273
  cursor: pointer;
1239
- font-size: 13px;
1274
+ font-size: var(--text-md);
1240
1275
  }
1241
1276
  .btn-primary:hover, .btn-secondary:hover { filter: brightness(1.1); }
1242
1277
 
@@ -1248,9 +1283,9 @@
1248
1283
  border-bottom: 1px solid var(--border);
1249
1284
  }
1250
1285
  .flag-row:last-child { border-bottom: none; }
1251
- .flag-name { font-size: 14px; font-weight: 600; }
1252
- .flag-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
1253
- .flag-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; }
1286
+ .flag-name { font-size: var(--text-lg); font-weight: 600; }
1287
+ .flag-desc { font-size: var(--text-base); color: var(--muted); margin-top: 2px; }
1288
+ .flag-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); }
1254
1289
  .flag-toggle input { cursor: pointer; }
1255
1290
  .settings-link {
1256
1291
  display: block;
@@ -1261,7 +1296,7 @@
1261
1296
  border-radius: var(--radius);
1262
1297
  color: var(--blue);
1263
1298
  text-decoration: none;
1264
- font-size: 13px;
1299
+ font-size: var(--text-md);
1265
1300
  text-align: center;
1266
1301
  }
1267
1302
  .settings-link:hover { filter: brightness(1.1); }
@@ -1274,7 +1309,7 @@
1274
1309
  color: var(--text);
1275
1310
  border: 1px solid var(--border);
1276
1311
  border-radius: var(--radius);
1277
- font-size: 14px;
1312
+ font-size: var(--text-lg);
1278
1313
  font-family: inherit;
1279
1314
  resize: vertical;
1280
1315
  }