feat(hf): OllaBridge provider class across all Model Type tabs

.gitattributes

@@ -1,9 +1,9 @@
-*.jpg filter=lfs diff=lfs merge=lfs -text
 *.jpeg filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
 *.svg filter=lfs diff=lfs merge=lfs -text
 *.ico filter=lfs diff=lfs merge=lfs -text
+*.hpersona filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
-*.webp filter=lfs diff=lfs merge=lfs -text
 *.woff filter=lfs diff=lfs merge=lfs -text
-*.woff2 filter=lfs diff=lfs merge=lfs -text
-*.hpersona filter=lfs diff=lfs merge=lfs -text

frontend/.cache-bust

@@ -1 +1 @@
-1783228502
+1783229390

frontend/src/ui/Models.tsx

@@ -588,6 +588,10 @@ export default function ModelsView(props: ModelsParams) {
 
   const [modelType, setModelType] = useState<'chat' | 'multimodal' | 'image' | 'video' | 'edit' | 'enhance' | 'addons' | 'lora'>('chat')
   const [provider, setProvider] = useState<string>(props.providerChat || 'ollama')
+  // Latest provider for effects that only depend on [modelType] but must not
+  // clobber a manual OllaBridge selection when the user switches tabs.
+  const providerRef = React.useRef(provider)
+  React.useEffect(() => { providerRef.current = provider }, [provider])
 
   const defaultBaseUrl = useMemo(() => {
     if (modelType === 'chat') return props.baseUrlChat || ''
@@ -660,14 +664,18 @@ export default function ModelsView(props: ModelsParams) {
 
   // Filter providers based on model type
   const availableProviders = useMemo(() => {
+    // OllaBridge is a provider *class* available under EVERY Model Type — its
+    // models come from the user's linked HomePilot / GPU nodes (relay-synced),
+    // so web & mobile can use remote compute. Listed first as the hero option.
+    const ollabridge: Provider = { name: 'ollabridge', label: '☁️ OllaBridge (your nodes)', kind: modelType as any }
     if (modelType === 'chat') {
       // For chat: all providers EXCEPT comfyui and civitai
-      return providers.filter(p => p.name !== 'comfyui' && p.name !== 'civitai')
+      return [ollabridge, ...providers.filter(p => p.name !== 'comfyui' && p.name !== 'civitai')]
     } else if (modelType === 'multimodal') {
-      // Multimodal: only Ollama (vision models run locally)
-      return providers.filter(p => p.name === 'ollama')
+      // Multimodal: Ollama (vision models run locally) + OllaBridge nodes
+      return [ollabridge, ...providers.filter(p => p.name === 'ollama')]
     } else {
-      // For image/video/edit/enhance: comfyui + civitai (if experimental enabled)
+      // For image/video/edit/enhance/lora/addons: comfyui + civitai (if experimental) + OllaBridge
       const filtered = providers.filter(p => p.name === 'comfyui')
 
       // Add Civitai only for image/video (Civitai API only supports these types)
@@ -679,11 +687,14 @@ export default function ModelsView(props: ModelsParams) {
         })
       }
 
-      return filtered
+      return [ollabridge, ...filtered]
     }
   }, [providers, modelType, props.experimentalCivitai])
 
   useEffect(() => {
+    // Keep OllaBridge selected across Model Type tabs — it spans all types and
+    // its content is type-filtered, so don't reset it to a local provider.
+    if (providerRef.current === 'ollabridge') return
     // When modelType changes, update provider + baseUrl defaults
     if (modelType === 'chat') {
       // Switch to a chat provider (prefer the one from settings, or default to ollama)
@@ -762,7 +773,9 @@ export default function ModelsView(props: ModelsParams) {
     // Skip fetching installed models for remote API providers and Civitai
     // Remote providers: they're cloud services, not local installations
     // Civitai: download-only provider, models get installed to ComfyUI after download
-    const skipProviders = ['openai', 'claude', 'watsonx', 'civitai']
+    // OllaBridge renders its own relay-synced list; the local backend has no
+    // catalog for it, so skip the fetch (avoids a spurious error banner).
+    const skipProviders = ['openai', 'claude', 'watsonx', 'civitai', 'ollabridge']
 
     if (skipProviders.includes(provider)) {
       setInstalled([])
@@ -2060,9 +2073,14 @@ export default function ModelsView(props: ModelsParams) {
       {/* Body */}
       <div className="flex-1 overflow-y-auto px-4 sm:px-8 py-6 scrollbar-hide">
         <div className="flex flex-col gap-4 max-w-7xl mx-auto">
-          {/* OllaBridge provider class — models synced from the user's linked
-              HomePilot / GPU nodes, usable from web & mobile via the relay. */}
-          <OllaBridgeModels />
+          {/* OllaBridge provider class — a special provider whose models are
+              synced from the user's linked HomePilot / GPU nodes (relay), shown
+              for whichever Model Type tab is active. When selected it replaces
+              the local catalog for this tab. */}
+          {provider === 'ollabridge' ? (
+            <OllaBridgeModels filterType={modelType} />
+          ) : (
+          <>
           {/* Error messages - hide for Civitai since it's download-only */}
           {installedError && provider !== 'civitai' ? (
             <div className={`rounded-xl border p-5 ${
@@ -3061,6 +3079,8 @@ export default function ModelsView(props: ModelsParams) {
               )}
             </div>
           )}
+          </>
+          )}
         </div>
       </div>
 

frontend/src/ui/components/OllaBridgeModels.tsx

@@ -58,18 +58,39 @@ interface CloudModel {
   device_name?: string
 }
 
-/** Loose model-type guess from the model id — purely cosmetic badges. */
+/** Loose model-type guess from the model id — drives badges + per-tab filter. */
 function guessType(id: string): string {
   const s = id.toLowerCase()
   if (/(llava|vision|-vl|minicpm-v|moondream)/.test(s)) return 'multimodal'
   if (/(sdxl|flux|stable-diffusion|sd15|sd3|pony|dreamshaper)/.test(s)) return 'image'
   if (/(svd|ltx|wan|video)/.test(s)) return 'video'
-  if (/(upscal|esrgan|enhance|restore)/.test(s)) return 'enhance'
+  if (/(upscal|esrgan|enhance|restore|gfpgan|codeformer)/.test(s)) return 'enhance'
   if (/lora/.test(s)) return 'LoRA'
   return 'chat'
 }
 
-export default function OllaBridgeModels() {
+/** Does a model's guessed type belong under the given Model Type tab? */
+function matchesTab(filterType: string | undefined, guessed: string): boolean {
+  if (!filterType) return true
+  switch (filterType) {
+    case 'chat': return guessed === 'chat'
+    case 'multimodal': return guessed === 'multimodal'
+    case 'image':
+    case 'edit': return guessed === 'image'
+    case 'video': return guessed === 'video'
+    case 'enhance': return guessed === 'enhance'
+    case 'lora': return guessed === 'LoRA'
+    case 'addons': return true
+    default: return true
+  }
+}
+
+const TAB_LABEL: Record<string, string> = {
+  chat: 'chat', multimodal: 'multimodal', image: 'image', edit: 'edit',
+  video: 'video', enhance: 'enhance', lora: 'LoRA', addons: 'add-on',
+}
+
+export default function OllaBridgeModels({ filterType }: { filterType?: string } = {}) {
   const cloudUrl = getCloudUrl()
   const [token, setToken] = useState(getCloudToken())
   const [devices, setDevices] = useState<DeviceInfo[]>([])
@@ -267,10 +288,22 @@ export default function OllaBridgeModels() {
             ))}
           </div>
 
-          {/* Synced models */}
-          {models.length > 0 && (
+          {/* Synced models — filtered to the active Model Type tab. */}
+          {(() => {
+            const shown = models.filter((m) => matchesTab(filterType, guessType(m.id)))
+            if (shown.length === 0) {
+              if (loading || devices.length === 0) return null
+              const lbl = filterType ? (TAB_LABEL[filterType] || filterType) : ''
+              return (
+                <p className="text-xs text-white/40 py-1">
+                  No {lbl} models advertised by your nodes yet. Pull {lbl} models on your linked
+                  HomePilot and they’ll sync here automatically.
+                </p>
+              )
+            }
+            return (
             <div className="grid gap-1.5">
-              {models.slice(0, 30).map((m) => {
+              {shown.slice(0, 40).map((m) => {
                 const own = m.source === 'shared_device'
                 const type = guessType(m.id)
                 const isActive = activeModel === m.id
@@ -290,26 +323,28 @@ export default function OllaBridgeModels() {
                         GPU node
                       </span>
                     )}
-                    <button
-                      type="button"
-                      onClick={() => useForChat(m.id)}
-                      className={[
-                        'shrink-0 h-8 px-3 rounded-lg text-xs font-semibold inline-flex items-center gap-1.5 transition-colors',
-                        isActive
-                          ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30'
-                          : 'bg-white/5 hover:bg-white/10 border border-white/10 text-white/70 hover:text-white',
-                      ].join(' ')}
-                    >
-                      <Zap size={12} /> {isActive ? 'Active' : 'Use for Chat'}
-                    </button>
+                    {(type === 'chat' || type === 'multimodal') ? (
+                      <button
+                        type="button"
+                        onClick={() => useForChat(m.id)}
+                        className={[
+                          'shrink-0 h-8 px-3 rounded-lg text-xs font-semibold inline-flex items-center gap-1.5 transition-colors',
+                          isActive
+                            ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30'
+                            : 'bg-white/5 hover:bg-white/10 border border-white/10 text-white/70 hover:text-white',
+                        ].join(' ')}
+                      >
+                        <Zap size={12} /> {isActive ? 'Active' : 'Use for Chat'}
+                      </button>
+                    ) : (
+                      <span className="shrink-0 text-[10px] text-white/40 px-2 py-1 rounded-md bg-white/5 border border-white/10">Synced</span>
+                    )}
                   </div>
                 )
               })}
             </div>
-          )}
-          {!loading && token && models.length === 0 && devices.length > 0 && (
-            <p className="text-xs text-white/40">No models advertised by your nodes yet — make sure the connector is running and models are pulled.</p>
-          )}
+            )
+          })()}
         </>
       )}
     </section>