Mark Henderson
bada63452f
- Map Justine tokens to shadcn CSS variables (--vibn-* aliases) - Switch fonts to Inter + Lora via next/font (IBM Plex Mono for code) - Base typography: body Inter, h1–h3 Lora; marketing hero + wordmark serif - Project shell and global chrome use semantic colors - Replace Outfit/Newsreader references across TSX inline styles Made-with: Cursor
364 lines
16 KiB
TypeScript
364 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter, useParams } from "next/navigation";
|
|
|
|
interface ArchRow {
|
|
category: string;
|
|
item: string;
|
|
status: "found" | "partial" | "missing";
|
|
detail?: string;
|
|
}
|
|
|
|
interface AnalysisResult {
|
|
summary: string;
|
|
rows: ArchRow[];
|
|
suggestedSurfaces: string[];
|
|
}
|
|
|
|
interface CodeImportMainProps {
|
|
projectId: string;
|
|
projectName: string;
|
|
sourceData?: { repoUrl?: string };
|
|
analysisResult?: AnalysisResult;
|
|
creationStage?: string;
|
|
}
|
|
|
|
type Stage = "input" | "cloning" | "mapping" | "surfaces";
|
|
|
|
const STATUS_COLORS = {
|
|
found: { bg: "#f0fdf4", text: "#15803d", label: "Found" },
|
|
partial: { bg: "#fffbeb", text: "#b45309", label: "Partial" },
|
|
missing: { bg: "#fff1f2", text: "#be123c", label: "Missing" },
|
|
};
|
|
|
|
const CATEGORY_ORDER = [
|
|
"Tech Stack", "Infrastructure", "Database", "API Surface",
|
|
"Frontend", "Auth", "Third-party", "Missing / Gaps",
|
|
];
|
|
|
|
const PROGRESS_STEPS = [
|
|
{ key: "cloning", label: "Cloning repository" },
|
|
{ key: "reading", label: "Reading key files" },
|
|
{ key: "analyzing", label: "Mapping architecture" },
|
|
{ key: "done", label: "Analysis complete" },
|
|
];
|
|
|
|
export function CodeImportMain({
|
|
projectId,
|
|
projectName,
|
|
sourceData,
|
|
analysisResult: initialResult,
|
|
creationStage,
|
|
}: CodeImportMainProps) {
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const workspace = params?.workspace as string;
|
|
|
|
const hasRepo = !!sourceData?.repoUrl;
|
|
const getInitialStage = (): Stage => {
|
|
if (initialResult) return "mapping";
|
|
if (creationStage === "surfaces") return "surfaces";
|
|
if (hasRepo) return "cloning";
|
|
return "input";
|
|
};
|
|
|
|
const [stage, setStage] = useState<Stage>(getInitialStage);
|
|
const [repoUrl, setRepoUrl] = useState(sourceData?.repoUrl ?? "");
|
|
const [progressStep, setProgressStep] = useState<string>("cloning");
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [result, setResult] = useState<AnalysisResult | null>(initialResult ?? null);
|
|
const [confirmedSurfaces, setConfirmedSurfaces] = useState<string[]>(
|
|
initialResult?.suggestedSurfaces ?? []
|
|
);
|
|
|
|
// Kick off analysis when in cloning stage
|
|
useEffect(() => {
|
|
if (stage !== "cloning") return;
|
|
startAnalysis();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [stage]);
|
|
|
|
// Poll for analysis status when cloning
|
|
useEffect(() => {
|
|
if (stage !== "cloning") return;
|
|
const interval = setInterval(async () => {
|
|
try {
|
|
const res = await fetch(`/api/projects/${projectId}/analysis-status`);
|
|
const data = await res.json();
|
|
setProgressStep(data.stage ?? "cloning");
|
|
if (data.stage === "done" && data.analysisResult) {
|
|
setResult(data.analysisResult);
|
|
setConfirmedSurfaces(data.analysisResult.suggestedSurfaces ?? []);
|
|
clearInterval(interval);
|
|
setStage("mapping");
|
|
}
|
|
} catch { /* keep polling */ }
|
|
}, 2500);
|
|
return () => clearInterval(interval);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [stage]);
|
|
|
|
const startAnalysis = async () => {
|
|
setError(null);
|
|
try {
|
|
await fetch(`/api/projects/${projectId}/analyze-repo`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ repoUrl }),
|
|
});
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : "Failed to start analysis");
|
|
setStage("input");
|
|
}
|
|
};
|
|
|
|
const handleConfirmSurfaces = async () => {
|
|
try {
|
|
await fetch(`/api/projects/${projectId}/design-surfaces`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ surfaces: confirmedSurfaces }),
|
|
});
|
|
router.push(`/${workspace}/project/${projectId}/design`);
|
|
} catch { /* navigate anyway */ }
|
|
};
|
|
|
|
const toggleSurface = (s: string) => {
|
|
setConfirmedSurfaces(prev =>
|
|
prev.includes(s) ? prev.filter(x => x !== s) : [...prev, s]
|
|
);
|
|
};
|
|
|
|
// ── Stage: input ──────────────────────────────────────────────────────────
|
|
if (stage === "input") {
|
|
const isValid = repoUrl.trim().startsWith("http");
|
|
return (
|
|
<div style={{ height: "100%", overflow: "auto", display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
|
|
<div style={{ width: "100%", maxWidth: 540, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
|
<div style={{ marginBottom: 28 }}>
|
|
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
|
|
Import your repository
|
|
</h2>
|
|
<p style={{ fontSize: "0.82rem", color: "#a09a90", margin: 0 }}>
|
|
{projectName} — paste a clone URL to map your existing stack.
|
|
</p>
|
|
</div>
|
|
{error && (
|
|
<div style={{ padding: "12px 16px", borderRadius: 8, background: "#fff0f0", border: "1px solid #fca5a5", color: "#991b1b", fontSize: "0.8rem", marginBottom: 16 }}>
|
|
{error}
|
|
</div>
|
|
)}
|
|
<label style={{ display: "block", fontSize: "0.72rem", fontWeight: 600, color: "#6b6560", marginBottom: 6, letterSpacing: "0.02em" }}>
|
|
Repository URL (HTTPS)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={repoUrl}
|
|
onChange={e => setRepoUrl(e.target.value)}
|
|
placeholder="https://github.com/yourorg/your-repo"
|
|
style={{
|
|
width: "100%", padding: "12px 14px", marginBottom: 16,
|
|
borderRadius: 8, border: "1px solid #e0dcd4",
|
|
background: "#faf8f5", fontSize: "0.9rem",
|
|
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#1a1a1a",
|
|
outline: "none", boxSizing: "border-box",
|
|
}}
|
|
onFocus={e => (e.currentTarget.style.borderColor = "#1a1a1a")}
|
|
onBlur={e => (e.currentTarget.style.borderColor = "#e0dcd4")}
|
|
onKeyDown={e => { if (e.key === "Enter" && isValid) setStage("cloning"); }}
|
|
autoFocus
|
|
/>
|
|
<div style={{ fontSize: "0.75rem", color: "#a09a90", marginBottom: 20, lineHeight: 1.55, padding: "12px 14px", background: "#faf8f5", borderRadius: 8, border: "1px solid #f0ece4" }}>
|
|
Atlas will clone and map your stack — tech, database, auth, APIs, and what's missing for a complete go-to-market build.
|
|
</div>
|
|
<button
|
|
onClick={() => { if (isValid) setStage("cloning"); }}
|
|
disabled={!isValid}
|
|
style={{
|
|
width: "100%", padding: "13px", borderRadius: 8, border: "none",
|
|
background: isValid ? "#1a1a1a" : "#e0dcd4",
|
|
color: isValid ? "#fff" : "#b5b0a6",
|
|
fontSize: "0.9rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
|
cursor: isValid ? "pointer" : "not-allowed",
|
|
}}
|
|
>
|
|
Map this repo →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Stage: cloning ────────────────────────────────────────────────────────
|
|
if (stage === "cloning") {
|
|
const currentIdx = PROGRESS_STEPS.findIndex(s => s.key === progressStep);
|
|
return (
|
|
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
|
<div style={{ textAlign: "center", maxWidth: 400 }}>
|
|
<div style={{
|
|
width: 52, height: 52, borderRadius: "50%",
|
|
border: "3px solid #e0dcd4", borderTopColor: "#1a1a1a",
|
|
animation: "vibn-repo-spin 0.85s linear infinite",
|
|
margin: "0 auto 24px",
|
|
}} />
|
|
<style>{`@keyframes vibn-repo-spin { to { transform:rotate(360deg); } }`}</style>
|
|
<h3 style={{ fontSize: "1.1rem", fontWeight: 600, color: "#1a1a1a", margin: "0 0 8px" }}>
|
|
Mapping your codebase
|
|
</h3>
|
|
<p style={{ fontSize: "0.8rem", color: "#a09a90", margin: "0 0 28px" }}>
|
|
{repoUrl || sourceData?.repoUrl || "Repository"}
|
|
</p>
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 8, textAlign: "left" }}>
|
|
{PROGRESS_STEPS.map((step, i) => {
|
|
const done = i < currentIdx;
|
|
const active = i === currentIdx;
|
|
return (
|
|
<div key={step.key} style={{ display: "flex", alignItems: "center", gap: 10 }}>
|
|
<div style={{
|
|
width: 22, height: 22, borderRadius: "50%", flexShrink: 0,
|
|
background: done ? "#1a1a1a" : active ? "#f6f4f0" : "#f6f4f0",
|
|
border: active ? "2px solid #1a1a1a" : done ? "none" : "2px solid #e0dcd4",
|
|
display: "flex", alignItems: "center", justifyContent: "center",
|
|
fontSize: "0.6rem", fontWeight: 700, color: done ? "#fff" : "#a09a90",
|
|
}}>
|
|
{done ? "✓" : active ? <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#1a1a1a", display: "block" }} /> : ""}
|
|
</div>
|
|
<span style={{ fontSize: "0.8rem", fontWeight: active ? 600 : 400, color: done ? "#6b6560" : active ? "#1a1a1a" : "#b5b0a6" }}>
|
|
{step.label}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Stage: mapping ────────────────────────────────────────────────────────
|
|
if (stage === "mapping" && result) {
|
|
const byCategory: Record<string, ArchRow[]> = {};
|
|
for (const row of result.rows) {
|
|
const cat = row.category || "Other";
|
|
if (!byCategory[cat]) byCategory[cat] = [];
|
|
byCategory[cat].push(row);
|
|
}
|
|
const categories = [
|
|
...CATEGORY_ORDER.filter(c => byCategory[c]),
|
|
...Object.keys(byCategory).filter(c => !CATEGORY_ORDER.includes(c)),
|
|
];
|
|
|
|
return (
|
|
<div style={{ height: "100%", overflow: "auto", padding: "32px 40px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
|
<div style={{ maxWidth: 800, margin: "0 auto" }}>
|
|
<div style={{ marginBottom: 24 }}>
|
|
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
|
|
Architecture map
|
|
</h2>
|
|
<p style={{ fontSize: "0.8rem", color: "#a09a90", margin: "0 0 4px" }}>
|
|
{projectName} — {result.summary}
|
|
</p>
|
|
</div>
|
|
|
|
<div style={{ background: "#fff", borderRadius: 12, border: "1px solid #e8e4dc", overflow: "hidden", marginBottom: 24 }}>
|
|
{categories.map((cat, catIdx) => (
|
|
<div key={cat}>
|
|
{catIdx > 0 && <div style={{ height: 1, background: "#f0ece4" }} />}
|
|
<div style={{ padding: "12px 20px", background: "#faf8f5", fontSize: "0.68rem", fontWeight: 700, color: "#6b6560", letterSpacing: "0.06em", textTransform: "uppercase" }}>
|
|
{cat}
|
|
</div>
|
|
{byCategory[cat].map((row, i) => {
|
|
const sc = STATUS_COLORS[row.status];
|
|
return (
|
|
<div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 20px", borderTop: "1px solid #f6f4f0" }}>
|
|
<div style={{ flex: 1, fontSize: "0.82rem", color: "#1a1a1a", fontWeight: 500 }}>{row.item}</div>
|
|
{row.detail && <div style={{ fontSize: "0.75rem", color: "#8a8478", flex: 2 }}>{row.detail}</div>}
|
|
<div style={{ padding: "3px 10px", borderRadius: 4, background: sc.bg, color: sc.text, fontSize: "0.68rem", fontWeight: 700, flexShrink: 0 }}>
|
|
{sc.label}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setStage("surfaces")}
|
|
style={{
|
|
width: "100%", padding: "13px", borderRadius: 8, border: "none",
|
|
background: "#1a1a1a", color: "#fff",
|
|
fontSize: "0.9rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
|
|
}}
|
|
onMouseEnter={e => (e.currentTarget.style.opacity = "0.88")}
|
|
onMouseLeave={e => (e.currentTarget.style.opacity = "1")}
|
|
>
|
|
Choose what to build next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Stage: surfaces ───────────────────────────────────────────────────────
|
|
const SURFACE_OPTIONS = [
|
|
{ id: "marketing", label: "Marketing Site", icon: "◎", desc: "Landing page, pricing, blog" },
|
|
{ id: "web-app", label: "Web App", icon: "⬡", desc: "Core SaaS product with auth" },
|
|
{ id: "admin", label: "Admin Panel", icon: "◫", desc: "Ops dashboard, content management" },
|
|
{ id: "api", label: "API Layer", icon: "⌁", desc: "REST/GraphQL endpoints" },
|
|
];
|
|
|
|
return (
|
|
<div style={{ height: "100%", overflow: "auto", display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
|
|
<div style={{ width: "100%", maxWidth: 540, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
|
<div style={{ marginBottom: 28 }}>
|
|
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
|
|
What should Atlas build?
|
|
</h2>
|
|
<p style={{ fontSize: "0.82rem", color: "#a09a90", margin: 0 }}>
|
|
Based on the gap analysis, Atlas suggests the surfaces below. Confirm or adjust.
|
|
</p>
|
|
</div>
|
|
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 24 }}>
|
|
{SURFACE_OPTIONS.map(s => {
|
|
const selected = confirmedSurfaces.includes(s.id);
|
|
return (
|
|
<button
|
|
key={s.id}
|
|
onClick={() => toggleSurface(s.id)}
|
|
style={{
|
|
padding: "18px", borderRadius: 10, textAlign: "left",
|
|
border: `2px solid ${selected ? "#1a1a1a" : "#e8e4dc"}`,
|
|
background: selected ? "#1a1a1a08" : "#fff",
|
|
cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
|
transition: "all 0.12s",
|
|
}}
|
|
onMouseEnter={e => { if (!selected) e.currentTarget.style.borderColor = "#d0ccc4"; }}
|
|
onMouseLeave={e => { if (!selected) e.currentTarget.style.borderColor = "#e8e4dc"; }}
|
|
>
|
|
<div style={{ fontSize: "1.2rem", marginBottom: 8 }}>{s.icon}</div>
|
|
<div style={{ fontSize: "0.84rem", fontWeight: 700, color: "#1a1a1a", marginBottom: 3 }}>{s.label}</div>
|
|
<div style={{ fontSize: "0.73rem", color: "#8a8478" }}>{s.desc}</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<button
|
|
onClick={handleConfirmSurfaces}
|
|
disabled={confirmedSurfaces.length === 0}
|
|
style={{
|
|
width: "100%", padding: "13px", borderRadius: 8, border: "none",
|
|
background: confirmedSurfaces.length > 0 ? "#1a1a1a" : "#e0dcd4",
|
|
color: confirmedSurfaces.length > 0 ? "#fff" : "#b5b0a6",
|
|
fontSize: "0.9rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
|
cursor: confirmedSurfaces.length > 0 ? "pointer" : "not-allowed",
|
|
}}
|
|
>
|
|
Go to Design →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|