devintelligence 1.0.0 → 1.0.1

package/src/components/RepairAndGateViews.tsx

@@ -1,814 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Wrench,
-  RotateCcw,
-  CheckCircle2,
-  AlertTriangle,
-  XCircle,
-  Eye,
-  ShieldCheck,
-  History,
-  Server,
-  Terminal,
-  RefreshCw,
-  Play,
-} from 'lucide-react';
-import {
-  EnvironmentCheckItem,
-  ProjectIntelligenceReport,
-  QualityGateConfig,
-  RepairTier,
-} from '../types/devintelligence.ts';
-import { SeverityText } from './OverviewAndExplorerViews.tsx';
-import { StatusIndicator } from './MobileAndPlatformViews.tsx';
-
-interface RepairGateProps {
-  report: ProjectIntelligenceReport;
-  environmentChecks: EnvironmentCheckItem[];
-  mcpTools: { name: string; description: string; parameters: string[] }[];
-  onFixIssue: (issueId: string, allowReview?: boolean) => void;
-  onFixAllSafe: () => void;
-  onRollbackRepair: (repairId: string) => void;
-  onUpdateQualityGate: (cfg: Partial<QualityGateConfig>) => Promise<void>;
-  onRefreshEnvironment: () => Promise<void>;
-  onCallMcpTool: (toolName: string, args: Record<string, string>) => Promise<unknown>;
-  isBusy: boolean;
-}
-
-export function AutoRepairCenterView({
-  report,
-  onFixIssue,
-  onFixAllSafe,
-  onRollbackRepair,
-  isBusy,
-}: RepairGateProps) {
-  const [tierFilter, setTierFilter] = useState<'ALL' | RepairTier>('ALL');
-  const [selectedIssueId, setSelectedIssueId] = useState<string | null>(
-    report.issues[0]?.id || null
-  );
-
-  const filteredIssues = report.issues.filter((i) =>
-    tierFilter === 'ALL' ? true : i.repairTier === tierFilter
-  );
-
-  const activeIssue =
-    filteredIssues.find((i) => i.id === selectedIssueId) || filteredIssues[0] || null;
-
-  const safeFixableCount = report.issues.filter(
-    (i) => i.fixAvailable && i.repairTier === 'SAFE'
-  ).length;
-
-  return (
-    <div className="space-y-8">
-      <div className="pb-5 border-b border-slate-800/80 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-        <div>
-          <h1 className="text-xl font-bold text-slate-100">
-            Automatic Repair Center & Backup Rollback Engine
-          </h1>
-          <p className="text-xs text-slate-400 mt-1">
-            Every repair creates a timestamped backup snapshot in <code className="font-mono text-slate-200">.devintelligence/backups/</code>, applies the patch on disk, and re-scans the repository to verify resolution.
-          </p>
-        </div>
-
-        <div className="flex flex-wrap items-center gap-3 shrink-0">
-          {safeFixableCount > 0 && (
-            <button
-              type="button"
-              disabled={isBusy}
-              onClick={onFixAllSafe}
-              className="inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 disabled:opacity-50 rounded-lg transition-colors cursor-pointer whitespace-nowrap"
-            >
-              <Wrench className="w-3.5 h-3.5" />
-              <span>Fix All Safe Issues ({safeFixableCount})</span>
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Interactive Tier Filter Segmented Control */}
-      <div className="flex flex-wrap items-center justify-between gap-4">
-        <div className="flex items-center gap-1 p-1 bg-slate-900 border border-slate-800 rounded-lg">
-          {(['ALL', 'SAFE', 'REVIEW_REQUIRED', 'RISKY'] as const).map((tier) => (
-            <button
-              key={tier}
-              type="button"
-              onClick={() => setTierFilter(tier)}
-              className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors cursor-pointer whitespace-nowrap ${
-                tierFilter === tier
-                  ? 'bg-blue-600 text-white'
-                  : 'text-slate-400 hover:text-slate-100'
-              }`}
-            >
-              {tier === 'ALL'
-                ? `All Findings (${report.issues.length})`
-                : `${tier} (${report.issues.filter((i) => i.repairTier === tier).length})`}
-            </button>
-          ))}
-        </div>
-
-        <div className="text-xs text-slate-400 font-mono tabular-nums">
-          Applied Repairs in Session: {report.repairHistory.filter((r) => !r.rolledBack).length}
-        </div>
-      </div>
-
-      {/* Master-Detail Issue List & Before/After Code Diff Preview */}
-      {filteredIssues.length === 0 ? (
-        <div className="p-8 bg-slate-900/50 border border-slate-800 rounded-lg text-center space-y-2">
-          <CheckCircle2 className="w-6 h-6 text-emerald-400 mx-auto" />
-          <div className="text-sm font-semibold text-slate-100">
-            No Pending Issues in {tierFilter} Category
-          </div>
-          <p className="text-xs text-slate-400">
-            All matching issues have been repaired and verified. Check the Applied Repairs & Rollback log below to undo any modification.
-          </p>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
-          {/* Left Column: Issue Queue */}
-          <div className="lg:col-span-5 bg-slate-900/70 border border-slate-800/80 rounded-lg divide-y divide-slate-800/70">
-            {filteredIssues.map((issue) => {
-              const isSelected = activeIssue?.id === issue.id;
-              return (
-                <button
-                  key={issue.id}
-                  type="button"
-                  onClick={() => setSelectedIssueId(issue.id)}
-                  className={`w-full p-4 text-left transition-colors cursor-pointer ${
-                    isSelected ? 'bg-blue-950/35' : 'hover:bg-slate-800/50'
-                  }`}
-                >
-                  <div className="flex items-center justify-between gap-2 text-xs">
-                    <SeverityText severity={issue.severity} />
-                    <span className="font-mono text-slate-400">
-                      {issue.repairTier} · {issue.confidence}%
-                    </span>
-                  </div>
-                  <div className="mt-1.5 text-xs font-semibold text-slate-100">
-                    {issue.title}
-                  </div>
-                  <div className="mt-1 text-[11px] font-mono text-slate-400 truncate">
-                    {issue.filePath}:{issue.line}
-                  </div>
-                </button>
-              );
-            })}
-          </div>
-
-          {/* Right Column: Before / After Comparison & Execute Fix */}
-          {activeIssue && (
-            <div className="lg:col-span-7 p-6 bg-slate-900/70 border border-slate-800/80 rounded-lg space-y-5">
-              <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 pb-4 border-b border-slate-800">
-                <div className="space-y-1">
-                  <div className="flex items-center gap-2 text-xs font-mono text-slate-400">
-                    <span>{activeIssue.ruleId}</span>
-                    <span>·</span>
-                    <span>{activeIssue.filePath}:{activeIssue.line}</span>
-                    <span>·</span>
-                    <span>Confidence {activeIssue.confidence}%</span>
-                  </div>
-                  <h2 className="text-base font-bold text-slate-100">
-                    {activeIssue.title}
-                  </h2>
-                </div>
-
-                {activeIssue.fixAvailable && (
-                  <button
-                    type="button"
-                    disabled={isBusy}
-                    onClick={() =>
-                      onFixIssue(
-                        activeIssue.id,
-                        activeIssue.repairTier !== 'SAFE'
-                      )
-                    }
-                    className="px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 disabled:opacity-50 rounded-lg shrink-0 cursor-pointer whitespace-nowrap"
-                  >
-                    {activeIssue.repairTier === 'SAFE'
-                      ? 'Apply Safe Fix Now'
-                      : 'Approve & Execute Fix'}
-                  </button>
-                )}
-              </div>
-
-              <div className="space-y-2 text-xs">
-                <div>
-                  <span className="font-semibold text-slate-200">Root Cause: </span>
-                  <span className="text-slate-300">{activeIssue.rootCause}</span>
-                </div>
-                <div>
-                  <span className="font-semibold text-slate-200">Engineering Explanation: </span>
-                  <span className="text-slate-400">{activeIssue.explanation}</span>
-                </div>
-                <div>
-                  <span className="font-semibold text-blue-300">Recommended Repair: </span>
-                  <span className="text-slate-200">{activeIssue.recommendedRepair}</span>
-                </div>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div className="space-y-1.5">
-                  <div className="text-xs font-semibold text-red-400">
-                    Before (Current File State)
-                  </div>
-                  <pre className="p-3 bg-slate-950 border border-slate-800 rounded text-[11px] font-mono text-red-200/90 overflow-x-auto">
-                    {activeIssue.beforeSnippet}
-                  </pre>
-                </div>
-
-                <div className="space-y-1.5">
-                  <div className="text-xs font-semibold text-emerald-400">
-                    After (Proposed Safe Patch)
-                  </div>
-                  <pre className="p-3 bg-slate-950 border border-slate-800 rounded text-[11px] font-mono text-emerald-200/90 overflow-x-auto">
-                    {activeIssue.afterSnippet}
-                  </pre>
-                </div>
-              </div>
-
-              <div className="space-y-1.5">
-                <div className="text-xs font-semibold text-slate-300">
-                  Unified Git Patch Preview
-                </div>
-                <pre className="p-3 bg-slate-950 border border-slate-800 rounded text-[11px] font-mono text-slate-300 overflow-x-auto">
-                  {activeIssue.unifiedDiff}
-                </pre>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Applied Repairs & 1-Click Rollback Section */}
-      <div className="space-y-3 pt-4 border-t border-slate-800/80">
-        <h2 className="text-base font-semibold text-slate-100">
-          Applied Repairs & Backup Snapshots ({report.repairHistory.length})
-        </h2>
-        {report.repairHistory.length === 0 ? (
-          <div className="p-5 bg-slate-900/40 border border-slate-800 rounded-lg text-xs text-slate-400">
-            No file modifications have been executed on {report.name} yet. Click "Apply Safe Fix" above to test automatic backup, patching, verification, and rollback.
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {report.repairHistory.map((rec) => (
-              <div
-                key={rec.id}
-                className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"
-              >
-                <div className="space-y-1">
-                  <div className="flex items-center gap-2 text-xs font-mono">
-                    <span
-                      className={
-                        rec.rolledBack
-                          ? 'text-amber-400 font-semibold'
-                          : 'text-emerald-400 font-semibold'
-                      }
-                    >
-                      {rec.rolledBack ? 'ROLLED BACK' : 'VERIFIED FIXED'}
-                    </span>
-                    <span className="text-slate-500">·</span>
-                    <span className="text-slate-300">{rec.filePath}</span>
-                    <span className="text-slate-500">·</span>
-                    <span className="text-slate-400">{new Date(rec.appliedAt).toLocaleTimeString()}</span>
-                  </div>
-                  <div className="text-sm font-semibold text-slate-100">{rec.issueTitle}</div>
-                  <div className="text-[11px] font-mono text-slate-400">
-                    Backup Snapshot: {rec.backupPath}
-                  </div>
-                </div>
-
-                {!rec.rolledBack && (
-                  <button
-                    type="button"
-                    disabled={isBusy}
-                    onClick={() => onRollbackRepair(rec.id)}
-                    className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-medium text-amber-300 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg shrink-0 cursor-pointer whitespace-nowrap"
-                  >
-                    <RotateCcw className="w-3.5 h-3.5" />
-                    <span>Rollback Repair</span>
-                  </button>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function VisualTestingView({ report }: RepairGateProps) {
-  return (
-    <div className="space-y-8">
-      <div className="pb-5 border-b border-slate-800/80">
-        <h1 className="text-xl font-bold text-slate-100">
-          Visual Regression & Responsive Viewport Testing
-        </h1>
-        <p className="text-xs text-slate-400 mt-1">
-          Engine: {report.visualTesting.engine} · Inspects layout overflow, broken/unoptimized image assets, and responsive geometry across Desktop (1440×900) and Mobile (390×844).
-        </p>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {report.visualTesting.viewportsTested.map((vp) => (
-          <div
-            key={vp.label}
-            className="p-5 bg-slate-900/70 border border-slate-800/80 rounded-lg space-y-4"
-          >
-            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
-              <div>
-                <div className="text-sm font-semibold text-slate-100">{vp.label}</div>
-                <div className="text-xs font-mono text-slate-400">
-                  {vp.width}px × {vp.height}px
-                </div>
-              </div>
-              <span
-                className={`text-xs font-mono font-semibold ${
-                  vp.status === 'pass' ? 'text-emerald-400' : 'text-amber-400'
-                }`}
-              >
-                {vp.status === 'pass' ? 'PASS (0.0% diff)' : `WARNING (${vp.diffPercentage}% diff)`}
-              </span>
-            </div>
-
-            <div className="grid grid-cols-2 gap-3 text-xs font-mono tabular-nums">
-              <div className="p-3 bg-slate-950 rounded border border-slate-800/70">
-                <div className="text-slate-400">Horizontal Overflow</div>
-                <div className="mt-1 text-slate-200">
-                  {vp.overflowDetected ? 'Detected' : 'None (0px)'}
-                </div>
-              </div>
-              <div className="p-3 bg-slate-950 rounded border border-slate-800/70">
-                <div className="text-slate-400">Unoptimized / Broken Images</div>
-                <div className="mt-1 text-slate-200">{vp.brokenImagesCount}</div>
-              </div>
-              <div className="p-3 bg-slate-950 rounded border border-slate-800/70">
-                <div className="text-slate-400">Runtime Console Risks</div>
-                <div className="mt-1 text-slate-200">{vp.consoleErrorsCount}</div>
-              </div>
-              <div className="p-3 bg-slate-950 rounded border border-slate-800/70">
-                <div className="text-slate-400">Network Failures</div>
-                <div className="mt-1 text-slate-200">{vp.networkFailuresCount}</div>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="space-y-3">
-        <h2 className="text-base font-semibold text-slate-100">
-          Visual & DOM Layout Regression Findings ({report.visualTesting.findings.length})
-        </h2>
-        {report.visualTesting.findings.length === 0 ? (
-          <div className="p-6 bg-slate-900/50 border border-slate-800 rounded-lg text-xs text-emerald-400">
-            Zero layout overflow, broken image, or icon baseline regressions detected.
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {report.visualTesting.findings.map((f, idx) => (
-              <div
-                key={idx}
-                className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg space-y-1.5 text-xs"
-              >
-                <div className="font-mono text-blue-400">
-                  Viewport {f.viewport} · Selector: {f.selector}
-                </div>
-                <div className="font-semibold text-slate-100">{f.description}</div>
-                <div className="text-slate-400">Recommendation: {f.recommendation}</div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function QualityGateView({
-  report,
-  onUpdateQualityGate,
-  isBusy,
-}: RepairGateProps) {
-  const [minCode, setMinCode] = useState(report.qualityGateConfig.minCodeQuality);
-  const [minDesign, setMinDesign] = useState(report.qualityGateConfig.minDesignQuality);
-  const [minPerf, setMinPerf] = useState(report.qualityGateConfig.minPerformanceScore);
-  const [maxCrit, setMaxCrit] = useState(report.qualityGateConfig.maxCriticalIssues);
-  const [maxSec, setMaxSec] = useState(report.qualityGateConfig.maxSecurityIssues);
-
-  async function handleSaveGate(e: React.FormEvent) {
-    e.preventDefault();
-    await onUpdateQualityGate({
-      minCodeQuality: Number(minCode),
-      minDesignQuality: Number(minDesign),
-      minPerformanceScore: Number(minPerf),
-      maxCriticalIssues: Number(maxCrit),
-      maxSecurityIssues: Number(maxSec),
-    });
-  }
-
-  const evalState = report.qualityGateEvaluation;
-
-  return (
-    <div className="space-y-8">
-      <div className="pb-5 border-b border-slate-800/80 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <div>
-          <h1 className="text-xl font-bold text-slate-100">
-            Quality Gate & CI/CD Pipeline Integration
-          </h1>
-          <p className="text-xs text-slate-400 mt-1">
-            Enforces minimum engineering quality thresholds in pre-commit hooks and GitHub Actions with deterministic exit codes.
-          </p>
-        </div>
-
-        <div className="font-mono text-xs tabular-nums">
-          Gate Status:{' '}
-          <strong className={evalState.passed ? 'text-emerald-400' : 'text-red-400'}>
-            {evalState.passed ? 'PASSING (Exit Code 0)' : 'FAILING (Exit Code 1)'}
-          </strong>
-        </div>
-      </div>
-
-      {/* Evaluation Table */}
-      <div className="overflow-x-auto border border-slate-800/80 rounded-lg bg-slate-900/50">
-        <table className="w-full text-left border-collapse text-xs">
-          <thead>
-            <tr className="border-b border-slate-800 text-[11px] text-slate-400">
-              <th className="py-2.5 px-4">Quality Gate Metric</th>
-              <th className="py-2.5 px-4">Measured Value</th>
-              <th className="py-2.5 px-4">Required Threshold</th>
-              <th className="py-2.5 px-4">Evaluation</th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-slate-800/60 font-mono tabular-nums">
-            {evalState.checks.map((c) => (
-              <tr key={c.name}>
-                <td className="py-3 px-4 font-sans font-semibold text-slate-100">{c.name}</td>
-                <td className="py-3 px-4 text-slate-200">{c.actual}</td>
-                <td className="py-3 px-4 text-slate-400">{c.threshold}</td>
-                <td className="py-3 px-4">
-                  <span className={c.passed ? 'text-emerald-400' : 'text-red-400'}>
-                    {c.passed ? 'PASS' : 'FAIL'}
-                  </span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      {/* Configure Thresholds Form */}
-      <form
-        onSubmit={handleSaveGate}
-        className="p-5 bg-slate-900/70 border border-slate-800/80 rounded-lg space-y-4"
-      >
-        <div className="text-sm font-semibold text-slate-100">
-          Configure Quality Gate Thresholds for {report.name}
-        </div>
-        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 text-xs">
-          <div>
-            <label htmlFor="gate-code" className="block text-slate-400 mb-1">
-              Min Code Quality
-            </label>
-            <input
-              id="gate-code"
-              type="number"
-              min={0}
-              max={100}
-              value={minCode}
-              onChange={(e) => setMinCode(Number(e.target.value))}
-              className="w-full px-3 py-2 font-mono bg-slate-950 border border-slate-800 rounded text-slate-100"
-            />
-          </div>
-          <div>
-            <label htmlFor="gate-design" className="block text-slate-400 mb-1">
-              Min Design Score
-            </label>
-            <input
-              id="gate-design"
-              type="number"
-              min={0}
-              max={100}
-              value={minDesign}
-              onChange={(e) => setMinDesign(Number(e.target.value))}
-              className="w-full px-3 py-2 font-mono bg-slate-950 border border-slate-800 rounded text-slate-100"
-            />
-          </div>
-          <div>
-            <label htmlFor="gate-perf" className="block text-slate-400 mb-1">
-              Min Performance
-            </label>
-            <input
-              id="gate-perf"
-              type="number"
-              min={0}
-              max={100}
-              value={minPerf}
-              onChange={(e) => setMinPerf(Number(e.target.value))}
-              className="w-full px-3 py-2 font-mono bg-slate-950 border border-slate-800 rounded text-slate-100"
-            />
-          </div>
-          <div>
-            <label htmlFor="gate-crit" className="block text-slate-400 mb-1">
-              Max Critical Issues
-            </label>
-            <input
-              id="gate-crit"
-              type="number"
-              min={0}
-              max={50}
-              value={maxCrit}
-              onChange={(e) => setMaxCrit(Number(e.target.value))}
-              className="w-full px-3 py-2 font-mono bg-slate-950 border border-slate-800 rounded text-slate-100"
-            />
-          </div>
-          <div>
-            <label htmlFor="gate-sec" className="block text-slate-400 mb-1">
-              Max Security Issues
-            </label>
-            <input
-              id="gate-sec"
-              type="number"
-              min={0}
-              max={50}
-              value={maxSec}
-              onChange={(e) => setMaxSec(Number(e.target.value))}
-              className="w-full px-3 py-2 font-mono bg-slate-950 border border-slate-800 rounded text-slate-100"
-            />
-          </div>
-        </div>
-        <div className="flex justify-end">
-          <button
-            type="submit"
-            disabled={isBusy}
-            className="px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg cursor-pointer"
-          >
-            Save & Re-Evaluate Quality Gate
-          </button>
-        </div>
-      </form>
-
-      {/* CI/CD YAML & Pre-Commit Hook */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="space-y-2">
-          <div className="text-xs font-semibold text-slate-200">
-            GitHub Actions Workflow (.github/workflows/devintelligence-gate.yml)
-          </div>
-          <pre className="p-4 bg-slate-950 border border-slate-800 rounded-lg text-[11px] font-mono text-slate-300 overflow-x-auto">
-            {evalState.githubActionsYaml}
-          </pre>
-        </div>
-
-        <div className="space-y-2">
-          <div className="text-xs font-semibold text-slate-200">
-            Git Pre-Commit Hook (.git/hooks/pre-commit)
-          </div>
-          <pre className="p-4 bg-slate-950 border border-slate-800 rounded-lg text-[11px] font-mono text-slate-300 overflow-x-auto">
-            {evalState.preCommitHookScript}
-          </pre>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function ProjectHistoryView({
-  report,
-  onRollbackRepair,
-  isBusy,
-}: RepairGateProps) {
-  return (
-    <div className="space-y-8">
-      <div className="pb-5 border-b border-slate-800/80">
-        <h1 className="text-xl font-bold text-slate-100">
-          Project Scan & Repair History ({report.name})
-        </h1>
-        <p className="text-xs text-slate-400 mt-1">
-          Isolated per-project audit trail of scan snapshots, score progression, and reversible file repairs.
-        </p>
-      </div>
-
-      <div className="space-y-3">
-        <h2 className="text-base font-semibold text-slate-100">
-          Scan History Snapshots ({report.scanHistory.length})
-        </h2>
-        <div className="overflow-x-auto border border-slate-800/80 rounded-lg bg-slate-900/50">
-          <table className="w-full text-left border-collapse text-xs font-mono tabular-nums">
-            <thead>
-              <tr className="border-b border-slate-800 text-[11px] font-sans text-slate-400">
-                <th className="py-2.5 px-4">Snapshot ID</th>
-                <th className="py-2.5 px-4">Timestamp</th>
-                <th className="py-2.5 px-4">Duration</th>
-                <th className="py-2.5 px-4">Issues</th>
-                <th className="py-2.5 px-4">Critical</th>
-                <th className="py-2.5 px-4">Overall Score</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-slate-800/60">
-              {report.scanHistory.map((snap) => (
-                <tr key={snap.id}>
-                  <td className="py-3 px-4 text-slate-200">{snap.id}</td>
-                  <td className="py-3 px-4 text-slate-400">
-                    {new Date(snap.scannedAt).toLocaleTimeString()}
-                  </td>
-                  <td className="py-3 px-4 text-slate-300">{snap.durationMs}ms</td>
-                  <td className="py-3 px-4 text-amber-400">{snap.totalIssues}</td>
-                  <td className="py-3 px-4 text-red-400">{snap.criticalCount}</td>
-                  <td className="py-3 px-4 font-bold text-blue-400">{snap.scores.overall}/100</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      <div className="space-y-3">
-        <h2 className="text-base font-semibold text-slate-100">
-          Repair & Backup Ledger ({report.repairHistory.length})
-        </h2>
-        {report.repairHistory.length === 0 ? (
-          <div className="p-6 bg-slate-900/50 border border-slate-800 rounded-lg text-xs text-slate-400">
-            No repairs executed on {report.name} yet.
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {report.repairHistory.map((r) => (
-              <div
-                key={r.id}
-                className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"
-              >
-                <div className="space-y-1 text-xs">
-                  <div className="font-semibold text-slate-100">{r.issueTitle}</div>
-                  <div className="font-mono text-slate-400">
-                    File: {r.filePath} · Status: {r.rolledBack ? 'Rolled Back' : 'Active'}
-                  </div>
-                </div>
-                {!r.rolledBack && (
-                  <button
-                    type="button"
-                    disabled={isBusy}
-                    onClick={() => onRollbackRepair(r.id)}
-                    className="px-3 py-1.5 text-xs font-medium text-amber-300 bg-slate-800 hover:bg-slate-700 rounded cursor-pointer whitespace-nowrap"
-                  >
-                    Undo & Restore Backup
-                  </button>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function EnvironmentManagerView({
-  environmentChecks,
-  onRefreshEnvironment,
-  isBusy,
-}: RepairGateProps) {
-  return (
-    <div className="space-y-8">
-      <div className="pb-5 border-b border-slate-800/80 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <div>
-          <h1 className="text-xl font-bold text-slate-100">
-            Host Environment & Toolchain Manager
-          </h1>
-          <p className="text-xs text-slate-400 mt-1">
-            Live verification of Node.js, package managers, Python, JDK, Android SDK/adb, Gradle, and macOS/Xcode OS boundaries.
-          </p>
-        </div>
-        <button
-          type="button"
-          disabled={isBusy}
-          onClick={onRefreshEnvironment}
-          className="inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg cursor-pointer whitespace-nowrap"
-        >
-          <RefreshCw className="w-3.5 h-3.5" />
-          <span>Re-Probe Host Binaries</span>
-        </button>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {environmentChecks.map((chk) => (
-          <div
-            key={chk.id}
-            className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg space-y-2"
-          >
-            <div className="flex items-center justify-between gap-2">
-              <span className="text-sm font-semibold text-slate-100">{chk.name}</span>
-              <StatusIndicator status={chk.status} />
-            </div>
-            <div className="text-xs font-mono tabular-nums text-slate-300">
-              Detected: <strong>{chk.detectedVersion}</strong> · Required: {chk.requiredVersion}
-            </div>
-            <p className="text-xs text-slate-400 leading-relaxed">{chk.explanation}</p>
-            {chk.remediationCommand && (
-              <div className="p-2 bg-slate-950 border border-slate-800 rounded font-mono text-[11px] text-blue-300">
-                $ {chk.remediationCommand}
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export function SettingsAndMcpView({
-  report,
-  mcpTools,
-  onCallMcpTool,
-}: RepairGateProps) {
-  const [selectedTool, setSelectedTool] = useState<string>(
-    mcpTools[0]?.name || 'inspect_project'
-  );
-  const [mcpOutput, setMcpOutput] = useState<string>('');
-  const [runningMcp, setRunningMcp] = useState(false);
-
-  async function handleInvokeMcp(toolName: string) {
-    setSelectedTool(toolName);
-    setRunningMcp(true);
-    try {
-      const res = await onCallMcpTool(toolName, { projectId: report.id });
-      setMcpOutput(JSON.stringify(res, null, 2));
-    } finally {
-      setRunningMcp(false);
-    }
-  }
-
-  return (
-    <div className="space-y-8">
-      <div className="pb-5 border-b border-slate-800/80">
-        <h1 className="text-xl font-bold text-slate-100">
-          MCP Agent Server, CLI Distribution & Workstation Settings
-        </h1>
-        <p className="text-xs text-slate-400 mt-1">
-          Core DEVINTELLIGENCE analysis and safe repairs run 100% locally without mandatory external AI API keys. Compatible AI agents can connect via the local Model Context Protocol (MCP) server.
-        </p>
-      </div>
-
-      {/* CLI Reference */}
-      <div className="p-5 bg-slate-900/70 border border-slate-800/80 rounded-lg space-y-3">
-        <div className="text-sm font-semibold text-slate-100">
-          Local CLI Commands (Executable via bin/devintelligence.ts)
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs font-mono text-slate-300">
-          <div className="p-2.5 bg-slate-950 border border-slate-800 rounded">
-            $ npx devintelligence init
-          </div>
-          <div className="p-2.5 bg-slate-950 border border-slate-800 rounded">
-            $ npx devintelligence scan --project={report.id}
-          </div>
-          <div className="p-2.5 bg-slate-950 border border-slate-800 rounded">
-            $ npx devintelligence doctor
-          </div>
-          <div className="p-2.5 bg-slate-950 border border-slate-800 rounded">
-            $ npx devintelligence fix --project={report.id}
-          </div>
-        </div>
-      </div>
-
-      {/* Interactive MCP Tool Server Console */}
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
-        <div className="lg:col-span-5 bg-slate-900/70 border border-slate-800/80 rounded-lg divide-y divide-slate-800/70">
-          <div className="px-4 py-3 text-xs font-semibold text-slate-200">
-            Exposed Local MCP Server Tools ({mcpTools.length})
-          </div>
-          {mcpTools.map((tool) => (
-            <div
-              key={tool.name}
-              className="p-3.5 flex items-center justify-between gap-3 hover:bg-slate-800/40"
-            >
-              <div className="min-w-0">
-                <div className="text-xs font-mono font-semibold text-blue-400">
-                  {tool.name}
-                </div>
-                <div className="text-[11px] text-slate-400 mt-0.5">{tool.description}</div>
-              </div>
-              <button
-                type="button"
-                disabled={runningMcp}
-                onClick={() => handleInvokeMcp(tool.name)}
-                className="px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-500 rounded shrink-0 cursor-pointer whitespace-nowrap"
-              >
-                Invoke
-              </button>
-            </div>
-          ))}
-        </div>
-
-        <div className="lg:col-span-7 bg-slate-900/70 border border-slate-800/80 rounded-lg overflow-hidden">
-          <div className="px-4 py-3 border-b border-slate-800 flex items-center justify-between text-xs font-mono text-slate-300">
-            <span>MCP JSON-RPC Response ({selectedTool})</span>
-            <span>Target: {report.id}</span>
-          </div>
-          <pre className="p-4 bg-slate-950 text-xs font-mono text-emerald-300 overflow-x-auto min-h-[380px] max-h-[520px]">
-            {runningMcp
-              ? 'Executing local MCP tool call...'
-              : mcpOutput ||
-                '// Click "Invoke" on any MCP tool on the left to execute it against the active project and inspect the real JSON-RPC payload.'}
-          </pre>
-        </div>
-      </div>
-    </div>
-  );
-}