@@ -335,8 +421,17 @@ export default function Manage() {
{/* Resource Monitor */}
+
{TABS.map(t => {
const upgradeCount = t.key === 'backends' ? Object.keys(upgrades).length : 0
return (
@@ -361,8 +456,6 @@ export default function Manage() {
{/* Models Tab */}
{activeTab === 'models' && (() => {
- // Computed filters — done here so the result is available both to
- // the FilterBar counts and to the table body.
const MODEL_FILTERS = [
{ key: 'all', label: 'All', icon: 'fa-layer-group' },
{ key: 'running', label: 'Running', icon: 'fa-circle-play' },
@@ -407,9 +500,7 @@ export default function Manage() {
/>
{modelsLoading ? (
-
-
+
) : models.length === 0 ? (
@@ -440,145 +531,135 @@ export default function Manage() {
- Enabled
- Name
+
+ Enabled
+
+ Model
Status
Backend
- Use Cases
- Actions
+ Use cases
+
- {visibleModels.map(model => (
-
- {/* Enable/Disable toggle */}
-
- handleToggleModel(model.id, model.disabled)}
- disabled={togglingModels.has(model.id)}
- />
-
- {/* Name */}
-
-
-
{model.id}
- {model.pinned && (
-
- )}
-
-
{ e.preventDefault(); navigate(`/app/model-editor/${encodeURIComponent(model.id)}`) }}
- className="btn btn-secondary btn-sm"
- style={{ padding: '2px 5px', fontSize: '0.625rem' }}
- title="Edit config"
- >
-
- {!distributedMode && (
-
{ e.preventDefault(); navigate(`/app/backend-logs/${encodeURIComponent(model.id)}`) }}
- className="btn btn-secondary btn-sm"
- style={{ padding: '2px 5px', fontSize: '0.625rem' }}
- title="Backend logs"
- >
-
+ {visibleModels.map(model => {
+ const enriched = enrichModel(model.id)
+ const isExpanded = expandedKey === `models:${model.id}`
+ const isRunning = loadedModelIds.has(model.id) || (Array.isArray(model.loaded_on) && model.loaded_on.length > 0)
+ const caps = Array.isArray(model.capabilities) ? model.capabilities : []
+ const matchedCaps = USE_CASES.filter(uc => caps.includes(uc.cap) && !(uc.hideIf && caps.includes(uc.hideIf)))
+ return (
+
toggleExpanded('models', model.id)}
+ colSpan={MODELS_COLSPAN}
+ dimmed={!!model.disabled}
+ detail={(
+
+ handleToggleModel(model.id, model.disabled)}
+ disabled={togglingModels.has(model.id)}
+ />
+
+
+
+ {model.id}
+ {enriched?.description && (
+
+ {enriched.description}
+
)}
-
-
- {/* Status / Distribution */}
-
-
- {model.disabled ? (
-
-
- ) : model.loaded_on && model.loaded_on.length > 0 ? (
- // Distributed mode: surface where the model is
- // actually loaded. Shared chip scales to any cluster
- // size (inline for <=3, popover for larger).
-
-
- ) : (
-
-
- )}
- {model.source === 'registry-only' && (
-
-
- )}
-
-
- {/* Backend */}
-
- {model.backend || 'Auto'}
-
- {/* Use Cases */}
-
-
- {(() => {
- const caps = Array.isArray(model.capabilities) ? model.capabilities : []
- const matched = USE_CASES.filter(uc => caps.includes(uc.cap) && !(uc.hideIf && caps.includes(uc.hideIf)))
- if (matched.length === 0) {
- return —
- }
- return matched.map(uc => uc.route ? (
+
+
+
+ {model.disabled ? (
+
+
+ ) : Array.isArray(model.loaded_on) && model.loaded_on.length > 0 ? (
+
+
+ ) : (
+
+
+ )}
+ {model.source === 'registry-only' && (
+
+
+ )}
+ {model.pinned && (
+
+
+ )}
+
+
+
+ {model.backend || 'Auto'}
+
+
+
-
- {/* Actions */}
-
-
- {loadedModelIds.has(model.id) && (
- handleStopModel(model.id)}
- title="Stop model"
- >
-
- )}
- handleTogglePinned(model.id, model.pinned)}
- disabled={pinningModels.has(model.id) || model.disabled}
- title={model.pinned ? 'Unpin model (allow idle unloading)' : 'Pin model (prevent idle unloading)'}
- style={{
- color: model.pinned ? 'var(--color-warning)' : undefined,
- }}
- >
-
- handleDeleteModel(model.id)}
- title="Delete model"
- >
-
-
-
-
- ))}
+ ))}
+
+
+
+ handleStopModel(model.id), hidden: !isRunning },
+ { key: 'pin', icon: 'fa-thumbtack',
+ label: model.pinned ? 'Unpin (allow idle unload)' : 'Pin (prevent idle unload)',
+ onClick: () => handleTogglePinned(model.id, model.pinned),
+ disabled: pinningModels.has(model.id) || !!model.disabled },
+ { key: 'edit', icon: 'fa-pen-to-square', label: 'Edit configuration',
+ onClick: () => navigate(`/app/model-editor/${encodeURIComponent(model.id)}`) },
+ { key: 'logs', icon: 'fa-terminal', label: 'Backend logs',
+ onClick: () => navigate(`/app/backend-logs/${encodeURIComponent(model.id)}`),
+ hidden: distributedMode },
+ { divider: true },
+ { key: 'delete', icon: 'fa-trash', label: 'Delete model', danger: true,
+ onClick: () => handleDeleteModel(model.id) },
+ ]}
+ />
+
+
+ )
+ })}
@@ -613,9 +694,7 @@ export default function Manage() {
)}
{backendsLoading ? (
-
- Loading backends...
-
+
) : backends.length === 0 ? (
) : (() => {
- // Count chip badges: show N in the filter buttons so operators can
- // see at a glance how their chips bucket the list.
- const upgradableCount = backends.filter(b => upgrades[b.Name]).length
- const userCount = backends.filter(b => !b.IsSystem).length
- const systemCount = backends.filter(b => b.IsSystem).length
- const metaCount = backends.filter(b => b.IsMeta).length
- const offlineCount = backends.filter(b => {
+ // A backend is "meta or development" if its installed metadata flags
+ // it OR if the gallery record does. We hide them by default so the
+ // installed list stops looking like the raw debug dump it was — the
+ // toggle exposes them on demand without reshuffling the row layout.
+ const isMetaOrDev = (b) => {
+ if (b.IsMeta) return true
+ const g = enrichBackend(b.Name)
+ return !!(g?.isMeta || g?.isDevelopment)
+ }
+ const visibleBase = backends.filter(b => showMetaDev || !isMetaOrDev(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
+ const hiddenMetaCount = backends.length - visibleBase.length
const BACKEND_FILTERS = [
- { key: 'all', label: 'All', icon: 'fa-layer-group', count: backends.length },
- { key: 'user', label: 'User', icon: 'fa-download', count: userCount },
- { key: 'system', label: 'System', icon: 'fa-shield-alt', count: systemCount },
- { key: 'meta', label: 'Meta', icon: 'fa-layer-group', count: metaCount },
+ { 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 }] : []),
]
@@ -664,7 +753,6 @@ export default function Manage() {
switch (backendsFilter) {
case 'user': return !b.IsSystem
case 'system': return !!b.IsSystem
- case 'meta': return !!b.IsMeta
case 'upgradable': return !!upgrades[b.Name]
case 'offline': {
const n = b.Nodes || b.nodes || []
@@ -676,35 +764,12 @@ export default function Manage() {
default: return true
}
}
- // Legacy "showOnlyUpgradable" toggle is now the 'upgradable' chip —
- // keep backward-compat by mapping it onto the new filter.
- if (showOnlyUpgradable && backendsFilter !== 'upgradable') {
- // One-shot reconciliation — the old state becomes the new chip.
- setBackendsFilter('upgradable')
- setShowOnlyUpgradable(false)
- }
- const visibleBackends = backends.filter(b => passesFilter(b) && passesSearch(b))
- if (visibleBackends.length === 0) {
- return (
- <>
-
-
-
-
No backends match the current filter.
-
{ setBackendsSearch(''); setBackendsFilter('all') }}>Clear filters
-
-
- )
- }
- return (
- <>
+ 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 = (
0 ? `Show meta & development (${hiddenMetaCount})` : 'Show meta & development',
+ icon: 'fa-flask',
+ checked: showMetaDev,
+ onChange: () => setShowMetaDev(v => !v),
+ }]}
/>
+ )
+
+ if (visibleBackends.length === 0) {
+ return (
+ <>
+ {filterBar}
+
+
+
+ No backends match the current filter.
+ {!showMetaDev && hiddenMetaCount > 0 && (
+ <> {hiddenMetaCount} meta or development backend{hiddenMetaCount === 1 ? ' is' : 's are'} hidden — toggle "Show meta & development" to reveal {hiddenMetaCount === 1 ? 'it' : 'them'}.
+ )}
+
+
{ setBackendsSearch(''); setBackendsFilter('all') }}>Clear filters
+
- Name
- Type
+ Backend
Version
{distributedMode && Nodes }
Installed
- Actions
+
- {visibleBackends.map((backend, i) => {
+ {visibleBackends.map((backend) => {
const upgradeInfo = upgrades[backend.Name]
const hasDrift = upgradeInfo?.node_drift?.length > 0
const nodes = backend.Nodes || backend.nodes || []
+ const enriched = enrichBackend(backend.Name)
+ const isExpanded = expandedKey === `backends:${backend.Name}`
+ const isDevelopment = !!(enriched?.isDevelopment)
+ const isProcessing = reinstallingBackends.has(backend.Name)
return (
-
-
-
- {backend.Name}
- {backend.Metadata?.alias && (
- alias: {backend.Metadata.alias}
- )}
- {backend.Metadata?.meta_backend_for && (
- for: {backend.Metadata.meta_backend_for}
- )}
-
-
-
-
- {backend.IsSystem ? (
-
-
- ) : (
-
-
- )}
- {backend.IsMeta && (
-
-
- )}
-
-
-
-
- {backend.Metadata?.version ? (
- v{backend.Metadata.version}
- ) : (
- —
- )}
- {upgradeInfo && (
-
-
- )}
- {hasDrift && (
- `${d.node_name}${d.version ? ' v' + d.version : ''}`).join(', ')}`}
- >
-
- )}
-
-
- {distributedMode && (
+ toggleExpanded('backends', backend.Name)}
+ colSpan={colSpan}
+ detail={(
+
-
+
+ {backend.Name}
+ · alias {backend.Metadata.alias}
+ )}
+ {backend.Metadata?.meta_backend_for && (
+ · for {backend.Metadata.meta_backend_for}
+ )}
+
+ {(enriched?.description) && (
+
+ {enriched.description}
+
+ )}
+
- )}
-
-
- {backend.Metadata?.installed_at ? formatInstalledAt(backend.Metadata.installed_at) : '—'}
-
-
-
-
+
+ {(() => {
+ const v = formatBackendVersion(backend.Metadata)
+ return (
+
+ {v.label}
+ {upgradeInfo && (
+
+
+ )}
+ {hasDrift && (
+ `${d.node_name}${d.version ? ' v' + d.version : ''}`).join(', ')}`}
+ >
+
+ )}
+
+ )
+ })()}
+
+ {distributedMode && (
+
+
+ )}
+
+
+ {backend.Metadata?.installed_at ? formatInstalledAt(backend.Metadata.installed_at) : '—'}
+
+
+
{backend.IsSystem ? (
) : (
- <>
- {upgradeInfo ? (
- handleUpgradeBackend(backend.Name)}
- disabled={reinstallingBackends.has(backend.Name)}
- >
-
- ) : (
- handleReinstallBackend(backend.Name)}
- disabled={reinstallingBackends.has(backend.Name)}
- >
-
- )}
- handleDeleteBackend(backend.Name)}
- title="Delete backend (removes from all nodes)"
- >
-
-
+ handleUpgradeBackend(backend.Name),
+ disabled: isProcessing,
+ hidden: !upgradeInfo },
+ { key: 'reinstall', icon: 'fa-rotate', label: 'Reinstall backend',
+ onClick: () => handleReinstallBackend(backend.Name),
+ disabled: isProcessing },
+ { divider: true },
+ { key: 'delete', icon: 'fa-trash',
+ label: 'Delete backend',
+ danger: true,
+ onClick: () => handleDeleteBackend(backend.Name) },
+ ]}
+ />
)}
-
-
+
+
)
})}
@@ -858,3 +959,243 @@ export default function Manage() {
)
}
+
+// 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 (
+
+
+
+ Description
+
+ {description ? (
+
+ ) : (
+ No description available — this model isn't in the gallery.
+ )}
+
+
+ Backend
+
+ {model.backend || 'Auto'}
+
+
+ {matchedCaps.length > 0 && (<>
+ Capabilities
+
+
+
+ )}
+
+ {(sizeDisplay || vramDisplay) && (<>
+ Size / VRAM
+
+ {sizeDisplay && Size: {sizeDisplay} }
+ {vramDisplay && VRAM: {vramDisplay} }
+
+ )}
+
+ {license && (<>
+ License
+ {license}
+ )}
+
+ {tags.length > 0 && (<>
+ Tags
+
+
+ {tags.map(t => {t} )}
+
+
+ )}
+
+ {urls.length > 0 && (<>
+ Links
+
+
+ {urls.map((url, i) => (
+
+
+ ))}
+
+ )}
+
+ {distributedMode && Array.isArray(model.loaded_on) && model.loaded_on.length > 0 && (<>
+ Distributed
+
+
+ )}
+
+ {model.source && (<>
+ Source
+ {model.source}
+ )}
+
+ {files.length > 0 && (<>
+ Files
+
+ {files.length} file{files.length === 1 ? '' : 's'}
+
+ )}
+
+
+
+
+ Description
+
+ {description ? (
+
+ ) : (
+ No description available — this backend isn't in the gallery.
+ )}
+
+
+ {repository && (<>
+ Repository
+
+ {repository}
+
+ )}
+
+ {license && (<>
+ License
+ {license}
+ )}
+
+ {tags.length > 0 && (<>
+ Tags
+
+
+ {tags.map(t => {t} )}
+
+
+ )}
+
+ {urls.length > 0 && (<>
+ Links
+
+
+ {urls.map((url, i) => (
+
+
+ ))}
+
+ )}
+
+ {backend.Metadata?.uri && (<>
+ Source
+
+ {backend.Metadata.uri}
+
+ )}
+
+ {backend.Metadata?.digest && (<>
+ Digest
+
+ {backend.Metadata.digest}
+
+ )}
+
+ {backend.Metadata?.installed_at && (<>
+ Installed
+
+ {formatInstalledAt(backend.Metadata.installed_at)}
+
+ ({formatInstalledAtFull(backend.Metadata.installed_at)})
+
+
+ )}
+
+ {backend.Metadata?.alias && (<>
+ Alias
+ {backend.Metadata.alias}
+ )}
+
+ {backend.Metadata?.meta_backend_for && (<>
+ Meta for
+ {backend.Metadata.meta_backend_for}
+ )}
+
+ {distributedMode && nodes.length > 0 && (<>
+ Nodes
+
+
+ )}
+
+ {upgradeInfo?.node_drift?.length > 0 && (<>
+ Drift
+
+
+
+ Node Version
+
+ {upgradeInfo.node_drift.map((d, i) => (
+
+ {d.node_name}
+ {d.version ? `v${d.version}` : '—'}
+
+ ))}
+
+
+
+ )}
+
+
- {/* Animated dots */}
-
- {[0, 1, 2, 3, 4].map(i => (
-
- ))}
-
- {/* Rotating phrase */}
-
-
- {/* Skeleton rows */}
-
- {[0.9, 0.7, 0.5].map((opacity, i) => (
-
- ))}
-
-
-