add tokens processed to ui models page

Model alias values are not properly resolved and work in upstream/ path.

Related to #229.

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,11 +1,13 @@
 ---
 name: Bug Report
-about: Something is not working as expected...
+about: I found a defect
 title: ''
 labels: bug
 assignees: ''
 
 ---
+> [!IMPORTANT]
+> If you have questions about llama-swap please post in the Q&A in Discussions. Use bug reports when you've found a defect and wish to discuss a fix.
 
 **Describe the bug**
 A clear and concise description of what the bug is.

.github/workflows/go-ci.yml

@@ -22,6 +22,13 @@ jobs:
       with:
         go-version: '1.23'
 
+    # Only run in this linux based runner
+    - name: Check Formatting
+      run: |
+        if [ "$(gofmt -l . | grep -v 'event/.*_test.go' | wc -l)" -gt 0 ]; then
+          gofmt -l . | grep -v 'event/.*_test.go'
+          exit 1
+        fi
     # cache simple-responder to save the build time
     - name: Restore Simple Responder
       id: restore-simple-responder

Makefile

@@ -45,6 +45,7 @@ mac: ui
 linux: ui
 	@echo "Building Linux binary..."
 	GOOS=linux GOARCH=amd64 go build -ldflags="-X main.commit=${GIT_HASH} -X main.version=local_${GIT_HASH} -X main.date=${BUILD_DATE}" -o $(BUILD_DIR)/$(APP_NAME)-linux-amd64
+	GOOS=linux GOARCH=arm64 go build -ldflags="-X main.commit=${GIT_HASH} -X main.version=local_${GIT_HASH} -X main.date=${BUILD_DATE}" -o $(BUILD_DIR)/$(APP_NAME)-linux-arm64
 
 # Build Windows binary
 windows: ui

README.md

@@ -36,7 +36,7 @@ Written in golang, it is very easy to install (single binary with no dependencie
 
 ## How does llama-swap work?
 
-When a request is made to an OpenAI compatible endpoint, lama-swap will extract the `model` value and load the appropriate server configuration to serve it. If the wrong upstream server is running, it will be replaced with the correct one. This is where the "swap" part comes in. The upstream server is automatically swapped to the correct one to serve the request.
+When a request is made to an OpenAI compatible endpoint, llama-swap will extract the `model` value and load the appropriate server configuration to serve it. If the wrong upstream server is running, it will be replaced with the correct one. This is where the "swap" part comes in. The upstream server is automatically swapped to the correct one to serve the request.
 
 In the most basic configuration llama-swap handles one model at a time. For more advanced use cases, the `groups` feature allows multiple models to be loaded at the same time. You have complete control over how your system resources are used.
 
@@ -161,7 +161,7 @@ Binaries are available for Linux, Mac, Windows and FreeBSD. These are automatica
 ### Building from source
 
 1. Build requires golang and nodejs for the user interface.
-1. `git clone git@github.com:mostlygeek/llama-swap.git`
+1. `git clone https://github.com/mostlygeek/llama-swap.git`
 1. `make clean all`
 1. Binaries will be in `build/` subdirectory
 
@@ -197,13 +197,6 @@ Any OpenAI compatible server would work. llama-swap was originally designed for
 
 For Python based inference servers like vllm or tabbyAPI it is recommended to run them via podman or docker. This provides clean environment isolation as well as responding correctly to `SIGTERM` signals to shutdown.
 
-## Contributors 
-<a href="https://github.com/mostlygeek/llama-swap/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=mostlygeek/llama-swap" />
-</a>
-
-Made with [contrib.rocks](https://contrib.rocks).
-
 ## Star History
 
 [![Star History Chart](https://api.star-history.com/svg?repos=mostlygeek/llama-swap&type=Date)](https://www.star-history.com/#mostlygeek/llama-swap&Date)

llama-swap.go

@@ -132,6 +132,11 @@ func main() {
 						event.Emit(proxy.ConfigFileChangedEvent{
 							ReloadingState: proxy.ReloadingStateStart,
 						})
+					} else if changeEvent.Name == filepath.Join(configDir, "..data") && changeEvent.Has(fsnotify.Create) {
+						// the change for k8s configmap
+						event.Emit(proxy.ConfigFileChangedEvent{
+							ReloadingState: proxy.ReloadingStateStart,
+						})
 					}
 
 				case err := <-watcher.Errors:

proxy/proxymanager.go

@@ -8,6 +8,7 @@ import (
 	"mime/multipart"
 	"net/http"
 	"os"
+	"sort"
 	"strconv"
 	"strings"
 	"sync"
@@ -333,6 +334,13 @@ func (pm *ProxyManager) listModelsHandler(c *gin.Context) {
 		data = append(data, record)
 	}
 
+	// Sort by the "id" key
+	sort.Slice(data, func(i, j int) bool {
+		si, _ := data[i]["id"].(string)
+		sj, _ := data[j]["id"].(string)
+		return si < sj
+	})
+
 	// Set CORS headers if origin exists
 	if origin := c.GetHeader("Origin"); origin != "" {
 		c.Header("Access-Control-Allow-Origin", origin)
@@ -353,7 +361,7 @@ func (pm *ProxyManager) proxyToUpstream(c *gin.Context) {
 		return
 	}
 
-	processGroup, _, err := pm.swapProcessGroup(requestedModel)
+	processGroup, realModelName, err := pm.swapProcessGroup(requestedModel)
 	if err != nil {
 		pm.sendErrorResponse(c, http.StatusInternalServerError, fmt.Sprintf("error swapping process group: %s", err.Error()))
 		return
@@ -361,7 +369,7 @@ func (pm *ProxyManager) proxyToUpstream(c *gin.Context) {
 
 	// rewrite the path
 	c.Request.URL.Path = c.Param("upstreamPath")
-	processGroup.ProxyRequest(requestedModel, c.Writer, c.Request)
+	processGroup.ProxyRequest(realModelName, c.Writer, c.Request)
 }
 
 func (pm *ProxyManager) proxyOAIHandler(c *gin.Context) {

proxy/proxymanager_test.go

@@ -9,6 +9,7 @@ import (
 	"net/http"
 	"net/http/httptest"
 	"strconv"
+	"strings"
 	"sync"
 	"testing"
 	"time"
@@ -279,6 +280,51 @@ func TestProxyManager_ListModelsHandler(t *testing.T) {
 	assert.Empty(t, expectedModels, "not all expected models were returned")
 }
 
+func TestProxyManager_ListModelsHandler_SortedByID(t *testing.T) {
+	// Intentionally add models in non-sorted order and with an unlisted model
+	config := Config{
+		HealthCheckTimeout: 15,
+		Models: map[string]ModelConfig{
+			"zeta":  getTestSimpleResponderConfig("zeta"),
+			"alpha": getTestSimpleResponderConfig("alpha"),
+			"beta":  getTestSimpleResponderConfig("beta"),
+			"hidden": func() ModelConfig {
+				mc := getTestSimpleResponderConfig("hidden")
+				mc.Unlisted = true
+				return mc
+			}(),
+		},
+		LogLevel: "error",
+	}
+
+	proxy := New(config)
+
+	// Request models list
+	req := httptest.NewRequest("GET", "/v1/models", nil)
+	w := httptest.NewRecorder()
+	proxy.ServeHTTP(w, req)
+
+	assert.Equal(t, http.StatusOK, w.Code)
+
+	var response struct {
+		Data []map[string]interface{} `json:"data"`
+	}
+	if err := json.Unmarshal(w.Body.Bytes(), &response); err != nil {
+		t.Fatalf("Failed to parse JSON response: %v", err)
+	}
+
+	// We expect only the listed models in sorted order by id
+	expectedOrder := []string{"alpha", "beta", "zeta"}
+	if assert.Len(t, response.Data, len(expectedOrder), "unexpected number of listed models") {
+		got := make([]string, 0, len(response.Data))
+		for _, m := range response.Data {
+			id, _ := m["id"].(string)
+			got = append(got, id)
+		}
+		assert.Equal(t, expectedOrder, got, "models should be sorted by id ascending")
+	}
+}
+
 func TestProxyManager_Shutdown(t *testing.T) {
 	// make broken model configurations
 	model1Config := getTestSimpleResponderConfigPort("model1", 9991)
@@ -611,21 +657,34 @@ func TestProxyManager_CORSOptionsHandler(t *testing.T) {
 }
 
 func TestProxyManager_Upstream(t *testing.T) {
-	config := AddDefaultGroupToConfig(Config{
-		HealthCheckTimeout: 15,
-		Models: map[string]ModelConfig{
-			"model1": getTestSimpleResponderConfig("model1"),
-		},
-		LogLevel: "error",
-	})
+	configStr := fmt.Sprintf(`
+logLevel: error
+models:
+  model1:
+    cmd: %s -port ${PORT} -silent -respond model1
+    aliases: [model-alias]
+`, getSimpleResponderPath())
+
+	config, err := LoadConfigFromReader(strings.NewReader(configStr))
+	assert.NoError(t, err)
 
 	proxy := New(config)
 	defer proxy.StopProcesses(StopWaitForInflightRequest)
-	req := httptest.NewRequest("GET", "/upstream/model1/test", nil)
-	rec := httptest.NewRecorder()
-	proxy.ServeHTTP(rec, req)
-	assert.Equal(t, http.StatusOK, rec.Code)
-	assert.Equal(t, "model1", rec.Body.String())
+	t.Run("main model name", func(t *testing.T) {
+		req := httptest.NewRequest("GET", "/upstream/model1/test", nil)
+		rec := httptest.NewRecorder()
+		proxy.ServeHTTP(rec, req)
+		assert.Equal(t, http.StatusOK, rec.Code)
+		assert.Equal(t, "model1", rec.Body.String())
+	})
+
+	t.Run("model alias", func(t *testing.T) {
+		req := httptest.NewRequest("GET", "/upstream/model-alias/test", nil)
+		rec := httptest.NewRecorder()
+		proxy.ServeHTTP(rec, req)
+		assert.Equal(t, http.StatusOK, rec.Code)
+		assert.Equal(t, "model1", rec.Body.String())
+	})
 }
 
 func TestProxyManager_ChatContentLength(t *testing.T) {

ui/package-lock.json

@@ -12,6 +12,8 @@
         "@tanstack/react-query": "^5.80.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-icons": "^5.5.0",
+        "react-resizable-panels": "^3.0.4",
         "react-router-dom": "^7.6.2",
         "tailwindcss": "^4.1.8"
       },
@@ -3460,6 +3462,15 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -3470,6 +3481,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.4.tgz",
+      "integrity": "sha512-8Y4KNgV94XhUvI2LeByyPIjoUJb71M/0hyhtzkHaqpVHs+ZQs8b627HmzyhmVYi3C9YP6R+XD1KmG7hHjEZXFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-router": {
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.2.tgz",

ui/package.json

@@ -14,6 +14,8 @@
     "@tanstack/react-query": "^5.80.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
+    "react-resizable-panels": "^3.0.4",
     "react-router-dom": "^7.6.2",
     "tailwindcss": "^4.1.8"
   },
@@ -30,4 +32,4 @@
     "typescript-eslint": "^8.30.1",
     "vite": "^6.3.5"
   }
-}
+}

ui/src/App.tsx

@@ -4,16 +4,18 @@ import { APIProvider } from "./contexts/APIProvider";
 import LogViewerPage from "./pages/LogViewer";
 import ModelPage from "./pages/Models";
 import ActivityPage from "./pages/Activity";
+import { RiSunFill, RiMoonFill } from "react-icons/ri";
 
 function App() {
-  const theme = useTheme();
+  const { isNarrow, toggleTheme, isDarkMode } = useTheme();
+
   return (
     <Router basename="/ui/">
       <APIProvider>
-        <div>
+        <div className="flex flex-col h-screen">
           <nav className="bg-surface border-b border-border p-2 h-[75px]">
             <div className="flex items-center justify-between mx-auto px-4 h-full">
-              <h1 className="flex items-center p-0">llama-swap</h1>
+              {!isNarrow && <h1 className="flex items-center p-0">llama-swap</h1>}
               <div className="flex items-center space-x-4">
                 <NavLink to="/" className={({ isActive }) => (isActive ? "navlink active" : "navlink")}>
                   Logs
@@ -26,14 +28,14 @@ function App() {
                 <NavLink to="/activity" className={({ isActive }) => (isActive ? "navlink active" : "navlink")}>
                   Activity
                 </NavLink>
-                <button className="btn btn--sm" onClick={theme.toggleTheme}>
-                  {theme.isDarkMode ? "🌙" : "☀️"}
+                <button className="" onClick={toggleTheme}>
+                  {isDarkMode ? <RiMoonFill /> : <RiSunFill />}
                 </button>
               </div>
             </div>
           </nav>
 
-          <main className="mx-auto py-4 px-4">
+          <main className="flex-1 overflow-auto p-4">
             <Routes>
               <Route path="/" element={<LogViewerPage />} />
               <Route path="/models" element={<ModelPage />} />

ui/src/contexts/APIProvider.tsx

@@ -83,6 +83,12 @@ export function APIProvider({ children, autoStartAPIEvents = true }: APIProvider
             case "modelStatus":
               {
                 const models = JSON.parse(message.data) as Model[];
+
+                // sort models by name and id
+                models.sort((a, b) => {
+                  return (a.name + a.id).localeCompare(b.name + b.id);
+                });
+
                 setModels(models);
               }
               break;

ui/src/contexts/ThemeProvider.tsx

@@ -1,8 +1,11 @@
-import { createContext, useContext, useEffect, type ReactNode } from "react";
+import { createContext, useContext, useEffect, type ReactNode, useMemo, useState } from "react";
 import { usePersistentState } from "../hooks/usePersistentState";
 
+type ScreenWidth = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 type ThemeContextType = {
   isDarkMode: boolean;
+  screenWidth: ScreenWidth;
+  isNarrow: boolean;
   toggleTheme: () => void;
 };
 
@@ -14,14 +17,46 @@ type ThemeProviderProps = {
 
 export function ThemeProvider({ children }: ThemeProviderProps) {
   const [isDarkMode, setIsDarkMode] = usePersistentState<boolean>("theme", false);
+  const [screenWidth, setScreenWidth] = useState<ScreenWidth>("md"); // Default to md
+
+  // matches tailwind classes
+  // https://tailwindcss.com/docs/responsive-design
+  useEffect(() => {
+    const checkInnerWidth = () => {
+      const innerWidth = window.innerWidth;
+      if (innerWidth < 640) {
+        setScreenWidth("xs");
+      } else if (innerWidth < 768) {
+        setScreenWidth("sm");
+      } else if (innerWidth < 1024) {
+        setScreenWidth("md");
+      } else if (innerWidth < 1280) {
+        setScreenWidth("lg");
+      } else if (innerWidth < 1536) {
+        setScreenWidth("xl");
+      } else {
+        setScreenWidth("2xl");
+      }
+    };
+
+    checkInnerWidth();
+    window.addEventListener("resize", checkInnerWidth);
+
+    return () => window.removeEventListener("resize", checkInnerWidth);
+  }, []);
 
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
   }, [isDarkMode]);
 
   const toggleTheme = () => setIsDarkMode((prev) => !prev);
+  const isNarrow = useMemo(() => {
+    return screenWidth === "xs" || screenWidth === "sm" || screenWidth === "md";
+  }, [screenWidth]);
 
-  return <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>{children}</ThemeContext.Provider>;
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme, screenWidth, isNarrow }}>{children}</ThemeContext.Provider>
+  );
 }
 
 export function useTheme(): ThemeContextType {

ui/src/pages/LogViewer.tsx

@@ -1,15 +1,38 @@
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { useAPI } from "../contexts/APIProvider";
 import { usePersistentState } from "../hooks/usePersistentState";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import {
+  RiTextWrap,
+  RiAlignJustify,
+  RiFontSize,
+  RiMenuSearchLine,
+  RiMenuSearchFill,
+  RiCloseCircleFill,
+} from "react-icons/ri";
+import { useTheme } from "../contexts/ThemeProvider";
 
 const LogViewer = () => {
   const { proxyLogs, upstreamLogs } = useAPI();
+  const { isNarrow } = useTheme();
+  const direction = isNarrow ? "vertical" : "horizontal";
 
   return (
-    <div className="flex flex-col lg:flex-row gap-5" style={{ height: "calc(100vh - 125px)" }}>
-      <LogPanel id="proxy" title="Proxy Logs" logData={proxyLogs} />
-      <LogPanel id="upstream" title="Upstream Logs" logData={upstreamLogs} />
-    </div>
+    <PanelGroup direction={direction} className="gap-2" autoSaveId="logviewer-panel-group">
+      <Panel id="proxy" defaultSize={50} minSize={5} maxSize={100} collapsible={true}>
+        <LogPanel id="proxy" title="Proxy Logs" logData={proxyLogs} />
+      </Panel>
+      <PanelResizeHandle
+        className={
+          direction === "horizontal"
+            ? "w-2 h-full bg-primary hover:bg-success transition-colors rounded"
+            : "w-full h-2 bg-primary hover:bg-success transition-colors rounded"
+        }
+      />
+      <Panel id="upstream" defaultSize={50} minSize={5} maxSize={100} collapsible={true}>
+        <LogPanel id="upstream" title="Upstream Logs" logData={upstreamLogs} />
+      </Panel>
+    </PanelGroup>
   );
 };
 
@@ -17,17 +40,15 @@ interface LogPanelProps {
   id: string;
   title: string;
   logData: string;
-  className?: string;
 }
-
-export const LogPanel = ({ id, title, logData, className }: LogPanelProps) => {
-  const [isCollapsed, setIsCollapsed] = usePersistentState(`logPanel-${id}-isCollapsed`, false);
+export const LogPanel = ({ id, title, logData }: LogPanelProps) => {
   const [filterRegex, setFilterRegex] = useState("");
   const [fontSize, setFontSize] = usePersistentState<"xxs" | "xs" | "small" | "normal">(
     `logPanel-${id}-fontSize`,
     "normal"
   );
   const [wrapText, setTextWrap] = usePersistentState(`logPanel-${id}-wrapText`, false);
+  const [showFilter, setShowFilter] = usePersistentState(`logPanel-${id}-showFilter`, false);
 
   const textWrapClass = useMemo(() => {
     return wrapText ? "whitespace-pre-wrap" : "whitespace-pre";
@@ -48,6 +69,19 @@ export const LogPanel = ({ id, title, logData, className }: LogPanelProps) => {
     });
   }, []);
 
+  const toggleWrapText = useCallback(() => {
+    setTextWrap((prev) => !prev);
+  }, []);
+
+  const toggleFilter = useCallback(() => {
+    if (showFilter) {
+      setShowFilter(false);
+      setFilterRegex(""); // Clear filter when closing
+    } else {
+      setShowFilter(true);
+    }
+  }, [filterRegex, setFilterRegex, showFilter]);
+
   const fontSizeClass = useMemo(() => {
     switch (fontSize) {
       case "xxs":
@@ -81,58 +115,47 @@ export const LogPanel = ({ id, title, logData, className }: LogPanelProps) => {
   }, [filteredLogs]);
 
   return (
-    <div
-      className={`bg-surface border border-border rounded-lg overflow-hidden flex flex-col ${
-        !isCollapsed && "h-full"
-      } ${className || ""}`}
-    >
+    <div className="bg-surface border border-border rounded-lg overflow-hidden flex flex-col h-full">
       <div className="p-4 border-b border-border bg-secondary">
-        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-          {/* Title - Always full width on mobile, normal on desktop */}
-          <div className="w-full md:w-auto" onClick={() => setIsCollapsed(!isCollapsed)}>
-            <h3 className="m-0 text-lg p-0">{title}</h3>
+        <div className="flex items-center justify-between">
+          <h3 className="m-0 text-lg p-0">{title}</h3>
+
+          <div className="flex gap-2 items-center">
+            <button className="btn" onClick={toggleFontSize}>
+              <RiFontSize />
+            </button>
+            <button className="btn" onClick={toggleWrapText}>
+              {wrapText ? <RiTextWrap /> : <RiAlignJustify />}
+            </button>
+            <button className="btn" onClick={toggleFilter}>
+              {showFilter ? <RiMenuSearchFill /> : <RiMenuSearchLine />}
+            </button>
           </div>
+        </div>
 
-          {!isCollapsed && (
-            <div className="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
-              {/* Sizing Buttons - Stacks vertically on mobile */}
-              <div className="flex flex-wrap gap-2">
-                <button className="btn" onClick={toggleFontSize}>
-                  font: {fontSize}
-                </button>
-                <button className="btn" onClick={() => setTextWrap((prev) => !prev)}>
-                  {wrapText ? "wrap" : "wrap off"}
-                </button>
-              </div>
-
-              {/* Filtering Options - Full width on mobile, normal on desktop */}
-              <div className="flex flex-1 min-w-0 gap-2">
-                <input
-                  type="text"
-                  className="flex-1 min-w-[120px] text-sm border p-2 rounded"
-                  placeholder="Filter logs..."
-                  value={filterRegex}
-                  onChange={(e) => setFilterRegex(e.target.value)}
-                />
-                <button className="btn" onClick={() => setFilterRegex("")}>
-                  Clear
-                </button>
-              </div>
+        {/* Filtering Options - Full width on mobile, normal on desktop */}
+        {showFilter && (
+          <div className="mt-2 w-full">
+            <div className="flex gap-2 items-center w-full">
+              <input
+                type="text"
+                className="w-full text-sm border p-2 rounded"
+                placeholder="Filter logs..."
+                value={filterRegex}
+                onChange={(e) => setFilterRegex(e.target.value)}
+              />
+              <button className="pl-2" onClick={() => setFilterRegex("")}>
+                <RiCloseCircleFill size="24" />
+              </button>
             </div>
-          )}
-        </div>
+          </div>
+        )}
+      </div>
+      <div className="bg-background font-mono text-sm flex-1 overflow-hidden">
+        <pre ref={preTagRef} className={`${textWrapClass} ${fontSizeClass} h-full overflow-auto p-4`}>
+          {filteredLogs}
+        </pre>
       </div>
-
-      {!isCollapsed && (
-        <div className="flex-1 bg-background font-mono text-sm p-3 overflow-hidden">
-          <pre
-            ref={preTagRef}
-            className={`h-full p-4 overflow-y-auto whitespace-pre min-h-0 ${textWrapClass} ${fontSizeClass}`}
-          >
-            {filteredLogs}
-          </pre>
-        </div>
-      )}
     </div>
   );
 };

ui/src/pages/Models.tsx

@@ -2,11 +2,45 @@ import { useState, useCallback, useMemo } from "react";
 import { useAPI } from "../contexts/APIProvider";
 import { LogPanel } from "./LogViewer";
 import { usePersistentState } from "../hooks/usePersistentState";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { useTheme } from "../contexts/ThemeProvider";
+import { RiEyeFill, RiEyeOffFill, RiStopCircleLine, RiSwapBoxFill } from "react-icons/ri";
 
 export default function ModelsPage() {
-  const { models, unloadAllModels, loadModel, upstreamLogs, metrics } = useAPI();
+  const { isNarrow } = useTheme();
+  const direction = isNarrow ? "vertical" : "horizontal";
+  const { upstreamLogs } = useAPI();
+
+  return (
+    <PanelGroup direction={direction} className="gap-2" autoSaveId={"models-panel-group"}>
+      <Panel id="models" defaultSize={50} minSize={isNarrow ? 0 : 25} maxSize={100} collapsible={isNarrow}>
+        <ModelsPanel />
+      </Panel>
+
+      <PanelResizeHandle
+        className={
+          direction === "horizontal"
+            ? "w-2 h-full bg-primary hover:bg-success transition-colors rounded"
+            : "w-full h-2 bg-primary hover:bg-success transition-colors rounded"
+        }
+      />
+      <Panel collapsible={true} defaultSize={50} minSize={0}>
+        <div className="flex flex-col h-full space-y-4">
+          {direction === "horizontal" && <StatsPanel />}
+          <div className="flex-1 min-h-0">
+            <LogPanel id="modelsupstream" title="Upstream Logs" logData={upstreamLogs} />
+          </div>
+        </div>
+      </Panel>
+    </PanelGroup>
+  );
+}
+
+function ModelsPanel() {
+  const { models, loadModel, unloadAllModels } = useAPI();
   const [isUnloading, setIsUnloading] = useState(false);
   const [showUnlisted, setShowUnlisted] = usePersistentState("showUnlisted", true);
+  const [showIdorName, setShowIdorName] = usePersistentState<"id" | "name">("showIdorName", "id"); // true = show ID, false = show name
 
   const filteredModels = useMemo(() => {
     return models.filter((model) => showUnlisted || !model.unlisted);
@@ -19,103 +53,120 @@ export default function ModelsPage() {
     } catch (e) {
       console.error(e);
     } finally {
-      // at least give it a second to show the unloading message
       setTimeout(() => {
         setIsUnloading(false);
       }, 1000);
     }
-  }, []);
+  }, [unloadAllModels]);
 
-  const [totalRequests, totalTokens, avgTokensPerSecond] = useMemo(() => {
-    const totalRequests = metrics.length;
-    if (totalRequests === 0) {
-      return [0, 0, 0];
-    }
-    const totalTokens = metrics.reduce((sum, m) => sum + m.output_tokens, 0);
-    const avgTokensPerSecond = (metrics.reduce((sum, m) => sum + m.tokens_per_second, 0) / totalRequests).toFixed(2);
-    return [totalRequests, totalTokens, avgTokensPerSecond];
-  }, [metrics]);
+  const toggleIdorName = useCallback(() => {
+    setShowIdorName((prev) => (prev === "name" ? "id" : "name"));
+  }, [showIdorName]);
 
   return (
-    <div>
-      <div className="flex flex-col md:flex-row gap-4">
-        {/* Left Column */}
-        <div className="w-full md:w-1/2 flex items-top">
-          <div className="card w-full">
-            <h2 className="">Models</h2>
-            <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>
+    <div className="card h-full flex flex-col">
+      <div className="shrink-0">
+        <h2>Models</h2>
+        <div className="flex justify-between">
+          <div className="flex gap-2">
+            <button className="btn flex items-center gap-2" onClick={toggleIdorName} style={{ lineHeight: "1.2" }}>
+              <RiSwapBoxFill /> {showIdorName === "id" ? "ID" : "Name"}
+            </button>
 
-            <table className="w-full mt-4">
-              <thead>
-                <tr className="border-b border-primary">
-                  <th className="text-left p-2">Name</th>
-                  <th className="text-left p-2"></th>
-                  <th className="text-left p-2">State</th>
-                </tr>
-              </thead>
-              <tbody>
-                {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">
-                        {model.name !== "" ? model.name : model.id}
-                      </a>
-                      {model.description != "" && (
-                        <p>
-                          <em>{model.description}</em>
-                        </p>
-                      )}
-                    </td>
-                    <td className="p-2 w-[50px]">
-                      <button
-                        className="btn btn--sm"
-                        disabled={model.state !== "stopped"}
-                        onClick={() => loadModel(model.id)}
-                      >
-                        Load
-                      </button>
-                    </td>
-                    <td className="p-2 w-[75px]">
-                      <span className={`status status--${model.state}`}>{model.state}</span>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+            <button
+              className="btn flex items-center gap-2"
+              onClick={() => setShowUnlisted(!showUnlisted)}
+              style={{ lineHeight: "1.2" }}
+            >
+              {showUnlisted ? <RiEyeFill /> : <RiEyeOffFill />} unlisted
+            </button>
           </div>
+          <button className="btn flex items-center gap-2" onClick={handleUnloadAllModels} disabled={isUnloading}>
+            <RiStopCircleLine size="24" /> {isUnloading ? "Unloading..." : "Unload"}
+          </button>
         </div>
+      </div>
 
-        {/* Right Column */}
-        <div className="w-full md:w-1/2 flex flex-col" style={{ height: "calc(100vh - 125px)" }}>
-          <div className="card mb-4 min-h-[225px]">
-            <h2>Chat Activity</h2>
-            <table className="w-full border border-gray-200">
-              <tbody>
-                <tr className="border-b border-gray-200">
-                  <td className="py-2 px-4 font-medium border-r border-gray-200">Requests</td>
-                  <td className="py-2 px-4 text-right">{totalRequests}</td>
-                </tr>
-                <tr className="border-b border-gray-200">
-                  <td className="py-2 px-4 font-medium border-r border-gray-200">Total Tokens Generated</td>
-                  <td className="py-2 px-4 text-right">{totalTokens}</td>
-                </tr>
-                <tr>
-                  <td className="py-2 px-4 font-medium border-r border-gray-200">Average Tokens/Second</td>
-                  <td className="py-2 px-4 text-right">{avgTokensPerSecond}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <LogPanel id="modelsupstream" title="Upstream Logs" logData={upstreamLogs} />
-        </div>
+      <div className="flex-1 overflow-y-auto">
+        <table className="w-full">
+          <thead className="sticky top-0 bg-card z-10">
+            <tr className="border-b border-primary bg-surface">
+              <th className="text-left p-2">{showIdorName === "id" ? "Model ID" : "Name"}</th>
+              <th className="text-left p-2"></th>
+              <th className="text-left p-2">State</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredModels.map((model) => (
+              <tr key={model.id} className="border-b hover:bg-secondary-hover border-border">
+                <td className={`p-2 ${model.unlisted ? "text-txtsecondary" : ""}`}>
+                  <a href={`/upstream/${model.id}/`} className={`underline`} target="_blank">
+                    {showIdorName === "id" ? model.id : model.name !== "" ? model.name : model.id}
+                  </a>
+                  {model.description !== "" && (
+                    <p className={model.unlisted ? "text-opacity-70" : ""}>
+                      <em>{model.description}</em>
+                    </p>
+                  )}
+                </td>
+                <td className="p-2 w-[50px]">
+                  <button
+                    className="btn btn--sm"
+                    disabled={model.state !== "stopped"}
+                    onClick={() => loadModel(model.id)}
+                  >
+                    Load
+                  </button>
+                </td>
+                <td className="p-2 w-[75px]">
+                  <span className={`status status--${model.state}`}>{model.state}</span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function StatsPanel() {
+  const { metrics } = useAPI();
+
+  const [totalRequests, totalInputTokens, totalOutputTokens, avgTokensPerSecond] = useMemo(() => {
+    const totalRequests = metrics.length;
+    if (totalRequests === 0) {
+      return [0, 0, 0];
+    }
+    const totalInputTokens = metrics.reduce((sum, m) => sum + m.input_tokens, 0);
+    const totalOutputTokens = metrics.reduce((sum, m) => sum + m.output_tokens, 0);
+    const avgTokensPerSecond = (metrics.reduce((sum, m) => sum + m.tokens_per_second, 0) / totalRequests).toFixed(2);
+    return [totalRequests, totalInputTokens, totalOutputTokens, avgTokensPerSecond];
+  }, [metrics]);
+
+  return (
+    <div className="card">
+      <div className="rounded-lg overflow-hidden border border-gray-200">
+        <table className="w-full">
+          <tbody>
+            <tr>
+              <th className="p-2 font-medium border-b border-gray-200 text-right">Requests</th>
+              <th className="p-2 font-medium border-l border-b border-gray-200 text-right">Processed</th>
+              <th className="p-2 font-medium border-l border-b border-gray-200 text-right">Generated</th>
+              <th className="p-2 font-medium border-l border-b border-gray-200 text-right">Tokens/Sec</th>
+            </tr>
+            <tr>
+              <td className="p-2 text-right border-r border-gray-200">{totalRequests}</td>
+              <td className="p-2 text-right border-r border-gray-200">
+                {new Intl.NumberFormat().format(totalInputTokens)}
+              </td>
+              <td className="p-2 text-right border-r border-gray-200">
+                {new Intl.NumberFormat().format(totalOutputTokens)}
+              </td>
+              <td className="p-2 text-right">{avgTokensPerSecond}</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   );