{/* Column 1: Model field */}
-
diff --git a/app/recommend/AdvancedEstimate.tsx b/app/recommend/AdvancedEstimate.tsx
index 5db969c..6a1a822 100644
--- a/app/recommend/AdvancedEstimate.tsx
+++ b/app/recommend/AdvancedEstimate.tsx
@@ -13,12 +13,11 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
import { InfoStrip, InfoStripAction } from '@/components/ui/InfoStrip';
import styles from './AdvancedEstimate.module.css';
-import { fetchModelConfig } from '@/lib/huggingface/fetch-config';
import { useGpuSizer } from '@/contexts/GpuSizerContext';
import { useAicCatalog } from '@/lib/hooks/useAicCatalog';
import { useSettings } from '@/contexts/SettingsContext';
import { getAppConfig } from '@/lib/app-config';
-import { ModelInput } from '@/components/ui/ModelInput';
+import { ComboBox, type ComboBoxItem } from '@/components/ModelComboBox/ModelComboBox';
import { GpuSystemInput } from '@/components/ui/GpuSystemInput';
function modelSuggestions(): string {
@@ -136,6 +135,12 @@ export default function AdvancedEstimate() {
const { modelOptions: aicModels, gpuOptions: aicGpus, isLoading: catalogLoading } = useAicCatalog();
const MODEL_OPTIONS = aicModels;
+ const modelItems: ComboBoxItem[] = React.useMemo(() =>
+ aicModels.map(m => {
+ const slash = m.indexOf('/');
+ return { value: m, label: m, group: slash > 0 ? m.slice(0, slash) : '' };
+ }), [aicModels]);
+
// Input state
const [model, setModel] = React.useState('');
@@ -151,9 +156,6 @@ export default function AdvancedEstimate() {
const [osl, setOsl] = React.useState(128);
const [ttft, setTtft] = React.useState(1000);
- // Model status + HF config
- const [modelStatus, setModelStatus] = React.useState<'idle' | 'supported' | 'catalog' | 'fetching' | 'fetched' | 'error'>('idle');
-
// GPU sizer (persistent across navigation)
const { isLoading, result, error, errorCode, elapsed, debugRequest, debugResponse, debugStatus, debugDuration, startSizing } = useGpuSizer();
const [debugOpen, setDebugOpen] = React.useState(false);
@@ -194,22 +196,6 @@ export default function AdvancedEstimate() {
};
- // Model status check + fetch HF config
- React.useEffect(() => {
- if (catalogLoading) { setModelStatus('idle'); return; }
- const timer = setTimeout(() => {
- if (!model.includes('/')) { setModelStatus('idle'); return; }
- if (getAppConfig().supportedModels.includes(model)) { setModelStatus('supported'); return; }
- const inCatalog = MODEL_OPTIONS.includes(model);
- if (inCatalog) { setModelStatus('catalog'); return; }
- setModelStatus('fetching');
- fetchModelConfig(model, hfToken).then(r => {
- setModelStatus(r.success && r.config ? 'fetched' : 'error');
- });
- }, 500);
- return () => clearTimeout(timer);
- }, [model, hfToken, MODEL_OPTIONS, catalogLoading, hydrated]);
-
// Fetch live pricing
React.useEffect(() => {
const fetchPricing = async () => {
@@ -267,15 +253,15 @@ export default function AdvancedEstimate() {
{/* Model + GPU row */}
-
diff --git a/app/settings/Settings.tsx b/app/settings/Settings.tsx
index 6e857b2..217ec0d 100644
--- a/app/settings/Settings.tsx
+++ b/app/settings/Settings.tsx
@@ -135,7 +135,7 @@ export function Settings() {
Tested models
-
+
{validatedOpen ? '▲' : '▼'}
diff --git a/components/ModelComboBox/ModelComboBox.module.css b/components/ModelComboBox/ModelComboBox.module.css
new file mode 100644
index 0000000..5b9f232
--- /dev/null
+++ b/components/ModelComboBox/ModelComboBox.module.css
@@ -0,0 +1,218 @@
+.wrapper {
+ width: 100%;
+}
+
+.toggleAnchor {
+ position: relative;
+}
+
+.labelRow {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 6px;
+}
+
+.label {
+ font-size: 12px;
+ font-weight: 600;
+ font-family: var(--mono);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: var(--t2, #3c3f42);
+ line-height: 1.2;
+ margin: 0;
+}
+
+.wrapper :global(.pf-v5-c-switch) {
+ --pf-v5-c-switch--Height: 18px !important;
+ --pf-v5-c-switch__toggle--Width: 32px !important;
+ --pf-v5-c-switch__toggle--Height: 16px !important;
+ --pf-v5-c-switch__toggle--BorderRadius: 9px !important;
+ font-size: 11.5px !important;
+}
+
+.wrapper :global(.pf-v5-c-switch__label) {
+ font-size: 11.5px !important;
+ font-weight: 500;
+}
+
+.wrapper :global(.pf-v5-c-switch__toggle) {
+ width: 32px !important;
+ height: 16px !important;
+}
+
+.wrapper :global(.pf-v5-c-switch__toggle::before) {
+ width: 12px !important;
+ height: 12px !important;
+}
+
+.wrapper :global(.pf-v5-c-switch__input:focus-visible ~ .pf-v5-c-switch__toggle) {
+ outline: none !important;
+ box-shadow: none !important;
+}
+
+.toggle {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 42px;
+ border: 1px solid #b8bbbe;
+ border-radius: 4px;
+ padding: 0;
+ background: #ffffff;
+ cursor: text;
+ box-sizing: border-box;
+ transition: border-color 0.15s;
+}
+.toggle:focus-within {
+ border-color: var(--blue, #0066cc);
+}
+.toggleOpen {
+ border-radius: 4px 4px 0 0;
+ border-color: var(--blue, #0066cc);
+}
+
+.input {
+ flex: 1;
+ height: 100%;
+ border: none;
+ outline: none;
+ padding: 0 0 0 12px;
+ font-size: 14px;
+ font-family: var(--sans);
+ color: var(--t, #151515);
+ background: transparent;
+ min-width: 0;
+}
+.input::placeholder {
+ color: #6a6e73;
+}
+
+.chevron {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 100%;
+ cursor: pointer;
+ color: #6a6e73;
+ flex-shrink: 0;
+ transition: transform 0.2s;
+}
+.chevronOpen {
+ transform: rotate(180deg);
+}
+
+.clear {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 100%;
+ cursor: pointer;
+ color: #6a6e73;
+ border: none;
+ background: none;
+ padding: 0;
+ flex-shrink: 0;
+}
+.clear:hover {
+ color: #151515;
+}
+
+/* ─── Dropdown panel ─── */
+.menu {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ max-height: 320px;
+ overflow-y: auto;
+ background: #ffffff;
+ border: 1px solid var(--blue, #0066cc);
+ border-top: none;
+ border-radius: 0 0 4px 4px;
+ z-index: 1000;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+ padding: 4px 0;
+}
+
+.groupLabel {
+ padding: 8px 12px 4px;
+ font-size: 11.5px;
+ font-family: var(--mono, monospace);
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: #3c3f42;
+ user-select: none;
+}
+
+.option {
+ display: flex;
+ align-items: center;
+ padding: 8px 12px;
+ font-size: 14px;
+ font-family: var(--sans);
+ color: #151515;
+ cursor: pointer;
+ user-select: none;
+}
+.option:hover,
+.optionFocused {
+ background: rgba(0, 102, 204, 0.08);
+}
+.optionSelected {
+ background: rgba(0, 102, 204, 0.12);
+ font-weight: 500;
+}
+
+.optionVendor {
+ color: #6a6e73;
+ margin-right: 2px;
+}
+.optionName {
+ color: #151515;
+}
+
+.customOption {
+ border-top: 1px solid #d2d2d2;
+ margin-top: 4px;
+ padding-top: 8px;
+ font-style: italic;
+ color: #3c3f42;
+}
+.customOptionLabel {
+ font-family: var(--mono, monospace);
+ font-size: 12px;
+ font-weight: 500;
+ color: #0066cc;
+ margin-right: 6px;
+ font-style: normal;
+}
+
+.empty {
+ padding: 12px;
+ font-size: 13px;
+ color: #6a6e73;
+ text-align: center;
+}
+
+.matchHighlight {
+ background: rgba(240, 171, 0, 0.25);
+ border-radius: 1px;
+}
+
+.helperText {
+ font-size: 12px;
+ color: var(--gc-text-3, #6a6e73);
+ margin-top: 4px;
+}
+
+.requestLink {
+ color: var(--blue, #0066cc);
+}
+.requestLink:hover {
+ text-decoration: underline;
+}
diff --git a/components/ModelComboBox/ModelComboBox.tsx b/components/ModelComboBox/ModelComboBox.tsx
new file mode 100644
index 0000000..bd05c4d
--- /dev/null
+++ b/components/ModelComboBox/ModelComboBox.tsx
@@ -0,0 +1,354 @@
+'use client'
+
+import * as React from 'react'
+import { Switch } from '@patternfly/react-core'
+import { getAppConfig } from '@/lib/app-config'
+import styles from './ModelComboBox.module.css'
+
+export interface ComboBoxItem {
+ value: string
+ label: string
+ group: string
+}
+
+interface ComboBoxProps {
+ value: string
+ onChange: (value: string) => void
+ items: ComboBoxItem[]
+ placeholder?: string
+ id?: string
+ allowCustom?: boolean
+ supportedModels?: string[]
+ hfToken?: string
+ helperText?: React.ReactNode
+}
+
+interface GroupedItems {
+ group: string
+ items: ComboBoxItem[]
+}
+
+function groupItems(items: ComboBoxItem[]): GroupedItems[] {
+ const map = new Map
()
+ for (const item of items) {
+ if (!map.has(item.group)) map.set(item.group, [])
+ map.get(item.group)!.push(item)
+ }
+ return Array.from(map, ([group, items]) => ({ group, items }))
+}
+
+function highlightMatch(text: string, query: string) {
+ if (!query) return <>{text}
+ const idx = text.toLowerCase().indexOf(query.toLowerCase())
+ if (idx < 0) return <>{text}
+ return (
+ <>
+ {text.slice(0, idx)}
+ {text.slice(idx, idx + query.length)}
+ {text.slice(idx + query.length)}
+
+ )
+}
+
+function suggestedNames(): string {
+ const names = getAppConfig().suggestedModelNames
+ return names.length > 0 ? names.join(', ') : 'Nemotron, DeepSeek V4, Gemma 4, Kimi'
+}
+
+export function ComboBox({ value, onChange, items, placeholder, id, allowCustom = false, supportedModels, hfToken, helperText }: ComboBoxProps) {
+ const [open, setOpen] = React.useState(false)
+ const [filter, setFilter] = React.useState('')
+ const [supportedOnly, setSupportedOnly] = React.useState(false)
+ const prevModel = React.useRef(value)
+ const [focusIndex, setFocusIndex] = React.useState(-1)
+ const wrapperRef = React.useRef(null)
+ const inputRef = React.useRef(null)
+ const menuRef = React.useRef(null)
+
+ const validatedItems = React.useMemo(() =>
+ supportedModels ? items.filter(i => supportedModels.includes(i.value)) : items,
+ [items, supportedModels])
+
+ const activeItems = supportedOnly ? validatedItems : items
+
+ const handleToggle = (_: React.FormEvent, checked: boolean) => {
+ setSupportedOnly(checked)
+ if (checked) {
+ prevModel.current = value
+ if (!supportedModels?.includes(value) && validatedItems.length > 0) {
+ onChange(validatedItems[0].value)
+ }
+ } else {
+ onChange(prevModel.current)
+ }
+ }
+
+ const selectedItem = activeItems.find(i => i.value === value)
+ const displayValue = open ? filter : (selectedItem?.label ?? value)
+
+ const filtered = React.useMemo(() => {
+ if (!filter) return activeItems
+ const q = filter.toLowerCase()
+ return activeItems.filter(i =>
+ i.label.toLowerCase().includes(q) ||
+ i.value.toLowerCase().includes(q) ||
+ i.group.toLowerCase().includes(q)
+ )
+ }, [activeItems, filter])
+
+ const groups = React.useMemo(() => groupItems(filtered), [filtered])
+
+ const flatItems = React.useMemo(() => {
+ const flat: ComboBoxItem[] = []
+ for (const g of groups) flat.push(...g.items)
+ return flat
+ }, [groups])
+
+ const exactMatch = items.some(i => i.value.toLowerCase() === filter.toLowerCase() || i.label.toLowerCase() === filter.toLowerCase())
+ const showCustom = allowCustom && open && filter.trim() && !exactMatch
+
+ React.useEffect(() => {
+ function handleClickOutside(e: MouseEvent) {
+ if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+ setOpen(false)
+ setFilter('')
+ setFocusIndex(-1)
+ }
+ }
+ document.addEventListener('mousedown', handleClickOutside)
+ return () => document.removeEventListener('mousedown', handleClickOutside)
+ }, [])
+
+ React.useEffect(() => {
+ if (open && focusIndex >= 0 && menuRef.current) {
+ const item = menuRef.current.querySelector(`[data-index="${focusIndex}"]`)
+ item?.scrollIntoView({ block: 'nearest' })
+ }
+ }, [open, focusIndex])
+
+ function select(val: string) {
+ onChange(val)
+ setOpen(false)
+ setFilter('')
+ setFocusIndex(-1)
+ inputRef.current?.blur()
+ }
+
+ function handleInputChange(e: React.ChangeEvent) {
+ setFilter(e.target.value)
+ setFocusIndex(-1)
+ if (!open) setOpen(true)
+ }
+
+ function handleInputFocus() {
+ setOpen(true)
+ setFilter('')
+ }
+
+ function handleKeyDown(e: React.KeyboardEvent) {
+ const totalItems = flatItems.length + (showCustom ? 1 : 0)
+
+ switch (e.key) {
+ case 'ArrowDown':
+ e.preventDefault()
+ if (totalItems === 0) { if (!open) setOpen(true); break }
+ setFocusIndex(prev => (prev + 1) % totalItems)
+ if (!open) setOpen(true)
+ break
+ case 'ArrowUp':
+ e.preventDefault()
+ if (totalItems === 0) { if (!open) setOpen(true); break }
+ setFocusIndex(prev => (prev <= 0 ? totalItems - 1 : prev - 1))
+ if (!open) setOpen(true)
+ break
+ case 'Enter':
+ e.preventDefault()
+ if (focusIndex >= 0 && focusIndex < flatItems.length) {
+ select(flatItems[focusIndex].value)
+ } else if (focusIndex === flatItems.length && showCustom) {
+ select(filter.trim())
+ } else if (allowCustom && filter.trim()) {
+ select(filter.trim())
+ } else if (flatItems.length === 1) {
+ select(flatItems[0].value)
+ }
+ break
+ case 'Escape':
+ setOpen(false)
+ setFilter('')
+ setFocusIndex(-1)
+ inputRef.current?.blur()
+ break
+ case 'Tab':
+ setOpen(false)
+ setFilter('')
+ setFocusIndex(-1)
+ break
+ }
+ }
+
+ function handleClear(e: React.MouseEvent) {
+ e.stopPropagation()
+ onChange('')
+ setFilter('')
+ setFocusIndex(-1)
+ inputRef.current?.focus()
+ }
+
+ function handleChevronClick(e: React.MouseEvent) {
+ e.stopPropagation()
+ if (open) {
+ setOpen(false)
+ setFilter('')
+ setFocusIndex(-1)
+ } else {
+ setOpen(true)
+ setFilter('')
+ inputRef.current?.focus()
+ }
+ }
+
+ return (
+
+
+
+ {supportedModels && (
+
+ )}
+
+
+
+
= 0 ? `opt-${focusIndex}` : undefined}
+ />
+ {value && !open && (
+
+ )}
+
+
+
+ {open && (
+
+ {groups.length === 0 && !showCustom && (
+
No matches
+ )}
+
+ {groups.map(group => (
+
+ {group.group && (
+ {group.group}
+ )}
+ {group.items.map(item => {
+ const idx = flatItems.indexOf(item)
+ const isSelected = item.value === value
+ const isFocused = idx === focusIndex
+ return (
+ { e.preventDefault(); select(item.value) }}
+ onMouseEnter={() => setFocusIndex(idx)}
+ >
+
+ {highlightMatch(item.label, filter)}
+
+
+ )
+ })}
+
+ ))}
+
+ {showCustom && (
+
{ e.preventDefault(); select(filter.trim()) }}
+ onMouseEnter={() => setFocusIndex(flatItems.length)}
+ >
+ Use:
+ {filter.trim()}
+
+ )}
+
+ )}
+
+
+ {supportedModels && (
+
+ {helperText ?? (supportedOnly ? (
+
Tested: {suggestedNames()}, ... — type to autocomplete
+ ) : (
+ <>
+
Tested: {suggestedNames()}, ... — type to autocomplete
+ {value && !supportedModels.includes(value) && getAppConfig().modelRequestUrl && (
+
+ )}
+ {hfToken ? (
+
HF token active
+ ) : (
+
+ )}
+
+ )
+ )}
+
+ )}
+
+
+
+
diff --git a/components/ui/ModelInput.module.css b/components/ui/ModelInput.module.css
index b3dd0dc..64bc93a 100644
--- a/components/ui/ModelInput.module.css
+++ b/components/ui/ModelInput.module.css
@@ -31,11 +31,11 @@
--pf-v5-c-switch__toggle--Width: 32px !important;
--pf-v5-c-switch__toggle--Height: 16px !important;
--pf-v5-c-switch__toggle--BorderRadius: 9px !important;
- font-size: 11px !important;
+ font-size: 11.5px !important;
}
.wrapper :global(.pf-v5-c-switch__label) {
- font-size: 11px !important;
+ font-size: 11.5px !important;
font-weight: 500;
}
diff --git a/lib/app-config.ts b/lib/app-config.ts
index 44fd81e..41ef1fc 100644
--- a/lib/app-config.ts
+++ b/lib/app-config.ts
@@ -6,6 +6,7 @@ export interface AppConfig {
defaultBackend: string;
backendVersions: Record
;
supportedModels: string[];
+ supportedSystems: string[];
suggestedModelNames: string[];
modelRequestUrl: string;
}
@@ -23,6 +24,7 @@ const FALLBACK: AppConfig = {
'sglang': '0.5.17',
},
supportedModels: [],
+ supportedSystems: [],
suggestedModelNames: [],
modelRequestUrl: '',
};
@@ -43,6 +45,7 @@ export async function loadAppConfig(): Promise {
defaultBackend: data.defaultBackend ?? FALLBACK.defaultBackend,
backendVersions: data.backendVersions ?? FALLBACK.backendVersions,
supportedModels: data.supportedModels ?? FALLBACK.supportedModels,
+ supportedSystems: data.supportedSystems ?? FALLBACK.supportedSystems,
suggestedModelNames: data.suggestedModelNames ?? FALLBACK.suggestedModelNames,
modelRequestUrl: data.modelRequestUrl ?? FALLBACK.modelRequestUrl,
};
diff --git a/public/config.json b/public/config.json
index 76e5a6b..0afcb3e 100644
--- a/public/config.json
+++ b/public/config.json
@@ -10,6 +10,10 @@
"sglang": "0.5.17"
},
"suggestedModelNames": ["Gemma 4", "Nemotron Super", "DeepSeek V4", "Kimi K3"],
+ "supportedSystems": [
+ "h200_sxm",
+ "b200_sxm"
+ ],
"supportedModels": [
"google/gemma-4-26B-A4B",
"nvidia/Llama-3_3-Nemotron-Super-49B-v1",