mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

376
apps/website/components/dev/DebugModeToggle.tsx
View File

@@ -1,376 +0,0 @@
'use client';
import { useState, useEffect } from 'react';
import { Bug, X, Settings, Shield, Activity } from 'lucide-react';
import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
import { getGlobalApiLogger } from '@/lib/infrastructure/ApiRequestLogger';
import type { GlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
import type { ApiRequestLogger } from '@/lib/infrastructure/ApiRequestLogger';
// Extend Window interface for debug globals
declare global {
interface Window {
__GRIDPILOT_FETCH_LOGGED__?: boolean;
__GRIDPILOT_GLOBAL_HANDLER__?: GlobalErrorHandler;
__GRIDPILOT_API_LOGGER__?: ApiRequestLogger;
__GRIDPILOT_REACT_ERRORS__?: Array<{ error: unknown; componentStack?: string }>;
}
}
interface DebugModeToggleProps {
/**
* Whether to show the toggle (auto-detected from environment)
*/
show?: boolean;
}
/**
* Debug Mode Toggle Component
* Provides a floating interface to control debug features and view real-time metrics
*/
export function DebugModeToggle({ show }: DebugModeToggleProps) {
const [isOpen, setIsOpen] = useState(false);
const [debugEnabled, setDebugEnabled] = useState(false);
const [metrics, setMetrics] = useState({
errors: 0,
apiRequests: 0,
apiFailures: 0,
});
const isDev = process.env.NODE_ENV === 'development';
const shouldShow = show ?? isDev;
useEffect(() => {
if (!shouldShow) return;
// Load debug state from localStorage
const saved = localStorage.getItem('gridpilot_debug_enabled');
if (saved === 'true') {
setDebugEnabled(true);
initializeDebugFeatures();
}
// Update metrics every 2 seconds
const interval = setInterval(updateMetrics, 2000);
return () => clearInterval(interval);
}, [shouldShow]);
useEffect(() => {
// Save debug state
if (shouldShow) {
localStorage.setItem('gridpilot_debug_enabled', debugEnabled.toString());
}
}, [debugEnabled, shouldShow]);
const updateMetrics = () => {
if (!debugEnabled) return;
const globalHandler = getGlobalErrorHandler();
const apiLogger = getGlobalApiLogger();
const errorStats = globalHandler.getStats();
const apiStats = apiLogger.getStats();
setMetrics({
errors: errorStats.total,
apiRequests: apiStats.total,
apiFailures: apiStats.failed,
});
};
const initializeDebugFeatures = () => {
const globalHandler = getGlobalErrorHandler();
const apiLogger = getGlobalApiLogger();
// Initialize global error handler
globalHandler.initialize();
// Override fetch with logging
if (!window.__GRIDPILOT_FETCH_LOGGED__) {
const loggedFetch = apiLogger.createLoggedFetch();
window.fetch = loggedFetch as typeof fetch;
window.__GRIDPILOT_FETCH_LOGGED__ = true;
}
// Expose to window for easy access
window.__GRIDPILOT_GLOBAL_HANDLER__ = globalHandler;
window.__GRIDPILOT_API_LOGGER__ = apiLogger;
console.log('%c[DEBUG MODE] Enabled', 'color: #00ff88; font-weight: bold; font-size: 14px;');
console.log('Available globals:', {
__GRIDPILOT_GLOBAL_HANDLER__: globalHandler,
__GRIDPILOT_API_LOGGER__: apiLogger,
__GRIDPILOT_REACT_ERRORS__: window.__GRIDPILOT_REACT_ERRORS__ || [],
});
};
const toggleDebug = () => {
const newEnabled = !debugEnabled;
setDebugEnabled(newEnabled);
if (newEnabled) {
initializeDebugFeatures();
} else {
// Disable debug features
const globalHandler = getGlobalErrorHandler();
globalHandler.destroy();
console.log('%c[DEBUG MODE] Disabled', 'color: #ff4444; font-weight: bold; font-size: 14px;');
}
};
const triggerTestError = () => {
if (!debugEnabled) return;
// Trigger a test API error
const testError = new Error('This is a test error for debugging');
(testError as any).type = 'TEST_ERROR';
const globalHandler = getGlobalErrorHandler();
globalHandler.report(testError, { test: true, timestamp: Date.now() });
console.log('%c[TEST] Error triggered', 'color: #ffaa00; font-weight: bold;', testError);
};
const triggerTestApiCall = async () => {
if (!debugEnabled) return;
try {
// This will fail and be logged
await fetch('https://httpstat.us/500');
} catch (error) {
// Already logged by interceptor
console.log('%c[TEST] API call completed', 'color: #00aaff; font-weight: bold;');
}
};
const clearAllLogs = () => {
const globalHandler = getGlobalErrorHandler();
const apiLogger = getGlobalApiLogger();
globalHandler.clearHistory();
apiLogger.clearHistory();
setMetrics({ errors: 0, apiRequests: 0, apiFailures: 0 });
console.log('%c[DEBUG] All logs cleared', 'color: #00ff88; font-weight: bold;');
};
const copyDebugInfo = async () => {
const globalHandler = getGlobalErrorHandler();
const apiLogger = getGlobalApiLogger();
const debugInfo = {
timestamp: new Date().toISOString(),
environment: {
mode: process.env.NODE_ENV,
version: process.env.NEXT_PUBLIC_APP_VERSION,
},
browser: {
userAgent: navigator.userAgent,
language: navigator.language,
platform: navigator.platform,
},
errors: globalHandler.getStats(),
api: apiLogger.getStats(),
reactErrors: (window as any).__GRIDPILOT_REACT_ERRORS__ || [],
};
try {
await navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2));
console.log('%c[DEBUG] Debug info copied to clipboard', 'color: #00ff88; font-weight: bold;');
} catch (err) {
console.error('Failed to copy:', err);
}
};
if (!shouldShow) {
return null;
}
return (
<div className="fixed bottom-4 left-4 z-50">
{/* Main Toggle Button */}
{!isOpen && (
<button
onClick={() => setIsOpen(true)}
className={`p-3 rounded-full shadow-lg transition-all ${
debugEnabled
? 'bg-green-600 hover:bg-green-700 text-white'
: 'bg-iron-gray hover:bg-charcoal-outline text-gray-300'
}`}
title={debugEnabled ? 'Debug Mode Active' : 'Enable Debug Mode'}
>
<Bug className="w-5 h-5" />
</button>
)}
{/* Debug Panel */}
{isOpen && (
<div className="w-80 bg-deep-graphite border border-charcoal-outline rounded-xl shadow-2xl overflow-hidden">
{/* Header */}
<div className="flex items-center justify-between px-3 py-2 bg-iron-gray/50 border-b border-charcoal-outline">
<div className="flex items-center gap-2">
<Bug className="w-4 h-4 text-green-400" />
<span className="text-sm font-semibold text-white">Debug Control</span>
</div>
<button
onClick={() => setIsOpen(false)}
className="p-1 hover:bg-charcoal-outline rounded"
>
<X className="w-4 h-4 text-gray-400" />
</button>
</div>
{/* Content */}
<div className="p-3 space-y-3">
{/* Debug Toggle */}
<div className="flex items-center justify-between bg-iron-gray/30 p-2 rounded border border-charcoal-outline">
<div className="flex items-center gap-2">
<Shield className={`w-4 h-4 ${debugEnabled ? 'text-green-400' : 'text-gray-500'}`} />
<span className="text-sm font-medium">Debug Mode</span>
</div>
<button
onClick={toggleDebug}
className={`px-3 py-1 rounded text-xs font-bold transition-colors ${
debugEnabled
? 'bg-green-600 text-white hover:bg-green-700'
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
}`}
>
{debugEnabled ? 'ON' : 'OFF'}
</button>
</div>
{/* Metrics */}
{debugEnabled && (
<div className="grid grid-cols-3 gap-2">
<div className="bg-iron-gray border border-charcoal-outline rounded p-2 text-center">
<div className="text-[10px] text-gray-500">Errors</div>
<div className="text-lg font-bold text-red-400">{metrics.errors}</div>
</div>
<div className="bg-iron-gray border border-charcoal-outline rounded p-2 text-center">
<div className="text-[10px] text-gray-500">API</div>
<div className="text-lg font-bold text-blue-400">{metrics.apiRequests}</div>
</div>
<div className="bg-iron-gray border border-charcoal-outline rounded p-2 text-center">
<div className="text-[10px] text-gray-500">Failures</div>
<div className="text-lg font-bold text-yellow-400">{metrics.apiFailures}</div>
</div>
</div>
)}
{/* Actions */}
{debugEnabled && (
<div className="space-y-2">
<div className="text-xs font-semibold text-gray-400">Test Actions</div>
<div className="grid grid-cols-2 gap-2">
<button
onClick={triggerTestError}
className="px-2 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded text-xs font-medium"
>
Test Error
</button>
<button
onClick={triggerTestApiCall}
className="px-2 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded text-xs font-medium"
>
Test API
</button>
</div>
<div className="text-xs font-semibold text-gray-400 mt-2">Utilities</div>
<div className="grid grid-cols-2 gap-2">
<button
onClick={copyDebugInfo}
className="px-2 py-1.5 bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded text-xs font-medium border border-charcoal-outline"
>
Copy Info
</button>
<button
onClick={clearAllLogs}
className="px-2 py-1.5 bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded text-xs font-medium border border-charcoal-outline"
>
Clear Logs
</button>
</div>
</div>
)}
{/* Quick Links */}
{debugEnabled && (
<div className="space-y-1">
<div className="text-xs font-semibold text-gray-400">Quick Access</div>
<div className="text-[10px] text-gray-500 font-mono space-y-0.5">
<div>• window.__GRIDPILOT_GLOBAL_HANDLER__</div>
<div>• window.__GRIDPILOT_API_LOGGER__</div>
<div>• window.__GRIDPILOT_REACT_ERRORS__</div>
</div>
</div>
)}
{/* Status */}
<div className="text-[10px] text-gray-500 text-center pt-2 border-t border-charcoal-outline">
{debugEnabled ? 'Debug features active' : 'Debug mode disabled'}
{isDev && ' • Development Environment'}
</div>
</div>
</div>
)}
</div>
);
}
/**
* Hook for programmatic debug control
*/
export function useDebugMode() {
const [debugEnabled, setDebugEnabled] = useState(false);
useEffect(() => {
const saved = localStorage.getItem('gridpilot_debug_enabled');
setDebugEnabled(saved === 'true');
}, []);
const enable = () => {
setDebugEnabled(true);
localStorage.setItem('gridpilot_debug_enabled', 'true');
// Initialize debug features
const globalHandler = getGlobalErrorHandler();
globalHandler.initialize();
const apiLogger = getGlobalApiLogger();
if (!(window as any).__GRIDPILOT_FETCH_LOGGED__) {
const loggedFetch = apiLogger.createLoggedFetch();
window.fetch = loggedFetch as any;
(window as any).__GRIDPILOT_FETCH_LOGGED__ = true;
}
(window as any).__GRIDPILOT_GLOBAL_HANDLER__ = globalHandler;
(window as any).__GRIDPILOT_API_LOGGER__ = apiLogger;
};
const disable = () => {
setDebugEnabled(false);
localStorage.setItem('gridpilot_debug_enabled', 'false');
const globalHandler = getGlobalErrorHandler();
globalHandler.destroy();
};
const toggle = () => {
if (debugEnabled) {
disable();
} else {
enable();
}
};
return {
enabled: debugEnabled,
enable,
disable,
toggle,
};
}