devintelligence 0.0.0-stage → 1.0.0

package/src/components/DeepAnalysisViews.tsx

@@ -0,0 +1,526 @@
+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>
+  );
+}