crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/observability/GovernanceStatus.tsx

@@ -0,0 +1,197 @@
+import { useMemo } from 'react';
+import type { ExecutionEvent } from '~/types/mandate';
+import { classNames } from '~/utils/classNames';
+
+interface GovernanceStatusProps {
+  events: ExecutionEvent[];
+}
+
+/**
+ * GovernanceStatus component displays ESG scores, risk assessments, and compliance status.
+ */
+export function GovernanceStatus({ events }: GovernanceStatusProps) {
+  const governanceEvents = useMemo(() => {
+    return events.filter((event) => event.type === 'governance_check');
+  }, [events]);
+
+  const latestGovernance = useMemo(() => {
+    if (governanceEvents.length === 0) return null;
+    return governanceEvents[governanceEvents.length - 1];
+  }, [governanceEvents]);
+
+  const getRiskColor = (level?: string) => {
+    switch (level) {
+      case 'critical':
+        return 'text-red-600 bg-red-500/20';
+      case 'high':
+        return 'text-orange-600 bg-orange-500/20';
+      case 'medium':
+        return 'text-yellow-600 bg-yellow-500/20';
+      case 'low':
+        return 'text-green-600 bg-green-500/20';
+      default:
+        return 'text-gray-600 bg-gray-500/20';
+    }
+  };
+
+  if (governanceEvents.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-bolt-elements-textSecondary">
+          No governance checks yet. Governance status will appear here during execution.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Latest Governance Status */}
+      {latestGovernance && (
+        <div>
+          <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-4">
+            Latest Governance Check (Iteration {latestGovernance.iteration})
+          </h3>
+
+          {/* ESG Scores */}
+          {latestGovernance.data.esg_score && (
+            <div className="mb-6">
+              <h4 className="text-md font-medium text-bolt-elements-textPrimary mb-3">ESG Scores</h4>
+              <div className="grid grid-cols-2 gap-4">
+                {typeof latestGovernance.data.esg_score === 'object' ? (
+                  <>
+                    <div>
+                      <div className="text-sm text-bolt-elements-textSecondary mb-1">Environmental</div>
+                      <div className="text-2xl font-bold text-green-500">
+                        {(latestGovernance.data.esg_score as any).environmental_score?.toFixed(1) || 'N/A'}
+                      </div>
+                    </div>
+                    <div>
+                      <div className="text-sm text-bolt-elements-textSecondary mb-1">Social</div>
+                      <div className="text-2xl font-bold text-blue-500">
+                        {(latestGovernance.data.esg_score as any).social_score?.toFixed(1) || 'N/A'}
+                      </div>
+                    </div>
+                    <div>
+                      <div className="text-sm text-bolt-elements-textSecondary mb-1">Governance</div>
+                      <div className="text-2xl font-bold text-purple-500">
+                        {(latestGovernance.data.esg_score as any).governance_score?.toFixed(1) || 'N/A'}
+                      </div>
+                    </div>
+                    <div>
+                      <div className="text-sm text-bolt-elements-textSecondary mb-1">Overall</div>
+                      <div className="text-2xl font-bold text-accent-500">
+                        {(latestGovernance.data.esg_score as any).overall_score?.toFixed(1) || 'N/A'}
+                      </div>
+                    </div>
+                  </>
+                ) : (
+                  <div>
+                    <div className="text-sm text-bolt-elements-textSecondary mb-1">Overall Score</div>
+                    <div className="text-2xl font-bold text-accent-500">
+                      {Number(latestGovernance.data.esg_score).toFixed(1)}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Risk Assessment */}
+          {latestGovernance.data.risk_assessment && (
+            <div className="mb-6">
+              <h4 className="text-md font-medium text-bolt-elements-textPrimary mb-3">Risk Assessment</h4>
+              <div className="space-y-3">
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-sm text-bolt-elements-textSecondary">Risk Level</span>
+                    <span
+                      className={classNames(
+                        'px-3 py-1 rounded text-sm font-medium',
+                        getRiskColor(
+                          (latestGovernance.data.risk_assessment as any)?.risk_level || 'unknown'
+                        )
+                      )}
+                    >
+                      {(latestGovernance.data.risk_assessment as any)?.risk_level?.toUpperCase() || 'UNKNOWN'}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-bolt-elements-textSecondary">Risk Score</span>
+                    <span className="text-sm font-medium text-bolt-elements-textPrimary">
+                      {(latestGovernance.data.risk_assessment as any)?.risk_score?.toFixed(1) || 'N/A'} / 100
+                    </span>
+                  </div>
+                </div>
+                {(latestGovernance.data.risk_assessment as any)?.mitigation_strategy && (
+                  <div>
+                    <div className="text-sm text-bolt-elements-textSecondary mb-1">Mitigation Strategy</div>
+                    <p className="text-sm text-bolt-elements-textPrimary">
+                      {(latestGovernance.data.risk_assessment as any).mitigation_strategy}
+                    </p>
+                  </div>
+                )}
+                {(latestGovernance.data.risk_assessment as any)?.impact_areas &&
+                  (latestGovernance.data.risk_assessment as any).impact_areas.length > 0 && (
+                    <div>
+                      <div className="text-sm text-bolt-elements-textSecondary mb-1">Impact Areas</div>
+                      <div className="flex flex-wrap gap-2">
+                        {((latestGovernance.data.risk_assessment as any).impact_areas as string[]).map(
+                          (area, idx) => (
+                            <span
+                              key={idx}
+                              className="px-2 py-1 rounded text-xs bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary"
+                            >
+                              {area}
+                            </span>
+                          )
+                        )}
+                      </div>
+                    </div>
+                  )}
+              </div>
+            </div>
+          )}
+
+          {/* Budget Consumption */}
+          {latestGovernance.data.budget_consumed !== undefined && (
+            <div>
+              <h4 className="text-md font-medium text-bolt-elements-textPrimary mb-3">Budget Consumption</h4>
+              <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+                ${Number(latestGovernance.data.budget_consumed).toFixed(2)}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Governance History */}
+      {governanceEvents.length > 1 && (
+        <div>
+          <h3 className="text-lg font-semibold text-bolt-elements-textPrimary mb-4">Governance History</h3>
+          <div className="space-y-2">
+            {governanceEvents.map((event, index) => (
+              <div
+                key={`${event.timestamp}-${index}`}
+                className="p-3 rounded border border-bolt-elements-borderColor bg-bolt-elements-background-depth-3"
+              >
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium text-bolt-elements-textPrimary">
+                    Iteration {event.iteration}
+                  </span>
+                  <span className="text-xs text-bolt-elements-textTertiary">
+                    {new Date(event.timestamp).toLocaleTimeString()}
+                  </span>
+                </div>
+                {event.data.message && (
+                  <p className="text-sm text-bolt-elements-textSecondary mt-1">{event.data.message}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

tools/bolt.diy/app/components/observability/GovernorMetrics.tsx

@@ -0,0 +1,246 @@
+/**
+ * Governor Metrics Component
+ * 
+ * Displays Execution Governor state and metrics.
+ */
+
+import { useState, useEffect } from 'react';
+import { createScopedLogger } from '~/utils/logger';
+
+const logger = createScopedLogger('GovernorMetrics');
+
+interface GovernorState {
+  queueDepth: number;
+  activeExecutions: number;
+  maxConcurrentExecutions: number;
+  registeredWorkers: number;
+  healthyWorkers: number;
+  totalMandatesProcessed: number;
+  totalMandatesFailed: number;
+  averageExecutionTime: number;
+  currentBudgetUsage: number;
+  globalBudgetLimit: number;
+}
+
+interface GovernorMetrics {
+  totalMandatesProcessed: number;
+  totalMandatesFailed: number;
+  totalMandatesCompleted: number;
+  averageExecutionTime: number;
+  successRate: number;
+  failureRate: number;
+  byStatus: Record<string, number>;
+  byWorker: Record<string, { processed: number; failed: number; avgTime: number }>;
+}
+
+interface GovernorMetricsProps {
+  mandateId: string;
+}
+
+/**
+ * Governor Metrics display component.
+ */
+export function GovernorMetrics({ mandateId }: GovernorMetricsProps) {
+  const [state, setState] = useState<GovernorState | null>(null);
+  const [metrics, setMetrics] = useState<GovernorMetrics | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const governorUrl = typeof window !== 'undefined' 
+    ? (window as any).__GOVERNOR_URL__ || process.env.EXECUTION_GOVERNOR_URL || 'http://localhost:3000'
+    : 'http://localhost:3000';
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Fetch governor state
+        const stateResponse = await fetch(`${governorUrl}/governor/state`, {
+          signal: AbortSignal.timeout(3000) // 3 second timeout
+        });
+        if (stateResponse.ok) {
+          const stateData = await stateResponse.json() as GovernorState;
+          setState(stateData);
+        } else {
+          // Not available, but not an error - Governor is optional
+          setLoading(false);
+          return;
+        }
+
+        // Fetch governor metrics
+        const metricsResponse = await fetch(`${governorUrl}/governor/metrics`, {
+          signal: AbortSignal.timeout(3000) // 3 second timeout
+        });
+        if (metricsResponse.ok) {
+          const metricsData = await metricsResponse.json() as GovernorMetrics;
+          setMetrics(metricsData);
+        }
+
+        setLoading(false);
+      } catch (err) {
+        // Governor service is optional - don't treat as error
+        if (err instanceof Error && (
+          err.name === 'AbortError' || 
+          err.message.includes('NetworkError') ||
+          err.message.includes('Failed to fetch')
+        )) {
+          // Governor service not available - this is expected and OK
+          logger.debug('Governor service not available (this is optional)');
+          setLoading(false);
+          setError(null); // Don't show error for optional service
+        } else {
+          logger.error('Error fetching governor data:', err);
+          setError(err instanceof Error ? err.message : 'Unknown error');
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchData();
+    const interval = setInterval(fetchData, 5000); // Refresh every 5 seconds
+
+    return () => clearInterval(interval);
+  }, [governorUrl]);
+
+  if (loading) {
+    return (
+      <div className="p-4">
+        <div className="animate-pulse">Loading governor metrics...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 text-yellow-500">
+        <p>Error loading governor metrics: {error}</p>
+        <p className="text-sm text-bolt-elements-textSecondary mt-2">
+          Governor service may not be enabled or accessible at {governorUrl}
+        </p>
+      </div>
+    );
+  }
+
+  // If Governor service is not available, show a friendly message instead of error
+  if (!state && !loading) {
+    return (
+      <div className="p-4">
+        <div className="bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg p-6 text-center">
+          <p className="text-bolt-elements-textSecondary mb-2">
+            Execution Governor service is not available
+          </p>
+          <p className="text-sm text-bolt-elements-textTertiary">
+            The Governor service provides queue management and execution metrics.
+            It's optional and bolt.diy works without it.
+          </p>
+          <p className="text-xs text-bolt-elements-textTertiary mt-2">
+            To enable: Start the Governor service at {governorUrl}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!state) {
+    return null;
+  }
+
+  const budgetUsagePercent = state.globalBudgetLimit > 0
+    ? (state.currentBudgetUsage / state.globalBudgetLimit) * 100
+    : 0;
+
+  const executionSlotUsage = state.maxConcurrentExecutions > 0
+    ? (state.activeExecutions / state.maxConcurrentExecutions) * 100
+    : 0;
+
+  return (
+    <div className="p-4 space-y-4">
+      <h3 className="text-lg font-semibold mb-4">Execution Governor Metrics</h3>
+
+      {/* Queue Status */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="bg-bolt-elements-background-depth-2 p-4 rounded-lg">
+          <div className="text-sm text-bolt-elements-textSecondary">Queue Depth</div>
+          <div className="text-2xl font-bold text-bolt-elements-textPrimary">{state.queueDepth}</div>
+        </div>
+
+        <div className="bg-bolt-elements-background-depth-2 p-4 rounded-lg">
+          <div className="text-sm text-bolt-elements-textSecondary">Active Executions</div>
+          <div className="text-2xl font-bold text-bolt-elements-textPrimary">
+            {state.activeExecutions} / {state.maxConcurrentExecutions}
+          </div>
+          <div className="mt-2">
+            <div className="w-full bg-gray-700 rounded-full h-2">
+              <div
+                className="bg-accent-500 h-2 rounded-full transition-all"
+                style={{ width: `${Math.min(executionSlotUsage, 100)}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Workers */}
+      <div className="bg-bolt-elements-background-depth-2 p-4 rounded-lg">
+        <div className="text-sm text-bolt-elements-textSecondary mb-2">Workers</div>
+        <div className="flex items-center gap-4">
+          <div>
+            <span className="text-2xl font-bold text-green-500">{state.healthyWorkers}</span>
+            <span className="text-sm text-bolt-elements-textSecondary ml-2">Healthy</span>
+          </div>
+          <div>
+            <span className="text-2xl font-bold text-bolt-elements-textPrimary">{state.registeredWorkers}</span>
+            <span className="text-sm text-bolt-elements-textSecondary ml-2">Total</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Budget Usage */}
+      <div className="bg-bolt-elements-background-depth-2 p-4 rounded-lg">
+        <div className="text-sm text-bolt-elements-textSecondary mb-2">Budget Usage</div>
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-lg font-semibold">
+            ${state.currentBudgetUsage.toFixed(2)} / ${state.globalBudgetLimit.toFixed(2)}
+          </span>
+          <span className="text-sm text-bolt-elements-textSecondary">
+            {budgetUsagePercent.toFixed(1)}%
+          </span>
+        </div>
+        <div className="w-full bg-gray-700 rounded-full h-2">
+          <div
+            className={`h-2 rounded-full transition-all ${
+              budgetUsagePercent > 90 ? 'bg-red-500' :
+              budgetUsagePercent > 70 ? 'bg-yellow-500' :
+              'bg-green-500'
+            }`}
+            style={{ width: `${Math.min(budgetUsagePercent, 100)}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Statistics */}
+      {metrics && (
+        <div className="grid grid-cols-3 gap-4">
+          <div className="bg-bolt-elements-background-depth-2 p-4 rounded-lg">
+            <div className="text-sm text-bolt-elements-textSecondary">Processed</div>
+            <div className="text-xl font-bold text-bolt-elements-textPrimary">
+              {metrics.totalMandatesProcessed}
+            </div>
+          </div>
+          <div className="bg-bolt-elements-background-depth-2 p-4 rounded-lg">
+            <div className="text-sm text-bolt-elements-textSecondary">Success Rate</div>
+            <div className="text-xl font-bold text-green-500">
+              {(metrics.successRate * 100).toFixed(1)}%
+            </div>
+          </div>
+          <div className="bg-bolt-elements-background-depth-2 p-4 rounded-lg">
+            <div className="text-sm text-bolt-elements-textSecondary">Avg Time</div>
+            <div className="text-xl font-bold text-bolt-elements-textPrimary">
+              {Math.round(metrics.averageExecutionTime / 1000)}s
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

tools/bolt.diy/app/components/observability/LogStream.tsx

@@ -0,0 +1,244 @@
+import { useState, useMemo } from 'react';
+import type { ExecutionEvent } from '~/types/mandate';
+import { classNames } from '~/utils/classNames';
+
+interface LogStreamProps {
+  events: ExecutionEvent[];
+}
+
+type LogLevel = 'all' | 'info' | 'warn' | 'error' | 'debug';
+
+/**
+ * LogStream component displays real-time logs from execution events.
+ */
+export function LogStream({ events }: LogStreamProps) {
+  const [logLevel, setLogLevel] = useState<LogLevel>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const logEvents = useMemo(() => {
+    // Include all event types that have log-like data
+    return events.filter((event) => 
+      event.type === 'log' || 
+      event.type === 'error' ||
+      event.type === 'initialization_start' ||
+      event.type === 'webcontainer_init' ||
+      event.type === 'api_keys_loaded' ||
+      event.type === 'provider_configured' ||
+      event.type === 'shell_ready' ||
+      event.type === 'executor_ready' ||
+      event.type === 'iteration_start' ||
+      event.type === 'iteration_end' ||
+      event.type === 'governance_check' ||
+      event.type === 'deployment_status' ||
+      event.type === 'budget_warning' ||
+      event.type === 'constraint_violation'
+    );
+  }, [events]);
+
+  const filteredLogs = useMemo(() => {
+    let filtered = logEvents;
+
+    // Filter by level
+    if (logLevel !== 'all') {
+      filtered = filtered.filter((event) => {
+        if (event.type === 'error') return logLevel === 'error';
+        if (event.type === 'constraint_violation') return logLevel === 'error';
+        if (event.type === 'budget_warning') return logLevel === 'warn';
+        // For initialization events, treat as info unless they're errors
+        if (['initialization_start', 'webcontainer_init', 'api_keys_loaded', 'provider_configured', 'shell_ready', 'executor_ready'].includes(event.type)) {
+          return logLevel === 'info' || logLevel === 'debug';
+        }
+        return event.data.level === logLevel;
+      });
+    }
+
+    // Filter by search query
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter((event) => {
+        const message = event.data.message?.toLowerCase() || '';
+        const source = event.data.source?.toLowerCase() || '';
+        const type = event.type.toLowerCase();
+        return message.includes(query) || source.includes(query) || type.includes(query);
+      });
+    }
+
+    return filtered;
+  }, [logEvents, logLevel, searchQuery]);
+
+  const logLevels: { value: LogLevel; label: string; color: string }[] = [
+    { value: 'all', label: 'All', color: 'text-gray-500' },
+    { value: 'info', label: 'Info', color: 'text-blue-500' },
+    { value: 'warn', label: 'Warn', color: 'text-yellow-500' },
+    { value: 'error', label: 'Error', color: 'text-red-500' },
+    { value: 'debug', label: 'Debug', color: 'text-gray-400' },
+  ];
+
+  const getLogColor = (level?: string) => {
+    switch (level) {
+      case 'info':
+        return 'text-blue-500';
+      case 'warn':
+        return 'text-yellow-500';
+      case 'error':
+        return 'text-red-500';
+      case 'debug':
+        return 'text-gray-400';
+      default:
+        return 'text-bolt-elements-textSecondary';
+    }
+  };
+
+  if (logEvents.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-bolt-elements-textSecondary">No logs yet. Waiting for execution to start...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Filters */}
+      <div className="mb-4 flex gap-4 items-center">
+        <div className="flex gap-2">
+          {logLevels.map(({ value, label, color }) => (
+            <button
+              key={value}
+              onClick={() => setLogLevel(value)}
+              className={classNames(
+                'px-3 py-1 rounded text-sm font-medium transition-colors',
+                logLevel === value
+                  ? 'bg-accent-500 text-white'
+                  : 'bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary'
+              )}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        <input
+          type="text"
+          placeholder="Search logs..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="flex-1 px-3 py-1 rounded bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor text-sm text-bolt-elements-textPrimary placeholder:text-bolt-elements-textTertiary"
+        />
+      </div>
+
+      {/* Logs */}
+      <div className="flex-1 overflow-auto font-mono text-sm space-y-1">
+        {filteredLogs.length === 0 ? (
+          <div className="text-center py-8 text-bolt-elements-textSecondary">
+            No logs match the current filters.
+          </div>
+        ) : (
+          filteredLogs.map((event, index) => {
+            // Determine level and message based on event type
+            let level: string = 'info';
+            let message: string = '';
+            let eventTypeLabel: string = event.type;
+            
+            if (event.type === 'error' || event.type === 'constraint_violation') {
+              level = 'error';
+              message = event.data.message || event.data.error_message || event.data.violation_details || 'Unknown error';
+            } else if (event.type === 'budget_warning') {
+              level = 'warn';
+              message = event.data.message || 'Budget warning';
+            } else if (event.type === 'log') {
+              level = event.data.level || 'info';
+              message = event.data.message || '';
+            } else if (event.type === 'initialization_start') {
+              level = 'info';
+              message = event.data.message || 'Initialization started';
+              eventTypeLabel = 'INIT';
+            } else if (event.type === 'webcontainer_init') {
+              level = 'debug';
+              message = event.data.message || 'WebContainer initialization';
+              eventTypeLabel = 'WC';
+            } else if (event.type === 'api_keys_loaded') {
+              level = 'info';
+              message = event.data.message || `Loaded ${event.data.keys_count || 0} API key(s)`;
+              eventTypeLabel = 'API';
+            } else if (event.type === 'provider_configured') {
+              level = 'info';
+              message = event.data.message || `Provider configured: ${event.data.provider || 'unknown'}`;
+              eventTypeLabel = 'PROV';
+            } else if (event.type === 'shell_ready') {
+              level = 'info';
+              message = event.data.message || 'Shell terminal ready';
+              eventTypeLabel = 'SHELL';
+            } else if (event.type === 'executor_ready') {
+              level = 'info';
+              message = event.data.message || 'MandateExecutor ready';
+              eventTypeLabel = 'EXEC';
+            } else if (event.type === 'iteration_start') {
+              level = 'info';
+              message = `Iteration ${event.data.iteration_number || event.iteration} started`;
+              eventTypeLabel = 'ITER';
+            } else if (event.type === 'iteration_end') {
+              level = event.data.status === 'failed' ? 'error' : 'info';
+              message = `Iteration ${event.data.iteration_number || event.iteration} ${event.data.status || 'completed'}`;
+              eventTypeLabel = 'ITER';
+            } else if (event.type === 'governance_check') {
+              level = 'info';
+              message = 'Governance check performed';
+              eventTypeLabel = 'GOV';
+            } else if (event.type === 'deployment_status') {
+              level = event.data.deployment_status === 'failed' ? 'error' : 'info';
+              message = event.data.message || `Deployment ${event.data.deployment_status || 'unknown'}`;
+              eventTypeLabel = 'DEPLOY';
+            } else {
+              message = event.data.message || JSON.stringify(event.data);
+            }
+            
+            const timestamp = new Date(event.timestamp).toISOString();
+            const source = event.data.source || eventTypeLabel;
+            const timing = event.metadata?.init_time || event.metadata?.load_time || event.metadata?.execution_time;
+            const timingStr = timing ? ` (${timing}ms)` : '';
+
+            return (
+              <div
+                key={`${event.timestamp}-${index}`}
+                className={classNames(
+                  'p-2 rounded border-l-2',
+                  level === 'error'
+                    ? 'bg-red-500/10 border-red-500'
+                    : level === 'warn'
+                      ? 'bg-yellow-500/10 border-yellow-500'
+                      : level === 'debug'
+                        ? 'bg-gray-500/5 border-gray-500/30'
+                        : 'bg-bolt-elements-background-depth-3 border-bolt-elements-borderColor'
+                )}
+              >
+                <div className="flex gap-2 items-center flex-wrap">
+                  <span className={classNames('font-semibold text-xs', getLogColor(level))}>
+                    [{level.toUpperCase()}]
+                  </span>
+                  <span className="text-xs font-mono text-bolt-elements-textTertiary">{eventTypeLabel}</span>
+                  <span className="text-xs text-bolt-elements-textTertiary">{timestamp}</span>
+                  {source && source !== eventTypeLabel && (
+                    <span className="text-xs text-bolt-elements-textTertiary">from {source}</span>
+                  )}
+                  {timingStr && (
+                    <span className="text-xs text-bolt-elements-textTertiary">{timingStr}</span>
+                  )}
+                </div>
+                <div className={classNames('mt-1 text-sm', getLogColor(level))}>{message}</div>
+                {event.metadata && Object.keys(event.metadata).length > 0 && (
+                  <details className="mt-1 text-xs text-bolt-elements-textTertiary">
+                    <summary className="cursor-pointer hover:text-bolt-elements-textSecondary">Details</summary>
+                    <pre className="mt-1 p-2 bg-bolt-elements-background-depth-2 rounded text-xs overflow-auto">
+                      {JSON.stringify(event.metadata, null, 2)}
+                    </pre>
+                  </details>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
+