devintelligence 0.0.0-stage → 1.0.0

package/src/components/MobileAndPlatformViews.tsx

@@ -0,0 +1,625 @@
+import React, { useState } from 'react';
+import {
+  Smartphone,
+  CheckCircle2,
+  AlertTriangle,
+  XCircle,
+  Terminal,
+  Wrench,
+  Cpu,
+  Shield,
+  Search,
+} from 'lucide-react';
+import {
+  CheckStatus,
+  ErrorDiagnosisResult,
+  ProjectIntelligenceReport,
+} from '../types/devintelligence.ts';
+import { SeverityText } from './OverviewAndExplorerViews.tsx';
+
+interface MobileViewProps {
+  report: ProjectIntelligenceReport;
+  onFixIssue: (issueId: string, allowReview?: boolean) => void;
+  presetErrorLogs: { id: string; label: string; ecosystem: string; rawLog: string }[];
+  onDiagnoseLog: (rawLog: string) => Promise<ErrorDiagnosisResult>;
+  isBusy: boolean;
+}
+
+export function StatusIndicator({ status }: { status: CheckStatus }) {
+  switch (status) {
+    case 'working':
+      return (
+        <span className="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-400">
+          <CheckCircle2 className="w-3.5 h-3.5 shrink-0" />
+          <span>Working Correctly</span>
+        </span>
+      );
+    case 'incompatible':
+      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>Installed / Incompatible</span>
+        </span>
+      );
+    case 'misconfigured':
+      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>Misconfigured</span>
+        </span>
+      );
+    case 'not_installed':
+      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>Not Installed</span>
+        </span>
+      );
+    case 'os_unsupported':
+      return (
+        <span className="inline-flex items-center gap-1.5 text-xs font-medium text-slate-400">
+          <Terminal className="w-3.5 h-3.5 shrink-0" />
+          <span>Cannot Check on Current OS</span>
+        </span>
+      );
+  }
+}
+
+export function ReactNativeDoctorView({ report, onFixIssue, isBusy }: MobileViewProps) {
+  const rnIssues = report.issues.filter(
+    (i) =>
+      i.domain === 'react-native' ||
+      i.domain === 'android' ||
+      i.domain === 'ios' ||
+      i.ruleId.includes('RN_') ||
+      i.ruleId.includes('EXPO_')
+  );
+
+  return (
+    <div className="space-y-8">
+      <div className="pb-5 border-b border-slate-800/80 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <div>
+          <h1 className="text-xl font-bold text-slate-100">
+            React Native Doctor & Component Intelligence
+          </h1>
+          <p className="text-xs text-slate-400 mt-1">
+            Deep inspection of {report.launchDoctor.workflowType} configuration, Babel/Metro pipelines, hook lifecycles, and native bridges.
+          </p>
+        </div>
+        <div className="text-xs font-mono tabular-nums text-slate-300">
+          RN Health Score: <strong className="text-blue-400">{report.scores.reactNative}/100</strong>
+        </div>
+      </div>
+
+      {/* React Native Matrix Summary */}
+      <div className="grid grid-cols-1 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">Workflow Architecture</div>
+          <div className="mt-1.5 text-sm font-semibold text-slate-100">
+            {report.launchDoctor.workflowType}
+          </div>
+          <div className="mt-1 text-xs font-mono text-slate-400">
+            Metro: {report.launchDoctor.metroConfigured ? 'Active' : 'Default'} · Babel: {report.launchDoctor.babelConfigured ? 'Custom' : 'Default'}
+          </div>
+        </div>
+
+        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+          <div className="text-xs text-slate-400">JS Engine & Architecture</div>
+          <div className="mt-1.5 text-sm font-semibold text-slate-100">
+            Hermes: {report.android.hermesEnabled ? 'Enabled' : 'Disabled'}
+          </div>
+          <div className="mt-1 text-xs font-mono text-slate-400">
+            New Arch (Fabric/TurboModules): {report.android.newArchEnabled ? 'Enabled' : 'Legacy Bridge'}
+          </div>
+        </div>
+
+        <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+          <div className="text-xs text-slate-400">Component & Hook Leaks</div>
+          <div className="mt-1.5 text-sm font-semibold font-mono tabular-nums text-slate-100">
+            {report.performance.memoryLeakRisksCount} lifecycle leak(s)
+          </div>
+          <div className="mt-1 text-xs font-mono text-slate-400">
+            {report.performance.renderBottlenecksCount} FlatList / render bottleneck(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">Host OS Verification</div>
+          <div className="mt-1.5 text-sm font-semibold text-slate-100">
+            Linux Container Host
+          </div>
+          <div className="mt-1 text-xs text-slate-400">
+            Android static/Gradle active · iOS static Podfile/Plist only
+          </div>
+        </div>
+      </div>
+
+      {/* Environment Doctor Checks Table */}
+      <div className="space-y-3">
+        <h2 className="text-base font-semibold text-slate-100">
+          Environment Health Matrix (Host & Project Toolchain)
+        </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">
+            <thead>
+              <tr className="border-b border-slate-800 text-[11px] font-medium text-slate-400">
+                <th className="py-2.5 px-4">Requirement</th>
+                <th className="py-2.5 px-4">Status</th>
+                <th className="py-2.5 px-4">Detected</th>
+                <th className="py-2.5 px-4">Expected</th>
+                <th className="py-2.5 px-4">Diagnostic Detail & Terminal Remediation</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-800/60 text-xs">
+              {report.environmentChecks.map((chk) => (
+                <tr key={chk.id} className="hover:bg-slate-800/40 align-top">
+                  <td className="py-3 px-3.5 font-semibold text-slate-100">
+                    {chk.name}
+                  </td>
+                  <td className="py-3 px-3.5 whitespace-nowrap">
+                    <StatusIndicator status={chk.status} />
+                  </td>
+                  <td className="py-3 px-3.5 font-mono tabular-nums text-slate-300">
+                    {chk.detectedVersion}
+                  </td>
+                  <td className="py-3 px-3.5 font-mono tabular-nums text-slate-400">
+                    {chk.requiredVersion}
+                  </td>
+                  <td className="py-3 px-3.5 text-slate-300 max-w-md">
+                    <div className="leading-relaxed">{chk.explanation}</div>
+                    {chk.remediationCommand && (
+                      <div className="mt-1 font-mono text-[11px] text-blue-400 break-all">
+                        $ {chk.remediationCommand}
+                      </div>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* React Native Specific Findings */}
+      <div className="space-y-3">
+        <h2 className="text-base font-semibold text-slate-100">
+          React Native, Metro, Babel & Component Lifecycle Findings ({rnIssues.length})
+        </h2>
+        {rnIssues.length === 0 ? (
+          <div className="p-6 bg-slate-900/50 border border-slate-800 rounded-lg text-xs text-slate-300">
+            No active React Native or native mobile configuration issues detected in this project.
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {rnIssues.map((issue) => (
+              <div
+                key={issue.id}
+                className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4"
+              >
+                <div className="space-y-1.5">
+                  <div className="flex flex-wrap 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>
+                  <p className="text-xs text-slate-400 leading-relaxed">{issue.rootCause}</p>
+                  <div className="text-xs text-blue-300">
+                    Recommended Repair: {issue.recommendedRepair}
+                  </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>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function AndroidDiagnosticsView({ report, onFixIssue, isBusy }: MobileViewProps) {
+  const androidIssues = report.issues.filter(
+    (i) => i.domain === 'android' || i.filePath.startsWith('android/')
+  );
+
+  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">
+          Android Native Folder & Gradle Intelligence
+        </h1>
+        <p className="text-xs text-slate-400 mt-1">
+          Inspects AndroidManifest.xml, build.gradle, gradle.properties, SDK levels, Kotlin/AGP compatibility, R8 minification, and permissions.
+        </p>
+      </div>
+
+      {!report.android.present ? (
+        <div className="p-8 bg-slate-900/50 border border-slate-800 rounded-lg text-xs text-slate-400">
+          This project ({report.name}) does not contain an <code className="font-mono text-slate-200">android/</code> directory. Switch to <strong className="text-slate-200">ExpoCommerceMobile</strong> or <strong className="text-slate-200">BareFitnessPro</strong> to inspect native Android Gradle and Manifest configurations.
+        </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">Application ID</div>
+              <div className="mt-1.5 text-xs font-mono font-semibold text-slate-100 truncate">
+                {report.android.packageName || 'com.devintel.app'}
+              </div>
+              <div className="mt-1 text-xs text-slate-400">
+                Manifest: {report.android.manifestPath || 'N/A'}
+              </div>
+            </div>
+
+            <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+              <div className="text-xs text-slate-400">SDK Matrix (Min / Compile / Target)</div>
+              <div className="mt-1.5 text-sm font-mono font-bold tabular-nums text-slate-100">
+                {report.android.minSdkVersion ?? 23} / {report.android.compileSdkVersion ?? 34} /{' '}
+                <span
+                  className={
+                    (report.android.targetSdkVersion || 34) < 34 ? 'text-amber-400' : 'text-emerald-400'
+                  }
+                >
+                  {report.android.targetSdkVersion ?? 34}
+                </span>
+              </div>
+              <div className="mt-1 text-xs text-slate-400">Play Store Target: API 34</div>
+            </div>
+
+            <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+              <div className="text-xs text-slate-400">Kotlin & Gradle JVM Heap</div>
+              <div className="mt-1.5 text-xs font-mono font-semibold text-slate-100">
+                Kotlin: {report.android.kotlinVersion || '1.9.24'}
+              </div>
+              <div className="mt-1 text-xs font-mono text-slate-400 truncate">
+                {report.android.gradleJvmArgs || '-Xmx4096m'}
+              </div>
+            </div>
+
+            <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+              <div className="text-xs text-slate-400">Release R8 & Cleartext</div>
+              <div className="mt-1.5 text-xs font-mono font-semibold text-slate-100">
+                R8 Minify: {report.android.releaseMinifyEnabled ? 'Enabled' : 'Disabled'}
+              </div>
+              <div className="mt-1 text-xs font-mono text-slate-400">
+                Cleartext HTTP: {report.android.cleartextTrafficAllowed ? 'Allowed (Risk)' : 'Blocked'}
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <h2 className="text-base font-semibold text-slate-100">
+              Android Manifest & Gradle Findings ({androidIssues.length})
+            </h2>
+            {androidIssues.length === 0 ? (
+              <div className="p-6 bg-slate-900/50 border border-slate-800 rounded-lg text-xs text-emerald-400">
+                All Android manifest permissions, SDK versions, and Gradle properties are healthy.
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {androidIssues.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"
+                        >
+                          {issue.repairTier === 'SAFE' ? 'Apply Safe Repair' : 'Approve & 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 IosDiagnosticsView({ report, onFixIssue, isBusy }: MobileViewProps) {
+  const iosIssues = report.issues.filter((i) => i.domain === 'ios');
+
+  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">
+          iOS Podfile, Info.plist & Entitlements Intelligence
+        </h1>
+        <p className="text-xs text-slate-400 mt-1">
+          Static verification of Podfile deployment targets, Flipper deprecations, Hermes flags, and mandatory Info.plist privacy descriptions.
+        </p>
+      </div>
+
+      {/* Honest OS Capability Notice */}
+      <div className="p-4 bg-slate-900/90 border border-slate-800 rounded-lg flex items-start gap-3">
+        <Terminal className="w-4 h-4 text-blue-400 shrink-0 mt-0.5" />
+        <div className="space-y-1 text-xs">
+          <div className="font-semibold text-slate-100">
+            Operating System Capability Boundary (Linux Container Host)
+          </div>
+          <p className="text-slate-400 leading-relaxed">
+            {report.ios.hostOsNote} DEVINTELLIGENCE never fabricates Xcode build verification on non-macOS hosts. Static Podfile and Info.plist inspection and automatic file repair work locally on all operating systems.
+          </p>
+        </div>
+      </div>
+
+      {!report.ios.present ? (
+        <div className="p-8 bg-slate-900/50 border border-slate-800 rounded-lg text-xs text-slate-400">
+          This project ({report.name}) does not have an <code className="font-mono text-slate-200">ios/</code> directory. Switch to <strong className="text-slate-200">ExpoCommerceMobile</strong> or <strong className="text-slate-200">BareFitnessPro</strong> to inspect iOS native files.
+        </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">iOS Deployment Target</div>
+              <div className="mt-1.5 text-sm font-mono font-bold text-slate-100">
+                {report.ios.deploymentTarget || '15.1 (Default)'}
+              </div>
+              <div className="mt-1 text-xs text-slate-400">
+                Podfile: {report.ios.podfilePath || 'Not present'}
+              </div>
+            </div>
+
+            <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+              <div className="text-xs text-slate-400">Flipper & Hermes Status</div>
+              <div className="mt-1.5 text-sm font-mono font-semibold text-slate-100">
+                Flipper: {report.ios.flipperEnabled ? 'Enabled (Deprecated)' : 'Removed (Clean)'}
+              </div>
+              <div className="mt-1 text-xs font-mono text-slate-400">
+                Hermes Engine: {report.ios.hermesEnabled === false ? 'Disabled' : 'Enabled'}
+              </div>
+            </div>
+
+            <div className="p-4 bg-slate-900/70 border border-slate-800/80 rounded-lg">
+              <div className="text-xs text-slate-400">Privacy Usage Keys (Info.plist)</div>
+              <div className="mt-1.5 text-sm font-mono font-semibold text-slate-100">
+                {report.ios.missingRequiredPermissions.length === 0
+                  ? 'All Required Keys Present'
+                  : `Missing: ${report.ios.missingRequiredPermissions.join(', ')}`}
+              </div>
+              <div className="mt-1 text-xs text-slate-400">
+                Bundle ID: {report.ios.bundleIdentifier || 'com.devintel.expocommerce'}
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <h2 className="text-base font-semibold text-slate-100">
+              iOS Configuration Findings ({iosIssues.length})
+            </h2>
+            {iosIssues.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 Safe Podfile/Plist Fix
+                    </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 ErrorDiagnosticsView({
+  presetErrorLogs,
+  onDiagnoseLog,
+}: MobileViewProps) {
+  const [rawLog, setRawLog] = useState<string>(presetErrorLogs[0]?.rawLog || '');
+  const [diagnosis, setDiagnosis] = useState<ErrorDiagnosisResult | null>(null);
+  const [diagnosing, setDiagnosing] = useState(false);
+
+  async function handleRunDiagnosis(logText = rawLog) {
+    if (!logText.trim()) return;
+    setDiagnosing(true);
+    try {
+      const res = await onDiagnoseLog(logText);
+      setDiagnosis(res);
+    } finally {
+      setDiagnosing(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">
+          React Native, Metro, Gradle & CocoaPods Error Diagnostics
+        </h1>
+        <p className="text-xs text-slate-400 mt-1">
+          Paste any Metro bundler crash, Red Screen stack trace, Gradle build failure, Android Manifest merger error, or CocoaPods output to trace the exact root cause.
+        </p>
+      </div>
+
+      {/* Preset Log Selector */}
+      <div className="space-y-2">
+        <div className="text-xs font-medium text-slate-300">
+          Load Captured Build / Runtime Crash Trace:
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {presetErrorLogs.map((preset) => (
+            <button
+              key={preset.id}
+              type="button"
+              onClick={() => {
+                setRawLog(preset.rawLog);
+                handleRunDiagnosis(preset.rawLog);
+              }}
+              className="px-3 py-1.5 text-xs font-medium bg-slate-900 hover:bg-slate-800 text-slate-200 border border-slate-800 rounded-lg transition-colors cursor-pointer whitespace-nowrap"
+            >
+              {preset.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <label htmlFor="error-log-textarea" className="block text-xs font-medium text-slate-300">
+          Raw Terminal / Bundler / Native Crash Log Input
+        </label>
+        <textarea
+          id="error-log-textarea"
+          rows={6}
+          value={rawLog}
+          onChange={(e) => setRawLog(e.target.value)}
+          className="w-full p-3.5 text-xs font-mono bg-slate-950 border border-slate-800 rounded-lg text-slate-200 focus:outline-none focus:border-blue-500"
+          placeholder="Paste Metro, Gradle, Kotlin, Xcode, or Red Screen error output here..."
+        />
+        <div className="flex justify-end">
+          <button
+            type="button"
+            disabled={diagnosing || !rawLog.trim()}
+            onClick={() => handleRunDiagnosis(rawLog)}
+            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"
+          >
+            <Search className="w-3.5 h-3.5" />
+            <span>{diagnosing ? 'Analyzing Stack Trace...' : 'Diagnose Error Log'}</span>
+          </button>
+        </div>
+      </div>
+
+      {diagnosis && (
+        <div className="p-6 bg-slate-900/80 border border-slate-800 rounded-lg space-y-4">
+          <div className="flex flex-wrap items-center justify-between gap-2 pb-3 border-b border-slate-800">
+            <div className="flex items-center gap-2 text-xs flex-wrap">
+              <SeverityText severity={diagnosis.severity} />
+              <span className="text-slate-500">·</span>
+              <span className="font-mono text-blue-400">{diagnosis.category}</span>
+              <span className="text-slate-500">·</span>
+              <span className="font-mono text-slate-300">
+                Confidence: {diagnosis.confidence}%
+              </span>
+              <span className="text-slate-500">·</span>
+              {diagnosis.aiPowered ? (
+                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-semibold bg-emerald-950 text-emerald-300 border border-emerald-800">
+                  ✨ AI Powered ({diagnosis.aiModel || 'Groq Qwen 27B'})
+                </span>
+              ) : (
+                <span
+                  className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-semibold bg-amber-950/70 text-amber-300 border border-amber-800"
+                  title={diagnosis.fallbackReason || 'Built-in Rule Engine'}
+                >
+                  ⚡ Local Rule Engine {diagnosis.fallbackUsed ? '(Quota Fallback)' : ''}
+                </span>
+              )}
+            </div>
+            <div className="text-xs font-mono text-slate-300">
+              Responsible File: <strong>{diagnosis.responsibleFile}</strong>
+              {diagnosis.line ? `:${diagnosis.line}` : ''}
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            {diagnosis.fallbackUsed && diagnosis.fallbackReason && (
+              <div className="p-2.5 bg-amber-950/40 border border-amber-800/60 rounded text-xs text-amber-200 flex items-center gap-2 mb-2">
+                <span>🛡️</span>
+                <span>
+                  <strong>Zero-Downtime Fallback:</strong> {diagnosis.fallbackReason}
+                </span>
+              </div>
+            )}
+            <h3 className="text-base font-bold text-slate-100">{diagnosis.summary}</h3>
+            <p className="text-xs text-slate-300 leading-relaxed">{diagnosis.rootCause}</p>
+          </div>
+
+          <div className="space-y-2">
+            <div className="text-xs font-semibold text-slate-200">
+              Recommended Safe Repair Sequence:
+            </div>
+            <ol className="list-decimal list-inside space-y-1 text-xs text-slate-300">
+              {diagnosis.safeRepairSteps.map((step, i) => (
+                <li key={i}>{step}</li>
+              ))}
+            </ol>
+          </div>
+
+          {diagnosis.terminalCommands.length > 0 && (
+            <div className="space-y-1.5">
+              <div className="text-xs font-semibold text-slate-200">
+                Exact Terminal Commands:
+              </div>
+              <pre className="p-3 bg-slate-950 border border-slate-800 rounded text-xs font-mono text-blue-300">
+                {diagnosis.terminalCommands.map((c) => `$ ${c}`).join('\n')}
+              </pre>
+            </div>
+          )}
+
+          {diagnosis.codePatchSuggestion && (
+            <div className="space-y-1.5">
+              <div className="text-xs font-semibold text-slate-200">
+                Suggested Configuration Patch:
+              </div>
+              <pre className="p-3 bg-slate-950 border border-slate-800 rounded text-xs font-mono text-emerald-300">
+                {diagnosis.codePatchSuggestion}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}