devintelligence 0.0.0-stage → 1.0.0

package/src/components/OverviewAndExplorerViews.tsx

@@ -0,0 +1,753 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Terminal,
+  FolderOpen,
+  FileCode,
+  Play,
+  Wrench,
+  CheckCircle2,
+  AlertTriangle,
+  XCircle,
+  ArrowRight,
+  Plus,
+  RefreshCw,
+  ShieldAlert,
+  Cpu,
+  Layers,
+  Smartphone,
+} from 'lucide-react';
+import {
+  DashboardModuleId,
+  DiagnosticIssue,
+  ProjectIntelligenceReport,
+} from '../types/devintelligence.ts';
+
+interface OverviewProps {
+  report: ProjectIntelligenceReport;
+  allProjects: ProjectIntelligenceReport[];
+  onSelectProject: (id: string) => void;
+  onNavigateModule: (module: DashboardModuleId) => void;
+  onRunScan: () => void;
+  onFixAllSafe: () => void;
+  onFixIssue: (issueId: string, allowReview?: boolean) => void;
+  onRegisterProject: (name: string, rootPath: string) => Promise<void>;
+  isBusy: boolean;
+}
+
+export function SeverityText({ severity }: { severity: DiagnosticIssue['severity'] }) {
+  if (severity === 'critical') {
+    return (
+      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-red-400">
+        <XCircle className="w-3.5 h-3.5 shrink-0" />
+        <span>Critical</span>
+      </span>
+    );
+  }
+  if (severity === 'high') {
+    return (
+      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-amber-400">
+        <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
+        <span>High</span>
+      </span>
+    );
+  }
+  if (severity === 'medium') {
+    return (
+      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-blue-400">
+        <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
+        <span>Medium</span>
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1.5 text-xs font-medium text-slate-400">
+      <CheckCircle2 className="w-3.5 h-3.5 shrink-0" />
+      <span>Low</span>
+    </span>
+  );
+}
+
+export function CommandCenterView({
+  report,
+  allProjects,
+  onSelectProject,
+  onNavigateModule,
+  onFixAllSafe,
+  onFixIssue,
+  isBusy,
+}: OverviewProps) {
+  const safeFixableIssues = report.issues.filter(
+    (i) => i.fixAvailable && i.repairTier === 'SAFE'
+  );
+  const criticalIssues = report.issues.filter((i) => i.severity === 'critical');
+
+  return (
+    <div className="space-y-8">
+      {/* Executive Header & Action Strip */}
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 pb-6 border-b border-slate-800/80">
+        <div className="space-y-2 max-w-2xl">
+          <div className="flex items-center gap-2 text-xs text-slate-400 font-mono tabular-nums">
+            <span>{report.launchDoctor.frameworkName}</span>
+            <span aria-hidden="true">·</span>
+            <span>{report.filesAnalyzed.length} files analyzed</span>
+            <span aria-hidden="true">·</span>
+            <span>Scan {report.scanDurationMs}ms</span>
+          </div>
+          <h1 className="text-2xl font-bold tracking-tight text-slate-100">
+            {report.name}
+          </h1>
+          <p className="text-sm text-slate-400 leading-relaxed">
+            {report.description}
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-3 shrink-0">
+          {safeFixableIssues.length > 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 whitespace-nowrap shrink-0 cursor-pointer"
+            >
+              <Wrench className="w-3.5 h-3.5" />
+              <span>Fix All Safe Issues ({safeFixableIssues.length})</span>
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => onNavigateModule('rn-doctor')}
+            className="inline-flex items-center gap-2 px-4 py-2 text-xs font-medium text-slate-200 bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-lg transition-colors whitespace-nowrap shrink-0 cursor-pointer"
+          >
+            <Smartphone className="w-3.5 h-3.5 text-blue-400" />
+            <span>Open React Native Doctor</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => onNavigateModule('auto-repair')}
+            className="inline-flex items-center gap-2 px-4 py-2 text-xs font-medium text-slate-200 bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-lg transition-colors whitespace-nowrap shrink-0 cursor-pointer"
+          >
+            <span>Review Diffs & Repairs</span>
+            <ArrowRight className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Primary Telemetry Strip (Single-Elevation Grid) */}
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+          <div className="text-xs text-slate-400">Overall Health</div>
+          <div className="mt-2 text-2xl font-bold font-mono tabular-nums text-slate-100">
+            {report.scores.overall}
+            <span className="text-sm font-normal text-slate-500">/100</span>
+          </div>
+          <div className="mt-1 text-xs text-slate-400">
+            {report.qualityGateEvaluation.passed ? 'Gate Passing' : 'Gate Action Needed'}
+          </div>
+        </div>
+
+        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+          <div className="text-xs text-slate-400">React Native</div>
+          <div className="mt-2 text-2xl font-bold font-mono tabular-nums text-blue-400">
+            {report.scores.reactNative}
+            <span className="text-sm font-normal text-slate-500">/100</span>
+          </div>
+          <div className="mt-1 text-xs text-slate-400">
+            {report.launchDoctor.workflowType}
+          </div>
+        </div>
+
+        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+          <div className="text-xs text-slate-400">Active Findings</div>
+          <div className="mt-2 text-2xl font-bold font-mono tabular-nums text-amber-400">
+            {report.issues.length}
+          </div>
+          <div className="mt-1 text-xs text-slate-400 font-mono tabular-nums">
+            {criticalIssues.length} critical · {safeFixableIssues.length} safe fix
+          </div>
+        </div>
+
+        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+          <div className="text-xs text-slate-400">Security Audit</div>
+          <div className="mt-2 text-2xl font-bold font-mono tabular-nums text-slate-100">
+            {report.scores.security}
+            <span className="text-sm font-normal text-slate-500">/100</span>
+          </div>
+          <div className="mt-1 text-xs text-slate-400 font-mono tabular-nums">
+            {report.issues.filter((i) => i.domain === 'security').length} security findings
+          </div>
+        </div>
+
+        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+          <div className="text-xs text-slate-400">Design Compliance</div>
+          <div className="mt-2 text-2xl font-bold font-mono tabular-nums text-slate-100">
+            {report.scores.designQuality}
+            <span className="text-sm font-normal text-slate-500">/100</span>
+          </div>
+          <div className="mt-1 text-xs text-slate-400 font-mono tabular-nums">
+            {report.designSystem.emojiIconsCount} emoji icons · {report.designSystem.hardcodedColorsCount} raw hex
+          </div>
+        </div>
+
+        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+          <div className="text-xs text-slate-400">Bundle Estimate</div>
+          <div className="mt-2 text-2xl font-bold font-mono tabular-nums text-slate-100">
+            {report.performance.estimatedBundleWeightKb}
+            <span className="text-sm font-normal text-slate-500"> KB</span>
+          </div>
+          <div className="mt-1 text-xs text-slate-400 font-mono tabular-nums">
+            {report.performance.heavyDependencies.length} heavy packages
+          </div>
+        </div>
+      </div>
+
+      {/* Launch Doctor & Multi-Project Switcher Split */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
+        {/* Launch Doctor Panel */}
+        <div className="lg:col-span-7 p-6 bg-slate-900/70 border border-slate-800/80 rounded-lg flex flex-col justify-between space-y-5">
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <h2 className="text-base font-semibold text-slate-100">
+                Project Launch Doctor
+              </h2>
+              <span className="text-xs font-mono text-slate-400">
+                Package Manager: {report.launchDoctor.packageManager}
+              </span>
+            </div>
+            <p className="text-xs text-slate-400 leading-relaxed">
+              Verified startup sequence, bundler configuration, and native target readiness without executing unapproved scripts.
+            </p>
+
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-2 text-xs">
+              <div className="p-3 bg-slate-950/70 rounded border border-slate-800/60">
+                <div className="text-slate-400">Metro Config</div>
+                <div className="mt-1 font-mono font-medium text-slate-200">
+                  {report.launchDoctor.metroConfigured ? 'Detected' : 'Not Applicable'}
+                </div>
+              </div>
+              <div className="p-3 bg-slate-950/70 rounded border border-slate-800/60">
+                <div className="text-slate-400">Babel Pipeline</div>
+                <div className="mt-1 font-mono font-medium text-slate-200">
+                  {report.launchDoctor.babelConfigured ? 'Detected' : 'Standard'}
+                </div>
+              </div>
+              <div className="p-3 bg-slate-950/70 rounded border border-slate-800/60">
+                <div className="text-slate-400">Android Target</div>
+                <div className="mt-1 font-mono font-medium text-slate-200">
+                  {report.android.present
+                    ? report.launchDoctor.androidLaunchReady
+                      ? 'Ready (API 34)'
+                      : 'Needs Repair'
+                    : 'N/A'}
+                </div>
+              </div>
+              <div className="p-3 bg-slate-950/70 rounded border border-slate-800/60">
+                <div className="text-slate-400">iOS Target</div>
+                <div className="mt-1 font-mono font-medium text-slate-200">
+                  {report.ios.present
+                    ? report.ios.hostCanVerifyNativeBuild
+                      ? 'macOS Ready'
+                      : 'Static Only (Linux)'
+                    : 'N/A'}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-2 pt-2 border-t border-slate-800/80">
+            <div className="text-xs font-medium text-slate-300">
+              Recommended Startup Command
+            </div>
+            <div className="flex items-center justify-between px-3.5 py-2.5 bg-slate-950 border border-slate-800 rounded font-mono text-xs text-blue-300">
+              <span>$ {report.launchDoctor.recommendedStartCommand}</span>
+              <span className="text-slate-500">Verified Entrypoint</span>
+            </div>
+            <div className="flex flex-wrap items-center gap-4 pt-1 text-xs text-slate-400 font-mono">
+              {report.launchDoctor.secondaryCommands.map((cmd) => (
+                <span key={cmd.label}>
+                  {cmd.label}: <strong className="text-slate-300">{cmd.command}</strong>
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Multi-Project Workspace Switcher */}
+        <div className="lg:col-span-5 p-6 bg-slate-900/70 border border-slate-800/80 rounded-lg flex flex-col justify-between space-y-4">
+          <div className="space-y-1">
+            <div className="flex items-center justify-between">
+              <h2 className="text-base font-semibold text-slate-100">
+                Multi-Project Workspace ({allProjects.length})
+              </h2>
+              <button
+                type="button"
+                onClick={() => onNavigateModule('project-explorer')}
+                className="text-xs font-medium text-blue-400 hover:text-blue-300 transition-colors cursor-pointer"
+              >
+                Register Project
+              </button>
+            </div>
+            <p className="text-xs text-slate-400">
+              Isolated scan history, design tokens, and repair backups per repository.
+            </p>
+          </div>
+
+          <div className="divide-y divide-slate-800/80 border-t border-b border-slate-800/80">
+            {allProjects.map((proj) => {
+              const isSelected = proj.id === report.id;
+              return (
+                <button
+                  key={proj.id}
+                  type="button"
+                  onClick={() => onSelectProject(proj.id)}
+                  className={`w-full py-2.5 px-3 flex items-center justify-between text-left transition-colors cursor-pointer ${
+                    isSelected ? 'bg-blue-950/30 text-white' : 'hover:bg-slate-800/50 text-slate-300'
+                  }`}
+                >
+                  <div className="min-w-0 pr-3">
+                    <div className="text-xs font-semibold truncate">{proj.name}</div>
+                    <div className="text-[11px] text-slate-400 font-mono truncate">
+                      {proj.ecosystem} · {proj.issues.length} findings
+                    </div>
+                  </div>
+                  <div className="text-right font-mono tabular-nums shrink-0">
+                    <span
+                      className={`text-xs font-bold ${
+                        proj.scores.overall >= 85
+                          ? 'text-emerald-400'
+                          : proj.scores.overall >= 70
+                            ? 'text-amber-400'
+                            : 'text-red-400'
+                      }`}
+                    >
+                      {proj.scores.overall}/100
+                    </span>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Priority Findings Table with Direct Safe Fix Actions */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-base font-semibold text-slate-100">
+              Highest-Priority Diagnostic Findings ({report.issues.length})
+            </h2>
+            <p className="text-xs text-slate-400">
+              Root causes traced to exact source lines with deterministic SAFE repair verification.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => onNavigateModule('auto-repair')}
+            className="text-xs font-medium text-blue-400 hover:text-blue-300 cursor-pointer"
+          >
+            Open Auto Repair Center →
+          </button>
+        </div>
+
+        {report.issues.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-200">
+              Zero Active Engineering Findings
+            </div>
+            <p className="text-xs text-slate-400">
+              All detected issues in {report.name} have been repaired and verified. You can roll back repairs in the Auto Repair Center or Project History.
+            </p>
+          </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">
+              <thead>
+                <tr className="border-b border-slate-800 text-[11px] font-medium text-slate-400">
+                  <th className="py-2.5 px-4">Severity</th>
+                  <th className="py-2.5 px-4">Domain</th>
+                  <th className="py-2.5 px-4">Finding & Root Cause</th>
+                  <th className="py-2.5 px-4">Location</th>
+                  <th className="py-2.5 px-4">Repair Tier</th>
+                  <th className="py-2.5 px-4 text-right">Action</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-800/60 text-xs">
+                {report.issues.map((issue) => (
+                  <tr key={issue.id} className="hover:bg-slate-800/40 transition-colors">
+                    <td className="py-3 px-4 whitespace-nowrap">
+                      <SeverityText severity={issue.severity} />
+                    </td>
+                    <td className="py-3 px-4 whitespace-nowrap font-mono text-slate-300">
+                      {issue.domain}
+                    </td>
+                    <td className="py-3 px-4 max-w-md">
+                      <div className="font-semibold text-slate-100">{issue.title}</div>
+                      <div className="text-slate-400 mt-0.5 line-clamp-1">{issue.rootCause}</div>
+                    </td>
+                    <td className="py-3 px-4 whitespace-nowrap font-mono tabular-nums text-slate-300">
+                      {issue.filePath}:{issue.line}
+                    </td>
+                    <td className="py-3 px-4 whitespace-nowrap font-mono text-slate-300">
+                      {issue.repairTier} · {issue.confidence}%
+                    </td>
+                    <td className="py-3 px-4 whitespace-nowrap text-right">
+                      {issue.fixAvailable ? (
+                        <button
+                          type="button"
+                          disabled={isBusy}
+                          onClick={() =>
+                            onFixIssue(issue.id, issue.repairTier !== 'SAFE')
+                          }
+                          className="px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-500 disabled:opacity-50 rounded transition-colors cursor-pointer whitespace-nowrap"
+                        >
+                          {issue.repairTier === 'SAFE' ? 'Apply Safe Fix' : 'Approve & Fix'}
+                        </button>
+                      ) : (
+                        <button
+                          type="button"
+                          onClick={() => onNavigateModule('auto-repair')}
+                          className="px-3 py-1.5 text-xs font-medium text-slate-300 bg-slate-800 hover:bg-slate-700 rounded transition-colors cursor-pointer whitespace-nowrap"
+                        >
+                          Inspect Guide
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ProjectExplorerView({
+  report,
+  allProjects,
+  onSelectProject,
+  onRegisterProject,
+  onFixIssue,
+  isBusy,
+}: OverviewProps) {
+  const [selectedFile, setSelectedFile] = useState<string>(
+    report.filesAnalyzed[0] || 'package.json'
+  );
+  const [fileContent, setFileContent] = useState<string>('');
+  const [loadingFile, setLoadingFile] = useState<boolean>(false);
+  const [newProjName, setNewProjName] = useState('');
+  const [newProjPath, setNewProjPath] = useState('');
+  const [registerError, setRegisterError] = useState<string | null>(null);
+  const [registerSuccess, setRegisterSuccess] = useState<string | null>(null);
+
+  useEffect(() => {
+    const defaultFile =
+      report.filesAnalyzed.find((f) => f.endsWith('.tsx') || f.endsWith('.ts') || f.endsWith('.py')) ||
+      report.filesAnalyzed[0] ||
+      'package.json';
+    setSelectedFile(defaultFile);
+  }, [report.id]);
+
+  useEffect(() => {
+    if (!selectedFile) return;
+    let active = true;
+    setLoadingFile(true);
+    fetch(
+      `/api/devintel/file-content?projectId=${encodeURIComponent(report.id)}&filePath=${encodeURIComponent(selectedFile)}`
+    )
+      .then((r) => r.json())
+      .then((data) => {
+        if (active) {
+          setFileContent(data.content || '// Empty or binary file');
+          setLoadingFile(false);
+        }
+      })
+      .catch(() => {
+        if (active) {
+          setFileContent('// Unable to read file from disk');
+          setLoadingFile(false);
+        }
+      });
+    return () => {
+      active = false;
+    };
+  }, [report.id, selectedFile, report.lastScannedAt]);
+
+  const fileIssues = report.issues.filter((i) => i.filePath === selectedFile);
+
+  async function handleRegisterSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setRegisterError(null);
+    setRegisterSuccess(null);
+    if (!newProjName.trim() || !newProjPath.trim()) {
+      setRegisterError('Both project name and local filesystem directory path are required.');
+      return;
+    }
+    try {
+      await onRegisterProject(newProjName.trim(), newProjPath.trim());
+      setRegisterSuccess(`Registered and scanned "${newProjName.trim()}" successfully.`);
+      setNewProjName('');
+      setNewProjPath('');
+    } catch (err: any) {
+      setRegisterError(err.message || 'Failed to register directory.');
+    }
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 pb-5 border-b border-slate-800/80">
+        <div>
+          <h1 className="text-xl font-bold text-slate-100">
+            Project Explorer & Source Inspector
+          </h1>
+          <p className="text-xs text-slate-400 mt-1 font-mono">
+            Root Path: {report.rootPath} · {report.filesAnalyzed.length} source & config files indexed
+          </p>
+        </div>
+      </div>
+
+      {/* Register New Local Project Form */}
+      <form
+        onSubmit={handleRegisterSubmit}
+        className="p-5 bg-slate-900/70 border border-slate-800/80 rounded-lg space-y-4"
+      >
+        <div className="flex items-center justify-between">
+          <div className="text-sm font-semibold text-slate-100">
+            Register Local Project Directory
+          </div>
+          <span className="text-xs text-slate-400 font-mono">
+            Supports React Native, Expo, Next.js, Vite, Express, Python/Django
+          </span>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-3 items-end">
+          <div className="md:col-span-4">
+            <label htmlFor="proj-name-input" className="block text-xs text-slate-400 mb-1">
+              Project Display Name
+            </label>
+            <input
+              id="proj-name-input"
+              type="text"
+              value={newProjName}
+              onChange={(e) => setNewProjName(e.target.value)}
+              placeholder="e.g. Host Workspace App"
+              className="w-full px-3 py-2 text-xs bg-slate-950 border border-slate-800 rounded text-slate-100 focus:outline-none focus:border-blue-500"
+            />
+          </div>
+          <div className="md:col-span-6">
+            <label htmlFor="proj-path-input" className="block text-xs text-slate-400 mb-1">
+              Local Directory Path (Relative or Absolute)
+            </label>
+            <input
+              id="proj-path-input"
+              type="text"
+              value={newProjPath}
+              onChange={(e) => setNewProjPath(e.target.value)}
+              placeholder="e.g. fixtures/rn-expo-commerce or ."
+              className="w-full px-3 py-2 text-xs font-mono bg-slate-950 border border-slate-800 rounded text-slate-100 focus:outline-none focus:border-blue-500"
+            />
+          </div>
+          <div className="md:col-span-2">
+            <button
+              type="submit"
+              disabled={isBusy}
+              className="w-full inline-flex items-center justify-center gap-1.5 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded transition-colors cursor-pointer whitespace-nowrap"
+            >
+              <Plus className="w-3.5 h-3.5" />
+              <span>Add & Scan</span>
+            </button>
+          </div>
+        </div>
+        {registerError && (
+          <div className="text-xs text-red-400 font-medium">{registerError}</div>
+        )}
+        {registerSuccess && (
+          <div className="text-xs text-emerald-400 font-medium">{registerSuccess}</div>
+        )}
+      </form>
+
+      {/* File Tree + Live Source Code & Inline Diagnostics */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
+        <div className="lg:col-span-4 bg-slate-900/70 border border-slate-800/80 rounded-lg overflow-hidden">
+          <div className="px-4 py-3 border-b border-slate-800 text-xs font-semibold text-slate-200 flex items-center justify-between">
+            <span>Repository Files ({report.filesAnalyzed.length})</span>
+            <span className="font-mono text-slate-400">{report.id}</span>
+          </div>
+          <div className="divide-y divide-slate-800/60 max-h-[520px] overflow-y-auto">
+            {report.filesAnalyzed.map((file) => {
+              const count = report.issues.filter((i) => i.filePath === file).length;
+              const active = file === selectedFile;
+              return (
+                <button
+                  key={file}
+                  type="button"
+                  onClick={() => setSelectedFile(file)}
+                  className={`w-full px-4 py-2.5 text-left flex items-center justify-between text-xs font-mono transition-colors cursor-pointer ${
+                    active
+                      ? 'bg-blue-950/40 text-blue-300 font-medium'
+                      : 'text-slate-300 hover:bg-slate-800/50'
+                  }`}
+                >
+                  <span className="truncate pr-2">{file}</span>
+                  {count > 0 && (
+                    <span className="text-[11px] text-amber-400 shrink-0 tabular-nums">
+                      {count} {count === 1 ? 'issue' : 'issues'}
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="lg:col-span-8 space-y-4">
+          <div className="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">
+              <div className="flex items-center gap-2 text-xs font-mono text-slate-200">
+                <FileCode className="w-4 h-4 text-blue-400" />
+                <span>{selectedFile}</span>
+              </div>
+              <span className="text-xs text-slate-400 font-mono tabular-nums">
+                {fileIssues.length} active finding(s) in file
+              </span>
+            </div>
+
+            {fileIssues.length > 0 && (
+              <div className="p-4 bg-slate-950/90 border-b border-slate-800 space-y-3">
+                {fileIssues.map((issue) => (
+                  <div
+                    key={issue.id}
+                    className="p-3 bg-slate-900 border border-slate-800 rounded 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">Line {issue.line}</span>
+                        <span className="text-slate-500">·</span>
+                        <span className="font-semibold text-slate-100">{issue.title}</span>
+                      </div>
+                      <p className="text-xs text-slate-400">{issue.recommendedRepair}</p>
+                    </div>
+                    {issue.fixAvailable && (
+                      <button
+                        type="button"
+                        disabled={isBusy}
+                        onClick={() => onFixIssue(issue.id, issue.repairTier !== 'SAFE')}
+                        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"
+                      >
+                        Repair File Now
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+
+            <pre className="p-4 text-xs font-mono text-slate-200 overflow-x-auto max-h-[460px] leading-relaxed bg-slate-950/60">
+              {loadingFile
+                ? 'Reading file from local disk...'
+                : fileContent
+                    .split('\n')
+                    .map((line, idx) => `${String(idx + 1).padStart(3, ' ')} | ${line}`)
+                    .join('\n')}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ProjectHealthView({ report, onNavigateModule }: OverviewProps) {
+  const domains: {
+    label: string;
+    score: number;
+    targetModule: DashboardModuleId;
+    summary: string;
+  }[] = [
+    {
+      label: 'React Native & Mobile Readiness',
+      score: report.scores.reactNative,
+      targetModule: 'rn-doctor',
+      summary: 'Metro bundler, Babel Reanimated worklet ordering, Android Gradle SDK, and iOS Podfile health.',
+    },
+    {
+      label: 'Code & Architecture Quality',
+      score: report.scores.codeQuality,
+      targetModule: 'code-intelligence',
+      summary: 'Unused file detection, hook lifecycle cleanup, dependency alignment, and modularity.',
+    },
+    {
+      label: 'Design System & Accessibility',
+      score: report.scores.designQuality,
+      targetModule: 'design-intelligence',
+      summary: 'Design token adherence, 4pt/8pt spatial grid, vector icon usage, and screen-reader labels.',
+    },
+    {
+      label: 'Runtime & Bundle Performance',
+      score: report.scores.performance,
+      targetModule: 'performance-lab',
+      summary: 'FlatList windowing, memory leak prevention, heavy dependency footprint, and non-blocking I/O.',
+    },
+    {
+      label: 'Security & Credential Hygiene',
+      score: report.scores.security,
+      targetModule: 'security-audit',
+      summary: 'Zero hardcoded API keys, parameterized SQL queries, HTTPS enforcement, and production flags.',
+    },
+  ];
+
+  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 Health & Engineering Scorecard
+        </h1>
+        <p className="text-xs text-slate-400 mt-1">
+          Computed deterministically from real static, configuration, and runtime-pattern inspections on {report.name}.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        {domains.map((d) => (
+          <div
+            key={d.label}
+            className="p-5 bg-slate-900/70 border border-slate-800/80 rounded-lg flex flex-col justify-between space-y-4"
+          >
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-semibold text-slate-100">{d.label}</span>
+                <span className="text-lg font-bold font-mono tabular-nums text-blue-400">
+                  {d.score}/100
+                </span>
+              </div>
+              <div className="w-full h-1.5 bg-slate-800 rounded-full overflow-hidden">
+                <div
+                  className={`h-full ${
+                    d.score >= 85
+                      ? 'bg-emerald-500'
+                      : d.score >= 70
+                        ? 'bg-blue-500'
+                        : 'bg-amber-500'
+                  }`}
+                  style={{ width: `${d.score}%` }}
+                />
+              </div>
+              <p className="text-xs text-slate-400 leading-relaxed pt-1">{d.summary}</p>
+            </div>
+            <button
+              type="button"
+              onClick={() => onNavigateModule(d.targetModule)}
+              className="inline-flex items-center gap-1.5 text-xs font-medium text-blue-400 hover:text-blue-300 cursor-pointer"
+            >
+              <span>Inspect Domain Diagnostics</span>
+              <ArrowRight className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}