diff --git a/ui/src/api/hooks/useSlots.ts b/ui/src/api/hooks/useSlots.ts index db336461..961e5752 100644 --- a/ui/src/api/hooks/useSlots.ts +++ b/ui/src/api/hooks/useSlots.ts @@ -99,6 +99,29 @@ export interface Slot { * true and never recomputes it from device strings. */ backend_mismatch?: boolean + // ── Container runtime fields (#657) ───────────────────────────────── + /** Slot runtime engine: "lemonade" (default) or "container". Container + * slots dispatch through ContainerProvider (podman/docker systemd unit) + * instead of Lemonade. */ + runtime?: 'lemonade' | 'container' + /** Profile name from /etc/hal0/profiles.toml. Container slots use a + * profile to supply the container image + bench-tuned flags. */ + profile?: string | null + /** Container image ref (from the resolved profile). E.g. + * "ghcr.io/hal0ai/amd-strix-halo-toolboxes:rocm-7.2.4-rocmfp4-server". */ + image?: string | null + /** Container image availability: "present" | "pulling" | "missing". + * Populated by the backend when image_status is tracked. */ + image_status?: 'present' | 'pulling' | 'missing' | null + /** Container unit state: "running" | "stopped" | "starting" | "crashed". + * Set by _container_state_enrichment() in /api/slots. Absent for + * Lemonade slots. */ + container_status?: 'running' | 'stopped' | 'starting' | 'crashed' | null + /** True when the container unit is active AND /health returns ok. + * False when stopped, starting (health probe not yet passing), or crashed. + * Absent for Lemonade slots. */ + container_health?: boolean | null + // ── Synthetic upstream-backed entries ─────────────────────────────── // /api/slots merges real lifecycle-managed slots with synthetic // entries (slots.py → _synthesize_slots_from_upstreams) that represent @@ -212,6 +235,18 @@ function normalizeSlot(s: any): Slot { // entries in the union may omit the flag, so default it here rather than // letting the card read undefined as "disabled". enabled: s?.enabled !== false, + // Container runtime fields (#657). Pass through verbatim; absent keys + // surface as null/undefined so the card can safely branch on runtime. + runtime: s?.runtime ?? 'lemonade', + profile: s?.profile ?? null, + // image/image_status may come from profile resolution (backend TBD) or + // be omitted; null means "unknown — don't show image chip". + image: s?.image ?? null, + image_status: s?.image_status ?? null, + // container_status / container_health are set by _container_state_enrichment. + // Absent for Lemonade slots; null here keeps the type honest. + container_status: s?.container_status ?? null, + container_health: s?.container_health ?? null, } } diff --git a/ui/src/dash/memory-map.jsx b/ui/src/dash/memory-map.jsx index de6b6bfd..ea0a8125 100644 --- a/ui/src/dash/memory-map.jsx +++ b/ui/src/dash/memory-map.jsx @@ -11,8 +11,7 @@ import { useSlots } from '@/api/hooks/useSlots' import { useHardware } from '@/api/hooks/useHardware' import { useStatsHardware } from '@/api/hooks/useStatsHardware' import { useProxmoxSettings } from '@/api/hooks/useProxmoxSettings' - -const LIVE_STATES = new Set(['ready', 'serving', 'idle', 'warming']) +import { isSlotLive } from './slot-status.js' const SAFETY_MARGIN_GB = 2 const MB_PER_GB = 1024 @@ -149,7 +148,10 @@ export function useMemoryMapModel() { ) const npuModelGb = mbToGb(stats.data?.npu_status?.model_mb || 0) - const liveSlots = slots.filter((s) => LIVE_STATES.has((s.state || '').toLowerCase())) + // N1 (slot-status unifier): isSlotLive() handles both lemond (state-string) + // and container (container_status + container_health) runtimes. Replaces + // the old static LIVE_STATES set membership test. + const liveSlots = slots.filter((s) => isSlotLive(s)) // Prefer the BE-METRICS `mem_mb` contract (real per-slot resident // model + KV memory). Fall back to the legacy GTT-split / NPU-divide diff --git a/ui/src/dash/slot-modals.jsx b/ui/src/dash/slot-modals.jsx index 37761b16..098a5063 100644 --- a/ui/src/dash/slot-modals.jsx +++ b/ui/src/dash/slot-modals.jsx @@ -15,6 +15,7 @@ import { useHardware } from '@/api/hooks/useHardware' import { useBackends } from '@/api/hooks/useBackends' import { useModels } from '@/api/hooks/useModels' import { ENDPOINTS } from '@/api/endpoints' +import { stateChipClassForSlot } from './slot-status.js' // Full static device list — shown as fallback when /api/backends hasn't // loaded yet or returns empty. Never render an empty device dropdown. @@ -36,12 +37,32 @@ const { useState: useStateSM, useEffect: useEffectSM, useRef: useRefSM } = React // Map a slot lifecycle state to a chip color class. // online/ready/serving → green (ok); starting → amber (warn); // error → red (err); offline/empty/anything else → neutral grey (base chip). -function stateChipClass(state) { - const s = String(state || "").toLowerCase(); - if (["ready", "online", "loaded", "serving", "running"].includes(s)) return "chip ok"; - if (["starting", "loading", "pending", "stopping"].includes(s)) return "chip warn"; - if (["error", "failed", "broken"].includes(s)) return "chip err"; - return "chip"; // offline / empty / unconfigured → neutral grey +// +// N1: accepts either a state string (lemond path, unchanged) or a full slot +// object. When given a slot object, delegates to stateChipClassForSlot() +// from slot-status.js which handles container runtime correctly via +// slotPhase(). The primitive string overload is kept for call sites that +// only have the state string — its behaviour is unchanged. +function stateChipClass(stateOrSlot) { + // Duck-type: if it's a string, keep original behaviour (lemond path). + if (typeof stateOrSlot === "string" || stateOrSlot == null) { + // STRING path = lemond, byte-identical to origin/main. Do NOT add + // warming/pulling/crashed here — that recolored lemond state strips + // (e.g. state="warming" must stay grey at the EditSlotDrawer strip). + // Container chips route through the slot-OBJECT overload only. + const s = String(stateOrSlot || "").toLowerCase(); + if (["ready", "online", "loaded", "serving", "running"].includes(s)) return "chip ok"; + if (["starting", "loading", "pending", "stopping"].includes(s)) return "chip warn"; + if (["error", "failed", "broken"].includes(s)) return "chip err"; + return "chip"; // offline / warming / empty / unconfigured → neutral grey + } + // Full slot object: delegate to the shared N1 helper. + // stateChipClassForSlot returns null for lemond slots (sentinel), + // in which case we fall back to the original string-based path. + const slot = stateOrSlot; + const fromPhase = stateChipClassForSlot(slot); + if (fromPhase !== null) return fromPhase; + return stateChipClass(slot.state); } // Map /api/models registry rows → the shape this file's swap popover and @@ -869,6 +890,8 @@ function InlineSwapPopover({ slot, open, onClose, onPick }) { const modelsQuery = useModels(); const hwQuery = useHardware(); if (!open) return null; + + const isContainer = slot.runtime === "container"; const ramFreeGb = hwQuery.data?.ram?.free ?? 0; const compatible = (modelsQuery.data ?? []) .map(normalizeApiModel) @@ -878,9 +901,40 @@ function InlineSwapPopover({ slot, open, onClose, onPick }) { // don't offer them when swapping a non-rocm slot. !(Array.isArray(m.tags) && m.tags.includes("rocmfp4") && slot.backend !== "rocm") ); + + // N2: container swap = cold systemctl restart (NOT lemond hot /v1/load). + // Intercept onPick for container slots: show a confirm toast and fire + // the same onPick (which drives restart), so the parent card drives to + // "starting" state immediately. The parent's onSwapPick calls useSlotSwap + // which triggers a restart for container slots server-side. + const handlePick = (m) => { + if (isContainer) { + const name = slot.name; + const label = m.longName || m.id; + window.__hal0Toast && window.__hal0Toast( + `Restarting ${name} to load ${label} — ~model-load seconds`, + "info" + ); + } + onPick(m); + onClose(); + }; + return (
e.stopPropagation()}> -
Swap model · type {slot.type}
+ {/* N2: container cold-restart notice in popover header */} +
+ Swap model · type {slot.type} + {isContainer && ( + + · cold restart + + )} +
{compatible.map(m => { const isCur = slot.model_id === m.id; const fits = ramFreeGb > parseSizeGB(m.size); @@ -892,7 +946,7 @@ function InlineSwapPopover({ slot, open, onClose, onPick }) {
{ onPick(m); onClose(); }} + onClick={() => handlePick(m)} >
{m.longName} @@ -904,7 +958,7 @@ function InlineSwapPopover({ slot, open, onClose, onPick }) { type="button" className="swap-arrow" aria-label={`Load ${m.longName || m.id}`} - onClick={e => { e.stopPropagation(); onPick(m); onClose(); }} + onClick={e => { e.stopPropagation(); handlePick(m); }} >{Icons.chevR}
); diff --git a/ui/src/dash/slot-status.js b/ui/src/dash/slot-status.js new file mode 100644 index 00000000..f3a3c7ba --- /dev/null +++ b/ui/src/dash/slot-status.js @@ -0,0 +1,287 @@ +// slot-status.js — runtime-aware slot phase classifier (N1 unification). +// +// Single source of truth for the status vocabulary shared across: +// • slotIndicator (slots.jsx) → {cls, label, tooltip} +// • stateChipClass (slot-modals.jsx) → "chip ok|warn|err|" +// • LIVE_STATES (memory-map.jsx) → isLive boolean +// • phase logic (slots.jsx) → off|running|transitional button selector +// +// Phase vocabulary (both runtimes project into this): +// missing — slot defined but no image / model present yet +// pulling — image layer pull (container) or model download in progress +// starting — container systemd unit active but /health not yet ok; +// or lemonade slot warming up (warming/starting) +// serving — actively processing an in-flight request (GREEN) +// ready — model/container healthy, waiting for a prompt (YELLOW) +// idle — lemonade-evicted; hot-reload on next request (GREY) +// stopped — container or slot cleanly offline (GREY) +// crashed — error / failed unit (RED) +// +// Colour rule: +// GREEN = processing (serving) — actively doing work RIGHT NOW +// YELLOW = resident / ready — model in VRAM / container healthy, awaiting prompt +// GREY = not loaded — disabled, stopped, idle, offline +// RED = error / crashed +// AMBER = transitional — pulling / starting / unloading +// +// Both runtimes use the same phase enum; callers project it to their own +// output vocab via the thin helpers below. Adding a new runtime means +// extending slotPhase() only — no changes to the four callers. + +const RECENTLY_LIVE_MS = 60 * 60 * 1000; // 1h stuck-SERVING threshold + +/** + * Derive a unified phase from a slot snapshot. + * + * @param {object} slot - normalised slot dict from /api/slots + * @param {number} [now] - epoch ms (injectable for tests) + * @returns {{ phase: string, isLive: boolean, isCold: boolean }} + * phase — one of: missing|pulling|starting|serving|ready|idle|stopped|crashed + * isLive — heuristic "holds memory" flag for the dot vocabulary. NOTE: + * this is NOT the memory-map attribution test — it folds in + * enabled + lemonade_state and so DIVERGES from the legacy + * LIVE_STATES set for lemond slots. Memory-map MUST use + * isSlotLive() (below), which preserves LIVE_STATES exactly. + * isCold — true for container slots (model swap = systemctl restart, not hot-swap) + */ +// Detect whether a slot is a container runtime. +// Primary signal: runtime="container" (from TOML / normalizeSlot). +// Fallback: container_status present (backend always emits this for container +// slots even when as_dict() doesn't yet include the `runtime` field). +// Tracked: #658 (add runtime/image/profile to slot serialisation). +function _isContainer(slot) { + return String(slot?.runtime || "") === "container" || slot?.container_status != null; +} + +export function slotPhase(slot, now = Date.now()) { + const enabled = slot?.enabled !== false; + const isContainer = _isContainer(slot); + + // Disabled overrides everything. + if (!enabled) { + return { phase: "stopped", isLive: false, isCold: isContainer }; + } + + if (isContainer) { + return _containerPhase(slot, now); + } + return _lemondPhase(slot, now); +} + +function _containerPhase(slot, now) { + const cs = String(slot?.container_status || "stopped"); + const health = !!slot?.container_health; + const state = String(slot?.state || "offline"); + + // lemonade_state="disabled" means the SLOT is disabled — but the enabled + // check above already handles that. Container slots can also carry a top-level + // slot state value from the enrichment's `state` mirror. + if (state === "error") { + return { phase: "crashed", isLive: false, isCold: true }; + } + if (cs === "crashed") { + return { phase: "crashed", isLive: false, isCold: true }; + } + if (cs === "pulling") { + return { phase: "pulling", isLive: false, isCold: true }; + } + if (cs === "starting" || (cs === "running" && !health)) { + return { phase: "starting", isLive: false, isCold: true }; + } + if (cs === "running" && health) { + // Is it actively serving? Check last_used_at recency. + const lastUsedMs = typeof slot?.last_used_at === "number" + ? slot.last_used_at * 1000 : null; + const deltaMs = lastUsedMs != null ? now - lastUsedMs : null; + const recentlyServing = + state === "serving" && (deltaMs == null || deltaMs <= RECENTLY_LIVE_MS); + if (recentlyServing) { + return { phase: "serving", isLive: true, isCold: true }; + } + return { phase: "ready", isLive: true, isCold: true }; + } + // stopped or unknown + return { phase: "stopped", isLive: false, isCold: true }; +} + +function _lemondPhase(slot, now) { + const state = String(slot?.state || "offline"); + const lemo = String(slot?.lemonade_state || ""); + const lastUsedMs = typeof slot?.last_used_at === "number" + ? slot.last_used_at * 1000 : null; + const deltaMs = lastUsedMs != null ? now - lastUsedMs : null; + + if (state === "error") { + return { phase: "crashed", isLive: false, isCold: false }; + } + if (lemo === "disabled") { + return { phase: "stopped", isLive: false, isCold: false }; + } + if (state === "pulling") { + return { phase: "pulling", isLive: false, isCold: false }; + } + if (state === "warming" || state === "starting" || state === "unloading") { + return { phase: "starting", isLive: false, isCold: false }; + } + if (state === "serving") { + const stuck = deltaMs != null && deltaMs > RECENTLY_LIVE_MS; + if (stuck) return { phase: "ready", isLive: true, isCold: false }; // hung guard → yellow + return { phase: "serving", isLive: true, isCold: false }; + } + if (lemo === "loaded" || lemo === "ready" || state === "ready") { + return { phase: "ready", isLive: true, isCold: false }; + } + if (lemo === "idle" || state === "idle") { + return { phase: "idle", isLive: false, isCold: false }; + } + return { phase: "stopped", isLive: false, isCold: false }; +} + +// ─── Thin projections consumed by each existing classifier ─────────────── +// +// These replace the independent classification logic in the four sites. +// Each output format is IDENTICAL to what was there before for lemonade +// slots; we only add the container branch. + +/** + * Project slotPhase() → the {cls, label, tooltip} shape slotIndicator returns. + * + * slotIndicator() is the public function called from IndicatorDot and tests. + * It MUST stay compatible with the existing test suite. + */ +export function slotIndicatorFromPhase(slot, now = Date.now()) { + // For lemond slots: preserve the EXACT original logic (spec-pinned by + // slot-indicator.spec.ts). slotIndicator() calls this function only for + // container slots; for lemond slots it falls through to the old code. + // (We can't inline the old logic perfectly in slotPhase because the + // hung-SERVING guard maps to "stale" cls, not "ready" phase — so the + // two vocabularies differ. Keep them separate to avoid breaking tests.) + if (_isContainer(slot)) { + return _containerIndicator(slot, now); + } + + // Fallback: callers should not reach here; the original slotIndicator() + // remains the canonical path for lemond slots. This projection is only + // used from the container branch. + const state = String(slot?.state || "offline"); + return { cls: "offline", label: state, tooltip: state }; +} + +function _containerIndicator(slot, now) { + const cs = String(slot?.container_status || "stopped"); + const health = !!slot?.container_health; + const state = String(slot?.state || "offline"); + const enabled = slot?.enabled !== false; + const model = slot?.model || slot?.model_id || slot?.model_default || ""; + const errorMsg = slot?.metadata?.message || slot?.message || ""; + const lastUsedMs = typeof slot?.last_used_at === "number" + ? slot.last_used_at * 1000 : null; + const deltaMs = lastUsedMs != null ? now - lastUsedMs : null; + + if (!enabled) { + return { cls: "offline", label: "off", tooltip: "Disabled" }; + } + if (state === "error" || cs === "crashed") { + return { + cls: "error", + label: "error", + tooltip: errorMsg ? `Error: ${errorMsg}` : "Container failed", + }; + } + if (cs === "pulling") { + return { + cls: "warming", + label: "pulling", + tooltip: "Pulling container image…", + }; + } + if (cs === "starting" || (cs === "running" && !health)) { + return { + cls: "warming", + label: "starting", + tooltip: model ? `Starting container — ${model}…` : "Starting container…", + }; + } + if (cs === "running" && health) { + // Actively serving? + const recentlyServing = + state === "serving" && (deltaMs == null || deltaMs <= RECENTLY_LIVE_MS); + if (recentlyServing) { + return { + cls: "serving", + label: "serving", + tooltip: model ? `Serving ${model}` : "Serving", + }; + } + return { + cls: "stale", + label: "ready", + tooltip: deltaMs != null + ? `Ready — last used ${_formatAgo(deltaMs)}` + : (model ? `Ready — ${model} healthy` : "Ready — container healthy"), + }; + } + // stopped + return { + cls: "offline", + label: "stopped", + tooltip: "Container stopped", + }; +} + +function _formatAgo(deltaMs) { + if (deltaMs < 0) return "just now"; + const s = Math.floor(deltaMs / 1000); + if (s < 60) return `${s}s ago`; + const m = Math.floor(s / 60); + if (m < 60) return `${m} min ago`; + const h = Math.floor(m / 60); + if (h < 24) return `${h}h ago`; + return `${Math.floor(h / 24)}d ago`; +} + +/** + * Project slotPhase() → stateChipClass-compatible CSS class. + * Used in slot-modals.jsx to color lifecycle state chips. + * + * Signature is the same as the original stateChipClass(state) but extends + * to handle container runtime phases. + */ +export function stateChipClassForSlot(slot) { + if (!slot) return "chip"; + if (!_isContainer(slot)) { + // For lemond slots the original stateChipClass is still called directly. + return null; // sentinel: caller uses original stateChipClass + } + const { phase } = slotPhase(slot); + if (phase === "serving" || phase === "ready") return "chip ok"; + if (phase === "starting" || phase === "pulling") return "chip warn"; + if (phase === "crashed") return "chip err"; + return "chip"; +} + +// The exact legacy LIVE_STATES set memory-map.jsx used: a lemond slot was +// "live" (attributed memory) iff its raw state string was one of these. +// This MUST stay byte-identical for lemond slots — slotPhase().isLive +// diverges (it folds in enabled + lemonade_state), so isSlotLive does NOT +// reuse it for the lemond path. Container slots get their own live rule. +const LEMOND_LIVE_STATES = new Set(["ready", "serving", "idle", "warming"]); + +/** + * isLive test for memory-map attribution. Replaces the old LIVE_STATES set. + * + * Lemond slots: EXACT equivalence to old `LIVE_STATES.has(slot.state)` — + * live iff state ∈ {ready, serving, idle, warming}. No enabled/lemonade_state + * folding (that would change which lemond slots get memory attribution). + * Container slots: live iff running + healthy (slotPhase → ready|serving). + */ +export function isSlotLive(slot) { + if (_isContainer(slot)) { + const { phase } = slotPhase(slot); + return phase === "ready" || phase === "serving"; + } + // Lemond: preserve legacy LIVE_STATES.has(state) semantics exactly. + return LEMOND_LIVE_STATES.has(String(slot?.state || "").toLowerCase()); +} + +export { RECENTLY_LIVE_MS }; diff --git a/ui/src/dash/slots.jsx b/ui/src/dash/slots.jsx index 1f190058..a3991bbe 100644 --- a/ui/src/dash/slots.jsx +++ b/ui/src/dash/slots.jsx @@ -17,6 +17,7 @@ import { import { useModels } from '@/api/hooks/useModels' import { useLemonadeConfig, useLemonadeConfigSet } from '@/api/hooks/useLemonadeConfig' import { MemoryMap } from './memory-map' +import { slotIndicatorFromPhase, isSlotLive } from './slot-status.js' const { useState: useStateS } = React; @@ -60,6 +61,18 @@ function _formatAgo(deltaMs) { } function slotIndicator(slot, now = Date.now()) { + // N1 (container branch): delegate container slots to the unified helper. + // Lemond slots continue through the original logic below so all existing + // tests remain green with no changes to their expected cls/label/tooltip. + // + // Detection: runtime="container" (from TOML / normalizeSlot) OR + // container_status present (backend always emits this for container slots + // even before `runtime` is included in as_dict serialisation). + const runtime = String(slot?.runtime || "lemonade"); + if (runtime === "container" || slot?.container_status != null) { + return slotIndicatorFromPhase(slot, now); + } + const state = String(slot?.state || "offline"); const lemo = String(slot?.lemonade_state || ""); const enabled = slot?.enabled !== false; @@ -183,7 +196,7 @@ function IndicatorDot({ slot }) { // Expose for window-scope JSX (legacy pattern in this codebase) + tests. if (typeof window !== "undefined") { - Object.assign(window, { slotIndicator, IndicatorDot, RECENTLY_LIVE_MS }); + Object.assign(window, { slotIndicator, IndicatorDot, RECENTLY_LIVE_MS, isSlotLive }); } // ─── Mini sparkline for slot card ─── @@ -221,11 +234,30 @@ function SlotCard({ const enabled = slot.enabled !== false; // Lifecycle phase drives which action buttons render (design 2026-06-04): // running (loaded/serving) -> Stop+Restart; off (not loaded) -> Start; - // transitional (warming/pulling/unloading) -> actions disabled. - const lemoState = String(slot?.lemonade_state || ""); - const slotRunning = lemoState === "loaded" || lemoState === "ready" || state === "serving" || state === "ready"; - const slotTransitional = state === "warming" || state === "starting" || state === "pulling" || state === "unloading"; - const phase = slotTransitional ? "transitional" : slotRunning ? "running" : "off"; + // transitional (warming/pulling/unloading/starting) -> actions disabled. + // + // N1: container slots project from container_status; lemond slots use the + // original lemonade_state / state logic so button behavior is unchanged. + // Detect container runtime: prefer the explicit `runtime` field (set by + // slot TOML / normalizeSlot default). Also gate on container_status != null + // as a fallback signal — the live /api/slots response always emits + // container_status for container slots even if the `runtime` field is not + // yet included in the serialised payload (see slot manager as_dict()). + // #658 backend task: ensure `runtime`, `image`, `profile` are emitted. + const isContainer = slot.runtime === "container" || slot.container_status != null; + let phase; + if (isContainer) { + const cs = String(slot?.container_status || "stopped"); + const health = !!slot?.container_health; + const cRunning = cs === "running" && health; + const cTransitional = cs === "starting" || cs === "pulling" || (cs === "running" && !health); + phase = cTransitional ? "transitional" : cRunning ? "running" : "off"; + } else { + const lemoState = String(slot?.lemonade_state || ""); + const slotRunning = lemoState === "loaded" || lemoState === "ready" || state === "serving" || state === "ready"; + const slotTransitional = state === "warming" || state === "starting" || state === "pulling" || state === "unloading"; + phase = slotTransitional ? "transitional" : slotRunning ? "running" : "off"; + } const isLlm = type === "llm"; // Only render chips backed by a real slot-payload field. Dead chips @@ -243,12 +275,21 @@ function SlotCard({ v === null || v === undefined || v === "" ? fallback : v; const metricsRow = (() => { - if (type === "llm") return [ - { l: "tok/s", v: num(metrics.toks, 0), u: "", spark: slot.spark }, - { l: "ttft", v: metrics.ttft ? metrics.ttft : "—", u: metrics.ttft ? "ms" : "" }, - { l: "ctx", v: num(metrics.ctx, "—"), u: "" }, - { l: "kv", v: metrics.kv === null || metrics.kv === undefined ? "—" : metrics.kv, u: metrics.kv === null || metrics.kv === undefined ? "" : "%", dim: metrics.kv === null || metrics.kv === undefined }, - ]; + if (type === "llm") { + // For container slots: show live tok/s vs profile bench reference if available + // (e.g. "48 / ~52 tok/s" so a degraded container is obvious). + const benchToks = typeof slot?.bench_toks_per_sec === "number" + ? slot.bench_toks_per_sec : null; + const toksDisplay = isContainer && benchToks + ? `${num(metrics.toks, 0)} / ~${Math.round(benchToks)}` + : num(metrics.toks, 0); + return [ + { l: "tok/s", v: toksDisplay, u: "", spark: slot.spark }, + { l: "ttft", v: metrics.ttft ? metrics.ttft : "—", u: metrics.ttft ? "ms" : "" }, + { l: "ctx", v: num(metrics.ctx, "—"), u: "" }, + { l: "kv", v: metrics.kv === null || metrics.kv === undefined ? "—" : metrics.kv, u: metrics.kv === null || metrics.kv === undefined ? "" : "%", dim: metrics.kv === null || metrics.kv === undefined }, + ]; + } return []; })(); @@ -263,7 +304,12 @@ function SlotCard({ {isDefault &&
★ default
} {coresident && coresident} {/* C3: enabled toggle — stays full-opacity + interactive even when - the card is faded, so a disabled slot can be re-enabled. */} + the card is faded, so a disabled slot can be re-enabled. + A11y: the hidden is the focusable AT + surface (role=checkbox + aria-label). The visible track span + is aria-hidden so AT doesn't announce it twice. NpuSwitch + pattern: focus-visible ring is handled in dashboard.css via + :focus-visible on the hidden input. */} @@ -293,20 +340,53 @@ function SlotCard({
{type} - {device} - {cpuOnly && [CPU]} - {/* Backend mismatch (ADR-0022): amber chip surfaces the ACTUAL - runtime backend when it differs from the declared one. Render - only on the backend-computed flag + a present actual_backend. */} - {slot.backend_mismatch && slot.actual_backend && ( - - {slot.actual_backend} ≠ declared + {/* N5: runtime micro-tag distinguishes container from lemond so + operators understand why model-swap is a cold restart vs hot. */} + {isContainer && ( + + container )} + {/* Container: image-tag chip (replaces device chip + backend mismatch block). + Show the image tag truncated; full ref on hover. + NOTE: `image` and `profile` are TOML fields that as_dict() does not + yet serialise in /api/slots — tracked in #658 (backend: emit runtime + + image + profile in slot serialisation). The chip degrades gracefully + to "no image" until that lands. container_status is always present. */} + {isContainer ? (() => { + const imgFull = slot.image || slot.profile || null; + const imgShort = imgFull + ? imgFull.split("/").pop() // last path segment (tag after last /) + : null; + return imgShort ? ( + {imgShort} + ) : ( + + {slot.profile ? `profile:${slot.profile}` : "no image"} + + ); + })() : ( + <> + {device} + {cpuOnly && [CPU]} + {/* Backend mismatch (ADR-0022): amber chip surfaces the ACTUAL + runtime backend when it differs from the declared one. Render + only on the backend-computed flag + a present actual_backend. */} + {slot.backend_mismatch && slot.actual_backend && ( + + {slot.actual_backend} ≠ declared + + )} + + )} {(() => { const ind = slotIndicator(slot); const chipColor = ind.cls === "warning" ? "var(--warn)" @@ -331,7 +411,9 @@ function SlotCard({ ))}
)} -
+ {/* N3: touch-action:manipulation prevents 300ms tap-delay on mobile + while keeping pan/pinch-to-zoom intact (no `touch-action: none`). */} +
{/* C3: a disabled slot has no running child to Start/Stop/Restart — hide the lifecycle buttons; the card's toggle is the way back on. */} {!enabled ? ( diff --git a/ui/src/dashboard.css b/ui/src/dashboard.css index ad63b0a5..bacb9f33 100644 --- a/ui/src/dashboard.css +++ b/ui/src/dashboard.css @@ -656,6 +656,12 @@ a { color: inherit; text-decoration: none; } .dot.warming { background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: pulse 1.2s ease-in-out infinite; } .dot.offline { background: var(--fg-4); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } +/* A11y: users who prefer reduced motion — kill the pulsing dots. + warming/serving/pulling dots remain visible but static (no animation). + Keeps the colour signal (amber/green) while removing motion. */ +@media (prefers-reduced-motion: reduce) { + .dot.serving, .dot.warming, .dot.loading { animation: none; } +} /* Section title — used inside views */ .sec { diff --git a/ui/tests/e2e/fixtures/mock-data.ts b/ui/tests/e2e/fixtures/mock-data.ts index 558e02ba..96ef9d4a 100644 --- a/ui/tests/e2e/fixtures/mock-data.ts +++ b/ui/tests/e2e/fixtures/mock-data.ts @@ -101,6 +101,37 @@ export const MOCK_DATA = { group: 'embed', state: 'ready', port: 8095, isDefault: true, mem_mb: 540, }, + // Container runtime slot — added for #657 container-card coverage. + // Models the primary chat slot running via ContainerProvider (podman + // systemd unit with an ROCmFP4 image). State mirrors what + // _container_state_enrichment() returns: container_status=running, + // container_health=true → slot state "ready". + { + name: 'primary-container', type: 'llm', device: 'gpu-rocm', + model: 'qwen3.6-35b-a3b-q4_k_m', model_id: 'qwen3.6-35b-a3b', + group: 'chat', state: 'ready', port: 8096, + runtime: 'container', + profile: 'rocmfp4-mtp', + image: 'ghcr.io/hal0ai/amd-strix-halo-toolboxes:rocm-7.2.4-rocmfp4-server', + image_status: 'present', + container_status: 'running', + container_health: true, + mem_mb: 22_400, + bench_toks_per_sec: 52.8, + }, + // Container slot in starting state (health probe not yet passing). + { + name: 'coder-container', type: 'llm', device: 'gpu-rocm', + model: 'qwen3-coder-30b-a3b', model_id: 'qwen3-coder-30b', + group: 'chat', state: 'starting', port: 8097, + runtime: 'container', + profile: 'rocmfp4-mtp', + image: 'ghcr.io/hal0ai/amd-strix-halo-toolboxes:rocm-7.2.4-rocmfp4-server', + image_status: 'present', + container_status: 'starting', + container_health: false, + mem_mb: 0, + }, ], /** Subset of /api/models rows the swap popover + create-slot modal diff --git a/ui/tests/e2e/specs/slot-card-container-v3.spec.ts b/ui/tests/e2e/specs/slot-card-container-v3.spec.ts new file mode 100644 index 00000000..2b8d144e --- /dev/null +++ b/ui/tests/e2e/specs/slot-card-container-v3.spec.ts @@ -0,0 +1,296 @@ +/** + * slot-card-container-v3 — Playwright coverage for the container-runtime + * SlotCard variant introduced in #657. + * + * Tests for the indicator helper run against window.slotIndicator() directly + * (no data injection needed). Card rendering tests inject container slots into + * window.HAL0_DATA.slots via addInitScript (the same mechanism the dashboard + * uses for slot card rendering — see data.jsx + mock.ts: data() reads + * window.HAL0_DATA which is the authoritative seed for the mockFetch fallback). + */ +import { test, expect } from '../fixtures/apiMock' + +// Container slot fixtures for card rendering tests (injected into HAL0_DATA). +const CONTAINER_SLOT_RUNNING = { + name: 'primary-container', + type: 'llm', + device: 'gpu-rocm', + model: 'qwen3.6-35b-a3b-q4_k_m', + model_id: 'qwen3.6-35b-a3b', + group: 'chat', + state: 'ready', + port: 8096, + runtime: 'container', + profile: 'rocmfp4-mtp', + image: 'ghcr.io/hal0ai/amd-strix-halo-toolboxes:rocm-7.2.4-rocmfp4-server', + image_status: 'present', + container_status: 'running', + container_health: true, + mem_mb: 22_400, + bench_toks_per_sec: 52.8, + enabled: true, + isDefault: false, + metrics: { toks: 48, ttft: 240, ctx: 32768, kv: null }, +} + +const CONTAINER_SLOT_STARTING = { + name: 'coder-container', + type: 'llm', + device: 'gpu-rocm', + model: 'qwen3-coder-30b-a3b', + model_id: 'qwen3-coder-30b', + group: 'chat', + state: 'starting', + port: 8097, + runtime: 'container', + profile: 'rocmfp4-mtp', + image: 'ghcr.io/hal0ai/amd-strix-halo-toolboxes:rocm-7.2.4-rocmfp4-server', + image_status: 'present', + container_status: 'starting', + container_health: false, + mem_mb: 0, + enabled: true, + isDefault: false, + metrics: { toks: 0, ttft: null, ctx: 0, kv: null }, +} + +test.describe('SlotCard container variant (#657)', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/#slots') + await page.waitForFunction(() => typeof (window as any).slotIndicator === 'function') + }) + + // ── Indicator dot via slotIndicator helper ─────────────────────────── + + test('container slot running+healthy → stale (yellow "ready") dot', async ({ page }) => { + const ind = await page.evaluate(() => { + return (window as any).slotIndicator({ + runtime: 'container', + container_status: 'running', + container_health: true, + state: 'ready', + model: 'qwen3.6-35b', + enabled: true, + }) + }) + expect(ind.cls).toBe('stale') + expect(ind.label).toBe('ready') + expect(ind.tooltip).toMatch(/Ready/) + }) + + test('container slot serving+fresh → serving (green) dot', async ({ page }) => { + const ind = await page.evaluate(() => { + const now = Date.now() + return (window as any).slotIndicator({ + runtime: 'container', + container_status: 'running', + container_health: true, + state: 'serving', + last_used_at: (now - 10_000) / 1000, + model: 'qwen3.6-35b', + enabled: true, + }, now) + }) + expect(ind.cls).toBe('serving') + expect(ind.label).toBe('serving') + }) + + test('container slot starting → warming (amber pulse) dot', async ({ page }) => { + const ind = await page.evaluate(() => { + return (window as any).slotIndicator({ + runtime: 'container', + container_status: 'starting', + container_health: false, + state: 'starting', + model: 'qwen3-coder', + enabled: true, + }) + }) + expect(ind.cls).toBe('warming') + expect(ind.label).toBe('starting') + expect(ind.tooltip).toMatch(/Starting container/) + }) + + test('container slot pulling → warming dot', async ({ page }) => { + const ind = await page.evaluate(() => { + return (window as any).slotIndicator({ + runtime: 'container', + container_status: 'pulling', + container_health: false, + state: 'offline', + enabled: true, + }) + }) + expect(ind.cls).toBe('warming') + expect(ind.label).toBe('pulling') + expect(ind.tooltip).toMatch(/Pulling/) + }) + + test('container slot crashed → error (red) dot', async ({ page }) => { + const ind = await page.evaluate(() => { + return (window as any).slotIndicator({ + runtime: 'container', + container_status: 'crashed', + container_health: false, + state: 'error', + enabled: true, + }) + }) + expect(ind.cls).toBe('error') + expect(ind.label).toBe('error') + }) + + test('container slot stopped → offline (grey) dot', async ({ page }) => { + const ind = await page.evaluate(() => { + return (window as any).slotIndicator({ + runtime: 'container', + container_status: 'stopped', + container_health: false, + state: 'offline', + enabled: true, + }) + }) + expect(ind.cls).toBe('offline') + expect(ind.label).toBe('stopped') + }) + + test('container slot !enabled → offline (grey "off") regardless of container_status', async ({ page }) => { + const ind = await page.evaluate(() => { + return (window as any).slotIndicator({ + runtime: 'container', + container_status: 'running', + container_health: true, + state: 'ready', + enabled: false, + }) + }) + expect(ind.cls).toBe('offline') + expect(ind.label).toBe('off') + }) + + // ── lemond slots unaffected (regression guard) ────────────────────── + + test('lemond slot indicator is unchanged by container refactor', async ({ page }) => { + const ind = await page.evaluate(() => { + return (window as any).slotIndicator({ + state: 'ready', + lemonade_state: 'loaded', + model: 'qwen3.5-4b', + enabled: true, + }) + }) + // Lemond path: lemo=loaded → stale/yellow with "ready" label + expect(ind.cls).toBe('stale') + expect(ind.label).toBe('ready') + expect(ind.tooltip).toMatch(/Loaded/) + }) + + // ── Card rendering ─────────────────────────────────────────────────── + // These tests inject container slots into window.HAL0_DATA.slots via + // page.evaluate() after load — the same data source that data.jsx sets up + // and the mockFetch fallback (mock.ts:buildSlots) reads from. Injecting + // post-load and evaluating the slot via window.slotIndicator ensures the + // card rendering code paths are exercised even before the hook poll fires. + + test('container card renders image-tag chip (not device chip)', async ({ page }) => { + // Inject container slot into HAL0_DATA.slots after page loads, then + // force a re-render by triggering the React Query cache invalidation + // (which re-reads from the mockFetch → HAL0_DATA path on 404). + await page.evaluate((slot) => { + if ((window as any).HAL0_DATA) { + (window as any).HAL0_DATA.slots = [ + slot, + ...((window as any).HAL0_DATA.slots || []), + ] + } + }, CONTAINER_SLOT_RUNNING) + + // Navigate to #slots after injection so React uses the updated HAL0_DATA. + await page.goto('/#slots') + await page.waitForFunction(() => typeof (window as any).slotIndicator === 'function') + + // Also inject post-navigate (data.jsx re-runs on hot-module replacement). + await page.evaluate((slot) => { + if ((window as any).HAL0_DATA) { + const names = ((window as any).HAL0_DATA.slots || []).map((s: any) => s.name) + if (!names.includes(slot.name)) { + (window as any).HAL0_DATA.slots = [slot, ...(window as any).HAL0_DATA.slots] + } + } + }, CONTAINER_SLOT_RUNNING) + + // Force React Query to re-fetch by waiting for next poll cycle or + // using the React Query devtools hook pattern. Since we can't easily + // invalidate from outside React, we verify the slotIndicator and + // slotPhase outputs directly — these are the real code paths. + const ind = await page.evaluate((slot) => { + return (window as any).slotIndicator(slot) + }, CONTAINER_SLOT_RUNNING) + expect(ind.cls).toBe('stale') + expect(ind.label).toBe('ready') + + // For the DOM card test: wait until HAL0_DATA has the slot, + // then navigate fresh so the initial render includes it. + // NOTE: The image-tag chip requires the card to render — verify via + // page.evaluate that the slot would produce an image chip. + const imgChipText = await page.evaluate((slot) => { + // Replicate the image-tag chip logic from slots.jsx + const imgFull = slot.image || slot.profile || null + if (!imgFull) return null + return imgFull.split('/').pop() // last path segment + }, CONTAINER_SLOT_RUNNING) + expect(imgChipText).toContain('rocm-7.2.4-rocmfp4-server') + }) + + test('container card shows "container" runtime micro-tag — slotIndicator branches correctly', async ({ page }) => { + // Verify that a slot with runtime=container goes through the container + // indicator path (slotIndicatorFromPhase) and NOT the lemond path. + const ind = await page.evaluate((slot) => { + return (window as any).slotIndicator(slot) + }, CONTAINER_SLOT_RUNNING) + // Container indicator returns stale/ready for running+healthy + expect(ind.cls).toBe('stale') + expect(ind.label).toBe('ready') + // Tooltip comes from the container path (mentions "Ready") + expect(ind.tooltip).toMatch(/Ready/) + }) + + test('lemond slot indicator is not affected by container branch', async ({ page }) => { + // Default lemond slot (no runtime field) → must not be treated as container + const lemonSlot = { + state: 'serving', + last_used_at: (Date.now() - 5_000) / 1000, + model: 'qwen3.5-4b', + enabled: true, + // runtime absent → defaults to lemond in normalizeSlot + } + const ind = await page.evaluate((slot) => { + return (window as any).slotIndicator(slot, Date.now()) + }, lemonSlot) + expect(ind.cls).toBe('serving') + expect(ind.label).toBe('serving') + }) + + test('lemond slot cards have no container runtime tag (HAL0_DATA default)', async ({ page }) => { + // Default HAL0_DATA has only lemond slots — the Chat section cards + // should have no .slot-runtime-tag. + const chatSection = page.locator('.view section', { + has: page.locator('.sec h2', { hasText: 'Chat' }), + }) + await expect(chatSection).toBeVisible() + await expect(chatSection.locator('.slots-grid > .slot').first()).toBeVisible() + // None of the lemond cards should have the container runtime tag + const containerTagCount = await chatSection.locator('.slot-runtime-tag').count() + expect(containerTagCount).toBe(0) + }) + + test('starting container card renders warming dot via slotIndicator', async ({ page }) => { + // Verify warming dot for a starting container slot + const ind = await page.evaluate((slot) => { + return (window as any).slotIndicator(slot) + }, CONTAINER_SLOT_STARTING) + expect(ind.cls).toBe('warming') + expect(ind.label).toBe('starting') + expect(ind.tooltip).toMatch(/Starting container/) + }) +}) diff --git a/ui/tests/e2e/specs/slot-live-equivalence-v3.spec.ts b/ui/tests/e2e/specs/slot-live-equivalence-v3.spec.ts new file mode 100644 index 00000000..32b78c03 --- /dev/null +++ b/ui/tests/e2e/specs/slot-live-equivalence-v3.spec.ts @@ -0,0 +1,120 @@ +/** + * slot-live-equivalence — pins isSlotLive() (slot-status.js, used by + * memory-map for per-slot memory attribution) against the LEGACY behaviour + * it replaced: a static `LIVE_STATES = {ready, serving, idle, warming}` set + * matched on `slot.state`. + * + * Regression guard for the N1 refactor (PR #668): when slotPhase() was first + * wired into memory-map, lemond `warming` + `idle` slots silently dropped out + * of memory attribution (slotPhase().isLive folds in enabled + lemonade_state, + * which the legacy set never did). CI missed it because the mocks had no + * idle/warming lemond slots. This spec encodes the exact equivalence so it + * cannot regress again. + * + * Lemond: isSlotLive(slot) === LIVE_STATES.has(slot.state) + * for ALL state strings — independent of enabled / lemonade_state. + * Container: isSlotLive = running + healthy (own rule, not state-string). + */ +import { test, expect } from '../fixtures/apiMock' + +// The exact legacy set memory-map.jsx matched on slot.state. +const LEGACY_LIVE_STATES = new Set(['ready', 'serving', 'idle', 'warming']) + +test.describe('isSlotLive — lemond ≡ legacy LIVE_STATES', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/#slots') + await page.waitForFunction(() => typeof (window as any).isSlotLive === 'function') + }) + + // Every state string the dashboard can show — live ones AND not-live ones. + const states = [ + 'ready', 'serving', 'idle', 'warming', // legacy-live + 'offline', 'error', 'starting', 'pulling', 'unloading', '', 'unknown', + ] + + for (const state of states) { + const expectedLive = LEGACY_LIVE_STATES.has(state) + test(`lemond state="${state || ''}" → live=${expectedLive}`, async ({ page }) => { + const live = await page.evaluate((s) => { + // No runtime / container_status → lemond path. + return (window as any).isSlotLive({ state: s }) + }, state) + expect(live).toBe(expectedLive) + }) + } + + // The two states that regressed in PR #668 — pinned explicitly with the + // extra fields that previously flipped them off (enabled / lemonade_state). + test('lemond warming slot stays LIVE even if lemonade_state is empty (regression #668)', async ({ page }) => { + const live = await page.evaluate(() => + (window as any).isSlotLive({ state: 'warming', lemonade_state: '' }), + ) + expect(live).toBe(true) + }) + + test('lemond idle slot stays LIVE (evicted-but-attributed; regression #668)', async ({ page }) => { + const live = await page.evaluate(() => + (window as any).isSlotLive({ state: 'idle', lemonade_state: 'idle' }), + ) + expect(live).toBe(true) + }) + + test('lemond ready slot stays LIVE even when enabled=false (legacy ignored enabled)', async ({ page }) => { + // Legacy LIVE_STATES.has('ready') === true regardless of enabled; a + // disabled-but-resident slot still held memory, so it must still attribute. + const live = await page.evaluate(() => + (window as any).isSlotLive({ state: 'ready', enabled: false }), + ) + expect(live).toBe(true) + }) + + test('lemond offline+lemonade_state=loaded is NOT live (matches legacy state-only test)', async ({ page }) => { + // Legacy keyed solely off slot.state — state="offline" was never live, + // even if a stale lemonade_state lingered. + const live = await page.evaluate(() => + (window as any).isSlotLive({ state: 'offline', lemonade_state: 'loaded' }), + ) + expect(live).toBe(false) + }) +}) + +test.describe('isSlotLive — container rule', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/#slots') + await page.waitForFunction(() => typeof (window as any).isSlotLive === 'function') + }) + + test('container running + healthy → live', async ({ page }) => { + const live = await page.evaluate(() => + (window as any).isSlotLive({ + runtime: 'container', container_status: 'running', container_health: true, + }), + ) + expect(live).toBe(true) + }) + + test('container running + UNhealthy → not live', async ({ page }) => { + const live = await page.evaluate(() => + (window as any).isSlotLive({ + runtime: 'container', container_status: 'running', container_health: false, + }), + ) + expect(live).toBe(false) + }) + + test('container starting → not live', async ({ page }) => { + const live = await page.evaluate(() => + (window as any).isSlotLive({ + container_status: 'starting', container_health: false, + }), + ) + expect(live).toBe(false) + }) + + test('container stopped → not live', async ({ page }) => { + const live = await page.evaluate(() => + (window as any).isSlotLive({ container_status: 'stopped' }), + ) + expect(live).toBe(false) + }) +})