bmad-elsabro 1.0.0

package/renderer/components/TokenMonitor.tsx

@@ -0,0 +1,331 @@
+/**
+ * TokenMonitor Component
+ *
+ * Displays real-time token usage statistics in a compact, always-visible widget.
+ * Shows current session tokens, mode, and provides quick access to mode switching.
+ *
+ * Features:
+ * - Real-time token counter
+ * - Current mode indicator with color coding
+ * - Mode switching dropdown
+ * - Cache hit statistics
+ * - Budget alerts
+ * - Expandable details panel
+ * - Dark/light theme support
+ *
+ * @module renderer/components/TokenMonitor
+ */
+
+import React, { useState } from 'react';
+import { useTokenTracking, TokenMode } from '../hooks/useTokenTracking';
+
+/**
+ * Props for TokenMonitor component
+ */
+export interface TokenMonitorProps {
+  /**
+   * Position of the monitor on screen
+   * @default 'bottom-right'
+   */
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+  /**
+   * Whether to show in compact mode
+   * @default false
+   */
+  compact?: boolean;
+
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+}
+
+/**
+ * Format number with thousand separators
+ */
+const formatNumber = (num: number): string => {
+  return num.toLocaleString('en-US');
+};
+
+/**
+ * Get position classes for widget placement
+ */
+const getPositionClasses = (position: string): string => {
+  switch (position) {
+    case 'top-right':
+      return 'top-4 right-4';
+    case 'top-left':
+      return 'top-4 left-4';
+    case 'bottom-right':
+      return 'bottom-4 right-4';
+    case 'bottom-left':
+      return 'bottom-4 left-4';
+    default:
+      return 'bottom-4 right-4';
+  }
+};
+
+/**
+ * TokenMonitor Component
+ *
+ * Real-time token usage display widget
+ *
+ * @example
+ * ```tsx
+ * <TokenMonitor position="bottom-right" />
+ * ```
+ */
+const TokenMonitor: React.FC<TokenMonitorProps> = ({
+  position = 'bottom-right',
+  compact = false,
+  className = '',
+}) => {
+  const {
+    mode,
+    modeConfig,
+    sessionTokens,
+    cacheStats,
+    latestAlert,
+    isLoading,
+    setMode,
+  } = useTokenTracking();
+
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  /**
+   * Handle mode change
+   */
+  const handleModeChange = async (newMode: TokenMode) => {
+    await setMode(newMode);
+    setIsDropdownOpen(false);
+  };
+
+  /**
+   * Get mode color
+   */
+  const getModeColor = (): string => {
+    if (!modeConfig) return 'bg-blue-500';
+
+    switch (mode) {
+      case 'ultra-save':
+        return 'bg-green-500';
+      case 'balanced':
+        return 'bg-blue-500';
+      case 'power':
+        return 'bg-orange-500';
+      default:
+        return 'bg-blue-500';
+    }
+  };
+
+  /**
+   * Get mode text color
+   */
+  const getModeTextColor = (): string => {
+    switch (mode) {
+      case 'ultra-save':
+        return 'text-green-600 dark:text-green-400';
+      case 'balanced':
+        return 'text-blue-600 dark:text-blue-400';
+      case 'power':
+        return 'text-orange-600 dark:text-orange-400';
+      default:
+        return 'text-blue-600 dark:text-blue-400';
+    }
+  };
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`fixed ${getPositionClasses(position)} z-50 ${className}`}
+      role="complementary"
+      aria-label="Token usage monitor"
+    >
+      {/* Compact View */}
+      <div
+        className={`
+          bg-white dark:bg-gray-800
+          rounded-lg shadow-lg border border-gray-200 dark:border-gray-700
+          transition-all duration-200
+          ${isExpanded ? 'rounded-b-none' : ''}
+        `}
+      >
+        {/* Main Display */}
+        <div
+          className="px-4 py-3 cursor-pointer select-none"
+          onClick={() => setIsExpanded(!isExpanded)}
+          role="button"
+          aria-expanded={isExpanded}
+          aria-label="Toggle token monitor details"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              setIsExpanded(!isExpanded);
+            }
+          }}
+        >
+          <div className="flex items-center gap-3">
+            {/* Mode Indicator */}
+            {!compact && modeConfig && (
+              <div className="relative">
+                <button
+                  className={`
+                    w-8 h-8 rounded-full ${getModeColor()}
+                    flex items-center justify-center text-white text-sm font-bold
+                    hover:opacity-80 transition-opacity
+                  `}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsDropdownOpen(!isDropdownOpen);
+                  }}
+                  title={`${modeConfig.displayName} mode - Click to change`}
+                  aria-label={`Current mode: ${modeConfig.displayName}. Click to change mode.`}
+                >
+                  {modeConfig.icon}
+                </button>
+
+                {/* Mode Dropdown */}
+                {isDropdownOpen && (
+                  <div
+                    className="absolute top-full mt-2 right-0 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1 min-w-[200px] z-10"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <div className="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                      Token Mode
+                    </div>
+                    {(['ultra-save', 'balanced', 'power'] as TokenMode[]).map((m) => {
+                      const isActive = m === mode;
+                      const modeInfo = {
+                        'ultra-save': { icon: '🔋', name: 'Ultra-Save', desc: 'Max efficiency' },
+                        'balanced': { icon: '⚖️', name: 'Balanced', desc: 'Optimal balance' },
+                        'power': { icon: '⚡', name: 'Power', desc: 'Max performance' },
+                      }[m];
+
+                      return (
+                        <button
+                          key={m}
+                          className={`
+                            w-full px-3 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700
+                            transition-colors flex items-center gap-2
+                            ${isActive ? 'bg-gray-50 dark:bg-gray-700' : ''}
+                          `}
+                          onClick={() => handleModeChange(m)}
+                        >
+                          <span className="text-lg">{modeInfo.icon}</span>
+                          <div className="flex-1">
+                            <div className="text-sm font-medium text-gray-900 dark:text-white">
+                              {modeInfo.name}
+                              {isActive && <span className="ml-2 text-xs text-gray-500">✓</span>}
+                            </div>
+                            <div className="text-xs text-gray-500 dark:text-gray-400">
+                              {modeInfo.desc}
+                            </div>
+                          </div>
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Token Count */}
+            <div className="flex-1">
+              <div className="text-2xl font-bold text-gray-900 dark:text-white tabular-nums">
+                {formatNumber(sessionTokens)}
+              </div>
+              <div className="text-xs text-gray-500 dark:text-gray-400">
+                tokens {modeConfig && `· ${modeConfig.displayName}`}
+              </div>
+            </div>
+
+            {/* Expand Icon */}
+            <div className="text-gray-400">
+              <svg
+                className={`w-5 h-5 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </div>
+          </div>
+
+          {/* Budget Alert */}
+          {latestAlert && (
+            <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
+              <div className={`text-xs ${latestAlert.percentageUsed >= 100 ? 'text-red-600 dark:text-red-400' : 'text-yellow-600 dark:text-yellow-400'}`}>
+                {latestAlert.percentageUsed >= 100 ? '⚠️ Budget exceeded!' : '⚠️ Budget alert!'}
+              </div>
+              <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                {latestAlert.budgetName}: {latestAlert.percentageUsed.toFixed(0)}% used
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Extended Details */}
+        {isExpanded && (
+          <div className="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50">
+            {/* Cache Stats */}
+            {cacheStats && (
+              <div className="space-y-2">
+                <div className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Cache Performance
+                </div>
+                <div className="grid grid-cols-2 gap-2 text-sm">
+                  <div>
+                    <div className="text-gray-600 dark:text-gray-400">Tokens Saved</div>
+                    <div className="font-semibold text-green-600 dark:text-green-400">
+                      {formatNumber(cacheStats.total_tokens_saved)}
+                    </div>
+                  </div>
+                  <div>
+                    <div className="text-gray-600 dark:text-gray-400">Cache Hits</div>
+                    <div className="font-semibold text-gray-900 dark:text-white">
+                      {formatNumber(cacheStats.total_hits)}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Mode Details */}
+            {modeConfig && (
+              <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
+                <div className="text-xs text-gray-600 dark:text-gray-400">
+                  <div className="flex justify-between mb-1">
+                    <span>Max Context:</span>
+                    <span className="font-medium">{formatNumber(modeConfig.maxContextTokens)}</span>
+                  </div>
+                  <div className="flex justify-between mb-1">
+                    <span>Caching:</span>
+                    <span className="font-medium">{modeConfig.enableCaching ? 'Enabled' : 'Disabled'}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>Savings:</span>
+                    <span className={`font-medium ${getModeTextColor()}`}>
+                      {modeConfig.savingsMultiplier < 1
+                        ? `${((1 - modeConfig.savingsMultiplier) * 100).toFixed(0)}% less`
+                        : modeConfig.savingsMultiplier > 1
+                        ? `${((modeConfig.savingsMultiplier - 1) * 100).toFixed(0)}% more`
+                        : 'baseline'}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TokenMonitor;