Move the console onto ReUI PRO

Install ReUI (MCP, skill, @reui registry, Tailwind v4, shadcn base-nova) and move
the shared UI onto it: Button, Tag, Check, Input/Textarea, Segmented, Alert, Panel,
Dialog, Tooltip, Menu and Select (Popover), Toast (sonner), the Table frame
(DataGrid), the Dashboard KPI strip, the shnt Ops palette, Geist and the type scale.

Design only: behaviour, texts and roles are unchanged. Tests that asserted the old
DOM were updated; the tests now format numbers in English wherever they run.
docs/reui-migration-plan.md records the plan and its decisions.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

src/ui/Button.module.css

@@ -0,0 +1,111 @@
+/*
+Two sizes and three variants, and nothing else. Row actions used to use `.ib`
+(defined three times, with three different disabled opacities) on nine screens
+and the normal `Button` in DHCP, so the same action looked two different ways
+depending on the table.
+*/
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-3);
+  font-size: var(--t-4);
+  /* The same height as the field and the dropdown it sits next to: it was 30 px,
+     so "Go" and "Resolve" stood 4 px short of the row they belong to. */
+  min-height: var(--field-height);
+  padding: var(--s-4) var(--s-8);
+  border-radius: var(--r-2);
+  border: 1px solid var(--line);
+  background: var(--shine-btn), var(--pan2);
+  color: var(--ink);
+  cursor: pointer;
+  font-weight: 500;
+  font-family: inherit;
+  white-space: nowrap;
+  box-shadow: var(--edge);
+  transition: border-color var(--t-fast), background var(--t-fast);
+}
+
+.btn:hover:not(:disabled) { border-color: var(--line-hover); }
+.btn:active:not(:disabled) { box-shadow: var(--sunken); }
+
+.btn:disabled { opacity: 0.5; cursor: default; }
+.btn:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
+
+/* The one in a table row: it does not compete with the row's data. */
+.sm {
+  font-size: var(--t-3);
+  font-weight: 400;
+  padding: var(--s-3) var(--s-6);
+  color: var(--mute);
+  /* A row's button is not in a form row: it keeps its own size. */
+  min-height: 0;
+}
+
+/*
+Only for the small one WITHOUT a variant. `.sm:hover` is a class plus a
+pseudo-class, so it beat `.primary` (a class alone) and a small primary got
+lighter on hover: `--ink` text over the amber, 1.69:1. It was not seen until the
+console had its first `size="sm" variant="primary"`, on the "Show" of the
+Dashboard's custom range.
+*/
+.sm:not(.primary):not(.danger):hover:not(:disabled) { color: var(--ink); }
+
+/* A button that stays pressed (the "Glue" and "RRSIG" filters) says so with the
+   accent colour, not only with `aria-pressed`. */
+.btn[aria-pressed='true'] { color: var(--acc-ink); border-color: var(--acc-ink); }
+
+/* The primary carries its own edge, stronger because amber takes more light. The
+   text is dark and not white for a measured reason: white over `#f5a524` gives
+   2.04:1 and does not even reach the large-text minimum; dark gives 9.09:1. */
+.primary {
+  background: var(--shine-primary), var(--acc);
+  border-color: var(--acc);
+  color: var(--on-acc);
+  font-weight: 550;
+  box-shadow: var(--edge-strong);
+}
+
+/*
+The primary's hover LIGHTENED by 6 %, and over `--acc` that gives 1.108:1, below
+the 1.20 this console settled on when fixing `--hover`, and the same order of
+magnitude as that defect. Lightening further does not fit: the red channel of
+`#f5a524` is already at 245 and saturates before reaching the threshold. It
+darkens instead, which is the only thing that gets there. And the
+`border-color: var(--acc)` goes, since that was what the button was already worth
+at rest: it did nothing.
+*/
+.primary:hover:not(:disabled) { filter: brightness(0.90); }  /* 1.240:1 */
+
+/*
+The destructive one is FILLED. It only tinted the border, so the "Delete" in
+"Delete Cluster" weighed the same as the "Close" beside it, while the "Add" of a
+harmless modal was a solid amber block: the most consequential button on the
+screen was the quietest, and this console has no undo anywhere.
+*/
+.danger {
+  background: var(--shine-danger), var(--dan-fill);
+  border-color: var(--dan);
+  color: var(--on-dan);
+  font-weight: 550;
+}
+
+/*
+Not in a table ROW: there "Delete" repeats once per row and a red block per row
+turns the table into an alarm. It stays as red text, and the fill appears on hover
+and on keyboard focus.
+*/
+.sm.danger {
+  background: var(--pan2);
+  border-color: var(--line);
+  color: var(--dan);
+  font-weight: 400;
+}
+
+.sm.danger:hover:not(:disabled),
+.sm.danger:focus-visible {
+  background: var(--dan-fill);
+  border-color: var(--dan);
+  color: var(--on-dan);
+}