devintelligence 1.0.0 → 1.0.1

package/src/components/DeepAnalysisViews.tsx

@@ -1,526 +0,0 @@
-import React from 'react';
-import { ProjectIntelligenceReport } from '../types/devintelligence.ts';
-import { SeverityText } from './OverviewAndExplorerViews.tsx';
-
-interface AnalysisViewProps {
-  report: ProjectIntelligenceReport;
-  onFixIssue: (issueId: string, allowReview?: boolean) => void;
-  isBusy: boolean;
-}
-
-export function CodeIntelligenceView({ report, onFixIssue, isBusy }: AnalysisViewProps) {
-  const codeIssues = report.issues.filter(
-    (i) => i.domain === 'code' || i.domain === 'react-native'
-  );
-
-  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">
-            Deep Code & Architecture Intelligence
-          </h1>
-          <p className="text-xs text-slate-400 mt-1">
-            Detects unreferenced modules, unused exports, hook subscription memory leaks, and async error handling gaps while respecting framework entrypoints.
-          </p>
-        </div>
-        <div className="text-xs font-mono tabular-nums text-slate-300">
-          Code Quality Score: <strong className="text-blue-400">{report.scores.codeQuality}/100</strong>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
-          <div className="text-xs text-slate-400">Indexed Source & Config Files</div>
-          <div className="mt-1.5 text-xl font-bold font-mono tabular-nums text-slate-100">
-            {report.filesAnalyzed.length}
-          </div>
-          <div className="mt-1 text-xs text-slate-400">
-            Dynamic routes & framework conventions preserved
-          </div>
-        </div>
-
-        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
-          <div className="text-xs text-slate-400">Unreferenced / Dead Modules</div>
-          <div className="mt-1.5 text-xl font-bold font-mono tabular-nums text-amber-400">
-            {report.issues.filter((i) => i.ruleId === 'DEAD_CODE_UNUSED_MODULE').length}
-          </div>
-          <div className="mt-1 text-xs text-slate-400">
-            Flagged as REVIEW_REQUIRED (never auto-deleted without consent)
-          </div>
-        </div>
-
-        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
-          <div className="text-xs text-slate-400">Lifecycle & Hook Findings</div>
-          <div className="mt-1.5 text-xl font-bold font-mono tabular-nums text-slate-100">
-            {codeIssues.length}
-          </div>
-          <div className="mt-1 text-xs text-slate-400">
-            Includes event listener & interval cleanup verification
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-3">
-        <h2 className="text-base font-semibold text-slate-100">
-          Code & Lifecycle Findings ({codeIssues.length})
-        </h2>
-        {codeIssues.length === 0 ? (
-          <div className="p-6 bg-slate-900/50 border border-slate-800 rounded-lg text-xs text-emerald-400">
-            No dead code or lifecycle defects detected in {report.name}.
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {codeIssues.map((issue) => (
-              <div
-                key={issue.id}
-                className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg space-y-3"
-              >
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-                  <div className="space-y-1">
-                    <div className="flex items-center gap-2 text-xs">
-                      <SeverityText severity={issue.severity} />
-                      <span className="text-slate-500">·</span>
-                      <span className="font-mono text-slate-300">
-                        {issue.filePath}:{issue.line}
-                      </span>
-                      <span className="text-slate-500">·</span>
-                      <span className="font-mono text-slate-400">{issue.repairTier}</span>
-                    </div>
-                    <div className="text-sm font-semibold text-slate-100">{issue.title}</div>
-                  </div>
-                  {issue.fixAvailable && (
-                    <button
-                      type="button"
-                      disabled={isBusy}
-                      onClick={() => onFixIssue(issue.id, issue.repairTier !== 'SAFE')}
-                      className="px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg shrink-0 cursor-pointer whitespace-nowrap"
-                    >
-                      Apply Safe Repair
-                    </button>
-                  )}
-                </div>
-                <p className="text-xs text-slate-400">{issue.explanation}</p>
-                <pre className="p-3 bg-slate-950 border border-slate-800 rounded text-[11px] font-mono text-slate-300 overflow-x-auto">
-                  {issue.unifiedDiff}
-                </pre>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function DesignIntelligenceView({ report, onFixIssue, isBusy }: AnalysisViewProps) {
-  const designIssues = report.issues.filter((i) => i.domain === 'design');
-
-  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">
-            Design System & UI/UX Token Intelligence
-          </h1>
-          <p className="text-xs text-slate-400 mt-1">
-            Discovers existing project design tokens first, then detects hardcoded hex colors, non-grid border-radius/spacing, emoji UI icons, and missing accessibility labels.
-          </p>
-        </div>
-        <div className="text-xs font-mono tabular-nums text-slate-300">
-          Token Compliance: <strong className="text-blue-400">{report.designSystem.tokenComplianceScore}/100</strong>
-        </div>
-      </div>
-
-      {/* Discovered Design System Tokens */}
-      <div 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">
-          Discovered Project Design System Baseline
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
-          <div className="space-y-2">
-            <div className="text-slate-400">Semantic Color Palette</div>
-            <div className="flex flex-wrap gap-2">
-              {report.designSystem.discoveredTokens.colors.map((hex) => (
-                <div
-                  key={hex}
-                  className="flex items-center gap-1.5 px-2.5 py-1 bg-slate-950 border border-slate-800 rounded font-mono text-slate-300"
-                >
-                  <span
-                    className="w-3 h-3 rounded-sm border border-slate-700"
-                    style={{ backgroundColor: hex }}
-                  />
-                  <span>{hex}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="space-y-2">
-            <div className="text-slate-400">4pt/8pt Spacing & Radius Scale</div>
-            <div className="font-mono text-slate-300 leading-relaxed">
-              Spacing: {report.designSystem.discoveredTokens.spacingScale.join(' · ')}
-              <br />
-              Radii: {report.designSystem.discoveredTokens.radii.join(' · ')}
-            </div>
-          </div>
-          <div className="space-y-2">
-            <div className="text-slate-400">Violation Telemetry</div>
-            <div className="font-mono tabular-nums text-slate-300 space-y-1">
-              <div>Hardcoded Hex Literals: {report.designSystem.hardcodedColorsCount}</div>
-              <div>Non-Grid Spacing / Radii: {report.designSystem.inconsistentSpacingCount + report.designSystem.randomRadiiCount}</div>
-              <div>Emoji Used as UI Icons: {report.designSystem.emojiIconsCount}</div>
-              <div>Missing Accessibility Labels: {report.designSystem.accessibilityGapsCount}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-3">
-        <h2 className="text-base font-semibold text-slate-100">
-          Detected UI/UX & Accessibility Violations ({designIssues.length})
-        </h2>
-        {designIssues.length === 0 ? (
-          <div className="p-6 bg-slate-900/50 border border-slate-800 rounded-lg text-xs text-emerald-400">
-            Zero design token or emoji icon violations detected in {report.name}.
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {designIssues.map((issue) => (
-              <div
-                key={issue.id}
-                className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg space-y-3"
-              >
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-                  <div className="space-y-1">
-                    <div className="flex items-center gap-2 text-xs">
-                      <SeverityText severity={issue.severity} />
-                      <span className="text-slate-500">·</span>
-                      <span className="font-mono text-slate-300">
-                        {issue.filePath}:{issue.line}
-                      </span>
-                    </div>
-                    <div className="text-sm font-semibold text-slate-100">{issue.title}</div>
-                  </div>
-                  {issue.fixAvailable && (
-                    <button
-                      type="button"
-                      disabled={isBusy}
-                      onClick={() => onFixIssue(issue.id, false)}
-                      className="px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg shrink-0 cursor-pointer whitespace-nowrap"
-                    >
-                      Normalize Design & Accessibility
-                    </button>
-                  )}
-                </div>
-                <p className="text-xs text-slate-400">{issue.explanation}</p>
-                <pre className="p-3 bg-slate-950 border border-slate-800 rounded text-[11px] font-mono text-slate-300 overflow-x-auto">
-                  {issue.unifiedDiff}
-                </pre>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function PerformanceLabView({ report, onFixIssue, isBusy }: AnalysisViewProps) {
-  const perfIssues = report.issues.filter(
-    (i) => i.domain === 'performance' || i.ruleId.includes('SYNC_IO') || i.ruleId.includes('LEAK')
-  );
-
-  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">
-            Performance Lab & Bundle Weight Analyzer
-          </h1>
-          <p className="text-xs text-slate-400 mt-1">
-            Real measurements of source code footprint, heavy third-party packages, React Native FlatList virtualization, and blocking Node.js I/O.
-          </p>
-        </div>
-        <div className="text-xs font-mono tabular-nums text-slate-300">
-          Performance Score: <strong className="text-blue-400">{report.performance.performanceScore}/100</strong>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
-          <div className="text-xs text-slate-400">Measured Source Payload</div>
-          <div className="mt-1.5 text-xl font-bold font-mono tabular-nums text-slate-100">
-            {report.performance.totalSourceSizeKb} KB
-          </div>
-          <div className="mt-1 text-xs text-slate-400 font-mono">
-            Across {report.performance.totalSourceFiles} source files
-          </div>
-        </div>
-
-        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
-          <div className="text-xs text-slate-400">Estimated Bundle Weight</div>
-          <div className="mt-1.5 text-xl font-bold font-mono tabular-nums text-slate-100">
-            {report.performance.estimatedBundleWeightKb} KB
-          </div>
-          <div className="mt-1 text-xs text-slate-400 font-mono">
-            {report.performance.heavyDependencies.length} heavy package(s)
-          </div>
-        </div>
-
-        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
-          <div className="text-xs text-slate-400">Render & List Bottlenecks</div>
-          <div className="mt-1.5 text-xl font-bold font-mono tabular-nums text-amber-400">
-            {report.performance.renderBottlenecksCount}
-          </div>
-          <div className="mt-1 text-xs text-slate-400">
-            FlatList windowing & re-render hotspots
-          </div>
-        </div>
-
-        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
-          <div className="text-xs text-slate-400">Blocking Event-Loop I/O</div>
-          <div className="mt-1.5 text-xl font-bold font-mono tabular-nums text-slate-100">
-            {report.performance.blockingIoCount}
-          </div>
-          <div className="mt-1 text-xs text-slate-400">
-            Synchronous fs calls in request handlers
-          </div>
-        </div>
-      </div>
-
-      {report.performance.heavyDependencies.length > 0 && (
-        <div className="space-y-2">
-          <h2 className="text-base font-semibold text-slate-100">
-            Heavy Dependency Footprint Breakdown
-          </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">
-              <thead>
-                <tr className="border-b border-slate-800 text-[11px] text-slate-400">
-                  <th className="py-2.5 px-4">Package</th>
-                  <th className="py-2.5 px-4">Estimated Impact</th>
-                  <th className="py-2.5 px-4">Engineering Bottleneck Analysis</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-slate-800/60">
-                {report.performance.heavyDependencies.map((hd) => (
-                  <tr key={hd.name}>
-                    <td className="py-3 px-4 font-mono font-semibold text-slate-100">{hd.name}</td>
-                    <td className="py-3 px-4 font-mono tabular-nums text-amber-400">
-                      +{hd.sizeKb} KB
-                    </td>
-                    <td className="py-3 px-4 text-slate-300">{hd.reason}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      )}
-
-      <div className="space-y-3">
-        <h2 className="text-base font-semibold text-slate-100">
-          Repairable Performance & Memory Findings ({perfIssues.length})
-        </h2>
-        {perfIssues.map((issue) => (
-          <div
-            key={issue.id}
-            className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg space-y-3"
-          >
-            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-              <div className="space-y-1">
-                <div className="flex items-center gap-2 text-xs">
-                  <SeverityText severity={issue.severity} />
-                  <span className="text-slate-500">·</span>
-                  <span className="font-mono text-slate-300">
-                    {issue.filePath}:{issue.line}
-                  </span>
-                </div>
-                <div className="text-sm font-semibold text-slate-100">{issue.title}</div>
-              </div>
-              {issue.fixAvailable && (
-                <button
-                  type="button"
-                  disabled={isBusy}
-                  onClick={() => onFixIssue(issue.id, false)}
-                  className="px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg shrink-0 cursor-pointer whitespace-nowrap"
-                >
-                  Apply Performance Repair
-                </button>
-              )}
-            </div>
-            <p className="text-xs text-slate-400">{issue.explanation}</p>
-            <pre className="p-3 bg-slate-950 border border-slate-800 rounded text-[11px] font-mono text-slate-300 overflow-x-auto">
-              {issue.unifiedDiff}
-            </pre>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export function SecurityAuditView({ report, onFixIssue, isBusy }: AnalysisViewProps) {
-  const secIssues = report.issues.filter((i) => i.domain === 'security');
-
-  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">
-            Security & Secret Hygiene Auditor
-          </h1>
-          <p className="text-xs text-slate-400 mt-1">
-            Audits source files and manifests for hardcoded API keys, SQL injection string interpolation, cleartext HTTP traffic, and unsafe production debug flags.
-          </p>
-        </div>
-        <div className="text-xs font-mono tabular-nums text-slate-300">
-          Security Score: <strong className="text-blue-400">{report.scores.security}/100</strong>
-        </div>
-      </div>
-
-      {secIssues.length === 0 ? (
-        <div className="p-8 bg-slate-900/50 border border-slate-800 rounded-lg text-xs text-emerald-400">
-          Zero active security vulnerabilities or hardcoded secrets detected in {report.name}.
-        </div>
-      ) : (
-        <div className="space-y-4">
-          {secIssues.map((issue) => (
-            <div
-              key={issue.id}
-              className="p-5 bg-slate-900/70 border border-slate-800/80 rounded-lg space-y-3"
-            >
-              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-                <div className="space-y-1">
-                  <div className="flex items-center gap-2 text-xs">
-                    <SeverityText severity={issue.severity} />
-                    <span className="text-slate-500">·</span>
-                    <span className="font-mono text-slate-300">
-                      {issue.filePath}:{issue.line}
-                    </span>
-                    <span className="text-slate-500">·</span>
-                    <span className="font-mono text-slate-400">{issue.ruleId}</span>
-                  </div>
-                  <div className="text-sm font-semibold text-slate-100">{issue.title}</div>
-                </div>
-                {issue.fixAvailable && (
-                  <button
-                    type="button"
-                    disabled={isBusy}
-                    onClick={() => onFixIssue(issue.id, false)}
-                    className="px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg shrink-0 cursor-pointer whitespace-nowrap"
-                  >
-                    Remediate Security Issue
-                  </button>
-                )}
-              </div>
-              <p className="text-xs text-slate-300">{issue.rootCause}</p>
-              <p className="text-xs text-slate-400">{issue.explanation}</p>
-              <pre className="p-3 bg-slate-950 border border-slate-800 rounded text-[11px] font-mono text-slate-300 overflow-x-auto">
-                {issue.unifiedDiff}
-              </pre>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function DependencyIntelligenceView({ report, onFixIssue, isBusy }: AnalysisViewProps) {
-  const depIssues = report.issues.filter((i) => i.domain === 'dependencies');
-
-  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">
-          Dependency Compatibility & Weight Matrix
-        </h1>
-        <p className="text-xs text-slate-400 mt-1">
-          Verifies Expo SDK / React Native peer compatibility before suggesting version changes — never blindly upgrades or downgrades packages.
-        </p>
-      </div>
-
-      {depIssues.length > 0 && (
-        <div className="space-y-3">
-          <h2 className="text-base font-semibold text-slate-100">
-            Detected Dependency Version Conflicts ({depIssues.length})
-          </h2>
-          {depIssues.map((issue) => (
-            <div
-              key={issue.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">
-                  <SeverityText severity={issue.severity} />
-                  <span className="text-slate-500">·</span>
-                  <span className="font-mono text-slate-300">{issue.filePath}</span>
-                </div>
-                <div className="text-sm font-semibold text-slate-100">{issue.title}</div>
-                <p className="text-xs text-slate-400">{issue.explanation}</p>
-              </div>
-              {issue.fixAvailable && (
-                <button
-                  type="button"
-                  disabled={isBusy}
-                  onClick={() => onFixIssue(issue.id, false)}
-                  className="px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg shrink-0 cursor-pointer whitespace-nowrap"
-                >
-                  Align Compatible Version
-                </button>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-
-      <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] font-medium text-slate-400">
-              <th className="py-2.5 px-4">Package Name</th>
-              <th className="py-2.5 px-4">Installed Spec</th>
-              <th className="py-2.5 px-4">Compatible Target</th>
-              <th className="py-2.5 px-4">Est. Weight</th>
-              <th className="py-2.5 px-4">Status</th>
-              <th className="py-2.5 px-4">Compatibility Analysis</th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-slate-800/60">
-            {report.dependencies.map((dep) => (
-              <tr key={dep.name} className="hover:bg-slate-800/40">
-                <td className="py-3 px-4 font-mono font-semibold text-slate-100 whitespace-nowrap">
-                  {dep.name}
-                </td>
-                <td className="py-3 px-4 font-mono tabular-nums text-slate-300 whitespace-nowrap">
-                  {dep.currentVersion}
-                </td>
-                <td className="py-3 px-4 font-mono tabular-nums text-blue-300 whitespace-nowrap">
-                  {dep.recommendedVersion}
-                </td>
-                <td className="py-3 px-4 font-mono tabular-nums text-slate-300 whitespace-nowrap">
-                  {dep.estimatedSizeKb} KB
-                </td>
-                <td className="py-3 px-4 font-mono whitespace-nowrap">
-                  <span
-                    className={
-                      dep.status === 'conflict'
-                        ? 'text-red-400 font-semibold'
-                        : dep.status === 'heavy'
-                          ? 'text-amber-400 font-semibold'
-                          : 'text-emerald-400'
-                    }
-                  >
-                    {dep.status}
-                  </span>
-                </td>
-                <td className="py-3 px-4 text-slate-300">{dep.note}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}