@tokentop/ttop 0.2.2

package/src/tui/components/Sparkline.tsx

@@ -0,0 +1,180 @@
+import { useColors } from '../contexts/ThemeContext.tsx';
+import type { SparklineStyle, SparklineOrientation } from '@/config/schema.ts';
+
+export interface SparklineProps {
+  data: number[];
+  width?: number;
+  label?: string;
+  fixedMax?: number;
+  thresholds?: { warning: number; error: number };
+  style?: SparklineStyle;
+  orientation?: SparklineOrientation;
+  showBaseline?: boolean;
+}
+
+const BLOCK_CHARS_UP = ['▁', '▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+const BLOCK_CHARS_DOWN = ['▔', '▔', '🬂', '🬎', '▀', '🬩', '🬷', '🮂', '█'];
+
+function valueToBraille(
+  left: number, 
+  right: number, 
+  orientation: SparklineOrientation,
+  includeBaseline: boolean
+): string {
+  const leftDots = Math.min(4, Math.max(0, Math.floor(left)));
+  const rightDots = Math.min(4, Math.max(0, Math.floor(right)));
+  
+  let code = 0x2800;
+  
+  if (orientation === 'up') {
+    // Fill from bottom to top: dot7, dot3, dot2, dot1 (left) / dot8, dot6, dot5, dot4 (right)
+    const leftBitsUp = [0x40, 0x04, 0x02, 0x01];
+    const rightBitsUp = [0x80, 0x20, 0x10, 0x08];
+    
+    if (includeBaseline) {
+      code |= 0x40 | 0x80; // Always include bottom row when baseline is on
+    }
+    
+    for (let i = 0; i < leftDots; i++) {
+      code |= leftBitsUp[i]!;
+    }
+    for (let i = 0; i < rightDots; i++) {
+      code |= rightBitsUp[i]!;
+    }
+  } else {
+    // Fill from top to bottom: dot1, dot2, dot3, dot7 (left) / dot4, dot5, dot6, dot8 (right)
+    const leftBitsDown = [0x01, 0x02, 0x04, 0x40];
+    const rightBitsDown = [0x08, 0x10, 0x20, 0x80];
+    
+    if (includeBaseline) {
+      code |= 0x01 | 0x08; // Always include top row when baseline is on
+    }
+    
+    for (let i = 0; i < leftDots; i++) {
+      code |= leftBitsDown[i]!;
+    }
+    for (let i = 0; i < rightDots; i++) {
+      code |= rightBitsDown[i]!;
+    }
+  }
+  
+  return String.fromCharCode(code);
+}
+
+function getBaselineBraille(orientation: SparklineOrientation): string {
+  return orientation === 'up' ? '⣀' : '⠉';
+}
+
+function getValueColor(
+  rawValue: number,
+  thresholds: { warning: number; error: number },
+  colors: { success: string; warning: string; error: string; textSubtle: string }
+): string {
+  if (rawValue <= 0) return colors.textSubtle;
+  if (rawValue >= thresholds.error) return colors.error;
+  if (rawValue >= thresholds.warning) return colors.warning;
+  return colors.success;
+}
+
+export function Sparkline({ 
+  data, 
+  width = 60, 
+  label, 
+  fixedMax = 2000,
+  thresholds = { warning: 800, error: 2000 },
+  style = 'braille',
+  orientation = 'up',
+  showBaseline = true,
+}: SparklineProps) {
+  const colors = useColors();
+  
+  const peak = Math.max(...data, 0);
+  const sqrtMax = Math.sqrt(fixedMax);
+  
+  const normalizeValue = (v: number): number => {
+    if (v <= 0) return 0;
+    const sqrtValue = Math.sqrt(Math.min(v, fixedMax));
+    return (sqrtValue / sqrtMax) * (style === 'braille' ? 4 : 8);
+  };
+  
+  const peakLabel = peak >= 1000 ? `${(peak/1000).toFixed(1)}k` : `${Math.round(peak)}`;
+
+  if (style === 'braille') {
+    const effectiveWidth = width * 2;
+    const displayData = data.slice(-effectiveWidth);
+    const charCount = Math.ceil(displayData.length / 2);
+    const padding = width - charCount;
+    
+    const groups: { color: string; chars: string }[] = [];
+    const baselineChar = getBaselineBraille(orientation);
+    
+    for (let i = 0; i < displayData.length; i += 2) {
+      const leftRaw = displayData[i] ?? 0;
+      const rightRaw = displayData[i + 1] ?? leftRaw;
+      
+      const leftNorm = normalizeValue(leftRaw);
+      const rightNorm = normalizeValue(rightRaw);
+      
+      const dominantRaw = Math.max(leftRaw, rightRaw);
+      const color = getValueColor(dominantRaw, thresholds, colors);
+      
+      let char: string;
+      if (dominantRaw <= 0) {
+        char = showBaseline ? baselineChar : ' ';
+      } else {
+        char = valueToBraille(leftNorm, rightNorm, orientation, showBaseline);
+      }
+      
+      if (groups.length > 0 && groups[groups.length - 1]!.color === color) {
+        groups[groups.length - 1]!.chars += char;
+      } else {
+        groups.push({ color, chars: char });
+      }
+    }
+    
+    return (
+      <box flexDirection="column">
+        <text>
+          {padding > 0 && <span>{' '.repeat(padding)}</span>}
+          {groups.map((group, i) => (
+            <span key={i} fg={group.color}>{group.chars}</span>
+          ))}
+        </text>
+        {label && <text fg={colors.textMuted}>{label} peak:{peakLabel}</text>}
+      </box>
+    );
+  }
+  
+  const blockChars = orientation === 'up' ? BLOCK_CHARS_UP : BLOCK_CHARS_DOWN;
+  const baselineChar = showBaseline ? (orientation === 'up' ? '▁' : '▔') : '·';
+  
+  const displayData = data.slice(-width);
+  const padding = width - displayData.length;
+  
+  const groups: { color: string; chars: string }[] = [];
+  for (let i = 0; i < displayData.length; i++) {
+    const rawValue = displayData[i] ?? 0;
+    const v = Math.round(normalizeValue(rawValue));
+    
+    const color = getValueColor(rawValue, thresholds, colors);
+    const char = rawValue <= 0 ? baselineChar : (blockChars[v] ?? blockChars[1] ?? '▁');
+    
+    if (groups.length > 0 && groups[groups.length - 1]!.color === color) {
+      groups[groups.length - 1]!.chars += char;
+    } else {
+      groups.push({ color, chars: char });
+    }
+  }
+  
+  return (
+    <box flexDirection="column">
+      <text>
+        {padding > 0 && <span>{' '.repeat(padding)}</span>}
+        {groups.map((group, i) => (
+          <span key={i} fg={group.color}>{group.chars}</span>
+        ))}
+      </text>
+      {label && <text fg={colors.textMuted}>{label} peak:{peakLabel}</text>}
+    </box>
+  );
+}

package/src/tui/components/Spinner.tsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const FRAME_INTERVAL = 80;
+
+interface SpinnerProps {
+  color?: string;
+}
+
+export function Spinner({ color }: SpinnerProps) {
+  const [frameIndex, setFrameIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFrameIndex((i) => (i + 1) % SPINNER_FRAMES.length);
+    }, FRAME_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return <text {...(color ? { fg: color } : {})}>{SPINNER_FRAMES[frameIndex]}</text>;
+}
+
+export function useSpinner(): string {
+  const [frameIndex, setFrameIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFrameIndex((i) => (i + 1) % SPINNER_FRAMES.length);
+    }, FRAME_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return SPINNER_FRAMES[frameIndex] ?? '⠋';
+}

package/src/tui/components/StatusBar.tsx

@@ -0,0 +1,96 @@
+import { useState, useEffect } from 'react';
+import { useTerminalDimensions } from '@opentui/react';
+import { useColors } from '../contexts/ThemeContext.tsx';
+import { useTimeWindow } from '../contexts/TimeWindowContext.tsx';
+
+interface StatusBarProps {
+  lastRefresh?: number;
+  nextRefresh?: number;
+  demoMode?: boolean;
+}
+
+export function StatusBar({ lastRefresh, nextRefresh, demoMode = false }: StatusBarProps) {
+  const colors = useColors();
+  const { width: termWidth } = useTerminalDimensions();
+  const { window: timeWindow } = useTimeWindow();
+  const [, setTick] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTick((t) => t + 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const isNarrow = termWidth < 100;
+
+  const lastRefreshText = lastRefresh
+    ? (isNarrow ? formatTimeShort(lastRefresh) : formatTime(lastRefresh))
+    : '';
+
+  const nextRefreshText = nextRefresh
+    ? `${formatCountdown(nextRefresh)}`
+    : '';
+
+  const timeLabel = timeWindow.toUpperCase();
+
+  return (
+     <box
+       flexDirection="row"
+       justifyContent="space-between"
+       paddingX={1}
+       backgroundColor={colors.foreground}
+       flexShrink={0}
+       height={1}
+       overflow="hidden"
+     >
+      <box flexDirection="row" gap={2} overflow="hidden">
+        <text fg={colors.textSubtle}>1-4 views</text>
+        <text fg={colors.text}>
+          <span fg={colors.textSubtle}>t</span> <span fg={colors.info}>{timeLabel}</span>
+        </text>
+        <text fg={colors.textSubtle}>, settings</text>
+        <text fg={colors.textSubtle}>: cmd</text>
+        <text fg={colors.textSubtle}>? help</text>
+      </box>
+      <box flexDirection="row" gap={2} overflow="hidden">
+        {demoMode && <text fg={colors.warning}>{isNarrow ? 'DEMO' : 'DEMO MODE'}</text>}
+        {lastRefreshText && <text fg={colors.textSubtle}>{lastRefreshText}</text>}
+        {nextRefreshText && <text fg={colors.textSubtle}>{nextRefreshText}</text>}
+      </box>
+    </box>
+  );
+}
+
+function formatTimeShort(timestamp: number): string {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+}
+
+function formatTime(timestamp: number): string {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  });
+}
+
+function formatCountdown(timestamp: number): string {
+  const now = Date.now();
+  const diff = timestamp - now;
+
+  if (diff <= 0) return 'now';
+
+  const seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return `${seconds}s`;
+
+  const minutes = Math.floor(seconds / 60);
+  return `${minutes}m ${seconds % 60}s`;
+}

package/src/tui/components/ThemePicker.tsx

@@ -0,0 +1,234 @@
+import { useState, useMemo, useEffect } from 'react';
+import { useKeyboard } from '@opentui/react';
+import { useColors } from '../contexts/ThemeContext.tsx';
+import type { ThemePlugin, ColorSchemePreference } from '@/plugins/types/theme.ts';
+
+interface ThemePickerProps {
+  themes: ThemePlugin[];
+  currentThemeId: string;
+  currentScheme: ColorSchemePreference;
+  onSelect: (themeId: string, scheme: ColorSchemePreference) => void;
+  onPreview: (theme: ThemePlugin | null) => void;
+  onCancel: () => void;
+}
+
+type ThemeItem = 
+  | { type: 'header'; label: string }
+  | { type: 'theme'; theme: ThemePlugin };
+
+export function ThemePicker({
+  themes,
+  currentThemeId,
+  currentScheme,
+  onSelect,
+  onPreview,
+  onCancel,
+}: ThemePickerProps) {
+  const colors = useColors();
+  const [scheme, setScheme] = useState<ColorSchemePreference>(currentScheme);
+  const [focusPane, setFocusPane] = useState<'scheme' | 'list'>('list');
+  const [focusedIndex, setFocusedIndex] = useState(0);
+
+  // Filter and group themes based on selected scheme
+  const listItems = useMemo<ThemeItem[]>(() => {
+    const darkThemes = themes.filter(t => t.colorScheme === 'dark');
+    const lightThemes = themes.filter(t => t.colorScheme === 'light');
+
+    if (scheme === 'dark') {
+      return darkThemes.map(t => ({ type: 'theme', theme: t }));
+    }
+    if (scheme === 'light') {
+      return lightThemes.map(t => ({ type: 'theme', theme: t }));
+    }
+    // Auto: Show both with headers
+    return [
+      { type: 'header', label: 'DARK' },
+      ...darkThemes.map(t => ({ type: 'theme', theme: t } as const)),
+      { type: 'header', label: 'LIGHT' },
+      ...lightThemes.map(t => ({ type: 'theme', theme: t } as const)),
+    ];
+  }, [themes, scheme]);
+
+  // Find initial index for current theme
+  useEffect(() => {
+    const idx = listItems.findIndex(item => item.type === 'theme' && item.theme.id === currentThemeId);
+    if (idx >= 0) {
+      setFocusedIndex(idx);
+    } else {
+      // If not found (e.g. switched scheme and current theme is hidden), select first theme
+      const firstThemeIdx = listItems.findIndex(item => item.type === 'theme');
+      if (firstThemeIdx >= 0) setFocusedIndex(firstThemeIdx);
+    }
+  }, [currentThemeId, listItems]);
+
+  // Scroll calculation
+  const visibleCount = 10;
+  const scrollOffset = useMemo(() => {
+    if (listItems.length <= visibleCount) return 0;
+    if (focusedIndex < visibleCount - 1) return 0;
+    const maxOffset = listItems.length - visibleCount;
+    return Math.min(focusedIndex - visibleCount + 2, maxOffset);
+  }, [focusedIndex, listItems.length, visibleCount]);
+
+  const visibleItems = listItems.slice(scrollOffset, scrollOffset + visibleCount);
+  const hasMoreAbove = scrollOffset > 0;
+  const hasMoreBelow = scrollOffset + visibleCount < listItems.length;
+
+  useKeyboard((key) => {
+    if (key.name === 'escape') {
+      onCancel();
+      return;
+    }
+
+    if (key.name === 'tab') {
+      setFocusPane(p => p === 'scheme' ? 'list' : 'scheme');
+      return;
+    }
+
+    if (focusPane === 'scheme') {
+      if (key.name === 'left' || key.name === 'h' || key.name === 'right' || key.name === 'l') {
+        const schemes: ColorSchemePreference[] = ['auto', 'dark', 'light'];
+        const currentIdx = schemes.indexOf(scheme);
+        const direction = (key.name === 'left' || key.name === 'h') ? -1 : 1;
+        const nextIdx = (currentIdx + direction + schemes.length) % schemes.length;
+        const newScheme = schemes[nextIdx]!;
+        setScheme(newScheme);
+        
+        // Preview first theme of new scheme
+        const darkThemes = themes.filter(t => t.colorScheme === 'dark');
+        const lightThemes = themes.filter(t => t.colorScheme === 'light');
+        let nextTheme: ThemePlugin | undefined;
+        
+        if (newScheme === 'dark') nextTheme = darkThemes[0];
+        else if (newScheme === 'light') nextTheme = lightThemes[0];
+        else nextTheme = darkThemes[0]; // Auto defaults to dark usually
+        
+        if (nextTheme) {
+           onPreview(nextTheme);
+        }
+      } else if (key.name === 'down' || key.name === 'j') {
+        setFocusPane('list');
+      }
+      return;
+    }
+
+    if (focusPane === 'list') {
+      if (key.name === 'up' || key.name === 'k') {
+        let nextIdx = focusedIndex - 1;
+        // Skip headers going up
+        while (nextIdx >= 0 && listItems[nextIdx]?.type === 'header') {
+          nextIdx--;
+        }
+        if (nextIdx >= 0) {
+          setFocusedIndex(nextIdx);
+          const item = listItems[nextIdx];
+          if (item?.type === 'theme') onPreview(item.theme);
+        } else {
+          setFocusPane('scheme');
+        }
+      } else if (key.name === 'down' || key.name === 'j') {
+        let nextIdx = focusedIndex + 1;
+        // Skip headers going down
+        while (nextIdx < listItems.length && listItems[nextIdx]?.type === 'header') {
+          nextIdx++;
+        }
+        if (nextIdx < listItems.length) {
+          setFocusedIndex(nextIdx);
+          const item = listItems[nextIdx];
+          if (item?.type === 'theme') onPreview(item.theme);
+        }
+      } else if (key.name === 'return') {
+        const item = listItems[focusedIndex];
+        if (item?.type === 'theme') {
+          onSelect(item.theme.id, scheme);
+        }
+      }
+    }
+  });
+
+  return (
+    <box flexDirection="column" flexGrow={1} padding={1}>
+      {/* Section 1: Scheme Selector */}
+      <box flexDirection="row" justifyContent="center" marginBottom={1} height={1}>
+        {(['auto', 'dark', 'light'] as const).map((s) => {
+          const isActive = scheme === s;
+          const isFocused = focusPane === 'scheme';
+          return (
+            <box key={s} marginRight={1}>
+              <text
+                {...(isActive ? { bg: colors.primary } : {})}
+                fg={isActive ? colors.background : isFocused ? colors.text : colors.textMuted}
+              >
+                {isFocused && isActive ? '▸ ' : '  '}
+                {s.charAt(0).toUpperCase() + s.slice(1)}
+                {isFocused && isActive ? ' ◂' : '  '}
+              </text>
+            </box>
+          );
+        })}
+      </box>
+
+      {/* Section 2: Theme List */}
+      <box flexDirection="column" flexGrow={1} overflow="hidden">
+        <box flexDirection="row" justifyContent="space-between" marginBottom={0} height={1}>
+          <text fg={colors.textMuted}>THEMES</text>
+          {(hasMoreAbove || hasMoreBelow) && (
+            <text fg={colors.textSubtle}>
+              {hasMoreAbove ? '▲' : ' '}{hasMoreBelow ? '▼' : ' '}
+            </text>
+          )}
+        </box>
+
+        {visibleItems.map((item, idx) => {
+          const realIndex = scrollOffset + idx;
+          const isFocused = realIndex === focusedIndex && focusPane === 'list';
+          
+          if (item.type === 'header') {
+            return (
+              <box key={`header-${realIndex}`} height={1} marginTop={1} marginBottom={0}>
+                <text fg={colors.textSubtle}><strong>{item.label}</strong></text>
+              </box>
+            );
+          }
+
+          const theme = item.theme;
+          const isActive = theme.id === currentThemeId;
+
+          return (
+            <box
+              key={theme.id}
+              flexDirection="row"
+              height={1}
+              paddingX={1}
+              {...(isFocused ? { backgroundColor: colors.primary } : {})}
+            >
+              <text fg={isFocused ? colors.background : colors.primary}>
+                {isFocused ? '▸ ' : '  '}
+              </text>
+              
+              <box width={20}>
+                <text fg={isFocused ? colors.background : colors.text}>
+                  {theme.name}
+                </text>
+              </box>
+
+              <box flexDirection="row" gap={1}>
+                <text bg={theme.colors.background}>  </text>
+                <text bg={theme.colors.primary}>  </text>
+                <text bg={theme.colors.secondary}>  </text>
+                <text bg={theme.colors.success}>  </text>
+                <text bg={theme.colors.error}>  </text>
+              </box>
+
+              {isActive && (
+                <box marginLeft={2}>
+                  <text fg={isFocused ? colors.background : colors.textMuted}>(active)</text>
+                </box>
+              )}
+            </box>
+          );
+        })}
+      </box>
+    </box>
+  );
+}

package/src/tui/components/Toast.tsx

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+import { useColors } from '../contexts/ThemeContext.tsx';
+
+interface ToastProps {
+  message: string;
+  duration?: number;
+  onDismiss: () => void;
+  type?: 'info' | 'success' | 'warning' | 'error';
+}
+
+export function Toast({ message, duration = 2000, onDismiss, type = 'success' }: ToastProps) {
+  const colors = useColors();
+
+  useEffect(() => {
+    const timer = setTimeout(onDismiss, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onDismiss]);
+
+  const accentColor = {
+    info: colors.info,
+    success: colors.success,
+    warning: colors.warning,
+    error: colors.error,
+  }[type];
+
+  return (
+    <box
+      position="absolute"
+      top={3}
+      right={2}
+      flexDirection="row"
+      backgroundColor={colors.foreground}
+      borderStyle="rounded"
+      borderColor={colors.border}
+    >
+      <box width={1} backgroundColor={accentColor} />
+      <box paddingLeft={1} paddingRight={2}>
+        <text fg={colors.text}>{message}</text>
+      </box>
+    </box>
+  );
+}
+
+interface ToastState {
+  message: string;
+  type: 'info' | 'success' | 'warning' | 'error';
+}
+
+export function useToast() {
+  const [toast, setToast] = useState<ToastState | null>(null);
+
+  const showToast = (message: string, type: 'info' | 'success' | 'warning' | 'error' = 'success') => {
+    setToast({ message, type });
+  };
+
+  const dismissToast = () => {
+    setToast(null);
+  };
+
+  return { toast, showToast, dismissToast };
+}

package/src/tui/components/UsageGauge.tsx

@@ -0,0 +1,80 @@
+import { useColors } from '../contexts/ThemeContext.tsx';
+
+interface UsageGaugeProps {
+  label: string;
+  usedPercent: number | null;
+  windowLabel?: string;
+  resetsAt?: number;
+  width?: number;
+  color?: string;
+}
+
+export function UsageGauge({
+  label,
+  usedPercent,
+  windowLabel,
+  resetsAt,
+  width = 40,
+  color,
+}: UsageGaugeProps) {
+  const colors = useColors();
+  const providerColor = color ?? colors.primary;
+
+  const percent = usedPercent ?? 0;
+  const barWidth = Math.max(0, width - 10);
+  const filledWidth = Math.round((percent / 100) * barWidth);
+  const emptyWidth = barWidth - filledWidth;
+
+  const fillColor = percent >= 90 ? colors.gaugeDanger :
+                    percent >= 70 ? colors.gaugeWarning :
+                    providerColor;
+
+  const filledBar = '█'.repeat(filledWidth);
+  const emptyBar = '·'.repeat(emptyWidth);
+
+  const resetText = resetsAt ? formatResetTime(resetsAt) : '';
+  const showWindowLabel = windowLabel && !label.toLowerCase().includes(windowLabel.toLowerCase());
+
+  return (
+    <box flexDirection="column" width={width}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={colors.textMuted}>{label}</text>
+        <text fg={colors.text}>
+          {usedPercent !== null ? `${Math.round(percent)}%` : '--'}
+        </text>
+      </box>
+      <box flexDirection="row">
+        <text>
+          <span fg={fillColor}>{filledBar}</span>
+          <span fg={colors.gaugeBackground}>{emptyBar}</span>
+        </text>
+      </box>
+      {(showWindowLabel || resetText) && (
+        <text fg={colors.textMuted}>
+          {showWindowLabel ? windowLabel : ''}
+          {showWindowLabel && resetText ? ' · ' : ''}
+          {resetText}
+        </text>
+      )}
+    </box>
+  );
+}
+
+function formatResetTime(timestamp: number): string {
+  const now = Date.now();
+  const diff = timestamp - now;
+
+  if (diff <= 0) return 'resets soon';
+
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) {
+    return `resets in ${days}d ${hours % 24}h`;
+  }
+  if (hours > 0) {
+    return `resets in ${hours}h ${minutes % 60}m`;
+  }
+  return `resets in ${minutes}m`;
+}

package/src/tui/components/index.ts

@@ -0,0 +1,5 @@
+export { Header } from './Header.tsx';
+export { StatusBar } from './StatusBar.tsx';
+export { UsageGauge } from './UsageGauge.tsx';
+export { ProviderCard } from './ProviderCard.tsx';
+export { DebugConsole } from './DebugConsole.tsx';