(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+ );
+ const first = focusable[0];
+ const last = focusable[focusable.length - 1];
+
+ if (e.shiftKey) {
+ if (document.activeElement === first) {
+ e.preventDefault();
+ last.focus();
+ }
+ } else {
+ if (document.activeElement === last) {
+ e.preventDefault();
+ first.focus();
+ }
+ }
+ },
+ [onCancel]
+ );
+
+ useEffect(() => {
+ if (open) {
+ document.addEventListener("keydown", handleKeyDown);
+ document.body.style.overflow = "hidden";
+ return () => {
+ document.removeEventListener("keydown", handleKeyDown);
+ document.body.style.overflow = "";
+ };
+ }
+ }, [open, handleKeyDown]);
+
+ return (
+
+ {open && (
+
+ {/* Backdrop */}
+
+
+ {/* Dialog */}
+
+
+ {title}
+
+
+ {description}
+
+
+
+
+ {cancelLabel}
+
+
+ {confirmLabel}
+
+
+
+
+ );
+}
diff --git a/src/components/feedback/EmptyState.tsx b/src/components/feedback/EmptyState.tsx
new file mode 100644
index 0000000..6e19f67
--- /dev/null
+++ b/src/components/feedback/EmptyState.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface EmptyStateProps {
+ icon: LucideIcon;
+ title: string;
+ description: string;
+ action?: {
+ label: string;
+ onClick: () => void;
+ };
+}
+
+export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
+ return (
+
+
+
+
{title}
+
{description}
+ {action && (
+
+ {action.label}
+
+ )}
+
+
+
{title}
+
{message}
+ {onRetry && (
+
+
+ )}
+
+
+
+
+ {title && (
+
+ {title}
+
+ )}
+
{children}
+
+
+
+
+ {message && (
+
{message}
+ )}
+
+ {stages.map((stage, index) => {
+ const styles = statusStyles[stage.status];
+ const Icon = statusIcons[stage.status];
+ const isLast = index === stages.length - 1;
+ const isRunning = stage.status === "running";
+
+ return (
+
+ {/* Dot and connecting line */}
+
+
+
+ {!isLast && (
+
+ )}
+
+
+ {/* Stage label */}
+
+
+ {stage.name}
+
+ {isRunning && currentStage && (
+
+ {currentStage}
+
+ )}
+
+
+ );
+ })}
+
+ {dimensions.map((dimension, i) => (
+
+ {/* Header */}
+
+
+ {dimension.name}
+
+
+ {dimension.score}
+
+
+
+ {/* Animated progress bar */}
+
+
+
+ {/* Findings */}
+
+
+
+ {/* Summary */}
+
+ {dimension.summary}
+
+
+ ))}
+
{displayValue} ;
+}
+
+export function HealthScore({
+ score,
+ grade,
+ previousScore,
+ summary,
+ examinedAt,
+}: HealthScoreProps) {
+ const delta = previousScore !== null && previousScore !== undefined
+ ? score - previousScore
+ : null;
+
+ return (
+
+ {/* Ambient glow */}
+
+
+
+ {/* Header */}
+
+
+ Repository Health
+
+
+ {/* Animated score */}
+
+
+ {/* Grade badge */}
+
+
+ {healthGradeLabel(grade)}
+
+
+
+
+ {/* Delta indicator */}
+ {delta !== null && delta !== 0 && (
+
+ 0 && "bg-success-light text-success",
+ delta < 0 && "bg-critical-light text-critical"
+ )}
+ >
+ {delta > 0 ? (
+
+
+ )}
+
+ {/* Summary */}
+
+ {summary}
+
+
+ {/* Timestamp */}
+
+
+
+ );
+}
diff --git a/src/components/health/HealthSummary.tsx b/src/components/health/HealthSummary.tsx
new file mode 100644
index 0000000..207cf96
--- /dev/null
+++ b/src/components/health/HealthSummary.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { HeartPulse, AlertTriangle, Wrench } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+ healthGradeLabel,
+ healthGradeColor,
+} from "@/lib/utils";
+import type { HealthGrade, HealthDimension } from "@/lib/types";
+
+interface HealthSummaryProps {
+ score: number;
+ grade: HealthGrade;
+ dimensions: HealthDimension[];
+ diagnosisCount: number;
+ treatmentCount: number;
+}
+
+export function HealthSummary({
+ score,
+ grade,
+ dimensions,
+ diagnosisCount,
+ treatmentCount,
+}: HealthSummaryProps) {
+ const totalFindings = dimensions.reduce((sum, d) => sum + d.findings, 0);
+
+ return (
+
+
+
+
+ {score}
+
+ {healthGradeLabel(grade)}
+
+
+
+
+
+
+
+ {diagnosisCount} {" "}
+ {diagnosisCount === 1 ? "diagnosis" : "diagnoses"}
+
+
+
+ {treatmentCount} {" "}
+ {treatmentCount === 1 ? "treatment" : "treatments"}
+
+
+
+
+ {totalFindings} total {totalFindings === 1 ? "finding" : "findings"} across{" "}
+ {dimensions.length} dimensions
+
+
+ );
+}
diff --git a/src/components/health/HealthTrend.tsx b/src/components/health/HealthTrend.tsx
new file mode 100644
index 0000000..61ca23f
--- /dev/null
+++ b/src/components/health/HealthTrend.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface HealthTrendProps {
+ scores: { score: number; date: string }[];
+ className?: string;
+}
+
+export function HealthTrend({ scores, className }: HealthTrendProps) {
+ if (scores.length < 2) {
+ return (
+
+ Not enough data for trend analysis
+
+ );
+ }
+
+ const maxScore = 100;
+ const minScore = 0;
+ const width = 200;
+ const height = 60;
+ const padding = 4;
+
+ const points = scores.map((s, i) => ({
+ x: padding + (i / (scores.length - 1)) * (width - padding * 2),
+ y: padding + ((maxScore - s.score) / (maxScore - minScore)) * (height - padding * 2),
+ }));
+
+ const pathD = points
+ .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
+ .join(" ");
+
+ const lastScore = scores[scores.length - 1].score;
+ const prevScore = scores[scores.length - 2].score;
+ const delta = lastScore - prevScore;
+
+ return (
+
+
+
+
+ {lastScore}
+ 0 && "text-success",
+ delta < 0 && "text-critical",
+ delta === 0 && "text-text-muted"
+ )}
+ >
+ {delta > 0 ? "+" : ""}
+ {delta}
+
+
+
+ +{absDelta}
+
+ );
+ }
+
+ if (delta < 0) {
+ return (
+
+ -{absDelta}
+
+ );
+ }
+
+ return (
+
+ No change
+
+ );
+}
diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
new file mode 100644
index 0000000..4f11418
--- /dev/null
+++ b/src/components/layout/AppShell.tsx
@@ -0,0 +1,255 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+ LayoutDashboard,
+ Stethoscope,
+ Wrench,
+ Clock,
+ Settings2,
+ Activity,
+ X,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { TopBar } from "./TopBar";
+import { MobileNav } from "./MobileNav";
+
+interface AppShellProps {
+ children: React.ReactNode;
+ repositoryName?: string;
+}
+
+const navItems = [
+ { label: "Overview", icon: LayoutDashboard, segment: "" },
+ { label: "Diagnoses", icon: Stethoscope, segment: "diagnoses" },
+ { label: "Treatments", icon: Wrench, segment: "treatments" },
+ { label: "History", icon: Clock, segment: "history" },
+ { label: "Settings", icon: Settings2, segment: "settings" },
+];
+
+export function AppShell({ children, repositoryName }: AppShellProps) {
+ const [mobileNavOpen, setMobileNavOpen] = useState(false);
+ const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+ const pathname = usePathname();
+
+ const repoMatch = pathname.match(/^\/app\/repos\/([^/]+)/);
+ const repositoryId = repoMatch ? repoMatch[1] : undefined;
+
+ const toggleMobileNav = useCallback(() => {
+ setMobileNavOpen((prev) => !prev);
+ }, []);
+
+ const closeMobileNav = useCallback(() => {
+ setMobileNavOpen(false);
+ }, []);
+
+ // Close drawer on escape
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === "Escape") closeMobileNav();
+ };
+ if (mobileNavOpen) {
+ document.addEventListener("keydown", handleEscape);
+ return () => document.removeEventListener("keydown", handleEscape);
+ }
+ }, [mobileNavOpen, closeMobileNav]);
+
+ useEffect(() => {
+ const handleMouseMove = (e: MouseEvent) => {
+ setMousePosition({ x: e.clientX, y: e.clientY });
+ };
+ window.addEventListener("mousemove", handleMouseMove);
+ return () => window.removeEventListener("mousemove", handleMouseMove);
+ }, []);
+
+ return (
+
+ {/* Ambient glow */}
+
+
+ {/* Desktop sidebar */}
+
+
+ {/* Mobile drawer overlay */}
+
+ {mobileNavOpen && (
+ <>
+ {/* Backdrop */}
+
+ {/* Drawer header */}
+
+
+ {/* Drawer navigation */}
+
+ {navItems.map((item) => {
+ const href = repositoryId
+ ? `/app/repos/${repositoryId}${item.segment ? "/" + item.segment : ""}`
+ : `/app/repos${item.segment ? "/" + item.segment : ""}`;
+ const isActive =
+ pathname === href || pathname.startsWith(href + "/");
+
+ return (
+
+
+
+ )}
+
+
+ {/* Main content area */}
+
+ {/* Mobile top bar */}
+
+
+ {/* Scrollable content with page transition */}
+
+
+ {children}
+
+
+
+ {/* Mobile bottom nav */}
+
+
+
+
+
+
+
R
+
Repo Doctor Evidence workspace
+
+
+ {navItems.map((item) => {
+ const href = repositoryId
+ ? `/app/repos/${repositoryId}${item.segment ? "/" + item.segment : ""}`
+ : `/app/repos${item.segment ? "/" + item.segment : ""}`;
+ const isActive =
+ pathname === href || pathname.startsWith(href + "/");
+
+ return (
+ {item.label}
+
+ );
+ })}
+
+
+
+
+
+
+
+ Repo Doctor
+
+
+ v1.0
+
+
+
+
+ );
+}
diff --git a/src/components/layout/MobileNav.tsx b/src/components/layout/MobileNav.tsx
new file mode 100644
index 0000000..35369b2
--- /dev/null
+++ b/src/components/layout/MobileNav.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+ LayoutDashboard,
+ Stethoscope,
+ Wrench,
+ Clock,
+ Settings2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface MobileNavProps {
+ repositoryId?: string;
+}
+
+const navItems = [
+ { label: "Overview", icon: LayoutDashboard, segment: "" },
+ { label: "Diagnoses", icon: Stethoscope, segment: "diagnoses" },
+ { label: "Treatments", icon: Wrench, segment: "treatments" },
+ { label: "History", icon: Clock, segment: "history" },
+ { label: "Settings", icon: Settings2, segment: "settings" },
+];
+
+export function MobileNav({ repositoryId }: MobileNavProps) {
+ const pathname = usePathname();
+
+ return (
+
+ {navItems.map((item) => {
+ const href = repositoryId
+ ? `/app/repos/${repositoryId}${item.segment ? "/" + item.segment : ""}`
+ : `/app/repos${item.segment ? "/" + item.segment : ""}`;
+ const isActive =
+ pathname === href || pathname.startsWith(href + "/");
+
+ return (
+
+
+
+
{item.label}
+
+ );
+ })}
+
+ {/* Navigation links */}
+
+ {navItems.map((item) => {
+ const href = repositoryId
+ ? `/app/repos/${repositoryId}${item.segment ? "/" + item.segment : ""}`
+ : `/app/repos${item.segment ? "/" + item.segment : ""}`;
+ const isActive =
+ pathname === href || pathname.startsWith(href + "/");
+
+ return (
+ {item.label} }
+
+ );
+ })}
+
+
+ {/* Branding footer */}
+
+
+
+ {!collapsed && (
+
+
+ Repo Doctor
+
+
+ v1.0
+
+
+ )}
+
+
+ );
+}
diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx
new file mode 100644
index 0000000..60d587e
--- /dev/null
+++ b/src/components/layout/TopBar.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { Menu } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface TopBarProps {
+ onMenuToggle?: () => void;
+ repositoryName?: string;
+}
+
+export function TopBar({ onMenuToggle, repositoryName }: TopBarProps) {
+ return (
+
+ {/* Hamburger menu */}
+
+
+
+ {/* Page title + repo name */}
+
+
+ {repositoryName || "Repo Doctor"}
+
+
+
= {
+ queued: { label: "Queued", icon: Clock, color: "text-text-muted" },
+ validating: { label: "Validating", icon: Settings, color: "text-info" },
+ extracting: { label: "Extracting", icon: FileSearch, color: "text-info" },
+ mapping: { label: "Mapping", icon: Network, color: "text-info" },
+ scanning: { label: "Scanning", icon: Scan, color: "text-accent" },
+ diagnosing: { label: "Diagnosing", icon: Stethoscope, color: "text-accent" },
+ scoring: { label: "Scoring", icon: BarChart3, color: "text-accent" },
+ completed: { label: "Completed", icon: CheckCircle2, color: "text-success" },
+ failed: { label: "Failed", icon: XCircle, color: "text-critical" },
+};
+
+export function ExaminationStatus({ status, progress }: ExaminationStatusProps) {
+ const config = statusConfig[status];
+ const Icon = config.icon;
+ const isRunning = !["completed", "failed"].includes(status);
+
+ return (
+
+ {config.label}
+ {progress != null && (
+ {Math.round(progress)}%
+ )}
+
+ );
+}
diff --git a/src/components/repository/RepositoryCard.tsx b/src/components/repository/RepositoryCard.tsx
new file mode 100644
index 0000000..4eefe24
--- /dev/null
+++ b/src/components/repository/RepositoryCard.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { Calendar, BarChart3 } from "lucide-react";
+import { cn, formatRelativeTime, formatBytes, healthGradeColor, healthGradeLabel } from "@/lib/utils";
+import type { Repository } from "@/lib/types";
+import { TechnologyBadge } from "./TechnologyBadge";
+
+interface RepositoryCardProps {
+ repository: Repository;
+ onClick?: () => void;
+}
+
+export function RepositoryCard({ repository, onClick }: RepositoryCardProps) {
+ return (
+
+
+
+
{repository.name}
+
{repository.fullName}
+
+ {repository.language && (
+
+ {repository.language}
+
+ )}
+
+
+
+ {repository.lastExaminedAt && (
+
+
+ )}
+
+
+ {repository.technologies.length > 0 && (
+
+ {repository.technologies.slice(0, 5).map((tech) => (
+ +{repository.technologies.length - 5}
+ )}
+
+ )}
+
+ );
+}
diff --git a/src/components/repository/RepositoryIdentity.tsx b/src/components/repository/RepositoryIdentity.tsx
new file mode 100644
index 0000000..5cacc49
--- /dev/null
+++ b/src/components/repository/RepositoryIdentity.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { GitBranch } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Repository } from "@/lib/types";
+
+interface RepositoryIdentityProps {
+ repository: Repository;
+}
+
+export function RepositoryIdentity({ repository }: RepositoryIdentityProps) {
+ return (
+
+
+
{repository.name}
+
+
+
+
+
{repository.fullName}
+
+
+ {repository.language && (
+ {repository.language}
+ )}
+
+
+ {repository.description && (
+
{repository.description}
+ )}
+
+ {technology.name}
+ {technology.version && (
+ {technology.version}
+ )}
+
+ );
+}
diff --git a/src/components/treatment/ApprovalPanel.tsx b/src/components/treatment/ApprovalPanel.tsx
new file mode 100644
index 0000000..eb84cdd
--- /dev/null
+++ b/src/components/treatment/ApprovalPanel.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { ShieldCheck, AlertTriangle, FileWarning } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ApprovalPanelProps {
+ risk: "low" | "medium" | "high";
+ onApprove: () => void;
+ onCancel: () => void;
+ disabled?: boolean;
+}
+
+const riskConfig = {
+ low: {
+ icon: ShieldCheck,
+ color: "text-success",
+ bg: "bg-success-light",
+ message: "This treatment has minimal risk. Changes are isolated and easily reversible.",
+ },
+ medium: {
+ icon: AlertTriangle,
+ color: "text-warning",
+ bg: "bg-warning-light",
+ message: "This treatment modifies core logic. Review the diff carefully before approving.",
+ },
+ high: {
+ icon: FileWarning,
+ color: "text-critical",
+ bg: "bg-critical-light",
+ message: "This treatment involves significant changes. A rollback may not fully restore the original state.",
+ },
+};
+
+export function ApprovalPanel({ risk, onApprove, onCancel, disabled }: ApprovalPanelProps) {
+ const config = riskConfig[risk];
+ const RiskIcon = config.icon;
+
+ return (
+
+
+
+
+
+
Safety Notice
+
{config.message}
+
+
+
+
+ Your original repository remains unchanged until you approve this treatment.
+
+
+
+
+ Approve Treatment
+
+
+ Cancel
+
+
+
+
+
+
+ {patch.path}
+
+
+ +{patch.additions}
+ -{patch.deletions}
+
+
+ );
+}
diff --git a/src/components/treatment/DiffViewer.tsx b/src/components/treatment/DiffViewer.tsx
new file mode 100644
index 0000000..13b239f
--- /dev/null
+++ b/src/components/treatment/DiffViewer.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import type { FilePatch } from "@/lib/types";
+import { DiffFileHeader } from "./DiffFileHeader";
+
+interface DiffViewerProps {
+ patches: FilePatch[];
+}
+
+function DiffLine({ line }: { line: string }) {
+ const trimmed = line.replace(/^diff --git.*$/, "");
+ if (!trimmed || trimmed.startsWith("index ") || trimmed.startsWith("---") || trimmed.startsWith("+++") || trimmed.startsWith("@@")) {
+ return (
+
+ {line}
+
+ );
+ }
+
+ if (trimmed.startsWith("+")) {
+ return (
+
+ {line}
+
+ );
+ }
+
+ if (trimmed.startsWith("-")) {
+ return (
+
+ {line}
+
+ );
+ }
+
+ return (
+
+ {line}
+
+ );
+}
+
+export function DiffViewer({ patches }: DiffViewerProps) {
+ const [expandedFiles, setExpandedFiles] = useState>(new Set());
+
+ const toggleFile = (index: number) => {
+ setExpandedFiles((prev) => {
+ const next = new Set(prev);
+ if (next.has(index)) {
+ next.delete(index);
+ } else {
+ next.add(index);
+ }
+ return next;
+ });
+ };
+
+ return (
+
+ {patches.map((patch, index) => (
+
+
toggleFile(index)}
+ />
+ {expandedFiles.has(index) && (
+
+ {patch.diff.split("\n").map((line, i) => (
+
+ ))}
+ {patch.explanation && (
+
+ {patch.explanation}
+
+ )}
+
+ ))}
+
+
+
+
+
+
Rollback Changes
+
+ This will revert all files modified by this treatment to their original state.
+ The rollback cannot be undone.
+
+
+
+
+
+ Confirm Rollback
+
+
+
+
+
Treatment Proposal
+ {diagnosis && (
+
{diagnosis.title}
+ )}
+
+
+
+
+
+
{proposal.summary}
+
+
+
+ {proposal.affectedFiles.length} {proposal.affectedFiles.length === 1 ? "file" : "files"} affected
+
+
+
+ {proposal.verificationPlan.length > 0 && (
+
+
Verification Plan
+
+ {proposal.verificationPlan.map((step, i) => (
+
+
+ {i + 1}
+
+ {step}
+
+ ))}
+
+
+ )}
+
+
+ Your original repository remains unchanged.
+
+
+
+ {onApprove && (
+
+ Approve and Run Verification
+
+ )}
+ {onCancel && (
+
+ Cancel
+
+ )}
+
+
+
+ {isCompleted &&
+ {isCompleted && "Treatment completed successfully"}
+ {isFailed && "Treatment failed"}
+ {!isCompleted && !isFailed && `Status: ${treatment.status}`}
+
+
+
+
+
+
Files Changed
+
{treatment.patches.length}
+
+
+
Completed
+
+ {treatment.completedAt ? formatDate(treatment.completedAt) : "—"}
+
+
+
+
+ {(treatment.scoreBefore != null || treatment.scoreAfter != null) && (
+
+
Score
+
+ {treatment.scoreBefore != null && (
+
{treatment.scoreBefore}
+ )}
+ {scoreDelta !== null && (
+
0 ? "text-success" : scoreDelta < 0 ? "text-critical" : "text-text-muted")}>
+ {scoreDelta > 0 ?
+ )}
+ {treatment.scoreAfter != null && (
+
{treatment.scoreAfter}
+ )}
+
+
+ )}
+
+
+
Verification
+
+ {treatment.verification.steps.map((step, i) => (
+
+ {step.status === "passed" &&
+ ))}
+
+
+
+
+ {onDownload && (
+
+
+ )}
+ {onRollback && treatment.status === "completed" && (
+
+
+ )}
+ {onNewExamination && (
+
+
+ )}
+
+
= {
+ proposed: { label: "Proposed", bg: "bg-info-light", text: "text-info" },
+ approved: { label: "Approved", bg: "bg-accent-light", text: "text-accent" },
+ applying: { label: "Applying", bg: "bg-warning-light", text: "text-warning" },
+ verifying: { label: "Verifying", bg: "bg-info-light", text: "text-info" },
+ completed: { label: "Completed", bg: "bg-success-light", text: "text-success" },
+ failed: { label: "Failed", bg: "bg-critical-light", text: "text-critical" },
+ rolled_back: { label: "Rolled Back", bg: "bg-surface-elevated", text: "text-text-muted" },
+};
+
+export function TreatmentSummary({ treatment }: TreatmentSummaryProps) {
+ const status = statusConfig[treatment.status];
+ const scoreDelta =
+ treatment.scoreBefore != null && treatment.scoreAfter != null
+ ? treatment.scoreAfter - treatment.scoreBefore
+ : null;
+
+ return (
+
+
+
+ {status.label}
+
+ {formatDate(treatment.createdAt)}
+
+
+
+
+ {treatment.proposal.summary}
+
+
+
+
+
+ {treatment.patches.length} {treatment.patches.length === 1 ? "file" : "files"} changed
+
+
+ {scoreDelta !== null && (
+
0 ? "text-success" : scoreDelta < 0 ? "text-critical" : "text-text-muted")}>
+ {scoreDelta > 0 ? (
+
+ )}
+
+ {scoreDelta === null && treatment.scoreAfter != null && (
+
Score: {treatment.scoreAfter}
+ )}
+
+
= {
+ pending: { icon: Circle, color: "text-text-muted" },
+ running: { icon: Loader2, color: "text-accent" },
+ passed: { icon: CheckCircle2, color: "text-success" },
+ failed: { icon: XCircle, color: "text-critical" },
+ unavailable: { icon: MinusCircle, color: "text-text-muted" },
+ timeout: { icon: XCircle, color: "text-warning" },
+};
+
+export function VerificationSteps({ steps }: VerificationStepsProps) {
+ const [expanded, setExpanded] = useState>(new Set());
+
+ const toggle = (index: number) => {
+ setExpanded((prev) => {
+ const next = new Set(prev);
+ if (next.has(index)) {
+ next.delete(index);
+ } else {
+ next.add(index);
+ }
+ return next;
+ });
+ };
+
+ return (
+
+ {steps.map((step, index) => {
+ const s = statusIcon[step.status] ?? statusIcon.pending;
+ const Icon = s.icon;
+ const isExpanded = expanded.has(index);
+ const hasOutput = step.output && step.output.trim().length > 0;
+
+ return (
+
+
hasOutput && toggle(index)}
+ aria-expanded={isExpanded}
+ className={cn(
+ "flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-surface",
+ isExpanded && "bg-surface"
+ )}
+ >
+ {step.name}
+ {step.command && (
+
+ {step.command}
+
+ )}
+ {step.duration != null && (
+ {step.duration}ms
+ )}
+ {hasOutput && (
+
+ {isExpanded && hasOutput && (
+
+ )}
+
+ );
+ })}
+
{
+ return [MOCK_REPO];
+}
+
+export async function getRepository(id: string): Promise {
+ return { ...MOCK_REPO, id };
+}
+
+export async function connectRepository(url: string): Promise {
+ const response = await fetch("/api/repositories", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }) });
+ const payload = await response.json() as Repository | { message?: string };
+ if (!response.ok) throw new Error("message" in payload ? payload.message : "Could not connect repository.");
+ return payload as Repository;
+}
+
+export async function getExamination(repoId: string): Promise {
+ return MOCK_EXAMINATION;
+}
+
+export async function startExamination(repoId: string): Promise {
+ return { ...MOCK_EXAMINATION, status: "queued", progress: 0 };
+}
+
+export async function getHealthRecord(repoId: string): Promise {
+ return MOCK_HEALTH;
+}
+
+export async function getDiagnoses(repoId: string): Promise {
+ return MOCK_DIAGNOSES;
+}
+
+export async function getDiagnosis(
+ repoId: string,
+ diagnosisId: string
+): Promise {
+ return MOCK_DIAGNOSES.find((d) => d.id === diagnosisId);
+}
+
+export async function updateDiagnosisStatus(
+ repoId: string,
+ diagnosisId: string,
+ status: "open" | "resolved" | "dismissed"
+): Promise {
+ const diag = MOCK_DIAGNOSES.find((d) => d.id === diagnosisId);
+ if (diag) diag.status = status;
+ return diag;
+}
+
+export async function getTreatments(repoId: string): Promise {
+ return MOCK_TREATMENTS;
+}
+
+export async function getTreatment(
+ repoId: string,
+ treatmentId: string
+): Promise {
+ return MOCK_TREATMENTS.find((t) => t.id === treatmentId);
+}
+
+export async function createTreatment(
+ repoId: string,
+ diagnosisId: string
+): Promise {
+ return MOCK_TREATMENTS[0];
+}
+
+export async function approveTreatment(
+ repoId: string,
+ treatmentId: string
+): Promise {
+ return MOCK_TREATMENTS[0];
+}
+
+export async function rollbackTreatment(
+ repoId: string,
+ treatmentId: string
+): Promise {
+ return MOCK_TREATMENTS[0];
+}
diff --git a/src/lib/providers.tsx b/src/lib/providers.tsx
new file mode 100644
index 0000000..cd44046
--- /dev/null
+++ b/src/lib/providers.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+ const [queryClient] = useState(
+ () =>
+ new QueryClient({
+ defaultOptions: {
+ queries: {
+ staleTime: 60 * 1000,
+ retry: 1,
+ },
+ },
+ })
+ );
+
+ return (
+ {children}
+ );
+}
diff --git a/src/lib/server/github.ts b/src/lib/server/github.ts
new file mode 100644
index 0000000..017eb86
--- /dev/null
+++ b/src/lib/server/github.ts
@@ -0,0 +1,81 @@
+import "server-only";
+
+const GITHUB_REPOSITORY_URL = /^https:\/\/github\.com\/([\w.-]+)\/([\w.-]+)\/?$/;
+const GITHUB_HEADERS = {
+ Accept: "application/vnd.github+json",
+ "User-Agent": "repo-doctor",
+};
+
+export type RepositorySnapshot = {
+ owner: string;
+ name: string;
+ fullName: string;
+ url: string;
+ defaultBranch: string;
+ description: string | null;
+ language: string | null;
+ topics: string[];
+ files: string[];
+ manifests: Record;
+};
+
+export function parseGitHubRepositoryUrl(value: unknown) {
+ const match = typeof value === "string" ? GITHUB_REPOSITORY_URL.exec(value.trim()) : null;
+ if (!match) return null;
+
+ return { owner: match[1], repository: match[2].replace(/\.git$/, "") };
+}
+
+async function githubJson(path: string): Promise {
+ const response = await fetch(`https://api.github.com${path}`, {
+ headers: GITHUB_HEADERS,
+ cache: "no-store",
+ signal: AbortSignal.timeout(15_000),
+ });
+ if (!response.ok) throw new Error(`GitHub request failed (${response.status}).`);
+ return response.json() as Promise;
+}
+
+export async function getRepositoryFileText(owner: string, repository: string, path: string) {
+ try {
+ if (!/^[A-Za-z0-9._/-]+$/.test(path) || path.includes("..")) return null;
+ const content = await githubJson<{ content?: string; encoding?: string }>(
+ `/repos/${encodeURIComponent(owner)}/${encodeURIComponent(repository)}/contents/${path.split("/").map(encodeURIComponent).join("/")}`,
+ );
+ if (content.encoding !== "base64" || !content.content) return null;
+ return Buffer.from(content.content.replace(/\n/g, ""), "base64").toString("utf8").slice(0, 12_000);
+ } catch {
+ return null;
+ }
+}
+
+export async function getRepositorySnapshot(input: { owner: string; repository: string }): Promise {
+ const basePath = `/repos/${encodeURIComponent(input.owner)}/${encodeURIComponent(input.repository)}`;
+ const [repo, tree] = await Promise.all([
+ githubJson<{ full_name: string; name: string; html_url: string; default_branch: string; description: string | null; language: string | null; topics?: string[] }>(basePath),
+ githubJson<{ tree?: Array<{ path?: string; type?: string }> }>(`${basePath}/git/trees/HEAD?recursive=1`),
+ ]);
+ const files = (tree.tree ?? [])
+ .filter((entry) => entry.type === "blob" && typeof entry.path === "string")
+ .map((entry) => entry.path as string)
+ .filter((path) => !path.includes("node_modules/") && !path.includes(".git/"))
+ .slice(0, 350);
+ const candidateFiles = ["package.json", "README.md", "pyproject.toml", "requirements.txt", "go.mod", "Cargo.toml"];
+ const manifests = Object.fromEntries(
+ (await Promise.all(candidateFiles.filter((path) => files.includes(path)).map(async (path) => [path, await getRepositoryFileText(input.owner, input.repository, path)] as const)))
+ .filter(([, content]) => content !== null),
+ ) as Record;
+
+ return {
+ owner: input.owner,
+ name: repo.name,
+ fullName: repo.full_name,
+ url: repo.html_url,
+ defaultBranch: repo.default_branch,
+ description: repo.description,
+ language: repo.language,
+ topics: repo.topics ?? [],
+ files,
+ manifests,
+ };
+}
diff --git a/src/lib/server/groq.ts b/src/lib/server/groq.ts
new file mode 100644
index 0000000..23a157e
--- /dev/null
+++ b/src/lib/server/groq.ts
@@ -0,0 +1,35 @@
+import "server-only";
+
+const endpoint = "https://api.groq.com/openai/v1/chat/completions";
+
+function parseJson(content: string) {
+ const withoutFence = content.replace(/^```(?:json)?\s*/i, "").replace(/\s*```$/, "");
+ return JSON.parse(withoutFence) as unknown;
+}
+
+export async function generateStructuredReview(system: string, prompt: string): Promise {
+ const apiKey = process.env.GROQ_API_KEY;
+ if (!apiKey) throw new Error("AI review is not configured. Set GROQ_API_KEY on the server.");
+
+ const response = await fetch(endpoint, {
+ method: "POST",
+ headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}` },
+ body: JSON.stringify({
+ model: process.env.GROQ_MODEL ?? "llama-3.3-70b-versatile",
+ temperature: 0.15,
+ max_completion_tokens: 1800,
+ response_format: { type: "json_object" },
+ messages: [{ role: "system", content: system }, { role: "user", content: prompt }],
+ }),
+ cache: "no-store",
+ signal: AbortSignal.timeout(45_000),
+ });
+ if (!response.ok) {
+ const detail = await response.text();
+ throw new Error(`AI review failed (${response.status}): ${detail.slice(0, 180)}`);
+ }
+ const payload = await response.json() as { choices?: Array<{ message?: { content?: string } }> };
+ const content = payload.choices?.[0]?.message?.content;
+ if (!content) throw new Error("AI review returned no result.");
+ return parseJson(content) as T;
+}
diff --git a/src/lib/theme-provider.tsx b/src/lib/theme-provider.tsx
new file mode 100644
index 0000000..937bea2
--- /dev/null
+++ b/src/lib/theme-provider.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+const ThemeContext = createContext<{
+ theme: Theme;
+ setTheme: (theme: Theme) => void;
+ resolvedTheme: "light" | "dark";
+}>({
+ theme: "dark",
+ setTheme: () => {},
+ resolvedTheme: "dark",
+});
+
+export function useTheme() {
+ return useContext(ThemeContext);
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+ const [theme, setTheme] = useState(() => typeof window === "undefined" ? "dark" : (localStorage.getItem("theme") as Theme | null) || "dark");
+ const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">("dark");
+
+ useEffect(() => {
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+ const resolve = () => {
+ const resolved =
+ theme === "system"
+ ? mediaQuery.matches
+ ? "dark"
+ : "light"
+ : theme;
+ setResolvedTheme(resolved);
+
+ document.documentElement.classList.remove("light", "dark");
+ document.documentElement.classList.add(resolved);
+ };
+
+ resolve();
+ mediaQuery.addEventListener("change", resolve);
+ return () => mediaQuery.removeEventListener("change", resolve);
+ }, [theme]);
+
+ const handleSetTheme = (newTheme: Theme) => {
+ setTheme(newTheme);
+ localStorage.setItem("theme", newTheme);
+ };
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 0000000..5965793
--- /dev/null
+++ b/src/lib/types.ts
@@ -0,0 +1,174 @@
+// Repository
+export interface Repository {
+ id: string;
+ name: string;
+ fullName: string;
+ url: string;
+ branch: string;
+ defaultBranch: string;
+ description: string | null;
+ language: string | null;
+ size: number;
+ technologies: Technology[];
+ createdAt: string;
+ lastExaminedAt: string | null;
+}
+
+export interface Technology {
+ name: string;
+ version: string | null;
+ confidence: number;
+}
+
+// Examination
+export type ExaminationStatus =
+ | "queued"
+ | "validating"
+ | "extracting"
+ | "mapping"
+ | "scanning"
+ | "diagnosing"
+ | "scoring"
+ | "completed"
+ | "failed";
+
+export interface Examination {
+ id: string;
+ repositoryId: string;
+ status: ExaminationStatus;
+ progress: number;
+ currentStage: string;
+ stages: ExaminationStage[];
+ startedAt: string;
+ completedAt: string | null;
+ error: string | null;
+}
+
+export interface ExaminationStage {
+ name: string;
+ status: "pending" | "running" | "completed" | "failed";
+ startedAt: string | null;
+ completedAt: string | null;
+}
+
+// Health
+export interface HealthRecord {
+ id: string;
+ repositoryId: string;
+ examinationId: string;
+ score: number;
+ grade: HealthGrade;
+ previousScore: number | null;
+ scoreChange: number | null;
+ dimensions: HealthDimension[];
+ summary: string;
+ examinedAt: string;
+}
+
+export type HealthGrade = "excellent" | "good" | "needs_attention" | "critical";
+
+export interface HealthDimension {
+ name: string;
+ score: number;
+ weight: number;
+ findings: number;
+ summary: string;
+}
+
+// Diagnosis
+export type DiagnosisSeverity = "critical" | "high" | "medium" | "low";
+export type DiagnosisStatus = "open" | "resolved" | "dismissed";
+
+export interface Diagnosis {
+ id: string;
+ repositoryId: string;
+ healthRecordId: string;
+ title: string;
+ summary: string;
+ description: string;
+ severity: DiagnosisSeverity;
+ confidence: number;
+ category: string;
+ affectedFiles: AffectedFile[];
+ evidence: Evidence[];
+ repairable: boolean;
+ repairRisk: "low" | "medium" | "high";
+ repairEffort: "quick" | "moderate" | "significant";
+ status: DiagnosisStatus;
+ createdAt: string;
+}
+
+export interface AffectedFile {
+ path: string;
+ lines: [number, number][];
+ relevance: string;
+}
+
+export interface Evidence {
+ type: "code" | "config" | "dependency" | "pattern";
+ description: string;
+ filePath: string | null;
+ lines: [number, number][] | null;
+ snippet: string | null;
+}
+
+// Treatment
+export type TreatmentStatus =
+ | "proposed"
+ | "approved"
+ | "applying"
+ | "verifying"
+ | "completed"
+ | "failed"
+ | "rolled_back";
+
+export interface Treatment {
+ id: string;
+ repositoryId: string;
+ diagnosisId: string;
+ status: TreatmentStatus;
+ proposal: TreatmentProposal;
+ patches: FilePatch[];
+ verification: VerificationRun;
+ scoreBefore: number | null;
+ scoreAfter: number | null;
+ createdAt: string;
+ completedAt: string | null;
+}
+
+export interface TreatmentProposal {
+ summary: string;
+ risk: "low" | "medium" | "high";
+ affectedFiles: string[];
+ assumptions: string[];
+ verificationPlan: string[];
+}
+
+export interface FilePatch {
+ path: string;
+ operation: "add" | "modify" | "delete";
+ additions: number;
+ deletions: number;
+ diff: string;
+ explanation: string;
+}
+
+export interface VerificationRun {
+ steps: VerificationStep[];
+ overallStatus: "pending" | "passed" | "failed" | "partial";
+}
+
+export interface VerificationStep {
+ name: string;
+ command: string;
+ status: "pending" | "running" | "passed" | "failed" | "unavailable" | "timeout";
+ output: string | null;
+ duration: number | null;
+}
+
+// API Error
+export interface ApiError {
+ message: string;
+ code: string;
+ details?: Record;
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..c751c56
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,104 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+import type { HealthGrade, DiagnosisSeverity } from "./types";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
+
+export function formatBytes(bytes: number): string {
+ if (bytes === 0) return "0 B";
+ const k = 1024;
+ const sizes = ["B", "KB", "MB", "GB"];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+}
+
+export function formatDate(date: string): string {
+ return new Date(date).toLocaleDateString("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ });
+}
+
+export function formatRelativeTime(date: string): string {
+ const now = new Date();
+ const then = new Date(date);
+ const diffMs = now.getTime() - then.getTime();
+ const diffMins = Math.floor(diffMs / 60000);
+ const diffHours = Math.floor(diffMins / 60);
+ const diffDays = Math.floor(diffHours / 24);
+
+ if (diffMins < 1) return "just now";
+ if (diffMins < 60) return `${diffMins}m ago`;
+ if (diffHours < 24) return `${diffHours}h ago`;
+ if (diffDays < 7) return `${diffDays}d ago`;
+ return formatDate(date);
+}
+
+export function healthGradeLabel(grade: HealthGrade): string {
+ const labels: Record = {
+ excellent: "Excellent",
+ good: "Good",
+ needs_attention: "Needs Attention",
+ critical: "Critical",
+ };
+ return labels[grade];
+}
+
+export function healthGradeColor(grade: HealthGrade): string {
+ const colors: Record = {
+ excellent: "text-success",
+ good: "text-accent",
+ needs_attention: "text-warning",
+ critical: "text-critical",
+ };
+ return colors[grade];
+}
+
+export function severityColor(severity: DiagnosisSeverity): string {
+ const colors: Record = {
+ critical: "text-critical",
+ high: "text-warning",
+ medium: "text-info",
+ low: "text-text-muted",
+ };
+ return colors[severity];
+}
+
+export function severityBg(severity: DiagnosisSeverity): string {
+ const bgs: Record = {
+ critical: "bg-critical-light",
+ high: "bg-warning-light",
+ medium: "bg-info-light",
+ low: "bg-surface-elevated",
+ };
+ return bgs[severity];
+}
+
+export function scoreToGrade(score: number): HealthGrade {
+ if (score >= 90) return "excellent";
+ if (score >= 70) return "good";
+ if (score >= 50) return "needs_attention";
+ return "critical";
+}
+
+export function verificationStatusColor(
+ status: string
+): { dot: string; text: string } {
+ switch (status) {
+ case "passed":
+ return { dot: "bg-success", text: "text-success" };
+ case "failed":
+ return { dot: "bg-critical", text: "text-critical" };
+ case "running":
+ return { dot: "bg-accent animate-pulse", text: "text-accent" };
+ case "unavailable":
+ return { dot: "bg-text-muted", text: "text-text-muted" };
+ case "timeout":
+ return { dot: "bg-warning", text: "text-warning" };
+ default:
+ return { dot: "bg-border-strong", text: "text-text-muted" };
+ }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..b04b440
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": [
+ "next-env.d.ts",
+ "src/**/*.ts",
+ "src/**/*.tsx",
+ ".next/types/**/*.ts",
+ ".next/dev/types/**/*.ts",
+ "src/**/*.mts"
+ ],
+ "exclude": ["node_modules"]
+}
diff --git a/website/.gitignore b/website/.gitignore
new file mode 100644
index 0000000..5ef6a52
--- /dev/null
+++ b/website/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/website/AGENTS.md b/website/AGENTS.md
new file mode 100644
index 0000000..423e213
--- /dev/null
+++ b/website/AGENTS.md
@@ -0,0 +1,57 @@
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+
+
+## Interaction patterns
+
+Reuse `lib/interaction-classes.ts` for interactive UI: apply `primaryButton` or `secondaryButton` to CTA links, `hoverCard` to hover-relevant cards, `hoverRow` to interactive diagnostic rows, and `navLink` to navigation links. Their shared CSS lives in `app/globals.css`, includes hover/pressed feedback, and honors `prefers-reduced-motion`; do not recreate these effects per component.
+
+# Repo Doctor Website — Agent Instructions
+
+## Stack
+
+Next.js (App Router) + TypeScript + Tailwind CSS + Framer Motion. Deployed on Vercel.
+
+## Design Tokens
+
+Tailwind theme tokens are already configured. Reuse these values; do not invent new colors:
+
+- background: `#031614`
+- background-elevated: `#0A2320`
+- accent: `#1AC0AD`
+- accent-secondary: `#0E6B60`
+- text-primary: `#EAFBF8`
+- text-muted: `#7FA39D`
+- status-critical: `#FF5C5C`
+- status-warning: `#FFB020`
+- status-success: `#3DDC97`
+
+## Typography
+
+Use a sans-serif font (Inter or Geist via `next/font`) for body copy and headings. Use a monospace font (JetBrains Mono or Geist Mono) for code, metrics, and technical labels only.
+
+## Product Context
+
+Repo Doctor is an AI health-clinic for messy codebases: it diagnoses maintainability issues in a repository, explains them with evidence and a confidence score, and safely repairs one issue at a time in an isolated working copy after explicit user approval. This is a marketing/landing website for the product, not the product itself — no real backend calls; all content is static or mocked for presentation.
+
+## Quality Bar & Anti-Patterns
+
+- Never leave lorem ipsum, TODO comments, or placeholder buttons that go nowhere.
+- Every section must be responsive at 375px, 768px, and 1440px.
+- Do not make unsupported product claims such as “finds every bug” or “guarantees secure code.”
+- Prefer editorial, intentional design over generic template layouts: bold typography, purposeful color use, meaningful motion, and no default flat purple-on-white patterns.
+- Run `npm run build` before considering a phase done; fix any errors.
+
+## Structural Blueprint (Nominal.so Inspiration)
+
+When building sections, adhere to these structural patterns:
+
+- A row of small tag/pill labels above the hero headline.
+- A horizontal marquee strip directly under the hero, focused on the tech stack rather than client logos.
+- Three-pillar feature cards: icon, bold title, one-liner, and bullet sublist.
+- A prominent outcomes row using oversized numbers as the visual hook (for example, principles-as-stats).
+- A numbered “01 / 02 / 03 / 04” section where a label pins on one side while content changes on the other while scrolling.
+- A carousel-style social-proof section for personas or use cases.
+- A single centered final CTA banner before the footer.
diff --git a/website/CLAUDE.md b/website/CLAUDE.md
new file mode 100644
index 0000000..43c994c
--- /dev/null
+++ b/website/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
diff --git a/website/README.md b/website/README.md
new file mode 100644
index 0000000..e215bc4
--- /dev/null
+++ b/website/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/website/app/api/waitlist/route.ts b/website/app/api/waitlist/route.ts
new file mode 100644
index 0000000..b43542c
--- /dev/null
+++ b/website/app/api/waitlist/route.ts
@@ -0,0 +1,50 @@
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+type WaitlistEntry = {
+ email: string;
+ submittedAt: string;
+};
+
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const waitlistDirectory = path.join(process.cwd(), "data");
+const waitlistPath = path.join(waitlistDirectory, "waitlist.json");
+
+async function readEntries(): Promise {
+ try {
+ return JSON.parse(await readFile(waitlistPath, "utf8")) as WaitlistEntry[];
+ } catch (error) {
+ if ((error as NodeJS.ErrnoException).code === "ENOENT") return [];
+ throw error;
+ }
+}
+
+export async function POST(request: Request) {
+ let email = "";
+ try {
+ const body = (await request.json()) as { email?: unknown };
+ email = typeof body.email === "string" ? body.email.trim().toLowerCase() : "";
+ } catch {
+ return Response.json({ error: "Send a valid email address." }, { status: 400 });
+ }
+
+ if (!emailPattern.test(email)) {
+ return Response.json({ error: "Send a valid email address." }, { status: 400 });
+ }
+
+ try {
+ await mkdir(waitlistDirectory, { recursive: true });
+ const entries = await readEntries();
+ const alreadyRegistered = entries.some((entry) => entry.email === email);
+ if (!alreadyRegistered) {
+ entries.push({ email, submittedAt: new Date().toISOString() });
+ await writeFile(waitlistPath, `${JSON.stringify(entries, null, 2)}\n`, "utf8");
+ }
+ return Response.json({ ok: true, alreadyRegistered });
+ } catch {
+ return Response.json({ error: "We couldn't save your email. Please try again." }, { status: 500 });
+ }
+}
diff --git a/website/app/apple-icon.png b/website/app/apple-icon.png
new file mode 100644
index 0000000..7b9d4a3
Binary files /dev/null and b/website/app/apple-icon.png differ
diff --git a/website/app/favicon.ico b/website/app/favicon.ico
new file mode 100644
index 0000000..fb1d912
Binary files /dev/null and b/website/app/favicon.ico differ
diff --git a/website/app/features/page.tsx b/website/app/features/page.tsx
new file mode 100644
index 0000000..aded8c0
--- /dev/null
+++ b/website/app/features/page.tsx
@@ -0,0 +1,7 @@
+import { FeaturesBento } from "@/components/features/FeaturesBento";
+import { Footer } from "@/components/sections/footer";
+import { Navbar } from "@/components/sections/navbar";
+
+export default function FeaturesPage() {
+ return
;
+}
diff --git a/website/app/globals.css b/website/app/globals.css
new file mode 100644
index 0000000..1ec1c9c
--- /dev/null
+++ b/website/app/globals.css
@@ -0,0 +1,367 @@
+@import "tailwindcss";
+
+:root {
+ --background: #031614;
+ --background-elevated: #0a2320;
+ --accent: #1ac0ad;
+ --accent-secondary: #0e6b60;
+ --text-primary: #eafbf8;
+ --text-muted: #7fa39d;
+ --status-critical: #ff5c5c;
+ --status-warning: #ffb020;
+ --status-success: #3ddc97;
+}
+
+html {
+ font-size: 18px;
+}
+
+@theme inline {
+ --color-background: var(--background);
+ --color-background-elevated: var(--background-elevated);
+ --color-accent: var(--accent);
+ --color-accent-secondary: var(--accent-secondary);
+ --color-text-primary: var(--text-primary);
+ --color-text-muted: var(--text-muted);
+ --color-status-critical: var(--status-critical);
+ --color-status-warning: var(--status-warning);
+ --color-status-success: var(--status-success);
+ --font-sans: Arial, Helvetica, sans-serif;
+ --font-mono: "SFMono-Regular", Consolas, monospace;
+}
+
+body {
+ background: var(--background);
+ color: var(--text-primary);
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+ a,
+ button {
+ @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+ }
+}
+
+.hero-blob {
+ position: absolute;
+ z-index: -1;
+ width: 26rem;
+ height: 26rem;
+ border-radius: 9999px;
+ filter: blur(76px);
+ will-change: transform;
+ animation: hero-drift 20s ease-in-out infinite;
+}
+
+.hero-blob-one {
+ background: rgb(26 192 173 / 0.18);
+ right: 8%;
+ top: 12%;
+}
+
+.hero-blob-two {
+ width: 20rem;
+ height: 20rem;
+ background: rgb(14 107 96 / 0.22);
+ left: 33%;
+ bottom: 2%;
+ animation-delay: -9s;
+}
+
+.hero-parallax-grid {
+ position: absolute;
+ top: 1.5rem;
+ left: 1.5rem;
+ width: 17rem;
+ height: 14rem;
+ opacity: .7;
+ background-image: radial-gradient(circle, rgb(26 192 173 / .85) 1px, transparent 1.5px);
+ background-size: 18px 18px;
+ mask-image: linear-gradient(135deg, black, transparent 82%);
+}
+
+.hero-parallax-lines {
+ position: absolute;
+ right: 7%;
+ top: 1.75rem;
+ width: 12rem;
+ height: 8rem;
+ opacity: .7;
+ background: repeating-linear-gradient(0deg, transparent 0 20px, rgb(26 192 173 / .65) 20px 21px, transparent 21px 28px);
+ rotate: -16deg;
+}
+
+.hero-parallax-nodes {
+ position: absolute;
+ right: 5%;
+ bottom: 2.5rem;
+ left: 5%;
+ height: 9rem;
+ opacity: .7;
+}
+
+.hero-parallax-nodes span {
+ position: absolute;
+ width: .42rem;
+ height: .42rem;
+ border-radius: 9999px;
+ background: var(--accent);
+ box-shadow: 0 0 12px rgb(26 192 173 / .75);
+}
+
+.hero-parallax-nodes span:nth-child(1) { top: 3rem; left: 4%; }
+.hero-parallax-nodes span:nth-child(2) { top: 5.75rem; left: 21%; }
+.hero-parallax-nodes span:nth-child(3) { top: 1.8rem; left: 38%; }
+.hero-parallax-nodes span:nth-child(4) { top: 6.2rem; left: 55%; }
+.hero-parallax-nodes span:nth-child(5) { top: 3.4rem; left: 72%; }
+.hero-parallax-nodes span:nth-child(6) { right: 3%; bottom: .65rem; }
+.hero-parallax-nodes i {
+ position: absolute;
+ height: 1px;
+ background: rgb(26 192 173 / .7);
+}
+.hero-parallax-nodes i:nth-child(7) { top: 3.25rem; left: 4.5%; width: 17%; rotate: 10deg; }
+.hero-parallax-nodes i:nth-child(8) { top: 5.9rem; left: 21.5%; width: 17%; rotate: -15deg; }
+.hero-parallax-nodes i:nth-child(9) { top: 2.05rem; left: 38.5%; width: 17%; rotate: 17deg; }
+.hero-parallax-nodes i:nth-child(10) { top: 6.4rem; left: 55.5%; width: 17%; rotate: -14deg; }
+.hero-parallax-nodes i:nth-child(11) { top: 3.6rem; left: 72.5%; width: 21%; rotate: 13deg; }
+
+.hero-parallax-marks {
+ position: absolute;
+ top: 43%;
+ left: 39%;
+ display: grid;
+ gap: .55rem;
+ opacity: .7;
+ rotate: 90deg;
+}
+
+.hero-parallax-marks span {
+ display: block;
+ width: 4.5rem;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, var(--accent-secondary), transparent);
+}
+
+.hero-parallax-edge {
+ position: absolute;
+ top: 5%;
+ right: 0;
+ bottom: 4%;
+ width: 1px;
+ opacity: .7;
+ background: linear-gradient(180deg, transparent, var(--accent), transparent);
+ box-shadow: 0 0 28px rgb(26 192 173 / .9), 0 0 64px rgb(14 107 96 / .6);
+}
+
+@media (max-width: 1023px) {
+ .hero-parallax-grid {
+ top: 2rem;
+ left: 1rem;
+ opacity: .55;
+ }
+
+ .hero-parallax-lines {
+ top: 3rem;
+ right: -2rem;
+ opacity: .55;
+ }
+
+ .hero-parallax-nodes {
+ right: 3%;
+ bottom: 2rem;
+ left: 3%;
+ opacity: .55;
+ }
+
+ .hero-parallax-marks {
+ display: none;
+ }
+
+ .hero-parallax-edge {
+ opacity: .55;
+ }
+}
+
+@media (max-width: 639px) {
+ .hero-parallax-grid,
+ .hero-parallax-lines,
+ .hero-parallax-nodes,
+ .hero-parallax-marks,
+ .hero-parallax-edge {
+ display: none;
+ }
+}
+
+@keyframes hero-drift {
+ 0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
+ 50% { transform: translate3d(28px, -18px, 0) scale(1.08); }
+}
+
+.cta-primary {
+ box-shadow: 0 0 0 rgb(26 192 173 / 0);
+ animation: cta-glow 3.6s ease-in-out infinite;
+}
+
+.cta-primary:hover { animation-play-state: paused; }
+
+@keyframes cta-glow { 50% { box-shadow: 0 0 18px rgb(26 192 173 / .2); } }
+
+.nav-target-pulse {
+ animation: nav-target-pulse 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes nav-target-pulse {
+ 0% { box-shadow: inset 0 0 0 0 rgb(26 192 173 / 0); }
+ 45% { box-shadow: inset 0 0 5rem rgb(26 192 173 / .05); }
+ 100% { box-shadow: inset 0 0 0 0 rgb(26 192 173 / 0); }
+}
+
+.health-live-dot { animation: health-breathe 2s ease-in-out infinite; }
+.health-record-sweep { position: absolute; inset: -10% 0 auto; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(26 192 173 / .14), transparent); animation: health-sweep 4.6s linear infinite; }
+.health-gauge::after { content: ""; display: block; width: 35%; height: 100%; background: linear-gradient(90deg, transparent, rgb(234 251 248 / .22), transparent); animation: gauge-sheen 4s ease-in-out infinite; }
+.health-spinner { animation: health-spin .7s linear infinite; }
+.health-examine-cta { box-shadow: 0 0 14px rgb(26 192 173 / .28); animation: health-cta-glow 3.6s ease-in-out infinite; }
+.health-examine-cta:not(:disabled) { cursor: pointer; }
+.health-examine-cta:not(:disabled):hover { box-shadow: 0 0 24px rgb(26 192 173 / .48); background-color: var(--accent-secondary); color: var(--text-primary); }
+.health-examine-cta:hover .health-examine-icon { transform: rotate(90deg); }
+.health-examine-icon { display: inline-block; transition: transform 180ms ease; }
+.health-gauge-awaiting { outline: 1px dashed rgb(26 192 173 / .42); outline-offset: 3px; box-shadow: 0 0 22px rgb(26 192 173 / .09); }
+@keyframes health-cta-glow { 50% { box-shadow: 0 0 19px rgb(26 192 173 / .4); } }
+@keyframes health-breathe { 50% { transform: scale(1.3); opacity: .55; } }
+@keyframes health-sweep { to { transform: translateY(620px); } }
+@keyframes gauge-sheen { 0%, 100% { transform: translateX(-120%); } 55% { transform: translateX(360%); } }
+@keyframes health-spin { to { transform: rotate(360deg); } }
+
+.marquee-track {
+ display: flex;
+ width: max-content;
+ animation: marquee 25s linear infinite;
+}
+
+.marquee:hover .marquee-track {
+ animation-play-state: paused;
+}
+
+@keyframes marquee {
+ to {
+ transform: translateX(-50%);
+ }
+}
+
+@layer components {
+ button,
+ .interaction-button {
+ transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
+ }
+
+ @media (hover: hover) {
+ button:not(:disabled):hover,
+ .interaction-button:hover {
+ transform: scale(1.025);
+ box-shadow: 0 0 22px rgb(26 192 173 / .3);
+ }
+
+ .interaction-card:hover {
+ translate: 0 -4px;
+ border-color: rgb(26 192 173 / .55);
+ box-shadow: 0 18px 36px rgb(26 192 173 / .14);
+ }
+
+ .interaction-row:hover {
+ translate: 0 -2px;
+ border-color: rgb(26 192 173 / .45);
+ box-shadow: 0 8px 18px rgb(26 192 173 / .1);
+ }
+
+ .interaction-nav-link:hover {
+ color: var(--accent);
+ }
+ }
+
+ button:not(:disabled):active,
+ .interaction-button:active {
+ transform: scale(.98);
+ }
+
+ .interaction-card,
+ .interaction-row {
+ transition: translate 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out;
+ }
+
+ .interaction-nav-link {
+ transition: color 180ms ease-out, opacity 180ms ease-out;
+ }
+}
+
+.faq-accordion {
+ overflow: hidden;
+ border-radius: .75rem;
+ transition: border-color 180ms ease-out;
+}
+
+.faq-accordion-button {
+ border-radius: 0;
+ box-shadow: none;
+ transition: background-color 180ms ease-out, box-shadow 180ms ease-out, color 180ms ease-out;
+}
+
+.nav-dropdown-trigger {
+ transition: color 180ms ease-out;
+}
+
+@media (hover: hover) {
+ button.nav-dropdown-trigger:not(:disabled):hover {
+ transform: none;
+ box-shadow: none;
+ color: var(--accent);
+ }
+}
+
+button.nav-dropdown-trigger:not(:disabled):active {
+ transform: none;
+}
+
+@media (hover: hover) {
+ .faq-accordion:has(.faq-accordion-button:hover) {
+ border-color: rgb(26 192 173 / .82);
+ }
+
+ button.faq-accordion-button:not(:disabled):hover {
+ transform: none;
+ background-color: rgb(26 192 173 / .06);
+ box-shadow: inset 0 1px 0 rgb(26 192 173 / .82), inset 0 -1px 0 rgb(26 192 173 / .82), inset 0 0 12px rgb(26 192 173 / .07);
+ }
+}
+
+button.faq-accordion-button:not(:disabled):active {
+ transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .marquee-track {
+ animation: none;
+ }
+ .cta-primary,
+ .hero-blob,
+ .nav-target-pulse,
+ .health-live-dot,
+ .health-record-sweep,
+ .health-gauge::after,
+ .health-examine-cta { animation: none; }
+
+ button,
+ .interaction-button,
+ .interaction-card,
+ .interaction-row,
+ .interaction-nav-link { transition: none; }
+
+ button:not(:disabled):hover,
+ button:not(:disabled):active,
+ .interaction-button:hover,
+ .interaction-button:active { transform: none; }
+
+ .interaction-card:hover,
+ .interaction-row:hover { translate: none; }
+}
diff --git a/website/app/icon-192.png b/website/app/icon-192.png
new file mode 100644
index 0000000..a0dad68
Binary files /dev/null and b/website/app/icon-192.png differ
diff --git a/website/app/icon-512.png b/website/app/icon-512.png
new file mode 100644
index 0000000..3a51054
Binary files /dev/null and b/website/app/icon-512.png differ
diff --git a/website/app/icon.png b/website/app/icon.png
new file mode 100644
index 0000000..b419680
Binary files /dev/null and b/website/app/icon.png differ
diff --git a/website/app/layout.tsx b/website/app/layout.tsx
new file mode 100644
index 0000000..74d031b
--- /dev/null
+++ b/website/app/layout.tsx
@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { PixelGrid } from "@/components/PixelGrid";
+import { SmoothScroll } from "@/components/SmoothScroll";
+import "./globals.css";
+
+export const metadata: Metadata = {
+ title: "Repo Doctor — An AI health clinic for messy codebases",
+ description:
+ "Repo Doctor examines messy repositories, explains what is wrong, and safely repairs maintainability issues one treatment at a time.",
+ openGraph: {
+ title: "Repo Doctor — An AI health clinic for messy codebases",
+ description:
+ "Repo Doctor examines messy repositories, explains what is wrong, and safely repairs maintainability issues one treatment at a time.",
+ type: "website",
+ },
+ twitter: {
+ card: "summary",
+ title: "Repo Doctor — An AI health clinic for messy codebases",
+ description:
+ "Repo Doctor examines messy repositories, explains what is wrong, and safely repairs maintainability issues one treatment at a time.",
+ },
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/website/app/page.tsx b/website/app/page.tsx
new file mode 100644
index 0000000..adf17bf
--- /dev/null
+++ b/website/app/page.tsx
@@ -0,0 +1,18 @@
+import { BeforeAfter } from "@/components/sections/before-after";
+import { Comparison } from "@/components/sections/comparison";
+import { ExampleReport } from "@/components/sections/example-report";
+import { Faq } from "@/components/sections/faq";
+import { FinalCta } from "@/components/sections/final-cta";
+import { Footer } from "@/components/sections/footer";
+import { Hero } from "@/components/sections/hero";
+import { HowItWorks } from "@/components/sections/how-it-works";
+import { Navbar } from "@/components/sections/navbar";
+import { Outcomes } from "@/components/sections/outcomes";
+import { Privacy } from "@/components/sections/privacy";
+import { TechMarquee } from "@/components/sections/tech-marquee";
+import { WhatWeDo } from "@/components/sections/what-we-do";
+import { WhoItsFor } from "@/components/sections/who-its-for";
+
+export default function Home() {
+ return ;
+}
diff --git a/website/components/.gitkeep b/website/components/.gitkeep
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/website/components/.gitkeep
@@ -0,0 +1 @@
+
diff --git a/website/components/CountUp.tsx b/website/components/CountUp.tsx
new file mode 100644
index 0000000..b5d3e43
--- /dev/null
+++ b/website/components/CountUp.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { animate, motion, useInView, useReducedMotion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+
+export function CountUp({ value, suffix = "" }: { value: number; suffix?: string }) {
+ const ref = useRef(null);
+ const controlsRef = useRef<{ stop: () => void } | null>(null);
+ const inView = useInView(ref, { once: false, amount: 0.6 });
+ const reduceMotion = useReducedMotion();
+ const [count, setCount] = useState(0);
+ useEffect(() => {
+ if (!inView) {
+ controlsRef.current?.stop();
+ controlsRef.current = null;
+ window.requestAnimationFrame(() => setCount(0));
+ return;
+ }
+ if (reduceMotion) { window.requestAnimationFrame(() => setCount(value)); return; }
+ const start = window.setTimeout(() => {
+ controlsRef.current = animate(0, value, { duration: 1.3, ease: [0.16, 1, 0.3, 1], onUpdate: (latest) => setCount(Math.round(latest)) });
+ }, 90);
+ return () => { window.clearTimeout(start); controlsRef.current?.stop(); };
+ }, [inView, reduceMotion, value]);
+ return {count}{suffix} ;
+}
diff --git a/website/components/DiagnosisReportCard.tsx b/website/components/DiagnosisReportCard.tsx
new file mode 100644
index 0000000..b2c7704
--- /dev/null
+++ b/website/components/DiagnosisReportCard.tsx
@@ -0,0 +1,57 @@
+type DiagnosisReportCardProps = {
+ diagnosisId: string;
+ title: string;
+ severity: "Critical" | "Warning";
+ confidence: string;
+ affectedFiles: readonly string[];
+ evidence: string;
+ whyItMatters: string;
+ className?: string;
+};
+
+const severityStyles = {
+ Critical: "bg-status-critical/15 text-status-critical",
+ Warning: "bg-status-warning/15 text-status-warning",
+} as const;
+
+export function DiagnosisReportCard({
+ diagnosisId,
+ title,
+ severity,
+ confidence,
+ affectedFiles,
+ evidence,
+ whyItMatters,
+ className = "",
+}: DiagnosisReportCardProps) {
+ return (
+
+
+
+
DIAGNOSIS / {diagnosisId}
+
{title}
+
+
+ {severity.toUpperCase()}
+ {confidence}
+
+
+
+
AFFECTED FILES
+
+ {affectedFiles.map((file) => {file} )}
+
+
+
+
EVIDENCE
+
{evidence}
+
+
+
WHY IT MATTERS
+
{whyItMatters}
+
+ );
+}
diff --git a/website/components/HealthRecordMockup.tsx b/website/components/HealthRecordMockup.tsx
new file mode 100644
index 0000000..a8086c8
--- /dev/null
+++ b/website/components/HealthRecordMockup.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import { interactionClasses } from "@/lib/interaction-classes";
+import { useEffect, useRef, useState } from "react";
+
+const diagnoses = [
+ { severity: "critical", title: "Hardcoded API key in config.js", confidence: "High confidence" },
+ { severity: "warning", title: "17 imports resolve to missing files", confidence: "High confidence" },
+ { severity: "warning", title: "Test coverage dropped in auth flow", confidence: "Medium confidence" },
+] as const;
+
+const severityStyles = {
+ critical: { dot: "bg-status-critical", edge: "hover:border-l-status-critical", glow: "group-hover:shadow-[0_0_10px_rgba(255,92,92,.8)]" },
+ warning: { dot: "bg-status-warning", edge: "hover:border-l-status-warning", glow: "group-hover:shadow-[0_0_10px_rgba(255,176,32,.8)]" },
+} as const;
+
+export function HealthRecordMockup() {
+ const reduceMotion = useReducedMotion();
+ const [processing, setProcessing] = useState(false);
+ const [score, setScore] = useState(0);
+ const [hasExamined, setHasExamined] = useState(false);
+ const [gaugeReady, setGaugeReady] = useState(false);
+ const timers = useRef([]);
+ useEffect(() => () => timers.current.forEach(window.clearTimeout), []);
+ const reexamine = () => {
+ if (processing) return;
+ setProcessing(true); setGaugeReady(false); setScore(0);
+ timers.current = [
+ window.setTimeout(() => setScore(24), 320),
+ window.setTimeout(() => setScore(58), 760),
+ window.setTimeout(() => { setScore(76); setGaugeReady(true); }, 1200),
+ window.setTimeout(() => { setHasExamined(true); setProcessing(false); }, 1800),
+ ];
+ };
+ return
{score} /100
Health Score {hasExamined ? "Improving" : "Awaiting scan"}
{hasExamined ? "Last examined moments ago" : "Run an examination to populate this record"}
{[["1", "Critical", "status-critical"], ["4", "Warnings", "status-warning"], ["3", "Safe Treatments", "status-success"]].map(([value, label, tone], index) =>
{value}
{label}
)}
Active diagnoses {hasExamined ? "8 findings" : "Awaiting scan"}
{diagnoses.map((diagnosis, index) => { const style = severityStyles[diagnosis.severity]; return
{diagnosis.title}
{diagnosis.confidence} ; })}
(null);
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+
+ const context = canvas.getContext("2d");
+ if (!context) return;
+
+ const canInteract = !window.matchMedia(
+ "(prefers-reduced-motion: reduce), (hover: none)",
+ ).matches;
+ let width = 0;
+ let height = 0;
+ let frame = 0;
+ let staticDrawFrame = 0;
+ let pendingPointerUpdate = false;
+ let pointer = { x: -9999, y: -9999 };
+ let pixels: Pixel[] = [];
+ let footer: HTMLElement | null = null;
+
+ const resize = () => {
+ const ratio = Math.min(window.devicePixelRatio || 1, 2);
+ width = window.innerWidth;
+ height = window.innerHeight;
+ canvas.width = width * ratio;
+ canvas.height = height * ratio;
+ canvas.style.width = `${width}px`;
+ canvas.style.height = `${height}px`;
+ context.setTransform(ratio, 0, 0, ratio, 0, 0);
+
+ pixels = [];
+ for (let y = SPACING / 2; y < height; y += SPACING) {
+ for (let x = SPACING / 2; x < width; x += SPACING) {
+ pixels.push({ x, y, value: 0, target: 0 });
+ }
+ }
+ };
+
+ const footerResizeObserver = new ResizeObserver(resize);
+
+ const connectFooterObserver = () => {
+ const nextFooter = document.getElementById("site-footer");
+ if (nextFooter === footer) return;
+
+ footerResizeObserver.disconnect();
+ footer = nextFooter;
+ if (footer) footerResizeObserver.observe(footer);
+ };
+
+ const draw = () => {
+ context.clearRect(0, 0, width, height);
+ const footerTop = footer?.getBoundingClientRect().top ?? height;
+ const fadeStart = footerTop - FOOTER_FADE_HEIGHT;
+ const pointerIsAboveFooter = pointer.y < footerTop;
+
+ for (const pixel of pixels) {
+ if (pixel.y >= footerTop) {
+ pixel.target = 0;
+ pixel.value += (pixel.target - pixel.value) * 0.12;
+ continue;
+ }
+
+ if (canInteract && pointerIsAboveFooter) {
+ const distance = Math.hypot(pixel.x - pointer.x, pixel.y - pointer.y);
+ pixel.target =
+ distance < CURSOR_RADIUS ? 1 - distance / CURSOR_RADIUS : 0;
+ } else {
+ pixel.target = 0;
+ }
+
+ if (canInteract) {
+ pixel.value += (pixel.target - pixel.value) * 0.12;
+ }
+
+ const size = 2 + pixel.value * 3;
+ const footerFade = Math.min(
+ 1,
+ Math.max(0, (footerTop - pixel.y) / FOOTER_FADE_HEIGHT),
+ );
+ const opacity = (0.07 + pixel.value * 0.78) *
+ (pixel.y > fadeStart ? footerFade : 1);
+ context.fillStyle = `rgba(26, 192, 173, ${opacity})`;
+ context.fillRect(pixel.x - size / 2, pixel.y - size / 2, size, size);
+ }
+
+ if (canInteract) frame = requestAnimationFrame(draw);
+ };
+
+ const onPointerMove = (event: MouseEvent) => {
+ if (pendingPointerUpdate) return;
+ pendingPointerUpdate = true;
+ requestAnimationFrame(() => {
+ pointer = { x: event.clientX, y: event.clientY };
+ pendingPointerUpdate = false;
+ });
+ };
+
+ const onPointerLeave = () => {
+ pointer = { x: -9999, y: -9999 };
+ };
+
+ const refreshStaticGrid = () => {
+ if (canInteract || staticDrawFrame) return;
+ staticDrawFrame = requestAnimationFrame(() => {
+ staticDrawFrame = 0;
+ draw();
+ });
+ };
+
+ const pageResizeObserver = new ResizeObserver(resize);
+ pageResizeObserver.observe(document.body);
+ const footerMutationObserver = new MutationObserver(connectFooterObserver);
+ footerMutationObserver.observe(document.body, { childList: true, subtree: true });
+ window.addEventListener("resize", resize, { passive: true });
+ window.addEventListener("scroll", refreshStaticGrid, { passive: true });
+
+ if (canInteract) {
+ window.addEventListener("mousemove", onPointerMove, { passive: true });
+ window.addEventListener("blur", onPointerLeave);
+ }
+
+ connectFooterObserver();
+ resize();
+ draw();
+
+ return () => {
+ cancelAnimationFrame(frame);
+ cancelAnimationFrame(staticDrawFrame);
+ pageResizeObserver.disconnect();
+ footerResizeObserver.disconnect();
+ footerMutationObserver.disconnect();
+ window.removeEventListener("resize", resize);
+ window.removeEventListener("scroll", refreshStaticGrid);
+ window.removeEventListener("mousemove", onPointerMove);
+ window.removeEventListener("blur", onPointerLeave);
+ };
+ }, []);
+
+ return (
+ ;
+
+ if (!browserWindow[clockWarningFilterKey]) {
+ const originalWarn = console.warn.bind(console);
+
+ console.warn = (...args: unknown[]) => {
+ if (args.some((argument) => argument === clockDeprecationWarning)) return;
+
+ originalWarn(...args);
+ };
+
+ browserWindow[clockWarningFilterKey] = true;
+ }
+}
+
+type Vector3 = [number, number, number];
+type Severity = "critical" | "warning" | "success" | "accent";
+
+type RepoNode = {
+ color: string;
+ position: Vector3;
+ radius: number;
+ severity: Severity;
+};
+
+const colors = {
+ accent: "#1AC0AD",
+ accentSecondary: "#0E6B60",
+ critical: "#FF5C5C",
+ success: "#3DDC97",
+ warning: "#FFB020",
+} as const;
+
+const edges: Array<[number, number]> = [
+ [0, 1], [0, 2], [1, 3], [1, 4], [2, 5], [2, 6], [3, 7], [4, 7],
+ [4, 8], [5, 9], [6, 10], [7, 11], [8, 12], [9, 13], [10, 14],
+ [11, 15], [12, 16], [13, 17], [14, 18], [15, 19], [16, 19], [3, 12],
+ [6, 15], [10, 17],
+];
+
+const criticalNodes = new Set([0, 11, 17]);
+const warningNodes = new Set([2, 5, 9, 14, 18]);
+const accentNodes = new Set([7, 12]);
+
+function vectorLength(vector: Vector3) {
+ return Math.hypot(vector[0], vector[1], vector[2]);
+}
+
+function buildNodes(): RepoNode[] {
+ const positions: Vector3[] = Array.from({ length: 20 }, (_, index) => {
+ const angle = index * 2.399963229728653;
+ const radius = 0.45 + ((index * 17) % 10) / 16;
+
+ return [
+ Math.cos(angle) * radius,
+ Math.sin(angle) * radius * 0.78,
+ ((index * 7) % 9 - 4) * 0.15,
+ ];
+ });
+
+ // A bounded, one-time spring settle keeps the graph naturally spaced without
+ // running a force simulation during rendering.
+ for (let iteration = 0; iteration < 90; iteration += 1) {
+ const forces = positions.map((): Vector3 => [0, 0, 0]);
+
+ for (let from = 0; from < positions.length; from += 1) {
+ for (let to = from + 1; to < positions.length; to += 1) {
+ const delta: Vector3 = [
+ positions[from][0] - positions[to][0],
+ positions[from][1] - positions[to][1],
+ positions[from][2] - positions[to][2],
+ ];
+ const distance = Math.max(vectorLength(delta), 0.08);
+ const strength = 0.008 / (distance * distance);
+
+ for (let axis = 0; axis < 3; axis += 1) {
+ const impulse = (delta[axis] / distance) * strength;
+ forces[from][axis] += impulse;
+ forces[to][axis] -= impulse;
+ }
+ }
+ }
+
+ for (const [from, to] of edges) {
+ const delta: Vector3 = [
+ positions[to][0] - positions[from][0],
+ positions[to][1] - positions[from][1],
+ positions[to][2] - positions[from][2],
+ ];
+ const distance = Math.max(vectorLength(delta), 0.08);
+ const strength = (distance - 0.72) * 0.026;
+
+ for (let axis = 0; axis < 3; axis += 1) {
+ const impulse = (delta[axis] / distance) * strength;
+ forces[from][axis] += impulse;
+ forces[to][axis] -= impulse;
+ }
+ }
+
+ positions.forEach((position, index) => {
+ for (let axis = 0; axis < 3; axis += 1) {
+ position[axis] += forces[index][axis] * 0.55 - position[axis] * 0.006;
+ }
+ });
+ }
+
+ return positions.map((position, index) => {
+ const severity: Severity = criticalNodes.has(index)
+ ? "critical"
+ : warningNodes.has(index)
+ ? "warning"
+ : accentNodes.has(index)
+ ? "accent"
+ : "success";
+
+ return {
+ color: colors[severity],
+ position,
+ radius: 0.042 + ((index * 13) % 5) * 0.01 + (severity === "critical" ? 0.014 : 0),
+ severity,
+ };
+ });
+}
+
+const nodes = buildNodes();
+
+function GalaxyScene() {
+ const group = useRef(null);
+
+ useFrame((state, delta) => {
+ if (!group.current) return;
+
+ group.current.rotation.y += delta * 0.1;
+ group.current.rotation.x = Math.PI / 6 + Math.sin(state.clock.elapsedTime * 0.16) * 0.08;
+ });
+
+ return (
+
+ {edges.map(([from, to]) => (
+
+
+ ))}
+
+ );
+}
+
+export function RepoGalaxy() {
+ const reduceMotion = useReducedMotion();
+ const [isDesktop, setIsDesktop] = useState(false);
+
+ useEffect(() => {
+ const mediaQuery = window.matchMedia("(min-width: 1024px)");
+ const update = () => setIsDesktop(mediaQuery.matches);
+
+ update();
+ mediaQuery.addEventListener("change", update);
+ return () => mediaQuery.removeEventListener("change", update);
+ }, []);
+
+ if (reduceMotion || !isDesktop) return null;
+
+ return (
+ gl.setClearColor(0x000000, 0)}
+ style={{ height: "100%", pointerEvents: "none", width: "100%" }}
+ >
+
+ );
+}
diff --git a/website/components/Reveal.tsx b/website/components/Reveal.tsx
new file mode 100644
index 0000000..06b8bf1
--- /dev/null
+++ b/website/components/Reveal.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import type { ReactNode } from "react";
+
+export function Reveal({ children, className }: { children: ReactNode; className?: string }) {
+ const reduceMotion = useReducedMotion();
+ return {children} ;
+}
diff --git a/website/components/SmoothScroll.tsx b/website/components/SmoothScroll.tsx
new file mode 100644
index 0000000..b79c4df
--- /dev/null
+++ b/website/components/SmoothScroll.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import Lenis from "lenis";
+import { useEffect } from "react";
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function SmoothScroll({ children }: Readonly<{ children: React.ReactNode }>) {
+ useEffect(() => {
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+ const lenis = new Lenis({ lerp: 0.09, smoothWheel: true });
+ window.__repoDoctorLenis = lenis;
+ const scroller = document.documentElement;
+ lenis.on("scroll", ScrollTrigger.update);
+
+ ScrollTrigger.scrollerProxy(scroller, {
+ scrollTop(value) {
+ if (typeof value === "number") {
+ lenis.scrollTo(value, { immediate: true });
+ }
+ return lenis.scroll;
+ },
+ getBoundingClientRect: () => ({ top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }),
+ pinType: "fixed",
+ });
+ ScrollTrigger.defaults({ scroller });
+
+ const tick = (time: number) => lenis.raf(time * 1000);
+ gsap.ticker.add(tick);
+ gsap.ticker.lagSmoothing(0);
+ ScrollTrigger.refresh();
+
+ return () => {
+ gsap.ticker.remove(tick);
+ delete window.__repoDoctorLenis;
+ lenis.destroy();
+ ScrollTrigger.scrollerProxy(scroller, {
+ scrollTop: () => window.scrollY,
+ getBoundingClientRect: () => ({ top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }),
+ });
+ };
+ }, []);
+
+ return <>{children};
+}
diff --git a/website/components/WaitlistCta.tsx b/website/components/WaitlistCta.tsx
new file mode 100644
index 0000000..e96bbdd
--- /dev/null
+++ b/website/components/WaitlistCta.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { FormEvent, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { interactionClasses } from "@/lib/interaction-classes";
+
+type WaitlistCtaProps = {
+ className?: string;
+};
+
+type FormState = "form" | "submitting" | "success";
+
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function WaitlistCta({ className = "" }: WaitlistCtaProps) {
+ const reduceMotion = useReducedMotion();
+ const [open, setOpen] = useState(false);
+ const [email, setEmail] = useState("");
+ const [error, setError] = useState("");
+ const [formState, setFormState] = useState("form");
+ const dialogRef = useRef(null);
+ const inputRef = useRef(null);
+ const previouslyFocusedRef = useRef(null);
+ const headingId = useId();
+ const descriptionId = useId();
+
+ const close = () => {
+ setOpen(false);
+ setEmail("");
+ setError("");
+ setFormState("form");
+ };
+
+ useEffect(() => {
+ if (!open) return;
+
+ previouslyFocusedRef.current = document.activeElement as HTMLElement | null;
+ const frame = window.requestAnimationFrame(() => inputRef.current?.focus());
+ const previousOverflow = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+
+ const trapFocus = (event: KeyboardEvent) => {
+ if (event.key === "Escape") {
+ event.preventDefault();
+ close();
+ return;
+ }
+
+ if (event.key !== "Tab" || !dialogRef.current) return;
+ const focusable = Array.from(
+ dialogRef.current.querySelectorAll(
+ 'button:not([disabled]), input:not([disabled]), [href], [tabindex]:not([tabindex="-1"])',
+ ),
+ ).filter((element) => !element.hasAttribute("hidden"));
+ if (!focusable.length) return;
+
+ const first = focusable[0];
+ const last = focusable[focusable.length - 1];
+ if (event.shiftKey && document.activeElement === first) {
+ event.preventDefault();
+ last.focus();
+ } else if (!event.shiftKey && document.activeElement === last) {
+ event.preventDefault();
+ first.focus();
+ }
+ };
+
+ document.addEventListener("keydown", trapFocus);
+ return () => {
+ window.cancelAnimationFrame(frame);
+ document.body.style.overflow = previousOverflow;
+ document.removeEventListener("keydown", trapFocus);
+ previouslyFocusedRef.current?.focus();
+ };
+ }, [open]);
+
+ const submit = async (event: FormEvent) => {
+ event.preventDefault();
+ const normalizedEmail = email.trim().toLowerCase();
+ if (!emailPattern.test(normalizedEmail)) {
+ setError("Enter a valid email address.");
+ return;
+ }
+
+ setError("");
+ setFormState("submitting");
+
+ try {
+ const response = await fetch("/api/waitlist", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ email: normalizedEmail }),
+ });
+ const result = (await response.json().catch(() => null)) as { error?: string } | null;
+ if (!response.ok) throw new Error(result?.error || "We couldn't save your email. Please try again.");
+ setFormState("success");
+ } catch (submissionError) {
+ setFormState("form");
+ setError(submissionError instanceof Error ? submissionError.message : "We couldn't save your email. Please try again.");
+ }
+ };
+
+ return (
+ <>
+ setOpen(true)} className={`${interactionClasses.secondaryButton} ${className}`}>
+ Join the Demo
+
+
+ {typeof document !== "undefined" && createPortal(
+ {open && (
+ {
+ if (event.target === event.currentTarget) close();
+ }}
+ initial={reduceMotion ? false : { opacity: 0 }}
+ animate={{ opacity: 1 }}
+ exit={reduceMotion ? {} : { opacity: 0 }}
+ >
+
+ {formState === "success" ? (
+
+
✓
+
You're on the list
+
We'll reach out when the demo is ready.
+
+ Close
+
+
+
+
Demo access
+
Get early access
+
+
+ ×
+
+
Join the list and we'll let you know when the Repo Doctor demo is ready.
+
+
+ )}
+
+
+ )}
+ , document.body)}
+
+ );
+}
diff --git a/website/components/XraySlider.tsx b/website/components/XraySlider.tsx
new file mode 100644
index 0000000..9104152
--- /dev/null
+++ b/website/components/XraySlider.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+const clampPosition = (value: number) => Math.min(100, Math.max(0, value));
+
+function CodeSnippet({ version }: { version: "before" | "after" }) {
+ const isBefore = version === "before";
+
+ return (
+
+
+ {"// config/api.ts"} {"\n"}
+ export const apiConfig = { {"\n"}
+ {isBefore ? (
+ <>
+ {" "}apiKey: "sk_live_7f3a..." ,{"\n"}
+ {" "}baseUrl: "https://api.example.com" ,{"\n"}
+
+ ) : (
+ <>
+ {" "}apiKey: process.env.REPO_DOCTOR_API_KEY ,{"\n"}
+ {" "}baseUrl: process.env.API_BASE_URL ,{"\n"}
+
+ )}
+ };
+
+
+ );
+}
+
+export function XraySlider() {
+ const [position, setPosition] = useState(50);
+ const sliderRef = useRef(null);
+
+ const updateFromPointer = (clientX: number) => {
+ const bounds = sliderRef.current?.getBoundingClientRect();
+ if (!bounds) return;
+ setPosition(clampPosition(((clientX - bounds.left) / bounds.width) * 100));
+ };
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ const step = event.shiftKey ? 10 : 5;
+ let nextPosition: number | null = null;
+
+ if (event.key === "ArrowLeft" || event.key === "ArrowDown") nextPosition = position - step;
+ if (event.key === "ArrowRight" || event.key === "ArrowUp") nextPosition = position + step;
+ if (event.key === "Home") nextPosition = 0;
+ if (event.key === "End") nextPosition = 100;
+
+ if (nextPosition !== null) {
+ event.preventDefault();
+ setPosition(clampPosition(nextPosition));
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
{
+ event.currentTarget.setPointerCapture(event.pointerId);
+ updateFromPointer(event.clientX);
+ }}
+ onPointerMove={(event) => {
+ if (event.currentTarget.hasPointerCapture(event.pointerId)) updateFromPointer(event.clientX);
+ }}
+ >
+
+
+
+
+
+
Same file, before and after a Repo Doctor treatment.
+
+ );
+}
diff --git a/website/components/features/FeaturesBento.tsx b/website/components/features/FeaturesBento.tsx
new file mode 100644
index 0000000..7e4d1aa
--- /dev/null
+++ b/website/components/features/FeaturesBento.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { DiagnosisReportCard } from "@/components/DiagnosisReportCard";
+import { XraySlider } from "@/components/XraySlider";
+import { interactionClasses } from "@/lib/interaction-classes";
+import { motion, useReducedMotion } from "framer-motion";
+import dynamic from "next/dynamic";
+
+const RepoGalaxy = dynamic(
+ () => import("@/components/RepoGalaxy").then((module) => module.RepoGalaxy),
+ { loading: () => null, ssr: false },
+);
+
+const scannerChecks = ["Broken imports", "Dead files", "Hardcoded secrets", "Weak test coverage"];
+const repairSteps = ["Isolated working copy", "Readable diff", "Explicit approval", "Full test re-run"];
+
+function StepNumber({ number }: { number: string }) {
+ return (
+
+ {number}
+
+ );
+}
+
+export function FeaturesBento() {
+ const reduceMotion = useReducedMotion();
+ const reveal = (delay = 0) => ({
+ initial: reduceMotion ? false : { opacity: 0, y: 24 },
+ whileInView: reduceMotion ? {} : { opacity: 1, y: 0 },
+ viewport: { once: false, margin: "-50px" },
+ transition: { duration: 0.65, delay, ease: "easeOut" as const },
+ });
+
+ return (
+
+
+
+
+
+ Feature record
+ A safer path from symptom to repair.
+ Repo Doctor keeps diagnosis, explanation, repair, and verification in one deliberate workflow.
+
+
+
+
+
+
+
Diagnose
+
Ground every finding in real analysis.
+
Deterministic scanners inspect the repository before any AI runs, so the initial record comes from observable code structure rather than opinion alone.
+
+ DETERMINISTIC CHECKS
+
+ {scannerChecks.map((check) => (
+
+ ↗ {check}
+
+ ))}
+
+
+
+
+
+
Explain
+
Make the risk legible.
+
Each diagnosis pairs severity, confidence, affected files, and a plain-language root cause.
+
+
+
+
+
+
+
Repair
+
Treat one issue safely.
+
Each proposed treatment is isolated, reviewable, and gated by your approval before it can touch a repository.
+
+
+ TREATMENT PROTOCOL
+
+ {repairSteps.map((step) => (
+ ↗ {step}
+
+
+
+
+
+
+
Verify
+
Confirm the repair changed the record.
+
Before-and-after health scores make the result visible. Tests are re-run after every treatment, and no change is applied without approval.
+
+ VERIFICATION RECORD
+
+
+
BEFORE
+
58
+
Health Score
+
+
+
AFTER
+
82
+
Health Score
+
+
+
+
+ );
+}
diff --git a/website/components/sections/.gitkeep b/website/components/sections/.gitkeep
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/website/components/sections/.gitkeep
@@ -0,0 +1 @@
+
diff --git a/website/components/sections/before-after.tsx b/website/components/sections/before-after.tsx
new file mode 100644
index 0000000..f0671f8
--- /dev/null
+++ b/website/components/sections/before-after.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { CountUp } from "@/components/CountUp";
+import { motion, useReducedMotion } from "framer-motion";
+
+export function BeforeAfter() {
+ const reduceMotion = useReducedMotion();
+ const variant = (delay: number) => ({
+ initial: reduceMotion ? false : { opacity: 0, y: 24 },
+ whileInView: reduceMotion ? {} : { opacity: 1, y: 0 },
+ viewport: { once: false, margin: "-50px" },
+ transition: { duration: 0.65, delay },
+ });
+
+ return (
+
+
+
+ Verification record
+
+
+ Show the difference.
+
+
+
+
+
+ BEFORE
+
+
+ Health Score
+
+
+
+ AFTER
+
+
+ Health Score
+
+
+ );
+}
diff --git a/website/components/sections/comparison.tsx b/website/components/sections/comparison.tsx
new file mode 100644
index 0000000..ed22f75
--- /dev/null
+++ b/website/components/sections/comparison.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+
+const comparisons = [
+ {
+ capability: "Finds issues with evidence, not just opinion",
+ repoDoctor: "Yes",
+ genericReviewer: "Partial",
+ manualReview: "Yes",
+ },
+ {
+ capability: "Explains confidence/severity per issue",
+ repoDoctor: "Yes",
+ genericReviewer: "Yes",
+ manualReview: "No",
+ },
+ {
+ capability: "Fixes issues one at a time with your approval",
+ repoDoctor: "Yes",
+ genericReviewer: "Partial",
+ manualReview: "Yes",
+ },
+ {
+ capability: "Runs in an isolated working copy (never touches original repo directly)",
+ repoDoctor: "Yes",
+ genericReviewer: "No",
+ manualReview: "No",
+ },
+ {
+ capability: "Re-verifies tests after each fix",
+ repoDoctor: "Yes",
+ genericReviewer: "Partial",
+ manualReview: "Partial",
+ },
+ {
+ capability: "Requires no setup beyond a repo URL",
+ repoDoctor: "Yes",
+ genericReviewer: "Partial",
+ manualReview: "No",
+ },
+] as const;
+
+function ComparisonValue({ value }: { value: "Yes" | "Partial" | "No" }) {
+ const symbol = value === "Yes" ? "●" : value === "Partial" ? "◐" : "○";
+ return (
+
+ {symbol}
+ {value}
+
+ );
+}
+
+export function Comparison() {
+ const reduceMotion = useReducedMotion();
+ const reveal = {
+ initial: reduceMotion ? false : { opacity: 0, y: 24 },
+ whileInView: reduceMotion ? {} : { opacity: 1, y: 0 },
+ viewport: { once: false, margin: "-50px" },
+ transition: { duration: 0.65, ease: "easeOut" as const },
+ };
+
+ return (
+
+
+ How it compares
+ RepoDoctor VS Everyone Else
+ A practical view of how different review approaches support diagnosis, repair, and verification.
+
+
+
+
+ Comparison of Repo Doctor, a generic AI code reviewer, and manual review.
+
+
+ Capability
+ Repo Doctor
+ Generic AI Code Reviewer
+ Manual Review
+
+
+
+ {comparisons.map((row, index) => (
+
+ {row.capability}
+
+ ))}
+
+
+
+ Scroll horizontally to compare columns on smaller screens.
+
+ );
+}
diff --git a/website/components/sections/example-report.tsx b/website/components/sections/example-report.tsx
new file mode 100644
index 0000000..0ed6119
--- /dev/null
+++ b/website/components/sections/example-report.tsx
@@ -0,0 +1,3 @@
+import { DiagnosisReportCard } from "@/components/DiagnosisReportCard";
+
+export function ExampleReport() { return Sample health record
Evidence before intervention. (null);
+ const sectionId = useId();
+ const reveal = {
+ initial: reduceMotion ? false : { opacity: 0, y: 24 },
+ whileInView: reduceMotion ? {} : { opacity: 1, y: 0 },
+ viewport: { once: false, margin: "-50px" },
+ transition: { duration: 0.65, ease: "easeOut" as const },
+ };
+ const toggleTransition = { duration: reduceMotion ? 0 : 0.18, ease: "easeOut" as const };
+
+ return (
+
+
+
+ FAQ
+ Answers before you examine.
+
+
+
+ {faqs.map((faq, index) => {
+ const isOpen = openIndex === index;
+ const answerId = `${sectionId}-answer-${index}`;
+ return (
+
+
setOpenIndex(isOpen ? null : index)}
+ className="faq-accordion-button flex w-full items-center justify-between gap-5 px-5 py-5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent sm:px-7 sm:py-6"
+ >
+ {faq.question}
+
+ +
+
+
+
+ {isOpen && (
+
+ {faq.answer}
+
+ )}
+
+
+
+ );
+}
diff --git a/website/components/sections/final-cta.tsx b/website/components/sections/final-cta.tsx
new file mode 100644
index 0000000..89184ac
--- /dev/null
+++ b/website/components/sections/final-cta.tsx
@@ -0,0 +1,7 @@
+import { interactionClasses } from "@/lib/interaction-classes";
+import { WaitlistCta } from "@/components/WaitlistCta";
+
+export function FinalCta() {
+ const appUrl = process.env.NEXT_PUBLIC_APP_URL || "https://repo-doctor-two.vercel.app";
+ return Start with evidence
Move from guessing to a real diagnosis. (null);
+ const [canParallax, setCanParallax] = useState(false);
+ const mouseX = useMotionValue(0);
+ const mouseY = useMotionValue(0);
+ const smoothMouseX = useSpring(mouseX, { stiffness: 80, damping: 20, mass: 0.45 });
+ const smoothMouseY = useSpring(mouseY, { stiffness: 80, damping: 20, mass: 0.45 });
+ const { scrollYProgress } = useScroll({ target: sectionRef, offset: ["start start", "end start"] });
+ const dashboardY = useTransform(scrollYProgress, [0, 1], [0, -9]);
+ const gridX = useTransform(smoothMouseX, (value) => value * 7);
+ const gridY = useTransform(smoothMouseY, (value) => value * 5);
+ const linesX = useTransform(smoothMouseX, (value) => value * -11);
+ const linesY = useTransform(smoothMouseY, (value) => value * -8);
+ const nodesX = useTransform(smoothMouseX, (value) => value * 16);
+ const nodesY = useTransform(smoothMouseY, (value) => value * 12);
+ const marksX = useTransform(smoothMouseX, (value) => value * -9);
+ const marksY = useTransform(smoothMouseY, (value) => value * 7);
+ const edgeX = useTransform(smoothMouseX, (value) => value * 2);
+ const edgeY = useTransform(smoothMouseY, (value) => value * 8);
+
+ useEffect(() => {
+ const media = window.matchMedia("(hover: hover) and (pointer: fine)");
+ const update = () => setCanParallax(!reduceMotion && media.matches);
+ update();
+ media.addEventListener("change", update);
+ return () => media.removeEventListener("change", update);
+ }, [reduceMotion]);
+
+ const handleMouseMove = (event: React.MouseEvent) => {
+ if (!canParallax || !sectionRef.current) return;
+ const bounds = sectionRef.current.getBoundingClientRect();
+ mouseX.set((event.clientX - bounds.left - bounds.width / 2) / bounds.width);
+ mouseY.set((event.clientY - bounds.top - bounds.height / 2) / bounds.height);
+ };
+
+ const resetParallax = () => {
+ mouseX.set(0);
+ mouseY.set(0);
+ };
+
+ const reveal = {
+ initial: reduceMotion ? false : { opacity: 0, y: 24 },
+ whileInView: reduceMotion ? {} : { opacity: 1, y: 0 },
+ viewport: { once: true, amount: 0.2 },
+ transition: { duration: 0.65, ease: "easeOut" as const },
+ };
+
+ return (
+
+
+
+
+
+
+ {tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+ Your codebase has symptoms. Repo Doctor finds the cause.
+
+
+ Repo Doctor examines messy repositories, explains what is wrong, and safely repairs maintainability issues one treatment at a time.
+
+
+
+
+
+
+
+ );
+}
diff --git a/website/components/sections/how-it-works.tsx b/website/components/sections/how-it-works.tsx
new file mode 100644
index 0000000..84893a6
--- /dev/null
+++ b/website/components/sections/how-it-works.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { interactionClasses } from "@/lib/interaction-classes";
+import { motion, useInView, useReducedMotion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+
+const steps = [
+ ["01", "Intake", "Provide a GitHub URL or ZIP upload. We map the repo structure, detect languages and frameworks."],
+ ["02", "Examination", "Deterministic scanners check imports, secrets, tests, and structure first — before any AI runs."],
+ ["03", "Diagnosis", "AI explains findings, estimates confidence and risk, and prioritizes what matters most."],
+ ["04", "Treatment", "You review the proposed fix and diff, approve it, and Repo Doctor verifies tests still pass."],
+] as const;
+
+function StepIcon({ step }: { step: number }) {
+ const common = { fill: "none", stroke: "currentColor", strokeLinecap: "round" as const, strokeLinejoin: "round" as const, strokeWidth: 1.6 };
+
+ if (step === 0) {
+ return
+
+ );
+}
+
+export function HowItWorks() {
+ const reduceMotion = useReducedMotion();
+ const [isDesktop, setIsDesktop] = useState(false);
+ const [activeStep, setActiveStep] = useState(3);
+ const [travelingConnector, setTravelingConnector] = useState(null);
+ const sectionRef = useRef(null);
+ const hasRun = useRef(false);
+ const isInView = useInView(sectionRef, { amount: 0.2, once: true });
+
+ useEffect(() => {
+ const mediaQuery = window.matchMedia("(min-width: 1024px)");
+ const update = () => {
+ setIsDesktop(mediaQuery.matches);
+ if (!mediaQuery.matches) hasRun.current = false;
+ };
+ update();
+ mediaQuery.addEventListener("change", update);
+ return () => mediaQuery.removeEventListener("change", update);
+ }, []);
+
+ useEffect(() => {
+ if (!isDesktop || reduceMotion) {
+ setActiveStep(3);
+ setTravelingConnector(null);
+ return;
+ }
+
+ if (!isInView || hasRun.current) return;
+ hasRun.current = true;
+ setActiveStep(0);
+ setTravelingConnector(0);
+
+ let loopTimer: number | undefined;
+ let connectorIndex = 0;
+ const continueLoop = () => {
+ setTravelingConnector(connectorIndex);
+ connectorIndex = (connectorIndex + 1) % (steps.length - 1);
+ loopTimer = window.setTimeout(continueLoop, 1050);
+ };
+
+ const timers = [
+ window.setTimeout(() => {
+ setActiveStep(1);
+ setTravelingConnector(1);
+ }, 1050),
+ window.setTimeout(() => {
+ setActiveStep(2);
+ setTravelingConnector(2);
+ }, 2100),
+ window.setTimeout(() => {
+ setActiveStep(3);
+ continueLoop();
+ }, 3150),
+ ];
+
+ return () => {
+ timers.forEach(window.clearTimeout);
+ if (loopTimer) window.clearTimeout(loopTimer);
+ };
+ }, [isDesktop, isInView, reduceMotion]);
+
+ const useStaticFallback = !isDesktop || reduceMotion;
+
+ return (
+
+
+
+ {steps.map(([number, title, copy], index) => {
+ const isLit = useStaticFallback || index <= activeStep;
+
+ return (
+
+
+
+
+ {number}
+ {title}
+ {copy}
+
+ {index < steps.length - 1 && (
+
+ )}
+
+ );
+ })}
+
+
+ );
+}
diff --git a/website/components/sections/navbar.tsx b/website/components/sections/navbar.tsx
new file mode 100644
index 0000000..23679e2
--- /dev/null
+++ b/website/components/sections/navbar.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+import { WaitlistCta } from "@/components/WaitlistCta";
+import { interactionClasses } from "@/lib/interaction-classes";
+
+const links = [
+ ["Diagnoses", "#health-report"],
+ ["Treatments", "#verification"],
+ ["How it Works", "#how-it-works"],
+ ["Compare", "#comparison"],
+] as const;
+const appUrl = process.env.NEXT_PUBLIC_APP_URL || "https://repo-doctor-two.vercel.app";
+
+export function Navbar() {
+ const reduceMotion = useReducedMotion();
+ const pathname = usePathname();
+ const [active, setActive] = useState("#overview");
+ const [mobileOpen, setMobileOpen] = useState(false);
+ const [overviewOpen, setOverviewOpen] = useState(false);
+ const [mobileFeaturesOpen, setMobileFeaturesOpen] = useState(false);
+ const headerRef = useRef(null);
+ const overviewTriggerRef = useRef(null);
+ const closeTimerRef = useRef(null);
+
+ useEffect(() => {
+ if (pathname !== "/") {
+ setActive(pathname);
+ return;
+ }
+
+ const sections = ["#overview", ...links.map(([, href]) => href)]
+ .map((href) => document.querySelector(href))
+ .filter(Boolean) as HTMLElement[];
+ const observer = new IntersectionObserver(
+ (entries) => {
+ const visible = entries
+ .filter((entry) => entry.isIntersecting)
+ .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+ if (visible) setActive(`#${visible.target.id}`);
+ },
+ { rootMargin: "-35% 0px -50% 0px", threshold: [0.05, 0.35] },
+ );
+
+ sections.forEach((section) => observer.observe(section));
+ return () => observer.disconnect();
+ }, [pathname]);
+
+ useEffect(() => {
+ const onPointerDown = (event: MouseEvent) => {
+ if (!headerRef.current?.contains(event.target as Node)) {
+ setOverviewOpen(false);
+ setMobileFeaturesOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", onPointerDown);
+ return () => document.removeEventListener("mousedown", onPointerDown);
+ }, []);
+
+ useEffect(() => () => {
+ if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+ }, []);
+
+ const pageHref = (href: string) => href.startsWith("#") && pathname !== "/" ? `/${href}` : href;
+
+ const navigate = (href: string) => {
+ const target = document.querySelector(href) as HTMLElement | null;
+ if (!target) return;
+
+ setActive(href);
+ window.history.replaceState(null, "", href);
+ target.classList.remove("nav-target-pulse");
+ void target.offsetWidth;
+ target.classList.add("nav-target-pulse");
+ window.setTimeout(() => target.classList.remove("nav-target-pulse"), 1350);
+
+ if (reduceMotion || !window.__repoDoctorLenis) {
+ target.scrollIntoView();
+ return;
+ }
+
+ window.__repoDoctorLenis.scrollTo(target, {
+ duration: 1.08,
+ easing: (t) => 1 - Math.pow(1 - t, 4),
+ });
+ };
+
+ const onNavClick = (event: React.MouseEvent, href: string, mobile = false) => {
+ if (!href.startsWith("#") || pathname !== "/") {
+ if (mobile) setMobileOpen(false);
+ return;
+ }
+
+ event.preventDefault();
+ if (mobile) {
+ setMobileOpen(false);
+ window.setTimeout(() => navigate(href), reduceMotion ? 0 : 180);
+ return;
+ }
+ navigate(href);
+ };
+
+ const openOverviewMenu = () => {
+ if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+ setOverviewOpen(true);
+ };
+
+ const scheduleOverviewClose = () => {
+ if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+ closeTimerRef.current = window.setTimeout(() => setOverviewOpen(false), 180);
+ };
+
+ const closeOverviewMenu = () => {
+ if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+ setOverviewOpen(false);
+ };
+
+ const linkClass = `relative px-1 py-2 text-sm text-text-muted ${interactionClasses.navLink}`;
+ const overviewIsActive = active === "#overview";
+ const menuTransition = { duration: reduceMotion ? 0 : 0.18, ease: "easeOut" as const };
+
+ return (
+ {
+ if (event.key === "Escape") {
+ closeOverviewMenu();
+ setMobileFeaturesOpen(false);
+ overviewTriggerRef.current?.focus();
+ }
+ }}>
+
+ Doctor
+
+
+
+
{
+ if (!event.currentTarget.contains(event.relatedTarget as Node | null)) scheduleOverviewClose();
+ }}>
+
onNavClick(event, "#overview")} className={`${linkClass} ${overviewIsActive ? "text-text-primary" : ""}`}>
+ Overview
+
+
setOverviewOpen((value) => !value)} className="nav-dropdown-trigger flex size-7 items-center justify-center text-text-muted">
+ ⌄
+
+ {overviewIsActive &&
}
+
+ {overviewOpen && (
+
+ )}
+
+
+
+ {links.map(([label, href]) => (
+
+
+ ))}
+
+
+
Launch app
+
setMobileOpen((value) => !value)} className={`${interactionClasses.secondaryButton} rounded border border-accent/25 px-3 py-1.5 font-mono text-xs text-accent xl:hidden`}>
+ Menu
+
+
+
+
+ {mobileOpen && (
+
+
+
+
setMobileFeaturesOpen((value) => !value)} className={`nav-dropdown-trigger ${linkClass} flex w-full items-center justify-between ${overviewIsActive ? "text-accent" : ""}`}>
+ Overview
+
+ ⌄
+
+
+
+ {mobileFeaturesOpen && (
+
+ )}
+
+
+
+ {links.map(([label, href]) => (
+
+
+ ))}
+
Launch app
+
+ )}
+
+
+ );
+}
diff --git a/website/components/sections/outcomes.tsx b/website/components/sections/outcomes.tsx
new file mode 100644
index 0000000..14b11ea
--- /dev/null
+++ b/website/components/sections/outcomes.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { CountUp } from "@/components/CountUp";
+import { motion, useReducedMotion } from "framer-motion";
+
+const stats = [[1, "", "Treatment applied at a time"], [100, "%", "Changes require your approval"], [0, "", "Files touched without a diff shown first"], [null, "", "Every repair runs in a working copy, never the original"]] as const;
+export function Outcomes() { const reduceMotion = useReducedMotion(); return {stats.map(([value, suffix, label], index) =>
{value === null ? "Isolated" :
{label}
)}
Security & privacy
Repo Doctor never modifies your original repository. Every treatment runs in an isolated working copy, and nothing is applied without your explicit approval.
{stack.map((item) =>
)}
Works with the stack you already use.
{renderStack()}{renderStack(true)}
(null); useLayoutEffect(() => { if (reduceMotion || !sectionRef.current) return; const context = gsap.context(() => { const cards = gsap.utils.toArray(".pillar-card"); gsap.set(cards, { scale: 1, opacity: 1 }); ScrollTrigger.matchMedia({ "(min-width: 1024px)": () => cards.map((card, index) => { const next = cards[index + 1]; if (!next) return; return gsap.to(card, { scale: .95, opacity: .7, ease: "none", scrollTrigger: { trigger: next, start: "top 55%", end: "top top+=112", scrub: .7, invalidateOnRefresh: true } }); }) }); }, sectionRef); return () => context.revert(); }, [reduceMotion]); return Clinical approach
Not just another AI code reviewer. {pillars.map(([number, title, description, bullets], index) =>
{number} {title} {description}
{bullets.map((bullet) => ↗ {bullet} )}
Built for the handoff
When the repo is unfamiliar. {personas.map(([persona, quote], index) =>
{persona} {quote}
)}
+
+# Repo Doctor
+
+### A calm, evidence-first workspace for repository health.
+
+Connect a public GitHub repository. See the signal. Review the next safe repair.
+
+[**Open the app →**](https://repo-doctor-two.vercel.app) · [**Visit the launch website →**](https://website-six-khaki-20.vercel.app) · [Report an issue](https://github.com/ShadowEsu/OpenAIHack-Repo_Doctor/issues)
+
+
{item.label}