diff --git a/.impeccable.md b/.impeccable.md
new file mode 100644
index 000000000..57b4e9b29
--- /dev/null
+++ b/.impeccable.md
@@ -0,0 +1,21 @@
+## Design Context
+
+### Users
+
+LocalAI serves both single-host users who want to install and try models quickly and experienced developers, ML engineers, system administrators, and DevOps operators who manage production hosts or distributed clusters. The interface must support first-time discovery without hiding the runtime state, configuration, and control that returning operators need.
+
+### Brand Personality
+
+Capable, easy to use, and trustworthy. The interface should make sophisticated local-AI infrastructure feel understandable and under control. It should be direct and calm rather than playful, ornamental, or intimidating.
+
+### Aesthetic Direction
+
+Use LocalAI's established technical, editorial design language: Geist typography, compact information density, sharp geometry, deep blue-black surfaces, action blue, mint for healthy/local/live state, and amber only for decisions requiring attention. Support both dark and light themes. Avoid generic card dashboards, decorative gradients, glass effects, and visual noise.
+
+### Design Principles
+
+1. Use progressive disclosure to serve newcomers and operators in the same workflow: make the common path obvious, then reveal operational depth in context.
+2. Organize navigation around user intent and lifecycle state, not implementation concepts or nested containers.
+3. Give each resource one canonical home; expose discovery, installed state, and runtime state as clear views of that resource instead of duplicating management surfaces.
+4. Keep operational status visible and trustworthy through precise labels, explicit scope, and actionable state—not decoration.
+5. Preserve information density for expert use while flattening navigation and reducing repeated summaries, tabs, rails, and panels.
diff --git a/AGENTS.md b/AGENTS.md
index dd2c79125..71302268a 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -33,6 +33,7 @@ LocalAI follows the Linux kernel project's [guidelines for AI coding assistants]
 | [.agents/localai-assistant-mcp.md](.agents/localai-assistant-mcp.md) | LocalAI Assistant chat modality — adding admin tools to the in-process MCP server, editing skill prompts, keeping REST + MCP + skills in sync |
 | [.agents/backend-signing.md](.agents/backend-signing.md) | Backend OCI image signing (keyless cosign + sigstore-go) — producer-side CI setup, consumer-side gallery `verification:` block, strict mode (`LOCALAI_REQUIRE_BACKEND_INTEGRITY`), revocation via `not_before` |
 | [.agents/preparing-a-release.md](.agents/preparing-a-release.md) | Cutting a release: PR labels, `RELEASE_NOTES_vX.Y.Z.md`, the blog post under `website/content/blog/`, and the demo clips under `website/static/media/` |
+| [.impeccable.md](.impeccable.md) | Design context for UI/UX work — users, brand personality, aesthetic direction, and design principles |
 
 ## Quick Reference
 
diff --git a/core/http/react-ui/e2e/alias-template.spec.js b/core/http/react-ui/e2e/alias-template.spec.js
index e9b13ba61..83d731b92 100644
--- a/core/http/react-ui/e2e/alias-template.spec.js
+++ b/core/http/react-ui/e2e/alias-template.spec.js
@@ -1,12 +1,12 @@
 import { test, expect } from './coverage-fixtures.js'
 
-// Alias / Routing template + Manage alias badge regression tests.
+// Alias / Routing template + installed model alias badge regression tests.
 //
 // An alias is a model config with `alias: <target>` that redirects traffic to
 // the target model. This covers the two discoverability surfaces:
 //   - the create-flow template gallery exposes an "Alias / Routing" card that
 //     seeds a minimal name + alias config
-//   - the Manage Models tab renders a read-only "alias -> target" badge on
+//   - the Models Installed view renders a read-only "alias -> target" badge on
 //     rows that resolve to an alias (looked up via GET /api/aliases, since the
 //     capabilities row payload doesn't carry the alias field)
 
@@ -54,7 +54,7 @@ test.describe('Alias template - create flow', () => {
   })
 })
 
-test.describe('Manage - alias badge', () => {
+test.describe('Installed Models - alias badge', () => {
   test.beforeEach(async ({ page }) => {
     await page.route('**/api/auth/status', (route) =>
       route.fulfill({ contentType: 'application/json', body: JSON.stringify({ authEnabled: false, staticApiKeyRequired: false, providers: [] }) }))
@@ -67,11 +67,9 @@ test.describe('Manage - alias badge', () => {
       route.fulfill({ contentType: 'application/json', body: JSON.stringify([{ name: 'gpt-4', target: 'fast-llm' }]) }))
   })
 
-  test('renders a read-only alias -> target badge on aliased rows', async ({ page }) => {
-    await page.goto('/app/manage')
-    // 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.
+  test('renders a read-only alias → target badge on aliased rows', async ({ page }) => {
+    await page.goto('/app/models?view=installed')
     await page.locator('[data-entity="gpt-4"]').click()
-    await expect(page.getByText('alias -> fast-llm')).toBeVisible({ timeout: 10_000 })
+    await expect(page.getByText('alias → fast-llm')).toBeVisible({ timeout: 10_000 })
   })
 })
diff --git a/core/http/react-ui/e2e/backends-lifecycle.spec.js b/core/http/react-ui/e2e/backends-lifecycle.spec.js
new file mode 100644
index 000000000..28ebc88a7
--- /dev/null
+++ b/core/http/react-ui/e2e/backends-lifecycle.spec.js
@@ -0,0 +1,295 @@
+import { test, expect } from './coverage-fixtures.js'
+
+const catalogBackends = [
+  {
+    id: 'llama-cpp',
+    name: 'llama-cpp',
+    description: 'GGUF inference',
+    installed: true,
+    version: '1.0.0',
+    isMeta: true,
+    isAlias: false,
+    isDevelopment: false,
+    tags: ['chat'],
+  },
+  {
+    id: 'llama-cpp-cuda12',
+    name: 'llama-cpp-cuda12',
+    description: 'CUDA variant',
+    installed: true,
+    version: '1.0.0',
+    isAlias: true,
+    isDevelopment: false,
+    tags: ['chat'],
+  },
+  {
+    id: 'llama-cpp-development',
+    name: 'llama-cpp-development',
+    description: 'Development build',
+    installed: true,
+    version: '1.1.0-dev',
+    isMeta: true,
+    isAlias: false,
+    isDevelopment: true,
+    tags: ['chat'],
+  },
+]
+
+const installedBackends = [
+  {
+    Name: 'llama-cpp',
+    IsSystem: false,
+    Version: '1.0.0',
+    Metadata: { version: '1.0.0', installed_at: '2026-08-15T12:00:00Z' },
+  },
+  {
+    Name: 'llama-cpp-cuda12',
+    IsSystem: false,
+    Version: '1.0.0',
+    Metadata: { version: '1.0.0' },
+  },
+  {
+    Name: 'llama-cpp-development',
+    IsSystem: false,
+    Version: '1.1.0-dev',
+    Metadata: { version: '1.1.0-dev' },
+  },
+]
+
+const upgrades = {
+  'llama-cpp': {
+    backend_name: 'llama-cpp',
+    installed_version: '1.0.0',
+    available_version: '1.1.0',
+  },
+}
+
+async function mockBackendLifecycle(page) {
+  await page.route('**/api/backends/upgrades', route => route.fulfill({ json: upgrades }))
+  await page.route('**/api/backends?*', route => route.fulfill({
+    json: { backends: catalogBackends },
+  }))
+  await page.route('**/backends', route => {
+    if (new URL(route.request().url()).pathname === '/backends') {
+      return route.fulfill({ json: installedBackends })
+    }
+    return route.continue()
+  })
+  await page.route('**/api/nodes', route => route.fulfill({
+    json: [{ id: 'worker-1', name: 'GPU worker', status: 'healthy', node_type: 'backend' }],
+  }))
+}
+
+const backendRow = (page, name) => page.locator(`[data-entity="${name}"]`)
+
+test.describe('Backends lifecycle page', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockBackendLifecycle(page)
+  })
+
+  test('defaults invalid or absent views to Catalog and switches to Installed', async ({ page }) => {
+    await page.goto('/app/backends')
+
+    const catalog = page.getByRole('link', { name: 'Catalog', exact: true })
+    const installed = page.getByRole('link', { name: 'Installed', exact: true })
+    await expect(catalog).toHaveAttribute('aria-current', 'page')
+    await expect(installed).not.toHaveAttribute('aria-current', 'page')
+
+    await page.goto('/app/backends?view=unknown')
+
+    await expect(catalog).toHaveAttribute('aria-current', 'page')
+    await expect(installed).not.toHaveAttribute('aria-current', 'page')
+
+    await installed.click()
+    await expect(page).toHaveURL(/[?&]view=installed(?:&|$)/)
+    await expect(installed).toHaveAttribute('aria-current', 'page')
+    await expect(backendRow(page, 'llama-cpp')).toBeVisible()
+
+    await page.getByRole('textbox', { name: /search installed backends/i }).fill('llama')
+    await expect(page).toHaveURL(/[?&]q=llama(?:&|$)/)
+    await page.getByRole('tab', { name: /user/i }).click()
+    await expect(page).toHaveURL(/[?&]state=user(?:&|$)/)
+  })
+
+  test('restores Installed search, state, selection, and target-node scope from the URL', async ({ page }) => {
+    await page.goto('/app/backends?view=installed&q=llama&state=upgradable&backend=llama-cpp&target=worker-1')
+
+    await expect(page.getByRole('link', { name: 'Installed', exact: true })).toHaveAttribute('aria-current', 'page')
+    await expect(page.getByRole('textbox', { name: /search installed backends/i })).toHaveValue('llama')
+    await expect(page.getByRole('tab', { name: /updates/i })).toHaveAttribute('aria-selected', 'true')
+    await expect(page.locator('[data-testid="backends-installed-pane"]')).toContainText('llama-cpp')
+    await expect(page).toHaveURL(/[?&]target=worker-1(?:&|$)/)
+
+    await page.getByRole('link', { name: 'Catalog', exact: true }).click()
+    await expect(page).toHaveURL(/[?&]target=worker-1(?:&|$)/)
+    await expect(page.getByText(/installing only on GPU worker/i)).toBeVisible()
+    await backendRow(page, 'llama-cpp').click()
+    await expect(page).toHaveURL(/[?&]backend=llama-cpp(?:&|$)/)
+    await expect(page).toHaveURL(/[?&]target=worker-1(?:&|$)/)
+  })
+
+  test('keeps Upgrade and Reinstall on the same upgradable backend', async ({ page }) => {
+    let reinstallRequests = 0
+    await page.route('**/api/backends/install/llama-cpp', route => {
+      reinstallRequests += 1
+      return route.fulfill({ json: { status: 'ok' } })
+    })
+    await page.goto('/app/backends?view=installed&backend=llama-cpp')
+
+    await expect(page.getByRole('button', { name: /upgrade to v1\.1\.0/i })).toBeVisible()
+    await page.getByRole('button', { name: 'Actions for llama-cpp' }).click()
+    const reinstall = page.getByRole('menuitem', { name: 'Reinstall backend' })
+    await expect(reinstall).toBeVisible()
+    await reinstall.click()
+    await expect.poll(() => reinstallRequests).toBe(1)
+  })
+
+  test('keeps Reinstall beside Upgrade for an installed backend in Catalog', async ({ page }) => {
+    await page.goto('/app/backends?view=catalog&backend=llama-cpp')
+
+    await expect(page.locator('button[title^="Upgrade to"]')).toBeVisible()
+    await expect(page.locator('button[title="Reinstall"]')).toBeVisible()
+  })
+
+  test('shows a backend action failure inline with the selected backend', async ({ page }) => {
+    await page.route('**/api/backends/install/llama-cpp', route => route.fulfill({
+      status: 500,
+      json: { error: 'registry unavailable' },
+    }))
+    await page.goto('/app/backends?view=installed&backend=llama-cpp')
+
+    await page.getByRole('button', { name: 'Actions for llama-cpp' }).click()
+    await page.getByRole('menuitem', { name: 'Reinstall backend' }).click()
+
+    const detail = page.locator('[data-testid="backends-installed-pane"]')
+    await expect(detail.getByRole('alert')).toContainText('registry unavailable')
+  })
+
+  test('shows Upgrade All failures in the rendered global inline error', async ({ page }) => {
+    await page.route('**/api/backends/upgrade/llama-cpp', route => route.fulfill({
+      status: 500,
+      json: { error: 'upgrade registry unavailable' },
+    }))
+    await page.goto('/app/backends?view=installed')
+
+    await page.getByRole('button', { name: /upgrade all/i }).click()
+
+    await expect(page.getByRole('alert')).toContainText('upgrade registry unavailable')
+  })
+
+  test('continues Upgrade All after an earlier backend fails', async ({ page }) => {
+    let laterUpgradeRequests = 0
+    await page.route('**/api/backends/upgrades', route => route.fulfill({
+      json: {
+        ...upgrades,
+        'llama-cpp-cuda12': {
+          backend_name: 'llama-cpp-cuda12',
+          installed_version: '1.0.0',
+          available_version: '1.1.0',
+        },
+      },
+    }))
+    await page.route('**/api/backends/upgrade/llama-cpp', route => route.fulfill({
+      status: 500,
+      json: { error: 'first registry unavailable' },
+    }))
+    await page.route('**/api/backends/upgrade/llama-cpp-cuda12', route => {
+      laterUpgradeRequests += 1
+      return route.fulfill({ json: { status: 'ok' } })
+    })
+    await page.goto('/app/backends?view=installed')
+
+    await page.getByRole('button', { name: /upgrade all/i }).click()
+
+    await expect(page.getByRole('alert')).toContainText('first registry unavailable')
+    await expect.poll(() => laterUpgradeRequests).toBe(1)
+  })
+
+  test('refetches term-sensitive Catalog results after Installed changes and browser history', async ({ page }) => {
+    const requestedTerms = []
+    const visionBackend = {
+      id: 'vision-cpp',
+      name: 'vision-cpp',
+      description: 'Vision inference',
+      installed: false,
+      isMeta: true,
+      isAlias: false,
+      isDevelopment: false,
+      tags: ['vision'],
+    }
+    await page.route('**/api/backends?*', route => {
+      const term = new URL(route.request().url()).searchParams.get('term') || ''
+      requestedTerms.push(term)
+      const backends = term === 'vision'
+        ? [visionBackend]
+        : term === 'llama'
+          ? [catalogBackends[0]]
+          : catalogBackends
+      return route.fulfill({ json: { backends } })
+    })
+
+    await page.goto('/app/backends?view=catalog&q=llama')
+    await expect.poll(() => requestedTerms.at(-1)).toBe('llama')
+    await expect(backendRow(page, 'llama-cpp')).toBeVisible()
+
+    await page.getByRole('link', { name: 'Installed', exact: true }).click()
+    await page.getByRole('textbox', { name: /search installed backends/i }).fill('vision')
+    await page.getByRole('link', { name: 'Catalog', exact: true }).click()
+    await expect.poll(() => requestedTerms.at(-1)).toBe('vision')
+    await expect(backendRow(page, 'vision-cpp')).toBeVisible()
+
+    await page.goBack()
+    await expect(page.getByRole('link', { name: 'Installed', exact: true })).toHaveAttribute('aria-current', 'page')
+    await page.goBack()
+    await expect(page.getByRole('link', { name: 'Catalog', exact: true })).toHaveAttribute('aria-current', 'page')
+    await expect(page.getByPlaceholder(/search backends/i)).toHaveValue('llama')
+    await expect.poll(() => requestedTerms.at(-1)).toBe('llama')
+    await expect(backendRow(page, 'llama-cpp')).toBeVisible()
+    await expect(backendRow(page, 'vision-cpp')).toHaveCount(0)
+  })
+
+  test('keeps variants and development builds opt-in', async ({ page }) => {
+    await page.goto('/app/backends?view=installed')
+
+    await expect(backendRow(page, 'llama-cpp')).toBeVisible()
+    await expect(backendRow(page, 'llama-cpp-cuda12')).toHaveCount(0)
+    await expect(backendRow(page, 'llama-cpp-development')).toHaveCount(0)
+
+    await page.getByText(/variants \(1\)/i).click()
+    await page.getByText(/development \(1\)/i).click()
+    await expect(backendRow(page, 'llama-cpp-cuda12')).toBeVisible()
+    await expect(backendRow(page, 'llama-cpp-development')).toBeVisible()
+  })
+
+  test('preserves confirmation before deleting an installed backend', async ({ page }) => {
+    let deleteRequests = 0
+    await page.route('**/api/backends/system/delete/llama-cpp', route => {
+      deleteRequests += 1
+      return route.fulfill({ json: { status: 'ok' } })
+    })
+    await page.goto('/app/backends?view=installed&backend=llama-cpp')
+
+    await page.getByRole('button', { name: 'Actions for llama-cpp' }).click()
+    await page.getByRole('menuitem', { name: 'Delete backend' }).click()
+    await expect(page.getByRole('alertdialog')).toContainText('Delete backend llama-cpp?')
+    expect(deleteRequests).toBe(0)
+
+    await page.getByRole('button', { name: 'Delete', exact: true }).click()
+    await expect.poll(() => deleteRequests).toBe(1)
+  })
+
+  test('narrow detail Back restores focus to the originating backend', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 800 })
+    await page.goto('/app/backends?view=installed')
+
+    const backend = backendRow(page, 'llama-cpp')
+    await backend.click()
+    await expect(page.locator('[data-testid="backends-installed-pane"]')).toContainText('llama-cpp')
+    await expect(backend).not.toBeVisible()
+
+    await page.locator('[data-testid="backends-installed-back"]').click()
+
+    await expect(backend).toBeVisible()
+    await expect(backend).toBeFocused()
+  })
+})
diff --git a/core/http/react-ui/e2e/canonical-resource-navigation.spec.js b/core/http/react-ui/e2e/canonical-resource-navigation.spec.js
new file mode 100644
index 000000000..7e2835589
--- /dev/null
+++ b/core/http/react-ui/e2e/canonical-resource-navigation.spec.js
@@ -0,0 +1,56 @@
+import { test, expect } from './coverage-fixtures.js'
+
+function urlState(page) {
+  const url = new URL(page.url())
+  return { path: url.pathname, params: url.searchParams }
+}
+
+test.describe('Canonical resource navigation', () => {
+  test('redirects legacy model management state and replaces browser history', async ({ page }) => {
+    await page.goto('/app')
+    await page.goto('/app/manage?tab=models&sel=alpha&mq=alp&mf=running')
+
+    await expect.poll(() => urlState(page).path).toBe('/app/models')
+    const state = urlState(page)
+    expect(state.params.get('view')).toBe('installed')
+    expect(state.params.get('model')).toBe('alpha')
+    expect(state.params.get('q')).toBe('alp')
+    expect(state.params.get('state')).toBe('running')
+
+    await page.goBack()
+    await expect(page).toHaveURL(/\/app\/?$/)
+  })
+
+  test('redirects legacy backend management state including visibility flags', async ({ page }) => {
+    await page.goto('/app/manage?tab=backends&sel=llama-cpp&bq=llama&bf=user&bv=1&bd=1')
+
+    await expect.poll(() => urlState(page).path).toBe('/app/backends')
+    const state = urlState(page)
+    expect(state.params.get('view')).toBe('installed')
+    expect(state.params.get('backend')).toBe('llama-cpp')
+    expect(state.params.get('q')).toBe('llama')
+    expect(state.params.get('state')).toBe('user')
+    expect(state.params.get('show_all')).toBe('1')
+    expect(state.params.get('development')).toBe('1')
+  })
+
+  test('defaults legacy management links to Installed Models', async ({ page }) => {
+    await page.goto('/app/manage')
+
+    await expect.poll(() => urlState(page).path).toBe('/app/models')
+    expect(urlState(page).params.get('view')).toBe('installed')
+  })
+
+  test('names the canonical sidebar destination Models and removes Host from Operate', async ({ page }) => {
+    await page.goto('/app')
+
+    const sidebar = page.locator('.sidebar-nav')
+    await expect(sidebar.getByRole('link', { name: 'Models', exact: true })).toBeVisible()
+    await expect(sidebar.getByRole('link', { name: 'Discover', exact: true })).toHaveCount(0)
+
+    await sidebar.getByRole('link', { name: 'Operate', exact: true }).click()
+    const operateRail = page.locator('.console-rail')
+    await expect(operateRail.getByRole('link', { name: /Backends/ })).toBeVisible()
+    await expect(operateRail.getByRole('link', { name: /Host/ })).toHaveCount(0)
+  })
+})
diff --git a/core/http/react-ui/e2e/chrome-audit.spec.js b/core/http/react-ui/e2e/chrome-audit.spec.js
index 728701003..43dd8525a 100644
--- a/core/http/react-ui/e2e/chrome-audit.spec.js
+++ b/core/http/react-ui/e2e/chrome-audit.spec.js
@@ -8,7 +8,7 @@ const ROUTES = [
   '/app', '/app/chat', '/app/models', '/app/studio', '/app/talk',
   '/app/agents', '/app/skills', '/app/collections', '/app/agent-jobs',
   '/app/fine-tune', '/app/quantize', '/app/face', '/app/voice',
-  '/app/manage', '/app/backends', '/app/activity', '/app/operate',
+  '/app/models?view=installed', '/app/backends', '/app/activity', '/app/operate',
   '/app/settings', '/app/traces', '/app/usage', '/app/nodes', '/app/p2p',
   '/app/voice-library', '/app/voice-library/new', '/app/account',
 ]
diff --git a/core/http/react-ui/e2e/console-narrow.spec.js b/core/http/react-ui/e2e/console-narrow.spec.js
index 2497c657b..a7f7bfc73 100644
--- a/core/http/react-ui/e2e/console-narrow.spec.js
+++ b/core/http/react-ui/e2e/console-narrow.spec.js
@@ -1,26 +1,16 @@
 import { test, expect } from './coverage-fixtures.js'
 
-// Small-screen behaviour of the Operate console and the dashboard stat cards.
-//
-// Both defects here are about a narrow viewport but neither is only a narrow
-// viewport problem: the stat cards were being laid out by the wrong rule at
-// every width, and the rail's height was never bounded.
-
 test.describe('Operate console on a narrow screen', () => {
-  test('expanding the rail leaves the page still on screen', async ({ page }) => {
+  test('expanding the rail leaves the overview on screen', async ({ page }) => {
     await page.setViewportSize({ width: 390, height: 800 })
-    await page.goto('/app/manage')
+    await page.goto('/app/operate')
 
     const toggle = page.locator('.console-rail-toggle')
     await expect(toggle).toBeVisible()
     await toggle.click()
     await expect(page.locator('.console-rail-groups')).toBeVisible()
 
-    // Thirteen destinations in one column is taller than a phone. If opening
-    // the menu pushes the page's own heading past the fold, the menu has
-    // replaced the page instead of annotating it.
-    // Manage titles itself with .view-bar__title rather than .page-title.
-    const heading = page.locator('.page-title, .view-bar__title').first()
+    const heading = page.getByRole('heading', { name: 'Overview', exact: true })
     const box = await heading.boundingBox()
     expect(box).not.toBeNull()
     expect(box.y).toBeLessThan(800)
@@ -28,7 +18,7 @@ test.describe('Operate console on a narrow screen', () => {
 
   test('the rail scrolls internally rather than growing without bound', async ({ page }) => {
     await page.setViewportSize({ width: 390, height: 800 })
-    await page.goto('/app/manage')
+    await page.goto('/app/operate')
     await page.locator('.console-rail-toggle').click()
 
     const groups = page.locator('.console-rail-groups')
@@ -38,15 +28,13 @@ test.describe('Operate console on a narrow screen', () => {
   })
 })
 
-test.describe('Headline figures', () => {
-  // Host used shadowed StatCards; it now shares the Operate overview's hairline
-  // figure strip, so the guard is that its labels stay legible, not that it
-  // keeps a card gap.
-  for (const width of [768, 1024]) {
-    test(`Host figure labels are not clipped at ${width}px`, async ({ page }) => {
+test.describe('Operate headline figures', () => {
+  for (const width of [390, 768, 1024]) {
+    test(`labels remain legible at ${width}px`, async ({ page }) => {
       await page.setViewportSize({ width, height: 1000 })
-      await page.goto('/app/manage')
-      const labels = page.locator('.stat-strip__label')
+      await page.goto('/app/operate')
+
+      const labels = page.locator('.operate-headline dt')
       await expect(labels.first()).toBeVisible()
       const clipped = await labels.evaluateAll(els =>
         els.filter(el => el.scrollWidth > el.clientWidth + 1).map(el => el.textContent))
@@ -54,48 +42,13 @@ test.describe('Headline figures', () => {
     })
   }
 
-  test('a Host figure routes into the thing it counts', async ({ page }) => {
-    await page.setViewportSize({ width: 1280, height: 1000 })
-    await page.goto('/app/manage')
-    const cell = page.locator('.stat-strip__cell').first()
-    await expect(cell).toBeVisible()
-    // A count is worth more when it is also the way to what it counted.
-    await expect(cell).toHaveJSProperty('tagName', 'BUTTON')
-  })
+  test('values remain legible in dark theme', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 950 })
+    await page.goto('/app/operate')
 
-  test('the figure strip keeps its height inside the flex column', async ({ page }) => {
-    // .page--app is a flex column whose split view takes flex:1, so a child
-    // with no intrinsic minimum gets shrunk to nothing. This strip did exactly
-    // that and rendered 2px tall with four invisible cells.
-    await page.setViewportSize({ width: 1440, height: 900 })
-    await page.goto('/app/manage')
-    const strip = page.locator('.manage-summary')
-    await expect(strip).toBeVisible()
-    const h = await strip.evaluate(el => el.getBoundingClientRect().height)
-    expect(h).toBeGreaterThan(40)
-  })
-})
-
-test.describe('Headline figure contrast', () => {
-  test('every figure is legible against the cell it sits on', async ({ page }) => {
-    // A <button> does not inherit colour, so a value with no tone rule fell
-    // back to the UA's `buttontext` — pure black on the dark ground, invisible.
-    await page.setViewportSize({ width: 1440, height: 950 })
-    await page.goto('/app/manage')
-    const bad = await page.locator('.stat-strip__value').evaluateAll(els => els
+    const invisible = await page.locator('.operate-headline__value').evaluateAll(els => els
       .map(el => ({ text: el.textContent, color: getComputedStyle(el).color }))
-      .filter(v => v.color === 'rgb(0, 0, 0)'))
-    expect(bad).toEqual([])
-  })
-
-  test('the strip keeps its top margin against the shared shorthand', async ({ page }) => {
-    // `.stat-strip` declares `margin: 0 0 ...` later in the file, which was
-    // silently resetting this element's top margin and leaving it flush
-    // against the resources panel above it.
-    await page.setViewportSize({ width: 1440, height: 950 })
-    await page.goto('/app/manage')
-    const top = await page.locator('.manage-summary')
-      .evaluate(el => parseFloat(getComputedStyle(el).marginTop))
-    expect(top).toBeGreaterThan(12)
+      .filter(value => value.color === 'rgb(0, 0, 0)'))
+    expect(invisible).toEqual([])
   })
 })
diff --git a/core/http/react-ui/e2e/discover-height.spec.js b/core/http/react-ui/e2e/discover-height.spec.js
index 7ad7ba501..e949b2abf 100644
--- a/core/http/react-ui/e2e/discover-height.spec.js
+++ b/core/http/react-ui/e2e/discover-height.spec.js
@@ -19,7 +19,7 @@ const MOCK = {
   availableModels: 2, installedModels: 0, totalPages: 1, currentPage: 1,
 }
 
-test.describe('Discover - the view scrolls, not the page', () => {
+test.describe('Models Explore - 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) }))
diff --git a/core/http/react-ui/e2e/discover-search-focus.spec.js b/core/http/react-ui/e2e/discover-search-focus.spec.js
index d0c60425f..0fdf41a89 100644
--- a/core/http/react-ui/e2e/discover-search-focus.spec.js
+++ b/core/http/react-ui/e2e/discover-search-focus.spec.js
@@ -12,7 +12,7 @@ const MOCK = {
   availableModels: 2, installedModels: 0, totalPages: 1, currentPage: 1,
 }
 
-test.describe('Discover - searching keeps the view', () => {
+test.describe('Models Explore - searching keeps the view', () => {
   test('a refetch keeps the search box, its focus and its value', async ({ page }) => {
     let calls = 0
     await page.route('**/api/models*', async (route) => {
diff --git a/core/http/react-ui/e2e/home-lanes.spec.js b/core/http/react-ui/e2e/home-lanes.spec.js
index 1db0b6703..846d92f49 100644
--- a/core/http/react-ui/e2e/home-lanes.spec.js
+++ b/core/http/react-ui/e2e/home-lanes.spec.js
@@ -69,7 +69,7 @@ test.describe('Home resident models', () => {
     await page.goto('/app')
     const lanes = page.locator('.lanes--jump .lane')
     await expect(lanes).toHaveCount(3)
-    await expect(lanes.first()).toContainText('Discover')
+    await expect(lanes.first()).toContainText('Models')
   })
 
   test('nothing resident still says so', async ({ page }) => {
diff --git a/core/http/react-ui/e2e/host-split-view.spec.js b/core/http/react-ui/e2e/host-split-view.spec.js
deleted file mode 100644
index e9875bb93..000000000
--- a/core/http/react-ui/e2e/host-split-view.spec.js
+++ /dev/null
@@ -1,69 +0,0 @@
-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/installed-model-action-menu-position.spec.js b/core/http/react-ui/e2e/installed-model-action-menu-position.spec.js
new file mode 100644
index 000000000..c1bb337cc
--- /dev/null
+++ b/core/http/react-ui/e2e/installed-model-action-menu-position.spec.js
@@ -0,0 +1,29 @@
+import { test, expect } from './coverage-fixtures.js'
+
+// Regression: opening the installed model detail menu must not move the page
+// or detach the fixed-position menu from its trigger.
+test('the installed model action menu stays beside its trigger', async ({ page }) => {
+  await page.setViewportSize({ width: 1024, height: 500 })
+  await page.goto('/app/models?view=installed')
+  await page.locator('[data-testid="installed-models-rail-item"]').first().click()
+
+  const trigger = page.locator('button.action-menu__trigger').first()
+  await expect(trigger).toBeVisible()
+  await trigger.scrollIntoViewIfNeeded()
+  const scrollBefore = await page.evaluate(() => window.scrollY)
+  await trigger.click()
+
+  const menu = page.locator('[role="menu"]')
+  await expect(menu).toBeVisible()
+  expect(await page.evaluate(() => window.scrollY)).toBe(scrollBefore)
+
+  const triggerBox = await trigger.boundingBox()
+  const menuBox = await menu.boundingBox()
+  expect(triggerBox).not.toBeNull()
+  expect(menuBox).not.toBeNull()
+  const tracksTrigger =
+    Math.abs(menuBox.y - (triggerBox.y + triggerBox.height)) < 24 ||
+    Math.abs((menuBox.y + menuBox.height) - triggerBox.y) < 24
+  expect(tracksTrigger).toBe(true)
+  await expect(page.locator('body > .popover')).toHaveCount(1)
+})
diff --git a/core/http/react-ui/e2e/installed-model-logs-link.spec.js b/core/http/react-ui/e2e/installed-model-logs-link.spec.js
new file mode 100644
index 000000000..62fcadf27
--- /dev/null
+++ b/core/http/react-ui/e2e/installed-model-logs-link.spec.js
@@ -0,0 +1,24 @@
+import { test, expect } from './coverage-fixtures.js'
+
+test.describe('Installed model backend logs link', () => {
+  test('the detail action menu exposes Backend logs with a terminal icon', async ({ page }) => {
+    await page.goto('/app/models?view=installed')
+    await page.locator('[data-testid="installed-models-rail-item"]').first().click()
+    const trigger = page.locator('button.action-menu__trigger').first()
+    await expect(trigger).toBeVisible()
+    await trigger.click()
+
+    const logsItem = page.getByRole('menuitem', { name: 'Backend logs' })
+    await expect(logsItem).toBeVisible()
+    await expect(logsItem.locator('i.fa-terminal')).toBeVisible()
+  })
+
+  test('Backend logs navigates to the selected model logs', async ({ page }) => {
+    await page.goto('/app/models?view=installed')
+    await page.locator('[data-testid="installed-models-rail-item"]').first().click()
+    await page.locator('button.action-menu__trigger').first().click()
+    await page.getByRole('menuitem', { name: 'Backend logs' }).click()
+
+    await expect(page).toHaveURL(/\/app\/backend-logs\//)
+  })
+})
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
deleted file mode 100644
index 138edc954..000000000
--- a/core/http/react-ui/e2e/manage-action-menu-position.spec.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { test, expect } from './coverage-fixtures.js'
-
-// Regression: opening a row's kebab (ActionMenu) on /app/manage used to snap
-// the page scroll to the top and render the menu detached from its trigger,
-// making it impossible to operate. Two causes: the menu auto-focus scrolled
-// the page (no preventScroll), and the position:fixed popover was rendered
-// 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 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 page.locator('[data-testid="host-rail-item"]').first().click()
-
-    const trigger = page.locator('button.action-menu__trigger').first()
-    await expect(trigger).toBeVisible()
-
-    // Bring the trigger into view ourselves first, so the only scroll we then
-    // measure is the one the menu would (wrongly) cause - not Playwright's own
-    // scroll-into-view before the click.
-    await trigger.scrollIntoViewIfNeeded()
-    const scrollBefore = await page.evaluate(() => window.scrollY)
-    await trigger.click()
-
-    const menu = page.locator('[role="menu"]')
-    await expect(menu).toBeVisible()
-
-    // Behavioural symptom 1: focusing the menu must not yank the page scroll.
-    const scrollAfter = await page.evaluate(() => window.scrollY)
-    expect(scrollAfter).toBe(scrollBefore)
-
-    // Behavioural symptom 2: the menu must sit next to its trigger, not float
-    // at the top of the window where it can't be operated.
-    const triggerBox = await trigger.boundingBox()
-    const menuBox = await menu.boundingBox()
-    expect(triggerBox).not.toBeNull()
-    expect(menuBox).not.toBeNull()
-    // Menu top is within ~24px of the trigger's bottom (below) or above it
-    // (flipped) — in all cases it tracks the trigger, never floating at y≈0.
-    const tracksTrigger =
-      Math.abs(menuBox.y - (triggerBox.y + triggerBox.height)) < 24 ||
-      Math.abs((menuBox.y + menuBox.height) - triggerBox.y) < 24
-    expect(tracksTrigger).toBe(true)
-
-    // Mechanism: the popover must be portaled to document.body so position:fixed
-    // resolves against the viewport, not a transformed ancestor row.
-    await expect(page.locator('body > .popover')).toHaveCount(1)
-  })
-})
diff --git a/core/http/react-ui/e2e/manage-logs-link.spec.js b/core/http/react-ui/e2e/manage-logs-link.spec.js
deleted file mode 100644
index 55311e538..000000000
--- a/core/http/react-ui/e2e/manage-logs-link.spec.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { test, expect } from './coverage-fixtures.js'
-
-test.describe('Manage Page - Backend Logs Link', () => {
-  test('the pane action menu exposes Backend logs with a terminal icon', async ({ page }) => {
-    await page.goto('/app/manage')
-    // 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()
-
-    const logsItem = page.getByRole('menuitem', { name: 'Backend logs' })
-    await expect(logsItem).toBeVisible()
-    await expect(logsItem.locator('i.fa-terminal')).toBeVisible()
-  })
-
-  test('Backend logs menu item navigates to backend-logs page', async ({ page }) => {
-    await page.goto('/app/manage')
-    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()
-
-    const logsItem = page.getByRole('menuitem', { name: 'Backend logs' })
-    await expect(logsItem).toBeVisible()
-    await logsItem.click()
-
-    await expect(page).toHaveURL(/\/app\/backend-logs\//)
-  })
-})
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 695eab01c..17ab4ea13 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
@@ -44,21 +44,20 @@ test.describe('Model Editor — Back navigation', () => {
     await mockEditorEndpoints(page)
   })
 
-  test('Back returns to Manage with a "Back to System" caption', async ({ page }) => {
-    await page.goto('/app/manage')
-    // Actions live in the pane now, so select something first.
-    await page.locator('[data-testid="host-rail-item"]').first().click()
+  test('Back returns to Installed Models with a "Back to Models" caption', async ({ page }) => {
+    await page.goto('/app/models?view=installed')
+    await page.locator('[data-testid="installed-models-rail-item"]').first().click()
     const trigger = page.locator('button.action-menu__trigger').first()
     await expect(trigger).toBeVisible()
     await trigger.click()
     await page.getByRole('menuitem', { name: 'Edit configuration' }).click()
 
     await expect(page).toHaveURL(/\/app\/model-editor\//)
-    const back = page.getByRole('button', { name: /Back to System/ })
+    const back = page.getByRole('button', { name: /Back to Models/ })
     await expect(back).toBeVisible({ timeout: 10_000 })
 
     await back.click()
-    await expect(page).toHaveURL(/\/app\/manage/)
+    await expect(page).toHaveURL(/\/app\/models\?view=installed/)
   })
 
   test('returns to the originating Middleware tab (?tab=routing) it was opened from', async ({ page }) => {
@@ -86,8 +85,8 @@ test.describe('Model Editor — Back navigation', () => {
     await expect(page.getByText('smart-router').first()).toBeVisible()
   })
 
-  test('falls back to "Back to Manage" on a direct visit with no origin state', async ({ page }) => {
+  test('falls back to Installed Models on a direct visit with no origin state', async ({ page }) => {
     await page.goto('/app/model-editor/mock-model')
-    await expect(page.getByRole('button', { name: /Back to System/ })).toBeVisible({ timeout: 10_000 })
+    await expect(page.getByRole('button', { name: /Back to Models/ })).toBeVisible({ timeout: 10_000 })
   })
 })
diff --git a/core/http/react-ui/e2e/models-gallery.spec.js b/core/http/react-ui/e2e/models-gallery.spec.js
index f7d129104..4d6ab5f45 100644
--- a/core/http/react-ui/e2e/models-gallery.spec.js
+++ b/core/http/react-ui/e2e/models-gallery.spec.js
@@ -1677,7 +1677,7 @@ const MOCK_MULTI_CONTEXT_ESTIMATES = {
   },
 };
 
-test.describe("Models Gallery - Discover split view", () => {
+test.describe("Models Gallery - Explore split view", () => {
   test.beforeEach(async ({ page }) => {
     await page.route("**/api/models*", (route) => {
       route.fulfill({
diff --git a/core/http/react-ui/e2e/models-lifecycle.spec.js b/core/http/react-ui/e2e/models-lifecycle.spec.js
new file mode 100644
index 000000000..3a8d125a5
--- /dev/null
+++ b/core/http/react-ui/e2e/models-lifecycle.spec.js
@@ -0,0 +1,274 @@
+import { test, expect } from './coverage-fixtures.js'
+
+const installedModels = [
+  {
+    id: 'alpha',
+    backend: 'llama-cpp',
+    capabilities: ['FLAG_CHAT'],
+    pinned: true,
+  },
+  {
+    id: 'beta',
+    backend: 'llama-cpp',
+    capabilities: ['embeddings'],
+  },
+  {
+    id: 'all',
+    backend: 'llama-cpp',
+    capabilities: ['chat'],
+  },
+  {
+    id: 'remote-model',
+    backend: 'llama-cpp',
+    capabilities: ['chat'],
+    loaded_on: [{
+      node_id: 'worker-1',
+      node_name: 'Worker one',
+      node_status: 'healthy',
+      state: 'loaded',
+    }],
+  },
+  {
+    id: 'disabled-model',
+    backend: 'llama-cpp',
+    capabilities: ['chat'],
+    disabled: true,
+  },
+]
+
+const galleryModels = installedModels.map(model => ({
+  name: model.id,
+  backend: model.backend,
+  installed: true,
+  description: `Gallery details for ${model.id}`,
+  tags: model.capabilities,
+}))
+
+async function mockModelLifecycle(page) {
+  let loadedModels = ['alpha']
+
+  await page.route('**/api/models/capabilities', route => route.fulfill({
+    contentType: 'application/json',
+    body: JSON.stringify({ data: installedModels }),
+  }))
+  await page.route('**/api/models?*', route => route.fulfill({
+    contentType: 'application/json',
+    body: JSON.stringify({
+      models: galleryModels,
+      allBackends: ['llama-cpp'],
+      availableModels: galleryModels.length,
+      installedModels: galleryModels.length,
+      totalPages: 1,
+    }),
+  }))
+  await page.route('**/api/models', route => route.fulfill({
+    contentType: 'application/json',
+    body: JSON.stringify({
+      models: galleryModels,
+      allBackends: ['llama-cpp'],
+      availableModels: galleryModels.length,
+      installedModels: galleryModels.length,
+      totalPages: 1,
+    }),
+  }))
+  await page.route('**/api/models/estimate/*', route => route.fulfill({
+    contentType: 'application/json',
+    body: JSON.stringify({}),
+  }))
+  await page.route('**/api/backends/usecases', route => route.fulfill({
+    contentType: 'application/json',
+    body: JSON.stringify({ 'llama-cpp': ['chat', 'embeddings'] }),
+  }))
+  await page.route('**/api/aliases', route => route.fulfill({
+    contentType: 'application/json',
+    body: JSON.stringify([]),
+  }))
+  await page.route('**/api/nodes', route => route.fulfill({
+    contentType: 'application/json',
+    body: JSON.stringify([{ id: 'worker-1', name: 'Worker one' }]),
+  }))
+  await page.route('**/system', route => route.fulfill({
+    contentType: 'application/json',
+    body: JSON.stringify({ loaded_models: loadedModels.map(id => ({ id })) }),
+  }))
+  await page.route('**/backend/shutdown', async route => {
+    const body = route.request().postDataJSON()
+    loadedModels = loadedModels.filter(id => id !== body.model)
+    await route.fulfill({ contentType: 'application/json', body: '{}' })
+  })
+
+}
+
+const installedRail = page => page.locator('[data-testid="installed-models"]')
+const installedPane = page => page.locator('[data-testid="installed-models-pane"]')
+
+test.describe('Models lifecycle', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockModelLifecycle(page)
+  })
+
+  test('Explore is the default for absent and invalid views', async ({ page }) => {
+    await page.goto('/app/models')
+
+    const explore = page.getByRole('link', { name: 'Explore', exact: true })
+    const installed = page.getByRole('link', { name: 'Installed', exact: true })
+    await expect(explore).toHaveAttribute('aria-current', 'page')
+    await expect(installed).not.toHaveAttribute('aria-current', 'page')
+    await expect(page.locator('[data-testid="discover"]')).toBeVisible()
+
+    await page.goto('/app/models?view=not-a-view')
+    await expect(explore).toHaveAttribute('aria-current', 'page')
+    await expect(page.locator('[data-testid="discover"]')).toBeVisible()
+  })
+
+  test('an installed Explore model opens or moves to management without destructive actions', async ({ page }) => {
+    await page.goto('/app/models?model=alpha')
+
+    await expect(page.getByRole('button', { name: 'Open Chat' })).toBeVisible()
+    const manage = page.getByRole('button', { name: 'Manage installation' })
+    await expect(manage).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Delete', exact: true })).toHaveCount(0)
+    await expect(page.getByRole('button', { name: 'Reinstall', exact: true })).toHaveCount(0)
+
+    await manage.click()
+    await expect(page).toHaveURL(/[?&]view=installed/)
+    await expect(page).toHaveURL(/[?&]model=alpha/)
+  })
+
+  test('switches to Installed and restores URL state through history', async ({ page }) => {
+    await page.goto('/app/models')
+    await page.getByRole('link', { name: 'Installed', exact: true }).click()
+
+    await expect(page).toHaveURL(/[?&]view=installed/)
+    await expect(page.getByRole('link', { name: 'Installed', exact: true })).toHaveAttribute('aria-current', 'page')
+    await expect(installedRail(page)).toBeVisible()
+
+    const search = page.getByRole('textbox', { name: 'Search installed models' })
+    await search.fill('beta')
+    await page.getByRole('tab', { name: /Idle$/ }).click()
+    await page.locator('[data-entity="beta"]').click()
+
+    await expect(page).toHaveURL(/[?&]q=beta/)
+    await expect(page).toHaveURL(/[?&]state=idle/)
+    await expect(page).toHaveURL(/[?&]model=beta/)
+    await expect(installedPane(page)).toContainText('beta')
+
+    await page.goBack()
+    await expect(page).not.toHaveURL(/[?&]model=beta/)
+    await expect(search).toHaveValue('beta')
+    await expect(page.getByRole('tab', { name: /Idle$/ })).toHaveAttribute('aria-selected', 'true')
+
+    await page.goForward()
+    await expect(page).toHaveURL(/[?&]model=beta/)
+    await expect(installedPane(page)).toContainText('beta')
+  })
+
+  test('restores a selected installed model and runtime state from the URL', async ({ page }) => {
+    await page.goto('/app/models?view=installed&q=remote&state=distributed&model=remote-model')
+
+    await expect(page.getByRole('textbox', { name: 'Search installed models' })).toHaveValue('remote')
+    await expect(page.getByRole('tab', { name: /Distributed$/ })).toHaveAttribute('aria-selected', 'true')
+    await expect(installedPane(page)).toContainText('remote-model')
+    await expect(installedPane(page)).toContainText('Worker one')
+  })
+
+  test('stops a running model with confirmation', async ({ page }) => {
+    await page.goto('/app/models?view=installed&model=alpha')
+
+    const stop = page.getByRole('button', { name: 'Stop', exact: true })
+    await expect(stop).toBeVisible()
+    await stop.click()
+    await expect(page.getByRole('alertdialog')).toContainText('Stop model alpha?')
+
+    const requestPromise = page.waitForRequest(request => request.url().endsWith('/backend/shutdown'))
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Stop', exact: true }).click()
+    const request = await requestPromise
+    expect(request.postDataJSON()).toEqual({ model: 'alpha' })
+    await expect(page.getByRole('button', { name: 'Load', exact: true })).toBeVisible({ timeout: 3_000 })
+  })
+
+  test('keeps a runtime failure inline with its model', async ({ page }) => {
+    await page.route('**/backend/load', route => route.fulfill({
+      status: 500,
+      contentType: 'application/json',
+      body: JSON.stringify({ error: { message: 'engine unavailable' } }),
+    }))
+    await page.goto('/app/models?view=installed&model=beta')
+
+    await page.getByRole('button', { name: 'Load', exact: true }).click()
+
+    const alert = installedPane(page).getByRole('alert')
+    await expect(alert).toContainText('Could not load beta: engine unavailable')
+  })
+
+  test('keeps a failed delete selected so its error remains inline', async ({ page }) => {
+    await page.route('**/models/delete/beta', route => route.fulfill({
+      status: 500,
+      contentType: 'application/json',
+      body: JSON.stringify({ error: { message: 'model is busy' } }),
+    }))
+    await page.goto('/app/models?view=installed&model=beta')
+
+    await page.getByRole('button', { name: 'Actions for beta' }).click()
+    await page.getByRole('menuitem', { name: 'Delete model' }).click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Delete model' }).click()
+
+    await expect(installedPane(page).getByRole('heading', { name: 'beta', exact: true })).toBeVisible()
+    await expect(installedPane(page).getByRole('alert')).toContainText('Could not delete beta: model is busy')
+  })
+
+  test('clears selection after deleting an installed model', async ({ page }) => {
+    await page.route('**/models/delete/beta', route => route.fulfill({
+      contentType: 'application/json',
+      body: '{}',
+    }))
+    await page.goto('/app/models?view=installed&model=beta')
+
+    await page.getByRole('button', { name: 'Actions for beta' }).click()
+    await page.getByRole('menuitem', { name: 'Delete model' }).click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Delete model' }).click()
+
+    await expect(page).not.toHaveURL(/[?&]model=beta(?:&|$)/)
+    await expect(installedPane(page).getByRole('heading', { name: 'beta', exact: true })).toHaveCount(0)
+  })
+
+  test('refreshes distributed runtime state every ten seconds', async ({ page }) => {
+    let runtimeRequests = 0
+    await page.route('**/system', route => {
+      runtimeRequests += 1
+      return route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({ loaded_models: [{ id: 'alpha' }] }),
+      })
+    })
+    await page.goto('/app/models?view=installed')
+
+    await expect.poll(() => runtimeRequests).toBeGreaterThan(0)
+    const initialRequests = runtimeRequests
+    await expect.poll(() => runtimeRequests, { timeout: 12_000 }).toBeGreaterThan(initialRequests)
+  })
+
+  test('preserves literal all values for search and model selection', async ({ page }) => {
+    await page.goto('/app/models?view=installed&q=all&model=all')
+
+    await expect(page.getByRole('textbox', { name: 'Search installed models' })).toHaveValue('all')
+    await expect(installedPane(page).getByRole('heading', { name: 'all', exact: true })).toBeVisible()
+    await expect(page).toHaveURL(/[?&]q=all(?:&|$)/)
+    await expect(page).toHaveURL(/[?&]model=all(?:&|$)/)
+  })
+
+  test('narrow detail Back restores focus to the originating model', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 800 })
+    await page.goto('/app/models?view=installed')
+
+    const model = page.locator('[data-entity="beta"]')
+    await model.click()
+    await expect(page.locator('[data-testid="installed-models-pane"]')).toContainText('beta')
+    await expect(model).not.toBeVisible()
+
+    await page.locator('[data-testid="installed-models-back"]').click()
+
+    await expect(model).toBeVisible()
+    await expect(model).toBeFocused()
+  })
+})
diff --git a/core/http/react-ui/e2e/navigation.spec.js b/core/http/react-ui/e2e/navigation.spec.js
index 87a1f7d3c..1a29c07e4 100644
--- a/core/http/react-ui/e2e/navigation.spec.js
+++ b/core/http/react-ui/e2e/navigation.spec.js
@@ -12,15 +12,12 @@ test.describe('Navigation', () => {
     await expect(page.locator('.home-page')).toBeVisible()
   })
 
-  test('top menu exposes Home and Discover', async ({ page }) => {
+  test('top menu exposes Home and Models', async ({ page }) => {
     await page.goto('/app')
     await expect(page.locator('.sidebar-nav a.nav-item[href="/app"]')).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')
+    const models = page.locator('.sidebar-nav a.nav-item[href="/app/models"]')
+    await expect(models).toBeVisible()
+    await expect(models.locator('.nav-label')).toHaveText('Models')
   })
 
   test('Create stays an inline tier with Chat, Studio and Talk', async ({ page }) => {
diff --git a/core/http/react-ui/e2e/operate-overview.spec.js b/core/http/react-ui/e2e/operate-overview.spec.js
index c52928484..5fde6485a 100644
--- a/core/http/react-ui/e2e/operate-overview.spec.js
+++ b/core/http/react-ui/e2e/operate-overview.spec.js
@@ -169,4 +169,47 @@ test.describe('Operate overview headline', () => {
     await expect(runtime).toContainText('backends')
     await expect(runtime).toContainText('running')
   })
+
+  test('shows host capacity from the shared Operate summary', async ({ page }) => {
+    await page.route('**/api/resources', route => route.fulfill({
+      json: {
+        type: 'gpu',
+        gpus: [{ name: 'NVIDIA L40S', vendor: 'NVIDIA', usage_percent: 42, used_vram: 10_000, total_vram: 24_000 }],
+        aggregate: { gpu_count: 1 },
+        storage_size: 12_000,
+      },
+    }))
+    await mockQuiet(page)
+
+    await page.goto('/app/operate')
+
+    const capacity = page.locator('[data-testid="operate-capacity"]')
+    await expect(capacity).toBeVisible()
+    await expect(capacity).toContainText('Host capacity')
+    await expect(capacity).toContainText('NVIDIA L40S')
+    await expect(capacity).toContainText('42%')
+  })
+
+  test('states when host capacity is unavailable', async ({ page }) => {
+    await page.route('**/api/resources', route => route.fulfill({
+      status: 503,
+      json: { error: 'resource monitor disabled' },
+    }))
+    await mockQuiet(page)
+
+    await page.goto('/app/operate')
+
+    const capacity = page.locator('[data-testid="operate-capacity"]')
+    await expect(capacity).toContainText('Host capacity unavailable')
+  })
+
+  test('states when the host reports no capacity fields', async ({ page }) => {
+    await page.route('**/api/resources', route => route.fulfill({ json: {} }))
+    await mockQuiet(page)
+
+    await page.goto('/app/operate')
+
+    const capacity = page.locator('[data-testid="operate-capacity"]')
+    await expect(capacity).toContainText('No capacity data reported')
+  })
 })
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 c2cb31a78..a775f0ceb 100644
--- a/core/http/react-ui/e2e/page-render-smoke.spec.js
+++ b/core/http/react-ui/e2e/page-render-smoke.spec.js
@@ -18,7 +18,7 @@ const PAGES = [
   ['/app/usage', 'Usage'],
   ['/app/account', 'Account'],
   ['/app/studio', 'Studio'],
-  ['/app/manage', 'Manage'],
+  ['/app/models', 'Models'],
   ['/app/operate', 'Operate overview'],
   ['/app/backends', 'Backends'],
   ['/app/activity', 'Activity'],
diff --git a/core/http/react-ui/inline-style-baseline.txt b/core/http/react-ui/inline-style-baseline.txt
index 4f17a66e2..2596e4ad8 100644
--- a/core/http/react-ui/inline-style-baseline.txt
+++ b/core/http/react-ui/inline-style-baseline.txt
@@ -1 +1 @@
-535
+520
diff --git a/core/http/react-ui/public/locales/de/admin.json b/core/http/react-ui/public/locales/de/admin.json
index 270523bda..bc6718dbf 100644
--- a/core/http/react-ui/public/locales/de/admin.json
+++ b/core/http/react-ui/public/locales/de/admin.json
@@ -110,6 +110,70 @@
     }
   },
   "backends": {
+    "lifecycle": {
+      "navigation": "Backend lifecycle",
+      "catalog": "Catalog",
+      "installed": "Installed",
+      "installedAria": "Installed backends",
+      "searchPlaceholder": "Search installed backends by name or alias...",
+      "filterAll": "All",
+      "filterUser": "User",
+      "filterSystem": "System",
+      "filterUpdates": "Updates",
+      "filterOffline": "Offline nodes",
+      "variants": "Variants",
+      "variantsCount": "Variants ({{count}})",
+      "development": "Development",
+      "developmentCount": "Development ({{count}})",
+      "countLabel": "{{visible}} of {{total}}",
+      "emptyTitle": "No backends installed yet",
+      "emptyBody": "Install a backend from the Catalog to give this host a runtime for models.",
+      "noMatches": "No installed backends match the current search and filters.",
+      "clearFilters": "Clear filters",
+      "updatesAvailable_one": "{{count}} backend has an update available",
+      "updatesAvailable_other": "{{count}} backends have updates available",
+      "upgradeAll": "Upgrade all",
+      "upgrading": "Upgrading...",
+      "upgradeAllFailed": "Upgrade failed for {{name}}: {{message}}",
+      "upgradeAllStarted_one": "Upgrade started for {{count}} backend",
+      "upgradeAllStarted_other": "Upgrade started for {{count}} backends",
+      "loadFailed": "Failed to load installed backends: {{message}}",
+      "reinstall": "Reinstall backend",
+      "reinstallStarted": "Reinstalling {{name}}...",
+      "reinstallFailed": "Failed to reinstall: {{message}}",
+      "upgrade": "Upgrade",
+      "upgradeTo": "Upgrade to v{{version}}",
+      "upgradeStarted": "Upgrading {{name}}...",
+      "upgradeFailed": "Failed to upgrade: {{message}}",
+      "delete": "Delete",
+      "deleteBackend": "Delete backend",
+      "deleteTitle": "Delete Backend",
+      "deleteMessage": "Delete backend {{name}}?",
+      "deleteSucceeded": "Deleted backend {{name}}",
+      "deleteFailed": "Failed to delete backend: {{message}}",
+      "actionsFor": "Actions for {{name}}",
+      "protected": "Protected",
+      "protectedTitle": "System backends are managed outside the gallery",
+      "allBackends": "All backends",
+      "version": "Version",
+      "available": "Available",
+      "managed": "Managed",
+      "system": "System",
+      "gallery": "Gallery",
+      "installedOn": "Installed on",
+      "description": "Description",
+      "source": "Source",
+      "digest": "Digest",
+      "installedAt": "Installed",
+      "working": "Working...",
+      "updateAvailable": "Update available",
+      "updateGroup": "Update available",
+      "installedGroup": "Installed",
+      "inventoryEyebrow": "Installed runtimes",
+      "inventoryTitle_one": "{{count}} backend is installed.",
+      "inventoryTitle_other": "{{count}} backends are installed.",
+      "inventoryBody": "Select a backend to inspect its source, version, placement, and lifecycle actions."
+    },
     "title": "Backend-Verwaltung",
     "subtitle": "Entdecken und installieren Sie KI-Backends für Ihre Modelle"
   },
@@ -155,6 +219,20 @@
         "clear": "Nothing needs attention. Backends are current, no operation has failed, and every node is healthy.",
         "backendUpdate": "Update available: {{from}} → {{to}}"
       },
+      "capacity": {
+        "title": "Host-Kapazität",
+        "loading": "Host-Kapazität wird geladen...",
+        "unavailable": "Host-Kapazität nicht verfügbar",
+        "empty": "Keine Kapazitätsdaten gemeldet",
+        "gpus": "{{count}} GPUs",
+        "reclaimer": "Reclaimer active",
+        "used": "Used",
+        "total": "Total",
+        "systemRam": "System RAM",
+        "memory": "Memory",
+        "totalVram": "Total VRAM",
+        "storage": "Models storage"
+      },
       "sections": {
         "heading": "Sections",
         "runtime": "Runtime",
diff --git a/core/http/react-ui/public/locales/de/home.json b/core/http/react-ui/public/locales/de/home.json
index 8bcf9a447..80a063685 100644
--- a/core/http/react-ui/public/locales/de/home.json
+++ b/core/http/react-ui/public/locales/de/home.json
@@ -94,8 +94,8 @@
   },
   "jump": {
     "heading": "Jump back in",
-    "discover": "Discover",
-    "discoverSummary": "Browse the gallery and install models",
+    "models": "Models",
+    "modelsSummary": "Explore, install, and manage models",
     "create": "Create",
     "createSummary": "Open a chat, image or voice session",
     "operate": "Operate",
diff --git a/core/http/react-ui/public/locales/de/models.json b/core/http/react-ui/public/locales/de/models.json
index d74d1902e..21e29f782 100644
--- a/core/http/react-ui/public/locales/de/models.json
+++ b/core/http/react-ui/public/locales/de/models.json
@@ -1,5 +1,59 @@
 {
-  "title": "Entdecken",
+  "lifecycle": {
+    "title": "Models",
+    "navLabel": "Model lifecycle",
+    "views": { "explore": "Explore", "installed": "Installed" },
+    "filters": { "all": "All", "running": "Running", "idle": "Idle", "disabled": "Disabled", "pinned": "Pinned", "distributed": "Distributed" },
+    "installed": {
+      "searchPlaceholder": "Search installed models",
+      "count": "{{shown}} of {{total}}",
+      "backToAll": "All installed models",
+      "eyebrow": "Installed on this host",
+      "summary": "{{count}} models ready to serve.",
+      "summaryHint": "Select a model to inspect its runtime state and controls."
+    },
+    "states": { "running": "Running", "idle": "Idle", "disabled": "Disabled", "working": "Working…" },
+    "actions": {
+      "load": "Load", "loading": "Loading…", "stop": "Stop", "update": "Update", "updating": "Updating…",
+      "enable": "Enable model", "disable": "Disable model", "pin": "Pin (prevent idle unload)",
+      "unpin": "Unpin (allow idle unload)", "edit": "Edit configuration", "logs": "Backend logs",
+      "delete": "Delete model", "forModel": "Actions for {{model}}",
+      "open": "Open {{useCase}}", "manageInstallation": "Manage installation"
+    },
+    "actionNames": { "load": "load", "stop": "stop", "enable": "enable", "disable": "disable", "pin": "pin", "unpin": "unpin", "delete": "delete", "update": "update" },
+    "toasts": {
+      "loaded": "Loaded {{model}}", "stopped": "Stopped {{model}}", "enabled": "Enabled {{model}}",
+      "disabled": "Disabled {{model}}", "pinned": "Pinned {{model}}", "unpinned": "Unpinned {{model}}",
+      "deleted": "Deleted {{model}}", "updated": "Models updated"
+    },
+    "confirm": {
+      "stopTitle": "Stop Model", "stopMessage": "Stop model {{model}}?",
+      "deleteTitle": "Delete Model", "deleteMessage": "Delete model {{model}}? This cannot be undone."
+    },
+    "errors": {
+      "action": "Could not {{action}} {{model}}: {{message}}",
+      "loadList": "Could not load installed models: {{message}}"
+    },
+    "detail": {
+      "title": "Details", "state": "State", "backend": "Backend", "auto": "Auto", "pinned": "Pinned", "yes": "yes",
+      "description": "Description", "noDescription": "No gallery description is available for this model.",
+      "license": "License", "tags": "Tags", "links": "Links", "distributed": "Distributed", "source": "Source",
+      "files": "Files", "fileCount": "{{count}} file", "fileCount_other": "{{count}} files",
+      "adopted": "Adopted", "adoptedHint": "Discovered on a worker but not configured locally. Persist the config to make it permanent.",
+      "alias": "alias → {{target}}", "aliasTitle": "Alias → {{target}}"
+    },
+    "open": {
+      "title": "Open", "chat": "Chat", "completion": "Completion", "image": "Image", "video": "Video", "tts": "TTS",
+      "transcribe": "Transcribe", "sound": "Sound", "face": "Face", "voice": "Voice", "embeddings": "Embeddings",
+      "rerank": "Rerank", "vad": "VAD", "score": "Score"
+    },
+    "empty": {
+      "title": "No models installed yet", "text": "Explore the gallery or import a model to get started.",
+      "explore": "Explore models", "import": "Import model", "noMatches": "No installed models match these filters.",
+      "clear": "Clear filters"
+    }
+  },
+  "title": "Models",
   "subtitle": "Durchsuchen und installieren Sie KI-Modelle aus der Galerie",
   "recommended": {
     "title": "Empfohlen für Ihre Hardware",
diff --git a/core/http/react-ui/public/locales/de/nav.json b/core/http/react-ui/public/locales/de/nav.json
index aba9ebeff..46b0fca72 100644
--- a/core/http/react-ui/public/locales/de/nav.json
+++ b/core/http/react-ui/public/locales/de/nav.json
@@ -30,7 +30,7 @@
   },
   "items": {
     "home": "Start",
-    "discover": "Entdecken",
+    "models": "Models",
     "chat": "Chat",
     "studio": "Studio",
     "talk": "Sprechen",
@@ -40,7 +40,6 @@
     "voices": "Stimmen",
     "jobs": "Aufgaben",
     "operate": "Verwaltung",
-    "host": "Host",
     "audioTransform": "Audio transformieren",
     "faceRecognition": "Gesichtserkennung",
     "voiceRecognition": "Spracherkennung",
diff --git a/core/http/react-ui/public/locales/en/admin.json b/core/http/react-ui/public/locales/en/admin.json
index db5c0d876..20c9d70ad 100644
--- a/core/http/react-ui/public/locales/en/admin.json
+++ b/core/http/react-ui/public/locales/en/admin.json
@@ -110,6 +110,70 @@
     }
   },
   "backends": {
+    "lifecycle": {
+      "navigation": "Backend lifecycle",
+      "catalog": "Catalog",
+      "installed": "Installed",
+      "installedAria": "Installed backends",
+      "searchPlaceholder": "Search installed backends by name or alias...",
+      "filterAll": "All",
+      "filterUser": "User",
+      "filterSystem": "System",
+      "filterUpdates": "Updates",
+      "filterOffline": "Offline nodes",
+      "variants": "Variants",
+      "variantsCount": "Variants ({{count}})",
+      "development": "Development",
+      "developmentCount": "Development ({{count}})",
+      "countLabel": "{{visible}} of {{total}}",
+      "emptyTitle": "No backends installed yet",
+      "emptyBody": "Install a backend from the Catalog to give this host a runtime for models.",
+      "noMatches": "No installed backends match the current search and filters.",
+      "clearFilters": "Clear filters",
+      "updatesAvailable_one": "{{count}} backend has an update available",
+      "updatesAvailable_other": "{{count}} backends have updates available",
+      "upgradeAll": "Upgrade all",
+      "upgrading": "Upgrading...",
+      "upgradeAllFailed": "Upgrade failed for {{name}}: {{message}}",
+      "upgradeAllStarted_one": "Upgrade started for {{count}} backend",
+      "upgradeAllStarted_other": "Upgrade started for {{count}} backends",
+      "loadFailed": "Failed to load installed backends: {{message}}",
+      "reinstall": "Reinstall backend",
+      "reinstallStarted": "Reinstalling {{name}}...",
+      "reinstallFailed": "Failed to reinstall: {{message}}",
+      "upgrade": "Upgrade",
+      "upgradeTo": "Upgrade to v{{version}}",
+      "upgradeStarted": "Upgrading {{name}}...",
+      "upgradeFailed": "Failed to upgrade: {{message}}",
+      "delete": "Delete",
+      "deleteBackend": "Delete backend",
+      "deleteTitle": "Delete Backend",
+      "deleteMessage": "Delete backend {{name}}?",
+      "deleteSucceeded": "Deleted backend {{name}}",
+      "deleteFailed": "Failed to delete backend: {{message}}",
+      "actionsFor": "Actions for {{name}}",
+      "protected": "Protected",
+      "protectedTitle": "System backends are managed outside the gallery",
+      "allBackends": "All backends",
+      "version": "Version",
+      "available": "Available",
+      "managed": "Managed",
+      "system": "System",
+      "gallery": "Gallery",
+      "installedOn": "Installed on",
+      "description": "Description",
+      "source": "Source",
+      "digest": "Digest",
+      "installedAt": "Installed",
+      "working": "Working...",
+      "updateAvailable": "Update available",
+      "updateGroup": "Update available",
+      "installedGroup": "Installed",
+      "inventoryEyebrow": "Installed runtimes",
+      "inventoryTitle_one": "{{count}} backend is installed.",
+      "inventoryTitle_other": "{{count}} backends are installed.",
+      "inventoryBody": "Select a backend to inspect its source, version, placement, and lifecycle actions."
+    },
     "title": "Backend Management",
     "subtitle": "Discover and install AI backends to power your models"
   },
@@ -178,6 +242,20 @@
         "clear": "Nothing needs attention. Backends are current, no operation has failed, and every node is healthy.",
         "backendUpdate": "Update available: {{from}} → {{to}}"
       },
+      "capacity": {
+        "title": "Host capacity",
+        "loading": "Loading host capacity...",
+        "unavailable": "Host capacity unavailable",
+        "empty": "No capacity data reported",
+        "gpus": "{{count}} GPUs",
+        "reclaimer": "Reclaimer active",
+        "used": "Used",
+        "total": "Total",
+        "systemRam": "System RAM",
+        "memory": "Memory",
+        "totalVram": "Total VRAM",
+        "storage": "Models storage"
+      },
       "sections": {
         "heading": "Sections",
         "runtime": "Runtime",
diff --git a/core/http/react-ui/public/locales/en/home.json b/core/http/react-ui/public/locales/en/home.json
index 5bcd67c85..b8bb3dd13 100644
--- a/core/http/react-ui/public/locales/en/home.json
+++ b/core/http/react-ui/public/locales/en/home.json
@@ -109,8 +109,8 @@
   },
   "jump": {
     "heading": "Jump back in",
-    "discover": "Discover",
-    "discoverSummary": "Browse the gallery and install models",
+    "models": "Models",
+    "modelsSummary": "Explore, install, and manage models",
     "create": "Create",
     "createSummary": "Open a chat, image or voice session",
     "operate": "Operate",
diff --git a/core/http/react-ui/public/locales/en/modelEditor.json b/core/http/react-ui/public/locales/en/modelEditor.json
index ef4ddaa8e..38d4c4801 100644
--- a/core/http/react-ui/public/locales/en/modelEditor.json
+++ b/core/http/react-ui/public/locales/en/modelEditor.json
@@ -9,7 +9,7 @@
     },
     "actions": {
         "backTo": "Back to {{page}}",
-        "system": "System",
+        "models": "Models",
         "templates": "Templates",
         "createModel": "Create Model",
         "saveChanges": "Save Changes",
diff --git a/core/http/react-ui/public/locales/en/models.json b/core/http/react-ui/public/locales/en/models.json
index a96b0b41a..fdc2e397f 100644
--- a/core/http/react-ui/public/locales/en/models.json
+++ b/core/http/react-ui/public/locales/en/models.json
@@ -1,5 +1,59 @@
 {
-  "title": "Discover",
+  "lifecycle": {
+    "title": "Models",
+    "navLabel": "Model lifecycle",
+    "views": { "explore": "Explore", "installed": "Installed" },
+    "filters": { "all": "All", "running": "Running", "idle": "Idle", "disabled": "Disabled", "pinned": "Pinned", "distributed": "Distributed" },
+    "installed": {
+      "searchPlaceholder": "Search installed models",
+      "count": "{{shown}} of {{total}}",
+      "backToAll": "All installed models",
+      "eyebrow": "Installed on this host",
+      "summary": "{{count}} models ready to serve.",
+      "summaryHint": "Select a model to inspect its runtime state and controls."
+    },
+    "states": { "running": "Running", "idle": "Idle", "disabled": "Disabled", "working": "Working…" },
+    "actions": {
+      "load": "Load", "loading": "Loading…", "stop": "Stop", "update": "Update", "updating": "Updating…",
+      "enable": "Enable model", "disable": "Disable model", "pin": "Pin (prevent idle unload)",
+      "unpin": "Unpin (allow idle unload)", "edit": "Edit configuration", "logs": "Backend logs",
+      "delete": "Delete model", "forModel": "Actions for {{model}}",
+      "open": "Open {{useCase}}", "manageInstallation": "Manage installation"
+    },
+    "actionNames": { "load": "load", "stop": "stop", "enable": "enable", "disable": "disable", "pin": "pin", "unpin": "unpin", "delete": "delete", "update": "update" },
+    "toasts": {
+      "loaded": "Loaded {{model}}", "stopped": "Stopped {{model}}", "enabled": "Enabled {{model}}",
+      "disabled": "Disabled {{model}}", "pinned": "Pinned {{model}}", "unpinned": "Unpinned {{model}}",
+      "deleted": "Deleted {{model}}", "updated": "Models updated"
+    },
+    "confirm": {
+      "stopTitle": "Stop Model", "stopMessage": "Stop model {{model}}?",
+      "deleteTitle": "Delete Model", "deleteMessage": "Delete model {{model}}? This cannot be undone."
+    },
+    "errors": {
+      "action": "Could not {{action}} {{model}}: {{message}}",
+      "loadList": "Could not load installed models: {{message}}"
+    },
+    "detail": {
+      "title": "Details", "state": "State", "backend": "Backend", "auto": "Auto", "pinned": "Pinned", "yes": "yes",
+      "description": "Description", "noDescription": "No gallery description is available for this model.",
+      "license": "License", "tags": "Tags", "links": "Links", "distributed": "Distributed", "source": "Source",
+      "files": "Files", "fileCount": "{{count}} file", "fileCount_other": "{{count}} files",
+      "adopted": "Adopted", "adoptedHint": "Discovered on a worker but not configured locally. Persist the config to make it permanent.",
+      "alias": "alias → {{target}}", "aliasTitle": "Alias → {{target}}"
+    },
+    "open": {
+      "title": "Open", "chat": "Chat", "completion": "Completion", "image": "Image", "video": "Video", "tts": "TTS",
+      "transcribe": "Transcribe", "sound": "Sound", "face": "Face", "voice": "Voice", "embeddings": "Embeddings",
+      "rerank": "Rerank", "vad": "VAD", "score": "Score"
+    },
+    "empty": {
+      "title": "No models installed yet", "text": "Explore the gallery or import a model to get started.",
+      "explore": "Explore models", "import": "Import model", "noMatches": "No installed models match these filters.",
+      "clear": "Clear filters"
+    }
+  },
+  "title": "Models",
   "subtitle": "Browse and install AI models from the gallery",
   "models": "Models",
   "recommended": {
diff --git a/core/http/react-ui/public/locales/en/nav.json b/core/http/react-ui/public/locales/en/nav.json
index a583abea6..9ba499b2d 100644
--- a/core/http/react-ui/public/locales/en/nav.json
+++ b/core/http/react-ui/public/locales/en/nav.json
@@ -30,7 +30,7 @@
   },
   "items": {
     "home": "Home",
-    "discover": "Discover",
+    "models": "Models",
     "chat": "Chat",
     "studio": "Studio",
     "talk": "Talk",
@@ -40,7 +40,6 @@
     "voices": "Voices",
     "jobs": "Jobs",
     "operate": "Admin",
-    "host": "Host",
     "audioTransform": "Audio Transform",
     "faceRecognition": "Face Recognition",
     "voiceRecognition": "Voice Recognition",
diff --git a/core/http/react-ui/public/locales/es/admin.json b/core/http/react-ui/public/locales/es/admin.json
index c46c5487b..bd6e01895 100644
--- a/core/http/react-ui/public/locales/es/admin.json
+++ b/core/http/react-ui/public/locales/es/admin.json
@@ -110,6 +110,70 @@
     }
   },
   "backends": {
+    "lifecycle": {
+      "navigation": "Backend lifecycle",
+      "catalog": "Catalog",
+      "installed": "Installed",
+      "installedAria": "Installed backends",
+      "searchPlaceholder": "Search installed backends by name or alias...",
+      "filterAll": "All",
+      "filterUser": "User",
+      "filterSystem": "System",
+      "filterUpdates": "Updates",
+      "filterOffline": "Offline nodes",
+      "variants": "Variants",
+      "variantsCount": "Variants ({{count}})",
+      "development": "Development",
+      "developmentCount": "Development ({{count}})",
+      "countLabel": "{{visible}} of {{total}}",
+      "emptyTitle": "No backends installed yet",
+      "emptyBody": "Install a backend from the Catalog to give this host a runtime for models.",
+      "noMatches": "No installed backends match the current search and filters.",
+      "clearFilters": "Clear filters",
+      "updatesAvailable_one": "{{count}} backend has an update available",
+      "updatesAvailable_other": "{{count}} backends have updates available",
+      "upgradeAll": "Upgrade all",
+      "upgrading": "Upgrading...",
+      "upgradeAllFailed": "Upgrade failed for {{name}}: {{message}}",
+      "upgradeAllStarted_one": "Upgrade started for {{count}} backend",
+      "upgradeAllStarted_other": "Upgrade started for {{count}} backends",
+      "loadFailed": "Failed to load installed backends: {{message}}",
+      "reinstall": "Reinstall backend",
+      "reinstallStarted": "Reinstalling {{name}}...",
+      "reinstallFailed": "Failed to reinstall: {{message}}",
+      "upgrade": "Upgrade",
+      "upgradeTo": "Upgrade to v{{version}}",
+      "upgradeStarted": "Upgrading {{name}}...",
+      "upgradeFailed": "Failed to upgrade: {{message}}",
+      "delete": "Delete",
+      "deleteBackend": "Delete backend",
+      "deleteTitle": "Delete Backend",
+      "deleteMessage": "Delete backend {{name}}?",
+      "deleteSucceeded": "Deleted backend {{name}}",
+      "deleteFailed": "Failed to delete backend: {{message}}",
+      "actionsFor": "Actions for {{name}}",
+      "protected": "Protected",
+      "protectedTitle": "System backends are managed outside the gallery",
+      "allBackends": "All backends",
+      "version": "Version",
+      "available": "Available",
+      "managed": "Managed",
+      "system": "System",
+      "gallery": "Gallery",
+      "installedOn": "Installed on",
+      "description": "Description",
+      "source": "Source",
+      "digest": "Digest",
+      "installedAt": "Installed",
+      "working": "Working...",
+      "updateAvailable": "Update available",
+      "updateGroup": "Update available",
+      "installedGroup": "Installed",
+      "inventoryEyebrow": "Installed runtimes",
+      "inventoryTitle_one": "{{count}} backend is installed.",
+      "inventoryTitle_other": "{{count}} backends are installed.",
+      "inventoryBody": "Select a backend to inspect its source, version, placement, and lifecycle actions."
+    },
     "title": "Administración de backends",
     "subtitle": "Descubre e instala backends de IA para tus modelos"
   },
@@ -155,6 +219,20 @@
         "clear": "Nothing needs attention. Backends are current, no operation has failed, and every node is healthy.",
         "backendUpdate": "Update available: {{from}} → {{to}}"
       },
+      "capacity": {
+        "title": "Capacidad del host",
+        "loading": "Cargando la capacidad del host...",
+        "unavailable": "Capacidad del host no disponible",
+        "empty": "No se han notificado datos de capacidad",
+        "gpus": "{{count}} GPUs",
+        "reclaimer": "Reclaimer active",
+        "used": "Used",
+        "total": "Total",
+        "systemRam": "System RAM",
+        "memory": "Memory",
+        "totalVram": "Total VRAM",
+        "storage": "Models storage"
+      },
       "sections": {
         "heading": "Sections",
         "runtime": "Runtime",
diff --git a/core/http/react-ui/public/locales/es/home.json b/core/http/react-ui/public/locales/es/home.json
index 2c56ae948..cfa916826 100644
--- a/core/http/react-ui/public/locales/es/home.json
+++ b/core/http/react-ui/public/locales/es/home.json
@@ -94,8 +94,8 @@
   },
   "jump": {
     "heading": "Jump back in",
-    "discover": "Discover",
-    "discoverSummary": "Browse the gallery and install models",
+    "models": "Models",
+    "modelsSummary": "Explore, install, and manage models",
     "create": "Create",
     "createSummary": "Open a chat, image or voice session",
     "operate": "Operate",
diff --git a/core/http/react-ui/public/locales/es/models.json b/core/http/react-ui/public/locales/es/models.json
index ab8e7b284..3d5cdd8df 100644
--- a/core/http/react-ui/public/locales/es/models.json
+++ b/core/http/react-ui/public/locales/es/models.json
@@ -1,5 +1,59 @@
 {
-  "title": "Descubrir",
+  "lifecycle": {
+    "title": "Models",
+    "navLabel": "Model lifecycle",
+    "views": { "explore": "Explore", "installed": "Installed" },
+    "filters": { "all": "All", "running": "Running", "idle": "Idle", "disabled": "Disabled", "pinned": "Pinned", "distributed": "Distributed" },
+    "installed": {
+      "searchPlaceholder": "Search installed models",
+      "count": "{{shown}} of {{total}}",
+      "backToAll": "All installed models",
+      "eyebrow": "Installed on this host",
+      "summary": "{{count}} models ready to serve.",
+      "summaryHint": "Select a model to inspect its runtime state and controls."
+    },
+    "states": { "running": "Running", "idle": "Idle", "disabled": "Disabled", "working": "Working…" },
+    "actions": {
+      "load": "Load", "loading": "Loading…", "stop": "Stop", "update": "Update", "updating": "Updating…",
+      "enable": "Enable model", "disable": "Disable model", "pin": "Pin (prevent idle unload)",
+      "unpin": "Unpin (allow idle unload)", "edit": "Edit configuration", "logs": "Backend logs",
+      "delete": "Delete model", "forModel": "Actions for {{model}}",
+      "open": "Open {{useCase}}", "manageInstallation": "Manage installation"
+    },
+    "actionNames": { "load": "load", "stop": "stop", "enable": "enable", "disable": "disable", "pin": "pin", "unpin": "unpin", "delete": "delete", "update": "update" },
+    "toasts": {
+      "loaded": "Loaded {{model}}", "stopped": "Stopped {{model}}", "enabled": "Enabled {{model}}",
+      "disabled": "Disabled {{model}}", "pinned": "Pinned {{model}}", "unpinned": "Unpinned {{model}}",
+      "deleted": "Deleted {{model}}", "updated": "Models updated"
+    },
+    "confirm": {
+      "stopTitle": "Stop Model", "stopMessage": "Stop model {{model}}?",
+      "deleteTitle": "Delete Model", "deleteMessage": "Delete model {{model}}? This cannot be undone."
+    },
+    "errors": {
+      "action": "Could not {{action}} {{model}}: {{message}}",
+      "loadList": "Could not load installed models: {{message}}"
+    },
+    "detail": {
+      "title": "Details", "state": "State", "backend": "Backend", "auto": "Auto", "pinned": "Pinned", "yes": "yes",
+      "description": "Description", "noDescription": "No gallery description is available for this model.",
+      "license": "License", "tags": "Tags", "links": "Links", "distributed": "Distributed", "source": "Source",
+      "files": "Files", "fileCount": "{{count}} file", "fileCount_other": "{{count}} files",
+      "adopted": "Adopted", "adoptedHint": "Discovered on a worker but not configured locally. Persist the config to make it permanent.",
+      "alias": "alias → {{target}}", "aliasTitle": "Alias → {{target}}"
+    },
+    "open": {
+      "title": "Open", "chat": "Chat", "completion": "Completion", "image": "Image", "video": "Video", "tts": "TTS",
+      "transcribe": "Transcribe", "sound": "Sound", "face": "Face", "voice": "Voice", "embeddings": "Embeddings",
+      "rerank": "Rerank", "vad": "VAD", "score": "Score"
+    },
+    "empty": {
+      "title": "No models installed yet", "text": "Explore the gallery or import a model to get started.",
+      "explore": "Explore models", "import": "Import model", "noMatches": "No installed models match these filters.",
+      "clear": "Clear filters"
+    }
+  },
+  "title": "Models",
   "subtitle": "Explora e instala modelos de IA desde la galería",
   "recommended": {
     "title": "Recomendado para tu hardware",
diff --git a/core/http/react-ui/public/locales/es/nav.json b/core/http/react-ui/public/locales/es/nav.json
index 78794b526..70fba7bd1 100644
--- a/core/http/react-ui/public/locales/es/nav.json
+++ b/core/http/react-ui/public/locales/es/nav.json
@@ -30,7 +30,7 @@
   },
   "items": {
     "home": "Inicio",
-    "discover": "Descubrir",
+    "models": "Models",
     "chat": "Chat",
     "studio": "Studio",
     "talk": "Hablar",
@@ -40,7 +40,6 @@
     "voices": "Voces",
     "jobs": "Trabajos",
     "operate": "Administración",
-    "host": "Host",
     "audioTransform": "Transformar audio",
     "faceRecognition": "Reconocimiento facial",
     "voiceRecognition": "Reconocimiento de voz",
diff --git a/core/http/react-ui/public/locales/id/admin.json b/core/http/react-ui/public/locales/id/admin.json
index 6657f1f02..52afafb08 100644
--- a/core/http/react-ui/public/locales/id/admin.json
+++ b/core/http/react-ui/public/locales/id/admin.json
@@ -110,6 +110,70 @@
     }
   },
   "backends": {
+    "lifecycle": {
+      "navigation": "Backend lifecycle",
+      "catalog": "Catalog",
+      "installed": "Installed",
+      "installedAria": "Installed backends",
+      "searchPlaceholder": "Search installed backends by name or alias...",
+      "filterAll": "All",
+      "filterUser": "User",
+      "filterSystem": "System",
+      "filterUpdates": "Updates",
+      "filterOffline": "Offline nodes",
+      "variants": "Variants",
+      "variantsCount": "Variants ({{count}})",
+      "development": "Development",
+      "developmentCount": "Development ({{count}})",
+      "countLabel": "{{visible}} of {{total}}",
+      "emptyTitle": "No backends installed yet",
+      "emptyBody": "Install a backend from the Catalog to give this host a runtime for models.",
+      "noMatches": "No installed backends match the current search and filters.",
+      "clearFilters": "Clear filters",
+      "updatesAvailable_one": "{{count}} backend has an update available",
+      "updatesAvailable_other": "{{count}} backends have updates available",
+      "upgradeAll": "Upgrade all",
+      "upgrading": "Upgrading...",
+      "upgradeAllFailed": "Upgrade failed for {{name}}: {{message}}",
+      "upgradeAllStarted_one": "Upgrade started for {{count}} backend",
+      "upgradeAllStarted_other": "Upgrade started for {{count}} backends",
+      "loadFailed": "Failed to load installed backends: {{message}}",
+      "reinstall": "Reinstall backend",
+      "reinstallStarted": "Reinstalling {{name}}...",
+      "reinstallFailed": "Failed to reinstall: {{message}}",
+      "upgrade": "Upgrade",
+      "upgradeTo": "Upgrade to v{{version}}",
+      "upgradeStarted": "Upgrading {{name}}...",
+      "upgradeFailed": "Failed to upgrade: {{message}}",
+      "delete": "Delete",
+      "deleteBackend": "Delete backend",
+      "deleteTitle": "Delete Backend",
+      "deleteMessage": "Delete backend {{name}}?",
+      "deleteSucceeded": "Deleted backend {{name}}",
+      "deleteFailed": "Failed to delete backend: {{message}}",
+      "actionsFor": "Actions for {{name}}",
+      "protected": "Protected",
+      "protectedTitle": "System backends are managed outside the gallery",
+      "allBackends": "All backends",
+      "version": "Version",
+      "available": "Available",
+      "managed": "Managed",
+      "system": "System",
+      "gallery": "Gallery",
+      "installedOn": "Installed on",
+      "description": "Description",
+      "source": "Source",
+      "digest": "Digest",
+      "installedAt": "Installed",
+      "working": "Working...",
+      "updateAvailable": "Update available",
+      "updateGroup": "Update available",
+      "installedGroup": "Installed",
+      "inventoryEyebrow": "Installed runtimes",
+      "inventoryTitle_one": "{{count}} backend is installed.",
+      "inventoryTitle_other": "{{count}} backends are installed.",
+      "inventoryBody": "Select a backend to inspect its source, version, placement, and lifecycle actions."
+    },
     "title": "Manajemen Backend",
     "subtitle": "Temukan dan instal backend AI untuk mendukung model Anda"
   },
@@ -178,6 +242,20 @@
         "clear": "Tidak ada yang membutuhkan perhatian. Backend sudah terbaru, tidak ada operasi yang gagal, dan setiap node sehat.",
         "backendUpdate": "Pembaruan tersedia: {{from}} → {{to}}"
       },
+      "capacity": {
+        "title": "Kapasitas host",
+        "loading": "Memuat kapasitas host...",
+        "unavailable": "Kapasitas host tidak tersedia",
+        "empty": "Tidak ada data kapasitas yang dilaporkan",
+        "gpus": "{{count}} GPU",
+        "reclaimer": "Reclaimer aktif",
+        "used": "Terpakai",
+        "total": "Total",
+        "systemRam": "RAM sistem",
+        "memory": "Memori",
+        "totalVram": "Total VRAM",
+        "storage": "Penyimpanan model"
+      },
       "sections": {
         "heading": "Bagian-bagian",
         "runtime": "Runtime",
diff --git a/core/http/react-ui/public/locales/id/home.json b/core/http/react-ui/public/locales/id/home.json
index 7c1af93c7..ce24c2391 100644
--- a/core/http/react-ui/public/locales/id/home.json
+++ b/core/http/react-ui/public/locales/id/home.json
@@ -94,8 +94,8 @@
   },
   "jump": {
     "heading": "Jump back in",
-    "discover": "Discover",
-    "discoverSummary": "Browse the gallery and install models",
+    "models": "Models",
+    "modelsSummary": "Explore, install, and manage models",
     "create": "Create",
     "createSummary": "Open a chat, image or voice session",
     "operate": "Operate",
diff --git a/core/http/react-ui/public/locales/id/modelEditor.json b/core/http/react-ui/public/locales/id/modelEditor.json
index 16869d1bd..b32ec737c 100644
--- a/core/http/react-ui/public/locales/id/modelEditor.json
+++ b/core/http/react-ui/public/locales/id/modelEditor.json
@@ -9,7 +9,7 @@
     },
     "actions": {
         "backTo": "Kembali ke {{page}}",
-        "system": "Sistem",
+        "models": "Model",
         "templates": "Templat",
         "createModel": "Buat Model",
         "saveChanges": "Simpan Perubahan",
diff --git a/core/http/react-ui/public/locales/id/models.json b/core/http/react-ui/public/locales/id/models.json
index 22de7d2ce..27a42af64 100644
--- a/core/http/react-ui/public/locales/id/models.json
+++ b/core/http/react-ui/public/locales/id/models.json
@@ -1,5 +1,59 @@
 {
-  "title": "Jelajahi",
+  "lifecycle": {
+    "title": "Models",
+    "navLabel": "Model lifecycle",
+    "views": { "explore": "Explore", "installed": "Installed" },
+    "filters": { "all": "All", "running": "Running", "idle": "Idle", "disabled": "Disabled", "pinned": "Pinned", "distributed": "Distributed" },
+    "installed": {
+      "searchPlaceholder": "Search installed models",
+      "count": "{{shown}} of {{total}}",
+      "backToAll": "All installed models",
+      "eyebrow": "Installed on this host",
+      "summary": "{{count}} models ready to serve.",
+      "summaryHint": "Select a model to inspect its runtime state and controls."
+    },
+    "states": { "running": "Running", "idle": "Idle", "disabled": "Disabled", "working": "Working…" },
+    "actions": {
+      "load": "Load", "loading": "Loading…", "stop": "Stop", "update": "Update", "updating": "Updating…",
+      "enable": "Enable model", "disable": "Disable model", "pin": "Pin (prevent idle unload)",
+      "unpin": "Unpin (allow idle unload)", "edit": "Edit configuration", "logs": "Backend logs",
+      "delete": "Delete model", "forModel": "Actions for {{model}}",
+      "open": "Open {{useCase}}", "manageInstallation": "Manage installation"
+    },
+    "actionNames": { "load": "load", "stop": "stop", "enable": "enable", "disable": "disable", "pin": "pin", "unpin": "unpin", "delete": "delete", "update": "update" },
+    "toasts": {
+      "loaded": "Loaded {{model}}", "stopped": "Stopped {{model}}", "enabled": "Enabled {{model}}",
+      "disabled": "Disabled {{model}}", "pinned": "Pinned {{model}}", "unpinned": "Unpinned {{model}}",
+      "deleted": "Deleted {{model}}", "updated": "Models updated"
+    },
+    "confirm": {
+      "stopTitle": "Stop Model", "stopMessage": "Stop model {{model}}?",
+      "deleteTitle": "Delete Model", "deleteMessage": "Delete model {{model}}? This cannot be undone."
+    },
+    "errors": {
+      "action": "Could not {{action}} {{model}}: {{message}}",
+      "loadList": "Could not load installed models: {{message}}"
+    },
+    "detail": {
+      "title": "Details", "state": "State", "backend": "Backend", "auto": "Auto", "pinned": "Pinned", "yes": "yes",
+      "description": "Description", "noDescription": "No gallery description is available for this model.",
+      "license": "License", "tags": "Tags", "links": "Links", "distributed": "Distributed", "source": "Source",
+      "files": "Files", "fileCount": "{{count}} file", "fileCount_other": "{{count}} files",
+      "adopted": "Adopted", "adoptedHint": "Discovered on a worker but not configured locally. Persist the config to make it permanent.",
+      "alias": "alias → {{target}}", "aliasTitle": "Alias → {{target}}"
+    },
+    "open": {
+      "title": "Open", "chat": "Chat", "completion": "Completion", "image": "Image", "video": "Video", "tts": "TTS",
+      "transcribe": "Transcribe", "sound": "Sound", "face": "Face", "voice": "Voice", "embeddings": "Embeddings",
+      "rerank": "Rerank", "vad": "VAD", "score": "Score"
+    },
+    "empty": {
+      "title": "No models installed yet", "text": "Explore the gallery or import a model to get started.",
+      "explore": "Explore models", "import": "Import model", "noMatches": "No installed models match these filters.",
+      "clear": "Clear filters"
+    }
+  },
+  "title": "Models",
   "subtitle": "Telusuri dan instal model AI dari galeri",
   "models": "Model",
   "recommended": {
diff --git a/core/http/react-ui/public/locales/id/nav.json b/core/http/react-ui/public/locales/id/nav.json
index 3f4c37880..d0a85551c 100644
--- a/core/http/react-ui/public/locales/id/nav.json
+++ b/core/http/react-ui/public/locales/id/nav.json
@@ -30,7 +30,7 @@
   },
   "items": {
     "home": "Beranda",
-    "discover": "Jelajahi",
+    "models": "Models",
     "chat": "Obrolan",
     "studio": "Studio",
     "talk": "Bicara",
@@ -40,7 +40,6 @@
     "voices": "Suara",
     "jobs": "Pekerjaan",
     "operate": "Admin",
-    "host": "Host",
     "audioTransform": "Transformasi Audio",
     "faceRecognition": "Pengenalan Wajah",
     "voiceRecognition": "Pengenalan Suara",
diff --git a/core/http/react-ui/public/locales/it/admin.json b/core/http/react-ui/public/locales/it/admin.json
index 9605a6e6b..48155bd09 100644
--- a/core/http/react-ui/public/locales/it/admin.json
+++ b/core/http/react-ui/public/locales/it/admin.json
@@ -110,6 +110,70 @@
     }
   },
   "backends": {
+    "lifecycle": {
+      "navigation": "Backend lifecycle",
+      "catalog": "Catalog",
+      "installed": "Installed",
+      "installedAria": "Installed backends",
+      "searchPlaceholder": "Search installed backends by name or alias...",
+      "filterAll": "All",
+      "filterUser": "User",
+      "filterSystem": "System",
+      "filterUpdates": "Updates",
+      "filterOffline": "Offline nodes",
+      "variants": "Variants",
+      "variantsCount": "Variants ({{count}})",
+      "development": "Development",
+      "developmentCount": "Development ({{count}})",
+      "countLabel": "{{visible}} of {{total}}",
+      "emptyTitle": "No backends installed yet",
+      "emptyBody": "Install a backend from the Catalog to give this host a runtime for models.",
+      "noMatches": "No installed backends match the current search and filters.",
+      "clearFilters": "Clear filters",
+      "updatesAvailable_one": "{{count}} backend has an update available",
+      "updatesAvailable_other": "{{count}} backends have updates available",
+      "upgradeAll": "Upgrade all",
+      "upgrading": "Upgrading...",
+      "upgradeAllFailed": "Upgrade failed for {{name}}: {{message}}",
+      "upgradeAllStarted_one": "Upgrade started for {{count}} backend",
+      "upgradeAllStarted_other": "Upgrade started for {{count}} backends",
+      "loadFailed": "Failed to load installed backends: {{message}}",
+      "reinstall": "Reinstall backend",
+      "reinstallStarted": "Reinstalling {{name}}...",
+      "reinstallFailed": "Failed to reinstall: {{message}}",
+      "upgrade": "Upgrade",
+      "upgradeTo": "Upgrade to v{{version}}",
+      "upgradeStarted": "Upgrading {{name}}...",
+      "upgradeFailed": "Failed to upgrade: {{message}}",
+      "delete": "Delete",
+      "deleteBackend": "Delete backend",
+      "deleteTitle": "Delete Backend",
+      "deleteMessage": "Delete backend {{name}}?",
+      "deleteSucceeded": "Deleted backend {{name}}",
+      "deleteFailed": "Failed to delete backend: {{message}}",
+      "actionsFor": "Actions for {{name}}",
+      "protected": "Protected",
+      "protectedTitle": "System backends are managed outside the gallery",
+      "allBackends": "All backends",
+      "version": "Version",
+      "available": "Available",
+      "managed": "Managed",
+      "system": "System",
+      "gallery": "Gallery",
+      "installedOn": "Installed on",
+      "description": "Description",
+      "source": "Source",
+      "digest": "Digest",
+      "installedAt": "Installed",
+      "working": "Working...",
+      "updateAvailable": "Update available",
+      "updateGroup": "Update available",
+      "installedGroup": "Installed",
+      "inventoryEyebrow": "Installed runtimes",
+      "inventoryTitle_one": "{{count}} backend is installed.",
+      "inventoryTitle_other": "{{count}} backends are installed.",
+      "inventoryBody": "Select a backend to inspect its source, version, placement, and lifecycle actions."
+    },
     "title": "Gestione backend",
     "subtitle": "Scopri e installa backend AI per i tuoi modelli"
   },
@@ -155,6 +219,20 @@
         "clear": "Nothing needs attention. Backends are current, no operation has failed, and every node is healthy.",
         "backendUpdate": "Update available: {{from}} → {{to}}"
       },
+      "capacity": {
+        "title": "Capacità host",
+        "loading": "Caricamento della capacità host...",
+        "unavailable": "Capacità host non disponibile",
+        "empty": "Nessun dato sulla capacità segnalato",
+        "gpus": "{{count}} GPUs",
+        "reclaimer": "Reclaimer active",
+        "used": "Used",
+        "total": "Total",
+        "systemRam": "System RAM",
+        "memory": "Memory",
+        "totalVram": "Total VRAM",
+        "storage": "Models storage"
+      },
       "sections": {
         "heading": "Sections",
         "runtime": "Runtime",
diff --git a/core/http/react-ui/public/locales/it/home.json b/core/http/react-ui/public/locales/it/home.json
index c68e7023c..65d2dbba7 100644
--- a/core/http/react-ui/public/locales/it/home.json
+++ b/core/http/react-ui/public/locales/it/home.json
@@ -94,8 +94,8 @@
   },
   "jump": {
     "heading": "Jump back in",
-    "discover": "Discover",
-    "discoverSummary": "Browse the gallery and install models",
+    "models": "Models",
+    "modelsSummary": "Explore, install, and manage models",
     "create": "Create",
     "createSummary": "Open a chat, image or voice session",
     "operate": "Operate",
diff --git a/core/http/react-ui/public/locales/it/models.json b/core/http/react-ui/public/locales/it/models.json
index 32812fffa..80bd16284 100644
--- a/core/http/react-ui/public/locales/it/models.json
+++ b/core/http/react-ui/public/locales/it/models.json
@@ -1,5 +1,59 @@
 {
-  "title": "Esplora",
+  "lifecycle": {
+    "title": "Models",
+    "navLabel": "Model lifecycle",
+    "views": { "explore": "Explore", "installed": "Installed" },
+    "filters": { "all": "All", "running": "Running", "idle": "Idle", "disabled": "Disabled", "pinned": "Pinned", "distributed": "Distributed" },
+    "installed": {
+      "searchPlaceholder": "Search installed models",
+      "count": "{{shown}} of {{total}}",
+      "backToAll": "All installed models",
+      "eyebrow": "Installed on this host",
+      "summary": "{{count}} models ready to serve.",
+      "summaryHint": "Select a model to inspect its runtime state and controls."
+    },
+    "states": { "running": "Running", "idle": "Idle", "disabled": "Disabled", "working": "Working…" },
+    "actions": {
+      "load": "Load", "loading": "Loading…", "stop": "Stop", "update": "Update", "updating": "Updating…",
+      "enable": "Enable model", "disable": "Disable model", "pin": "Pin (prevent idle unload)",
+      "unpin": "Unpin (allow idle unload)", "edit": "Edit configuration", "logs": "Backend logs",
+      "delete": "Delete model", "forModel": "Actions for {{model}}",
+      "open": "Open {{useCase}}", "manageInstallation": "Manage installation"
+    },
+    "actionNames": { "load": "load", "stop": "stop", "enable": "enable", "disable": "disable", "pin": "pin", "unpin": "unpin", "delete": "delete", "update": "update" },
+    "toasts": {
+      "loaded": "Loaded {{model}}", "stopped": "Stopped {{model}}", "enabled": "Enabled {{model}}",
+      "disabled": "Disabled {{model}}", "pinned": "Pinned {{model}}", "unpinned": "Unpinned {{model}}",
+      "deleted": "Deleted {{model}}", "updated": "Models updated"
+    },
+    "confirm": {
+      "stopTitle": "Stop Model", "stopMessage": "Stop model {{model}}?",
+      "deleteTitle": "Delete Model", "deleteMessage": "Delete model {{model}}? This cannot be undone."
+    },
+    "errors": {
+      "action": "Could not {{action}} {{model}}: {{message}}",
+      "loadList": "Could not load installed models: {{message}}"
+    },
+    "detail": {
+      "title": "Details", "state": "State", "backend": "Backend", "auto": "Auto", "pinned": "Pinned", "yes": "yes",
+      "description": "Description", "noDescription": "No gallery description is available for this model.",
+      "license": "License", "tags": "Tags", "links": "Links", "distributed": "Distributed", "source": "Source",
+      "files": "Files", "fileCount": "{{count}} file", "fileCount_other": "{{count}} files",
+      "adopted": "Adopted", "adoptedHint": "Discovered on a worker but not configured locally. Persist the config to make it permanent.",
+      "alias": "alias → {{target}}", "aliasTitle": "Alias → {{target}}"
+    },
+    "open": {
+      "title": "Open", "chat": "Chat", "completion": "Completion", "image": "Image", "video": "Video", "tts": "TTS",
+      "transcribe": "Transcribe", "sound": "Sound", "face": "Face", "voice": "Voice", "embeddings": "Embeddings",
+      "rerank": "Rerank", "vad": "VAD", "score": "Score"
+    },
+    "empty": {
+      "title": "No models installed yet", "text": "Explore the gallery or import a model to get started.",
+      "explore": "Explore models", "import": "Import model", "noMatches": "No installed models match these filters.",
+      "clear": "Clear filters"
+    }
+  },
+  "title": "Models",
   "subtitle": "Sfoglia e installa modelli AI dalla galleria",
   "recommended": {
     "title": "Consigliati per il tuo hardware",
diff --git a/core/http/react-ui/public/locales/it/nav.json b/core/http/react-ui/public/locales/it/nav.json
index 910dc45a9..fd35543ae 100644
--- a/core/http/react-ui/public/locales/it/nav.json
+++ b/core/http/react-ui/public/locales/it/nav.json
@@ -30,7 +30,7 @@
   },
   "items": {
     "home": "Home",
-    "discover": "Esplora",
+    "models": "Models",
     "chat": "Chat",
     "studio": "Studio",
     "talk": "Conversazione",
@@ -40,7 +40,6 @@
     "voices": "Voci",
     "jobs": "Lavori",
     "operate": "Amministrazione",
-    "host": "Host",
     "audioTransform": "Trasforma audio",
     "faceRecognition": "Riconoscimento volti",
     "voiceRecognition": "Riconoscimento vocale",
diff --git a/core/http/react-ui/public/locales/ko/admin.json b/core/http/react-ui/public/locales/ko/admin.json
index b02864f91..8bf612247 100644
--- a/core/http/react-ui/public/locales/ko/admin.json
+++ b/core/http/react-ui/public/locales/ko/admin.json
@@ -110,6 +110,70 @@
     }
   },
   "backends": {
+    "lifecycle": {
+      "navigation": "Backend lifecycle",
+      "catalog": "Catalog",
+      "installed": "Installed",
+      "installedAria": "Installed backends",
+      "searchPlaceholder": "Search installed backends by name or alias...",
+      "filterAll": "All",
+      "filterUser": "User",
+      "filterSystem": "System",
+      "filterUpdates": "Updates",
+      "filterOffline": "Offline nodes",
+      "variants": "Variants",
+      "variantsCount": "Variants ({{count}})",
+      "development": "Development",
+      "developmentCount": "Development ({{count}})",
+      "countLabel": "{{visible}} of {{total}}",
+      "emptyTitle": "No backends installed yet",
+      "emptyBody": "Install a backend from the Catalog to give this host a runtime for models.",
+      "noMatches": "No installed backends match the current search and filters.",
+      "clearFilters": "Clear filters",
+      "updatesAvailable_one": "{{count}} backend has an update available",
+      "updatesAvailable_other": "{{count}} backends have updates available",
+      "upgradeAll": "Upgrade all",
+      "upgrading": "Upgrading...",
+      "upgradeAllFailed": "Upgrade failed for {{name}}: {{message}}",
+      "upgradeAllStarted_one": "Upgrade started for {{count}} backend",
+      "upgradeAllStarted_other": "Upgrade started for {{count}} backends",
+      "loadFailed": "Failed to load installed backends: {{message}}",
+      "reinstall": "Reinstall backend",
+      "reinstallStarted": "Reinstalling {{name}}...",
+      "reinstallFailed": "Failed to reinstall: {{message}}",
+      "upgrade": "Upgrade",
+      "upgradeTo": "Upgrade to v{{version}}",
+      "upgradeStarted": "Upgrading {{name}}...",
+      "upgradeFailed": "Failed to upgrade: {{message}}",
+      "delete": "Delete",
+      "deleteBackend": "Delete backend",
+      "deleteTitle": "Delete Backend",
+      "deleteMessage": "Delete backend {{name}}?",
+      "deleteSucceeded": "Deleted backend {{name}}",
+      "deleteFailed": "Failed to delete backend: {{message}}",
+      "actionsFor": "Actions for {{name}}",
+      "protected": "Protected",
+      "protectedTitle": "System backends are managed outside the gallery",
+      "allBackends": "All backends",
+      "version": "Version",
+      "available": "Available",
+      "managed": "Managed",
+      "system": "System",
+      "gallery": "Gallery",
+      "installedOn": "Installed on",
+      "description": "Description",
+      "source": "Source",
+      "digest": "Digest",
+      "installedAt": "Installed",
+      "working": "Working...",
+      "updateAvailable": "Update available",
+      "updateGroup": "Update available",
+      "installedGroup": "Installed",
+      "inventoryEyebrow": "Installed runtimes",
+      "inventoryTitle_one": "{{count}} backend is installed.",
+      "inventoryTitle_other": "{{count}} backends are installed.",
+      "inventoryBody": "Select a backend to inspect its source, version, placement, and lifecycle actions."
+    },
     "title": "백엔드 관리",
     "subtitle": "모델을 구동할 AI 백엔드를 탐색하고 설치합니다"
   },
@@ -178,6 +242,20 @@
         "clear": "Nothing needs attention. Backends are current, no operation has failed, and every node is healthy.",
         "backendUpdate": "Update available: {{from}} → {{to}}"
       },
+      "capacity": {
+        "title": "호스트 용량",
+        "loading": "호스트 용량 불러오는 중...",
+        "unavailable": "호스트 용량을 사용할 수 없습니다",
+        "empty": "보고된 용량 데이터가 없습니다",
+        "gpus": "{{count}} GPUs",
+        "reclaimer": "Reclaimer active",
+        "used": "Used",
+        "total": "Total",
+        "systemRam": "System RAM",
+        "memory": "Memory",
+        "totalVram": "Total VRAM",
+        "storage": "Models storage"
+      },
       "sections": {
         "heading": "Sections",
         "runtime": "Runtime",
diff --git a/core/http/react-ui/public/locales/ko/home.json b/core/http/react-ui/public/locales/ko/home.json
index 37846bcad..beba986ed 100644
--- a/core/http/react-ui/public/locales/ko/home.json
+++ b/core/http/react-ui/public/locales/ko/home.json
@@ -94,8 +94,8 @@
   },
   "jump": {
     "heading": "Jump back in",
-    "discover": "Discover",
-    "discoverSummary": "Browse the gallery and install models",
+    "models": "Models",
+    "modelsSummary": "Explore, install, and manage models",
     "create": "Create",
     "createSummary": "Open a chat, image or voice session",
     "operate": "Operate",
diff --git a/core/http/react-ui/public/locales/ko/models.json b/core/http/react-ui/public/locales/ko/models.json
index 27bb57e93..b4f1a4656 100644
--- a/core/http/react-ui/public/locales/ko/models.json
+++ b/core/http/react-ui/public/locales/ko/models.json
@@ -1,5 +1,59 @@
 {
-  "title": "둘러보기",
+  "lifecycle": {
+    "title": "Models",
+    "navLabel": "Model lifecycle",
+    "views": { "explore": "Explore", "installed": "Installed" },
+    "filters": { "all": "All", "running": "Running", "idle": "Idle", "disabled": "Disabled", "pinned": "Pinned", "distributed": "Distributed" },
+    "installed": {
+      "searchPlaceholder": "Search installed models",
+      "count": "{{shown}} of {{total}}",
+      "backToAll": "All installed models",
+      "eyebrow": "Installed on this host",
+      "summary": "{{count}} models ready to serve.",
+      "summaryHint": "Select a model to inspect its runtime state and controls."
+    },
+    "states": { "running": "Running", "idle": "Idle", "disabled": "Disabled", "working": "Working…" },
+    "actions": {
+      "load": "Load", "loading": "Loading…", "stop": "Stop", "update": "Update", "updating": "Updating…",
+      "enable": "Enable model", "disable": "Disable model", "pin": "Pin (prevent idle unload)",
+      "unpin": "Unpin (allow idle unload)", "edit": "Edit configuration", "logs": "Backend logs",
+      "delete": "Delete model", "forModel": "Actions for {{model}}",
+      "open": "Open {{useCase}}", "manageInstallation": "Manage installation"
+    },
+    "actionNames": { "load": "load", "stop": "stop", "enable": "enable", "disable": "disable", "pin": "pin", "unpin": "unpin", "delete": "delete", "update": "update" },
+    "toasts": {
+      "loaded": "Loaded {{model}}", "stopped": "Stopped {{model}}", "enabled": "Enabled {{model}}",
+      "disabled": "Disabled {{model}}", "pinned": "Pinned {{model}}", "unpinned": "Unpinned {{model}}",
+      "deleted": "Deleted {{model}}", "updated": "Models updated"
+    },
+    "confirm": {
+      "stopTitle": "Stop Model", "stopMessage": "Stop model {{model}}?",
+      "deleteTitle": "Delete Model", "deleteMessage": "Delete model {{model}}? This cannot be undone."
+    },
+    "errors": {
+      "action": "Could not {{action}} {{model}}: {{message}}",
+      "loadList": "Could not load installed models: {{message}}"
+    },
+    "detail": {
+      "title": "Details", "state": "State", "backend": "Backend", "auto": "Auto", "pinned": "Pinned", "yes": "yes",
+      "description": "Description", "noDescription": "No gallery description is available for this model.",
+      "license": "License", "tags": "Tags", "links": "Links", "distributed": "Distributed", "source": "Source",
+      "files": "Files", "fileCount": "{{count}} file", "fileCount_other": "{{count}} files",
+      "adopted": "Adopted", "adoptedHint": "Discovered on a worker but not configured locally. Persist the config to make it permanent.",
+      "alias": "alias → {{target}}", "aliasTitle": "Alias → {{target}}"
+    },
+    "open": {
+      "title": "Open", "chat": "Chat", "completion": "Completion", "image": "Image", "video": "Video", "tts": "TTS",
+      "transcribe": "Transcribe", "sound": "Sound", "face": "Face", "voice": "Voice", "embeddings": "Embeddings",
+      "rerank": "Rerank", "vad": "VAD", "score": "Score"
+    },
+    "empty": {
+      "title": "No models installed yet", "text": "Explore the gallery or import a model to get started.",
+      "explore": "Explore models", "import": "Import model", "noMatches": "No installed models match these filters.",
+      "clear": "Clear filters"
+    }
+  },
+  "title": "Models",
   "subtitle": "갤러리에서 AI 모델을 둘러보고 설치합니다",
   "recommended": {
     "title": "하드웨어에 맞는 추천",
diff --git a/core/http/react-ui/public/locales/ko/nav.json b/core/http/react-ui/public/locales/ko/nav.json
index 8186bb06b..3df98ab4d 100644
--- a/core/http/react-ui/public/locales/ko/nav.json
+++ b/core/http/react-ui/public/locales/ko/nav.json
@@ -30,7 +30,7 @@
   },
   "items": {
     "home": "홈",
-    "discover": "둘러보기",
+    "models": "Models",
     "chat": "채팅",
     "studio": "스튜디오",
     "talk": "대화",
@@ -40,7 +40,6 @@
     "voices": "음성",
     "jobs": "작업",
     "operate": "관리",
-    "host": "호스트",
     "audioTransform": "오디오 변환",
     "faceRecognition": "얼굴 인식",
     "voiceRecognition": "음성 인식",
diff --git a/core/http/react-ui/public/locales/pt-BR/admin.json b/core/http/react-ui/public/locales/pt-BR/admin.json
index a10f157e4..3f1ff48c8 100644
--- a/core/http/react-ui/public/locales/pt-BR/admin.json
+++ b/core/http/react-ui/public/locales/pt-BR/admin.json
@@ -110,6 +110,70 @@
     }
   },
   "backends": {
+    "lifecycle": {
+      "navigation": "Backend lifecycle",
+      "catalog": "Catalog",
+      "installed": "Installed",
+      "installedAria": "Installed backends",
+      "searchPlaceholder": "Search installed backends by name or alias...",
+      "filterAll": "All",
+      "filterUser": "User",
+      "filterSystem": "System",
+      "filterUpdates": "Updates",
+      "filterOffline": "Offline nodes",
+      "variants": "Variants",
+      "variantsCount": "Variants ({{count}})",
+      "development": "Development",
+      "developmentCount": "Development ({{count}})",
+      "countLabel": "{{visible}} of {{total}}",
+      "emptyTitle": "No backends installed yet",
+      "emptyBody": "Install a backend from the Catalog to give this host a runtime for models.",
+      "noMatches": "No installed backends match the current search and filters.",
+      "clearFilters": "Clear filters",
+      "updatesAvailable_one": "{{count}} backend has an update available",
+      "updatesAvailable_other": "{{count}} backends have updates available",
+      "upgradeAll": "Upgrade all",
+      "upgrading": "Upgrading...",
+      "upgradeAllFailed": "Upgrade failed for {{name}}: {{message}}",
+      "upgradeAllStarted_one": "Upgrade started for {{count}} backend",
+      "upgradeAllStarted_other": "Upgrade started for {{count}} backends",
+      "loadFailed": "Failed to load installed backends: {{message}}",
+      "reinstall": "Reinstall backend",
+      "reinstallStarted": "Reinstalling {{name}}...",
+      "reinstallFailed": "Failed to reinstall: {{message}}",
+      "upgrade": "Upgrade",
+      "upgradeTo": "Upgrade to v{{version}}",
+      "upgradeStarted": "Upgrading {{name}}...",
+      "upgradeFailed": "Failed to upgrade: {{message}}",
+      "delete": "Delete",
+      "deleteBackend": "Delete backend",
+      "deleteTitle": "Delete Backend",
+      "deleteMessage": "Delete backend {{name}}?",
+      "deleteSucceeded": "Deleted backend {{name}}",
+      "deleteFailed": "Failed to delete backend: {{message}}",
+      "actionsFor": "Actions for {{name}}",
+      "protected": "Protected",
+      "protectedTitle": "System backends are managed outside the gallery",
+      "allBackends": "All backends",
+      "version": "Version",
+      "available": "Available",
+      "managed": "Managed",
+      "system": "System",
+      "gallery": "Gallery",
+      "installedOn": "Installed on",
+      "description": "Description",
+      "source": "Source",
+      "digest": "Digest",
+      "installedAt": "Installed",
+      "working": "Working...",
+      "updateAvailable": "Update available",
+      "updateGroup": "Update available",
+      "installedGroup": "Installed",
+      "inventoryEyebrow": "Installed runtimes",
+      "inventoryTitle_one": "{{count}} backend is installed.",
+      "inventoryTitle_other": "{{count}} backends are installed.",
+      "inventoryBody": "Select a backend to inspect its source, version, placement, and lifecycle actions."
+    },
     "title": "Gerenciamento de Backends",
     "subtitle": "Descubra e instale backends de IA para potencializar seus modelos"
   },
@@ -178,6 +242,20 @@
         "clear": "Nada requer atenção. Os backends estão atualizados, nenhuma operação falhou e todos os nós estão saudáveis.",
         "backendUpdate": "Atualização disponível: {{from}} → {{to}}"
       },
+      "capacity": {
+        "title": "Capacidade do host",
+        "loading": "Carregando a capacidade do host...",
+        "unavailable": "Capacidade do host indisponível",
+        "empty": "Nenhum dado de capacidade informado",
+        "gpus": "{{count}} GPUs",
+        "reclaimer": "Recuperador ativo",
+        "used": "Usado",
+        "total": "Total",
+        "systemRam": "RAM do sistema",
+        "memory": "Memória",
+        "totalVram": "VRAM total",
+        "storage": "Armazenamento de modelos"
+      },
       "sections": {
         "heading": "Seções",
         "runtime": "Runtime",
diff --git a/core/http/react-ui/public/locales/pt-BR/home.json b/core/http/react-ui/public/locales/pt-BR/home.json
index 119af6174..3a8e39d38 100644
--- a/core/http/react-ui/public/locales/pt-BR/home.json
+++ b/core/http/react-ui/public/locales/pt-BR/home.json
@@ -109,8 +109,8 @@
   },
   "jump": {
     "heading": "Continue de onde parou",
-    "discover": "Descobrir",
-    "discoverSummary": "Explore a galeria e instale modelos",
+    "models": "Modelos",
+    "modelsSummary": "Explore, instale e gerencie modelos",
     "create": "Criar",
     "createSummary": "Abra uma sessão de chat, imagem ou voz",
     "operate": "Operar",
diff --git a/core/http/react-ui/public/locales/pt-BR/modelEditor.json b/core/http/react-ui/public/locales/pt-BR/modelEditor.json
index 698b19f03..ebb42ddb7 100644
--- a/core/http/react-ui/public/locales/pt-BR/modelEditor.json
+++ b/core/http/react-ui/public/locales/pt-BR/modelEditor.json
@@ -9,7 +9,7 @@
   },
   "actions": {
     "backTo": "Voltar para {{page}}",
-    "system": "Sistema",
+    "models": "Modelos",
     "templates": "Modelos",
     "createModel": "Criar Modelo",
     "saveChanges": "Salvar Alterações",
diff --git a/core/http/react-ui/public/locales/pt-BR/models.json b/core/http/react-ui/public/locales/pt-BR/models.json
index 1fb2e37c6..9bcbdcffd 100644
--- a/core/http/react-ui/public/locales/pt-BR/models.json
+++ b/core/http/react-ui/public/locales/pt-BR/models.json
@@ -1,5 +1,59 @@
 {
-  "title": "Descobrir",
+  "lifecycle": {
+    "title": "Models",
+    "navLabel": "Model lifecycle",
+    "views": { "explore": "Explore", "installed": "Installed" },
+    "filters": { "all": "All", "running": "Running", "idle": "Idle", "disabled": "Disabled", "pinned": "Pinned", "distributed": "Distributed" },
+    "installed": {
+      "searchPlaceholder": "Search installed models",
+      "count": "{{shown}} of {{total}}",
+      "backToAll": "All installed models",
+      "eyebrow": "Installed on this host",
+      "summary": "{{count}} models ready to serve.",
+      "summaryHint": "Select a model to inspect its runtime state and controls."
+    },
+    "states": { "running": "Running", "idle": "Idle", "disabled": "Disabled", "working": "Working…" },
+    "actions": {
+      "load": "Load", "loading": "Loading…", "stop": "Stop", "update": "Update", "updating": "Updating…",
+      "enable": "Enable model", "disable": "Disable model", "pin": "Pin (prevent idle unload)",
+      "unpin": "Unpin (allow idle unload)", "edit": "Edit configuration", "logs": "Backend logs",
+      "delete": "Delete model", "forModel": "Actions for {{model}}",
+      "open": "Open {{useCase}}", "manageInstallation": "Manage installation"
+    },
+    "actionNames": { "load": "load", "stop": "stop", "enable": "enable", "disable": "disable", "pin": "pin", "unpin": "unpin", "delete": "delete", "update": "update" },
+    "toasts": {
+      "loaded": "Loaded {{model}}", "stopped": "Stopped {{model}}", "enabled": "Enabled {{model}}",
+      "disabled": "Disabled {{model}}", "pinned": "Pinned {{model}}", "unpinned": "Unpinned {{model}}",
+      "deleted": "Deleted {{model}}", "updated": "Models updated"
+    },
+    "confirm": {
+      "stopTitle": "Stop Model", "stopMessage": "Stop model {{model}}?",
+      "deleteTitle": "Delete Model", "deleteMessage": "Delete model {{model}}? This cannot be undone."
+    },
+    "errors": {
+      "action": "Could not {{action}} {{model}}: {{message}}",
+      "loadList": "Could not load installed models: {{message}}"
+    },
+    "detail": {
+      "title": "Details", "state": "State", "backend": "Backend", "auto": "Auto", "pinned": "Pinned", "yes": "yes",
+      "description": "Description", "noDescription": "No gallery description is available for this model.",
+      "license": "License", "tags": "Tags", "links": "Links", "distributed": "Distributed", "source": "Source",
+      "files": "Files", "fileCount": "{{count}} file", "fileCount_other": "{{count}} files",
+      "adopted": "Adopted", "adoptedHint": "Discovered on a worker but not configured locally. Persist the config to make it permanent.",
+      "alias": "alias → {{target}}", "aliasTitle": "Alias → {{target}}"
+    },
+    "open": {
+      "title": "Open", "chat": "Chat", "completion": "Completion", "image": "Image", "video": "Video", "tts": "TTS",
+      "transcribe": "Transcribe", "sound": "Sound", "face": "Face", "voice": "Voice", "embeddings": "Embeddings",
+      "rerank": "Rerank", "vad": "VAD", "score": "Score"
+    },
+    "empty": {
+      "title": "No models installed yet", "text": "Explore the gallery or import a model to get started.",
+      "explore": "Explore models", "import": "Import model", "noMatches": "No installed models match these filters.",
+      "clear": "Clear filters"
+    }
+  },
+  "title": "Modelos",
   "subtitle": "Explore e instale modelos de IA da galeria",
   "models": "Modelos",
   "recommended": {
diff --git a/core/http/react-ui/public/locales/pt-BR/nav.json b/core/http/react-ui/public/locales/pt-BR/nav.json
index 683419407..8f3f58d08 100644
--- a/core/http/react-ui/public/locales/pt-BR/nav.json
+++ b/core/http/react-ui/public/locales/pt-BR/nav.json
@@ -30,7 +30,7 @@
   },
   "items": {
     "home": "Início",
-    "discover": "Descobrir",
+    "models": "Models",
     "chat": "Chat",
     "studio": "Studio",
     "talk": "Falar",
@@ -40,7 +40,6 @@
     "voices": "Vozes",
     "jobs": "Trabalhos",
     "operate": "Admin",
-    "host": "Host",
     "audioTransform": "Transformação de Áudio",
     "faceRecognition": "Reconhecimento Facial",
     "voiceRecognition": "Reconhecimento de Voz",
diff --git a/core/http/react-ui/public/locales/zh-CN/admin.json b/core/http/react-ui/public/locales/zh-CN/admin.json
index 63641d00d..d6289dc00 100644
--- a/core/http/react-ui/public/locales/zh-CN/admin.json
+++ b/core/http/react-ui/public/locales/zh-CN/admin.json
@@ -110,6 +110,70 @@
     }
   },
   "backends": {
+    "lifecycle": {
+      "navigation": "Backend lifecycle",
+      "catalog": "Catalog",
+      "installed": "Installed",
+      "installedAria": "Installed backends",
+      "searchPlaceholder": "Search installed backends by name or alias...",
+      "filterAll": "All",
+      "filterUser": "User",
+      "filterSystem": "System",
+      "filterUpdates": "Updates",
+      "filterOffline": "Offline nodes",
+      "variants": "Variants",
+      "variantsCount": "Variants ({{count}})",
+      "development": "Development",
+      "developmentCount": "Development ({{count}})",
+      "countLabel": "{{visible}} of {{total}}",
+      "emptyTitle": "No backends installed yet",
+      "emptyBody": "Install a backend from the Catalog to give this host a runtime for models.",
+      "noMatches": "No installed backends match the current search and filters.",
+      "clearFilters": "Clear filters",
+      "updatesAvailable_one": "{{count}} backend has an update available",
+      "updatesAvailable_other": "{{count}} backends have updates available",
+      "upgradeAll": "Upgrade all",
+      "upgrading": "Upgrading...",
+      "upgradeAllFailed": "Upgrade failed for {{name}}: {{message}}",
+      "upgradeAllStarted_one": "Upgrade started for {{count}} backend",
+      "upgradeAllStarted_other": "Upgrade started for {{count}} backends",
+      "loadFailed": "Failed to load installed backends: {{message}}",
+      "reinstall": "Reinstall backend",
+      "reinstallStarted": "Reinstalling {{name}}...",
+      "reinstallFailed": "Failed to reinstall: {{message}}",
+      "upgrade": "Upgrade",
+      "upgradeTo": "Upgrade to v{{version}}",
+      "upgradeStarted": "Upgrading {{name}}...",
+      "upgradeFailed": "Failed to upgrade: {{message}}",
+      "delete": "Delete",
+      "deleteBackend": "Delete backend",
+      "deleteTitle": "Delete Backend",
+      "deleteMessage": "Delete backend {{name}}?",
+      "deleteSucceeded": "Deleted backend {{name}}",
+      "deleteFailed": "Failed to delete backend: {{message}}",
+      "actionsFor": "Actions for {{name}}",
+      "protected": "Protected",
+      "protectedTitle": "System backends are managed outside the gallery",
+      "allBackends": "All backends",
+      "version": "Version",
+      "available": "Available",
+      "managed": "Managed",
+      "system": "System",
+      "gallery": "Gallery",
+      "installedOn": "Installed on",
+      "description": "Description",
+      "source": "Source",
+      "digest": "Digest",
+      "installedAt": "Installed",
+      "working": "Working...",
+      "updateAvailable": "Update available",
+      "updateGroup": "Update available",
+      "installedGroup": "Installed",
+      "inventoryEyebrow": "Installed runtimes",
+      "inventoryTitle_one": "{{count}} backend is installed.",
+      "inventoryTitle_other": "{{count}} backends are installed.",
+      "inventoryBody": "Select a backend to inspect its source, version, placement, and lifecycle actions."
+    },
     "title": "后端管理",
     "subtitle": "发现并安装为模型提供支持的 AI 后端"
   },
@@ -155,6 +219,20 @@
         "clear": "Nothing needs attention. Backends are current, no operation has failed, and every node is healthy.",
         "backendUpdate": "Update available: {{from}} → {{to}}"
       },
+      "capacity": {
+        "title": "主机容量",
+        "loading": "正在加载主机容量...",
+        "unavailable": "主机容量不可用",
+        "empty": "未报告容量数据",
+        "gpus": "{{count}} GPUs",
+        "reclaimer": "Reclaimer active",
+        "used": "Used",
+        "total": "Total",
+        "systemRam": "System RAM",
+        "memory": "Memory",
+        "totalVram": "Total VRAM",
+        "storage": "Models storage"
+      },
       "sections": {
         "heading": "Sections",
         "runtime": "Runtime",
diff --git a/core/http/react-ui/public/locales/zh-CN/home.json b/core/http/react-ui/public/locales/zh-CN/home.json
index f99c34380..9ab886ee5 100644
--- a/core/http/react-ui/public/locales/zh-CN/home.json
+++ b/core/http/react-ui/public/locales/zh-CN/home.json
@@ -94,8 +94,8 @@
   },
   "jump": {
     "heading": "Jump back in",
-    "discover": "Discover",
-    "discoverSummary": "Browse the gallery and install models",
+    "models": "Models",
+    "modelsSummary": "Explore, install, and manage models",
     "create": "Create",
     "createSummary": "Open a chat, image or voice session",
     "operate": "Operate",
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 2f17ea289..181467b6a 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,59 @@
 {
-  "title": "发现",
+  "lifecycle": {
+    "title": "Models",
+    "navLabel": "Model lifecycle",
+    "views": { "explore": "Explore", "installed": "Installed" },
+    "filters": { "all": "All", "running": "Running", "idle": "Idle", "disabled": "Disabled", "pinned": "Pinned", "distributed": "Distributed" },
+    "installed": {
+      "searchPlaceholder": "Search installed models",
+      "count": "{{shown}} of {{total}}",
+      "backToAll": "All installed models",
+      "eyebrow": "Installed on this host",
+      "summary": "{{count}} models ready to serve.",
+      "summaryHint": "Select a model to inspect its runtime state and controls."
+    },
+    "states": { "running": "Running", "idle": "Idle", "disabled": "Disabled", "working": "Working…" },
+    "actions": {
+      "load": "Load", "loading": "Loading…", "stop": "Stop", "update": "Update", "updating": "Updating…",
+      "enable": "Enable model", "disable": "Disable model", "pin": "Pin (prevent idle unload)",
+      "unpin": "Unpin (allow idle unload)", "edit": "Edit configuration", "logs": "Backend logs",
+      "delete": "Delete model", "forModel": "Actions for {{model}}",
+      "open": "Open {{useCase}}", "manageInstallation": "Manage installation"
+    },
+    "actionNames": { "load": "load", "stop": "stop", "enable": "enable", "disable": "disable", "pin": "pin", "unpin": "unpin", "delete": "delete", "update": "update" },
+    "toasts": {
+      "loaded": "Loaded {{model}}", "stopped": "Stopped {{model}}", "enabled": "Enabled {{model}}",
+      "disabled": "Disabled {{model}}", "pinned": "Pinned {{model}}", "unpinned": "Unpinned {{model}}",
+      "deleted": "Deleted {{model}}", "updated": "Models updated"
+    },
+    "confirm": {
+      "stopTitle": "Stop Model", "stopMessage": "Stop model {{model}}?",
+      "deleteTitle": "Delete Model", "deleteMessage": "Delete model {{model}}? This cannot be undone."
+    },
+    "errors": {
+      "action": "Could not {{action}} {{model}}: {{message}}",
+      "loadList": "Could not load installed models: {{message}}"
+    },
+    "detail": {
+      "title": "Details", "state": "State", "backend": "Backend", "auto": "Auto", "pinned": "Pinned", "yes": "yes",
+      "description": "Description", "noDescription": "No gallery description is available for this model.",
+      "license": "License", "tags": "Tags", "links": "Links", "distributed": "Distributed", "source": "Source",
+      "files": "Files", "fileCount": "{{count}} file", "fileCount_other": "{{count}} files",
+      "adopted": "Adopted", "adoptedHint": "Discovered on a worker but not configured locally. Persist the config to make it permanent.",
+      "alias": "alias → {{target}}", "aliasTitle": "Alias → {{target}}"
+    },
+    "open": {
+      "title": "Open", "chat": "Chat", "completion": "Completion", "image": "Image", "video": "Video", "tts": "TTS",
+      "transcribe": "Transcribe", "sound": "Sound", "face": "Face", "voice": "Voice", "embeddings": "Embeddings",
+      "rerank": "Rerank", "vad": "VAD", "score": "Score"
+    },
+    "empty": {
+      "title": "No models installed yet", "text": "Explore the gallery or import a model to get started.",
+      "explore": "Explore models", "import": "Import model", "noMatches": "No installed models match these filters.",
+      "clear": "Clear filters"
+    }
+  },
+  "title": "Models",
   "subtitle": "从模型库浏览和安装 AI 模型",
   "recommended": {
     "title": "适合你硬件的推荐",
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 265097192..0997d9180 100644
--- a/core/http/react-ui/public/locales/zh-CN/nav.json
+++ b/core/http/react-ui/public/locales/zh-CN/nav.json
@@ -30,7 +30,7 @@
   },
   "items": {
     "home": "首页",
-    "discover": "发现",
+    "models": "Models",
     "chat": "聊天",
     "studio": "工作室",
     "talk": "通话",
@@ -40,7 +40,6 @@
     "voices": "声音",
     "jobs": "任务",
     "operate": "管理",
-    "host": "主机",
     "audioTransform": "音频变换",
     "faceRecognition": "人脸识别",
     "voiceRecognition": "语音识别",
diff --git a/core/http/react-ui/src/App.css b/core/http/react-ui/src/App.css
index c1665e62d..463ad8c84 100644
--- a/core/http/react-ui/src/App.css
+++ b/core/http/react-ui/src/App.css
@@ -1125,6 +1125,12 @@
   margin-bottom: var(--spacing-sm);
 }
 
+.resource-monitor-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
 .resource-gpu-list {
   display: flex;
   flex-direction: column;
@@ -1150,6 +1156,13 @@
   color: var(--color-text-primary);
 }
 
+.resource-gpu-name--truncate {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .resource-gpu-vendor {
   font-size: 0.6875rem;
   padding: 2px 6px;
@@ -1158,6 +1171,32 @@
   border-radius: var(--radius-sm);
 }
 
+.resource-gpu-vendor--dynamic {
+  color: var(--resource-vendor-color);
+  background: color-mix(in srgb, var(--resource-vendor-color) 12%, transparent);
+}
+
+.resource-gpu-vendor--memory {
+  color: var(--color-accent);
+  background: var(--color-accent-light);
+}
+
+.resource-meter {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-xs);
+}
+
+.resource-meter__value {
+  min-width: 3em;
+  color: var(--resource-color);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-align: right;
+}
+
 .resource-gpu-stats {
   display: flex;
   gap: var(--spacing-md);
@@ -1175,11 +1214,26 @@
 
 .resource-bar {
   height: 100%;
-  background: var(--color-primary);
+  width: var(--resource-width, 0%);
+  background: var(--resource-color, var(--color-primary));
   border-radius: 2px;
   transition: width 500ms ease;
 }
 
+.resource-summary-row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-sm);
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+}
+
+.resource-summary-row__value {
+  color: var(--color-text-primary);
+  font-family: var(--font-mono);
+}
+
 .resource-bar-ram {
   background: var(--color-secondary);
 }
@@ -8795,23 +8849,6 @@ button.collapsible-header:focus-visible {
   outline-offset: 2px;
 }
 
-/* Manage summary marker — same .stat-cards layout. Top margin separates the
-   cards from the System Resources card above (otherwise they sit too close
-   to the RAM bar) and bottom margin tightens the gap to the tabs below. */
-/* Two class names, so this beats the shared .stat-strip shorthand regardless
-   of which rule the file happens to declare later. The single-class version
-   was silently losing its top margin to `margin: 0 0 …`, leaving the strip
-   flush against the resources card above it. */
-.stat-strip.manage-summary {
-  margin-top: var(--spacing-xl);
-  margin-bottom: var(--spacing-lg);
-  /* .page--app is a flex column whose split view takes flex:1, so a child with
-     no intrinsic minimum gets shrunk to nothing. The old cards survived only
-     because .stat-card carried min-height:96px; the figure cells do not, so the
-     strip has to decline to shrink. */
-  flex: none;
-}
-
 /* Screen-reader-only label, used for table headers whose visual cell needs
    no label (kebab-only Actions column, toggle-only Enabled column). The
    header still announces correctly to assistive tech without making the
@@ -11945,7 +11982,7 @@ button.collapsible-header:focus-visible {
 .ajd-code--error { background: var(--color-error-light); color: var(--color-error); max-height: none; }
 
 /* ==========================================================================
-   SplitView: the shell shared by Discover, Backends and Host.
+   SplitView: the shell shared by Models and Backends.
 
    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
@@ -12485,9 +12522,7 @@ button.collapsible-header:focus-visible {
   .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. */
+/* Compact list rows inside a pane: a state chip, a name, and one number. */
 .rowlist { display: flex; flex-direction: column; gap: 4px; }
 
 .rowline {
@@ -12581,11 +12616,7 @@ button.collapsible-header:focus-visible {
      pushes the page taller instead of scrolling inside it. */
   min-height: 0;
   padding-bottom: var(--spacing-lg);
-  /* The shell above is overflow:hidden so the document cannot grow, which left
-     anything taller than the viewport simply unreachable — Host has a
-     resources card, four stat cards and a tab bar above its split, and at any
-     window height the bottom of the pane fell off with nothing to scroll.
-     The page scrolls inside the pinned shell; the rail and pane keep their own
+  /* The page scrolls inside the pinned shell; the rail and pane keep their own
      inner scrollers for long lists and long details. */
   overflow-y: auto;
 }
@@ -12741,7 +12772,7 @@ button.collapsible-header:focus-visible {
   }
 }
 
-/* Backends: the filters stack in the rail column the way Discover's do. Seven
+/* Backends: the filters stack in the rail column the way Models' do. Seven
    chips fit at this width, so they need no disclosure. */
 .bk-filters {
   display: flex;
@@ -12760,9 +12791,6 @@ button.collapsible-header:focus-visible {
   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; }
 
@@ -12868,7 +12896,7 @@ button.collapsible-header:focus-visible {
 
 /* Pills are gone. A capsule radius reads as a tag floating on the surface,
    which fights a system whose structure is hairlines and square corners — and
-   with chips on Discover, Host, Activity and the biometrics pages, "some pages
+   with chips on Models, Activity and the biometrics pages, "some pages
    have pills" was the actual inconsistency. Round buttons keep their radius:
    .lightbox__nav and .home-send-btn are circles, not capsules. */
 
@@ -13032,11 +13060,7 @@ button.lane:hover {
 /* Headline figures on the Operate overview, and the sparklines under them.
    Hairline-gridded cells rather than cards: the same 1px grid the split-view
    StatGrid uses, so the two read as one system. */
-/* A row of headline figures on a hairline grid. Shared by the Operate overview
-   and the Host page so the two read as one system: same cell, same figure
-   scale, same tone vocabulary. Replaces Host's shadowed clickable cards, which
-   were a second dashboard language on a page that already had one. */
-.stat-strip,
+/* A row of headline figures on a hairline grid. */
 .operate-headline {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
@@ -13048,7 +13072,6 @@ button.lane:hover {
   overflow: hidden;
 }
 
-.stat-strip__cell,
 .operate-headline__cell {
   background: var(--color-bg-primary);
   padding: var(--spacing-sm) var(--spacing-md);
@@ -13056,8 +13079,6 @@ button.lane:hover {
   gap: 2px;
 }
 
-.stat-strip__label,
-.stat-strip__cell dt,
 .operate-headline__cell dt {
   color: var(--color-text-muted);
   font-size: 0.625rem;
@@ -13066,7 +13087,6 @@ button.lane:hover {
   text-transform: uppercase;
 }
 
-.stat-strip__value,
 .operate-headline__value {
   margin: 0;
   font-family: var(--font-mono);
@@ -13077,27 +13097,11 @@ button.lane:hover {
   font-variant-numeric: tabular-nums;
 }
 
-.stat-strip__value--primary,
 .operate-headline__value--primary { color: var(--color-text-primary); }
-.stat-strip__value--success,
 .operate-headline__value--success { color: var(--color-success); }
-.stat-strip__value--warning,
 .operate-headline__value--warning { color: var(--color-warning); }
-.stat-strip__value--muted,
 .operate-headline__value--muted { color: var(--color-text-tertiary); }
 
-button.stat-strip__cell {
-  border: 0;
-  color: inherit;
-  text-align: left;
-  font: inherit;
-  cursor: pointer;
-  transition: background var(--duration-fast) var(--ease-default);
-}
-
-button.stat-strip__cell:hover { background: var(--color-bg-hover); }
-button.stat-strip__cell:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
-
 .sparkline { display: block; width: 100%; height: 28px; margin-top: 2px; }
 .sparkline polyline { stroke: currentColor; }
 .sparkline circle { fill: currentColor; }
diff --git a/core/http/react-ui/src/components/ManageSummary.jsx b/core/http/react-ui/src/components/ManageSummary.jsx
deleted file mode 100644
index 620ef04d7..000000000
--- a/core/http/react-ui/src/components/ManageSummary.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// The Host page's headline figures.
-//
-// These were shadowed, clickable StatCards — a second dashboard language on a
-// page that already has a rail, a pane and a tab bar. They are now the same
-// hairline figure strip the Operate overview uses, so the two pages read as one
-// system rather than as two dashboards that happen to share a console.
-//
-// Each cell still routes into the tab and filter it describes: a count is worth
-// more when it is also the way to the thing counted. Counts are derived by the
-// parent — this component stays purely presentational.
-export default function ManageSummary({
-  modelsCount,
-  backendsCount,
-  runningCount,
-  updatesCount,
-  onCardClick,
-}) {
-  const click = (tab, filter) => onCardClick && onCardClick(tab, filter)
-
-  return (
-    <div className="stat-strip manage-summary">
-      <Figure
-        label="Models installed"
-        value={modelsCount}
-        onClick={() => click('models', 'all')}
-      />
-      <Figure
-        label="Backends installed"
-        value={backendsCount}
-        onClick={() => click('backends', 'all')}
-      />
-      <Figure
-        label="Running now"
-        value={runningCount}
-        // Tone only when the number means something. A strip where every cell
-        // is coloured has no emphasis left to spend.
-        tone={runningCount > 0 ? 'success' : 'muted'}
-        onClick={() => click('models', 'running')}
-      />
-      <Figure
-        label="Updates available"
-        value={updatesCount}
-        tone={updatesCount > 0 ? 'warning' : 'muted'}
-        onClick={() => click('backends', updatesCount > 0 ? 'upgradable' : 'all')}
-      />
-    </div>
-  )
-}
-
-// Buttons in a plain container rather than a description list. A <button> is
-// not valid inside a <dl>, and <dt>/<dd> are not valid inside a <button>: the
-// browser re-parents both and the cells collapse to nothing. These cells are a
-// set of controls, so saying so is also the honest markup.
-function Figure({ label, value, tone = 'primary', onClick }) {
-  return (
-    <button type="button" className="stat-strip__cell" onClick={onClick}>
-      <span className="stat-strip__label">{label}</span>
-      <span className={`stat-strip__value stat-strip__value--${tone}`}>{value}</span>
-    </button>
-  )
-}
diff --git a/core/http/react-ui/src/components/RecommendedModels.jsx b/core/http/react-ui/src/components/RecommendedModels.jsx
index 797b13e87..e42205945 100644
--- a/core/http/react-ui/src/components/RecommendedModels.jsx
+++ b/core/http/react-ui/src/components/RecommendedModels.jsx
@@ -5,7 +5,7 @@ import { useRecommendedModels, isNvfp4Name } from '../hooks/useRecommendedModels
 
 const CONTENT_ID = 'rec-models-content'
 
-// "Recommended for your hardware" at the top of Discover's zero state. Shares
+// "Recommended for your hardware" at the top of Models Explore's zero state. Shares
 // the hardware-fit ranking with the empty-state starter widget via
 // useRecommendedModels.
 //
diff --git a/core/http/react-ui/src/components/ResourceMonitor.jsx b/core/http/react-ui/src/components/ResourceMonitor.jsx
index ea5198e7f..81161113d 100644
--- a/core/http/react-ui/src/components/ResourceMonitor.jsx
+++ b/core/http/react-ui/src/components/ResourceMonitor.jsx
@@ -2,29 +2,70 @@ import { useResources } from '../hooks/useResources'
 import { formatBytes, percentColor, vendorColor } from '../utils/format'
 
 export default function ResourceMonitor() {
-  const { resources, loading } = useResources()
+  const { resources, loading, error } = useResources()
 
-  if (loading || !resources) {
-    return <div className="resource-monitor text-note">Loading resources...</div>
+  return (
+    <ResourceMonitorView
+      resources={resources}
+      loading={loading}
+      unavailable={Boolean(error)}
+    />
+  )
+}
+
+export function ResourceMonitorView({
+  resources,
+  loading = false,
+  unavailable = false,
+  title = 'System Resources',
+  loadingText = 'Loading resources...',
+  unavailableText = 'Resource data unavailable',
+  emptyText = 'No resource data reported',
+  copy = {},
+  testId,
+}) {
+  if (loading) {
+    return <div className="resource-monitor text-note" data-testid={testId}>{loadingText}</div>
+  }
+
+  if (unavailable || !resources) {
+    return <div className="resource-monitor text-note" data-testid={testId}>{unavailableText}</div>
   }
 
   const gpus = resources.gpus || []
-  const ram = resources.ram || {}
   const aggregate = resources.aggregate || {}
+  const ram = resources.ram || aggregate.ram || {}
   const isGpu = resources.type === 'gpu' && gpus.length > 0
+  const hasRam = ram.total != null || ram.total_bytes != null || ram.used != null || ram.used_bytes != null || ram.usage_percent != null
+  const hasStorage = resources.storage_size != null
+  const labels = {
+    gpuCount: count => `${count} GPUs`,
+    reclaimer: 'Reclaimer Active',
+    used: 'Used',
+    total: 'Total',
+    systemRam: 'System RAM',
+    memory: 'Memory',
+    totalVram: 'Total VRAM',
+    storage: 'Models storage',
+    ...copy,
+  }
+
+  if (!isGpu && !hasRam && !hasStorage) {
+    return <div className="resource-monitor text-note" data-testid={testId}>{emptyText}</div>
+  }
 
   return (
-    <div className="resource-monitor">
+    <div className="resource-monitor" data-testid={testId}>
       <div className="hstack hstack--between mb-sm">
         <h3 className="resource-monitor-title m-0">
-          <i className="fas fa-chart-bar" /> System Resources
+          <i className="fas fa-chart-bar" aria-hidden="true" /> {title}
         </h3>
-        <div style={{ display: 'flex', gap: 'var(--spacing-xs)', alignItems: 'center' }}>
+        <div className="resource-monitor-badges">
           {isGpu && gpus.length > 1 && (
-            <span className="badge badge-info">{gpus.length} GPUs</span>
+            <span className="badge badge-info">{labels.gpuCount(gpus.length)}</span>
           )}
           {resources.reclaimer_enabled && (
-            <span className="badge badge-success">Reclaimer Active</span>
+            <span className="badge badge-success">{labels.reclaimer}</span>
           )}
         </div>
       </div>
@@ -38,59 +79,59 @@ export default function ResourceMonitor() {
             return (
               <div key={i} className="resource-gpu-card">
                 <div className="resource-gpu-header">
-                  <span className="resource-gpu-name" style={{ maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <span className="resource-gpu-name resource-gpu-name--truncate">
                     {gpu.name || `GPU ${i}`}
                   </span>
                   {gpu.vendor && (
-                    <span className="resource-gpu-vendor" style={{ background: `${vColor}20`, color: vColor }}>
+                    <span className="resource-gpu-vendor resource-gpu-vendor--dynamic" style={{ '--resource-vendor-color': vColor }}>
                       {gpu.vendor}
                     </span>
                   )}
                 </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-xs)' }}>
+                <div className="resource-meter">
                   <div className="resource-bar-container flex-1">
-                    <div className="resource-bar" style={{ width: `${pct}%`, background: color }} />
+                    <div className="resource-bar" style={{ '--resource-width': `${pct}%`, '--resource-color': color }} />
                   </div>
-                  <span style={{ fontSize: '0.8125rem', fontWeight: 600, fontFamily: 'var(--font-mono)', color, minWidth: '3em', textAlign: 'right' }}>
+                  <span className="resource-meter__value" style={{ '--resource-color': color }}>
                     {pct.toFixed(0)}%
                   </span>
                 </div>
                 <div className="resource-gpu-stats">
-                  <span>Used: {formatBytes(gpu.used_vram)}</span>
-                  <span>Total: {formatBytes(gpu.total_vram)}</span>
+                  <span>{labels.used}: {formatBytes(gpu.used_vram)}</span>
+                  <span>{labels.total}: {formatBytes(gpu.total_vram)}</span>
                 </div>
               </div>
             )
           })}
         </div>
-      ) : (
+      ) : hasRam ? (
         /* RAM display */
         <div className="resource-gpu-card">
           <div className="resource-gpu-header">
-            <span className="resource-gpu-name">System RAM</span>
-            <span className="resource-gpu-vendor" style={{ background: 'var(--color-accent-light)', color: 'var(--color-accent)' }}>
-              Memory
+            <span className="resource-gpu-name">{labels.systemRam}</span>
+            <span className="resource-gpu-vendor resource-gpu-vendor--memory">
+              {labels.memory}
             </span>
           </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-xs)' }}>
+          <div className="resource-meter">
             <div className="resource-bar-container flex-1">
-              <div className="resource-bar" style={{ width: `${ram.usage_percent || 0}%`, background: percentColor(ram.usage_percent || 0) }} />
+              <div className="resource-bar" style={{ '--resource-width': `${ram.usage_percent || 0}%`, '--resource-color': percentColor(ram.usage_percent || 0) }} />
             </div>
-            <span style={{ fontSize: '0.8125rem', fontWeight: 600, fontFamily: 'var(--font-mono)', color: percentColor(ram.usage_percent || 0), minWidth: '3em', textAlign: 'right' }}>
+            <span className="resource-meter__value" style={{ '--resource-color': percentColor(ram.usage_percent || 0) }}>
               {(ram.usage_percent || 0).toFixed(0)}%
             </span>
           </div>
           <div className="resource-gpu-stats">
-            <span>Used: {formatBytes(ram.used || 0)}</span>
-            <span>Total: {formatBytes(ram.total || 0)}</span>
+            <span>{labels.used}: {formatBytes(ram.used ?? ram.used_bytes ?? 0)}</span>
+            <span>{labels.total}: {formatBytes(ram.total ?? ram.total_bytes ?? 0)}</span>
           </div>
         </div>
-      )}
+      ) : null}
 
       {/* Aggregate for multi-GPU */}
       {isGpu && aggregate.gpu_count > 1 && (
-        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)', marginTop: 'var(--spacing-sm)', display: 'flex', justifyContent: 'space-between' }}>
-          <span>Total VRAM</span>
+        <div className="resource-summary-row">
+          <span>{labels.totalVram}</span>
           <span className="text-mono">
             {formatBytes(aggregate.used_memory)} / {formatBytes(aggregate.total_memory)} ({aggregate.usage_percent?.toFixed(1)}%)
           </span>
@@ -99,9 +140,9 @@ export default function ResourceMonitor() {
 
       {/* Storage */}
       {resources.storage_size != null && (
-        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)', marginTop: 'var(--spacing-sm)', display: 'flex', justifyContent: 'space-between' }}>
-          <span>Models storage</span>
-          <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-text-primary)' }}>
+        <div className="resource-summary-row">
+          <span>{labels.storage}</span>
+          <span className="resource-summary-row__value">
             {formatBytes(resources.storage_size)}
           </span>
         </div>
diff --git a/core/http/react-ui/src/components/Sidebar.jsx b/core/http/react-ui/src/components/Sidebar.jsx
index 49e137d24..ade36e267 100644
--- a/core/http/react-ui/src/components/Sidebar.jsx
+++ b/core/http/react-ui/src/components/Sidebar.jsx
@@ -15,11 +15,7 @@ const SECTIONS_KEY = 'localai_sidebar_sections'
 
 const topItems = [
   { path: '/app', icon: 'fas fa-home', labelKey: 'items.home' },
-  // "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 },
+  { path: '/app/models', icon: 'fas fa-cubes', labelKey: 'items.models', adminOnly: true },
 ]
 
 // Create stays inline (frequent, one-click creative destinations). The Build
@@ -57,7 +53,7 @@ function NavItem({ item, onClose, collapsed }) {
       onTouchStart={preload}
       title={collapsed ? label : undefined}
     >
-      <i className={`${item.icon} nav-icon`} />
+      <i className={`${item.icon} nav-icon`} aria-hidden="true" />
       <span className="nav-label">{label}</span>
     </NavLink>
   )
@@ -259,7 +255,7 @@ export default function Sidebar({ isOpen, onClose }) {
                   onTouchStart={() => preloadRoute(target)}
                   title={collapsed ? label : undefined}
                 >
-                  <i className={`${config.icon} nav-icon`} />
+                  <i className={`${config.icon} nav-icon`} aria-hidden="true" />
                   <span className="nav-label">{label}</span>
                   {config.groups.some(g => g.items.some(i => i.badge === 'operations')) && activeOps > 0 && (
                     <span className={`nav-badge${failedOps > 0 ? ' nav-badge--error' : ''}`}>
diff --git a/core/http/react-ui/src/components/console/consoleConfig.js b/core/http/react-ui/src/components/console/consoleConfig.js
index e03f3c80b..221e7307f 100644
--- a/core/http/react-ui/src/components/console/consoleConfig.js
+++ b/core/http/react-ui/src/components/console/consoleConfig.js
@@ -92,7 +92,6 @@ export const operateConsole = {
       items: [
         { path: '/app/users', icon: 'fas fa-users', labelKey: 'items.users', adminOnly: true, authOnly: true },
         { path: '/app/middleware', icon: 'fas fa-shield-halved', labelKey: 'items.middleware', adminOnly: true },
-        { path: '/app/manage', icon: 'fas fa-desktop', labelKey: 'items.host', adminOnly: true, signal: 'host' },
         { path: '/app/settings', icon: 'fas fa-cog', labelKey: 'items.settings', adminOnly: true },
         { href: '/swagger/index.html', icon: 'fas fa-code', labelKey: 'items.api', external: true, adminOnly: true },
       ],
diff --git a/core/http/react-ui/src/components/split/EntityRail.jsx b/core/http/react-ui/src/components/split/EntityRail.jsx
index c32bdf417..5b166c8b9 100644
--- a/core/http/react-ui/src/components/split/EntityRail.jsx
+++ b/core/http/react-ui/src/components/split/EntityRail.jsx
@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 
 // EntityRail is the scannable half of SplitView: one line per entity, grouped
 // while browsing and flat while searching.
@@ -33,6 +33,25 @@ export default function EntityRail({
   busy = false,
 }) {
   const railRef = useRef(null)
+  const lastSelectedIdRef = useRef(null)
+
+  // Narrow layouts hide the rail while detail is selected. When Back (or the
+  // browser Back button) clears URL-owned selection, return keyboard focus to
+  // the row that opened the detail instead of dropping it on <body>.
+  useEffect(() => {
+    if (selectedId) {
+      lastSelectedIdRef.current = selectedId
+      return undefined
+    }
+    const id = lastSelectedIdRef.current
+    if (!id) return undefined
+    const frame = window.requestAnimationFrame(() => {
+      const item = railRef.current?.querySelector(`[data-entity="${CSS.escape(id)}"]`)
+      item?.scrollIntoView({ block: 'nearest' })
+      item?.focus({ preventScroll: true })
+    })
+    return () => window.cancelAnimationFrame(frame)
+  }, [selectedId])
 
   // Up/Down moves the selection so the pane can be stepped through without
   // going back to the mouse.
@@ -68,7 +87,12 @@ export default function EntityRail({
   // 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 lastSelectedId = lastSelectedIdRef.current
+  const tabbableId = items.some(i => i.id === selectedId)
+    ? selectedId
+    : items.some(i => i.id === lastSelectedId)
+      ? lastSelectedId
+      : firstId
 
   const renderItem = (item) => (
     <RailItem
diff --git a/core/http/react-ui/src/components/split/SplitView.jsx b/core/http/react-ui/src/components/split/SplitView.jsx
index 4d8ccb4fd..ab0fea8f9 100644
--- a/core/http/react-ui/src/components/split/SplitView.jsx
+++ b/core/http/react-ui/src/components/split/SplitView.jsx
@@ -1,7 +1,7 @@
-// SplitView is the shell three admin surfaces share: a rail you scan on the
+// SplitView is the shell the resource lifecycle pages 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
+// It exists because the old Models and Backends tables 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.
diff --git a/core/http/react-ui/src/contexts/OperateSummaryContext.jsx b/core/http/react-ui/src/contexts/OperateSummaryContext.jsx
index 305aac926..cd35f106a 100644
--- a/core/http/react-ui/src/contexts/OperateSummaryContext.jsx
+++ b/core/http/react-ui/src/contexts/OperateSummaryContext.jsx
@@ -40,6 +40,7 @@ export function OperateSummaryProvider({ children, pollInterval = POLL_INTERVAL_
   const [upgrades, setUpgrades] = useState({})
   const [nodes, setNodes] = useState([])
   const [resources, setResources] = useState(null)
+  const [resourcesLoaded, setResourcesLoaded] = useState(false)
   const [traces, setTraces] = useState(null)
   const [installed, setInstalled] = useState({ backends: null, models: null })
   const { operations } = useOperations()
@@ -63,6 +64,7 @@ export function OperateSummaryProvider({ children, pollInterval = POLL_INTERVAL_
     setUpgrades(u && typeof u === 'object' ? u : {})
     setNodes(Array.isArray(n) ? n : (n?.nodes || []))
     setResources(r)
+    setResourcesLoaded(true)
     setTraces(tr)
     setInstalled({
       backends: Array.isArray(bi) ? bi.length : (bi?.backends?.length ?? null),
@@ -106,6 +108,8 @@ export function OperateSummaryProvider({ children, pollInterval = POLL_INTERVAL_
       upgrades,
       nodes,
       resources,
+      resourcesLoading: !resourcesLoaded,
+      resourcesUnavailable: resourcesLoaded && !resources,
       operations,
       traces,
       installed,
@@ -120,7 +124,7 @@ export function OperateSummaryProvider({ children, pollInterval = POLL_INTERVAL_
         usage: traces?.total ? compact(traces.total) : null,
       },
     }
-  }, [upgrades, nodes, resources, operations, traces, installed])
+  }, [upgrades, nodes, resources, resourcesLoaded, operations, traces, installed])
 
   return (
     <OperateSummaryContext.Provider value={value}>
diff --git a/core/http/react-ui/src/pages/AgentJobs.jsx b/core/http/react-ui/src/pages/AgentJobs.jsx
index f689968c3..a9f400f42 100644
--- a/core/http/react-ui/src/pages/AgentJobs.jsx
+++ b/core/http/react-ui/src/pages/AgentJobs.jsx
@@ -257,7 +257,7 @@ export default function AgentJobs() {
       args: ["--flag"]`}</pre>
           </div>
           <div className="hstack hstack--center">
-            <button className="btn btn-primary" onClick={() => navigate('/app/manage')}>
+            <button className="btn btn-primary" onClick={() => navigate('/app/models?view=installed')}>
               <i className="fas fa-cog" /> Manage Models
             </button>
             <a className="btn btn-secondary" href="https://localai.io/features/agents/" target="_blank" rel="noopener noreferrer">
diff --git a/core/http/react-ui/src/pages/BackendLogs.jsx b/core/http/react-ui/src/pages/BackendLogs.jsx
index c21c37ca2..d810d8e9a 100644
--- a/core/http/react-ui/src/pages/BackendLogs.jsx
+++ b/core/http/react-ui/src/pages/BackendLogs.jsx
@@ -426,7 +426,7 @@ export default function BackendLogs() {
         <h2 className="empty-state-title">No model selected</h2>
         <p className="empty-state-text">
           View backend logs for a specific model from the{' '}
-          <Link to="/app/manage" className="text-primary">System page</Link>.
+          <Link to="/app/models?view=installed" className="text-primary">Installed Models page</Link>.
         </p>
       </div>
     </div>
diff --git a/core/http/react-ui/src/pages/Backends.jsx b/core/http/react-ui/src/pages/Backends.jsx
index 1f6cd8816..7a4172632 100644
--- a/core/http/react-ui/src/pages/Backends.jsx
+++ b/core/http/react-ui/src/pages/Backends.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { useNavigate, useOutletContext, useSearchParams } from 'react-router-dom'
+import { Link, useOutletContext, useSearchParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { backendsApi, nodesApi } from '../utils/api'
 import { useDebouncedCallback } from '../hooks/useDebounce'
@@ -7,7 +7,6 @@ import React from 'react'
 import { useOperations } from '../hooks/useOperations'
 import { useDistributedMode } from '../hooks/useDistributedMode'
 import LoadingSpinner from '../components/LoadingSpinner'
-import PageHeader from '../components/PageHeader'
 import { renderMarkdown, stripMarkdown } from '../utils/markdown'
 import { safeHref } from '../utils/url'
 import ConfirmDialog from '../components/ConfirmDialog'
@@ -21,18 +20,22 @@ import DetailHeader from '../components/split/DetailHeader'
 import StatGrid from '../components/split/StatGrid'
 import { useResources } from '../hooks/useResources'
 import { ENTITY_GROUPS, groupForEntity } from '../utils/entityGroups'
+import InstalledBackends from './InstalledBackends'
 
 export default function Backends() {
   const { addToast } = useOutletContext()
-  const navigate = useNavigate()
   const { t } = useTranslation('admin')
   const [searchParams, setSearchParams] = useSearchParams()
+  const activeView = searchParams.get('view') === 'installed' ? 'installed' : 'catalog'
   const { operations } = useOperations()
   const { resources } = useResources()
   const { enabled: distributedEnabled, nodes: clusterNodes, refetch: refetchNodes } = useDistributedMode()
   const [loading, setLoading] = useState(true)
-  const [search, setSearch] = useState('')
-  const [filter, setFilter] = useState('')
+  const [search, setSearch] = useState(() => searchParams.get('q') || '')
+  const [filter, setFilter] = useState(() => {
+    const state = searchParams.get('state') || ''
+    return ['', 'chat', 'image', 'video', 'tts', 'transcript', 'vision'].includes(state) ? state : ''
+  })
   const [sortBy, setSortBy] = useState('name')
   const [sortOrder, setSortOrder] = useState('asc')
   const [page, setPage] = useState(1)
@@ -42,7 +45,7 @@ export default function Backends() {
   const [manualName, setManualName] = useState('')
   const [manualAlias, setManualAlias] = useState('')
   // 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
+  // for the same reasons as Models Explore: a backend is linkable, and Back leaves
   // the detail rather than the page.
   // True once any listing has come back. Distinguishes a cold start, which has
   // nothing to keep on screen, from a refetch, which does.
@@ -51,12 +54,15 @@ export default function Backends() {
   const [allBackends, setAllBackends] = useState([])
   const [upgrades, setUpgrades] = useState({})
   const [upgradingAll, setUpgradingAll] = useState(false)
-  const [showAllBackends, setShowAllBackends] = useState(false)
-  const [showDevelopment, setShowDevelopment] = useState(false)
+  const [showAllBackends, setShowAllBackends] = useState(() => searchParams.get('show_all') === '1')
+  const [showDevelopment, setShowDevelopment] = useState(() => searchParams.get('development') === '1')
   const [preferDevLoaded, setPreferDevLoaded] = useState(false)
   const [pickerBackend, setPickerBackend] = useState(null)
   const [pickerInitialSelection, setPickerInitialSelection] = useState([])
   const [splitMenuOpen, setSplitMenuOpen] = useState(false)
+  const [catalogErrors, setCatalogErrors] = useState({})
+  const [catalogGlobalError, setCatalogGlobalError] = useState('')
+  const [manualError, setManualError] = useState('')
   // Anchor for the split-button chevron. One pane, so one anchor.
   const splitMenuAnchorRef = useRef(null)
 
@@ -66,6 +72,34 @@ export default function Backends() {
   // per-node endpoint.
   const selectedName = searchParams.get('backend')
 
+  const hrefForView = (view) => {
+    const next = new URLSearchParams(searchParams)
+    next.set('view', view)
+    return `/app/backends?${next.toString()}`
+  }
+
+  const updateUrlParam = useCallback((key, value, defaultValue = '') => {
+    setSearchParams(prev => {
+      const next = new URLSearchParams(prev)
+      if (!value || value === defaultValue) next.delete(key)
+      else next.set(key, value)
+      return next
+    }, { replace: true })
+  }, [setSearchParams])
+
+  useEffect(() => {
+    if (activeView !== 'catalog') return
+    const nextSearch = searchParams.get('q') || ''
+    const requestedState = searchParams.get('state') || ''
+    const nextFilter = ['', 'chat', 'image', 'video', 'tts', 'transcript', 'vision'].includes(requestedState)
+      ? requestedState
+      : ''
+    setSearch(nextSearch)
+    setFilter(nextFilter)
+    setShowAllBackends(searchParams.get('show_all') === '1')
+    setShowDevelopment(searchParams.get('development') === '1')
+  }, [activeView, searchParams])
+
   // 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) => {
@@ -110,7 +144,7 @@ export default function Backends() {
     try {
       setLoading(true)
       const params = { page: 1, items: 9999, sort: sortBy, order: sortOrder }
-      if (search) params.term = search
+      if (activeView === 'catalog' && search) params.term = search
       const data = await backendsApi.list(params)
       const list = Array.isArray(data?.backends) ? data.backends : Array.isArray(data) ? data : []
       setAllBackends(list)
@@ -126,11 +160,13 @@ export default function Backends() {
       loadedOnce.current = true
       setLoading(false)
     }
-  }, [search, sortBy, sortOrder, addToast])
+  }, [activeView, search, sortBy, sortOrder, addToast])
+
+  const debouncedFetch = useDebouncedCallback(fetchBackends)
 
   useEffect(() => {
-    fetchBackends()
-  }, [sortBy, sortOrder])
+    debouncedFetch()
+  }, [debouncedFetch, fetchBackends])
 
   // Re-fetch when operations change (install/delete completion)
   useEffect(() => {
@@ -179,12 +215,10 @@ export default function Backends() {
   const totalPages = Math.max(1, Math.ceil(filteredBackends.length / ITEMS_PER_PAGE))
   const backends = filteredBackends.slice((page - 1) * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE)
 
-  const debouncedFetch = useDebouncedCallback(() => fetchBackends())
-
   const handleSearch = (value) => {
     setSearch(value)
+    updateUrlParam('q', value)
     setPage(1)
-    debouncedFetch()
   }
 
   const handleSort = (col) => {
@@ -198,6 +232,7 @@ export default function Backends() {
   }
 
   const handleInstall = async (id) => {
+    setCatalogErrors(current => ({ ...current, [id]: '' }))
     try {
       await backendsApi.install(id)
     } catch (err) {
@@ -213,7 +248,7 @@ export default function Backends() {
           return
         }
       }
-      addToast(`Install failed: ${err.message}`, 'error')
+      setCatalogErrors(current => ({ ...current, [id]: `Install failed: ${err.message}` }))
     }
   }
 
@@ -223,6 +258,7 @@ export default function Backends() {
   // surface progress; no need to await completion here.
   const handleInstallOnTarget = async (id) => {
     if (!targetNode) return
+    setCatalogErrors(current => ({ ...current, [id]: '' }))
     try {
       await nodesApi.installBackend(targetNode.id, id)
       addToast(`Installing ${id} on ${targetNode.name}...`, 'info')
@@ -231,14 +267,17 @@ export default function Backends() {
       // tracks the actual progress until completion.
       setTimeout(() => { fetchBackends(); refetchNodes() }, 1200)
     } catch (err) {
-      addToast(`Install dispatch failed on ${targetNode.name}: ${err.message}`, 'error')
+      setCatalogErrors(current => ({
+        ...current,
+        [id]: `Install dispatch failed on ${targetNode.name}: ${err.message}`,
+      }))
     }
   }
 
   const openPicker = (b, initialSelection = []) => {
     setPickerBackend(b)
     setPickerInitialSelection(initialSelection)
-    setSplitMenuFor(null)
+    setSplitMenuOpen(false)
   }
 
   // Returns the IDs of nodes that don't yet have this backend installed.
@@ -260,23 +299,25 @@ export default function Backends() {
       danger: true,
       onConfirm: async () => {
         setConfirmDialog(null)
+        setCatalogErrors(current => ({ ...current, [id]: '' }))
         try {
           await backendsApi.delete(id)
           addToast(`Deleting ${id}...`, 'info')
           setTimeout(fetchBackends, 1000)
         } catch (err) {
-          addToast(`Delete failed: ${err.message}`, 'error')
+          setCatalogErrors(current => ({ ...current, [id]: `Delete failed: ${err.message}` }))
         }
       },
     })
   }
 
   const handleUpgrade = async (id) => {
+    setCatalogErrors(current => ({ ...current, [id]: '' }))
     try {
       await backendsApi.upgrade(id)
       addToast(`Upgrading ${id}...`, 'info')
     } catch (err) {
-      addToast(`Upgrade failed: ${err.message}`, 'error')
+      setCatalogErrors(current => ({ ...current, [id]: `Upgrade failed: ${err.message}` }))
     }
   }
 
@@ -284,13 +325,14 @@ export default function Backends() {
     const names = Object.keys(upgrades)
     if (names.length === 0) return
     setUpgradingAll(true)
+    setCatalogGlobalError('')
     try {
       for (const name of names) {
         await backendsApi.upgrade(name)
       }
       addToast(`Upgrading ${names.length} backend${names.length > 1 ? 's' : ''}...`, 'info')
     } catch (err) {
-      addToast(`Upgrade failed: ${err.message}`, 'error')
+      setCatalogGlobalError(`Upgrade failed: ${err.message}`)
     } finally {
       setUpgradingAll(false)
     }
@@ -298,7 +340,8 @@ export default function Backends() {
 
   const handleManualInstall = async (e) => {
     e.preventDefault()
-    if (!manualUri.trim()) { addToast('Please enter a URI', 'warning'); return }
+    setManualError('')
+    if (!manualUri.trim()) { setManualError('Please enter a URI'); return }
     try {
       if (targetNode) {
         // Target-node mode: route the manual install to the per-node endpoint
@@ -325,7 +368,7 @@ export default function Backends() {
       setManualAlias('')
       setShowManualInstall(false)
     } catch (err) {
-      addToast(`Install failed: ${err.message}`, 'error')
+      setManualError(`Install failed: ${err.message}`)
     }
   }
 
@@ -335,8 +378,20 @@ export default function Backends() {
     return operations.find(op => op.name === backend.name || op.name === backend.id) || null
   }
 
-  const handleToggleAllBackends = () => { setShowAllBackends(v => !v); setPage(1) }
-  const handleToggleDev = () => { setShowDevelopment(v => !v); setPage(1) }
+  const handleToggleAllBackends = () => {
+    setShowAllBackends(value => {
+      updateUrlParam('show_all', value ? '' : '1')
+      return !value
+    })
+    setPage(1)
+  }
+  const handleToggleDev = () => {
+    setShowDevelopment(value => {
+      updateUrlParam('development', value ? '' : '1')
+      return !value
+    })
+    setPage(1)
+  }
 
   const FILTERS = [
     { key: '', label: 'All', icon: 'fa-layer-group' },
@@ -350,11 +405,49 @@ export default function Backends() {
 
   return (
     <div className="page page--wide page--app">
+      <div className="view-bar">
+        <h1 className="view-bar__title">{t('backends.title')}</h1>
+        {activeView === 'catalog' && (
+          <span className="view-bar__count">{backends.length} of {allBackends.length}</span>
+        )}
+        {activeView === 'catalog' && (
+          <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>
+
+      <nav className="tabs" aria-label={t('backends.lifecycle.navigation')}>
+        <Link
+          className={`tab ${activeView === 'catalog' ? 'tab-active' : ''}`}
+          to={hrefForView('catalog')}
+          aria-current={activeView === 'catalog' ? 'page' : undefined}
+        >
+          <i className="fas fa-layer-group icon-before" aria-hidden="true" />
+          {t('backends.lifecycle.catalog')}
+        </Link>
+        <Link
+          className={`tab ${activeView === 'installed' ? 'tab-active' : ''}`}
+          to={hrefForView('installed')}
+          aria-current={activeView === 'installed' ? 'page' : undefined}
+        >
+          <i className="fas fa-server icon-before" aria-hidden="true" />
+          {t('backends.lifecycle.installed')}
+        </Link>
+      </nav>
+
       {/* 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
           user knows they're in a special mode without it feeling alarming. */}
-      {targetNode && (
+      {activeView === 'catalog' && targetNode && (
         <div className="card bk-notice tone-primary mb-md">
           <i className="fas fa-bullseye" style={{ color: 'var(--color-primary)' }} />
           <span className="bk-notice__text">
@@ -367,21 +460,24 @@ export default function Backends() {
         </div>
       )}
 
-      {/* Header */}
-      <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>
+      {activeView === 'installed' ? (
+        <InstalledBackends
+          addToast={addToast}
+          catalogBackends={allBackends}
+          distributedEnabled={distributedEnabled}
+          operations={operations}
+          upgrades={upgrades}
+          selectedName={selectedName}
+          onSelect={selectBackend}
+        />
+      ) : (
+        <>
+      {catalogGlobalError && (
+        <div className="attention-callout attention-callout--error mb-md" role="alert">
+          <i className="fas fa-circle-exclamation" aria-hidden="true" />
+          <span>{catalogGlobalError}</span>
         </div>
-      </div>
+      )}
 
       {/* Upgrade Banner */}
       {Object.keys(upgrades).length > 0 && (
@@ -426,10 +522,11 @@ export default function Backends() {
               <i className="fas fa-download" /> Install
             </button>
           </div>
+          {manualError && <p className="form-error" role="alert">{manualError}</p>}
         </form>
       )}
 
-      {/* The gallery, as a rail and a pane. Same shell as Discover, because it
+      {/* The gallery, as a rail and a pane. Same shell as Models Explore, 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 && !loadedOnce.current ? (
@@ -454,7 +551,7 @@ export default function Backends() {
                   <button
                     key={f.key}
                     className={`filter-btn ${filter === f.key ? 'active' : ''}`}
-                    onClick={() => { setFilter(f.key); setPage(1) }}
+                    onClick={() => { setFilter(f.key); updateUrlParam('state', f.key); setPage(1) }}
                   >
                   <i className={`fas ${f.icon}`} style={{ marginRight: 4 }} />
                   {f.label}
@@ -558,12 +655,13 @@ export default function Backends() {
                             <i className="fas fa-rotate" /> Reinstall
                           </button>
                           <button className="btn btn-danger btn-sm" onClick={async () => {
+                            setCatalogErrors(current => ({ ...current, [name]: '' }))
                             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')
+                              setCatalogErrors(current => ({ ...current, [name]: `Remove failed: ${err.message}` }))
                             }
                           }} title={`Remove from ${targetNode.name}`}>
                             <i className="fas fa-trash" /> Remove
@@ -576,15 +674,14 @@ export default function Backends() {
                       )
                     ) : b.installed ? (
                       <>
-                        {upgrade ? (
+                        {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-secondary btn-sm" onClick={() => handleInstall(name)} title="Reinstall">
-                            <i className="fas fa-rotate" /> Reinstall
-                          </button>
                         )}
+                        <button className="btn btn-secondary btn-sm" onClick={() => handleInstall(name)} title="Reinstall">
+                          <i className="fas fa-rotate" /> Reinstall
+                        </button>
                         <button className="btn btn-danger btn-sm" onClick={() => handleDelete(name)} title="Delete">
                           <i className="fas fa-trash" /> Delete
                         </button>
@@ -623,6 +720,13 @@ export default function Backends() {
                   }
                 />
 
+                {catalogErrors[name] && (
+                  <div className="attention-callout attention-callout--error" role="alert">
+                    <i className="fas fa-circle-exclamation" aria-hidden="true" />
+                    <span>{catalogErrors[name]}</span>
+                  </div>
+                )}
+
                 <StatGrid
                   stats={[
                     { label: 'Installed', value: b.installed ? (b.version ? `v${b.version}` : 'yes') : 'no', tone: b.installed ? 'ok' : undefined },
@@ -720,6 +824,8 @@ export default function Backends() {
         initialSelection={pickerInitialSelection}
         addToast={addToast}
       />
+        </>
+      )}
     </div>
   )
 }
diff --git a/core/http/react-ui/src/pages/Home.jsx b/core/http/react-ui/src/pages/Home.jsx
index 20bb2501c..a5e43b5b4 100644
--- a/core/http/react-ui/src/pages/Home.jsx
+++ b/core/http/react-ui/src/pages/Home.jsx
@@ -442,7 +442,7 @@ export default function Home() {
                 <button className="btn btn-primary" onClick={() => navigate('/app/models')}>
                   <i className="fas fa-download" aria-hidden="true" /> {t('quickLinks.browseGallery')}
                 </button>
-                <button className="home-link-btn" onClick={() => navigate('/app/manage')}>
+                <button className="home-link-btn" onClick={() => navigate('/app/models?view=installed')}>
                   <i className="fas fa-desktop" aria-hidden="true" /> {t('quickLinks.installedModels')}
                 </button>
                 <button className="home-link-btn" onClick={() => navigate('/app/import-model')}>
@@ -463,8 +463,8 @@ export default function Home() {
             <ul className="lanes lanes--jump reveal-stagger">
               <li style={staggerStyle(0)}>
                 <button type="button" className="lane" onClick={() => navigate('/app/models')}>
-                  <span className="lane__tag">{t('jump.discover')}</span>
-                  <span className="lane__desc">{t('jump.discoverSummary')}</span>
+                  <span className="lane__tag">{t('jump.models')}</span>
+                  <span className="lane__desc">{t('jump.modelsSummary')}</span>
                   <span className="lane__go" aria-hidden="true">→</span>
                 </button>
               </li>
diff --git a/core/http/react-ui/src/pages/ImportModel.jsx b/core/http/react-ui/src/pages/ImportModel.jsx
index 6b3c88622..d91b570fb 100644
--- a/core/http/react-ui/src/pages/ImportModel.jsx
+++ b/core/http/react-ui/src/pages/ImportModel.jsx
@@ -243,7 +243,7 @@ export default function ImportModel() {
           setIsSubmitting(false)
           setJob(null)
           addToast(t('toasts.imported'), 'success')
-          navigate('/app/manage')
+          navigate('/app/models?view=installed')
           return
         }
         if (data.error || (data.message && data.message.startsWith('error:'))) {
@@ -375,7 +375,7 @@ export default function ImportModel() {
     try {
       await modelsApi.importConfig(yamlContent, 'application/x-yaml')
       addToast(t('toasts.importedYaml'), 'success')
-      navigate('/app/manage')
+      navigate('/app/models?view=installed')
     } catch (err) {
       addToast(t('toasts.importFailed', { message: err.message }), 'error')
     } finally {
diff --git a/core/http/react-ui/src/pages/InstalledBackends.jsx b/core/http/react-ui/src/pages/InstalledBackends.jsx
new file mode 100644
index 000000000..a27a2c9d3
--- /dev/null
+++ b/core/http/react-ui/src/pages/InstalledBackends.jsx
@@ -0,0 +1,544 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { backendsApi } from '../utils/api'
+import ActionMenu from '../components/ActionMenu'
+import ConfirmDialog from '../components/ConfirmDialog'
+import FilterBar from '../components/FilterBar'
+import GalleryLoader from '../components/GalleryLoader'
+import NodeDistributionChip from '../components/NodeDistributionChip'
+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 { stripMarkdown } from '../utils/markdown'
+
+const STATE_GROUPS = [
+  { id: 'update', labelKey: 'backends.lifecycle.updateGroup', icon: 'fa-arrow-up' },
+  { id: 'installed', labelKey: 'backends.lifecycle.installedGroup', icon: 'fa-check' },
+]
+
+const VALID_STATES = new Set(['all', 'user', 'system', 'upgradable', 'offline'])
+
+export default function InstalledBackends({
+  addToast,
+  catalogBackends,
+  distributedEnabled,
+  operations,
+  upgrades,
+  selectedName,
+  onSelect,
+}) {
+  const { t } = useTranslation('admin')
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [backends, setBackends] = useState([])
+  const [loading, setLoading] = useState(true)
+  const loadedOnce = useRef(false)
+  const [pending, setPending] = useState(() => new Set())
+  const [errors, setErrors] = useState({})
+  const [globalError, setGlobalError] = useState('')
+  const [confirmDialog, setConfirmDialog] = useState(null)
+  const [upgradingAll, setUpgradingAll] = useState(false)
+  const [collapsedGroups, setCollapsedGroups] = useState(() => new Set())
+
+  const query = searchParams.get('q') || ''
+  const requestedState = searchParams.get('state') || 'all'
+  const state = VALID_STATES.has(requestedState) ? requestedState : 'all'
+  const showVariants = searchParams.get('show_all') === '1'
+  const showDevelopment = searchParams.get('development') === '1'
+
+  const updateParam = useCallback((key, value, defaultValue = '') => {
+    setSearchParams(prev => {
+      const next = new URLSearchParams(prev)
+      if (!value || value === defaultValue) next.delete(key)
+      else next.set(key, value)
+      return next
+    }, { replace: true })
+  }, [setSearchParams])
+
+  const fetchBackends = useCallback(async () => {
+    try {
+      setLoading(true)
+      const data = await backendsApi.listInstalled()
+      setBackends(Array.isArray(data) ? data : [])
+      setGlobalError('')
+    } catch (err) {
+      setBackends([])
+      setGlobalError(t('backends.lifecycle.loadFailed', { message: err.message }))
+    } finally {
+      loadedOnce.current = true
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => { fetchBackends() }, [fetchBackends, operations.length])
+
+  const catalogByName = new Map(catalogBackends.map(backend => [backend.name || backend.id, backend]))
+  const flagsFor = (backend) => {
+    const catalog = catalogByName.get(backend.Name)
+    return {
+      variant: !!catalog?.isAlias,
+      development: !!catalog?.isDevelopment,
+    }
+  }
+
+  const visibleBase = backends.filter(backend => {
+    const flags = flagsFor(backend)
+    if (flags.variant && !showVariants) return false
+    if (flags.development && !showDevelopment) return false
+    return true
+  })
+  const hiddenVariantCount = showVariants ? 0 : backends.filter(backend => flagsFor(backend).variant).length
+  const hiddenDevelopmentCount = showDevelopment ? 0 : backends.filter(backend => flagsFor(backend).development).length
+  const offlineFor = (backend) => (backend.Nodes || backend.nodes || []).some(node => {
+    const status = node.node_status || node.NodeStatus
+    return status && status !== 'healthy' && status !== 'draining'
+  })
+  const passesState = (backend) => {
+    if (state === 'user') return !backend.IsSystem
+    if (state === 'system') return !!backend.IsSystem
+    if (state === 'upgradable') return !!upgrades[backend.Name]
+    if (state === 'offline') return offlineFor(backend)
+    return true
+  }
+  const normalizedQuery = query.trim().toLowerCase()
+  const visibleBackends = visibleBase.filter(backend => passesState(backend) && (
+    !normalizedQuery
+    || backend.Name.toLowerCase().includes(normalizedQuery)
+    || (backend.Metadata?.alias || '').toLowerCase().includes(normalizedQuery)
+    || (backend.Metadata?.meta_backend_for || '').toLowerCase().includes(normalizedQuery)
+  ))
+  const selectedBackend = selectedName
+    ? backends.find(backend => backend.Name === selectedName) || null
+    : null
+
+  const isProcessing = useCallback((name) => pending.has(name) || operations.some(operation => (
+    operation.name === name && !operation.completed && !operation.error
+  )), [operations, pending])
+
+  const withPending = async (name, action) => {
+    setPending(current => new Set(current).add(name))
+    setErrors(current => ({ ...current, [name]: '' }))
+    try {
+      await action()
+    } finally {
+      setPending(current => {
+        const next = new Set(current)
+        next.delete(name)
+        return next
+      })
+    }
+  }
+
+  const handleReinstall = async (name) => {
+    try {
+      await withPending(name, () => backendsApi.install(name))
+      addToast(t('backends.lifecycle.reinstallStarted', { name }), 'info')
+    } catch (err) {
+      setErrors(current => ({
+        ...current,
+        [name]: t('backends.lifecycle.reinstallFailed', { message: err.message }),
+      }))
+    }
+  }
+
+  const handleUpgrade = async (name) => {
+    try {
+      await withPending(name, () => backendsApi.upgrade(name))
+      addToast(t('backends.lifecycle.upgradeStarted', { name }), 'info')
+    } catch (err) {
+      setErrors(current => ({
+        ...current,
+        [name]: t('backends.lifecycle.upgradeFailed', { message: err.message }),
+      }))
+    }
+  }
+
+  const handleUpgradeAll = async () => {
+    const names = Object.keys(upgrades)
+    if (names.length === 0) return
+    setUpgradingAll(true)
+    setGlobalError('')
+    try {
+      const failures = []
+      for (const name of names) {
+        try {
+          await backendsApi.upgrade(name)
+        } catch (err) {
+          failures.push(t('backends.lifecycle.upgradeAllFailed', { name, message: err.message }))
+        }
+      }
+      if (failures.length > 0) {
+        setGlobalError(failures.join(' '))
+        return
+      }
+      addToast(t('backends.lifecycle.upgradeAllStarted', { count: names.length }), 'info')
+    } finally {
+      setUpgradingAll(false)
+    }
+  }
+
+  const handleDelete = (name) => {
+    setConfirmDialog({
+      title: t('backends.lifecycle.deleteTitle'),
+      message: t('backends.lifecycle.deleteMessage', { name }),
+      confirmLabel: t('backends.lifecycle.delete'),
+      onConfirm: async () => {
+        setConfirmDialog(null)
+        setErrors(current => ({ ...current, [name]: '' }))
+        try {
+          await backendsApi.deleteInstalled(name)
+          addToast(t('backends.lifecycle.deleteSucceeded', { name }), 'success')
+          onSelect(null)
+          fetchBackends()
+        } catch (err) {
+          setErrors(current => ({
+            ...current,
+            [name]: t('backends.lifecycle.deleteFailed', { message: err.message }),
+          }))
+        }
+      },
+    })
+  }
+
+  const toggleGroup = (id) => {
+    setCollapsedGroups(current => {
+      const next = new Set(current)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const filters = [
+    { key: 'all', label: t('backends.lifecycle.filterAll'), icon: 'fa-layer-group', count: visibleBase.length },
+    { key: 'user', label: t('backends.lifecycle.filterUser'), icon: 'fa-download', count: visibleBase.filter(backend => !backend.IsSystem).length },
+    { key: 'system', label: t('backends.lifecycle.filterSystem'), icon: 'fa-shield-alt', count: visibleBase.filter(backend => backend.IsSystem).length },
+    ...(Object.keys(upgrades).length > 0 ? [{
+      key: 'upgradable',
+      label: t('backends.lifecycle.filterUpdates'),
+      icon: 'fa-arrow-up',
+      count: visibleBase.filter(backend => upgrades[backend.Name]).length,
+    }] : []),
+    ...(distributedEnabled && visibleBase.some(offlineFor) ? [{
+      key: 'offline',
+      label: t('backends.lifecycle.filterOffline'),
+      icon: 'fa-exclamation-circle',
+      count: visibleBase.filter(offlineFor).length,
+    }] : []),
+  ]
+
+  if (loading && !loadedOnce.current) return <GalleryLoader />
+
+  return (
+    <>
+      {Object.keys(upgrades).length > 0 && (
+        <div className="upgrade-banner">
+          <div className="upgrade-banner__text">
+            <i className="fas fa-arrow-up" aria-hidden="true" />
+            <span>{t('backends.lifecycle.updatesAvailable', { count: Object.keys(upgrades).length })}</span>
+          </div>
+          <div className="upgrade-banner__actions">
+            <button className="btn btn-primary btn-sm" onClick={handleUpgradeAll} disabled={upgradingAll}>
+              <i className={`fas ${upgradingAll ? 'fa-spinner fa-spin' : 'fa-arrow-up'}`} aria-hidden="true" />
+              {upgradingAll ? t('backends.lifecycle.upgrading') : t('backends.lifecycle.upgradeAll')}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {globalError && (
+        <div className="attention-callout attention-callout--error mb-md" role="alert">
+          <i className="fas fa-circle-exclamation" aria-hidden="true" />
+          <span>{globalError}</span>
+        </div>
+      )}
+
+      {backends.length === 0 ? (
+        <div className="empty-state empty-state--page">
+          <div className="empty-state-icon"><i className="fas fa-server" /></div>
+          <h2 className="empty-state-title">{t('backends.lifecycle.emptyTitle')}</h2>
+          <p className="empty-state-text">{t('backends.lifecycle.emptyBody')}</p>
+        </div>
+      ) : (
+        <>
+          <FilterBar
+            search={query}
+            onSearchChange={value => updateParam('q', value)}
+            searchPlaceholder={t('backends.lifecycle.searchPlaceholder')}
+            filters={filters}
+            activeFilter={state}
+            onFilterChange={value => updateParam('state', value, 'all')}
+            toggles={[
+              {
+                key: 'variants',
+                label: hiddenVariantCount > 0
+                  ? t('backends.lifecycle.variantsCount', { count: hiddenVariantCount })
+                  : t('backends.lifecycle.variants'),
+                icon: 'fa-cubes',
+                checked: showVariants,
+                onChange: () => updateParam('show_all', showVariants ? '' : '1'),
+              },
+              {
+                key: 'development',
+                label: hiddenDevelopmentCount > 0
+                  ? t('backends.lifecycle.developmentCount', { count: hiddenDevelopmentCount })
+                  : t('backends.lifecycle.development'),
+                icon: 'fa-flask',
+                checked: showDevelopment,
+                onChange: () => updateParam('development', showDevelopment ? '' : '1'),
+              },
+            ]}
+          />
+
+          {visibleBackends.length === 0 ? (
+            <div className="empty-state">
+              <i className="fas fa-filter" />
+              <p>{t('backends.lifecycle.noMatches')}</p>
+              <button className="btn btn-ghost btn-sm" onClick={() => {
+                setSearchParams(prev => {
+                  const next = new URLSearchParams(prev)
+                  next.delete('q')
+                  next.delete('state')
+                  return next
+                }, { replace: true })
+              }}>
+                {t('backends.lifecycle.clearFilters')}
+              </button>
+            </div>
+          ) : (
+            <SplitView
+              testId="backends-installed"
+              detail={!!selectedBackend}
+              rail={(
+                <EntityRail
+                  items={visibleBackends.map(backend => railItemForBackend(backend, upgrades, isProcessing, t))}
+                  groups={STATE_GROUPS.map(group => ({ ...group, label: t(group.labelKey) }))}
+                  grouped={!query.trim()}
+                  collapsedGroups={collapsedGroups}
+                  onToggleGroup={toggleGroup}
+                  busy={loading}
+                  selectedId={selectedName}
+                  onSelect={onSelect}
+                  countLabel={t('backends.lifecycle.countLabel', { visible: visibleBackends.length, total: backends.length })}
+                  ariaLabel={t('backends.lifecycle.installedAria')}
+                  testId="backends-installed-rail"
+                />
+              )}
+              pane={selectedBackend ? (
+                <InstalledBackendDetail
+                  backend={selectedBackend}
+                  catalog={catalogByName.get(selectedBackend.Name)}
+                  upgrade={upgrades[selectedBackend.Name]}
+                  processing={isProcessing(selectedBackend.Name)}
+                  error={errors[selectedBackend.Name]}
+                  distributedEnabled={distributedEnabled}
+                  onBack={() => onSelect(null)}
+                  onUpgrade={handleUpgrade}
+                  onReinstall={handleReinstall}
+                  onDelete={handleDelete}
+                  t={t}
+                />
+              ) : (
+                <InstalledOverview backends={backends} upgrades={upgrades} onSelect={onSelect} t={t} />
+              )}
+            />
+          )}
+        </>
+      )}
+
+      <ConfirmDialog
+        open={!!confirmDialog}
+        title={confirmDialog?.title}
+        message={confirmDialog?.message}
+        confirmLabel={confirmDialog?.confirmLabel}
+        danger
+        onConfirm={confirmDialog?.onConfirm}
+        onCancel={() => setConfirmDialog(null)}
+      />
+    </>
+  )
+}
+
+function railItemForBackend(backend, upgrades, isProcessing, t) {
+  const version = backend.Metadata?.version || backend.Version
+  const upgrade = upgrades[backend.Name]
+  let groupId = 'installed'
+  let stripe = 'idle'
+  let meta = version ? `v${version}` : t('backends.lifecycle.installed')
+  let metaTone
+
+  if (isProcessing(backend.Name)) {
+    meta = t('backends.lifecycle.working')
+    metaTone = 'busy'
+  } else if (upgrade) {
+    groupId = 'update'
+    stripe = 'err'
+    meta = upgrade.available_version
+      ? `v${version} → v${upgrade.available_version}`
+      : t('backends.lifecycle.updateAvailable')
+    metaTone = 'warn'
+  }
+
+  return { id: backend.Name, name: backend.Name, icon: 'fa-server', meta, metaTone, stripe, groupId }
+}
+
+function InstalledBackendDetail({
+  backend,
+  catalog,
+  upgrade,
+  processing,
+  error,
+  distributedEnabled,
+  onBack,
+  onUpgrade,
+  onReinstall,
+  onDelete,
+  t,
+}) {
+  const name = backend.Name
+  const version = backend.Metadata?.version || backend.Version
+  const nodes = backend.Nodes || backend.nodes || []
+
+  return (
+    <div className="detail-pane">
+      <DetailHeader
+        testId="backends-installed"
+        icon="fa-server"
+        name={name}
+        lede={catalog?.description ? stripMarkdown(catalog.description).slice(0, 220) : null}
+        ledeTitle={catalog?.description ? stripMarkdown(catalog.description) : null}
+        onBack={onBack}
+        backLabel={t('backends.lifecycle.allBackends')}
+        actions={backend.IsSystem ? (
+          <span className="badge" title={t('backends.lifecycle.protectedTitle')}>
+            <i className="fas fa-lock" /> {t('backends.lifecycle.protected')}
+          </span>
+        ) : (
+          <>
+            {upgrade && (
+              <button className="btn btn-primary btn-sm" onClick={() => onUpgrade(name)} disabled={processing}>
+                <i className="fas fa-arrow-up" />
+                {upgrade.available_version
+                  ? t('backends.lifecycle.upgradeTo', { version: upgrade.available_version })
+                  : t('backends.lifecycle.upgrade')}
+              </button>
+            )}
+            <ActionMenu
+              ariaLabel={t('backends.lifecycle.actionsFor', { name })}
+              triggerLabel={t('backends.lifecycle.actionsFor', { name })}
+              items={[
+                {
+                  key: 'reinstall',
+                  icon: 'fa-rotate',
+                  label: t('backends.lifecycle.reinstall'),
+                  onClick: () => onReinstall(name),
+                  disabled: processing,
+                },
+                { divider: true },
+                {
+                  key: 'delete',
+                  icon: 'fa-trash',
+                  label: t('backends.lifecycle.deleteBackend'),
+                  danger: true,
+                  onClick: () => onDelete(name),
+                },
+              ]}
+            />
+          </>
+        )}
+      />
+
+      {error && (
+        <div className="attention-callout attention-callout--error" role="alert">
+          <i className="fas fa-circle-exclamation" aria-hidden="true" />
+          <span>{error}</span>
+        </div>
+      )}
+
+      <StatGrid stats={[
+        { label: t('backends.lifecycle.version'), value: version ? `v${version}` : '—' },
+        upgrade ? {
+          label: t('backends.lifecycle.available'),
+          value: upgrade.available_version ? `v${upgrade.available_version}` : t('backends.lifecycle.updateAvailable'),
+          tone: 'warn',
+        } : null,
+        {
+          label: t('backends.lifecycle.managed'),
+          value: backend.IsSystem ? t('backends.lifecycle.system') : t('backends.lifecycle.gallery'),
+        },
+      ]} />
+
+      {distributedEnabled && nodes.length > 0 && (
+        <div>
+          <span className="detail-pane__label">{t('backends.lifecycle.installedOn')}</span>
+          <NodeDistributionChip nodes={nodes} context="backends" compactThreshold={20} />
+        </div>
+      )}
+
+      <div className="bk-detail">
+        <table className="bk-detail__table">
+          <tbody>
+            {catalog?.description && (
+              <tr>
+                <td className="bk-detail__label">{t('backends.lifecycle.description')}</td>
+                <td className="bk-detail__value">{stripMarkdown(catalog.description)}</td>
+              </tr>
+            )}
+            {backend.Metadata?.uri && (
+              <tr>
+                <td className="bk-detail__label">{t('backends.lifecycle.source')}</td>
+                <td className="bk-detail__value cell-mono wrap-anywhere">{backend.Metadata.uri}</td>
+              </tr>
+            )}
+            {backend.Metadata?.digest && (
+              <tr>
+                <td className="bk-detail__label">{t('backends.lifecycle.digest')}</td>
+                <td className="bk-detail__value cell-mono wrap-anywhere">{backend.Metadata.digest}</td>
+              </tr>
+            )}
+            {backend.Metadata?.installed_at && (
+              <tr>
+                <td className="bk-detail__label">{t('backends.lifecycle.installedAt')}</td>
+                <td className="bk-detail__value cell-mono">{backend.Metadata.installed_at}</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+function InstalledOverview({ backends, upgrades, onSelect, t }) {
+  const staleNames = Object.keys(upgrades)
+  return (
+    <div className="zero-pane">
+      <div className="zero-pane__hero">
+        <span className="zero-pane__eyebrow">{t('backends.lifecycle.inventoryEyebrow')}</span>
+        <h2 className="zero-pane__title">{t('backends.lifecycle.inventoryTitle', { count: backends.length })}</h2>
+        <p className="zero-pane__text">{t('backends.lifecycle.inventoryBody')}</p>
+      </div>
+      <StatGrid stats={[
+        { label: t('backends.lifecycle.installed'), value: backends.length },
+        { label: t('backends.lifecycle.filterUpdates'), value: staleNames.length, tone: staleNames.length ? 'warn' : undefined },
+        { label: t('backends.lifecycle.system'), value: backends.filter(backend => backend.IsSystem).length },
+      ]} />
+      {staleNames.length > 0 && (
+        <div className="zero-pane__shelf">
+          <div className="zero-pane__shelf-head">
+            <h3 className="zero-pane__shelf-title">{t('backends.lifecycle.filterUpdates')}</h3>
+          </div>
+          <div className="rowlist">
+            {staleNames.map(name => (
+              <button className="rowline" key={name} onClick={() => onSelect(name)}>
+                <span className="badge badge-warning"><i className="fas fa-arrow-up icon-tiny" /> {t('backends.lifecycle.updateAvailable')}</span>
+                <span>{name}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/pages/InstalledModels.jsx b/core/http/react-ui/src/pages/InstalledModels.jsx
new file mode 100644
index 000000000..e3c40ee4c
--- /dev/null
+++ b/core/http/react-ui/src/pages/InstalledModels.jsx
@@ -0,0 +1,635 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { fromState } from '../utils/editorNav'
+import ActionMenu from '../components/ActionMenu'
+import ConfirmDialog from '../components/ConfirmDialog'
+import FilterBar from '../components/FilterBar'
+import GalleryLoader from '../components/GalleryLoader'
+import NodeDistributionChip from '../components/NodeDistributionChip'
+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'
+import { backendControlApi, modelsApi, nodesApi, systemApi } from '../utils/api'
+import { renderMarkdown, stripMarkdown } from '../utils/markdown'
+import { safeHref } from '../utils/url'
+import {
+  CAP_CHAT, CAP_COMPLETION, CAP_IMAGE, CAP_VIDEO, CAP_TTS,
+  CAP_TRANSCRIPT, CAP_SOUND_GENERATION, CAP_FACE_RECOGNITION,
+  CAP_SPEAKER_RECOGNITION, CAP_EMBEDDINGS, CAP_RERANK,
+  CAP_VAD, CAP_SCORE,
+} from '../utils/capabilities'
+
+const USE_CASES = [
+  { cap: CAP_CHAT, labelKey: 'chat', route: id => `/app/chat/${encodeURIComponent(id)}` },
+  { cap: CAP_COMPLETION, labelKey: 'completion', route: id => `/app/chat/${encodeURIComponent(id)}`, hideIf: CAP_CHAT },
+  { cap: CAP_IMAGE, labelKey: 'image', route: id => `/app/image/${encodeURIComponent(id)}` },
+  { cap: CAP_VIDEO, labelKey: 'video', route: id => `/app/video/${encodeURIComponent(id)}` },
+  { cap: CAP_TTS, labelKey: 'tts', route: id => `/app/tts/${encodeURIComponent(id)}` },
+  { cap: CAP_TRANSCRIPT, labelKey: 'transcribe', route: () => '/app/talk' },
+  { cap: CAP_SOUND_GENERATION, labelKey: 'sound', route: id => `/app/sound/${encodeURIComponent(id)}` },
+  { cap: CAP_FACE_RECOGNITION, labelKey: 'face', route: id => `/app/face/${encodeURIComponent(id)}` },
+  { cap: CAP_SPEAKER_RECOGNITION, labelKey: 'voice', route: id => `/app/voice/${encodeURIComponent(id)}` },
+  { cap: CAP_EMBEDDINGS, labelKey: 'embeddings' },
+  { cap: CAP_RERANK, labelKey: 'rerank' },
+  { cap: CAP_VAD, labelKey: 'vad' },
+  { cap: CAP_SCORE, labelKey: 'score' },
+]
+
+export function modelUseCases(model) {
+  const capabilities = Array.isArray(model?.capabilities) ? model.capabilities : []
+  return USE_CASES.filter(item => (
+    capabilities.includes(item.cap) && !(item.hideIf && capabilities.includes(item.hideIf))
+  ))
+}
+
+const MODEL_STATE_GROUPS = [
+  { id: 'running', labelKey: 'running', icon: 'fa-circle-play' },
+  { id: 'idle', labelKey: 'idle', icon: 'fa-pause' },
+  { id: 'disabled', labelKey: 'disabled', icon: 'fa-ban' },
+]
+
+export function ModelLifecycleDetailShell({
+  testId,
+  icon,
+  name,
+  lede,
+  ledeTitle,
+  onBack,
+  backLabel,
+  warning,
+  actions,
+  stats,
+  error,
+  children,
+}) {
+  return (
+    <div className="detail-pane">
+      <DetailHeader
+        testId={testId}
+        icon={icon}
+        name={name}
+        lede={lede}
+        ledeTitle={ledeTitle}
+        onBack={onBack}
+        backLabel={backLabel}
+        warning={warning}
+        actions={actions}
+      />
+      {Array.isArray(stats) && <StatGrid stats={stats} />}
+      {error && (
+        <div className="attention-callout attention-callout--error" role="alert">
+          <span><i className="fas fa-circle-exclamation icon-before" aria-hidden="true" />{error}</span>
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export default function InstalledModels({
+  addToast,
+  query,
+  state,
+  selectedName,
+  onQueryChange,
+  onStateChange,
+  onSelect,
+}) {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { t } = useTranslation('models')
+  const { models, loading, error: loadError, refetch } = useModels()
+  const { enrichModel } = useGalleryEnrichment()
+  const { operations } = useOperations()
+  const [loadedModelIds, setLoadedModelIds] = useState(() => new Set())
+  const [aliasTargets, setAliasTargets] = useState({})
+  const [distributedMode, setDistributedMode] = useState(false)
+  const [pendingActions, setPendingActions] = useState(() => new Set())
+  const [actionErrors, setActionErrors] = useState({})
+  const [confirmDialog, setConfirmDialog] = useState(null)
+  const [collapsedGroups, setCollapsedGroups] = useState(() => new Set())
+  const loadedOnce = useRef(false)
+
+  const fetchLoadedModels = useCallback(async () => {
+    try {
+      const info = await systemApi.info()
+      const loaded = Array.isArray(info?.loaded_models) ? info.loaded_models : []
+      setLoadedModelIds(new Set(loaded.map(model => model.id)))
+    } catch {
+      setLoadedModelIds(new Set())
+    }
+  }, [])
+
+  const fetchAliases = useCallback(async () => {
+    try {
+      const aliases = await modelsApi.listAliases()
+      const next = {}
+      for (const alias of Array.isArray(aliases) ? aliases : []) next[alias.name] = alias.target
+      setAliasTargets(next)
+    } catch {
+      setAliasTargets({})
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchLoadedModels()
+    fetchAliases()
+    nodesApi.list().then(() => setDistributedMode(true)).catch(() => setDistributedMode(false))
+  }, [fetchAliases, fetchLoadedModels])
+
+  useEffect(() => {
+    if (!distributedMode) return
+    const interval = setInterval(() => {
+      refetch()
+      fetchLoadedModels()
+    }, 10000)
+    return () => clearInterval(interval)
+  }, [distributedMode, fetchLoadedModels, refetch])
+
+  useEffect(() => {
+    if (!loading) loadedOnce.current = true
+  }, [loading])
+
+  useEffect(() => {
+    refetch()
+    fetchLoadedModels()
+  }, [operations.length, fetchLoadedModels, refetch])
+
+  const isRunning = useCallback(model => (
+    !model.disabled && (
+      loadedModelIds.has(model.id) ||
+      (Array.isArray(model.loaded_on) && model.loaded_on.length > 0)
+    )
+  ), [loadedModelIds])
+
+  const filters = [
+    { key: 'all', label: t('lifecycle.filters.all'), icon: 'fa-layer-group' },
+    { key: 'running', label: t('lifecycle.filters.running'), icon: 'fa-circle-play' },
+    { key: 'idle', label: t('lifecycle.filters.idle'), icon: 'fa-pause' },
+    { key: 'disabled', label: t('lifecycle.filters.disabled'), icon: 'fa-ban' },
+    { key: 'pinned', label: t('lifecycle.filters.pinned'), icon: 'fa-thumbtack' },
+    { key: 'distributed', label: t('lifecycle.filters.distributed'), icon: 'fa-server' },
+  ]
+
+  const matchesState = model => {
+    if (state === 'running') return isRunning(model)
+    if (state === 'idle') return !model.disabled && !isRunning(model)
+    if (state === 'disabled') return !!model.disabled
+    if (state === 'pinned') return !!model.pinned
+    if (state === 'distributed') return Array.isArray(model.loaded_on) && model.loaded_on.length > 0
+    return true
+  }
+  const normalizedQuery = query.trim().toLowerCase()
+  const visibleModels = models.filter(model => (
+    matchesState(model) && (
+      !normalizedQuery ||
+      model.id.toLowerCase().includes(normalizedQuery) ||
+      (model.backend || '').toLowerCase().includes(normalizedQuery)
+    )
+  ))
+  const selectedModel = selectedName
+    ? models.find(model => model.id === selectedName) || null
+    : null
+
+  const toggleGroup = useCallback(id => {
+    setCollapsedGroups(previous => {
+      const next = new Set(previous)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
+
+  const setPending = (name, pending) => {
+    setPendingActions(previous => {
+      const next = new Set(previous)
+      if (pending) next.add(name)
+      else next.delete(name)
+      return next
+    })
+  }
+
+  const runAction = async (modelName, action, request, successMessage) => {
+    setPending(modelName, true)
+    setActionErrors(previous => ({ ...previous, [modelName]: null }))
+    try {
+      await request()
+      if (successMessage) addToast(successMessage, 'success')
+      refetch()
+      await fetchLoadedModels()
+      return true
+    } catch (err) {
+      setActionErrors(previous => ({
+        ...previous,
+        [modelName]: t('lifecycle.errors.action', { action, model: modelName, message: err.message }),
+      }))
+      return false
+    } finally {
+      setPending(modelName, false)
+    }
+  }
+
+  const handleLoad = modelName => runAction(
+    modelName,
+    t('lifecycle.actionNames.load'),
+    () => backendControlApi.load({ model: modelName }),
+    t('lifecycle.toasts.loaded', { model: modelName }),
+  )
+
+  const handleStop = modelName => {
+    setConfirmDialog({
+      title: t('lifecycle.confirm.stopTitle'),
+      message: t('lifecycle.confirm.stopMessage', { model: modelName }),
+      confirmLabel: t('lifecycle.actions.stop'),
+      danger: true,
+      onConfirm: async () => {
+        setConfirmDialog(null)
+        await runAction(
+          modelName,
+          t('lifecycle.actionNames.stop'),
+          () => backendControlApi.shutdown({ model: modelName }),
+          t('lifecycle.toasts.stopped', { model: modelName }),
+        )
+      },
+    })
+  }
+
+  const handleToggleState = (modelName, disabled) => {
+    const operation = disabled ? 'enable' : 'disable'
+    return runAction(
+      modelName,
+      t(`lifecycle.actionNames.${operation}`),
+      () => modelsApi.toggleState(modelName, operation),
+      t(`lifecycle.toasts.${operation}d`, { model: modelName }),
+    )
+  }
+
+  const handleTogglePinned = (modelName, pinned) => {
+    const operation = pinned ? 'unpin' : 'pin'
+    return runAction(
+      modelName,
+      t(`lifecycle.actionNames.${operation}`),
+      () => modelsApi.togglePinned(modelName, operation),
+      t(`lifecycle.toasts.${operation}ned`, { model: modelName }),
+    )
+  }
+
+  const handleDelete = modelName => {
+    setConfirmDialog({
+      title: t('lifecycle.confirm.deleteTitle'),
+      message: t('lifecycle.confirm.deleteMessage', { model: modelName }),
+      confirmLabel: t('lifecycle.actions.delete'),
+      danger: true,
+      onConfirm: async () => {
+        setConfirmDialog(null)
+        const deleted = await runAction(
+          modelName,
+          t('lifecycle.actionNames.delete'),
+          () => modelsApi.deleteByName(modelName),
+          t('lifecycle.toasts.deleted', { model: modelName }),
+        )
+        if (deleted) onSelect(null)
+      },
+    })
+  }
+
+  const handleReload = () => runAction(
+    'models',
+    t('lifecycle.actionNames.update'),
+    modelsApi.reload,
+    t('lifecycle.toasts.updated'),
+  )
+
+  const railItems = visibleModels.map(model => {
+    const running = isRunning(model)
+    let groupId = 'idle'
+    let stripe = 'idle'
+    let meta = t('lifecycle.states.idle')
+    let metaTone
+    if (model.disabled) {
+      groupId = 'disabled'
+      stripe = 'off'
+      meta = t('lifecycle.states.disabled')
+    } else if (pendingActions.has(model.id)) {
+      meta = t('lifecycle.states.working')
+      metaTone = 'busy'
+    } else if (running) {
+      groupId = 'running'
+      stripe = 'run'
+      meta = t('lifecycle.states.running')
+      metaTone = 'ok'
+    }
+    return { id: model.id, name: model.id, icon: 'fa-brain', groupId, stripe, meta, metaTone }
+  })
+
+  const groups = MODEL_STATE_GROUPS.map(group => ({
+    id: group.id,
+    icon: group.icon,
+    label: t(`lifecycle.filters.${group.labelKey}`),
+  }))
+
+  const selectedPane = selectedModel ? (() => {
+    const enriched = enrichModel(selectedModel.id)
+    const useCases = modelUseCases(selectedModel)
+    const running = isRunning(selectedModel)
+    const pending = pendingActions.has(selectedModel.id)
+    return (
+      <ModelLifecycleDetailShell
+        testId="installed-models"
+        icon="fa-brain"
+        name={selectedModel.id}
+        lede={enriched?.description ? stripMarkdown(enriched.description).slice(0, 220) : null}
+        ledeTitle={enriched?.description ? stripMarkdown(enriched.description) : null}
+        onBack={() => onSelect(null)}
+        backLabel={t('lifecycle.installed.backToAll')}
+        error={actionErrors[selectedModel.id]}
+        stats={[
+          {
+            label: t('lifecycle.detail.state'),
+            value: selectedModel.disabled
+              ? t('lifecycle.states.disabled')
+              : running
+                ? t('lifecycle.states.running')
+                : t('lifecycle.states.idle'),
+            tone: running ? 'ok' : undefined,
+          },
+          { label: t('lifecycle.detail.backend'), value: selectedModel.backend || t('lifecycle.detail.auto') },
+          selectedModel.pinned
+            ? { label: t('lifecycle.detail.pinned'), value: t('lifecycle.detail.yes'), tone: 'warn' }
+            : null,
+        ]}
+        actions={(
+          <>
+            {!selectedModel.disabled && !running && (
+              <button className="btn btn-primary btn-sm" onClick={() => handleLoad(selectedModel.id)} disabled={pending}>
+                <i className={`fas ${pending ? 'fa-spinner fa-spin' : 'fa-bolt'}`} aria-hidden="true" />
+                {pending ? t('lifecycle.actions.loading') : t('lifecycle.actions.load')}
+              </button>
+            )}
+            {running && (
+              <button className="btn btn-secondary btn-sm" onClick={() => handleStop(selectedModel.id)} disabled={pending}>
+                <i className="fas fa-stop" aria-hidden="true" /> {t('lifecycle.actions.stop')}
+              </button>
+            )}
+            <ActionMenu
+              ariaLabel={t('lifecycle.actions.forModel', { model: selectedModel.id })}
+              triggerLabel={t('lifecycle.actions.forModel', { model: selectedModel.id })}
+              items={[
+                {
+                  key: 'toggle',
+                  icon: selectedModel.disabled ? 'fa-toggle-on' : 'fa-toggle-off',
+                  label: selectedModel.disabled ? t('lifecycle.actions.enable') : t('lifecycle.actions.disable'),
+                  onClick: () => handleToggleState(selectedModel.id, selectedModel.disabled),
+                  disabled: pending,
+                },
+                {
+                  key: 'pin',
+                  icon: 'fa-thumbtack',
+                  label: selectedModel.pinned ? t('lifecycle.actions.unpin') : t('lifecycle.actions.pin'),
+                  onClick: () => handleTogglePinned(selectedModel.id, selectedModel.pinned),
+                  disabled: pending || !!selectedModel.disabled,
+                },
+                {
+                  key: 'edit',
+                  icon: 'fa-pen-to-square',
+                  label: t('lifecycle.actions.edit'),
+                  onClick: () => navigate(`/app/model-editor/${encodeURIComponent(selectedModel.id)}`, {
+                    state: fromState(location, t('lifecycle.title')),
+                  }),
+                },
+                {
+                  key: 'logs',
+                  icon: 'fa-terminal',
+                  label: t('lifecycle.actions.logs'),
+                  onClick: () => navigate(`/app/backend-logs/${encodeURIComponent(selectedModel.id)}`),
+                },
+                { divider: true },
+                {
+                  key: 'delete',
+                  icon: 'fa-trash',
+                  label: t('lifecycle.actions.delete'),
+                  danger: true,
+                  onClick: () => handleDelete(selectedModel.id),
+                },
+              ]}
+            />
+          </>
+        )}
+      >
+        {(aliasTargets[selectedModel.id] || selectedModel.source === 'registry-only') && (
+          <div className="badge-row">
+            {selectedModel.source === 'registry-only' && (
+              <span className="badge badge-warning" title={t('lifecycle.detail.adoptedHint')}>
+                <i className="fas fa-ghost" /> {t('lifecycle.detail.adopted')}
+              </span>
+            )}
+            {aliasTargets[selectedModel.id] && (
+              <span className="badge badge-info" title={t('lifecycle.detail.aliasTitle', { target: aliasTargets[selectedModel.id] })}>
+                <i className="fas fa-arrow-right-arrow-left" /> {t('lifecycle.detail.alias', { target: aliasTargets[selectedModel.id] })}
+              </span>
+            )}
+          </div>
+        )}
+
+        {useCases.length > 0 && (
+          <div>
+            <span className="detail-pane__label">{t('lifecycle.open.title')}</span>
+            <div className="badge-row">
+              {useCases.map(useCase => useCase.route ? (
+                <button
+                  key={useCase.cap}
+                  type="button"
+                  className="badge badge-info badge-link"
+                  onClick={() => navigate(useCase.route(selectedModel.id))}
+                >
+                  {t(`lifecycle.open.${useCase.labelKey}`)}
+                </button>
+              ) : (
+                <span key={useCase.cap} className="badge">{t(`lifecycle.open.${useCase.labelKey}`)}</span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <InstalledModelDetail
+          model={selectedModel}
+          enriched={enriched}
+          distributedMode={distributedMode}
+          t={t}
+        />
+      </ModelLifecycleDetailShell>
+    )
+  })() : (
+    <div className="zero-pane">
+      <div className="zero-pane__hero">
+        <span className="zero-pane__eyebrow">{t('lifecycle.installed.eyebrow')}</span>
+        <h2 className="zero-pane__title">{t('lifecycle.installed.summary', { count: models.length })}</h2>
+        <p className="zero-pane__text">{t('lifecycle.installed.summaryHint')}</p>
+      </div>
+    </div>
+  )
+
+  return (
+    <>
+      <FilterBar
+        search={query}
+        onSearchChange={onQueryChange}
+        searchPlaceholder={t('lifecycle.installed.searchPlaceholder')}
+        filters={filters}
+        activeFilter={state}
+        onFilterChange={onStateChange}
+        rightSlot={(
+          <button className="btn btn-secondary btn-sm" onClick={handleReload} disabled={pendingActions.has('models')}>
+            <i className={`fas ${pendingActions.has('models') ? 'fa-spinner fa-spin' : 'fa-rotate'}`} />
+            {pendingActions.has('models') ? t('lifecycle.actions.updating') : t('lifecycle.actions.update')}
+          </button>
+        )}
+      />
+
+      {loadError && (
+        <div className="attention-callout attention-callout--error" role="alert">
+          <span>{t('lifecycle.errors.loadList', { message: loadError })}</span>
+        </div>
+      )}
+      {actionErrors.models && (
+        <div className="attention-callout attention-callout--error" role="alert">
+          <span><i className="fas fa-circle-exclamation icon-before" aria-hidden="true" />{actionErrors.models}</span>
+        </div>
+      )}
+
+      {loading && !loadedOnce.current ? (
+        <GalleryLoader />
+      ) : models.length === 0 ? (
+        <div className="empty-state empty-state--page">
+          <div className="empty-state-icon"><i className="fas fa-brain" /></div>
+          <h2 className="empty-state-title">{t('lifecycle.empty.title')}</h2>
+          <p className="empty-state-text">{t('lifecycle.empty.text')}</p>
+          <div className="empty-state__actions">
+            <button className="btn btn-primary btn-sm" onClick={() => navigate('/app/models')}>
+              <i className="fas fa-store" /> {t('lifecycle.empty.explore')}
+            </button>
+            <button className="btn btn-secondary btn-sm" onClick={() => navigate('/app/import-model')}>
+              <i className="fas fa-upload" /> {t('lifecycle.empty.import')}
+            </button>
+          </div>
+        </div>
+      ) : visibleModels.length === 0 ? (
+        <div className="empty-state">
+          <i className="fas fa-filter" />
+          <p>{t('lifecycle.empty.noMatches')}</p>
+          <button className="btn btn-ghost btn-sm" onClick={() => { onQueryChange(''); onStateChange('all') }}>
+            {t('lifecycle.empty.clear')}
+          </button>
+        </div>
+      ) : (
+        <SplitView
+          testId="installed-models"
+          detail={!!selectedModel}
+          rail={(
+            <EntityRail
+              items={railItems}
+              groups={groups}
+              grouped={!query.trim() && state === 'all'}
+              collapsedGroups={collapsedGroups}
+              onToggleGroup={toggleGroup}
+              busy={loading}
+              selectedId={selectedName}
+              onSelect={onSelect}
+              countLabel={t('lifecycle.installed.count', { shown: visibleModels.length, total: models.length })}
+              ariaLabel={t('lifecycle.views.installed')}
+              testId="installed-models-rail"
+            />
+          )}
+          pane={selectedPane}
+        />
+      )}
+
+      <ConfirmDialog
+        open={!!confirmDialog}
+        title={confirmDialog?.title}
+        message={confirmDialog?.message}
+        confirmLabel={confirmDialog?.confirmLabel}
+        danger={confirmDialog?.danger}
+        onConfirm={confirmDialog?.onConfirm}
+        onCancel={() => setConfirmDialog(null)}
+      />
+    </>
+  )
+}
+
+function InstalledModelDetail({ model, enriched, distributedMode, t }) {
+  const description = enriched?.description
+  const license = enriched?.license
+  const tags = Array.isArray(enriched?.tags) ? enriched.tags : []
+  const urls = Array.isArray(enriched?.urls) ? enriched.urls : []
+  const files = Array.isArray(enriched?.additionalFiles)
+    ? enriched.additionalFiles
+    : Array.isArray(enriched?.files)
+      ? enriched.files
+      : []
+
+  return (
+    <div className="resource-row__detail">
+      <h3><i className="fas fa-circle-info" /> {t('lifecycle.detail.title')}</h3>
+      <dl className="resource-row__detail-grid">
+        <dt>{t('lifecycle.detail.description')}</dt>
+        <dd>
+          {description ? (
+            <div
+              className="resource-row__detail-md markdown-body"
+              dangerouslySetInnerHTML={{ __html: renderMarkdown(description) }}
+            />
+          ) : (
+            <span className="cell-muted">{t('lifecycle.detail.noDescription')}</span>
+          )}
+        </dd>
+
+        <dt>{t('lifecycle.detail.backend')}</dt>
+        <dd><span className="badge badge-info">{model.backend || t('lifecycle.detail.auto')}</span></dd>
+
+        {license && (<>
+          <dt>{t('lifecycle.detail.license')}</dt>
+          <dd>{license}</dd>
+        </>)}
+
+        {tags.length > 0 && (<>
+          <dt>{t('lifecycle.detail.tags')}</dt>
+          <dd><div className="badge-row">{tags.map(tag => <span key={tag} className="badge badge-info">{tag}</span>)}</div></dd>
+        </>)}
+
+        {urls.length > 0 && (<>
+          <dt>{t('lifecycle.detail.links')}</dt>
+          <dd>
+            <div className="stack stack--xs">
+              {urls.map(url => (
+                <a key={url} href={safeHref(url)} target="_blank" rel="noopener noreferrer" className="badge badge-info badge-link">
+                  <i className="fas fa-external-link-alt icon-before text-xs" />{url}
+                </a>
+              ))}
+            </div>
+          </dd>
+        </>)}
+
+        {distributedMode && Array.isArray(model.loaded_on) && model.loaded_on.length > 0 && (<>
+          <dt>{t('lifecycle.detail.distributed')}</dt>
+          <dd><NodeDistributionChip nodes={model.loaded_on} context="models" compactThreshold={20} /></dd>
+        </>)}
+
+        {model.source && (<>
+          <dt>{t('lifecycle.detail.source')}</dt>
+          <dd className="cell-muted">{model.source}</dd>
+        </>)}
+
+        {files.length > 0 && (<>
+          <dt>{t('lifecycle.detail.files')}</dt>
+          <dd className="cell-muted">{t('lifecycle.detail.fileCount', { count: files.length })}</dd>
+        </>)}
+      </dl>
+    </div>
+  )
+}
diff --git a/core/http/react-ui/src/pages/Manage.jsx b/core/http/react-ui/src/pages/Manage.jsx
deleted file mode 100644
index abe203b49..000000000
--- a/core/http/react-ui/src/pages/Manage.jsx
+++ /dev/null
@@ -1,1481 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { useNavigate, useOutletContext, useSearchParams, useLocation } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { fromState } from '../utils/editorNav'
-import ResourceMonitor from '../components/ResourceMonitor'
-import PageHeader from '../components/PageHeader'
-import ConfirmDialog from '../components/ConfirmDialog'
-import NodeDistributionChip from '../components/NodeDistributionChip'
-import FilterBar from '../components/FilterBar'
-import GalleryLoader from '../components/GalleryLoader'
-import ManageSummary from '../components/ManageSummary'
-import MetaBadgeRow from '../components/MetaBadgeRow'
-import ActionMenu from '../components/ActionMenu'
-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'
-import { backendControlApi, modelsApi, backendsApi, systemApi, nodesApi } from '../utils/api'
-import { renderMarkdown, stripMarkdown } from '../utils/markdown'
-import { safeHref } from '../utils/url'
-import {
-  CAP_CHAT, CAP_COMPLETION, CAP_IMAGE, CAP_VIDEO, CAP_TTS,
-  CAP_TRANSCRIPT, CAP_SOUND_GENERATION, CAP_FACE_RECOGNITION,
-  CAP_SPEAKER_RECOGNITION, CAP_EMBEDDINGS, CAP_RERANK,
-  CAP_VAD, CAP_SCORE,
-} from '../utils/capabilities'
-
-const TABS = [
-  { key: 'models', label: 'Models', icon: 'fa-brain' },
-  { key: 'backends', label: 'Backends', icon: 'fa-server' },
-]
-
-// Capability → use-case badge. Entries with `route` become clickable links to
-// the matching playground page; the rest render as informational badges.
-// Order is the display order. CAP_CHAT covers CAP_COMPLETION too.
-const USE_CASES = [
-  { cap: CAP_CHAT,                label: 'Chat',       route: (id) => `/app/chat/${encodeURIComponent(id)}` },
-  { cap: CAP_COMPLETION,          label: 'Completion', route: (id) => `/app/chat/${encodeURIComponent(id)}`, hideIf: CAP_CHAT },
-  { cap: CAP_IMAGE,               label: 'Image',      route: (id) => `/app/image/${encodeURIComponent(id)}` },
-  { cap: CAP_VIDEO,               label: 'Video',      route: (id) => `/app/video/${encodeURIComponent(id)}` },
-  { cap: CAP_TTS,                 label: 'TTS',        route: (id) => `/app/tts/${encodeURIComponent(id)}` },
-  { cap: CAP_TRANSCRIPT,          label: 'Transcribe', route: () => '/app/talk' },
-  { cap: CAP_SOUND_GENERATION,    label: 'Sound',      route: (id) => `/app/sound/${encodeURIComponent(id)}` },
-  { cap: CAP_FACE_RECOGNITION,    label: 'Face',       route: (id) => `/app/face/${encodeURIComponent(id)}` },
-  { cap: CAP_SPEAKER_RECOGNITION, label: 'Voice',      route: (id) => `/app/voice/${encodeURIComponent(id)}` },
-  { cap: CAP_EMBEDDINGS,          label: 'Embeddings' },
-  { cap: CAP_RERANK,              label: 'Rerank' },
-  // Display-only badges (no playground page): infrastructure
-  // capabilities the operator declares but doesn't directly drive
-  // from the UI. VAD feeds the transcribe pipeline; Score feeds
-  // the router classifier — both are wired through other model
-  // configs and need to be visible here so operators can confirm
-  // the underlying model declares the right known_usecases.
-  { cap: CAP_VAD,                 label: 'VAD' },
-  { cap: CAP_SCORE,               label: 'Score' },
-]
-
-// Number of columns the expandable detail row spans, per tab. Kept as
-// constants so adding/removing a column doesn't silently break the colSpan.
-
-// formatInstalledAt renders an installed_at timestamp as a short relative/abs
-// string suitable for dense tables. Returns the raw value if parsing fails so
-// we never display "Invalid Date".
-function formatInstalledAt(value) {
-  if (!value) return '—'
-  const d = new Date(value)
-  if (isNaN(d.getTime())) return value
-  const now = Date.now()
-  const diffMin = Math.floor((now - d.getTime()) / 60000)
-  if (diffMin < 1) return 'just now'
-  if (diffMin < 60) return `${diffMin}m ago`
-  if (diffMin < 60 * 24) return `${Math.floor(diffMin / 60)}h ago`
-  if (diffMin < 60 * 24 * 30) return `${Math.floor(diffMin / (60 * 24))}d ago`
-  return d.toISOString().slice(0, 10)
-}
-
-// formatInstalledAtFull returns the absolute ISO timestamp for tooltips.
-function formatInstalledAtFull(value) {
-  if (!value) return ''
-  const d = new Date(value)
-  if (isNaN(d.getTime())) return value
-  return d.toISOString().replace('T', ' ').slice(0, 19) + ' UTC'
-}
-
-// formatBackendVersion derives a single short identifier suitable for a dense
-// "Version" cell. The runtime API doesn't carry a semver for OCI installs —
-// it has digest, uri, or gallery_url instead — so showing "—" for everything
-// imported via OCI was misleading. Order of preference: explicit version →
-// short digest → OCI tag (the part after the last colon) → ocifile basename.
-//
-// Returns { label, full } where `full` is the unabridged value to expose via
-// title attr / detail panel.
-function formatBackendVersion(metadata) {
-  if (!metadata) return { label: '—', full: '' }
-  if (metadata.version) {
-    return { label: `v${metadata.version}`, full: `version v${metadata.version}` }
-  }
-  if (metadata.digest) {
-    // sha256:7b2a044a… — show the short hex form devs are used to.
-    const m = /^(sha\d+:)?([a-f0-9]+)$/i.exec(metadata.digest)
-    if (m) {
-      const hex = m[2]
-      return { label: hex.slice(0, 12), full: metadata.digest }
-    }
-    return { label: metadata.digest.slice(0, 12), full: metadata.digest }
-  }
-  const uri = metadata.uri || ''
-  if (uri.startsWith('ocifile://')) {
-    // Local OCI tarball — show the basename, not the full path.
-    const path = uri.replace(/^ocifile:\/\//, '')
-    const base = path.split('/').pop() || path
-    return { label: base, full: uri }
-  }
-  if (uri) {
-    // Registry ref like quay.io/foo/bar:tag → show the tag, full ref on hover.
-    const tag = uri.includes(':') ? uri.slice(uri.lastIndexOf(':') + 1) : uri
-    return { label: tag, full: uri }
-  }
-  return { label: '—', full: '' }
-}
-
-// 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.
-
-export default function Manage() {
-  const { addToast } = useOutletContext()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { t } = useTranslation('admin')
-  const [searchParams, setSearchParams] = useSearchParams()
-  const initialTab = searchParams.get('tab') || localStorage.getItem('manage-tab') || 'models'
-  const [activeTab, setActiveTab] = useState(TABS.some(tab => tab.key === initialTab) ? initialTab : 'models')
-  const { models, loading: modelsLoading, refetch: refetchModels } = useModels()
-  const { enrichModel, enrichBackend } = useGalleryEnrichment()
-  const { operations } = useOperations()
-  const [loadedModelIds, setLoadedModelIds] = useState(new Set())
-  // Map of alias name -> target. The capabilities endpoint that feeds the row
-  // list doesn't carry the alias field, so we fetch it once and look rows up by
-  // name to render the read-only "alias -> target" badge.
-  const [aliasTargets, setAliasTargets] = useState({})
-  const [backends, setBackends] = useState([])
-  const [backendsLoading, setBackendsLoading] = useState(true)
-  // See Models.jsx: a cold start has nothing to keep, a refetch does.
-  const modelsLoadedOnce = useRef(false)
-  const backendsLoadedOnce = useRef(false)
-  const [reloading, setReloading] = useState(false)
-  const [reinstallingBackends, setReinstallingBackends] = useState(new Set())
-  const [upgrades, setUpgrades] = useState({})
-  const [confirmDialog, setConfirmDialog] = useState(null)
-  const [distributedMode, setDistributedMode] = useState(false)
-  const [togglingModels, setTogglingModels] = useState(new Set())
-  const [pinningModels, setPinningModels] = useState(new Set())
-  const [loadingModels, setLoadingModels] = useState(new Set())
-  // 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') || '')
-  const [modelsFilter, setModelsFilter] = useState(() => searchParams.get('mf') || 'all')
-  const [backendsSearch, setBackendsSearch] = useState(() => searchParams.get('bq') || '')
-  const [backendsFilter, setBackendsFilter] = useState(() => searchParams.get('bf') || 'all')
-  // Two independent toggles. Meta backends are always visible — they're the
-  // entries operators configure against. `bv` controls platform-specific
-  // concrete variants (e.g. llama-cpp-cuda12-12.4) that a meta backend
-  // aliases on the host. `bd` controls pre-release `-development` builds.
-  // The legacy `bm` flag (when both were bundled) maps onto both so old
-  // deep-links land on the same view they used to.
-  const [showVariants, setShowVariants] = useState(() => {
-    const p = searchParams
-    return p.get('bv') === '1' || p.get('bm') === '1'
-  })
-  const [showDevelopment, setShowDevelopment] = useState(() => {
-    const p = searchParams
-    return p.get('bd') === '1' || p.get('bm') === '1'
-  })
-
-  // Sync filter state into the URL so deep-links + tab switches survive.
-  useEffect(() => {
-    const p = new URLSearchParams(searchParams)
-    const setOrDelete = (k, v) => { if (v && v !== 'all') p.set(k, v); else p.delete(k) }
-    setOrDelete('mq', modelsSearch)
-    setOrDelete('mf', modelsFilter)
-    setOrDelete('bq', backendsSearch)
-    setOrDelete('bf', backendsFilter)
-    if (showVariants) p.set('bv', '1'); else p.delete('bv')
-    if (showDevelopment) p.set('bd', '1'); else p.delete('bd')
-    p.delete('bm')
-    setSearchParams(p, { replace: true })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [modelsSearch, modelsFilter, backendsSearch, backendsFilter, showVariants, showDevelopment])
-
-  const handleTabChange = (tab) => {
-    setActiveTab(tab)
-    selectEntity(null)
-    localStorage.setItem('manage-tab', tab)
-    setSearchParams({ tab })
-  }
-
-  // Switch tabs and pre-set a filter — wired into the StatCards so cards
-  // double as shortcuts to a filtered slice instead of being purely visual.
-  const handleSummaryClick = (tab, filter) => {
-    setActiveTab(tab)
-    selectEntity(null)
-    localStorage.setItem('manage-tab', tab)
-    if (tab === 'models') setModelsFilter(filter)
-    if (tab === 'backends') setBackendsFilter(filter)
-    const p = new URLSearchParams(searchParams)
-    p.set('tab', tab)
-    setSearchParams(p, { replace: true })
-  }
-
-  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 {
-      const info = await systemApi.info()
-      const loaded = Array.isArray(info?.loaded_models) ? info.loaded_models : []
-      setLoadedModelIds(new Set(loaded.map(m => m.id)))
-    } catch {
-      setLoadedModelIds(new Set())
-    }
-  }, [])
-
-  const fetchBackends = useCallback(async () => {
-    try {
-      setBackendsLoading(true)
-      const data = await backendsApi.listInstalled()
-      setBackends(Array.isArray(data) ? data : [])
-    } catch {
-      setBackends([])
-    } finally {
-      backendsLoadedOnce.current = true
-      setBackendsLoading(false)
-    }
-  }, [])
-
-  const fetchAliases = useCallback(async () => {
-    try {
-      const data = await modelsApi.listAliases()
-      const map = {}
-      for (const a of Array.isArray(data) ? data : []) map[a.name] = a.target
-      setAliasTargets(map)
-    } catch {
-      setAliasTargets({})
-    }
-  }, [])
-
-  useEffect(() => {
-    fetchLoadedModels()
-    fetchBackends()
-    fetchAliases()
-    // Detect distributed mode (nodes API returns 503 when not enabled)
-    nodesApi.list().then(() => setDistributedMode(true)).catch(() => {})
-  }, [fetchLoadedModels, fetchBackends, fetchAliases])
-
-  // Auto-refresh the Models tab every 10s in distributed mode so ghost models
-  // (loaded on a worker but absent from this frontend's in-memory cache)
-  // clear on their own without the user clicking Update.
-  const [lastSyncedAt, setLastSyncedAt] = useState(() => Date.now())
-  const [nowTick, setNowTick] = useState(() => Date.now())
-  useEffect(() => {
-    if (!distributedMode || activeTab !== 'models') return
-    const interval = setInterval(() => {
-      refetchModels()
-      fetchLoadedModels()
-      setLastSyncedAt(Date.now())
-    }, 10000)
-    return () => clearInterval(interval)
-  }, [distributedMode, activeTab, refetchModels, fetchLoadedModels])
-
-  // Drive the "last synced Ns ago" label without over-rendering the table.
-  useEffect(() => {
-    if (!distributedMode) return
-    const interval = setInterval(() => setNowTick(Date.now()), 1000)
-    return () => clearInterval(interval)
-  }, [distributedMode])
-  const lastSyncedAgo = (() => {
-    const s = Math.max(0, Math.floor((nowTick - lastSyncedAt) / 1000))
-    if (s < 5) return 'just now'
-    if (s < 60) return `${s}s ago`
-    const m = Math.floor(s / 60)
-    return `${m}m ago`
-  })()
-
-  // Refresh installed backends + available upgrades when the Backends tab opens
-  // AND whenever a backend operation settles (operations.length changes as a
-  // reinstall/upgrade completes and drops off the list). Without the op-settle
-  // refresh the installed-version cell and the "update available" badge stay
-  // stale after an upgrade until the user switches tabs - the op looks like it
-  // "did nothing". Mirrors the operations.length watch Backends.jsx uses.
-  useEffect(() => {
-    if (activeTab !== 'backends') return
-    fetchBackends()
-    backendsApi.checkUpgrades()
-      .then(data => setUpgrades(data || {}))
-      .catch(() => {})
-  }, [operations.length, activeTab, fetchBackends])
-
-  const handleStopModel = (modelName) => {
-    setConfirmDialog({
-      title: 'Stop Model',
-      message: `Stop model ${modelName}?`,
-      confirmLabel: 'Stop',
-      danger: true,
-      onConfirm: async () => {
-        setConfirmDialog(null)
-        try {
-          await backendControlApi.shutdown({ model: modelName })
-          addToast(`Stopped ${modelName}`, 'success')
-          setTimeout(fetchLoadedModels, 500)
-        } catch (err) {
-          addToast(`Failed to stop: ${err.message}`, 'error')
-        }
-      },
-    })
-  }
-
-  // Pre-load a model (or all of a realtime pipeline's sub-models) into memory.
-  // The /backend/load call blocks until loading finishes, so the menu item shows
-  // a loading state while in flight and reports the outcome on completion.
-  const handleLoadModel = async (modelName) => {
-    setLoadingModels(prev => new Set(prev).add(modelName))
-    try {
-      await backendControlApi.load({ model: modelName })
-      addToast(`Loaded ${modelName}`, 'success')
-      setTimeout(fetchLoadedModels, 500)
-    } catch (err) {
-      addToast(`Failed to load: ${err.message}`, 'error')
-    } finally {
-      setLoadingModels(prev => {
-        const next = new Set(prev)
-        next.delete(modelName)
-        return next
-      })
-    }
-  }
-
-  const handleDeleteModel = (modelName) => {
-    setConfirmDialog({
-      title: 'Delete Model',
-      message: `Delete model ${modelName}? This cannot be undone.`,
-      confirmLabel: 'Delete',
-      danger: true,
-      onConfirm: async () => {
-        setConfirmDialog(null)
-        try {
-          await modelsApi.deleteByName(modelName)
-          addToast(`Deleted ${modelName}`, 'success')
-          refetchModels()
-          fetchLoadedModels()
-        } catch (err) {
-          addToast(`Failed to delete: ${err.message}`, 'error')
-        }
-      },
-    })
-  }
-
-  const handleToggleModel = async (modelId, currentlyDisabled) => {
-    const action = currentlyDisabled ? 'enable' : 'disable'
-    setTogglingModels(prev => new Set(prev).add(modelId))
-    try {
-      await modelsApi.toggleState(modelId, action)
-      addToast(`Model ${modelId} ${action}d`, 'success')
-      refetchModels()
-      if (!currentlyDisabled) {
-        // Model was just disabled, refresh loaded models since it may have been shut down
-        setTimeout(fetchLoadedModels, 500)
-      }
-    } catch (err) {
-      addToast(`Failed to ${action} model: ${err.message}`, 'error')
-    } finally {
-      setTogglingModels(prev => {
-        const next = new Set(prev)
-        next.delete(modelId)
-        return next
-      })
-    }
-  }
-
-  const handleTogglePinned = async (modelId, currentlyPinned) => {
-    const action = currentlyPinned ? 'unpin' : 'pin'
-    setPinningModels(prev => new Set(prev).add(modelId))
-    try {
-      await modelsApi.togglePinned(modelId, action)
-      addToast(`Model ${modelId} ${action}ned`, 'success')
-      refetchModels()
-    } catch (err) {
-      addToast(`Failed to ${action} model: ${err.message}`, 'error')
-    } finally {
-      setPinningModels(prev => {
-        const next = new Set(prev)
-        next.delete(modelId)
-        return next
-      })
-    }
-  }
-
-  const handleReload = async () => {
-    setReloading(true)
-    try {
-      await modelsApi.reload()
-      addToast('Models reloaded', 'success')
-      setTimeout(() => { refetchModels(); fetchLoadedModels(); setReloading(false) }, 1000)
-    } catch (err) {
-      addToast(`Reload failed: ${err.message}`, 'error')
-      setReloading(false)
-    }
-  }
-
-  const handleReinstallBackend = async (name) => {
-    try {
-      setReinstallingBackends(prev => new Set(prev).add(name))
-      await backendsApi.install(name)
-      addToast(`Reinstalling ${name}...`, 'info')
-    } catch (err) {
-      addToast(`Failed to reinstall: ${err.message}`, 'error')
-    } finally {
-      setReinstallingBackends(prev => {
-        const next = new Set(prev)
-        next.delete(name)
-        return next
-      })
-    }
-  }
-
-  const handleUpgradeBackend = async (name) => {
-    try {
-      setReinstallingBackends(prev => new Set(prev).add(name))
-      await backendsApi.upgrade(name)
-      addToast(`Upgrading ${name}...`, 'info')
-    } catch (err) {
-      addToast(`Failed to upgrade: ${err.message}`, 'error')
-    } finally {
-      setReinstallingBackends(prev => {
-        const next = new Set(prev)
-        next.delete(name)
-        return next
-      })
-    }
-  }
-
-  const [upgradingAll, setUpgradingAll] = useState(false)
-  const handleUpgradeAll = async () => {
-    const names = Object.keys(upgrades)
-    if (names.length === 0) return
-    setUpgradingAll(true)
-    try {
-      // Serial upgrade — matches the gallery's Upgrade All behavior.
-      // Each backend upgrade is itself a cluster-wide fan-out, so parallel
-      // calls would multiply load on every worker.
-      for (const name of names) {
-        try {
-          await backendsApi.upgrade(name)
-        } catch (err) {
-          addToast(`Upgrade failed for ${name}: ${err.message}`, 'error')
-        }
-      }
-      addToast(`Upgrade started for ${names.length} backend${names.length === 1 ? '' : 's'}`, 'info')
-    } finally {
-      setUpgradingAll(false)
-    }
-  }
-
-  const handleDeleteBackend = (name) => {
-    setConfirmDialog({
-      title: 'Delete Backend',
-      message: `Delete backend ${name}?`,
-      confirmLabel: 'Delete',
-      danger: true,
-      onConfirm: async () => {
-        setConfirmDialog(null)
-        try {
-          await backendsApi.deleteInstalled(name)
-          addToast(`Deleted backend ${name}`, 'success')
-          fetchBackends()
-        } catch (err) {
-          addToast(`Failed to delete backend: ${err.message}`, 'error')
-        }
-      },
-    })
-  }
-
-  // Counts for the summary header — derived in-memory; no extra API calls.
-  useEffect(() => {
-    if (!modelsLoading) modelsLoadedOnce.current = true
-  }, [modelsLoading])
-
-  const runningCount = models.filter(m =>
-    !m.disabled && (loadedModelIds.has(m.id) || (Array.isArray(m.loaded_on) && m.loaded_on.length > 0))
-  ).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 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 />
-
-      {/* Summary */}
-      <ManageSummary
-        modelsCount={modelsLoading ? '—' : models.length}
-        backendsCount={backendsLoading ? '—' : backends.length}
-        runningCount={runningCount}
-        updatesCount={updatesCount}
-        onCardClick={handleSummaryClick}
-      />
-
-      {/* Tabs */}
-      <div className="tabs mb-md">
-        {TABS.map(t => {
-          const upgradeCount = t.key === 'backends' ? Object.keys(upgrades).length : 0
-          return (
-            <button
-              key={t.key}
-              className={`tab ${activeTab === t.key ? 'tab-active' : ''}`}
-              onClick={() => handleTabChange(t.key)}
-            >
-              <i className={`fas ${t.icon} icon-before`} />
-              {t.label}
-              {t.key === 'models' && !modelsLoading && ` (${models.length})`}
-              {t.key === 'backends' && !backendsLoading && ` (${backends.length})`}
-              {upgradeCount > 0 && (
-                <span className="tab-pill tab-pill--warning" title={`${upgradeCount} update${upgradeCount === 1 ? '' : 's'} available`}>
-                  <i className="fas fa-arrow-up" /> {upgradeCount}
-                </span>
-              )}
-            </button>
-          )
-        })}
-      </div>
-
-      {/* Models Tab */}
-      {activeTab === 'models' && (() => {
-        const MODEL_FILTERS = [
-          { key: 'all',      label: 'All',      icon: 'fa-layer-group' },
-          { key: 'running',  label: 'Running',  icon: 'fa-circle-play' },
-          { key: 'idle',     label: 'Idle',     icon: 'fa-pause' },
-          { key: 'disabled', label: 'Disabled', icon: 'fa-ban' },
-          { key: 'pinned',   label: 'Pinned',   icon: 'fa-thumbtack' },
-          ...(distributedMode ? [{ key: 'distributed', label: 'Distributed', icon: 'fa-server' }] : []),
-        ]
-        const passesFilter = (m) => {
-          if (modelsFilter === 'running') return !m.disabled && (loadedModelIds.has(m.id) || (m.loaded_on && m.loaded_on.length > 0))
-          if (modelsFilter === 'idle')    return !m.disabled && !loadedModelIds.has(m.id) && !(m.loaded_on && m.loaded_on.length > 0)
-          if (modelsFilter === 'disabled') return !!m.disabled
-          if (modelsFilter === 'pinned')   return !!m.pinned
-          if (modelsFilter === 'distributed') return Array.isArray(m.loaded_on) && m.loaded_on.length > 0
-          return true
-        }
-        const q = modelsSearch.trim().toLowerCase()
-        const passesSearch = (m) => !q || (m.id || '').toLowerCase().includes(q) || (m.backend || '').toLowerCase().includes(q)
-        const visibleModels = models.filter(m => passesFilter(m) && passesSearch(m))
-        return (
-      <div>
-        <FilterBar
-          search={modelsSearch}
-          onSearchChange={setModelsSearch}
-          searchPlaceholder="Search models by name or backend..."
-          filters={MODEL_FILTERS}
-          activeFilter={modelsFilter}
-          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 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 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>
-            </>
-          )}
-        />
-
-        {modelsLoading && !modelsLoadedOnce.current ? (
-          <GalleryLoader />
-        ) : models.length === 0 ? (
-          <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="empty-state__actions">
-              <button className="btn btn-primary btn-sm" onClick={() => navigate('/app/models')}>
-                <i className="fas fa-store" /> Browse Gallery
-              </button>
-              <button className="btn btn-secondary btn-sm" onClick={() => navigate('/app/import-model')}>
-                <i className="fas fa-upload" /> Import Model
-              </button>
-              <a className="btn btn-secondary btn-sm" href="https://localai.io" target="_blank" rel="noopener noreferrer">
-                <i className="fas fa-book" /> Documentation
-              </a>
-            </div>
-          </div>
-        ) : visibleModels.length === 0 ? (
-          <div className="empty-state">
-            <i className="fas fa-filter" />
-            <p>No models match the current filter.</p>
-            <button className="btn btn-ghost btn-sm" onClick={() => { setModelsSearch(''); setModelsFilter('all') }}>Clear filters</button>
-          </div>
-        ) : (
-          <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}
-                busy={modelsLoading}
-                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 ${selectedModel.id}`}
-                          triggerLabel={`Actions for ${selectedModel.id}`}
-                          items={[
-                            { 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: 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(selectedModel.id)}`, { state: fromState(location, t('manage.title')) }) },
-                            { key: 'logs', icon: 'fa-terminal', label: 'Backend logs',
-                              onClick: () => navigate(`/app/backend-logs/${encodeURIComponent(selectedModel.id)}`) },
-                            { divider: true },
-                            { key: 'delete', icon: 'fa-trash', label: 'Delete model', danger: true,
-                              onClick: () => handleDeleteModel(selectedModel.id) },
-                          ]}
-                        />
-                      </>
-                    }
-                  />
-
-                  <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>
-        )
-      })()}
-
-      {/* Backends Tab */}
-      {activeTab === 'backends' && (
-      <div>
-        {/* Upgrade banner — mirrors the gallery so operators can't miss updates */}
-        {!backendsLoading && Object.keys(upgrades).length > 0 && (
-          <div className="upgrade-banner">
-            <div className="upgrade-banner__text">
-              <i className="fas fa-arrow-up" />
-              <span>
-                {Object.keys(upgrades).length} backend{Object.keys(upgrades).length === 1 ? ' has' : 's have'} updates available
-              </span>
-            </div>
-            <div className="upgrade-banner__actions">
-              <button
-                className="btn btn-primary btn-sm"
-                onClick={handleUpgradeAll}
-                disabled={upgradingAll}
-              >
-                <i className={`fas ${upgradingAll ? 'fa-spinner fa-spin' : 'fa-arrow-up'}`} />
-                {upgradingAll ? ' Upgrading...' : ' Upgrade all'}
-              </button>
-            </div>
-          </div>
-        )}
-
-        {backendsLoading && !backendsLoadedOnce.current ? (
-          <GalleryLoader />
-        ) : backends.length === 0 ? (
-          <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="empty-state__actions">
-              <button className="btn btn-primary btn-sm" onClick={() => navigate('/app/backends')}>
-                <i className="fas fa-server" /> Browse Backend Gallery
-              </button>
-              <a className="btn btn-secondary btn-sm" href="https://localai.io/backends/" target="_blank" rel="noopener noreferrer">
-                <i className="fas fa-book" /> Documentation
-              </a>
-            </div>
-          </div>
-        ) : (() => {
-          // Production meta backends (e.g. "llama-cpp") are the surface
-          // operators actually configure against — gallery enrichment marks
-          // them isAlias=false/isDevelopment=false, so they pass both toggles.
-          // Meta-dev entries (e.g. "llama-cpp-development") still carry
-          // isDevelopment=true in the gallery and must be hidden by the
-          // Development toggle just like concrete dev variants — don't
-          // short-circuit on IsMeta or they leak through.
-          const flagsFor = (b) => {
-            const g = enrichBackend(b.Name)
-            if (!g) return { variant: false, dev: false }
-            return { variant: !!g.isAlias, dev: !!g.isDevelopment }
-          }
-          const isHidden = (b) => {
-            const f = flagsFor(b)
-            if (f.variant && !showVariants) return true
-            if (f.dev && !showDevelopment) return true
-            return false
-          }
-          const visibleBase = backends.filter(b => !isHidden(b))
-
-          // Counts AFTER the meta/dev filter so the chip numbers reflect what
-          // the user is actually about to filter into.
-          const upgradableCount = visibleBase.filter(b => upgrades[b.Name]).length
-          const userCount       = visibleBase.filter(b => !b.IsSystem).length
-          const systemCount     = visibleBase.filter(b => b.IsSystem).length
-          const offlineCount    = visibleBase.filter(b => {
-            const n = b.Nodes || b.nodes || []
-            return n.some(x => {
-              const s = x.node_status || x.NodeStatus
-              return s && s !== 'healthy' && s !== 'draining'
-            })
-          }).length
-          // Per-toggle counts: how many items in this category are currently
-          // hidden because of THIS toggle. A dev-variant counts in both —
-          // that's fine, it tells the operator the category is non-empty.
-          const hiddenVariantCount = showVariants ? 0 : backends.filter(b => flagsFor(b).variant).length
-          const hiddenDevCount     = showDevelopment ? 0 : backends.filter(b => flagsFor(b).dev).length
-          const hiddenTotal        = backends.length - visibleBase.length
-
-          const BACKEND_FILTERS = [
-            { key: 'all',        label: 'All',        icon: 'fa-layer-group',       count: visibleBase.length },
-            { key: 'user',       label: 'User',       icon: 'fa-download',          count: userCount },
-            { key: 'system',     label: 'System',     icon: 'fa-shield-alt',        count: systemCount },
-            ...(upgradableCount > 0 ? [{ key: 'upgradable', label: 'Updates', icon: 'fa-arrow-up', count: upgradableCount }] : []),
-            ...(distributedMode && offlineCount > 0 ? [{ key: 'offline', label: 'Offline nodes', icon: 'fa-exclamation-circle', count: offlineCount }] : []),
-          ]
-          const q = backendsSearch.trim().toLowerCase()
-          const passesSearch = (b) => !q
-            || (b.Name || '').toLowerCase().includes(q)
-            || (b.Metadata?.alias || '').toLowerCase().includes(q)
-            || (b.Metadata?.meta_backend_for || '').toLowerCase().includes(q)
-          const passesFilter = (b) => {
-            switch (backendsFilter) {
-              case 'user':       return !b.IsSystem
-              case 'system':     return !!b.IsSystem
-              case 'upgradable': return !!upgrades[b.Name]
-              case 'offline': {
-                const n = b.Nodes || b.nodes || []
-                return n.some(x => {
-                  const s = x.node_status || x.NodeStatus
-                  return s && s !== 'healthy' && s !== 'draining'
-                })
-              }
-              default: return true
-            }
-          }
-          const visibleBackends = visibleBase.filter(b => passesFilter(b) && passesSearch(b))
-          // Polished column count: chevron, icon, name+badges, version,
-          // installed, actions (+ optional nodes when distributed).
-          const colSpan = distributedMode ? 7 : 6
-
-          const filterBar = (
-            <FilterBar
-              search={backendsSearch}
-              onSearchChange={setBackendsSearch}
-              searchPlaceholder="Search backends by name or alias..."
-              filters={BACKEND_FILTERS}
-              activeFilter={backendsFilter}
-              onFilterChange={setBackendsFilter}
-              toggles={[
-                {
-                  key: 'variants',
-                  label: hiddenVariantCount > 0 ? `Variants (${hiddenVariantCount})` : 'Variants',
-                  icon: 'fa-cubes',
-                  checked: showVariants,
-                  onChange: () => setShowVariants(v => !v),
-                },
-                {
-                  key: 'development',
-                  label: hiddenDevCount > 0 ? `Development (${hiddenDevCount})` : 'Development',
-                  icon: 'fa-flask',
-                  checked: showDevelopment,
-                  onChange: () => setShowDevelopment(v => !v),
-                },
-              ]}
-            />
-          )
-
-          if (visibleBackends.length === 0) {
-            return (
-              <>
-                {filterBar}
-                <div className="empty-state">
-                  <i className="fas fa-filter" />
-                  <p>
-                    No backends match the current filter.
-                    {hiddenTotal > 0 && (
-                      <> {hiddenTotal} backend{hiddenTotal === 1 ? ' is' : 's are'} hidden by the Variants/Development toggles — flip them on to reveal {hiddenTotal === 1 ? 'it' : 'them'}.</>
-                    )}
-                  </p>
-                  <button className="btn btn-ghost btn-sm" onClick={() => { setBackendsSearch(''); setBackendsFilter('all') }}>Clear filters</button>
-                </div>
-              </>
-            )
-          }
-          return (
-          <>
-            {filterBar}
-            <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}
-                  busy={backendsLoading}
-                  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}
-                />
-              )}
-            />
-
-          </>
-          )
-        })()}
-      </div>
-      )}
-
-      <ConfirmDialog
-        open={!!confirmDialog}
-        title={confirmDialog?.title}
-        message={confirmDialog?.message}
-        confirmLabel={confirmDialog?.confirmLabel}
-        danger={confirmDialog?.danger}
-        onConfirm={confirmDialog?.onConfirm}
-        onCancel={() => setConfirmDialog(null)}
-      />
-    </div>
-  )
-}
-
-// ModelDetail renders the expanded panel for a Models row. It pulls richer
-// fields (description, license, tags, links, files) from the gallery cache
-// when available, and falls back gracefully for items not in the gallery.
-function ModelDetail({ model, enriched, matchedCaps, distributedMode, onNavigate }) {
-  const description = enriched?.description
-  const license = enriched?.license
-  const tags = Array.isArray(enriched?.tags) ? enriched.tags : []
-  const urls = Array.isArray(enriched?.urls) ? enriched.urls : []
-  const files = Array.isArray(enriched?.additionalFiles) ? enriched.additionalFiles
-              : Array.isArray(enriched?.files) ? enriched.files
-              : []
-  const sizeDisplay = enriched?.estimated_size_display && enriched.estimated_size_display !== '0 B' ? enriched.estimated_size_display : null
-  const vramDisplay = enriched?.estimated_vram_display && enriched.estimated_vram_display !== '0 B' ? enriched.estimated_vram_display : null
-
-  return (
-    <div className="resource-row__detail">
-      <h4><i className="fas fa-circle-info" /> Details</h4>
-      <dl className="resource-row__detail-grid">
-        <dt>Description</dt>
-        <dd>
-          {description ? (
-            <div
-              className="resource-row__detail-md markdown-body"
-              dangerouslySetInnerHTML={{ __html: renderMarkdown(description) }}
-            />
-          ) : (
-            <span className="cell-muted">No description available — this model isn't in the gallery.</span>
-          )}
-        </dd>
-
-        <dt>Backend</dt>
-        <dd>
-          <span className="badge badge-info">{model.backend || 'Auto'}</span>
-        </dd>
-
-        {matchedCaps.length > 0 && (<>
-          <dt>Capabilities</dt>
-          <dd>
-            <div className="badge-row">
-              {matchedCaps.map(uc => uc.route ? (
-                <a
-                  key={uc.cap}
-                  href="#"
-                  onClick={(e) => { e.preventDefault(); onNavigate(uc.route(model.id)) }}
-                  className="badge badge-info badge-link"
-                >{uc.label}</a>
-              ) : (
-                <span key={uc.cap} className="badge">{uc.label}</span>
-              ))}
-            </div>
-          </dd>
-        </>)}
-
-        {(sizeDisplay || vramDisplay) && (<>
-          <dt>Size / VRAM</dt>
-          <dd>
-            {sizeDisplay && <span style={{ marginRight: 'var(--spacing-md)' }}>Size: {sizeDisplay}</span>}
-            {vramDisplay && <span>VRAM: {vramDisplay}</span>}
-          </dd>
-        </>)}
-
-        {license && (<>
-          <dt>License</dt>
-          <dd>{license}</dd>
-        </>)}
-
-        {tags.length > 0 && (<>
-          <dt>Tags</dt>
-          <dd>
-            <div className="badge-row">
-              {tags.map(t => <span key={t} className="badge badge-info">{t}</span>)}
-            </div>
-          </dd>
-        </>)}
-
-        {urls.length > 0 && (<>
-          <dt>Links</dt>
-          <dd>
-            <div className="stack stack--xs">
-              {urls.map((url, i) => (
-                <a key={i} href={safeHref(url)} target="_blank" rel="noopener noreferrer"
-                  style={{ color: 'var(--color-primary)', wordBreak: 'break-all', fontSize: 'var(--text-xs)' }}>
-                  <i className="fas fa-external-link-alt icon-before text-xs" />{url}
-                </a>
-              ))}
-            </div>
-          </dd>
-        </>)}
-
-        {distributedMode && Array.isArray(model.loaded_on) && model.loaded_on.length > 0 && (<>
-          <dt>Distributed</dt>
-          <dd>
-            <NodeDistributionChip nodes={model.loaded_on} context="models" compactThreshold={20} />
-          </dd>
-        </>)}
-
-        {model.source && (<>
-          <dt>Source</dt>
-          <dd className="cell-muted">{model.source}</dd>
-        </>)}
-
-        {files.length > 0 && (<>
-          <dt>Files</dt>
-          <dd>
-            <span className="cell-muted">{files.length} file{files.length === 1 ? '' : 's'}</span>
-          </dd>
-        </>)}
-      </dl>
-    </div>
-  )
-}
-
-// BackendDetail renders the expanded panel for a Backends row. Gallery metadata
-// (description, license, tags, repository, URLs) is layered on top of the
-// runtime state from the installed list (version, drift, per-node info).
-function BackendDetail({ backend, enriched, upgradeInfo, nodes, distributedMode }) {
-  const description = enriched?.description
-  const license = enriched?.license
-  const tags = Array.isArray(enriched?.tags) ? enriched.tags : []
-  const urls = Array.isArray(enriched?.urls) ? enriched.urls : []
-  const repository = typeof enriched?.gallery === 'string'
-    ? enriched.gallery
-    : enriched?.gallery?.name
-
-  return (
-    <div className="resource-row__detail">
-      <h4><i className="fas fa-circle-info" /> Details</h4>
-      <dl className="resource-row__detail-grid">
-        <dt>Description</dt>
-        <dd>
-          {description ? (
-            <div
-              className="resource-row__detail-md markdown-body"
-              dangerouslySetInnerHTML={{ __html: renderMarkdown(description) }}
-            />
-          ) : (
-            <span className="cell-muted">No description available — this backend isn't in the gallery.</span>
-          )}
-        </dd>
-
-        {repository && (<>
-          <dt>Repository</dt>
-          <dd>
-            <span className="badge badge-info">{repository}</span>
-          </dd>
-        </>)}
-
-        {license && (<>
-          <dt>License</dt>
-          <dd>{license}</dd>
-        </>)}
-
-        {tags.length > 0 && (<>
-          <dt>Tags</dt>
-          <dd>
-            <div className="badge-row">
-              {tags.map(t => <span key={t} className="badge badge-info">{t}</span>)}
-            </div>
-          </dd>
-        </>)}
-
-        {urls.length > 0 && (<>
-          <dt>Links</dt>
-          <dd>
-            <div className="stack stack--xs">
-              {urls.map((url, i) => (
-                <a key={i} href={safeHref(url)} target="_blank" rel="noopener noreferrer"
-                  style={{ color: 'var(--color-primary)', wordBreak: 'break-all', fontSize: 'var(--text-xs)' }}>
-                  <i className="fas fa-external-link-alt icon-before text-xs" />{url}
-                </a>
-              ))}
-            </div>
-          </dd>
-        </>)}
-
-        {backend.Metadata?.uri && (<>
-          <dt>Source</dt>
-          <dd>
-            <span className="cell-mono" style={{ wordBreak: 'break-all' }}>{backend.Metadata.uri}</span>
-          </dd>
-        </>)}
-
-        {backend.Metadata?.digest && (<>
-          <dt>Digest</dt>
-          <dd>
-            <span className="cell-mono" style={{ wordBreak: 'break-all' }}>{backend.Metadata.digest}</span>
-          </dd>
-        </>)}
-
-        {backend.Metadata?.installed_at && (<>
-          <dt>Installed</dt>
-          <dd>
-            <span className="cell-mono">{formatInstalledAt(backend.Metadata.installed_at)}</span>
-            <span className="cell-muted" style={{ marginLeft: 'var(--spacing-sm)' }}>
-              ({formatInstalledAtFull(backend.Metadata.installed_at)})
-            </span>
-          </dd>
-        </>)}
-
-        {backend.Metadata?.alias && (<>
-          <dt>Alias</dt>
-          <dd className="cell-mono">{backend.Metadata.alias}</dd>
-        </>)}
-
-        {backend.Metadata?.meta_backend_for && (<>
-          <dt>Meta for</dt>
-          <dd className="cell-mono">{backend.Metadata.meta_backend_for}</dd>
-        </>)}
-
-        {distributedMode && nodes.length > 0 && (<>
-          <dt>Nodes</dt>
-          <dd>
-            <NodeDistributionChip nodes={nodes} context="backends" compactThreshold={20} />
-          </dd>
-        </>)}
-
-        {upgradeInfo?.node_drift?.length > 0 && (<>
-          <dt>Drift</dt>
-          <dd>
-            <table className="table" style={{ margin: 0, fontSize: 'var(--text-xs)' }}>
-              <thead>
-                <tr><th>Node</th><th>Version</th></tr>
-              </thead>
-              <tbody>
-                {upgradeInfo.node_drift.map((d, i) => (
-                  <tr key={i}>
-                    <td className="cell-mono">{d.node_name}</td>
-                    <td className="cell-mono">{d.version ? `v${d.version}` : '—'}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </dd>
-        </>)}
-      </dl>
-    </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/ManageRedirect.jsx b/core/http/react-ui/src/pages/ManageRedirect.jsx
new file mode 100644
index 000000000..5319ee452
--- /dev/null
+++ b/core/http/react-ui/src/pages/ManageRedirect.jsx
@@ -0,0 +1,21 @@
+import { Navigate, useLocation } from 'react-router-dom'
+
+export default function ManageRedirect() {
+  const { search } = useLocation()
+  const legacy = new URLSearchParams(search)
+  const backends = legacy.get('tab') === 'backends'
+  const next = new URLSearchParams({ view: 'installed' })
+
+  const selection = legacy.get('sel')
+  const query = legacy.get(backends ? 'bq' : 'mq')
+  const state = legacy.get(backends ? 'bf' : 'mf')
+
+  if (selection) next.set(backends ? 'backend' : 'model', selection)
+  if (query) next.set('q', query)
+  if (state) next.set('state', state)
+  if (backends && legacy.get('bv') === '1') next.set('show_all', '1')
+  if (backends && legacy.get('bd') === '1') next.set('development', '1')
+
+  const path = backends ? '/app/backends' : '/app/models'
+  return <Navigate to={`${path}?${next.toString()}`} replace />
+}
diff --git a/core/http/react-ui/src/pages/ModelEditor.jsx b/core/http/react-ui/src/pages/ModelEditor.jsx
index fddc3edfc..674dc13f2 100644
--- a/core/http/react-ui/src/pages/ModelEditor.jsx
+++ b/core/http/react-ui/src/pages/ModelEditor.jsx
@@ -332,8 +332,8 @@ export default function ModelEditor() {
         try {
           const parsed = YAML.parse(yamlText)
           if (parsed?.name) navigate(`/app/model-editor/${encodeURIComponent(parsed.name)}`, { replace: true, state: backState })
-          else navigate(backState ? backState.from : '/app/manage')
-        } catch { navigate(backState ? backState.from : '/app/manage') }
+          else navigate(backState ? backState.from : '/app/models?view=installed')
+        } catch { navigate(backState ? backState.from : '/app/models?view=installed') }
       } else {
         const response = await fetch(apiUrl(`/models/edit/${encodeURIComponent(name)}`), {
           method: 'POST',
@@ -426,7 +426,7 @@ export default function ModelEditor() {
 
   const backPage = isCreateMode && selectedTemplate ? t('actions.templates')
     : backState ? backState.fromLabel
-    : isCreateMode ? t('actions.models') : t('actions.system')
+    : t('actions.models')
 
   return (
     <FormContextProvider formData={values}>
@@ -445,7 +445,7 @@ export default function ModelEditor() {
           <button className="btn btn-secondary" onClick={() => {
             if (isCreateMode && selectedTemplate) { setSelectedTemplate(null); setValues({}); setActiveFieldPaths(new Set()) }
             else if (backState) navigate(backState.from)
-            else navigate(isCreateMode ? '/app/models' : '/app/manage')
+            else navigate(isCreateMode ? '/app/models' : '/app/models?view=installed')
           }}>
             <i className="fas fa-arrow-left" /> {t('actions.backTo', {page: backPage})}
           </button>
diff --git a/core/http/react-ui/src/pages/Models.jsx b/core/http/react-ui/src/pages/Models.jsx
index ea67429ba..3018e22e3 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, useSearchParams } from 'react-router-dom'
+import { Link, useNavigate, useOutletContext, useLocation, useSearchParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { fromState } from '../utils/editorNav'
 import { modelsApi } from '../utils/api'
@@ -9,14 +9,12 @@ import { useOperations } from '../hooks/useOperations'
 import { useResources } from '../hooks/useResources'
 import SearchableSelect from '../components/SearchableSelect'
 import PageHeader from '../components/PageHeader'
-import ConfirmDialog from '../components/ConfirmDialog'
 import GalleryLoader from '../components/GalleryLoader'
 import Toggle from '../components/Toggle'
 import RecommendedModels from '../components/RecommendedModels'
 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 InstalledModels, { ModelLifecycleDetailShell, modelUseCases } from './InstalledModels'
 import { formatBytes } from '../utils/format'
 import { ENTITY_GROUPS, groupForEntity } from '../utils/entityGroups'
 import { renderMarkdown, stripMarkdown } from '../utils/markdown'
@@ -109,6 +107,35 @@ const FILTER_SECTIONS = [
     keys: ['image', 'video', '3d'] },
 ]
 
+function ModelsLifecycleNav({ activeView, searchParams, t }) {
+  const hrefFor = view => {
+    const next = new URLSearchParams(searchParams)
+    if (view === 'installed') next.set('view', 'installed')
+    else next.delete('view')
+    const query = next.toString()
+    return `/app/models${query ? `?${query}` : ''}`
+  }
+
+  return (
+    <nav className="tabs mb-md" aria-label={t('lifecycle.navLabel')}>
+      <Link
+        className={`tab ${activeView === 'explore' ? 'tab-active' : ''}`}
+        to={hrefFor('explore')}
+        aria-current={activeView === 'explore' ? 'page' : undefined}
+      >
+        <i className="fas fa-compass" aria-hidden="true" /> {t('lifecycle.views.explore')}
+      </Link>
+      <Link
+        className={`tab ${activeView === 'installed' ? 'tab-active' : ''}`}
+        to={hrefFor('installed')}
+        aria-current={activeView === 'installed' ? 'page' : undefined}
+      >
+        <i className="fas fa-hard-drive" aria-hidden="true" /> {t('lifecycle.views.installed')}
+      </Link>
+    </nav>
+  )
+}
+
 export default function Models() {
   const { addToast } = useOutletContext()
   const navigate = useNavigate()
@@ -116,22 +143,28 @@ export default function Models() {
   const { t } = useTranslation('models')
   const { operations } = useOperations()
   const { resources } = useResources()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const activeView = searchParams.get('view') === 'installed' ? 'installed' : 'explore'
+  const installedState = ['running', 'idle', 'disabled', 'pinned', 'distributed'].includes(searchParams.get('state'))
+    ? searchParams.get('state')
+    : 'all'
   const [models, setModels] = useState([])
   const [loading, setLoading] = useState(true)
   const [page, setPage] = useState(1)
   const [totalPages, setTotalPages] = useState(1)
-  const [search, setSearch] = useState('')
+  const [search, setSearch] = useState(() => searchParams.get('q') || '')
   const [filters, setFilters] = useState([])
   const [sort, setSort] = useState('')
   const [order, setOrder] = useState('asc')
   const [installing, setInstalling] = useState(new Map())
+  const [installedProfiles, setInstalledProfiles] = useState({})
   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 urlSearch = searchParams.get('q') || ''
   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.
@@ -147,7 +180,6 @@ export default function Models() {
   // True once any listing has come back. Distinguishes a cold start, which has
   // nothing to keep on screen, from a refetch, which does.
   const loadedOnce = useRef(false)
-  const [confirmDialog, setConfirmDialog] = useState(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
@@ -253,6 +285,26 @@ export default function Models() {
     if (!loading) fetchModels()
   }, [operations.length])
 
+  // Gallery entries only say whether a model is installed. The capabilities
+  // endpoint is authoritative about what that installation can open, so the
+  // Explore detail uses it for a useful primary action without duplicating
+  // destructive lifecycle controls from Installed.
+  useEffect(() => {
+    if (activeView !== 'explore') return undefined
+    let cancelled = false
+    modelsApi.listCapabilities()
+      .then(data => {
+        if (cancelled) return
+        setInstalledProfiles(Object.fromEntries(
+          (data?.data || []).map(profile => [profile.id, profile])
+        ))
+      })
+      // A background refresh should not remove an action that was already
+      // resolved successfully earlier in this page session.
+      .catch(() => {})
+    return () => { cancelled = true }
+  }, [activeView, operations.length])
+
   const debouncedFetch = useDebouncedCallback((value) => {
     setPage(1)
     fetchModels({ search: value, page: 1 })
@@ -318,9 +370,28 @@ export default function Models() {
 
   const handleSearch = (value) => {
     setSearch(value)
+    setSearchParams(previous => {
+      const next = new URLSearchParams(previous)
+      if (value) next.set('q', value)
+      else next.delete('q')
+      return next
+    }, { replace: true })
     debouncedFetch(value)
   }
 
+  // Search is URL-owned. Popstate changes therefore update the controlled
+  // field and refetch the gallery instead of leaving the previous term on
+  // screen after Back or Forward.
+  useEffect(() => {
+    if (urlSearch === search) return
+    setSearch(urlSearch)
+    setPage(1)
+    debouncedFetch(urlSearch)
+    // debouncedFetch intentionally follows the URL value only. Depending on
+    // the callback itself would restart this effect whenever fetch state moves.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [urlSearch])
+
   const toggleFilter = (key) => {
     if (key === '') { setFilters([]); setPage(1); return }
     setFilters(prev =>
@@ -396,26 +467,6 @@ export default function Models() {
     }
   }
 
-  const handleDelete = (modelId) => {
-    setConfirmDialog({
-      title: t('deleteDialog.title'),
-      message: t('deleteDialog.message', { model: modelId }),
-      confirmLabel: t('deleteDialog.confirm', { model: modelId }),
-      danger: true,
-      onConfirm: async () => {
-        setConfirmDialog(null)
-        try {
-          await modelsApi.delete(modelId)
-          addToast(t('deleteDialog.deletingToast', { model: modelId }), 'info')
-          fetchModels()
-        } catch (err) {
-          addToast(t('errors.deleteFailed', { message: err.message }), 'error')
-        }
-      },
-    })
-    return
-  }
-
   // Clear local installing flags when operations finish (success or error)
   useEffect(() => {
     if (installing.size === 0) return
@@ -512,12 +563,61 @@ export default function Models() {
     setExpandedFiles(false)
   }, [setSearchParams])
 
+  const setInstalledQuery = useCallback(value => {
+    setSearchParams(previous => {
+      const next = new URLSearchParams(previous)
+      // `all` is a valid search term. Only an empty string clears q.
+      if (value) next.set('q', value)
+      else next.delete('q')
+      return next
+    }, { replace: true })
+  }, [setSearchParams])
+
+  const setInstalledState = useCallback(value => {
+    setSearchParams(previous => {
+      const next = new URLSearchParams(previous)
+      // State alone reserves `all` as its default sentinel. q and model may
+      // both name a literal installed model called "all".
+      if (value && value !== 'all') next.set('state', value)
+      else next.delete('state')
+      return next
+    })
+  }, [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])
 
+  if (activeView === 'installed') {
+    return (
+      <div className="page page--wide page--app">
+        <div className="view-bar">
+          <h1 className="view-bar__title">{t('lifecycle.title')}</h1>
+          <div className="view-bar__actions">
+            <button className="btn btn-secondary btn-sm" onClick={() => navigate('/app/model-editor', { state: fromState(location, t('lifecycle.title')) })}>
+              <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>
+        <ModelsLifecycleNav activeView={activeView} searchParams={searchParams} t={t} />
+        <InstalledModels
+          addToast={addToast}
+          query={urlSearch}
+          state={installedState}
+          selectedName={selectedName}
+          onQueryChange={setInstalledQuery}
+          onStateChange={setInstalledState}
+          onSelect={selectModel}
+        />
+      </div>
+    )
+  }
+
   return (
     <div className="page page--wide page--app">
       {/* Title only. The two counts used to live here as well, which meant the
@@ -526,7 +626,7 @@ export default function Models() {
           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>
+        <h1 className="view-bar__title">{t('lifecycle.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')) })}>
@@ -538,6 +638,8 @@ export default function Models() {
         </div>
       </div>
 
+      <ModelsLifecycleNav activeView={activeView} searchParams={searchParams} t={t} />
+
       {/* Filters, in three deliberate bands.
           1. Query scope: free-text search plus the backend select. The backend
              select leads the taxonomy row rather than trailing it because
@@ -766,7 +868,14 @@ export default function Models() {
                 installing={isInstalling(selectedName)}
                 progress={getOperationProgress(selectedName)}
                 onInstall={handleInstall}
-                onDelete={handleDelete}
+                installedProfile={installedProfiles[selectedName]}
+                onOpen={route => navigate(route)}
+                onManage={name => setSearchParams(previous => {
+                  const next = new URLSearchParams(previous)
+                  next.set('view', 'installed')
+                  next.set('model', name)
+                  return next
+                })}
                 onBack={() => selectModel(null)}
                 expandedFiles={expandedFiles}
                 setExpandedFiles={setExpandedFiles}
@@ -832,15 +941,6 @@ export default function Models() {
         />
       )}
 
-      <ConfirmDialog
-        open={!!confirmDialog}
-        title={confirmDialog?.title}
-        message={confirmDialog?.message}
-        confirmLabel={confirmDialog?.confirmLabel}
-        danger={confirmDialog?.danger}
-        onConfirm={confirmDialog?.onConfirm}
-        onCancel={() => setConfirmDialog(null)}
-      />
     </div>
   )
 }
@@ -1162,7 +1262,7 @@ function ModelDetail({ model, fit, sizeDisplay, vramDisplay, expandedFiles, setE
 
 // 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
+// is what lets Models and Backends reuse the same component without two
 // slightly different rails growing out of it.
 //
 // The rail line gets exactly one fact beyond the name, and it is spent on
@@ -1314,7 +1414,7 @@ function VramByContext({ estimate, contextSize, onPickContext, totalGpuMemory, t
 // entry's fields and is shared with the per-variant panel.
 function DiscoverDetail({
   model, estimate, contextSize, onPickContext, totalGpuMemory, fitsGpu,
-  installing, progress, onInstall, onDelete, onBack,
+  installing, progress, onInstall, installedProfile, onOpen, onManage, onBack,
   expandedFiles, setExpandedFiles, variantData, variantDetails, onLoadVariantDetail, t,
 }) {
   const name = model.name || model.id
@@ -1323,19 +1423,19 @@ function DiscoverDetail({
   const fit = fitsGpu(vramBytes)
   const contextLabel = CONTEXT_LABELS[CONTEXT_SIZES.indexOf(contextSize)]
   const headroom = totalGpuMemory > 0 && vramBytes ? totalGpuMemory * 0.95 - vramBytes : null
+  const openUseCase = modelUseCases(installedProfile).find(useCase => useCase.route)
 
   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={
+    <ModelLifecycleDetailShell
+      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">
@@ -1352,11 +1452,14 @@ function DiscoverDetail({
             </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')}
+              {openUseCase && (
+                <button className="btn btn-primary btn-sm" onClick={() => onOpen(openUseCase.route(name))}>
+                  <i className="fas fa-arrow-up-right-from-square" aria-hidden="true" />
+                  {t('lifecycle.actions.open', { useCase: t(`lifecycle.open.${openUseCase.labelKey}`) })}
+                </button>
+              )}
+              <button className="btn btn-secondary btn-sm" onClick={() => onManage(name)}>
+                <i className="fas fa-sliders" aria-hidden="true" /> {t('lifecycle.actions.manageInstallation')}
               </button>
             </>
           ) : (
@@ -1364,20 +1467,17 @@ function DiscoverDetail({
               <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',
-          },
-        ]}
-      />
+      }
+      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}
@@ -1402,6 +1502,6 @@ function DiscoverDetail({
         nested
         t={t}
       />
-    </div>
+    </ModelLifecycleDetailShell>
   )
 }
diff --git a/core/http/react-ui/src/pages/OperateOverview.jsx b/core/http/react-ui/src/pages/OperateOverview.jsx
index 446684382..6c5d99137 100644
--- a/core/http/react-ui/src/pages/OperateOverview.jsx
+++ b/core/http/react-ui/src/pages/OperateOverview.jsx
@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import PageHeader from '../components/PageHeader'
+import { ResourceMonitorView } from '../components/ResourceMonitor'
 import Sparkline from '../components/Sparkline'
 import { useOperateSummary } from '../contexts/OperateSummaryContext'
 import { staggerStyle } from '../hooks/useStagger'
@@ -77,6 +78,29 @@ export default function OperateOverview() {
         <p className="operate-clear operate-headline__note">{t('operate.overview.headline.quiet')}</p>
       )}
 
+      <section>
+        <ResourceMonitorView
+          resources={summary?.resources}
+          loading={summary?.resourcesLoading}
+          unavailable={summary?.resourcesUnavailable}
+          title={t('operate.overview.capacity.title')}
+          loadingText={t('operate.overview.capacity.loading')}
+          unavailableText={t('operate.overview.capacity.unavailable')}
+          emptyText={t('operate.overview.capacity.empty')}
+          copy={{
+            gpuCount: count => t('operate.overview.capacity.gpus', { count }),
+            reclaimer: t('operate.overview.capacity.reclaimer'),
+            used: t('operate.overview.capacity.used'),
+            total: t('operate.overview.capacity.total'),
+            systemRam: t('operate.overview.capacity.systemRam'),
+            memory: t('operate.overview.capacity.memory'),
+            totalVram: t('operate.overview.capacity.totalVram'),
+            storage: t('operate.overview.capacity.storage'),
+          }}
+          testId="operate-capacity"
+        />
+      </section>
+
       <section>
         <div className="lane-head"><h2>{t('operate.overview.attention.heading')}</h2></div>
         {attention.length === 0 ? (
@@ -142,7 +166,7 @@ export default function OperateOverview() {
           />
           <OperateSection
             index={3}
-            to="/app/manage"
+            to="/app/settings"
             label={t('operate.overview.sections.administration')}
             summary={t('operate.overview.sections.administrationSummary', {
               memory: summary?.signals?.host || '—',
diff --git a/core/http/react-ui/src/router.jsx b/core/http/react-ui/src/router.jsx
index 15e4f918f..fd9b3d730 100644
--- a/core/http/react-ui/src/router.jsx
+++ b/core/http/react-ui/src/router.jsx
@@ -35,7 +35,7 @@ export function preloadRoute(path) {
 const Home = page('', () => import('./pages/Home'))
 const Chat = page('chat', () => import('./pages/Chat'))
 const Models = page('models', () => import('./pages/Models'))
-const Manage = page('manage', () => import('./pages/Manage'))
+const ManageRedirect = page('manage', () => import('./pages/ManageRedirect'))
 const ImageGen = page('image', () => import('./pages/ImageGen'))
 const VideoGen = page('video', () => import('./pages/VideoGen'))
 const ThreeDGen = page('3d', () => import('./pages/ThreeDGen'))
@@ -179,12 +179,12 @@ const appChildren = [
       { path: 'usage', element: <Usage /> },
       { path: 'users', element: <RequireAuthEnabled><Admin><Users /></Admin></RequireAuthEnabled> },
       { path: 'middleware', element: <Admin><Middleware /></Admin> },
-      { path: 'manage', element: <Admin><Manage /></Admin> },
     ],
   },
 
-  // Model gallery (Discover) — top-level destination, full-width.
+  // Canonical resource pages and legacy management compatibility.
   { path: 'models', element: <Admin><Models /></Admin> },
+  { path: 'manage', element: <Admin><ManageRedirect /></Admin> },
   { path: 'voice-library/new', element: <Admin><VoiceProfileCreate /></Admin> },
   { path: 'model-editor', element: <Admin><ModelEditor /></Admin> },
   { path: 'model-editor/:name', element: <Admin><ModelEditor /></Admin> },
diff --git a/core/http/react-ui/src/utils/entityGroups.js b/core/http/react-ui/src/utils/entityGroups.js
index e89e9d0f7..9eb523ce6 100644
--- a/core/http/react-ui/src/utils/entityGroups.js
+++ b/core/http/react-ui/src/utils/entityGroups.js
@@ -1,4 +1,4 @@
-// Grouping for the rails on Discover and Backends.
+// Grouping for the rails on Models Explore and Backends Catalog.
 //
 // The gallery does not tag entries with the use-case keys the filter chips
 // send. Those keys (`chat`, `tts`, `transcript`, …) are a server-side
diff --git a/core/http/react-ui/src/utils/section.js b/core/http/react-ui/src/utils/section.js
index 35ddf75c9..19777d371 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, Discover, Account, ...) has no eyebrow.
+// top-level page (Home, Models, 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/core/http/react-ui/vite.config.js b/core/http/react-ui/vite.config.js
index 094800066..653a1299e 100644
--- a/core/http/react-ui/vite.config.js
+++ b/core/http/react-ui/vite.config.js
@@ -42,6 +42,7 @@ export default defineConfig({
   // core/http/app.go), so both proxied and root deployments load correctly.
   base: './',
   server: {
+    host: '0.0.0.0',
     port: 3000,
     proxy: {
       '/api': backendUrl,
diff --git a/docs/content/features/authentication.md b/docs/content/features/authentication.md
index dd8f34c71..c2b0b3f52 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**: Discover, Agents section (Agents, Skills, Memory, MCP CI Jobs), System section (Backends, Traces, Swarm, System, Settings)
+- **Admins also see**: Models, the Build console (Agents, Skills, Memory, Jobs, Training, Recognition), and the Operate console (Backends, Activity, Nodes, Usage, Traces, Users, Middleware, 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/features/backends.md b/docs/content/features/backends.md
index 4aebf97ac..7d2ec66a4 100644
--- a/docs/content/features/backends.md
+++ b/docs/content/features/backends.md
@@ -16,26 +16,32 @@ For the complete list of backends, the model families they support, and their ac
 
 ## Managing Backends in the UI
 
-The LocalAI web interface provides an intuitive way to manage your backends:
+The **Operate → Backends** page is the canonical home for the complete backend
+lifecycle:
 
-1. Navigate to the "Backends" section in the navigation menu
-2. Browse available backends from configured galleries
-3. Use the search bar to find specific backends by name, description, or type
-4. Filter backends by type using the quick filter buttons (LLM, Diffusion, TTS, Whisper)
-5. Install or delete backends with a single click
-6. Monitor installation progress in real-time
+1. **Catalog** browses configured galleries, searches by name or description,
+   filters by capability, and installs a backend. Catalog is the default view.
+2. **Installed** shows the runtimes present on the host or cluster. Search and
+   filter by user, system, update, or offline-node state, then select a backend
+   to inspect its version, source, node placement, and lifecycle actions.
+3. Variant and development builds remain opt-in refinements. Target-node links
+   compose with the current view and selection instead of opening a separate
+   management page.
+
+The current view, search, filter, selected backend, and target node are stored
+in the URL. Browser Back and shared links therefore restore the same state.
 
 Installs run in the background. The strip at the top of the app follows the
 current one, and **Operate → Activity** lists everything in flight, what needs
 attention, and what has finished, and is where a running install is cancelled
 or a failed one retried. See [Activity]({{% relref "operations/activity" %}}).
 
-Each backend card displays:
+Each selected backend displays:
 - Backend name and description
 - Type of models it supports
 - Installation status
-- Action buttons (Install/Delete)
-- Additional information via the info button
+- Install, reinstall, upgrade, or delete actions as appropriate
+- Version, source, digest, placement, and catalog information
 
 ## Backend Galleries
 
diff --git a/docs/content/features/model-gallery.md b/docs/content/features/model-gallery.md
index 9f54b720b..b8cf63898 100644
--- a/docs/content/features/model-gallery.md
+++ b/docs/content/features/model-gallery.md
@@ -29,7 +29,19 @@ GPT and text generation models might have a license which is not permissive for
 
 ## How it works
 
-Navigate the WebUI interface in the "Models" section from the navbar at the top. Here you can find a list of models that can be installed, and you can install them by clicking the "Install" button.
+Open **Models** in the WebUI. It is the canonical page for a model's complete
+lifecycle and has two views:
+
+- **Explore** browses configured galleries, compares hardware fit and variants,
+  and installs models. This is the default view.
+- **Installed** lists local model configurations and their running, idle,
+  disabled, pinned, and distributed state. Select a model to load or stop it,
+  edit its configuration, open a supported use case, inspect backend logs, or
+  remove it.
+
+Both views use the same model selection and store the view, search, filter, and
+selection in the URL. Installing from Explore does not move you away from the
+catalog; the entry updates in place when the operation finishes.
 
 ## VRAM and download size estimates
 
diff --git a/docs/content/getting-started/models.md b/docs/content/getting-started/models.md
index e78ac00a9..b34440079 100644
--- a/docs/content/getting-started/models.md
+++ b/docs/content/getting-started/models.md
@@ -22,8 +22,8 @@ The Model Gallery is the simplest way to install models. It provides pre-configu
 ### Via WebUI
 
 1. Open the LocalAI WebUI at `http://localhost:8080`
-2. Navigate to the "Models" tab
-3. Browse available models
+2. Navigate to **Models → Explore**
+3. Browse or search the available models
 4. Click "Install" on any model you want
 5. Wait for installation to complete. Progress appears in the strip at the top
    of the app, and **Operate → Activity** shows every install in flight, plus
@@ -31,6 +31,13 @@ The Model Gallery is the simplest way to install models. It provides pre-configu
 
 For more details, refer to the [Gallery Documentation]({{% relref "features/model-gallery" %}}).
 
+The same Models page owns the complete lifecycle. Switch to **Installed** to
+search local configurations, filter them by running, idle, disabled, pinned,
+or distributed state, and open a model's runtime controls. Load, stop, edit,
+pin, disable, inspect backend logs, and remove actions stay with the selected
+model. The current view, search, filter, and selection are stored in the URL so
+links and browser history preserve your place.
+
 ### Via CLI
 
 ```bash
diff --git a/docs/content/getting-started/quickstart.md b/docs/content/getting-started/quickstart.md
index 0108a23d0..207780ef6 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 (Discover page)
+- **Explore, install, and manage models** from the Models page
 - **Generate images**, audio, and more
 - **Create and manage AI agents** with MCP tool support
 - **Monitor system resources** and loaded models
@@ -60,7 +60,7 @@ Open **http://localhost:8080** in your browser. The web interface lets you:
 
 To get your first chat working:
 
-1. Open the **Models** page and search for `qwen3-4b`. Click **Install** on the `qwen3-4b` entry and wait for the download to finish. (`qwen3-4b` is a small, CPU-friendly Qwen3 model that also supports tool calling, so you can reuse it later in the [Build your first agent]({{% relref "getting-started/first-agent" %}}) walkthrough.)
+1. Open **Models → Explore** and search for `qwen3-4b`. Click **Install** on the `qwen3-4b` entry and wait for the download to finish. (`qwen3-4b` is a small, CPU-friendly Qwen3 model that also supports tool calling, so you can reuse it later in the [Build your first agent]({{% relref "getting-started/first-agent" %}}) walkthrough.)
 2. Open the **Chat** page, select `qwen3-4b` from the model dropdown, type a message, and send it. You should get a reply within a few seconds.
 
 To correct an earlier prompt or response without running the model again, hover
diff --git a/docs/content/operations/overview.md b/docs/content/operations/overview.md
index 05fe6e8bb..ff92475db 100644
--- a/docs/content/operations/overview.md
+++ b/docs/content/operations/overview.md
@@ -48,12 +48,29 @@ The endpoint exists so a dashboard wanting three numbers does not fetch the
 whole trace list to count it. An installation that has served nothing yet says
 so rather than showing three zeroes dressed as telemetry.
 
+## Host capacity
+
+The overview also shows the host's current RAM or GPU capacity, utilization,
+and model storage. Loading, unavailable, and empty states are explicit. This
+uses the same 15-second Operate summary poll as the rail and attention data, so
+opening the overview does not start a second resource poller.
+
+Models and backends no longer live under a nested Host page. Use **Models →
+Installed** for model runtime and configuration actions, and **Operate →
+Backends → Installed** for installed backend actions. The overview links into
+the canonical Operate sections rather than duplicating those inventories.
+
+Old `/app/manage` bookmarks remain supported. They redirect with replace
+semantics to the matching Installed Models or Installed Backends view while
+preserving legacy search, filter, selection, variant, and development flags.
+
 ## The rail
 
-The Operate rail groups its thirteen destinations under four headings —
+The Operate rail groups its destinations under four headings —
 Runtime, Cluster, Observability and Administration — and shows a live value
 beside several of them: pending backend updates, running operations, healthy
-node count, host memory, request volume and error count.
+node count, request volume and error count. Host capacity lives on the overview
+instead of appearing as a separate destination.
 
 Those values are **orientation, not an alarm**. The rail only exists on Operate
 routes and can be collapsed, so anything urgent also appears in Needs attention