diff --git a/core/http/react-ui/e2e/alias-template.spec.js b/core/http/react-ui/e2e/alias-template.spec.js
index f3b1a0ca08b5..e9b13ba61598 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 11b1791891ac..0422699f6cb3 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' })
+  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)
+  })
 
-    await expect(cell).toHaveAttribute('title', STRIPPED_DESCRIPTION)
+  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('a backend with no description still shows the placeholder', async ({ page }) => {
-    const row = page.locator('tr', { hasText: 'plain-backend' })
+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 is one flat list', async ({ page }) => {
+    // Same reason as Discover: the backend listing paginates too, so a bucket
+    // described 21 rows out of 1,012 and the chips filter the same axis.
+    await expect(page.locator('[data-testid^="backends-rail-group-"]')).toHaveCount(0)
+  })
 
-    await expect(row.locator('span[title=""]')).toHaveText('-')
+  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 000000000000..3d4987ca710b
--- /dev/null
+++ b/core/http/react-ui/e2e/discover-height.spec.js
@@ -0,0 +1,70 @@
+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)
+    expect(await railHeight()).toBe(beforeRail)
+
+    // 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/host-split-view.spec.js b/core/http/react-ui/e2e/host-split-view.spec.js
new file mode 100644
index 000000000000..e9875bb93578
--- /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 3f4301abe554..138edc954604 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 22ca3835b711..55311e538c74 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 973d93967bce..695eab01c5ed 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 6ec1045beadc..efa755aca964 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 <Toggle> 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,50 +620,56 @@ test.describe("Models Gallery - Variant picker", () => {
     ).toContainText("Auto-selected");
   });
 
-  test("clicking a variant row installs that variant", async ({ page }) => {
-    await variantRow(page).click();
-    await page
-      .locator(".variant-row", { hasText: "llama-model-mlx" })
-      .click();
-    await expect.poll(() => installUrls.length).toBe(1);
-    expect(installUrls[0]).toContain("variant=llama-model-mlx");
-  });
-
-  test("the menu names each build's quantization alongside backend and size", async ({
+  test("selecting an entry fetches its variants once and reuses them", 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");
-  });
+    // 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");
 
-  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();
+    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("a build naming no quantization drops the segment rather than blanking", async ({
+  test("the pane says the variants are loading rather than opening empty", 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",
+    let unblock;
+    releaseVariants = new Promise((resolve) => {
+      unblock = resolve;
     });
-    await expect(item).toContainText("mlx · Unknown size");
-    await expect(item).not.toContainText("undefined");
-    await expect(item).not.toContainText("· ·");
+    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
+      .locator(".variant-row", { hasText: "llama-model-mlx" })
+      .click();
+    await expect.poll(() => installUrls.length).toBe(1);
+    expect(installUrls[0]).toContain("variant=llama-model-mlx");
   });
 
   test("the detail row gives quantization its own column", async ({ page }) => {
@@ -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 <button>,
+    // so Chromium is in pointer modality and would not paint a focus ring for
+    // a programmatic focus(). One keypress puts it back in the keyboard
+    // modality this assertion is about.
+    await page.keyboard.press("Tab");
     await info.focus();
     await expect(info).toBeFocused();
     // A visible focus indicator, not merely a focused element.
@@ -1150,9 +1071,7 @@ test.describe("Models Gallery - Collapsed Listing", () => {
     });
 
     await page.goto("/app/models");
-    await expect(page.locator("th", { hasText: "Backend" })).toBeVisible({
-      timeout: 10_000,
-    });
+    await railReady(page);
   });
 
   // The house pattern for these toggles: the checkbox itself is a zero-sized
@@ -1184,11 +1103,11 @@ test.describe("Models Gallery - Collapsed Listing", () => {
   }) => {
     // Browsing, as opposed to finding. Search reaches a build whose name you
     // already know; only this enumerates every build the gallery holds.
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toHaveCount(0);
+    await expect(railItem(page, "whisper-model")).toHaveCount(0);
 
     await flipCollapse(page);
 
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toBeVisible();
+    await expect(railItem(page, "whisper-model")).toBeVisible();
     // Off means the parameter is absent, so opting out asks for exactly the
     // listing every other API client gets.
     await expect
@@ -1210,15 +1129,13 @@ test.describe("Models Gallery - Collapsed Listing", () => {
 
   test("the choice survives a reload", async ({ page }) => {
     await flipCollapse(page);
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toBeVisible();
+    await expect(railItem(page, "whisper-model")).toBeVisible();
 
     await page.reload();
-    await expect(page.locator("th", { hasText: "Backend" })).toBeVisible({
-      timeout: 10_000,
-    });
+    await railReady(page);
 
     await expect(collapseToggle(page)).not.toBeChecked();
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toBeVisible();
+    await expect(railItem(page, "whisper-model")).toBeVisible();
   });
 
   test("browsing collapses: the parent stays, the build it offers drops", async ({
@@ -1226,12 +1143,12 @@ test.describe("Models Gallery - Collapsed Listing", () => {
   }) => {
     // A filter that kept only the entries declaring variants would wrongly
     // drop stablediffusion-model too.
-    await expect(page.locator("tr", { hasText: "llama-model" })).toBeVisible();
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toHaveCount(
+    await expect(railItem(page, "llama-model")).toBeVisible();
+    await expect(railItem(page, "whisper-model")).toHaveCount(
       0,
     );
     await expect(
-      page.locator("tr", { hasText: "stablediffusion-model" }),
+      railItem(page, "stablediffusion-model"),
     ).toBeVisible();
 
     // Asserted over every listing request, so a first paint that fetched the
@@ -1252,8 +1169,8 @@ test.describe("Models Gallery - Collapsed Listing", () => {
     // the view the user asked for has no place for.
     await page.locator(".search-bar input").fill("whisper-model");
 
-    await expect(page.locator("tr", { hasText: "llama-model" })).toBeVisible();
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toHaveCount(
+    await expect(railItem(page, "llama-model")).toBeVisible();
+    await expect(railItem(page, "whisper-model")).toHaveCount(
       0,
     );
     await expect(page.locator(".empty-state")).toHaveCount(0);
@@ -1268,7 +1185,7 @@ test.describe("Models Gallery - Collapsed Listing", () => {
     await flipCollapse(page);
     await page.locator(".search-bar input").fill("whisper-model");
 
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toBeVisible();
+    await expect(railItem(page, "whisper-model")).toBeVisible();
   });
 
   test("the search term is sent alongside the collapse, not instead of it", async ({
@@ -1293,18 +1210,18 @@ test.describe("Models Gallery - Collapsed Listing", () => {
     // The search narrowed to the one surfaced row, so the other browsing rows
     // are gone and their return is what proves the term was dropped.
     await expect(
-      page.locator("tr", { hasText: "stablediffusion-model" }),
+      railItem(page, "stablediffusion-model"),
     ).toHaveCount(0);
 
     await page.locator(".search-bar input").fill("");
 
     await expect(
-      page.locator("tr", { hasText: "stablediffusion-model" }),
+      railItem(page, "stablediffusion-model"),
     ).toBeVisible();
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toHaveCount(
+    await expect(railItem(page, "whisper-model")).toHaveCount(
       0,
     );
-    await expect(page.locator("tr", { hasText: "llama-model" })).toBeVisible();
+    await expect(railItem(page, "llama-model")).toBeVisible();
   });
 
   test("a legacy '0' in storage is not read as a choice", async ({ page }) => {
@@ -1315,11 +1232,9 @@ test.describe("Models Gallery - Collapsed Listing", () => {
       localStorage.setItem("localai-models-collapse-variants-filter", "0");
     });
     await page.reload();
-    await expect(page.locator("th", { hasText: "Backend" })).toBeVisible({
-      timeout: 10_000,
-    });
+    await railReady(page);
 
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toHaveCount(
+    await expect(railItem(page, "whisper-model")).toHaveCount(
       0,
     );
     const last = listingUrls[listingUrls.length - 1];
@@ -1336,7 +1251,7 @@ test.describe("Models Gallery - Collapsed Listing", () => {
 
     await page.locator(".search-bar input").fill("whisper-model");
 
-    await expect(page.locator("tr", { hasText: "llama-model" })).toBeVisible();
+    await expect(railItem(page, "llama-model")).toBeVisible();
     await expect(page.locator(".empty-state")).toHaveCount(0);
     // Still asked for collapsed: the server decides what a term means.
     await expect
@@ -1351,6 +1266,7 @@ test.describe("Models Gallery - Collapsed Listing", () => {
   test("the empty state does not blame the collapse for a chip", async ({
     page,
   }) => {
+    await openUseCases(page);
     await page.locator(".filter-btn", { hasText: "Chat" }).click();
 
     await expect(page.locator(".empty-state-title")).toHaveText(
@@ -1381,13 +1297,14 @@ test.describe("Models Gallery - Collapsed Listing", () => {
   test("clear filters returns to the collapsed browsing view", async ({
     page,
   }) => {
+    await openUseCases(page);
     await page.locator(".filter-btn", { hasText: "Chat" }).click();
     await expect(page.locator(".empty-state")).toBeVisible();
 
     await page.getByRole("button", { name: "Clear filters" }).click();
 
-    await expect(page.locator("tr", { hasText: "llama-model" })).toBeVisible();
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toHaveCount(
+    await expect(railItem(page, "llama-model")).toBeVisible();
+    await expect(railItem(page, "whisper-model")).toHaveCount(
       0,
     );
   });
@@ -1395,22 +1312,24 @@ test.describe("Models Gallery - Collapsed Listing", () => {
   test("clear filters resets the collapse toggle to its default", async ({
     page,
   }) => {
+    await openUseCases(page);
     // It is a filter like the others, so leaving it behind would make "clear
     // filters" a half-truth.
     await flipCollapse(page);
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toBeVisible();
+    await expect(railItem(page, "whisper-model")).toBeVisible();
     await page.locator(".filter-btn", { hasText: "Chat" }).click();
     await expect(page.locator(".empty-state")).toBeVisible();
 
     await page.getByRole("button", { name: "Clear filters" }).click();
 
     await expect(collapseToggle(page)).toBeChecked();
-    await expect(page.locator("tr", { hasText: "whisper-model" })).toHaveCount(
+    await expect(railItem(page, "whisper-model")).toHaveCount(
       0,
     );
   });
 
   test("the clear button appears for the toggle alone", async ({ page }) => {
+    await openUseCases(page);
     // Turning the collapse off is a filter change with nothing else set, so
     // the empty state must still offer a way back.
     await flipCollapse(page);
@@ -1466,16 +1385,14 @@ test.describe("Models Gallery - Markdown descriptions", () => {
       });
     });
     await page.goto("/app/models");
-    await expect(page.locator("th", { hasText: "Backend" })).toBeVisible({
-      timeout: 10_000,
-    });
+    await railReady(page);
   });
 
-  test("table cell shows the description as clean text, not raw Markdown", async ({
+  test("the pane lede shows the description as clean text, not raw Markdown", async ({
     page,
   }) => {
-    const row = page.locator("tr", { hasText: "markdown-model" });
-    const cell = row.locator("div[title]", { hasText: "Qwen3.6-27B" });
+    await railItem(page, "markdown-model").click();
+    const cell = page.locator(".detail-pane__lede");
 
     await expect(cell).toHaveText(
       "Qwen3.6-27B Chat with it at the Qwen site for free.",
@@ -1489,13 +1406,13 @@ test.describe("Models Gallery - Markdown descriptions", () => {
     await expect(cell.locator("h1")).toHaveCount(0);
   });
 
-  test("title tooltip carries the stripped text, not raw Markdown", async ({
+  test("the lede's tooltip carries the stripped text, not raw Markdown", async ({
     page,
   }) => {
-    const row = page.locator("tr", { hasText: "markdown-model" });
-    const cell = row.locator("div[title]", { hasText: "Qwen3.6-27B" });
-
-    await expect(cell).toHaveAttribute(
+    // The lede is capped, so the full stripped text has to stay reachable on
+    // hover rather than being truncated out of existence.
+    await railItem(page, "markdown-model").click();
+    await expect(page.locator(".detail-pane__lede")).toHaveAttribute(
       "title",
       "Qwen3.6-27B Chat with it at the Qwen site for free.",
     );
@@ -1504,9 +1421,9 @@ test.describe("Models Gallery - Markdown descriptions", () => {
   test("expanded detail row renders the description as real markup", async ({
     page,
   }) => {
-    await page.locator("tr", { hasText: "markdown-model" }).click();
+    await railItem(page, "markdown-model").click();
 
-    const detail = page.locator('td[colspan="8"]');
+    const detail = page.locator(PANE);
     await expect(detail.locator("h1", { hasText: "Qwen3.6-27B" })).toBeVisible();
     const link = detail.locator('a[href="https://chat.qwen.ai"]');
     await expect(link).toBeVisible();
@@ -1514,18 +1431,22 @@ test.describe("Models Gallery - Markdown descriptions", () => {
     await expect(detail.locator("strong", { hasText: "free" })).toBeVisible();
   });
 
-  test("a model without a description still shows the placeholder", async ({
+  test("a model without a description renders no lede rather than a blank one", async ({
     page,
   }) => {
-    const row = page.locator("tr", { hasText: "no-description-model" });
-    await expect(row).toBeVisible();
-    await expect(row.locator("div[title='']")).toHaveText("—");
+    // The table needed an em-dash because an empty cell in a grid of full ones
+    // reads as a rendering fault. The pane has no grid to keep aligned, so the
+    // honest treatment is to omit the line - but never to print "undefined".
+    await railItem(page, "no-description-model").click();
+    await expect(page.locator(PANE)).toContainText("no-description-model");
+    await expect(page.locator(".detail-pane__lede")).toHaveCount(0);
+    await expect(page.locator(PANE)).not.toContainText("undefined");
   });
 
   test("a heading in the description renders on the UI type scale", async ({
     page,
   }) => {
-    await page.locator("tr", { hasText: "headings-model" }).click();
+    await railItem(page, "headings-model").click();
     const prose = page.locator(".detail-prose__body.markdown-body");
     await expect(prose).toBeVisible();
 
@@ -1552,8 +1473,12 @@ test.describe("Models Gallery - Markdown descriptions", () => {
   test("the description sits outside the label/value grid on a readable measure", async ({
     page,
   }) => {
-    await page.locator("tr", { hasText: "headings-model" }).click();
-    const detail = page.locator('td[colspan="8"]');
+    // Wide enough that the ch-based cap is the thing deciding the width. In a
+    // narrow pane the cap simply does not bind, and the ratio below would pass
+    // or fail on the viewport rather than on the rule being tested.
+    await page.setViewportSize({ width: 1800, height: 900 });
+    await railItem(page, "headings-model").click();
+    const detail = page.locator(PANE);
     // Description is no longer a row of the scalar table.
     await expect(detail.locator("table td", { hasText: "Description" })).toHaveCount(
       0,
@@ -1575,8 +1500,8 @@ test.describe("Models Gallery - Markdown descriptions", () => {
   test("a model without a description renders no prose block", async ({
     page,
   }) => {
-    await page.locator("tr", { hasText: "no-description-model" }).click();
-    const detail = page.locator('td[colspan="8"]');
+    await railItem(page, "no-description-model").click();
+    const detail = page.locator(PANE);
     await expect(detail).toBeVisible();
     await expect(detail.locator(".detail-prose")).toHaveCount(0);
     // The scalar rows still render, so the pane is not blank.
@@ -1610,25 +1535,34 @@ test.describe("Models Gallery - Filter layout structure", () => {
       });
     });
     await page.goto("/app/models");
-    await expect(page.locator("th", { hasText: "Backend" })).toBeVisible({
-      timeout: 10_000,
-    });
+    await railReady(page);
   });
 
-  test("the chip row contains only use-case chips", async ({ page }) => {
-    const chipRow = page.locator(".filter-bar");
-    await expect(chipRow).toHaveCount(1);
-    // Nothing but .filter-btn children: no toggle, no select, no slider.
-    const childClasses = await chipRow.evaluate((el) =>
-      Array.from(el.children).map((c) => c.className),
+  test("the chip rows contain only use-case chips", async ({ page }) => {
+    await openUseCases(page);
+    // One row per family now, plus the row holding "All" on its own. The
+    // contract is unchanged: a chip row carries chips and nothing else.
+    const chipRows = page.locator(".filter-bar");
+    const rowCount = await chipRows.count();
+    expect(rowCount).toBeGreaterThan(1);
+
+    const childClasses = await chipRows.evaluateAll((rows) =>
+      rows.flatMap((r) => Array.from(r.children).map((c) => c.className)),
     );
     expect(childClasses.length).toBeGreaterThan(0);
     for (const cls of childClasses) {
       expect(cls).toContain("filter-btn");
     }
-    await expect(chipRow.locator("input[type='range']")).toHaveCount(0);
-    await expect(chipRow.locator(".filter-bar-group__toggle")).toHaveCount(0);
-    await expect(chipRow.getByText("All Backends")).toHaveCount(0);
+    await expect(chipRows.locator("input[type='range']")).toHaveCount(0);
+    await expect(chipRows.locator(".filter-bar-group__toggle")).toHaveCount(0);
+    await expect(chipRows.getByText("All Backends")).toHaveCount(0);
+
+    // Every family the rail speaks is represented, and none is empty.
+    for (const label of ["Text and reasoning", "Vision", "Speech and audio", "Image and video"]) {
+      await expect(
+        page.locator(".models-filters__usecase-label", { hasText: label }),
+      ).toBeVisible();
+    }
   });
 
   test("refinements live in their own band, outside the chip row", async ({
@@ -1647,20 +1581,18 @@ test.describe("Models Gallery - Filter layout structure", () => {
     expect(nested).toBe(0);
   });
 
-  test("the backend select sits in the query band above the chips", async ({
+  test("the backend select sits above the use-case control it gates", async ({
     page,
   }) => {
     const selectBtn = page.locator("button", { hasText: "All Backends" });
     await expect(selectBtn).toBeVisible();
-    const inChipRow = await page
-      .locator(".filter-bar")
-      .locator("button", { hasText: "All Backends" })
-      .count();
-    expect(inChipRow).toBe(0);
-    // Reads above the chips it gates.
+    const trigger = page.locator(".models-filters__usecase-trigger");
+    await expect(trigger).toBeVisible();
+    // Picking a backend disables the use cases it cannot serve, so it still
+    // reads first even though both are now stacked in the rail column.
     const selectBox = await selectBtn.boundingBox();
-    const chipBox = await page.locator(".filter-bar").boundingBox();
-    expect(selectBox.y).toBeLessThan(chipBox.y);
+    const triggerBox = await trigger.boundingBox();
+    expect(selectBox.y).toBeLessThan(triggerBox.y);
   });
 
   test("refinements stay grouped and on one band at a narrow width", async ({
@@ -1669,10 +1601,10 @@ test.describe("Models Gallery - Filter layout structure", () => {
     await page.setViewportSize({ width: 900, height: 900 });
     const refine = page.getByTestId("models-filters-refine");
     await expect(refine).toBeVisible();
-    const chipBox = await page.locator(".filter-bar").boundingBox();
+    const triggerBox = await page.locator(".models-filters__usecase-trigger").boundingBox();
     const refineBox = await refine.boundingBox();
-    // Below the chip row, not interleaved with it.
-    expect(refineBox.y).toBeGreaterThanOrEqual(chipBox.y + chipBox.height - 1);
+    // Below the use-case control, not interleaved with it.
+    expect(refineBox.y).toBeGreaterThanOrEqual(triggerBox.y + triggerBox.height - 1);
     await expect(refine.getByText("Fits in GPU")).toBeVisible();
     await expect(refine.locator("#models-context-size")).toBeVisible();
   });
@@ -1680,6 +1612,7 @@ test.describe("Models Gallery - Filter layout structure", () => {
   test("chips expose pressed state and the context slider is labelled", async ({
     page,
   }) => {
+    await openUseCases(page);
     const chatBtn = page.locator(".filter-btn", { hasText: "Chat" });
     await expect(chatBtn).toHaveAttribute("aria-pressed", "false");
     await chatBtn.click();
@@ -1692,11 +1625,13 @@ test.describe("Models Gallery - Filter layout structure", () => {
   });
 
   test("a keyboard-focused chip shows a focus ring", async ({ page }) => {
+    await openUseCases(page);
     // The global :focus-visible rule is wrapped in :where(), so it ties with
     // .filter-btn on specificity and loses on order. Without an explicit rule
     // the chips render their resting shadow while focused, i.e. no indicator.
     await page.locator(".filter-bar-group__search input").click();
     await page.keyboard.press("Tab"); // backend select
+    await page.keyboard.press("Tab"); // use-case disclosure
     await page.keyboard.press("Tab"); // first chip
     const focused = page.locator(".filter-btn:focus-visible");
     await expect(focused).toHaveCount(1);
@@ -1721,3 +1656,148 @@ test.describe("Models Gallery - Filter layout structure", () => {
     await expect(slider).toHaveAttribute("aria-valuetext", /^\d+K$/);
   });
 });
+
+// Estimates across several context lengths, which is what the VRAM readout
+// plots. The other describes mock a single length, and one point is not a
+// comparison, so the chart correctly declines to render there.
+const MOCK_MULTI_CONTEXT_ESTIMATES = {
+  "llama-model": {
+    sizeBytes: 4 * 1024 * 1024 * 1024,
+    sizeDisplay: "4.00 GB",
+    estimates: {
+      8192: { vramBytes: 5 * 1024 * 1024 * 1024, vramDisplay: "5.00 GB" },
+      16384: { vramBytes: 7 * 1024 * 1024 * 1024, vramDisplay: "7.00 GB" },
+      32768: { vramBytes: 11 * 1024 * 1024 * 1024, vramDisplay: "11.00 GB" },
+      65536: { vramBytes: 20 * 1024 * 1024 * 1024, vramDisplay: "20.00 GB" },
+    },
+  },
+};
+
+test.describe("Models Gallery - Discover split view", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route("**/api/models*", (route) => {
+      route.fulfill({
+        contentType: "application/json",
+        body: JSON.stringify(MOCK_MODELS_RESPONSE),
+      });
+    });
+    await page.route("**/api/resources", (route) => {
+      route.fulfill({
+        contentType: "application/json",
+        body: JSON.stringify(MOCK_GPU_RESOURCES_RESPONSE),
+      });
+    });
+    await page.route("**/api/models/estimate/*", (route) => {
+      const url = new URL(route.request().url());
+      const id = decodeURIComponent(url.pathname.split("/").pop() || "");
+      route.fulfill({
+        contentType: "application/json",
+        body: JSON.stringify(MOCK_MULTI_CONTEXT_ESTIMATES[id] || {}),
+      });
+    });
+    await page.goto("/app/models");
+    await railReady(page);
+  });
+
+  test("the gallery renders no table", async ({ page }) => {
+    // The point of the change, asserted directly: the eight-column table and
+    // the row that expanded underneath it are both gone.
+    await expect(page.locator('[data-testid="discover"]')).toBeVisible();
+    await expect(page.locator("table thead th")).toHaveCount(0);
+    await expect(page.locator('td[colspan="8"]')).toHaveCount(0);
+  });
+
+  test("with nothing selected the pane is the discovery page", async ({
+    page,
+  }) => {
+    await expect(page.locator(PANE)).toContainText("Your host");
+    await expect(page.locator('[data-testid="discover-back"]')).toHaveCount(0);
+  });
+
+  test("choosing a model turns the pane into its detail, and back returns", async ({
+    page,
+  }) => {
+    await railItem(page, "llama-model").click();
+    await expect(page.locator(PANE)).toContainText("llama-model");
+    await expect(page.locator(PANE)).toContainText("Headroom");
+    await expect(page.locator(PANE)).not.toContainText("Your host");
+
+    await page.locator('[data-testid="discover-back"]').click();
+    await expect(page.locator(PANE)).toContainText("Your host");
+  });
+
+  test("the selection lives in the URL and survives a reload", async ({
+    page,
+  }) => {
+    await railItem(page, "whisper-model").click();
+    await expect(page).toHaveURL(/[?&]model=whisper-model/);
+
+    // A deep link is the same state, which the expanded row could never be.
+    await page.reload();
+    await railReady(page);
+    await expect(page.locator(PANE)).toContainText("whisper-model");
+    await expect(page.locator('[data-testid="discover-back"]')).toBeVisible();
+  });
+
+  test("the rail is one flat list, whatever page you are on", async ({ page }) => {
+    // The reason grouping went: a bucket over nine server-paginated rows
+    // described the page rather than the catalog, so turning a page reshuffled
+    // the sections under the reader. The chips do this job over all of it.
+    await expect(railItems(page).first()).toBeVisible();
+    await expect(page.locator('[data-testid^="discover-rail-group-"]')).toHaveCount(0);
+  });
+
+  test("the detail plots VRAM against what the host actually has", async ({
+    page,
+  }) => {
+    await railItem(page, "llama-model").click();
+    const chart = page.locator(".discover__chart");
+    await expect(chart).toBeVisible();
+    // One bar per context length the page asked the server about.
+    await expect(chart.locator(".discover__chart-col")).toHaveCount(4);
+    // 12 GB of GPU, so the 20 GB estimate at 64k is the one over the line.
+    await expect(chart.locator(".discover__chart-bar--over")).toHaveCount(1);
+    await expect(chart.locator(".discover__chart-limit-label")).toBeVisible();
+  });
+
+  test("the verdict is words, not only a colour", async ({ page }) => {
+    await railItem(page, "llama-model").click();
+    // Colour alone would exclude a colour-blind reader and die in print.
+    await expect(page.locator(".discover__chart-verdict")).toContainText(
+      "Fits up to a 32K context",
+    );
+  });
+
+  test("a host with no GPU gets no chart rather than an unanchored one", async ({
+    page,
+  }) => {
+    // The limit line is what makes the bars mean anything.
+    await page.route("**/api/resources", (route) => {
+      route.fulfill({ contentType: "application/json", body: JSON.stringify({ available: false }) });
+    });
+    await page.reload();
+    await railReady(page);
+    await railItem(page, "llama-model").click();
+    await expect(page.locator(PANE)).toContainText("llama-model");
+    await expect(page.locator(".discover__chart")).toHaveCount(0);
+  });
+
+  test("the rail moves the selection from the keyboard", async ({ page }) => {
+    await railItem(page, "llama-model").click();
+    await expect(page).toHaveURL(/[?&]model=llama-model(&|$)/);
+    // Wait for the pane to actually be the detail, not merely for the URL to
+    // say so. The URL changes in the same tick as the state update, so pressing
+    // a key on the strength of it races the render that follows.
+    await expect(page.locator('[data-testid="discover-back"]')).toBeVisible();
+    // Focus is on the entry just clicked, which carries the key handler.
+    // Which entry is adjacent depends on how the rail groups, so the contract
+    // is that the selection moves and comes back, not that a named model is
+    // next. Naming one made this test a hostage of the grouping table.
+    await page.keyboard.press("ArrowDown");
+    await expect(page).not.toHaveURL(/[?&]model=llama-model(&|$)/);
+    await expect(page.locator('[data-testid="discover-back"]')).toBeVisible();
+
+    await page.keyboard.press("ArrowUp");
+    await expect(page).toHaveURL(/[?&]model=llama-model(&|$)/);
+  });
+});
diff --git a/core/http/react-ui/e2e/models-recommended-panel.spec.js b/core/http/react-ui/e2e/models-recommended-panel.spec.js
index 7dad5ed9e1b8..4e5ef9b650d0 100644
--- a/core/http/react-ui/e2e/models-recommended-panel.spec.js
+++ b/core/http/react-ui/e2e/models-recommended-panel.spec.js
@@ -111,8 +111,11 @@ test.describe("Models gallery - recommended panel prominence", () => {
     await expect(page.evaluate((k) => localStorage.getItem(k), DISMISS_KEY)).resolves.toBe("1");
 
     await page.reload();
-    // The table is the marker that the page finished rendering without the panel.
-    await expect(page.locator("table tbody tr").first()).toBeVisible({ timeout: 20_000 });
+    // The rail having entries is the marker that the page finished rendering
+    // without the panel. It used to be the table, which no longer exists.
+    await expect(
+      page.locator('[data-testid="discover-rail-item"]').first(),
+    ).toBeVisible({ timeout: 20_000 });
     await expect(panel(page)).toHaveCount(0);
   });
 
diff --git a/core/http/react-ui/e2e/navigation.spec.js b/core/http/react-ui/e2e/navigation.spec.js
index 233509b1adfe..87a1f7d3ca8c 100644
--- a/core/http/react-ui/e2e/navigation.spec.js
+++ b/core/http/react-ui/e2e/navigation.spec.js
@@ -12,10 +12,15 @@ test.describe('Navigation', () => {
     await expect(page.locator('.home-page')).toBeVisible()
   })
 
-  test('top menu exposes Home and Install Models', async ({ page }) => {
+  test('top menu exposes Home and Discover', async ({ page }) => {
     await page.goto('/app')
     await expect(page.locator('.sidebar-nav a.nav-item[href="/app"]')).toBeVisible()
-    await expect(page.locator('.sidebar-nav a.nav-item[href="/app/models"]')).toBeVisible()
+    const discover = page.locator('.sidebar-nav a.nav-item[href="/app/models"]')
+    await expect(discover).toBeVisible()
+    // The label is asserted, not just the destination: a bare "Models" would
+    // name the same thing as the installed-models view under Host, which is
+    // the collision the rename exists to remove.
+    await expect(discover.locator('.nav-label')).toHaveText('Discover')
   })
 
   test('Create stays an inline tier with Chat, Studio and Talk', async ({ page }) => {
diff --git a/core/http/react-ui/e2e/page-render-smoke.spec.js b/core/http/react-ui/e2e/page-render-smoke.spec.js
index 3f24752bfb08..404724b8c0b4 100644
--- a/core/http/react-ui/e2e/page-render-smoke.spec.js
+++ b/core/http/react-ui/e2e/page-render-smoke.spec.js
@@ -38,7 +38,7 @@ test.describe('Page render smoke', () => {
       await page.goto(path)
       // .page-title for the normal header; .empty-state-title for pages that
       // render a gated/empty state (e.g. Account when auth is disabled).
-      await expect(page.locator('.page-title, .empty-state-title').first()).toBeVisible({ timeout: 15_000 })
+      await expect(page.locator('.page-title, .view-bar__title, .empty-state-title').first()).toBeVisible({ timeout: 15_000 })
       await expect(page).toHaveURL(new RegExp(path.replace(/\//g, '\\/') + '$'))
     })
   }
diff --git a/core/http/react-ui/public/locales/de/models.json b/core/http/react-ui/public/locales/de/models.json
index 3a2f3e387ad0..e68df86fdf85 100644
--- a/core/http/react-ui/public/locales/de/models.json
+++ b/core/http/react-ui/public/locales/de/models.json
@@ -1,5 +1,5 @@
 {
-  "title": "Modelle installieren",
+  "title": "Entdecken",
   "subtitle": "Durchsuchen und installieren Sie KI-Modelle aus der Galerie",
   "recommended": {
     "title": "Empfohlen für Ihre Hardware",
@@ -40,7 +40,9 @@
     "searchBackends": "Backends suchen...",
     "contextSize": "Kontext:",
     "useCaseLabel": "Nach Anwendungsfall filtern",
-    "unavailableForBackend": "Für das gewählte Backend nicht verfügbar"
+    "unavailableForBackend": "Für das gewählte Backend nicht verfügbar",
+    "someSelected": "{{count}} ausgewählt",
+    "refineLabel": "Verfeinern"
   },
   "search": {
     "placeholder": "Modelle suchen...",
@@ -81,7 +83,10 @@
     "fileCount_other": "{{count}} Dateien",
     "filename": "Dateiname",
     "uri": "URI",
-    "sha256": "SHA256"
+    "sha256": "SHA256",
+    "backToAll": "Alle Modelle",
+    "vramAt": "VRAM bei {{context}}",
+    "headroom": "Spielraum"
   },
   "empty": {
     "title": "Keine Modelle gefunden",
@@ -121,5 +126,43 @@
       "dflash": "Schneller: DFlash",
       "mtp": "Schneller: MTP"
     }
+  },
+  "rail": {
+    "sortLabel": "Modelle sortieren",
+    "downloadingPct": "Download {{percent}}%",
+    "tooLarge": "{{size}} · zu groß",
+    "fitsSize": "{{size}} · passt",
+    "previousPage": "Vorherige Seite",
+    "nextPage": "Nächste Seite",
+    "showingCount": "{{shown}} von {{total}}"
+  },
+  "groups": {
+    "text": "Text und Reasoning",
+    "vision": "Bildverstehen",
+    "audio": "Sprache und Audio",
+    "visual": "Bild und Video",
+    "other": "Alles Übrige"
+  },
+  "chart": {
+    "title": "VRAM nach Kontextlänge",
+    "available": "{{vram}} verfügbar",
+    "barTitle": "Kontext {{context}} benötigt {{vram}}",
+    "fitsEverywhere": "Läuft auf diesem Host bei jeder Kontextlänge.",
+    "fitsNowhere": "Passt auf diesem Host bei keiner Kontextlänge.",
+    "fitsUpTo": "Passt bis zu einem Kontext von {{context}}."
+  },
+  "shelves": {
+    "hostLabel": "Dein Host",
+    "heroWithGpu": "{{vram}} GPU-Speicher, {{count}} Modelle in der Galerie.",
+    "heroNoGpu": "{{count}} Modelle in der Galerie.",
+    "heroHint": "Wähle links ein Modell, um Größe, Varianten und Lauffähigkeit zu sehen.",
+    "browsing": "Durchsuchen",
+    "pickHint": "Wähle ein Modell, um die Details zu sehen.",
+    "heroWithRam": "{{ram}} Systemspeicher, {{count}} Modelle in der Galerie.",
+    "byUseCase": "Oder mit einem Anwendungsfall starten",
+    "pickText": "Chat, Reasoning, Embeddings",
+    "pickVision": "Bilder und Dokumente lesen",
+    "pickAudio": "Sprache rein, Sprache raus",
+    "pickVisual": "Bilder und Video erzeugen"
   }
 }
diff --git a/core/http/react-ui/public/locales/de/nav.json b/core/http/react-ui/public/locales/de/nav.json
index af1d8b0ea4ce..a2e8de1a87e6 100644
--- a/core/http/react-ui/public/locales/de/nav.json
+++ b/core/http/react-ui/public/locales/de/nav.json
@@ -28,7 +28,7 @@
   },
   "items": {
     "home": "Start",
-    "installModels": "Modelle installieren",
+    "discover": "Entdecken",
     "chat": "Chat",
     "studio": "Studio",
     "talk": "Sprechen",
diff --git a/core/http/react-ui/public/locales/en/models.json b/core/http/react-ui/public/locales/en/models.json
index 2e2f21e57d10..665450cd31ae 100644
--- a/core/http/react-ui/public/locales/en/models.json
+++ b/core/http/react-ui/public/locales/en/models.json
@@ -1,5 +1,5 @@
 {
-  "title": "Install Models",
+  "title": "Discover",
   "subtitle": "Browse and install AI models from the gallery",
   "models": "Models",
   "recommended": {
@@ -50,7 +50,9 @@
     "searchBackends": "Search backends...",
     "contextSize": "Context:",
     "useCaseLabel": "Filter by use case",
-    "unavailableForBackend": "Not available for the selected backend"
+    "unavailableForBackend": "Not available for the selected backend",
+    "someSelected": "{{count}} selected",
+    "refineLabel": "Refine"
   },
   "search": {
     "placeholder": "Search models...",
@@ -91,7 +93,10 @@
     "fileCount_other": "{{count}} files",
     "filename": "Filename",
     "uri": "URI",
-    "sha256": "SHA256"
+    "sha256": "SHA256",
+    "backToAll": "All models",
+    "vramAt": "VRAM at {{context}}",
+    "headroom": "Headroom"
   },
   "empty": {
     "title": "No models found",
@@ -137,5 +142,43 @@
       "dflash": "Faster: DFlash",
       "mtp": "Faster: MTP"
     }
+  },
+  "rail": {
+    "sortLabel": "Sort models",
+    "downloadingPct": "downloading {{percent}}%",
+    "tooLarge": "{{size}} · too large",
+    "fitsSize": "{{size}} · fits",
+    "previousPage": "Previous page",
+    "nextPage": "Next page",
+    "showingCount": "{{shown}} of {{total}}"
+  },
+  "groups": {
+    "text": "Text and reasoning",
+    "vision": "Vision",
+    "audio": "Speech and audio",
+    "visual": "Image and video",
+    "other": "Everything else"
+  },
+  "chart": {
+    "title": "VRAM by context length",
+    "available": "{{vram}} available",
+    "barTitle": "{{context}} context needs {{vram}}",
+    "fitsEverywhere": "Runs at every context length on this host.",
+    "fitsNowhere": "Will not fit on this host at any context length.",
+    "fitsUpTo": "Fits up to a {{context}} context."
+  },
+  "shelves": {
+    "hostLabel": "Your host",
+    "heroWithGpu": "{{vram}} of GPU memory, {{count}} models in the gallery.",
+    "heroNoGpu": "{{count}} models in the gallery.",
+    "heroHint": "Pick anything on the left to see its size, variants and whether it will run here.",
+    "browsing": "Browsing",
+    "pickHint": "Select a model to see its detail.",
+    "heroWithRam": "{{ram}} of system memory, {{count}} models in the gallery.",
+    "byUseCase": "Or start with a use case",
+    "pickText": "Chat, reasoning, embeddings",
+    "pickVision": "Read images and documents",
+    "pickAudio": "Speech in and speech out",
+    "pickVisual": "Generate images and video"
   }
 }
diff --git a/core/http/react-ui/public/locales/en/nav.json b/core/http/react-ui/public/locales/en/nav.json
index a899532d476e..036e6b33dc73 100644
--- a/core/http/react-ui/public/locales/en/nav.json
+++ b/core/http/react-ui/public/locales/en/nav.json
@@ -28,7 +28,7 @@
   },
   "items": {
     "home": "Home",
-    "installModels": "Install Models",
+    "discover": "Discover",
     "chat": "Chat",
     "studio": "Studio",
     "talk": "Talk",
diff --git a/core/http/react-ui/public/locales/es/models.json b/core/http/react-ui/public/locales/es/models.json
index b7329027a49f..8d2009e53831 100644
--- a/core/http/react-ui/public/locales/es/models.json
+++ b/core/http/react-ui/public/locales/es/models.json
@@ -1,5 +1,5 @@
 {
-  "title": "Instalar modelos",
+  "title": "Descubrir",
   "subtitle": "Explora e instala modelos de IA desde la galería",
   "recommended": {
     "title": "Recomendado para tu hardware",
@@ -40,7 +40,9 @@
     "searchBackends": "Buscar backends...",
     "contextSize": "Contexto:",
     "useCaseLabel": "Filtrar por caso de uso",
-    "unavailableForBackend": "No disponible para el backend seleccionado"
+    "unavailableForBackend": "No disponible para el backend seleccionado",
+    "someSelected": "{{count}} seleccionados",
+    "refineLabel": "Refinar"
   },
   "search": {
     "placeholder": "Buscar modelos...",
@@ -81,7 +83,10 @@
     "fileCount_other": "{{count}} archivos",
     "filename": "Nombre del archivo",
     "uri": "URI",
-    "sha256": "SHA256"
+    "sha256": "SHA256",
+    "backToAll": "Todos los modelos",
+    "vramAt": "VRAM a {{context}}",
+    "headroom": "Margen"
   },
   "empty": {
     "title": "No se encontraron modelos",
@@ -121,5 +126,43 @@
       "dflash": "Más rápido: DFlash",
       "mtp": "Más rápido: MTP"
     }
+  },
+  "rail": {
+    "sortLabel": "Ordenar modelos",
+    "downloadingPct": "descargando {{percent}}%",
+    "tooLarge": "{{size}} · demasiado grande",
+    "fitsSize": "{{size}} · cabe",
+    "previousPage": "Página anterior",
+    "nextPage": "Página siguiente",
+    "showingCount": "{{shown}} de {{total}}"
+  },
+  "groups": {
+    "text": "Texto y razonamiento",
+    "vision": "Visión",
+    "audio": "Voz y audio",
+    "visual": "Imagen y vídeo",
+    "other": "Todo lo demás"
+  },
+  "chart": {
+    "title": "VRAM por longitud de contexto",
+    "available": "{{vram}} disponibles",
+    "barTitle": "Un contexto de {{context}} necesita {{vram}}",
+    "fitsEverywhere": "Funciona con cualquier longitud de contexto en este host.",
+    "fitsNowhere": "No cabe en este host con ninguna longitud de contexto.",
+    "fitsUpTo": "Cabe hasta un contexto de {{context}}."
+  },
+  "shelves": {
+    "hostLabel": "Tu host",
+    "heroWithGpu": "{{vram}} de memoria GPU, {{count}} modelos en la galería.",
+    "heroNoGpu": "{{count}} modelos en la galería.",
+    "heroHint": "Elige un modelo a la izquierda para ver su tamaño, variantes y compatibilidad.",
+    "browsing": "Explorando",
+    "pickHint": "Selecciona un modelo para ver su detalle.",
+    "heroWithRam": "{{ram}} de memoria del sistema, {{count}} modelos en la galería.",
+    "byUseCase": "O empieza por un caso de uso",
+    "pickText": "Chat, razonamiento, embeddings",
+    "pickVision": "Leer imágenes y documentos",
+    "pickAudio": "Voz de entrada y de salida",
+    "pickVisual": "Generar imágenes y vídeo"
   }
 }
diff --git a/core/http/react-ui/public/locales/es/nav.json b/core/http/react-ui/public/locales/es/nav.json
index 8318fb90a3ff..f6361c04125a 100644
--- a/core/http/react-ui/public/locales/es/nav.json
+++ b/core/http/react-ui/public/locales/es/nav.json
@@ -28,7 +28,7 @@
   },
   "items": {
     "home": "Inicio",
-    "installModels": "Instalar modelos",
+    "discover": "Descubrir",
     "chat": "Chat",
     "studio": "Studio",
     "talk": "Hablar",
diff --git a/core/http/react-ui/public/locales/id/models.json b/core/http/react-ui/public/locales/id/models.json
index 87ef33bf8858..94bc159a0b0b 100644
--- a/core/http/react-ui/public/locales/id/models.json
+++ b/core/http/react-ui/public/locales/id/models.json
@@ -1,5 +1,5 @@
 {
-  "title": "Instal Model",
+  "title": "Jelajahi",
   "subtitle": "Telusuri dan instal model AI dari galeri",
   "models": "Model",
   "recommended": {
@@ -47,7 +47,9 @@
     "searchBackends": "Cari backends...",
     "contextSize": "Konteks:",
     "useCaseLabel": "Filter berdasarkan kasus penggunaan",
-    "unavailableForBackend": "Tidak tersedia untuk backend yang dipilih"
+    "unavailableForBackend": "Tidak tersedia untuk backend yang dipilih",
+    "someSelected": "{{count}} dipilih",
+    "refineLabel": "Persempit"
   },
   "search": {
     "placeholder": "Cari model...",
@@ -88,7 +90,10 @@
     "fileCount_other": "{{count}} file",
     "filename": "Nama file",
     "uri": "URI",
-    "sha256": "SHA256"
+    "sha256": "SHA256",
+    "backToAll": "Semua model",
+    "vramAt": "VRAM pada {{context}}",
+    "headroom": "Sisa ruang"
   },
   "empty": {
     "title": "Model tidak ditemukan",
@@ -134,5 +139,43 @@
       "dflash": "Lebih cepat: DFlash",
       "mtp": "Lebih cepat: MTP"
     }
+  },
+  "rail": {
+    "sortLabel": "Urutkan model",
+    "downloadingPct": "mengunduh {{percent}}%",
+    "tooLarge": "{{size}} · terlalu besar",
+    "fitsSize": "{{size}} · muat",
+    "previousPage": "Halaman sebelumnya",
+    "nextPage": "Halaman berikutnya",
+    "showingCount": "{{shown}} dari {{total}}"
+  },
+  "groups": {
+    "text": "Teks dan penalaran",
+    "vision": "Visi",
+    "audio": "Suara dan audio",
+    "visual": "Gambar dan video",
+    "other": "Lainnya"
+  },
+  "chart": {
+    "title": "VRAM menurut panjang konteks",
+    "available": "{{vram}} tersedia",
+    "barTitle": "Konteks {{context}} membutuhkan {{vram}}",
+    "fitsEverywhere": "Berjalan pada setiap panjang konteks di host ini.",
+    "fitsNowhere": "Tidak muat di host ini pada panjang konteks mana pun.",
+    "fitsUpTo": "Muat hingga konteks {{context}}."
+  },
+  "shelves": {
+    "hostLabel": "Host Anda",
+    "heroWithGpu": "Memori GPU {{vram}}, {{count}} model di galeri.",
+    "heroNoGpu": "{{count}} model di galeri.",
+    "heroHint": "Pilih model di sebelah kiri untuk melihat ukuran, varian, dan kecocokannya.",
+    "browsing": "Menjelajah",
+    "pickHint": "Pilih model untuk melihat detailnya.",
+    "heroWithRam": "Memori sistem {{ram}}, {{count}} model di galeri.",
+    "byUseCase": "Atau mulai dari kasus penggunaan",
+    "pickText": "Obrolan, penalaran, embedding",
+    "pickVision": "Membaca gambar dan dokumen",
+    "pickAudio": "Suara masuk dan keluar",
+    "pickVisual": "Membuat gambar dan video"
   }
 }
diff --git a/core/http/react-ui/public/locales/id/nav.json b/core/http/react-ui/public/locales/id/nav.json
index 5811018e2bdb..59a930a1cde9 100644
--- a/core/http/react-ui/public/locales/id/nav.json
+++ b/core/http/react-ui/public/locales/id/nav.json
@@ -28,7 +28,7 @@
   },
   "items": {
     "home": "Beranda",
-    "installModels": "Instal Model",
+    "discover": "Jelajahi",
     "chat": "Obrolan",
     "studio": "Studio",
     "talk": "Bicara",
diff --git a/core/http/react-ui/public/locales/it/models.json b/core/http/react-ui/public/locales/it/models.json
index ee5ad7ff5c74..f34dd457303f 100644
--- a/core/http/react-ui/public/locales/it/models.json
+++ b/core/http/react-ui/public/locales/it/models.json
@@ -1,5 +1,5 @@
 {
-  "title": "Installa modelli",
+  "title": "Esplora",
   "subtitle": "Sfoglia e installa modelli AI dalla galleria",
   "recommended": {
     "title": "Consigliati per il tuo hardware",
@@ -40,7 +40,9 @@
     "searchBackends": "Cerca backend...",
     "contextSize": "Contesto:",
     "useCaseLabel": "Filtra per caso d'uso",
-    "unavailableForBackend": "Non disponibile per il backend selezionato"
+    "unavailableForBackend": "Non disponibile per il backend selezionato",
+    "someSelected": "{{count}} selezionati",
+    "refineLabel": "Affina"
   },
   "search": {
     "placeholder": "Cerca modelli...",
@@ -81,7 +83,10 @@
     "fileCount_other": "{{count}} file",
     "filename": "Nome file",
     "uri": "URI",
-    "sha256": "SHA256"
+    "sha256": "SHA256",
+    "backToAll": "Tutti i modelli",
+    "vramAt": "VRAM a {{context}}",
+    "headroom": "Margine"
   },
   "empty": {
     "title": "Nessun modello trovato",
@@ -121,5 +126,43 @@
       "dflash": "Più veloce: DFlash",
       "mtp": "Più veloce: MTP"
     }
+  },
+  "rail": {
+    "sortLabel": "Ordina modelli",
+    "downloadingPct": "download {{percent}}%",
+    "tooLarge": "{{size}} · troppo grande",
+    "fitsSize": "{{size}} · compatibile",
+    "previousPage": "Pagina precedente",
+    "nextPage": "Pagina successiva",
+    "showingCount": "{{shown}} di {{total}}"
+  },
+  "groups": {
+    "text": "Testo e ragionamento",
+    "vision": "Visione",
+    "audio": "Voce e audio",
+    "visual": "Immagini e video",
+    "other": "Tutto il resto"
+  },
+  "chart": {
+    "title": "VRAM per lunghezza del contesto",
+    "available": "{{vram}} disponibili",
+    "barTitle": "Un contesto {{context}} richiede {{vram}}",
+    "fitsEverywhere": "Funziona con qualsiasi lunghezza di contesto su questo host.",
+    "fitsNowhere": "Non entra in memoria su questo host con nessuna lunghezza di contesto.",
+    "fitsUpTo": "Entra fino a un contesto {{context}}."
+  },
+  "shelves": {
+    "hostLabel": "Il tuo host",
+    "heroWithGpu": "{{vram}} di memoria GPU, {{count}} modelli nella galleria.",
+    "heroNoGpu": "{{count}} modelli nella galleria.",
+    "heroHint": "Scegli un modello a sinistra per vederne dimensione, varianti e compatibilità.",
+    "browsing": "Esplorazione",
+    "pickHint": "Seleziona un modello per vederne i dettagli.",
+    "heroWithRam": "{{ram}} di memoria di sistema, {{count}} modelli nella galleria.",
+    "byUseCase": "Oppure parti da un caso d’uso",
+    "pickText": "Chat, ragionamento, embedding",
+    "pickVision": "Leggere immagini e documenti",
+    "pickAudio": "Voce in ingresso e in uscita",
+    "pickVisual": "Generare immagini e video"
   }
 }
diff --git a/core/http/react-ui/public/locales/it/nav.json b/core/http/react-ui/public/locales/it/nav.json
index 0c79e29ce756..d7c60e6bbbde 100644
--- a/core/http/react-ui/public/locales/it/nav.json
+++ b/core/http/react-ui/public/locales/it/nav.json
@@ -28,7 +28,7 @@
   },
   "items": {
     "home": "Home",
-    "installModels": "Installa modelli",
+    "discover": "Esplora",
     "chat": "Chat",
     "studio": "Studio",
     "talk": "Conversazione",
diff --git a/core/http/react-ui/public/locales/ko/models.json b/core/http/react-ui/public/locales/ko/models.json
index bb9af8813a05..9e3e1e1328c1 100644
--- a/core/http/react-ui/public/locales/ko/models.json
+++ b/core/http/react-ui/public/locales/ko/models.json
@@ -1,5 +1,5 @@
 {
-  "title": "모델 설치",
+  "title": "둘러보기",
   "subtitle": "갤러리에서 AI 모델을 둘러보고 설치합니다",
   "recommended": {
     "title": "하드웨어에 맞는 추천",
@@ -46,7 +46,9 @@
     "searchBackends": "백엔드 검색...",
     "contextSize": "컨텍스트:",
     "useCaseLabel": "사용 사례로 필터링",
-    "unavailableForBackend": "선택한 백엔드에서 사용할 수 없음"
+    "unavailableForBackend": "선택한 백엔드에서 사용할 수 없음",
+    "someSelected": "{{count}}개 선택됨",
+    "refineLabel": "세부 조건"
   },
   "search": {
     "placeholder": "모델 검색...",
@@ -87,7 +89,10 @@
     "fileCount_other": "파일 {{count}}개",
     "filename": "파일 이름",
     "uri": "URI",
-    "sha256": "SHA256"
+    "sha256": "SHA256",
+    "backToAll": "모든 모델",
+    "vramAt": "{{context}}에서의 VRAM",
+    "headroom": "여유 공간"
   },
   "empty": {
     "title": "모델을 찾을 수 없습니다",
@@ -105,5 +110,43 @@
     "loadFailed": "모델을 불러오지 못했습니다: {{message}}",
     "installFailed": "설치 실패: {{message}}",
     "deleteFailed": "삭제 실패: {{message}}"
+  },
+  "rail": {
+    "sortLabel": "모델 정렬",
+    "downloadingPct": "내려받는 중 {{percent}}%",
+    "tooLarge": "{{size}} · 너무 큼",
+    "fitsSize": "{{size}} · 실행 가능",
+    "previousPage": "이전 페이지",
+    "nextPage": "다음 페이지",
+    "showingCount": "{{total}}개 중 {{shown}}개"
+  },
+  "groups": {
+    "text": "텍스트 및 추론",
+    "vision": "비전",
+    "audio": "음성 및 오디오",
+    "visual": "이미지 및 비디오",
+    "other": "기타"
+  },
+  "chart": {
+    "title": "컨텍스트 길이별 VRAM",
+    "available": "{{vram}} 사용 가능",
+    "barTitle": "{{context}} 컨텍스트에 {{vram}} 필요",
+    "fitsEverywhere": "이 호스트에서 모든 컨텍스트 길이로 실행됩니다.",
+    "fitsNowhere": "이 호스트에서는 어떤 컨텍스트 길이로도 실행할 수 없습니다.",
+    "fitsUpTo": "{{context}} 컨텍스트까지 실행 가능합니다."
+  },
+  "shelves": {
+    "hostLabel": "내 호스트",
+    "heroWithGpu": "GPU 메모리 {{vram}}, 갤러리에 모델 {{count}}개.",
+    "heroNoGpu": "갤러리에 모델 {{count}}개.",
+    "heroHint": "왼쪽에서 모델을 선택하면 크기, 변형, 실행 가능 여부를 볼 수 있습니다.",
+    "browsing": "둘러보기",
+    "pickHint": "모델을 선택하면 상세 정보가 표시됩니다.",
+    "heroWithRam": "시스템 메모리 {{ram}}, 갤러리에 모델 {{count}}개.",
+    "byUseCase": "또는 용도로 시작하기",
+    "pickText": "채팅, 추론, 임베딩",
+    "pickVision": "이미지와 문서 읽기",
+    "pickAudio": "음성 입력과 출력",
+    "pickVisual": "이미지와 영상 생성"
   }
 }
diff --git a/core/http/react-ui/public/locales/ko/nav.json b/core/http/react-ui/public/locales/ko/nav.json
index df0825960df3..6f9e1f8d950f 100644
--- a/core/http/react-ui/public/locales/ko/nav.json
+++ b/core/http/react-ui/public/locales/ko/nav.json
@@ -28,7 +28,7 @@
   },
   "items": {
     "home": "홈",
-    "installModels": "모델 설치",
+    "discover": "둘러보기",
     "chat": "채팅",
     "studio": "스튜디오",
     "talk": "대화",
diff --git a/core/http/react-ui/public/locales/zh-CN/models.json b/core/http/react-ui/public/locales/zh-CN/models.json
index f44284757b1f..c8741ecba156 100644
--- a/core/http/react-ui/public/locales/zh-CN/models.json
+++ b/core/http/react-ui/public/locales/zh-CN/models.json
@@ -1,5 +1,5 @@
 {
-  "title": "安装模型",
+  "title": "发现",
   "subtitle": "从模型库浏览和安装 AI 模型",
   "recommended": {
     "title": "适合你硬件的推荐",
@@ -40,7 +40,9 @@
     "searchBackends": "搜索后端...",
     "contextSize": "上下文：",
     "useCaseLabel": "按用例筛选",
-    "unavailableForBackend": "所选后端不支持"
+    "unavailableForBackend": "所选后端不支持",
+    "someSelected": "已选 {{count}} 项",
+    "refineLabel": "细化"
   },
   "search": {
     "placeholder": "搜索模型...",
@@ -81,7 +83,10 @@
     "fileCount_other": "{{count}} 个文件",
     "filename": "文件名",
     "uri": "URI",
-    "sha256": "SHA256"
+    "sha256": "SHA256",
+    "backToAll": "全部模型",
+    "vramAt": "{{context}} 时显存",
+    "headroom": "剩余显存"
   },
   "empty": {
     "title": "未找到模型",
@@ -121,5 +126,43 @@
       "dflash": "更快：DFlash",
       "mtp": "更快：MTP"
     }
+  },
+  "rail": {
+    "sortLabel": "排序模型",
+    "downloadingPct": "下载中 {{percent}}%",
+    "tooLarge": "{{size}} · 过大",
+    "fitsSize": "{{size}} · 可运行",
+    "previousPage": "上一页",
+    "nextPage": "下一页",
+    "showingCount": "{{total}} 个中的 {{shown}} 个"
+  },
+  "groups": {
+    "text": "文本与推理",
+    "vision": "视觉",
+    "audio": "语音与音频",
+    "visual": "图像与视频",
+    "other": "其他"
+  },
+  "chart": {
+    "title": "各上下文长度所需显存",
+    "available": "可用 {{vram}}",
+    "barTitle": "{{context}} 上下文需要 {{vram}}",
+    "fitsEverywhere": "在此主机上可以任意上下文长度运行。",
+    "fitsNowhere": "在此主机上任何上下文长度都无法运行。",
+    "fitsUpTo": "最高可在 {{context}} 上下文下运行。"
+  },
+  "shelves": {
+    "hostLabel": "你的主机",
+    "heroWithGpu": "{{vram}} 显存，图库中有 {{count}} 个模型。",
+    "heroNoGpu": "图库中有 {{count}} 个模型。",
+    "heroHint": "在左侧选择模型，即可查看大小、变体以及能否在本机运行。",
+    "browsing": "浏览中",
+    "pickHint": "选择一个模型以查看详情。",
+    "heroWithRam": "{{ram}} 系统内存，图库中有 {{count}} 个模型。",
+    "byUseCase": "或从用途开始",
+    "pickText": "对话、推理、向量",
+    "pickVision": "读取图像与文档",
+    "pickAudio": "语音输入与输出",
+    "pickVisual": "生成图像与视频"
   }
 }
diff --git a/core/http/react-ui/public/locales/zh-CN/nav.json b/core/http/react-ui/public/locales/zh-CN/nav.json
index 39d7b4eaa3eb..128210fc6899 100644
--- a/core/http/react-ui/public/locales/zh-CN/nav.json
+++ b/core/http/react-ui/public/locales/zh-CN/nav.json
@@ -28,7 +28,7 @@
   },
   "items": {
     "home": "首页",
-    "installModels": "安装模型",
+    "discover": "发现",
     "chat": "聊天",
     "studio": "工作室",
     "talk": "通话",
diff --git a/core/http/react-ui/src/App.css b/core/http/react-ui/src/App.css
index fa2b89a2c3db..714e846bc442 100644
--- a/core/http/react-ui/src/App.css
+++ b/core/http/react-ui/src/App.css
@@ -11595,3 +11595,825 @@ button.collapsible-header:focus-visible {
 .ajd-code--tall { max-height: 300px; }
 .ajd-code--taller { max-height: 500px; }
 .ajd-code--error { background: var(--color-error-light); color: var(--color-error); max-height: none; }
+
+/* ==========================================================================
+   SplitView: the shell shared by Discover, Backends and Host.
+
+   The rail is scanned, the pane answers. The pane has exactly two states -
+   a zero state with nothing selected and one entity's detail with something
+   selected - which is what replaces the click-to-expand table row. What the
+   zero state says is the surface's business: a catalog offers what to install,
+   an inventory reports what is running.
+   ========================================================================== */
+
+.split-view {
+  display: grid;
+  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
+  gap: var(--spacing-md);
+  align-items: start;
+}
+
+.split-view__rail-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  min-width: 0;
+}
+
+.entity-rail {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.entity-rail__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-bottom: 1px solid var(--color-border-subtle);
+  flex-wrap: wrap;
+}
+
+.entity-rail__count {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+.entity-rail__sort {
+  display: flex;
+  gap: 2px;
+  margin-left: auto;
+}
+
+/* Sorting lost its home when the column headers went. It reappears here rather
+   than in the filter band above, because it orders this list and nothing else. */
+.entity-rail__sort-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  padding: 2px 6px;
+  cursor: pointer;
+}
+
+.entity-rail__sort-btn:hover {
+  color: var(--color-text-primary);
+  border-color: var(--color-border-default);
+}
+
+.entity-rail__sort-btn.active {
+  color: var(--color-primary);
+  border-color: var(--color-primary-border);
+  background: var(--color-primary-light);
+}
+
+.entity-rail__list {
+  max-height: 640px;
+  overflow-y: auto;
+}
+
+.entity-rail__list:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+}
+
+.entity-rail__group-head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+  padding: 6px var(--spacing-sm);
+  background: var(--color-surface-sunken);
+  border: 0;
+  border-top: 1px solid var(--color-border-subtle);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  text-align: left;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.entity-rail__group:first-child .entity-rail__group-head { border-top: 0; }
+
+.entity-rail__caret { font-size: 0.5625rem; color: var(--color-text-muted); width: 10px; }
+.entity-rail__group-icon { font-size: 0.6875rem; color: var(--color-text-muted); }
+
+.entity-rail__group-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.entity-rail__group-count {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.entity-rail__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: 7px var(--spacing-sm);
+  background: transparent;
+  border: 0;
+  border-top: 1px solid var(--color-border-divider);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.entity-rail__item:hover { background: var(--color-bg-hover); }
+
+/* The rail rounds its corners with overflow:hidden, which clips an outline
+   drawn outside the element. Inset it so the first and last entries keep a
+   visible focus ring. */
+.entity-rail__item:focus-visible,
+.entity-rail__group-head:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+}
+
+/* Touch. A 30px row is fine for a mouse and too small for a thumb, so coarse
+   pointers get the 44px target without costing density on a desktop. */
+@media (pointer: coarse) {
+  .entity-rail__item { padding-top: 12px; padding-bottom: 12px; }
+  .entity-rail__group-head { padding-top: 10px; padding-bottom: 10px; }
+}
+
+.entity-rail__item--on {
+  background: var(--color-primary-light);
+  box-shadow: inset 2px 0 0 var(--color-primary);
+}
+
+.entity-rail__icon {
+  flex: none;
+  width: 16px;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+.entity-rail__item--on .entity-rail__icon { color: var(--color-primary); }
+
+.entity-rail__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+
+.entity-rail__name {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.entity-rail__meta {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* A left edge for surfaces read by condition before they are read by name. An
+   inventory has one; a catalog does not, because "available" is not a state
+   worth a colour on every row. */
+.entity-rail__stripe {
+  width: 3px;
+  align-self: stretch;
+  border-radius: 2px;
+  flex: none;
+}
+
+.entity-rail__stripe--run { background: var(--color-success); }
+.entity-rail__stripe--idle { background: var(--color-border-strong); }
+.entity-rail__stripe--err { background: var(--color-error); }
+.entity-rail__stripe--off { background: transparent; }
+
+
+.entity-rail__meta--bad { color: var(--color-error); }
+.entity-rail__meta--ok { color: var(--color-success); }
+.entity-rail__meta--busy { color: var(--color-primary); }
+
+.split-view__pager { margin: 0; }
+.split-view__pager-label {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  padding: 0 var(--spacing-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+/* --- Pane ---------------------------------------------------------------- */
+
+.split-view__pane {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  min-height: 420px;
+  padding: var(--spacing-md);
+}
+
+.zero-pane { display: flex; flex-direction: column; gap: var(--spacing-lg); }
+
+.zero-pane__hero { display: flex; flex-direction: column; gap: 4px; }
+
+.zero-pane__eyebrow {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+  color: var(--color-eyebrow);
+}
+
+.zero-pane__title {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  text-wrap: balance;
+}
+
+.zero-pane__text { font-size: 0.8125rem; color: var(--color-text-muted); }
+
+.zero-pane__shelf-head { display: flex; align-items: baseline; gap: var(--spacing-sm); }
+.zero-pane__shelf-title { font-size: 0.875rem; font-weight: 600; }
+.zero-pane__shelf-meta {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  color: var(--color-text-muted);
+}
+.zero-pane__shelf-hint { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 4px; }
+
+/* Curated tiles. A catalog spends its zero state arguing for something; the
+   tile is where that argument gets the width a rail line never has. */
+.zero-pane__tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: var(--spacing-sm);
+}
+
+.zero-pane__tile {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+}
+
+.zero-pane__tile:hover { border-color: var(--color-border-strong); background: var(--color-bg-hover); }
+
+.zero-pane__tile--feat {
+  border-color: var(--color-primary-border);
+  background: linear-gradient(150deg, var(--color-primary-light), transparent 68%), var(--color-bg-primary);
+}
+
+.zero-pane__tile-name { font-size: 0.8125rem; font-weight: 550; }
+.zero-pane__tile-foot { display: flex; align-items: center; gap: var(--spacing-xs); margin-top: auto; }
+
+/* One line that changes what you would do next. Reserved for that; a pane of
+   these has no emphasis left. */
+.zero-pane__alert {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: 0.8125rem;
+  padding: 6px var(--spacing-sm);
+  border-radius: var(--radius-sm);
+  border: 1px solid;
+}
+
+.zero-pane__alert--warn { color: var(--color-warning); background: var(--color-warning-light); border-color: var(--color-warning-border); }
+.zero-pane__alert--bad { color: var(--color-error); background: var(--color-error-light); border-color: var(--color-error-border); }
+.zero-pane__alert > :last-child { margin-left: auto; }
+
+.detail-pane__label {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  margin-bottom: 6px;
+}
+
+/* --- Detail -------------------------------------------------------------- */
+
+.detail-pane { display: flex; flex-direction: column; gap: var(--spacing-md); }
+
+.detail-pane__back {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  background: transparent;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  padding: 3px 8px;
+  cursor: pointer;
+}
+
+.detail-pane__back:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }
+
+.detail-pane__head { display: flex; gap: var(--spacing-sm); align-items: flex-start; flex-wrap: wrap; }
+
+.detail-pane__icon {
+  flex: none;
+  font-size: 1.25rem;
+  color: var(--color-primary);
+  padding-top: 2px;
+}
+
+.detail-pane__title { flex: 1 1 260px; min-width: 0; }
+
+.detail-pane__name {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  word-break: break-word;
+}
+
+.detail-pane__lede { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 2px; }
+
+.detail-pane__actions { display: flex; gap: var(--spacing-xs); align-items: center; flex: none; }
+
+.discover__progress { flex: none; width: 120px; margin-top: 4px; }
+
+.detail-pane__warning {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  color: var(--color-error);
+  background: var(--color-error-light);
+  border: 1px solid var(--color-error-border);
+  border-radius: var(--radius-sm);
+  padding: 6px var(--spacing-sm);
+}
+
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 1px;
+  background: var(--color-border-default);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.stat-grid__item { background: var(--color-surface-sunken); padding: 6px var(--spacing-sm); }
+
+.stat-grid__item dt {
+  font-family: var(--font-mono);
+  font-size: 0.5625rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.stat-grid__item dd {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  margin-top: 1px;
+}
+
+.stat-grid__value--ok { color: var(--color-success); }
+.stat-grid__value--bad { color: var(--color-error); }
+.stat-grid__value--warn { color: var(--color-warning); }
+
+/* --- VRAM by context ----------------------------------------------------- */
+
+.discover__chart { display: flex; flex-direction: column; gap: 6px; }
+
+.discover__chart-title {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.discover__chart-plot {
+  /* Matches CHART_HEIGHT in Models.jsx: the bars and the limit line are both
+     resolved in pixels against this, so they share one scale. */
+  position: relative;
+  height: 96px;
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding-top: 15px;
+}
+
+/* The limit is what makes the bars mean anything, so it is drawn across all of
+   them rather than annotated on each. */
+.discover__chart-limit {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: var(--discover-limit, 0);
+  border-top: 1px dashed var(--color-error-border);
+  pointer-events: none;
+}
+
+.discover__chart-limit-label {
+  position: absolute;
+  right: 0;
+  top: -1.05rem;
+  font-family: var(--font-mono);
+  font-size: 0.5625rem;
+  letter-spacing: 0.05em;
+  color: var(--color-error);
+  background: var(--color-bg-secondary);
+  padding: 0 3px;
+}
+
+.discover__chart-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 3px;
+  height: 100%;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  min-width: 0;
+}
+
+.discover__chart-value {
+  font-family: var(--font-mono);
+  font-size: 0.5625rem;
+  color: var(--color-text-tertiary);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.discover__chart-bar {
+  height: var(--discover-bar, 0);
+  min-height: 3px;
+  border-radius: 4px 4px 0 0;
+  background: var(--color-success);
+  /* A surface-coloured ring keeps adjacent bars from reading as one block. */
+  box-shadow: 0 0 0 2px var(--color-bg-secondary);
+}
+
+.discover__chart-bar--over { background: var(--color-error); }
+
+.discover__chart-col:hover .discover__chart-bar { filter: brightness(1.1); }
+
+/* Its own row rather than a third line inside each column: one baseline for
+   every label, whatever the values above them do. */
+.discover__chart-axis {
+  display: flex;
+  gap: 8px;
+  border-top: 1px solid var(--color-border-default);
+  padding-top: 3px;
+}
+
+.discover__chart-axis span {
+  flex: 1;
+  min-width: 0;
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 0.5625rem;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+}
+
+.discover__chart-axis-on { color: var(--color-primary); font-weight: 600; }
+
+.discover__chart-col--on .discover__chart-value {
+  color: var(--color-primary);
+  font-weight: 600;
+}
+
+.discover__chart-verdict { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; }
+.discover__chart-verdict--ok { color: var(--color-success); }
+.discover__chart-verdict--warn { color: var(--color-warning); }
+.discover__chart-verdict--bad { color: var(--color-error); }
+
+/* --- Narrow ------------------------------------------------------------- */
+
+/* Below this the two columns stop being two columns. With a model selected the
+   pane becomes the page and the rail steps aside, which is the same trade a
+   pushed route would make without the routing. */
+@media (max-width: 900px) {
+  .split-view { grid-template-columns: minmax(0, 1fr); }
+  .entity-rail__list { max-height: 320px; }
+  .split-view--detail .split-view__rail-col { display: none; }
+}
+
+/* Compact list rows inside a pane: a state chip, a name, and one number. Used
+   by the Host status page for "loaded now" and by detail panes for anything
+   that is a list of facts rather than a table. */
+.rowlist { display: flex; flex-direction: column; gap: 4px; }
+
+.rowline {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: 5px var(--spacing-sm);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+}
+
+.rowline__num { margin-left: auto; font-variant-numeric: tabular-nums; }
+
+/* A first run is a whole screen, not a card wedged under a filter bar. These
+   two states are the only thing on the page, so they get the height to say so.
+
+   They previously wore .loading-center, which is display:flex with 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 between them. */
+.empty-state--page {
+  min-height: 52vh;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding-block: var(--spacing-3xl);
+}
+
+.empty-state--page .empty-state-icon { font-size: 2rem; }
+.empty-state--page .empty-state-text { text-wrap: balance; }
+
+/* The filter band moved into the rail column, so it stacks instead of laying
+   out three horizontal bands across the page. It sits there because it narrows
+   the rail and nothing else: one column to say what you want, one to show what
+   you got. */
+.split-view__rail-col .models-filters {
+  margin-bottom: 0;
+}
+
+.split-view__rail-col .models-filters__query,
+.split-view__rail-col .models-filters__refine {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-xs);
+}
+
+.split-view__rail-col .models-filters__backend { width: 100%; }
+
+/* Nineteen chips do not fit beside a 360px rail. The trigger states the
+   selection and the popover carries the full set, which also stops the chip
+   row and the rail competing to be the same control. */
+.models-filters__usecase-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+  padding: 6px var(--spacing-sm);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  text-align: left;
+}
+
+.models-filters__usecase-trigger:hover { border-color: var(--color-border-strong); }
+.models-filters__usecase-caret { margin-left: auto; font-size: 0.625rem; color: var(--color-text-muted); }
+
+.models-filters__usecases {
+  margin: 0;
+  padding: var(--spacing-xs) 0 0;
+  max-height: 46vh;
+  overflow-y: auto;
+}
+
+
+/* ==========================================================================
+   Full-height view: the split fills the window instead of sitting in a
+   document that scrolls. Rail and pane scroll independently, so the filters
+   and the pane's headline both stay put while a long list moves under them.
+   ========================================================================== */
+
+.page--app {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  /* A flex item's automatic minimum is its content, so without this the list
+     pushes the page taller instead of scrolling inside it. */
+  min-height: 0;
+  padding-bottom: var(--spacing-lg);
+}
+
+/* The header, fused. A slim row that reads as the top of the view rather than
+   a title block the view happens to sit under. */
+.view-bar {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-sm);
+  padding-bottom: var(--spacing-md);
+  flex-wrap: wrap;
+}
+
+.view-bar__title {
+  font-size: 1.375rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.view-bar__count {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.view-bar__actions { display: flex; gap: var(--spacing-xs); margin-left: auto; }
+
+.page--app .split-view { flex: 1; min-height: 0; }
+
+.page--app .split-view__rail-col {
+  height: 100%;
+  min-height: 0;
+}
+
+/* The filters keep their height; the list absorbs the rest and scrolls. */
+.page--app .entity-rail {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.page--app .entity-rail__list {
+  flex: 1;
+  min-height: 0;
+  max-height: none;
+}
+
+.page--app .split-view__pane {
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Grouped chips. Four families and a reset, rather than nineteen in a row. */
+.models-filters__usecase-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.models-filters__usecase-group + .models-filters__usecase-group {
+  margin-top: var(--spacing-sm);
+  padding-top: var(--spacing-sm);
+  border-top: 1px solid var(--color-border-divider);
+}
+
+.models-filters__usecase-label {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.models-filters__usecases .filter-bar { margin: 0; }
+
+/* The refinements read as a section with a name, not three controls left where
+   they landed when the band became a column. */
+.split-view__rail-col .models-filters__refine {
+  margin-top: var(--spacing-sm);
+  padding-top: var(--spacing-sm);
+  border-top: 1px solid var(--color-border-divider);
+  gap: 6px;
+}
+
+.models-filters__refine-label {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.split-view__rail-col .filter-bar-group__toggle {
+  justify-content: flex-start;
+  width: 100%;
+  padding: 2px 0;
+}
+
+.split-view__rail-col .models-filters__context {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+}
+
+.split-view__rail-col .models-filters__context input[type='range'] { flex: 1; min-width: 0; }
+
+@media (max-width: 900px) {
+  /* Stacked, the view cannot be height-constrained without trapping the list
+     in a short scroller, so it goes back to scrolling with the document. */
+  .page--app { display: block; }
+  .page--app .split-view__pane { height: auto; overflow: visible; }
+  .page--app .entity-rail__list { max-height: 320px; }
+}
+
+/* Pin the layout for split-view routes, the way the chat route already does.
+   .app-layout and .main-content are min-height:100dvh, which is a floor, not a
+   ceiling: a tall pane grew the whole column past the viewport, so selecting a
+   model with a long detail pushed the page down and the rail grew with it. The
+   "full height" view was scrolling the document instead of scrolling inside
+   itself.
+
+   :has() rather than a route flag in App.jsx, so the shell stays unaware of
+   which pages happen to be split views. */
+.app-layout:has(.page--app) {
+  height: 100vh;
+  height: 100dvh;
+}
+
+.app-layout:has(.page--app) .main-content {
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Below the split's breakpoint the two columns stack, and a stacked view
+   cannot be height-pinned without trapping both halves in short scrollers. It
+   goes back to scrolling with the document. */
+@media (max-width: 900px) {
+  .app-layout:has(.page--app) {
+    height: auto;
+    min-height: 100dvh;
+  }
+  .app-layout:has(.page--app) .main-content {
+    min-height: 100dvh;
+    overflow: visible;
+  }
+}
+
+/* Backends: the filters stack in the rail column the way Discover's do. Seven
+   chips fit at this width, so they need no disclosure. */
+.bk-filters {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-sm);
+}
+
+.bk-filters .search-bar { width: 100%; }
+.bk-filters .filter-bar { margin: 0; }
+
+.split-view__rail-col .bk-toggles {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+/* Host keeps its resource monitor, summary cards and tabs above the split, so
+   only what is left after them is pinned. Those are the page's own chrome and
+   they are read once, unlike the rail and the pane, which are worked in. */
+.page--app > .tabs { flex: none; }
+.page--app > .view-bar { flex: none; }
+
+/* The console layout is a flex row with align-items:flex-start, so its body
+   sizes to content. That is right for the pages it was built for and wrong for
+   a split view, which needs a ceiling to scroll inside: without it the rail ran
+   past the viewport and over the footer.
+
+   Scoped with :has() so only the split-view routes are pinned; every other
+   console page keeps sizing to its content. */
+.console-layout:has(.page--app) {
+  flex: 1;
+  min-height: 0;
+  align-items: stretch;
+}
+
+.console-layout:has(.page--app) > .console-body {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 900px) {
+  .console-layout:has(.page--app) {
+    flex: none;
+    align-items: flex-start;
+  }
+  .console-layout:has(.page--app) > .console-body { display: block; }
+}
diff --git a/core/http/react-ui/src/components/Sidebar.jsx b/core/http/react-ui/src/components/Sidebar.jsx
index 591e567973c4..49e137d24102 100644
--- a/core/http/react-ui/src/components/Sidebar.jsx
+++ b/core/http/react-ui/src/components/Sidebar.jsx
@@ -15,7 +15,11 @@ const SECTIONS_KEY = 'localai_sidebar_sections'
 
 const topItems = [
   { path: '/app', icon: 'fas fa-home', labelKey: 'items.home' },
-  { path: '/app/models', icon: 'fas fa-download', labelKey: 'items.installModels', adminOnly: true },
+  // "Discover" rather than "Models": the installed-models view lives under
+  // Host, so a bare "Models" here would name two different pages. The compass
+  // replaces a download arrow because the page is now browsed before it is
+  // installed from.
+  { path: '/app/models', icon: 'fas fa-compass', labelKey: 'items.discover', adminOnly: true },
 ]
 
 // Create stays inline (frequent, one-click creative destinations). The Build
diff --git a/core/http/react-ui/src/components/split/DetailHeader.jsx b/core/http/react-ui/src/components/split/DetailHeader.jsx
new file mode 100644
index 000000000000..5fbb3ae089f7
--- /dev/null
+++ b/core/http/react-ui/src/components/split/DetailHeader.jsx
@@ -0,0 +1,39 @@
+// DetailHeader is the top of the pane once something is selected: the way back
+// out, what you are looking at, and what you can do to it.
+//
+// The back control is the piece the expand-row never had. Selection lives in
+// the URL on all three surfaces, so leaving the detail is a real navigation
+// rather than a second click on the thing you just opened.
+export default function DetailHeader({
+  icon, name, lede, ledeTitle, actions, onBack, backLabel, warning,
+  testId = 'detail',
+}) {
+  return (
+    <>
+      {onBack && (
+        <button type="button" className="detail-pane__back" onClick={onBack} data-testid={`${testId}-back`}>
+          <i className="fas fa-arrow-left" aria-hidden="true" /> {backLabel}
+        </button>
+      )}
+
+      <div className="detail-pane__head">
+        {icon && <i className={`fas ${icon} detail-pane__icon`} aria-hidden="true" />}
+        <div className="detail-pane__title">
+          <h2 className="detail-pane__name">{name}</h2>
+          {lede && (
+            // Capped by CSS, with the whole of it on the title so nothing is
+            // lost to the truncation.
+            <p className="detail-pane__lede" title={ledeTitle || undefined}>{lede}</p>
+          )}
+        </div>
+        {actions && <div className="detail-pane__actions">{actions}</div>}
+      </div>
+
+      {warning && (
+        <p className="detail-pane__warning">
+          <i className="fas fa-circle-exclamation" aria-hidden="true" /> {warning}
+        </p>
+      )}
+    </>
+  )
+}
diff --git a/core/http/react-ui/src/components/split/EntityRail.jsx b/core/http/react-ui/src/components/split/EntityRail.jsx
new file mode 100644
index 000000000000..0aab27af47a5
--- /dev/null
+++ b/core/http/react-ui/src/components/split/EntityRail.jsx
@@ -0,0 +1,160 @@
+import { useRef } from 'react'
+
+// EntityRail is the scannable half of SplitView: one line per entity, grouped
+// while browsing and flat while searching.
+//
+// It is deliberately data-driven rather than aware of models, backends or
+// anything else. Each surface maps its own entity onto { id, name, icon, meta }
+// and keeps its vocabulary to itself, which is what stops three pages from
+// growing three subtly different rails.
+//
+// Counts describe what is loaded, never a share of some catalog total. Two of
+// the three callers page server-side, so a header claiming a total would be
+// inventing a number the component cannot know.
+//
+// items:  [{ id, name, icon, meta, metaTone, stripe, groupId }]
+// groups: [{ id, label, icon }] - pass null, or grouped=false, for a flat list.
+//   metaTone: 'ok' | 'bad' | 'warn' | 'busy'
+//   stripe:   'run' | 'idle' | 'err' | 'off' - a left edge for surfaces read by
+//             condition before they are read by name. Omit where state is not
+//             the point.
+export default function EntityRail({
+  items,
+  groups = null,
+  grouped = false,
+  collapsedGroups,
+  onToggleGroup,
+  selectedId,
+  onSelect,
+  countLabel,
+  actions = null,
+  ariaLabel,
+  testId = 'entity-rail',
+}) {
+  const railRef = useRef(null)
+
+  // Up/Down moves the selection so the pane can be stepped through without
+  // going back to the mouse.
+  //
+  // The handler sits on the list AND on every entry. Clicking an entry leaves
+  // focus on that <button>, and the key does not reach the container from
+  // there, so a container-only handler did nothing on the ordinary path:
+  // click a thing, then arrow to the next one.
+  const onKeyDown = (e) => {
+    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return
+    const ids = Array.from(railRef.current?.querySelectorAll('[data-entity]') || [])
+      .map(el => el.dataset.entity)
+    if (ids.length === 0) return
+    e.preventDefault()
+    // Whichever of the two handlers has focus must consume the key, or the
+    // other acts on it as well and the selection jumps two.
+    e.stopPropagation()
+    const at = ids.indexOf(selectedId)
+    const next = e.key === 'ArrowDown'
+      ? (at < 0 ? 0 : Math.min(ids.length - 1, at + 1))
+      : (at < 0 ? ids.length - 1 : Math.max(0, at - 1))
+    onSelect(ids[next])
+    // Move focus with the selection, not just the highlight. Roving tabindex
+    // means the newly selected entry is the one tab stop, so leaving focus
+    // behind would strand the keyboard on an entry that is no longer reachable
+    // by Tab.
+    const el = railRef.current?.querySelector(`[data-entity="${CSS.escape(ids[next])}"]`)
+    el?.scrollIntoView({ block: 'nearest' })
+    el?.focus()
+  }
+
+  // Roving tabindex: the rail is one tab stop, and the arrows move inside it.
+  // Without this every entry is its own stop, so tabbing past a forty-entry
+  // rail to reach the pane is forty keystrokes.
+  const firstId = items[0]?.id
+  const tabbableId = items.some(i => i.id === selectedId) ? selectedId : firstId
+
+  const renderItem = (item) => (
+    <RailItem
+      key={item.id}
+      item={item}
+      selected={item.id === selectedId}
+      tabbable={item.id === tabbableId}
+      onSelect={onSelect}
+      onKeyDown={onKeyDown}
+      testId={testId}
+    />
+  )
+
+  const useGroups = grouped && Array.isArray(groups) && groups.length > 0
+
+  return (
+    <div className="entity-rail">
+      <div className="entity-rail__head">
+        <span className="entity-rail__count">{countLabel}</span>
+        {actions}
+      </div>
+
+      {/* Not role="listbox". A listbox may only contain options and groups, and
+          the collapse control for each group is a button that has to live
+          inside the scroller with the entries it folds. Buttons in a labelled
+          group is the honest description of what this is, and it costs nothing:
+          selection is announced by aria-current and the arrow keys still work. */}
+      <div
+        className="entity-rail__list"
+        role="group"
+        aria-label={ariaLabel}
+        ref={railRef}
+        onKeyDown={onKeyDown}
+      >
+        {useGroups
+          ? groups.map(group => {
+            const inGroup = items.filter(i => i.groupId === group.id)
+            if (inGroup.length === 0) return null
+            const open = !collapsedGroups?.has(group.id)
+            return (
+              <div className="entity-rail__group" key={group.id}>
+                <button
+                  type="button"
+                  className="entity-rail__group-head"
+                  aria-expanded={open}
+                  data-testid={`${testId}-group-${group.id}`}
+                  onClick={() => onToggleGroup(group.id)}
+                >
+                  <i className={`fas fa-chevron-${open ? 'down' : 'right'} entity-rail__caret`} aria-hidden="true" />
+                  {group.icon && <i className={`fas ${group.icon} entity-rail__group-icon`} aria-hidden="true" />}
+                  <span className="entity-rail__group-label">{group.label}</span>
+                  <span className="entity-rail__group-count">{inGroup.length}</span>
+                </button>
+                {open && inGroup.map(renderItem)}
+              </div>
+            )
+          })
+          : items.map(renderItem)}
+      </div>
+    </div>
+  )
+}
+
+// One line: what it is, and its single most decision-relevant fact. Anything
+// that needs a sentence belongs in the pane.
+function RailItem({ item, selected, tabbable, onSelect, onKeyDown, testId }) {
+  return (
+    <button
+      type="button"
+      aria-current={selected ? 'true' : undefined}
+      tabIndex={tabbable ? 0 : -1}
+      data-entity={item.id}
+      data-testid={`${testId}-item`}
+      className={`entity-rail__item${selected ? ' entity-rail__item--on' : ''}`}
+      onClick={() => onSelect(item.id)}
+      onKeyDown={onKeyDown}
+    >
+      {item.stripe && <span className={`entity-rail__stripe entity-rail__stripe--${item.stripe}`} />}
+      {item.icon && <i className={`fas ${item.icon} entity-rail__icon`} aria-hidden="true" />}
+      <span className="entity-rail__main">
+        <span className="entity-rail__name">{item.name}</span>
+        {item.meta && (
+          <span className={`entity-rail__meta${item.metaTone ? ` entity-rail__meta--${item.metaTone}` : ''}`}>
+            {item.meta}
+          </span>
+        )}
+      </span>
+    </button>
+  )
+}
diff --git a/core/http/react-ui/src/components/split/SplitView.jsx b/core/http/react-ui/src/components/split/SplitView.jsx
new file mode 100644
index 000000000000..4d8ccb4fd650
--- /dev/null
+++ b/core/http/react-ui/src/components/split/SplitView.jsx
@@ -0,0 +1,21 @@
+// SplitView is the shell three admin surfaces share: a rail you scan on the
+// left, a pane that answers on the right.
+//
+// It exists because Discover, Backends and Host all had the same defect - an
+// eight-column table over a click-to-expand row - and the fix is the same
+// shape every time. What differs between them is what the rail lists and what
+// the pane says when nothing is selected, so those are the props.
+//
+// `detail` is not decoration. Below the breakpoint the two columns cannot both
+// survive, and a selected entity means the pane is the page, so the rail steps
+// aside. That is the trade a pushed route would make, without the routing.
+export default function SplitView({ rail, pane, detail = false, testId }) {
+  return (
+    <div className={`split-view${detail ? ' split-view--detail' : ''}`} data-testid={testId}>
+      <div className="split-view__rail-col">{rail}</div>
+      <div className="split-view__pane" data-testid={testId ? `${testId}-pane` : undefined}>
+        {pane}
+      </div>
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/components/split/StatGrid.jsx b/core/http/react-ui/src/components/split/StatGrid.jsx
new file mode 100644
index 000000000000..b1b668597d89
--- /dev/null
+++ b/core/http/react-ui/src/components/split/StatGrid.jsx
@@ -0,0 +1,24 @@
+// StatGrid is the headline numbers at the top of a detail pane.
+//
+// A description list rather than a row of divs, because that is what it is:
+// each cell is a term and its value, and a screen reader should be able to say
+// so. Values are tabular-figured in CSS so two panes read as the same table
+// even though they are not one.
+//
+// stats: [{ label, value, tone }] - tone is 'ok' | 'bad' | 'warn', reserved for
+// the cell whose value changes what you would do next. A grid where every cell
+// is coloured has no emphasis left to spend.
+export default function StatGrid({ stats }) {
+  const shown = stats.filter(Boolean)
+  if (shown.length === 0) return null
+  return (
+    <dl className="stat-grid">
+      {shown.map(s => (
+        <div className="stat-grid__item" key={s.label}>
+          <dt>{s.label}</dt>
+          <dd className={s.tone ? `stat-grid__value--${s.tone}` : undefined}>{s.value}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
diff --git a/core/http/react-ui/src/pages/Backends.jsx b/core/http/react-ui/src/pages/Backends.jsx
index 59eab4ea3486..aea631a220f2 100644
--- a/core/http/react-ui/src/pages/Backends.jsx
+++ b/core/http/react-ui/src/pages/Backends.jsx
@@ -15,6 +15,12 @@ import Toggle from '../components/Toggle'
 import NodeDistributionChip from '../components/NodeDistributionChip'
 import NodeInstallPicker from '../components/NodeInstallPicker'
 import Popover from '../components/Popover'
+import SplitView from '../components/split/SplitView'
+import EntityRail from '../components/split/EntityRail'
+import DetailHeader from '../components/split/DetailHeader'
+import StatGrid from '../components/split/StatGrid'
+import { useResources } from '../hooks/useResources'
+import { groupForEntity } from '../utils/entityGroups'
 
 export default function Backends() {
   const { addToast } = useOutletContext()
@@ -22,6 +28,7 @@ export default function Backends() {
   const { t } = useTranslation('admin')
   const [searchParams, setSearchParams] = useSearchParams()
   const { operations } = useOperations()
+  const { resources } = useResources()
   const { enabled: distributedEnabled, nodes: clusterNodes, refetch: refetchNodes } = useDistributedMode()
   const [loading, setLoading] = useState(true)
   const [search, setSearch] = useState('')
@@ -34,7 +41,9 @@ export default function Backends() {
   const [manualUri, setManualUri] = useState('')
   const [manualName, setManualName] = useState('')
   const [manualAlias, setManualAlias] = useState('')
-  const [expandedRow, setExpandedRow] = useState(null)
+  // Which backend the pane is showing, or null for the host page. In the URL
+  // for the same reasons as Discover: a backend is linkable, and Back leaves
+  // the detail rather than the page.
   const [confirmDialog, setConfirmDialog] = useState(null)
   const [allBackends, setAllBackends] = useState([])
   const [upgrades, setUpgrades] = useState({})
@@ -44,16 +53,32 @@ export default function Backends() {
   const [preferDevLoaded, setPreferDevLoaded] = useState(false)
   const [pickerBackend, setPickerBackend] = useState(null)
   const [pickerInitialSelection, setPickerInitialSelection] = useState([])
-  const [splitMenuFor, setSplitMenuFor] = useState(null)
-  // Anchor ref for the currently-open split-button chevron. Only one row's
-  // menu can be open at a time, so a single ref is enough — re-attached
-  // whenever splitMenuFor changes to a different row index.
+  const [splitMenuOpen, setSplitMenuOpen] = useState(false)
+  // Anchor for the split-button chevron. One pane, so one anchor.
   const splitMenuAnchorRef = useRef(null)
 
   // Target-node mode: set when navigated from /app/nodes via "+ Add backend".
   // The gallery page header banners the scope; rows collapse their split-button
   // to a single Install-on-this-node action; manual install posts to the
   // per-node endpoint.
+  const selectedName = searchParams.get('backend')
+
+  // Selection is a URL edit that preserves everything else in the query, so it
+  // composes with the target-node scope rather than clobbering it.
+  const selectBackend = useCallback((name) => {
+    setSearchParams(prev => {
+      const next = new URLSearchParams(prev)
+      if (name) next.set('backend', name)
+      else next.delete('backend')
+      return next
+    }, { replace: !name })
+    setSplitMenuOpen(false)
+  }, [setSearchParams])
+
+  const selectedBackend = selectedName
+    ? (allBackends.find(b => (b.name || b.id) === selectedName) || null)
+    : null
+
   const targetNodeId = searchParams.get('target') || ''
   const targetNode = targetNodeId
     ? clusterNodes.find(n => n.id === targetNodeId) || null
@@ -309,20 +334,8 @@ export default function Backends() {
     { key: 'vision', label: 'Vision', icon: 'fa-eye' },
   ]
 
-  const SortHeader = ({ col, children }) => (
-    <th
-      onClick={() => handleSort(col)}
-      className="sortable-th nowrap"
-    >
-      {children}
-      {sortBy === col && (
-        <i className={`fas fa-sort-${sortOrder === 'asc' ? 'up' : 'down'} ml-xs text-xs text-primary`} />
-      )}
-    </th>
-  )
-
   return (
-    <div className="page page--wide">
+    <div className="page page--wide page--app">
       {/* Target-node banner: when this gallery is scoped to one node via
           ?target=<id> (entered from /app/nodes), show the scope clearly and
           give a fast way to clear it. Visually a primary-tinted strip so the
@@ -341,37 +354,20 @@ export default function Backends() {
       )}
 
       {/* Header */}
-      <PageHeader
-        title={t('backends.title')}
-        supporting={t('backends.subtitle')}
-        actions={
-        <div className="hstack hstack--md">
-          <div className="bk-counts">
-            <div style={{ textAlign: 'center' }}>
-              <div className="bk-count tone-primary">{filteredBackends.length}</div>
-              <div style={{ color: 'var(--color-text-muted)' }}>Available</div>
-            </div>
-            <div style={{ textAlign: 'center' }}>
-              <a onClick={() => navigate('/app/manage')} style={{ cursor: 'pointer' }}>
-                <div className="bk-count tone-success">{installedCount}</div>
-                <div style={{ color: 'var(--color-text-muted)' }}>Installed</div>
-              </a>
-            </div>
-            {Object.keys(upgrades).length > 0 && (
-              <div style={{ textAlign: 'center' }}>
-                <div className="bk-count tone-warning">
-                  {Object.keys(upgrades).length}
-                </div>
-                <div style={{ color: 'var(--color-text-muted)' }}>Updates</div>
-              </div>
-            )}
-          </div>
-          <a className="btn btn-secondary btn-sm" href="https://localai.io/docs/getting-started/manual/" target="_blank" rel="noopener noreferrer">
-            <i className="fas fa-book" /> Docs
-          </a>
+      <div className="view-bar">
+        <h1 className="view-bar__title">{t('backends.title')}</h1>
+        <span className="view-bar__count">{backends.length} of {allBackends.length}</span>
+        <div className="view-bar__actions">
+          {Object.keys(upgrades).length > 0 && (
+            <button className="btn btn-primary btn-sm" onClick={handleUpgradeAll} disabled={upgradingAll}>
+              <i className={`fas ${upgradingAll ? 'fa-spinner fa-spin' : 'fa-arrow-up'}`} /> Upgrade all ({Object.keys(upgrades).length})
+            </button>
+          )}
+          <button className="btn btn-secondary btn-sm" onClick={() => setShowManualInstall(!showManualInstall)}>
+            <i className={`fas ${showManualInstall ? 'fa-chevron-up' : 'fa-plus'}`} /> Manual Install
+          </button>
         </div>
-        }
-      />
+      </div>
 
       {/* Upgrade Banner */}
       {Object.keys(upgrades).length > 0 && (
@@ -393,13 +389,6 @@ export default function Backends() {
         </div>
       )}
 
-      {/* Manual Install */}
-      <div style={{ marginBottom: 'var(--spacing-md)' }}>
-        <button className="btn btn-secondary btn-sm" onClick={() => setShowManualInstall(!showManualInstall)}>
-          <i className={`fas ${showManualInstall ? 'fa-chevron-up' : 'fa-plus'}`} /> Manual Install
-        </button>
-      </div>
-
       {showManualInstall && (
         <form onSubmit={handleManualInstall} className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
           <h3 className="text-base fw-semibold mb-sm">
@@ -426,329 +415,244 @@ export default function Backends() {
         </form>
       )}
 
-      {/* Search + Filters */}
-      <div className="hstack mb-md">
-        <div className="search-bar search-grow">
-          <i className="fas fa-search search-icon" />
-          <input className="input" placeholder="Search backends by name, description, or type..." value={search} onChange={(e) => handleSearch(e.target.value)} />
-        </div>
-      </div>
-
-      <div className="hstack hstack--md mb-md">
-        <div className="filter-bar m-0 flex-1">
-          {FILTERS.map(f => (
-            <button
-              key={f.key}
-              className={`filter-btn ${filter === f.key ? 'active' : ''}`}
-              onClick={() => { setFilter(f.key); setPage(1) }}
-            >
-            <i className={`fas ${f.icon}`} style={{ marginRight: 4 }} />
-            {f.label}
-          </button>
-        ))}
-        </div>
-
-        <div className="bk-toggles">
-          <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)', fontSize: '0.75rem', color: 'var(--color-text-secondary)', cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap' }}>
-            <Toggle checked={showAllBackends} onChange={handleToggleAllBackends} />
-            <i className="fas fa-cubes" style={{ fontSize: '0.625rem' }} />
-            Show all
-          </label>
-          <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)', fontSize: '0.75rem', color: 'var(--color-text-secondary)', cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap' }}>
-            <Toggle checked={showDevelopment} onChange={handleToggleDev} />
-            <i className="fas fa-flask" style={{ fontSize: '0.625rem' }} />
-            Development
-          </label>
-        </div>
-      </div>
-
-      {/* Table */}
+      {/* The gallery, as a rail and a pane. Same shell as Discover, because it
+          is the same defect: a seven-column table whose expand-row was the
+          only place the repository, licence, tags and links could go. */}
       {loading ? (
         <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-xl)' }}><LoadingSpinner size="lg" /></div>
-      ) : backends.length === 0 ? (
-        <div className="empty-state">
-          <div className="empty-state-icon"><i className="fas fa-server" /></div>
-          <h2 className="empty-state-title">No backends found</h2>
-          <p className="empty-state-text">
-            {search || filter ? 'Try adjusting your search or filters.' : 'No backends available in the gallery.'}
-          </p>
-        </div>
       ) : (
-        <div className="table-container">
-          <table className="table">
-            <thead>
-              <tr>
-                <th style={{ width: 30 }}></th>
-                <th style={{ width: 40 }}></th>
-                <SortHeader col="name">Backend</SortHeader>
-                <th>Description</th>
-                <SortHeader col="repository">Repository</SortHeader>
-                <SortHeader col="license">License</SortHeader>
-                <SortHeader col="status">Status</SortHeader>
-                {distributedEnabled && !targetNode && <th>Nodes</th>}
-                <th style={{ textAlign: 'right' }}>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {backends.map((b, idx) => {
-                const op = getBackendOp(b)
-                // A failed op is intentionally kept in the operations list so the
-                // OperationsBar can surface the error + Dismiss; it must NOT render
-                // as a perpetual "Installing..." spinner here (mirrors Models.jsx).
-                const isProcessing = !!op && !op.error
-                const isExpanded = expandedRow === idx
-
-                return (
-                  <React.Fragment key={b.name || b.id}>
-                  <tr
-                    onClick={() => setExpandedRow(isExpanded ? null : idx)}
-                    style={{ cursor: 'pointer' }}
+        <SplitView
+          testId="backends"
+          detail={!!selectedBackend}
+          rail={
+            <>
+            {/* The filters narrow the rail and nothing else, so they live with it. */}
+            <div className="bk-filters">
+              <div className="search-bar search-grow">
+                <i className="fas fa-search search-icon" />
+                <input className="input" placeholder="Search backends by name, description, or type..." value={search} onChange={(e) => handleSearch(e.target.value)} />
+              </div>
+            </div>
+
+            <div className="bk-filters">
+              <div className="filter-bar m-0 flex-1">
+                {FILTERS.map(f => (
+                  <button
+                    key={f.key}
+                    className={`filter-btn ${filter === f.key ? 'active' : ''}`}
+                    onClick={() => { setFilter(f.key); setPage(1) }}
                   >
-                    {/* Chevron */}
-                    <td style={{ width: 30 }}>
-                      <i className={`fas fa-chevron-${isExpanded ? 'down' : 'right'}`} style={{ fontSize: '0.625rem', color: 'var(--color-text-muted)', transition: 'transform 150ms' }} />
-                    </td>
-                    {/* Icon */}
-                    <td>
-                      {b.icon ? (
-                        <img src={b.icon} alt="" className="bk-icon" />
-                      ) : (
-                        <div className="bk-icon-fallback">
-                          <i className="fas fa-cog" style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }} />
-                        </div>
-                      )}
-                    </td>
-
-                    {/* Name */}
-                    <td>
-                      <span style={{ fontWeight: 500 }}>{b.name || b.id}</span>
-                      {b.version && (
-                        <span className="badge badge--tiny badge--soft ml-xs">
-                          v{b.version}
-                        </span>
-                      )}
-                    </td>
-
-                    {/* Description */}
-                    <td>
-                      {(() => {
-                        // Gallery descriptions are Markdown. This cell is a single
-                        // truncated line, so it gets the text without the syntax;
-                        // the full Markdown is rendered in the detail panel instead.
-                        const desc = stripMarkdown(b.description)
-                        return (
-                          <span className="bk-desc" title={desc}>
-                            {desc || '-'}
+                  <i className={`fas ${f.icon}`} style={{ marginRight: 4 }} />
+                  {f.label}
+                </button>
+              ))}
+              </div>
+
+              <span className="models-filters__refine-label">Refine</span>
+              <div className="bk-toggles">
+                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)', fontSize: '0.75rem', color: 'var(--color-text-secondary)', cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap' }}>
+                  <Toggle checked={showAllBackends} onChange={handleToggleAllBackends} />
+                  <i className="fas fa-cubes" style={{ fontSize: '0.625rem' }} />
+                  Show all
+                </label>
+                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)', fontSize: '0.75rem', color: 'var(--color-text-secondary)', cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap' }}>
+                  <Toggle checked={showDevelopment} onChange={handleToggleDev} />
+                  <i className="fas fa-flask" style={{ fontSize: '0.625rem' }} />
+                  Development
+                </label>
+              </div>
+            </div>
+              <EntityRail
+                items={backends.map(b => railItemForBackend(b, { getBackendOp, upgrades }))}
+                selectedId={selectedName}
+                onSelect={selectBackend}
+                countLabel={`${backends.length} of ${allBackends.length}`}
+                ariaLabel="Backends"
+                testId="backends-rail"
+                actions={
+                  <div className="entity-rail__sort" role="group" aria-label="Sort backends">
+                    <BackendSortButton col="name" label="Name" sortBy={sortBy} sortOrder={sortOrder} onSort={handleSort} />
+                    <BackendSortButton col="status" label="Status" sortBy={sortBy} sortOrder={sortOrder} onSort={handleSort} />
+                  </div>
+                }
+              />
+
+              {totalPages > 1 && (
+                <div className="pagination split-view__pager">
+                  <button className="pagination-btn" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page <= 1} aria-label="Previous page">
+                    <i className="fas fa-chevron-left" />
+                  </button>
+                  <span className="split-view__pager-label">{page} / {totalPages}</span>
+                  <button className="pagination-btn" onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page >= totalPages} aria-label="Next page">
+                    <i className="fas fa-chevron-right" />
+                  </button>
+                </div>
+              )}
+            </>
+          }
+          pane={backends.length === 0 ? (
+            <div className="empty-state">
+              <div className="empty-state-icon"><i className="fas fa-server" /></div>
+              <h2 className="empty-state-title">No backends found</h2>
+              <p className="empty-state-text">
+                {search || filter ? 'Try adjusting your search or filters.' : 'No backends available in the gallery.'}
+              </p>
+            </div>
+          ) : selectedBackend ? (() => {
+            const b = selectedBackend
+            const name = b.name || b.id
+            const op = getBackendOp(b)
+            const isProcessing = !!op && !op.error
+            const upgrade = upgrades[name]
+
+            return (
+              <div className="detail-pane">
+                <DetailHeader
+                  testId="backends"
+                  icon={groupForEntity(b).icon}
+                  name={name}
+                  lede={b.description ? stripMarkdown(b.description).slice(0, 220) : null}
+                  ledeTitle={b.description ? stripMarkdown(b.description) : null}
+                  onBack={() => selectBackend(null)}
+                  backLabel="All backends"
+                  actions={
+                    isProcessing ? (
+                      <div className="inline-install">
+                        <div className="inline-install__row">
+                          <div className="operation-spinner" />
+                          <span className="inline-install__label">
+                            {op.isDeletion ? 'Deleting...' : op.isQueued ? 'Queued' : `Installing${op.progress > 0 ? ` · ${Math.round(op.progress)}%` : '...'}`}
                           </span>
-                        )
-                      })()}
-                    </td>
-
-                    {/* Repository */}
-                    <td>
-                      {b.gallery ? (
-                        <span className="badge badge-info" style={{ fontSize: '0.6875rem' }}>{typeof b.gallery === 'string' ? b.gallery : b.gallery.name || '-'}</span>
-                      ) : '-'}
-                    </td>
-
-                    {/* License */}
-                    <td>
-                      {b.license ? (
-                        <span className="badge badge--soft text-xs">{b.license}</span>
-                      ) : '-'}
-                    </td>
-
-                    {/* Status — in distributed mode the Nodes column is the
-                        installed signal, so we drop the global "Installed"
-                        badge here and only keep operation-progress / update
-                        signals to avoid stacking 6 badges in one cell. */}
-                    <td>
-                      {isProcessing ? (
-                        <div className="inline-install">
-                          <div className="inline-install__row">
-                            <div className="operation-spinner" />
-                            <span className="inline-install__label">
-                              {op.isDeletion ? 'Deleting...' : op.isQueued ? 'Queued' : `Installing${op.progress > 0 ? ` · ${Math.round(op.progress)}%` : '...'}`}
-                            </span>
-                          </div>
-                          {op.progress > 0 && (
-                            <div className="operation-bar-container bk-progress">
-                              <div className="operation-bar" style={{ width: `${op.progress}%` }} />
-                            </div>
-                          )}
-                        </div>
-                      ) : b.installed ? (
-                        <div className="hstack hstack--xs">
-                          {!distributedEnabled && (
-                            <span className="badge badge-success">
-                              <i className="fas fa-check icon-tiny" /> Installed
-                            </span>
-                          )}
-                          {b.version && (
-                            <span className="badge badge--tiny badge--soft">
-                              v{b.version}
-                            </span>
-                          )}
-                          {upgrades[b.name] && (
-                            <span className="badge badge--tiny badge--warn-soft">
-                              <i className="fas fa-arrow-up icon-tiny" />
-                              {upgrades[b.name].available_version ? `v${upgrades[b.name].available_version}` : 'Update'}
-                            </span>
-                          )}
                         </div>
+                        {op.progress > 0 && (
+                          <div className="operation-bar-container bk-progress">
+                            <div className="operation-bar" style={{ width: `${op.progress}%` }} />
+                          </div>
+                        )}
+                      </div>
+                    ) : targetNode ? (
+                      // Target-node mode: one per-node action. The split button
+                      // is overkill when the URL has already pinned the scope.
+                      (b.nodes || []).some(n => (n.node_id ?? n.NodeID) === targetNode.id) ? (
+                        <>
+                          <button className="btn btn-secondary btn-sm" onClick={() => handleInstallOnTarget(name)} title={`Reinstall on ${targetNode.name}`}>
+                            <i className="fas fa-rotate" /> Reinstall
+                          </button>
+                          <button className="btn btn-danger btn-sm" onClick={async () => {
+                            try {
+                              await nodesApi.deleteBackend(targetNode.id, name)
+                              addToast(`Removed ${b.name} from ${targetNode.name}`, 'success')
+                              setTimeout(() => { fetchBackends(); refetchNodes() }, 600)
+                            } catch (err) {
+                              addToast(`Remove failed: ${err.message}`, 'error')
+                            }
+                          }} title={`Remove from ${targetNode.name}`}>
+                            <i className="fas fa-trash" /> Remove
+                          </button>
+                        </>
                       ) : (
-                        <span className="badge" style={{ background: 'var(--color-surface-sunken)', color: 'var(--color-text-muted)', border: '1px solid var(--color-border-default)' }}>
-                          <i className="fas fa-circle icon-tiny" /> Not Installed
-                        </span>
-                      )}
-                    </td>
-
-                    {/* Nodes column (distributed mode only, hidden in target
-                        mode since it's redundant with the banner). The chip
-                        is read-only inspection; the adjacent + button is the
-                        write affordance — keeping them visually separate so
-                        users don't accidentally trigger the picker by clicking
-                        to read distribution. */}
-                    {distributedEnabled && !targetNode && (
-                      <td>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
-                          <NodeDistributionChip nodes={b.nodes || []} />
-                          {(() => {
-                            const missing = missingNodesFor(b)
-                            if (missing.length === 0 || isProcessing) return null
-                            return (
-                              <button
-                                type="button"
-                                className="btn btn-ghost btn-sm"
-                                onClick={(e) => { e.stopPropagation(); openPicker(b, missing) }}
-                                title={`Install on ${missing.length} more node${missing.length === 1 ? '' : 's'}`}
-                                aria-label="Install on more nodes"
-                                className="pill-xs"
-                              >
-                                <i className="fas fa-plus" style={{ fontSize: '0.6875rem' }} />
-                              </button>
-                            )
-                          })()}
-                        </div>
-                      </td>
-                    )}
-
-                    {/* Actions */}
-                    <td>
-                      <div style={{ display: 'flex', gap: 'var(--spacing-xs)', justifyContent: 'flex-end' }} onClick={e => e.stopPropagation()}>
-                        {targetNode ? (
-                          // Target-node mode: collapse to a single per-node
-                          // action. The split-button is overkill when scope is
-                          // already pinned by the URL.
-                          (b.nodes || []).some(n => (n.node_id ?? n.NodeID) === targetNode.id) ? (
-                            <>
-                              <button className="btn btn-secondary btn-sm" onClick={() => handleInstallOnTarget(b.name || b.id)} disabled={isProcessing}
-                                title={`Reinstall on ${targetNode.name}`}>
-                                <i className={`fas ${isProcessing ? 'fa-spinner fa-spin' : 'fa-rotate'}`} /> Reinstall
-                              </button>
-                              <button className="btn btn-danger btn-sm" onClick={async () => {
-                                try {
-                                  await nodesApi.deleteBackend(targetNode.id, b.name || b.id)
-                                  addToast(`Removed ${b.name} from ${targetNode.name}`, 'success')
-                                  setTimeout(() => { fetchBackends(); refetchNodes() }, 600)
-                                } catch (err) {
-                                  addToast(`Remove failed: ${err.message}`, 'error')
-                                }
-                              }} title={`Remove from ${targetNode.name}`} disabled={isProcessing}>
-                                <i className="fas fa-trash" />
-                              </button>
-                            </>
-                          ) : (
-                            <button className="btn btn-primary btn-sm" onClick={() => handleInstallOnTarget(b.name || b.id)} disabled={isProcessing}>
-                              <i className={`fas ${isProcessing ? 'fa-spinner fa-spin' : 'fa-download'}`} /> Install on {targetNode.name}
-                            </button>
-                          )
-                        ) : b.installed ? (
-                          <>
-                            {upgrades[b.name] ? (
-                              <button className="btn btn-primary btn-sm" onClick={() => handleUpgrade(b.name || b.id)} title={`Upgrade to ${upgrades[b.name]?.available_version ? 'v' + upgrades[b.name].available_version : 'latest'}`} disabled={isProcessing}>
-                                <i className={`fas ${isProcessing ? 'fa-spinner fa-spin' : 'fa-arrow-up'}`} />
-                              </button>
-                            ) : (
-                              <button className="btn btn-secondary btn-sm" onClick={() => handleInstall(b.name || b.id)} title="Reinstall" disabled={isProcessing}>
-                                <i className={`fas ${isProcessing ? 'fa-spinner fa-spin' : 'fa-rotate'}`} />
-                              </button>
-                            )}
-                            <button className="btn btn-danger btn-sm" onClick={() => handleDelete(b.name || b.id)} title="Delete" disabled={isProcessing}>
-                              <i className="fas fa-trash" />
-                            </button>
-                          </>
-                        ) : distributedEnabled ? (
-                          // Split-button. Auto-resolving (meta) keeps fan-out
-                          // as the primary; hardware-specific routes the
-                          // primary directly to the picker — fan-out for a
-                          // CPU build is the silent footgun this guard exists
-                          // to prevent. Both share a chevron menu for the
-                          // alternate path.
-                          b.isMeta ? (
-                            <div className="inline-flex">
-                              <button className="btn btn-primary btn-sm" onClick={() => handleInstall(b.name || b.id)} disabled={isProcessing} title="Install on all nodes" style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}>
-                                <i className={`fas ${isProcessing ? 'fa-spinner fa-spin' : 'fa-download'}`} /> Install on all
-                              </button>
-                              <button
-                                ref={splitMenuFor === idx ? splitMenuAnchorRef : undefined}
-                                className="btn btn-primary btn-sm bk-split-btn"
-                                onClick={() => setSplitMenuFor(splitMenuFor === idx ? null : idx)}
-                                aria-haspopup="menu"
-                                aria-expanded={splitMenuFor === idx}
-                                aria-label="More install options"
-                                disabled={isProcessing}
-                              >
-                                <i className={`fas fa-chevron-${splitMenuFor === idx ? 'up' : 'down'}`} style={{ fontSize: '0.6875rem' }} />
-                              </button>
-                            </div>
-                          ) : (
-                            <button
-                              className="btn btn-primary btn-sm"
-                              onClick={() => openPicker(b)}
-                              disabled={isProcessing}
-                              title="Choose nodes to install on"
-                            >
-                              <i className={`fas ${isProcessing ? 'fa-spinner fa-spin' : 'fa-server'}`} /> Choose nodes…
-                            </button>
-                          )
+                        <button className="btn btn-primary btn-sm" onClick={() => handleInstallOnTarget(name)} data-testid="backends-install">
+                          <i className="fas fa-download" /> Install on {targetNode.name}
+                        </button>
+                      )
+                    ) : b.installed ? (
+                      <>
+                        {upgrade ? (
+                          <button className="btn btn-primary btn-sm" onClick={() => handleUpgrade(name)} title={`Upgrade to ${upgrade.available_version ? 'v' + upgrade.available_version : 'latest'}`}>
+                            <i className="fas fa-arrow-up" /> Upgrade
+                          </button>
                         ) : (
-                          <button className="btn btn-primary btn-sm" onClick={() => handleInstall(b.name || b.id)} title="Install" disabled={isProcessing}>
-                            <i className={`fas ${isProcessing ? 'fa-spinner fa-spin' : 'fa-download'}`} />
+                          <button className="btn btn-secondary btn-sm" onClick={() => handleInstall(name)} title="Reinstall">
+                            <i className="fas fa-rotate" /> Reinstall
                           </button>
                         )}
-                      </div>
-                    </td>
-                  </tr>
-                  {/* Expanded detail row */}
-                  {isExpanded && (
-                    <tr>
-                      <td colSpan={distributedEnabled && !targetNode ? 9 : 8} style={{ padding: 0 }}>
-                        <BackendDetail backend={b} />
-                      </td>
-                    </tr>
-                  )}
-                  </React.Fragment>
-                )
-              })}
-            </tbody>
-          </table>
-        </div>
-      )}
+                        <button className="btn btn-danger btn-sm" onClick={() => handleDelete(name)} title="Delete">
+                          <i className="fas fa-trash" /> Delete
+                        </button>
+                      </>
+                    ) : distributedEnabled ? (
+                      // Auto-resolving (meta) entries keep fan-out as the
+                      // primary; a hardware-specific build routes straight to
+                      // the picker, because fanning a CPU build out to every
+                      // node is the silent footgun this guard exists to stop.
+                      b.isMeta ? (
+                        <div className="inline-flex">
+                          <button className="btn btn-primary btn-sm" onClick={() => handleInstall(name)} title="Install on all nodes" style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }} data-testid="backends-install">
+                            <i className="fas fa-download" /> Install on all
+                          </button>
+                          <button
+                            ref={splitMenuAnchorRef}
+                            className="btn btn-primary btn-sm bk-split-btn"
+                            onClick={() => setSplitMenuOpen(v => !v)}
+                            aria-haspopup="menu"
+                            aria-expanded={splitMenuOpen}
+                            aria-label="More install options"
+                          >
+                            <i className={`fas fa-chevron-${splitMenuOpen ? 'up' : 'down'}`} style={{ fontSize: '0.6875rem' }} />
+                          </button>
+                        </div>
+                      ) : (
+                        <button className="btn btn-primary btn-sm" onClick={() => openPicker(b)} title="Choose nodes to install on" data-testid="backends-install">
+                          <i className="fas fa-server" /> Choose nodes…
+                        </button>
+                      )
+                    ) : (
+                      <button className="btn btn-primary btn-sm" onClick={() => handleInstall(name)} title="Install" data-testid="backends-install">
+                        <i className="fas fa-download" /> Install
+                      </button>
+                    )
+                  }
+                />
+
+                <StatGrid
+                  stats={[
+                    { label: 'Installed', value: b.installed ? (b.version ? `v${b.version}` : 'yes') : 'no', tone: b.installed ? 'ok' : undefined },
+                    upgrade ? { label: 'Available', value: upgrade.available_version ? `v${upgrade.available_version}` : 'update', tone: 'warn' } : null,
+                    { label: 'License', value: b.license || '—' },
+                    { label: 'Repository', value: b.gallery ? (typeof b.gallery === 'string' ? b.gallery : b.gallery.name || '—') : '—' },
+                  ]}
+                />
+
+                {/* Distribution is the one fact the pane can state that a row
+                    never could: which nodes hold a copy, and which do not. */}
+                {distributedEnabled && !targetNode && (
+                  <div>
+                    <span className="detail-pane__label">Installed on</span>
+                    <div className="hstack hstack--xs">
+                      <NodeDistributionChip nodes={b.nodes || []} />
+                      {(() => {
+                        const missing = missingNodesFor(b)
+                        if (missing.length === 0 || isProcessing) return null
+                        return (
+                          <button
+                            type="button"
+                            className="btn btn-ghost btn-sm"
+                            onClick={() => openPicker(b, missing)}
+                            aria-label="Install on more nodes"
+                          >
+                            <i className="fas fa-plus" style={{ fontSize: '0.6875rem' }} /> {missing.length} more
+                          </button>
+                        )
+                      })()}
+                    </div>
+                  </div>
+                )}
 
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <div className="pagination-row mt-md">
-          <button className="btn btn-secondary btn-sm" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page <= 1}>
-            <i className="fas fa-chevron-left" /> Previous
-          </button>
-          <span style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)' }}>
-            Page {page} of {totalPages}
-          </span>
-          <button className="btn btn-secondary btn-sm" onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page >= totalPages}>
-            Next <i className="fas fa-chevron-right" />
-          </button>
-        </div>
+                <BackendDetail backend={b} />
+              </div>
+            )
+          })() : (
+            <BackendHostPane
+              resources={resources}
+              backends={allBackends}
+              installedCount={installedCount}
+              upgrades={upgrades}
+              onSelect={selectBackend}
+              onUpgradeAll={handleUpgradeAll}
+              upgradingAll={upgradingAll}
+            />
+          )}
+        />
       )}
 
       <ConfirmDialog
@@ -761,14 +665,14 @@ export default function Backends() {
         onCancel={() => setConfirmDialog(null)}
       />
 
-      {/* Single popover instance for the split-button menu, anchored to
-          whichever row's chevron is currently active. Reusing the existing
-          Popover gives us .card surface + outside-click + Escape + focus
-          return for free. */}
+      {/* The split-button menu, anchored to the pane's own chevron. It used to
+          be re-anchored per row; there is one selected backend now, so there is
+          one anchor. Popover still gives us the card surface, outside-click,
+          Escape and focus return. */}
       <Popover
         anchor={splitMenuAnchorRef}
-        open={splitMenuFor !== null}
-        onClose={() => setSplitMenuFor(null)}
+        open={splitMenuOpen}
+        onClose={() => setSplitMenuOpen(false)}
         ariaLabel="Install options"
       >
         <div className="action-menu">
@@ -776,8 +680,8 @@ export default function Backends() {
             type="button"
             className="action-menu__item"
             onClick={() => {
-              const b = backends[splitMenuFor]
-              if (b) openPicker(b)
+              setSplitMenuOpen(false)
+              if (selectedBackend) openPicker(selectedBackend)
             }}
           >
             <i className="fas fa-server action-menu__icon" />
@@ -861,3 +765,122 @@ function BackendDetail({ backend }) {
     </div>
   )
 }
+
+// The rail line spends its one fact on the thing that decides what you do
+// next: whether it is here, whether it is stale, whether it is moving.
+function railItemForBackend(backend, { getBackendOp, upgrades }) {
+  const name = backend.name || backend.id
+  const op = getBackendOp(backend)
+  const processing = !!op && !op.error
+  const upgrade = upgrades[name]
+
+  let meta = backend.version ? `v${backend.version}` : 'not installed'
+  let metaTone
+  if (processing) {
+    meta = op.isDeletion ? 'deleting' : op.isQueued ? 'queued' : `installing${op.progress > 0 ? ` ${Math.round(op.progress)}%` : ''}`
+    metaTone = 'busy'
+  } else if (upgrade) {
+    meta = upgrade.available_version ? `v${backend.version} → v${upgrade.available_version}` : 'update available'
+    metaTone = 'warn'
+  } else if (backend.installed) {
+    meta = backend.version ? `v${backend.version} · installed` : 'installed'
+    metaTone = 'ok'
+  }
+
+  return { id: name, name, icon: groupForEntity(backend).icon, meta, metaTone, groupId: groupForEntity(backend).id }
+}
+
+function BackendSortButton({ col, label, sortBy, sortOrder, onSort }) {
+  const active = sortBy === col
+  return (
+    <button
+      type="button"
+      className={`entity-rail__sort-btn${active ? ' active' : ''}`}
+      aria-pressed={active}
+      onClick={() => onSort(col)}
+    >
+      {label}
+      {active && <i className={`fas fa-arrow-${sortOrder === 'asc' ? 'up' : 'down'}`} aria-hidden="true" />}
+    </button>
+  )
+}
+
+// BackendHostPane is the pane with nothing selected.
+//
+// A backend's fitness is not free memory, it is the accelerator and platform it
+// was built for, so this leads with what the host actually is. That is the
+// question the table never answered: it listed 37 runtimes and left "which of
+// these can even run here" entirely to the reader.
+function BackendHostPane({ resources, backends, installedCount, upgrades, onSelect, onUpgradeAll, upgradingAll }) {
+  const gpu = resources?.gpus?.[0]
+  const accelerator = gpu ? `${gpu.name}${gpu.vendor ? ` (${gpu.vendor})` : ''}` : null
+  const staleNames = Object.keys(upgrades)
+  // Not installed, and near the top of whatever order the gallery returned,
+  // which is the gallery's own notion of prominence rather than one invented
+  // here. Anything cleverer needs a ranking rule somebody owns.
+  const suggestions = backends.filter(b => !b.installed).slice(0, 3)
+
+  return (
+    <div className="zero-pane">
+      <div className="zero-pane__hero">
+        <span className="zero-pane__eyebrow">This host</span>
+        <h2 className="zero-pane__title">
+          {accelerator
+            ? `${accelerator}. ${backends.length} backends in the gallery, ${installedCount} installed.`
+            : `${backends.length} backends in the gallery, ${installedCount} installed.`}
+        </h2>
+        <p className="zero-pane__text">
+          A backend is a runtime, so what decides it is your accelerator and platform rather than free memory.
+          Pick one on the left for its builds, licence and repository.
+        </p>
+      </div>
+
+      {staleNames.length > 0 && (
+        <div className="zero-pane__alert zero-pane__alert--warn">
+          <i className="fas fa-arrow-up" aria-hidden="true" />
+          <span>
+            {staleNames.length === 1
+              ? '1 installed backend has a newer build.'
+              : `${staleNames.length} installed backends have a newer build.`}
+            {' '}{staleNames.slice(0, 3).join(', ')}{staleNames.length > 3 ? '…' : ''}
+          </span>
+          <button className="btn btn-secondary btn-sm" onClick={onUpgradeAll} disabled={upgradingAll}>
+            <i className={`fas ${upgradingAll ? 'fa-spinner fa-spin' : 'fa-arrow-up'}`} /> Upgrade all
+          </button>
+        </div>
+      )}
+
+      {suggestions.length > 0 && (
+        <div className="zero-pane__shelf">
+          <div className="zero-pane__shelf-head">
+            <h3 className="zero-pane__shelf-title">Not installed yet</h3>
+            <span className="zero-pane__shelf-meta">{backends.length - installedCount} available</span>
+          </div>
+          <div className="zero-pane__tiles">
+            {suggestions.map((b, i) => {
+              const name = b.name || b.id
+              return (
+                <button
+                  type="button"
+                  key={name}
+                  className={`zero-pane__tile${i === 0 ? ' zero-pane__tile--feat' : ''}`}
+                  onClick={() => onSelect(name)}
+                >
+                  <span className="hstack hstack--xs">
+                    <i className={`fas ${groupForEntity(b).icon}`} aria-hidden="true" />
+                    <span className="zero-pane__tile-name">{name}</span>
+                  </span>
+                  <span className="text-sm text-muted">{stripMarkdown(b.description).slice(0, 90) || '—'}</span>
+                  <span className="zero-pane__tile-foot">
+                    <span className="badge badge--tiny badge--soft">{b.license || 'no licence'}</span>
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
diff --git a/core/http/react-ui/src/pages/Manage.jsx b/core/http/react-ui/src/pages/Manage.jsx
index 57fda264a6aa..44736cb8bc9c 100644
--- a/core/http/react-ui/src/pages/Manage.jsx
+++ b/core/http/react-ui/src/pages/Manage.jsx
@@ -11,8 +11,10 @@ import GalleryLoader from '../components/GalleryLoader'
 import ManageSummary from '../components/ManageSummary'
 import MetaBadgeRow from '../components/MetaBadgeRow'
 import ActionMenu from '../components/ActionMenu'
-import ResourceRow, { ChevronCell, IconCell, StopPropagationCell } from '../components/ResourceRow'
-import ResponsiveTable from '../components/ResponsiveTable'
+import SplitView from '../components/split/SplitView'
+import EntityRail from '../components/split/EntityRail'
+import DetailHeader from '../components/split/DetailHeader'
+import StatGrid from '../components/split/StatGrid'
 import { useModels } from '../hooks/useModels'
 import { useGalleryEnrichment } from '../hooks/useGalleryEnrichment'
 import { useOperations } from '../hooks/useOperations'
@@ -58,7 +60,6 @@ const USE_CASES = [
 
 // Number of columns the expandable detail row spans, per tab. Kept as
 // constants so adding/removing a column doesn't silently break the colSpan.
-const MODELS_COLSPAN = 7 // chevron, icon, name, status, backend, use cases, actions
 
 // formatInstalledAt renders an installed_at timestamp as a short relative/abs
 // string suitable for dense tables. Returns the raw value if parsing fails so
@@ -124,11 +125,6 @@ function formatBackendVersion(metadata) {
 // Gallery descriptions are Markdown. The row preview is a single truncated
 // line, so it shows the text without the syntax; the full Markdown is rendered
 // in the expanded detail panel instead.
-function ResourceRowDesc({ description }) {
-  const text = stripMarkdown(description)
-  if (!text) return null
-  return <span className="resource-row__desc" title={text}>{text}</span>
-}
 
 export default function Manage() {
   const { addToast } = useOutletContext()
@@ -156,9 +152,12 @@ export default function Manage() {
   const [togglingModels, setTogglingModels] = useState(new Set())
   const [pinningModels, setPinningModels] = useState(new Set())
   const [loadingModels, setLoadingModels] = useState(new Set())
-  // Expanded row state — keyed by `${tab}:${id}` so switching tabs doesn't
-  // collide and a single row is open at a time per tab.
-  const [expandedKey, setExpandedKey] = useState(null)
+  // Which entity the pane is showing, or null for the status page. The tab
+  // already disambiguates models from backends, so the id alone is enough.
+  // In the URL for the same reasons as the two galleries: a model is linkable
+  // and Back leaves the detail rather than the page.
+  const selectedId = searchParams.get('sel')
+  const [collapsedGroups, setCollapsedGroups] = useState(() => new Set())
   // Filter state per tab. Persisted in the URL query so switching tabs
   // doesn't lose the filter the operator just set.
   const [modelsSearch, setModelsSearch] = useState(() => searchParams.get('mq') || '')
@@ -197,7 +196,7 @@ export default function Manage() {
 
   const handleTabChange = (tab) => {
     setActiveTab(tab)
-    setExpandedKey(null)
+    selectEntity(null)
     localStorage.setItem('manage-tab', tab)
     setSearchParams({ tab })
   }
@@ -206,7 +205,7 @@ export default function Manage() {
   // double as shortcuts to a filtered slice instead of being purely visual.
   const handleSummaryClick = (tab, filter) => {
     setActiveTab(tab)
-    setExpandedKey(null)
+    selectEntity(null)
     localStorage.setItem('manage-tab', tab)
     if (tab === 'models') setModelsFilter(filter)
     if (tab === 'backends') setBackendsFilter(filter)
@@ -215,10 +214,23 @@ export default function Manage() {
     setSearchParams(p, { replace: true })
   }
 
-  const toggleExpanded = (tab, id) => {
-    const key = `${tab}:${id}`
-    setExpandedKey(prev => (prev === key ? null : key))
-  }
+  const selectEntity = useCallback((id) => {
+    setSearchParams(prev => {
+      const next = new URLSearchParams(prev)
+      if (id) next.set('sel', id)
+      else next.delete('sel')
+      return next
+    }, { replace: !id })
+  }, [setSearchParams])
+
+  const toggleGroup = useCallback((id) => {
+    setCollapsedGroups(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
 
   const fetchLoadedModels = useCallback(async () => {
     try {
@@ -494,9 +506,30 @@ export default function Manage() {
   ).length
   const updatesCount = Object.keys(upgrades).length
 
+  // A backend is mid-flight if an operation names it, or if a reinstall was
+  // just fired from this page and the operation has not landed yet.
+  const isBackendProcessing = useCallback((backend) => {
+    const name = backend?.Name
+    if (!name) return false
+    if (reinstallingBackends.has(name)) return true
+    return operations.some(op => op.name === name && !op.completed && !op.error)
+  }, [reinstallingBackends, operations])
+
+  const selectedModel = selectedId && activeTab === 'models'
+    ? (models.find(m => m.id === selectedId) || null)
+    : null
+  const selectedBackend = selectedId && activeTab === 'backends'
+    ? (backends.find(b => b.Name === selectedId) || null)
+    : null
+
   return (
-    <div className="page page--wide">
-      <PageHeader title={t('manage.title')} supporting={t('manage.subtitle')} />
+    <div className="page page--wide page--app">
+      <div className="view-bar">
+        <h1 className="view-bar__title">{t('manage.title')}</h1>
+        <span className="view-bar__count">
+          {modelsLoading ? '—' : models.length} models · {backendsLoading ? '—' : backends.length} backends
+        </span>
+      </div>
 
       {/* Resource Monitor */}
       <ResourceMonitor />
@@ -566,14 +599,21 @@ export default function Manage() {
           onFilterChange={setModelsFilter}
           rightSlot={(
             <>
+              {/* A status line, not a control. It had picked up btn classes and
+                  two copies of `fas`, so it rendered as a button you cannot
+                  press next to a button that looked like text. */}
               {distributedMode && (
-                <span className={`cell-muted fas fa-rotate btn btn-secondary btn-sm fas ${reloading ? 'fa-spinner fa-spin' : 'fa-rotate'}`} title="Auto-refreshes every 10s in distributed mode so ghost models clear promptly">
-                  <i /> Last synced {lastSyncedAgo}
+                <span
+                  className="cell-muted text-xs nowrap"
+                  title="Auto-refreshes every 10s in distributed mode so ghost models clear promptly"
+                >
+                  <i className={`fas ${reloading ? 'fa-spinner fa-spin' : 'fa-rotate'} icon-before`} aria-hidden="true" />
+                  Last synced {lastSyncedAgo}
                 </span>
               )}
-              <button onClick={handleReload} disabled={reloading}>
-                <i />
-                {reloading ? ' Updating...' : ' Update'}
+              <button className="btn btn-secondary btn-sm" onClick={handleReload} disabled={reloading}>
+                <i className={`fas ${reloading ? 'fa-spinner fa-spin' : 'fa-rotate'}`} aria-hidden="true" />
+                {reloading ? 'Updating…' : 'Update'}
               </button>
             </>
           )}
@@ -582,13 +622,13 @@ export default function Manage() {
         {modelsLoading ? (
           <GalleryLoader />
         ) : models.length === 0 ? (
-          <div className="card loading-center text-center">
-            <i className="fas fa-exclamation-triangle" style={{ fontSize: '2rem', color: 'var(--color-warning)', marginBottom: 'var(--spacing-md)' }} />
-            <h3 className="mb-sm">No models installed yet</h3>
-            <p className="text-base text-secondary mb-md">
-              Install a model from the gallery to get started.
+          <div className="empty-state empty-state--page">
+            <div className="empty-state-icon"><i className="fas fa-brain" /></div>
+            <h2 className="empty-state-title">No models installed yet</h2>
+            <p className="empty-state-text">
+              Install a model from the gallery to get started, or import one you already have on disk.
             </p>
-            <div className="hstack hstack--center">
+            <div className="empty-state__actions">
               <button className="btn btn-primary btn-sm" onClick={() => navigate('/app/models')}>
                 <i className="fas fa-store" /> Browse Gallery
               </button>
@@ -607,140 +647,148 @@ export default function Manage() {
             <button className="btn btn-ghost btn-sm" onClick={() => { setModelsSearch(''); setModelsFilter('all') }}>Clear filters</button>
           </div>
         ) : (
-          <ResponsiveTable>
-              <thead>
-                <tr>
-                  <th className="col-w-30"></th>
-                  <th className="col-w-64"></th>
-                  <th>Model</th>
-                  <th>Status</th>
-                  <th>Backend</th>
-                  <th>Use cases</th>
-                  <th className="col-w-40"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {visibleModels.map(model => {
-                  const enriched = enrichModel(model.id)
-                  const isExpanded = expandedKey === `models:${model.id}`
-                  const isRunning = loadedModelIds.has(model.id) || (Array.isArray(model.loaded_on) && model.loaded_on.length > 0)
-                  const caps = Array.isArray(model.capabilities) ? model.capabilities : []
-                  const matchedCaps = USE_CASES.filter(uc => caps.includes(uc.cap) && !(uc.hideIf && caps.includes(uc.hideIf)))
-                  return (
-                    <ResourceRow
-                      key={model.id}
-                      expanded={isExpanded}
-                      onToggleExpand={() => toggleExpanded('models', model.id)}
-                      colSpan={MODELS_COLSPAN}
-                      dimmed={!!model.disabled}
-                      detail={(
-                        <ModelDetail
-                          model={model}
-                          enriched={enriched}
-                          matchedCaps={matchedCaps}
-                          distributedMode={distributedMode}
-                          onNavigate={navigate}
-                        />
-                      )}
-                    >
-                      <ChevronCell expanded={isExpanded} />
-                      <IconCell icon={enriched?.icon} fallback="fa-brain" alt="" />
-                      <td>
-                        <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
-                          <span style={{ fontWeight: 600, fontSize: 'var(--text-sm)' }}>{model.id}</span>
-                          {enriched?.description && (
-                            <ResourceRowDesc description={enriched.description} />
-                          )}
-                        </div>
-                      </td>
-                      <td>
-                        <div className="cell-stack">
-                          {model.disabled ? (
-                            <span className="badge chip-neutral">
-                              <i className="fas fa-ban" /> Disabled
-                            </span>
-                          ) : Array.isArray(model.loaded_on) && model.loaded_on.length > 0 ? (
-                            <NodeDistributionChip nodes={model.loaded_on} context="models" />
-                          ) : loadedModelIds.has(model.id) ? (
-                            <span className="badge badge-success">
-                              <i className="fas fa-circle" style={{ fontSize: '6px' }} /> Running
-                            </span>
-                          ) : (
-                            <span className="badge chip-neutral">
-                              <i className="fas fa-circle" style={{ fontSize: '6px' }} /> Idle
-                            </span>
-                          )}
-                          {model.source === 'registry-only' && (
-                            <span className="badge badge-warning" title="Discovered on a worker but not configured locally. Persist the config to make it permanent.">
-                              <i className="fas fa-ghost" /> Adopted
-                            </span>
-                          )}
-                          {model.pinned && (
-                            <span className="badge badge-warning" title="Pinned — won't be idle-unloaded">
-                              <i className="fas fa-thumbtack" /> Pinned
-                            </span>
-                          )}
-                          {aliasTargets[model.id] && (
-                            <span className="badge badge-info" title={`Alias -> ${aliasTargets[model.id]}`}>
-                              <i className="fas fa-arrow-right-arrow-left" /> alias -&gt; {aliasTargets[model.id]}
-                            </span>
-                          )}
-                        </div>
-                      </td>
-                      <td>
-                        <span className="badge badge-info">{model.backend || 'Auto'}</span>
-                      </td>
-                      <td>
-                        <div className="badge-row">
-                          {matchedCaps.length === 0 ? (
-                            <span className="cell-muted">—</span>
-                          ) : matchedCaps.map(uc => uc.route ? (
-                            <a
-                              key={uc.cap}
-                              href="#"
-                              onClick={(e) => { e.preventDefault(); e.stopPropagation(); navigate(uc.route(model.id)) }}
-                              className="badge badge-info badge-link"
-                            >{uc.label}</a>
-                          ) : (
-                            <span key={uc.cap} className="badge">{uc.label}</span>
-                          ))}
-                        </div>
-                      </td>
-                      <StopPropagationCell className="text-right">
+          <SplitView
+            testId="host"
+            detail={!!selectedModel}
+            rail={
+              <EntityRail
+                items={visibleModels.map(m => railItemForManagedModel(m, { loadedModelIds, enrichModel, loadingModels }))}
+                groups={MODEL_STATE_GROUPS}
+                grouped={!modelsSearch.trim()}
+                collapsedGroups={collapsedGroups}
+                onToggleGroup={toggleGroup}
+                selectedId={selectedId}
+                onSelect={selectEntity}
+                countLabel={`${visibleModels.length} of ${models.length}`}
+                ariaLabel="Installed models"
+                testId="host-rail"
+              />
+            }
+            pane={selectedModel ? (() => {
+              const enriched = enrichModel(selectedModel.id)
+              const caps = Array.isArray(selectedModel.capabilities) ? selectedModel.capabilities : []
+              const matchedCaps = USE_CASES.filter(uc => caps.includes(uc.cap) && !(uc.hideIf && caps.includes(uc.hideIf)))
+              const isRunning = loadedModelIds.has(selectedModel.id) || (Array.isArray(selectedModel.loaded_on) && selectedModel.loaded_on.length > 0)
+              return (
+                <div className="detail-pane">
+                  <DetailHeader
+                    testId="host"
+                    icon="fa-brain"
+                    name={selectedModel.id}
+                    lede={enriched?.description ? stripMarkdown(enriched.description).slice(0, 220) : null}
+                    ledeTitle={enriched?.description ? stripMarkdown(enriched.description) : null}
+                    onBack={() => selectEntity(null)}
+                    backLabel="All models"
+                    actions={
+                      <>
+                        {!selectedModel.disabled && !isRunning && (
+                          <button className="btn btn-primary btn-sm" onClick={() => handleLoadModel(selectedModel.id)} disabled={loadingModels.has(selectedModel.id)}>
+                            <i className="fas fa-bolt" /> {loadingModels.has(selectedModel.id) ? 'Loading…' : 'Load'}
+                          </button>
+                        )}
+                        {isRunning && (
+                          <button className="btn btn-secondary btn-sm" onClick={() => handleStopModel(selectedModel.id)}>
+                            <i className="fas fa-stop" /> Stop
+                          </button>
+                        )}
+                        {/* The rest stays behind a menu. Load/Stop is what an
+                            operator came for; everything else is occasional and
+                            would only dilute it. */}
                         <ActionMenu
-                          ariaLabel={`Actions for ${model.id}`}
-                          triggerLabel={`Actions for ${model.id}`}
+                          ariaLabel={`Actions for ${selectedModel.id}`}
+                          triggerLabel={`Actions for ${selectedModel.id}`}
                           items={[
-                            { key: 'toggle', icon: model.disabled ? 'fa-toggle-on' : 'fa-toggle-off',
-                              label: model.disabled ? 'Enable model' : 'Disable model',
-                              onClick: () => handleToggleModel(model.id, model.disabled),
-                              disabled: togglingModels.has(model.id) },
-                            { key: 'load', icon: 'fa-bolt',
-                              label: loadingModels.has(model.id) ? 'Loading…' : 'Load into memory',
-                              onClick: () => handleLoadModel(model.id),
-                              hidden: isRunning || !!model.disabled,
-                              disabled: loadingModels.has(model.id) },
-                            { key: 'stop', icon: 'fa-stop', label: 'Stop model',
-                              onClick: () => handleStopModel(model.id), hidden: !isRunning },
+                            { key: 'toggle', icon: selectedModel.disabled ? 'fa-toggle-on' : 'fa-toggle-off',
+                              label: selectedModel.disabled ? 'Enable model' : 'Disable model',
+                              onClick: () => handleToggleModel(selectedModel.id, selectedModel.disabled),
+                              disabled: togglingModels.has(selectedModel.id) },
                             { key: 'pin', icon: 'fa-thumbtack',
-                              label: model.pinned ? 'Unpin (allow idle unload)' : 'Pin (prevent idle unload)',
-                              onClick: () => handleTogglePinned(model.id, model.pinned),
-                              disabled: pinningModels.has(model.id) || !!model.disabled },
+                              label: selectedModel.pinned ? 'Unpin (allow idle unload)' : 'Pin (prevent idle unload)',
+                              onClick: () => handleTogglePinned(selectedModel.id, selectedModel.pinned),
+                              disabled: pinningModels.has(selectedModel.id) || !!selectedModel.disabled },
                             { key: 'edit', icon: 'fa-pen-to-square', label: 'Edit configuration',
-                              onClick: () => navigate(`/app/model-editor/${encodeURIComponent(model.id)}`, { state: fromState(location, t('manage.title')) }) },
+                              onClick: () => navigate(`/app/model-editor/${encodeURIComponent(selectedModel.id)}`, { state: fromState(location, t('manage.title')) }) },
                             { key: 'logs', icon: 'fa-terminal', label: 'Backend logs',
-                              onClick: () => navigate(`/app/backend-logs/${encodeURIComponent(model.id)}`) },
+                              onClick: () => navigate(`/app/backend-logs/${encodeURIComponent(selectedModel.id)}`) },
                             { divider: true },
                             { key: 'delete', icon: 'fa-trash', label: 'Delete model', danger: true,
-                              onClick: () => handleDeleteModel(model.id) },
+                              onClick: () => handleDeleteModel(selectedModel.id) },
                           ]}
                         />
-                      </StopPropagationCell>
-                    </ResourceRow>
-                  )
-                })}
-              </tbody>
-          </ResponsiveTable>
+                      </>
+                    }
+                  />
+
+                  <StatGrid
+                    stats={[
+                      { label: 'State',
+                        value: selectedModel.disabled ? 'Disabled' : isRunning ? 'Running' : 'Idle',
+                        tone: selectedModel.disabled ? undefined : isRunning ? 'ok' : undefined },
+                      { label: 'Backend', value: selectedModel.backend || 'Auto' },
+                      enriched?.estimated_vram_display && enriched.estimated_vram_display !== '0 B'
+                        ? { label: 'VRAM', value: enriched.estimated_vram_display } : null,
+                      selectedModel.pinned ? { label: 'Pinned', value: 'yes', tone: 'warn' } : null,
+                    ]}
+                  />
+
+                  {/* Adopted, pinned and alias are row badges that lost their
+                      cell. They are facts about the model, not about its state,
+                      so they sit under the numbers rather than in the rail. */}
+                  {(aliasTargets[selectedModel.id] || selectedModel.source === 'registry-only') && (
+                    <div className="badge-row">
+                      {selectedModel.source === 'registry-only' && (
+                        <span className="badge badge-warning" title="Discovered on a worker but not configured locally. Persist the config to make it permanent.">
+                          <i className="fas fa-ghost" /> Adopted
+                        </span>
+                      )}
+                      {aliasTargets[selectedModel.id] && (
+                        <span className="badge badge-info" title={`Alias -> ${aliasTargets[selectedModel.id]}`}>
+                          <i className="fas fa-arrow-right-arrow-left" /> alias -&gt; {aliasTargets[selectedModel.id]}
+                        </span>
+                      )}
+                    </div>
+                  )}
+
+                  {matchedCaps.length > 0 && (
+                    <div>
+                      <span className="detail-pane__label">Use cases</span>
+                      <div className="badge-row">
+                        {matchedCaps.map(uc => uc.route ? (
+                          <a
+                            key={uc.cap}
+                            href="#"
+                            onClick={(e) => { e.preventDefault(); navigate(uc.route(selectedModel.id)) }}
+                            className="badge badge-info badge-link"
+                          >{uc.label}</a>
+                        ) : (
+                          <span key={uc.cap} className="badge">{uc.label}</span>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  <ModelDetail
+                    model={selectedModel}
+                    enriched={enriched}
+                    matchedCaps={matchedCaps}
+                    distributedMode={distributedMode}
+                    onNavigate={navigate}
+                  />
+                </div>
+              )
+            })() : (
+              <HostStatusPane
+                models={models}
+                backends={backends}
+                loadedModelIds={loadedModelIds}
+                upgrades={upgrades}
+                operations={operations}
+                enrichModel={enrichModel}
+                onJump={handleSummaryClick}
+              />
+            )}
+          />
+
         )}
       </div>
         )
@@ -774,13 +822,13 @@ export default function Manage() {
         {backendsLoading ? (
           <GalleryLoader />
         ) : backends.length === 0 ? (
-          <div className="card loading-center text-center">
-            <i className="fas fa-server" style={{ fontSize: '2rem', color: 'var(--color-text-muted)', marginBottom: 'var(--spacing-md)' }} />
-            <h3 className="mb-sm">No backends installed yet</h3>
-            <p className="text-base text-secondary mb-md">
-              Install backends from the gallery to extend functionality.
+          <div className="empty-state empty-state--page">
+            <div className="empty-state-icon"><i className="fas fa-server" /></div>
+            <h2 className="empty-state-title">No backends installed yet</h2>
+            <p className="empty-state-text">
+              A backend is the runtime that actually runs a model. Install one from the gallery to give this host something to run with.
             </p>
-            <div className="hstack hstack--center">
+            <div className="empty-state__actions">
               <button className="btn btn-primary btn-sm" onClick={() => navigate('/app/backends')}>
                 <i className="fas fa-server" /> Browse Backend Gallery
               </button>
@@ -908,136 +956,48 @@ export default function Manage() {
           return (
           <>
             {filterBar}
-            <ResponsiveTable>
-              <thead>
-                <tr>
-                  <th className="col-w-30"></th>
-                  <th className="col-w-64"></th>
-                  <th>Backend</th>
-                  <th>Version</th>
-                  {distributedMode && <th>Nodes</th>}
-                  <th>Installed</th>
-                  <th className="col-w-40"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {visibleBackends.map((backend) => {
-                  const upgradeInfo = upgrades[backend.Name]
-                  const hasDrift = upgradeInfo?.node_drift?.length > 0
-                  const nodes = backend.Nodes || backend.nodes || []
-                  const enriched = enrichBackend(backend.Name)
-                  const isExpanded = expandedKey === `backends:${backend.Name}`
-                  const isDevelopment = !!(enriched?.isDevelopment)
-                  const isProcessing = reinstallingBackends.has(backend.Name)
-                  return (
-                    <ResourceRow
-                      key={backend.Name}
-                      expanded={isExpanded}
-                      onToggleExpand={() => toggleExpanded('backends', backend.Name)}
-                      colSpan={colSpan}
-                      detail={(
-                        <BackendDetail
-                          backend={backend}
-                          enriched={enriched}
-                          upgradeInfo={upgradeInfo}
-                          nodes={nodes}
-                          distributedMode={distributedMode}
-                        />
-                      )}
-                    >
-                      <ChevronCell expanded={isExpanded} />
-                      <IconCell icon={enriched?.icon} fallback="fa-cogs" alt="" />
-                      <td>
-                        <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
-                          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)', flexWrap: 'wrap' }}>
-                            <span style={{ fontWeight: 600, fontSize: 'var(--text-sm)' }}>{backend.Name}</span>
-                            <MetaBadgeRow
-                              isSystem={!!backend.IsSystem}
-                              isMeta={!!backend.IsMeta}
-                              isDevelopment={isDevelopment}
-                            />
-                            {backend.Metadata?.alias && backend.Metadata.alias !== backend.Name && (
-                              <span className="cell-subtle" style={{ marginLeft: 0 }}>· alias {backend.Metadata.alias}</span>
-                            )}
-                            {backend.Metadata?.meta_backend_for && (
-                              <span className="cell-subtle" style={{ marginLeft: 0 }}>· for {backend.Metadata.meta_backend_for}</span>
-                            )}
-                          </div>
-                          {(enriched?.description) && (
-                            <ResourceRowDesc description={enriched.description} />
-                          )}
-                        </div>
-                      </td>
-                      <td>
-                        {(() => {
-                          const v = formatBackendVersion(backend.Metadata)
-                          return (
-                            <div className="cell-stack">
-                              <span className="cell-mono" title={v.full || undefined}>{v.label}</span>
-                              {upgradeInfo && (
-                                <span className="badge badge-warning" title={upgradeInfo.available_version ? `Upgrade to v${upgradeInfo.available_version}` : 'Update available'}>
-                                  <i className="fas fa-arrow-up" />
-                                  {upgradeInfo.available_version ? ` v${upgradeInfo.available_version}` : ' Update'}
-                                </span>
-                              )}
-                              {hasDrift && (
-                                <span
-                                  className="badge badge-warning"
-                                  title={`Drift: ${upgradeInfo.node_drift.map(d => `${d.node_name}${d.version ? ' v' + d.version : ''}`).join(', ')}`}
-                                >
-                                  <i className="fas fa-code-branch" />
-                                  {' '}Drift: {upgradeInfo.node_drift.length} node{upgradeInfo.node_drift.length === 1 ? '' : 's'}
-                                </span>
-                              )}
-                            </div>
-                          )
-                        })()}
-                      </td>
-                      {distributedMode && (
-                        <td>
-                          <NodeDistributionChip nodes={nodes} context="backends" />
-                        </td>
-                      )}
-                      <td>
-                        <span
-                          className="cell-muted cell-mono"
-                          title={backend.Metadata?.installed_at ? formatInstalledAtFull(backend.Metadata.installed_at) : undefined}
-                        >
-                          {backend.Metadata?.installed_at ? formatInstalledAt(backend.Metadata.installed_at) : '—'}
-                        </span>
-                      </td>
-                      <StopPropagationCell className="text-right">
-                        {backend.IsSystem ? (
-                          <span className="badge" title="System backends are managed outside the gallery">
-                            <i className="fas fa-lock" /> Protected
-                          </span>
-                        ) : (
-                          <ActionMenu
-                            ariaLabel={`Actions for ${backend.Name}`}
-                            triggerLabel={`Actions for ${backend.Name}`}
-                            items={[
-                              { key: 'upgrade', icon: 'fa-arrow-up',
-                                label: upgradeInfo?.available_version ? `Upgrade to v${upgradeInfo.available_version}` : 'Upgrade',
-                                onClick: () => handleUpgradeBackend(backend.Name),
-                                disabled: isProcessing,
-                                hidden: !upgradeInfo },
-                              { key: 'reinstall', icon: 'fa-rotate', label: 'Reinstall backend',
-                                onClick: () => handleReinstallBackend(backend.Name),
-                                disabled: isProcessing },
-                              { divider: true },
-                              { key: 'delete', icon: 'fa-trash',
-                                label: 'Delete backend',
-                                danger: true,
-                                onClick: () => handleDeleteBackend(backend.Name) },
-                            ]}
-                          />
-                        )}
-                      </StopPropagationCell>
-                    </ResourceRow>
-                  )
-                })}
-              </tbody>
-            </ResponsiveTable>
+            <SplitView
+              testId="host"
+              detail={!!selectedBackend}
+              rail={
+                <EntityRail
+                  items={visibleBackends.map(b => railItemForManagedBackend(b, { upgrades, isBackendProcessing }))}
+                  groups={BACKEND_STATE_GROUPS}
+                  grouped={!backendsSearch.trim()}
+                  collapsedGroups={collapsedGroups}
+                  onToggleGroup={toggleGroup}
+                  selectedId={selectedId}
+                  onSelect={selectEntity}
+                  countLabel={`${visibleBackends.length} of ${backends.length}`}
+                  ariaLabel="Installed backends"
+                  testId="host-rail"
+                />
+              }
+              pane={selectedBackend ? (
+                <ManagedBackendPane
+                  backend={selectedBackend}
+                  enriched={enrichBackend(selectedBackend.Name)}
+                  upgradeInfo={upgrades[selectedBackend.Name]}
+                  processing={isBackendProcessing(selectedBackend)}
+                  distributedMode={distributedMode}
+                  onBack={() => selectEntity(null)}
+                  onUpgrade={handleUpgradeBackend}
+                  onReinstall={handleReinstallBackend}
+                  onDelete={handleDeleteBackend}
+                />
+              ) : (
+                <HostStatusPane
+                  models={models}
+                  backends={backends}
+                  loadedModelIds={loadedModelIds}
+                  upgrades={upgrades}
+                  operations={operations}
+                  enrichModel={enrichModel}
+                  onJump={handleSummaryClick}
+                />
+              )}
+            />
+
           </>
           )
         })()}
@@ -1295,3 +1255,217 @@ function BackendDetail({ backend, enriched, upgradeInfo, nodes, distributedMode
     </div>
   )
 }
+
+// State groups. An inventory is read by condition before it is read by name, so
+// the rail is bucketed by what a thing is doing rather than by what it is for.
+// That is the opposite of the galleries, and deliberately so: nobody opens Host
+// wondering which of their models does vision.
+const MODEL_STATE_GROUPS = [
+  { id: 'running', label: 'Running', icon: 'fa-circle-play' },
+  { id: 'idle', label: 'Idle', icon: 'fa-pause' },
+  { id: 'disabled', label: 'Disabled', icon: 'fa-ban' },
+]
+
+const BACKEND_STATE_GROUPS = [
+  { id: 'update', label: 'Update available', icon: 'fa-arrow-up' },
+  { id: 'installed', label: 'Installed', icon: 'fa-check' },
+]
+
+function railItemForManagedModel(model, { loadedModelIds, enrichModel, loadingModels }) {
+  const running = loadedModelIds.has(model.id) || (Array.isArray(model.loaded_on) && model.loaded_on.length > 0)
+  const enriched = enrichModel(model.id)
+  const vram = enriched?.estimated_vram_display
+  const hasVram = vram && vram !== '0 B'
+
+  let groupId = 'idle'
+  let stripe = 'idle'
+  let meta = hasVram ? `idle · ${vram}` : 'idle'
+  let metaTone
+
+  if (model.disabled) {
+    groupId = 'disabled'
+    stripe = 'off'
+    meta = 'disabled'
+  } else if (loadingModels.has(model.id)) {
+    groupId = 'idle'
+    stripe = 'idle'
+    meta = 'loading…'
+    metaTone = 'busy'
+  } else if (running) {
+    groupId = 'running'
+    stripe = 'run'
+    meta = hasVram ? `running · ${vram}` : 'running'
+    metaTone = 'ok'
+  }
+
+  return { id: model.id, name: model.id, icon: 'fa-brain', meta, metaTone, stripe, groupId }
+}
+
+function railItemForManagedBackend(backend, { upgrades, isBackendProcessing }) {
+  const name = backend.Name
+  const upgrade = upgrades[name]
+  const version = backend.Metadata?.version || backend.Version
+
+  let groupId = 'installed'
+  let stripe = 'idle'
+  let meta = version ? `v${version}` : 'installed'
+  let metaTone
+
+  if (isBackendProcessing(backend)) {
+    meta = 'working…'
+    metaTone = 'busy'
+  } else if (upgrade) {
+    groupId = 'update'
+    stripe = 'err'
+    meta = upgrade.available_version ? `v${version} → v${upgrade.available_version}` : 'update available'
+    metaTone = 'warn'
+  }
+
+  return { id: name, name, icon: 'fa-server', meta, metaTone, stripe, groupId }
+}
+
+// ManagedBackendPane is the detail for one installed backend. System backends
+// keep their protection: they are managed outside the gallery, so the pane
+// states that rather than offering actions that would fail.
+function ManagedBackendPane({ backend, enriched, upgradeInfo, processing, distributedMode, onBack, onUpgrade, onReinstall, onDelete }) {
+  const name = backend.Name
+  const version = backend.Metadata?.version || backend.Version
+  return (
+    <div className="detail-pane">
+      <DetailHeader
+        testId="host"
+        icon="fa-server"
+        name={name}
+        lede={enriched?.description ? stripMarkdown(enriched.description).slice(0, 220) : null}
+        ledeTitle={enriched?.description ? stripMarkdown(enriched.description) : null}
+        onBack={onBack}
+        backLabel="All backends"
+        actions={
+          backend.IsSystem ? (
+            <span className="badge" title="System backends are managed outside the gallery">
+              <i className="fas fa-lock" /> Protected
+            </span>
+          ) : (
+            <>
+              {upgradeInfo && (
+                <button className="btn btn-primary btn-sm" onClick={() => onUpgrade(name)} disabled={processing}>
+                  <i className="fas fa-arrow-up" /> {upgradeInfo.available_version ? `Upgrade to v${upgradeInfo.available_version}` : 'Upgrade'}
+                </button>
+              )}
+              <ActionMenu
+                ariaLabel={`Actions for ${name}`}
+                triggerLabel={`Actions for ${name}`}
+                items={[
+                  { key: 'reinstall', icon: 'fa-rotate', label: 'Reinstall backend',
+                    onClick: () => onReinstall(name), disabled: processing },
+                  { divider: true },
+                  { key: 'delete', icon: 'fa-trash', label: 'Delete backend', danger: true,
+                    onClick: () => onDelete(name) },
+                ]}
+              />
+            </>
+          )
+        }
+      />
+
+      <StatGrid
+        stats={[
+          { label: 'Version', value: version ? `v${version}` : '—' },
+          upgradeInfo ? { label: 'Available', value: upgradeInfo.available_version ? `v${upgradeInfo.available_version}` : 'update', tone: 'warn' } : null,
+          { label: 'Managed', value: backend.IsSystem ? 'system' : 'gallery' },
+        ]}
+      />
+
+      <BackendDetail
+        backend={backend}
+        enriched={enriched}
+        upgradeInfo={upgradeInfo}
+        nodes={backend.nodes}
+        distributedMode={distributedMode}
+      />
+    </div>
+  )
+}
+
+// HostStatusPane is the pane with nothing selected.
+//
+// Nobody opens Host to discover anything, so the zero state is not a catalog
+// front page: it is the answer to the question people actually arrive with.
+// What is loaded, what is stale, and what fell over. Every number here already
+// existed on the page; none of them had been assembled into one statement.
+function HostStatusPane({ models, backends, loadedModelIds, upgrades, operations, enrichModel, onJump }) {
+  const running = models.filter(m => !m.disabled && (loadedModelIds.has(m.id) || (Array.isArray(m.loaded_on) && m.loaded_on.length > 0)))
+  const disabled = models.filter(m => m.disabled)
+  const idle = models.length - running.length - disabled.length
+  const staleNames = Object.keys(upgrades)
+  // Failures are kept in the operations list on purpose so they can be seen and
+  // dismissed; unseen is exactly what a red badge in a scrolled-off row was.
+  const failures = operations.filter(op => op.error)
+
+  return (
+    <div className="zero-pane">
+      <div className="zero-pane__hero">
+        <span className="zero-pane__eyebrow">Right now</span>
+        <h2 className="zero-pane__title">
+          {running.length === 0
+            ? `Nothing loaded. ${models.length} models and ${backends.length} backends installed.`
+            : `${running.length} of ${models.length} models loaded, ${backends.length} backends installed.`}
+        </h2>
+        <p className="zero-pane__text">Pick anything on the left to load it, stop it, or see its configuration.</p>
+      </div>
+
+      {failures.length > 0 && (
+        <div className="zero-pane__alert zero-pane__alert--bad" role="status">
+          <i className="fas fa-circle-exclamation" aria-hidden="true" />
+          <span>
+            {failures.length === 1 ? '1 operation failed' : `${failures.length} operations failed`}
+            {': '}{failures.slice(0, 2).map(op => op.name).join(', ')}{failures.length > 2 ? '…' : ''}
+          </span>
+        </div>
+      )}
+
+      {staleNames.length > 0 && (
+        <div className="zero-pane__alert zero-pane__alert--warn">
+          <i className="fas fa-arrow-up" aria-hidden="true" />
+          <span>
+            {staleNames.length === 1 ? '1 backend has an update' : `${staleNames.length} backends have updates`}
+            {': '}{staleNames.slice(0, 3).join(', ')}{staleNames.length > 3 ? '…' : ''}
+          </span>
+          <button className="btn btn-secondary btn-sm" onClick={() => onJump('backends', 'updates')}>
+            Review
+          </button>
+        </div>
+      )}
+
+      <StatGrid
+        stats={[
+          { label: 'Loaded', value: running.length, tone: running.length > 0 ? 'ok' : undefined },
+          { label: 'Idle', value: idle },
+          { label: 'Disabled', value: disabled.length },
+          { label: 'Updates', value: staleNames.length, tone: staleNames.length > 0 ? 'warn' : undefined },
+        ]}
+      />
+
+      {running.length > 0 && (
+        <div className="zero-pane__shelf">
+          <div className="zero-pane__shelf-head">
+            <h3 className="zero-pane__shelf-title">Loaded now</h3>
+            <span className="zero-pane__shelf-meta">estimated VRAM</span>
+          </div>
+          <div className="rowlist">
+            {running.slice(0, 6).map(m => {
+              const vram = enrichModel(m.id)?.estimated_vram_display
+              return (
+                <div className="rowline" key={m.id}>
+                  <span className="badge badge-success"><i className="fas fa-circle icon-tiny" /> running</span>
+                  <span>{m.id}</span>
+                  <span className="cell-mono cell-muted rowline__num">{vram && vram !== '0 B' ? vram : '—'}</span>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/pages/Models.jsx b/core/http/react-ui/src/pages/Models.jsx
index f7491805a2b7..9820705f38f6 100644
--- a/core/http/react-ui/src/pages/Models.jsx
+++ b/core/http/react-ui/src/pages/Models.jsx
@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
-import { useNavigate, useOutletContext, useLocation } from 'react-router-dom'
+import { useNavigate, useOutletContext, useLocation, useSearchParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { fromState } from '../utils/editorNav'
 import { modelsApi } from '../utils/api'
@@ -12,14 +12,20 @@ import PageHeader from '../components/PageHeader'
 import ConfirmDialog from '../components/ConfirmDialog'
 import GalleryLoader from '../components/GalleryLoader'
 import Toggle from '../components/Toggle'
-import ResponsiveTable from '../components/ResponsiveTable'
 import RecommendedModels from '../components/RecommendedModels'
-import Popover from '../components/Popover'
+import SplitView from '../components/split/SplitView'
+import EntityRail from '../components/split/EntityRail'
+import DetailHeader from '../components/split/DetailHeader'
+import StatGrid from '../components/split/StatGrid'
 import { formatBytes } from '../utils/format'
+import { groupForEntity } from '../utils/entityGroups'
 import { renderMarkdown, stripMarkdown } from '../utils/markdown'
 import React from 'react'
 
 
+const CHART_HEIGHT = 96
+const CHART_LABEL_ROOM = 15
+
 const CONTEXT_SIZES = [8192, 16384, 32768, 65536, 131072, 262144]
 const CONTEXT_LABELS = ['8K', '16K', '32K', '64K', '128K', '256K']
 const FITS_FILTER_STORAGE_KEY = 'localai-models-fits-filter'
@@ -73,6 +79,26 @@ const FILTERS = [
   { key: 'token_classify', labelKey: 'filters.ner', icon: 'fa-tags' },
 ]
 
+// The chips grouped, using the families the rest of the UI already speaks. The
+// unlabelled first section holds "All" on its own, because it is a reset rather
+// than a use case and grouping it under a heading would imply otherwise.
+const FILTER_SECTIONS = [
+  { id: 'all', labelKey: null, keys: [''] },
+  { id: 'text', labelKey: 'groups.text', icon: 'fa-brain', pick: 'chat',
+    blurbKey: 'shelves.pickText',
+    keys: ['chat', 'embeddings', 'rerank', 'token_classify'] },
+  { id: 'vision', labelKey: 'groups.vision', icon: 'fa-eye', pick: 'vision',
+    blurbKey: 'shelves.pickVision',
+    keys: ['vision', 'multimodal', 'detection'] },
+  { id: 'audio', labelKey: 'groups.audio', icon: 'fa-wave-square', pick: 'tts',
+    blurbKey: 'shelves.pickAudio',
+    keys: ['tts', 'transcript', 'diarization', 'sound_classification',
+      'sound_generation', 'audio_transform', 'realtime_audio', 'vad'] },
+  { id: 'visual', labelKey: 'groups.visual', icon: 'fa-image', pick: 'image',
+    blurbKey: 'shelves.pickVisual',
+    keys: ['image', 'video', '3d'] },
+]
+
 export default function Models() {
   const { addToast } = useOutletContext()
   const navigate = useNavigate()
@@ -89,8 +115,13 @@ export default function Models() {
   const [sort, setSort] = useState('')
   const [order, setOrder] = useState('asc')
   const [installing, setInstalling] = useState(new Map())
-  const [expandedRow, setExpandedRow] = useState(null)
   const [expandedFiles, setExpandedFiles] = useState(false)
+  // Which model the pane is showing, or null for the discovery shelves. It
+  // lives in the URL so a model is linkable and so Back steps out of the detail
+  // rather than off the page, which is the one thing the expanded row could
+  // never do.
+  const [searchParams, setSearchParams] = useSearchParams()
+  const selectedName = searchParams.get('model')
   const [stats, setStats] = useState({ total: 0, installed: 0, repositories: 0 })
   // Distinguishes "nothing installed" from "not asked yet". The recommendations
   // panel defaults off the installed count, so it must not read the initial 0.
@@ -101,10 +132,6 @@ export default function Models() {
   const [estimates, setEstimates] = useState({})
   const [contextSize, setContextSize] = useState(CONTEXT_SIZES[0])
   const [confirmDialog, setConfirmDialog] = useState(null)
-  // Index of the row whose variant split-menu is open, or null. A single
-  // Popover is re-anchored per row rather than one instance per row.
-  const [variantMenuFor, setVariantMenuFor] = useState(null)
-  const variantMenuAnchorRef = useRef(null)
   // Variant descriptions, keyed by model name. The listing only tells us
   // whether an entry declares any; describing them costs the server a network
   // probe per variant, so we ask for one entry at a time and keep the answer
@@ -127,8 +154,16 @@ export default function Models() {
   // because the listing paginates and a client-side narrowing would leave the
   // page count describing the unfiltered set.
   const [collapseVariants, setCollapseVariants] = useState(readCollapseVariantsPreference)
+  // The use-case chips do not fit beside a 320px rail, so they live in a
+  // popover that states the current selection rather than spelling out
+  // nineteen options nobody is reading.
+  const [useCaseOpen, setUseCaseOpen] = useState(false)
   // Total GPU memory for "fits" check
   const totalGpuMemory = resources?.aggregate?.total_memory || 0
+  // gpu_count is 0 and gpus is null on a CPU-only host, where total_memory is
+  // system RAM. The fits check has always used it either way; only the copy
+  // has to stop calling it VRAM.
+  const hasGpu = (resources?.aggregate?.gpu_count || 0) > 0 || (resources?.gpus?.length || 0) > 0
 
   const fetchModels = useCallback(async (params = {}) => {
     try {
@@ -377,6 +412,12 @@ export default function Models() {
     }
   }, [collapseVariants])
 
+  const useCaseLabel = filters.length === 0
+    ? t('filters.all')
+    : filters.length === 1
+      ? t(FILTERS.find(f => f.key === filters[0])?.labelKey || 'filters.all')
+      : t('filters.someSelected', { count: filters.length })
+
   const visibleModels = models.filter((model) => {
     if (!fitsFilter) return true
     const name = model.name || model.id
@@ -386,36 +427,47 @@ export default function Models() {
     return fit !== false
   })
 
-  return (
-    <div className="page page--wide">
-      <PageHeader
-        title={t('title')}
-        supporting={t('subtitle')}
-        actions={
-          <div style={{ display: 'flex', gap: 'var(--spacing-md)', alignItems: 'center' }}>
-            <div style={{ display: 'flex', gap: 'var(--spacing-md)', fontSize: '0.8125rem' }}>
-              <div style={{ textAlign: 'center' }}>
-                <div style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-primary)' }}>{stats.total}</div>
-                <div style={{ color: 'var(--color-text-muted)' }}>{t('stats.available')}</div>
-              </div>
-              <div style={{ textAlign: 'center' }}>
-                <a onClick={() => navigate('/app/manage')} style={{ cursor: 'pointer' }}>
-                  <div style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-success)' }}>{stats.installed}</div>
-                  <div style={{ color: 'var(--color-text-muted)' }}>{t('stats.installed')}</div>
-                </a>
-              </div>
-            </div>
-            <button className="btn btn-primary btn-sm" onClick={() => navigate('/app/model-editor', { state: fromState(location, t('models')) })}>
-              <i className="fas fa-plus" /> {t('actions.addModel')}
-            </button>
-            <button className="btn btn-secondary btn-sm" onClick={() => navigate('/app/import-model')}>
-              <i className="fas fa-upload" /> {t('actions.importModel')}
-            </button>
-          </div>
-        }
-      />
+  const selectedModel = selectedName
+    ? visibleModels.find(m => (m.name || m.id) === selectedName) || null
+    : null
+
+  const selectModel = useCallback((name) => {
+    setSearchParams(prev => {
+      const next = new URLSearchParams(prev)
+      if (name) next.set('model', name)
+      else next.delete('model')
+      return next
+    // Returning to the shelves replaces the entry rather than pushing one, so
+    // Back leaves the gallery instead of bouncing between the two pane states.
+    }, { replace: !name })
+    setExpandedFiles(false)
+  }, [setSearchParams])
+
+  // The detail pane lists variants, so opening a model is the ask that pays for
+  // the describe call. loadVariants is idempotent per name.
+  useEffect(() => {
+    if (selectedModel?.has_variants) loadVariants(selectedName)
+  }, [selectedName, selectedModel, loadVariants])
 
-      <RecommendedModels addToast={addToast} installedCount={statsLoaded ? stats.installed : null} />
+  return (
+    <div className="page page--wide page--app">
+      {/* Title only. The two counts used to live here as well, which meant the
+          screen stated "1,247 available" three times: once in this header, once
+          as the rail's "9 of 1,247", and once in the pane's own headline. The
+          rail and the pane are describing what you are looking at; the header
+          was just repeating them from a distance. */}
+      <div className="view-bar">
+        <h1 className="view-bar__title">{t('title')}</h1>
+        <span className="view-bar__count">{t('rail.showingCount', { shown: visibleModels.length, total: stats.total })}</span>
+        <div className="view-bar__actions">
+          <button className="btn btn-secondary btn-sm" onClick={() => navigate('/app/model-editor', { state: fromState(location, t('models')) })}>
+            <i className="fas fa-plus" /> {t('actions.addModel')}
+          </button>
+          <button className="btn btn-secondary btn-sm" onClick={() => navigate('/app/import-model')}>
+            <i className="fas fa-upload" /> {t('actions.importModel')}
+          </button>
+        </div>
+      </div>
 
       {/* Filters, in three deliberate bands.
           1. Query scope: free-text search plus the backend select. The backend
@@ -432,373 +484,272 @@ export default function Models() {
              fits filter tests against.
           Each band owns its container, so how many chips happen to wrap at a
           given width can no longer decide where the other controls land. */}
-      <div className="filter-bar-group models-filters">
-        <div className="filter-bar-group__row models-filters__query">
-          <div className="search-bar filter-bar-group__search">
-            <i className="fas fa-search search-icon" aria-hidden="true" />
-            <input
-              className="input"
-              type="text"
-              placeholder={t('search.placeholder')}
-              aria-label={t('search.placeholder')}
-              value={search}
-              onChange={(e) => handleSearch(e.target.value)}
-            />
-          </div>
-          {allBackends.length > 0 && (
-            <div className="models-filters__backend">
-              <SearchableSelect
-                value={backendFilter}
-                onChange={(v) => { setBackendFilter(v); setPage(1) }}
-                options={allBackends}
-                placeholder={t('filters.allBackends')}
-                allOption={t('filters.allBackends')}
-                searchPlaceholder={t('filters.searchBackends')}
-              />
-            </div>
-          )}
-        </div>
 
-        <div className="filter-bar" role="group" aria-label={t('filters.useCaseLabel')}>
-          {FILTERS.map(f => {
-            const isAll = f.key === ''
-            const active = isAll ? filters.length === 0 : filters.includes(f.key)
-            const available = isFilterAvailable(f.key)
-            return (
-              <button
-                key={f.key}
-                type="button"
-                className={`filter-btn ${active ? 'active' : ''}`}
-                disabled={!available}
-                aria-pressed={active}
-                title={!available ? t('filters.unavailableForBackend') : undefined}
-                onClick={() => toggleFilter(f.key)}
-              >
-                <i className={`fas ${f.icon}`} aria-hidden="true" style={{ marginRight: 4 }} />
-                {t(f.labelKey)}
-              </button>
-            )
-          })}
-        </div>
-
-        <div className="models-filters__refine" data-testid="models-filters-refine">
-          {/* Leads the band because it decides how many rows the other two
-              refine over, and because unlike fits-in-GPU it is always present:
-              a host with no GPU still browses builds. Turning it off is the
-              only way to page through every build the gallery holds; searching
-              reaches a specific one but cannot enumerate them. */}
-          <label className="filter-bar-group__toggle" data-testid="models-collapse-variants">
-            <Toggle
-              checked={collapseVariants}
-              onChange={(v) => { setCollapseVariants(v); setPage(1) }}
-            />
-            <i className="fas fa-layer-group" aria-hidden="true" />
-            <span>{t('filters.collapseVariants')}</span>
-          </label>
-          {totalGpuMemory > 0 && (
-            <label className="filter-bar-group__toggle">
-              <Toggle checked={fitsFilter} onChange={setFitsFilter} />
-              <i className="fas fa-microchip" aria-hidden="true" />
-              <span>{t('filters.fitsGpu')}</span>
-            </label>
-          )}
-          <div className="models-filters__context">
-            <label htmlFor="models-context-size">
-              <i className="fas fa-memory" aria-hidden="true" />
-              {t('filters.contextSize')}
-            </label>
-            <input
-              id="models-context-size"
-              type="range"
-              min={0}
-              max={CONTEXT_SIZES.length - 1}
-              value={CONTEXT_SIZES.indexOf(contextSize)}
-              // The slider steps over an index, so the raw value ("2") is
-              // meaningless to a screen reader; announce the size instead.
-              aria-valuetext={CONTEXT_LABELS[CONTEXT_SIZES.indexOf(contextSize)]}
-              onChange={(e) => setContextSize(CONTEXT_SIZES[e.target.value])}
-            />
-            <span className="models-filters__context-value">
-              {CONTEXT_LABELS[CONTEXT_SIZES.indexOf(contextSize)]}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      {/* Table */}
+      {/* The gallery, as a rail to scan and a pane that answers.
+          The pane has two jobs and no third: with nothing selected it is the
+          discovery page, and with a model selected it is that model's detail.
+          This is what replaces the click-to-expand row, which existed only
+          because variants, files and a VRAM estimate never fitted inside a
+          <tr> in the first place. */}
       {loading ? (
         <GalleryLoader />
-      ) : visibleModels.length === 0 ? (
-        <div className="empty-state">
-          <div className="empty-state-icon"><i className="fas fa-search" /></div>
-          <h2 className="empty-state-title">{t('empty.title')}</h2>
-          <p className="empty-state-text">
-            {search || filters.length > 0 || backendFilter || fitsFilter || !collapseVariants ? t('empty.withFilters') : t('empty.noFilters')}
-          </p>
-          {/* Only the fits filter can leave the collapse to blame. The term,
-              the chips and the backend are applied server-side over every build
-              the gallery holds, and a match there is always reported as some
-              row, so those three can no longer come back empty on account of
-              the collapse. Fits runs here in the browser, after the server
-              substituted a matching build for the entry that offers it, and
-              judges that entry's own size: the build that fits can still be
-              filtered out along with a parent that does not. */}
-          {collapseVariants && fitsFilter && (
-            <p className="empty-state-hint">{t('empty.collapsedVariantsHint')}</p>
-          )}
-          {(search || filters.length > 0 || backendFilter || fitsFilter || !collapseVariants) && (
-            <button
-              className="btn btn-secondary btn-sm"
-              onClick={() => { handleSearch(''); setFilters([]); setBackendFilter(''); setFitsFilter(false); setCollapseVariants(COLLAPSE_VARIANTS_DEFAULT); setPage(1) }}
-            >
-              <i className="fas fa-times" /> {t('search.clearFilters')}
-            </button>
-          )}
-        </div>
       ) : (
-        <ResponsiveTable containerStyle={{ background: 'var(--color-bg-secondary)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }} style={{ minWidth: '800px' }}>
-              <thead>
-                <tr>
-                  <th style={{ width: '30px' }}></th>
-                  <th style={{ width: '60px' }}></th>
-                  <th style={{ cursor: 'pointer' }} onClick={() => handleSort('name')}>
-                    {t('table.modelName')} {sort === 'name' && <i className={`fas fa-arrow-${order === 'asc' ? 'up' : 'down'}`} style={{ fontSize: '0.625rem' }} />}
-                  </th>
-                  <th>{t('table.description')}</th>
-                  <th>{t('table.backend')}</th>
-                  <th>{t('table.sizeVram')}</th>
-                  <th style={{ cursor: 'pointer' }} onClick={() => handleSort('status')}>
-                    {t('table.status')} {sort === 'status' && <i className={`fas fa-arrow-${order === 'asc' ? 'up' : 'down'}`} style={{ fontSize: '0.625rem' }} />}
-                  </th>
-                  <th style={{ textAlign: 'right' }}>{t('table.actions')}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {visibleModels.map((model, idx) => {
-                  const name = model.name || model.id
-                  const estData = estimates[name]
-                  const sizeDisplay = estData?.sizeDisplay
-                  const ctxEst = estData?.estimates?.[String(contextSize)]
-                  const vramDisplay = ctxEst?.vramDisplay
-                  const vramBytes = ctxEst?.vramBytes
-                  const installing = isInstalling(name)
-                  const progress = getOperationProgress(name)
-                  const fit = fitsGpu(vramBytes)
-                  const isExpanded = expandedRow === idx
-                  const hasVariants = !!model.has_variants
-
-                  return (
-                    <React.Fragment key={name}>
-                    <tr
-                      onClick={() => {
-                        if (!isExpanded && hasVariants) loadVariants(name)
-                        setExpandedRow(isExpanded ? null : idx)
-                        setExpandedFiles(false)
-                      }}
-                      style={{ cursor: 'pointer' }}
-                    >
-                      {/* Chevron */}
-                      <td style={{ width: 30 }}>
-                        <i className={`fas fa-chevron-${isExpanded ? 'down' : 'right'}`} style={{ fontSize: '0.625rem', color: 'var(--color-text-muted)', transition: 'transform 150ms' }} />
-                      </td>
-                      {/* Icon */}
-                      <td>
-                        <div style={{
-                          width: 48, height: 48, borderRadius: 'var(--radius-md)',
-                          border: '1px solid var(--color-border-subtle)',
-                          display: 'flex', alignItems: 'center', justifyContent: 'center',
-                          background: 'var(--color-bg-primary)', overflow: 'hidden',
-                        }}>
-                          {model.icon ? (
-                            <img src={model.icon} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} loading="lazy" />
-                          ) : (
-                            <i className="fas fa-brain" style={{ fontSize: '1.25rem', color: 'var(--color-accent)' }} />
-                          )}
-                        </div>
-                      </td>
-
-                      {/* Name */}
-                      <td>
-                        <div>
-                          <span style={{ fontSize: '0.875rem', fontWeight: 600 }}>{name}</span>
-                          {model.trustRemoteCode && (
-                            <div style={{ marginTop: '2px' }}>
-                              <span className="badge badge-error" style={{ fontSize: '0.625rem' }}>
-                                <i className="fas fa-circle-exclamation" /> {t('table.trustRemoteCode')}
-                              </span>
-                            </div>
-                          )}
-                        </div>
-                      </td>
+        <SplitView
+          testId="discover"
+          detail={!!selectedModel}
+          rail={
+            <>
+              <div className="filter-bar-group models-filters">
+                <div className="filter-bar-group__row models-filters__query">
+                  <div className="search-bar filter-bar-group__search">
+                    <i className="fas fa-search search-icon" aria-hidden="true" />
+                    <input
+                      className="input"
+                      type="text"
+                      placeholder={t('search.placeholder')}
+                      aria-label={t('search.placeholder')}
+                      value={search}
+                      onChange={(e) => handleSearch(e.target.value)}
+                    />
+                  </div>
+                  {allBackends.length > 0 && (
+                    <div className="models-filters__backend">
+                      <SearchableSelect
+                        value={backendFilter}
+                        onChange={(v) => { setBackendFilter(v); setPage(1) }}
+                        options={allBackends}
+                        placeholder={t('filters.allBackends')}
+                        allOption={t('filters.allBackends')}
+                        searchPlaceholder={t('filters.searchBackends')}
+                      />
+                    </div>
+                  )}
+                </div>
 
-                      {/* Description */}
-                      <td>
-                        {(() => {
-                          // Gallery descriptions are Markdown. This cell is a single
-                          // truncated line, so it gets the text without the syntax.
-                          const desc = stripMarkdown(model.description)
-                          return (
-                            <div style={{
-                              fontSize: '0.8125rem', color: 'var(--color-text-secondary)',
-                              maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
-                            }} title={desc}>
-                              {desc || '—'}
-                            </div>
-                          )
-                        })()}
-                      </td>
+                <button
+          type="button"
+          className="models-filters__usecase-trigger"
+          aria-haspopup="dialog"
+          aria-expanded={useCaseOpen}
+          onClick={() => setUseCaseOpen(v => !v)}
+        >
+          <i className="fas fa-layer-group" aria-hidden="true" />
+          <span>{useCaseLabel}</span>
+          <i className={`fas fa-chevron-${useCaseOpen ? 'up' : 'down'} models-filters__usecase-caret`} aria-hidden="true" />
+        </button>
 
-                      {/* Backend */}
-                      <td>
-                        {model.backend ? (
-                          <span className="badge badge-info" style={{ fontSize: '0.6875rem' }}>
-                            {model.backend}
-                          </span>
-                        ) : (
-                          <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>—</span>
-                        )}
-                      </td>
+        {/* An inline disclosure rather than a popover. Picking use cases is
+            multi-select and interleaves with the backend select and the
+            refinements below, and a popover dismisses itself the moment you
+            touch either of those, which turns one decision into three. */}
+        {useCaseOpen && (
+        <div className="models-filters__usecases" role="group" aria-label={t('filters.useCaseLabel')}>
+                  {FILTER_SECTIONS.map(section => {
+            const inSection = FILTERS.filter(f => section.keys.includes(f.key))
+            if (inSection.length === 0) return null
+            return (
+              <div className="models-filters__usecase-group" key={section.id}>
+                {section.labelKey && (
+                  <span className="models-filters__usecase-label">{t(section.labelKey)}</span>
+                )}
+                <div className="filter-bar">
+                  {inSection.map(f => {
+                    const isAll = f.key === ''
+                    const active = isAll ? filters.length === 0 : filters.includes(f.key)
+                    const available = isFilterAvailable(f.key)
+                    return (
+                      <button
+                        key={f.key}
+                        type="button"
+                        className={`filter-btn ${active ? 'active' : ''}`}
+                        disabled={!available}
+                        aria-pressed={active}
+                        title={!available ? t('filters.unavailableForBackend') : undefined}
+                        onClick={() => toggleFilter(f.key)}
+                      >
+                        <i className={`fas ${f.icon}`} aria-hidden="true" />
+                        {t(f.labelKey)}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+            )
+          })}
+                </div>
+                )}
 
-                      {/* Size / VRAM */}
-                      <td>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
-                          {(sizeDisplay || vramDisplay) ? (
-                            <>
-                              <span style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)' }}>
-                                {sizeDisplay && sizeDisplay !== '0 B' && (
-                                  <span>{t('table.size', { size: sizeDisplay })}</span>
-                                )}
-                                {sizeDisplay && sizeDisplay !== '0 B' && vramDisplay && vramDisplay !== '0 B' && ' · '}
-                                {vramDisplay && vramDisplay !== '0 B' && (
-                                  <span>{t('table.vram', { vram: vramDisplay })}</span>
-                                )}
-                              </span>
-                              {fit !== null && (
-                                <span style={{ fontSize: '0.6875rem', display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
-                                  <i className="fas fa-microchip" style={{ color: fit ? 'var(--color-success)' : 'var(--color-error)' }} />
-                                  <span style={{ color: fit ? 'var(--color-success)' : 'var(--color-error)' }}>
-                                    {fit ? t('table.fits') : t('table.mayNotFit')}
-                                  </span>
-                                </span>
-                              )}
-                            </>
-                          ) : (
-                            <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>—</span>
-                          )}
-                        </div>
-                      </td>
+                <div className="models-filters__refine" data-testid="models-filters-refine">
+                  <span className="models-filters__refine-label">{t('filters.refineLabel')}</span>
+                  {/* Leads the band because it decides how many rows the other two
+                      refine over, and because unlike fits-in-GPU it is always present:
+                      a host with no GPU still browses builds. Turning it off is the
+                      only way to page through every build the gallery holds; searching
+                      reaches a specific one but cannot enumerate them. */}
+                  <label className="filter-bar-group__toggle" data-testid="models-collapse-variants">
+                    <Toggle
+                      checked={collapseVariants}
+                      onChange={(v) => { setCollapseVariants(v); setPage(1) }}
+                    />
+                    <i className="fas fa-layer-group" aria-hidden="true" />
+                    <span>{t('filters.collapseVariants')}</span>
+                  </label>
+                  {totalGpuMemory > 0 && (
+                    <label className="filter-bar-group__toggle">
+                      <Toggle checked={fitsFilter} onChange={setFitsFilter} />
+                      <i className="fas fa-microchip" aria-hidden="true" />
+                      <span>{t('filters.fitsGpu')}</span>
+                    </label>
+                  )}
+                  <div className="models-filters__context">
+                    <label htmlFor="models-context-size">
+                      <i className="fas fa-memory" aria-hidden="true" />
+                      {t('filters.contextSize')}
+                    </label>
+                    <input
+                      id="models-context-size"
+                      type="range"
+                      min={0}
+                      max={CONTEXT_SIZES.length - 1}
+                      value={CONTEXT_SIZES.indexOf(contextSize)}
+                      // The slider steps over an index, so the raw value ("2") is
+                      // meaningless to a screen reader; announce the size instead.
+                      aria-valuetext={CONTEXT_LABELS[CONTEXT_SIZES.indexOf(contextSize)]}
+                      onChange={(e) => setContextSize(CONTEXT_SIZES[e.target.value])}
+                    />
+                    <span className="models-filters__context-value">
+                      {CONTEXT_LABELS[CONTEXT_SIZES.indexOf(contextSize)]}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <EntityRail
+                items={visibleModels.map(m => railItemFor(m, { estimates, contextSize, fitsGpu, isInstalling, getOperationProgress, t }))}
+                selectedId={selectedName}
+                onSelect={selectModel}
+                countLabel={t('rail.showingCount', { shown: visibleModels.length, total: stats.total })}
+                ariaLabel={t('title')}
+                testId="discover-rail"
+                actions={
+                  <div className="entity-rail__sort" role="group" aria-label={t('rail.sortLabel')}>
+                    <SortButton col="name" label={t('table.modelName')} sort={sort} order={order} onSort={handleSort} />
+                    <SortButton col="status" label={t('table.status')} sort={sort} order={order} onSort={handleSort} />
+                  </div>
+                }
+              />
 
-                      {/* Status */}
-                      <td>
-                        {installing ? (
-                          <div className="inline-install">
-                            <div className="inline-install__row">
-                              <div className="operation-spinner" />
-                              <span className="inline-install__label">
-                                {progress > 0 ? t('table.installingPct', { percent: Math.round(progress) }) : `${t('table.installing')}...`}
-                              </span>
-                            </div>
-                            {progress > 0 && (
-                              <div className="operation-bar-container" style={{ flex: 'none', width: '120px', marginTop: 4 }}>
-                                <div className="operation-bar" style={{ width: `${progress}%` }} />
-                              </div>
-                            )}
-                          </div>
-                        ) : model.installed ? (
-                          <span className="badge badge-success">
-                            <i className="fas fa-check-circle" /> {t('table.installed')}
-                          </span>
-                        ) : (
-                          <span className="badge" style={{ background: 'var(--color-surface-sunken)', color: 'var(--color-text-muted)', border: '1px solid var(--color-border-default)' }}>
-                            <i className="fas fa-circle" /> {t('table.notInstalled')}
-                          </span>
-                        )}
-                      </td>
+              {totalPages > 1 && (
+                <div className="pagination split-view__pager">
+                  <button className="pagination-btn" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1} aria-label={t('rail.previousPage')}>
+                    <i className="fas fa-chevron-left" />
+                  </button>
+                  <span className="split-view__pager-label">{page} / {totalPages}</span>
+                  <button className="pagination-btn" onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages} aria-label={t('rail.nextPage')}>
+                    <i className="fas fa-chevron-right" />
+                  </button>
+                </div>
+              )}
+            </>
+          }
+          pane={
+            visibleModels.length === 0 ? (
+    <div className="empty-state">
+              <div className="empty-state-icon"><i className="fas fa-search" /></div>
+              <h2 className="empty-state-title">{t('empty.title')}</h2>
+              <p className="empty-state-text">
+                {search || filters.length > 0 || backendFilter || fitsFilter || !collapseVariants ? t('empty.withFilters') : t('empty.noFilters')}
+              </p>
+              {/* Only the fits filter can leave the collapse to blame. The term,
+                  the chips and the backend are applied server-side over every build
+                  the gallery holds, and a match there is always reported as some
+                  row, so those three can no longer come back empty on account of
+                  the collapse. Fits runs here in the browser, after the server
+                  substituted a matching build for the entry that offers it, and
+                  judges that entry's own size: the build that fits can still be
+                  filtered out along with a parent that does not. */}
+              {collapseVariants && fitsFilter && (
+                <p className="empty-state-hint">{t('empty.collapsedVariantsHint')}</p>
+              )}
+              {(search || filters.length > 0 || backendFilter || fitsFilter || !collapseVariants) && (
+                <button
+                  className="btn btn-secondary btn-sm"
+                  onClick={() => { handleSearch(''); setFilters([]); setBackendFilter(''); setFitsFilter(false); setCollapseVariants(COLLAPSE_VARIANTS_DEFAULT); setPage(1) }}
+                >
+                  <i className="fas fa-times" /> {t('search.clearFilters')}
+                </button>
+              )}
+            </div>
+            ) : selectedModel ? (
+              <DiscoverDetail
+                model={selectedModel}
+                estimate={estimates[selectedName]}
+                contextSize={contextSize}
+                onPickContext={setContextSize}
+                totalGpuMemory={totalGpuMemory}
+                fitsGpu={fitsGpu}
+                installing={isInstalling(selectedName)}
+                progress={getOperationProgress(selectedName)}
+                onInstall={handleInstall}
+                onDelete={handleDelete}
+                onBack={() => selectModel(null)}
+                expandedFiles={expandedFiles}
+                setExpandedFiles={setExpandedFiles}
+                variantData={selectedModel.has_variants ? variantData[selectedName] : null}
+                variantDetails={variantDetails}
+                onLoadVariantDetail={loadVariantDetail}
+                t={t}
+              />
+            ) : (
+              <div className="zero-pane">
+                <div className="zero-pane__hero">
+                  <span className="zero-pane__eyebrow">{t('shelves.hostLabel')}</span>
+                  <h2 className="zero-pane__title">
+                    {/* The resources endpoint reports system RAM when there is
+                        no accelerator, so calling it "GPU memory" was a claim
+                        the data did not support. */}
+                    {totalGpuMemory <= 0
+                      ? t('shelves.heroNoGpu', { count: stats.total })
+                      : hasGpu
+                        ? t('shelves.heroWithGpu', { vram: formatBytes(totalGpuMemory), count: stats.total })
+                        : t('shelves.heroWithRam', { ram: formatBytes(totalGpuMemory), count: stats.total })}
+                  </h2>
+                  <p className="zero-pane__text">{t('shelves.heroHint')}</p>
+                </div>
 
-                      {/* Actions */}
-                      <td>
-                        <div style={{ display: 'flex', gap: 'var(--spacing-xs)', justifyContent: 'flex-end' }} onClick={e => e.stopPropagation()}>
-                          {model.installed ? (
-                            <>
-                              <button className="btn btn-secondary btn-sm" onClick={() => handleInstall(name)} title={t('actions.reinstall')}>
-                                <i className="fas fa-rotate" />
-                              </button>
-                              <button className="btn btn-danger btn-sm" onClick={() => handleDelete(name)} title={t('actions.delete')}>
-                                <i className="fas fa-trash" />
-                              </button>
-                            </>
-                          ) : hasVariants ? (
-                            // Split button: the primary keeps installing the
-                            // auto-selected build, so the default path is
-                            // unchanged. The chevron is the deliberate
-                            // override.
-                            <div style={{ display: 'inline-flex' }}>
-                              <button
-                                className="btn btn-primary btn-sm"
-                                onClick={() => handleInstall(name)}
-                                disabled={installing}
-                                title={t('actions.install')}
-                                style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
-                              >
-                                <i className="fas fa-download" />
-                              </button>
-                              <button
-                                ref={variantMenuFor === idx ? variantMenuAnchorRef : undefined}
-                                className="btn btn-primary btn-sm"
-                                onClick={() => {
-                                  if (variantMenuFor !== idx) loadVariants(name)
-                                  setVariantMenuFor(variantMenuFor === idx ? null : idx)
-                                }}
-                                aria-haspopup="menu"
-                                aria-expanded={variantMenuFor === idx}
-                                aria-label={t('variants.chooseVariant')}
-                                disabled={installing}
-                                style={{ padding: '0 8px', borderLeft: '1px solid rgba(0,0,0,0.15)', borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
-                              >
-                                <i className={`fas fa-chevron-${variantMenuFor === idx ? 'up' : 'down'}`} style={{ fontSize: '0.6875rem' }} />
-                              </button>
-                            </div>
-                          ) : (
-                            <button
-                              className="btn btn-primary btn-sm"
-                              onClick={() => handleInstall(name)}
-                              disabled={installing}
-                              title={t('actions.install')}
-                            >
-                              <i className="fas fa-download" />
-                            </button>
-                          )}
-                        </div>
-                      </td>
-                    </tr>
-                    {/* Expanded detail row */}
-                    {isExpanded && (
-                      <tr>
-                        <td colSpan="8" style={{ padding: 0 }}>
-                          <ModelDetail model={model} fit={fit} sizeDisplay={sizeDisplay} vramDisplay={vramDisplay} expandedFiles={expandedFiles} setExpandedFiles={setExpandedFiles} variantData={hasVariants ? variantData[name] : null} variantDetails={variantDetails} onLoadVariantDetail={loadVariantDetail} installing={installing} onInstall={handleInstall} t={t} />
-                        </td>
-                      </tr>
-                    )}
-                    </React.Fragment>
-                  )
-                })}
-              </tbody>
-        </ResponsiveTable>
-      )}
+                {/* The hardware-fit strip is the curation, and here it finally
+                    gets the width to argue for a model rather than list one.
+                    It keeps its own dismissal and collapse state, so someone
+                    who closed it still lands on the pane below. */}
+                <RecommendedModels addToast={addToast} installedCount={statsLoaded ? stats.installed : null} />
 
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <div className="pagination">
-          <button className="pagination-btn" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}>
-            <i className="fas fa-chevron-left" />
-          </button>
-          <span style={{ fontSize: '0.8125rem', color: 'var(--color-text-secondary)', padding: '0 var(--spacing-sm)' }}>
-            {page} / {totalPages}
-          </span>
-          <button className="pagination-btn" onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages}>
-            <i className="fas fa-chevron-right" />
-          </button>
-        </div>
+                {/* Somewhere to start when the recommendations are not it.
+                    These set the use-case filter rather than fetching a second
+                    list, so a shelf costs nothing and cannot go stale. */}
+                <div className="zero-pane__shelf">
+                  <div className="zero-pane__shelf-head">
+                    <h3 className="zero-pane__shelf-title">{t('shelves.byUseCase')}</h3>
+                  </div>
+                  <div className="zero-pane__tiles">
+                    {FILTER_SECTIONS.filter(sec => sec.pick).map(sec => (
+                      <button
+                        type="button"
+                        key={sec.id}
+                        className="zero-pane__tile"
+                        onClick={() => { setFilters([sec.pick]); setPage(1); setUseCaseOpen(false) }}
+                      >
+                        <span className="hstack hstack--xs">
+                          <i className={`fas ${sec.icon}`} aria-hidden="true" />
+                          <span className="zero-pane__tile-name">{t(sec.labelKey)}</span>
+                        </span>
+                        <span className="text-sm text-muted">{t(sec.blurbKey)}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )
+          }
+        />
       )}
 
       <ConfirmDialog
@@ -810,99 +761,10 @@ export default function Models() {
         onConfirm={confirmDialog?.onConfirm}
         onCancel={() => setConfirmDialog(null)}
       />
-
-      <VariantMenu
-        anchor={variantMenuAnchorRef}
-        model={variantMenuFor !== null ? visibleModels[variantMenuFor] : null}
-        variantData={variantData}
-        onClose={() => setVariantMenuFor(null)}
-        onChoose={handleInstall}
-        t={t}
-      />
     </div>
   )
 }
 
-// VariantMenu is the split-button dropdown. It is one instance re-anchored to
-// whichever row is active, so Escape, outside-click and focus return come from
-// Popover rather than being reimplemented per row.
-function VariantMenu({ anchor, model, variantData, onClose, onChoose, t }) {
-  const name = model ? (model.name || model.id) : null
-  const data = name ? variantData[name] : null
-  return (
-    <Popover
-      anchor={anchor}
-      open={!!model}
-      onClose={onClose}
-      ariaLabel={t('variants.chooseVariant')}
-    >
-      <div className="action-menu">
-        {data?.loading && (
-          // The description is a round trip, so the menu says so rather than
-          // opening empty and looking broken.
-          <div className="action-menu__item" style={{ color: 'var(--color-text-muted)', cursor: 'default' }}>
-            <i className="fas fa-spinner fa-spin action-menu__icon" />
-            <span>{t('variants.loading')}</span>
-          </div>
-        )}
-        {(data?.variants || []).map(v => {
-          const isAuto = v.model === data?.auto_selected
-          return (
-            <button
-              key={v.model}
-              type="button"
-              className="action-menu__item"
-              onClick={() => {
-                onClose()
-                if (name) onChoose(name, v.model)
-              }}
-              // A variant that does not fit stays selectable: an explicit
-              // choice is an override the server honours with a warning.
-              style={{ opacity: v.fits ? 1 : 0.6 }}
-            >
-              <i className={`fas ${isAuto ? 'fa-circle-check' : 'fa-download'} action-menu__icon`} />
-              <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 2 }}>
-                <span>
-                  {v.model}
-                  {isAuto && <span className="badge badge-success" style={{ fontSize: '0.625rem', marginLeft: 6 }}>{t('variants.auto')}</span>}
-                  {v.is_base && <span className="badge badge-info" style={{ fontSize: '0.625rem', marginLeft: 6 }}>{t('variants.base')}</span>}
-                  {!v.fits && <span className="badge badge-warning" style={{ fontSize: '0.625rem', marginLeft: 6 }}>{t('variants.doesNotFit')}</span>}
-                  {/* The bare token, not the spelled-out name: a dropdown item
-                      has room for a marker, and the sentence explaining what
-                      the marker means belongs in the detail row. */}
-                  {(v.features || []).map(f => (
-                    <span
-                      key={f}
-                      className="badge badge-info"
-                      style={{ fontSize: '0.625rem', marginLeft: 6 }}
-                      title={variantFeatureLabel(f, t)}
-                    >
-                      {f.toUpperCase()}
-                    </span>
-                  ))}
-                </span>
-                {/* Quantization joins backend and size on the one meta line
-                    because it is what most often separates two rows here:
-                    builds of the same model routinely share a backend and land
-                    within a gigabyte of each other, so without it the line
-                    describes nothing the user is actually choosing between.
-                    Joined by filter so a build that names no weight format
-                    drops the segment and its separator rather than rendering a
-                    dangling dot. */}
-                <span style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
-                  {[v.backend || t('variants.unknownBackend'), v.quantization, variantSizeLabel(v, t)]
-                    .filter(Boolean)
-                    .join(' · ')}
-                </span>
-              </span>
-            </button>
-          )
-        })}
-      </div>
-    </Popover>
-  )
-}
-
 // variantSizeLabel renders a variant footprint. memory_bytes is omitempty on
 // the wire, so an absent key means the probe could not determine a size; it
 // must never render as "0 B", which would read as "needs nothing".
@@ -1217,3 +1079,241 @@ function ModelDetail({ model, fit, sizeDisplay, vramDisplay, expandedFiles, setE
     </div>
   )
 }
+
+// railItemFor maps a gallery entry onto the shape EntityRail speaks. Keeping
+// the vocabulary translation here, rather than teaching the rail about models,
+// is what lets Backends and Host reuse the same component without three
+// slightly different rails growing out of it.
+//
+// The rail line gets exactly one fact beyond the name, and it is spent on
+// whether the thing will run here. Descriptions belong in the pane; two lines
+// is the budget and the second one is worth more as an answer than as prose.
+function railItemFor(model, { estimates, contextSize, fitsGpu, isInstalling, getOperationProgress, t }) {
+  const name = model.name || model.id
+  const est = estimates[name]
+  const sizeDisplay = est?.sizeDisplay
+  const vramBytes = est?.estimates?.[String(contextSize)]?.vramBytes
+  const fit = fitsGpu(vramBytes)
+  const hasSize = sizeDisplay && sizeDisplay !== '0 B'
+  const installing = isInstalling(name)
+  const progress = getOperationProgress(name)
+
+  let meta = model.backend || ''
+  let metaTone
+  if (installing) {
+    meta = progress > 0 ? t('rail.downloadingPct', { percent: Math.round(progress) }) : t('table.installing')
+    metaTone = 'busy'
+  } else if (model.installed) {
+    meta = t('table.installed')
+    metaTone = 'ok'
+  } else if (hasSize && fit === false) {
+    meta = t('rail.tooLarge', { size: sizeDisplay })
+    metaTone = 'bad'
+  } else if (hasSize && fit === true) {
+    meta = t('rail.fitsSize', { size: sizeDisplay })
+  } else if (hasSize) {
+    meta = sizeDisplay
+  }
+
+  return { id: name, name, icon: groupForEntity(model).icon, meta, metaTone, groupId: groupForEntity(model).id }
+}
+
+// SortButton is the home sorting found after the column headers went. It sits
+// in the rail rather than the filter band above, because it orders this list
+// and nothing else on the page.
+function SortButton({ col, label, sort, order, onSort }) {
+  const active = sort === col
+  return (
+    <button
+      type="button"
+      className={`entity-rail__sort-btn${active ? ' active' : ''}`}
+      aria-pressed={active}
+      onClick={() => onSort(col)}
+    >
+      {label}
+      {active && <i className={`fas fa-arrow-${order === 'asc' ? 'up' : 'down'}`} aria-hidden="true" />}
+    </button>
+  )
+}
+
+// VramByContext plots the estimate the fits filter actually tests against, at
+// every context length the page asks the server for.
+//
+// It exists because a single number answers the wrong question. "Needs 6.2 GB"
+// invites "so will it run?", and the honest answer is usually "yes, up to a
+// 32k context" - which is a shape, not a number. The limit line is what makes
+// the bars mean anything, so a host with no GPU gets no chart at all rather
+// than a chart with nothing to compare against.
+function VramByContext({ estimate, contextSize, onPickContext, totalGpuMemory, t }) {
+  if (!(totalGpuMemory > 0)) return null
+  const points = CONTEXT_SIZES
+    .map((ctx, i) => ({ ctx, label: CONTEXT_LABELS[i], bytes: estimate?.estimates?.[String(ctx)]?.vramBytes || 0 }))
+    .filter(p => p.bytes > 0)
+  // One bar compares with nothing; the stat grid already states that number.
+  if (points.length < 2) return null
+
+  const limit = totalGpuMemory * 0.95
+  const max = Math.max(limit, ...points.map(p => p.bytes)) * 1.12
+  const over = points.filter(p => p.bytes > limit).length
+  const lastFitting = points.reduce((acc, p) => (p.bytes <= limit ? p : acc), null)
+
+  let verdictClass = 'ok'
+  let verdict = t('chart.fitsEverywhere')
+  if (over === points.length) {
+    verdictClass = 'bad'
+    verdict = t('chart.fitsNowhere')
+  } else if (over > 0) {
+    verdictClass = over === 1 ? 'warn' : 'bad'
+    verdict = t('chart.fitsUpTo', { context: lastFitting.label })
+  }
+
+  // Heights are resolved in pixels against a known plot height rather than as
+  // percentages. A percentage would resolve against the column box, which also
+  // holds the value label, so the tallest bars would overflow it.
+  const track = CHART_HEIGHT - CHART_LABEL_ROOM
+
+  return (
+    <div className="discover__chart">
+      <span className="discover__chart-title">{t('chart.title')}</span>
+      <div className="discover__chart-plot">
+        <div
+          className="discover__chart-limit"
+          style={{ '--discover-limit': `${(limit / max) * track}px` }}
+        >
+          <span className="discover__chart-limit-label">{t('chart.available', { vram: formatBytes(totalGpuMemory) })}</span>
+        </div>
+        {points.map(p => {
+          const unfit = p.bytes > limit
+          return (
+            <button
+              type="button"
+              key={p.ctx}
+              className={`discover__chart-col${p.ctx === contextSize ? ' discover__chart-col--on' : ''}`}
+              aria-pressed={p.ctx === contextSize}
+              // The bars read the context size out and set it: the slider in
+              // the filter band writes the same value, and picking the length
+              // you care about here is the same gesture as reading its bar.
+              onClick={() => onPickContext(p.ctx)}
+              title={t('chart.barTitle', { context: p.label, vram: formatBytes(p.bytes) })}
+            >
+              <span className="discover__chart-value">{formatBytes(p.bytes)}</span>
+              <span
+                className={`discover__chart-bar${unfit ? ' discover__chart-bar--over' : ''}`}
+                style={{ '--discover-bar': `${(p.bytes / max) * track}px` }}
+              />
+            </button>
+          )
+        })}
+      </div>
+      {/* The axis is its own row so every column shares one baseline, which a
+          label inside each column cannot guarantee once the values above them
+          wrap differently. */}
+      <div className="discover__chart-axis" aria-hidden="true">
+        {points.map(p => (
+          <span key={p.ctx} className={p.ctx === contextSize ? 'discover__chart-axis-on' : undefined}>{p.label}</span>
+        ))}
+      </div>
+      <p className={`discover__chart-verdict discover__chart-verdict--${verdictClass}`}>
+        <i className="fas fa-microchip" aria-hidden="true" /> {verdict}
+      </p>
+    </div>
+  )
+}
+
+// DiscoverDetail is the pane with a model selected. It owns the part a table
+// row could not hold - the headline numbers, the VRAM curve and the actions -
+// and hands the rest to ModelDetail, which already knows how to render an
+// entry's fields and is shared with the per-variant panel.
+function DiscoverDetail({
+  model, estimate, contextSize, onPickContext, totalGpuMemory, fitsGpu,
+  installing, progress, onInstall, onDelete, onBack,
+  expandedFiles, setExpandedFiles, variantData, variantDetails, onLoadVariantDetail, t,
+}) {
+  const name = model.name || model.id
+  const sizeDisplay = estimate?.sizeDisplay
+  const vramBytes = estimate?.estimates?.[String(contextSize)]?.vramBytes
+  const fit = fitsGpu(vramBytes)
+  const contextLabel = CONTEXT_LABELS[CONTEXT_SIZES.indexOf(contextSize)]
+  const headroom = totalGpuMemory > 0 && vramBytes ? totalGpuMemory * 0.95 - vramBytes : null
+
+  return (
+    <div className="detail-pane">
+      <DetailHeader
+        testId="discover"
+        icon={groupForEntity(model).icon}
+        name={name}
+        lede={model.description ? stripMarkdown(model.description).slice(0, 220) : null}
+        ledeTitle={model.description ? stripMarkdown(model.description) : null}
+        onBack={onBack}
+        backLabel={t('detail.backToAll')}
+        warning={model.trustRemoteCode ? t('detail.requiresTrustRemoteCode') : null}
+        actions={
+          installing ? (
+            <div className="inline-install">
+              <div className="inline-install__row">
+                <div className="operation-spinner" />
+                <span className="inline-install__label">
+                  {progress > 0 ? t('table.installingPct', { percent: Math.round(progress) }) : `${t('table.installing')}...`}
+                </span>
+              </div>
+              {progress > 0 && (
+                <div className="operation-bar-container discover__progress">
+                  <div className="operation-bar" style={{ width: `${progress}%` }} />
+                </div>
+              )}
+            </div>
+          ) : model.installed ? (
+            <>
+              <button className="btn btn-secondary btn-sm" onClick={() => onInstall(name)}>
+                <i className="fas fa-rotate" /> {t('actions.reinstall')}
+              </button>
+              <button className="btn btn-danger btn-sm" onClick={() => onDelete(name)}>
+                <i className="fas fa-trash" /> {t('actions.delete')}
+              </button>
+            </>
+          ) : (
+            <button className="btn btn-primary btn-sm" onClick={() => onInstall(name)} data-testid="discover-install">
+              <i className="fas fa-download" /> {t('actions.install')}
+            </button>
+          )
+        }
+      />
+
+      <StatGrid
+        stats={[
+          { label: t('detail.size'), value: sizeDisplay && sizeDisplay !== '0 B' ? sizeDisplay : '—' },
+          { label: t('detail.vramAt', { context: contextLabel }), value: vramBytes ? formatBytes(vramBytes) : '—' },
+          {
+            label: t('detail.headroom'),
+            value: headroom === null ? '—' : (headroom < 0 ? '−' : '') + formatBytes(Math.abs(headroom)),
+            tone: headroom === null ? undefined : headroom < 0 ? 'bad' : 'ok',
+          },
+        ]}
+      />
+
+      <VramByContext
+        estimate={estimate}
+        contextSize={contextSize}
+        onPickContext={onPickContext}
+        totalGpuMemory={totalGpuMemory}
+        t={t}
+      />
+
+      {/* sizeDisplay and vramDisplay are withheld: the stat grid above already
+          states both, and ModelDetail drops a row whose value is empty. */}
+      <ModelDetail
+        model={model}
+        fit={fit}
+        expandedFiles={expandedFiles}
+        setExpandedFiles={setExpandedFiles}
+        variantData={variantData}
+        variantDetails={variantDetails}
+        onLoadVariantDetail={onLoadVariantDetail}
+        installing={installing}
+        onInstall={onInstall}
+        nested
+        t={t}
+      />
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/router.jsx b/core/http/react-ui/src/router.jsx
index a221e0180255..8e5141f64f1e 100644
--- a/core/http/react-ui/src/router.jsx
+++ b/core/http/react-ui/src/router.jsx
@@ -176,7 +176,7 @@ const appChildren = [
     ],
   },
 
-  // Models management (Install Models) — top-level destination, full-width.
+  // Model gallery (Discover) — top-level destination, full-width.
   { path: 'models', element: <Admin><Models /></Admin> },
   { path: 'voice-library/new', element: <Admin><VoiceProfileCreate /></Admin> },
   { path: 'model-editor', element: <Admin><ModelEditor /></Admin> },
diff --git a/core/http/react-ui/src/utils/entityGroups.js b/core/http/react-ui/src/utils/entityGroups.js
new file mode 100644
index 000000000000..e89e9d0f7fee
--- /dev/null
+++ b/core/http/react-ui/src/utils/entityGroups.js
@@ -0,0 +1,70 @@
+// Grouping for the rails on Discover and Backends.
+//
+// The gallery does not tag entries with the use-case keys the filter chips
+// send. Those keys (`chat`, `tts`, `transcript`, …) are a server-side
+// vocabulary the handler maps onto entries; what an entry actually carries is
+// free-form and inconsistent: models come back tagged `llm`, `gguf`, `vision`,
+// `coding`, and backends `LLM`, `text-to-text`, `audio-transcription`, `CUDA`.
+// An earlier version of this matched on the filter keys and put all 1,595
+// models into "Everything else", which is how this file came to exist.
+//
+// Order is specific before general, and that is load-bearing. A vision model is
+// tagged `llm` as well as `vision`, so testing text first would swallow it.
+const GROUPS = [
+  {
+    id: 'audio',
+    labelKey: 'groups.audio',
+    icon: 'fa-wave-square',
+    tags: ['tts', 'stt', 'asr', 'transcript', 'transcription', 'audio-transcription',
+      'speech', 'speech-to-text', 'text-to-speech', 'audio', 'voice', 'voice-cloning',
+      'whisper', 'diarization', 'sound', 'music', 'vad'],
+    backends: ['whisper', 'parakeet', 'kokoro', 'bark', 'piper', 'vibevoice', 'qwentts',
+      'crispasr', 'moss-transcribe', 'omnivoice', 'ced', 'silero'],
+  },
+  {
+    id: 'visual',
+    labelKey: 'groups.visual',
+    icon: 'fa-image',
+    tags: ['image', 'image-generation', 'text-to-image', 'video', 'text-to-video', '3d',
+      'sd', 'diffusion', 'stable-diffusion', 'flux'],
+    backends: ['stablediffusion', 'diffusers', 'flux'],
+  },
+  {
+    id: 'vision',
+    labelKey: 'groups.vision',
+    icon: 'fa-eye',
+    tags: ['vision', 'multimodal', 'vlm', 'image-to-text', 'detection', 'ocr'],
+    backends: [],
+  },
+  {
+    id: 'text',
+    labelKey: 'groups.text',
+    icon: 'fa-brain',
+    tags: ['llm', 'text-to-text', 'text-generation', 'chat', 'completion', 'coding',
+      'reasoning', 'thinking', 'agent', 'tool-use', 'embeddings', 'rerank'],
+    backends: ['llama', 'vllm', 'sglang', 'ds4', 'bonsai', 'transformers', 'exllama',
+      'mlx', 'rerankers', 'bert'],
+  },
+  { id: 'other', labelKey: 'groups.other', icon: 'fa-cube', tags: [], backends: [] },
+]
+
+export const ENTITY_GROUPS = GROUPS
+
+// Tags are matched case-insensitively because the two galleries disagree on
+// case for the same concept (`llm` on models, `LLM` on backends).
+export function groupForEntity({ tags, backend, name } = {}) {
+  const owned = new Set((tags || []).map(t => String(t).toLowerCase()))
+  for (const g of GROUPS) {
+    if (g.tags.some(tag => owned.has(tag))) return g
+  }
+  // Nothing matched, so fall back to what runs it. A backend named `whisper`
+  // is a speech backend whatever its tags say, and for the backend gallery the
+  // entry's own name is that signal.
+  const hint = String(backend || name || '').toLowerCase()
+  if (hint) {
+    for (const g of GROUPS) {
+      if (g.backends.some(b => hint.includes(b))) return g
+    }
+  }
+  return GROUPS[GROUPS.length - 1]
+}
diff --git a/core/http/react-ui/src/utils/section.js b/core/http/react-ui/src/utils/section.js
index 0613437bea2e..35ddf75c9ea4 100644
--- a/core/http/react-ui/src/utils/section.js
+++ b/core/http/react-ui/src/utils/section.js
@@ -6,7 +6,7 @@ const CREATE_PATHS = ['/app/chat', '/app/studio', '/app/talk']
 // The section/console an app page belongs to, returned as a `nav` i18n key for
 // use as the PageHeader eyebrow. Console pages map to their console title
 // (Build / Operate); the inline Create group maps to sections.create; any other
-// top-level page (Home, Install Models, Account, ...) has no eyebrow.
+// top-level page (Home, Discover, Account, ...) has no eyebrow.
 export function sectionKeyForPath(pathname) {
   for (const c of consoles) {
     if (consolePaths(c).some(p => pathname === p || pathname.startsWith(p + '/'))) {
diff --git a/data/.local_user_id b/data/.local_user_id
new file mode 100644
index 000000000000..60ce118bb99a
--- /dev/null
+++ b/data/.local_user_id
@@ -0,0 +1 @@
+a27c022a-653b-45d1-b006-8056f8b2c957
\ No newline at end of file
diff --git a/docs/content/features/authentication.md b/docs/content/features/authentication.md
index 6c206adbb35a..11c74c2fca6e 100644
--- a/docs/content/features/authentication.md
+++ b/docs/content/features/authentication.md
@@ -190,7 +190,7 @@ When authentication is enabled, the following endpoints require admin role:
 When auth is enabled, the React UI sidebar dynamically shows/hides sections based on the user's role:
 
 - **All users see**: Home, Chat, Images, Video, TTS, Sound, Talk, Usage, API docs link
-- **Admins also see**: Install Models, Agents section (Agents, Skills, Memory, MCP CI Jobs), System section (Backends, Traces, Swarm, System, Settings)
+- **Admins also see**: Discover, Agents section (Agents, Skills, Memory, MCP CI Jobs), System section (Backends, Traces, Swarm, System, Settings)
 
 Admin-only pages are also protected at the router level - navigating directly to an admin URL redirects non-admin users to the home page.
 
diff --git a/docs/content/getting-started/quickstart.md b/docs/content/getting-started/quickstart.md
index a10fd6d7a56b..0108a23d0bf2 100644
--- a/docs/content/getting-started/quickstart.md
+++ b/docs/content/getting-started/quickstart.md
@@ -52,7 +52,7 @@ For NVIDIA GPUs, add `--gpus all`. For AMD/Intel/Vulkan, add the appropriate `--
 Open **http://localhost:8080** in your browser. The web interface lets you:
 
 - **Chat** with any installed model
-- **Install models** from the built-in gallery (Models page)
+- **Install models** from the built-in gallery (Discover page)
 - **Generate images**, audio, and more
 - **Create and manage AI agents** with MCP tool support
 - **Monitor system resources** and loaded models