ai-speedometer 2.3.3 → 2.4.0

package/dist/ai-speedometer

@@ -1,9 +1,4 @@
-#!/bin/sh -
-':'; /*-
-test1=$(bun --version 2>&1) && exec bun "$0" "$@"
-test2=$(node --version 2>&1) && exec node "$0" "$@"
-exec printf '%s\n' "$test1" "$test2" 1>&2
-*/
+#!/usr/bin/env bun
 // @bun
 var __defProp = Object.defineProperty;
 var __returnValue = (v) => v;
@@ -22,6 +17,28 @@ var __export = (target, all) => {
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = import.meta.require;
 
+// ../../node_modules/.bun/xdg-basedir@5.1.0/node_modules/xdg-basedir/index.js
+import os from "os";
+import path from "path";
+var homeDirectory, env, xdgData, xdgConfig, xdgState, xdgCache, xdgRuntime, xdgDataDirectories, xdgConfigDirectories;
+var init_xdg_basedir = __esm(() => {
+  homeDirectory = os.homedir();
+  ({ env } = process);
+  xdgData = env.XDG_DATA_HOME || (homeDirectory ? path.join(homeDirectory, ".local", "share") : undefined);
+  xdgConfig = env.XDG_CONFIG_HOME || (homeDirectory ? path.join(homeDirectory, ".config") : undefined);
+  xdgState = env.XDG_STATE_HOME || (homeDirectory ? path.join(homeDirectory, ".local", "state") : undefined);
+  xdgCache = env.XDG_CACHE_HOME || (homeDirectory ? path.join(homeDirectory, ".cache") : undefined);
+  xdgRuntime = env.XDG_RUNTIME_DIR || undefined;
+  xdgDataDirectories = (env.XDG_DATA_DIRS || "/usr/local/share/:/usr/share/").split(":");
+  if (xdgData) {
+    xdgDataDirectories.unshift(xdgData);
+  }
+  xdgConfigDirectories = (env.XDG_CONFIG_DIRS || "/etc/xdg").split(":");
+  if (xdgConfig) {
+    xdgConfigDirectories.unshift(xdgConfig);
+  }
+});
+
 // ../core/custom-verified-providers.json
 var custom_verified_providers_default;
 var init_custom_verified_providers = __esm(() => {
@@ -160,7 +177,7 @@ __export(exports_models_dev, {
   clearCache: () => clearCache
 });
 import fs from "fs";
-import path from "path";
+import path2 from "path";
 import { homedir } from "os";
 function ensureCacheDir() {
   try {
@@ -212,7 +229,7 @@ async function fetchFromAPI() {
 }
 function getCustomProvidersJson() {
   let data = custom_verified_providers_default;
-  const customProvidersPath = path.join(process.cwd(), "custom-verified-providers.json");
+  const customProvidersPath = path2.join(process.cwd(), "custom-verified-providers.json");
   if (fs.existsSync(customProvidersPath)) {
     try {
       data = JSON.parse(fs.readFileSync(customProvidersPath, "utf8"));
@@ -349,11 +366,13 @@ function clearCache() {
     console.warn("Warning: Could not clear cache:", error.message);
   }
 }
-var CACHE_DIR, CACHE_FILE, FALLBACK_PROVIDERS;
+var cacheBase, CACHE_DIR, CACHE_FILE, FALLBACK_PROVIDERS;
 var init_models_dev = __esm(() => {
+  init_xdg_basedir();
   init_custom_verified_providers();
-  CACHE_DIR = path.join(homedir(), ".cache", "ai-speedometer");
-  CACHE_FILE = path.join(CACHE_DIR, "models.json");
+  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 = [
     {
       id: "openai",
@@ -413,15 +432,15 @@ __export(exports_ai_config, {
   addCustomProvider: () => addCustomProvider
 });
 import fs2 from "fs";
-import path2 from "path";
+import path3 from "path";
 import { homedir as homedir2 } from "os";
 var getAIConfigPaths = () => {
-  const aiConfigDir = process.env.XDG_CONFIG_HOME || path2.join(homedir2(), ".config");
-  const aiSpeedometerConfigDir = path2.join(aiConfigDir, "ai-speedometer");
+  const aiConfigDir = process.env.XDG_CONFIG_HOME || xdgConfig || path3.join(homedir2(), ".config");
+  const aiSpeedometerConfigDir = path3.join(aiConfigDir, "ai-speedometer");
   return {
     configDir: aiSpeedometerConfigDir,
-    configJson: path2.join(aiSpeedometerConfigDir, "ai-benchmark-config.json"),
-    recentModelsCache: path2.join(aiSpeedometerConfigDir, "recent-models.json")
+    configJson: path3.join(aiSpeedometerConfigDir, "ai-benchmark-config.json"),
+    recentModelsCache: path3.join(aiSpeedometerConfigDir, "recent-models.json")
   };
 }, ensureAIConfigDirectory = () => {
   const { configDir } = getAIConfigPaths();
@@ -442,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 });
@@ -569,7 +588,9 @@ var getAIConfigPaths = () => {
   const paths = getAIConfigPaths();
   return { ...paths, configExists: fs2.existsSync(paths.configJson) };
 };
-var init_ai_config = () => {};
+var init_ai_config = __esm(() => {
+  init_xdg_basedir();
+});
 
 // ../../node_modules/.bun/jsonc-parser@3.3.1/node_modules/jsonc-parser/lib/esm/impl/scanner.js
 function createScanner(text, ignoreTrivia = false) {
@@ -1418,16 +1439,16 @@ __export(exports_opencode_integration, {
   addApiKey: () => addApiKey
 });
 import fs3 from "fs";
-import path3 from "path";
+import path4 from "path";
 import { homedir as homedir3 } from "os";
 var getXDGPaths = () => ({
-  data: path3.join(process.env.XDG_DATA_HOME || path3.join(homedir3(), ".local", "share"), "opencode"),
-  config: path3.join(process.env.XDG_CONFIG_HOME || path3.join(homedir3(), ".config"), "opencode")
+  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")
 }), getFilePaths = () => {
   const paths = getXDGPaths();
   return {
-    authJson: path3.join(paths.data, "auth.json"),
-    opencodeJson: path3.join(paths.config, "opencode.json")
+    authJson: path4.join(paths.data, "auth.json"),
+    opencodeJson: path4.join(paths.config, "opencode.json")
   };
 }, ensureDirectories = () => {
   const paths = getXDGPaths();
@@ -1457,7 +1478,9 @@ var getXDGPaths = () => ({
   try {
     ensureDirectories();
     fs3.writeFileSync(authJson, JSON.stringify(authData, null, 2));
-    fs3.chmodSync(authJson, 384);
+    try {
+      fs3.chmodSync(authJson, 384);
+    } catch {}
     return true;
   } catch (error) {
     console.error("Error writing auth.json:", error.message);
@@ -1470,11 +1493,11 @@ var getXDGPaths = () => ({
   console.warn("Warning: opencode.json is no longer used. Use ai-benchmark-config.json instead.");
   return { provider: {} };
 }, readOpencodeGlobalConfig = () => {
-  const configDir = path3.join(process.env.XDG_CONFIG_HOME || path3.join(homedir3(), ".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) {
-    const filePath = path3.join(configDir, filename);
+    const filePath = path4.join(configDir, filename);
     try {
       if (!fs3.existsSync(filePath))
         continue;
@@ -1712,6 +1735,7 @@ var getXDGPaths = () => ({
   };
 };
 var init_opencode_integration = __esm(() => {
+  init_xdg_basedir();
   init_models_dev();
   init_ai_config();
   init_main();
@@ -1719,6 +1743,7 @@ var init_opencode_integration = __esm(() => {
 
 // ../core/src/constants.ts
 import { execSync } from "child_process";
+import { readFileSync } from "fs";
 function getOpencodeSystemPrompt(modelId) {
   const mid = modelId.toLowerCase();
   if (mid.includes("gpt-4") || mid.includes("o1") || mid.includes("o3"))
@@ -1759,10 +1784,10 @@ function getOpencodeVersion() {
       return v;
   } catch {
     try {
-      return execSync(`grep -E '^\\s*"version"' /home/idc/proj/opencode/packages/opencode/package.json | sed 's/.*: "\\([^"]*\\)".*/\\1/'`, {
-        encoding: "utf8",
-        stdio: ["ignore", "pipe", "ignore"]
-      }).trim();
+      const pkgJson = readFileSync("/home/idc/proj/opencode/packages/opencode/package.json", "utf8");
+      const parsed = JSON.parse(pkgJson);
+      if (parsed.version)
+        return parsed.version;
     } catch {}
   }
   return "1.14.37";
@@ -2897,11 +2922,24 @@ async function benchmarkSingleModelRest(model, logger) {
         };
       });
     }
-    const response = await fetch(url, {
+    let response = await fetch(url, {
       method: "POST",
       headers,
       body: JSON.stringify(body)
     });
+    if (!response.ok && (response.status === 400 || response.status === 422)) {
+      const errText = await response.text();
+      if (errText.includes("2013") || errText.includes("invalid params") || errText.includes("invalid chat setting")) {
+        delete body["tools"];
+        delete body["tool_choice"];
+        delete body["stream_options"];
+        response = await fetch(url, {
+          method: "POST",
+          headers,
+          body: JSON.stringify(body)
+        });
+      }
+    }
     if (!response.ok) {
       const errBody = await response.text();
       let errDetail = "";
@@ -3274,11 +3312,13 @@ function createRunId() {
   return generateRunId();
 }
 function getLogPath(runId) {
-  return join(homedir4(), ".local", "share", "ai-speedometer", "logs", `${runId}.log`);
+  const baseDir = process.env.XDG_DATA_HOME || xdgData || join(homedir4(), ".local", "share");
+  return join(baseDir, "ai-speedometer", "logs", `${runId}.log`);
 }
 async function createBenchLogger(runId) {
   const logPath = getLogPath(runId);
-  const logDir = join(homedir4(), ".local", "share", "ai-speedometer", "logs");
+  const baseDir = process.env.XDG_DATA_HOME || xdgData || join(homedir4(), ".local", "share");
+  const logDir = join(baseDir, "ai-speedometer", "logs");
   await mkdir(logDir, { recursive: true });
   let currentApiKey = "";
   let buffer = "";
@@ -3306,7 +3346,9 @@ async function createBenchLogger(runId) {
     }
   };
 }
-var init_logger = () => {};
+var init_logger = __esm(() => {
+  init_xdg_basedir();
+});
 
 // src/tui/context/AppContext.tsx
 import { createContext, useContext, useReducer, useEffect } from "react";
@@ -3415,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: {
@@ -3846,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);
@@ -3974,7 +4042,7 @@ function ThemePicker({ onClose }) {
     width: W,
     flexDirection: "column",
     border: true,
-    borderStyle: "rounded",
+    borderStyle: "single",
     borderColor: theme.primary,
     backgroundColor: theme.surface,
     zIndex: 100,
@@ -4005,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,
@@ -4031,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,
@@ -4084,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,
@@ -4131,7 +4208,7 @@ var package_default;
 var init_package = __esm(() => {
   package_default = {
     name: "ai-speedometer",
-    version: "2.3.3",
+    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",
@@ -4143,7 +4220,7 @@ var init_package = __esm(() => {
     scripts: {
       start: "bun src/index.ts",
       dev: "bun --watch src/index.ts",
-      build: "bun build src/index.ts --outdir dist --target bun --external '@opentui/core' --external '@opentui/react' --external 'react' --external 'react-reconciler' && cat ../../scripts/shebang dist/index.js > dist/ai-speedometer && chmod +x dist/ai-speedometer && rm dist/index.js",
+      build: "node ../../scripts/build-tui.mjs",
       typecheck: "bun tsc --noEmit",
       prepublishOnly: "bun run build"
     },
@@ -4233,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,
@@ -4278,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", {
@@ -4322,7 +4401,7 @@ function MainMenuScreen() {
       /* @__PURE__ */ jsxDEV7("box", {
         flexDirection: "column",
         border: true,
-        borderStyle: "rounded",
+        borderStyle: "single",
         borderColor: theme.border,
         backgroundColor: theme.background,
         width: 48,
@@ -4336,6 +4415,8 @@ function MainMenuScreen() {
             paddingRight: 2,
             paddingTop: 1,
             paddingBottom: 1,
+            onMouseOver: () => setCursor(i),
+            onMouseDown: () => handleSelect(i),
             children: [
               /* @__PURE__ */ jsxDEV7("box", {
                 flexDirection: "column",
@@ -4369,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");
@@ -4449,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);
@@ -4473,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" }
   ];
 });
 
@@ -4503,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();
@@ -4665,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)
@@ -4678,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,
@@ -4711,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)
@@ -4732,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)
@@ -4750,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" : " "
@@ -4787,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)
       ]
@@ -4833,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),
@@ -4889,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,
@@ -4907,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: [
           "  ",
@@ -4928,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;
 }
@@ -4942,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) => {
@@ -4984,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" : "",
@@ -5085,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)
@@ -5101,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();
@@ -5253,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,
@@ -5269,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,
@@ -5353,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,
@@ -5436,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,
@@ -5579,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,
@@ -5685,7 +5718,7 @@ function BenchmarkScreen() {
       /* @__PURE__ */ jsxDEV14("box", {
         flexDirection: "column",
         border: true,
-        borderStyle: "rounded",
+        borderStyle: "single",
         borderColor: theme.border,
         backgroundColor: theme.background,
         flexGrow: 1,
@@ -5705,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,
@@ -5725,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
@@ -5890,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,
@@ -5906,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",
@@ -5978,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",
@@ -6054,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)
@@ -6067,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,
@@ -6094,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,
@@ -6127,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,
@@ -6155,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",
@@ -6176,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)
@@ -6419,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,
@@ -6464,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,
@@ -6488,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,
@@ -6504,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,
@@ -6513,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",
@@ -6529,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,
@@ -6730,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)
@@ -6870,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) {
@@ -6917,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,
@@ -6940,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",
@@ -7030,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)
@@ -7043,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,
@@ -7059,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",
@@ -7092,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,
@@ -7120,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)
@@ -7138,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) {
@@ -7155,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,
@@ -7225,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);
 }
@@ -7240,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", {
@@ -7253,6 +7572,7 @@ function FAQScreen() {
     children: /* @__PURE__ */ jsxDEV19("box", {
       flexDirection: "column",
       width: 70,
+      flexGrow: 1,
       children: [
         /* @__PURE__ */ jsxDEV19("box", {
           marginBottom: 1,
@@ -7265,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,
@@ -7382,7 +7703,7 @@ function FAQScreen() {
               /* @__PURE__ */ jsxDEV19("box", {
                 flexDirection: "column",
                 border: true,
-                borderStyle: "rounded",
+                borderStyle: "single",
                 borderColor: theme.border,
                 padding: 1,
                 marginBottom: 1,
@@ -7448,7 +7769,7 @@ function FAQScreen() {
               /* @__PURE__ */ jsxDEV19("box", {
                 flexDirection: "column",
                 border: true,
-                borderStyle: "rounded",
+                borderStyle: "single",
                 borderColor: theme.border,
                 padding: 1,
                 marginBottom: 1,
@@ -7479,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);
@@ -7512,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..."];