@tokentop/ttop 0.2.2

package/src/tui/views/SettingsView.tsx

@@ -0,0 +1,465 @@
+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';
+
+type SettingCategory = 'refresh' | 'display' | 'budgets' | 'alerts' | 'notifications' | 'plugins';
+
+interface SettingItem {
+  key: string;
+  label: string;
+  category: SettingCategory;
+  type: 'toggle' | 'select' | 'number';
+  options?: string[];
+  getValue: (config: AppConfig) => string | number | boolean;
+  setValue: (config: AppConfig, value: string | number | boolean) => AppConfig;
+}
+
+const SETTINGS: SettingItem[] = [
+  {
+    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';
+    },
+    setValue: (c, v) => {
+      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',
+    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'],
+    getValue: (c) => c.display.defaultTimeWindow,
+    setValue: (c, v) => ({ ...c, display: { ...c.display, defaultTimeWindow: v as AppConfig['display']['defaultTimeWindow'] } }),
+  },
+  {
+    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'],
+    getValue: (c) => c.display.timeFormat,
+    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'],
+    getValue: (c) => {
+      const b = c.budgets.daily;
+      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 };
+      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'],
+    getValue: (c) => {
+      const b = c.budgets.weekly;
+      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 };
+      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'],
+    getValue: (c) => {
+      const b = c.budgets.monthly;
+      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 };
+      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%'],
+    getValue: (c) => `${c.alerts.warningPercent}%`,
+    setValue: (c, v) => {
+      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%'],
+    getValue: (c) => `${c.alerts.criticalPercent}%`,
+    setValue: (c, v) => {
+      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',
+    getValue: (c) => c.notifications.toastsEnabled,
+    setValue: (c, v) => ({ ...c, notifications: { ...c.notifications, toastsEnabled: v as boolean } }),
+  },
+  {
+    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 } }),
+  },
+];
+
+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' },
+];
+
+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;
+    for (const [fieldKey, field] of Object.entries(plugin.configSchema)) {
+      const settingKey = `${plugin.id}.${fieldKey}`;
+      const label = `${plugin.name} › ${field.description ?? fieldKey}`;
+
+      const getPluginValue = (c: AppConfig): unknown => {
+        const pluginCfg = c.pluginConfig[plugin.id];
+        const raw = pluginCfg?.[fieldKey];
+        return raw ?? field.default;
+      };
+
+      const setPluginValue = (c: AppConfig, value: unknown): AppConfig => ({
+        ...c,
+        pluginConfig: {
+          ...c.pluginConfig,
+          [plugin.id]: {
+            ...(c.pluginConfig[plugin.id] ?? {}),
+            [fieldKey]: value,
+          },
+        },
+      });
+
+      if (field.type === 'boolean') {
+        items.push({
+          key: settingKey,
+          label,
+          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) {
+        items.push({
+          key: settingKey,
+          label,
+          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 ?? '';
+          },
+          setValue: (c, v) => {
+            const opt = field.options?.find((o) => o.label === v);
+            return setPluginValue(c, opt?.value ?? v);
+          },
+        });
+      } else if (field.type === 'number') {
+        items.push({
+          key: settingKey,
+          label,
+          category: 'plugins' as SettingCategory,
+          type: 'number',
+          getValue: (c) => (getPluginValue(c) as number) ?? 0,
+          setValue: (c, v) => setPluginValue(c, v),
+        });
+      } else {
+        items.push({
+          key: settingKey,
+          label,
+          category: 'plugins' as SettingCategory,
+          type: 'select',
+          getValue: (c) => String(getPluginValue(c) ?? ''),
+          setValue: (c, v) => setPluginValue(c, v),
+        });
+      }
+    }
+  }
+  return items;
+}
+
+export function SettingsView() {
+  const colors = useColors();
+  const { showToast } = useToastContext();
+  const { config, isLoading, updateConfig, resetToDefaults, saveNow } = useConfig();
+  const { providers, notifications } = usePlugins();
+  const { demoMode, seed, preset } = useDemoMode();
+  const { width: terminalWidth } = useTerminalDimensions();
+  
+  const [selectedCategory, setSelectedCategory] = useState<SettingCategory>('refresh');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [focusedPane, setFocusedPane] = useState<'categories' | 'settings'>('settings');
+  
+  const pluginSettings = useMemo(() => {
+    const allPlugins = [
+      ...Array.from(providers.values()).map((p) => p.plugin),
+      ...notifications,
+    ];
+    return buildPluginSettings(allPlugins);
+  }, [providers, notifications, config]);
+
+  const allSettings = useMemo(() => [...SETTINGS, ...pluginSettings], [pluginSettings]);
+  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';
+    } else if (terminalWidth >= 80) {
+      return 'Tab: switch    ↑↓: nav    Enter: toggle    ←→: adjust    ^S: save    R: reset';
+    }
+    return 'Tab ↑↓ Enter ←→ ^S:save R:reset';
+  }, [terminalWidth]);
+  
+  const handleSave = useCallback(async () => {
+    try {
+      await saveNow();
+      showToast('Settings saved');
+    } catch {
+      showToast('Failed to save settings', 'error');
+    }
+  }, [saveNow, showToast]);
+  
+  const handleReset = useCallback(() => {
+    resetToDefaults();
+    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') {
+      newConfig = setting.setValue(config, !currentValue);
+    } 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') {
+      handleSave();
+      return;
+    }
+    
+    if (key.shift && key.name === 'r') {
+      handleReset();
+      return;
+    }
+    
+    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') {
+        const nextIdx = Math.min(catIdx + 1, CATEGORIES.length - 1);
+        setSelectedCategory(CATEGORIES[nextIdx]!.id);
+        setSelectedIndex(0);
+      } 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') {
+        toggleCurrentSetting();
+      } else if (key.name === 'left' || key.name === 'h') {
+        const setting = categorySettings[selectedIndex];
+        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') {
+        const setting = categorySettings[selectedIndex];
+        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;
+          updateConfig(setting.setValue(config, setting.options[nextIdx]!));
+        }
+      }
+    }
+  });
+  
+  if (isLoading) {
+    return (
+      <box flexDirection="column" flexGrow={1} justifyContent="center" alignItems="center">
+        <text fg={colors.textMuted}>Loading settings...</text>
+      </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'}
+          </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}
+          padding={1}
+        >
+          <text fg={colors.textMuted} marginBottom={1}>CATEGORIES</text>
+          {CATEGORIES.map((cat) => {
+            const isActive = cat.id === selectedCategory;
+            const isFocusedActive = isActive && focusedPane === 'categories';
+            return (
+              <box key={cat.id} height={1}>
+                <text 
+                  fg={isFocusedActive ? colors.background : isActive ? colors.primary : colors.text}
+                  {...(isFocusedActive ? { bg: colors.primary } : {})}
+                >
+                  {isActive ? '▸ ' : '  '}{cat.label}
+                </text>
+              </box>
+            );
+          })}
+        </box>
+        
+        <box 
+          flexDirection="column" 
+          flexGrow={1}
+          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()}
+          </text>
+          
+          {categorySettings.map((setting, idx) => {
+            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>
+                <text fg={isSelected ? colors.background : colors.textMuted}>
+                  {setting.type === 'toggle' 
+                    ? (value ? '● ON' : '○ OFF')
+                    : setting.type === 'select'
+                      ? `◂ ${value} ▸`
+                      : String(value)
+                  }
+                </text>
+              </box>
+            );
+          })}
+        </box>
+      </box>
+      
+      <box flexDirection="row" height={1} paddingLeft={1}>
+        <text fg={colors.textSubtle}>{helpText}</text>
+      </box>
+    </box>
+  );
+}

package/src/tui/views/index.ts

@@ -0,0 +1,2 @@
+export { Dashboard } from './Dashboard.tsx';
+export { ProjectsView } from './ProjectsView.tsx';

package/src/types/global.d.ts

@@ -0,0 +1,5 @@
+declare global {
+  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
+}
+
+export {};

package/src/types/opentui-test-utils.d.ts

@@ -0,0 +1,18 @@
+declare module '@opentui/react/test-utils' {
+  import type { TestRendererOptions } from '@opentui/core/testing';
+  import type { ReactNode } from 'react';
+
+  export function testRender(
+    node: ReactNode,
+    testRendererOptions: TestRendererOptions
+  ): Promise<{
+    renderer: import('@opentui/core/testing').TestRenderer;
+    mockInput: import('@opentui/core/testing').MockInput;
+    mockMouse: import('@opentui/core/testing').MockMouse;
+    renderOnce: () => Promise<void>;
+    captureCharFrame: () => string;
+    resize: (width: number, height: number) => void;
+  }>;
+}
+
+export {};

package/src/utils/clipboard.ts

@@ -0,0 +1,118 @@
+import { $ } from 'bun';
+import { platform } from 'os';
+
+/**
+ * Custom clipboard implementation with platform-specific fallbacks.
+ *
+ * NOTE: OpenTUI 0.1.76+ has native OSC 52 clipboard support via a private
+ * `Clipboard` class on the renderer (renderer.copyToClipboardOSC52). However,
+ * we keep our own implementation because:
+ *   1. The renderer's clipboard is a private property — not part of the public API.
+ *   2. Our implementation handles tmux/screen DCS passthrough for OSC 52.
+ *   3. We provide platform-specific fallbacks (osascript on macOS, xclip/xsel/
+ *      wl-copy on Linux, PowerShell on Windows) for terminals that don't support
+ *      OSC 52, giving broader cross-platform coverage.
+ *
+ * If OpenTUI exposes a public clipboard API in the future, revisit this.
+ */
+
+/**
+ * Writes text to clipboard via OSC 52 escape sequence.
+ * This allows clipboard operations to work over SSH by having
+ * the terminal emulator handle the clipboard locally.
+ */
+function writeOsc52(text: string): void {
+  if (!process.stdout.isTTY) return;
+  const base64 = Buffer.from(text).toString('base64');
+  const osc52 = `\x1b]52;c;${base64}\x07`;
+  // tmux and screen require DCS passthrough wrapping
+  const passthrough = process.env['TMUX'] || process.env['STY'];
+  const sequence = passthrough ? `\x1bPtmux;\x1b${osc52}\x1b\\` : osc52;
+  process.stdout.write(sequence);
+}
+
+let copyMethod: ((text: string) => Promise<void>) | null = null;
+
+function getCopyMethod(): (text: string) => Promise<void> {
+  if (copyMethod) return copyMethod;
+
+  const os = platform();
+
+  if (os === 'darwin' && Bun.which('osascript')) {
+    copyMethod = async (text: string) => {
+      const escaped = text.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+      await $`osascript -e 'set the clipboard to "${escaped}"'`.nothrow().quiet();
+    };
+    return copyMethod;
+  }
+
+  if (os === 'linux') {
+    if (process.env['WAYLAND_DISPLAY'] && Bun.which('wl-copy')) {
+      copyMethod = async (text: string) => {
+        const proc = Bun.spawn(['wl-copy'], { stdin: 'pipe', stdout: 'ignore', stderr: 'ignore' });
+        proc.stdin.write(text);
+        proc.stdin.end();
+        await proc.exited.catch(() => {});
+      };
+      return copyMethod;
+    }
+    if (Bun.which('xclip')) {
+      copyMethod = async (text: string) => {
+        const proc = Bun.spawn(['xclip', '-selection', 'clipboard'], {
+          stdin: 'pipe',
+          stdout: 'ignore',
+          stderr: 'ignore',
+        });
+        proc.stdin.write(text);
+        proc.stdin.end();
+        await proc.exited.catch(() => {});
+      };
+      return copyMethod;
+    }
+    if (Bun.which('xsel')) {
+      copyMethod = async (text: string) => {
+        const proc = Bun.spawn(['xsel', '--clipboard', '--input'], {
+          stdin: 'pipe',
+          stdout: 'ignore',
+          stderr: 'ignore',
+        });
+        proc.stdin.write(text);
+        proc.stdin.end();
+        await proc.exited.catch(() => {});
+      };
+      return copyMethod;
+    }
+  }
+
+  if (os === 'win32') {
+    copyMethod = async (text: string) => {
+      const proc = Bun.spawn(
+        [
+          'powershell.exe',
+          '-NonInteractive',
+          '-NoProfile',
+          '-Command',
+          '[Console]::InputEncoding = [System.Text.Encoding]::UTF8; Set-Clipboard -Value ([Console]::In.ReadToEnd())',
+        ],
+        {
+          stdin: 'pipe',
+          stdout: 'ignore',
+          stderr: 'ignore',
+        }
+      );
+      proc.stdin.write(text);
+      proc.stdin.end();
+      await proc.exited.catch(() => {});
+    };
+    return copyMethod;
+  }
+
+  // Fallback - OSC52 only
+  copyMethod = async () => {};
+  return copyMethod;
+}
+
+export async function copyToClipboard(text: string): Promise<void> {
+  writeOsc52(text);
+  await getCopyMethod()(text);
+}