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/SubTabs.module.css

@@ -0,0 +1,61 @@
+/*
+The sub-navigation bar. An underline and not a filled pill, and the difference is
+the same one `SectionIndex` makes: `Segmented` fills with amber because there you
+have chosen a value and the others have stopped applying. Here the others are
+still there (they are other screens of the same section), so the active one is
+marked with an edge and the rest read as ordinary links.
+*/
+.bar {
+  display: flex;
+  gap: var(--s-8);
+  align-items: stretch;
+  /* The rule under the tabs is an inset shadow and not a border, so the active
+     tab's edge can sit on it without leaving the box. With a border, each tab had
+     to reach 1 px past the content box (`margin-bottom: -1px`) to cover it, and
+     inside `overflow-x: auto` (which makes `overflow-y` auto too) that pixel was
+     overflow: Chromium on Linux drew a 15 px vertical scrollbar beside the tabs of
+     every section. The children paint over their parent's shadow, so the active
+     edge still covers the rule. */
+  /* ReUI's tabs: the line sits under the active tab only, none under the whole row. */
+  margin-bottom: var(--gap-block);
+  /* The strip scrolls rather than wrapping: nine panes on two lines turn a bar
+     into a block, and the second line reads as a different thing. */
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+
+.tab {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 var(--s-5);
+  color: var(--mute);
+  text-decoration: none;
+  font-size: var(--t-4);
+  /* The edge is ALWAYS there, transparent when it does not apply: painting it
+     only on the active one moves every tab 2 px each time it changes. */
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+  /* The containing block of a mark's hidden words (`text.sr`, absolutely placed).
+     Without it they were placed against the page and not inside the strip, and a
+     marked tab beyond the strip's scroll widened the whole page: measured at 390 in
+     Settings with Cache marked, 461 px of document in a 390 px window. */
+  position: relative;
+}
+
+.tab:hover { color: var(--ink); }
+.tab:focus-visible { outline: none; box-shadow: var(--halo-focus); border-radius: var(--r-2); }
+.tab[aria-current='page'] { color: var(--acc-ink); border-bottom-color: var(--acc-ink); font-weight: 600; }
+
+/* A tab's mark (`marks`): a dot in the active ink after the name, up where a
+   superscript would sit, so the tab keeps its height and its baseline. */
+.mark {
+  display: inline-block;
+  width: var(--s-3);
+  height: var(--s-3);
+  margin-left: var(--s-2);
+  vertical-align: super;
+  border-radius: var(--r-full);
+  background: var(--acc-ink);
+}