@tokentop/ttop 0.2.2 → 0.4.0

package/src/tui/views/SettingsView.tsx

@@ -1,20 +1,20 @@
-import { useState, useCallback, useMemo } from 'react';
-import { useKeyboard, useTerminalDimensions } from '@opentui/react';
-import { useColors } from '../contexts/ThemeContext.tsx';
-import { useToastContext } from '../contexts/ToastContext.tsx';
-import { useConfig } from '../contexts/ConfigContext.tsx';
-import { usePlugins } from '../contexts/PluginContext.tsx';
-import { useDemoMode } from '../contexts/DemoModeContext.tsx';
-import { type AppConfig } from '@/config/schema.ts';
-import type { ConfigField } from '@/plugins/types/base.ts';
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { useCallback, useMemo, useState } from "react";
+import type { AppConfig } from "@/config/schema.ts";
+import type { ConfigField } from "@/plugins/types/base.ts";
+import { useConfig } from "../contexts/ConfigContext.tsx";
+import { useDemoMode } from "../contexts/DemoModeContext.tsx";
+import { usePlugins } from "../contexts/PluginContext.tsx";
+import { useColors } from "../contexts/ThemeContext.tsx";
+import { useToastContext } from "../contexts/ToastContext.tsx";
 
-type SettingCategory = 'refresh' | 'display' | 'budgets' | 'alerts' | 'notifications' | 'plugins';
+type SettingCategory = "refresh" | "display" | "budgets" | "alerts" | "notifications" | "plugins";
 
 interface SettingItem {
   key: string;
   label: string;
   category: SettingCategory;
-  type: 'toggle' | 'select' | 'number';
+  type: "toggle" | "select" | "number";
   options?: string[];
   getValue: (config: AppConfig) => string | number | boolean;
   setValue: (config: AppConfig, value: string | number | boolean) => AppConfig;
@@ -22,158 +22,190 @@ interface SettingItem {
 
 const SETTINGS: SettingItem[] = [
   {
-    key: 'intervalMs',
-    label: 'Refresh Interval',
-    category: 'refresh',
-    type: 'select',
-    options: ['30s', '1m', '2m', '5m'],
+    key: "intervalMs",
+    label: "Refresh Interval",
+    category: "refresh",
+    type: "select",
+    options: ["30s", "1m", "2m", "5m"],
     getValue: (c) => {
       const ms = c.refresh.intervalMs;
-      if (ms <= 30000) return '30s';
-      if (ms <= 60000) return '1m';
-      if (ms <= 120000) return '2m';
-      return '5m';
+      if (ms <= 30000) return "30s";
+      if (ms <= 60000) return "1m";
+      if (ms <= 120000) return "2m";
+      return "5m";
     },
     setValue: (c, v) => {
-      const map: Record<string, number> = { '30s': 30000, '1m': 60000, '2m': 120000, '5m': 300000 };
+      const map: Record<string, number> = { "30s": 30000, "1m": 60000, "2m": 120000, "5m": 300000 };
       return { ...c, refresh: { ...c.refresh, intervalMs: map[v as string] ?? 60000 } };
     },
   },
   {
-    key: 'pauseAutoRefresh',
-    label: 'Pause Auto-Refresh',
-    category: 'refresh',
-    type: 'toggle',
+    key: "pauseAutoRefresh",
+    label: "Pause Auto-Refresh",
+    category: "refresh",
+    type: "toggle",
     getValue: (c) => c.refresh.pauseAutoRefresh,
     setValue: (c, v) => ({ ...c, refresh: { ...c.refresh, pauseAutoRefresh: v as boolean } }),
   },
   {
-    key: 'defaultTimeWindow',
-    label: 'Default Time Window',
-    category: 'display',
-    type: 'select',
-    options: ['5m', '15m', '1h', '24h', '7d', '30d', 'all'],
+    key: "defaultTimeWindow",
+    label: "Default Time Window",
+    category: "display",
+    type: "select",
+    options: ["5m", "15m", "1h", "24h", "7d", "30d", "all"],
     getValue: (c) => c.display.defaultTimeWindow,
-    setValue: (c, v) => ({ ...c, display: { ...c.display, defaultTimeWindow: v as AppConfig['display']['defaultTimeWindow'] } }),
+    setValue: (c, v) => ({
+      ...c,
+      display: { ...c.display, defaultTimeWindow: v as AppConfig["display"]["defaultTimeWindow"] },
+    }),
   },
   {
-    key: 'sidebarCollapsed',
-    label: 'Sidebar Collapsed',
-    category: 'display',
-    type: 'toggle',
+    key: "sidebarCollapsed",
+    label: "Sidebar Collapsed",
+    category: "display",
+    type: "toggle",
     getValue: (c) => c.display.sidebarCollapsed,
     setValue: (c, v) => ({ ...c, display: { ...c.display, sidebarCollapsed: v as boolean } }),
   },
   {
-    key: 'timeFormat',
-    label: 'Time Format',
-    category: 'display',
-    type: 'select',
-    options: ['12h', '24h'],
+    key: "timeFormat",
+    label: "Time Format",
+    category: "display",
+    type: "select",
+    options: ["12h", "24h"],
     getValue: (c) => c.display.timeFormat,
-    setValue: (c, v) => ({ ...c, display: { ...c.display, timeFormat: v as '12h' | '24h' } }),
+    setValue: (c, v) => ({ ...c, display: { ...c.display, timeFormat: v as "12h" | "24h" } }),
   },
   // Color Scheme + Theme selection is handled by ThemePicker in SettingsModal
   {
-    key: 'dailyBudget',
-    label: 'Daily Budget ($)',
-    category: 'budgets',
-    type: 'select',
-    options: ['None', '$10', '$25', '$50', '$100', '$200'],
+    key: "dailyBudget",
+    label: "Daily Budget ($)",
+    category: "budgets",
+    type: "select",
+    options: ["None", "$10", "$25", "$50", "$100", "$200"],
     getValue: (c) => {
       const b = c.budgets.daily;
-      if (b === null) return 'None';
+      if (b === null) return "None";
       return `$${b}`;
     },
     setValue: (c, v) => {
-      const map: Record<string, number | null> = { 'None': null, '$10': 10, '$25': 25, '$50': 50, '$100': 100, '$200': 200 };
+      const map: Record<string, number | null> = {
+        None: null,
+        $10: 10,
+        $25: 25,
+        $50: 50,
+        $100: 100,
+        $200: 200,
+      };
       return { ...c, budgets: { ...c.budgets, daily: map[v as string] ?? null } };
     },
   },
   {
-    key: 'weeklyBudget',
-    label: 'Weekly Budget ($)',
-    category: 'budgets',
-    type: 'select',
-    options: ['None', '$50', '$100', '$200', '$500', '$1000'],
+    key: "weeklyBudget",
+    label: "Weekly Budget ($)",
+    category: "budgets",
+    type: "select",
+    options: ["None", "$50", "$100", "$200", "$500", "$1000"],
     getValue: (c) => {
       const b = c.budgets.weekly;
-      if (b === null) return 'None';
+      if (b === null) return "None";
       return `$${b}`;
     },
     setValue: (c, v) => {
-      const map: Record<string, number | null> = { 'None': null, '$50': 50, '$100': 100, '$200': 200, '$500': 500, '$1000': 1000 };
+      const map: Record<string, number | null> = {
+        None: null,
+        $50: 50,
+        $100: 100,
+        $200: 200,
+        $500: 500,
+        $1000: 1000,
+      };
       return { ...c, budgets: { ...c.budgets, weekly: map[v as string] ?? null } };
     },
   },
   {
-    key: 'monthlyBudget',
-    label: 'Monthly Budget ($)',
-    category: 'budgets',
-    type: 'select',
-    options: ['None', '$100', '$250', '$500', '$1000', '$2000'],
+    key: "monthlyBudget",
+    label: "Monthly Budget ($)",
+    category: "budgets",
+    type: "select",
+    options: ["None", "$100", "$250", "$500", "$1000", "$2000"],
     getValue: (c) => {
       const b = c.budgets.monthly;
-      if (b === null) return 'None';
+      if (b === null) return "None";
       return `$${b}`;
     },
     setValue: (c, v) => {
-      const map: Record<string, number | null> = { 'None': null, '$100': 100, '$250': 250, '$500': 500, '$1000': 1000, '$2000': 2000 };
+      const map: Record<string, number | null> = {
+        None: null,
+        $100: 100,
+        $250: 250,
+        $500: 500,
+        $1000: 1000,
+        $2000: 2000,
+      };
       return { ...c, budgets: { ...c.budgets, monthly: map[v as string] ?? null } };
     },
   },
   {
-    key: 'warningPercent',
-    label: 'Warning Threshold (%)',
-    category: 'alerts',
-    type: 'select',
-    options: ['55%', '60%', '65%', '70%', '75%', '80%', '85%', '90%', '95%'],
+    key: "warningPercent",
+    label: "Warning Threshold (%)",
+    category: "alerts",
+    type: "select",
+    options: ["55%", "60%", "65%", "70%", "75%", "80%", "85%", "90%", "95%"],
     getValue: (c) => `${c.alerts.warningPercent}%`,
     setValue: (c, v) => {
-      const percent = parseInt((v as string).replace('%', ''), 10);
+      const percent = parseInt((v as string).replace("%", ""), 10);
       return { ...c, alerts: { ...c.alerts, warningPercent: percent } };
     },
   },
   {
-    key: 'criticalPercent',
-    label: 'Critical Threshold (%)',
-    category: 'alerts',
-    type: 'select',
-    options: ['75%', '80%', '85%', '90%', '95%', '98%', '100%'],
+    key: "criticalPercent",
+    label: "Critical Threshold (%)",
+    category: "alerts",
+    type: "select",
+    options: ["75%", "80%", "85%", "90%", "95%", "98%", "100%"],
     getValue: (c) => `${c.alerts.criticalPercent}%`,
     setValue: (c, v) => {
-      const percent = parseInt((v as string).replace('%', ''), 10);
+      const percent = parseInt((v as string).replace("%", ""), 10);
       return { ...c, alerts: { ...c.alerts, criticalPercent: percent } };
     },
   },
   {
-    key: 'toastsEnabled',
-    label: 'Show Toast Notifications',
-    category: 'notifications',
-    type: 'toggle',
+    key: "toastsEnabled",
+    label: "Show Toast Notifications",
+    category: "notifications",
+    type: "toggle",
     getValue: (c) => c.notifications.toastsEnabled,
-    setValue: (c, v) => ({ ...c, notifications: { ...c.notifications, toastsEnabled: v as boolean } }),
+    setValue: (c, v) => ({
+      ...c,
+      notifications: { ...c.notifications, toastsEnabled: v as boolean },
+    }),
   },
   {
-    key: 'soundEnabled',
-    label: 'Sound Alerts',
-    category: 'notifications',
-    type: 'toggle',
+    key: "soundEnabled",
+    label: "Sound Alerts",
+    category: "notifications",
+    type: "toggle",
     getValue: (c) => c.notifications.soundEnabled,
-    setValue: (c, v) => ({ ...c, notifications: { ...c.notifications, soundEnabled: v as boolean } }),
+    setValue: (c, v) => ({
+      ...c,
+      notifications: { ...c.notifications, soundEnabled: v as boolean },
+    }),
   },
 ];
 
 const CATEGORIES: { id: SettingCategory; label: string }[] = [
-  { id: 'refresh', label: 'Refresh' },
-  { id: 'display', label: 'Display' },
-  { id: 'budgets', label: 'Budgets' },
-  { id: 'alerts', label: 'Alerts' },
-  { id: 'notifications', label: 'Notifications' },
-  { id: 'plugins', label: 'Plugins' },
+  { id: "refresh", label: "Refresh" },
+  { id: "display", label: "Display" },
+  { id: "budgets", label: "Budgets" },
+  { id: "alerts", label: "Alerts" },
+  { id: "notifications", label: "Notifications" },
+  { id: "plugins", label: "Plugins" },
 ];
 
-function buildPluginSettings(plugins: Array<{ id: string; name: string; configSchema?: Record<string, ConfigField> }>): SettingItem[] {
+function buildPluginSettings(
+  plugins: Array<{ id: string; name: string; configSchema?: Record<string, ConfigField> }>,
+): SettingItem[] {
   const items: SettingItem[] = [];
   for (const plugin of plugins) {
     if (!plugin.configSchema) continue;
@@ -198,38 +230,38 @@ function buildPluginSettings(plugins: Array<{ id: string; name: string; configSc
         },
       });
 
-      if (field.type === 'boolean') {
+      if (field.type === "boolean") {
         items.push({
           key: settingKey,
           label,
-          category: 'plugins' as SettingCategory,
-          type: 'toggle',
+          category: "plugins" as SettingCategory,
+          type: "toggle",
           getValue: (c) => getPluginValue(c) as boolean,
           setValue: (c, v) => setPluginValue(c, v),
         });
-      } else if (field.type === 'select' && field.options) {
+      } else if (field.type === "select" && field.options) {
         items.push({
           key: settingKey,
           label,
-          category: 'plugins' as SettingCategory,
-          type: 'select',
+          category: "plugins" as SettingCategory,
+          type: "select",
           options: field.options.map((o) => o.label),
           getValue: (c) => {
             const val = getPluginValue(c) as string;
             const opt = field.options?.find((o) => o.value === val);
-            return opt?.label ?? val ?? '';
+            return opt?.label ?? val ?? "";
           },
           setValue: (c, v) => {
             const opt = field.options?.find((o) => o.label === v);
             return setPluginValue(c, opt?.value ?? v);
           },
         });
-      } else if (field.type === 'number') {
+      } else if (field.type === "number") {
         items.push({
           key: settingKey,
           label,
-          category: 'plugins' as SettingCategory,
-          type: 'number',
+          category: "plugins" as SettingCategory,
+          type: "number",
           getValue: (c) => (getPluginValue(c) as number) ?? 0,
           setValue: (c, v) => setPluginValue(c, v),
         });
@@ -237,9 +269,9 @@ function buildPluginSettings(plugins: Array<{ id: string; name: string; configSc
         items.push({
           key: settingKey,
           label,
-          category: 'plugins' as SettingCategory,
-          type: 'select',
-          getValue: (c) => String(getPluginValue(c) ?? ''),
+          category: "plugins" as SettingCategory,
+          type: "select",
+          getValue: (c) => String(getPluginValue(c) ?? ""),
           setValue: (c, v) => setPluginValue(c, v),
         });
       }
@@ -252,116 +284,118 @@ export function SettingsView() {
   const colors = useColors();
   const { showToast } = useToastContext();
   const { config, isLoading, updateConfig, resetToDefaults, saveNow } = useConfig();
-  const { providers, notifications } = usePlugins();
+  const { providers, agents, themes, notifications } = usePlugins();
   const { demoMode, seed, preset } = useDemoMode();
   const { width: terminalWidth } = useTerminalDimensions();
-  
-  const [selectedCategory, setSelectedCategory] = useState<SettingCategory>('refresh');
+
+  const [selectedCategory, setSelectedCategory] = useState<SettingCategory>("refresh");
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [focusedPane, setFocusedPane] = useState<'categories' | 'settings'>('settings');
-  
+  const [focusedPane, setFocusedPane] = useState<"categories" | "settings">("settings");
+
   const pluginSettings = useMemo(() => {
     const allPlugins = [
       ...Array.from(providers.values()).map((p) => p.plugin),
+      ...agents,
+      ...themes,
       ...notifications,
     ];
     return buildPluginSettings(allPlugins);
-  }, [providers, notifications, config]);
+  }, [providers, agents, themes, notifications]);
 
   const allSettings = useMemo(() => [...SETTINGS, ...pluginSettings], [pluginSettings]);
-  const categorySettings = allSettings.filter(s => s.category === selectedCategory);
-  
+  const categorySettings = allSettings.filter((s) => s.category === selectedCategory);
+
   const helpText = useMemo(() => {
     if (terminalWidth >= 100) {
-      return 'Tab: switch panes    ↑↓: navigate    Enter/Space: toggle    ←→: adjust    Ctrl+S: save    Shift+R: reset';
+      return "Tab: switch panes    ↑↓: navigate    Enter/Space: toggle    ←→: adjust    Ctrl+S: save    Shift+R: reset";
     } else if (terminalWidth >= 80) {
-      return 'Tab: switch    ↑↓: nav    Enter: toggle    ←→: adjust    ^S: save    R: reset';
+      return "Tab: switch    ↑↓: nav    Enter: toggle    ←→: adjust    ^S: save    R: reset";
     }
-    return 'Tab ↑↓ Enter ←→ ^S:save R:reset';
+    return "Tab ↑↓ Enter ←→ ^S:save R:reset";
   }, [terminalWidth]);
-  
+
   const handleSave = useCallback(async () => {
     try {
       await saveNow();
-      showToast('Settings saved');
+      showToast("Settings saved");
     } catch {
-      showToast('Failed to save settings', 'error');
+      showToast("Failed to save settings", "error");
     }
   }, [saveNow, showToast]);
-  
+
   const handleReset = useCallback(() => {
     resetToDefaults();
-    showToast('Reset to defaults');
+    showToast("Reset to defaults");
   }, [resetToDefaults, showToast]);
-  
+
   const toggleCurrentSetting = useCallback(() => {
     const setting = categorySettings[selectedIndex];
     if (!setting) return;
-    
+
     const currentValue = setting.getValue(config);
     let newConfig: AppConfig;
-    
-    if (setting.type === 'toggle') {
+
+    if (setting.type === "toggle") {
       newConfig = setting.setValue(config, !currentValue);
-    } else if (setting.type === 'select' && setting.options) {
+    } else if (setting.type === "select" && setting.options) {
       const currentIdx = setting.options.indexOf(currentValue as string);
       const nextIdx = (currentIdx + 1) % setting.options.length;
       newConfig = setting.setValue(config, setting.options[nextIdx]!);
     } else {
       return;
     }
-    
+
     updateConfig(newConfig);
   }, [categorySettings, selectedIndex, config, updateConfig]);
-  
+
   useKeyboard((key) => {
-    if (key.ctrl && key.name === 's') {
+    if (key.ctrl && key.name === "s") {
       handleSave();
       return;
     }
-    
-    if (key.shift && key.name === 'r') {
+
+    if (key.shift && key.name === "r") {
       handleReset();
       return;
     }
-    
-    if (key.name === 'tab') {
-      setFocusedPane(p => p === 'categories' ? 'settings' : 'categories');
+
+    if (key.name === "tab") {
+      setFocusedPane((p) => (p === "categories" ? "settings" : "categories"));
       return;
     }
-    
-    if (focusedPane === 'categories') {
-      const catIdx = CATEGORIES.findIndex(c => c.id === selectedCategory);
-      if (key.name === 'down' || key.name === 'j') {
+
+    if (focusedPane === "categories") {
+      const catIdx = CATEGORIES.findIndex((c) => c.id === selectedCategory);
+      if (key.name === "down" || key.name === "j") {
         const nextIdx = Math.min(catIdx + 1, CATEGORIES.length - 1);
         setSelectedCategory(CATEGORIES[nextIdx]!.id);
         setSelectedIndex(0);
-      } else if (key.name === 'up' || key.name === 'k') {
+      } else if (key.name === "up" || key.name === "k") {
         const prevIdx = Math.max(catIdx - 1, 0);
         setSelectedCategory(CATEGORIES[prevIdx]!.id);
         setSelectedIndex(0);
       }
       return;
     }
-    
-    if (focusedPane === 'settings') {
-      if (key.name === 'down' || key.name === 'j') {
-        setSelectedIndex(i => Math.min(i + 1, categorySettings.length - 1));
-      } else if (key.name === 'up' || key.name === 'k') {
-        setSelectedIndex(i => Math.max(i - 1, 0));
-      } else if (key.name === 'return' || key.name === 'space') {
+
+    if (focusedPane === "settings") {
+      if (key.name === "down" || key.name === "j") {
+        setSelectedIndex((i) => Math.min(i + 1, categorySettings.length - 1));
+      } else if (key.name === "up" || key.name === "k") {
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+      } else if (key.name === "return" || key.name === "space") {
         toggleCurrentSetting();
-      } else if (key.name === 'left' || key.name === 'h') {
+      } else if (key.name === "left" || key.name === "h") {
         const setting = categorySettings[selectedIndex];
-        if (setting?.type === 'select' && setting.options) {
+        if (setting?.type === "select" && setting.options) {
           const currentValue = setting.getValue(config) as string;
           const currentIdx = setting.options.indexOf(currentValue);
           const prevIdx = (currentIdx - 1 + setting.options.length) % setting.options.length;
           updateConfig(setting.setValue(config, setting.options[prevIdx]!));
         }
-      } else if (key.name === 'right' || key.name === 'l') {
+      } else if (key.name === "right" || key.name === "l") {
         const setting = categorySettings[selectedIndex];
-        if (setting?.type === 'select' && setting.options) {
+        if (setting?.type === "select" && setting.options) {
           const currentValue = setting.getValue(config) as string;
           const currentIdx = setting.options.indexOf(currentValue);
           const nextIdx = (currentIdx + 1) % setting.options.length;
@@ -370,7 +404,7 @@ export function SettingsView() {
       }
     }
   });
-  
+
   if (isLoading) {
     return (
       <box flexDirection="column" flexGrow={1} justifyContent="center" alignItems="center">
@@ -378,85 +412,87 @@ export function SettingsView() {
       </box>
     );
   }
-  
+
   return (
     <box flexDirection="column" flexGrow={1} padding={1} gap={1}>
       {demoMode && (
         <box flexDirection="row" height={1} paddingLeft={1} gap={2}>
           <text fg={colors.warning}>DEMO MODE</text>
           <text fg={colors.textMuted}>
-            Seed: {seed ?? 'default'} | Preset: {preset ?? 'normal'}
+            Seed: {seed ?? "default"} | Preset: {preset ?? "normal"}
           </text>
         </box>
       )}
       <box flexDirection="row" gap={1} flexGrow={1}>
-        <box 
-          flexDirection="column" 
-          width={20} 
-          border 
-          borderStyle={focusedPane === 'categories' ? 'double' : 'single'}
-          borderColor={focusedPane === 'categories' ? colors.primary : colors.border}
+        <box
+          flexDirection="column"
+          width={20}
+          border
+          borderStyle={focusedPane === "categories" ? "double" : "single"}
+          borderColor={focusedPane === "categories" ? colors.primary : colors.border}
           padding={1}
         >
-          <text fg={colors.textMuted} marginBottom={1}>CATEGORIES</text>
+          <text fg={colors.textMuted} marginBottom={1}>
+            CATEGORIES
+          </text>
           {CATEGORIES.map((cat) => {
             const isActive = cat.id === selectedCategory;
-            const isFocusedActive = isActive && focusedPane === 'categories';
+            const isFocusedActive = isActive && focusedPane === "categories";
             return (
               <box key={cat.id} height={1}>
-                <text 
+                <text
                   fg={isFocusedActive ? colors.background : isActive ? colors.primary : colors.text}
                   {...(isFocusedActive ? { bg: colors.primary } : {})}
                 >
-                  {isActive ? '▸ ' : '  '}{cat.label}
+                  {isActive ? "▸ " : "  "}
+                  {cat.label}
                 </text>
               </box>
             );
           })}
         </box>
-        
-        <box 
-          flexDirection="column" 
+
+        <box
+          flexDirection="column"
           flexGrow={1}
-          border 
-          borderStyle={focusedPane === 'settings' ? 'double' : 'single'}
-          borderColor={focusedPane === 'settings' ? colors.primary : colors.border}
+          border
+          borderStyle={focusedPane === "settings" ? "double" : "single"}
+          borderColor={focusedPane === "settings" ? colors.primary : colors.border}
           padding={1}
         >
           <text fg={colors.textMuted} marginBottom={1}>
-            {CATEGORIES.find(c => c.id === selectedCategory)?.label.toUpperCase()}
+            {CATEGORIES.find((c) => c.id === selectedCategory)?.label.toUpperCase()}
           </text>
-          
+
           {categorySettings.map((setting, idx) => {
-            const isSelected = idx === selectedIndex && focusedPane === 'settings';
+            const isSelected = idx === selectedIndex && focusedPane === "settings";
             const value = setting.getValue(config);
-            
+
             return (
-               <box 
-                 key={setting.key} 
-                 flexDirection="row" 
-                 justifyContent="space-between" 
-                 height={2}
-                 paddingX={1}
-                 {...(isSelected ? { backgroundColor: colors.primary } : {})}
-               >
-                <text fg={isSelected ? colors.background : colors.text}>
-                  {setting.label}
-                </text>
+              <box
+                key={setting.key}
+                flexDirection="row"
+                justifyContent="space-between"
+                height={2}
+                paddingX={1}
+                {...(isSelected ? { backgroundColor: colors.primary } : {})}
+              >
+                <text fg={isSelected ? colors.background : colors.text}>{setting.label}</text>
                 <text fg={isSelected ? colors.background : colors.textMuted}>
-                  {setting.type === 'toggle' 
-                    ? (value ? '● ON' : '○ OFF')
-                    : setting.type === 'select'
+                  {setting.type === "toggle"
+                    ? value
+                      ? "● ON"
+                      : "○ OFF"
+                    : setting.type === "select"
                       ? `◂ ${value} ▸`
-                      : String(value)
-                  }
+                      : String(value)}
                 </text>
               </box>
             );
           })}
         </box>
       </box>
-      
+
       <box flexDirection="row" height={1} paddingLeft={1}>
         <text fg={colors.textSubtle}>{helpText}</text>
       </box>