From 78b2bc3dbc98b9ffcc8f0a8916f757f7f16ff73d Mon Sep 17 00:00:00 2001
From: Benson Wong <mostlygeek@gmail.com>
Date: Wed, 2 Jul 2025 16:14:20 -0700
Subject: [PATCH] add toggle to hide/show unlisted models (#187)

---
 proxy/proxymanager_api.go       |  2 ++
 ui/src/contexts/APIProvider.tsx | 10 ++++------
 ui/src/pages/Models.tsx         | 24 ++++++++++++++++++------
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/proxy/proxymanager_api.go b/proxy/proxymanager_api.go
index e40582a..f2b30bd 100644
--- a/proxy/proxymanager_api.go
+++ b/proxy/proxymanager_api.go
@@ -15,6 +15,7 @@ type Model struct {
 	Name        string `json:"name"`
 	Description string `json:"description"`
 	State       string `json:"state"`
+	Unlisted    bool   `json:"unlisted"`
 }
 
 func addApiHandlers(pm *ProxyManager) {
@@ -72,6 +73,7 @@ func (pm *ProxyManager) getModelStatus() []Model {
 			Name:        pm.config.Models[modelID].Name,
 			Description: pm.config.Models[modelID].Description,
 			State:       state,
+			Unlisted:    pm.config.Models[modelID].Unlisted,
 		})
 	}
 
diff --git a/ui/src/contexts/APIProvider.tsx b/ui/src/contexts/APIProvider.tsx
index fea35c3..e3b11bf 100644
--- a/ui/src/contexts/APIProvider.tsx
+++ b/ui/src/contexts/APIProvider.tsx
@@ -8,6 +8,7 @@ export interface Model {
   state: ModelStatus;
   name: string;
   description: string;
+  unlisted: boolean;
 }
 
 interface APIProviderType {
@@ -58,7 +59,6 @@ export function APIProvider({ children }: APIProviderProps) {
     }
 
     let retryCount = 0;
-    const maxRetries = 3;
     const initialDelay = 1000; // 1 second
 
     const connect = () => {
@@ -93,11 +93,9 @@ export function APIProvider({ children }: APIProviderProps) {
       };
       eventSource.onerror = () => {
         eventSource.close();
-        if (retryCount < maxRetries) {
-          retryCount++;
-          const delay = initialDelay * Math.pow(2, retryCount - 1);
-          setTimeout(connect, delay);
-        }
+        retryCount++;
+        const delay = Math.min(initialDelay * Math.pow(2, retryCount - 1), 5000);
+        setTimeout(connect, delay);
       };
 
       apiEventSource.current = eventSource;
diff --git a/ui/src/pages/Models.tsx b/ui/src/pages/Models.tsx
index 1fd8bee..0c1ad7b 100644
--- a/ui/src/pages/Models.tsx
+++ b/ui/src/pages/Models.tsx
@@ -2,10 +2,16 @@ import { useState, useEffect, useCallback, useMemo } from "react";
 import { useAPI } from "../contexts/APIProvider";
 import { LogPanel } from "./LogViewer";
 import { processEvalTimes } from "../lib/Utils";
+import { usePersistentState } from "../hooks/usePersistentState";
 
 export default function ModelsPage() {
   const { models, unloadAllModels, loadModel, upstreamLogs, enableAPIEvents } = useAPI();
   const [isUnloading, setIsUnloading] = useState(false);
+  const [showUnlisted, setShowUnlisted] = usePersistentState("showUnlisted", true);
+
+  const filteredModels = useMemo(() => {
+    return models.filter((model) => showUnlisted || !model.unlisted);
+  }, [models, showUnlisted]);
 
   useEffect(() => {
     enableAPIEvents(true);
@@ -39,9 +45,15 @@ export default function ModelsPage() {
         <div className="w-full md:w-1/2 flex items-top">
           <div className="card w-full">
             <h2 className="">Models</h2>
-            <button className="btn" onClick={handleUnloadAllModels} disabled={isUnloading}>
-              {isUnloading ? "Unloading..." : "Unload All Models"}
-            </button>
+            <div className="flex justify-between">
+              <button className="btn" onClick={() => setShowUnlisted(!showUnlisted)} style={{ lineHeight: "1.2" }}>
+                {showUnlisted ? "🟢 unlisted" : "⚫️ unlisted"}
+              </button>
+              <button className="btn" onClick={handleUnloadAllModels} disabled={isUnloading}>
+                {isUnloading ? "Stopping ..." : "Stop All"}
+              </button>
+            </div>
+
             <table className="w-full mt-4">
               <thead>
                 <tr className="border-b border-primary">
@@ -51,7 +63,7 @@ export default function ModelsPage() {
                 </tr>
               </thead>
               <tbody>
-                {models.map((model) => (
+                {filteredModels.map((model) => (
                   <tr key={model.id} className="border-b hover:bg-secondary-hover border-border">
                     <td className="p-2">
                       <a href={`/upstream/${model.id}/`} className="underline" target="_blank">
@@ -63,7 +75,7 @@ export default function ModelsPage() {
                         </p>
                       )}
                     </td>
-                    <td className="p-2">
+                    <td className="p-2 w-[50px]">
                       <button
                         className="btn btn--sm"
                         disabled={model.state !== "stopped"}
@@ -72,7 +84,7 @@ export default function ModelsPage() {
                         Load
                       </button>
                     </td>
-                    <td className="p-2">
+                    <td className="p-2 w-[75px]">
                       <span className={`status status--${model.state}`}>{model.state}</span>
                     </td>
                   </tr>