ai-speedometer 2.3.4 → 2.4.0

package/dist/ai-speedometer

@@ -178,7 +178,7 @@ __export(exports_models_dev, {
 });
 import fs from "fs";
 import path2 from "path";
-import { homedir as homedir2 } from "os";
+import { homedir } from "os";
 function ensureCacheDir() {
   try {
     if (!fs.existsSync(CACHE_DIR)) {
@@ -370,7 +370,7 @@ var cacheBase, CACHE_DIR, CACHE_FILE, FALLBACK_PROVIDERS;
 var init_models_dev = __esm(() => {
   init_xdg_basedir();
   init_custom_verified_providers();
-  cacheBase = process.env.XDG_CACHE_HOME || xdgCache || path2.join(homedir2(), ".cache");
+  cacheBase = process.env.XDG_CACHE_HOME || xdgCache || path2.join(homedir(), ".cache");
   CACHE_DIR = path2.join(cacheBase, "ai-speedometer");
   CACHE_FILE = path2.join(CACHE_DIR, "models.json");
   FALLBACK_PROVIDERS = [
@@ -433,9 +433,9 @@ __export(exports_ai_config, {
 });
 import fs2 from "fs";
 import path3 from "path";
-import { homedir as homedir3 } from "os";
+import { homedir as homedir2 } from "os";
 var getAIConfigPaths = () => {
-  const aiConfigDir = process.env.XDG_CONFIG_HOME || xdgConfig || path3.join(homedir3(), ".config");
+  const aiConfigDir = process.env.XDG_CONFIG_HOME || xdgConfig || path3.join(homedir2(), ".config");
   const aiSpeedometerConfigDir = path3.join(aiConfigDir, "ai-speedometer");
   return {
     configDir: aiSpeedometerConfigDir,
@@ -461,7 +461,7 @@ var getAIConfigPaths = () => {
   }
 }, readThemeFromConfig = async () => {
   const config = await readAIConfig();
-  return config.theme ?? "tokyonight";
+  return config.theme ?? "minimal-b";
 }, writeThemeToConfig = async (theme) => {
   const config = await readAIConfig();
   await writeAIConfig({ ...config, theme });
@@ -1440,6 +1440,7 @@ __export(exports_opencode_integration, {
 });
 import fs3 from "fs";
 import path4 from "path";
+import { homedir as homedir3 } from "os";
 var getXDGPaths = () => ({
   data: path4.join(process.env.XDG_DATA_HOME || xdgData || path4.join(path4.join(process.env.HOME || process.env.USERPROFILE || "."), ".local", "share"), "opencode"),
   config: path4.join(process.env.XDG_CONFIG_HOME || xdgConfig || path4.join(path4.join(process.env.HOME || process.env.USERPROFILE || "."), ".config"), "opencode")
@@ -1492,7 +1493,7 @@ var getXDGPaths = () => ({
   console.warn("Warning: opencode.json is no longer used. Use ai-benchmark-config.json instead.");
   return { provider: {} };
 }, readOpencodeGlobalConfig = () => {
-  const configDir = path4.join(process.env.XDG_CONFIG_HOME || path4.join(homedir(), ".config"), "opencode");
+  const configDir = path4.join(process.env.XDG_CONFIG_HOME || path4.join(homedir3(), ".config"), "opencode");
   const candidates = ["config.json", "opencode.json", "opencode.jsonc"];
   let merged = {};
   for (const filename of candidates) {
@@ -3456,7 +3457,7 @@ var init_AppContext = __esm(() => {
 function getTheme(name) {
   return THEMES[name] ?? THEMES[DEFAULT_THEME];
 }
-var THEMES, DEFAULT_THEME = "tokyonight", THEME_NAMES;
+var THEMES, DEFAULT_THEME = "minimal-b", THEME_NAMES;
 var init_themes = __esm(() => {
   THEMES = {
     tokyonight: {
@@ -3887,6 +3888,32 @@ var init_themes = __esm(() => {
       success: "#388E3C",
       error: "#DC3545",
       warning: "#FF9500"
+    },
+    "minimal-b": {
+      background: "#000000",
+      surface: "#000000",
+      border: "#333333",
+      dim: "#888888",
+      text: "#FFFFFF",
+      primary: "#FFFFFF",
+      accent: "#FFFFFF",
+      secondary: "#FFFFFF",
+      success: "#FFFFFF",
+      error: "#FFFFFF",
+      warning: "#FFFFFF"
+    },
+    "minimal-w": {
+      background: "#FFFFFF",
+      surface: "#FFFFFF",
+      border: "#CCCCCC",
+      dim: "#777777",
+      text: "#000000",
+      primary: "#000000",
+      accent: "#000000",
+      secondary: "#000000",
+      success: "#000000",
+      error: "#000000",
+      warning: "#000000"
     }
   };
   THEME_NAMES = Object.keys(THEMES);
@@ -4015,7 +4042,7 @@ function ThemePicker({ onClose }) {
     width: W,
     flexDirection: "column",
     border: true,
-    borderStyle: "rounded",
+    borderStyle: "single",
     borderColor: theme.primary,
     backgroundColor: theme.surface,
     zIndex: 100,
@@ -4046,7 +4073,10 @@ function ThemePicker({ onClose }) {
       }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV4("box", {
         height: 1,
-        backgroundColor: theme.border
+        children: /* @__PURE__ */ jsxDEV4("text", {
+          fg: theme.border,
+          children: "\u2500".repeat(150)
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV4("box", {
         height: 1,
@@ -4072,7 +4102,10 @@ function ThemePicker({ onClose }) {
       }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV4("box", {
         height: 1,
-        backgroundColor: theme.border
+        children: /* @__PURE__ */ jsxDEV4("text", {
+          fg: theme.border,
+          children: "\u2500".repeat(150)
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV4("scrollbox", {
         ref: scrollRef,
@@ -4125,7 +4158,10 @@ function ThemePicker({ onClose }) {
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV4("box", {
         height: 1,
-        backgroundColor: theme.border
+        children: /* @__PURE__ */ jsxDEV4("text", {
+          fg: theme.border,
+          children: "\u2500".repeat(150)
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV4("box", {
         height: 1,
@@ -4172,7 +4208,7 @@ var package_default;
 var init_package = __esm(() => {
   package_default = {
     name: "ai-speedometer",
-    version: "2.3.4",
+    version: "2.4.0",
     description: "A comprehensive CLI tool for benchmarking AI models across multiple providers with parallel execution and professional metrics",
     bin: {
       "ai-speedometer": "dist/ai-speedometer",
@@ -4274,7 +4310,6 @@ function Footer({ hints }) {
   const theme = useTheme();
   const joined = hints.join("  \xB7  ");
   return /* @__PURE__ */ jsxDEV6("box", {
-    height: 1,
     flexDirection: "row",
     alignItems: "center",
     paddingLeft: 1,
@@ -4319,20 +4354,23 @@ function MainMenuScreen() {
     { label: "?  FAQ / Learn", desc: "how metrics work & resources", color: theme.primary },
     { label: "\u2715  Exit", desc: "quit the application", color: theme.error }
   ];
+  function handleSelect(index) {
+    if (index === 0)
+      navigate("model-select");
+    else if (index === 1)
+      navigate("model-menu");
+    else if (index === 2)
+      navigate("faq");
+    else if (index === 3)
+      renderer.destroy();
+  }
   useAppKeyboard((key) => {
     if (key.name === "up") {
       setCursor((i) => (i - 1 + ITEMS.length) % ITEMS.length);
     } else if (key.name === "down") {
       setCursor((i) => (i + 1) % ITEMS.length);
     } else if (key.name === "enter" || key.name === "return") {
-      if (cursor === 0)
-        navigate("model-select");
-      else if (cursor === 1)
-        navigate("model-menu");
-      else if (cursor === 2)
-        navigate("faq");
-      else if (cursor === 3)
-        renderer.destroy();
+      handleSelect(cursor);
     }
   });
   return /* @__PURE__ */ jsxDEV7("box", {
@@ -4363,7 +4401,7 @@ function MainMenuScreen() {
       /* @__PURE__ */ jsxDEV7("box", {
         flexDirection: "column",
         border: true,
-        borderStyle: "rounded",
+        borderStyle: "single",
         borderColor: theme.border,
         backgroundColor: theme.background,
         width: 48,
@@ -4377,6 +4415,8 @@ function MainMenuScreen() {
             paddingRight: 2,
             paddingTop: 1,
             paddingBottom: 1,
+            onMouseOver: () => setCursor(i),
+            onMouseDown: () => handleSelect(i),
             children: [
               /* @__PURE__ */ jsxDEV7("box", {
                 flexDirection: "column",
@@ -4410,74 +4450,13 @@ var init_MainMenuScreen = __esm(() => {
   init_package();
 });
 
-// src/tui/components/MenuList.tsx
+// src/tui/screens/ModelMenuScreen.tsx
 import { useState as useState5 } from "react";
 import { jsxDEV as jsxDEV8 } from "@opentui/react/jsx-dev-runtime";
-function MenuList({ items, selectedIndex: initialIndex = 0, onSelect, onNavigate }) {
-  const theme = useTheme();
-  const [cursor, setCursor] = useState5(initialIndex);
-  useAppKeyboard((key) => {
-    if (key.name === "up") {
-      const next = (cursor - 1 + items.length) % items.length;
-      setCursor(next);
-      onNavigate?.(next);
-    } else if (key.name === "down") {
-      const next = (cursor + 1) % items.length;
-      setCursor(next);
-      onNavigate?.(next);
-    } else if (key.name === "enter" || key.name === "return") {
-      onSelect(cursor);
-    }
-  });
-  return /* @__PURE__ */ jsxDEV8("box", {
-    flexDirection: "column",
-    children: items.map((item, i) => {
-      const isSelected = i === cursor;
-      return /* @__PURE__ */ jsxDEV8("box", {
-        flexDirection: "row",
-        alignItems: "center",
-        backgroundColor: isSelected ? theme.border : "transparent",
-        paddingLeft: 1,
-        paddingRight: 1,
-        children: [
-          /* @__PURE__ */ jsxDEV8("box", {
-            flexDirection: "column",
-            flexGrow: 1,
-            children: [
-              /* @__PURE__ */ jsxDEV8("text", {
-                fg: isSelected ? theme.text : theme.dim,
-                children: item.label
-              }, undefined, false, undefined, this),
-              item.description ? /* @__PURE__ */ jsxDEV8("text", {
-                fg: isSelected ? theme.dim : theme.border,
-                children: item.description
-              }, undefined, false, undefined, this) : null
-            ]
-          }, undefined, true, undefined, this),
-          isSelected && /* @__PURE__ */ jsxDEV8("text", {
-            fg: theme.primary,
-            children: "\u203A"
-          }, undefined, false, undefined, this)
-        ]
-      }, i, true, undefined, this);
-    })
-  }, undefined, false, undefined, this);
-}
-var init_MenuList = __esm(() => {
-  init_useAppKeyboard();
-  init_ThemeContext();
-});
-
-// src/tui/screens/ModelMenuScreen.tsx
-import { jsxDEV as jsxDEV9 } from "@opentui/react/jsx-dev-runtime";
 function ModelMenuScreen() {
   const navigate = useNavigate();
   const theme = useTheme();
-  useAppKeyboard((key) => {
-    if (key.name === "escape" || key.name === "q") {
-      navigate("main-menu");
-    }
-  });
+  const [cursor, setCursor] = useState5(0);
   function handleSelect(index) {
     if (index === 0)
       navigate("add-verified");
@@ -4490,21 +4469,81 @@ function ModelMenuScreen() {
     else if (index === 4)
       navigate("main-menu");
   }
-  return /* @__PURE__ */ jsxDEV9("box", {
+  useAppKeyboard((key) => {
+    if (key.name === "up") {
+      setCursor((i) => (i - 1 + ITEMS.length) % ITEMS.length);
+    } else if (key.name === "down") {
+      setCursor((i) => (i + 1) % ITEMS.length);
+    } else if (key.name === "enter" || key.name === "return") {
+      handleSelect(cursor);
+    } else if (key.name === "escape" || key.name === "q") {
+      navigate("main-menu");
+    }
+  });
+  return /* @__PURE__ */ jsxDEV8("box", {
     flexDirection: "column",
     flexGrow: 1,
-    padding: 1,
+    alignItems: "center",
+    justifyContent: "center",
     children: [
-      /* @__PURE__ */ jsxDEV9("text", {
-        fg: theme.primary,
-        children: "Model Management"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV9("box", {
-        marginTop: 1,
-        children: /* @__PURE__ */ jsxDEV9(MenuList, {
-          items: ITEMS,
-          onSelect: handleSelect
-        }, undefined, false, undefined, this)
+      /* @__PURE__ */ jsxDEV8("box", {
+        flexDirection: "column",
+        alignItems: "center",
+        marginBottom: 2,
+        children: [
+          /* @__PURE__ */ jsxDEV8("text", {
+            fg: theme.primary,
+            bold: true,
+            children: "MODEL MANAGEMENT"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8("text", {
+            fg: theme.dim,
+            children: "configure providers & models"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV8("box", {
+        flexDirection: "column",
+        border: true,
+        borderStyle: "single",
+        borderColor: theme.border,
+        backgroundColor: theme.background,
+        width: 48,
+        children: ITEMS.map((item, i) => {
+          const active = i === cursor;
+          const color = theme[item.color];
+          return /* @__PURE__ */ jsxDEV8("box", {
+            flexDirection: "row",
+            alignItems: "center",
+            backgroundColor: active ? theme.border : "transparent",
+            paddingLeft: 2,
+            paddingRight: 2,
+            paddingTop: 1,
+            paddingBottom: 1,
+            onMouseOver: () => setCursor(i),
+            onMouseDown: () => handleSelect(i),
+            children: [
+              /* @__PURE__ */ jsxDEV8("box", {
+                flexDirection: "column",
+                flexGrow: 1,
+                children: [
+                  /* @__PURE__ */ jsxDEV8("text", {
+                    fg: active ? color : theme.dim,
+                    children: item.label
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV8("text", {
+                    fg: active ? theme.dim : theme.border,
+                    children: item.desc
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              active && /* @__PURE__ */ jsxDEV8("text", {
+                fg: color,
+                children: "\u203A"
+              }, undefined, false, undefined, this)
+            ]
+          }, i, true, undefined, this);
+        })
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
@@ -4514,13 +4553,12 @@ var init_ModelMenuScreen = __esm(() => {
   init_useAppKeyboard();
   init_AppContext();
   init_ThemeContext();
-  init_MenuList();
   ITEMS = [
-    { label: "Add Verified Provider" },
-    { label: "Add Custom Provider" },
-    { label: "Add Models to Provider" },
-    { label: "List Providers" },
-    { label: "Back" }
+    { label: "Add Verified Provider", desc: "from models.dev verified list", color: "accent" },
+    { label: "Add Custom Provider", desc: "configure your own API endpoint", color: "secondary" },
+    { label: "Add Models to Provider", desc: "register models for a provider", color: "primary" },
+    { label: "List Providers", desc: "view all configured providers", color: "text" },
+    { label: "Back", desc: "return to main menu", color: "error" }
   ];
 });
 
@@ -4544,7 +4582,7 @@ var init_usePaste = () => {};
 // src/tui/screens/ModelSelectScreen.tsx
 import { useState as useState6, useEffect as useEffect4, useCallback as useCallback2, useRef as useRef3 } from "react";
 import { useTerminalDimensions } from "@opentui/react";
-import { jsxDEV as jsxDEV10 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9 } from "@opentui/react/jsx-dev-runtime";
 function ModelSelectScreen() {
   const { state, dispatch } = useAppContext();
   const navigate = useNavigate();
@@ -4706,12 +4744,12 @@ function ModelSelectScreen() {
       setSearchQuery((q) => q + key.sequence);
   });
   if (state.isLoadingConfig) {
-    return /* @__PURE__ */ jsxDEV10("box", {
+    return /* @__PURE__ */ jsxDEV9("box", {
       flexDirection: "column",
       flexGrow: 1,
       alignItems: "center",
       justifyContent: "center",
-      children: /* @__PURE__ */ jsxDEV10("text", {
+      children: /* @__PURE__ */ jsxDEV9("text", {
         fg: theme.dim,
         children: "Loading config..."
       }, undefined, false, undefined, this)
@@ -4719,31 +4757,31 @@ function ModelSelectScreen() {
   }
   const nameW = Math.floor((CARD_W - 10) / 2);
   const provW = CARD_W - nameW - 10;
-  return /* @__PURE__ */ jsxDEV10("box", {
+  return /* @__PURE__ */ jsxDEV9("box", {
     flexDirection: "column",
     flexGrow: 1,
     alignItems: "center",
     justifyContent: "center",
-    children: /* @__PURE__ */ jsxDEV10("box", {
+    children: /* @__PURE__ */ jsxDEV9("box", {
       flexDirection: "column",
       border: true,
-      borderStyle: "rounded",
+      borderStyle: "single",
       borderColor: theme.border,
       backgroundColor: theme.background,
       width: CARD_W,
       children: [
-        /* @__PURE__ */ jsxDEV10("box", {
+        /* @__PURE__ */ jsxDEV9("box", {
           flexDirection: "row",
           paddingLeft: 2,
           paddingRight: 2,
           paddingTop: 1,
           paddingBottom: 1,
           children: [
-            /* @__PURE__ */ jsxDEV10("text", {
+            /* @__PURE__ */ jsxDEV9("text", {
               fg: theme.accent,
               children: "Search: "
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
+            /* @__PURE__ */ jsxDEV9("text", {
               fg: theme.text,
               children: [
                 searchQuery,
@@ -4752,19 +4790,22 @@ function ModelSelectScreen() {
             }, undefined, true, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV10("box", {
+        /* @__PURE__ */ jsxDEV9("box", {
           height: 1,
-          backgroundColor: theme.border
+          children: /* @__PURE__ */ jsxDEV9("text", {
+            fg: theme.border,
+            children: "\u2500".repeat(150)
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV10("scrollbox", {
+        /* @__PURE__ */ jsxDEV9("scrollbox", {
           ref: scrollboxRef,
           height: PAGE_SIZE,
           style: { scrollbarOptions: { showArrows: true, trackOptions: { foregroundColor: theme.primary, backgroundColor: theme.border } } },
           children: [
-            allRows.length === 0 && /* @__PURE__ */ jsxDEV10("box", {
+            allRows.length === 0 && /* @__PURE__ */ jsxDEV9("box", {
               height: 1,
               paddingLeft: 2,
-              children: /* @__PURE__ */ jsxDEV10("text", {
+              children: /* @__PURE__ */ jsxDEV9("text", {
                 fg: theme.dim,
                 children: "No models found"
               }, undefined, false, undefined, this)
@@ -4773,10 +4814,10 @@ function ModelSelectScreen() {
               let modelCursor = 0;
               return allRows.map((row, i) => {
                 if (row.kind === "separator")
-                  return /* @__PURE__ */ jsxDEV10("box", {
+                  return /* @__PURE__ */ jsxDEV9("box", {
                     height: 1,
                     paddingLeft: 2,
-                    children: /* @__PURE__ */ jsxDEV10("text", {
+                    children: /* @__PURE__ */ jsxDEV9("text", {
                       fg: theme.dim,
                       children: row.label
                     }, undefined, false, undefined, this)
@@ -4791,33 +4832,45 @@ function ModelSelectScreen() {
                   nameFg = theme.text;
                 else if (isSel)
                   nameFg = theme.success;
-                return /* @__PURE__ */ jsxDEV10("box", {
+                return /* @__PURE__ */ jsxDEV9("box", {
                   height: 1,
                   width: "100%",
                   flexDirection: "row",
                   backgroundColor: isActive ? theme.border : "transparent",
+                  onMouseOver: () => setCursor(localCursor),
+                  onMouseDown: () => {
+                    setCursor(localCursor);
+                    setSelected((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(row.model.key))
+                        next.delete(row.model.key);
+                      else
+                        next.add(row.model.key);
+                      return next;
+                    });
+                  },
                   children: [
-                    /* @__PURE__ */ jsxDEV10("text", {
+                    /* @__PURE__ */ jsxDEV9("text", {
                       fg: theme.dim,
                       width: 2,
                       children: " "
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV10("text", {
+                    /* @__PURE__ */ jsxDEV9("text", {
                       fg: nameFg,
                       width: nameW,
                       children: row.model.name
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV10("text", {
+                    /* @__PURE__ */ jsxDEV9("text", {
                       fg: isActive ? theme.primary : theme.dim,
                       width: provW,
                       children: row.model.providerName
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV10("text", {
+                    /* @__PURE__ */ jsxDEV9("text", {
                       fg: theme.success,
                       width: 2,
                       children: isSel ? "\u2713" : " "
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV10("text", {
+                    /* @__PURE__ */ jsxDEV9("text", {
                       fg: theme.accent,
                       width: 2,
                       children: isActive ? "\u203A" : " "
@@ -4828,38 +4881,35 @@ function ModelSelectScreen() {
             })()
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV10("box", {
+        /* @__PURE__ */ jsxDEV9("box", {
           height: 1,
-          backgroundColor: theme.border
+          children: /* @__PURE__ */ jsxDEV9("text", {
+            fg: theme.border,
+            children: "\u2500".repeat(150)
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV10("box", {
+        /* @__PURE__ */ jsxDEV9("box", {
           flexDirection: "row",
           paddingLeft: 2,
           paddingRight: 2,
           paddingTop: 1,
           paddingBottom: 1,
           children: [
-            /* @__PURE__ */ jsxDEV10("text", {
+            /* @__PURE__ */ jsxDEV9("text", {
               fg: theme.secondary,
               children: [
                 "Selected: ",
-                selected.size,
-                " model",
-                selected.size !== 1 ? "s" : ""
+                selected.size
               ]
             }, undefined, true, undefined, this),
-            recentCount > 0 && /* @__PURE__ */ jsxDEV10("text", {
+            recentCount > 0 && /* @__PURE__ */ jsxDEV9("text", {
               fg: theme.dim,
               children: [
                 "   [R] recent (",
                 recentCount,
                 ")"
               ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: theme.dim,
-              children: "   [\u2191\u2193/PgUp/PgDn/wheel] scroll"
-            }, undefined, false, undefined, this)
+            }, undefined, true, undefined, this)
           ]
         }, undefined, true, undefined, this)
       ]
@@ -4874,24 +4924,10 @@ var init_ModelSelectScreen = __esm(() => {
   init_usePaste();
 });
 
-// src/tui/components/BarChart.tsx
-import { jsxDEV as jsxDEV11 } from "@opentui/react/jsx-dev-runtime";
-function BarChart({ value, max, width, color, inverted = false }) {
-  const normalizedValue = inverted && max > 0 ? Math.max(0, max - value) : value;
-  const filled = max === 0 ? 0 : Math.round(normalizedValue / max * width);
-  const empty = width - filled;
-  const bar = "\u2588".repeat(filled) + "\u2591".repeat(empty);
-  return /* @__PURE__ */ jsxDEV11("text", {
-    fg: color,
-    children: bar
-  }, undefined, false, undefined, this);
-}
-var init_BarChart = () => {};
-
 // src/tui/components/GlowBar.tsx
 import { useState as useState7, useEffect as useEffect5 } from "react";
 import { engine, Timeline } from "@opentui/core";
-import { jsxDEV as jsxDEV12 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV10 } from "@opentui/react/jsx-dev-runtime";
 function blendHex(hex, toward, t) {
   const parse3 = (h) => [
     parseInt(h.slice(1, 3), 16),
@@ -4930,16 +4966,16 @@ function GlowBar({ done, total, running }) {
     const fg = intensity >= 0 ? blendHex(theme.accent, "#ffffff", intensity * 0.55) : blendHex(theme.accent, theme.background, Math.abs(intensity) * 0.5);
     return { ch: "\u2588", fg };
   });
-  return /* @__PURE__ */ jsxDEV12("box", {
+  return /* @__PURE__ */ jsxDEV10("box", {
     height: 1,
     flexDirection: "row",
     paddingLeft: 2,
     children: [
-      /* @__PURE__ */ jsxDEV12("text", {
+      /* @__PURE__ */ jsxDEV10("text", {
         fg: theme.dim,
         children: "Benchmarking  "
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12("text", {
+      /* @__PURE__ */ jsxDEV10("text", {
         fg: theme.accent,
         children: [
           done,
@@ -4948,11 +4984,11 @@ function GlowBar({ done, total, running }) {
           "  "
         ]
       }, undefined, true, undefined, this),
-      barChars.map((b, i) => /* @__PURE__ */ jsxDEV12("text", {
+      barChars.map((b, i) => /* @__PURE__ */ jsxDEV10("text", {
         fg: b.fg,
         children: b.ch
       }, i, false, undefined, this)),
-      /* @__PURE__ */ jsxDEV12("text", {
+      /* @__PURE__ */ jsxDEV10("text", {
         fg: theme.warning,
         children: [
           "  ",
@@ -4969,7 +5005,7 @@ var init_GlowBar = __esm(() => {
 });
 
 // src/tui/components/ResultsTable.tsx
-import { jsxDEV as jsxDEV13 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV11 } from "@opentui/react/jsx-dev-runtime";
 function lpad(s, w) {
   return s.length >= w ? s.slice(0, w) : " ".repeat(w - s.length) + s;
 }
@@ -4983,33 +5019,37 @@ function ResultsTable({ results, pendingCount }) {
   const theme = useTheme();
   const sorted = [...results].sort((a, b) => b.tokensPerSecond - a.tokensPerSecond);
   const C = { rank: 4, model: 16, prov: 10, time: 8, ttft: 7, tps: 9, f1000: 8, out: 6, inp: 6, tot: 6 };
-  const totalW = C.rank + C.model + C.prov + C.time + C.ttft + C.tps + C.f1000 + C.out + C.inp + C.tot + 10;
-  const sep = "\u2500".repeat(totalW);
   const maxTps = Math.max(...results.map((r) => r.tokensPerSecond), 0);
   const minTtft = Math.min(...results.map((r) => r.timeToFirstToken), Infinity);
   const validF1000s = results.map((r) => r.f1000).filter((f) => f !== Infinity);
   const minF1000 = validF1000s.length > 0 ? Math.min(...validF1000s) : Infinity;
-  function row(rank, model, prov, time, ttft, tps, f1000, out, inp, tot) {
-    return lpad(rank, C.rank) + " \u2502 " + rpad(model, C.model) + " \u2502 " + rpad(prov, C.prov) + " \u2502 " + lpad(time, C.time) + " \u2502 " + lpad(ttft, C.ttft) + " \u2502 " + lpad(tps, C.tps) + " \u2502 " + lpad(f1000, C.f1000) + " \u2502 " + lpad(out, C.out) + " \u2502 " + lpad(inp, C.inp) + " \u2502 " + lpad(tot, C.tot);
+  function headerRow() {
+    return "\u2502 " + lpad("#", C.rank) + " \u2502 " + rpad("Model", C.model) + " \u2502 " + rpad("Provider", C.prov) + " \u2502 " + lpad("Time(s)", C.time) + " \u2502 " + lpad("TTFT(s)", C.ttft) + " \u2502 " + lpad("Tok/s", C.tps) + " \u2502 " + lpad("F1000(h)", C.f1000) + " \u2502 " + lpad("Out", C.out) + " \u2502 " + lpad("In", C.inp) + " \u2502 " + lpad("Total", C.tot) + " \u2502";
   }
-  const header = row("#", "Model", "Provider", "Time(s)", "TTFT(s)", "Tok/s", "F1000(h)", "Out", "In", "Total");
-  return /* @__PURE__ */ jsxDEV13("box", {
+  return /* @__PURE__ */ jsxDEV11("box", {
     flexDirection: "column",
-    paddingLeft: 1,
-    paddingRight: 1,
+    paddingLeft: 2,
+    paddingRight: 2,
     children: [
-      /* @__PURE__ */ jsxDEV13("box", {
+      /* @__PURE__ */ jsxDEV11("box", {
+        height: 1,
+        children: /* @__PURE__ */ jsxDEV11("text", {
+          fg: theme.border,
+          children: RULE
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV11("box", {
         height: 1,
-        children: /* @__PURE__ */ jsxDEV13("text", {
+        children: /* @__PURE__ */ jsxDEV11("text", {
           fg: theme.accent,
-          children: header
+          children: headerRow()
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV13("box", {
+      /* @__PURE__ */ jsxDEV11("box", {
         height: 1,
-        children: /* @__PURE__ */ jsxDEV13("text", {
+        children: /* @__PURE__ */ jsxDEV11("text", {
           fg: theme.border,
-          children: sep
+          children: RULE
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       sorted.map((r, i) => {
@@ -5025,97 +5065,105 @@ function ResultsTable({ results, pendingCount }) {
         const isBestTps = r.tokensPerSecond === maxTps && maxTps > 0;
         const isBestTtft = r.timeToFirstToken === minTtft;
         const isBestF1000 = r.f1000 === minF1000 && r.f1000 !== Infinity;
-        return /* @__PURE__ */ jsxDEV13("box", {
+        return /* @__PURE__ */ jsxDEV11("box", {
           height: 1,
           flexDirection: "row",
           children: [
-            /* @__PURE__ */ jsxDEV13("text", {
+            /* @__PURE__ */ jsxDEV11("text", {
+              fg: theme.dim,
+              children: "\u2502 "
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV11("text", {
               fg: theme.dim,
               children: [
                 lpad(rank, C.rank),
                 " \u2502 "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV13("text", {
+            /* @__PURE__ */ jsxDEV11("text", {
               fg: theme.text,
               children: [
                 rpad(trunc(r.model, C.model), C.model),
                 " \u2502 "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV13("text", {
+            /* @__PURE__ */ jsxDEV11("text", {
               fg: theme.dim,
               children: [
                 rpad(trunc(r.provider, C.prov), C.prov),
                 " \u2502 "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV13("text", {
+            /* @__PURE__ */ jsxDEV11("text", {
               fg: theme.dim,
               children: [
                 lpad(timeSec, C.time),
                 " \u2502 "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV13("text", {
+            /* @__PURE__ */ jsxDEV11("text", {
               fg: isBestTtft ? theme.success : theme.dim,
               children: [
                 lpad(ttftSec, C.ttft),
                 " \u2502 "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV13("text", {
+            /* @__PURE__ */ jsxDEV11("text", {
               fg: isBestTps ? theme.success : theme.dim,
               children: [
                 lpad(tps, C.tps),
                 " \u2502 "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV13("text", {
+            /* @__PURE__ */ jsxDEV11("text", {
               fg: isBestF1000 ? theme.success : theme.dim,
               children: [
                 lpad(f1000Val, C.f1000),
                 " \u2502 "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV13("text", {
+            /* @__PURE__ */ jsxDEV11("text", {
               fg: theme.dim,
               children: [
                 lpad(outTok, C.out),
                 " \u2502 "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV13("text", {
+            /* @__PURE__ */ jsxDEV11("text", {
               fg: theme.dim,
               children: [
                 lpad(inTok, C.inp),
                 " \u2502 "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV13("text", {
+            /* @__PURE__ */ jsxDEV11("text", {
               fg: theme.dim,
               children: lpad(totTok, C.tot)
             }, undefined, false, undefined, this),
-            hasEst && /* @__PURE__ */ jsxDEV13("text", {
+            /* @__PURE__ */ jsxDEV11("text", {
+              fg: theme.dim,
+              children: " \u2502"
+            }, undefined, false, undefined, this),
+            hasEst && /* @__PURE__ */ jsxDEV11("text", {
               fg: theme.warning,
               children: " [est]"
             }, undefined, false, undefined, this)
           ]
         }, `${r.model}-${r.provider}-${i}`, true, undefined, this);
       }),
-      /* @__PURE__ */ jsxDEV13("box", {
+      /* @__PURE__ */ jsxDEV11("box", {
         height: 1,
-        children: /* @__PURE__ */ jsxDEV13("text", {
+        children: /* @__PURE__ */ jsxDEV11("text", {
           fg: theme.border,
-          children: sep
+          children: RULE
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      pendingCount > 0 && /* @__PURE__ */ jsxDEV13("box", {
+      pendingCount > 0 && /* @__PURE__ */ jsxDEV11("box", {
         height: 1,
-        children: /* @__PURE__ */ jsxDEV13("text", {
+        children: /* @__PURE__ */ jsxDEV11("text", {
           fg: theme.dim,
           children: [
-            "  Waiting for ",
+            "Waiting for ",
             pendingCount,
             " more result",
             pendingCount !== 1 ? "s" : "",
@@ -5126,14 +5174,35 @@ function ResultsTable({ results, pendingCount }) {
     ]
   }, undefined, true, undefined, this);
 }
+var RULE;
 var init_ResultsTable = __esm(() => {
   init_ThemeContext();
+  RULE = "\u2500".repeat(200);
 });
 
-// src/tui/screens/BenchmarkScreen.tsx
-import { useState as useState8, useEffect as useEffect6, useRef as useRef4, useMemo } from "react";
-import { jsxDEV as jsxDEV14 } from "@opentui/react/jsx-dev-runtime";
-function rankBadge(rank) {
+// src/tui/components/BarChart.tsx
+import { jsxDEV as jsxDEV12 } from "@opentui/react/jsx-dev-runtime";
+function BarChart({ value, max, width, color, inverted = false }) {
+  const normalizedValue = inverted && max > 0 ? Math.max(0, max - value) : value;
+  const filled = max === 0 ? 0 : Math.round(normalizedValue / max * width);
+  const empty = width - filled;
+  const bar = "\u2588".repeat(filled) + "\u2591".repeat(empty);
+  return /* @__PURE__ */ jsxDEV12("text", {
+    fg: color,
+    children: bar
+  }, undefined, false, undefined, this);
+}
+var init_BarChart = () => {};
+
+// src/tui/components/RankingRow.tsx
+import { jsxDEV as jsxDEV13 } from "@opentui/react/jsx-dev-runtime";
+function pad(s, w, align) {
+  if (s.length >= w)
+    return s.slice(0, w);
+  const pad2 = " ".repeat(w - s.length);
+  return align === "right" ? pad2 + s : s + pad2;
+}
+function rankLabel(rank) {
   if (rank === 1)
     return "1st";
   if (rank === 2)
@@ -5142,6 +5211,73 @@ function rankBadge(rank) {
     return "3rd";
   return `${rank}th`;
 }
+function RankingRow({ rank, rankFg, metrics, model, modelFg, provider, providerFg, bar, theme }) {
+  const badge = pad(rankLabel(rank), 3, "left");
+  const modelCol = pad(model, 18, "left");
+  const provCol = pad(provider, 12, "left");
+  return /* @__PURE__ */ jsxDEV13("box", {
+    height: 1,
+    flexDirection: "row",
+    paddingLeft: 2,
+    children: [
+      /* @__PURE__ */ jsxDEV13("text", {
+        fg: rankFg,
+        children: [
+          badge,
+          "  "
+        ]
+      }, undefined, true, undefined, this),
+      metrics.map((m, i) => /* @__PURE__ */ jsxDEV13("box", {
+        flexDirection: "row",
+        children: [
+          /* @__PURE__ */ jsxDEV13("text", {
+            fg: theme.dim,
+            children: " \u2502 "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("text", {
+            fg: m.fg,
+            children: [
+              pad(m.text, m.width, m.align ?? "right"),
+              "  "
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, `m-${i}`, true, undefined, this)),
+      /* @__PURE__ */ jsxDEV13("text", {
+        fg: theme.dim,
+        children: " \u2502 "
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV13("text", {
+        fg: modelFg,
+        children: [
+          modelCol,
+          "  "
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV13("text", {
+        fg: providerFg,
+        children: provCol
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV13("text", {
+        fg: theme.dim,
+        children: "  \u2502  "
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV13(BarChart, {
+        value: bar.value,
+        max: bar.max,
+        width: bar.width,
+        color: bar.color
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+var init_RankingRow = __esm(() => {
+  init_BarChart();
+});
+
+// src/tui/screens/BenchmarkScreen.tsx
+import { useState as useState8, useEffect as useEffect6, useRef as useRef4, useMemo } from "react";
+import { jsxDEV as jsxDEV14 } from "@opentui/react/jsx-dev-runtime";
 function BenchmarkScreen() {
   const { state, dispatch } = useAppContext();
   const navigate = useNavigate();
@@ -5294,7 +5430,10 @@ function BenchmarkScreen() {
     if (tpsRanked.length > 0) {
       rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
-        backgroundColor: theme.border
+        children: /* @__PURE__ */ jsxDEV14("text", {
+          fg: theme.border,
+          children: "\u2500".repeat(150)
+        }, undefined, false, undefined, this)
       }, "div-tps", false, undefined, this));
       rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
@@ -5310,75 +5449,29 @@ function BenchmarkScreen() {
         const rankFg = rank === 1 ? theme.accent : rank === 2 ? theme.secondary : theme.dim;
         const tps = s.result?.tokensPerSecond ?? 0;
         const timeSec = (s.result?.totalTime ?? 0) / 1000;
-        const badge = rankBadge(rank).padStart(3);
-        const modelCol = s.model.name.padEnd(18).slice(0, 18);
-        const provCol = s.model.providerName.padEnd(12).slice(0, 12);
-        rows.push(/* @__PURE__ */ jsxDEV14("box", {
-          height: 1,
-          flexDirection: "row",
-          paddingLeft: 2,
-          children: [
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: rankFg,
-              children: [
-                badge,
-                "  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: " \u2502 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.accent,
-              children: [
-                tps.toFixed(1).padStart(8),
-                " tok/s  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: " \u2502 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.secondary,
-              children: [
-                timeSec.toFixed(2).padStart(6),
-                "s  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: " \u2502 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.text,
-              children: [
-                modelCol,
-                "  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: [
-                provCol,
-                "  \u2502  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14(BarChart, {
-              value: tps,
-              max: maxTps,
-              width: BAR_W2,
-              color: theme.accent
-            }, undefined, false, undefined, this)
-          ]
-        }, `tps-${s.model.id}-${s.model.providerId}`, true, undefined, this));
+        rows.push(/* @__PURE__ */ jsxDEV14(RankingRow, {
+          rank,
+          rankFg,
+          metrics: [
+            { text: `${tps.toFixed(1)} tok/s`, fg: theme.accent, width: 12 },
+            { text: `${timeSec.toFixed(2)}s`, fg: theme.secondary, width: 7 }
+          ],
+          model: s.model.name,
+          modelFg: theme.text,
+          provider: s.model.providerName,
+          providerFg: theme.dim,
+          bar: { value: tps, max: maxTps, width: BAR_W2, color: theme.accent },
+          theme
+        }, `tps-${s.model.id}-${s.model.providerId}`, false, undefined, this));
       }
     }
     if (ttftRanked.length > 0) {
       rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
-        backgroundColor: theme.border
+        children: /* @__PURE__ */ jsxDEV14("text", {
+          fg: theme.border,
+          children: "\u2500".repeat(150)
+        }, undefined, false, undefined, this)
       }, "div-ttft", false, undefined, this));
       rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
@@ -5394,75 +5487,29 @@ function BenchmarkScreen() {
         const rankFg = rank === 1 ? theme.accent : rank === 2 ? theme.secondary : theme.dim;
         const ttft = (s.result?.timeToFirstToken ?? 0) / 1000;
         const tps = s.result?.tokensPerSecond ?? 0;
-        const badge = rankBadge(rank).padStart(3);
-        const modelCol = s.model.name.padEnd(18).slice(0, 18);
-        const provCol = s.model.providerName.padEnd(12).slice(0, 12);
-        rows.push(/* @__PURE__ */ jsxDEV14("box", {
-          height: 1,
-          flexDirection: "row",
-          paddingLeft: 2,
-          children: [
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: rankFg,
-              children: [
-                badge,
-                "  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: " \u2502 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.secondary,
-              children: [
-                ttft.toFixed(2).padStart(7),
-                "s  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: " \u2502 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.accent,
-              children: [
-                tps.toFixed(1).padStart(8),
-                " tok/s  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: " \u2502 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.text,
-              children: [
-                modelCol,
-                "  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: [
-                provCol,
-                "  \u2502  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14(BarChart, {
-              value: ttft,
-              max: maxTtftForBar,
-              width: BAR_W2,
-              color: theme.secondary
-            }, undefined, false, undefined, this)
-          ]
-        }, `ttft-${s.model.id}-${s.model.providerId}`, true, undefined, this));
+        rows.push(/* @__PURE__ */ jsxDEV14(RankingRow, {
+          rank,
+          rankFg,
+          metrics: [
+            { text: `${ttft.toFixed(2)}s`, fg: theme.secondary, width: 7 },
+            { text: `${tps.toFixed(1)} tok/s`, fg: theme.accent, width: 12 }
+          ],
+          model: s.model.name,
+          modelFg: theme.text,
+          provider: s.model.providerName,
+          providerFg: theme.dim,
+          bar: { value: ttft, max: maxTtftForBar, width: BAR_W2, color: theme.secondary },
+          theme
+        }, `ttft-${s.model.id}-${s.model.providerId}`, false, undefined, this));
       }
     }
     if (f1000Ranked.length > 0) {
       rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
-        backgroundColor: theme.border
+        children: /* @__PURE__ */ jsxDEV14("text", {
+          fg: theme.border,
+          children: "\u2500".repeat(150)
+        }, undefined, false, undefined, this)
       }, "div-f1000", false, undefined, this));
       rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
@@ -5477,89 +5524,31 @@ function BenchmarkScreen() {
         const rank = i + 1;
         const rankFg = rank === 1 ? theme.accent : rank === 2 ? theme.secondary : theme.dim;
         const f1000 = s.result?.f1000 ?? Infinity;
-        const f1000Str = f1000 === Infinity ? "\u221E" : f1000.toFixed(2);
-        const ttft = (s.result?.timeToFirstToken ?? 0) / 1000;
+        const f1000Str = f1000 === Infinity ? "\u221E" : `${f1000.toFixed(2)}h`;
         const tps = s.result?.tokensPerSecond ?? 0;
-        const badge = rankBadge(rank).padStart(3);
-        const modelCol = s.model.name.padEnd(18).slice(0, 18);
-        const provCol = s.model.providerName.padEnd(12).slice(0, 12);
-        rows.push(/* @__PURE__ */ jsxDEV14("box", {
-          height: 1,
-          flexDirection: "row",
-          paddingLeft: 2,
-          children: [
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: rankFg,
-              children: [
-                badge,
-                "  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: " \u2502 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.primary,
-              children: [
-                f1000Str.padStart(7),
-                "h  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: " \u2502 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.secondary,
-              children: [
-                ttft.toFixed(2).padStart(5),
-                "s  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: " \u2502 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.accent,
-              children: [
-                tps.toFixed(0).padStart(5),
-                " tok/s  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: " \u2502 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.text,
-              children: [
-                modelCol,
-                "  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14("text", {
-              fg: theme.dim,
-              children: [
-                provCol,
-                "  \u2502  "
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV14(BarChart, {
-              value: f1000 === Infinity ? maxF1000 : f1000,
-              max: maxF1000,
-              width: BAR_W2,
-              color: theme.primary
-            }, undefined, false, undefined, this)
-          ]
-        }, `f1000-${s.model.id}-${s.model.providerId}`, true, undefined, this));
+        rows.push(/* @__PURE__ */ jsxDEV14(RankingRow, {
+          rank,
+          rankFg,
+          metrics: [
+            { text: f1000Str, fg: theme.primary, width: 7 },
+            { text: `${tps.toFixed(0)} tok/s`, fg: theme.accent, width: 12 }
+          ],
+          model: s.model.name,
+          modelFg: theme.text,
+          provider: s.model.providerName,
+          providerFg: theme.dim,
+          bar: { value: f1000 === Infinity ? maxF1000 : f1000, max: maxF1000, width: BAR_W2, color: theme.primary },
+          theme
+        }, `f1000-${s.model.id}-${s.model.providerId}`, false, undefined, this));
       }
     }
     if (allDone && errors.length > 0) {
       rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
-        backgroundColor: theme.border
+        children: /* @__PURE__ */ jsxDEV14("text", {
+          fg: theme.border,
+          children: "\u2500".repeat(150)
+        }, undefined, false, undefined, this)
       }, "div-errors", false, undefined, this));
       rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
@@ -5620,7 +5609,10 @@ function BenchmarkScreen() {
     }
     rows.push(/* @__PURE__ */ jsxDEV14("box", {
       height: 1,
-      backgroundColor: theme.border
+      children: /* @__PURE__ */ jsxDEV14("text", {
+        fg: theme.border,
+        children: "\u2500".repeat(150)
+      }, undefined, false, undefined, this)
     }, "div-results", false, undefined, this));
     rows.push(/* @__PURE__ */ jsxDEV14("box", {
       height: 1,
@@ -5726,7 +5718,7 @@ function BenchmarkScreen() {
       /* @__PURE__ */ jsxDEV14("box", {
         flexDirection: "column",
         border: true,
-        borderStyle: "rounded",
+        borderStyle: "single",
         borderColor: theme.border,
         backgroundColor: theme.background,
         flexGrow: 1,
@@ -5746,7 +5738,10 @@ function BenchmarkScreen() {
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV14("box", {
             height: 1,
-            backgroundColor: theme.border
+            children: /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.border,
+              children: "\u2500".repeat(150)
+            }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV14("scrollbox", {
             focused: true,
@@ -5766,9 +5761,9 @@ var init_BenchmarkScreen = __esm(() => {
   init_useAppKeyboard();
   init_AppContext();
   init_ThemeContext();
-  init_BarChart();
   init_GlowBar();
   init_ResultsTable();
+  init_RankingRow();
 });
 
 // src/tui/screens/AddVerifiedScreen.tsx
@@ -5931,7 +5926,7 @@ function AddVerifiedScreen() {
       children: /* @__PURE__ */ jsxDEV15("box", {
         flexDirection: "column",
         border: true,
-        borderStyle: "rounded",
+        borderStyle: "single",
         borderColor: theme.border,
         backgroundColor: theme.background,
         width: CARD_W,
@@ -5947,7 +5942,10 @@ function AddVerifiedScreen() {
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV15("box", {
             height: 1,
-            backgroundColor: theme.border
+            children: /* @__PURE__ */ jsxDEV15("text", {
+              fg: theme.border,
+              children: "\u2500".repeat(150)
+            }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV15("box", {
             flexDirection: "column",
@@ -6019,7 +6017,10 @@ function AddVerifiedScreen() {
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV15("box", {
             height: 1,
-            backgroundColor: theme.border
+            children: /* @__PURE__ */ jsxDEV15("text", {
+              fg: theme.border,
+              children: "\u2500".repeat(150)
+            }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
           saveSuccess ? /* @__PURE__ */ jsxDEV15("box", {
             flexDirection: "column",
@@ -6095,6 +6096,42 @@ function AddVerifiedScreen() {
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
             ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV15("box", {
+            height: 1,
+            children: /* @__PURE__ */ jsxDEV15("text", {
+              fg: theme.border,
+              children: "\u2500".repeat(150)
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV15("box", {
+            height: 1,
+            flexDirection: "row",
+            paddingLeft: 2,
+            paddingRight: 2,
+            paddingTop: 1,
+            paddingBottom: 1,
+            onMouseDown: () => {
+              setStep("list");
+              setSelectedProvider(null);
+              setApiKey("");
+              setSaveSuccess(false);
+              setSaveError("");
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV15("text", {
+                fg: theme.dim,
+                children: "\u2190 "
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV15("text", {
+                fg: theme.accent,
+                children: "Back to list"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV15("text", {
+                fg: theme.dim,
+                children: "  [Esc]"
+              }, undefined, false, undefined, this)
+            ]
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this)
@@ -6108,7 +6145,7 @@ function AddVerifiedScreen() {
     children: /* @__PURE__ */ jsxDEV15("box", {
       flexDirection: "column",
       border: true,
-      borderStyle: "rounded",
+      borderStyle: "single",
       borderColor: theme.border,
       backgroundColor: theme.background,
       width: CARD_W,
@@ -6135,7 +6172,10 @@ function AddVerifiedScreen() {
         }, undefined, true, undefined, this),
         /* @__PURE__ */ jsxDEV15("box", {
           height: 1,
-          backgroundColor: theme.border
+          children: /* @__PURE__ */ jsxDEV15("text", {
+            fg: theme.border,
+            children: "\u2500".repeat(150)
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV15("scrollbox", {
           ref: scrollboxRef,
@@ -6168,6 +6208,12 @@ function AddVerifiedScreen() {
                 width: "100%",
                 flexDirection: "row",
                 backgroundColor: isActive ? theme.border : "transparent",
+                onMouseOver: () => setCursor(i),
+                onMouseDown: () => {
+                  setCursor(i);
+                  setSelectedProvider(prov);
+                  setStep("confirm");
+                },
                 children: [
                   /* @__PURE__ */ jsxDEV15("text", {
                     fg: theme.dim,
@@ -6196,7 +6242,10 @@ function AddVerifiedScreen() {
         }, undefined, true, undefined, this),
         /* @__PURE__ */ jsxDEV15("box", {
           height: 1,
-          backgroundColor: theme.border
+          children: /* @__PURE__ */ jsxDEV15("text", {
+            fg: theme.border,
+            children: "\u2500".repeat(150)
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV15("box", {
           flexDirection: "row",
@@ -6217,6 +6266,36 @@ function AddVerifiedScreen() {
               children: "   [\u2191\u2193/PgUp/PgDn/wheel] scroll"
             }, undefined, false, undefined, this)
           ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV15("box", {
+          height: 1,
+          children: /* @__PURE__ */ jsxDEV15("text", {
+            fg: theme.border,
+            children: "\u2500".repeat(150)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV15("box", {
+          height: 1,
+          flexDirection: "row",
+          paddingLeft: 2,
+          paddingRight: 2,
+          paddingTop: 1,
+          paddingBottom: 1,
+          onMouseDown: () => navigate("model-menu"),
+          children: [
+            /* @__PURE__ */ jsxDEV15("text", {
+              fg: theme.dim,
+              children: "\u2190 "
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV15("text", {
+              fg: theme.accent,
+              children: "Back"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV15("text", {
+              fg: theme.dim,
+              children: "  [Q] or [Esc]"
+            }, undefined, false, undefined, this)
+          ]
         }, undefined, true, undefined, this)
       ]
     }, undefined, true, undefined, this)
@@ -6460,7 +6539,7 @@ function AddCustomScreen() {
       children: /* @__PURE__ */ jsxDEV16("box", {
         flexDirection: "column",
         border: true,
-        borderStyle: "rounded",
+        borderStyle: "single",
         borderColor: theme.border,
         backgroundColor: theme.background,
         width: CARD_W,
@@ -6505,7 +6584,7 @@ function AddCustomScreen() {
       children: /* @__PURE__ */ jsxDEV16("box", {
         flexDirection: "column",
         border: true,
-        borderStyle: "rounded",
+        borderStyle: "single",
         borderColor: theme.border,
         backgroundColor: theme.background,
         width: CARD_W,
@@ -6529,7 +6608,7 @@ function AddCustomScreen() {
     children: /* @__PURE__ */ jsxDEV16("box", {
       flexDirection: "column",
       border: true,
-      borderStyle: "rounded",
+      borderStyle: "single",
       borderColor: theme.border,
       backgroundColor: theme.background,
       width: CARD_W,
@@ -6545,7 +6624,10 @@ function AddCustomScreen() {
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV16("box", {
           height: 1,
-          backgroundColor: theme.border
+          children: /* @__PURE__ */ jsxDEV16("text", {
+            fg: theme.border,
+            children: "\u2500".repeat(150)
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV16("box", {
           paddingTop: 1,
@@ -6554,7 +6636,10 @@ function AddCustomScreen() {
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV16("box", {
           height: 1,
-          backgroundColor: theme.border
+          children: /* @__PURE__ */ jsxDEV16("text", {
+            fg: theme.border,
+            children: "\u2500".repeat(150)
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV16("box", {
           flexDirection: "column",
@@ -6570,6 +6655,16 @@ function AddCustomScreen() {
                 width: "100%",
                 flexDirection: "row",
                 backgroundColor: i === typeCursor ? theme.border : "transparent",
+                onMouseOver: () => setTypeCursor(i),
+                onMouseDown: () => {
+                  setTypeCursor(i);
+                  if (i === 2) {
+                    navigate("model-menu");
+                  } else {
+                    setProviderType(i === 1 ? "anthropic" : "openai-compatible");
+                    setStep("id");
+                  }
+                },
                 children: [
                   /* @__PURE__ */ jsxDEV16("text", {
                     fg: i === typeCursor ? theme.text : theme.dim,
@@ -6771,6 +6866,46 @@ function AddCustomScreen() {
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this) : null
           ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV16("box", {
+          height: 1,
+          marginTop: 1,
+          children: /* @__PURE__ */ jsxDEV16("text", {
+            fg: theme.border,
+            children: "\u2500".repeat(Math.min(CARD_W, 70))
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV16("box", {
+          height: 1,
+          flexDirection: "row",
+          paddingLeft: 1,
+          paddingRight: 1,
+          onMouseDown: () => {
+            if (step === "type")
+              navigate("model-menu");
+            else {
+              setInputError("");
+              const idx = stepIndex(step);
+              if (idx <= 1)
+                setStep("type");
+              else
+                setStep(STEPS[idx - 1]);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxDEV16("text", {
+              fg: theme.dim,
+              children: "\u2190 "
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV16("text", {
+              fg: theme.accent,
+              children: "Back"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV16("text", {
+              fg: theme.dim,
+              children: "  [Esc]"
+            }, undefined, false, undefined, this)
+          ]
         }, undefined, true, undefined, this)
       ]
     }, undefined, true, undefined, this)
@@ -6911,42 +7046,74 @@ function AddModelsScreen() {
       children: /* @__PURE__ */ jsxDEV17("box", {
         flexDirection: "column",
         border: true,
-        borderStyle: "rounded",
+        borderStyle: "single",
         borderColor: theme.border,
         backgroundColor: theme.background,
         width: CARD_W,
-        children: /* @__PURE__ */ jsxDEV17("box", {
-          flexDirection: "column",
-          paddingLeft: 2,
-          paddingRight: 2,
-          paddingTop: 1,
-          paddingBottom: 1,
-          children: [
-            /* @__PURE__ */ jsxDEV17("box", {
-              height: 1,
-              children: /* @__PURE__ */ jsxDEV17("text", {
-                fg: theme.success,
-                children: [
-                  "Done! Added ",
-                  addedModels.length,
-                  " model",
-                  addedModels.length !== 1 ? "s" : "",
-                  " to ",
-                  selectedProvider?.name,
-                  "."
-                ]
-              }, undefined, true, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV17("box", {
-              height: 1,
-              children: /* @__PURE__ */ jsxDEV17("text", {
-                fg: theme.dim,
-                children: "Press [Enter] to return"
+        children: [
+          /* @__PURE__ */ jsxDEV17("box", {
+            flexDirection: "column",
+            paddingLeft: 2,
+            paddingRight: 2,
+            paddingTop: 1,
+            paddingBottom: 1,
+            children: [
+              /* @__PURE__ */ jsxDEV17("box", {
+                height: 1,
+                children: /* @__PURE__ */ jsxDEV17("text", {
+                  fg: theme.success,
+                  children: [
+                    "Done! Added ",
+                    addedModels.length,
+                    " model",
+                    addedModels.length !== 1 ? "s" : "",
+                    " to ",
+                    selectedProvider?.name,
+                    "."
+                  ]
+                }, undefined, true, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17("box", {
+                height: 1,
+                children: /* @__PURE__ */ jsxDEV17("text", {
+                  fg: theme.dim,
+                  children: "Press [Enter] to return"
+                }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV17("box", {
+            height: 1,
+            children: /* @__PURE__ */ jsxDEV17("text", {
+              fg: theme.border,
+              children: "\u2500".repeat(150)
             }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV17("box", {
+            height: 1,
+            flexDirection: "row",
+            paddingLeft: 2,
+            paddingRight: 2,
+            paddingTop: 1,
+            paddingBottom: 1,
+            onMouseDown: () => navigate("model-menu"),
+            children: [
+              /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.dim,
+                children: "\u2190 "
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.accent,
+                children: "Back to menu"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.dim,
+                children: "  [Enter]"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
     }, undefined, false, undefined, this);
   }
   if (step === "add" && selectedProvider) {
@@ -6958,7 +7125,7 @@ function AddModelsScreen() {
       children: /* @__PURE__ */ jsxDEV17("box", {
         flexDirection: "column",
         border: true,
-        borderStyle: "rounded",
+        borderStyle: "single",
         borderColor: theme.border,
         backgroundColor: theme.background,
         width: CARD_W,
@@ -6981,7 +7148,10 @@ function AddModelsScreen() {
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV17("box", {
             height: 1,
-            backgroundColor: theme.border
+            children: /* @__PURE__ */ jsxDEV17("text", {
+              fg: theme.border,
+              children: "\u2500".repeat(150)
+            }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV17("box", {
             flexDirection: "column",
@@ -7071,6 +7241,43 @@ function AddModelsScreen() {
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
             ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV17("box", {
+            height: 1,
+            children: /* @__PURE__ */ jsxDEV17("text", {
+              fg: theme.border,
+              children: "\u2500".repeat(150)
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV17("box", {
+            height: 1,
+            flexDirection: "row",
+            paddingLeft: 2,
+            paddingRight: 2,
+            paddingTop: 1,
+            paddingBottom: 1,
+            onMouseDown: () => {
+              setStep("pick");
+              setSelectedProvider(null);
+              setModelInput("");
+              setAddedModels([]);
+              setSaveError("");
+              setInputError("");
+            },
+            children: [
+              /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.dim,
+                children: "\u2190 "
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.accent,
+                children: "Back"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.dim,
+                children: "  [Esc]"
+              }, undefined, false, undefined, this)
+            ]
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this)
@@ -7084,7 +7291,7 @@ function AddModelsScreen() {
     children: /* @__PURE__ */ jsxDEV17("box", {
       flexDirection: "column",
       border: true,
-      borderStyle: "rounded",
+      borderStyle: "single",
       borderColor: theme.border,
       backgroundColor: theme.background,
       width: CARD_W,
@@ -7100,7 +7307,10 @@ function AddModelsScreen() {
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV17("box", {
           height: 1,
-          backgroundColor: theme.border
+          children: /* @__PURE__ */ jsxDEV17("text", {
+            fg: theme.border,
+            children: "\u2500".repeat(150)
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV17("box", {
           flexDirection: "column",
@@ -7133,6 +7343,16 @@ function AddModelsScreen() {
                 width: "100%",
                 flexDirection: "row",
                 backgroundColor: isActive ? theme.border : "transparent",
+                onMouseOver: () => setCursor(i),
+                onMouseDown: () => {
+                  setCursor(i);
+                  setSelectedProvider(prov);
+                  setModelInput("");
+                  setAddedModels([]);
+                  setSaveError("");
+                  setInputError("");
+                  setStep("add");
+                },
                 children: [
                   /* @__PURE__ */ jsxDEV17("text", {
                     fg: theme.dim,
@@ -7161,6 +7381,36 @@ function AddModelsScreen() {
               }, prov.id, true, undefined, this);
             })
           ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV17("box", {
+          height: 1,
+          children: /* @__PURE__ */ jsxDEV17("text", {
+            fg: theme.border,
+            children: "\u2500".repeat(150)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV17("box", {
+          height: 1,
+          flexDirection: "row",
+          paddingLeft: 2,
+          paddingRight: 2,
+          paddingTop: 1,
+          paddingBottom: 1,
+          onMouseDown: () => navigate("model-menu"),
+          children: [
+            /* @__PURE__ */ jsxDEV17("text", {
+              fg: theme.dim,
+              children: "\u2190 "
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV17("text", {
+              fg: theme.accent,
+              children: "Back"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV17("text", {
+              fg: theme.dim,
+              children: "  [Esc]"
+            }, undefined, false, undefined, this)
+          ]
         }, undefined, true, undefined, this)
       ]
     }, undefined, true, undefined, this)
@@ -7179,9 +7429,12 @@ function ListProvidersScreen() {
   const { state } = useAppContext();
   const navigate = useNavigate();
   const theme = useTheme();
+  function goBack() {
+    navigate("model-menu");
+  }
   useAppKeyboard((key) => {
     if (key.name === "escape" || key.name === "q") {
-      navigate("model-menu");
+      goBack();
     }
   });
   if (state.isLoadingConfig) {
@@ -7196,44 +7449,37 @@ function ListProvidersScreen() {
     }, undefined, false, undefined, this);
   }
   const providers = state.config?.providers ?? [];
-  if (providers.length === 0) {
-    return /* @__PURE__ */ jsxDEV18("box", {
-      flexDirection: "column",
-      flexGrow: 1,
-      padding: 1,
-      children: [
-        /* @__PURE__ */ jsxDEV18("text", {
-          fg: theme.primary,
-          children: "Configured Providers"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV18("box", {
-          marginTop: 1,
-          children: /* @__PURE__ */ jsxDEV18("text", {
-            fg: theme.warning,
-            children: "No providers configured yet."
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this);
-  }
   return /* @__PURE__ */ jsxDEV18("box", {
     flexDirection: "column",
     flexGrow: 1,
     padding: 1,
     children: [
-      /* @__PURE__ */ jsxDEV18("text", {
-        fg: theme.primary,
-        children: "Configured Providers"
-      }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV18("box", {
-        marginTop: 1,
+        flexDirection: "row",
+        marginBottom: 1,
+        children: /* @__PURE__ */ jsxDEV18("text", {
+          fg: theme.primary,
+          bold: true,
+          children: "Configured Providers"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      providers.length === 0 ? /* @__PURE__ */ jsxDEV18("box", {
+        flexDirection: "column",
+        flexGrow: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        children: /* @__PURE__ */ jsxDEV18("text", {
+          fg: theme.warning,
+          children: "No providers configured yet."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV18("box", {
         flexGrow: 1,
         children: /* @__PURE__ */ jsxDEV18("scrollbox", {
           focused: true,
           children: providers.map((provider, i) => /* @__PURE__ */ jsxDEV18("box", {
             flexDirection: "column",
             border: true,
-            borderStyle: "rounded",
+            borderStyle: "single",
             borderColor: theme.border,
             backgroundColor: theme.background,
             marginBottom: 1,
@@ -7266,7 +7512,36 @@ function ListProvidersScreen() {
             ]
           }, i, true, undefined, this))
         }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV18("box", {
+        height: 1,
+        marginTop: 1,
+        children: /* @__PURE__ */ jsxDEV18("text", {
+          fg: theme.border,
+          children: "\u2500".repeat(70)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV18("box", {
+        height: 1,
+        flexDirection: "row",
+        paddingLeft: 1,
+        paddingRight: 1,
+        onMouseDown: goBack,
+        children: [
+          /* @__PURE__ */ jsxDEV18("text", {
+            fg: theme.dim,
+            children: "\u2190 "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV18("text", {
+            fg: theme.accent,
+            children: "Back"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV18("text", {
+            fg: theme.dim,
+            children: "  [Q] or [Esc]"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
@@ -7281,9 +7556,12 @@ import { jsxDEV as jsxDEV19 } from "@opentui/react/jsx-dev-runtime";
 function FAQScreen() {
   const navigate = useNavigate();
   const theme = useTheme();
+  function goBack() {
+    navigate("main-menu");
+  }
   useAppKeyboard((key) => {
     if (key.name === "escape" || key.name === "q") {
-      navigate("main-menu");
+      goBack();
     }
   });
   return /* @__PURE__ */ jsxDEV19("box", {
@@ -7294,6 +7572,7 @@ function FAQScreen() {
     children: /* @__PURE__ */ jsxDEV19("box", {
       flexDirection: "column",
       width: 70,
+      flexGrow: 1,
       children: [
         /* @__PURE__ */ jsxDEV19("box", {
           marginBottom: 1,
@@ -7306,13 +7585,14 @@ function FAQScreen() {
         /* @__PURE__ */ jsxDEV19("scrollbox", {
           focused: true,
           flexGrow: 1,
+          style: { scrollbarOptions: { showArrows: true, trackOptions: { foregroundColor: theme.primary, backgroundColor: theme.border } } },
           children: /* @__PURE__ */ jsxDEV19("box", {
             flexDirection: "column",
             children: [
               /* @__PURE__ */ jsxDEV19("box", {
                 flexDirection: "column",
                 border: true,
-                borderStyle: "rounded",
+                borderStyle: "single",
                 borderColor: theme.border,
                 padding: 1,
                 marginBottom: 1,
@@ -7423,7 +7703,7 @@ function FAQScreen() {
               /* @__PURE__ */ jsxDEV19("box", {
                 flexDirection: "column",
                 border: true,
-                borderStyle: "rounded",
+                borderStyle: "single",
                 borderColor: theme.border,
                 padding: 1,
                 marginBottom: 1,
@@ -7489,7 +7769,7 @@ function FAQScreen() {
               /* @__PURE__ */ jsxDEV19("box", {
                 flexDirection: "column",
                 border: true,
-                borderStyle: "rounded",
+                borderStyle: "single",
                 borderColor: theme.border,
                 padding: 1,
                 marginBottom: 1,
@@ -7520,19 +7800,40 @@ function FAQScreen() {
                     children: "  \u2022 [*] in results means token count was estimated"
                   }, undefined, false, undefined, this)
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV19("box", {
-                flexDirection: "row",
-                justifyContent: "center",
-                marginTop: 1,
-                children: /* @__PURE__ */ jsxDEV19("text", {
-                  fg: theme.dim,
-                  children: "Press [Q] or [Esc] to return to main menu"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this)
+              }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this)
-        }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV19("box", {
+          height: 1,
+          marginTop: 1,
+          children: /* @__PURE__ */ jsxDEV19("text", {
+            fg: theme.border,
+            children: "\u2500".repeat(70)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV19("box", {
+          height: 1,
+          width: "100%",
+          flexDirection: "row",
+          paddingLeft: 1,
+          paddingRight: 1,
+          onMouseDown: goBack,
+          children: [
+            /* @__PURE__ */ jsxDEV19("text", {
+              fg: theme.dim,
+              children: "\u2190 "
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV19("text", {
+              fg: theme.accent,
+              children: "Back to main menu"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV19("text", {
+              fg: theme.dim,
+              children: "  [Q] or [Esc]"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
       ]
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
@@ -7553,7 +7854,7 @@ function getHints(screen, benchResults) {
     case "model-menu":
       return ["[\u2191\u2193] navigate", "[Enter] select", "[Q] back"];
     case "model-select":
-      return ["[\u2191\u2193] navigate", "[Tab] select", "[Enter] run", "[A] all", "[N] none", "[R] recent", "[Esc] back"];
+      return ["[\u2191\u2193] nav  [Tab] sel  [Enter] run", "[A]ll  [N]one  [R]ecent  [Esc] back"];
     case "benchmark": {
       const allDone = benchResults.length > 0 && benchResults.every((r) => r.status === "done" || r.status === "error");
       return allDone ? ["[R] rerun", "[Enter] back to menu", "[Q] back to menu"] : ["Benchmark in progress..."];