feat: worker lanes move to the System tab, in the roster's own idiom (4295)

Operator, 2026-09-23: *"where is the setting surface to set the number of
each kind of worker? we have a system view under settings but no options to
be set here"* — then *"move it to system tab and improve the view to be more
inline with other UI elements."*

They went looking under System and found a read-only roster. The card's own
first cut argued that a control had no place on a tab about things being
broken; that was wrong twice over. Half these lanes are optional and off by
DESIGN, so "not running" is the normal state someone comes here to change —
and a tab that only reports is a tab you leave in order to act somewhere else.

So it is the roster's second half now, and built out of the same parts: the
pane above says what is running, this one says how hard. Dot, name, detail,
numbers on the right; the controls take the place the roster gives to latency.
It was a bordered card wrapping a v-table, which is what made it read as
bolted on.

- The row styles move from SystemHealthTab's scoped block into app.css, so
  the second pane IS the first one's idiom rather than imitating it. A copy
  would have drifted the first time either was touched.
- Lane state uses the roster's four dots. A lane that is off reads grey, never
  red: colouring an intended state as a fault is how an indicator stops being
  read.
- The card owns its own polling. On Activity it rode that tab's 3s queue
  timer; System has none, so moving without this would have shown an empty
  pane to anyone who opened System first. 15s and `document.hidden`-guarded —
  it is a dial, not a live meter, and v-window keeps a hidden tab mounted.
- The table header carried the column names, so each control now labels
  itself: `slots · cap N`, `auto`, `on`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LVjrnpQjRgHdvq95rASoiR

frontend/src/components/settings/SystemHealthTab.vue

@@ -65,6 +65,17 @@
       then neither, and an indicator that reddened on every update would stop
       being read.
     </p>
+
+    <!-- The dial for the roster above (milestone 422). Moved here from
+         Activity on 2026-09-23 at the operator's ask: they went looking for
+         "how many workers of each kind" under System, which is where the
+         question belongs — the roster says what is running, and this says how
+         hard. Its own first cut argued the opposite, that a control has no
+         place on a tab about things being broken. That was wrong twice over:
+         half these lanes are optional and off by DESIGN, so "not running" is
+         the normal state the operator comes here to change, and a tab that
+         only reports is a tab you leave to go act somewhere else. -->
+    <WorkerLanesCard />
   </div>
 </template>
 
@@ -73,6 +84,7 @@ import { onMounted } from 'vue'
 
 import { useSystemHealthStore } from '../../stores/systemHealth.js'
 import { formatRelative } from '../../utils/date.js'
+import WorkerLanesCard from './WorkerLanesCard.vue'
 
 const store = useSystemHealthStore()
 
@@ -91,38 +103,3 @@ function kindLabel(kind) {
 // One refresh on open, so arriving at the tab doesn't wait out the nav's tick.
 onMounted(() => { store.refresh() })
 </script>
-
-<style scoped>
-.fc-sys__lede, .fc-sys__muted, .fc-sys__checked, .fc-sys__foot {
-  color: rgb(var(--v-theme-on-surface) / 0.66);
-}
-.fc-sys__checked { font-size: 0.78rem; }
-.fc-sys__card { background: rgb(var(--v-theme-on-surface) / 0.04); }
-
-.fc-sys__row {
-  display: flex; align-items: center; gap: 12px;
-  padding: 12px 16px;
-  border-bottom: 1px solid rgb(var(--v-theme-on-surface) / 0.08);
-}
-.fc-sys__row:last-child { border-bottom: 0; }
-
-.fc-sys__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
-.fc-sys__dot--ok      { background: rgb(var(--v-theme-success)); }
-.fc-sys__dot--stale   { background: rgb(var(--v-theme-warning)); }
-.fc-sys__dot--down    { background: rgb(var(--v-theme-error)); }
-.fc-sys__dot--unknown { background: rgb(var(--v-theme-on-surface) / 0.35); }
-
-.fc-sys__body { min-width: 0; flex: 1 1 auto; }
-.fc-sys__name { font-weight: 600; }
-.fc-sys__kind {
-  margin-left: 8px; font-weight: 400; font-size: 0.72rem; text-transform: uppercase;
-  letter-spacing: 0.04em; color: rgb(var(--v-theme-on-surface) / 0.5);
-}
-.fc-sys__detail { font-size: 0.82rem; color: rgb(var(--v-theme-on-surface) / 0.72); }
-
-.fc-sys__meta {
-  text-align: right; font-size: 0.75rem; flex: 0 0 auto;
-  font-variant-numeric: tabular-nums; color: rgb(var(--v-theme-on-surface) / 0.6);
-}
-.fc-sys__queues { opacity: 0.75; }
-</style>