{ e.target.style.display = "none"; }}
+ />
+ );
+}
+
+// ── Category Icon ──
+function CategoryIcon({ category, size = 14 }) {
+ const def = CATEGORY_DEFS[category];
+ if (!def) return null;
+ return (
+ 
{ e.target.style.display = "none"; }}
+ />
+ );
+}
+
+// ── Model Browser ──
+export default function ModelBrowser({
+ currentBlockType,
+ currentBlockName,
+ currentModelPath,
+ onSelectModel,
+ onClose,
+}) {
+ const [activeTab, setActiveTab] = useState("All");
+ const [searchQuery, setSearchQuery] = useState("");
+ const [loadedModels, setLoadedModels] = useState([]);
+ const [favorites, setFavorites] = useState(() => {
+ try {
+ const saved = localStorage.getItem("helix_model_favorites");
+ return saved ? JSON.parse(saved) : [];
+ } catch { return []; }
+ });
+ const searchRef = useRef(null);
+
+ // Load installed NAM / IR models from API
+ useEffect(() => {
+ let cancelled = false;
+ const load = async () => {
+ try {
+ const data = await fetch("/api/models").then(r => r.json());
+ if (!cancelled) setLoadedModels(data.models || []);
+ } catch {}
+ };
+ load();
+ return () => { cancelled = true; };
+ }, []);
+
+ // Save favorites
+ const toggleFav = useCallback((id) => {
+ setFavorites(prev => {
+ const next = prev.includes(id) ? prev.filter(f => f !== id) : [...prev, id];
+ localStorage.setItem("helix_model_favorites", JSON.stringify(next));
+ return next;
+ });
+ }, []);
+
+ // ── Determine current model ID for highlight ──
+ const currentModelId = currentModelPath
+ ? currentModelPath
+ : currentBlockType
+ ? `builtin:${currentBlockType}`
+ : null;
+
+ // ── Build model list ──
+ const allModels = useMemo(() => {
+ const list = [];
+
+ // Built-in block types
+ for (const m of BUILTIN_MODELS) {
+ list.push({
+ id: `builtin:${m.type}`,
+ type: m.type,
+ name: m.name,
+ category: m.category,
+ desc: m.desc,
+ isBuiltin: true,
+ iconType: m.type,
+ });
+ }
+
+ // Installed NAM models — map to Amps category
+ for (const m of loadedModels) {
+ const label = m.name || m.filename || "Unnamed Model";
+ list.push({
+ id: `nam:${label}`,
+ type: "nam",
+ name: label,
+ category: "Amps",
+ desc: m.architecture ? `${m.architecture} · ${m.size_mb}MB` : "Installed NAM model",
+ isBuiltin: false,
+ loaded: m.loaded,
+ modelPath: m.path || m.filename,
+ iconType: "nam",
+ });
+ }
+
+ return list;
+ }, [loadedModels]);
+
+ // ── Filter by tab & search ──
+ const visibleCategories = useMemo(() => {
+ if (activeTab === "All") {
+ const cats = [...CATEGORY_ORDER];
+ // Only show non-empty + visible categories
+ return cats.filter(c => {
+ if (CATEGORY_HIDE.includes(c)) {
+ // Only show hidden categories if they have installed models
+ return allModels.some(m => m.category === c && !m.isBuiltin);
+ }
+ return allModels.some(m => m.category === c);
+ });
+ }
+ if (activeTab === "★Favorites") return [];
+ return [activeTab];
+ }, [activeTab, allModels]);
+
+ const filteredModels = useMemo(() => {
+ let list = allModels;
+
+ // Tab filter
+ if (activeTab === "★Favorites") {
+ list = list.filter(m => favorites.includes(m.id));
+ } else if (activeTab !== "All") {
+ list = list.filter(m => m.category === activeTab);
+ }
+
+ // Search filter
+ if (searchQuery.trim()) {
+ const q = searchQuery.toLowerCase();
+ list = list.filter(m =>
+ m.name.toLowerCase().includes(q) ||
+ m.type.toLowerCase().includes(q) ||
+ (m.desc || "").toLowerCase().includes(q) ||
+ (m.category || "").toLowerCase().includes(q)
+ );
+ }
+
+ return list;
+ }, [allModels, activeTab, searchQuery, favorites]);
+
+ const groupedByCategory = useMemo(() => {
+ if (activeTab !== "All" && activeTab !== "★Favorites") return null;
+ const groups = {};
+ for (const m of filteredModels) {
+ if (!groups[m.category]) groups[m.category] = [];
+ groups[m.category].push(m);
+ }
+ return groups;
+ }, [filteredModels, activeTab]);
+
+ // ── Handle model selection ──
+ const handleSelect = useCallback((model) => {
+ onSelectModel?.({
+ type: model.type,
+ name: model.name,
+ modelPath: model.isBuiltin ? null : model.modelPath || model.id,
+ isBuiltin: model.isBuiltin,
+ });
+ onClose?.();
+ }, [onSelectModel, onClose]);
+
+ // ── Handle tab selection ──
+ const tabs = ["All", "★Favorites", ...CATEGORY_ORDER.filter(c => {
+ // Only show categories that have models
+ if (CATEGORY_HIDE.includes(c)) {
+ return allModels.some(m => m.category === c && !m.isBuiltin);
+ }
+ return allModels.some(m => m.category === c);
+ })];
+
+ return (
+ { e.stopPropagation(); onToggleFav(); }}
+ style={{
+ position: "absolute", top: 4, right: 4,
+ fontSize: 13, cursor: "pointer", zIndex: 2,
+ color: isFavorite ? T.amber : T.textDim,
+ textShadow: isFavorite ? `0 0 4px ${T.amber}` : "none",
+ transition: "all .15s",
+ lineHeight: 1,
+ }}>
+ {isFavorite ? "★" : "☆"}
+
+
+ {/* Model icon */}
+
+ {!imgError ? (
+ 
setImgError(true)}
+ />
+ ) : (
+
+ {model.name.charAt(0)}
+
+ )}
+
+
+ {/* Model name */}
+
+ {model.name}
+
+
+ {/* Type badge */}
+
+
+ {model.type.replace(/_/g, " ")}
+
+
+
+ {/* Description */}
+ {model.desc && (
+
+ {model.desc}
+
+ )}
+
+ {/* Current indicator */}
+ {isCurrent && (
+
+ )}
+