devintelligence 0.0.0-stage → 1.0.0

package/src/App.tsx

@@ -0,0 +1,783 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  LayoutDashboard,
+  FolderSearch,
+  Activity,
+  Smartphone,
+  Cpu,
+  Layers,
+  Code2,
+  Palette,
+  Gauge,
+  ShieldAlert,
+  PackageCheck,
+  Bug,
+  Wrench,
+  Eye,
+  CheckSquare,
+  History,
+  Server,
+  Settings,
+  RefreshCw,
+  Menu,
+  X,
+} from 'lucide-react';
+import {
+  DashboardModuleId,
+  EnvironmentCheckItem,
+  ErrorDiagnosisResult,
+  ProjectIntelligenceReport,
+  QualityGateConfig,
+} from './types/devintelligence.ts';
+import {
+  CommandCenterView,
+  ProjectExplorerView,
+  ProjectHealthView,
+} from './components/OverviewAndExplorerViews.tsx';
+import {
+  ReactNativeDoctorView,
+  AndroidDiagnosticsView,
+  IosDiagnosticsView,
+  ErrorDiagnosticsView,
+} from './components/MobileAndPlatformViews.tsx';
+import {
+  CodeIntelligenceView,
+  DesignIntelligenceView,
+  PerformanceLabView,
+  SecurityAuditView,
+  DependencyIntelligenceView,
+} from './components/DeepAnalysisViews.tsx';
+import {
+  AutoRepairCenterView,
+  VisualTestingView,
+  QualityGateView,
+  ProjectHistoryView,
+  EnvironmentManagerView,
+  SettingsAndMcpView,
+} from './components/RepairAndGateViews.tsx';
+
+interface NavItem {
+  id: DashboardModuleId;
+  label: string;
+  group: 'Core' | 'Mobile & Native' | 'Deep Analysis' | 'Repair & Delivery';
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+const NAVIGATION_MODULES: NavItem[] = [
+  { id: 'command-center', label: 'Command Center', group: 'Core', icon: LayoutDashboard },
+  { id: 'project-explorer', label: 'Project Explorer', group: 'Core', icon: FolderSearch },
+  { id: 'project-health', label: 'Project Health', group: 'Core', icon: Activity },
+  { id: 'rn-doctor', label: 'React Native Doctor', group: 'Mobile & Native', icon: Smartphone },
+  { id: 'android-diagnostics', label: 'Android Diagnostics', group: 'Mobile & Native', icon: Cpu },
+  { id: 'ios-diagnostics', label: 'iOS Diagnostics', group: 'Mobile & Native', icon: Layers },
+  { id: 'code-intelligence', label: 'Code Intelligence', group: 'Deep Analysis', icon: Code2 },
+  { id: 'design-intelligence', label: 'Design Intelligence', group: 'Deep Analysis', icon: Palette },
+  { id: 'performance-lab', label: 'Performance Lab', group: 'Deep Analysis', icon: Gauge },
+  { id: 'security-audit', label: 'Security Audit', group: 'Deep Analysis', icon: ShieldAlert },
+  { id: 'dependency-intelligence', label: 'Dependency Intelligence', group: 'Deep Analysis', icon: PackageCheck },
+  { id: 'error-diagnostics', label: 'Error Diagnostics', group: 'Repair & Delivery', icon: Bug },
+  { id: 'auto-repair', label: 'Auto Repair Center', group: 'Repair & Delivery', icon: Wrench },
+  { id: 'visual-testing', label: 'Visual Testing', group: 'Repair & Delivery', icon: Eye },
+  { id: 'quality-gate', label: 'Quality Gate', group: 'Repair & Delivery', icon: CheckSquare },
+  { id: 'project-history', label: 'Project History', group: 'Repair & Delivery', icon: History },
+  { id: 'environment-manager', label: 'Environment Manager', group: 'Repair & Delivery', icon: Server },
+  { id: 'settings', label: 'Settings', group: 'Repair & Delivery', icon: Settings },
+];
+
+export function App() {
+  const [projects, setProjects] = useState<ProjectIntelligenceReport[]>([]);
+  const [selectedProjectId, setSelectedProjectId] = useState<string>('rn-expo-commerce');
+  const [activeModule, setActiveModule] = useState<DashboardModuleId>('command-center');
+  const [environmentChecks, setEnvironmentChecks] = useState<EnvironmentCheckItem[]>([]);
+  const [mcpTools, setMcpTools] = useState<
+    { name: string; description: string; parameters: string[] }[]
+  >([]);
+  const [presetErrorLogs, setPresetErrorLogs] = useState<
+    { id: string; label: string; ecosystem: string; rawLog: string }[]
+  >([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [isBusy, setIsBusy] = useState<boolean>(false);
+  const [statusMessage, setStatusMessage] = useState<string | null>(null);
+  const [mobileNavOpen, setMobileNavOpen] = useState<boolean>(false);
+
+  const loadWorkspace = useCallback(async () => {
+    try {
+      const res = await fetch('/api/devintel/workspace');
+      const data = await res.json();
+      if (Array.isArray(data.projects)) {
+        setProjects(data.projects);
+      }
+      if (Array.isArray(data.environmentChecks)) {
+        setEnvironmentChecks(data.environmentChecks);
+      }
+      if (Array.isArray(data.mcpTools)) {
+        setMcpTools(data.mcpTools);
+      }
+      if (Array.isArray(data.presetErrorLogs)) {
+        setPresetErrorLogs(data.presetErrorLogs);
+      }
+    } catch (err) {
+      console.error('Failed to load DEVINTELLIGENCE workspace:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadWorkspace();
+  }, [loadWorkspace]);
+
+  const activeReport =
+    projects.find((p) => p.id === selectedProjectId) || projects[0] || null;
+
+  async function handleRunScan() {
+    if (!activeReport) return;
+    setIsBusy(true);
+    setStatusMessage(`Scanning ${activeReport.name}...`);
+    try {
+      const res = await fetch(`/api/devintel/projects/${activeReport.id}/scan`, {
+        method: 'POST',
+      });
+      const data = await res.json();
+      if (Array.isArray(data.projects)) {
+        setProjects(data.projects);
+      }
+      setStatusMessage(
+        `Scan completed in ${data.report?.scanDurationMs || 15}ms — ${data.report?.issues?.length ?? 0} findings verified.`
+      );
+    } finally {
+      setIsBusy(false);
+    }
+  }
+
+  async function handleFixIssue(issueId: string, allowReview = false) {
+    if (!activeReport) return;
+    setIsBusy(true);
+    setStatusMessage('Creating backup snapshot and applying repair...');
+    try {
+      const res = await fetch(`/api/devintel/projects/${activeReport.id}/repair`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ issueId, allowReviewTier: allowReview }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setStatusMessage(`Repair blocked: ${data.error}`);
+        return;
+      }
+      if (Array.isArray(data.projects)) {
+        setProjects(data.projects);
+      }
+      setStatusMessage(
+        `Repaired "${data.repairRecord.issueTitle}" and verified fix via re-scan.`
+      );
+    } finally {
+      setIsBusy(false);
+    }
+  }
+
+  async function handleFixAllSafe() {
+    if (!activeReport) return;
+    setIsBusy(true);
+    setStatusMessage('Applying all SAFE repairs with automatic disk backups...');
+    try {
+      const res = await fetch(
+        `/api/devintel/projects/${activeReport.id}/repair-all-safe`,
+        { method: 'POST' }
+      );
+      const data = await res.json();
+      if (Array.isArray(data.projects)) {
+        setProjects(data.projects);
+      }
+      setStatusMessage(
+        `Applied ${data.appliedRepairs?.length || 0} SAFE repair(s) and verified on disk.`
+      );
+    } finally {
+      setIsBusy(false);
+    }
+  }
+
+  async function handleRollbackRepair(repairId: string) {
+    if (!activeReport) return;
+    setIsBusy(true);
+    setStatusMessage('Restoring original file from backup snapshot...');
+    try {
+      const res = await fetch(`/api/devintel/projects/${activeReport.id}/rollback`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ repairId }),
+      });
+      const data = await res.json();
+      if (Array.isArray(data.projects)) {
+        setProjects(data.projects);
+      }
+      setStatusMessage(
+        `Rolled back "${data.restoredRecord?.issueTitle}" and restored original file.`
+      );
+    } finally {
+      setIsBusy(false);
+    }
+  }
+
+  async function handleRegisterProject(name: string, rootPath: string) {
+    setIsBusy(true);
+    try {
+      const res = await fetch('/api/devintel/projects/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, rootPath }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error || 'Failed to register project');
+      }
+      if (Array.isArray(data.projects)) {
+        setProjects(data.projects);
+      }
+      if (data.report?.id) {
+        setSelectedProjectId(data.report.id);
+      }
+      setStatusMessage(`Registered and scanned "${name}" (${data.report?.filesAnalyzed?.length || 0} files).`);
+    } finally {
+      setIsBusy(false);
+    }
+  }
+
+  async function handleUpdateQualityGate(cfg: Partial<QualityGateConfig>) {
+    if (!activeReport) return;
+    setIsBusy(true);
+    try {
+      const res = await fetch(
+        `/api/devintel/projects/${activeReport.id}/quality-gate`,
+        {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(cfg),
+        }
+      );
+      const data = await res.json();
+      if (Array.isArray(data.projects)) {
+        setProjects(data.projects);
+      }
+      setStatusMessage(
+        `Updated Quality Gate thresholds — Status: ${data.updatedReport?.qualityGateEvaluation?.passed ? 'PASSING' : 'FAILING'}`
+      );
+    } finally {
+      setIsBusy(false);
+    }
+  }
+
+  async function handleDiagnoseLog(rawLog: string): Promise<ErrorDiagnosisResult> {
+    const res = await fetch('/api/devintel/diagnose-log', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ rawLog }),
+    });
+    return res.json();
+  }
+
+  async function handleRefreshEnvironment() {
+    setIsBusy(true);
+    try {
+      const res = await fetch('/api/devintel/environment/refresh', {
+        method: 'POST',
+      });
+      const data = await res.json();
+      if (Array.isArray(data.environmentChecks)) {
+        setEnvironmentChecks(data.environmentChecks);
+      }
+      setStatusMessage('Re-probed host operating system and developer binaries.');
+    } finally {
+      setIsBusy(false);
+    }
+  }
+
+  async function handleCallMcpTool(
+    toolName: string,
+    args: Record<string, string>
+  ): Promise<unknown> {
+    const res = await fetch('/api/devintel/mcp/call', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ toolName, args }),
+    });
+    const data = await res.json();
+    if (Array.isArray(data.projects)) {
+      setProjects(data.projects);
+    }
+    return data.output;
+  }
+
+  if (loading || !activeReport) {
+    return (
+      <div className="min-h-screen bg-[#090D16] text-slate-100 flex items-center justify-center p-6">
+        <div className="text-center space-y-2">
+          <div className="text-sm font-semibold tracking-wide text-slate-200">
+            DEVINTELLIGENCE
+          </div>
+          <div className="text-xs text-slate-400 font-mono">
+            Initializing local engineering intelligence engines...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const groups = ['Core', 'Mobile & Native', 'Deep Analysis', 'Repair & Delivery'] as const;
+
+  return (
+    <div className="min-h-screen bg-[#090D16] text-slate-100 flex flex-col">
+      {/* Top Bar Contract: 3 Zones Separated by gap-8 */}
+      <header className="flex items-center justify-between gap-8 px-6 py-3.5 bg-[#090D16] border-b border-slate-800/90 sticky top-0 z-30">
+        {/* Zone 1: Single text element wordmark */}
+        <a
+          href="#top"
+          onClick={(e) => {
+            e.preventDefault();
+            setActiveModule('command-center');
+          }}
+          className="text-base font-bold tracking-tight text-slate-100 whitespace-nowrap shrink-0"
+        >
+          DEVINTELLIGENCE
+        </a>
+
+        {/* Zone 2: 5 concise single-line text navigation links */}
+        <nav
+          aria-label="Primary Shortcuts"
+          className="hidden md:flex items-center gap-6 text-xs font-medium text-slate-400"
+        >
+          <a
+            href="#command-center"
+            onClick={(e) => {
+              e.preventDefault();
+              setActiveModule('command-center');
+            }}
+            className={`hover:text-slate-100 hover:underline underline-offset-4 transition-colors whitespace-nowrap shrink-0 ${
+              activeModule === 'command-center' ? 'text-slate-100' : ''
+            }`}
+          >
+            Command Center
+          </a>
+          <a
+            href="#rn-doctor"
+            onClick={(e) => {
+              e.preventDefault();
+              setActiveModule('rn-doctor');
+            }}
+            className={`hover:text-slate-100 hover:underline underline-offset-4 transition-colors whitespace-nowrap shrink-0 ${
+              activeModule === 'rn-doctor' ? 'text-slate-100' : ''
+            }`}
+          >
+            React Native Doctor
+          </a>
+          <a
+            href="#auto-repair"
+            onClick={(e) => {
+              e.preventDefault();
+              setActiveModule('auto-repair');
+            }}
+            className={`hover:text-slate-100 hover:underline underline-offset-4 transition-colors whitespace-nowrap shrink-0 ${
+              activeModule === 'auto-repair' ? 'text-slate-100' : ''
+            }`}
+          >
+            Auto Repair Center
+          </a>
+          <a
+            href="#error-diagnostics"
+            onClick={(e) => {
+              e.preventDefault();
+              setActiveModule('error-diagnostics');
+            }}
+            className={`hover:text-slate-100 hover:underline underline-offset-4 transition-colors whitespace-nowrap shrink-0 ${
+              activeModule === 'error-diagnostics' ? 'text-slate-100' : ''
+            }`}
+          >
+            Error Diagnostics
+          </a>
+          <a
+            href="#quality-gate"
+            onClick={(e) => {
+              e.preventDefault();
+              setActiveModule('quality-gate');
+            }}
+            className={`hover:text-slate-100 hover:underline underline-offset-4 transition-colors whitespace-nowrap shrink-0 ${
+              activeModule === 'quality-gate' ? 'text-slate-100' : ''
+            }`}
+          >
+            Quality Gate
+          </a>
+        </nav>
+
+        {/* Zone 3: 1 Primary Action */}
+        <div className="flex items-center gap-3 shrink-0">
+          <button
+            type="button"
+            disabled={isBusy}
+            onClick={handleRunScan}
+            className="px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 disabled:opacity-50 rounded-lg transition-colors whitespace-nowrap shrink-0 cursor-pointer"
+          >
+            {isBusy ? 'Scanning...' : 'Run Deep Scan'}
+          </button>
+        </div>
+      </header>
+
+      {/* Main Workstation Layout: Sidebar + Content Viewport */}
+      <div className="flex-1 flex min-h-0">
+        {/* Sidebar Navigation (Desktop 256px) */}
+        <aside
+          aria-label="Workstation Modules"
+          className="hidden lg:flex lg:flex-col w-64 shrink-0 bg-[#0B101B] border-r border-slate-800/80 py-5 px-3 space-y-6 overflow-y-auto"
+        >
+          <div className="px-3 space-y-1.5">
+            <label
+              htmlFor="sidebar-project-select"
+              className="block text-[11px] font-medium text-slate-400"
+            >
+              Active Local Project
+            </label>
+            <select
+              id="sidebar-project-select"
+              value={activeReport.id}
+              onChange={(e) => setSelectedProjectId(e.target.value)}
+              className="w-full px-2.5 py-2 text-xs font-medium bg-slate-900 border border-slate-800 rounded-md text-slate-100 focus:outline-none focus:border-blue-500"
+            >
+              {projects.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.name}
+                </option>
+              ))}
+            </select>
+            <div className="text-[11px] text-slate-500 font-mono pt-0.5">
+              Understand. Diagnose. Repair. Optimize.
+            </div>
+          </div>
+
+          {groups.map((grp) => (
+            <div key={grp} className="space-y-1">
+              <div className="px-3 text-[11px] font-medium text-slate-500">
+                {grp}
+              </div>
+              {NAVIGATION_MODULES.filter((m) => m.group === grp).map((mod) => {
+                const Icon = mod.icon;
+                const isActive = activeModule === mod.id;
+                return (
+                  <button
+                    key={mod.id}
+                    type="button"
+                    onClick={() => setActiveModule(mod.id)}
+                    className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${
+                      isActive
+                        ? 'bg-blue-600/15 text-blue-400'
+                        : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/50'
+                    }`}
+                  >
+                    <Icon className="w-4 h-4 shrink-0" />
+                    <span className="truncate">{mod.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          ))}
+        </aside>
+
+        {/* Main Workspace Content Area */}
+        <div className="flex-1 flex flex-col min-w-0">
+          {/* Contextual Sub-Toolbar for Mobile Navigation & Active Project Context */}
+          <div className="px-6 py-3 bg-[#0B101B] border-b border-slate-800/80 flex flex-wrap items-center justify-between gap-3">
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                aria-label="Toggle Modules Menu"
+                onClick={() => setMobileNavOpen(!mobileNavOpen)}
+                className="lg:hidden inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-slate-200 bg-slate-900 border border-slate-800 rounded"
+              >
+                {mobileNavOpen ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
+                <span>Modules</span>
+              </button>
+
+              <div className="text-xs text-slate-400 font-mono">
+                <span className="text-slate-300 font-semibold">
+                  {NAVIGATION_MODULES.find((m) => m.id === activeModule)?.label}
+                </span>
+                <span className="mx-2 text-slate-600">/</span>
+                <span>{activeReport.id}</span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3 min-w-0">
+              {statusMessage && (
+                <div
+                  role="status"
+                  className="text-xs text-blue-300 font-mono truncate max-w-[240px] sm:max-w-md"
+                >
+                  {statusMessage}
+                </div>
+              )}
+              <div className="lg:hidden">
+                <label htmlFor="mobile-project-select" className="sr-only">
+                  Select Active Project
+                </label>
+                <select
+                  id="mobile-project-select"
+                  value={activeReport.id}
+                  onChange={(e) => setSelectedProjectId(e.target.value)}
+                  className="px-2.5 py-1.5 text-xs bg-slate-900 border border-slate-800 rounded text-slate-100"
+                >
+                  {projects.map((p) => (
+                    <option key={p.id} value={p.id}>
+                      {p.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </div>
+
+          {/* Mobile Drawer Navigation */}
+          {mobileNavOpen && (
+            <div className="lg:hidden bg-slate-900 border-b border-slate-800 p-4 grid grid-cols-2 sm:grid-cols-3 gap-2">
+              {NAVIGATION_MODULES.map((mod) => {
+                const Icon = mod.icon;
+                return (
+                  <button
+                    key={mod.id}
+                    type="button"
+                    onClick={() => {
+                      setActiveModule(mod.id);
+                      setMobileNavOpen(false);
+                    }}
+                    className={`flex items-center gap-2 px-3 py-2 rounded text-xs font-medium text-left ${
+                      activeModule === mod.id
+                        ? 'bg-blue-600 text-white'
+                        : 'text-slate-300 hover:bg-slate-800'
+                    }`}
+                  >
+                    <Icon className="w-3.5 h-3.5 shrink-0" />
+                    <span className="truncate">{mod.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Active Module Viewport */}
+          <main className="flex-1 p-6 lg:p-8 max-w-7xl w-full mx-auto">
+            {activeModule === 'command-center' && (
+              <CommandCenterView
+                report={activeReport}
+                allProjects={projects}
+                onSelectProject={setSelectedProjectId}
+                onNavigateModule={setActiveModule}
+                onRunScan={handleRunScan}
+                onFixAllSafe={handleFixAllSafe}
+                onFixIssue={handleFixIssue}
+                onRegisterProject={handleRegisterProject}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'project-explorer' && (
+              <ProjectExplorerView
+                report={activeReport}
+                allProjects={projects}
+                onSelectProject={setSelectedProjectId}
+                onNavigateModule={setActiveModule}
+                onRunScan={handleRunScan}
+                onFixAllSafe={handleFixAllSafe}
+                onFixIssue={handleFixIssue}
+                onRegisterProject={handleRegisterProject}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'project-health' && (
+              <ProjectHealthView
+                report={activeReport}
+                allProjects={projects}
+                onSelectProject={setSelectedProjectId}
+                onNavigateModule={setActiveModule}
+                onRunScan={handleRunScan}
+                onFixAllSafe={handleFixAllSafe}
+                onFixIssue={handleFixIssue}
+                onRegisterProject={handleRegisterProject}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'rn-doctor' && (
+              <ReactNativeDoctorView
+                report={activeReport}
+                onFixIssue={handleFixIssue}
+                presetErrorLogs={presetErrorLogs}
+                onDiagnoseLog={handleDiagnoseLog}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'android-diagnostics' && (
+              <AndroidDiagnosticsView
+                report={activeReport}
+                onFixIssue={handleFixIssue}
+                presetErrorLogs={presetErrorLogs}
+                onDiagnoseLog={handleDiagnoseLog}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'ios-diagnostics' && (
+              <IosDiagnosticsView
+                report={activeReport}
+                onFixIssue={handleFixIssue}
+                presetErrorLogs={presetErrorLogs}
+                onDiagnoseLog={handleDiagnoseLog}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'code-intelligence' && (
+              <CodeIntelligenceView
+                report={activeReport}
+                onFixIssue={handleFixIssue}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'design-intelligence' && (
+              <DesignIntelligenceView
+                report={activeReport}
+                onFixIssue={handleFixIssue}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'performance-lab' && (
+              <PerformanceLabView
+                report={activeReport}
+                onFixIssue={handleFixIssue}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'security-audit' && (
+              <SecurityAuditView
+                report={activeReport}
+                onFixIssue={handleFixIssue}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'dependency-intelligence' && (
+              <DependencyIntelligenceView
+                report={activeReport}
+                onFixIssue={handleFixIssue}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'error-diagnostics' && (
+              <ErrorDiagnosticsView
+                report={activeReport}
+                onFixIssue={handleFixIssue}
+                presetErrorLogs={presetErrorLogs}
+                onDiagnoseLog={handleDiagnoseLog}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'auto-repair' && (
+              <AutoRepairCenterView
+                report={activeReport}
+                environmentChecks={environmentChecks}
+                mcpTools={mcpTools}
+                onFixIssue={handleFixIssue}
+                onFixAllSafe={handleFixAllSafe}
+                onRollbackRepair={handleRollbackRepair}
+                onUpdateQualityGate={handleUpdateQualityGate}
+                onRefreshEnvironment={handleRefreshEnvironment}
+                onCallMcpTool={handleCallMcpTool}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'visual-testing' && (
+              <VisualTestingView
+                report={activeReport}
+                environmentChecks={environmentChecks}
+                mcpTools={mcpTools}
+                onFixIssue={handleFixIssue}
+                onFixAllSafe={handleFixAllSafe}
+                onRollbackRepair={handleRollbackRepair}
+                onUpdateQualityGate={handleUpdateQualityGate}
+                onRefreshEnvironment={handleRefreshEnvironment}
+                onCallMcpTool={handleCallMcpTool}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'quality-gate' && (
+              <QualityGateView
+                report={activeReport}
+                environmentChecks={environmentChecks}
+                mcpTools={mcpTools}
+                onFixIssue={handleFixIssue}
+                onFixAllSafe={handleFixAllSafe}
+                onRollbackRepair={handleRollbackRepair}
+                onUpdateQualityGate={handleUpdateQualityGate}
+                onRefreshEnvironment={handleRefreshEnvironment}
+                onCallMcpTool={handleCallMcpTool}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'project-history' && (
+              <ProjectHistoryView
+                report={activeReport}
+                environmentChecks={environmentChecks}
+                mcpTools={mcpTools}
+                onFixIssue={handleFixIssue}
+                onFixAllSafe={handleFixAllSafe}
+                onRollbackRepair={handleRollbackRepair}
+                onUpdateQualityGate={handleUpdateQualityGate}
+                onRefreshEnvironment={handleRefreshEnvironment}
+                onCallMcpTool={handleCallMcpTool}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'environment-manager' && (
+              <EnvironmentManagerView
+                report={activeReport}
+                environmentChecks={environmentChecks}
+                mcpTools={mcpTools}
+                onFixIssue={handleFixIssue}
+                onFixAllSafe={handleFixAllSafe}
+                onRollbackRepair={handleRollbackRepair}
+                onUpdateQualityGate={handleUpdateQualityGate}
+                onRefreshEnvironment={handleRefreshEnvironment}
+                onCallMcpTool={handleCallMcpTool}
+                isBusy={isBusy}
+              />
+            )}
+
+            {activeModule === 'settings' && (
+              <SettingsAndMcpView
+                report={activeReport}
+                environmentChecks={environmentChecks}
+                mcpTools={mcpTools}
+                onFixIssue={handleFixIssue}
+                onFixAllSafe={handleFixAllSafe}
+                onRollbackRepair={handleRollbackRepair}
+                onUpdateQualityGate={handleUpdateQualityGate}
+                onRefreshEnvironment={handleRefreshEnvironment}
+                onCallMcpTool={handleCallMcpTool}
+                isBusy={isBusy}
+              />
+            )}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;