{modelNode}
@@ -506,6 +513,53 @@ function SlotCards({ rows, full, models, busyName, handlers }) {
)
}
+// Utility tier — compact mini cards for the support slots (embed / rerank /
+// voice). No meta row, no model picker: just the dot + name + port header and
+// a minimal model + Start/Stop/Restart control cluster (SlotControls compact).
+function MiniCard({ s, ind, busy, handlers }) {
+ const dot = dotCls(ind)
+ const ph = slotCtrlPhase(s)
+ return (
+
+
+
+ {s.name}
+ {s.port ? ':' + s.port : ''}
+
+
+
+ {s.model || '—'}
+
+ handlers.onStart(s)}
+ onStop={() => handlers.onStop(s)}
+ onRestart={() => handlers.onRestart(s)}
+ />
+
+
+ )
+}
+
+function MiniCards({ rows, busyName, handlers }) {
+ if (!rows.length) return null
+ return (
+
+ {rows.map(({ s, ind }) => (
+
+ ))}
+
+ )
+}
+
// Page-level hero band — the iGPU GTT memory map + combined-throughput tile,
// lifted out of the Inference engine shell so it sits at the very top of the
// Slots page (above the Inference ⇄ Image Gen tabs) and stays visible across
@@ -576,6 +630,14 @@ export function InferencePane() {
const servingN = rows.filter((r) => r.ind.cls === 'serving').length
const loadedN = rows.filter((r) => isSlotLive(r.s)).length
+ // Tier split — headline = the conversational LLM slots (chat / agent groups);
+ // utility = the support slots (embed / rerank / voice). Keyed off slot.group
+ // so the split tracks the backend's own grouping; voice covers tts/stt too.
+ // This pane is always expanded (no accordion), so the utility tier shows ALL
+ // its slots; the live count drives the SubLabel note.
+ const headlineRows = rows.filter((r) => !isUtilGroup(r.s.group))
+ const utilRows = rows.filter((r) => isUtilGroup(r.s.group))
+
const gpuN = slots.filter((s) => {
const k = devKind(s.device)
return k === 'rocm' || k === 'vulkan'
@@ -677,17 +739,35 @@ export function InferencePane() {
in the page-level InferenceHeroBand above the tabs. */}
-
- slots
+
+ chat · agent
+ {utilRows.length > 0 && (
+
+
+ utility · embed · rerank · voice
+
+
+
+ )}
{servingN} serving
{gttCapGb > 0 ? ` · ${gttFreeGb} GB free` : ''}
diff --git a/ui/tests/e2e/specs/inference-pane-v3.spec.ts b/ui/tests/e2e/specs/inference-pane-v3.spec.ts
index 7b196d7e..d9f0190d 100644
--- a/ui/tests/e2e/specs/inference-pane-v3.spec.ts
+++ b/ui/tests/e2e/specs/inference-pane-v3.spec.ts
@@ -41,13 +41,16 @@ test.describe('Inference engine pane (/slots · Inference tab)', () => {
// engine pane: state pill summarises serving/loaded counts (primary serving).
await expect(pane(page)).toBeVisible()
await expect(page.getByTestId('infer-epill')).toContainText('serving')
- // every slot renders as a FULL card now (no accordion); the serving primary
- // card's status pill carries the live tok/s (45 in the seed).
+ // headline (chat · agent) slots render as FULL cards. The status pill is
+ // gone — the header now shows the slot PORT (mono, pushed right); readiness
+ // is the dot, and tok/s lives in the meta row.
await expect(body(page).locator('.scards.full')).toHaveCount(1)
const card = body(page).getByTestId('infer-slot-primary')
await expect(card).toBeVisible()
await expect(card).toHaveClass(/\bscard\b/)
- await expect(card.locator('.spill')).toContainText('45 tok/s')
+ // serving primary → yellow serving dot + the port (:8092 in the seed).
+ await expect(card.locator('.scard-h .sdot')).toHaveClass(/\bserving\b/)
+ await expect(card.locator('.scard-h .sport')).toContainText(':8092')
})
test('profile pill surfaces the runtime profile name (slot.profile)', async ({ page }) => {