ai-speedometer 2.2.0 → 2.3.0

package/dist/ai-speedometer

@@ -390,9 +390,11 @@ var init_models_dev = __esm(() => {
 // ../core/src/ai-config.ts
 var exports_ai_config = {};
 __export(exports_ai_config, {
+  writeThemeToConfig: () => writeThemeToConfig,
   writeAIConfig: () => writeAIConfig,
   removeVerifiedProvider: () => removeVerifiedProvider,
   removeCustomProvider: () => removeCustomProvider,
+  readThemeFromConfig: () => readThemeFromConfig,
   readAIConfig: () => readAIConfig,
   getVerifiedProvidersFromConfig: () => getVerifiedProvidersFromConfig,
   getRecentModels: () => getRecentModels,
@@ -433,6 +435,12 @@ var getAIConfigPaths = () => {
     console.warn("Warning: Could not read ai-benchmark-config.json:", error.message);
     return { verifiedProviders: {}, customProviders: [] };
   }
+}, readThemeFromConfig = async () => {
+  const config = await readAIConfig();
+  return config.theme ?? "tokyonight";
+}, writeThemeToConfig = async (theme) => {
+  const config = await readAIConfig();
+  await writeAIConfig({ ...config, theme });
 }, writeAIConfig = async (config) => {
   const { configJson } = getAIConfigPaths();
   try {
@@ -1924,6 +1932,7 @@ async function benchmarkSingleModelRest(model, logger) {
     const finalInputTokens = inputTokens || Math.round(TEST_PROMPT.length / 4);
     const totalTokens = finalInputTokens + finalOutputTokens;
     const tokensPerSecond = generationTime > 0 ? finalOutputTokens / generationTime * 1000 : 0;
+    const f1000 = tokensPerSecond > 0 ? 1000 * (timeToFirstToken / 1000 + 300 / tokensPerSecond) / 3600 : Infinity;
     return {
       model: model.name,
       provider: model.providerName,
@@ -1931,6 +1940,7 @@ async function benchmarkSingleModelRest(model, logger) {
       timeToFirstToken,
       tokenCount: finalOutputTokens,
       tokensPerSecond,
+      f1000,
       promptTokens: finalInputTokens,
       totalTokens,
       usedEstimateForOutput,
@@ -1946,6 +1956,7 @@ async function benchmarkSingleModelRest(model, logger) {
       timeToFirstToken: 0,
       tokenCount: 0,
       tokensPerSecond: 0,
+      f1000: Infinity,
       promptTokens: 0,
       totalTokens: 0,
       usedEstimateForOutput: true,
@@ -2011,6 +2022,8 @@ function buildJsonOutput(providerName, providerId, modelName, modelId, result, f
     timeToFirstToken: result.timeToFirstToken,
     timeToFirstTokenSeconds: result.timeToFirstToken / 1000,
     tokensPerSecond: result.tokensPerSecond,
+    f1000: result.f1000,
+    f1000Hours: result.f1000 === Infinity ? null : result.f1000,
     outputTokens: result.tokenCount,
     promptTokens: result.promptTokens,
     totalTokens: result.totalTokens,
@@ -2283,12 +2296,727 @@ var init_AppContext = __esm(() => {
   AppContext = createContext(null);
 });
 
+// src/tui/theme/themes.ts
+function getTheme(name) {
+  return THEMES[name] ?? THEMES[DEFAULT_THEME];
+}
+var THEMES, DEFAULT_THEME = "tokyonight", THEME_NAMES;
+var init_themes = __esm(() => {
+  THEMES = {
+    tokyonight: {
+      background: "#1a1b26",
+      surface: "#1e2030",
+      border: "#292e42",
+      dim: "#565f89",
+      text: "#c0caf5",
+      primary: "#7aa2f7",
+      accent: "#7dcfff",
+      secondary: "#bb9af7",
+      success: "#9ece6a",
+      error: "#f7768e",
+      warning: "#ff9e64"
+    },
+    dracula: {
+      background: "#282a36",
+      surface: "#21222c",
+      border: "#44475a",
+      dim: "#6272a4",
+      text: "#f8f8f2",
+      primary: "#bd93f9",
+      accent: "#8be9fd",
+      secondary: "#ff79c6",
+      success: "#50fa7b",
+      error: "#ff5555",
+      warning: "#f1fa8c"
+    },
+    catppuccin: {
+      background: "#1e1e2e",
+      surface: "#181825",
+      border: "#313244",
+      dim: "#585b70",
+      text: "#cdd6f4",
+      primary: "#89b4fa",
+      accent: "#89dceb",
+      secondary: "#cba6f7",
+      success: "#a6e3a1",
+      error: "#f38ba8",
+      warning: "#fab387"
+    },
+    "catppuccin-frappe": {
+      background: "#303446",
+      surface: "#292c3c",
+      border: "#414559",
+      dim: "#b5bfe2",
+      text: "#c6d0f5",
+      primary: "#8da4e2",
+      accent: "#f4b8e4",
+      secondary: "#ca9ee6",
+      success: "#a6d189",
+      error: "#e78284",
+      warning: "#e5c890"
+    },
+    "catppuccin-macchiato": {
+      background: "#24273a",
+      surface: "#1e2030",
+      border: "#363a4f",
+      dim: "#b8c0e0",
+      text: "#cad3f5",
+      primary: "#8aadf4",
+      accent: "#f5bde6",
+      secondary: "#c6a0f6",
+      success: "#a6da95",
+      error: "#ed8796",
+      warning: "#eed49f"
+    },
+    kanagawa: {
+      background: "#1F1F28",
+      surface: "#2A2A37",
+      border: "#54546D",
+      dim: "#727169",
+      text: "#DCD7BA",
+      primary: "#7E9CD8",
+      accent: "#7FB4CA",
+      secondary: "#957FB8",
+      success: "#98BB6C",
+      error: "#E82424",
+      warning: "#D7A657"
+    },
+    rosepine: {
+      background: "#191724",
+      surface: "#1f1d2e",
+      border: "#403d52",
+      dim: "#6e6a86",
+      text: "#e0def4",
+      primary: "#9ccfd8",
+      accent: "#ebbcba",
+      secondary: "#c4a7e7",
+      success: "#31748f",
+      error: "#eb6f92",
+      warning: "#f6c177"
+    },
+    nord: {
+      background: "#2E3440",
+      surface: "#3B4252",
+      border: "#434C5E",
+      dim: "#8B95A7",
+      text: "#ECEFF4",
+      primary: "#88C0D0",
+      accent: "#8FBCBB",
+      secondary: "#81A1C1",
+      success: "#A3BE8C",
+      error: "#BF616A",
+      warning: "#D08770"
+    },
+    aura: {
+      background: "#0f0f0f",
+      surface: "#15141b",
+      border: "#2d2d2d",
+      dim: "#6d6d6d",
+      text: "#edecee",
+      primary: "#a277ff",
+      accent: "#a277ff",
+      secondary: "#f694ff",
+      success: "#61ffca",
+      error: "#ff6767",
+      warning: "#ffca85"
+    },
+    ayu: {
+      background: "#0B0E14",
+      surface: "#0F131A",
+      border: "#6C7380",
+      dim: "#565B66",
+      text: "#BFBDB6",
+      primary: "#59C2FF",
+      accent: "#E6B450",
+      secondary: "#D2A6FF",
+      success: "#7FD962",
+      error: "#D95757",
+      warning: "#E6B673"
+    },
+    carbonfox: {
+      background: "#161616",
+      surface: "#1a1a1a",
+      border: "#303030",
+      dim: "#7d848f",
+      text: "#f2f4f8",
+      primary: "#33b1ff",
+      accent: "#ff7eb6",
+      secondary: "#78a9ff",
+      success: "#25be6a",
+      error: "#ee5396",
+      warning: "#f1c21b"
+    },
+    cobalt2: {
+      background: "#193549",
+      surface: "#122738",
+      border: "#1f4662",
+      dim: "#adb7c9",
+      text: "#ffffff",
+      primary: "#0088ff",
+      accent: "#2affdf",
+      secondary: "#9a5feb",
+      success: "#9eff80",
+      error: "#ff0088",
+      warning: "#ffc600"
+    },
+    cursor: {
+      background: "#181818",
+      surface: "#141414",
+      border: "#333333",
+      dim: "#666666",
+      text: "#e4e4e4",
+      primary: "#88c0d0",
+      accent: "#88c0d0",
+      secondary: "#81a1c1",
+      success: "#3fa266",
+      error: "#e34671",
+      warning: "#f1b467"
+    },
+    gruvbox: {
+      background: "#282828",
+      surface: "#3c3836",
+      border: "#665c54",
+      dim: "#928374",
+      text: "#ebdbb2",
+      primary: "#83a598",
+      accent: "#8ec07c",
+      secondary: "#d3869b",
+      success: "#b8bb26",
+      error: "#fb4934",
+      warning: "#fe8019"
+    },
+    material: {
+      background: "#263238",
+      surface: "#1e272c",
+      border: "#37474f",
+      dim: "#546e7a",
+      text: "#eeffff",
+      primary: "#82aaff",
+      accent: "#89ddff",
+      secondary: "#c792ea",
+      success: "#c3e88d",
+      error: "#f07178",
+      warning: "#ffcb6b"
+    },
+    matrix: {
+      background: "#0a0e0a",
+      surface: "#0e130d",
+      border: "#1e2a1b",
+      dim: "#8ca391",
+      text: "#62ff94",
+      primary: "#2eff6a",
+      accent: "#c770ff",
+      secondary: "#00efff",
+      success: "#62ff94",
+      error: "#ff4b4b",
+      warning: "#e6ff57"
+    },
+    monokai: {
+      background: "#272822",
+      surface: "#1e1f1c",
+      border: "#3e3d32",
+      dim: "#75715e",
+      text: "#f8f8f2",
+      primary: "#66d9ef",
+      accent: "#a6e22e",
+      secondary: "#ae81ff",
+      success: "#a6e22e",
+      error: "#f92672",
+      warning: "#e6db74"
+    },
+    nightowl: {
+      background: "#011627",
+      surface: "#0b253a",
+      border: "#5f7e97",
+      dim: "#5f7e97",
+      text: "#d6deeb",
+      primary: "#82AAFF",
+      accent: "#c792ea",
+      secondary: "#7fdbca",
+      success: "#c5e478",
+      error: "#EF5350",
+      warning: "#ecc48d"
+    },
+    "one-dark": {
+      background: "#282c34",
+      surface: "#21252b",
+      border: "#393f4a",
+      dim: "#5c6370",
+      text: "#abb2bf",
+      primary: "#61afef",
+      accent: "#56b6c2",
+      secondary: "#c678dd",
+      success: "#98c379",
+      error: "#e06c75",
+      warning: "#e5c07b"
+    },
+    opencode: {
+      background: "#0a0a0a",
+      surface: "#141414",
+      border: "#484848",
+      dim: "#808080",
+      text: "#eeeeee",
+      primary: "#fab283",
+      accent: "#9d7cd8",
+      secondary: "#5c9cf5",
+      success: "#7fd88f",
+      error: "#e06c75",
+      warning: "#f5a742"
+    },
+    "osaka-jade": {
+      background: "#111c18",
+      surface: "#1a2520",
+      border: "#3d4a44",
+      dim: "#53685B",
+      text: "#C1C497",
+      primary: "#2DD5B7",
+      accent: "#549e6a",
+      secondary: "#D2689C",
+      success: "#549e6a",
+      error: "#FF5345",
+      warning: "#E5C736"
+    },
+    palenight: {
+      background: "#292d3e",
+      surface: "#1e2132",
+      border: "#32364a",
+      dim: "#676e95",
+      text: "#a6accd",
+      primary: "#82aaff",
+      accent: "#89ddff",
+      secondary: "#c792ea",
+      success: "#c3e88d",
+      error: "#f07178",
+      warning: "#ffcb6b"
+    },
+    synthwave84: {
+      background: "#262335",
+      surface: "#1e1a29",
+      border: "#495495",
+      dim: "#848bbd",
+      text: "#ffffff",
+      primary: "#36f9f6",
+      accent: "#b084eb",
+      secondary: "#ff7edb",
+      success: "#72f1b8",
+      error: "#fe4450",
+      warning: "#fede5d"
+    },
+    vesper: {
+      background: "#101010",
+      surface: "#181818",
+      border: "#282828",
+      dim: "#A0A0A0",
+      text: "#ffffff",
+      primary: "#FFC799",
+      accent: "#FFC799",
+      secondary: "#99FFE4",
+      success: "#99FFE4",
+      error: "#FF8080",
+      warning: "#FFC799"
+    },
+    zenburn: {
+      background: "#3f3f3f",
+      surface: "#4f4f4f",
+      border: "#5f5f5f",
+      dim: "#9f9f9f",
+      text: "#dcdccc",
+      primary: "#8cd0d3",
+      accent: "#93e0e3",
+      secondary: "#dc8cc3",
+      success: "#7f9f7f",
+      error: "#cc9393",
+      warning: "#f0dfaf"
+    },
+    orng: {
+      background: "#0a0a0a",
+      surface: "#141414",
+      border: "#EC5B2B",
+      dim: "#808080",
+      text: "#eeeeee",
+      primary: "#EC5B2B",
+      accent: "#FFF7F1",
+      secondary: "#EE7948",
+      success: "#6ba1e6",
+      error: "#e06c75",
+      warning: "#EC5B2B"
+    },
+    "lucent-orng": {
+      background: "#000000",
+      surface: "#0a0a0a",
+      border: "#EC5B2B",
+      dim: "#808080",
+      text: "#eeeeee",
+      primary: "#EC5B2B",
+      accent: "#FFF7F1",
+      secondary: "#EE7948",
+      success: "#6ba1e6",
+      error: "#e06c75",
+      warning: "#EC5B2B"
+    },
+    github: {
+      background: "#ffffff",
+      surface: "#f6f8fa",
+      border: "#d0d7de",
+      dim: "#57606a",
+      text: "#24292f",
+      primary: "#0969da",
+      accent: "#1b7c83",
+      secondary: "#8250df",
+      success: "#1a7f37",
+      error: "#cf222e",
+      warning: "#9a6700"
+    },
+    everforest: {
+      background: "#fdf6e3",
+      surface: "#efebd4",
+      border: "#939f91",
+      dim: "#a6b0a0",
+      text: "#5c6a72",
+      primary: "#8da101",
+      accent: "#3a94c5",
+      secondary: "#df69ba",
+      success: "#8da101",
+      error: "#f85552",
+      warning: "#f57d26"
+    },
+    solarized: {
+      background: "#fdf6e3",
+      surface: "#eee8d5",
+      border: "#cdc8b1",
+      dim: "#93a1a1",
+      text: "#657b83",
+      primary: "#268bd2",
+      accent: "#2aa198",
+      secondary: "#6c71c4",
+      success: "#859900",
+      error: "#dc322f",
+      warning: "#b58900"
+    },
+    flexoki: {
+      background: "#FFFCF0",
+      surface: "#F2F0E5",
+      border: "#B7B5AC",
+      dim: "#6F6E69",
+      text: "#100F0F",
+      primary: "#205EA6",
+      accent: "#BC5215",
+      secondary: "#5E409D",
+      success: "#66800B",
+      error: "#AF3029",
+      warning: "#BC5215"
+    },
+    mercury: {
+      background: "#ffffff",
+      surface: "#fbfcfd",
+      border: "#e0e0e8",
+      dim: "#70707d",
+      text: "#363644",
+      primary: "#5266eb",
+      accent: "#8da4f5",
+      secondary: "#465bd1",
+      success: "#036e43",
+      error: "#b0175f",
+      warning: "#a44200"
+    },
+    vercel: {
+      background: "#FFFFFF",
+      surface: "#FAFAFA",
+      border: "#EAEAEA",
+      dim: "#666666",
+      text: "#171717",
+      primary: "#0070F3",
+      accent: "#8E4EC6",
+      secondary: "#0062D1",
+      success: "#388E3C",
+      error: "#DC3545",
+      warning: "#FF9500"
+    }
+  };
+  THEME_NAMES = Object.keys(THEMES);
+});
+
+// src/tui/theme/ThemeContext.tsx
+import { createContext as createContext2, useContext as useContext2, useState, useCallback } from "react";
+import { jsxDEV as jsxDEV2 } from "@opentui/react/jsx-dev-runtime";
+function ThemeProvider({ name, children }) {
+  const [themeName, setThemeName] = useState(name);
+  const setTheme = useCallback(async (next) => {
+    setThemeName(next);
+    try {
+      const { writeThemeToConfig: writeThemeToConfig2 } = await Promise.resolve().then(() => (init_ai_config(), exports_ai_config));
+      await writeThemeToConfig2(next);
+    } catch {}
+  }, []);
+  return /* @__PURE__ */ jsxDEV2(ThemeContext.Provider, {
+    value: { theme: getTheme(themeName), themeName, setTheme },
+    children
+  }, undefined, false, undefined, this);
+}
+function useTheme() {
+  return useContext2(ThemeContext).theme;
+}
+function useThemeCtx() {
+  return useContext2(ThemeContext);
+}
+var ThemeContext;
+var init_ThemeContext = __esm(() => {
+  init_themes();
+  ThemeContext = createContext2({
+    theme: getTheme(DEFAULT_THEME),
+    themeName: DEFAULT_THEME,
+    setTheme: () => {}
+  });
+});
+
+// src/tui/context/ModalContext.tsx
+import { createContext as createContext3, useContext as useContext3, useState as useState2 } from "react";
+import { jsxDEV as jsxDEV3 } from "@opentui/react/jsx-dev-runtime";
+function ModalProvider({ children }) {
+  const [modalOpen, setModalOpen] = useState2(false);
+  return /* @__PURE__ */ jsxDEV3(ModalContext.Provider, {
+    value: { modalOpen, setModalOpen },
+    children
+  }, undefined, false, undefined, this);
+}
+function useModal() {
+  return useContext3(ModalContext);
+}
+var ModalContext;
+var init_ModalContext = __esm(() => {
+  ModalContext = createContext3({ modalOpen: false, setModalOpen: () => {} });
+});
+
+// src/tui/components/ThemePicker.tsx
+import { useState as useState3, useEffect as useEffect2, useRef } from "react";
+import { useKeyboard } from "@opentui/react";
+import { jsxDEV as jsxDEV4 } from "@opentui/react/jsx-dev-runtime";
+function ThemePicker({ onClose }) {
+  const { theme, themeName, setTheme } = useThemeCtx();
+  const [query, setQuery] = useState3("");
+  const [cursor, setCursor] = useState3(0);
+  const scrollRef = useRef(null);
+  const filtered = THEME_NAMES.filter((n) => n.includes(query.toLowerCase()));
+  useEffect2(() => {
+    setCursor(0);
+    const name = filtered[0];
+    if (name)
+      setTheme(name);
+  }, [query]);
+  useEffect2(() => {
+    const sb = scrollRef.current;
+    if (!sb)
+      return;
+    if (cursor < sb.scrollTop)
+      sb.scrollTo(cursor);
+    else if (cursor >= sb.scrollTop + LIST_H)
+      sb.scrollTo(cursor - LIST_H + 1);
+  }, [cursor]);
+  useEffect2(() => {
+    const idx = filtered.indexOf(themeName);
+    if (idx >= 0)
+      setCursor(idx);
+  }, []);
+  useKeyboard((key) => {
+    if (key.name === "escape" || !key.ctrl && key.sequence === "T") {
+      onClose();
+      return;
+    }
+    if (key.name === "up") {
+      const n = Math.max(0, cursor - 1);
+      setCursor(n);
+      const name = filtered[n];
+      if (name)
+        setTheme(name);
+      return;
+    }
+    if (key.name === "down") {
+      const n = Math.min(filtered.length - 1, cursor + 1);
+      setCursor(n);
+      const name = filtered[n];
+      if (name)
+        setTheme(name);
+      return;
+    }
+    if (key.name === "return" || key.name === "enter") {
+      onClose();
+      return;
+    }
+    if (key.name === "backspace" || key.name === "delete") {
+      setQuery((q) => q.slice(0, -1));
+      return;
+    }
+    if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ") {
+      setQuery((q) => q + key.sequence);
+    }
+  });
+  const W = 32;
+  const LIST_H = 9;
+  return /* @__PURE__ */ jsxDEV4("box", {
+    position: "absolute",
+    top: 3,
+    right: 3,
+    width: W,
+    flexDirection: "column",
+    border: true,
+    borderStyle: "rounded",
+    borderColor: theme.primary,
+    backgroundColor: theme.surface,
+    zIndex: 100,
+    children: [
+      /* @__PURE__ */ jsxDEV4("box", {
+        height: 1,
+        flexDirection: "row",
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingTop: 1,
+        children: [
+          /* @__PURE__ */ jsxDEV4("text", {
+            fg: theme.primary,
+            children: "\uDB80\uDFD8 "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("text", {
+            fg: theme.text,
+            children: "Themes"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("text", {
+            fg: theme.dim,
+            children: [
+              "  ",
+              themeName
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("box", {
+        height: 1,
+        backgroundColor: theme.border
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("box", {
+        height: 1,
+        flexDirection: "row",
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingTop: 1,
+        paddingBottom: 1,
+        children: [
+          /* @__PURE__ */ jsxDEV4("text", {
+            fg: theme.dim,
+            children: "  "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("text", {
+            fg: query ? theme.text : theme.dim,
+            children: query || "search..."
+          }, undefined, false, undefined, this),
+          query.length > 0 && /* @__PURE__ */ jsxDEV4("text", {
+            fg: theme.accent,
+            children: "_"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("box", {
+        height: 1,
+        backgroundColor: theme.border
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("scrollbox", {
+        ref: scrollRef,
+        height: LIST_H,
+        focused: false,
+        children: filtered.length === 0 ? /* @__PURE__ */ jsxDEV4("box", {
+          height: 1,
+          paddingLeft: 3,
+          children: /* @__PURE__ */ jsxDEV4("text", {
+            fg: theme.dim,
+            children: "no match"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this) : filtered.map((name, i) => {
+          const isActive = i === cursor;
+          const isCurrent = name === themeName;
+          const isDark = !LIGHT_THEMES.has(name);
+          const tag = isDark ? "\u25C6" : "\u25C7";
+          const tagColor = isDark ? theme.secondary : theme.accent;
+          return /* @__PURE__ */ jsxDEV4("box", {
+            height: 1,
+            flexDirection: "row",
+            backgroundColor: isActive ? theme.border : "transparent",
+            paddingLeft: 2,
+            paddingRight: 2,
+            children: [
+              /* @__PURE__ */ jsxDEV4("text", {
+                fg: isCurrent ? theme.success : theme.dim,
+                width: 2,
+                children: isCurrent ? "\u2713" : " "
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("text", {
+                fg: tagColor,
+                width: 2,
+                children: tag
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4("text", {
+                fg: isActive ? theme.text : theme.dim,
+                children: [
+                  " ",
+                  name
+                ]
+              }, undefined, true, undefined, this),
+              isActive && /* @__PURE__ */ jsxDEV4("text", {
+                fg: theme.primary,
+                children: "  \u203A"
+              }, undefined, false, undefined, this)
+            ]
+          }, name, true, undefined, this);
+        })
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("box", {
+        height: 1,
+        backgroundColor: theme.border
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("box", {
+        height: 1,
+        flexDirection: "row",
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingTop: 1,
+        paddingBottom: 1,
+        children: [
+          /* @__PURE__ */ jsxDEV4("text", {
+            fg: theme.secondary,
+            children: "\u25C6"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("text", {
+            fg: theme.dim,
+            children: " dark  "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("text", {
+            fg: theme.accent,
+            children: "\u25C7"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("text", {
+            fg: theme.dim,
+            children: " light  "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("text", {
+            fg: theme.dim,
+            children: "  [\u2191\u2193] [Esc]"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+var LIGHT_THEMES;
+var init_ThemePicker = __esm(() => {
+  init_ThemeContext();
+  init_themes();
+  LIGHT_THEMES = new Set(["github", "everforest", "solarized", "flexoki", "mercury", "vercel"]);
+});
+
 // package.json
 var package_default;
 var init_package = __esm(() => {
   package_default = {
     name: "ai-speedometer",
-    version: "2.2.0",
+    version: "2.3.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",
@@ -2349,27 +3077,28 @@ var init_package = __esm(() => {
 });
 
 // src/tui/components/Header.tsx
-import { jsxDEV as jsxDEV2 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV5 } from "@opentui/react/jsx-dev-runtime";
 function Header({ screen }) {
+  const theme = useTheme();
   if (screen === "main-menu")
     return null;
-  return /* @__PURE__ */ jsxDEV2("box", {
+  return /* @__PURE__ */ jsxDEV5("box", {
     height: 1,
     flexDirection: "row",
     alignItems: "center",
     paddingLeft: 2,
-    backgroundColor: "#16161e",
+    backgroundColor: theme.background,
     children: [
-      /* @__PURE__ */ jsxDEV2("text", {
-        fg: "#7aa2f7",
+      /* @__PURE__ */ jsxDEV5("text", {
+        fg: theme.primary,
         children: "AI-SPEEDOMETER"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV2("text", {
-        fg: "#292e42",
+      /* @__PURE__ */ jsxDEV5("text", {
+        fg: theme.border,
         children: "  \xB7  "
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV2("text", {
-        fg: "#565f89",
+      /* @__PURE__ */ jsxDEV5("text", {
+        fg: theme.dim,
         children: [
           "v",
           package_default.version
@@ -2380,37 +3109,61 @@ function Header({ screen }) {
 }
 var init_Header = __esm(() => {
   init_package();
+  init_ThemeContext();
 });
 
 // src/tui/components/Footer.tsx
-import { jsxDEV as jsxDEV3 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV6 } from "@opentui/react/jsx-dev-runtime";
 function Footer({ hints }) {
+  const theme = useTheme();
   const joined = hints.join("  \xB7  ");
-  return /* @__PURE__ */ jsxDEV3("box", {
+  return /* @__PURE__ */ jsxDEV6("box", {
     height: 1,
     flexDirection: "row",
     alignItems: "center",
     paddingLeft: 1,
     paddingRight: 1,
-    backgroundColor: "#16161e",
-    children: /* @__PURE__ */ jsxDEV3("text", {
-      fg: "#565f89",
+    backgroundColor: theme.background,
+    children: /* @__PURE__ */ jsxDEV6("text", {
+      fg: theme.dim,
       children: joined
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
-var init_Footer = () => {};
+var init_Footer = __esm(() => {
+  init_ThemeContext();
+});
+
+// src/tui/hooks/useAppKeyboard.ts
+import { useKeyboard as useKeyboard2 } from "@opentui/react";
+function useAppKeyboard(handler) {
+  const { modalOpen } = useModal();
+  useKeyboard2((key) => {
+    if (modalOpen)
+      return;
+    handler(key);
+  });
+}
+var init_useAppKeyboard = __esm(() => {
+  init_ModalContext();
+});
 
 // src/tui/screens/MainMenuScreen.tsx
-import { useState } from "react";
+import { useState as useState4 } from "react";
 import { useRenderer } from "@opentui/react";
-import { useKeyboard } from "@opentui/react";
-import { jsxDEV as jsxDEV4 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV7 } from "@opentui/react/jsx-dev-runtime";
 function MainMenuScreen() {
   const navigate = useNavigate();
   const renderer = useRenderer();
-  const [cursor, setCursor] = useState(0);
-  useKeyboard((key) => {
+  const theme = useTheme();
+  const [cursor, setCursor] = useState4(0);
+  const ITEMS = [
+    { label: "\u26A1 Run Benchmark", desc: "test model speed & throughput", color: theme.accent },
+    { label: "\u2699  Manage Models", desc: "add providers and configure", color: theme.secondary },
+    { label: "?  FAQ / Learn", desc: "how metrics work & resources", color: theme.primary },
+    { label: "\u2715  Exit", desc: "quit the application", color: theme.error }
+  ];
+  useAppKeyboard((key) => {
     if (key.name === "up") {
       setCursor((i) => (i - 1 + ITEMS.length) % ITEMS.length);
     } else if (key.name === "down") {
@@ -2421,27 +3174,29 @@ function MainMenuScreen() {
       else if (cursor === 1)
         navigate("model-menu");
       else if (cursor === 2)
+        navigate("faq");
+      else if (cursor === 3)
         renderer.destroy();
     }
   });
-  return /* @__PURE__ */ jsxDEV4("box", {
+  return /* @__PURE__ */ jsxDEV7("box", {
     flexDirection: "column",
     flexGrow: 1,
     alignItems: "center",
     justifyContent: "center",
     children: [
-      /* @__PURE__ */ jsxDEV4("box", {
+      /* @__PURE__ */ jsxDEV7("box", {
         flexDirection: "column",
         alignItems: "center",
         marginBottom: 2,
         children: [
-          /* @__PURE__ */ jsxDEV4("ascii-font", {
+          /* @__PURE__ */ jsxDEV7("ascii-font", {
             text: "AI-SPEEDOMETER",
             font: "tiny",
-            color: "#7aa2f7"
+            color: theme.primary
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("text", {
-            fg: "#565f89",
+          /* @__PURE__ */ jsxDEV7("text", {
+            fg: theme.dim,
             children: [
               "v",
               package_default.version
@@ -2449,39 +3204,39 @@ function MainMenuScreen() {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4("box", {
+      /* @__PURE__ */ jsxDEV7("box", {
         flexDirection: "column",
         border: true,
         borderStyle: "rounded",
-        borderColor: "#292e42",
-        backgroundColor: "#16161e",
-        width: 46,
+        borderColor: theme.border,
+        backgroundColor: theme.background,
+        width: 48,
         children: ITEMS.map((item, i) => {
           const active = i === cursor;
-          return /* @__PURE__ */ jsxDEV4("box", {
+          return /* @__PURE__ */ jsxDEV7("box", {
             flexDirection: "row",
             alignItems: "center",
-            backgroundColor: active ? "#292e42" : "transparent",
+            backgroundColor: active ? theme.border : "transparent",
             paddingLeft: 2,
             paddingRight: 2,
             paddingTop: 1,
             paddingBottom: 1,
             children: [
-              /* @__PURE__ */ jsxDEV4("box", {
+              /* @__PURE__ */ jsxDEV7("box", {
                 flexDirection: "column",
                 flexGrow: 1,
                 children: [
-                  /* @__PURE__ */ jsxDEV4("text", {
-                    fg: active ? item.color : "#565f89",
+                  /* @__PURE__ */ jsxDEV7("text", {
+                    fg: active ? item.color : theme.dim,
                     children: item.label
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV4("text", {
-                    fg: active ? "#565f89" : "#292e42",
+                  /* @__PURE__ */ jsxDEV7("text", {
+                    fg: active ? theme.dim : theme.border,
                     children: item.desc
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              active && /* @__PURE__ */ jsxDEV4("text", {
+              active && /* @__PURE__ */ jsxDEV7("text", {
                 fg: item.color,
                 children: "\u203A"
               }, undefined, false, undefined, this)
@@ -2492,24 +3247,20 @@ function MainMenuScreen() {
     ]
   }, undefined, true, undefined, this);
 }
-var ITEMS;
 var init_MainMenuScreen = __esm(() => {
+  init_useAppKeyboard();
   init_AppContext();
+  init_ThemeContext();
   init_package();
-  ITEMS = [
-    { label: "\u26A1 Run Benchmark", desc: "test model speed & throughput", color: "#7dcfff" },
-    { label: "\u2699  Manage Models", desc: "add providers and configure", color: "#bb9af7" },
-    { label: "\u2715  Exit", desc: "quit the application", color: "#f7768e" }
-  ];
 });
 
 // src/tui/components/MenuList.tsx
-import { useState as useState2 } from "react";
-import { useKeyboard as useKeyboard2 } from "@opentui/react";
-import { jsxDEV as jsxDEV5 } from "@opentui/react/jsx-dev-runtime";
+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 [cursor, setCursor] = useState2(initialIndex);
-  useKeyboard2((key) => {
+  const theme = useTheme();
+  const [cursor, setCursor] = useState5(initialIndex);
+  useAppKeyboard((key) => {
     if (key.name === "up") {
       const next = (cursor - 1 + items.length) % items.length;
       setCursor(next);
@@ -2522,33 +3273,33 @@ function MenuList({ items, selectedIndex: initialIndex = 0, onSelect, onNavigate
       onSelect(cursor);
     }
   });
-  return /* @__PURE__ */ jsxDEV5("box", {
+  return /* @__PURE__ */ jsxDEV8("box", {
     flexDirection: "column",
     children: items.map((item, i) => {
       const isSelected = i === cursor;
-      return /* @__PURE__ */ jsxDEV5("box", {
+      return /* @__PURE__ */ jsxDEV8("box", {
         flexDirection: "row",
         alignItems: "center",
-        backgroundColor: isSelected ? "#292e42" : "transparent",
+        backgroundColor: isSelected ? theme.border : "transparent",
         paddingLeft: 1,
         paddingRight: 1,
         children: [
-          /* @__PURE__ */ jsxDEV5("box", {
+          /* @__PURE__ */ jsxDEV8("box", {
             flexDirection: "column",
             flexGrow: 1,
             children: [
-              /* @__PURE__ */ jsxDEV5("text", {
-                fg: isSelected ? "#c0caf5" : "#565f89",
+              /* @__PURE__ */ jsxDEV8("text", {
+                fg: isSelected ? theme.text : theme.dim,
                 children: item.label
               }, undefined, false, undefined, this),
-              item.description ? /* @__PURE__ */ jsxDEV5("text", {
-                fg: isSelected ? "#565f89" : "#292e42",
+              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__ */ jsxDEV5("text", {
-            fg: "#7aa2f7",
+          isSelected && /* @__PURE__ */ jsxDEV8("text", {
+            fg: theme.primary,
             children: "\u203A"
           }, undefined, false, undefined, this)
         ]
@@ -2556,14 +3307,17 @@ function MenuList({ items, selectedIndex: initialIndex = 0, onSelect, onNavigate
     })
   }, undefined, false, undefined, this);
 }
-var init_MenuList = () => {};
+var init_MenuList = __esm(() => {
+  init_useAppKeyboard();
+  init_ThemeContext();
+});
 
 // src/tui/screens/ModelMenuScreen.tsx
-import { useKeyboard as useKeyboard3 } from "@opentui/react";
-import { jsxDEV as jsxDEV6 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9 } from "@opentui/react/jsx-dev-runtime";
 function ModelMenuScreen() {
   const navigate = useNavigate();
-  useKeyboard3((key) => {
+  const theme = useTheme();
+  useAppKeyboard((key) => {
     if (key.name === "escape" || key.name === "q") {
       navigate("main-menu");
     }
@@ -2580,30 +3334,32 @@ function ModelMenuScreen() {
     else if (index === 4)
       navigate("main-menu");
   }
-  return /* @__PURE__ */ jsxDEV6("box", {
+  return /* @__PURE__ */ jsxDEV9("box", {
     flexDirection: "column",
     flexGrow: 1,
     padding: 1,
     children: [
-      /* @__PURE__ */ jsxDEV6("text", {
-        fg: "#7aa2f7",
+      /* @__PURE__ */ jsxDEV9("text", {
+        fg: theme.primary,
         children: "Model Management"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV6("box", {
+      /* @__PURE__ */ jsxDEV9("box", {
         marginTop: 1,
-        children: /* @__PURE__ */ jsxDEV6(MenuList, {
-          items: ITEMS2,
+        children: /* @__PURE__ */ jsxDEV9(MenuList, {
+          items: ITEMS,
           onSelect: handleSelect
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-var ITEMS2;
+var ITEMS;
 var init_ModelMenuScreen = __esm(() => {
+  init_useAppKeyboard();
   init_AppContext();
+  init_ThemeContext();
   init_MenuList();
-  ITEMS2 = [
+  ITEMS = [
     { label: "Add Verified Provider" },
     { label: "Add Custom Provider" },
     { label: "Add Models to Provider" },
@@ -2613,13 +3369,13 @@ var init_ModelMenuScreen = __esm(() => {
 });
 
 // src/tui/hooks/usePaste.ts
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
 import { useRenderer as useRenderer2 } from "@opentui/react";
 function usePaste(onPaste) {
   const renderer = useRenderer2();
-  const callbackRef = useRef(onPaste);
+  const callbackRef = useRef2(onPaste);
   callbackRef.current = onPaste;
-  useEffect2(() => {
+  useEffect3(() => {
     const handler = (event) => callbackRef.current(event.text);
     renderer.keyInput.on("paste", handler);
     return () => {
@@ -2630,36 +3386,29 @@ function usePaste(onPaste) {
 var init_usePaste = () => {};
 
 // src/tui/screens/ModelSelectScreen.tsx
-import { useState as useState3, useEffect as useEffect3, useCallback, useRef as useRef2 } from "react";
-import { useKeyboard as useKeyboard4, useTerminalDimensions } from "@opentui/react";
-import { jsxDEV as jsxDEV7 } from "@opentui/react/jsx-dev-runtime";
+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";
 function ModelSelectScreen() {
   const { state, dispatch } = useAppContext();
   const navigate = useNavigate();
+  const theme = useTheme();
   const { height, width } = useTerminalDimensions();
-  const [searchQuery, setSearchQuery] = useState3("");
-  const [cursor, setCursor] = useState3(0);
-  const [selected, setSelected] = useState3(new Set);
-  const [allModels, setAllModels] = useState3([]);
-  const [recentKeys, setRecentKeys] = useState3(new Set);
-  const [debouncedQuery, setDebouncedQuery] = useState3("");
-  const scrollboxRef = useRef2(null);
+  const [searchQuery, setSearchQuery] = useState6("");
+  const [cursor, setCursor] = useState6(0);
+  const [selected, setSelected] = useState6(new Set);
+  const [allModels, setAllModels] = useState6([]);
+  const [recentKeys, setRecentKeys] = useState6(new Set);
+  const [debouncedQuery, setDebouncedQuery] = useState6("");
+  const scrollboxRef = useRef3(null);
   const PAGE_SIZE = Math.max(3, height - 14);
   const CARD_W = Math.min(60, width - 4);
-  useEffect3(() => {
+  useEffect4(() => {
     const providers = state.config?.providers ?? [];
     const models = [];
     for (const provider of providers) {
       for (const m of provider.models) {
-        models.push({
-          id: m.id,
-          name: m.name || m.id,
-          providerName: provider.name,
-          providerType: provider.type,
-          providerId: provider.id,
-          providerConfig: { baseUrl: provider.baseUrl, apiKey: provider.apiKey },
-          key: `${provider.id}::${m.id}`
-        });
+        models.push({ id: m.id, name: m.name || m.id, providerName: provider.name, providerType: provider.type, providerId: provider.id, providerConfig: { baseUrl: provider.baseUrl, apiKey: provider.apiKey }, key: `${provider.id}::${m.id}` });
       }
     }
     setAllModels(models);
@@ -2681,11 +3430,11 @@ function ModelSelectScreen() {
     }
     loadRecents();
   }, [state.config]);
-  useEffect3(() => {
+  useEffect4(() => {
     const t = setTimeout(() => setDebouncedQuery(searchQuery), DEBOUNCE_MS);
     return () => clearTimeout(t);
   }, [searchQuery]);
-  useEffect3(() => {
+  useEffect4(() => {
     setCursor(0);
   }, [debouncedQuery]);
   function isRecent(m) {
@@ -2693,14 +3442,13 @@ function ModelSelectScreen() {
   }
   const orderedModels = (() => {
     if (!debouncedQuery) {
-      const recents = allModels.filter((m) => isRecent(m));
-      const rest = allModels.filter((m) => !isRecent(m));
-      return [...recents, ...rest];
+      const r = allModels.filter((m) => isRecent(m));
+      return [...r, ...allModels.filter((m) => !isRecent(m))];
     }
     const words = debouncedQuery.toLowerCase().split(/\s+/).filter((w) => w.length > 0);
     return allModels.filter((m) => {
-      const haystack = `${m.name} ${m.providerName} ${m.providerId} ${m.id}`.toLowerCase();
-      return words.every((w) => haystack.includes(w));
+      const h = `${m.name} ${m.providerName} ${m.providerId} ${m.id}`.toLowerCase();
+      return words.every((w) => h.includes(w));
     });
   })();
   const recentCount = !debouncedQuery ? orderedModels.filter((m) => isRecent(m)).length : 0;
@@ -2712,11 +3460,10 @@ function ModelSelectScreen() {
       const mIsRecent = isRecent(m);
       const prevIsRecent = i > 0 ? isRecent(orderedModels[i - 1]) : false;
       if (!debouncedQuery && recentCount > 0) {
-        if (i === 0 && mIsRecent) {
+        if (i === 0 && mIsRecent)
           rows.push({ kind: "separator", label: "\u2500\u2500 recent \u2500\u2500" });
-        } else if (!mIsRecent && prevIsRecent) {
+        else if (!mIsRecent && prevIsRecent)
           rows.push({ kind: "separator", label: "\u2500\u2500 all models \u2500\u2500" });
-        }
       }
       rows.push({ kind: "model", model: m, idx: modelIdx++ });
     }
@@ -2724,26 +3471,25 @@ function ModelSelectScreen() {
   })();
   const allModelRows = allRows.filter((r) => r.kind === "model");
   const cursorModel = allModelRows[cursor]?.model;
-  useEffect3(() => {
+  useEffect4(() => {
     const sb = scrollboxRef.current;
     if (!sb)
       return;
     const top = sb.scrollTop;
     const visible = PAGE_SIZE;
-    if (cursor < top) {
+    if (cursor < top)
       sb.scrollTo(cursor);
-    } else if (cursor >= top + visible) {
+    else if (cursor >= top + visible)
       sb.scrollTo(cursor - visible + 1);
-    }
   }, [cursor, PAGE_SIZE]);
-  const launchBench = useCallback((models) => {
+  const launchBench = useCallback2((models) => {
     dispatch({ type: "BENCH_START", models });
     navigate("benchmark");
   }, [dispatch, navigate]);
   usePaste((text) => {
     setSearchQuery((q) => q + text.replace(/[\r\n]/g, ""));
   });
-  useKeyboard4((key) => {
+  useAppKeyboard((key) => {
     if (key.name === "escape") {
       navigate("main-menu");
       return;
@@ -2778,11 +3524,10 @@ function ModelSelectScreen() {
       return;
     }
     if (key.name === "return" || key.name === "enter") {
-      if (selected.size > 0) {
+      if (selected.size > 0)
         launchBench(allModels.filter((m) => selected.has(m.key)));
-      } else if (cursorModel) {
+      else if (cursorModel)
         launchBench([cursorModel]);
-      }
       return;
     }
     if (!searchQuery && key.sequence === "A") {
@@ -2801,50 +3546,49 @@ function ModelSelectScreen() {
       setSearchQuery((q) => q.slice(0, -1));
       return;
     }
-    if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ") {
+    if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ")
       setSearchQuery((q) => q + key.sequence);
-    }
   });
   if (state.isLoadingConfig) {
-    return /* @__PURE__ */ jsxDEV7("box", {
+    return /* @__PURE__ */ jsxDEV10("box", {
       flexDirection: "column",
       flexGrow: 1,
       alignItems: "center",
       justifyContent: "center",
-      children: /* @__PURE__ */ jsxDEV7("text", {
-        fg: "#565f89",
+      children: /* @__PURE__ */ jsxDEV10("text", {
+        fg: theme.dim,
         children: "Loading config..."
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
   const nameW = Math.floor((CARD_W - 10) / 2);
   const provW = CARD_W - nameW - 10;
-  return /* @__PURE__ */ jsxDEV7("box", {
+  return /* @__PURE__ */ jsxDEV10("box", {
     flexDirection: "column",
     flexGrow: 1,
     alignItems: "center",
     justifyContent: "center",
-    children: /* @__PURE__ */ jsxDEV7("box", {
+    children: /* @__PURE__ */ jsxDEV10("box", {
       flexDirection: "column",
       border: true,
       borderStyle: "rounded",
-      borderColor: "#292e42",
-      backgroundColor: "#16161e",
+      borderColor: theme.border,
+      backgroundColor: theme.background,
       width: CARD_W,
       children: [
-        /* @__PURE__ */ jsxDEV7("box", {
+        /* @__PURE__ */ jsxDEV10("box", {
           flexDirection: "row",
           paddingLeft: 2,
           paddingRight: 2,
           paddingTop: 1,
           paddingBottom: 1,
           children: [
-            /* @__PURE__ */ jsxDEV7("text", {
-              fg: "#7dcfff",
+            /* @__PURE__ */ jsxDEV10("text", {
+              fg: theme.accent,
               children: "Search: "
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV7("text", {
-              fg: "#c0caf5",
+            /* @__PURE__ */ jsxDEV10("text", {
+              fg: theme.text,
               children: [
                 searchQuery,
                 "_"
@@ -2852,74 +3596,73 @@ function ModelSelectScreen() {
             }, undefined, true, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV7("box", {
+        /* @__PURE__ */ jsxDEV10("box", {
           height: 1,
-          backgroundColor: "#292e42"
+          backgroundColor: theme.border
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV7("scrollbox", {
+        /* @__PURE__ */ jsxDEV10("scrollbox", {
           ref: scrollboxRef,
           height: PAGE_SIZE,
-          style: { scrollbarOptions: { showArrows: true, trackOptions: { foregroundColor: "#7aa2f7", backgroundColor: "#292e42" } } },
+          style: { scrollbarOptions: { showArrows: true, trackOptions: { foregroundColor: theme.primary, backgroundColor: theme.border } } },
           children: [
-            allRows.length === 0 && /* @__PURE__ */ jsxDEV7("box", {
+            allRows.length === 0 && /* @__PURE__ */ jsxDEV10("box", {
               height: 1,
               paddingLeft: 2,
-              children: /* @__PURE__ */ jsxDEV7("text", {
-                fg: "#565f89",
+              children: /* @__PURE__ */ jsxDEV10("text", {
+                fg: theme.dim,
                 children: "No models found"
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
             (() => {
               let modelCursor = 0;
               return allRows.map((row, i) => {
-                if (row.kind === "separator") {
-                  return /* @__PURE__ */ jsxDEV7("box", {
+                if (row.kind === "separator")
+                  return /* @__PURE__ */ jsxDEV10("box", {
                     height: 1,
                     paddingLeft: 2,
-                    children: /* @__PURE__ */ jsxDEV7("text", {
-                      fg: "#565f89",
+                    children: /* @__PURE__ */ jsxDEV10("text", {
+                      fg: theme.dim,
                       children: row.label
                     }, undefined, false, undefined, this)
                   }, `sep-${i}`, false, undefined, this);
-                }
                 const localCursor = modelCursor++;
                 const isActive = localCursor === cursor;
                 const isSel = selected.has(row.model.key);
-                let nameFg = "#565f89";
+                let nameFg = theme.dim;
                 if (isActive && isSel)
-                  nameFg = "#7dcfff";
+                  nameFg = theme.accent;
                 else if (isActive)
-                  nameFg = "#c0caf5";
+                  nameFg = theme.text;
                 else if (isSel)
-                  nameFg = "#9ece6a";
-                return /* @__PURE__ */ jsxDEV7("box", {
+                  nameFg = theme.success;
+                return /* @__PURE__ */ jsxDEV10("box", {
                   height: 1,
                   width: "100%",
                   flexDirection: "row",
-                  backgroundColor: isActive ? "#292e42" : "transparent",
+                  backgroundColor: isActive ? theme.border : "transparent",
                   children: [
-                    /* @__PURE__ */ jsxDEV7("text", {
-                      fg: "#565f89",
+                    /* @__PURE__ */ jsxDEV10("text", {
+                      fg: theme.dim,
                       width: 2,
                       children: " "
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV7("text", {
+                    /* @__PURE__ */ jsxDEV10("text", {
                       fg: nameFg,
                       width: nameW,
                       children: row.model.name
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV7("text", {
-                      fg: isActive ? "#7aa2f7" : "#565f89",
+                    /* @__PURE__ */ jsxDEV10("text", {
+                      fg: isActive ? theme.primary : theme.dim,
                       width: provW,
                       children: row.model.providerName
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV7("text", {
-                      fg: "#9ece6a",
+                    /* @__PURE__ */ jsxDEV10("text", {
+                      fg: theme.success,
                       width: 2,
                       children: isSel ? "\u2713" : " "
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV7("text", {
-                      fg: "#7dcfff",
+                    /* @__PURE__ */ jsxDEV10("text", {
+                      fg: theme.accent,
                       width: 2,
                       children: isActive ? "\u203A" : " "
                     }, undefined, false, undefined, this)
@@ -2929,19 +3672,19 @@ function ModelSelectScreen() {
             })()
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV7("box", {
+        /* @__PURE__ */ jsxDEV10("box", {
           height: 1,
-          backgroundColor: "#292e42"
+          backgroundColor: theme.border
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV7("box", {
+        /* @__PURE__ */ jsxDEV10("box", {
           flexDirection: "row",
           paddingLeft: 2,
           paddingRight: 2,
           paddingTop: 1,
           paddingBottom: 1,
           children: [
-            /* @__PURE__ */ jsxDEV7("text", {
-              fg: "#bb9af7",
+            /* @__PURE__ */ jsxDEV10("text", {
+              fg: theme.secondary,
               children: [
                 "Selected: ",
                 selected.size,
@@ -2949,16 +3692,16 @@ function ModelSelectScreen() {
                 selected.size !== 1 ? "s" : ""
               ]
             }, undefined, true, undefined, this),
-            recentCount > 0 && /* @__PURE__ */ jsxDEV7("text", {
-              fg: "#565f89",
+            recentCount > 0 && /* @__PURE__ */ jsxDEV10("text", {
+              fg: theme.dim,
               children: [
                 "   [R] recent (",
                 recentCount,
                 ")"
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV7("text", {
-              fg: "#565f89",
+            /* @__PURE__ */ jsxDEV10("text", {
+              fg: theme.dim,
               children: "   [\u2191\u2193/PgUp/PgDn/wheel] scroll"
             }, undefined, false, undefined, this)
           ]
@@ -2969,98 +3712,252 @@ function ModelSelectScreen() {
 }
 var DEBOUNCE_MS = 50;
 var init_ModelSelectScreen = __esm(() => {
+  init_useAppKeyboard();
   init_AppContext();
+  init_ThemeContext();
   init_usePaste();
 });
 
 // src/tui/components/BarChart.tsx
-import { jsxDEV as jsxDEV8 } from "@opentui/react/jsx-dev-runtime";
-function BarChart({ value, max, width, color }) {
-  const filled = max === 0 ? 0 : Math.round(value / max * width);
+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__ */ jsxDEV8("text", {
+  return /* @__PURE__ */ jsxDEV11("text", {
     fg: color,
     children: bar
   }, undefined, false, undefined, this);
 }
 var init_BarChart = () => {};
 
-// src/tui/components/ResultsTable.tsx
-import { jsxDEV as jsxDEV9 } from "@opentui/react/jsx-dev-runtime";
-function lpad(s, w) {
-  return s.length >= w ? s.slice(0, w) : " ".repeat(w - s.length) + s;
-}
-function rpad(s, w) {
-  return s.length >= w ? s.slice(0, w) : s + " ".repeat(w - s.length);
-}
-function trunc(s, w) {
-  return s.length > w ? s.slice(0, w - 1) + "\u2026" : s;
+// 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";
+function blendHex(hex, toward, t) {
+  const parse3 = (h) => [
+    parseInt(h.slice(1, 3), 16),
+    parseInt(h.slice(3, 5), 16),
+    parseInt(h.slice(5, 7), 16)
+  ];
+  const [r1, g1, b1] = parse3(hex.length === 7 ? hex : "#ffffff");
+  const [r2, g2, b2] = parse3(toward.length === 7 ? toward : "#ffffff");
+  const r = Math.round(r1 + (r2 - r1) * t);
+  const g = Math.round(g1 + (g2 - g1) * t);
+  const b = Math.round(b1 + (b2 - b1) * t);
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
 }
-function ResultsTable({ results, pendingCount }) {
-  const sorted = [...results].sort((a, b) => b.tokensPerSecond - a.tokensPerSecond);
-  const C = { rank: 4, model: 18, prov: 12, time: 10, ttft: 8, tps: 11, out: 8, inp: 8, tot: 8 };
-  const totalW = C.rank + C.model + C.prov + C.time + C.ttft + C.tps + C.out + C.inp + C.tot + 9;
+function GlowBar({ done, total, running }) {
+  const theme = useTheme();
+  const [pos, setPos] = useState7(0);
+  useEffect5(() => {
+    const tl = new Timeline({ loop: true, duration: 2200 });
+    const target = { pos: 0 };
+    tl.add(target, { pos: 1, duration: 2200, ease: "linear", onUpdate: (anim) => {
+      setPos(anim.targets[0].pos);
+    } }, 0);
+    tl.play();
+    engine.register(tl);
+    return () => {
+      tl.pause();
+      engine.unregister(tl);
+    };
+  }, []);
+  const filled = Math.round(done / (total || 1) * BAR_W);
+  const barChars = Array.from({ length: BAR_W }, (_, i) => {
+    if (i >= filled)
+      return { ch: "\u2591", fg: theme.border };
+    const phase = pos - i / BAR_W;
+    const intensity = Math.sin(Math.PI * phase * 1.5);
+    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", {
+    height: 1,
+    flexDirection: "row",
+    paddingLeft: 2,
+    children: [
+      /* @__PURE__ */ jsxDEV12("text", {
+        fg: theme.dim,
+        children: "Benchmarking  "
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV12("text", {
+        fg: theme.accent,
+        children: [
+          done,
+          "/",
+          total,
+          "  "
+        ]
+      }, undefined, true, undefined, this),
+      barChars.map((b, i) => /* @__PURE__ */ jsxDEV12("text", {
+        fg: b.fg,
+        children: b.ch
+      }, i, false, undefined, this)),
+      /* @__PURE__ */ jsxDEV12("text", {
+        fg: theme.warning,
+        children: [
+          "  ",
+          running,
+          " running..."
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+var BAR_W = 25;
+var init_GlowBar = __esm(() => {
+  init_ThemeContext();
+});
+
+// src/tui/components/ResultsTable.tsx
+import { jsxDEV as jsxDEV13 } from "@opentui/react/jsx-dev-runtime";
+function lpad(s, w) {
+  return s.length >= w ? s.slice(0, w) : " ".repeat(w - s.length) + s;
+}
+function rpad(s, w) {
+  return s.length >= w ? s.slice(0, w) : s + " ".repeat(w - s.length);
+}
+function trunc(s, w) {
+  return s.length > w ? s.slice(0, w - 1) + "\u2026" : s;
+}
+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);
-  function row(rank, model, prov, time, ttft, tps, 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(out, C.out) + " \u2502 " + lpad(inp, C.inp) + " \u2502 " + lpad(tot, C.tot);
+  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);
   }
-  const header = row("#", "Model", "Provider", "Time(s)", "TTFT(s)", "Tokens/Sec", "Out", "In", "Total");
-  return /* @__PURE__ */ jsxDEV9("box", {
+  const header = row("#", "Model", "Provider", "Time(s)", "TTFT(s)", "Tok/s", "F1000(h)", "Out", "In", "Total");
+  return /* @__PURE__ */ jsxDEV13("box", {
     flexDirection: "column",
     paddingLeft: 1,
     paddingRight: 1,
     children: [
-      /* @__PURE__ */ jsxDEV9("box", {
+      /* @__PURE__ */ jsxDEV13("box", {
         height: 1,
-        children: /* @__PURE__ */ jsxDEV9("text", {
-          fg: "#7dcfff",
+        children: /* @__PURE__ */ jsxDEV13("text", {
+          fg: theme.accent,
           children: header
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV9("box", {
+      /* @__PURE__ */ jsxDEV13("box", {
         height: 1,
-        children: /* @__PURE__ */ jsxDEV9("text", {
-          fg: "#292e42",
+        children: /* @__PURE__ */ jsxDEV13("text", {
+          fg: theme.border,
           children: sep
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       sorted.map((r, i) => {
         const rank = `${i + 1}`;
-        const timeSec = (r.totalTime / 1000).toFixed(2);
+        const timeSec = (r.totalTime / 1000).toFixed(1);
         const ttftSec = (r.timeToFirstToken / 1000).toFixed(2);
-        const tps = r.tokensPerSecond.toFixed(1);
-        const outTok = r.tokenCount.toString() + (r.usedEstimateForOutput ? "[e]" : "");
-        const inTok = r.promptTokens.toString() + (r.usedEstimateForInput ? "[e]" : "");
-        const totTok = r.totalTokens.toString() + (r.usedEstimateForOutput || r.usedEstimateForInput ? "[e]" : "");
+        const tps = r.tokensPerSecond.toFixed(0);
+        const f1000Val = r.f1000 === Infinity ? "\u221E" : r.f1000.toFixed(2);
+        const outTok = r.tokenCount.toString() + (r.usedEstimateForOutput ? "*" : "");
+        const inTok = r.promptTokens.toString() + (r.usedEstimateForInput ? "*" : "");
+        const totTok = r.totalTokens.toString() + (r.usedEstimateForOutput || r.usedEstimateForInput ? "*" : "");
         const hasEst = r.usedEstimateForOutput || r.usedEstimateForInput;
-        const line = row(rank, trunc(r.model, C.model), trunc(r.provider, C.prov), timeSec, ttftSec, tps, outTok, inTok, totTok);
-        return /* @__PURE__ */ jsxDEV9("box", {
+        const isBestTps = r.tokensPerSecond === maxTps && maxTps > 0;
+        const isBestTtft = r.timeToFirstToken === minTtft;
+        const isBestF1000 = r.f1000 === minF1000 && r.f1000 !== Infinity;
+        return /* @__PURE__ */ jsxDEV13("box", {
           height: 1,
           flexDirection: "row",
           children: [
-            /* @__PURE__ */ jsxDEV9("text", {
-              fg: "#c0caf5",
-              children: line
+            /* @__PURE__ */ jsxDEV13("text", {
+              fg: theme.dim,
+              children: [
+                lpad(rank, C.rank),
+                " \u2502 "
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV13("text", {
+              fg: theme.text,
+              children: [
+                rpad(trunc(r.model, C.model), C.model),
+                " \u2502 "
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV13("text", {
+              fg: theme.dim,
+              children: [
+                rpad(trunc(r.provider, C.prov), C.prov),
+                " \u2502 "
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV13("text", {
+              fg: theme.dim,
+              children: [
+                lpad(timeSec, C.time),
+                " \u2502 "
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV13("text", {
+              fg: isBestTtft ? theme.success : theme.dim,
+              children: [
+                lpad(ttftSec, C.ttft),
+                " \u2502 "
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV13("text", {
+              fg: isBestTps ? theme.success : theme.dim,
+              children: [
+                lpad(tps, C.tps),
+                " \u2502 "
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV13("text", {
+              fg: isBestF1000 ? theme.success : theme.dim,
+              children: [
+                lpad(f1000Val, C.f1000),
+                " \u2502 "
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV13("text", {
+              fg: theme.dim,
+              children: [
+                lpad(outTok, C.out),
+                " \u2502 "
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV13("text", {
+              fg: theme.dim,
+              children: [
+                lpad(inTok, C.inp),
+                " \u2502 "
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV13("text", {
+              fg: theme.dim,
+              children: lpad(totTok, C.tot)
             }, undefined, false, undefined, this),
-            hasEst && /* @__PURE__ */ jsxDEV9("text", {
-              fg: "#ff9e64",
+            hasEst && /* @__PURE__ */ jsxDEV13("text", {
+              fg: theme.warning,
               children: " [est]"
             }, undefined, false, undefined, this)
           ]
         }, `${r.model}-${r.provider}-${i}`, true, undefined, this);
       }),
-      /* @__PURE__ */ jsxDEV9("box", {
+      /* @__PURE__ */ jsxDEV13("box", {
         height: 1,
-        children: /* @__PURE__ */ jsxDEV9("text", {
-          fg: "#292e42",
+        children: /* @__PURE__ */ jsxDEV13("text", {
+          fg: theme.border,
           children: sep
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      pendingCount > 0 && /* @__PURE__ */ jsxDEV9("box", {
+      pendingCount > 0 && /* @__PURE__ */ jsxDEV13("box", {
         height: 1,
-        children: /* @__PURE__ */ jsxDEV9("text", {
-          fg: "#565f89",
+        children: /* @__PURE__ */ jsxDEV13("text", {
+          fg: theme.dim,
           children: [
             "  Waiting for ",
             pendingCount,
@@ -3073,13 +3970,13 @@ function ResultsTable({ results, pendingCount }) {
     ]
   }, undefined, true, undefined, this);
 }
-var init_ResultsTable = () => {};
+var init_ResultsTable = __esm(() => {
+  init_ThemeContext();
+});
 
 // src/tui/screens/BenchmarkScreen.tsx
-import { useState as useState4, useEffect as useEffect4, useRef as useRef3, useMemo } from "react";
-import { useKeyboard as useKeyboard5 } from "@opentui/react";
-import { engine, Timeline } from "@opentui/core";
-import { jsxDEV as jsxDEV10 } from "@opentui/react/jsx-dev-runtime";
+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) {
   if (rank === 1)
     return "1st";
@@ -3089,35 +3986,16 @@ function rankBadge(rank) {
     return "3rd";
   return `${rank}th`;
 }
-function Divider() {
-  return /* @__PURE__ */ jsxDEV10("box", {
-    height: 1,
-    backgroundColor: "#292e42"
-  }, undefined, false, undefined, this);
-}
 function BenchmarkScreen() {
   const { state, dispatch } = useAppContext();
   const navigate = useNavigate();
-  const [modelStates, setModelStates] = useState4([]);
-  const [spinnerFrame, setSpinnerFrame] = useState4(0);
-  const [shimmerPos, setShimmerPos] = useState4(0);
-  const [allDone, setAllDone] = useState4(false);
-  const spinnerRef = useRef3(null);
-  const startedRef = useRef3(false);
-  useEffect4(() => {
-    const tl = new Timeline({ loop: true, duration: 1400 });
-    const target = { pos: 0 };
-    tl.add(target, { pos: 1, duration: 1400, ease: "inOutSine", onUpdate: (anim) => {
-      setShimmerPos(anim.targets[0].pos);
-    } }, 0);
-    tl.play();
-    engine.register(tl);
-    return () => {
-      tl.pause();
-      engine.unregister(tl);
-    };
-  }, []);
-  useEffect4(() => {
+  const theme = useTheme();
+  const [modelStates, setModelStates] = useState8([]);
+  const [spinnerFrame, setSpinnerFrame] = useState8(0);
+  const [allDone, setAllDone] = useState8(false);
+  const spinnerRef = useRef4(null);
+  const startedRef = useRef4(false);
+  useEffect6(() => {
     if (startedRef.current)
       return;
     startedRef.current = true;
@@ -3176,95 +4054,46 @@ function BenchmarkScreen() {
   const maxTtft = Math.max(...done.map((m) => (m.result?.timeToFirstToken ?? 0) / 1000), 1);
   const tpsRanked = done.slice().sort((a, b) => (b.result?.tokensPerSecond ?? 0) - (a.result?.tokensPerSecond ?? 0));
   const ttftRanked = done.slice().sort((a, b) => (a.result?.timeToFirstToken ?? 0) - (b.result?.timeToFirstToken ?? 0));
+  const f1000Ranked = done.slice().sort((a, b) => (a.result?.f1000 ?? Infinity) - (b.result?.f1000 ?? Infinity));
   const maxTtftForBar = Math.max(...done.map((m) => (m.result?.timeToFirstToken ?? 0) / 1000), 1);
+  const maxF1000 = Math.max(...done.map((m) => m.result?.f1000 ?? 0), 1);
   const doneResults = tpsRanked.map((m) => m.result);
   const pendingCount = running.length + pending.length;
   const allRows = useMemo(() => {
     const rows = [];
     if (!allDone) {
-      const total = modelStates.length || 1;
-      const filled = Math.round((done.length + errors.length) / total * BAR_W);
-      const empty = BAR_W - filled;
-      const shimmerCenter = shimmerPos * (BAR_W - 1);
-      const shimmerHalf = 1.5;
-      const barChars = Array.from({ length: BAR_W }, (_, i) => {
-        const isFilled = i < filled;
-        const dist = Math.abs(i - shimmerCenter);
-        const inWindow = dist <= shimmerHalf;
-        const intensity = inWindow ? 1 - dist / shimmerHalf : 0;
-        if (isFilled) {
-          if (intensity > 0.6)
-            return { ch: "\u2588", fg: "#c8eeff" };
-          if (intensity > 0)
-            return { ch: "\u2593", fg: "#a0d8f0" };
-          return { ch: "\u2588", fg: "#4a9abb" };
-        } else {
-          if (intensity > 0.6)
-            return { ch: "\u2591", fg: "#2a3a52" };
-          if (intensity > 0)
-            return { ch: "\u2591", fg: "#222d40" };
-          return { ch: "\u2591", fg: "#1a2030" };
-        }
-      });
-      rows.push(/* @__PURE__ */ jsxDEV10("box", {
-        height: 1,
-        flexDirection: "row",
-        paddingLeft: 2,
-        children: [
-          /* @__PURE__ */ jsxDEV10("text", {
-            fg: "#565f89",
-            children: "Benchmarking  "
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV10("text", {
-            fg: "#7dcfff",
-            children: [
-              done.length + errors.length,
-              "/",
-              modelStates.length,
-              "  "
-            ]
-          }, undefined, true, undefined, this),
-          barChars.map((b, i) => /* @__PURE__ */ jsxDEV10("text", {
-            fg: b.fg,
-            children: b.ch
-          }, i, false, undefined, this)),
-          /* @__PURE__ */ jsxDEV10("text", {
-            fg: "#ff9e64",
-            children: [
-              "  ",
-              running.length,
-              " running..."
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, "progress-bar", true, undefined, this));
+      rows.push(/* @__PURE__ */ jsxDEV14(GlowBar, {
+        done: done.length + errors.length,
+        total: modelStates.length,
+        running: running.length
+      }, "progress-bar", false, undefined, this));
       for (const s of modelStates.filter((s2) => s2.status === "done" || s2.status === "error")) {
         if (s.status === "done") {
-          rows.push(/* @__PURE__ */ jsxDEV10("box", {
+          rows.push(/* @__PURE__ */ jsxDEV14("box", {
             height: 1,
             flexDirection: "row",
             paddingLeft: 2,
             children: [
-              /* @__PURE__ */ jsxDEV10("text", {
-                fg: "#9ece6a",
+              /* @__PURE__ */ jsxDEV14("text", {
+                fg: theme.success,
                 children: "  \u2713  "
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV10("text", {
-                fg: "#c0caf5",
+              /* @__PURE__ */ jsxDEV14("text", {
+                fg: theme.text,
                 children: [
                   s.model.name,
                   "  "
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV10("text", {
-                fg: "#7dcfff",
+              /* @__PURE__ */ jsxDEV14("text", {
+                fg: theme.accent,
                 children: [
                   (s.result?.tokensPerSecond ?? 0).toFixed(1),
                   " tok/s  "
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV10("text", {
-                fg: "#bb9af7",
+              /* @__PURE__ */ jsxDEV14("text", {
+                fg: theme.secondary,
                 children: [
                   ((s.result?.timeToFirstToken ?? 0) / 1000).toFixed(2),
                   "s TTFT"
@@ -3273,213 +4102,310 @@ function BenchmarkScreen() {
             ]
           }, `prog-${s.model.id}-${s.model.providerId}`, true, undefined, this));
         } else {
-          rows.push(/* @__PURE__ */ jsxDEV10("box", {
+          rows.push(/* @__PURE__ */ jsxDEV14("box", {
             height: 1,
             flexDirection: "row",
             paddingLeft: 2,
             children: [
-              /* @__PURE__ */ jsxDEV10("text", {
-                fg: "#f7768e",
+              /* @__PURE__ */ jsxDEV14("text", {
+                fg: theme.error,
                 children: "  \u2717  "
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV10("text", {
-                fg: "#c0caf5",
+              /* @__PURE__ */ jsxDEV14("text", {
+                fg: theme.text,
                 children: [
                   s.model.name,
                   "  "
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV10("text", {
-                fg: "#f7768e",
+              /* @__PURE__ */ jsxDEV14("text", {
+                fg: theme.error,
                 children: s.error ?? "error"
               }, undefined, false, undefined, this)
             ]
           }, `prog-${s.model.id}-${s.model.providerId}`, true, undefined, this));
         }
       }
-      rows.push(/* @__PURE__ */ jsxDEV10("box", {
+      rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1
       }, "prog-spacer", false, undefined, this));
     }
     if (tpsRanked.length > 0) {
-      rows.push(/* @__PURE__ */ jsxDEV10("box", {
+      rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
-        backgroundColor: "#292e42"
+        backgroundColor: theme.border
       }, "div-tps", false, undefined, this));
-      rows.push(/* @__PURE__ */ jsxDEV10("box", {
+      rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
         flexDirection: "row",
         paddingLeft: 1,
-        children: /* @__PURE__ */ jsxDEV10("text", {
-          fg: "#7aa2f7",
+        children: /* @__PURE__ */ jsxDEV14("text", {
+          fg: theme.primary,
           children: " TOKENS/SEC RANKING  (higher is better) "
         }, undefined, false, undefined, this)
       }, "hdr-tps", false, undefined, this));
       for (const [i, s] of tpsRanked.entries()) {
         const rank = i + 1;
-        const rankFg = rank === 1 ? "#7dcfff" : rank === 2 ? "#bb9af7" : "#565f89";
+        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__ */ jsxDEV10("box", {
+        rows.push(/* @__PURE__ */ jsxDEV14("box", {
           height: 1,
           flexDirection: "row",
           paddingLeft: 2,
           children: [
-            /* @__PURE__ */ jsxDEV10("text", {
+            /* @__PURE__ */ jsxDEV14("text", {
               fg: rankFg,
               children: [
                 badge,
                 "  "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#565f89",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.dim,
               children: " \u2502 "
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#7dcfff",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.accent,
               children: [
                 tps.toFixed(1).padStart(8),
                 " tok/s  "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#565f89",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.dim,
               children: " \u2502 "
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#bb9af7",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.secondary,
               children: [
                 timeSec.toFixed(2).padStart(6),
                 "s  "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#565f89",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.dim,
               children: " \u2502 "
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#c0caf5",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.text,
               children: [
                 modelCol,
                 "  "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#565f89",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.dim,
               children: [
                 provCol,
                 "  \u2502  "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10(BarChart, {
+            /* @__PURE__ */ jsxDEV14(BarChart, {
               value: tps,
               max: maxTps,
-              width: BAR_W,
-              color: "#7dcfff"
+              width: BAR_W2,
+              color: theme.accent
             }, undefined, false, undefined, this)
           ]
         }, `tps-${s.model.id}-${s.model.providerId}`, true, undefined, this));
       }
     }
     if (ttftRanked.length > 0) {
-      rows.push(/* @__PURE__ */ jsxDEV10("box", {
+      rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
-        backgroundColor: "#292e42"
+        backgroundColor: theme.border
       }, "div-ttft", false, undefined, this));
-      rows.push(/* @__PURE__ */ jsxDEV10("box", {
+      rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
         flexDirection: "row",
         paddingLeft: 1,
-        children: /* @__PURE__ */ jsxDEV10("text", {
-          fg: "#7aa2f7",
+        children: /* @__PURE__ */ jsxDEV14("text", {
+          fg: theme.primary,
           children: " TIME TO FIRST TOKEN RANKING  (lower is better) "
         }, undefined, false, undefined, this)
       }, "hdr-ttft", false, undefined, this));
       for (const [i, s] of ttftRanked.entries()) {
         const rank = i + 1;
-        const rankFg = rank === 1 ? "#7dcfff" : rank === 2 ? "#bb9af7" : "#565f89";
+        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__ */ jsxDEV10("box", {
+        rows.push(/* @__PURE__ */ jsxDEV14("box", {
           height: 1,
           flexDirection: "row",
           paddingLeft: 2,
           children: [
-            /* @__PURE__ */ jsxDEV10("text", {
+            /* @__PURE__ */ jsxDEV14("text", {
               fg: rankFg,
               children: [
                 badge,
                 "  "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#565f89",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.dim,
               children: " \u2502 "
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#bb9af7",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.secondary,
               children: [
                 ttft.toFixed(2).padStart(7),
                 "s  "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#565f89",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.dim,
               children: " \u2502 "
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#7dcfff",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.accent,
               children: [
                 tps.toFixed(1).padStart(8),
                 " tok/s  "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#565f89",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.dim,
               children: " \u2502 "
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#c0caf5",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.text,
               children: [
                 modelCol,
                 "  "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10("text", {
-              fg: "#565f89",
+            /* @__PURE__ */ jsxDEV14("text", {
+              fg: theme.dim,
               children: [
                 provCol,
                 "  \u2502  "
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10(BarChart, {
+            /* @__PURE__ */ jsxDEV14(BarChart, {
               value: ttft,
               max: maxTtftForBar,
-              width: BAR_W,
-              color: "#bb9af7"
+              width: BAR_W2,
+              color: theme.secondary
             }, undefined, false, undefined, this)
           ]
         }, `ttft-${s.model.id}-${s.model.providerId}`, true, undefined, this));
       }
     }
+    if (f1000Ranked.length > 0) {
+      rows.push(/* @__PURE__ */ jsxDEV14("box", {
+        height: 1,
+        backgroundColor: theme.border
+      }, "div-f1000", false, undefined, this));
+      rows.push(/* @__PURE__ */ jsxDEV14("box", {
+        height: 1,
+        flexDirection: "row",
+        paddingLeft: 1,
+        children: /* @__PURE__ */ jsxDEV14("text", {
+          fg: theme.primary,
+          children: " F1000 RANKING - First to 1000 Requests  (lower is better) "
+        }, undefined, false, undefined, this)
+      }, "hdr-f1000", false, undefined, this));
+      for (const [i, s] of f1000Ranked.entries()) {
+        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 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));
+      }
+    }
     if (allDone && errors.length > 0) {
-      rows.push(/* @__PURE__ */ jsxDEV10("box", {
+      rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
-        backgroundColor: "#292e42"
+        backgroundColor: theme.border
       }, "div-errors", false, undefined, this));
-      rows.push(/* @__PURE__ */ jsxDEV10("box", {
+      rows.push(/* @__PURE__ */ jsxDEV14("box", {
         height: 1,
         flexDirection: "row",
         paddingLeft: 1,
-        children: /* @__PURE__ */ jsxDEV10("text", {
-          fg: "#f7768e",
+        children: /* @__PURE__ */ jsxDEV14("text", {
+          fg: theme.error,
           children: [
             " FAILED (",
             errors.length,
@@ -3488,29 +4414,29 @@ function BenchmarkScreen() {
         }, undefined, true, undefined, this)
       }, "hdr-errors", false, undefined, this));
       for (const s of errors) {
-        rows.push(/* @__PURE__ */ jsxDEV10("box", {
+        rows.push(/* @__PURE__ */ jsxDEV14("box", {
           flexDirection: "column",
           paddingLeft: 2,
           paddingTop: 1,
           paddingBottom: 1,
           children: [
-            /* @__PURE__ */ jsxDEV10("box", {
+            /* @__PURE__ */ jsxDEV14("box", {
               height: 1,
               flexDirection: "row",
               children: [
-                /* @__PURE__ */ jsxDEV10("text", {
-                  fg: "#f7768e",
+                /* @__PURE__ */ jsxDEV14("text", {
+                  fg: theme.error,
                   children: "\u2717  "
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV10("text", {
-                  fg: "#c0caf5",
+                /* @__PURE__ */ jsxDEV14("text", {
+                  fg: theme.text,
                   children: [
                     s.model.name,
                     "  "
                   ]
                 }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV10("text", {
-                  fg: "#565f89",
+                /* @__PURE__ */ jsxDEV14("text", {
+                  fg: theme.dim,
                   children: [
                     "(",
                     s.model.providerName,
@@ -3519,11 +4445,11 @@ function BenchmarkScreen() {
                 }, undefined, true, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV10("box", {
+            /* @__PURE__ */ jsxDEV14("box", {
               height: 1,
               paddingLeft: 3,
-              children: /* @__PURE__ */ jsxDEV10("text", {
-                fg: "#f7768e",
+              children: /* @__PURE__ */ jsxDEV14("text", {
+                fg: theme.error,
                 children: s.error ?? "Unknown error"
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this)
@@ -3531,40 +4457,40 @@ function BenchmarkScreen() {
         }, `err-${s.model.id}-${s.model.providerId}`, true, undefined, this));
       }
     }
-    rows.push(/* @__PURE__ */ jsxDEV10("box", {
+    rows.push(/* @__PURE__ */ jsxDEV14("box", {
       height: 1,
-      backgroundColor: "#292e42"
+      backgroundColor: theme.border
     }, "div-results", false, undefined, this));
-    rows.push(/* @__PURE__ */ jsxDEV10("box", {
+    rows.push(/* @__PURE__ */ jsxDEV14("box", {
       height: 1,
       flexDirection: "row",
       paddingLeft: 1,
-      children: /* @__PURE__ */ jsxDEV10("text", {
-        fg: "#7aa2f7",
+      children: /* @__PURE__ */ jsxDEV14("text", {
+        fg: theme.primary,
         children: " RESULTS "
       }, undefined, false, undefined, this)
     }, "hdr-results", false, undefined, this));
     if (doneResults.length > 0) {
-      rows.push(/* @__PURE__ */ jsxDEV10("box", {
+      rows.push(/* @__PURE__ */ jsxDEV14("box", {
         flexDirection: "column",
-        children: /* @__PURE__ */ jsxDEV10(ResultsTable, {
+        children: /* @__PURE__ */ jsxDEV14(ResultsTable, {
           results: doneResults,
           pendingCount
         }, undefined, false, undefined, this)
       }, "results-table", false, undefined, this));
     } else {
-      rows.push(/* @__PURE__ */ jsxDEV10("box", {
+      rows.push(/* @__PURE__ */ jsxDEV14("box", {
         paddingLeft: 2,
         paddingBottom: 1,
-        children: /* @__PURE__ */ jsxDEV10("text", {
-          fg: "#565f89",
+        children: /* @__PURE__ */ jsxDEV14("text", {
+          fg: theme.dim,
           children: "No results yet..."
         }, undefined, false, undefined, this)
       }, "results-empty", false, undefined, this));
     }
     return rows;
-  }, [modelStates, allDone, shimmerPos, tpsRanked, ttftRanked, doneResults, pendingCount, maxTps, maxTtftForBar]);
-  useKeyboard5((key) => {
+  }, [modelStates, allDone, tpsRanked, ttftRanked, f1000Ranked, doneResults, pendingCount, maxTps, maxTtftForBar, maxF1000, theme]);
+  useAppKeyboard((key) => {
     if (!allDone)
       return;
     if (key.name === "q" || key.name === "return" || key.name === "enter") {
@@ -3572,94 +4498,97 @@ function BenchmarkScreen() {
       navigate("main-menu");
     }
   });
-  const statusLine = allDone ? /* @__PURE__ */ jsxDEV10("box", {
+  const statusLine = allDone ? /* @__PURE__ */ jsxDEV14("box", {
     flexDirection: "row",
     children: [
-      /* @__PURE__ */ jsxDEV10("text", {
-        fg: "#9ece6a",
+      /* @__PURE__ */ jsxDEV14("text", {
+        fg: theme.success,
         children: "All done!  [Enter]/[Q] return  [\u2191\u2193/PgUp/PgDn/wheel] scroll"
       }, undefined, false, undefined, this),
-      state.logMode && state.logPath && /* @__PURE__ */ jsxDEV10("text", {
-        fg: "#565f89",
+      state.logMode && state.logPath && /* @__PURE__ */ jsxDEV14("text", {
+        fg: theme.dim,
         children: [
           "  log: ",
           state.logPath
         ]
       }, undefined, true, undefined, this)
     ]
-  }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV10("box", {
+  }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV14("box", {
     flexDirection: "row",
     children: [
-      running.length > 0 && /* @__PURE__ */ jsxDEV10("text", {
-        fg: "#ff9e64",
+      running.length > 0 && /* @__PURE__ */ jsxDEV14("text", {
+        fg: theme.warning,
         children: [
           running.length,
           " running  "
         ]
       }, undefined, true, undefined, this),
-      done.length > 0 && /* @__PURE__ */ jsxDEV10("text", {
-        fg: "#9ece6a",
+      done.length > 0 && /* @__PURE__ */ jsxDEV14("text", {
+        fg: theme.success,
         children: [
           done.length,
           " done  "
         ]
       }, undefined, true, undefined, this),
-      errors.length > 0 && /* @__PURE__ */ jsxDEV10("text", {
-        fg: "#f7768e",
+      errors.length > 0 && /* @__PURE__ */ jsxDEV14("text", {
+        fg: theme.error,
         children: [
           errors.length,
           " errors  "
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV10("text", {
-        fg: "#565f89",
+      /* @__PURE__ */ jsxDEV14("text", {
+        fg: theme.dim,
         children: "[\u2191\u2193/wheel] scroll"
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
-  return /* @__PURE__ */ jsxDEV10("box", {
+  return /* @__PURE__ */ jsxDEV14("box", {
     flexDirection: "column",
     flexGrow: 1,
     padding: 1,
     children: [
-      /* @__PURE__ */ jsxDEV10("box", {
+      /* @__PURE__ */ jsxDEV14("box", {
         alignItems: "center",
         justifyContent: "center",
         marginBottom: 1,
-        children: /* @__PURE__ */ jsxDEV10("ascii-font", {
+        children: /* @__PURE__ */ jsxDEV14("ascii-font", {
           text: "AI-SPEEDOMETER",
           font: "tiny",
-          color: "#7aa2f7"
+          color: theme.primary
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV10("box", {
+      /* @__PURE__ */ jsxDEV14("box", {
         flexDirection: "column",
         border: true,
         borderStyle: "rounded",
-        borderColor: "#292e42",
-        backgroundColor: "#16161e",
+        borderColor: theme.border,
+        backgroundColor: theme.background,
         flexGrow: 1,
         children: [
-          /* @__PURE__ */ jsxDEV10("box", {
+          /* @__PURE__ */ jsxDEV14("box", {
             height: 1,
             paddingLeft: 2,
             paddingRight: 2,
             flexDirection: "row",
             children: [
-              /* @__PURE__ */ jsxDEV10("text", {
-                fg: "#7dcfff",
+              /* @__PURE__ */ jsxDEV14("text", {
+                fg: theme.accent,
                 children: "LIVE BENCHMARK  "
               }, undefined, false, undefined, this),
               statusLine
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV10(Divider, {}, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV10("scrollbox", {
+          /* @__PURE__ */ jsxDEV14("box", {
+            height: 1,
+            backgroundColor: theme.border
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV14("scrollbox", {
             focused: true,
             flexGrow: 1,
             stickyScroll: true,
             stickyStart: "bottom",
-            style: { scrollbarOptions: { showArrows: true, trackOptions: { foregroundColor: "#7aa2f7", backgroundColor: "#292e42" } } },
+            style: { scrollbarOptions: { showArrows: true, trackOptions: { foregroundColor: theme.primary, backgroundColor: theme.border } } },
             children: allRows
           }, undefined, false, undefined, this)
         ]
@@ -3667,36 +4596,40 @@ function BenchmarkScreen() {
     ]
   }, undefined, true, undefined, this);
 }
-var BAR_W = 25;
+var BAR_W2 = 25;
 var init_BenchmarkScreen = __esm(() => {
+  init_useAppKeyboard();
   init_AppContext();
+  init_ThemeContext();
   init_BarChart();
+  init_GlowBar();
   init_ResultsTable();
 });
 
 // src/tui/screens/AddVerifiedScreen.tsx
-import { useState as useState5, useEffect as useEffect5, useRef as useRef4 } from "react";
-import { useKeyboard as useKeyboard6, useTerminalDimensions as useTerminalDimensions2 } from "@opentui/react";
-import { jsxDEV as jsxDEV11 } from "@opentui/react/jsx-dev-runtime";
+import { useState as useState9, useEffect as useEffect7, useRef as useRef5 } from "react";
+import { useTerminalDimensions as useTerminalDimensions2 } from "@opentui/react";
+import { jsxDEV as jsxDEV15 } from "@opentui/react/jsx-dev-runtime";
 function AddVerifiedScreen() {
   const { dispatch } = useAppContext();
   const navigate = useNavigate();
+  const theme = useTheme();
   const { height, width } = useTerminalDimensions2();
   const PAGE_SIZE = Math.max(3, height - 16);
   const CARD_W = Math.min(62, width - 4);
-  const [step, setStep] = useState5("browse");
-  const [allProviders, setAllProviders] = useState5([]);
-  const [filtered, setFiltered] = useState5([]);
-  const [cursor, setCursor] = useState5(0);
-  const [searchQuery, setSearchQuery] = useState5("");
-  const scrollboxRef = useRef4(null);
-  const [selectedProvider, setSelectedProvider] = useState5(null);
-  const [apiKey, setApiKey] = useState5("");
-  const [saving, setSaving] = useState5(false);
-  const [saveError, setSaveError] = useState5("");
-  const [saveSuccess, setSaveSuccess] = useState5(false);
-  const [loadError, setLoadError] = useState5("");
-  useEffect5(() => {
+  const [step, setStep] = useState9("browse");
+  const [allProviders, setAllProviders] = useState9([]);
+  const [filtered, setFiltered] = useState9([]);
+  const [cursor, setCursor] = useState9(0);
+  const [searchQuery, setSearchQuery] = useState9("");
+  const scrollboxRef = useRef5(null);
+  const [selectedProvider, setSelectedProvider] = useState9(null);
+  const [apiKey, setApiKey] = useState9("");
+  const [saving, setSaving] = useState9(false);
+  const [saveError, setSaveError] = useState9("");
+  const [saveSuccess, setSaveSuccess] = useState9(false);
+  const [loadError, setLoadError] = useState9("");
+  useEffect7(() => {
     async function load() {
       try {
         const { getAllProviders: getAllProviders2 } = await Promise.resolve().then(() => (init_models_dev(), exports_models_dev));
@@ -3709,7 +4642,7 @@ function AddVerifiedScreen() {
     }
     load();
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     if (!searchQuery) {
       setFiltered(allProviders);
     } else {
@@ -3718,7 +4651,7 @@ function AddVerifiedScreen() {
     }
     setCursor(0);
   }, [searchQuery, allProviders]);
-  useEffect5(() => {
+  useEffect7(() => {
     const sb = scrollboxRef.current;
     if (!sb)
       return;
@@ -3737,7 +4670,7 @@ function AddVerifiedScreen() {
     setSaveError("");
     try {
       const { addApiKey: addApiKey2 } = await Promise.resolve().then(() => (init_opencode_integration(), exports_opencode_integration));
-      const { addVerifiedProvider: addVerifiedProvider2, getVerifiedProvidersFromConfig: getVerifiedProvidersFromConfig2 } = await Promise.resolve().then(() => (init_ai_config(), exports_ai_config));
+      const { addVerifiedProvider: addVerifiedProvider2 } = await Promise.resolve().then(() => (init_ai_config(), exports_ai_config));
       await addApiKey2(selectedProvider.id, apiKey.trim());
       await addVerifiedProvider2(selectedProvider.id, apiKey.trim());
       const { getAllAvailableProviders: getAllAvailableProviders2 } = await Promise.resolve().then(() => (init_opencode_integration(), exports_opencode_integration));
@@ -3757,7 +4690,7 @@ function AddVerifiedScreen() {
     else if (step === "confirm")
       setApiKey((k) => k + clean);
   });
-  useKeyboard6((key) => {
+  useAppKeyboard((key) => {
     if (step === "browse") {
       if (key.name === "escape" || key.sequence === "q" || key.sequence === "Q") {
         navigate("model-menu");
@@ -3801,9 +4734,8 @@ function AddVerifiedScreen() {
     }
     if (step === "confirm") {
       if (saveSuccess) {
-        if (key.name === "return" || key.name === "enter") {
+        if (key.name === "return" || key.name === "enter")
           navigate("model-menu");
-        }
         return;
       }
       if (saving)
@@ -3826,91 +4758,91 @@ function AddVerifiedScreen() {
     }
   });
   if (step === "confirm" && selectedProvider) {
-    return /* @__PURE__ */ jsxDEV11("box", {
+    return /* @__PURE__ */ jsxDEV15("box", {
       flexDirection: "column",
       flexGrow: 1,
       alignItems: "center",
       justifyContent: "center",
-      children: /* @__PURE__ */ jsxDEV11("box", {
+      children: /* @__PURE__ */ jsxDEV15("box", {
         flexDirection: "column",
         border: true,
         borderStyle: "rounded",
-        borderColor: "#292e42",
-        backgroundColor: "#16161e",
+        borderColor: theme.border,
+        backgroundColor: theme.background,
         width: CARD_W,
         children: [
-          /* @__PURE__ */ jsxDEV11("box", {
+          /* @__PURE__ */ jsxDEV15("box", {
             height: 1,
             paddingLeft: 2,
             paddingTop: 1,
-            children: /* @__PURE__ */ jsxDEV11("text", {
-              fg: "#7dcfff",
+            children: /* @__PURE__ */ jsxDEV15("text", {
+              fg: theme.accent,
               children: "Add Verified Provider"
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11("box", {
+          /* @__PURE__ */ jsxDEV15("box", {
             height: 1,
-            backgroundColor: "#292e42"
+            backgroundColor: theme.border
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV11("box", {
+          /* @__PURE__ */ jsxDEV15("box", {
             flexDirection: "column",
             paddingLeft: 2,
             paddingRight: 2,
             paddingTop: 1,
             paddingBottom: 1,
             children: [
-              /* @__PURE__ */ jsxDEV11("box", {
+              /* @__PURE__ */ jsxDEV15("box", {
                 height: 1,
                 flexDirection: "row",
                 children: [
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#7aa2f7",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.primary,
                     children: "Provider: "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#c0caf5",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.text,
                     children: selectedProvider.name
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV11("box", {
+              /* @__PURE__ */ jsxDEV15("box", {
                 height: 1,
                 flexDirection: "row",
                 children: [
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#565f89",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.dim,
                     children: "Type:     "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#565f89",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.dim,
                     children: selectedProvider.type
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV11("box", {
+              /* @__PURE__ */ jsxDEV15("box", {
                 height: 1,
                 flexDirection: "row",
                 children: [
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#565f89",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.dim,
                     children: "URL:      "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#565f89",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.dim,
                     children: selectedProvider.baseUrl
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV11("box", {
+              /* @__PURE__ */ jsxDEV15("box", {
                 height: 1,
                 flexDirection: "row",
                 children: [
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#565f89",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.dim,
                     children: "Models:   "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#565f89",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.dim,
                     children: [
                       selectedProvider.models.length,
                       " available"
@@ -3920,21 +4852,21 @@ function AddVerifiedScreen() {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV11("box", {
+          /* @__PURE__ */ jsxDEV15("box", {
             height: 1,
-            backgroundColor: "#292e42"
+            backgroundColor: theme.border
           }, undefined, false, undefined, this),
-          saveSuccess ? /* @__PURE__ */ jsxDEV11("box", {
+          saveSuccess ? /* @__PURE__ */ jsxDEV15("box", {
             flexDirection: "column",
             paddingLeft: 2,
             paddingRight: 2,
             paddingTop: 1,
             paddingBottom: 1,
             children: [
-              /* @__PURE__ */ jsxDEV11("box", {
+              /* @__PURE__ */ jsxDEV15("box", {
                 height: 1,
-                children: /* @__PURE__ */ jsxDEV11("text", {
-                  fg: "#9ece6a",
+                children: /* @__PURE__ */ jsxDEV15("text", {
+                  fg: theme.success,
                   children: [
                     "Provider added!  ",
                     selectedProvider.models.length,
@@ -3942,31 +4874,31 @@ function AddVerifiedScreen() {
                   ]
                 }, undefined, true, undefined, this)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV11("box", {
+              /* @__PURE__ */ jsxDEV15("box", {
                 height: 1,
-                children: /* @__PURE__ */ jsxDEV11("text", {
-                  fg: "#565f89",
+                children: /* @__PURE__ */ jsxDEV15("text", {
+                  fg: theme.dim,
                   children: "Press [Enter] to return"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
             ]
-          }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV11("box", {
+          }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV15("box", {
             flexDirection: "column",
             paddingLeft: 2,
             paddingRight: 2,
             paddingTop: 1,
             paddingBottom: 1,
             children: [
-              /* @__PURE__ */ jsxDEV11("box", {
+              /* @__PURE__ */ jsxDEV15("box", {
                 height: 1,
                 flexDirection: "row",
                 children: [
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#7dcfff",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.accent,
                     children: "API Key: "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#c0caf5",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.text,
                     children: [
                       apiKey,
                       "_"
@@ -3974,26 +4906,26 @@ function AddVerifiedScreen() {
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              saveError ? /* @__PURE__ */ jsxDEV11("box", {
+              saveError ? /* @__PURE__ */ jsxDEV15("box", {
                 height: 1,
-                children: /* @__PURE__ */ jsxDEV11("text", {
-                  fg: "#f7768e",
+                children: /* @__PURE__ */ jsxDEV15("text", {
+                  fg: theme.error,
                   children: [
                     "Error: ",
                     saveError
                   ]
                 }, undefined, true, undefined, this)
               }, undefined, false, undefined, this) : null,
-              saving ? /* @__PURE__ */ jsxDEV11("box", {
+              saving ? /* @__PURE__ */ jsxDEV15("box", {
                 height: 1,
-                children: /* @__PURE__ */ jsxDEV11("text", {
-                  fg: "#ff9e64",
+                children: /* @__PURE__ */ jsxDEV15("text", {
+                  fg: theme.warning,
                   children: "Saving..."
                 }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV11("box", {
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV15("box", {
                 height: 1,
-                children: /* @__PURE__ */ jsxDEV11("text", {
-                  fg: "#565f89",
+                children: /* @__PURE__ */ jsxDEV15("text", {
+                  fg: theme.dim,
                   children: "[Enter] save   [Esc] back to list"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
@@ -4003,32 +4935,32 @@ function AddVerifiedScreen() {
       }, undefined, true, undefined, this)
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV11("box", {
+  return /* @__PURE__ */ jsxDEV15("box", {
     flexDirection: "column",
     flexGrow: 1,
     alignItems: "center",
     justifyContent: "center",
-    children: /* @__PURE__ */ jsxDEV11("box", {
+    children: /* @__PURE__ */ jsxDEV15("box", {
       flexDirection: "column",
       border: true,
       borderStyle: "rounded",
-      borderColor: "#292e42",
-      backgroundColor: "#16161e",
+      borderColor: theme.border,
+      backgroundColor: theme.background,
       width: CARD_W,
       children: [
-        /* @__PURE__ */ jsxDEV11("box", {
+        /* @__PURE__ */ jsxDEV15("box", {
           flexDirection: "row",
           paddingLeft: 2,
           paddingRight: 2,
           paddingTop: 1,
           paddingBottom: 1,
           children: [
-            /* @__PURE__ */ jsxDEV11("text", {
-              fg: "#7dcfff",
+            /* @__PURE__ */ jsxDEV15("text", {
+              fg: theme.accent,
               children: "Search: "
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV11("text", {
-              fg: "#c0caf5",
+            /* @__PURE__ */ jsxDEV15("text", {
+              fg: theme.text,
               children: [
                 searchQuery,
                 "_"
@@ -4036,59 +4968,59 @@ function AddVerifiedScreen() {
             }, undefined, true, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV11("box", {
+        /* @__PURE__ */ jsxDEV15("box", {
           height: 1,
-          backgroundColor: "#292e42"
+          backgroundColor: theme.border
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV11("scrollbox", {
+        /* @__PURE__ */ jsxDEV15("scrollbox", {
           ref: scrollboxRef,
           height: PAGE_SIZE,
-          style: { scrollbarOptions: { showArrows: true, trackOptions: { foregroundColor: "#7aa2f7", backgroundColor: "#292e42" } } },
+          style: { scrollbarOptions: { showArrows: true, trackOptions: { foregroundColor: theme.primary, backgroundColor: theme.border } } },
           children: [
-            loadError && /* @__PURE__ */ jsxDEV11("box", {
+            loadError && /* @__PURE__ */ jsxDEV15("box", {
               height: 1,
               paddingLeft: 2,
-              children: /* @__PURE__ */ jsxDEV11("text", {
-                fg: "#f7768e",
+              children: /* @__PURE__ */ jsxDEV15("text", {
+                fg: theme.error,
                 children: [
                   "Error loading providers: ",
                   loadError
                 ]
               }, undefined, true, undefined, this)
             }, undefined, false, undefined, this),
-            !loadError && filtered.length === 0 && /* @__PURE__ */ jsxDEV11("box", {
+            !loadError && filtered.length === 0 && /* @__PURE__ */ jsxDEV15("box", {
               height: 1,
               paddingLeft: 2,
-              children: /* @__PURE__ */ jsxDEV11("text", {
-                fg: "#565f89",
+              children: /* @__PURE__ */ jsxDEV15("text", {
+                fg: theme.dim,
                 children: allProviders.length === 0 ? "Loading..." : "No providers found"
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
             filtered.map((prov, i) => {
               const isActive = i === cursor;
-              return /* @__PURE__ */ jsxDEV11("box", {
+              return /* @__PURE__ */ jsxDEV15("box", {
                 height: 1,
                 width: "100%",
                 flexDirection: "row",
-                backgroundColor: isActive ? "#292e42" : "transparent",
+                backgroundColor: isActive ? theme.border : "transparent",
                 children: [
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#565f89",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.dim,
                     width: 2,
                     children: " "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: isActive ? "#c0caf5" : "#565f89",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: isActive ? theme.text : theme.dim,
                     width: Math.floor((CARD_W - 10) / 2),
                     children: prov.name
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: isActive ? "#7aa2f7" : "#292e42",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: isActive ? theme.primary : theme.border,
                     width: Math.floor((CARD_W - 10) / 2),
                     children: prov.type
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV11("text", {
-                    fg: "#7dcfff",
+                  /* @__PURE__ */ jsxDEV15("text", {
+                    fg: theme.accent,
                     width: 2,
                     children: isActive ? "\u203A" : " "
                   }, undefined, false, undefined, this)
@@ -4097,26 +5029,26 @@ function AddVerifiedScreen() {
             })
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV11("box", {
+        /* @__PURE__ */ jsxDEV15("box", {
           height: 1,
-          backgroundColor: "#292e42"
+          backgroundColor: theme.border
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV11("box", {
+        /* @__PURE__ */ jsxDEV15("box", {
           flexDirection: "row",
           paddingLeft: 2,
           paddingRight: 2,
           paddingTop: 1,
           paddingBottom: 1,
           children: [
-            /* @__PURE__ */ jsxDEV11("text", {
-              fg: "#565f89",
+            /* @__PURE__ */ jsxDEV15("text", {
+              fg: theme.dim,
               children: [
                 filtered.length,
                 " providers"
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV11("text", {
-              fg: "#565f89",
+            /* @__PURE__ */ jsxDEV15("text", {
+              fg: theme.dim,
               children: "   [\u2191\u2193/PgUp/PgDn/wheel] scroll"
             }, undefined, false, undefined, this)
           ]
@@ -4126,34 +5058,37 @@ function AddVerifiedScreen() {
   }, undefined, false, undefined, this);
 }
 var init_AddVerifiedScreen = __esm(() => {
+  init_useAppKeyboard();
   init_AppContext();
+  init_ThemeContext();
   init_usePaste();
 });
 
 // src/tui/screens/AddCustomScreen.tsx
-import { useState as useState6 } from "react";
-import { useKeyboard as useKeyboard7, useTerminalDimensions as useTerminalDimensions3 } from "@opentui/react";
-import { jsxDEV as jsxDEV12 } from "@opentui/react/jsx-dev-runtime";
+import { useState as useState10 } from "react";
+import { useTerminalDimensions as useTerminalDimensions3 } from "@opentui/react";
+import { jsxDEV as jsxDEV16 } from "@opentui/react/jsx-dev-runtime";
 function stepIndex(s) {
   return STEPS.indexOf(s);
 }
 function AddCustomScreen() {
   const { dispatch } = useAppContext();
   const navigate = useNavigate();
+  const theme = useTheme();
   const { width } = useTerminalDimensions3();
   const CARD_W = Math.min(60, width - 4);
-  const [step, setStep] = useState6("type");
-  const [providerType, setProviderType] = useState6("openai-compatible");
-  const [typeCursor, setTypeCursor] = useState6(0);
-  const [providerId, setProviderId] = useState6("");
-  const [providerName, setProviderName] = useState6("");
-  const [baseUrl, setBaseUrl] = useState6("");
-  const [apiKey, setApiKey] = useState6("");
-  const [modelInput, setModelInput] = useState6("");
-  const [models, setModels] = useState6([]);
-  const [saveError, setSaveError] = useState6("");
-  const [savedModelCount, setSavedModelCount] = useState6(0);
-  const [inputError, setInputError] = useState6("");
+  const [step, setStep] = useState10("type");
+  const [providerType, setProviderType] = useState10("openai-compatible");
+  const [typeCursor, setTypeCursor] = useState10(0);
+  const [providerId, setProviderId] = useState10("");
+  const [providerName, setProviderName] = useState10("");
+  const [baseUrl, setBaseUrl] = useState10("");
+  const [apiKey, setApiKey] = useState10("");
+  const [modelInput, setModelInput] = useState10("");
+  const [models, setModels] = useState10([]);
+  const [saveError, setSaveError] = useState10("");
+  const [savedModelCount, setSavedModelCount] = useState10(0);
+  const [inputError, setInputError] = useState10("");
   const typeItems = ["OpenAI Compatible", "Anthropic", "Back"];
   async function doSave() {
     setStep("saving");
@@ -4166,10 +5101,7 @@ function AddCustomScreen() {
         type: providerType,
         baseUrl: baseUrl.trim(),
         apiKey: apiKey.trim(),
-        models: models.map((m) => ({
-          id: m,
-          name: m
-        }))
+        models: models.map((m) => ({ id: m, name: m }))
       });
       const { getAllAvailableProviders: getAllAvailableProviders2 } = await Promise.resolve().then(() => (init_opencode_integration(), exports_opencode_integration));
       const providers = await getAllAvailableProviders2(false);
@@ -4194,7 +5126,7 @@ function AddCustomScreen() {
     else if (step === "models")
       setModelInput((v) => v + clean);
   });
-  useKeyboard7((key) => {
+  useAppKeyboard((key) => {
     if (step === "done") {
       if (key.name === "return" || key.name === "enter")
         navigate("model-menu");
@@ -4249,9 +5181,8 @@ function AddCustomScreen() {
         setProviderId((v) => v.slice(0, -1));
         return;
       }
-      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ") {
+      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ")
         setProviderId((v) => v + key.sequence);
-      }
       return;
     }
     if (step === "name") {
@@ -4266,9 +5197,8 @@ function AddCustomScreen() {
         setProviderName((v) => v.slice(0, -1));
         return;
       }
-      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ") {
+      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ")
         setProviderName((v) => v + key.sequence);
-      }
       return;
     }
     if (step === "url") {
@@ -4289,9 +5219,8 @@ function AddCustomScreen() {
         setBaseUrl((v) => v.slice(0, -1));
         return;
       }
-      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ") {
+      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ")
         setBaseUrl((v) => v + key.sequence);
-      }
       return;
     }
     if (step === "key") {
@@ -4304,9 +5233,8 @@ function AddCustomScreen() {
         setApiKey((v) => v.slice(0, -1));
         return;
       }
-      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ") {
+      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ")
         setApiKey((v) => v + key.sequence);
-      }
       return;
     }
     if (step === "models") {
@@ -4328,31 +5256,30 @@ function AddCustomScreen() {
         setModelInput((v) => v.slice(0, -1));
         return;
       }
-      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ") {
+      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ")
         setModelInput((v) => v + key.sequence);
-      }
     }
   });
   const curStepIdx = stepIndex(step);
   function ProgressBar() {
-    return /* @__PURE__ */ jsxDEV12("box", {
+    return /* @__PURE__ */ jsxDEV16("box", {
       height: 1,
       paddingLeft: 2,
       paddingRight: 2,
       flexDirection: "row",
-      children: STEPS.map((s, i) => /* @__PURE__ */ jsxDEV12("box", {
+      children: STEPS.map((s, i) => /* @__PURE__ */ jsxDEV16("box", {
         flexDirection: "row",
         children: [
-          /* @__PURE__ */ jsxDEV12("text", {
-            fg: i < curStepIdx ? "#9ece6a" : i === curStepIdx ? "#7dcfff" : "#292e42",
+          /* @__PURE__ */ jsxDEV16("text", {
+            fg: i < curStepIdx ? theme.success : i === curStepIdx ? theme.accent : theme.border,
             children: [
               STEP_NUM[i],
               " ",
               STEP_LABELS[i]
             ]
           }, undefined, true, undefined, this),
-          i < STEPS.length - 1 && /* @__PURE__ */ jsxDEV12("text", {
-            fg: "#292e42",
+          i < STEPS.length - 1 && /* @__PURE__ */ jsxDEV16("text", {
+            fg: theme.border,
             children: "  "
           }, undefined, false, undefined, this)
         ]
@@ -4360,29 +5287,29 @@ function AddCustomScreen() {
     }, undefined, false, undefined, this);
   }
   if (step === "done") {
-    return /* @__PURE__ */ jsxDEV12("box", {
+    return /* @__PURE__ */ jsxDEV16("box", {
       flexDirection: "column",
       flexGrow: 1,
       alignItems: "center",
       justifyContent: "center",
-      children: /* @__PURE__ */ jsxDEV12("box", {
+      children: /* @__PURE__ */ jsxDEV16("box", {
         flexDirection: "column",
         border: true,
         borderStyle: "rounded",
-        borderColor: "#292e42",
-        backgroundColor: "#16161e",
+        borderColor: theme.border,
+        backgroundColor: theme.background,
         width: CARD_W,
-        children: /* @__PURE__ */ jsxDEV12("box", {
+        children: /* @__PURE__ */ jsxDEV16("box", {
           flexDirection: "column",
           paddingLeft: 2,
           paddingRight: 2,
           paddingTop: 1,
           paddingBottom: 1,
           children: [
-            /* @__PURE__ */ jsxDEV12("box", {
+            /* @__PURE__ */ jsxDEV16("box", {
               height: 1,
-              children: /* @__PURE__ */ jsxDEV12("text", {
-                fg: "#9ece6a",
+              children: /* @__PURE__ */ jsxDEV16("text", {
+                fg: theme.success,
                 children: [
                   "Custom provider added!  ",
                   savedModelCount,
@@ -4392,10 +5319,10 @@ function AddCustomScreen() {
                 ]
               }, undefined, true, undefined, this)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV12("box", {
+            /* @__PURE__ */ jsxDEV16("box", {
               height: 1,
-              children: /* @__PURE__ */ jsxDEV12("text", {
-                fg: "#565f89",
+              children: /* @__PURE__ */ jsxDEV16("text", {
+                fg: theme.dim,
                 children: "Press [Enter] to return"
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this)
@@ -4405,107 +5332,107 @@ function AddCustomScreen() {
     }, undefined, false, undefined, this);
   }
   if (step === "saving") {
-    return /* @__PURE__ */ jsxDEV12("box", {
+    return /* @__PURE__ */ jsxDEV16("box", {
       flexDirection: "column",
       flexGrow: 1,
       alignItems: "center",
       justifyContent: "center",
-      children: /* @__PURE__ */ jsxDEV12("box", {
+      children: /* @__PURE__ */ jsxDEV16("box", {
         flexDirection: "column",
         border: true,
         borderStyle: "rounded",
-        borderColor: "#292e42",
-        backgroundColor: "#16161e",
+        borderColor: theme.border,
+        backgroundColor: theme.background,
         width: CARD_W,
-        children: /* @__PURE__ */ jsxDEV12("box", {
+        children: /* @__PURE__ */ jsxDEV16("box", {
           paddingLeft: 2,
           paddingTop: 1,
           paddingBottom: 1,
-          children: /* @__PURE__ */ jsxDEV12("text", {
-            fg: "#ff9e64",
+          children: /* @__PURE__ */ jsxDEV16("text", {
+            fg: theme.warning,
             children: "\u2839 Saving..."
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV12("box", {
+  return /* @__PURE__ */ jsxDEV16("box", {
     flexDirection: "column",
     flexGrow: 1,
     alignItems: "center",
     justifyContent: "center",
-    children: /* @__PURE__ */ jsxDEV12("box", {
+    children: /* @__PURE__ */ jsxDEV16("box", {
       flexDirection: "column",
       border: true,
       borderStyle: "rounded",
-      borderColor: "#292e42",
-      backgroundColor: "#16161e",
+      borderColor: theme.border,
+      backgroundColor: theme.background,
       width: CARD_W,
       children: [
-        /* @__PURE__ */ jsxDEV12("box", {
+        /* @__PURE__ */ jsxDEV16("box", {
           height: 1,
           paddingLeft: 2,
           paddingTop: 1,
-          children: /* @__PURE__ */ jsxDEV12("text", {
-            fg: "#7dcfff",
+          children: /* @__PURE__ */ jsxDEV16("text", {
+            fg: theme.accent,
             children: "Add Custom Provider"
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV12("box", {
+        /* @__PURE__ */ jsxDEV16("box", {
           height: 1,
-          backgroundColor: "#292e42"
+          backgroundColor: theme.border
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV12("box", {
+        /* @__PURE__ */ jsxDEV16("box", {
           paddingTop: 1,
           paddingBottom: 1,
-          children: /* @__PURE__ */ jsxDEV12(ProgressBar, {}, undefined, false, undefined, this)
+          children: /* @__PURE__ */ jsxDEV16(ProgressBar, {}, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV12("box", {
+        /* @__PURE__ */ jsxDEV16("box", {
           height: 1,
-          backgroundColor: "#292e42"
+          backgroundColor: theme.border
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV12("box", {
+        /* @__PURE__ */ jsxDEV16("box", {
           flexDirection: "column",
           paddingLeft: 2,
           paddingRight: 2,
           paddingTop: 1,
           paddingBottom: 1,
           children: [
-            step === "type" && /* @__PURE__ */ jsxDEV12("box", {
+            step === "type" && /* @__PURE__ */ jsxDEV16("box", {
               flexDirection: "column",
-              children: typeItems.map((item, i) => /* @__PURE__ */ jsxDEV12("box", {
+              children: typeItems.map((item, i) => /* @__PURE__ */ jsxDEV16("box", {
                 height: 1,
                 width: "100%",
                 flexDirection: "row",
-                backgroundColor: i === typeCursor ? "#292e42" : "transparent",
+                backgroundColor: i === typeCursor ? theme.border : "transparent",
                 children: [
-                  /* @__PURE__ */ jsxDEV12("text", {
-                    fg: i === typeCursor ? "#c0caf5" : "#565f89",
+                  /* @__PURE__ */ jsxDEV16("text", {
+                    fg: i === typeCursor ? theme.text : theme.dim,
                     children: [
                       " ",
                       item
                     ]
                   }, undefined, true, undefined, this),
-                  i === typeCursor && /* @__PURE__ */ jsxDEV12("text", {
-                    fg: "#7dcfff",
+                  i === typeCursor && /* @__PURE__ */ jsxDEV16("text", {
+                    fg: theme.accent,
                     children: " \u203A"
                   }, undefined, false, undefined, this)
                 ]
               }, item, true, undefined, this))
             }, undefined, false, undefined, this),
-            step === "id" && /* @__PURE__ */ jsxDEV12("box", {
+            step === "id" && /* @__PURE__ */ jsxDEV16("box", {
               flexDirection: "column",
               children: [
-                /* @__PURE__ */ jsxDEV12("box", {
+                /* @__PURE__ */ jsxDEV16("box", {
                   height: 1,
                   flexDirection: "row",
                   children: [
-                    /* @__PURE__ */ jsxDEV12("text", {
-                      fg: "#7aa2f7",
+                    /* @__PURE__ */ jsxDEV16("text", {
+                      fg: theme.primary,
                       children: "Provider ID: "
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("text", {
-                      fg: "#c0caf5",
+                    /* @__PURE__ */ jsxDEV16("text", {
+                      fg: theme.text,
                       children: [
                         providerId,
                         "_"
@@ -4513,28 +5440,28 @@ function AddCustomScreen() {
                     }, undefined, true, undefined, this)
                   ]
                 }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV12("box", {
+                /* @__PURE__ */ jsxDEV16("box", {
                   height: 1,
-                  children: /* @__PURE__ */ jsxDEV12("text", {
-                    fg: "#565f89",
+                  children: /* @__PURE__ */ jsxDEV16("text", {
+                    fg: theme.dim,
                     children: "e.g. my-openai"
                   }, undefined, false, undefined, this)
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            step === "name" && /* @__PURE__ */ jsxDEV12("box", {
+            step === "name" && /* @__PURE__ */ jsxDEV16("box", {
               flexDirection: "column",
               children: [
-                /* @__PURE__ */ jsxDEV12("box", {
+                /* @__PURE__ */ jsxDEV16("box", {
                   height: 1,
                   flexDirection: "row",
                   children: [
-                    /* @__PURE__ */ jsxDEV12("text", {
-                      fg: "#7aa2f7",
+                    /* @__PURE__ */ jsxDEV16("text", {
+                      fg: theme.primary,
                       children: "Display Name: "
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("text", {
-                      fg: "#c0caf5",
+                    /* @__PURE__ */ jsxDEV16("text", {
+                      fg: theme.text,
                       children: [
                         providerName,
                         "_"
@@ -4542,10 +5469,10 @@ function AddCustomScreen() {
                     }, undefined, true, undefined, this)
                   ]
                 }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV12("box", {
+                /* @__PURE__ */ jsxDEV16("box", {
                   height: 1,
-                  children: /* @__PURE__ */ jsxDEV12("text", {
-                    fg: "#565f89",
+                  children: /* @__PURE__ */ jsxDEV16("text", {
+                    fg: theme.dim,
                     children: [
                       'e.g. My OpenAI  (Enter to use "',
                       providerId,
@@ -4555,19 +5482,19 @@ function AddCustomScreen() {
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            step === "url" && /* @__PURE__ */ jsxDEV12("box", {
+            step === "url" && /* @__PURE__ */ jsxDEV16("box", {
               flexDirection: "column",
               children: [
-                /* @__PURE__ */ jsxDEV12("box", {
+                /* @__PURE__ */ jsxDEV16("box", {
                   height: 1,
                   flexDirection: "row",
                   children: [
-                    /* @__PURE__ */ jsxDEV12("text", {
-                      fg: "#7aa2f7",
+                    /* @__PURE__ */ jsxDEV16("text", {
+                      fg: theme.primary,
                       children: "Base URL: "
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("text", {
-                      fg: "#c0caf5",
+                    /* @__PURE__ */ jsxDEV16("text", {
+                      fg: theme.text,
                       children: [
                         baseUrl,
                         "_"
@@ -4575,28 +5502,28 @@ function AddCustomScreen() {
                     }, undefined, true, undefined, this)
                   ]
                 }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV12("box", {
+                /* @__PURE__ */ jsxDEV16("box", {
                   height: 1,
-                  children: /* @__PURE__ */ jsxDEV12("text", {
-                    fg: "#565f89",
+                  children: /* @__PURE__ */ jsxDEV16("text", {
+                    fg: theme.dim,
                     children: "e.g. https://api.example.com/v1"
                   }, undefined, false, undefined, this)
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            step === "key" && /* @__PURE__ */ jsxDEV12("box", {
+            step === "key" && /* @__PURE__ */ jsxDEV16("box", {
               flexDirection: "column",
               children: [
-                /* @__PURE__ */ jsxDEV12("box", {
+                /* @__PURE__ */ jsxDEV16("box", {
                   height: 1,
                   flexDirection: "row",
                   children: [
-                    /* @__PURE__ */ jsxDEV12("text", {
-                      fg: "#7aa2f7",
+                    /* @__PURE__ */ jsxDEV16("text", {
+                      fg: theme.primary,
                       children: "API Key: "
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("text", {
-                      fg: "#c0caf5",
+                    /* @__PURE__ */ jsxDEV16("text", {
+                      fg: theme.text,
                       children: [
                         apiKey,
                         "_"
@@ -4604,24 +5531,24 @@ function AddCustomScreen() {
                     }, undefined, true, undefined, this)
                   ]
                 }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV12("box", {
+                /* @__PURE__ */ jsxDEV16("box", {
                   height: 1,
-                  children: /* @__PURE__ */ jsxDEV12("text", {
-                    fg: "#565f89",
+                  children: /* @__PURE__ */ jsxDEV16("text", {
+                    fg: theme.dim,
                     children: "sk-...   (leave empty if not needed)"
                   }, undefined, false, undefined, this)
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            step === "models" && /* @__PURE__ */ jsxDEV12("box", {
+            step === "models" && /* @__PURE__ */ jsxDEV16("box", {
               flexDirection: "column",
               children: [
-                models.length > 0 && /* @__PURE__ */ jsxDEV12("box", {
+                models.length > 0 && /* @__PURE__ */ jsxDEV16("box", {
                   flexDirection: "column",
-                  children: models.map((m) => /* @__PURE__ */ jsxDEV12("box", {
+                  children: models.map((m) => /* @__PURE__ */ jsxDEV16("box", {
                     height: 1,
-                    children: /* @__PURE__ */ jsxDEV12("text", {
-                      fg: "#565f89",
+                    children: /* @__PURE__ */ jsxDEV16("text", {
+                      fg: theme.dim,
                       children: [
                         "  \xB7 ",
                         m
@@ -4629,16 +5556,16 @@ function AddCustomScreen() {
                     }, undefined, true, undefined, this)
                   }, m, false, undefined, this))
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV12("box", {
+                /* @__PURE__ */ jsxDEV16("box", {
                   height: 1,
                   flexDirection: "row",
                   children: [
-                    /* @__PURE__ */ jsxDEV12("text", {
-                      fg: "#7aa2f7",
+                    /* @__PURE__ */ jsxDEV16("text", {
+                      fg: theme.primary,
                       children: "Model name: "
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV12("text", {
-                      fg: "#c0caf5",
+                    /* @__PURE__ */ jsxDEV16("text", {
+                      fg: theme.text,
                       children: [
                         modelInput,
                         "_"
@@ -4646,10 +5573,10 @@ function AddCustomScreen() {
                     }, undefined, true, undefined, this)
                   ]
                 }, undefined, true, undefined, this),
-                models.length > 0 && /* @__PURE__ */ jsxDEV12("box", {
+                models.length > 0 && /* @__PURE__ */ jsxDEV16("box", {
                   height: 1,
-                  children: /* @__PURE__ */ jsxDEV12("text", {
-                    fg: "#9ece6a",
+                  children: /* @__PURE__ */ jsxDEV16("text", {
+                    fg: theme.success,
                     children: [
                       "  ",
                       models.length,
@@ -4659,10 +5586,10 @@ function AddCustomScreen() {
                     ]
                   }, undefined, true, undefined, this)
                 }, undefined, false, undefined, this),
-                saveError && /* @__PURE__ */ jsxDEV12("box", {
+                saveError && /* @__PURE__ */ jsxDEV16("box", {
                   height: 1,
-                  children: /* @__PURE__ */ jsxDEV12("text", {
-                    fg: "#f7768e",
+                  children: /* @__PURE__ */ jsxDEV16("text", {
+                    fg: theme.error,
                     children: [
                       "Error: ",
                       saveError
@@ -4671,10 +5598,10 @@ function AddCustomScreen() {
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            inputError ? /* @__PURE__ */ jsxDEV12("box", {
+            inputError ? /* @__PURE__ */ jsxDEV16("box", {
               height: 1,
-              children: /* @__PURE__ */ jsxDEV12("text", {
-                fg: "#f7768e",
+              children: /* @__PURE__ */ jsxDEV16("text", {
+                fg: theme.error,
                 children: inputError
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this) : null
@@ -4686,7 +5613,9 @@ function AddCustomScreen() {
 }
 var STEPS, STEP_LABELS, STEP_NUM;
 var init_AddCustomScreen = __esm(() => {
+  init_useAppKeyboard();
   init_AppContext();
+  init_ThemeContext();
   init_usePaste();
   STEPS = ["type", "id", "name", "url", "key", "models"];
   STEP_LABELS = ["Type", "ID", "Name", "URL", "Key", "Models"];
@@ -4694,25 +5623,26 @@ var init_AddCustomScreen = __esm(() => {
 });
 
 // src/tui/screens/AddModelsScreen.tsx
-import { useState as useState7, useEffect as useEffect6 } from "react";
-import { useKeyboard as useKeyboard8, useTerminalDimensions as useTerminalDimensions4 } from "@opentui/react";
-import { jsxDEV as jsxDEV13 } from "@opentui/react/jsx-dev-runtime";
+import { useState as useState11, useEffect as useEffect8 } from "react";
+import { useTerminalDimensions as useTerminalDimensions4 } from "@opentui/react";
+import { jsxDEV as jsxDEV17 } from "@opentui/react/jsx-dev-runtime";
 function AddModelsScreen() {
   const { dispatch } = useAppContext();
   const navigate = useNavigate();
+  const theme = useTheme();
   const { width } = useTerminalDimensions4();
   const CARD_W = Math.min(60, width - 4);
-  const [step, setStep] = useState7("pick");
-  const [providers, setProviders] = useState7([]);
-  const [cursor, setCursor] = useState7(0);
-  const [selectedProvider, setSelectedProvider] = useState7(null);
-  const [modelInput, setModelInput] = useState7("");
-  const [addedModels, setAddedModels] = useState7([]);
-  const [loadError, setLoadError] = useState7("");
-  const [saveError, setSaveError] = useState7("");
-  const [inputError, setInputError] = useState7("");
-  const [done, setDone] = useState7(false);
-  useEffect6(() => {
+  const [step, setStep] = useState11("pick");
+  const [providers, setProviders] = useState11([]);
+  const [cursor, setCursor] = useState11(0);
+  const [selectedProvider, setSelectedProvider] = useState11(null);
+  const [modelInput, setModelInput] = useState11("");
+  const [addedModels, setAddedModels] = useState11([]);
+  const [loadError, setLoadError] = useState11("");
+  const [saveError, setSaveError] = useState11("");
+  const [inputError, setInputError] = useState11("");
+  const [done, setDone] = useState11(false);
+  useEffect8(() => {
     async function load() {
       try {
         const { getCustomProvidersFromConfig: getCustomProvidersFromConfig2 } = await Promise.resolve().then(() => (init_ai_config(), exports_ai_config));
@@ -4729,7 +5659,7 @@ function AddModelsScreen() {
     if (step === "add")
       setModelInput((v) => v + clean);
   });
-  useKeyboard8((key) => {
+  useAppKeyboard((key) => {
     if (done) {
       if (key.name === "return" || key.name === "enter")
         navigate("model-menu");
@@ -4782,9 +5712,8 @@ function AddModelsScreen() {
         setModelInput((v) => v.slice(0, -1));
         return;
       }
-      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ") {
+      if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta && key.sequence >= " ")
         setModelInput((v) => v + key.sequence);
-      }
     }
   });
   async function addModel() {
@@ -4795,10 +5724,7 @@ function AddModelsScreen() {
     const name = modelInput.trim();
     try {
       const { addModelToCustomProvider: addModelToCustomProvider2 } = await Promise.resolve().then(() => (init_ai_config(), exports_ai_config));
-      await addModelToCustomProvider2(selectedProvider.id, {
-        id: name.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
-        name
-      });
+      await addModelToCustomProvider2(selectedProvider.id, { id: name.toLowerCase().replace(/[^a-z0-9-]/g, "-"), name });
       setAddedModels((ms) => [...ms, name]);
       setModelInput("");
     } catch (e) {
@@ -4812,29 +5738,29 @@ function AddModelsScreen() {
     setDone(true);
   }
   if (done) {
-    return /* @__PURE__ */ jsxDEV13("box", {
+    return /* @__PURE__ */ jsxDEV17("box", {
       flexDirection: "column",
       flexGrow: 1,
       alignItems: "center",
       justifyContent: "center",
-      children: /* @__PURE__ */ jsxDEV13("box", {
+      children: /* @__PURE__ */ jsxDEV17("box", {
         flexDirection: "column",
         border: true,
         borderStyle: "rounded",
-        borderColor: "#292e42",
-        backgroundColor: "#16161e",
+        borderColor: theme.border,
+        backgroundColor: theme.background,
         width: CARD_W,
-        children: /* @__PURE__ */ jsxDEV13("box", {
+        children: /* @__PURE__ */ jsxDEV17("box", {
           flexDirection: "column",
           paddingLeft: 2,
           paddingRight: 2,
           paddingTop: 1,
           paddingBottom: 1,
           children: [
-            /* @__PURE__ */ jsxDEV13("box", {
+            /* @__PURE__ */ jsxDEV17("box", {
               height: 1,
-              children: /* @__PURE__ */ jsxDEV13("text", {
-                fg: "#9ece6a",
+              children: /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.success,
                 children: [
                   "Done! Added ",
                   addedModels.length,
@@ -4846,10 +5772,10 @@ function AddModelsScreen() {
                 ]
               }, undefined, true, undefined, this)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV13("box", {
+            /* @__PURE__ */ jsxDEV17("box", {
               height: 1,
-              children: /* @__PURE__ */ jsxDEV13("text", {
-                fg: "#565f89",
+              children: /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.dim,
                 children: "Press [Enter] to return"
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this)
@@ -4859,70 +5785,70 @@ function AddModelsScreen() {
     }, undefined, false, undefined, this);
   }
   if (step === "add" && selectedProvider) {
-    return /* @__PURE__ */ jsxDEV13("box", {
+    return /* @__PURE__ */ jsxDEV17("box", {
       flexDirection: "column",
       flexGrow: 1,
       alignItems: "center",
       justifyContent: "center",
-      children: /* @__PURE__ */ jsxDEV13("box", {
+      children: /* @__PURE__ */ jsxDEV17("box", {
         flexDirection: "column",
         border: true,
         borderStyle: "rounded",
-        borderColor: "#292e42",
-        backgroundColor: "#16161e",
+        borderColor: theme.border,
+        backgroundColor: theme.background,
         width: CARD_W,
         children: [
-          /* @__PURE__ */ jsxDEV13("box", {
+          /* @__PURE__ */ jsxDEV17("box", {
             height: 1,
             paddingLeft: 2,
             paddingTop: 1,
             flexDirection: "row",
             children: [
-              /* @__PURE__ */ jsxDEV13("text", {
-                fg: "#7dcfff",
+              /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.accent,
                 children: "Add Models to: "
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV13("text", {
-                fg: "#c0caf5",
+              /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.text,
                 children: selectedProvider.name
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV13("box", {
+          /* @__PURE__ */ jsxDEV17("box", {
             height: 1,
-            backgroundColor: "#292e42"
+            backgroundColor: theme.border
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV13("box", {
+          /* @__PURE__ */ jsxDEV17("box", {
             flexDirection: "column",
             paddingLeft: 2,
             paddingRight: 2,
             paddingTop: 1,
             paddingBottom: 1,
             children: [
-              (selectedProvider.models.length > 0 || addedModels.length > 0) && /* @__PURE__ */ jsxDEV13("box", {
+              (selectedProvider.models.length > 0 || addedModels.length > 0) && /* @__PURE__ */ jsxDEV17("box", {
                 flexDirection: "column",
                 children: [
-                  /* @__PURE__ */ jsxDEV13("box", {
+                  /* @__PURE__ */ jsxDEV17("box", {
                     height: 1,
-                    children: /* @__PURE__ */ jsxDEV13("text", {
-                      fg: "#7aa2f7",
+                    children: /* @__PURE__ */ jsxDEV17("text", {
+                      fg: theme.primary,
                       children: "Current models:"
                     }, undefined, false, undefined, this)
                   }, undefined, false, undefined, this),
-                  selectedProvider.models.map((m) => /* @__PURE__ */ jsxDEV13("box", {
+                  selectedProvider.models.map((m) => /* @__PURE__ */ jsxDEV17("box", {
                     height: 1,
-                    children: /* @__PURE__ */ jsxDEV13("text", {
-                      fg: "#565f89",
+                    children: /* @__PURE__ */ jsxDEV17("text", {
+                      fg: theme.dim,
                       children: [
                         "  \xB7 ",
                         m.name || m.id
                       ]
                     }, undefined, true, undefined, this)
                   }, m.id, false, undefined, this)),
-                  addedModels.map((m) => /* @__PURE__ */ jsxDEV13("box", {
+                  addedModels.map((m) => /* @__PURE__ */ jsxDEV17("box", {
                     height: 1,
-                    children: /* @__PURE__ */ jsxDEV13("text", {
-                      fg: "#9ece6a",
+                    children: /* @__PURE__ */ jsxDEV17("text", {
+                      fg: theme.success,
                       children: [
                         "  \xB7 ",
                         m,
@@ -4932,16 +5858,16 @@ function AddModelsScreen() {
                   }, m, false, undefined, this))
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV13("box", {
+              /* @__PURE__ */ jsxDEV17("box", {
                 height: 1,
                 flexDirection: "row",
                 children: [
-                  /* @__PURE__ */ jsxDEV13("text", {
-                    fg: "#7aa2f7",
+                  /* @__PURE__ */ jsxDEV17("text", {
+                    fg: theme.primary,
                     children: "Model name: "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV13("text", {
-                    fg: "#c0caf5",
+                  /* @__PURE__ */ jsxDEV17("text", {
+                    fg: theme.text,
                     children: [
                       modelInput,
                       "_"
@@ -4949,10 +5875,10 @@ function AddModelsScreen() {
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              addedModels.length > 0 && /* @__PURE__ */ jsxDEV13("box", {
+              addedModels.length > 0 && /* @__PURE__ */ jsxDEV17("box", {
                 height: 1,
-                children: /* @__PURE__ */ jsxDEV13("text", {
-                  fg: "#9ece6a",
+                children: /* @__PURE__ */ jsxDEV17("text", {
+                  fg: theme.success,
                   children: [
                     "Added ",
                     addedModels.length,
@@ -4962,20 +5888,20 @@ function AddModelsScreen() {
                   ]
                 }, undefined, true, undefined, this)
               }, undefined, false, undefined, this),
-              saveError && /* @__PURE__ */ jsxDEV13("box", {
+              saveError && /* @__PURE__ */ jsxDEV17("box", {
                 height: 1,
-                children: /* @__PURE__ */ jsxDEV13("text", {
-                  fg: "#f7768e",
+                children: /* @__PURE__ */ jsxDEV17("text", {
+                  fg: theme.error,
                   children: [
                     "Error: ",
                     saveError
                   ]
                 }, undefined, true, undefined, this)
               }, undefined, false, undefined, this),
-              inputError && /* @__PURE__ */ jsxDEV13("box", {
+              inputError && /* @__PURE__ */ jsxDEV17("box", {
                 height: 1,
-                children: /* @__PURE__ */ jsxDEV13("text", {
-                  fg: "#f7768e",
+                children: /* @__PURE__ */ jsxDEV17("text", {
+                  fg: theme.error,
                   children: inputError
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this)
@@ -4985,84 +5911,84 @@ function AddModelsScreen() {
       }, undefined, true, undefined, this)
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV13("box", {
+  return /* @__PURE__ */ jsxDEV17("box", {
     flexDirection: "column",
     flexGrow: 1,
     alignItems: "center",
     justifyContent: "center",
-    children: /* @__PURE__ */ jsxDEV13("box", {
+    children: /* @__PURE__ */ jsxDEV17("box", {
       flexDirection: "column",
       border: true,
       borderStyle: "rounded",
-      borderColor: "#292e42",
-      backgroundColor: "#16161e",
+      borderColor: theme.border,
+      backgroundColor: theme.background,
       width: CARD_W,
       children: [
-        /* @__PURE__ */ jsxDEV13("box", {
+        /* @__PURE__ */ jsxDEV17("box", {
           height: 1,
           paddingLeft: 2,
           paddingTop: 1,
-          children: /* @__PURE__ */ jsxDEV13("text", {
-            fg: "#7dcfff",
+          children: /* @__PURE__ */ jsxDEV17("text", {
+            fg: theme.accent,
             children: "Add Models to Provider"
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV13("box", {
+        /* @__PURE__ */ jsxDEV17("box", {
           height: 1,
-          backgroundColor: "#292e42"
+          backgroundColor: theme.border
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV13("box", {
+        /* @__PURE__ */ jsxDEV17("box", {
           flexDirection: "column",
           paddingLeft: 2,
           paddingRight: 2,
           paddingTop: 1,
           paddingBottom: 1,
           children: [
-            loadError && /* @__PURE__ */ jsxDEV13("box", {
+            loadError && /* @__PURE__ */ jsxDEV17("box", {
               height: 1,
-              children: /* @__PURE__ */ jsxDEV13("text", {
-                fg: "#f7768e",
+              children: /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.error,
                 children: [
                   "Error: ",
                   loadError
                 ]
               }, undefined, true, undefined, this)
             }, undefined, false, undefined, this),
-            !loadError && providers.length === 0 && /* @__PURE__ */ jsxDEV13("box", {
+            !loadError && providers.length === 0 && /* @__PURE__ */ jsxDEV17("box", {
               height: 1,
-              children: /* @__PURE__ */ jsxDEV13("text", {
-                fg: "#ff9e64",
+              children: /* @__PURE__ */ jsxDEV17("text", {
+                fg: theme.warning,
                 children: "No custom providers yet. Add one first."
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
             providers.map((prov, i) => {
               const isActive = i === cursor;
-              return /* @__PURE__ */ jsxDEV13("box", {
+              return /* @__PURE__ */ jsxDEV17("box", {
                 height: 1,
                 width: "100%",
                 flexDirection: "row",
-                backgroundColor: isActive ? "#292e42" : "transparent",
+                backgroundColor: isActive ? theme.border : "transparent",
                 children: [
-                  /* @__PURE__ */ jsxDEV13("text", {
-                    fg: "#565f89",
+                  /* @__PURE__ */ jsxDEV17("text", {
+                    fg: theme.dim,
                     width: 2,
                     children: " "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV13("text", {
-                    fg: isActive ? "#c0caf5" : "#565f89",
+                  /* @__PURE__ */ jsxDEV17("text", {
+                    fg: isActive ? theme.text : theme.dim,
                     width: Math.floor((CARD_W - 8) * 0.6),
                     children: prov.name
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV13("text", {
-                    fg: isActive ? "#7aa2f7" : "#292e42",
+                  /* @__PURE__ */ jsxDEV17("text", {
+                    fg: isActive ? theme.primary : theme.border,
                     width: Math.floor((CARD_W - 8) * 0.3),
                     children: [
                       prov.models.length,
                       " models"
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV13("text", {
-                    fg: "#7dcfff",
+                  /* @__PURE__ */ jsxDEV17("text", {
+                    fg: theme.accent,
                     width: 2,
                     children: isActive ? "\u203A" : " "
                   }, undefined, false, undefined, this)
@@ -5076,84 +6002,87 @@ function AddModelsScreen() {
   }, undefined, false, undefined, this);
 }
 var init_AddModelsScreen = __esm(() => {
+  init_useAppKeyboard();
   init_AppContext();
+  init_ThemeContext();
   init_usePaste();
 });
 
 // src/tui/screens/ListProvidersScreen.tsx
-import { useKeyboard as useKeyboard9 } from "@opentui/react";
-import { jsxDEV as jsxDEV14 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV18 } from "@opentui/react/jsx-dev-runtime";
 function ListProvidersScreen() {
   const { state } = useAppContext();
   const navigate = useNavigate();
-  useKeyboard9((key) => {
+  const theme = useTheme();
+  useAppKeyboard((key) => {
     if (key.name === "escape" || key.name === "q") {
       navigate("model-menu");
     }
   });
   if (state.isLoadingConfig) {
-    return /* @__PURE__ */ jsxDEV14("box", {
+    return /* @__PURE__ */ jsxDEV18("box", {
       flexDirection: "column",
       flexGrow: 1,
       padding: 1,
-      children: /* @__PURE__ */ jsxDEV14("text", {
+      children: /* @__PURE__ */ jsxDEV18("text", {
+        fg: theme.dim,
         children: "Loading providers..."
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
   const providers = state.config?.providers ?? [];
   if (providers.length === 0) {
-    return /* @__PURE__ */ jsxDEV14("box", {
+    return /* @__PURE__ */ jsxDEV18("box", {
       flexDirection: "column",
       flexGrow: 1,
       padding: 1,
       children: [
-        /* @__PURE__ */ jsxDEV14("text", {
-          fg: "#7aa2f7",
+        /* @__PURE__ */ jsxDEV18("text", {
+          fg: theme.primary,
           children: "Configured Providers"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV14("box", {
+        /* @__PURE__ */ jsxDEV18("box", {
           marginTop: 1,
-          children: /* @__PURE__ */ jsxDEV14("text", {
-            fg: "#ff9e64",
+          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__ */ jsxDEV14("box", {
+  return /* @__PURE__ */ jsxDEV18("box", {
     flexDirection: "column",
     flexGrow: 1,
     padding: 1,
     children: [
-      /* @__PURE__ */ jsxDEV14("text", {
-        fg: "#7aa2f7",
+      /* @__PURE__ */ jsxDEV18("text", {
+        fg: theme.primary,
         children: "Configured Providers"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV14("box", {
+      /* @__PURE__ */ jsxDEV18("box", {
         marginTop: 1,
         flexGrow: 1,
-        children: /* @__PURE__ */ jsxDEV14("scrollbox", {
+        children: /* @__PURE__ */ jsxDEV18("scrollbox", {
           focused: true,
-          children: providers.map((provider, i) => /* @__PURE__ */ jsxDEV14("box", {
+          children: providers.map((provider, i) => /* @__PURE__ */ jsxDEV18("box", {
             flexDirection: "column",
             border: true,
             borderStyle: "rounded",
-            borderColor: "#292e42",
-            backgroundColor: "#16161e",
+            borderColor: theme.border,
+            backgroundColor: theme.background,
             marginBottom: 1,
             padding: 1,
             children: [
-              /* @__PURE__ */ jsxDEV14("box", {
+              /* @__PURE__ */ jsxDEV18("box", {
                 flexDirection: "row",
                 children: [
-                  /* @__PURE__ */ jsxDEV14("text", {
-                    fg: "#7dcfff",
+                  /* @__PURE__ */ jsxDEV18("text", {
+                    fg: theme.accent,
                     children: provider.name
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV14("text", {
-                    fg: "#565f89",
+                  /* @__PURE__ */ jsxDEV18("text", {
+                    fg: theme.dim,
                     children: [
                       "  [",
                       provider.type,
@@ -5162,8 +6091,8 @@ function ListProvidersScreen() {
                   }, undefined, true, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              provider.models.map((model, j) => /* @__PURE__ */ jsxDEV14("text", {
-                fg: "#565f89",
+              provider.models.map((model, j) => /* @__PURE__ */ jsxDEV18("text", {
+                fg: theme.dim,
                 children: [
                   "  \xB7 ",
                   model.name || model.id
@@ -5177,16 +6106,285 @@ function ListProvidersScreen() {
   }, undefined, true, undefined, this);
 }
 var init_ListProvidersScreen = __esm(() => {
+  init_useAppKeyboard();
+  init_AppContext();
+  init_ThemeContext();
+});
+
+// src/tui/screens/FAQScreen.tsx
+import { jsxDEV as jsxDEV19 } from "@opentui/react/jsx-dev-runtime";
+function FAQScreen() {
+  const navigate = useNavigate();
+  const theme = useTheme();
+  useAppKeyboard((key) => {
+    if (key.name === "escape" || key.name === "q") {
+      navigate("main-menu");
+    }
+  });
+  return /* @__PURE__ */ jsxDEV19("box", {
+    flexDirection: "column",
+    flexGrow: 1,
+    alignItems: "center",
+    padding: 1,
+    children: /* @__PURE__ */ jsxDEV19("box", {
+      flexDirection: "column",
+      width: 70,
+      children: [
+        /* @__PURE__ */ jsxDEV19("box", {
+          marginBottom: 1,
+          children: /* @__PURE__ */ jsxDEV19("text", {
+            fg: theme.primary,
+            bold: true,
+            children: "FAQ / Learn"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV19("scrollbox", {
+          focused: true,
+          flexGrow: 1,
+          children: /* @__PURE__ */ jsxDEV19("box", {
+            flexDirection: "column",
+            children: [
+              /* @__PURE__ */ jsxDEV19("box", {
+                flexDirection: "column",
+                border: true,
+                borderStyle: "rounded",
+                borderColor: theme.border,
+                padding: 1,
+                marginBottom: 1,
+                children: [
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.accent,
+                    bold: true,
+                    children: "METRICS EXPLAINED"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: " "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.secondary,
+                    bold: true,
+                    children: "TPS (Tokens Per Second)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  How fast a model generates tokens after the first one."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.dim,
+                    children: "  Formula: output_tokens / generation_time"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.success,
+                    children: "  \u2192 Higher is better (faster streaming)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: " "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.secondary,
+                    bold: true,
+                    children: "TTFT (Time To First Token)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  Time from request to receiving the first token."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.dim,
+                    children: "  Formula: first_token_time - request_start_time"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.success,
+                    children: "  \u2192 Lower is better (less waiting)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: " "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.secondary,
+                    bold: true,
+                    children: "F1000 (First to 1000)"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  Time to complete 1000 agentic requests (~300 tokens each)."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.dim,
+                    children: "  Formula: 1000 \xD7 (TTFT + 300/TPS) = hours"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.success,
+                    children: "  \u2192 Lower is better"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: " "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  Why it matters: In agentic coding (Cursor, Copilot, OpenCode),"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  models make hundreds of tool calls \u2014 TTFT adds up massively."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  A 30 tok/s + 1s TTFT model can match a 60 tok/s + 6s TTFT model."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: " "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.secondary,
+                    bold: true,
+                    children: "Total Time"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  Complete request duration from start to finish."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.dim,
+                    children: "  Includes: connection, TTFT, and generation time"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV19("box", {
+                flexDirection: "column",
+                border: true,
+                borderStyle: "rounded",
+                borderColor: theme.border,
+                padding: 1,
+                marginBottom: 1,
+                children: [
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.accent,
+                    bold: true,
+                    children: "LINKS"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: " "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.secondary,
+                    bold: true,
+                    children: "Discord Community"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  https://discord.gg/6S7HwCxbMy"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.dim,
+                    children: "  Join for help, updates, and discussions"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: " "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.secondary,
+                    bold: true,
+                    children: "Website & Leaderboard"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  https://ai-speedometer.oliveowl.xyz/"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.dim,
+                    children: "  Track OSS model speeds over time"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: " "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.secondary,
+                    bold: true,
+                    children: "GitHub"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  https://github.com/anomaly/ai-speedometer"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.dim,
+                    children: "  Source code, issues, contributions"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV19("box", {
+                flexDirection: "column",
+                border: true,
+                borderStyle: "rounded",
+                borderColor: theme.border,
+                padding: 1,
+                marginBottom: 1,
+                children: [
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.accent,
+                    bold: true,
+                    children: "TIPS"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: " "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  \u2022 Press [T] anytime to open the theme picker"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  \u2022 Use --log flag to save raw SSE data for debugging"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    children: "  \u2022 Run headless with ai-speedometer-headless for CI/CD"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV19("text", {
+                    fg: theme.text,
+                    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, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var init_FAQScreen = __esm(() => {
+  init_useAppKeyboard();
   init_AppContext();
+  init_ThemeContext();
 });
 
 // src/tui/App.tsx
-import { useKeyboard as useKeyboard10, useRenderer as useRenderer3 } from "@opentui/react";
-import { jsxDEV as jsxDEV15 } from "@opentui/react/jsx-dev-runtime";
+import { useKeyboard as useKeyboard3, useRenderer as useRenderer3 } from "@opentui/react";
+import { jsxDEV as jsxDEV20 } from "@opentui/react/jsx-dev-runtime";
 function getHints(screen, benchResults) {
   switch (screen) {
     case "main-menu":
-      return ["[\u2191\u2193] navigate", "[Enter] select", "[Ctrl+C] quit"];
+      return ["[\u2191\u2193] navigate", "[Enter] select", "[T] theme", "[Ctrl+C] quit"];
     case "model-menu":
       return ["[\u2191\u2193] navigate", "[Enter] select", "[Q] back"];
     case "model-select":
@@ -5197,6 +6395,8 @@ function getHints(screen, benchResults) {
     }
     case "list-providers":
       return ["[\u2191\u2193] scroll", "[Q] back"];
+    case "faq":
+      return ["[\u2191\u2193] scroll", "[Q] back"];
     case "add-verified":
       return ["[\u2191\u2193] navigate", "[Enter] select", "[Q] back"];
     case "add-custom":
@@ -5211,59 +6411,78 @@ function ActiveScreen() {
   const { state } = useAppContext();
   switch (state.screen) {
     case "main-menu":
-      return /* @__PURE__ */ jsxDEV15(MainMenuScreen, {}, undefined, false, undefined, this);
+      return /* @__PURE__ */ jsxDEV20(MainMenuScreen, {}, undefined, false, undefined, this);
     case "model-menu":
-      return /* @__PURE__ */ jsxDEV15(ModelMenuScreen, {}, undefined, false, undefined, this);
+      return /* @__PURE__ */ jsxDEV20(ModelMenuScreen, {}, undefined, false, undefined, this);
     case "model-select":
-      return /* @__PURE__ */ jsxDEV15(ModelSelectScreen, {}, undefined, false, undefined, this);
+      return /* @__PURE__ */ jsxDEV20(ModelSelectScreen, {}, undefined, false, undefined, this);
     case "benchmark":
-      return /* @__PURE__ */ jsxDEV15(BenchmarkScreen, {}, undefined, false, undefined, this);
+      return /* @__PURE__ */ jsxDEV20(BenchmarkScreen, {}, undefined, false, undefined, this);
     case "add-verified":
-      return /* @__PURE__ */ jsxDEV15(AddVerifiedScreen, {}, undefined, false, undefined, this);
+      return /* @__PURE__ */ jsxDEV20(AddVerifiedScreen, {}, undefined, false, undefined, this);
     case "add-custom":
-      return /* @__PURE__ */ jsxDEV15(AddCustomScreen, {}, undefined, false, undefined, this);
+      return /* @__PURE__ */ jsxDEV20(AddCustomScreen, {}, undefined, false, undefined, this);
     case "add-models":
-      return /* @__PURE__ */ jsxDEV15(AddModelsScreen, {}, undefined, false, undefined, this);
+      return /* @__PURE__ */ jsxDEV20(AddModelsScreen, {}, undefined, false, undefined, this);
     case "list-providers":
-      return /* @__PURE__ */ jsxDEV15(ListProvidersScreen, {}, undefined, false, undefined, this);
+      return /* @__PURE__ */ jsxDEV20(ListProvidersScreen, {}, undefined, false, undefined, this);
+    case "faq":
+      return /* @__PURE__ */ jsxDEV20(FAQScreen, {}, undefined, false, undefined, this);
   }
 }
 function Shell() {
   const renderer = useRenderer3();
   const { state } = useAppContext();
-  useKeyboard10((key) => {
+  const theme = useTheme();
+  const { modalOpen, setModalOpen } = useModal();
+  useKeyboard3((key) => {
     if (key.ctrl && key.name === "c") {
       renderer.destroy();
+      return;
+    }
+    if (!key.ctrl && !key.meta && key.sequence === "T") {
+      setModalOpen(!modalOpen);
     }
   });
-  return /* @__PURE__ */ jsxDEV15("box", {
+  return /* @__PURE__ */ jsxDEV20("box", {
     flexDirection: "column",
     height: "100%",
     width: "100%",
-    backgroundColor: "#1a1b26",
+    backgroundColor: theme.background,
     children: [
-      /* @__PURE__ */ jsxDEV15(Header, {
+      /* @__PURE__ */ jsxDEV20(Header, {
         screen: state.screen
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV15("box", {
+      /* @__PURE__ */ jsxDEV20("box", {
         flexGrow: 1,
         flexDirection: "column",
-        children: /* @__PURE__ */ jsxDEV15(ActiveScreen, {}, undefined, false, undefined, this)
+        children: /* @__PURE__ */ jsxDEV20(ActiveScreen, {}, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV15(Footer, {
+      /* @__PURE__ */ jsxDEV20(Footer, {
         hints: getHints(state.screen, state.benchResults)
+      }, undefined, false, undefined, this),
+      modalOpen && /* @__PURE__ */ jsxDEV20(ThemePicker, {
+        onClose: () => setModalOpen(false)
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
-function App({ logMode = false }) {
-  return /* @__PURE__ */ jsxDEV15(AppProvider, {
-    logMode,
-    children: /* @__PURE__ */ jsxDEV15(Shell, {}, undefined, false, undefined, this)
+function App({ logMode = false, theme = "tokyonight" }) {
+  return /* @__PURE__ */ jsxDEV20(ThemeProvider, {
+    name: theme,
+    children: /* @__PURE__ */ jsxDEV20(ModalProvider, {
+      children: /* @__PURE__ */ jsxDEV20(AppProvider, {
+        logMode,
+        children: /* @__PURE__ */ jsxDEV20(Shell, {}, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 var init_App = __esm(() => {
   init_AppContext();
+  init_ThemeContext();
+  init_ModalContext();
+  init_ThemePicker();
   init_Header();
   init_Footer();
   init_MainMenuScreen();
@@ -5274,6 +6493,7 @@ var init_App = __esm(() => {
   init_AddCustomScreen();
   init_AddModelsScreen();
   init_ListProvidersScreen();
+  init_FAQScreen();
 });
 
 // src/tui/index.tsx
@@ -5283,8 +6503,10 @@ __export(exports_tui, {
 });
 import { createCliRenderer } from "@opentui/core";
 import { createRoot } from "@opentui/react";
-import { jsxDEV as jsxDEV16 } from "@opentui/react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV21 } from "@opentui/react/jsx-dev-runtime";
 async function startTui(logMode = false) {
+  const { readThemeFromConfig: readThemeFromConfig2 } = await Promise.resolve().then(() => (init_ai_config(), exports_ai_config));
+  const theme = await readThemeFromConfig2();
   const renderer = await createCliRenderer({
     exitOnCtrlC: false
   });
@@ -5298,8 +6520,9 @@ async function startTui(logMode = false) {
     renderer.destroy();
     process.exit(0);
   });
-  createRoot(renderer).render(/* @__PURE__ */ jsxDEV16(App, {
-    logMode
+  createRoot(renderer).render(/* @__PURE__ */ jsxDEV21(App, {
+    logMode,
+    theme
   }, undefined, false, undefined, this));
 }
 var ENABLE_BRACKETED_PASTE = "\x1B[?2004h", DISABLE_BRACKETED_PASTE = "\x1B[?2004l";