The live UI did not follow the canvas because its base layer differed: dark
palette in hex (now the canvas oklch values), 13 px body text, flat Frame panels.
- Tokens: canvas palette, 14 px body, 1.4 line height; Frame without `dense`
gets the 3 px ring; Panel takes a description line.
- Shell: 56 px brand button with version, 11 px group headings, user card at the
foot, versions moved into the header status popover, Home / group / section
crumbs, amber "Attention" status when blocking is off or paused.
- New KpiStrip and PageTabs; Dashboard KPIs in three frames and a Refresh button.
- Zones: KPI strip, tab with count, views, framed table with the canvas columns.
- Apps: Installed / App Store tabs and a grid instead of cards (store inline).
- Blocking: state banner and tab counts; one "Blocking" title.
- Settings: actions in the header, label-and-help rows with the control on the right.
- DHCP, Administration, DNS Client, Logs, Cache, About: subtitles, framed tables,
KPI strips where the data exists; Login cover with the three-point list.
- docs/compose.shnt.example.yaml: production compose with the console image.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Shell: collapsible rail, DNS/Server groups with pins, always-on header with
breadcrumbs and server status, Ctrl/Cmd+K command palette.
Cache: left column is a lazily expanded tree of every zone, right column the
selected node's records; both columns are ReUI Frames.
Styles: dark variant follows data-theme (field and outline fills), 32 px selects,
36 px segmented strip, 40 px caption table heads, 56 px rows, 20/24/32 page padding.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Toast: sonner draws the notice and runs its clock, pauses it under the pointer and
removes it. ui/Toast keeps the live region and the action with its permission check.
Gone, because sonner has none of it: holding the clock while the keyboard focus is
inside, restarting it when the notice gains a rule, Escape, and handing the focus back
to a named element. The two Rules tests and three Toast tests about those are removed.
Dashboard: the eleven figures are one KPI strip, every cell the same weight, an icon
tile on the left, the name, the figure at 24 px and under it the share and the change.
The sparklines and the larger Total Queries card are gone; a card still opens Query Logs.
Check.module.css gets the switch drawing back: Blocking > Lists composes it, and
dev/css-dead.mjs reported the missing class.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Add ui/DataTable, which builds ReUI's DataGrid from `columns` and `data`, and move
all 23 tables onto it. What the grid does not take (a class on a row or cell,
`aria-sort`, `style`, `colSpan`, `role`, `hidden`) is put on the elements it drew
after every render. The column definitions keep their identity between renders, so
cells are not mounted again, and the grid's own paging is off.
The stacked rows on a phone, the column labels and the sort order of the original
work as before. In Blocking > Lists a group heading is a row whose first cell spans
the four columns. docs/reui-migration-plan.md records it.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
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 <noreply@anthropic.com>
