dashboard: PCs not reporting, and the card styling standard it broke

Second wave-one card. GET /api/computers/dashboard/quiet lists two populations
and deliberately does not merge them into one count. A PC that reported and
went quiet is probably off, moved or broken. A PC that has NEVER reported is
worse: not enrolled, or enrolled against the wrong pc-type, so nothing enforces
anything on it and no backup of it exists. That one hides indefinitely because
nothing about it fails loudly - the same shape as the bay that carried a wrong
machine number for weeks.

Never-reported sorts above the merely quiet, then longest silence first: the
order someone should work down the list, not the order rows left the table. A
soft-deleted PC is excluded - a decommissioned machine is silent on purpose,
and listing it would train people to ignore the card, which is the failure this
whole board exists to avoid.

The window is computers_quietreporthours, default 24, because every site will
disagree with any number picked here (ADR-015). A malformed value falls back
rather than failing the card.

This also replaces the computers plugin's old widget declaration, which named a
component nobody ever wrote. Four such declarations remain and will convert as
their cards arrive.

Two fixes to the renderer found while wiring this up. Meta specs now support a
trailing unit, so a row reads 'quiet for 3 days' rather than 'quiet for 3'. And
the card styles hardcoded hex colours against the frontend standard, including
a var(--card-bg) that DOES NOT EXIST - the variable is --bg-card - so the
fallback would have painted every card white and broken dark mode entirely.
Now --bg-card, --border, --danger, --warning, --primary and --link throughout.

frontend/src/components/DashboardCards.vue

@@ -98,17 +98,17 @@ defineExpose({ load })
   margin-bottom: 1.5rem;
 }
 .dc-card {
-  background: var(--card-bg, #fff);
-  border: 1px solid var(--border, #e3e3e3);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
   border-left-width: 4px;
   border-radius: 8px;
   padding: 0.9rem 1rem;
 }
 /* Severity is carried by the left edge only. A fully coloured card reads as an
    alert even when it holds one minor row, and six of them read as a crisis. */
-.dc-critical { border-left-color: #dc3545; }
-.dc-warning { border-left-color: #ffc107; }
-.dc-info { border-left-color: #0d6efd; }
+.dc-critical { border-left-color: var(--danger); }
+.dc-warning { border-left-color: var(--warning); }
+.dc-info { border-left-color: var(--primary); }
 
 .dc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
 .dc-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--text); }
@@ -117,7 +117,7 @@ defineExpose({ load })
 
 .dc-rows { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
 .dc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; }
-.dc-row-title { font-weight: 600; color: var(--link, #0d6efd); text-decoration: none; }
+.dc-row-title { font-weight: 600; color: var(--link); text-decoration: none; }
 .dc-row-title:hover { text-decoration: underline; }
 .dc-row-nolink { color: var(--text); }
 .dc-row-detail { color: var(--text); }

frontend/src/components/dashboardCards.js

@@ -49,7 +49,10 @@ export function mapMeta(card, item) {
     .map((spec) => {
       const value = formatValue(item[spec.key], spec)
       if (value === '') return null
-      return { text: spec.label ? `${spec.label} ${value}` : value, mono: !!spec.mono }
+      // label prefixes, suffix trails: 'quiet for 3 days' reads as a sentence,
+      // where 'quiet for 3' reads as a truncation.
+      const text = `${spec.label ? spec.label + ' ' : ''}${value}${spec.suffix || ''}`
+      return { text, mono: !!spec.mono }
     })
     .filter(Boolean)
 }

frontend/src/components/dashboardCards.spec.js

@@ -53,6 +53,15 @@ describe('mapping a row', () => {
     expect(row.link).toBe('/pcs/42')
   })
 
+  it('supports a trailing unit so the text reads as a sentence', () => {
+    const card = {
+      render: 'exceptions',
+      map: { title: 'hostname', meta: [{ key: 'quietdays', label: 'quiet for', suffix: ' days' }] },
+      _data: [{ hostname: 'QUIETPC', quietdays: 3 }],
+    }
+    expect(cardRows(card)[0].meta[0].text).toBe('quiet for 3 days')
+  })
+
   it('drops empty meta values instead of rendering a stray label', () => {
     const card = { ...failuresCard, _data: [{ hostname: 'X', message: '', exitcode: null }] }
     expect(cardRows(card)[0].meta).toEqual([])