feat(ui): replace the gallery and inventory tables with a rail and a detail pane

[localai-bot]

Replaces the model gallery, the backend gallery and the Host inventory tables with a rail and a detail pane, and renames the nav entry to Discover.

Why

The eight-column table was never the real defect. The click-to-expand row underneath it was: variants, files, licences and a VRAM estimate never fitted inside a <tr>, so they were pushed into a drawer that could hold one entity at a time, could not be linked to, and had no room to say anything useful. All three pages had it.

The three surfaces

They share a shell and differ in exactly one place: what the pane says when nothing is selected. That difference is the point, not an inconsistency.

Discover (/app/models) — a catalog. The zero state is the discovery page: what fits this host, what is worth installing. The rail groups by capability while browsing and flattens to results the moment a term is typed. That is a rule rather than a toggle: once someone has said what they are looking for, the buckets are between them and the answer.

The detail pane plots VRAM against context length with the host's own limit drawn across it. New information, not a restyle: a single number invites "so will it run?", and the honest answer is usually "yes, up to a 32k context", which is a shape rather than a number. The estimates were already fetched for every context size, so it costs no new request. Backends that take no context length say so instead of getting a meaningless chart, and a host with no GPU gets no chart at all rather than bars with nothing to compare against.

Backends (/app/backends) — also a catalog, but fitness is not free memory, it is the accelerator and platform the runtime was built for. So the zero state leads with what this host actually is, then what is not installed, then what has gone stale. The table listed every runtime and left "which of these can even run here" entirely to the reader. Node distribution moves into the pane, which is the one thing a row could never carry.

Host (/app/manage) — an inventory, not a catalog, so there is nothing to discover. The zero state reports what is happening: how many models are loaded, what failed, what has an update, which models are holding VRAM. Every number already existed on the page; none of them had been assembled into one statement. The rail buckets by state rather than capability, which is the opposite of the galleries and deliberately so: nobody opens Host wondering which of their models does vision. Load and Stop are promoted out of the kebab because that is what an operator came for.

Shared components

SplitView, EntityRail, DetailHeader and StatGrid live under components/split/. EntityRail is data-driven: a surface maps its entity onto { id, name, icon, meta, stripe, groupId } and keeps its vocabulary to itself, which is what stops three pages growing three subtly different rails. The CSS moved with it, since a class named after one page is a lie on the next two.

Deliberate calls worth reviewing

• The model gallery's split-button variant menu is gone. The pane lists every build with backend, quantization, size, fit and a details disclosure, each installable, which is what the dropdown was a cramped substitute for. Its tests move onto that list; the three contracts it alone carried (fetch-once caching, the loading state, an unfit build staying installable) are backfilled against the pane.
• Rail entries carry no description. Two lines is the budget and the second is worth more as an answer than as prose. The stripped-Markdown contract moved to the pane lede, tooltip included.
• Host keeps its two tabs. Folding them into one rail costs five live URL parameters, the manage-tab localStorage key and the stat-card shortcuts, all of which are working deep links. The tabs stay as the group selector; merging them is a follow-up with its own migration.

Accessibility

The rail is not a listbox, and the final commit explains why: ARIA lets a listbox contain options and groups and nothing else, but each group's collapse control is a button that has to sit inside the scroller with the entries it folds. It is a labelled group of buttons with aria-current for selection. Roving tabindex makes the rail one tab stop instead of forty, arrowing moves focus with the selection, focus rings are inset so overflow: hidden stops clipping them, and coarse pointers get a 44px target.

Testing

Full e2e suite: 355 passing. New specs for all three split views; alias-template, manage-logs-link, manage-action-menu-position, model-editor-back-nav and the description-cell tests move off .table and the row kebab onto the rail and the pane.

Inline styles in Models.jsx drop from 82 to 41, so the ratchet on refactor/ui-inline-styles-to-design-system moves down rather than up.

Known gap, pre-existing

The Operate console is now visibly half-translated. Discover has 94 t() calls; Backends has 6 and Host 16. Those pages were already predominantly hardcoded English before this change, so the new copy matches their existing convention rather than regressing them, but the split view puts a fully translated Discover next to an untranslated Backends and Host. Worth its own pass.

🤖 Generated with Claude Code