dss/admin-ui/js/core/debug-inspector.js

/**
 * DSS Debug Inspector
 * 
 * Exposes DSS internal debugging tools to browser console.
 * Allows self-inspection and troubleshooting without external tools.
 * 
 * Usage in browser console:
 * - window.__DSS_DEBUG.auditLogger.getLogs()
 * - window.__DSS_DEBUG.workflowPersistence.getSnapshots()
 * - window.__DSS_DEBUG.errorRecovery.getCrashReport()
 * 
 * Access keyboard shortcut (when implemented):
 * - Ctrl+Alt+D to open Debug Inspector UI
 */

class DebugInspector {
  constructor() {
    this.auditLogger = null;
    this.workflowPersistence = null;
    this.errorRecovery = null;
    this.routeGuards = null;
    this.initialized = false;
  }

  /**
   * Initialize debug inspector with system modules
   * Call this after all modules are loaded
   */
  initialize(auditLogger, workflowPersistence, errorRecovery, routeGuards) {
    this.auditLogger = auditLogger;
    this.workflowPersistence = workflowPersistence;
    this.errorRecovery = errorRecovery;
    this.routeGuards = routeGuards;
    this.initialized = true;

    console.log(
      '%c[DSS Debug Inspector] Initialized',
      'color: #0066FF; font-weight: bold;'
    );
    console.log(
      '%cAccess debugging tools: window.__DSS_DEBUG',
      'color: #666; font-style: italic;'
    );

    return this;
  }

  /**
   * Quick diagnostic report
   */
  quickDiagnosis() {
    if (!this.initialized) {
      return { error: 'Debug inspector not initialized' };
    }

    const recentLogs = this.auditLogger.getLogs().slice(-20);
    const snapshots = this.workflowPersistence.getSnapshots();
    const crashReport = this.errorRecovery.getCrashReport();
    const stats = this.auditLogger.getStats();

    return {
      timestamp: new Date().toISOString(),
      url: window.location.href,
      
      // Current state
      currentSnapshot: snapshots.length > 0 ? snapshots[snapshots.length - 1] : null,
      
      // Recent activity
      recentActions: recentLogs.slice(-10).map(log => ({
        action: log.action,
        level: log.level,
        category: log.category,
        timestamp: new Date(log.timestamp).toLocaleTimeString()
      })),
      
      // Error status
      hasCrash: crashReport.crashDetected,
      lastError: crashReport.crashDetected ? {
        category: crashReport.errorCategory,
        message: crashReport.error?.message
      } : null,
      
      // Stats
      totalLogsRecorded: stats.total,
      logsByCategory: stats.byCategory,
      logsByLevel: stats.byLevel,
      
      // Recovery
      availableRecoveryPoints: crashReport.recoveryPoints?.length || 0,
      savedSnapshots: snapshots.length
    };
  }

  /**
   * Get formatted console output
   */
  printDiagnosis() {
    const diagnosis = this.quickDiagnosis();

    if (diagnosis.error) {
      console.error(`%c❌ ${diagnosis.error}`, 'color: #FF0000; font-weight: bold;');
      return;
    }

    console.group('%c📊 DSS Diagnostic Report', 'color: #0066FF; font-weight: bold; font-size: 14px;');

    // Current state
    console.group('%cCurrent State', 'color: #FF6B00; font-weight: bold;');
    console.log('User:', diagnosis.currentSnapshot?.state?.user);
    console.log('Team:', diagnosis.currentSnapshot?.state?.team);
    console.log('Current Page:', diagnosis.currentSnapshot?.state?.currentPage);
    console.log('Figma Connected:', diagnosis.currentSnapshot?.state?.figmaConnected);
    console.groupEnd();

    // Recent activity
    console.group('%cRecent Activity (Last 10)', 'color: #00B600; font-weight: bold;');
    console.table(diagnosis.recentActions);
    console.groupEnd();

    // Error status
    if (diagnosis.hasCrash) {
      console.group('%c⚠️ Crash Detected', 'color: #FF0000; font-weight: bold;');
      console.log('Category:', diagnosis.lastError.category);
      console.log('Message:', diagnosis.lastError.message);
      console.log('Recovery Points Available:', diagnosis.availableRecoveryPoints);
      console.groupEnd();
    } else {
      console.log('%c✅ No crashes detected', 'color: #00B600;');
    }

    // Stats
    console.group('%cStatistics', 'color: #666; font-weight: bold;');
    console.log('Total Logs:', diagnosis.totalLogsRecorded);
    console.table(diagnosis.logsByCategory);
    console.groupEnd();

    console.groupEnd();

    return diagnosis;
  }

  /**
   * Search audit logs with flexible filtering
   */
  findLogs(pattern) {
    if (!this.auditLogger) {
      console.error('Audit logger not initialized');
      return [];
    }

    const allLogs = this.auditLogger.getLogs();

    if (typeof pattern === 'string') {
      // Search by action or message content
      return allLogs.filter(log =>
        log.action.includes(pattern) ||
        JSON.stringify(log.details).toLowerCase().includes(pattern.toLowerCase())
      );
    } else if (typeof pattern === 'object') {
      // Filter by object criteria
      return allLogs.filter(log => {
        for (const [key, value] of Object.entries(pattern)) {
          if (key === 'timeRange') {
            if (log.timestamp < value.start || log.timestamp > value.end) {
              return false;
            }
          } else if (log[key] !== value && log.details[key] !== value) {
            return false;
          }
        }
        return true;
      });
    }

    return [];
  }

  /**
   * Get performance metrics from audit logs
   */
  getPerformanceMetrics() {
    if (!this.auditLogger) {
      return { error: 'Audit logger not initialized' };
    }

    const apiCalls = this.auditLogger.getLogs({
      action: 'api_call'
    });

    const slowCalls = apiCalls.filter(log => log.details.duration > 1000);
    const failedCalls = apiCalls.filter(log => log.details.status >= 400);

    return {
      totalApiCalls: apiCalls.length,
      averageResponseTime: apiCalls.reduce((sum, log) => sum + (log.details.duration || 0), 0) / apiCalls.length || 0,
      slowCalls: slowCalls.length,
      failedCalls: failedCalls.length,
      slowCallDetails: slowCalls.map(log => ({
        endpoint: log.details.endpoint,
        method: log.details.method,
        duration: log.details.duration,
        status: log.details.status
      })),
      failedCallDetails: failedCalls.map(log => ({
        endpoint: log.details.endpoint,
        method: log.details.method,
        status: log.details.status,
        error: log.details.error
      }))
    };
  }

  /**
   * Export all debugging data
   */
  exportDebugData() {
    if (!this.initialized) {
      console.error('Debug inspector not initialized');
      return null;
    }

    const data = {
      timestamp: new Date().toISOString(),
      url: window.location.href,
      browser: navigator.userAgent,
      
      auditLogs: this.auditLogger.getLogs(),
      auditStats: this.auditLogger.getStats(),
      
      snapshots: this.workflowPersistence.getSnapshots(),
      
      crashReport: this.errorRecovery.getCrashReport(),
      
      performance: this.getPerformanceMetrics(),
      
      diagnosis: this.quickDiagnosis()
    };

    // Copy to clipboard
    const json = JSON.stringify(data, null, 2);
    if (navigator.clipboard) {
      navigator.clipboard.writeText(json).then(() => {
        console.log('%c✅ Debug data copied to clipboard', 'color: #00B600; font-weight: bold;');
      });
    }

    return data;
  }

  /**
   * Print helpful guide
   */
  help() {
    console.log(`
%c╔════════════════════════════════════════════╗
║    DSS Debug Inspector - Quick Reference    ║
╚════════════════════════════════════════════╝

%c📊 DIAGNOSTICS
%c  __DSS_DEBUG.printDiagnosis()
%c  Shows quick overview of system state, recent activity, errors

%c🔍 SEARCH & FILTER
%c  __DSS_DEBUG.findLogs('action-name')
%c  __DSS_DEBUG.findLogs({ action: 'api_call', level: 'error' })
%c  Find logs by string pattern or filter object

%c💾 SNAPSHOTS
%c  __DSS_DEBUG.workflowPersistence.getSnapshots()
%c  __DSS_DEBUG.workflowPersistence.restoreSnapshot('id')
%c  View and restore application state

%c⚠️ ERRORS & RECOVERY
%c  __DSS_DEBUG.errorRecovery.getCrashReport()
%c  __DSS_DEBUG.errorRecovery.recover('recovery-point-id')
%c  Analyze crashes and recover to known good state

%c⚡ PERFORMANCE
%c  __DSS_DEBUG.getPerformanceMetrics()
%c  Get API response times, slow calls, failures

%c📥 EXPORT
%c  __DSS_DEBUG.exportDebugData()
%c  Export everything for offline analysis (copies to clipboard)

%cFor detailed documentation, see:
%c  .dss/DSS_SELF_DEBUG_METHODOLOGY.md
    `,
      'color: #0066FF; font-weight: bold; font-size: 12px;',
      'color: #FF6B00; font-weight: bold;',
      'color: #666;',
      'color: #0066FF; font-weight: bold;',
      'color: #FF6B00; font-weight: bold;',
      'color: #666;',
      'color: #0066FF; font-weight: bold;',
      'color: #FF6B00; font-weight: bold;',
      'color: #666;',
      'color: #0066FF; font-weight: bold;',
      'color: #FF6B00; font-weight: bold;',
      'color: #666;',
      'color: #0066FF; font-weight: bold;',
      'color: #FF6B00; font-weight: bold;',
      'color: #666;',
      'color: #0066FF; font-weight: bold;',
      'color: #FF6B00; font-weight: bold;',
      'color: #666;',
      'color: #666; font-style: italic;'
    );
  }
}

// Export singleton instance
export const debugInspector = new DebugInspector();

// Make available globally
if (typeof window !== 'undefined') {
  window.__DSS_DEBUG = debugInspector;
}

export default debugInspector;