From 74b7ea282916a3f18048d92ad9afd877f2d64c56 Mon Sep 17 00:00:00 2001 From: "mudler's LocalAI [bot]" <139863280+localai-bot@users.noreply.github.com> Date: Sun, 2 Aug 2026 19:28:36 +0200 Subject: [PATCH] feat(ui): replace the gallery and inventory tables with a rail and a detail pane (#11288) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(ui): rename the Install Models nav entry to Discover "Install Models" named the action rather than the destination, and it was the only multi-word entry in a rail of one-word ones (Home, Chat, Studio, Talk, Build, Operate). A bare "Models" was the obvious fix but it collides with the installed-models view under Host, which is a different page for a different job. "Discover" keeps the rhythm and says what the page is for. The icon moves from a download arrow to a compass for the same reason: the page is browsed before it is installed from. Translated in all seven locales rather than left to fall back, so a locale switch does not leave the entry in English. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * feat(ui): replace the gallery table with a rail and a detail pane The eight-column table was not the real problem; the click-to-expand row underneath it was. Variants, files and a VRAM estimate never fitted inside a , so they were pushed into a drawer that could hold one model at a time, could not be linked to, and had no room to say anything useful. The gallery is now a rail to scan and a pane that answers. The pane has two states and no third: with nothing selected it is the discovery page, and with a model selected it is that model's detail. Selection lives in the URL, so a model is linkable and Back steps out of the detail instead of off the page. 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, and making the user choose would be handing them our problem. The detail pane plots VRAM against context length with the host's own limit drawn across it. This is 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 being given a meaningless chart, and a host with no GPU gets no chart at all rather than bars with nothing to compare against. The split-button variant menu goes with the actions column. The pane lists every build with its 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. RecommendedModels moves inside the pane, where it has the width to argue for a model instead of listing one, and keeps its own dismissal and collapse. Rail entries carry no description. Two lines is the budget and the second is better spent on whether the thing will run; the stripped-Markdown contract moves to the pane's lede, tooltip included. e2e: 123 passing across models-gallery, navigation, recommended-panel, model-artifact-operation, operations-strip and page-render-smoke. Inline styles in Models.jsx drop from 82 to 41. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * refactor(ui): extract the split view into shared components Discover shipped its rail, pane and detail header as private functions inside Models.jsx. Backends and Host have the same defect and want the same shape, so leaving them there guarantees three rails that drift. SplitView, EntityRail, DetailHeader and StatGrid now live under components/split/. EntityRail is deliberately data-driven: a surface maps its own entity onto { id, name, icon, meta, stripe, groupId } and keeps its vocabulary to itself, which is what stops the rail learning about models, backends and loaded state all at once. The CSS moves with it. What was .discover__rail is .entity-rail, .discover__ pane is .split-view__pane and so on, because a class named after one page is a lie on the next two. Only what is genuinely Discover's stays behind the old prefix: the shelves, the hero and the VRAM-by-context chart. Two additions the shared rail needs and Discover did not: a state stripe, for surfaces read by condition before they are read by name, and an empty label. Discover passes neither. No behaviour change. e2e 100 passing across models-gallery, navigation and models-recommended-panel. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * feat(ui): put the backend gallery on the split view Same defect as the model gallery, so the same shape: a seven-column table over a click-to-expand row that was the only place the repository, licence, tags and links could go. The rail groups backends by the use case they serve, sharing Discover's taxonomy on purpose: a backend is the runtime a use case needs, so "vision" ought to mean the same thing one level down. It flattens on a query for the same reason it does on Discover. The zero state is the one real departure. A backend's fitness is not free memory, it is the accelerator and platform it was built for, so the pane leads with what this host is, then what is not installed yet, then whether anything installed has gone stale. The table listed 37 runtimes and left "which of these can even run here" entirely to the reader. Distribution moves into the pane, which is the one thing a row could never carry: which nodes hold a copy and which do not, with the install-on-more control next to it rather than squeezed against a chip. The distributed and target-node action logic is unchanged, including the guard that keeps a hardware-specific build off the fan-out path. The split-button popover loses its per-row anchoring because there are no rows; one pane, one anchor. Selection lives in ?backend=, preserving the ?target= scope rather than clobbering it. e2e: 139 passing across models-gallery, navigation, backends-management, models-recommended-panel, nodes-per-node-backend-actions, page-render-smoke, operations-strip and model-artifact-operation. The backends spec gains six split-view tests; its three description-cell tests move onto the pane lede. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * feat(ui): put the Host inventory on the split view The last of the three surfaces, and the one that is not a catalog. Both tabs had the same click-to-expand row, so the shell transfers; what does not transfer is the zero state, because there is nothing to discover in your own inventory. With nothing selected the pane reports what is happening: how many models are loaded, what failed, what has an update, and which models are holding VRAM right now. Every number was already on the page. None of them had been assembled into one statement, so "what is going on" was a question the tabs could not answer however long you looked at them. The rail buckets by state rather than capability - Running, Idle, Disabled for models; Update available, Installed for backends - which is the opposite of the galleries and deliberately so: nobody opens Host wondering which of their models does vision. Entries carry a state stripe for the same reason. Load and Stop are promoted out of the kebab, because that is what an operator came for; the rest stays behind the menu rather than diluting it. Adopted, pinned and alias badges follow the model into the pane: they are facts about the thing, not about its state, and the rail line is spent on state. Deliberately NOT done: folding the two tabs into one rail, as the mock had it. It costs five URL parameters, the manage-tab localStorage key and the stat-card shortcuts, all of which are live deep-links today. The tabs stay as the group selector; merging them is a follow-up with its own migration. e2e: full suite 355 passing. New host-split-view spec; alias-template, manage-logs-link, manage-action-menu-position and model-editor-back-nav move off `.table` and the row kebab onto the rail and the pane. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * polish(ui): accessibility and consistency pass over the three split views Findings from a pass over what the previous four commits actually shipped, rather than what they were supposed to. The rail was not a listbox. 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 now a labelled group of buttons, which is the honest description; selection is announced with aria-current and the arrow keys are unaffected. Every entry was its own tab stop, so tabbing past a forty-entry rail to reach the pane took forty keystrokes. Roving tabindex makes the rail one stop, and arrowing now moves focus with the selection instead of leaving it behind on an entry Tab can no longer reach. The rail rounds its corners with overflow:hidden, which was clipping the focus ring off the first and last entries entirely. Inset outlines fix it. A 30px row is fine under a mouse and too small under a thumb, so coarse pointers get a 44px target without costing density on a desktop. One slot said three different things: "9 models loaded" on Discover, "12 loaded" on Backends, "3 of 9" on Host. All three lists are a page of a larger set, so all three now say so the same way. Also removed: an emptyLabel prop on EntityRail that nothing passed, its dead CSS rule, and MODELS_COLSPAN and ResourceRowDesc, which died with the tables. e2e: full suite 355 passing. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * fix(ui): correct three defects only a real gallery exposed Running the branch against a live instance with 1,595 models and 1,017 backends, rather than against mocked fixtures, surfaced three things the e2e suite could not. Grouping did nothing. The rails matched on the use-case keys the filter chips send (`chat`, `tts`, `transcript`), but those are a server-side vocabulary the handler maps onto entries. What entries actually carry is free-form and inconsistent: models come back tagged `llm`, `gguf`, `vision`, `coding`, and backends `LLM`, `text-to-text`, `audio-transcription`. Nothing matched, so every model landed in "Everything else" and the feature was decorative. Grouping now lives in utils/entityGroups.js, shared by both galleries, matching case-insensitively against the vocabulary the API really uses, with the entry's backend as a fallback signal - a backend named `whisper` is a speech backend whatever its tags say. Order is specific before general and that is load-bearing: a vision model is tagged `llm` too, so testing text first would swallow it. The zero state claimed GPU memory on a machine with no GPU. The resources endpoint reports system RAM in the same field when gpu_count is 0, so the hero read "84.4 GB of GPU memory" next to the recommendations panel correctly saying "No GPU detected". The number was never wrong, only its label; it now says system memory unless a GPU is actually present. The page title still said "Install Models" under a nav entry saying Discover. Also: the keyboard test named the model it expected to arrive at, which made it a hostage of the grouping table and broke the moment the buckets were fixed. It now asserts that the selection moves and returns. e2e: full suite 355 passing. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * fix(ui): the filters and the rail were fighting over the same job Four things you find odd on Discover, and they turn out to be one mistake seen from four sides. The rail grouped the current page. The listing is paginated at nine rows, so those bucket headers described nine entries out of 1,595, and turning a page reshuffled the sections under the reader. The structure was never stable because it was computed over the wrong set. The chips were redundant for the same reason, seen from the other side. They send tag= and filter all 1,595 server-side. The rail grouped nine of them client-side by the same axis. Two controls for one job, and the weaker one was the one this branch added, so it goes. Grouping stays only on Host, where the list is complete, local, and bucketed by state rather than capability. The search bar felt odd because it sat in a full-width band while the thing it narrowed was a 290px rail below and to the left. The whole band now lives in the rail column: search, backend, use cases, refinements, then the list it narrows. One column to say what you want, one to show what you got. Nineteen chips do not fit at that width, so they fold into a disclosure that states the selection. A disclosure and not a popover, deliberately: picking use cases is multi-select and interleaves with the backend select and the toggles below, and a popover dismisses itself the moment you touch either. The header held two counts and two buttons at arm's length from all of it. The counts were the third statement of the same number on one screen, after the rail's "9 of 1,247" and the pane's own headline, so they go. The buttons move into the pane's zero state, which is the surface that answers "what do I do here". Also: the two first-run empty states wore .loading-center, which is display:flex in the default row direction because it exists to centre one spinner. With four children that put the icon, the heading, the sentence and the buttons on a single line with no gap. They are now a proper full-height empty state. e2e: full suite 353 passing. Grouping tests are replaced by ones asserting the rail stays flat; chip tests open the disclosure first; two filter-layout tests that asserted the old three-band arrangement now assert the column. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * polish(ui): make Discover a full-height view, group the chips, name the refinements Four things, all of them the same complaint: the page read as a document with controls scattered on it rather than as one view. The header is fused. A title block with its own padding, a subtitle and two counts made the split view look like an attachment to a document that happened to sit below it. It is now a slim bar carrying the title, the count and the two page-level actions, and the split fills the rest of the window. Rail and pane scroll independently, so the filters and the pane's headline stay put while a long list moves under them. The chips group. Nineteen in a flat row is a lot to scan even behind a disclosure, and they already belong to the four families the rest of the UI speaks, so they are bucketed by those. "All" sits on its own above them without a heading, because it is a reset rather than a use case. The refinements stop looking dumped. When the band became a column they were three controls left where they landed; they now read as a named section with one control per row. The zero state suggests again. It had decayed into a "Browsing / 9 of 1,247 / select a model" line that restated the count for the third time on one screen. It now offers the four use cases as tiles that set the filter, which is the shelf idea from the mock without inventing curation or paying for a second fetch. Two bugs found by looking at it rather than at the tests: the disclosure was clamped to 190px, which cut it off partway through its third section so two of the five never appeared at all; and the creation actions rendered twice, once in the new bar and once in the pane hero a few pixels away. e2e: full suite 353 passing. The chip-row test now holds its contract across the per-family rows rather than a single one, and additionally asserts every family is present and non-empty. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * fix(ui): pin the split view's height so a long detail scrolls the pane Selecting a model with a long description grew the whole page and dragged the rail down with it, which is the opposite of what "full height" was supposed to buy. The flex chain was right and the ceiling was missing. .app-layout and .main-content are min-height:100dvh, which is a floor: flex distributes free space but nothing caps growth, so a pane taller than the viewport expanded the column, the document scrolled, and the rail stretched to match. height:100% on the pane then resolved against an auto-height parent and did nothing. The chat route already solves this by pinning .main-content to 100dvh. The same treatment now applies to any route containing a .page--app, selected with :has() so the shell does not have to learn which pages happen to be split views. Below the stacking breakpoint the pin is lifted, because two stacked halves in two short scrollers is worse than a page that scrolls. Measured on a live instance: document height stays at the viewport across selection (950px either side) and the pane overflows internally instead. Adds discover-height.spec.js, which asserts the page height and the rail height are unchanged by selection and that the pane is the thing that scrolls. The existing specs could not have caught this: they mock short descriptions, and the bug only appears when the pane has more content than the viewport holds. e2e: full suite 355 passing. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * feat(ui): give Backends and Host the full-height view, and fix the Update button Backends now matches Discover: the header fuses into a slim bar carrying the title, the count and the page-level actions, the filters move into the rail column where they narrow the rail and nothing else, and the split fills the window. Its seven chips fit at rail width, so unlike Discover's nineteen they need no disclosure. Host gets the bar and the height; its resource monitor, summary cards and tabs stay above the split, because those are read once while the rail and the pane are worked in. Two things the height change surfaced. The console layout is a flex row with align-items:flex-start, so its body sizes to content. Right for the pages it was built for, wrong for a split view, which needs a ceiling to scroll inside: without it the Backends rail ran past the viewport and over the footer. Pinned with :has() so only split-view routes are affected. The filters vanished when nothing matched. Both galleries swapped the whole shell for an empty state, which took the search box and the chips with it, so the page said "try adjusting your search or filters" while offering neither. The shell now stays and the empty state moves into the pane. Also fixes the Update control on Host, which had no className at all and rendered as bare text, next to a status span that had picked up btn classes and two copies of `fas` and so rendered as a button you cannot press. They have swapped appearances back. e2e: full suite 355 passing. The render-smoke selector learns .view-bar__title, since the pages it checks no longer all use PageHeader. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * fix(ui): keep the view mounted while searching, and bring rail grouping back Searching replaced the whole view with a loader. The search box lives in the rail column, so every debounced refetch unmounted the field being typed into and dropped its focus with it. The list, the filters and the pane went too. The shell now stays and the rail says it is busy: a sweep bar under its header and the stale list dimmed, so the eye knows the answer is being replaced without losing its place. A cold start still gets the skeleton, because there is nothing to keep. The condition for that is "nothing has loaded yet", not "the list is empty". Those differ exactly when someone is editing a query that matched nothing, and getting it wrong there would unmount the view on the keystroke after a no-results search - the worst possible moment. Grouping comes back on both galleries. It was removed because nine rows could not fill five buckets, so a page turn rebuilt the rail's whole structure. That was a symptom of the page size rather than of grouping: the rail now asks for 30 rows instead of 9 (Backends 60 instead of 21), which is enough for the sections to read as structure and turns five times fewer pages. The order of the sections is fixed, so what changes between pages is membership, not arrangement. Grouped while browsing, flat while searching, as before: once a term is typed the buckets stand between the reader and the answer. Also gives GalleryLoader a class and a testid instead of six inline style declarations on a bare div, which is why nothing could select it. e2e: full suite 359 passing, including a new spec asserting the search box keeps its focus and its value across a refetch, and that a cold start still shows the skeleton. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * perf(gallery): stop invalidating the VRAM estimate caches on every request Searching or turning a page felt slow. It was not the search and not the listing: /api/models answers in 3-9ms. It was the VRAM estimate, which the gallery asks for once per row, and which took ~2.3s every single time however often the same model was asked about. pkg/vram already caches what makes that expensive - the remote content-length probes, the GGUF metadata reads and the HF repo sizes. Those caches key on a gallery generation counter, and AvailableGalleryModelsCached triggered a background refresh on every call, with each refresh bumping the counter. One page view is one listing request plus thirty estimate requests, each of which re-read the gallery and started another refresh, so the generation moved constantly and every cache entry was stale before it could ever be read. The caches were dead in production. Three changes, each doing one thing: A refresh interval. The cached list is still served immediately; this only decides how often re-fetching from upstream is worth starting. Five minutes, as a package variable so tests can drive it without waiting. A generation bump only when the gallery actually changed. An unchanged gallery re-fetched on schedule must not throw away work that is still valid, which is the difference between an estimate costing nothing and costing a network round trip. A separate "loaded" flag. The cache engaged on `cached != nil`, so a gallery that legitimately holds nothing read as never-loaded and took the blocking path on every call, bumping the generation each time. Found by the test for the interval, which could not pass while this was true. Measured against a live instance with 1,595 models: one estimate, repeated 2.3s -> 2ms a page of 30, in parallel 10s -> 0.04s A first, genuinely unseen model still costs its remote probe. That is inherent; what changed is that it is now paid once per model per gallery version rather than once per request. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * perf(gallery): warm VRAM estimates at startup, and stop the UI waiting on them Two halves of the same complaint: the gallery stalls on VRAM estimation. Server side, the estimates are now warmed in the background at startup. Estimating an entry nobody has asked about costs a remote probe of its weight files, and the gallery needs one per row, so the first visitor was paying for the whole page. The warm-up walks the gallery in the order the UI lists it, so the first page is ready before anyone reaches it. It is bounded and it never blocks: 300 entries at 4 at a time by default, on its own goroutine, stopping with the server's context. Warming the whole gallery would be thousands of probes on every boot, which is rude to the upstream and slow to finish; warming nothing leaves the first page paying two seconds a row. Anything past the limit still warms itself on first view. LOCALAI_VRAM_WARM_LIMIT=0 turns it off for an air-gapped host, LOCALAI_VRAM_WARM_CONCURRENCY=1 slows it for a metered link. Client side, the page no longer waits on estimates it does not need yet. It fired one request per row at once; a browser allows about six connections per host, so thirty estimates took every slot and the request behind a click - the variant list, an install - queued behind work nobody asked for. That is the freeze: the list was already usable, and the UI was busy fetching sizes. Four at a time leaves room for the interactive request to overtake, and a row whose estimate is still in flight says "sizing…" rather than leaving a blank where a number will appear. buildEstimateInput moves to core/gallery as EstimateInput, since the handler and the warmer both need it. Measured against 1,595 models, from a cold boot: page 1, 30 estimates in parallel 10s -> 0.04s full warm-up (299 of 300 entries) 3m, in the background Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] * chore: untrack data/.local_user_id and ignore the runtime data dir `local-ai run` writes its instance state under ./data when started from the repo root, which is exactly what a contributor testing a build does. The identity file ended up committed on this branch by a `git add -A` while verifying the gallery changes against a live instance. Anchored, so it matches the runtime directory at the repo root and not a `data` directory nested inside some package. Signed-off-by: Ettore Di Giacinto Assisted-by: Claude:claude-opus-5 [Claude Code] --------- Signed-off-by: Ettore Di Giacinto Co-authored-by: Ettore Di Giacinto --- .gitignore | 5 + core/application/startup.go | 7 + core/gallery/estimate_warm.go | 188 +++ core/gallery/estimate_warm_test.go | 106 ++ core/gallery/gallery.go | 71 +- core/gallery/gallery_refresh_throttle_test.go | 80 ++ core/http/react-ui/e2e/alias-template.spec.js | 6 +- .../react-ui/e2e/backends-management.spec.js | 90 +- .../http/react-ui/e2e/discover-height.spec.js | 72 + .../e2e/discover-search-focus.spec.js | 52 + .../http/react-ui/e2e/host-split-view.spec.js | 69 + .../e2e/manage-action-menu-position.spec.js | 4 +- .../react-ui/e2e/manage-logs-link.spec.js | 11 +- .../e2e/model-editor-back-nav.spec.js | 5 +- core/http/react-ui/e2e/models-gallery.spec.js | 620 +++++---- .../e2e/models-recommended-panel.spec.js | 7 +- core/http/react-ui/e2e/navigation.spec.js | 9 +- .../react-ui/e2e/page-render-smoke.spec.js | 2 +- .../react-ui/public/locales/de/models.json | 50 +- core/http/react-ui/public/locales/de/nav.json | 2 +- .../react-ui/public/locales/en/models.json | 50 +- core/http/react-ui/public/locales/en/nav.json | 2 +- .../react-ui/public/locales/es/models.json | 50 +- core/http/react-ui/public/locales/es/nav.json | 2 +- .../react-ui/public/locales/id/models.json | 50 +- core/http/react-ui/public/locales/id/nav.json | 2 +- .../react-ui/public/locales/it/models.json | 50 +- core/http/react-ui/public/locales/it/nav.json | 2 +- .../react-ui/public/locales/ko/models.json | 50 +- core/http/react-ui/public/locales/ko/nav.json | 2 +- .../react-ui/public/locales/zh-CN/models.json | 50 +- .../react-ui/public/locales/zh-CN/nav.json | 2 +- core/http/react-ui/src/App.css | 894 +++++++++++++ .../react-ui/src/components/GalleryLoader.jsx | 6 +- core/http/react-ui/src/components/Sidebar.jsx | 6 +- .../src/components/split/DetailHeader.jsx | 39 + .../src/components/split/EntityRail.jsx | 166 +++ .../src/components/split/SplitView.jsx | 21 + .../src/components/split/StatGrid.jsx | 24 + core/http/react-ui/src/pages/Backends.jsx | 803 +++++------ core/http/react-ui/src/pages/Manage.jsx | 772 ++++++----- core/http/react-ui/src/pages/Models.jsx | 1175 ++++++++++------- core/http/react-ui/src/router.jsx | 2 +- core/http/react-ui/src/utils/entityGroups.js | 70 + core/http/react-ui/src/utils/section.js | 2 +- core/http/routes/ui_api.go | 36 +- docs/content/advanced/vram-management.md | 31 + docs/content/features/authentication.md | 2 +- docs/content/getting-started/quickstart.md | 2 +- 49 files changed, 4284 insertions(+), 1535 deletions(-) create mode 100644 core/gallery/estimate_warm.go create mode 100644 core/gallery/estimate_warm_test.go create mode 100644 core/gallery/gallery_refresh_throttle_test.go create mode 100644 core/http/react-ui/e2e/discover-height.spec.js create mode 100644 core/http/react-ui/e2e/discover-search-focus.spec.js create mode 100644 core/http/react-ui/e2e/host-split-view.spec.js create mode 100644 core/http/react-ui/src/components/split/DetailHeader.jsx create mode 100644 core/http/react-ui/src/components/split/EntityRail.jsx create mode 100644 core/http/react-ui/src/components/split/SplitView.jsx create mode 100644 core/http/react-ui/src/components/split/StatGrid.jsx create mode 100644 core/http/react-ui/src/utils/entityGroups.js diff --git a/.gitignore b/.gitignore index 3f5287bc8..a4c84a0e8 100644 --- a/.gitignore +++ b/.gitignore @@ -124,3 +124,8 @@ formal-verification/out/ # package directory itself and untrack the source. /apexentries /.github/ci/apexentries/apexentries + +# Runtime state written by `local-ai run` when it is started from the repo +# root, which is what a contributor testing a build does. Nothing under here is +# source: it is the instance's own models, outputs, traces and identity. +/data/ diff --git a/core/application/startup.go b/core/application/startup.go index 26b2f5b78..b46af7046 100644 --- a/core/application/startup.go +++ b/core/application/startup.go @@ -444,6 +444,13 @@ func New(opts ...config.AppOption) (*Application, error) { // when gallery data refreshes instead of using a fixed TTL. vram.SetGalleryGenerationFunc(gallery.GalleryGeneration) + // Fill those caches ahead of the first visitor. An estimate for an entry + // nobody has asked about yet costs a remote probe of its weight files, and + // the model gallery asks for one per row, so without this the first page + // spends seconds filling in its own sizes while somebody watches it. + // Non-blocking, and bounded: see DefaultEstimateWarmConfig. + gallery.WarmEstimateCache(options.Context, options.Galleries, options.SystemState, gallery.EstimateWarmConfigFromEnv()) + if options.ConfigFile != "" { if err := application.ModelConfigLoader().LoadMultipleModelConfigsSingleFile(options.ConfigFile, configLoaderOpts...); err != nil { xlog.Error("error loading config file", "error", err) diff --git a/core/gallery/estimate_warm.go b/core/gallery/estimate_warm.go new file mode 100644 index 000000000..8ed9e42e8 --- /dev/null +++ b/core/gallery/estimate_warm.go @@ -0,0 +1,188 @@ +package gallery + +import ( + "context" + "os" + "strconv" + "strings" + "sync" + "time" + + "github.com/mudler/LocalAI/core/config" + "github.com/mudler/LocalAI/pkg/system" + "github.com/mudler/LocalAI/pkg/vram" + "github.com/mudler/xlog" +) + +// EstimateInput builds the VRAM estimator's input from a gallery entry. +// +// It lives here rather than beside the HTTP handler because two callers need +// it: the handler answering one model, and the warmer below answering all of +// them ahead of time. +func EstimateInput(m *GalleryModel) vram.ModelEstimateInput { + var input vram.ModelEstimateInput + input.Size = m.Size + if repoID := extractHFRepo(m.Overrides, m.URLs); repoID != "" { + input.HFRepo = repoID + } + for _, f := range m.AdditionalFiles { + if vram.IsWeightFile(f.URI) { + input.Files = append(input.Files, vram.FileInput{URI: f.URI, Size: 0}) + } + } + return input +} + +// extractHFRepo finds a HuggingFace repo ID in a model's overrides or URLs. +func extractHFRepo(overrides map[string]any, urls []string) string { + if overrides != nil { + if params, ok := overrides["parameters"].(map[string]any); ok { + if modelRef, ok := params["model"].(string); ok { + if repoID, ok := vram.ExtractHFRepoID(modelRef); ok { + return repoID + } + } + } + } + for _, u := range urls { + if repoID, ok := vram.ExtractHFRepoID(u); ok { + return repoID + } + } + return "" +} + +// EstimateWarmConfig bounds the background warm-up. +type EstimateWarmConfig struct { + // Limit is how many gallery entries to warm, in gallery order. Zero + // disables warming entirely. The order matters: it is the order the UI + // lists them in, so the entries a user sees first are warmed first. + Limit int + // Concurrency is how many estimates run at once. Each one can be a remote + // probe, so this is deliberately small: the point is to be finished before + // anybody looks, not to saturate the link or the upstream. + Concurrency int + // Contexts are the context lengths to estimate at. These want to match what + // the UI asks for, or the warmed entry is not the one it reads. + Contexts []uint32 +} + +// DefaultEstimateWarmConfig is what the server uses unless told otherwise. +// +// The limit is a deliberate compromise. Warming the whole gallery would be +// thousands of remote probes on every boot, which is rude to the upstream and +// slow to finish; warming nothing leaves the first page of the model gallery +// paying two seconds per row. A few hundred covers what anyone browses in a +// sitting, and everything past it still warms itself on first view. +var DefaultEstimateWarmConfig = EstimateWarmConfig{ + Limit: 300, + Concurrency: 4, + Contexts: []uint32{8192, 16384, 32768, 65536, 131072, 262144}, +} + +// WarmEstimateCache fills the VRAM estimate caches in the background. +// +// An estimate for an entry the server has never seen costs a network probe of +// its weight files, seconds of it, and the UI asks for one per row. Doing that +// work at startup rather than on the first click is the difference between a +// gallery that reads instantly and one that spends ten seconds filling in its +// own sizes while somebody watches. +// +// It returns immediately; the work happens on its own goroutine and stops when +// ctx is done. Failures are logged at debug and otherwise ignored: a warm-up +// that cannot reach an upstream must never stop the server from starting, and +// the entry it failed on simply stays cold. +func WarmEstimateCache(ctx context.Context, galleries []config.Gallery, systemState *system.SystemState, cfg EstimateWarmConfig) { + if cfg.Limit <= 0 || cfg.Concurrency <= 0 { + return + } + + go func() { + started := time.Now() + + models, err := AvailableGalleryModelsCached(galleries, systemState) + if err != nil { + xlog.Debug("VRAM estimate warm-up skipped, gallery unavailable", "error", err) + return + } + if len(models) > cfg.Limit { + models = models[:cfg.Limit] + } + if len(models) == 0 { + return + } + + var ( + wg sync.WaitGroup + cursor = make(chan *GalleryModel) + warmed int + mu sync.Mutex + ) + + for i := 0; i < cfg.Concurrency; i++ { + wg.Add(1) + go func() { + defer wg.Done() + for m := range cursor { + input := EstimateInput(m) + if len(input.Files) == 0 && input.HFRepo == "" && input.Size == "" { + continue + } + // Per entry, not for the run: one unreachable weight file + // must not hold a worker for the whole warm-up. + entryCtx, cancel := context.WithTimeout(ctx, 30*time.Second) + _, err := vram.EstimateModelMultiContext(entryCtx, input, cfg.Contexts) + cancel() + if err != nil { + xlog.Debug("VRAM estimate warm-up failed for entry", "model", m.GetName(), "error", err) + continue + } + mu.Lock() + warmed++ + mu.Unlock() + } + }() + } + + feed: + for _, m := range models { + select { + case <-ctx.Done(): + break feed + case cursor <- m: + } + } + close(cursor) + wg.Wait() + + if ctx.Err() != nil { + xlog.Debug("VRAM estimate warm-up stopped", "warmed", warmed) + return + } + xlog.Info("VRAM estimate cache warmed", "entries", warmed, "of", len(models), "took", time.Since(started).Round(time.Second)) + }() +} + +// EstimateWarmConfigFromEnv reads the warm-up bounds from the environment, +// falling back to the defaults. +// +// LOCALAI_VRAM_WARM_LIMIT entries to warm; 0 disables the warm-up +// LOCALAI_VRAM_WARM_CONCURRENCY estimates in flight at once +// +// Env rather than a flag because it is an operational tuning knob, not part of +// what the server does: an air-gapped host wants it off, and a host behind a +// slow link wants it slower, and neither is a decision the CLI should carry. +func EstimateWarmConfigFromEnv() EstimateWarmConfig { + cfg := DefaultEstimateWarmConfig + if v, ok := os.LookupEnv("LOCALAI_VRAM_WARM_LIMIT"); ok { + if n, err := strconv.Atoi(strings.TrimSpace(v)); err == nil && n >= 0 { + cfg.Limit = n + } + } + if v, ok := os.LookupEnv("LOCALAI_VRAM_WARM_CONCURRENCY"); ok { + if n, err := strconv.Atoi(strings.TrimSpace(v)); err == nil && n > 0 { + cfg.Concurrency = n + } + } + return cfg +} diff --git a/core/gallery/estimate_warm_test.go b/core/gallery/estimate_warm_test.go new file mode 100644 index 000000000..8d12b4701 --- /dev/null +++ b/core/gallery/estimate_warm_test.go @@ -0,0 +1,106 @@ +package gallery_test + +import ( + "context" + "os" + + . "github.com/onsi/ginkgo/v2" + . "github.com/onsi/gomega" + + "github.com/mudler/LocalAI/core/config" + "github.com/mudler/LocalAI/core/gallery" + "github.com/mudler/LocalAI/pkg/system" +) + +var _ = Describe("VRAM estimate warm-up", func() { + var state *system.SystemState + + BeforeEach(func() { + dir, err := os.MkdirTemp("", "warm") + Expect(err).ToNot(HaveOccurred()) + DeferCleanup(func() { os.RemoveAll(dir) }) + state, err = system.GetSystemState(system.WithModelPath(dir)) + Expect(err).ToNot(HaveOccurred()) + gallery.ResetGalleryModelCache() + DeferCleanup(gallery.ResetGalleryModelCache) + }) + + It("does nothing when disabled, and returns without blocking", func() { + cfg := gallery.DefaultEstimateWarmConfig + cfg.Limit = 0 + + done := make(chan struct{}) + go func() { + defer close(done) + gallery.WarmEstimateCache(context.Background(), []config.Gallery{}, state, cfg) + }() + Eventually(done, "1s").Should(BeClosed()) + }) + + It("returns immediately even when there is work to do", func() { + // The caller is a server still starting up: warming must never be on + // the path to listening. + done := make(chan struct{}) + go func() { + defer close(done) + gallery.WarmEstimateCache(context.Background(), []config.Gallery{}, state, gallery.DefaultEstimateWarmConfig) + }() + Eventually(done, "1s").Should(BeClosed()) + }) + + It("stops when its context is cancelled", func() { + ctx, cancel := context.WithCancel(context.Background()) + gallery.WarmEstimateCache(ctx, []config.Gallery{}, state, gallery.DefaultEstimateWarmConfig) + cancel() + // Nothing to assert beyond not hanging or panicking: an aborted warm-up + // leaves entries cold, which is the state they were already in. + Consistently(func() bool { return true }, "100ms").Should(BeTrue()) + }) + + Describe("configuration from the environment", func() { + AfterEach(func() { + os.Unsetenv("LOCALAI_VRAM_WARM_LIMIT") + os.Unsetenv("LOCALAI_VRAM_WARM_CONCURRENCY") + }) + + It("falls back to the defaults", func() { + cfg := gallery.EstimateWarmConfigFromEnv() + Expect(cfg.Limit).To(Equal(gallery.DefaultEstimateWarmConfig.Limit)) + Expect(cfg.Concurrency).To(Equal(gallery.DefaultEstimateWarmConfig.Concurrency)) + }) + + It("lets an operator turn it off entirely", func() { + os.Setenv("LOCALAI_VRAM_WARM_LIMIT", "0") + Expect(gallery.EstimateWarmConfigFromEnv().Limit).To(BeZero()) + }) + + It("lets an operator slow it down", func() { + os.Setenv("LOCALAI_VRAM_WARM_CONCURRENCY", "1") + Expect(gallery.EstimateWarmConfigFromEnv().Concurrency).To(Equal(1)) + }) + + It("ignores values that are not usable", func() { + os.Setenv("LOCALAI_VRAM_WARM_LIMIT", "not-a-number") + os.Setenv("LOCALAI_VRAM_WARM_CONCURRENCY", "0") + cfg := gallery.EstimateWarmConfigFromEnv() + Expect(cfg.Limit).To(Equal(gallery.DefaultEstimateWarmConfig.Limit)) + // Zero workers would be a warm-up that never runs while looking + // enabled, so it keeps the default rather than honouring it. + Expect(cfg.Concurrency).To(Equal(gallery.DefaultEstimateWarmConfig.Concurrency)) + }) + }) + + It("keeps the estimate contexts the UI actually asks for", func() { + // A warmed entry at the wrong context lengths is a cache the gallery + // never reads, so this pins them together. + Expect(gallery.DefaultEstimateWarmConfig.Contexts).To(ContainElements( + uint32(8192), uint32(16384), uint32(32768), uint32(65536), uint32(131072), uint32(262144), + )) + }) + + It("bounds concurrency so a warm-up cannot saturate the link", func() { + Expect(gallery.DefaultEstimateWarmConfig.Concurrency).To(BeNumerically("<=", 8)) + Expect(gallery.DefaultEstimateWarmConfig.Concurrency).To(BeNumerically(">", 0)) + }) + +}) diff --git a/core/gallery/gallery.go b/core/gallery/gallery.go index 12a038577..53d623a02 100644 --- a/core/gallery/gallery.go +++ b/core/gallery/gallery.go @@ -325,10 +325,32 @@ func AvailableGalleryModels(galleries []config.Gallery, systemState *system.Syst var ( availableModelsMu sync.RWMutex availableModelsCache GalleryElements[*GalleryModel] - refreshing atomic.Bool - galleryGeneration atomic.Uint64 + // Whether a load has happened, tracked apart from the slice itself. A + // gallery that legitimately holds nothing caches as an empty (often nil) + // slice, and testing the slice for nil read that as "never loaded": every + // call then took the blocking path and bumped the generation, which is the + // same cache-defeating loop the refresh interval exists to stop. + availableModelsLoaded bool + refreshing atomic.Bool + galleryGeneration atomic.Uint64 + lastRefreshUnixNano atomic.Int64 ) +// How often the cached model list may be refreshed from upstream. +// +// This is a floor on refresh frequency, not a TTL: the cache is served +// regardless, and this only decides how often a background re-fetch is worth +// starting. It matters far more than it looks, because a refresh bumps +// galleryGeneration, and that invalidates every VRAM estimate cache in +// pkg/vram. Refreshing on every call therefore kept those caches permanently +// cold: the gallery listing is one request but the UI asks for one VRAM +// estimate per row, so a single page view triggered dozens of refreshes and +// every estimate paid full price for a remote probe it had already made. +// +// A package variable rather than a constant so tests can drive refreshes +// without waiting. +var GalleryRefreshInterval = 5 * time.Minute + // GalleryGeneration returns a counter that increments each time the gallery // model list is refreshed from upstream. VRAM estimation caches use this to // invalidate entries when the gallery data changes. @@ -352,7 +374,11 @@ func ResetGalleryModelCache() { } availableModelsMu.Lock() availableModelsCache = nil + availableModelsLoaded = false availableModelsMu.Unlock() + // Also clear the refresh stamp, or a suite that reset the cache would find + // the next refresh throttled by the previous spec's clock. + lastRefreshUnixNano.Store(0) } // AvailableGalleryModelsCached returns gallery models from an in-memory cache. @@ -363,9 +389,10 @@ func ResetGalleryModelCache() { func AvailableGalleryModelsCached(galleries []config.Gallery, systemState *system.SystemState) (GalleryElements[*GalleryModel], error) { availableModelsMu.RLock() cached := availableModelsCache + loaded := availableModelsLoaded availableModelsMu.RUnlock() - if cached != nil { + if loaded { // Refresh installed status under write lock to avoid races with // concurrent readers and the background refresh goroutine. availableModelsMu.Lock() @@ -387,8 +414,10 @@ func AvailableGalleryModelsCached(galleries []config.Gallery, systemState *syste availableModelsMu.Lock() availableModelsCache = models + availableModelsLoaded = true galleryGeneration.Add(1) availableModelsMu.Unlock() + lastRefreshUnixNano.Store(time.Now().UnixNano()) return models, nil } @@ -397,9 +426,18 @@ func AvailableGalleryModelsCached(galleries []config.Gallery, systemState *syste // gallery model cache. Only one refresh runs at a time; concurrent calls // are no-ops. func triggerGalleryRefresh(galleries []config.Gallery, systemState *system.SystemState) { + if GalleryRefreshInterval > 0 { + last := lastRefreshUnixNano.Load() + if last != 0 && time.Since(time.Unix(0, last)) < GalleryRefreshInterval { + return + } + } if !refreshing.CompareAndSwap(false, true) { return } + // Stamped before the fetch rather than after, so a slow upstream cannot + // let a queue of callers each start their own refresh behind this one. + lastRefreshUnixNano.Store(time.Now().UnixNano()) go func() { defer refreshing.Store(false) models, err := AvailableGalleryModels(galleries, systemState) @@ -408,12 +446,37 @@ func triggerGalleryRefresh(galleries []config.Gallery, systemState *system.Syste return } availableModelsMu.Lock() + changed := !sameModelSet(availableModelsCache, models) availableModelsCache = models - galleryGeneration.Add(1) + availableModelsLoaded = true + // Only a real change invalidates the VRAM caches. An unchanged gallery + // re-fetched on schedule must not throw away work that is still valid, + // which is the difference between an estimate costing nothing and + // costing a network round trip. + if changed { + galleryGeneration.Add(1) + } availableModelsMu.Unlock() }() } +// sameModelSet reports whether two model lists describe the same gallery, for +// the purpose of deciding whether derived caches are still valid. Names and +// order are enough: a change to an entry's files or size arrives with a new +// gallery index, and comparing every field on every entry would cost more than +// the caches save. +func sameModelSet(a, b GalleryElements[*GalleryModel]) bool { + if len(a) != len(b) { + return false + } + for i := range a { + if a[i].GetName() != b[i].GetName() { + return false + } + } + return true +} + // List available backends func AvailableBackends(galleries []config.Gallery, systemState *system.SystemState) (GalleryElements[*GalleryBackend], error) { return availableBackendsWithFilter(galleries, systemState, func(backend *GalleryBackend) bool { diff --git a/core/gallery/gallery_refresh_throttle_test.go b/core/gallery/gallery_refresh_throttle_test.go new file mode 100644 index 000000000..a1e9e4908 --- /dev/null +++ b/core/gallery/gallery_refresh_throttle_test.go @@ -0,0 +1,80 @@ +package gallery_test + +import ( + "os" + "time" + + . "github.com/onsi/ginkgo/v2" + . "github.com/onsi/gomega" + + "github.com/mudler/LocalAI/core/config" + "github.com/mudler/LocalAI/core/gallery" + "github.com/mudler/LocalAI/pkg/system" +) + +// The gallery generation counter is what every VRAM estimate cache keys on, so +// how often it moves decides whether those caches are worth having. Refreshing +// on every call kept them permanently cold: one page of the model gallery asks +// for a VRAM estimate per row, and each of those requests re-read the gallery, +// triggering a refresh that invalidated the estimate the previous row had just +// paid a network round trip for. +var _ = Describe("Gallery refresh throttling", func() { + var ( + tmp *system.SystemState + galleries []config.Gallery + origInterval time.Duration + ) + + BeforeEach(func() { + dir, err := os.MkdirTemp("", "gallery-throttle") + Expect(err).ToNot(HaveOccurred()) + DeferCleanup(func() { os.RemoveAll(dir) }) + + tmp, err = system.GetSystemState(system.WithModelPath(dir)) + Expect(err).ToNot(HaveOccurred()) + + // No upstream: the list comes back empty, which is all this needs. What + // is under test is how often a refresh is started, not what it returns. + galleries = []config.Gallery{} + origInterval = gallery.GalleryRefreshInterval + gallery.ResetGalleryModelCache() + }) + + AfterEach(func() { + gallery.GalleryRefreshInterval = origInterval + gallery.ResetGalleryModelCache() + }) + + It("does not bump the generation once per call", func() { + gallery.GalleryRefreshInterval = time.Hour + + _, err := gallery.AvailableGalleryModelsCached(galleries, tmp) + Expect(err).ToNot(HaveOccurred()) + start := gallery.GalleryGeneration() + + // Stands in for one page view: many callers in quick succession. + for i := 0; i < 30; i++ { + _, err := gallery.AvailableGalleryModelsCached(galleries, tmp) + Expect(err).ToNot(HaveOccurred()) + } + // Let any refresh that did start finish, so this cannot pass by racing. + Eventually(func() uint64 { return gallery.GalleryGeneration() }, "2s", "50ms"). + Should(Equal(start)) + }) + + It("still refreshes once the interval has passed", func() { + gallery.GalleryRefreshInterval = time.Millisecond + + _, err := gallery.AvailableGalleryModelsCached(galleries, tmp) + Expect(err).ToNot(HaveOccurred()) + + time.Sleep(5 * time.Millisecond) + _, err = gallery.AvailableGalleryModelsCached(galleries, tmp) + Expect(err).ToNot(HaveOccurred()) + + // An empty gallery refreshing to an empty gallery is unchanged, so the + // generation must hold: only a real change may invalidate the caches. + Consistently(func() uint64 { return gallery.GalleryGeneration() }, "300ms", "50ms"). + Should(Equal(gallery.GalleryGeneration())) + }) +}) diff --git a/core/http/react-ui/e2e/alias-template.spec.js b/core/http/react-ui/e2e/alias-template.spec.js index f3b1a0ca0..e9b13ba61 100644 --- a/core/http/react-ui/e2e/alias-template.spec.js +++ b/core/http/react-ui/e2e/alias-template.spec.js @@ -69,9 +69,9 @@ test.describe('Manage - alias badge', () => { test('renders a read-only alias -> target badge on aliased rows', async ({ page }) => { await page.goto('/app/manage') - await expect(page.locator('.table')).toBeVisible({ timeout: 10_000 }) - - // The aliased row shows the target; the plain model row does not. + // The badge moved off the row and into the pane: it is a fact about the + // model, and the rail line is spent on state. + await page.locator('[data-entity="gpt-4"]').click() await expect(page.getByText('alias -> fast-llm')).toBeVisible({ timeout: 10_000 }) }) }) diff --git a/core/http/react-ui/e2e/backends-management.spec.js b/core/http/react-ui/e2e/backends-management.spec.js index 11b179189..34408c92b 100644 --- a/core/http/react-ui/e2e/backends-management.spec.js +++ b/core/http/react-ui/e2e/backends-management.spec.js @@ -1,6 +1,9 @@ import { test, expect } from './coverage-fixtures.js' // Backends admin page (src/pages/Backends.jsx). +const PANE = '[data-testid="backends-pane"]' +const railItem = (page, name) => page.locator(`[data-entity="${name}"]`) + test.describe('Backends management page', () => { test.beforeEach(async ({ page }) => { await page.goto('/app/backends') @@ -49,11 +52,14 @@ test.describe('Backends management page - Markdown descriptions', () => { }) }) await page.goto('/app/backends') - await expect(page.locator('th', { hasText: 'Description' })).toBeVisible({ timeout: 10_000 }) + // Rendered means the rail has entries. The old gate waited on a column + // header, and there are no columns now. + await expect(railItem(page, 'markdown-backend')).toBeVisible({ timeout: 10_000 }) }) - test('table cell shows the description as clean text, not raw Markdown', async ({ page }) => { - const cell = page.locator('tr', { hasText: 'markdown-backend' }).locator('span[title]', { hasText: 'InsightFace' }) + test('the pane lede shows the description as clean text, not raw Markdown', async ({ page }) => { + await railItem(page, 'markdown-backend').click() + const cell = page.locator('.detail-pane__lede') await expect(cell).toHaveText(STRIPPED_DESCRIPTION) // The syntax itself must be gone, not merely rendered somewhere. @@ -65,15 +71,77 @@ test.describe('Backends management page - Markdown descriptions', () => { await expect(cell.locator('h1')).toHaveCount(0) }) - test('title tooltip carries the stripped text, not raw Markdown', async ({ page }) => { - const cell = page.locator('tr', { hasText: 'markdown-backend' }).locator('span[title]', { hasText: 'InsightFace' }) - - await expect(cell).toHaveAttribute('title', STRIPPED_DESCRIPTION) + test("the lede's tooltip carries the stripped text, not raw Markdown", async ({ page }) => { + await railItem(page, 'markdown-backend').click() + await expect(page.locator('.detail-pane__lede')).toHaveAttribute('title', STRIPPED_DESCRIPTION) }) - test('a backend with no description still shows the placeholder', async ({ page }) => { - const row = page.locator('tr', { hasText: 'plain-backend' }) - - await expect(row.locator('span[title=""]')).toHaveText('-') + test('a backend with no description renders no lede rather than a blank one', async ({ page }) => { + // The table needed a placeholder because an empty cell in a grid of full + // ones reads as a fault. The pane has no grid to keep aligned, so it omits + // the line - but must never print "undefined". + await railItem(page, 'plain-backend').click() + await expect(page.locator(PANE)).toContainText('plain-backend') + await expect(page.locator('.detail-pane__lede')).toHaveCount(0) + await expect(page.locator(PANE)).not.toContainText('undefined') + }) +}) + +test.describe('Backends gallery - split view', () => { + test.beforeEach(async ({ page }) => { + await page.route('**/api/backends*', (route) => { + route.fulfill({ + contentType: 'application/json', + body: JSON.stringify({ + backends: [ + { name: 'llama-cpp', description: 'GGUF inference', installed: true, version: '1.52.0', license: 'MIT', tags: ['chat'] }, + { name: 'whisper', description: 'Speech to text', installed: true, version: '1.8.2', license: 'MIT', tags: ['transcript'] }, + { name: 'diffusers', description: 'Image generation', installed: false, license: 'Apache-2.0', tags: ['image'] }, + ], + }), + }) + }) + await page.goto('/app/backends') + await expect(railItem(page, 'llama-cpp')).toBeVisible({ timeout: 10_000 }) + }) + + test('the gallery renders no table', async ({ page }) => { + await expect(page.locator('[data-testid="backends"]')).toBeVisible() + await expect(page.locator('table thead th')).toHaveCount(0) + }) + + test('with nothing selected the pane describes the host', async ({ page }) => { + await expect(page.locator(PANE)).toContainText('This host') + await expect(page.locator('[data-testid="backends-back"]')).toHaveCount(0) + }) + + test('choosing a backend turns the pane into its detail, and back returns', async ({ page }) => { + await railItem(page, 'llama-cpp').click() + await expect(page.locator(PANE)).toContainText('llama-cpp') + await expect(page.locator(PANE)).toContainText('MIT') + await expect(page.locator(PANE)).not.toContainText('This host') + + await page.locator('[data-testid="backends-back"]').click() + await expect(page.locator(PANE)).toContainText('This host') + }) + + test('the selection lives in the URL and survives a reload', async ({ page }) => { + await railItem(page, 'whisper').click() + await expect(page).toHaveURL(/[?&]backend=whisper/) + await page.reload() + await expect(railItem(page, 'whisper')).toBeVisible({ timeout: 10_000 }) + await expect(page.locator('[data-testid="backends-back"]')).toBeVisible() + }) + + + test('the rail groups while browsing and flattens on a query', async ({ page }) => { + await expect(page.locator('[data-testid^="backends-rail-group-"]').first()).toBeVisible() + await page.locator('input[placeholder*="Search backends"]').fill('llama') + await expect(page.locator('[data-testid^="backends-rail-group-"]')).toHaveCount(0) + }) + + test('an installed backend states its version, an absent one says so', async ({ page }) => { + await expect(railItem(page, 'llama-cpp')).toContainText('v1.52.0') + await expect(railItem(page, 'diffusers')).toContainText('not installed') }) }) diff --git a/core/http/react-ui/e2e/discover-height.spec.js b/core/http/react-ui/e2e/discover-height.spec.js new file mode 100644 index 000000000..7ad7ba501 --- /dev/null +++ b/core/http/react-ui/e2e/discover-height.spec.js @@ -0,0 +1,72 @@ +import { test, expect } from './coverage-fixtures.js' + +// The split view is meant to scroll inside itself. It is easy to regress into +// scrolling the document instead, because the shell's height rules are floors +// (min-height: 100dvh) rather than ceilings, so any tall pane silently grows +// the whole column and takes the rail with it. +// A description long enough that the detail pane must overflow, which is the +// only condition under which the bug shows. +const LONG = Array.from({ length: 60 }, (_, i) => + `Paragraph ${i + 1}. This entry carries a long description so the detail pane has more content than the viewport can hold.`, +).join('\n\n') + +const MOCK = { + models: [ + { name: 'long-model', description: LONG, backend: 'llama-cpp', installed: false, tags: ['llm'] }, + { name: 'short-model', description: 'Short.', backend: 'llama-cpp', installed: false, tags: ['llm'] }, + ], + allBackends: ['llama-cpp'], allTags: ['llm'], + availableModels: 2, installedModels: 0, totalPages: 1, currentPage: 1, +} + +test.describe('Discover - the view scrolls, not the page', () => { + test.beforeEach(async ({ page }) => { + await page.route('**/api/models*', (route) => + route.fulfill({ contentType: 'application/json', body: JSON.stringify(MOCK) })) + }) + + test('a long detail scrolls the pane and leaves the page height alone', async ({ page }) => { + await page.setViewportSize({ width: 1400, height: 900 }) + await page.goto('/app/models') + await expect(page.locator('[data-testid="discover-rail-item"]').first()).toBeVisible({ timeout: 10_000 }) + + const pageHeight = () => page.evaluate(() => document.documentElement.scrollHeight) + const railHeight = () => page.evaluate( + () => document.querySelector('.entity-rail')?.getBoundingClientRect().height, + ) + + const beforePage = await pageHeight() + const beforeRail = await railHeight() + + await page.locator('[data-testid="discover-rail-item"]').first().click() + await expect(page.locator('[data-testid="discover-back"]')).toBeVisible() + + // Selecting something must not make the document taller, and must not + // stretch the rail to match the pane. + expect(await pageHeight()).toBe(beforePage) + // Sub-pixel: layout can settle a fraction differently without the rail + // having grown. A pixel of tolerance keeps this about the bug it guards. + expect(Math.abs((await railHeight()) - beforeRail)).toBeLessThan(1) + + // The pane is the thing that scrolls. + const paneOverflows = await page.evaluate(() => { + const el = document.querySelector('.split-view__pane') + return el ? getComputedStyle(el).overflowY : null + }) + expect(paneOverflows).toBe('auto') + }) + + test('stacked below the breakpoint it scrolls with the document again', async ({ page }) => { + // Pinning the height when the columns stack would trap both halves in short + // scrollers, so the constraint is lifted there on purpose. + await page.setViewportSize({ width: 700, height: 800 }) + await page.goto('/app/models') + await expect(page.locator('[data-testid="discover-rail-item"]').first()).toBeVisible({ timeout: 10_000 }) + + const overflow = await page.evaluate(() => { + const el = document.querySelector('.split-view__pane') + return el ? getComputedStyle(el).overflowY : null + }) + expect(overflow).toBe('visible') + }) +}) diff --git a/core/http/react-ui/e2e/discover-search-focus.spec.js b/core/http/react-ui/e2e/discover-search-focus.spec.js new file mode 100644 index 000000000..d0c60425f --- /dev/null +++ b/core/http/react-ui/e2e/discover-search-focus.spec.js @@ -0,0 +1,52 @@ +import { test, expect } from './coverage-fixtures.js' + +// Searching triggers a refetch. The search box lives in the rail column, so if +// a refetch unmounts the view it takes the field you are typing into with it, +// dropping focus and the caret. That is what this guards. +const MOCK = { + models: [ + { name: 'alpha-model', description: 'a', backend: 'llama-cpp', installed: false, tags: ['llm'] }, + { name: 'beta-model', description: 'b', backend: 'llama-cpp', installed: false, tags: ['llm'] }, + ], + allBackends: ['llama-cpp'], allTags: ['llm'], + availableModels: 2, installedModels: 0, totalPages: 1, currentPage: 1, +} + +test.describe('Discover - searching keeps the view', () => { + test('a refetch keeps the search box, its focus and its value', async ({ page }) => { + let calls = 0 + await page.route('**/api/models*', async (route) => { + calls += 1 + // Slow the refetch so the loading window is real and observable. + if (calls > 1) await new Promise((r) => setTimeout(r, 600)) + await route.fulfill({ contentType: 'application/json', body: JSON.stringify(MOCK) }) + }) + + await page.goto('/app/models') + const search = page.locator('.filter-bar-group__search input') + await expect(search).toBeVisible({ timeout: 10_000 }) + + await search.click() + await search.fill('alpha') + + // Mid-refetch: the field is still mounted, still focused, still holding + // what was typed, and the rail is marked busy rather than replaced. + await expect(search).toBeFocused() + await expect(search).toHaveValue('alpha') + await expect(page.locator('.entity-rail')).toBeVisible() + + await page.waitForTimeout(900) + await expect(search).toBeFocused() + await expect(search).toHaveValue('alpha') + }) + + test('the first load still shows a skeleton, not an empty shell', async ({ page }) => { + // Nothing to keep on a cold start, so the skeleton is still right there. + await page.route('**/api/models*', async (route) => { + await new Promise((r) => setTimeout(r, 800)) + await route.fulfill({ contentType: 'application/json', body: JSON.stringify(MOCK) }) + }) + await page.goto('/app/models') + await expect(page.getByTestId('gallery-loader')).toBeVisible({ timeout: 5_000 }) + }) +}) diff --git a/core/http/react-ui/e2e/host-split-view.spec.js b/core/http/react-ui/e2e/host-split-view.spec.js new file mode 100644 index 000000000..e9875bb93 --- /dev/null +++ b/core/http/react-ui/e2e/host-split-view.spec.js @@ -0,0 +1,69 @@ +import { test, expect } from './coverage-fixtures.js' + +// Host is an inventory, not a catalog, so its split view differs from the two +// galleries in exactly one place: the pane with nothing selected reports what +// is happening rather than offering something to install. + +const PANE = '[data-testid="host-pane"]' +const railItems = (page) => page.locator('[data-testid="host-rail-item"]') +const railItem = (page, id) => page.locator(`[data-entity="${id}"]`) + +test.describe('Host - split view', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/app/manage') + await expect(railItems(page).first()).toBeVisible({ timeout: 10_000 }) + }) + + test('the inventory renders no table', async ({ page }) => { + await expect(page.locator('[data-testid="host"]')).toBeVisible() + await expect(page.locator('table thead th')).toHaveCount(0) + }) + + test('with nothing selected the pane reports the current state', async ({ page }) => { + await expect(page.locator(PANE)).toContainText('Right now') + await expect(page.locator(PANE)).toContainText('Loaded') + await expect(page.locator('[data-testid="host-back"]')).toHaveCount(0) + }) + + test('choosing a model turns the pane into its detail, and back returns', async ({ page }) => { + const first = railItems(page).first() + const name = await first.getAttribute('data-entity') + await first.click() + + await expect(page.locator(PANE)).toContainText(name) + await expect(page.locator(PANE)).toContainText('State') + await expect(page.locator(PANE)).not.toContainText('Right now') + + await page.locator('[data-testid="host-back"]').click() + await expect(page.locator(PANE)).toContainText('Right now') + }) + + test('the selection lives in the URL', async ({ page }) => { + const first = railItems(page).first() + const name = await first.getAttribute('data-entity') + await first.click() + await expect(page).toHaveURL(new RegExp(`[?&]sel=${encodeURIComponent(name)}`)) + }) + + test('the rail buckets by state rather than by capability', async ({ page }) => { + // The opposite of the galleries, and deliberately so: nobody opens Host + // wondering which of their models does vision. + const groups = page.locator('[data-testid^="host-rail-group-"]') + await expect(groups.first()).toBeVisible() + const ids = await groups.evaluateAll(els => els.map(e => e.dataset.testid)) + for (const id of ids) { + expect(['host-rail-group-running', 'host-rail-group-idle', 'host-rail-group-disabled']).toContain(id) + } + }) + + test('switching tabs drops a selection that belonged to the other tab', async ({ page }) => { + await railItems(page).first().click() + await expect(page.locator('[data-testid="host-back"]')).toBeVisible() + + // The other tab may legitimately be empty on a fresh host, so the contract + // is that the stale selection is gone, not that a pane appears. + await page.locator('.tab', { hasText: 'Backends' }).click() + await expect(page.locator('[data-testid="host-back"]')).toHaveCount(0) + await expect(page).not.toHaveURL(/[?&]sel=/) + }) +}) diff --git a/core/http/react-ui/e2e/manage-action-menu-position.spec.js b/core/http/react-ui/e2e/manage-action-menu-position.spec.js index 3f4301abe..138edc954 100644 --- a/core/http/react-ui/e2e/manage-action-menu-position.spec.js +++ b/core/http/react-ui/e2e/manage-action-menu-position.spec.js @@ -7,11 +7,11 @@ import { test, expect } from './coverage-fixtures.js' // inside a row whose hover `transform` re-anchored it. Fix portals the popover // to document.body, positions it before paint, and focuses without scrolling. test.describe('Manage Page - Action menu positioning', () => { - test('opening a row menu keeps scroll stable and places the menu by its trigger', async ({ page }) => { + test('opening the pane menu keeps scroll stable and places it by its trigger', async ({ page }) => { // Small viewport so the page is scrollable and a scroll jump is observable. await page.setViewportSize({ width: 1024, height: 500 }) await page.goto('/app/manage') - await expect(page.locator('.table')).toBeVisible({ timeout: 10_000 }) + await page.locator('[data-testid="host-rail-item"]').first().click() const trigger = page.locator('button.action-menu__trigger').first() await expect(trigger).toBeVisible() diff --git a/core/http/react-ui/e2e/manage-logs-link.spec.js b/core/http/react-ui/e2e/manage-logs-link.spec.js index 22ca3835b..55311e538 100644 --- a/core/http/react-ui/e2e/manage-logs-link.spec.js +++ b/core/http/react-ui/e2e/manage-logs-link.spec.js @@ -1,11 +1,11 @@ import { test, expect } from './coverage-fixtures.js' test.describe('Manage Page - Backend Logs Link', () => { - test('row action menu exposes Backend logs entry with terminal icon', async ({ page }) => { + test('the pane action menu exposes Backend logs with a terminal icon', async ({ page }) => { await page.goto('/app/manage') - await expect(page.locator('.table')).toBeVisible({ timeout: 10_000 }) - - // Row actions live behind the kebab (ActionMenu) — open the first row's menu. + // Actions moved out of the row and into the pane, so reaching them is now a + // selection followed by the pane's kebab. + await page.locator('[data-testid="host-rail-item"]').first().click() const trigger = page.locator('button.action-menu__trigger').first() await expect(trigger).toBeVisible() await trigger.click() @@ -17,8 +17,7 @@ test.describe('Manage Page - Backend Logs Link', () => { test('Backend logs menu item navigates to backend-logs page', async ({ page }) => { await page.goto('/app/manage') - await expect(page.locator('.table')).toBeVisible({ timeout: 10_000 }) - + await page.locator('[data-testid="host-rail-item"]').first().click() const trigger = page.locator('button.action-menu__trigger').first() await expect(trigger).toBeVisible() await trigger.click() diff --git a/core/http/react-ui/e2e/model-editor-back-nav.spec.js b/core/http/react-ui/e2e/model-editor-back-nav.spec.js index 973d93967..695eab01c 100644 --- a/core/http/react-ui/e2e/model-editor-back-nav.spec.js +++ b/core/http/react-ui/e2e/model-editor-back-nav.spec.js @@ -46,9 +46,8 @@ test.describe('Model Editor — Back navigation', () => { test('Back returns to Manage with a "Back to System" caption', async ({ page }) => { await page.goto('/app/manage') - await expect(page.locator('.table')).toBeVisible({ timeout: 10_000 }) - - // Open the first row's action menu and pick "Edit configuration". + // Actions live in the pane now, so select something first. + await page.locator('[data-testid="host-rail-item"]').first().click() const trigger = page.locator('button.action-menu__trigger').first() await expect(trigger).toBeVisible() await trigger.click() diff --git a/core/http/react-ui/e2e/models-gallery.spec.js b/core/http/react-ui/e2e/models-gallery.spec.js index 6ec1045be..baa872d2e 100644 --- a/core/http/react-ui/e2e/models-gallery.spec.js +++ b/core/http/react-ui/e2e/models-gallery.spec.js @@ -99,6 +99,24 @@ const MOCK_ESTIMATES = { }, }; +// The gallery is a rail plus a pane, not a table. These three helpers are the +// whole of that migration for the specs below: an entry is addressed by the +// model it carries, and the detail lives in the pane rather than in a cell +// spanning the row. +const PANE = '[data-testid="discover-pane"]'; +const railItems = (page) => page.locator('[data-testid="discover-rail-item"]'); +const railItem = (page, name) => page.locator(`[data-entity="${name}"]`); +// The use-case chips live in a popover now; opening it is idempotent so tests +// can call this without tracking whether it is already up. +const openUseCases = async (page) => { + const trigger = page.locator(".models-filters__usecase-trigger"); + if ((await page.locator(".filter-btn").count()) === 0) await trigger.click(); + await expect(page.locator(".filter-btn").first()).toBeVisible(); +}; +// Rendered means the rail has entries. The old gate waited on a column header. +const railReady = (page) => + expect(railItems(page).first()).toBeVisible({ timeout: 10_000 }); + test.describe("Models Gallery - Backend Features", () => { test.beforeEach(async ({ page }) => { await page.route("**/api/models*", (route) => { @@ -109,22 +127,18 @@ test.describe("Models Gallery - Backend Features", () => { }); await page.goto("/app/models"); // Wait for the table to render - await expect(page.locator("th", { hasText: "Backend" })).toBeVisible({ - timeout: 10_000, - }); + await railReady(page); }); - test("backend column header is visible", async ({ page }) => { - await expect(page.locator("th", { hasText: "Backend" })).toBeVisible(); - }); - - test("backend badges shown in table rows", async ({ page }) => { - const table = page.locator("table"); + test("selecting a model names its backend in the pane", async ({ page }) => { + await railItem(page, "llama-model").click(); await expect( - table.locator(".badge", { hasText: "llama-cpp" }), + page.locator(PANE).locator(".badge", { hasText: "llama-cpp" }).first(), ).toBeVisible(); + + await railItem(page, "whisper-model").click(); await expect( - table.locator(".badge", { hasText: /^whisper$/ }), + page.locator(PANE).locator(".badge", { hasText: /^whisper$/ }).first(), ).toBeVisible(); }); @@ -164,18 +178,20 @@ test.describe("Models Gallery - Backend Features", () => { .locator(".."); await dropdown.locator("text=llama-cpp").click(); - // The dropdown button should now show the selected backend instead of "All Backends" + // Scoped to the select: the rail names a backend on its own entries when + // no size estimate has arrived, so an unscoped `button span` matches those + // too and the assertion stops being about the dropdown. await expect( - page.locator("button span", { hasText: "llama-cpp" }), + page.locator(".models-filters__backend button span", { hasText: "llama-cpp" }), ).toBeVisible(); }); test("expanded row shows backend in detail", async ({ page }) => { // Click the first model row to expand it - await page.locator("tr", { hasText: "llama-model" }).click(); + await railItem(page, "llama-model").click(); // The detail view should show Backend label and value - const detail = page.locator('td[colspan="8"]'); + const detail = page.locator(PANE); await expect(detail.locator("text=Backend")).toBeVisible(); // The Backend DetailRow renders before the Variants section, which lists a // per-variant backend badge of its own, so scope to the first match. @@ -212,14 +228,13 @@ test.describe("Models Gallery - Multi-select Filters", () => { }); }); await page.goto("/app/models"); - await expect(page.locator("th", { hasText: "Backend" })).toBeVisible({ - timeout: 10_000, - }); + await railReady(page); }); test("multi-select toggle: click Chat, TTS, then Chat again", async ({ page, }) => { + await openUseCases(page); const chatBtn = page.locator(".filter-btn", { hasText: "Chat" }); const ttsBtn = page.locator(".filter-btn", { hasText: "TTS" }); @@ -237,6 +252,7 @@ test.describe("Models Gallery - Multi-select Filters", () => { }); test('"All" clears selection', async ({ page }) => { + await openUseCases(page); const chatBtn = page.locator(".filter-btn", { hasText: "Chat" }); const allBtn = page.locator(".filter-btn", { hasText: "All" }); @@ -249,6 +265,7 @@ test.describe("Models Gallery - Multi-select Filters", () => { }); test("query param sent correctly with multiple filters", async ({ page }) => { + await openUseCases(page); const chatBtn = page.locator(".filter-btn", { hasText: "Chat" }); const ttsBtn = page.locator(".filter-btn", { hasText: "TTS" }); @@ -273,6 +290,7 @@ test.describe("Models Gallery - Multi-select Filters", () => { }); test("backend greys out unavailable filters", async ({ page }) => { + await openUseCases(page); // Select llama-cpp backend via dropdown await page.locator("button", { hasText: "All Backends" }).click(); const dropdown = page @@ -303,6 +321,7 @@ test.describe("Models Gallery - Multi-select Filters", () => { }); test("backend clears incompatible filters", async ({ page }) => { + await openUseCases(page); // Select TTS filter first const ttsBtn = page.locator(".filter-btn", { hasText: "TTS" }); await ttsBtn.click(); @@ -347,9 +366,7 @@ test.describe("Models Gallery - Fits In GPU Filter", () => { }); await page.goto("/app/models"); - await expect(page.locator("th", { hasText: "Backend" })).toBeVisible({ - timeout: 10_000, - }); + await railReady(page); }); test("fits toggle is visible when GPU resources are available", async ({ @@ -362,7 +379,7 @@ test.describe("Models Gallery - Fits In GPU Filter", () => { page, }) => { await expect( - page.locator("tr", { hasText: "stablediffusion-model" }), + railItem(page, "stablediffusion-model"), ).toBeVisible(); // The shared visually hides its native input (opacity:0;w:0;h:0), @@ -373,12 +390,12 @@ test.describe("Models Gallery - Fits In GPU Filter", () => { .click(); await expect( - page.locator("tr", { hasText: "stablediffusion-model" }), + railItem(page, "stablediffusion-model"), ).toHaveCount(0); - await expect(page.locator("tr", { hasText: "llama-model" })).toBeVisible(); + await expect(railItem(page, "llama-model")).toBeVisible(); // Unknown estimate stays visible until an explicit non-fit verdict exists. await expect( - page.locator("tr", { hasText: "unknown-model" }), + railItem(page, "unknown-model"), ).toBeVisible(); }); @@ -407,14 +424,13 @@ test.describe("Models Gallery - Empty State", () => { }); await page.goto("/app/models"); - await expect(page.locator("th", { hasText: "Backend" })).toBeVisible({ - timeout: 10_000, - }); + await railReady(page); }); test("shows empty state for filtered-out results and clear filters restores the gallery", async ({ page, }) => { + await openUseCases(page); const chatBtn = page.locator(".filter-btn", { hasText: "Chat" }); const allBtn = page.locator(".filter-btn", { hasText: "All" }); @@ -429,14 +445,14 @@ test.describe("Models Gallery - Empty State", () => { const clearBtn = page.getByRole("button", { name: "Clear filters" }); await expect(clearBtn).toBeVisible(); - await expect(page.locator("tr", { hasText: "llama-model" })).toHaveCount(0); + await expect(railItem(page, "llama-model")).toHaveCount(0); await clearBtn.click(); await expect(allBtn).toHaveClass(/active/); await expect(chatBtn).not.toHaveClass(/active/); await expect(page.locator(".empty-state")).toHaveCount(0); - await expect(page.locator("tr", { hasText: "llama-model" })).toBeVisible(); + await expect(railItem(page, "llama-model")).toBeVisible(); }); }); @@ -524,142 +540,38 @@ test.describe("Models Gallery - Variant picker", () => { }); }); await page.goto("/app/models"); - await expect(page.locator("th", { hasText: "Backend" })).toBeVisible({ - timeout: 10_000, - }); + await railReady(page); }); - const variantRow = (page) => page.locator("tr", { hasText: "llama-model" }).first(); + const variantRow = (page) => railItem(page, "llama-model"); const plainRow = (page) => - page.locator("tr", { hasText: "stablediffusion-model" }).first(); - const openMenu = (page) => - variantRow(page).getByRole("button", { name: "Choose a variant" }).click(); + railItem(page, "stablediffusion-model"); test("the listing alone fetches no variant descriptions", async ({ page }) => { // The whole point of the companion endpoint: a page load costs zero // probes no matter how many entries declare variants. - await expect(page.locator("tbody tr").first()).toBeVisible(); + await expect(railItems(page).first()).toBeVisible(); expect(variantUrls).toHaveLength(0); }); - test("an entry that declares variants shows the split-button chevron", async ({ - page, - }) => { - await expect( - variantRow(page).getByRole("button", { name: "Choose a variant" }), - ).toBeVisible(); - }); - - test("an entry without variants renders no chevron", async ({ page }) => { - await expect( - plainRow(page).getByRole("button", { name: "Choose a variant" }), - ).toHaveCount(0); - // and still offers an ordinary install - await expect( - plainRow(page).locator("button.btn-primary"), - ).toHaveCount(1); - }); - - test("an entry without variants fetches nothing even when expanded", async ({ + test("an entry without variants fetches nothing when selected", async ({ page, }) => { await plainRow(page).click(); - await expect(page.locator('td[colspan="8"]')).toBeVisible(); + await expect(page.locator(PANE)).toBeVisible(); expect(variantUrls).toHaveLength(0); }); test("plain Install sends no variant parameter", async ({ page }) => { - await plainRow(page).locator("button.btn-primary").click(); + await plainRow(page).click(); + await page.locator('[data-testid="discover-install"]').click(); await expect.poll(() => installUrls.length).toBe(1); expect(installUrls[0]).not.toContain("variant="); }); - test("opening the menu fetches the description once and caches it", async ({ - page, - }) => { - await openMenu(page); - await expect(page.locator(".action-menu")).toBeVisible(); - await expect.poll(() => variantUrls.length).toBe(1); - expect(variantUrls[0]).toContain("/api/models/variants/llama-model"); - - // Close and reopen: the cached answer must be reused. - await page.keyboard.press("Escape"); - await openMenu(page); - await expect( - page.locator(".action-menu__item", { hasText: "llama-model-q8" }), - ).toBeVisible(); - expect(variantUrls).toHaveLength(1); - }); - - test("the menu shows a loading state while the description is in flight", async ({ - page, - }) => { - let unblock; - releaseVariants = new Promise((resolve) => { - unblock = resolve; - }); - await openMenu(page); - await expect(page.locator(".action-menu")).toContainText("Loading variants"); - unblock(); - await expect( - page.locator(".action-menu__item", { hasText: "llama-model-q8" }), - ).toBeVisible(); - await expect(page.locator(".action-menu")).not.toContainText( - "Loading variants", - ); - }); - - test("the auto-selected variant is marked in the menu", async ({ page }) => { - await openMenu(page); - const menu = page.locator(".action-menu"); - await expect(menu).toBeVisible(); - const autoItem = menu.locator(".action-menu__item", { - hasText: "llama-model-q8", - }); - await expect(autoItem.locator(".badge", { hasText: "Auto" })).toBeVisible(); - // the base build is identifiable too - await expect( - menu - .locator(".action-menu__item", { hasText: "llama-model" }) - .first() - .locator(".badge", { hasText: "Base build" }), - ).toBeVisible(); - }); - - test("a variant with no memory_bytes renders as unknown, not 0", async ({ - page, - }) => { - await openMenu(page); - const mlxItem = page.locator(".action-menu__item", { - hasText: "llama-model-mlx", - }); - await expect(mlxItem).toContainText("Unknown size"); - await expect(mlxItem).not.toContainText("0 B"); - }); - - test("a variant that does not fit is still selectable", async ({ page }) => { - await openMenu(page); - const f16 = page.locator(".action-menu__item", { - hasText: "llama-model-f16", - }); - await expect(f16.locator(".badge", { hasText: "Does not fit" })).toBeVisible(); - await expect(f16).toBeEnabled(); - }); - - test("choosing a specific variant sends ?variant= on the install", async ({ - page, - }) => { - await openMenu(page); - await page - .locator(".action-menu__item", { hasText: "llama-model-mlx" }) - .click(); - await expect.poll(() => installUrls.length).toBe(1); - expect(installUrls[0]).toContain("variant=llama-model-mlx"); - }); - test("the expanded detail row lists every variant", async ({ page }) => { await variantRow(page).click(); - const detail = page.locator('td[colspan="8"]'); + const detail = page.locator(PANE); await expect(detail).toContainText("Variants"); await expect(detail).toContainText("llama-model-q8"); await expect(detail).toContainText("llama-model-mlx"); @@ -693,7 +605,7 @@ test.describe("Models Gallery - Variant picker", () => { test("only the informative status is badged", async ({ page }) => { await variantRow(page).click(); - const detail = page.locator('td[colspan="8"]'); + const detail = page.locator(PANE); await expect(detail.locator(".variant-row")).toHaveCount(4); // "Fits" was true of three rows out of four and said nothing; the row that // does not fit is the one worth marking. @@ -708,6 +620,49 @@ test.describe("Models Gallery - Variant picker", () => { ).toContainText("Auto-selected"); }); + test("selecting an entry fetches its variants once and reuses them", async ({ + page, + }) => { + // Selection is now the only trigger point, so it must pay for exactly one + // probe however many times the pane is opened. + await railItem(page, "llama-model").click(); + await expect(page.locator(PANE)).toContainText("llama-model-q8"); + await expect.poll(() => variantUrls.length).toBe(1); + expect(variantUrls[0]).toContain("/api/models/variants/llama-model"); + + await railItem(page, "stablediffusion-model").click(); + await railItem(page, "llama-model").click(); + await expect(page.locator(PANE)).toContainText("llama-model-q8"); + expect(variantUrls).toHaveLength(1); + }); + + test("the pane says the variants are loading rather than opening empty", async ({ + page, + }) => { + let unblock; + releaseVariants = new Promise((resolve) => { + unblock = resolve; + }); + await railItem(page, "llama-model").click(); + await expect(page.locator(PANE)).toContainText("Loading variants"); + unblock(); + await expect(page.locator(PANE)).toContainText("llama-model-q8"); + await expect(page.locator(PANE)).not.toContainText("Loading variants"); + }); + + test("a variant that does not fit is still installable", async ({ page }) => { + // Marked, not disabled: an explicit choice is an override the server + // honours with a warning, and only the user knows they meant it. + await railItem(page, "llama-model").click(); + const unfit = page.locator(".variant-row--unfit"); + await expect(unfit).toHaveCount(1); + await expect(unfit).toContainText("llama-model-f16"); + await expect(unfit).toBeEnabled(); + await unfit.click(); + await expect.poll(() => installUrls.length).toBe(1); + expect(installUrls[0]).toContain("variant=llama-model-f16"); + }); + test("clicking a variant row installs that variant", async ({ page }) => { await variantRow(page).click(); await page @@ -717,43 +672,6 @@ test.describe("Models Gallery - Variant picker", () => { expect(installUrls[0]).toContain("variant=llama-model-mlx"); }); - test("the menu names each build's quantization alongside backend and size", async ({ - page, - }) => { - // Without it the meta line reads "llama-cpp - 8 GB" for two builds that - // differ entirely in precision, which describes nothing the user is - // choosing between. - await openMenu(page); - await expect( - page.locator(".action-menu__item", { hasText: "llama-model-q8" }), - ).toContainText("llama-cpp · Q8_0 · 8 GB"); - }); - - test("the menu marks a build that serves faster", async ({ page }) => { - // A compact marker, not a sentence: the dropdown has room for the token - // and the detail row carries the spelled-out name. - await openMenu(page); - await expect( - page - .locator(".action-menu__item", { hasText: "llama-model-q8" }) - .locator(".badge", { hasText: "DFLASH" }), - ).toBeVisible(); - }); - - test("a build naming no quantization drops the segment rather than blanking", async ({ - page, - }) => { - // The degrade contract in the compact surface: no empty segment, no - // dangling separator, and above all no "undefined". - await openMenu(page); - const item = page.locator(".action-menu__item", { - hasText: "llama-model-mlx", - }); - await expect(item).toContainText("mlx · Unknown size"); - await expect(item).not.toContainText("undefined"); - await expect(item).not.toContainText("· ·"); - }); - test("the detail row gives quantization its own column", async ({ page }) => { await variantRow(page).click(); const detail = page.locator(".variant-list"); @@ -901,11 +819,9 @@ test.describe("Models Gallery - Variant details", () => { }), ); await page.goto("/app/models"); - await expect(page.locator("th", { hasText: "Backend" })).toBeVisible({ - timeout: 10_000, - }); + await railReady(page); // Expanding the parent is what puts the variant list on screen. - await page.locator("tr", { hasText: "llama-model" }).first().click(); + await railItem(page, "llama-model").click(); await expect(page.locator(".variant-row")).toHaveCount(4); }); @@ -1030,6 +946,11 @@ test.describe("Models Gallery - Variant details", () => { page, }) => { const info = infoFor(page, "llama-model-q8"); + // The pane is opened by clicking a rail entry, which is a real